diff options
| author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-10-27 02:31:24 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-10-27 02:31:24 +0300 |
| commit | 980fe00a74a9ad013b945755415ace2e5429c3c2 (patch) | |
| tree | a1c6bb4b302e69bfa53eab13e44500eba55d1696 /files/ru/learn | |
| parent | 374a039b97a11ee7306539d16aaab27fed66b398 (diff) | |
| download | translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.gz translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.bz2 translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.zip | |
[RU] Remove notranslate (#2874)
Diffstat (limited to 'files/ru/learn')
81 files changed, 1261 insertions, 1261 deletions
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 449e24f887..273618ce86 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 @@ -45,10 +45,10 @@ translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_Ap <img alt="Code Editor from Cloud Shell toolbar" src="https://mdn.mozillademos.org/files/15940/Screen%20Shot%202018-05-09%20at%2023.13.21.png" style="height: 590px; width: 3000px;"></li> <li>С помощью drag and drop разместите папку <code>sample-app</code> в левой панели редактора кода.</li> <li>Вернитесь обратно в Cloud Shell и введите следующую команду для перехода в директорию вашего приложения: - <pre class="brush:bash no-line-numbers notranslate" style="margin: 1em 0;">cd sample-app</pre> + <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">cd sample-app</pre> </li> <li>Теперь вы готовы развернуть ваше приложение, т.е. загрузить его в App Engine: - <pre class="brush:bash no-line-numbers notranslate" style="margin: 1em 0;">gcloud app deploy</pre> + <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">gcloud app deploy</pre> </li> <li>Введите число от одного до семи, чтобы выбрать регион, в котором вы хотите разместить своё приложение.</li> <li>Нажмите <code>Y</code> для подтверждения.</li> 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 d5d0f440ba..67059b421c 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 @@ -59,12 +59,12 @@ translation_of: Learn/Common_questions/set_up_a_local_testing_server <li> <p>Откройте командную строку (Windows)/ (OS X/Linux). Для проверки установки Python введите следующую команду:</p> - <pre class="brush: bash notranslate">python -V</pre> + <pre class="brush: bash">python -V</pre> </li> <li> <p>Система вернёт вам номер версии установленной программы. В случае успешного выполнения команды <code>python -V </code> нужно перейти в директорию с вашим проектом, используя команду <code>cd</code>:</p> - <pre class="brush: bash notranslate"># include the directory name to enter it, for example + <pre class="brush: bash"># include the directory name to enter it, for example cd Desktop # use two dots to jump up one directory level if you need to cd ..</pre> @@ -72,7 +72,7 @@ cd ..</pre> <li> <p>Введите команду для запуска сервера в том каталоге:</p> - <pre class="brush: bash notranslate"># If Python version returned above is 3.X + <pre class="brush: bash"># If Python version returned above is 3.X python -m http.server # If Python version returned above is 2.X python -m <code>SimpleHTTPServer</code></pre> 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 cd1ce35f94..a4b5bc0706 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 @@ -124,7 +124,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server <p>It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:</p> -<pre class="brush: bash notranslate">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre> +<pre class="brush: bash">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre> <ul> <li><code>-options</code> is a dash followed by a one or more letters, for example <code>-v</code> for verbose error messages, and <code>-b</code> to make backups. You can see the full list at the <a href="https://linux.die.net/man/1/rsync">rsync man page</a> (search for "Options summary").</li> @@ -140,7 +140,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server <p>Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the <code>-e</code> option. For example:</p> -<pre class="brush: bash notranslate">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre> +<pre class="brush: bash">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre> <p>You can find more details of what is needed at <a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a>.</p> 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 ab427b275c..555908dac6 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 @@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке.</span> <span title="">Если вы обнаружите сложное свойство </span></span><code>background</code><span class="tlid-translation translation" lang="ru"><span title=""> в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } </code> @@ -116,7 +116,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать такие ключевые слова, как <code>top</code> и <code>right</code> (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; @@ -125,7 +125,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p>Допустимы значения <a href="/ru/docs/Web/CSS/размер">длины</a> и <a href="/ru/docs/Web/CSS/percentage">процентные</a>:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; @@ -134,7 +134,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете смешивать значения ключевых слов с длинами или процентами, например:</span></span></p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; @@ -142,7 +142,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <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 { +<pre class="brush: css"><code>.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; @@ -178,7 +178,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <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); +<pre class="brush: css">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> @@ -229,19 +229,19 @@ background-position: 10px 20px, top right;</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border: 1px solid black; } </code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Или мы можем нацеливаться на один край блока, например:</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-top: 1px solid black; } </code></pre> <p>Индивидуальные свойства этих сокращений будут следующими:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-width: 1px; border-style: solid; border-color: black; @@ -249,7 +249,7 @@ background-position: 10px 20px, top right;</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">И более детально:</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-top-width: 1px; border-top-style: solid; border-top-color: black; @@ -269,13 +269,13 @@ background-position: 10px 20px, top right;</pre> <p>Например, чтобы сделать все четыре угла блока радиусом 10px:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-radius: 10px; } </code></pre> <p>Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-top-right-radius: 1em 10%; } </code></pre> 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 e06ed6222c..2f82593f1f 100644 --- a/files/ru/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html @@ -29,7 +29,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p><strong>Селектор потомка</strong> — обычно представляется символом пробела (<code> </code>) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются <dfn>селекторами потомка.</dfn></p> -<pre class="brush: css notranslate">body article p</pre> +<pre class="brush: css">body article p</pre> <p>В приведённом ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом<code>.box</code>.</p> @@ -39,7 +39,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p><strong>Дочерний комбинатор</strong> (<code>></code>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <code><p></code>, которые являются дочерними элементами <code><article></code>, селектор пишется так:</p> -<pre class="brush: css notranslate">article > p</pre> +<pre class="brush: css">article > p</pre> <p>Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <code><li></code>, которые являются прямыми потомками <code><ul></code>, и присвоить им верхнюю границу красного цвета.</p> @@ -51,7 +51,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p>Соседний родственный селектор (<code>+</code>) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <code><img></code> , которые идут сразу после элементов <code><p></code> :</p> -<pre class="brush: css notranslate">p + img</pre> +<pre class="brush: css">p + img</pre> <p>Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <code><h1></code>, и стилизуем его.</p> @@ -63,7 +63,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p>Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (<code>~</code>). Чтобы выбрать все элементы <code><img></code>, которые находятся в <em>любом</em> месте после элементов <code><p></code>, надо указать так:</p> -<pre class="brush: css notranslate">p ~ img</pre> +<pre class="brush: css">p ~ img</pre> <p>В приведённом ниже примере мы выбираем все элементы <code><p></code>, которые идут после <code><h1></code>, и хотя в документе есть также <code><div></code>, тем не менее <code><p></code>, который идёт после него, будет выбран.</p> @@ -73,7 +73,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p>Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <code><ul></code>, можно использовать следующую комбинацию:</p> -<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> +<pre class="brush: css">ul > li[class="a"] { }</pre> <p>Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.</p> diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html index 090f134d91..5bf4b0576c 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -47,7 +47,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в <em>лист селекторов</em>: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка <code>h1</code> и класса <code>.special</code>; я могу написать их так:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: blue; } @@ -57,13 +57,13 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>А могу написать короче — просто отделив селекторы запятыми:</p> -<pre class="brush: css notranslate">h1, .special { +<pre class="brush: css">h1, .special { color: blue; } </pre> <p>Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:</p> -<pre class="brush: css notranslate">h1, +<pre class="brush: css">h1, .special { color: blue; } </pre> @@ -76,7 +76,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>В примере ниже правило для селектора класса не будет работать, в то время как <code>h1</code> будет стилизован.</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: blue; } @@ -86,7 +86,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>Но если мы объединим селекторы, правило не применится ни к <code>h1</code>, ни к классу: оно считается недействительным.</p> -<pre class="brush: css notranslate">h1, ..special { +<pre class="brush: css">h1, ..special { color: blue; } </pre> @@ -98,41 +98,41 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>К этой группе относятся селекторы HTML-элементов, таких как <code><h1></code>.</p> -<pre class="brush: css notranslate">h1 { }</pre> +<pre class="brush: css">h1 { }</pre> <p>К группе относятся и селекторы классов:</p> -<pre class="brush: css notranslate">.box { }</pre> +<pre class="brush: css">.box { }</pre> <p>или селекторы идентификаторов (ID):</p> -<pre class="brush: css notranslate">#unique { }</pre> +<pre class="brush: css">#unique { }</pre> <h3 id="Селекторы_атрибутов">Селекторы атрибутов</h3> <p>Эта группа селекторов позволяет выбирать селекторы, основываясь на <em>наличии</em> у них конкретного атрибута элемента:</p> -<pre class="brush: css notranslate">a[title] { }</pre> +<pre class="brush: css">a[title] { }</pre> <p>или основываясь на <em>значении</em> атрибута:</p> -<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> +<pre class="brush: css">a[href="https://example.com"] { }</pre> <h3 id="Псевдоклассы_псевдоэлементы">Псевдоклассы, псевдоэлементы</h3> <p>К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс <code>:hover</code>, например, применяет правило, только если на элемент наведён курсор мыши</p> -<pre class="brush: css notranslate">a:hover { }</pre> +<pre class="brush: css">a:hover { }</pre> <p>К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, <code>::first-line</code> всегда выбирает первую строку внутри элемента (абзаца <code><p></code> в нашем случае), действуя, как если бы тег <code><span></code> оборачивал первую строку, а затем был стилизован.</p> -<pre class="brush: css notranslate">p::first-line { }</pre> +<pre class="brush: css">p::first-line { }</pre> <h3 id="Комбинаторы">Комбинаторы</h3> <p>И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <code><article></code> с помощью комбинатора дочерних элементов (<code>></code>):</p> -<pre class="brush: css notranslate">article > p { }</pre> +<pre class="brush: css">article > p { }</pre> <h2 id="Продолжение">Продолжение</h2> 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 0dca8d3f9d..dccba5ef04 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 @@ -35,7 +35,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p>Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:</p> -<pre class="notranslate">:<em>pseudo-class-name</em></pre> +<pre>:<em>pseudo-class-name</em></pre> <h3 id="Простой_пример_псевдокласса">Простой пример псевдокласса</h3> @@ -74,7 +74,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p>Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия <code>::</code>.</p> -<pre class="notranslate"><em>::pseudo-element-name</em></pre> +<pre><em>::pseudo-element-name</em></pre> <div class="blockIndicator note"> <p><strong>Примечание</strong>: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.</p> @@ -94,7 +94,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p>Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы <code>:first-child</code> и <code>::first-line</code>. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <code><p>,</code> который находится внутри элемента <code><article></code>.</p> -<pre class="brush: css notranslate"><code>article p:first-child::first-line { +<pre class="brush: css"><code>article p:first-child::first-line { font-size: 120%; font-weight: bold; }</code></pre> 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 6494749f95..9898ab544a 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 @@ -48,7 +48,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se <p><span class="tlid-translation translation" lang="ru"><span title="">Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают.</span></span> Например, если мы хотим выбрать элементы-потомки элемента <code><article></code>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <code><article></code>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс {{cssxref(":first-child")}}, который мы будем изучать в уроке о <a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">псевдоклассах и псевдо-элементах</a>, как селектор-потомок вместе с селектором элемента <code><article></code>: </p> -<pre class="brush: css notranslate">article :first-child { +<pre class="brush: css">article :first-child { font-weight: bold; }</pre> @@ -56,7 +56,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс</span></span> <code>:first-child</code> <span class="tlid-translation translation" lang="ru"><span title="">, чтобы было очевидно, что делает селектор.</span> <span title="">Он выбирает <em>любой</em> элемент, который является первым дочерним элементом элемента</span></span> <code><article></code> или <span class="tlid-translation translation" lang="ru"><span title="">первым дочерним элементом любого потомка</span></span> <span class="tlid-translation translation" lang="ru"><span title="">элемента</span></span> <code><article></code>:</p> -<pre class="brush: css notranslate">article *:first-child { +<pre class="brush: css">article *:first-child { font-weight: bold; } </pre> 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 3fb706e69e..64aca4b04d 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 @@ -128,7 +128,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Предположим, что в элементе есть следующий CSS определяющий <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>:</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { width: 350px; height: 150px; margin: 10px; @@ -153,13 +153,13 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство <code>box-sizing: border-box</code>. С помощью этого вы говорите браузеру о том, что рамка элемента определяется любыми размерами, которые вы устанавливаете.</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { 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> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { box-sizing: border-box; } *, *::before, *::after { 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 d495b04979..689292d9fc 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 @@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <p>В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию <code>rgb()</code>:</p> -<pre class="brush: css notranslate"><code>h1 { +<pre class="brush: css"><code>h1 { color: black; background-color: rgb(197,93,161); } </code> diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index 101646aea2..b675a1ec01 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -52,7 +52,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение {{cssxref ("display")}} в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы {{htmlelement ("article")}}, поэтому мы устанавливаем это значение на {{htmlelement ("section")}} (который становится flex контейнером):</p> -<pre class="brush: css notranslate">section { +<pre class="brush: css">section { display: flex; }</pre> @@ -85,7 +85,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Попробуйте добавить следующую строчку в ваш файл:</p> -<pre class="brush: css notranslate">flex-direction: column</pre> +<pre class="brush: css">flex-direction: column</pre> <p>Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.</p> @@ -101,7 +101,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить - это добавить следующее свойство:</p> -<pre class="brush: css notranslate">flex-wrap: wrap</pre> +<pre class="brush: css">flex-wrap: wrap</pre> <p>Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:</p> @@ -115,12 +115,12 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>На этом этапе нужно заметить, что существует сокращение для свойств {{cssxref("flex-direction")}} и {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Например, вы можете заменить</p> -<pre class="brush: css notranslate">flex-direction: row; +<pre class="brush: css">flex-direction: row; flex-wrap: wrap;</pre> <p>на</p> -<pre class="brush: css notranslate">flex-flow: row wrap;</pre> +<pre class="brush: css">flex-flow: row wrap;</pre> <h2 id="Гибкое_изменение_размеров_flex_элементов">Гибкое изменение размеров flex элементов</h2> @@ -128,7 +128,7 @@ flex-wrap: wrap;</pre> <p>Прежде всего, добавим следующее правило в конец вашего CSS кода:</p> -<pre class="brush: css notranslate">article { +<pre class="brush: css">article { flex: 1; }</pre> @@ -136,7 +136,7 @@ flex-wrap: wrap;</pre> <p>Теперь добавьте следующее правило в строку после предыдущего:</p> -<pre class="brush: css notranslate">article:nth-of-type(3) { +<pre class="brush: css">article:nth-of-type(3) { flex: 2; }</pre> @@ -144,7 +144,7 @@ flex-wrap: wrap;</pre> <p>Вы также можете указать минимальный размер внутри значения flex. Попробуйте изменить существующие правила, добавив размеры:</p> -<pre class="brush: css notranslate">article { +<pre class="brush: css">article { flex: 1 200px; } @@ -180,7 +180,7 @@ article:nth-of-type(3) { <p>Теперь добавьте следующую строку в низ кода CSS:</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { display: flex; align-items: center; justify-content: space-around; @@ -198,7 +198,7 @@ article:nth-of-type(3) { <p>Вы можете переопределить {{cssxref("align-items")}} поведение для отдельных flex элементов, применив свойство {{cssxref("align-self")}} к ним. Например, попробуйте добавить эти строки в код:</p> -<pre class="brush: css notranslate">button:first-child { +<pre class="brush: css">button:first-child { align-self: flex-end; }</pre> @@ -222,7 +222,7 @@ article:nth-of-type(3) { <p>Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:</p> -<pre class="brush: css notranslate">button:first-child { +<pre class="brush: css">button:first-child { order: 1; }</pre> @@ -237,7 +237,7 @@ article:nth-of-type(3) { <p>Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:</p> -<pre class="brush: css notranslate">button:last-child { +<pre class="brush: css">button:last-child { order: -1; }</pre> @@ -249,7 +249,7 @@ article:nth-of-type(3) { <p>HTML для этого довольно простой. У нас есть элемент {{htmlelement ("section")}}, содержащий три {{htmlelement ("article")}}. Третий {{htmlelement ("article")}} содержит ещё три {{htmlelement ("div")}}.</p> -<pre class="notranslate">section - article +<pre>section - article article article - div - button div button @@ -261,13 +261,13 @@ article:nth-of-type(3) { <p>Прежде всего, мы устанавливаем дочерние элементы {{htmlelement ("section")}} в виде flex блоков.</p> -<pre class="brush: css notranslate">section { +<pre class="brush: css">section { display: flex; }</pre> <p>Затем мы устанавливаем несколько значений на самих {{htmlelement ("article")}}. Обратите внимание на второе правило: мы устанавливаем третий {{htmlelement ("article")}}, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.</p> -<pre class="brush: css notranslate">article { +<pre class="brush: css">article { flex: 1 200px; } @@ -280,7 +280,7 @@ article:nth-of-type(3) { <p>Затем мы берём первый {{htmlelement ("div")}}. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы {{htmlelement ("button")}}) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.</p> -<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child { +<pre class="brush: css">article:nth-of-type(3) div:first-child { flex: 1 100px; display: flex; flex-flow: row wrap; @@ -290,7 +290,7 @@ article:nth-of-type(3) { <p>Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p> -<pre class="brush: css notranslate">button { +<pre class="brush: css">button { flex: 1; margin: 5px; font-size: 18px; diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index 195ffe4374..3106fe50a2 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -38,7 +38,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:</p> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -50,7 +50,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>А теперь примените следующий CSS для вашего HTML (используя элемент {{htmlelement("style")}} или {{htmlelement("link")}} на отдельный файл <code>.css</code> — на ваше усмотрение):</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -67,7 +67,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Если вы сохраните и обновите сейчас, то <span class="tlid-translation translation" lang="ru"><span title="">вы увидите нечто похожее на то, чего ожидаете </span></span>— блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу <code>.box</code>:</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { float: left; margin-right: 15px; width: 150px; @@ -83,7 +83,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_1">Float Example 1</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -94,7 +94,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -124,7 +124,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Добавьте класс <code>special</code> к первому параграфу текста, тот который непосредственно следует за обтекаемым блоком, далее добавьте следующие правила в ваш CSS. Они дадут нашему параграфу цвет фона.</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -137,7 +137,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_2">Float Example 2</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -147,7 +147,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -183,7 +183,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Добавьте класс <code>cleared</code> ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:</p> -<pre class="brush: css notranslate">.cleared { +<pre class="brush: css">.cleared { clear: left; } </pre> @@ -192,7 +192,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_3">Float Example 3</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -203,7 +203,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -247,7 +247,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в {{htmlelement("div")}} с классом <code>wrapper</code>.</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box">Float</div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> @@ -256,7 +256,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>В вашем CSS добавьте следующее правило для класса <code>.wrapper</code> и обновите страницу:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -264,7 +264,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>В добавок удалите класс <code>.cleared</code>:</p> -<pre class="brush: css notranslate" id="ct-0">.cleared { +<pre class="brush: css" id="ct-0">.cleared { clear: left; }</pre> @@ -274,7 +274,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_4">Float Example 4</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -285,7 +285,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -321,7 +321,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Добавьте следующий CSS в наш пример:</p> -<pre class="brush: css notranslate">.wrapper::after { +<pre class="brush: css">.wrapper::after { content: ""; clear: both; display: block; @@ -333,7 +333,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_5">Float Example 5</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -343,7 +343,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -383,7 +383,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте <code>overflow: auto</code> к правилу для обёртки. Блок снова должен быть очищен.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -394,7 +394,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_6">Float Example 6</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -404,7 +404,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -439,7 +439,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Современный способ решения этой проблемы — это использование значения <code>flow-root</code> свойства <code>display</code>. Он существует только для создания BFC без использования хака — не будет возникать <span class="tlid-translation translation" lang="ru"><span title="">непреднамеренных </span></span>последствий, когда вы используете его. Удалите <code>overflow: auto</code> из вашего правила <code>.wrapper</code> и добавьте <code>display: flow-root</code>. <span class="tlid-translation translation" lang="ru"><span title="">Если предположить,</span></span> что у вас <a href="/en-US/docs/Web/CSS/display#Browser_compatibility">поддерживающий браузер</a>, блок будет очищаться.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -450,7 +450,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_7">Float Example 7</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -460,7 +460,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html index cfdfcd3c83..89129aff25 100644 --- a/files/ru/learn/css/css_layout/grids/index.html +++ b/files/ru/learn/css/css_layout/grids/index.html @@ -60,7 +60,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <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"> +<pre class="brush: html"><div class="wrapper"> <div class="row"> <div class="col">1</div> <div class="col">2</div> @@ -89,7 +89,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <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">* { +<pre class="brush: css">* { box-sizing: border-box; } @@ -105,7 +105,7 @@ body { <p>Теперь используйте контейнер строк, который обёрнут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:</p> -<pre class="brush: css notranslate">.row { +<pre class="brush: css">.row { clear: both; }</pre> @@ -115,7 +115,7 @@ body { <p>Нам нужно вычесть это из нашей общей ширины 960 пикселей, что даёт нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса <code>.col</code>, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:</p> -<pre class="brush: css notranslate">.col { +<pre class="brush: css">.col { float: left; margin-left: 20px; width: 60px; @@ -132,7 +132,7 @@ body { <p>Добавьте нижеследующую часть вашего CSS:</p> -<pre class="brush: css notranslate">/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */ +<pre class="brush: css">/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */ .col.span2 { width: 140px; } / * Три ширины столбца (180 пикселей) плюс две ширины желоба (40 пикселей) * / .col.span3 { width: 220px; } @@ -155,7 +155,7 @@ body { <p>Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом:</p> -<pre class="brush: css notranslate"><div class="row"> +<pre class="brush: css"><div class="row"> <div class="col span8">13</div> <div class="col span4">14</div> </div></pre> @@ -168,17 +168,17 @@ body { <p>Уравнение, которое превращает фиксированную ширину в гибкую, основанную на процентах, выглядит следующим образом.</p> -<pre class="notranslate">target / context = result</pre> +<pre>target / context = result</pre> <p>Для нашей ширины столбца наша <strong>целевая ширина</strong> составляет 60 пикселей, а наш <strong>контекст</strong> 960 пикселей. Для расчёта процента мы можем использовать следующее.</p> -<pre class="notranslate">60 / 960 = 0.0625</pre> +<pre>60 / 960 = 0.0625</pre> <p>Затем мы перемещаем десятичные точки на 2 места, давая нам процент от 6,25%. Таким образом, в нашем CSS мы можем заменить ширину столбца 60 пикселей на 6,25%.</p> <p>Мы должны сделать то же самое с нашей шириной желоба:</p> -<pre class="notranslate">20 / 960 = 0.02083333333</pre> +<pre>20 / 960 = 0.02083333333</pre> <p>Поэтому нам нужно заменить 20 пикселей {{cssxref ("margin-left")}} на наше правило <code>.col</code> 20 пикселей {{cssxref ("padding-right")}} на <code>.wrapper </code>с 2.08333333%.</p> @@ -188,7 +188,7 @@ body { <p>Обновите второе правило CSS (с помощью селектора <code>.wrapper</code>) следующим образом:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 980px; margin: 0 auto; @@ -202,7 +202,7 @@ body { <p>Затем обновите четвёртое правило CSS (с селектором <code>.col</code>) следующим образом:</p> -<pre class="brush: css notranslate">.col { +<pre class="brush: css">.col { float: left; margin-left: 2.08333333%; width: 6.25%; @@ -213,7 +213,7 @@ body { <p>Обновите нижний блок правил CSS следующим образом:</p> -<pre class="brush: css notranslate">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ +<pre class="brush: css">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ .col.span2 { width: 14.58333333%; } /* Three column widths (18.75%) plus two gutter widths (4.1666666) */ .col.span3 { width: 22.91666666%; } @@ -240,13 +240,13 @@ body { <p>В любом случае, вернёмся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция <code>calc () </code>позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:</p> -<pre class="brush: css notranslate">.col.span4 { +<pre class="brush: css">.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }</pre> <p>Попробуйте заменить нижний блок правил следующим, а затем перезагрузите его в браузере, чтобы узнать, получаете ли вы тот же результат:</p> -<pre class="brush: css notranslate">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } .col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } @@ -272,7 +272,7 @@ body { <p>Это не единственный подход. Вместо этого вы можете выбрать свою сетку, а затем добавить информацию о размерах в правила для существующих семантических классов. Например, если у вас есть {{htmlelement ("div")}} с классом <code>content</code> в нем, который вы хотите разбить на 8 столбцов, вы можете скопировать по ширине из класса <code>span8</code>, предоставив вам следующее правило:</p> -<pre class="brush: css notranslate">.content { +<pre class="brush: css">.content { width: calc((6.25%*8) + (2.08333333%*7)); }</pre> @@ -290,23 +290,23 @@ body { <p>Давайте создадим класс в нашем CSS, который будет смещать элемент контейнера на одну ширину столбца. Добавьте нижеследующую часть вашего CSS:</p> -<pre class="brush: css notranslate">.offset-by-one { +<pre class="brush: css">.offset-by-one { margin-left: calc(6.25% + (2.08333333%*2)); }</pre> <p>Или если вы предпочитаете самостоятельно рассчитать проценты, используйте это:</p> -<pre class="brush: css notranslate">.offset-by-one { +<pre class="brush: css">.offset-by-one { margin-left: 10.41666666%; }</pre> <p>Теперь вы можете добавить этот класс в любой контейнер, в котором вы хотите оставить пустое пространство с одним столбцом в левой части окна. Например, если у вас есть это в вашем HTML:</p> -<pre class="brush: html notranslate"><div class="col span6">14</div></pre> +<pre class="brush: html"><div class="col span6">14</div></pre> <p>Попробуйте заменить его на</p> -<pre class="brush: html notranslate"><div class="col span5 offset-by-one">14</div></pre> +<pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> <div class="note"> <p><strong>Примечание</strong>: Обратите внимание, что вам необходимо уменьшить количество столбцов, чтобы освободить место для смещения!</p> @@ -334,7 +334,7 @@ body { <p>Однако flexbox никогда не разрабатывался как сетчатая система и создаёт новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (<code>wrapper</code>), <code>row</code> и <code>col</code> классов:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 980px; margin: 0 auto; @@ -387,7 +387,7 @@ body { <p>Включите скелет и нормализуйте CSS на странице HTML, добавив следующее в голову:</p> -<pre class="brush: html notranslate"><link href="normalize.css" rel="stylesheet"> +<pre class="brush: html"><link href="normalize.css" rel="stylesheet"> <link href="skeleton.css" rel="stylesheet"></pre> <p>Скелет включает в себя больше, чем сетку - он также содержит CSS для типографики и других элементов страницы, которые вы можете использовать в качестве отправной точки. На данный момент мы оставим их по умолчанию, но именно эта сетка нас действительно интересует.</p> @@ -398,7 +398,7 @@ body { <p>Мы будем использовать аналогичный HTML для нашего предыдущего примера. Добавьте в свой HTML-код следующее:</p> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="row"> <div class="col">1</div> <div class="col">2</div> @@ -426,7 +426,7 @@ body { <p>Вы можете посмотреть в файле skeleton.css, чтобы увидеть CSS, который используется, когда мы применяем этот класс. <code><div></code> центрируется с использованием <code>auto</code> левого и правого полей, а отступы в 20 пикселей применяются слева и справа. Скелет также устанавливает свойство {{cssxref ("box-sizing")}} в <code>border-box</code>, как мы делали это раньше, поэтому дополнение и границы этого элемента будут включены в общую ширину.</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { position: relative; width: 100%; max-width: 960px; @@ -441,7 +441,7 @@ body { <p>Добавьте их сейчас, как показано в следующем фрагменте:</p> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="row"> <div class="one column">1</div> <div class="one column">2</div> @@ -452,7 +452,7 @@ body { <p>Затем дайте контейнеры во втором классе классов, объясняющие количество столбцов, которые они должны охватывать, например:</p> -<pre class="brush: html notranslate"><div class="row"> +<pre class="brush: html"><div class="row"> <div class="one column">13</div> <div class="six columns">14</div> <div class="three columns">15</div> @@ -467,7 +467,7 @@ body { <p>Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца».</p> -<pre class="brush: css notranslate">.three.columns { width: 22%; }</pre> +<pre class="brush: css">.three.columns { width: 22%; }</pre> <p>Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределённых классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчёт этих процентов.</p> @@ -491,7 +491,7 @@ body { <p>Сначала начните с создания локальной копии файла <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid.html">css-grid.html</a>. Он содержит следующую разметку:</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> @@ -514,7 +514,7 @@ body { <p>Теперь добавьте следующее в элемент {{htmlelement ("style")}}:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { width: 90%; max-width: 960px; margin: 0 auto; @@ -539,13 +539,13 @@ body { <p>Чтобы создать контейнеры, которые охватывают несколько треков столбцов в сетке, мы можем использовать свойство {{cssxref ("grid-column")}}. Чтобы охватить 6 столбцов, например:</p> -<pre class="brush: css notranslate">.span6 { +<pre class="brush: css">.span6 { grid-column: auto / span 6; }</pre> <p>И для span 3:</p> -<pre class="brush: css notranslate">.span3 { +<pre class="brush: css">.span3 { grid-column: auto / span 3; }</pre> @@ -553,7 +553,7 @@ body { <p>Добавьте нижеследующую часть вашего CSS:</p> -<pre class="brush: css notranslate">.span2 { grid-column: auto / span 2;} +<pre class="brush: css">.span2 { grid-column: auto / span 2;} .span3 { grid-column: auto / span 3;} .span4 { grid-column: auto / span 4;} .span5 { grid-column: auto / span 5;} @@ -571,7 +571,7 @@ body { <p>Вы можете проверить это, заменив последние 4 col <code><div></code> s следующим:</p> -<pre class="brush: css notranslate"><div class="col">13some<br>content</div> +<pre class="brush: css"><div class="col">13some<br>content</div> <div class="col span6">14this<br>is<br>more<br>content</div> <div class="col span3">15this<br>is<br>less</div> <div class="col span2">16</div></pre> @@ -590,17 +590,17 @@ body { <p>С сетками CSS нам не нужно толкать вещи вдоль полей, чтобы их компенсировать. Попробуйте внести эти изменения в свой CSS:</p> -<pre class="brush: css notranslate">.content { +<pre class="brush: css">.content { grid-column: 2 / 8; }</pre> -<pre class="brush: html notranslate"><div class="col span2 content">16</div></pre> +<pre class="brush: html"><div class="col span2 content">16</div></pre> <p>Контейнер 16 теперь будет охватывать столбцы с 2 по 8, в следующей доступной строке, где он может поместиться.</p> <p>Мы можем так же легко группировать строки так же, как и столбцы:</p> -<pre class="brush: css notranslate">.content { +<pre class="brush: css">.content { grid-column: 2 / 8; grid-row: 3 / 5; }</pre> diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html index e8da5eafd9..2fbf873cce 100644 --- a/files/ru/learn/css/css_layout/introduction/index.html +++ b/files/ru/learn/css/css_layout/introduction/index.html @@ -41,7 +41,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>Нормальный поток (Normal flow) это то как ваш браузер отображает по умолчанию, когда вы не меняли расположение элементов на странице. Взглянем на пример:</p> -<pre class="brush: html notranslate"><p>I love my cat.</p> +<pre class="brush: html"><p>I love my cat.</p> <ul> <li>Buy cat food</li> @@ -95,7 +95,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Flexbox_Example_1">Flexbox Example 1</h6> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -105,12 +105,12 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -128,7 +128,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Flexbox_Example_2">Flexbox Example 2</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -138,7 +138,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; } @@ -147,7 +147,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -171,7 +171,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Grid_example_1">Grid example 1</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -181,7 +181,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; @@ -189,7 +189,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -208,7 +208,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Grid_example_2">Grid example 2</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -218,7 +218,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; @@ -241,7 +241,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -276,7 +276,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Floats_example">Floats example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -296,7 +296,7 @@ p { </pre> </div> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -304,7 +304,7 @@ p { </pre> -<pre class="brush: css notranslate"> +<pre class="brush: css"> .box { float: left; width: 150px; @@ -340,7 +340,7 @@ p { <p>Для ознакомления с этими методами вёрстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:</p> -<pre class="brush: html notranslate"><h1>Positioning</h1> +<pre class="brush: html"><h1>Positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">I am a basic block level element.</p> @@ -348,7 +348,7 @@ p { <p>Этот HTML по умолчанию будет стилизован, используя следующий CSS:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -370,7 +370,7 @@ p { <p>Относительное (Relative) позиционирование позволяет вам смещать элемент относительно положения, которое он бы имел по умолчанию в нормальном потоке. Это значит, что вы можете выполнить такую задачу как перемещение иконки немного вниз, так чтобы он был на одной линии с текстовой меткой. Чтобы сделать это, мы можем добавить следующее правило для добавления относительного позиционирования.</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: relative; top: 30px; left: 30px; @@ -384,13 +384,13 @@ p { <div class="hidden"> <h6 id="Relative_positioning_example">Relative positioning example</h6> -<pre class="brush: html notranslate"><h1>Relative positioning</h1> +<pre class="brush: html"><h1>Relative positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">This is my relatively positioned element.</p> <p>I am a basic block level element.</p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -405,7 +405,7 @@ p { </pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: relative; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); @@ -422,7 +422,7 @@ p { <p>Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS-правило, чтобы реализовать абсолютное позиционирование:</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: absolute; top: 30px; left: 30px; @@ -434,13 +434,13 @@ p { <div class="hidden"> <h6 id="Absolute_positioning_example">Absolute positioning example</h6> -<pre class="brush: html notranslate"><h1>Absolute positioning</h1> +<pre class="brush: html"><h1>Absolute positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">This is my absolutely positioned element.</p> <p>I am a basic block level element.</p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -455,7 +455,7 @@ p { </pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: absolute; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); @@ -474,7 +474,7 @@ p { <p>Для этого примера наш HTML это три параграфа текста для того, чтобы мы могли прокручивать страницу и блок, которому мы дадим <code>position: fixed</code>.</p> -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> +<pre class="brush: html"><h1>Fixed positioning</h1> <div class="positioned">Fixed</div> @@ -487,7 +487,7 @@ p { <div class="hidden"> <h6 id="Fixed_positioning_example">Fixed positioning example</h6> -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> +<pre class="brush: html"><h1>Fixed positioning</h1> <div class="positioned">Fixed</div> @@ -499,7 +499,7 @@ p { </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -513,7 +513,7 @@ p { }</pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: fixed; top: 30px; left: 30px; @@ -530,7 +530,7 @@ p { <div class="hidden"> <h6 id="Sticky_positioning_example">Sticky positioning example</h6> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html"><h1>Sticky positioning</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -540,7 +540,7 @@ p { <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -554,7 +554,7 @@ p { }</pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: sticky; top: 30px; left: 30px; @@ -577,7 +577,7 @@ p { <p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в {{htmlelement("div")}}, для целей вёрстки.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>First of all, tell us your name and age.</p> <div> <label for="fname">First name:</label> @@ -597,7 +597,7 @@ p { <p>Вы заметите, что параграфу с описанием дано <code>display: table-caption;</code> — что заставляет его вести себя как табличный {{htmlelement("caption")}} — а <code>caption-side: bottom;</code> для того чтобы указать описанию располагаться снизу таблицы в целях дизайна, не смотря на то что разметка находится до <code><input></code> элементов в источнике. Это обеспечивает гибкостью.</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -647,7 +647,7 @@ form p { <p>В примере ниже мы начинаем с HTML блоком, который содержится в элементе <code><div></code> с классом <code>container</code>.</p> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Multi-column layout</h1> <p>Paragraph 1.</p> @@ -662,7 +662,7 @@ form p { <div class="hidden"> <h6 id="Multicol_example">Multicol example</h6> -<pre class="brush: html notranslate"> <div class="container"> +<pre class="brush: html"> <div class="container"> <h1>Multi-column Layout</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -673,10 +673,10 @@ form p { </div> </pre> -<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre> </div> -<pre class="brush: css notranslate"> .container { +<pre class="brush: css"> .container { column-width: 200px; }</pre> </div> 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 14b11aadda..0d798584af 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 @@ -35,7 +35,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству <code>column-count</code> столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-count: 3; } </pre> @@ -46,7 +46,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="column-count_example">column-count example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -55,7 +55,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто </pre> </div> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -71,7 +71,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто </div> </pre> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-count: 3; } </pre> @@ -81,7 +81,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>Измените ваш CSS чтобы использовать следующий <code>column-width</code>:</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 200px; } </pre> @@ -92,14 +92,14 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="column-width_example">column-width example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; }</pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -115,7 +115,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто </div></pre> </div> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 200px; } </pre> @@ -134,14 +134,14 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>Используя ваш пример выше, измените размер отступа добавлением свойства <code>column-gap</code>:</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 200px; column-gap: 20px; }</pre> <p>Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи <code>column-rule</code>. Таким же способом как и свойство {{cssxref("border")}} с которым вы сталкивались в предыдущих уроках, <code>column-rule</code> — это короткая запись {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} и {{cssxref("column-rule-width")}} и принимает те же значения что и <code>border</code>.</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); @@ -153,7 +153,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="Styling_the_columns">Styling the columns</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -165,7 +165,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто column-rule: 4px dotted rgb(79, 185, 227); }</pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -198,7 +198,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="Spanning_the_columns">Spanning the columns</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -217,7 +217,7 @@ h2 { } </pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -248,7 +248,7 @@ h2 { <div class="hidden"> <h6 id="Cards_example">Cards example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -256,7 +256,7 @@ h2 { } </pre> </div> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="card"> <h2>I am the heading</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -315,7 +315,7 @@ h2 { </div> </pre> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 250px; column-gap: 20px; } @@ -334,7 +334,7 @@ h2 { <p>В настоящее время также стоит добавлять старое свойство <code>page-break-inside: avoid</code> для лучшей поддержки старых браузеров.</p> -<pre class="brush: css notranslate">.card { +<pre class="brush: css">.card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207,232,220); @@ -350,14 +350,14 @@ h2 { <div class="hidden"> <h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } </pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="card"> <h2>I am the heading</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -417,7 +417,7 @@ h2 { </pre> </div> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 250px; column-gap: 20px; } 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 40f9cdc675..dab4f83142 100644 --- a/files/ru/learn/css/css_layout/normal_flow/index.html +++ b/files/ru/learn/css/css_layout/normal_flow/index.html @@ -45,7 +45,7 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток <p>Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:</p> <div id="Normal_Flow"> -<pre class="brush: html notranslate"><h1>Базовый поток документа</h1> +<pre class="brush: html"><h1>Базовый поток документа</h1> <p>Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на новой строке подо мной.</p> @@ -55,7 +55,7 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток <p>Строчные элементы <span>такие как этот</span> и <span>этот</span> находятся на одной линии с другими, и смежным текстом, если есть пространство. Строчные элементы, что не влезают <span>переходят на новую строку если это возможно (как этот текст)</span>если же это невозможно, они переходят на новую строку, как это изображение: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html index 565bd6577a..e30c51cee9 100644 --- a/files/ru/learn/css/css_layout/positioning/index.html +++ b/files/ru/learn/css/css_layout/positioning/index.html @@ -38,11 +38,11 @@ translation_of: Learn/CSS/CSS_layout/Positioning <p>Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте <code>class</code> <code>positioned</code> ко второму {{htmlelement("p")}} в HTML:</p> -<pre class="brush: html notranslate"><p class="positioned"> ... </p></pre> +<pre class="brush: html "><p class="positioned"> ... </p></pre> <p>А теперь добавьте следующее правило в конец вашего CSS:</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css ">.positioned { position: static; background: yellow; }</pre> @@ -57,7 +57,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning <p>Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление <code>position</code> в вашем коде:</p> -<pre class="brush: css notranslate">position: relative;</pre> +<pre class="brush: css ">position: relative;</pre> <p>Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} которые мы объясним в следующем разделе.</p> @@ -65,7 +65,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning <p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} используются вместе с {{cssxref("position")}} чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу <code>.positioned</code> в вашем CSS:</p> -<pre class="brush: css notranslate">top: 30px; +<pre class="brush: css ">top: 30px; left: 30px;</pre> <div class="note"> @@ -75,7 +75,7 @@ left: 30px;</pre> <p>Если вы сейчас сохраните и обновите, вы получите примерно такой результат:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Relative positioning</h1> +<pre class="brush: html "><h1>Relative positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -85,7 +85,7 @@ left: 30px;</pre> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; } @@ -122,12 +122,12 @@ span { <p>Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:</p> -<pre class="brush: css notranslate">position: absolute;</pre> +<pre class="brush: css ">position: absolute;</pre> <p>Если вы сохраните и обновите, то вы должны увидеть нечто подобное:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Absolute positioning</h1> +<pre class="brush: html "><h1>Absolute positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -137,7 +137,7 @@ span { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; } @@ -188,12 +188,12 @@ span { <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> +<pre class="brush: css ">position: relative;</pre> <p>Это должно дать следующий результат:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Positioning context</h1> +<pre class="brush: html "><h1>Positioning context</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -203,7 +203,7 @@ span { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; position: relative; @@ -243,7 +243,7 @@ span { <p>Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:</p> -<pre class="brush: css notranslate">p:nth-of-type(1) { +<pre class="brush: css ">p:nth-of-type(1) { position: absolute; background: lime; top: 10px; @@ -258,12 +258,12 @@ span { <p>Для того чтобы изменить порядок наложения, попробуйте объявить для вашего <code>p:nth-of-type(1)</code> правила:</p> -<pre class="brush: css notranslate">z-index: 1;</pre> +<pre class="brush: css ">z-index: 1;</pre> <p>Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>z-index</h1> +<pre class="brush: html "><h1>z-index</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -273,7 +273,7 @@ span { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; position: relative; @@ -324,7 +324,7 @@ p:nth-of-type(1) { <p>А теперь, обновите правило <code>body</code> удалив объявление <code>position: relative;</code> и добавьте фиксированную высоту как тут:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; height: 1400px; margin: 0 auto; @@ -332,7 +332,7 @@ p:nth-of-type(1) { <p>Теперь мы собираемся дать элементу {{htmlelement("h1")}} <code>position: fixed;</code>, а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css ">h1 { position: fixed; top: 0; width: 500px; @@ -345,14 +345,14 @@ p:nth-of-type(1) { <p>Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, <span class="tlid-translation translation" lang="ru"><span title="">при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним.</span></span> Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:</p> -<pre class="brush: css notranslate">p:nth-of-type(1) { +<pre class="brush: css ">p:nth-of-type(1) { margin-top: 60px; }</pre> <p>Теперь вы должны видеть законченный пример:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> +<pre class="brush: html "><h1>Fixed positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -362,7 +362,7 @@ p:nth-of-type(1) { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; height: 1400px; margin: 0 auto; @@ -407,7 +407,7 @@ p:nth-of-type(1) { <div class="hidden"> <h6 id="Sticky_positioning_example">Sticky positioning example</h6> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html "><h1>Sticky positioning</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -417,7 +417,7 @@ p:nth-of-type(1) { <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; } @@ -431,7 +431,7 @@ p:nth-of-type(1) { }</pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css ">.positioned { position: sticky; top: 30px; left: 30px; @@ -442,7 +442,7 @@ p:nth-of-type(1) { <p>Интересное и общее использование <code>position: sticky</code> <span class="tlid-translation translation" lang="ru"><span title="">заключается </span></span>в создании индексных страниц <span class="tlid-translation translation" lang="ru"><span title="">с прокруткой, где разные заголовки липнут к верху страницы</span></span>, когда они достигают его. Разметка такого примера может выглядеть так:</p> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html "><h1>Sticky positioning</h1> <dl> <dt>A</dt> @@ -475,7 +475,7 @@ p:nth-of-type(1) { <p>CSS может выглядеть как показано ниже. В нормальном потоке элементы {{htmlelement("dt")}} будут прокручиваться вместе с контентом. Когда мы добавляем <code>position: sticky</code> к элементу {{htmlelement("dt")}}, вместе со значением {{cssxref("top")}} 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.</p> -<pre class="brush: css notranslate">dt { +<pre class="brush: css ">dt { background-color: black; color: white; padding: 10px; @@ -488,7 +488,7 @@ p:nth-of-type(1) { <div id="Sticky_2"> <div class="hidden"> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; height: 1400px; margin: 0 auto; @@ -505,7 +505,7 @@ dt { } </pre> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html "><h1>Sticky positioning</h1> <dl> <dt>A</dt> 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 55be5d624f..66e2244aaa 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -88,7 +88,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору <code>.container</code> только если эти две вещи истины.</p> -<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { +<pre class="brush: css"><code>@media screen and (min-width: 800px) { .container { margin: 1em 2em; } @@ -109,12 +109,12 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <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><code>target / context = result </code> </pre> <p>Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.</p> -<pre class="brush: css notranslate"><code>.col { +<pre class="brush: css"><code>.col { width: 6.25%; /* 60 / 960 = 0.0625 */ } </code> </pre> @@ -145,14 +145,14 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>Самый старый из этих методов — это multicol, когда вы задаёте <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-count: 3; } </code> </pre> <p>Если вместо этого вы зададите <code>column-width</code>, то вы определите <em>минимальную </em>ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-width: 10em; } </code> </pre> @@ -163,7 +163,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись <code>flex: 1</code> как описано в главе <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">Flexbox: Гибкое изменение размеров flex элементов</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: flex; } @@ -180,7 +180,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <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 { +<pre class="brush: css"><code>.container { display: grid; grid-template-columns: 1fr 1fr 1fr; } </code> @@ -194,7 +194,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <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 { +<pre class="brush: css"><code>img { max-width: 100%; } </code> </pre> @@ -213,7 +213,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум <code>1200px</code>.</p> -<pre class="brush: css notranslate"><code>html { +<pre class="brush: css"><code>html { font-size: 1em; } @@ -252,7 +252,7 @@ h1 { <p>An interesting approach is to use the viewport unit <code>vw</code> to enable responsive typography. <code>1vw</code> is equal to one percent of the viewport width, meaning that if you set your font size using <code>vw</code>, it will always relate to the size of the viewport.</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 6vw; }</pre> @@ -260,7 +260,7 @@ h1 { <p>There is a solution, and it involves using <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. If you add the <code>vw</code> unit to a value set using a fixed size such as <code>em</code>s or <code>rem</code>s then the text will still be zoomable. Essentially, the <code>vw</code> unit adds on top of that zoomed value:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: calc(1.5rem + 3vw); }</pre> @@ -274,7 +274,7 @@ h1 { <p>If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <code><head></code> of the document.</p> -<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> </pre> <p>This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.</p> 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 a358eaf98b..325c5e56ae 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 @@ -46,7 +46,7 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS <p>Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением <code>.css</code>, и ссылка на него из HTML-элемента <code><link></code>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -61,7 +61,7 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS <p>Файл CSS может выглядеть следующим образом:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: blue; background-color: yellow; border: 1px solid black; @@ -75,7 +75,7 @@ p { <p>В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:</p> -<pre class="brush: html notranslate"><!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --> +<pre class="brush: html"><!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --> <link rel="stylesheet" href="styles/style.css"> <!-- Файл — внутри под-директории <em>styles</em> внутри под-под-директории <em>general</em> и так далее --> @@ -90,7 +90,7 @@ p { <p>Таким образом, HTML будет выглядеть вот так:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -119,7 +119,7 @@ p { <p>Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте <code>style</code>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -141,7 +141,7 @@ p { <p>index.html:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> @@ -157,7 +157,7 @@ p { <p>styles.css:</p> -<pre class="brush: css notranslate">/* Пишите сюда свой код */ +<pre class="brush: css">/* Пишите сюда свой код */ p { color: red; @@ -177,7 +177,7 @@ p { <p>Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:</p> -<pre class="brush: css notranslate">h1 /* это селектор тегов */ +<pre class="brush: css">h1 /* это селектор тегов */ a:link /* это селектор ссылок */ .manythings /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */ #onething /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */ @@ -195,7 +195,7 @@ h1, h2, .intro /* перечисление селекторов */ <p>Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента <code>p</code> — он будет синим; также я задал класс, который сделает элемент красным:</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { color: red; } @@ -205,11 +205,11 @@ p { <p>А теперь допустим, что в нашем HTML-коде у нас есть абзац <code>p</code> с классом <code>special</code>. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?</p> -<pre class="brush: html notranslate"><p class="special">Какого же я цвета?</p></pre> +<pre class="brush: html"><p class="special">Какого же я цвета?</p></pre> <p>В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются <strong>каскадами</strong>, или <strong>спецификациями</strong>. В примере ниже мы задали два правила для селектора <code>p</code>, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; } @@ -274,9 +274,9 @@ p { <p>Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию <code>calc()</code>. Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:</p> <div id="calc_example"> -<pre class="brush: html notranslate"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> +<pre class="brush: html"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> -<pre class="brush: css notranslate">.outer { +<pre class="brush: css">.outer { border: 5px solid black; } @@ -297,9 +297,9 @@ p { <p>В следующем примере будут различные значения для свойства {{cssxref("<transform>")}} <code>rotate()</code>.</p> <div id="transform_example"> -<pre class="brush: html notranslate"><div class="box"></div></pre> +<pre class="brush: html"><div class="box"></div></pre> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { margin: 30px; width: 100px; height: 100px; @@ -324,13 +324,13 @@ p { <p>До сих пор не сталкивались мы с правилами <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> (произносится как <em>эт-рулс</em>, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил <code>@rules</code> простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать <code>@import</code>:</p> -<pre class="brush: css notranslate">@import 'styles2.css';</pre> +<pre class="brush: css">@import 'styles2.css';</pre> <p>Чаще других встречается <code>@rules</code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> под названием </span></font><code>@media</code>: оно позволяет вам использовать <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиавыражения</a>, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).</p> <p>Ниже у нас CSS-файл, в котором значение заднего фона элемента <code><body></code> равно <code>pink</code>. Однако после мы добавили правило <code>@media</code>, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background-color: pink; } @@ -350,7 +350,7 @@ p { <p>К примеру, это строка (комментарий не в счёт):</p> -<pre class="brush: css notranslate">/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются +<pre class="brush: css">/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах значения добавляются в порядке верх(низ)–право–лево. В двузначных стенограммах значения добавляются @@ -359,7 +359,7 @@ padding: 10px 15px 15px 5px;</pre> <p>делает то же самое, что и эти четыре, вместе взятые:</p> -<pre class="brush: css notranslate">padding-top: 10px; +<pre class="brush: css">padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; @@ -367,18 +367,18 @@ padding-left: 5px; <p>или эти:</p> -<pre class="brush: cpp notranslate">padding-block-start: 10px +<pre class="brush: cpp">padding-block-start: 10px padding-inline-end: 15px; padding-block-end: 15px; padding-inline-start: 5px;</pre> <p>в то время как строка:</p> -<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> +<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> <p>делает то же, что и эти строки:</p> -<pre class="brush: css notranslate">background-color: red; +<pre class="brush: css">background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; @@ -398,7 +398,7 @@ background-scroll: fixed;</pre> <p>Комментарии в CSS начинаются с <code>/*</code> и окачиваются с <code>*/</code>. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.</p> -<pre class="brush: css notranslate">/* Работаю над основными элементами */ +<pre class="brush: css">/* Работаю над основными элементами */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% Helvetica, Arial, sans-serif; @@ -435,7 +435,7 @@ div p + p { <p>Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора <code>.special</code>.</p> -<pre class="brush: css notranslate">/*.special { +<pre class="brush: css">/*.special { color: red; }*/ @@ -451,7 +451,7 @@ p { <p>В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; @@ -486,7 +486,7 @@ div p + p { <p id="Very_compact">То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:</p> -<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +<pre class="brush: css">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} @@ -500,12 +500,12 @@ div p + p {padding-top: 0;} <p>Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:</p> -<pre class="brush: css notranslate">margin: 0 auto; +<pre class="brush: css">margin: 0 auto; padding-left: 10px;</pre> <p>А такие объявления не действительны:</p> -<pre class="brush: css notranslate">margin: <strong>0auto</strong>; +<pre class="brush: css">margin: <strong>0auto</strong>; <strong>padding- left</strong>: 10px;</pre> <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 b5d03c7cea..208a451be4 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 @@ -59,7 +59,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Возьмём следующий пример:</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Let's use: <span>Cascading</span> <span>Style</span> @@ -69,7 +69,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>В DOM-дереве узел, соответствующий элементу <code><p></code>, — это родительский элемент. Его дочерние элементы — текст и три элемента <code><span></code>. Узлы <code>SPAN</code> также будут родителями — с текстом в качестве дочерних элементов:</p> -<pre class="notranslate">P +<pre>P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" @@ -84,14 +84,14 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p> <div class="hidden"> -<pre class="brush: css notranslate">p {margin:0;}</pre> +<pre class="brush: css">p {margin:0;}</pre> </div> <h2 id="Добавление_CSS_в_DOM">Добавление CSS в DOM</h2> <p>Допустим, мы добавили таблицу стилей к нашему примеру:</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Let's use: <span>Cascading</span> <span>Style</span> @@ -100,7 +100,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>А вот CSS-код:</p> -<pre class="brush: css notranslate">span { +<pre class="brush: css">span { border: 1px solid black; background-color: lime; }</pre> @@ -126,9 +126,9 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Ниже я использовал британское написание слова <em>color</em>, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.</p> <div id="Skipping_example"> -<pre class="brush: html notranslate"><p> I want this text to be large, bold and blue.</p></pre> +<pre class="brush: html"><p> I want this text to be large, bold and blue.</p></pre> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-weight: bold; colour: blue; /* некорректное написание свойства цвета */ font-size: 200%; @@ -141,7 +141,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают <code>calc()</code> как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции <code>calc()</code>, равной <code>100% - 50px</code>. Старые браузеры используют пиксельное значение, потому что не распознают <code>calc()</code>. Новые браузеры используют <code>calc()</code> так как эта строка появляется позже в каскаде.</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { width: 500px; width: calc(100% - 50px); }</pre> diff --git a/files/ru/learn/css/styling_text/fundamentals/index.html b/files/ru/learn/css/styling_text/fundamentals/index.html index 270aec1251..cc24a192c5 100644 --- a/files/ru/learn/css/styling_text/fundamentals/index.html +++ b/files/ru/learn/css/styling_text/fundamentals/index.html @@ -45,7 +45,7 @@ translation_of: Learn/CSS/Styling_text/Fundamentals <p>Давайте сразу перейдём к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:</p> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -64,14 +64,14 @@ occasion such as this that he did.</p></pre> <p><code>color</code> can accept any <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>, for example:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; }</pre> <p>This will cause the paragraphs to become red, rather than the standard browser default black, like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -89,7 +89,7 @@ occasion such as this that he did.</p></pre> <p>To set a different font on your text, you use the {{cssxref("font-family")}} property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser {{anch("Default fonts", "default font")}}. A simple example looks like so:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-family: arial; }</pre> @@ -200,7 +200,7 @@ occasion such as this that he did.</p></pre> <p>Since you can't guarantee the availability of the fonts you want to use on your webpages (even a web font <em>could</em> fail for some reason), you can supply a <strong>font stack</strong> so that the browser has multiple fonts it can choose from. This simply involves a <code>font-family</code> value consisting of multiple font names separated by commas, e.g.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-family: "Trebuchet MS", Verdana, sans-serif; }</pre> @@ -216,7 +216,7 @@ occasion such as this that he did.</p></pre> <p>Let's add to our previous example, giving the paragraphs a sans-serif font:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; font-family: Helvetica, Arial, sans-serif; }</pre> @@ -224,7 +224,7 @@ occasion such as this that he did.</p></pre> <p>This gives us the following result:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -252,7 +252,7 @@ occasion such as this that he did.</p></pre> <p>Things become more tricky when you start altering the font size of nested elements. For example, if you had an {{htmlelement("article")}} element in your page, and set its <code>font-size</code> to 1.5 <code>em</code> (which would compute to 24 <code>px</code> final size), and then wanted the paragraphs inside the <code><article></code> elements to have a computed font size of 20 <code>px</code>, what <code>em</code> value would you use?</p> -<pre class="brush: html notranslate"><!-- document base font-size is 16px --> +<pre class="brush: html"><!-- document base font-size is 16px --> <article> <!-- If my font-size is 1.5em --> <p>My paragraph</p> <!-- How do I compute to 20px font-size? --> </article></pre> @@ -266,7 +266,7 @@ occasion such as this that he did.</p></pre> <p>Our new result is like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -279,7 +279,7 @@ occasion such as this that he did.</p> </pre> </div> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -338,7 +338,7 @@ p { <p>Our new result is like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -351,7 +351,7 @@ occasion such as this that he did.</p> </pre> </div> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -376,7 +376,7 @@ p { <p>You can apply drop shadows to your text using the {{cssxref("text-shadow")}} property. This takes up to four values, as shown in the example below:</p> -<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre> +<pre class="brush: css">text-shadow: 4px 4px 5px red;</pre> <p>The four properties are as follows:</p> @@ -391,7 +391,7 @@ p { <p>You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:</p> -<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red, +<pre class="brush: css">text-shadow: 1px 1px 1px red, 2px 2px 1px red;</pre> <p>If we applied this to the {{htmlelement("h1")}} element in our Tommy the cat example, we'd end up with this:</p> @@ -399,7 +399,7 @@ p { <div class="hidden"> <h5 id="Hidden_example1">Hidden example1</h5> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -411,7 +411,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -457,7 +457,7 @@ p { <p>If we applied <code>text-align: center;</code> to the {{htmlelement("h1")}} in our example, we'd end up with this:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -469,7 +469,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -498,14 +498,14 @@ p { <p>The {{cssxref("line-height")}} property sets the height of each line of text — this can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the <code>line-height</code>. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you'd use this:</p> -<pre class="brush: css notranslate">line-height: 1.6;</pre> +<pre class="brush: css">line-height: 1.6;</pre> <p>Applying this to the {{htmlelement("p")}} elements in our example would give us this result:</p> <div class="hidden"> <h5 id="Hidden_example2">Hidden example2</h5> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -517,7 +517,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -549,7 +549,7 @@ p { <p>So as an example, we could apply some word- and letter-spacing to the first line of each {{htmlelement("p")}} element in our example:</p> -<pre class="brush: css notranslate">p::first-line { +<pre class="brush: css">p::first-line { letter-spacing: 4px; word-spacing: 4px; }</pre> @@ -557,7 +557,7 @@ p { <p>Let's add some to our example, like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -569,7 +569,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -650,7 +650,7 @@ p { <p>A full example would look like this:</p> -<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> +<pre class="brush: css">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> <h2 id="Active_learning_Playing_with_styling_text">Active learning: Playing with styling text</h2> @@ -661,7 +661,7 @@ p { <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>HTML Input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>Some sample text for your delight</p> @@ -682,7 +682,7 @@ p { </div> </pre> -<pre class="brush: js notranslate">const htmlInput = document.querySelector(".html-input"); +<pre class="brush: js">const htmlInput = document.querySelector(".html-input"); const cssInput = document.querySelector(".css-input"); const reset = document.getElementById("reset"); let htmlCode = htmlInput.value; 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 96223649fe..ff9882f958 100644 --- a/files/ru/learn/css/styling_text/web_fonts/index.html +++ b/files/ru/learn/css/styling_text/web_fonts/index.html @@ -29,7 +29,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Как мы рассматривали в <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальной стилизации текста и шрифта</a>, шрифты применённые к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; }</pre> @@ -41,14 +41,14 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:</p> -<pre class="brush: css notranslate">@font-face { +<pre class="brush: css">@font-face { font-family: "myFont"; src: url("myFont.woff"); }</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:</span></span></p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: "myFont", "Bitstream Vera Serif", serif; }</pre> @@ -122,7 +122,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <li>Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:</li> </ol> -<pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre> +<pre class="brush: css">font-family: 'zantrokeregular', serif;</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы должны получить демо-страницу с какими-то реализованными симпатичными шрифтами. Поскольку различные шрифты создаются в разных размерах, вам может понадобиться настроить размер, интервалы и т.д., чтобы отладить внешний вид.</span></span></p> @@ -155,7 +155,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Давайте исследуем тот <code>@font-face</code> синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:</p> -<pre class="brush: css notranslate">@font-face { +<pre class="brush: css">@font-face { font-family: 'ciclefina'; src: url('fonts/cicle_fina-webfont.eot'); src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), diff --git a/files/ru/learn/forms/basic_native_form_controls/index.html b/files/ru/learn/forms/basic_native_form_controls/index.html index 434004757c..539a45fdbb 100644 --- a/files/ru/learn/forms/basic_native_form_controls/index.html +++ b/files/ru/learn/forms/basic_native_form_controls/index.html @@ -101,7 +101,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Пример базового одностраничного текстового поля:</p> -<pre class="brush: html notranslate"><input type="text" id="comment" name="comment" value="I'm a text field"></pre> +<pre class="brush: html"><input type="text" id="comment" name="comment" value="I'm a text field"></pre> <p>Однострочное текстовое поле имеет только одно настоящее ограничение: если вы вводите текст с разрывами строки, браузер удаляет эти разрывы строк перед отправкой данных.</p> @@ -113,7 +113,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Этот тип поля устанавливается со значением <code>email</code> для атрибута {{htmlattrxref("type","input")}}:</p> -<pre class="brush: html notranslate"><input type="email" id="email" name="email" multiple></pre> +<pre class="brush: html"><input type="email" id="email" name="email" multiple></pre> <p>Когда используется этот <code>type</code>, пользователь должен ввести в поле валидный адрес электронной почты; любое другое содержание будет отображено браузером при отправке формы как ошибка. Заметьте, что это проверка ошибок на стороне клиента, выполняемая браузером:</p> @@ -131,7 +131,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>This type of field is set using the value <code>password</code> for the {{htmlattrxref("type","input")}} attribute:</p> -<pre class="brush: html notranslate"><input type="password" id="pwd" name="pwd"></pre> +<pre class="brush: html"><input type="password" id="pwd" name="pwd"></pre> <p>It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.</p> @@ -143,7 +143,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>This type of field is set by using the value <code>search</code> for the {{htmlattrxref("type","input")}} attribute:</p> -<pre class="brush: html notranslate"><input type="search" id="search" name="search"></pre> +<pre class="brush: html"><input type="search" id="search" name="search"></pre> <p>The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.</p> @@ -153,7 +153,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>This type of field is set using <code>tel</code> as the value of the {{htmlattrxref("type","input")}} attribute:</p> -<pre class="brush: html notranslate"><input type="tel" id="tel" name="tel"></pre> +<pre class="brush: html"><input type="tel" id="tel" name="tel"></pre> <p>Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.</p> @@ -161,7 +161,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>This type of field is set using the value <code>url</code> for the {{htmlattrxref("type","input")}} attribute:</p> -<pre class="brush: html notranslate"><input type="url" id="url" name="url"></pre> +<pre class="brush: html"><input type="url" id="url" name="url"></pre> <p>It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.</p> @@ -175,7 +175,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.</p> -<pre class="brush: html notranslate"><textarea cols="30" rows="10"></textarea></pre> +<pre class="brush: html"><textarea cols="30" rows="10"></textarea></pre> <p>The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).</p> @@ -236,7 +236,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.</p> -<pre class="brush: html notranslate"><select id="simple" name="simple"> +<pre class="brush: html"><select id="simple" name="simple"> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> @@ -244,7 +244,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:</p> -<pre class="brush: html notranslate"><select id="groups" name="groups"> +<pre class="brush: html"><select id="groups" name="groups"> <optgroup label="fruits"> <option>Banana</option> <option selected>Cherry</option> @@ -269,7 +269,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.</p> -<pre class="brush: html notranslate"><select multiple id="multi" name="multi"> +<pre class="brush: html"><select multiple id="multi" name="multi"> <option>Banana</option> <option>Cherry</option> <option>Lemon</option> @@ -287,7 +287,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.</p> -<pre class="brush: html notranslate"><label for="myFruit">What's your favorite fruit?</label> +<pre class="brush: html"><label for="myFruit">What's your favorite fruit?</label> <input type="text" name="myFruit" id="myFruit" list="mySuggestion"> <datalist id="mySuggestion"> <option>Apple</option> @@ -312,7 +312,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>To handle this, here is a little trick to provide a nice fallback for those browsers:</p> -<pre class="brush:html; notranslate"><label for="myFruit">What is your favorite fruit? (With fallback)</label> +<pre class="brush:html;"><label for="myFruit">What is your favorite fruit? (With fallback)</label> <input type="text" id="myFruit" name="fruit" list="fruitList"> <datalist id="fruitList"> @@ -363,7 +363,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>checkbox</code>.</p> -<pre class="brush: html notranslate"><input type="checkbox" checked id="carrots" name="carrots" value="carrots"> +<pre class="brush: html"><input type="checkbox" checked id="carrots" name="carrots" value="carrots"> </pre> <p>Including the <code>checked</code> attribute makes the checkbox checked automatically when the page loads.</p> @@ -374,11 +374,11 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <p>A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>radio</code>.</p> -<pre class="brush: html notranslate"><input type="radio" checked id="soup" name="meal"></pre> +<pre class="brush: html"><input type="radio" checked id="soup" name="meal"></pre> <p>Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.</p> -<pre class="brush: html notranslate"><fieldset> +<pre class="brush: html"><fieldset> <legend>What is your favorite meal?</legend> <ul> <li> @@ -419,7 +419,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <h3 id="submit">submit</h3> -<pre class="brush: html notranslate"><button type="submit"> +<pre class="brush: html"><button type="submit"> This a <br><strong>submit button</strong> </button> @@ -427,7 +427,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <h3 id="reset">reset</h3> -<pre class="brush: html notranslate"><button type="reset"> +<pre class="brush: html"><button type="reset"> This a <br><strong>reset button</strong> </button> @@ -435,7 +435,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <h3 id="anonymous">anonymous</h3> -<pre class="brush: html notranslate"><button type="button"> +<pre class="brush: html"><button type="button"> This an <br><strong>anonymous button</strong> </button> @@ -473,7 +473,7 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <h4 id="Example">Example</h4> -<pre class="brush: html notranslate"><input type="number" name="age" id="age" min="1" max="10" step="2"></pre> +<pre class="brush: html"><input type="number" name="age" id="age" min="1" max="10" step="2"></pre> <p>This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.</p> @@ -487,19 +487,19 @@ original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм <h4 id="Example_2">Example</h4> -<pre class="brush: html notranslate"><input type="range" name="beans" id="beans" min="0" max="500" step="10"></pre> +<pre class="brush: html"><input type="range" name="beans" id="beans" min="0" max="500" step="10"></pre> <p>This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.</p> <p>One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.</p> -<pre class="brush: html notranslate"><label for="beans">How many beans can you eat?</label> +<pre class="brush: html"><label for="beans">How many beans can you eat?</label> <input type="range" name="beans" id="beans" min="0" max="500" step="10"> <span class="beancount"></span></pre> <p>This can be implemented using some simple JavaScript:</p> -<pre class="brush: js notranslate">var beans = document.querySelector('#beans'); +<pre class="brush: js">var beans = document.querySelector('#beans'); var count = document.querySelector('.beancount'); count.textContent = beans.value; @@ -522,29 +522,29 @@ beans.oninput = function() { <p>This creates a widget to display and pick a date with time, but without any specific time zone information.</p> -<pre class="brush: html notranslate"><input type="datetime-local" name="datetime" id="datetime"></pre> +<pre class="brush: html"><input type="datetime-local" name="datetime" id="datetime"></pre> <h4 id="month"><code>month</code></h4> <p>This creates a widget to display and pick a month with a year.</p> -<pre class="brush: html notranslate"><input type="month" name="month" id="month"></pre> +<pre class="brush: html"><input type="month" name="month" id="month"></pre> <h4 id="time"><code>time</code></h4> <p>This creates a widget to display and pick a time value.</p> -<pre class="brush: html notranslate"><input type="time" name="time" id="time"></pre> +<pre class="brush: html"><input type="time" name="time" id="time"></pre> <h4 id="week"><code>week</code></h4> <p>This creates a widget to display and pick a week number and its year.</p> -<pre class="brush: html notranslate"><input type="week" name="week" id="week"></pre> +<pre class="brush: html"><input type="week" name="week" id="week"></pre> <p>All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</p> -<pre class="brush: html notranslate"><label for="myDate">When are you available this summer?</label> +<pre class="brush: html"><label for="myDate">When are you available this summer?</label> <input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate"></pre> <p>Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.</p> @@ -555,7 +555,7 @@ beans.oninput = function() { <p>A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>color</code>.</p> -<pre class="brush: html notranslate"><input type="color" name="color" id="color"></pre> +<pre class="brush: html"><input type="color" name="color" id="color"></pre> <p>Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.</p> @@ -577,7 +577,7 @@ beans.oninput = function() { <p>In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.</p> -<pre class="brush: html notranslate"><input type="file" name="file" id="file" accept="image/*" multiple></pre> +<pre class="brush: html"><input type="file" name="file" id="file" accept="image/*" multiple></pre> <h3 id="Hidden_content">Hidden content</h3> @@ -585,7 +585,7 @@ beans.oninput = function() { <p>If you create such an element, it's required to set its <code>name</code> and <code>value</code> attributes:</p> -<pre class="brush: html notranslate"><input type="hidden" id="timestamp" name="timestamp" value="1286705410"></pre> +<pre class="brush: html"><input type="hidden" id="timestamp" name="timestamp" value="1286705410"></pre> <h3 id="Image_button">Image button</h3> @@ -593,7 +593,7 @@ beans.oninput = function() { <p>An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>image</code>. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.</p> -<pre class="brush: html notranslate"><input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> +<pre class="brush: html"><input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> <p>If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:</p> @@ -604,7 +604,7 @@ beans.oninput = function() { <p>So for example when you click on the image of this widget, you are sent to a URL like the following:</p> -<pre class="notranslate">http://foo.com?pos.x=123&pos.y=456</pre> +<pre>http://foo.com?pos.x=123&pos.y=456</pre> <p>This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a> article.</p> @@ -616,7 +616,7 @@ beans.oninput = function() { <p>A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.</p> -<pre class="brush: html notranslate"><progress max="100" value="75">75/100</progress></pre> +<pre class="brush: html"><progress max="100" value="75">75/100</progress></pre> <p>This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.</p> @@ -653,7 +653,7 @@ beans.oninput = function() { <p>Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.</p> -<pre class="brush: html notranslate"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> +<pre class="brush: html"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> <p>The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p> 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 35b2bcd2c4..1b53b6ece5 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 @@ -52,7 +52,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>Небольшой пример:</p> -<pre class="brush:html; notranslate"><form> +<pre class="brush:html;"><form> <fieldset> <legend>Fruit juice size</legend> <p> @@ -84,7 +84,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>В предыдущей статье мы увидели, что элемент {{HTMLElement("label")}} принято использовать для указания текстов-подсказок (лейблов) в HTML-формах. Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предыдущей статьи:</p> -<pre class="brush: html notranslate"><label for="name">Name:</label> <input type="text" id="name" name="user_name"></pre> +<pre class="brush: html"><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> @@ -92,7 +92,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>Обратите внимание на то, что виджет формы может быть вложен в элемент {{HTMLElement("label")}}, как на примере:</p> -<pre class="brush: html notranslate"><label for="name"> +<pre class="brush: html"><label for="name"> Name: <input type="text" id="name" name="user_name"> </label></pre> @@ -104,7 +104,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>Например:</p> -<pre class="brush:html; notranslate"><form> +<pre class="brush:html;"><form> <p> <label for="taste_1">I like cherry</label> <input type="checkbox" id="taste_1" name="taste_cherry" value="1"> @@ -125,7 +125,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <p>Рассмотрим этот пример:</p> -<pre class="brush: html notranslate"><p>Required fields are followed by <abbr title="required">*</abbr>.</p> +<pre class="brush: html"><p>Required fields are followed by <abbr title="required">*</abbr>.</p> <!-- Тогда это: --> <div> @@ -186,19 +186,19 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <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> <li>Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента {{htmlelement("head")}}: - <pre class="brush: html notranslate"><link href="payment-form.css" rel="stylesheet"></pre> + <pre class="brush: html"><link href="payment-form.css" rel="stylesheet"></pre> </li> <li>Далее начните создавать свою форму с добавления внешнего элемента {{htmlelement("form")}}: - <pre class="brush: html notranslate"><form> + <pre class="brush: html"><form> </form></pre> </li> <li>Внутри тега <code><form></code>, добавьте заголовок и параграф, информирующий пользователей о том, как помечены поля, обязательные для заполнения: - <pre class="brush: html notranslate"><h1>Payment form</h1> + <pre class="brush: html"><h1>Payment form</h1> <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p></pre> </li> <li>Далее нам надо добавить более крупный кусок кода под нашей предыдущей записью. Здесь вы можете увидеть, что мы оборачиваем поля с контактной информацией в отдельный элемент {{htmlelement("section")}}. Более того, у нас есть набор из двух радио-кнопок, каждую из которых мы помещаем в отдельный элемент списка ({{htmlelement("li")}}). Наконец, у нас есть два текстовых поля {{htmlelement("input")}} и связанные с ними элементы {{htmlelement("label")}}, которые находятся внутри элементов {{htmlelement("p")}}, а также поле для ввода пароля. Добавьте этот код в вашу форму: - <pre class="brush: html notranslate"><section> + <pre class="brush: html"><section> <h2>Contact information</h2> <fieldset> <legend>Title</legend> @@ -243,7 +243,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <li>Сейчас мы перейдём к второму разделу <code><section></code> нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега <code><p></code>. Первый — это выпадающее меню ({{htmlelement("select")}}) для выбора типа кредитной карты. Второй — это элемент <code><input></code> с типом <code>number</code> для ввода номера карты. Последний виджет — это элемент <code><input></code> с типом <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">date</span></font> для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье <a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a>.<br> <br> Вставьте следующий код под предыдущим разделом: - <pre class="brush: html notranslate"><section> + <pre class="brush: html"><section> <h2>Payment information</h2> <p> <label for="card"> @@ -273,7 +273,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form </section></pre> </li> <li>Последняя секция, которую мы добавим выглядит намного проще и содержит в себе только элемент {{htmlelement("button")}} с типом <code>submit</code>, для отправки данных. Добавьте этот код в конец вашей формы: - <pre class="brush: html notranslate"><p> <button type="submit">Validate the payment</button> </p></pre> + <pre class="brush: html"><p> <button type="submit">Validate the payment</button> </p></pre> </li> </ol> 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 d152e456b0..3a7f169575 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 @@ -45,19 +45,19 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <p>В этом примере данные отправляются на абсолютный URL — <code>http://foo.com</code>:</p> -<pre class="brush: html notranslate"><form action="http://foo.com"></pre> +<pre class="brush: html"><form action="http://foo.com"></pre> <p>Здесь мы используем относительный URL - данные отправляются на другой URL на сервере:</p> -<pre class="brush: html notranslate"><form action="/somewhere_else"></pre> +<pre class="brush: html"><form action="/somewhere_else"></pre> <p>Если атрибуты не указаны, как показано ниже, данные из формы {{HTMLElement("form")}} отправляются на ту же страницу, на которой размещается данная форма:</p> -<pre class="brush: html notranslate"><form></pre> +<pre class="brush: html"><form></pre> <p>Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут {{htmlattrxref("action", "form")}} был обязательным. Это больше не нужно.</p> -<pre class="brush: html notranslate"><form action="#"></pre> +<pre class="brush: html"><form action="#"></pre> <div class="note"> <p><strong>Примечание:</strong> Можно указать URL, который использует протокол HTTPS (безопасный HTTP). Когда вы делаете это, данные шифруются вместе с остальной частью запроса, даже если сама форма размещается на небезопасной странице, доступ к которой осуществляется через HTTP. С другой стороны, если форма размещается на защищённой странице, но вы указываете небезопасный URL-адрес HTTP с атрибутом {{htmlattrxref("action","form")}}, все браузеры выдают пользователю предупреждение о безопасности при каждой попытке отправки данных, поскольку данные не шифруются.</p> @@ -75,7 +75,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <p>Рассмотрим следующую форму:</p> -<pre class="brush: html notranslate"><form action="http://foo.com" method="get"> +<pre class="brush: html"><form action="http://foo.com" method="get"> <div> <label for="say">What greeting do you want to say?</label> <input name="say" id="say" value="Hi"> @@ -100,7 +100,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн <p>HTTP-запрос имеет следующий вид:</p> -<pre class="notranslate">GET /?say=Hi&to=Mom HTTP/2.0 +<pre>GET /?say=Hi&to=Mom HTTP/2.0 Host: foo.com</pre> <div class="note"> @@ -113,7 +113,7 @@ Host: foo.com</pre> <p>Давайте рассмотрим пример — это та же самая форма, которую мы рассматривали в разделе <code>GET</code> выше, но с атрибутом {{htmlattrxref("method","form")}}, установленным в <code>post</code>.</p> -<pre class="brush: html notranslate"><form action="http://foo.com" method="post"> +<pre class="brush: html"><form action="http://foo.com" method="post"> <div> <label for="say">What greeting do you want to say?</label> <input name="say" id="say" value="Hi"> @@ -129,7 +129,7 @@ Host: foo.com</pre> <p>Когда форма отправляется с использованием метода <code>POST</code>, данные добавляются не к URL-адресу, а включаются в тело запроса. HTTP-запрос имеет следующий вид:</p> -<pre class="notranslate">POST / HTTP/2.0 +<pre>POST / HTTP/2.0 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 @@ -173,7 +173,7 @@ say=Hi&to=Mom</pre> <p><a href="https://php.net/">PHP</a> предлагает несколько глобальных объектов для доступа к данным. Например, вы используете <code>POST</code>-метод, в приведённом ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо ещё.</p> -<pre class="brush: php notranslate"><?php +<pre class="brush: php"><?php // The global $_POST variable allows you to access the data sent with the POST method by name // To access the data sent with the GET method, you can use $_GET $say = htmlspecialchars($_POST['say']); @@ -194,7 +194,7 @@ say=Hi&to=Mom</pre> <p>Этот пример показывает, как вы можете использовать Python для решения той же задачи — отобразить отправленные данные на странице. В этом примере используется <a href="http://flask.pocoo.org/">Flask framework</a> для визуализации шаблонов, поддерживающих форму отправки данных (смотри <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p> -<pre class="brush: python notranslate">from flask import Flask, render_template, request +<pre class="brush: python">from flask import Flask, render_template, request app = Flask(__name__) @@ -256,7 +256,7 @@ if __name__ == "__main__": <p>Пример:</p> -<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> <div> <label for="file">Choose a file</label> <input type="file" id="file" name="myFile"> 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 fb58b4f06f..ecea212980 100644 --- a/files/ru/learn/forms/sending_forms_through_javascript/index.html +++ b/files/ru/learn/forms/sending_forms_through_javascript/index.html @@ -52,11 +52,11 @@ original_slug: Learn/HTML/Forms/Sending_forms_through_JavaScript <p>Посмотрите на пример:</p> -<pre class="brush: html notranslate"><button>Click Me!</button></pre> +<pre class="brush: html"><button>Click Me!</button></pre> <p>И на JavaScript:</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); function sendData( data ) { console.log( 'Sending data' ); @@ -119,11 +119,11 @@ btn.addEventListener( 'click', function() { <h4 id="Using_a_standalone_FormData_object">Using a standalone FormData object</h4> -<pre class="brush: html notranslate"><button>Click Me!</button></pre> +<pre class="brush: html"><button>Click Me!</button></pre> <p>You should be familiar with that HTML sample. Now for the JavaScript:</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); function sendData( data ) { const XHR = new XMLHttpRequest(), @@ -165,7 +165,7 @@ btn.addEventListener( 'click', function() <p>The HTML is typical:</p> -<pre class="brush: html notranslate"><form id="myForm"> +<pre class="brush: html"><form id="myForm"> <label for="myName">Send me your name:</label> <input id="myName" name="name" value="John"> <input type="submit" value="Send Me!"> @@ -173,7 +173,7 @@ btn.addEventListener( 'click', function() <p>But JavaScript takes over the form:</p> -<pre class="brush: js notranslate">window.addEventListener( "load", function () { +<pre class="brush: js">window.addEventListener( "load", function () { function sendData() { const XHR = new XMLHttpRequest(); @@ -224,7 +224,7 @@ btn.addEventListener( 'click', function() <p>In the following example, we use the {{domxref("FileReader")}} API to access binary data and then build the multi-part form data request by hand:</p> -<pre class="brush: html notranslate"><form id="theForm"> +<pre class="brush: html"><form id="theForm"> <p> <label for="theText">text data:</label> <input id="theText" name="myText" value="Some text data" type="text"> @@ -238,7 +238,7 @@ btn.addEventListener( 'click', function() <p>As you see, the HTML is a standard <code><form></code>. There's nothing magical going on. The "magic" is in the JavaScript:</p> -<pre class="brush: js notranslate">// Because we want to access DOM nodes, +<pre class="brush: js">// Because we want to access DOM nodes, // we initialize our script at page load. window.addEventListener( 'load', function () { diff --git a/files/ru/learn/forms/your_first_form/index.html b/files/ru/learn/forms/your_first_form/index.html index 1aaa49894e..66462534e2 100644 --- a/files/ru/learn/forms/your_first_form/index.html +++ b/files/ru/learn/forms/your_first_form/index.html @@ -60,7 +60,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p>Создание форм начинается с элемента {{HTMLelement("form")}}:</p> -<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> </form></pre> @@ -89,7 +89,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p>В терминах HTML нам нужен код наподобие представленного ниже, чтобы добавить виджеты форм:</p> -<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> <ul> <li> <label for="name">Name:</label> @@ -121,11 +121,11 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p>Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <code><input></code> и <code><textarea></textarea></code>. Это одна из странностей HTML. Тег <code><input></code> — это пустой элемент, то есть он не нуждается в закрывающем теге. {{HTMLElement("textarea")}} — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента {{HTMLElement("input")}} вам необходимо использовать атрибут <code>value</code> следующим образом:</p> -<pre class="brush:html; notranslate"><input type="text" value="по умолчанию в этом элементе находится этот текст" /></pre> +<pre class="brush:html;"><input type="text" value="по умолчанию в этом элементе находится этот текст" /></pre> <p>Если вы хотите определить значение по умолчанию для HTML-элемента {{HTMLElement("textarea")}}, вам просто нужно поместить это начальное значение между открывающим и закрывающим тегами:</p> -<pre class="brush:html; notranslate"><textarea> +<pre class="brush:html;"><textarea> по умолчанию в этом элементе находится этот текст </textarea></pre> @@ -133,7 +133,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p>Разметка нашей формы почти готова, но нам ещё необходимо добавить кнопку, которая позволит пользователю отправлять или "представлять" информацию после заполнения формы. Это делается с помощью HTML-элемента {{HTMLelement("button")}}. Необходимо добавить следующий код перед закрывающим тегом <code></form></code>:</p> -<pre class="brush:html; notranslate"><li class="button"> +<pre class="brush:html;"><li class="button"> <button type="submit">Send your message</button> </li></pre> @@ -163,13 +163,13 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма <p>Сначала необходимо добавить HTML-элемент {{htmlelement("style")}} на вашу страницу внутрь тега <code>head</code> в HTML. Это должно выглядеть следующим образом:</p> -<pre class="brush: html notranslate"><style> +<pre class="brush: html"><style> </style></pre> <p>Внутри тега стилей добавьте следующий код:</p> -<pre class="brush:css; notranslate">form { +<pre class="brush:css;">form { /* Расположим форму по центру страницы */ margin: 0 auto; width: 400px; @@ -251,7 +251,7 @@ button { <p>Чтобы переименовать данные, вам необходимо использовать атрибут <code>name</code> на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:</p> -<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> <div> <label for="name">Name:</label> <input type="text" id="name" name="user_name" /> 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 4dc41f824a..6559ceb2eb 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 @@ -25,7 +25,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <p>Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это <em>язык таблицы стилей. </em>Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать <strong>все</strong> элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:</p> -<pre class="notranslate"><code>p { +<pre><code>p { color: red; }</code></pre> @@ -36,7 +36,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <ol> <li>Откройте ваш файл <code>index.html</code> и вставьте следующую строку куда-нибудь в шапку, между <code><head></code> и <code></head></code> тегами: - <pre class="brush: html notranslate"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> + <pre class="brush: html"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> </li> <li>Сохраните <code>index.html</code> и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:</li> </ol> @@ -72,7 +72,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <p>Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; width: 500px; border: 1px solid black; @@ -82,7 +82,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <p>Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:</p> -<pre class="brush: css notranslate">p,li,h1 { +<pre class="brush: css">p,li,h1 { color: red; }</pre> @@ -141,11 +141,11 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics <ol> <li>Прежде всего, вернитесь и найдите <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вывод из Google Fonts</a>, который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего <code>index.html</code> (снова, в любом месте между тегами <code><head></code> и <code></head></code>). Это будет выглядеть примерно так: - <pre class="brush: html notranslate"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> + <pre class="brush: html"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML-элементам используя свою собственную таблицу стилей.</li> <li>Затем, удалите существующее правило в вашем <code>style.css</code> файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.</li> <li>Добавьте следующие строки в нужное место, заменив строку <code>placeholder</code> актуальной <code>font-family</code> строкой, которую вы получили из Google Fonts. (<code>font-family</code> просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <code><html></code> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же <code>font-size</code> и <code>font-family</code>): - <pre class="brush: css notranslate">html { + <pre class="brush: css">html { font-size: 10px; /* px значит 'пиксели': базовый шрифт будет 10 пикселей в высоту */ font-family: placeholder: здесь должно быть имя шрифта из Google fonts }</pre> @@ -155,7 +155,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics </div> </li> <li>Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела ({{htmlelement("h1")}}, {{htmlelement("li")}}, и {{htmlelement("p")}}). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения: - <pre class="brush: css notranslate">h1 { + <pre class="brush: css">h1 { font-size: 60px; text-align: center; } @@ -202,7 +202,7 @@ p, li { <h3 id="Изменение_цвета_страницы">Изменение цвета страницы</h3> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { background-color: #00539F; }</pre> @@ -210,7 +210,7 @@ p, li { <h3 id="Разбираемся_с_телом">Разбираемся с телом</h3> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 600px; margin: 0 auto; background-color: #FF9500; @@ -230,7 +230,7 @@ p, li { <h3 id="Позиционирование_и_стилизация_нашего_заголовка_главной_страницы">Позиционирование и стилизация нашего заголовка главной страницы</h3> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { margin: 0; padding: 20px 0; color: #00539F; @@ -254,7 +254,7 @@ p, li { <h3 id="Центрирование_изображения">Центрирование изображения</h3> -<pre class="brush: css notranslate">img { +<pre class="brush: css">img { display: block; margin: 0 auto; }</pre> 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 45738e908a..9c49e40d0a 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 @@ -20,11 +20,11 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>HTML не является языком программирования; это <em>язык разметки</em>, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда <strong>{{Glossary("element", "элементов")}}</strong>, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие {{Glossary("tag", "теги")}} могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:</p> -<pre class="notranslate">Моя кошка очень раздражена</pre> +<pre>Моя кошка очень раздражена</pre> <p>Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:</p> -<pre class="brush: html notranslate"><p>Моя кошка очень раздражена</p></pre> +<pre class="brush: html"><p>Моя кошка очень раздражена</p></pre> <h3 id="Анатомия_HTML_элемента">Анатомия HTML элемента</h3> @@ -59,11 +59,11 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Вы также можете располагать элементы внутри других элементов — это называется <strong>вложением</strong>. Если мы хотим заявить, что наша кошка <strong>очень</strong> раздражена, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который указывает, что слово должно быть сильно акцентированно:</p> -<pre class="brush: html notranslate"><p>Моя кошка <strong>очень</strong> раздражена.</p></pre> +<pre class="brush: html"><p>Моя кошка <strong>очень</strong> раздражена.</p></pre> <p>Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент {{htmlelement("p")}}, затем элемент {{htmlelement("strong")}}, потом мы должны закрыть сначала элемент {{htmlelement("strong")}}, затем {{htmlelement("p")}}. Приведённое ниже неверно:</p> -<pre class="example-bad brush: html notranslate"><p>Моя кошка <strong>очень раздражена.</p></strong></pre> +<pre class="example-bad brush: html"><p>Моя кошка <strong>очень раздражена.</p></strong></pre> <p>Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!</p> @@ -71,7 +71,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Некоторые элементы не имеют контента, и называются <strong>пустыми элементами</strong>. Возьмём элемент {{htmlelement("img")}}, который уже имеется в нашем HTML:</p> -<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="Моё тестовое изображение"></pre> +<pre class="brush: html"><img src="images/firefox-icon.png" alt="Моё тестовое изображение"></pre> <p>Он содержит два атрибута, но не имеет закрывающего тега <code></img></code>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.</p> @@ -79,7 +79,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <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> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -105,7 +105,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Давайте снова обратим наше внимание на элемент {{htmlelement("img", "изображения")}}:</p> -<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="Mоё тестовое изображение"></pre> +<pre class="brush: html"><img src="images/firefox-icon.png" alt="Mоё тестовое изображение"></pre> <p>Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута <code>src</code> (source, источник), который содержит путь к нашему файлу изображения.</p> @@ -134,7 +134,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков {{htmlelement("h1")}}–{{htmlelement("h6")}}, хотя обычно вы будете использовать не более 3-4 :</p> -<pre class="brush: html notranslate"><h1>Мой главный заголовок</h1> +<pre class="brush: html"><h1>Мой главный заголовок</h1> <h2>Мой заголовок верхнего уровня</h2> <h3>Мой подзаголовок</h3> <h4>Мой под-подзаголовок</h4></pre> @@ -145,7 +145,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Как было сказано раньше, элемент {{htmlelement("p")}} предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:</p> -<pre class="brush: html notranslate"><p>Это одиночный абзац</p></pre> +<pre class="brush: html"><p>Это одиночный абзац</p></pre> <p>Добавьте свой образец текста (вы создавали его в статье <a href="/ru/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Каким должен быть ваш веб-сайт?</em></a>) в один или несколько абзацев, расположенных прямо под элементом {{htmlelement("img")}}.</p> @@ -162,11 +162,11 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <p>Например, если мы хотим включить часть следующего фрагмента абзаца в список:</p> -<pre class="brush: html notranslate"><p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p></pre> +<pre class="brush: html"><p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p></pre> <p>Мы могли бы изменить разметку на эту:</p> -<pre class="brush: html notranslate"><p>Mozilla, мы являемся мировым сообществом</p> +<pre class="brush: html"><p>Mozilla, мы являемся мировым сообществом</p> <ul> <li>технологов</li> @@ -185,13 +185,13 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics <ol> <li>Выберите некоторый текст. Мы выбрали текст "Манифест Mozilla".</li> <li>Оберните текст в элемент {{htmlelement("a")}}, например так: - <pre class="brush: html notranslate"><a>Манифест Mozilla</a></pre> + <pre class="brush: html"><a>Манифест Mozilla</a></pre> </li> <li>Задайте элементу {{htmlelement("a")}} атрибут<strong> </strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">href</span></font>, например так: - <pre class="brush: html notranslate"><a href="">Манифест Mozilla</a></pre> + <pre class="brush: html"><a href="">Манифест Mozilla</a></pre> </li> <li>Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку: - <pre class="brush: html notranslate"><a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a></pre> + <pre class="brush: html"><a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a></pre> </li> </ol> 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 6f16d8f1fd..6c7d76a7a7 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 @@ -49,11 +49,11 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics <ol> <li>Для начала перейдите на ваш тестовый сайт и создайте папку с именем 'scripts' (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем <code>main.js</code>. Сохраните его в вашей папке <code>scripts</code>.</li> <li>Далее перейдите в ваш <code>index.html</code> файл и введите следующий элемент на новой строке прямо перед закрывающим тегом <code></body></code>: - <pre class="brush: html notranslate"><script src="scripts/main.js"></script></pre> + <pre class="brush: html"><script src="scripts/main.js"></script></pre> </li> <li> В основном этот код выполняет ту же работу, что и элемент {{htmlelement("link")}} для CSS — добавляет JavaScript на страницу, позволяя ему взаимодействовать с HTML (и CSS, и чем-нибудь ещё на странице).</li> <li>Теперь добавьте следующий код в файл <code>main.js</code>: - <pre class="brush: js notranslate">var myHeading = document.querySelector('h1'); + <pre class="brush: js">var myHeading = document.querySelector('h1'); myHeading.textContent = 'Hello world!';</pre> </li> <li>Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите <code>index.html</code> в браузере. Вы должны увидеть что-то вроде этого: <img alt="" src="hello-world.png" style="display: block; margin: 0px auto;"></li> @@ -81,7 +81,7 @@ myHeading.textContent = 'Hello world!';</pre> <p>{{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/var">var</a></code> <span class="tlid-translation translation" lang="ru"><span title="">(не рекомендуется, продолжайте читать, чтобы получить объяснения)</span></span> или <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, за которым следует любое имя, которым вы захотите её назвать:</p> -<pre class="brush: js notranslate">let myVariable;</pre> +<pre class="brush: js">let myVariable;</pre> <div class="note"> <p><strong>Примечание</strong>: Точка с запятой в конце строки указывает, где заканчивается оператор; это абсолютно необходимо, когда вам нужно разделить оператора на одной строке. Однако некоторые люди считают, что хорошая практика - указывать их в конце каждого оператора. Существуют и другие правила, когда вы должны и не должны их использовать - смотрите более подробно в статье <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">ваше руководство по точкам с запятой в JavaScript</a>.</p> @@ -101,19 +101,19 @@ myHeading.textContent = 'Hello world!';</pre> <p>После объявления переменной вы можете присвоить ей значение:</p> -<pre class="brush: js notranslate">myVariable = 'Bob';</pre> +<pre class="brush: js">myVariable = 'Bob';</pre> <p>Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:</p> -<pre class="brush: js notranslate">var myVariable = 'Bob';</pre> +<pre class="brush: js">var myVariable = 'Bob';</pre> <p>Вы можете получить значение, просто вызвав переменную по имени:</p> -<pre class="brush: js notranslate">myVariable;</pre> +<pre class="brush: js">myVariable;</pre> <p>После установки значения переменной вы можете изменить его позже:</p> -<pre class="notranslate">var myVariable = 'Bob'; +<pre>var myVariable = 'Bob'; myVariable = 'Steve';</pre> <p>Обратите внимание, что переменные имеют разные <a href="/ru/docs/Web/JavaScript/Data_structures">типы данных</a>:</p> @@ -164,13 +164,13 @@ myVariable = 'Steve';</pre> <p>Комментарии - это, по сути, короткие фрагменты текста, которые могут быть добавлены в код, и которые игнорируются браузером. Вы можете поместить комментарии в JavaScript-код, так же как вы делали это в CSS:</p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* Всё, что находится тут - комментарий. */</pre> <p>Если ваш комментарий не содержит переноса строк, то зачастую легче поставить две косые черты, как тут:</p> -<pre class="brush: js notranslate" style="font-size: 14px;">// Это комментарий +<pre class="brush: js" style="font-size: 14px;">// Это комментарий </pre> <h3 id="Операторы">Операторы</h3> @@ -244,7 +244,7 @@ myVariable = 'Steve';</pre> <p>Условия — это кодовые структуры, которые позволяют вам проверять, истинно или ложно выражение, а затем выполнить другой код в зависимости от результата. Самая распространённая форма условия называется, <code>if ... else</code>. Например:</p> -<pre class="brush: js notranslate">var iceCream = 'chocolate'; +<pre class="brush: js">var iceCream = 'chocolate'; if (iceCream === 'chocolate') { alert('Yay, I love chocolate ice cream!'); } else { @@ -259,10 +259,10 @@ if (iceCream === 'chocolate') { <ol> <li> - <pre class="brush: js notranslate">var myVariable = document.querySelector('h1');</pre> + <pre class="brush: js">var myVariable = document.querySelector('h1');</pre> </li> <li> - <pre class="brush: js notranslate">alert('hello!');</pre> + <pre class="brush: js">alert('hello!');</pre> </li> </ol> @@ -274,14 +274,14 @@ if (iceCream === 'chocolate') { <p>Хорошая новость заключается в том, что вы можете определить свои собственные функции — в следующем примере мы напишем простую функцию, которая принимает два числа в качестве аргументов и умножает их:</p> -<pre class="brush: js notranslate">function multiply(num1,num2) { +<pre class="brush: js">function multiply(num1,num2) { var result = num1 * num2; return result; }</pre> <p>Попробуйте запустить вышеупомянутую функцию в консоли, затем попробуйте изменить аргументы, например:</p> -<pre class="brush: js notranslate">multiply(4,7); +<pre class="brush: js">multiply(4,7); multiply(20,20); multiply(0.5,3);</pre> @@ -293,7 +293,7 @@ multiply(0.5,3);</pre> <p>Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является <a href="/ru/docs/Web/Events/click">событие клика</a>, которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:</p> -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() { +<pre class="brush: js">document.querySelector('html').onclick = function() { alert('Ouch! Stop poking me!'); }</pre> @@ -301,11 +301,11 @@ multiply(0.5,3);</pre> <p>Обратите внимание, что</p> -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre> +<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> <p>эквивалентно</p> -<pre class="brush: js notranslate">var myHTML = document.querySelector('html'); +<pre class="brush: js">var myHTML = document.querySelector('html'); myHTML.onclick = function() {};</pre> <p>Просто так короче.</p> @@ -323,7 +323,7 @@ myHTML.onclick = function() {};</pre> <li>Сохраните изображение в вашу папку <code>images</code>.</li> <li>Переименуйте это изображение в 'firefox2.png' (без кавычек).</li> <li>Перейдите в ваш файл <code>main.js</code> и введите следующий JavaScript. (Если ваш "hello world" JavaScript по-прежнему существует, удалите его.) - <pre class="brush: js notranslate">var myImage = document.querySelector('img'); + <pre class="brush: js">var myImage = document.querySelector('img'); myImage.onclick = function() { var mySrc = myImage.getAttribute('src'); @@ -356,21 +356,21 @@ myImage.onclick = function() { <ol> <li>В <code>index.html</code>, добавьте следующую строку перед элементом {{htmlelement("script")}}: - <pre class="brush: html notranslate"><button>Change user</button></pre> + <pre class="brush: html"><button>Change user</button></pre> </li> <li>В <code>main.js</code>, добавьте следующий код в конец файла, точно так, как написано - он захватит ссылки на новую кнопку и заголовок, и сохранит их в переменные: - <pre class="brush: js notranslate">var myButton = document.querySelector('button'); + <pre class="brush: js">var myButton = document.querySelector('button'); var myHeading = document.querySelector('h1');</pre> </li> <li>Теперь добавьте следующую функцию для установки персонализированного приветствия - она ничего не будет делать, но мы будем использовать её позже: - <pre class="brush: js notranslate">function setUserName() { + <pre class="brush: js">function setUserName() { var myName = prompt('Please enter your name.'); 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> <li>Затем добавьте блок <code>if ... else</code> - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке: - <pre class="brush: js notranslate">if(!localStorage.getItem('name')) { + <pre class="brush: js">if(!localStorage.getItem('name')) { setUserName(); } else { var storedName = localStorage.getItem('name'); @@ -378,7 +378,7 @@ var myHeading = document.querySelector('h1');</pre> }</pre> Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте <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() { + <pre class="brush: js">myButton.onclick = function() { setUserName(); } </pre> 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 2b443ac661..b53c8d1179 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 @@ -117,20 +117,20 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website <ol> <li>Укажите в командной строке каталог <code>test-site</code> (или другое название каталога, содержащего ваш сайт). Для этого используйте команду <code>cd</code> (т.е. «change directory»). Вот то, что вы наберёте, если разместили свой веб-сайт в каталоге под названием <code>test-site</code> на рабочем столе: - <pre class="brush: bash notranslate">cd Desktop/test-site</pre> + <pre class="brush: bash">cd Desktop/test-site</pre> </li> <li>Когда командная строка указывает внутрь вашего каталога веб-сайта, введите следующую команду, которая сообщает инструменту <code>git</code>, чтобы он превратил каталог в репозиторий git: - <pre class="brush: bash notranslate">git init</pre> + <pre class="brush: bash">git init</pre> </li> <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> + <pre class="brush: bash">git remote add origin https://github.com/bobsmith/bobsmith.github.io.git</pre> </li> <li>Далее введите следующие две команды, нажимая Enter после каждой. Это подготовит код к загрузке на GitHub, и укажет Git управлять этими файлами. - <pre class="brush: bash notranslate">git add --all + <pre class="brush: bash">git add --all git commit -m 'adding my files to my repository'</pre> </li> <li>Наконец, загрузите код на GitHub - вернитесь на веб-страницу GitHub, на которой вы находились, и введите в терминал команду: - <pre class="brush: bash notranslate">git push -u origin master</pre> + <pre class="brush: bash">git push -u origin master</pre> </li> <li>Теперь, когда вы перейдёте по веб-адресу, созданному в GitHub, в новом окне браузера (<em>username.github.io</em>), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.</li> </ol> @@ -143,7 +143,7 @@ git commit -m 'adding my files to my repository'</pre> <p>Если вы хотите сделать больше изменений на своём тестовом сайте и загрузить их в GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:</p> -<pre class="notranslate">git add --all +<pre>git add --all git commit -m 'another commit' git push</pre> 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 e7ab712e26..8299e2a619 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 @@ -71,7 +71,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда <p>Hypertext Transfer Protocol, or <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). A typical conversation goes something like</p> -<pre class="notranslate">"Hello web server. Can you give me the files I need to render bbc.co.uk"? +<pre>"Hello web server. Can you give me the files I need to render bbc.co.uk"? "Sure thing web browser — here you go" @@ -87,7 +87,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда <li> <p>Hypertext markup language, or <strong>HTML</strong>, is a markup language consisting of different elements you can wrap (mark up) content in to give it meaning (semantics) and structure. Simple HTML looks like this:</p> - <pre class="brush: html notranslate"><h1>This is a top-level heading</h1> + <pre class="brush: html"><h1>This is a top-level heading</h1> <p>This is a paragraph of text.</p> @@ -98,7 +98,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда <li> <p>Cascading Style Sheets (<strong>CSS</strong>) is a rule-based language used to apply styles to your HTML, for example setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As a simple example, the following code would turn our HTML paragraph red:</p> - <pre class="brush: css notranslate">p { + <pre class="brush: css">p { color: red; }</pre> @@ -107,7 +107,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда <li> <p><strong>JavaScript</strong> is the programming language we use to add interactivity to web sites, from dynamic style switching, to fetching updates from the server, right through to complex 3D graphics. The following simple JavaScript will store a reference to our paragraph in memory and change the text inside it:</p> - <pre class="brush: js notranslate">let pElem = document.querySelector('p'); + <pre class="brush: js">let pElem = document.querySelector('p'); pElem.textContent = 'We changed the text!';</pre> <p>In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality</p> 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 b082eab08e..fbdc97774a 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 @@ -38,7 +38,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <p>Давайте рассмотрим пример набора терминов и определений:</p> -<pre class="notranslate">Солилоквий +<pre>Солилоквий Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам). Монолог Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам. @@ -49,7 +49,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <p>Закончим разметку нашего примера:</p> -<pre class="brush: html notranslate"><dl> +<pre class="brush: html"><dl> <dt>Солилоквий</dt> <dd>Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).</dd> <dt>Монолог</dt> @@ -86,7 +86,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -108,7 +108,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -128,7 +128,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -219,12 +219,12 @@ textarea.onkeyup = function(){ <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 +<pre class="brush: html"><p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p></pre> <p>Чтобы превратить её в блочную цитату, мы просто делаем следующее:</p> -<pre class="brush: html notranslate"><blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html"><blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p> </blockquote></pre> @@ -238,7 +238,7 @@ Quotation Element</em>) указывает на то, что заключ <p>Строчные цитаты работают точно так же, за исключением того, что они используют элемент {{htmlelement ("q")}}. Например, следующий кусочек разметки содержит цитату из страницы <code><q></code> MDN:</p> -<pre class="brush: html notranslate"><p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен +<pre class="brush: html"><p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен для коротких цитат, не требующих прерывания абзаца</q>.</p></pre> <p>Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:</p> @@ -249,7 +249,7 @@ Quotation Element</em>) указывает на то, что заключ <p>Содержание атрибута {{htmlattrxref ("cite", "blockquote")}} выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута <code><cite></code> без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент {{htmlelement ("cite")}} рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри <code><cite></code> с источником цитаты:</p> -<pre class="brush: html notranslate"><p>Как указано в статье о <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html"><p>Как указано в статье о <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"> <cite>блочных цитатах</cite></a>: </p> @@ -286,7 +286,7 @@ Quotation Element</em>) указывает на то, что заключ <div class="hidden"> <h6 id="Playable_code_2">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -305,7 +305,7 @@ Quotation Element</em>) указывает на то, что заключ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -325,7 +325,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -412,7 +412,7 @@ textarea.onkeyup = function(){ <p>Давайте рассмотрим несколько примеров:</p> -<pre class="notranslate"><p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p> +<pre><p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p> <p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p> </pre> @@ -434,7 +434,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_3">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -451,7 +451,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -471,7 +471,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -556,13 +556,13 @@ textarea.onkeyup = function(){ <p>HTML имеет элемент для разметки контактных данных — {{htmlelement ("address")}}. Он просто обёртывает ваши контактные данные, например:</p> -<pre class="brush: html notranslate"><address> +<pre class="brush: html"><address> <p>Крис Миллс, Манчестер, Жестокий Север, РФ</p> </address></pre> <p>Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не <em>любого </em>адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдёт:</p> -<pre class="brush: html notranslate"><address> +<pre class="brush: html"><address> <p>Автор страницы — <a href="../authors/chris-mills/">Крис Миллс</a>.</p> </address></pre> @@ -572,7 +572,7 @@ textarea.onkeyup = function(){ <p>Приведём пример:</p> -<pre class="brush: html notranslate"><p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p> +<pre class="brush: html"><p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p> <p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> <p>Если x<sup>2</sup> равно 9, x должен равняться 3 или -3.</p></pre> @@ -622,7 +622,7 @@ para.onclick = function() { <p>HTML также содержит элемент {{htmlelement ("time")}} для отметки времени и дат в машиночитаемом формате. Например:</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>></pre> +<pre class="brush: html"><<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>></pre> <p>Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:</p> @@ -641,7 +641,7 @@ para.onclick = function() { <p>В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:</p> -<pre class="brush: html notranslate"><!-- Стандартная дата --> +<pre class="brush: html"><!-- Стандартная дата --> <<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>> <!-- Только год и месяц --> <<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2020-01<span class="pl-pds">"</span></span>>Январь 2020</<span class="pl-ent">time</span>> 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 40ef7f1d99..5137a61e4e 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 @@ -50,7 +50,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p><span id="result_box" lang="ru"><span class="alt-edited">Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите </span></span>{{anch("Ссылки-блоки")}}<span lang="ru"><span class="alt-edited">), который вы хотите превратить в ссылку, в элемент {{htmlelement ("a")}}, и придания этому элементу атрибута {{htmlattrxref ("href", "a")}} (который также известен как <strong>гипертекстовая ссылка,</strong> или <strong>цель</strong>), который будет содержать веб-адрес, на который вы хотите указать ссылку.</span></span></p> -<pre class="brush: html notranslate"><p>Я создал ссылку на +<pre class="brush: html"><p>Я создал ссылку на <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>. </p></pre> @@ -62,7 +62,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Другим атрибутом, который вы можете добавить к своим ссылкам, является — <code>title</code>. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:</p> -<pre class="brush: html notranslate"><p>Я создал ссылку на +<pre class="brush: html"><p>Я создал ссылку на <a href="https://www.mozilla.org/ru/" title="Лучшее место для поиска дополнительной информации о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla @@ -91,7 +91,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">блочный элемент</a>. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами <code><a></a>.</code></p> -<pre class="brush: html notranslate"><a href="https://www.mozilla.org/ru/"> +<pre class="brush: html"><a href="https://www.mozilla.org/ru/"> <img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу"> </a></pre> @@ -117,7 +117,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <li> <p><strong>Тот же каталог</strong>: Если вы хотите подключить ссылку внутри <code>index.html</code> (верхний уровень <code>index.html</code>), указывающую на <code>contacts.html</code>, вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — <code>contacts.html</code>:</p> - <pre class="brush: html notranslate"><p>Хотите связаться с конкретным сотрудником? + <pre class="brush: html"><p>Хотите связаться с конкретным сотрудником? Найдите подробную информацию на нашей <a href="contacts.html">странице контактов</a>. </p></pre> @@ -125,14 +125,14 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <li> <p><strong>Перемещение вниз в подкаталоги</strong>: Если вы хотите подключить ссылку внутри <code>index.html</code> (верхний уровень <code>index.html<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">), указывающую на </span></font></code><code>projects/index.html</code>, вам нужно спуститься ниже в директории <code>projects</code> перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете - <code>projects/index.html</code>:</p> - <pre class="brush: html notranslate"><p>Посетите мою + <pre class="brush: html"><p>Посетите мою <a href="projects/index.html">домашнюю страницу проекта</a>. </p></pre> </li> <li> <p><strong>Перемещение обратно в родительские каталоги</strong>: Если вы хотите подключить ссылку внутри <code>projects/index.html</code>, указывающую на <code>pdfs/project-brief.pdf</code>, вам нужно будет подняться на уровень каталога, затем спустится в каталог <code>pdf</code>. "Подняться вверх на уровень каталога" обозначается двумя точками — <code>..</code> — так, URL-адрес, который вы используете <code>../pdfs/project-brief.pdf</code>:</p> - <pre class="brush: html notranslate"><p>Ссылка на + <pre class="brush: html"><p>Ссылка на <a href="../pdfs/project-brief.pdf">краткое описание моего проекта</a>. </p></pre> </li> @@ -147,17 +147,17 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Можно ссылаться на определённую часть документа HTML (известную как <strong>фрагмент документа</strong>), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:</p> -<pre class="brush: html notranslate"><h2 id="Почтовый_адрес">Почтовый адрес</h2></pre> +<pre class="brush: html"><h2 id="Почтовый_адрес">Почтовый адрес</h2></pre> <p>Затем, чтобы связаться с этим конкретным <code>id</code>, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:</p> -<pre class="brush: html notranslate"><p>Хотите написать мне письмо? Используйте наш +<pre class="brush: html"><p>Хотите написать мне письмо? Используйте наш <a href="contacts.html#Почтовый_адрес">почтовый адрес</a>. </p></pre> <p>Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на <em>другую часть того же документа</em>:</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> <a href="#Почтовый_адрес">Почтовый адрес кампании</a> можно найти в нижней части этой страницы. </p></pre> @@ -203,13 +203,13 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p><em><strong>Хороший</strong> текст ссылки:</em> <a href="https://firefox.com">Скачать Firefox</a></p> -<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> +<pre class="brush: html"><p><a href="https://firefox.com/"> Скачать Firefox </a></p></pre> <p><em><strong>Плохой</strong> текст ссылки:</em> <a href="https://firefox.com/">Нажми сюда</a>, чтобы скачать Firefox</p> -<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> +<pre class="brush: html"><p><a href="https://firefox.com/"> Нажми сюда </a> чтобы скачать Firefox</p> @@ -244,7 +244,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Посмотрите на примеры, чтобы увидеть, как добавить описание:</p> -<pre class="brush: html notranslate"><p><a href="http://www.example.com/large-report.pdf"> +<pre class="brush: html"><p><a href="http://www.example.com/large-report.pdf"> Скачать отчёт о продажах (PDF, 10MB) </a></p> @@ -260,7 +260,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <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" +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" download="firefox-39-installer.exe"> Скачать Firefox 39 для Windows </a></pre> @@ -301,7 +301,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Самыми простыми и часто используемыми формами <code>mailto:</code> являются <em>subject</em>, <em>cc</em>,<em> bcc</em> и <em>body</em>; дальше прописываем адрес электронной почты. Например:</p> -<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a> +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a> </pre> <p>В результате получим ссылку вида: <a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a>.</p> @@ -314,7 +314,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс <p>Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):</p> -<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body </a></pre> 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 430ac96483..b4d312b67b 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 @@ -78,7 +78,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <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> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -184,7 +184,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>{{HTMLElement("span")}} — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:</p> -<pre class="brush: html notranslate"><p>Пьяный Король возвратился в свою комнату в 01:00 +<pre class="brush: html"><p>Пьяный Король возвратился в свою комнату в 01:00 и всё никак не мог войти в дверь: хмель мешал <span class="editor-note">[Примечание редактора: В этот момент свет на сцене должен быть приглушён]</span>.</p></pre> @@ -192,7 +192,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p>{{HTMLElement("div")}} — это блочный несемантический элемент, который следует использовать только если вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который вы можете открыть в любой момент нахождения на сайте:</p> -<pre class="brush: html notranslate"><div class="shopping-cart"> +<pre class="brush: html"><div class="shopping-cart"> <h2>Корзина</h2> <ul> <li> @@ -218,7 +218,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p><code><br></code> создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:</p> -<pre class="brush: html notranslate"><p>Жила-была девчушка Нелл,<br> +<pre class="brush: html"><p>Жила-была девчушка Нелл,<br> Любившая писать HTML:<br> Её семантика ужасна была — <br> Она и сама прочитать ничего не могла.</p></pre> @@ -232,7 +232,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум <p><code><hr></code> создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:</p> -<pre class="notranslate"><p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p> +<pre><p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p> <hr> <p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p></pre> 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 e186996164..2880672577 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 @@ -38,11 +38,11 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <p>{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это <em>язык разметки</em>, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или <em>разметить</em> различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:</p> -<pre class="notranslate">Мой кот очень сердитый</pre> +<pre>Мой кот очень сердитый</pre> <p>Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как "параграф", заключив её в теги элемента "параграф" ({{htmlelement("p")}}), например:</p> -<pre class="brush: html notranslate"><p>Мой кот очень сердитый</p></pre> +<pre class="brush: html"><p>Мой кот очень сердитый</p></pre> <div class="note"> <p><strong>Примечание</strong>: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег {{htmlelement("title")}} может быть записан как <code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTlE></code>, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.</p> @@ -72,7 +72,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -89,7 +89,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы </div> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -110,7 +110,7 @@ body { } </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -195,11 +195,11 @@ textarea.onkeyup = function(){ <p>Вы также можете вкладывать элементы внутрь других элементов — это называется <strong>вложенностью</strong>. Если мы хотим подчеркнуть, что наш кот <strong>очень</strong> сердитый, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который означает, что это слово крайне важно в данном контексте:</p> -<pre class="brush: html notranslate"><p>Мой кот <strong>очень</strong> сердитый.</p></pre> +<pre class="brush: html"><p>Мой кот <strong>очень</strong> сердитый.</p></pre> <p>Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем <code>p</code> элемент первым, затем элемент <code>strong</code>, затем мы закрываем элемент <code>strong</code> первым, затем <code>p</code>. Следующее писать неправильно:</p> -<pre class="example-bad brush: html notranslate"><p>Мой кот <strong>очень сердитый.</p></strong></pre> +<pre class="example-bad brush: html"><p>Мой кот <strong>очень сердитый.</p></strong></pre> <p>Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!</p> @@ -214,7 +214,7 @@ textarea.onkeyup = function(){ <p>Посмотрите на следующий пример:</p> -<pre class="brush: html notranslate"><em>Первый</em><em>второй</em><em>третий</em> +<pre class="brush: html"><em>Первый</em><em>второй</em><em>третий</em> <p>четвёртый</p><p>пятый</p><p>шестой</p> </pre> @@ -239,7 +239,7 @@ textarea.onkeyup = function(){ <p>Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент {{htmlelement("img")}} вставляет картинку на страницу в том самом месте, где он расположен:</p> -<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> <p>Это выведет на вашу страницу следующее:</p> @@ -282,7 +282,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code2">Playable code2</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -299,7 +299,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -319,7 +319,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -404,11 +404,11 @@ textarea.onkeyup = function(){ <p>Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.</p> -<pre class="notranslate"><input type="text" disabled="disabled"></pre> +<pre><input type="text" disabled="disabled"></pre> <p>Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):</p> -<pre class="brush: html notranslate"><input type="text" disabled> +<pre class="brush: html"><input type="text" disabled> <input type="text"> </pre> @@ -421,11 +421,11 @@ textarea.onkeyup = function(){ <p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом <code>href</code> так:</p> -<pre class="brush: html notranslate"><a href=https://www.mozilla.org/>любимый веб-сайт</a></pre> +<pre class="brush: html"><a href=https://www.mozilla.org/>любимый веб-сайт</a></pre> <p>Однако, как только мы добавим атрибут <code>title</code> в таком же стиле, мы поступим неверно:</p> -<pre class="example-bad brush: html notranslate"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> +<pre class="example-bad brush: html"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> <p>В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут <code>title</code> — это на самом деле три разных атрибута — атрибут title со значением "The" и два булевых атрибута: <code>Mozilla</code> и <code>homepage</code>. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!</p> @@ -437,31 +437,31 @@ textarea.onkeyup = function(){ <p>В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:</p> -<pre class="brush: html notranslate"><a href="http://www.example.com">Ссылка к моему примеру.</a> +<pre class="brush: html"><a href="http://www.example.com">Ссылка к моему примеру.</a> <a href='http://www.example.com'>Ссылка к моему примеру.</a></pre> <p>Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!</p> -<pre class="example-bad brush: html notranslate"><a href="http://www.example.com'>Ссылка к моему примеру.</a></pre> +<pre class="example-bad brush: html"><a href="http://www.example.com'>Ссылка к моему примеру.</a></pre> <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> +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> <p>Если вы хотите вставить кавычки того же типа, то вы должны использовать <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#entity_references_including_special_characters_in_html">объекты HTML</a>. Например, это работать не будет:</p> -<pre class="example-bad brush: html notranslate"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> +<pre class="example-bad brush: html"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> <p>Поэтому вам нужно сделать так:</p> -<pre class="brush: html notranslate"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> +<pre class="brush: html"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> <h2 id="Структура_HTML_документа">Структура HTML документа</h2> <p>Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -477,7 +477,7 @@ textarea.onkeyup = function(){ <ol> <li><code><!DOCTYPE html></code>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так: - <pre class="notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <code><!DOCTYPE html></code> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .</li> <li><code><html></html></code>: Элемент {{htmlelement("html")}} содержит в себе всё содержимое на всей странице, и иногда его называют "корневой элемент". </li> @@ -520,7 +520,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code3">Playable code3</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -537,7 +537,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -561,7 +561,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -646,7 +646,7 @@ textarea.onkeyup = function(){ <p>Вы могли заметить, что в примерах кода из этой статьи много пробелов. Это вовсе не обязательно — следующие два примера эквивалентны:</p> -<pre class="brush: html notranslate"><p>Собаки глупы.</p> +<pre class="brush: html"><p>Собаки глупы.</p> <p>Собаки глупы.</p></pre> @@ -692,7 +692,7 @@ textarea.onkeyup = function(){ <p>В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:</p> -<pre class="brush: html notranslate"><p>В HTML вы определяете параграф элементом <p>.</p> +<pre class="brush: html"><p>В HTML вы определяете параграф элементом <p>.</p> <p>В HTML вы определяете параграф элементом &lt;p&gt;.</p></pre> @@ -710,7 +710,7 @@ textarea.onkeyup = function(){ <p>Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <code><!--</code> и <code>--></code>, например:</p> -<pre class="brush: html notranslate"><p> Меня нет в комментариях( </p> +<pre class="brush: html"><p> Меня нет в комментариях( </p> <!-- <p>А теперь есть!</p> --></pre> 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 ba4682f821..4117972ba6 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 @@ -46,11 +46,11 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <p>В HTML каждый абзац заключён в элемент {{htmlelement("p")}}, подобно:</p> -<pre class="brush: html notranslate"><p>Я параграф, да, это я.</p></pre> +<pre class="brush: html"><p>Я параграф, да, это я.</p></pre> <p>Каждый заголовок заключён в элемент заголовка {{htmlelement("h1")}}:</p> -<pre class="brush: html notranslate"><h1>Я заголовок истории.</h1></pre> +<pre class="brush: html"><h1>Я заголовок истории.</h1></pre> <p>Имеется шесть элементов заголовка: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} и {{htmlelement("h6")}}. Каждый элемент представляет разный уровень контента в документе; <code><h1></code> представляет главный заголовок, <code><h2></code> представляет подзаголовки, <code><h3></code> представляет под-подзаголовки и так далее.</p> @@ -58,7 +58,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <p>Например, в рассказе <code><h1></code> будет представлять заглавие рассказа, <code><h2></code> обозначит название каждой главы, <code><h3></code> будет обозначать подзаголовки в каждой главе и так далее.</p> -<pre class="brush: html notranslate"><h1> Сокрушительная скука </ h1> +<pre class="brush: html"><h1> Сокрушительная скука </ h1> <p> Крис Миллс </ p> @@ -111,7 +111,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -128,7 +128,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -162,7 +162,7 @@ h2 { </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -242,13 +242,13 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид.</span> <span>В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».</span></span></p> -<pre class="brush: html notranslate"><h1>Это заголовок верхнего уровня</h1></pre> +<pre class="brush: html"><h1>Это заголовок верхнего уровня</h1></pre> <p><span id="result_box" lang="ru"><span>По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS).</span> <span>Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).</span></span></p> <p><span id="result_box" lang="ru"><span>С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня.</span> <span>Рассмотрим следующее:</span></span></p> -<pre class="brush: html notranslate"><span style="font-size: 32px; margin: 21px 0;">Это заголовок верхнего уровня?</span></pre> +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Это заголовок верхнего уровня?</span></pre> <p><span id="result_box" lang="ru"><span>Это элемент {{htmlelement ("span")}}.</span> <span>У него нет семантики.</span> <span>Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS,</span> <span>чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше.</span> <span>Рекомендуется использовать соответствующий элемент HTML на практике.</span></span></p> @@ -260,7 +260,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:</span></span></p> -<pre class="notranslate">молоко +<pre>молоко яйца хлеб хумус</pre> @@ -269,7 +269,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент {{htmlelement ("li")}} (элемент списка):</span></span></p> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>молоко</li> <li>яйца</li> <li>хлеб</li> @@ -283,7 +283,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_2">Playable code</h6> -<pre class="brush: html notranslate"><code><h2>Результат</h2> +<pre class="brush: html"><code><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -301,7 +301,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -335,7 +335,7 @@ h2 { </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -413,7 +413,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:</span></span></p> -<pre class="notranslate">Двигайтесь до конца дороги +<pre>Двигайтесь до конца дороги Поверните направо Езжайте прямо через первые два перекрёстка с круговым движением Поверните налево на третьем перекрёстке @@ -421,7 +421,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не <ul>:</span></span></p> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li>Двигайтесь до конца дороги</li> <li>Поверните направо</li> <li>Езжайте прямо через первые два перекрёстка с круговым движением</li> @@ -436,7 +436,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_3">Playable code</h6> -<pre class="brush: html notranslate"><code><h2>Результат</h2> +<pre class="brush: html"><code><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> <h2>Редактируемый код</h2> @@ -453,7 +453,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -487,7 +487,7 @@ h2 { </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -568,7 +568,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_4">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -614,7 +614,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -647,7 +647,7 @@ h2 { } </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -727,7 +727,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>Вполне нормально вложить один список в другой.</span> <span>Возможно, вы захотите, чтобы один список располагался внутри другого.</span> <span>Давайте возьмём второй список из нашего примера рецепта:</span></span></p> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li>Очистите чеснок от кожуры и крупно нарежьте.</li> <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li> <li>Добавьте все ингредиенты в пищевой комбайн.</li> @@ -740,7 +740,7 @@ textarea.onkeyup = function(){ <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="ru"><span>Поскольку последние две строки очень тесно связаны с тем, что было до них (они читаются как вспомогательные инструкции или варианты, которые подходят под этой маркой), может иметь смысл вложить их в свой собственный неупорядоченный список и поместить этот список внутри текущего</span><span>.</span> <span>Это будет выглядеть так:</span></span></div> </div> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li>Очистите чеснок от кожуры и крупно нарежьте.</li> <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li> <li>Добавьте все ингредиенты в пищевой комбайн.</li> @@ -774,7 +774,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>В таких случаях в HTML используется элемент {{htmlelement ("em")}} (выделение).</span> <span>Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном.</span> <span>Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив.</span> <span>Для выделения курсивом вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("i")}} (смотрите ниже).</span></span></p> -<pre class="brush: html notranslate"><p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p></pre> +<pre class="brush: html"><p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p></pre> <h3 id="Важное_значение"><span class="short_text" id="result_box" lang="ru"><span>Важное значение</span></span></h3> @@ -786,13 +786,13 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span>В таких случаях в HTML используется элемент {{htmlelement ("strong")}} (важное значение).</span> <span>Помимо того, что документ становится более полезным, они распознаются программами, считывающими с экрана, и говорят другим тоном.</span> <span>Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить</span></span><span lang="ru"><span> жирный шрифт.</span> <span>Для получения жирного шрифта вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("b")}} (</span></span><span id="result_box" lang="ru"><span>смотрите ниже</span></span><span lang="ru"><span>).</span></span></p> -<pre class="brush: html notranslate"><p>Эта жидкость <strong>очень токсична</strong>.</p> +<pre class="brush: html"><p>Эта жидкость <strong>очень токсична</strong>.</p> <p>Я рассчитываю на тебя. <strong>Не </strong>опаздывай!</p></pre> <p><span id="result_box" lang="ru"><span>При желании вы можете вложить важные и акцентированные слова друг в друга:</span></span></p> -<pre class="brush: html notranslate"><p>Эта жидкость <strong>очень токсична</strong> — +<pre class="brush: html"><p>Эта жидкость <strong>очень токсична</strong> — если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>.</p></pre> <h3 id="Активное_изучение_Давайте_будем_важны!">Активное изучение: <span class="short_text" id="result_box" lang="ru"><span>Давайте будем важны!</span></span></h3> @@ -802,7 +802,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_5">Playable code</h6> -<pre class="brush: html notranslate"><h2>Результат</h2> +<pre class="brush: html"><h2>Результат</h2> <div class="output" style="min-height: 50px;"> </div> @@ -824,7 +824,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -844,7 +844,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -947,7 +947,7 @@ textarea.onkeyup = function(){ <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"><!-- Научные наименования --> +<pre class="brush: html"><!-- Научные наименования --> <p> Колибри обыкновенный (<i>архилоус обыкновенный</i>) — наиболее часто встречающийся вид колибри в северо-восточной Америке. 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 81bd9f709d..2b66c1fde3 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 @@ -49,7 +49,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <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#%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_HTML_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0">HTML-документ из прошлой статьи</a>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -62,7 +62,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведённом выше примере <head> совсем небольшой:</p> -<pre class="brush: html notranslate"><head> +<pre class="brush: html"><head> <meta charset="utf-8"> <title>Моя тестовая страница</title> </head></pre> @@ -108,7 +108,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>В заголовке примера выше есть следующая строка:</p> -<pre class="brush: html notranslate"><meta charset="utf-8"></pre> +<pre class="brush: html"><meta charset="utf-8"></pre> <p>В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . <code>utf-8</code> — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-странице, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:</p> @@ -124,7 +124,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Чтобы проверить это, вернитесь к HTML из примера <code><title></code> (странице <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>), поменяйте meta charset на <code>ISO-8859-1</code> и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано <em>«рис горячий»</em>):</p> -<pre class="brush: html notranslate"><p>Пример на японском: ご飯が熱い。</p></pre> +<pre class="brush: html"><p>Пример на японском: ご飯が熱い。</p></pre> <h3 id="Указываем_автора_и_описание">Указываем автора и описание</h3> @@ -137,7 +137,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:</p> -<pre class="brush: html notranslate"><meta name="author" content="Крис Миллс"> +<pre class="brush: html"><meta name="author" content="Крис Миллс"> <meta name="description" content="Задача MDN — в том, чтобы обучить новичков всему тому, что нужно им для разработки веб-сайтов и приложений."></pre> @@ -153,7 +153,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <li>Перейдите на<a href="https://developer.mozilla.org/en-US/"> главную страницу Mozilla Developer Network</a>.</li> <li>Откройте исходный код страницы (кликните правой кнопкой мыши и выберите <em>Просмотреть код</em> в контекстном меню.)</li> <li>Найдите тег meta с описанием. Он выглядит так: - <pre class="brush: html notranslate"><meta name="description" content="Веб-документация на MDN + <pre class="brush: html"><meta name="description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы @@ -178,7 +178,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Например, <a href="https://ruogp.me/">Протокол Open Graph</a> создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:</p> -<pre class="brush: html notranslate"><meta property="og:image" content="/static/img/opengraph-logo.72382e605ce3.png"> +<pre class="brush: html"><meta property="og:image" content="/static/img/opengraph-logo.72382e605ce3.png"> <meta property="og:description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких @@ -189,7 +189,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <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> +<pre class="brush: html"><meta name="twitter:title" content="MDN Web Docs"></pre> <h2 id="Добавление_иконок">Добавление иконок</h2> @@ -202,13 +202,13 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <ol> <li>Сохраните изображение в формате <code>.ico</code> (многие браузеры поддерживают и в более привычных форматах, таких как <code>.gif</code> или <code>.png</code>) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат <code>.ico</code></li> <li>Добавьте ссылку на иконку в <code><head></code> документа: - <pre class="brush: html notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> </li> </ol> <p>Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:</p> -<pre class="brush: html notranslate"><!-- Для iPad 3 с Retina-экраном высокого разрешения: --> +<pre class="brush: html"><!-- Для iPad 3 с Retina-экраном высокого разрешения: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> <!-- Для iPhone с Retina-экраном высокого разрешения: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> @@ -231,12 +231,12 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <li> <p>Элемент {{htmlelement("link")}} помещают в заголовок документа. У него есть два атрибута: <code>rel="stylesheet"</code> показывает, что мы указываем <em>стиль</em> документа, а в <code>href</code> указан путь к файлу:</p> - <pre class="brush: html notranslate"><link rel="stylesheet" href="my-css-file.css"></pre> + <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> </li> <li> <p>Элемент {{htmlelement("script")}} не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом <code></body></code>. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.</p> - <pre class="brush: html notranslate"><script src="my-js-file.js"></script></pre> + <pre class="brush: html"><script src="my-js-file.js"></script></pre> <p><strong>Примечание</strong>: Элемент <code><script></code> кажется пустым, но это не всегда так, и указывать закрывающий тег обязательно. Вместо того чтобы ссылаться на внешний скрипт, код можно писать прямо внутри этого элемента — так можно не тратить время на загрузку отдельного скрипта, но зато не выйдет сослаться на один js-файл с нескольких страниц.</p> </li> @@ -267,16 +267,16 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML <p>Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив <a href="/en-US/docs/Web/HTML/Global_attributes/lang">атрибут lang</a> в открывающий HTML-тег (как в примере <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>: и как показано ниже):</p> -<pre class="syntaxbox notranslate"><html lang="en-US"></pre> +<pre class="syntaxbox"><html lang="en-US"></pre> -<pre class="syntaxbox notranslate"><html lang="ru"> +<pre class="syntaxbox"><html lang="ru"> </pre> <p>Это полезно во многих случаях. Ваш HTML-документ будет более эффективно индексироваться поисковыми системами, если его язык установлен (что позволяет ему правильно отображаться в языковых результатах), и он полезен людям с нарушением зрения, которые используют программы, читающие страницы вслух (например, слово "шесть" пишется одинаково как на французском, так и на английском языках, но произносится по-разному.).</p> <p>Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:</p> -<pre class="brush: html notranslate"><p>Пример на японском: <span lang="jp">ご飯が熱い。</span>.</p></pre> +<pre class="brush: html"><p>Пример на японском: <span lang="jp">ご飯が熱い。</span>.</p></pre> <p>Коды языков определены в стандарте <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Подробнее о работе с языками можно узнать в <a href="https://www.w3.org/International/articles/language-tags/">Языковые тэги в HTML и XML</a>.</p> 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 985542c426..e21fcef89d 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 @@ -58,7 +58,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>В качестве простого примера, следующий код создаёт круг и прямоугольник:</p> -<pre class="brush: html notranslate"><svg version="1.1" +<pre class="brush: html"><svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> @@ -101,7 +101,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <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 +<pre class="brush: html"><img src="equilateral.svg" alt="triangle with all three sides equal" height="87px" @@ -126,11 +126,11 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в <code>src</code> атрибуте и использовать {{htmlattrxref("srcset", "img")}} атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае <span class="tlid-translation translation" lang="ru"><span title="">SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:</span></span></p> -<pre class="brush: html notranslate"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> +<pre class="brush: html"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> <p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p> -<pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code> +<pre class="brush: css"><code>background: url("fallback.png") no-repeat center;</code> background<code>-image: url("image.svg"); background-size: contain;</code></pre> @@ -142,7 +142,7 @@ background-size: contain;</code></pre> <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"> +<pre class="brush: html"><svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> </pre> @@ -174,7 +174,7 @@ background-size: contain;</code></pre> <p>Вот краткий обзор:</p> -<pre class="brush: html notranslate"><iframe src="triangle.svg" width="500" height="500" sandbox> +<pre class="brush: html"><iframe src="triangle.svg" width="500" height="500" sandbox> <img src="triangle.png" alt="Triangle with three unequal sides" /> </iframe></pre> @@ -196,7 +196,7 @@ background-size: contain;</code></pre> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -221,7 +221,7 @@ background-size: contain;</code></pre> <input id="solution" type="button" value="Show solution" disabled> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -241,7 +241,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); 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 8621a782a0..3523163ad5 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 @@ -33,11 +33,11 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Например, если ваше изображение называется <code>dinosaur.jpg</code>, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:</p> -<pre class="brush: html notranslate"><img src="dinosaur.jpg"></pre> +<pre class="brush: html"><img src="dinosaur.jpg"></pre> <p>Если изображение было в поддиректории <code>images</code> , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:</p> -<pre class="brush: html notranslate"><img src="images/dinosaur.jpg"></pre> +<pre class="brush: html"><img src="images/dinosaur.jpg"></pre> <p>И так далее.</p> @@ -47,7 +47,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Вы можете встроить изображение используя абсолютный URL, например:</p> -<pre class="brush: html notranslate"><img src="https://www.example.com/images/dinosaur.jpg"></pre> +<pre class="brush: html"><img src="https://www.example.com/images/dinosaur.jpg"></pre> <p>Но это бессмысленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p> @@ -79,7 +79,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесём изменения в код из предыдущего примера:</p> -<pre class="notranslate"><img src="images/dinosaur.jpg" +<pre><img src="images/dinosaur.jpg" alt="Голова и туловище скелета динозавра; у него большая голова с длинными острыми зубами"></pre> @@ -114,7 +114,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего изображение можете найти различными способами. Например, на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p> -<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" +<pre class="brush: html"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" @@ -136,7 +136,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Как и для <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ссылок</a>, вы также можете добавить атрибут <code>title</code> для изображений, чтобы при необходимости предоставить дополнительную информацию. В нашем примере мы могли бы сделать это так:</p> -<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" +<pre class="brush: html"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" @@ -170,7 +170,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Input</h2> +<pre class="brush: html"><h2>Input</h2> <textarea id="code" class="input"> <img></textarea> <h2>Output</h2> @@ -181,7 +181,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM </div> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -198,7 +198,7 @@ button { } </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +<pre class="brush: js">var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var code = textarea.value; var output = document.querySelector(".output"); @@ -229,7 +229,7 @@ window.addEventListener("load", drawOutput); <p>Начиная разговор о заголовках, есть множество путей как вы можете добавить заголовок к своему изображению. Для примера, нет ничего, что может вас остановить сделать это таким образом:</p> -<pre class="brush: html notranslate"><div class="figure"> +<pre class="brush: html"><div class="figure"> <img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" @@ -243,7 +243,7 @@ window.addEventListener("load", drawOutput); <p>Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:</p> -<pre class="notranslate"><figure> +<pre><figure> <img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" @@ -283,7 +283,7 @@ window.addEventListener("load", drawOutput); <div class="hidden"> <h6 id="Playable_code_2">Playable code 2</h6> -<pre class="brush: html notranslate"><h2>Input</h2> +<pre class="brush: html"><h2>Input</h2> <textarea id="code" class="input"> </textarea> <h2>Output</h2> @@ -294,7 +294,7 @@ window.addEventListener("load", drawOutput); </div> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -311,7 +311,7 @@ button { } </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +<pre class="brush: js">var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var code = textarea.value; var output = document.querySelector(".output"); @@ -342,7 +342,7 @@ window.addEventListener("load", drawOutput); <p>Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). Параметры CSS {{cssxref("background-image")}} и другие <code>background-*</code> применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { background-image: url("images/dinosaur.jpg"); }</pre> 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 60f7bb93db..1402482a88 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 @@ -58,7 +58,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="min-height: 250px;"> </div> @@ -74,7 +74,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies <input id="solution" type="button" value="Show solution"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -94,7 +94,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -181,7 +181,7 @@ textarea.onkeyup = function(){ <p>Есть несколько серьёзных {{anch("Проблемы безопасности", "Проблем безопасности")}} при использовании <iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:</p> -<pre class="notranslate"><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" +<pre><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> @@ -324,7 +324,7 @@ textarea.onkeyup = function(){ <p>Ниже представлен пример использования элемента {{htmlelement("embed")}} для вставки Flash-фильма (загляните на <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">live on Github</a>, а также на <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">check the source code</a>):</p> -<pre class="brush: html notranslate"><embed src="whoosh.swf" quality="medium" +<pre class="brush: html"><embed src="whoosh.swf" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" @@ -334,7 +334,7 @@ textarea.onkeyup = function(){ <p>Давайте взглянем на пример <code><object></code> , встраивающего PDF в страницу (взгляните <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">live example</a> и <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">source code</a>):</p> -<pre class="brush: html notranslate"><object data="mypdf.pdf" type="application/pdf" +<pre class="brush: html"><object data="mypdf.pdf" type="application/pdf" width="800" height="1200" typemustmatch> <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p> </object></pre> 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 7dfa8a7070..474f317658 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 @@ -64,11 +64,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент {{htmlelement("img")}} обычно позволяет указать только один путь к файлу:</p> -<pre class="brush: html notranslate"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> +<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> <p>Однако есть два новых атрибута — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> (также смотри <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">источник кода</a>).</p> -<pre class="brush: html notranslate"><img srcset="elva-fairy-320w.jpg 320w, +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, @@ -131,7 +131,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя <code>srcset</code> с x-дескриптором и без <code>sizes</code> — более простой синтаксис! Найти пример как это выглядит можно здесь <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p> -<pre class="brush: html notranslate"><img srcset="elva-fairy-320w.jpg, +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> @@ -139,7 +139,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):</p> -<pre class="brush: css notranslate">img { +<pre class="brush: css">img { width: 320px; }</pre> @@ -151,11 +151,11 @@ 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">not-responsive.html</a>, мы имеем изображение которое очень нуждается в художественном оформлении:</p> -<pre class="brush: html notranslate"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> +<pre class="brush: html"><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> -<pre class="brush: html notranslate"><picture> +<pre class="brush: html"><picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> @@ -189,7 +189,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p><code><picture></code> позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута <code>type</code>, браузер сразу определит файлы такого типа как неподдерживаемые:</p> -<pre class="brush: html notranslate"><picture> +<pre class="brush: html"><picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> 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 4176f00fcc..971324fad9 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 @@ -38,7 +38,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Элемент {{htmlelement("video")}} позволяет вам вставлять видео достаточно легко. Очень простой пример выглядит так:</p> -<pre class="brush: html notranslate"><video src="rabbit320.webm" controls> +<pre class="brush: html"><video src="rabbit320.webm" controls> <p>Ваш браузер не поддерживает HTML5 видео. Используйте <a href="rabbit320.webm">ссылку на видео</a> для доступа.</p> </video></pre> @@ -97,7 +97,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <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> +<pre class="brush: html"><video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>Ваш браузер не поддерживает HTML5 видео. Вот <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p> @@ -115,7 +115,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Есть ряд других параметры, которые вы можете включить в HTML5 элемент <code>video</code>. Взгляните на наш третий пример:</p> -<pre class="brush: html notranslate"><video controls width="400" height="400" +<pre class="brush: html"><video controls width="400" height="400" autoplay loop muted poster="poster.png"> <source src="rabbit320.mp4" type="video/mp4"> @@ -157,7 +157,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Элемент {{htmlelement ("audio")}} работает точно так же, как элемент {{htmlelement ("video")}}, с несколькими небольшими отличиями, которые описаны ниже. Типичный пример может выглядеть так:</p> -<pre class="brush: html notranslate"><audio controls> +<pre class="brush: html"><audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> @@ -209,7 +209,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Типичный файл WebVTT будет выглядеть примерно так:</p> -<pre class="eval line-numbers language-html notranslate"><code class="language-html">WEBVTT +<pre class="eval line-numbers language-html"><code class="language-html">WEBVTT 1 00:00:22.230 --> 00:00:24.606 @@ -231,7 +231,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Вот пример:</p> -<pre class="brush: html notranslate"><video controls> +<pre class="brush: html"><video controls> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html index fbfdfa13d9..388c093001 100644 --- a/files/ru/learn/html/tables/advanced/index.html +++ b/files/ru/learn/html/tables/advanced/index.html @@ -26,7 +26,7 @@ translation_of: Learn/HTML/Tables/Advanced <p>Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь элемента {{htmlelement("table")}}. Причём вам нужно поместить его сразу после открытия тега <code><table></code>.</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <caption>Dinosaurs in the Jurassic period</caption> ... @@ -83,7 +83,7 @@ translation_of: Learn/HTML/Tables/Advanced <li>Сохраните, перезагрузите и вы увидите, что добавление элемента <code><tfoot></code> привело к тому, что строка "SUM" опустилась к нижней части таблицы.</li> <li>Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.</li> <li>Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <code><head></code> вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода: - <pre class="brush: css notranslate">tbody { + <pre class="brush: css">tbody { font-size: 90%; font-style: italic; } @@ -105,7 +105,7 @@ tfoot { <div class="hidden"> <h6 id="Hidden_example">Hidden example</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -224,7 +224,7 @@ tfoot { <p>Разметка простой вложенной таблицы:</p> -<pre class="brush: html notranslate"><table id="table1"> +<pre class="brush: html"><table id="table1"> <tr> <th>title1</th> <th>title2</th> @@ -363,7 +363,7 @@ tfoot { <p>Новая тема в этой статье это атрибут {{htmlattrxref("scope","th")}}, который может быть добавлен к элементу <code><th></code> он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:</p> -<pre class="brush: html notranslate"><thead> +<pre class="brush: html"><thead> <tr> <th scope="col">Purchase</th> <th scope="col">Location</th> @@ -375,7 +375,7 @@ tfoot { <p>И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):</p> -<pre class="brush: html notranslate"><tr> +<pre class="brush: html"><tr> <th scope="row">Haircut</th> <td>Hairdresser</td> <td>12/09</td> @@ -400,7 +400,7 @@ tfoot { <p>Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:</p> -<pre class="brush: html notranslate"><thead> +<pre class="brush: html"><thead> <tr> <th id="purchase">Purchase</th> <th id="location">Location</th> diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html index bd9b5f4fb4..282ccd6039 100644 --- a/files/ru/learn/html/tables/basics/index.html +++ b/files/ru/learn/html/tables/basics/index.html @@ -128,10 +128,10 @@ translation_of: Learn/HTML/Tables/Basics <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 следующее: - <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + <pre class="brush: html"><td>Hi, I'm your first cell.</td></pre> </li> <li>Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: - <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> + <pre class="brush: html"><td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> <td>I'm your fourth cell.</td></pre> @@ -145,7 +145,7 @@ translation_of: Learn/HTML/Tables/Basics <ol> <li>Поместите четыре уже созданных ячейки между тегами <code><tr></code> как здесь показано: - <pre class="brush: html notranslate"><tr> + <pre class="brush: html"><tr> <td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> @@ -182,7 +182,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <td>&nbsp;</td> <td>Knocky</td> @@ -294,7 +294,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Исходная разметка выглядит так:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Animals</th> </tr> @@ -374,7 +374,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Возьмём простой пример:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Data 1</th> <th style="background-color: yellow">Data 2</th> @@ -410,7 +410,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить <code>class</code> на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code><col></code>. <code>Элемент <col></code> задаётся в контейнере <code><colgroup></code> сразу же за открывающим тегом <code><table></code>. Эффект, который мы видели выше, можно задать так:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <colgroup> <col> <col style="background-color: yellow"> @@ -433,7 +433,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <code><col></code> с атрибутом span, таким образом:</p> -<pre class="brush: html notranslate"><colgroup> +<pre class="brush: html"><colgroup> <col style="background-color: yellow" span="2"> </colgroup></pre> diff --git a/files/ru/learn/index.html b/files/ru/learn/index.html index d9b58648ab..9ea49f8f1d 100644 --- a/files/ru/learn/index.html +++ b/files/ru/learn/index.html @@ -87,7 +87,7 @@ translation_of: Learn <li><a href="https://git-scm.com/downloads">Установите Git</a> на свой компьютер. Это основное программное обеспечение системы контроля версий, разрабатываемое компанией GitHub.</li> <li>Откройте <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">командную строку</a> (Windows) или терминал (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>).</li> <li>Чтобы скопировать репозиторий обучающего раздела в папку с именем learning-area в текущем местоположении, на которое указывает ваша командная строка / терминал, используйте следующую команду: - <pre class="notranslate">git clone https://github.com/mdn/learning-area</pre> + <pre>git clone https://github.com/mdn/learning-area</pre> </li> <li>Теперь вы можете войти в директорию и найти нужные вам файлы (с помощью Finder/проводника либо <a href="https://ru.wikipedia.org/wiki/Cd_(%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0)">команды cd</a>).</li> </ol> @@ -97,10 +97,10 @@ translation_of: Learn <ol> <li>В командной строке / терминале войдите в директорию <code>learning-area</code> командой <code>cd</code>. Например, если вы в родительском каталоге: - <pre class="notranslate">cd learning-area</pre> + <pre>cd learning-area</pre> </li> <li>Обновите репозиторий, выполнив следующую команду: - <pre class="notranslate">git pull</pre> + <pre>git pull</pre> </li> </ol> diff --git a/files/ru/learn/javascript/asynchronous/async_await/index.html b/files/ru/learn/javascript/asynchronous/async_await/index.html index 7280fe9843..e64c9cc30b 100644 --- a/files/ru/learn/javascript/asynchronous/async_await/index.html +++ b/files/ru/learn/javascript/asynchronous/async_await/index.html @@ -36,36 +36,36 @@ translation_of: Learn/JavaScript/Asynchronous/Async_await <p>Попробуйте выполнить в консоли браузера следующий код:</p> -<pre class="brush: js notranslate">function hello() { return "Hello" }; +<pre class="brush: js">function hello() { return "Hello" }; hello();</pre> <p>Функция возвращает "Hello" — ничего необычного, верно ?</p> <p>Но что если мы сделаем её асинхронной ? Проверим:</p> -<pre class="brush: js notranslate">async function hello() { return "Hello" }; +<pre class="brush: js">async function hello() { return "Hello" }; hello();</pre> <p>Как было сказано ранее, вызов асинхронной функции возвращает объект Promise.</p> <p>Вот пример с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>:</p> -<pre class="brush: js notranslate">let hello = async function() { return "Hello" }; +<pre class="brush: js">let hello = async function() { return "Hello" }; hello();</pre> <p>Также можно использовать стрелочные функции:</p> -<pre class="brush: js notranslate">let hello = async () => { return "Hello" };</pre> +<pre class="brush: js">let hello = async () => { return "Hello" };</pre> <p>Все они в общем случае делают одно и то же.</p> <p>Чтобы получить значение, которое возвращает Promise, мы как обычно можем использовать метод <code>.then()</code>:</p> -<pre class="brush: js notranslate">hello().then((value) => console.log(value))</pre> +<pre class="brush: js">hello().then((value) => console.log(value))</pre> <p>или ещё короче</p> -<pre class="brush: js notranslate">hello().then(console.log) +<pre class="brush: js">hello().then(console.log) </pre> <p>Итак, ключевое слово <code>async</code>, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.</p> @@ -78,7 +78,7 @@ hello();</pre> <p>Небольшой пример:</p> -<pre class="brush: js notranslate">async function hello() { +<pre class="brush: js">async function hello() { return greeting = await Promise.resolve("Hello"); }; @@ -90,7 +90,7 @@ hello().then(alert);</pre> <p>Давайте посмотрим на пример из предыдущей статьи:</p> -<pre class="brush: js notranslate">fetch('coffee.jpg') +<pre class="brush: js">fetch('coffee.jpg') .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); @@ -110,7 +110,7 @@ hello().then(alert);</pre> <p>К этому моменту вы должны понимать как работают Promises, чтобы понять все остальное. Давайте перепишем код используя async/await и оценим разницу.</p> -<pre class="brush: js notranslate">async function myFetch() { +<pre class="brush: js">async function myFetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { @@ -134,7 +134,7 @@ myFetch() <p>Так как ключевое слово <code>async</code> заставляет функцию вернуть Promise, мы можем использовать гибридный подход:</p> -<pre class="brush: js notranslate">async function myFetch() { +<pre class="brush: js">async function myFetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); @@ -160,7 +160,7 @@ myFetch().then((blob) => { <br> Пример:</p> -<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre> +<pre class="brush: js">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> @@ -175,7 +175,7 @@ myFetch().then((blob) => { <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() { +<pre class="brush: js">async function myFetch() { try { let response = await fetch('coffee.jpg'); @@ -199,7 +199,7 @@ myFetch();</pre> <p>Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок <code>.catch()</code> после блока <code>.then()</code> вот так:</p> -<pre class="brush: js notranslate">async function myFetch() { +<pre class="brush: js">async function myFetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); @@ -233,7 +233,7 @@ myFetch().then((blob) => { <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> -<pre class="brush: js notranslate">async function fetchAndDecode(url, type) { +<pre class="brush: js">async function fetchAndDecode(url, type) { let response = await fetch(url); let content; @@ -282,7 +282,7 @@ displayContent() <p>Вы видите, что мы легко изменили <code>fetchAndDecode()</code> функцию в асинхронный вариант. Взгляните на строку с <code>Promise.all()</code>:</p> -<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre> +<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre> <p>С помощью <code>await</code> мы ждём массив результатов всех трёх Promises и присваиваем его в переменную <code>values</code>. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.<br> <br> @@ -306,7 +306,7 @@ displayContent() <p>Мы подготовили два примера — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) и <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Они оба начинаются с функции возвращающей promise, имитирующей асинхронность процессов при помощи вызова <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p> -<pre class="brush: js notranslate">function timeoutPromise(interval) { +<pre class="brush: js">function timeoutPromise(interval) { return new Promise((resolve, reject) => { setTimeout(function(){ resolve("done"); @@ -316,13 +316,13 @@ displayContent() <p>Далее в каждом примере есть асинхронная функция <code>timeTest()</code> ожидающая три вызова <code>timeoutPromise()</code>:</p> -<pre class="brush: js notranslate">async function timeTest() { +<pre class="brush: js">async function timeTest() { ... }</pre> <p>В каждом примере функция записывает время начала исполнения и сколько времени понадобилось на исполнение <code>timeTest()</code> промисов, вычитая время в момент запуска функции из времени в момент разрешения промисов:</p> -<pre class="brush: js notranslate">let startTime = Date.now(); +<pre class="brush: js">let startTime = Date.now(); timeTest().then(() => { let finishTime = Date.now(); let timeTaken = finishTime - startTime; @@ -333,7 +333,7 @@ timeTest().then(() => { <p>В случае с медленным примером <code>slow-async-await.html</code>, <code>timeTest()</code> выглядит:</p> -<pre class="brush: js notranslate">async function timeTest() { +<pre class="brush: js">async function timeTest() { await timeoutPromise(3000); await timeoutPromise(3000); await timeoutPromise(3000); @@ -343,7 +343,7 @@ timeTest().then(() => { <p>Во втором <code>fast-async-await.html</code> примере, функция <code>timeTest()</code> выглядит как:</p> -<pre class="brush: js notranslate">async function timeTest() { +<pre class="brush: js">async function timeTest() { const timeoutPromise1 = timeoutPromise(3000); const timeoutPromise2 = timeoutPromise(3000); const timeoutPromise3 = timeoutPromise(3000); @@ -365,7 +365,7 @@ timeTest().then(() => { <p>В качестве последнего замечания, вы можете использовать <code>async</code> перед методами классов или объектов, вынуждая их возвращать promises. А также await внутри методов объявленных таким образом. Посмотрите на пример <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code, который мы наблюдали в статье object-oriented JavaScript</a>, и сравните его с модифицированной (асинхронной) <code>async</code> версией ниже:</p> -<pre class="brush: js notranslate">class Person { +<pre class="brush: js">class Person { constructor(first, last, age, gender, interests) { this.name = { first, @@ -389,7 +389,7 @@ let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre> <p>Первый метод класса теперь можно использовать таким образом:</p> -<pre class="brush: js notranslate">han.greeting().then(console.log);</pre> +<pre class="brush: js">han.greeting().then(console.log);</pre> <h2 id="Browser_support_Поддержка_браузерами">Browser support (Поддержка браузерами)</h2> diff --git a/files/ru/learn/javascript/asynchronous/concepts/index.html b/files/ru/learn/javascript/asynchronous/concepts/index.html index bdc84b6f72..fe4e6c7343 100644 --- a/files/ru/learn/javascript/asynchronous/concepts/index.html +++ b/files/ru/learn/javascript/asynchronous/concepts/index.html @@ -45,7 +45,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts <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'); +<pre class="brush: js">const btn = document.querySelector('button'); btn.addEventListener('click', () => { let myDate; for(let i = 0; i < 10000000; i++) { @@ -75,7 +75,7 @@ btn.addEventListener('click', () => { <li>Кнопка "Click me for alert", при нажатии показывает предупреждение.</li> </ul> -<pre class="brush: js notranslate">function expensiveOperation() { +<pre class="brush: js">function expensiveOperation() { for(let i = 0; i < 1000000; i++) { ctx.fillStyle = 'rgba(0,0,255, 0.2)'; ctx.beginPath(); @@ -102,24 +102,24 @@ alertBtn.addEventListener('click', () => <p>Под <strong>потоком,</strong> обычно, понимают одиночный процесс, который может использовать программа, для выполнения своих нужд. Каждый поток может выполнять только одну в текущий момент времени:</p> -<pre class="notranslate">Task A --> Task B --> Task C</pre> +<pre>Task A --> Task B --> Task C</pre> <p>Каждая задача будет выполнена последовательно; только когда текущая задача завершится, следующая сможет начаться.</p> <p>Как мы говорили выше, большинство компьютеров теперь имеют процессор с несколькими ядрами, т.е. могут выполнять несколько задач одновременно. Языки программирования, поддерживающие многопоточность, могут использовать несколько ядер, чтобы выполнять несколько задач одновременно:</p> -<pre class="notranslate">Thread 1: Task A --> Task B +<pre>Thread 1: Task A --> Task B Thread 2: Task C --> Task D</pre> <h3 id="JavaScript_однопоточный">JavaScript однопоточный</h3> <p>JavaScript, традиционно для скриптовых языков, однопоточный. Даже, если есть несколько ядер, вы можете использовать их только для выполнения задач в одном потоке, называемом <strong>основной поток</strong>. Наш пример выше, выполняется следующим образом:</p> -<pre class="notranslate">Main thread: Render circles to canvas --> Display alert()</pre> +<pre>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> -<pre class="notranslate"> Main thread: Task A --> Task C +<pre> Main thread: Task A --> Task C Worker thread: Expensive task B</pre> <p>Помня об этом, выполните наш следующий пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">посмотреть пример в действии</a>), с открытой консолью. Это переписанный предыдущий пример, который теперь рассчитывает 10 миллионов дат в отдельном потоке обработчика. Теперь, когда вы нажимаете на кнопку, браузер может добавить новый элемент на страницу, до того как все даты будут посчитаны. Самая первая операция больше не блокирует выполнение следующей.</p> @@ -130,18 +130,18 @@ Worker thread: Expensive task B</pre> <p>Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остаётся синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:</p> -<pre class="notranslate">Main thread: Task A --> Task B</pre> +<pre>Main thread: Task A --> Task B</pre> <p>В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка ещё не будет доступна.</p> -<pre class="notranslate"> Main thread: Task A --> Task B --> |Task D| +<pre> Main thread: Task A --> Task B --> |Task D| Worker thread: Task C -----------> | |</pre> <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> -<pre class="notranslate">Main thread: Task A Task B +<pre>Main thread: Task A Task B Promise: |__async operation__|</pre> <p>Поскольку операция выполняется где-то отдельно, основной поток не блокируется, при выполнении асинхронных задач.</p> diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index 2d457b6888..0b53770834 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/Asynchronous/Introducing <p>Большая часть функциональности, которую мы рассматривали в предыдущих обучающих модулях, является синхронной — вы запускаете какой-то код, а результат возвращается, как только браузер может его вернуть. Давайте рассмотрим простой пример ( посмотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/basic-function.html">онлайн</a>, как это работает и посмотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/basic-function.html">исходный код</a>):</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); btn.addEventListener('click', () => { alert('You clicked me!'); @@ -65,7 +65,7 @@ btn.addEventListener('click', () => { <p>Так и в примере выше: после нажатия кнопки абзац не сможет появиться пока не будет нажата кнопка OK в окне сообщения. Попробуйте сами:</p> <div class="hidden"> -<pre class="brush: html notranslate"><<span class="pl-ent">button</span>>Нажми меня</<span class="pl-ent">button</span>></pre> +<pre class="brush: html"><<span class="pl-ent">button</span>>Нажми меня</<span class="pl-ent">button</span>></pre> </div> <p>{{EmbedLiveSample('Синхронный_JavaScript', '100%', '70px')}}</p> @@ -80,7 +80,7 @@ btn.addEventListener('click', () => { <p>Почему трудно работать, используя синхронный код? Давайте посмотрим на небольшой пример. Когда вы получаете картинку с сервера, вы не можете мгновенно вернуть результат. Это значит что следующий (псевдо) код не сработает:</p> -<pre class="brush: js notranslate">let response = fetch('myImage.png'); +<pre class="brush: js">let response = fetch('myImage.png'); let blob = response.blob(); // display your image blob in the UI somehow</pre> @@ -94,7 +94,7 @@ let blob = response.blob(); <p>Пример асинхронного колбэка вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):</p> -<pre class="brush: js notranslate">btn.addEventListener('click', () => { +<pre class="brush: js">btn.addEventListener('click', () => { alert('You clicked me!'); let pElem = document.createElement('p'); @@ -108,7 +108,7 @@ let blob = response.blob(); <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) { +<pre class="brush: js">function loadAsset(url, type, callback) { let xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = type; @@ -136,7 +136,7 @@ loadAsset('coffee.jpg', 'blob', displayImage);</pre> <p>Заметьте, что не все колбэк-функции асинхронны — некоторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html">посмотрите исходный код</a>):</p> -<pre class="brush: js notranslate">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus']; +<pre class="brush: js">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus']; gods.forEach(function (eachName, index){ console.log(index + '. ' + eachName); @@ -148,7 +148,7 @@ gods.forEach(function (eachName, index){ <p>Промисы — новый стиль написания асинхронного кода, который используется в современных Web API. Хорошим примером является <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> API, который современнее и эффективнее чем {{domxref("XMLHttpRequest")}}. Посмотрим на краткий пример, из нашей статьи <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>:</p> -<pre class="brush: js notranslate">fetch('products.json').then(function(response) { +<pre class="brush: js">fetch('products.json').then(function(response) { return response.json(); }).then(function(json) { products = json; @@ -195,7 +195,7 @@ gods.forEach(function (eachName, index){ <p>Давайте рассмотрим пример, который дополнительно иллюстрирует природу асинхронного кода, показывая, что может произойти, когда мы не полностью осознаем порядок выполнения кода, и проблемы, связанные с попыткой трактовать асинхронный код как синхронный. Следующий пример довольно похож на тот, что мы видели раньше (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">посмотреть исходный код</a>). Одно из отличий состоит в том, что мы включили ряд операторов {{domxref("console.log()")}} чтобы проиллюстрировать порядок, в котором, как вы думаете, будет выполняться код.</p> -<pre class="brush: js notranslate">console.log ('Starting'); +<pre class="brush: js">console.log ('Starting'); let image; fetch('coffee.jpg').then((response) => { @@ -226,7 +226,7 @@ console.log ('All done!');</pre> <p>Если вы запутались, рассмотрим следующий небольшой пример:</p> -<pre class="brush: js notranslate">console.log("registering click handler"); +<pre class="brush: js">console.log("registering click handler"); button.addEventListener('click', () => { console.log("get click"); @@ -240,11 +240,11 @@ console.log("all done");</pre> <p>Чтобы увидеть это в действии, попробуйте взять локальную копию нашего <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">примера</a> и измените третий вызов <code>console.log ()</code> следующим образом:</p> -<pre class="brush: js notranslate">console.log ('All done! ' + image + 'displayed.');</pre> +<pre class="brush: js">console.log ('All done! ' + image + 'displayed.');</pre> <p>Теперь вместо третьего сообщения должна возникнуть следующая ошибка:</p> -<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> +<pre><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> 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 8d00ba98af..19019a19a9 100644 --- a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html +++ b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html @@ -64,13 +64,13 @@ original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интерва <p>В следующем примере, браузер будет ожидать две секунды перед тем как выполнит анонимную функцию, тогда отобразит сообщение (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">живой пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">исходный код</a>):</p> -<pre class="brush: js notranslate">let myGreeting = setTimeout(function() { +<pre class="brush: js">let myGreeting = setTimeout(function() { alert('Hello, Mr. Universe!'); }, 2000)</pre> <p>Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить её где-нибудь ещё и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:</p> -<pre class="brush: js notranslate">// С именованной функцией +<pre class="brush: js">// С именованной функцией let myGreeting = setTimeout(function sayHi() { alert('Hello, Mr. Universe!'); }, 2000) @@ -92,19 +92,19 @@ let myGreeting = setTimeout(sayHi, 2000);</pre> <p>Например, вы можете реорганизовать предыдущую функцию, чтобы она передавала привет любому имени, переданному ей:</p> -<pre class="brush: js notranslate">function sayHi(who) { +<pre class="brush: js">function sayHi(who) { alert(`Hello ${who}!`); }</pre> <p>Теперь вы можете передать имя в вызов setTimeout () в качестве третьего параметра:</p> -<pre class="brush: js notranslate">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre> +<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre> <h3 id="Очистка_таймаутов">Очистка таймаутов</h3> <p>Наконец, если был создан тайм-аут, вы можете отменить его до истечения указанного времени, вызвав <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, передав ему идентификатор вызова <code>setTimeout()</code> в качестве параметра. Итак, чтобы отменить указанный выше тайм-аут, вы должны сделать следующее:</p> -<pre class="brush: js notranslate">clearTimeout(myGreeting);</pre> +<pre class="brush: js">clearTimeout(myGreeting);</pre> <div class="blockIndicator note"> <p><strong>Note</strong>: См.<code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> для более полной демонстрации, которая позволяет вам указать имя для приветствия и отменить приветствие с помощью отдельной кнопки (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">см. исходный код</a>).</p> @@ -118,7 +118,7 @@ let myGreeting = setTimeout(sayHi, 2000);</pre> <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() { +<pre class="brush: js">function displayTime() { let date = new Date(); let time = date.toLocaleTimeString(); document.getElementById('demo').textContent = time; @@ -132,7 +132,7 @@ const createClock = setInterval(displayTime, 1000);</pre> <p><code>setInterval () </code>выполняет задачу постоянно. setInterval () продолжает выполнять задачу вечно, если вы что-то с ней не сделаете. Возможно, вам понадобится способ остановить такие задачи, иначе вы можете получить ошибки, если браузер не сможет выполнить какие-либо другие версии задачи или если анимация, обрабатываемая задачей, завершилась. Вы можете сделать это так же, как останавливаете <code>timeouts</code> - передавая идентификатор, возвращаемый вызовом <code>setInterval ()</code>, в функцию <code>clearInterval ()</code>:</p> -<pre class="brush: js notranslate">const myInterval = setInterval(myFunction, 2000); +<pre class="brush: js">const myInterval = setInterval(myFunction, 2000); clearInterval(myInterval);</pre> @@ -182,7 +182,7 @@ clearInterval(myInterval);</pre> <p>В приведённом ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:</p> -<pre class="brush: js notranslate">let i = 1; +<pre class="brush: js">let i = 1; setTimeout(function run() { console.log(i); @@ -192,7 +192,7 @@ setTimeout(function run() { <p>Сравните приведённый выше пример со следующим - здесь используется <code>setInterval ()</code> для достижения того же эффекта:</p> -<pre class="brush: js notranslate">let i = 1; +<pre class="brush: js">let i = 1; setInterval(function run() { console.log(i); @@ -217,7 +217,7 @@ setInterval(function run() { <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() { +<pre class="brush: js">setTimeout(function() { alert('World'); }, 0); @@ -243,7 +243,7 @@ alert('Hello');</pre> <p>Метод принимает в качестве аргумента колбэк, который должен быть вызван перед перерисовкой. Это общий шаблон, в котором он используется:</p> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { // Drawing code goes here requestAnimationFrame(draw); } @@ -272,7 +272,7 @@ draw();</pre> <p>Давайте поговорим ещё немного о том, чем метод <code>requestAnimationFrame ()</code> отличается от других методов, используемых ранее. Глядя на наш код сверху:</p> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { // Drawing code goes here requestAnimationFrame(draw); } @@ -281,7 +281,7 @@ draw();</pre> <p>Такой же код с использованием <code>setInterval()</code>:</p> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { // Drawing code goes here } @@ -297,7 +297,7 @@ setInterval(draw, 17);</pre> <p>Это полезно, поскольку позволяет запускать вещи в определённое время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:</p> -<pre class="brush: js notranslate">let startTime = null; +<pre class="brush: js">let startTime = null; function draw(timestamp) { if (!startTime) { @@ -337,7 +337,7 @@ draw();</pre> <li> <p>Примените следующий CSS к HTML шаблону (любым предпочитаемым способом). Он установ красный фон на странице, высоту <code><body></code> равную <code>100%</code> высоты {{htmlelement("html")}} , и центрирует <code><div></code> внутри <code><body></code>, по горизонтали и вертикали.</p> - <pre class="brush: css notranslate">html { + <pre class="brush: css">html { background-color: white; height: 100%; } @@ -362,7 +362,7 @@ div { <li> <p>Разместите следующий JavaScript-код в <code><script></code> . Здесь вы сохраняете ссылку на <code><div></code> внутри, устанавливаете для переменной <code>rotateCount</code> значение <code>0</code>, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов <code>requestAnimationFrame()</code>, и устанавливаете для переменной <code>startTime</code> значение <code>null</code>, которая будет позже использоваться для хранения времени начала <code>requestAnimationFrame()</code>.</p> - <pre class="brush: js notranslate">const spinner = document.querySelector('div'); + <pre class="brush: js">const spinner = document.querySelector('div'); let rotateCount = 0; let startTime = null; let rAF; @@ -371,14 +371,14 @@ let rAF; <li> <p>Под предыдущим кодом вставьте функцию <code>draw()</code> которая будет использоваться для хранения нашего кода анимации, который включает параметр <code>timestamp</code> :</p> - <pre class="brush: js notranslate">function draw(timestamp) { + <pre class="brush: js">function draw(timestamp) { }</pre> </li> <li> <p>Внутри <code>draw ()</code> добавьте следующие строки. Они определят время начала, если оно ещё не определено (это произойдёт только на первой итерации цикла), и установят для параметра <code>rotateCount</code> значение для поворота счётчика (текущая временная метка, возьмите начальную временную метку, разделённую на три, чтобы замедлиться):</p> - <pre class="brush: js notranslate"> if (!startTime) { + <pre class="brush: js"> if (!startTime) { startTime = timestamp; } @@ -388,22 +388,22 @@ let rAF; <li> <p>Под предыдущей строкой внутри <code>draw ()</code> добавьте следующий блок - он проверяет, превышает ли значение <code>rotateCount 359</code> (например, <code>360</code>, полный круг). Если это так, он устанавливает значение по модулю <code>360</code> (то есть остаток, оставшийся после деления значения на <code>360</code>), поэтому круговая анимация может продолжаться непрерывно с разумным низким значением. Обратите внимание, что это не является строго необходимым, но легче работать со значениями от 0 до <code>359</code> градусов, чем со значениями типа «<code>128000</code> градусов».</p> - <pre class="brush: js notranslate">if (rotateCount > 359) { + <pre class="brush: js">if (rotateCount > 359) { rotateCount %= 360; }</pre> </li> <li>Затем, под предыдущим блоком, добавьте следующую строку, чтобы вращать spinner: - <pre class="brush: js notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre> + <pre class="brush: js">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> - <pre class="brush: js notranslate">rAF = requestAnimationFrame(draw);</pre> + <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre> </li> <li> <p>Ниже, вызовите функцию <code>draw()</code> для запуска анимации.</p> - <pre class="brush: js notranslate">draw();</pre> + <pre class="brush: js">draw();</pre> </li> </ol> @@ -417,7 +417,7 @@ let rAF; <p>Просто передайте ему значение, возвращаемое вызовом requestAnimationFrame () для отмены, которое вы сохранили в переменной rAF:</p> -<pre class="brush: js notranslate">cancelAnimationFrame(rAF);</pre> +<pre class="brush: js">cancelAnimationFrame(rAF);</pre> <h3 id="Активное_обучение_запуск_и_остановка_нашей_анимации">Активное обучение: запуск и остановка нашей анимации</h3> @@ -444,7 +444,7 @@ let rAF; <p>В этом примере вы должны анимировать как положение персонажа на экране, так и отображаемый спрайт. В анимации спрайта всего 6 кадров. Если бы вы показывали разные кадры спрайта для каждого кадра, отображаемого на экране, с помощью requestAnimationFrame (), Guybrush двигал бы конечностями слишком быстро, и анимация выглядела бы нелепо. Следовательно, в этом примере регулируется скорость, с которой спрайт циклически повторяет свои кадры, используя следующий код:</p> -<pre class="brush: js notranslate">if (posX % 13 === 0) { +<pre class="brush: js">if (posX % 13 === 0) { if (sprite === 5) { sprite = 0; } else { @@ -456,7 +456,7 @@ let rAF; <p>... Фактически, это примерно каждые 6,5 кадров, поскольку мы обновляем posX (положение персонажа на экране) на два кадра:</p> -<pre class="brush: js notranslate">if (posX > width/2) { +<pre class="brush: js">if (posX > width/2) { newStartPos = -( (width/2) + 102 ); posX = Math.ceil(newStartPos / 13) * 13; console.log(posX); @@ -485,7 +485,7 @@ let rAF; <li> <p>Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:</p> - <pre class="brush: js notranslate">const spinner = document.querySelector('.spinner p'); + <pre class="brush: js">const spinner = document.querySelector('.spinner p'); const spinnerContainer = document.querySelector('.spinner'); let rotateCount = 0; let startTime = null; @@ -508,7 +508,7 @@ const result = document.querySelector('.result');</pre> <li> <p>Ниже добавьте следующую функцию. Она просто берёт два числа и возвращает случайное число между ними. Это понадобится вам позже, чтобы сгенерировать случайный интервал ожидания.</p> - <pre class="brush: js notranslate">function random(min,max) { + <pre class="brush: js">function random(min,max) { var num = Math.floor(Math.random()*(max-min)) + min; return num; }</pre> @@ -516,7 +516,7 @@ const result = document.querySelector('.result');</pre> <li> <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счётчика:</p> - <pre class="brush: js notranslate">function draw(timestamp) { + <pre class="brush: js">function draw(timestamp) { if(!startTime) { startTime = timestamp; } @@ -534,13 +534,13 @@ const result = document.querySelector('.result');</pre> <li> <p>Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счётчика с помощью <code>display: none</code> ;.</p> - <pre class="brush: js notranslate">result.style.display = 'none'; + <pre class="brush: js">result.style.display = 'none'; spinnerContainer.style.display = 'none';</pre> </li> <li> <p>Затем определите функцию<code> reset ()</code>, которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после её завершения. Добавьте в конец кода следующее:</p> - <pre class="brush: js notranslate">function reset() { + <pre class="brush: js">function reset() { btn.style.display = 'block'; result.textContent = ''; result.style.display = 'none'; @@ -549,7 +549,7 @@ spinnerContainer.style.display = 'none';</pre> <li> <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); + <pre class="brush: js">btn.addEventListener('click', start); function start() { draw(); @@ -569,7 +569,7 @@ function start() { <li> <p>Добавьте в свой код следующую функцию:</p> - <pre class="brush: js notranslate">function setEndgame() { + <pre class="brush: js">function setEndgame() { cancelAnimationFrame(rAF); spinnerContainer.style.display = 'none'; result.style.display = 'block'; diff --git a/files/ru/learn/javascript/building_blocks/conditionals/index.html b/files/ru/learn/javascript/building_blocks/conditionals/index.html index 6f0b70c1bf..868702ca03 100644 --- a/files/ru/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ru/learn/javascript/building_blocks/conditionals/index.html @@ -46,7 +46,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals <p>Базовый <code>if...else</code> синтаксис выглядит как {{glossary("pseudocode")}}:</p> -<pre class="notranslate">if (condition) { +<pre>if (condition) { code to run if condition is true } else { run some other code instead @@ -66,7 +66,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals <p>Стоит заметить, что <code>else</code> и второй блок скобок { } не обязателен — следующий код так же будет работать:</p> -<pre class="notranslate">if (condition) { +<pre>if (condition) { код, который должен выполнить, если условие истина } @@ -76,7 +76,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals <p>И, наконец, иногда вы можете встретить код <code>if...else</code> без фигурных скобок в сокращённой форме:</p> -<pre class="notranslate">if (condition) code to run if condition is true +<pre>if (condition) code to run if condition is true else run some other code instead</pre> <p>Это абсолютно рабочий код, но он менее читаем, лучше использовать фигурные скобки, новые строки и отступы.</p> @@ -85,7 +85,7 @@ else run some other code instead</pre> <p>Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребёнка. Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь". В JavaScript, мы можем представить это так: </p> -<pre class="brush: js notranslate">var shoppingDone = false; +<pre class="brush: js">var shoppingDone = false; if (shoppingDone === true) { var childsAllowance = 10; @@ -105,7 +105,7 @@ if (shoppingDone === true) { <p>Существует способ привязать дополнительные варианты/результаты к вашему <code>if...else</code> — использовать<code>else if</code>. Для каждого дополнительного выбора требуется дополнительный блок, который нужно расположить между <code>if() { ... }</code> и <code>else { ... }</code> — проверьте следующий более сложный пример, который может быть частью простого приложения прогноза погоды:</p> -<pre class="brush: html notranslate"><label for="weather">Выберите тип погоды сегодня: </label> +<pre class="brush: html"><label for="weather">Выберите тип погоды сегодня: </label> <select id="weather"> <option value="">--Сделайте выбор--</option> <option value="sunny">Солнечно</option> @@ -116,7 +116,7 @@ if (shoppingDone === true) { <p></p></pre> -<pre class="brush: js notranslate">var select = document.querySelector('select'); +<pre class="brush: js">var select = document.querySelector('select'); var para = document.querySelector('p'); select.addEventListener('change', setWeather); @@ -168,7 +168,7 @@ function setWeather() { <p>Мы хотели бы особо обратить внимание на проверку булевых значений (<code>true</code>/<code>false</code>), и общий шаблон, который вы будете встречать снова и снова. Любое значение, которое не есть <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, или пустая строка (<code>''</code>) фактически возвращает <code>true</code> при тестировании как условного оператора. Поэтому вы можете просто использовать имя собственной переменной, чтобы проверить, равна ли она <code>true</code>, или существует (т. е. переменная не равна undefined). Например:</p> -<pre class="brush: js notranslate">var cheese = 'Cheddar'; +<pre class="brush: js">var cheese = 'Cheddar'; if (cheese) { console.log('Ура! Есть сыр для приготовления бутерброда.'); @@ -178,7 +178,7 @@ if (cheese) { <p>И, возвращаясь к нашему предыдущему примеру о ребёнке, выполняющем поручение своего родителя, вы можете это записать так:</p> -<pre class="brush: js notranslate">var shoppingDone = false; +<pre class="brush: js">var shoppingDone = false; if (shoppingDone) { // не нужно явно указывать '=== true' var childsAllowance = 10; @@ -190,7 +190,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Вполне нормально использовать один условный оператор <code>if...else</code> внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать ещё один набор вариантов в зависимости от температуры:</p> -<pre class="brush: js notranslate">if (choice === 'sunny') { +<pre class="brush: js">if (choice === 'sunny') { if (temperature < 86) { para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно. Идите на пляж, или в парк, и купите мороженое.'; } else if (temperature >= 86) { @@ -211,7 +211,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Чтобы дать вам пример оператора И, предыдущий фрагмент кода можно переписать так:</p> -<pre class="brush: js notranslate">if (choice === 'sunny' && temperature < 86) { +<pre class="brush: js">if (choice === 'sunny' && temperature < 86) { para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно. Идите на пляж, или в парк, и купите мороженое.'; } else if (choice === 'sunny' && temperature >= 86) { para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — Жара! Если вы хотите выйти на улицу, обязательно используйте солнцезащитный крем.'; @@ -221,7 +221,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Давайте посмотрим на быстрый пример оператора ИЛИ:</p> -<pre class="brush: js notranslate">if (iceCreamVanOutside || houseStatus === 'в огне') { +<pre class="brush: js">if (iceCreamVanOutside || houseStatus === 'в огне') { //если подъехал фургон с мороженым или дом горит console.log('Вы должны быстро покинуть дом.'); } else { @@ -230,7 +230,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Последний тип логического оператора НЕ, выраженный <code>!</code> оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведённом выше примере:</p> -<pre class="brush: js notranslate">if (!(iceCreamVanOutside || houseStatus === 'on fire')) { +<pre class="brush: js">if (!(iceCreamVanOutside || houseStatus === 'on fire')) { console.log('Вероятно, можно в нем оставаться.'); } else { console.log('Вы должны быстро покинуть дом.'); @@ -240,19 +240,19 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Можно сочетать любое количество логических операторов, в любой последовательности и в любой комбинации. В следующем примере код в блоке будет выполняться только в том случае, если оба условия с ИЛИ возвращают true, а следовательно, и оператор И возвращает true:</p> -<pre class="brush: js notranslate">if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { +<pre class="brush: js">if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { // код выполняется }</pre> <p>Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами <code>||</code> (ИЛИ). Например.</p> -<pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) { +<pre class="example-bad brush: js">if (x === 5 || 7 || 10 || 20) { // выполнить код }</pre> <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) { +<pre class="brush: js">if (x === 5 || x === 7 || x === 10 ||x === 20) { // выполнить код }</pre> @@ -262,7 +262,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>В этом случае нам поможет <a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch">оператор <code>switch</code> </a>– он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:</p> -<pre class="notranslate">switch (выражение) { +<pre>switch (выражение) { case choice1: выполнить этот код break; @@ -297,7 +297,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p>Давайте рассмотрим реальный пример — перепишем наше приложение прогноза погоды с использованием оператора switch:</p> -<pre class="brush: html notranslate"><label for="weather">Выберите тип погоды сегодня: </label> +<pre class="brush: html"><label for="weather">Выберите тип погоды сегодня: </label> <select id="weather"> <option value="">--Сделайте выбор--</option> <option value="sunny">Солнечно</option> @@ -308,7 +308,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true' <p></p></pre> -<pre class="brush: js notranslate">var select = document.querySelector('select'); +<pre class="brush: js">var select = document.querySelector('select'); var para = document.querySelector('p'); select.addEventListener('change', setWeather); @@ -345,11 +345,11 @@ function setWeather() { <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> +<pre>( условие) ? выполнить этот код : выполнить этот код вместо первого</pre> <p>Приведём простой пример:</p> -<pre class="brush: js notranslate">var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';</pre> +<pre class="brush: js">var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';</pre> <p>У нас есть переменная <code>isBirthday</code> , если она <code>true</code>, мы отправляем посетителю поздравление с днём рождения; если нет – выдаём стандартное приветствие.</p> @@ -357,7 +357,7 @@ function setWeather() { <p>При использовании тернарного оператора не обязательно ограничиваться лишь значениями переменной, можно выполнять функции или строки кода; все, что угодно. В следующем примере показано простое средство выбора темы, задающее внешний вид веб-сайта с помощью тернарного оператора.</p> -<pre class="brush: html notranslate"><label for="theme">Выберите тему: </label> +<pre class="brush: html"><label for="theme">Выберите тему: </label> <select id="theme"> <option value="white">Белая</option> <option value="black">Чёрная</option> @@ -365,7 +365,7 @@ function setWeather() { <h1>Это мой веб-сайт</h1></pre> -<pre class="brush: js notranslate">var select = document.querySelector('select'); +<pre class="brush: js">var select = document.querySelector('select'); var html = document.querySelector('html'); document.body.style.padding = '10px'; @@ -422,7 +422,7 @@ select.onchange = function() { <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="height: 500px;overflow: auto;"> <label for="month">Выберите месяц: </label> <select id="month"> @@ -477,7 +477,7 @@ createCalendar(31,'Январь'); <input id="solution" type="button" value="Показать решение"> </div></pre> -<pre class="brush: css notranslate">.output * { +<pre class="brush: css">.output * { box-sizing: border-box; } @@ -516,7 +516,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -611,7 +611,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_2">Playable code 2</h6> -<pre class="brush: html notranslate"><div class="output" style="height: 300px;"> +<pre class="brush: html"><div class="output" style="height: 300px;"> <label for="theme">Выберите тему: </label> <select id="theme"> <option value="white">Белая</option> @@ -647,7 +647,7 @@ function update(bgColor, textColor) { </div> </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; diff --git a/files/ru/learn/javascript/building_blocks/events/index.html b/files/ru/learn/javascript/building_blocks/events/index.html index 787df877f9..2813a966d0 100644 --- a/files/ru/learn/javascript/building_blocks/events/index.html +++ b/files/ru/learn/javascript/building_blocks/events/index.html @@ -58,15 +58,15 @@ original_slug: Learn/JavaScript/Building_blocks/События <p>Рассмотрим простой пример. Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка {{htmlelement ("button")}}, при нажатии которой цвет фона изменяется случайным образом:</p> -<pre class="brush: html notranslate"><button>Change color</button></pre> +<pre class="brush: html"><button>Change color</button></pre> <div class="hidden"> -<pre class="brush: css notranslate">button { margin: 10px };</pre> +<pre class="brush: css">button { margin: 10px };</pre> </div> <p>JavaScript выглядит так:</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); function random(number) { return Math.floor(Math.random() * (number+1)); @@ -103,7 +103,7 @@ btn.onclick = function() { <p>В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернёмся к приведённому выше примеру:</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); btn.onclick = function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -114,7 +114,7 @@ btn.onclick = function() { <p>Для получения того же результата, вы также можете присвоить свойству обработчика имя уже описанной функции (как мы видели в статье <a href="/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Создайте свою функцию</a>):</p> -<pre class="brush: js notranslate">const btn = document.querySelector('button'); +<pre class="brush: js">const btn = document.querySelector('button'); function bgChange() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -140,10 +140,10 @@ btn.onclick = bgChange;</pre> <p>Самый ранний из введённых в сеть Web методов регистрации <em>обработчиков событий</em> базируется на <strong>HTML атрибутах </strong>(<strong>встроенные обработчики событий</strong>):</p> -<pre class="brush: html notranslate"><button onclick="bgChange()">Press me</button> +<pre class="brush: html"><button onclick="bgChange()">Press me</button> </pre> -<pre class="brush: js notranslate">function bgChange() { +<pre class="brush: js">function bgChange() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; }</pre> @@ -154,7 +154,7 @@ btn.onclick = bgChange;</pre> <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> +<pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> <p>Для многих свойств обработчика событий существуют эквиваленты в виде атрибутов HTML. Однако, не рекомендуется их использовать — это считается плохой практикой. Использование атрибутов для регистрации обработчика событий кажется простым и быстрым методом, но такое описание обработчиков также скоро становится неудобным и неэффективным.</p> @@ -164,7 +164,7 @@ btn.onclick = bgChange;</pre> <p>Например:</p> -<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button'); +<pre class="brush: js">const buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = bgChange; @@ -172,7 +172,7 @@ for (var i = 0; i < buttons.length; i++) { <p class="brush: js">Обратите внимание, что для перебора всех элементов, которые содержит объект <code><a href="/en-US/docs/Web/API/NodeList">NodeList</a></code>, можно воспользоваться встроенным методом <code><a href="/en-US/docs/Web/API/NodeList/forEach">forEach()</a></code>:</p> -<pre class="brush: js notranslate">buttons.forEach(function(button) { +<pre class="brush: js">buttons.forEach(function(button) { button.onclick = bgChange; });</pre> @@ -184,7 +184,7 @@ for (var i = 0; i < buttons.length; i++) { <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'); +<pre class="brush: js">var btn = document.querySelector('button'); function bgChange() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -199,25 +199,25 @@ btn.addEventListener('click', bgChange);</pre> <p>Внутри функции <code>addEventListener()</code> мы указываем два параметра — имя события, для которого мы хотим зарегистрировать этот обработчик, и код, содержащий функцию обработчика, которую мы хотим запустить в ответ. Обратите внимание, что будет целесообразно поместить весь код внутри функции <code>addEventListener()</code> в анонимную функцию, например:</p> -<pre class="brush: js notranslate">btn.addEventListener('click', function() { +<pre class="brush: js">btn.addEventListener('click', function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; 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> -<pre class="brush: js notranslate">btn.removeEventListener('click', bgChange);</pre> +<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre> <p>Это не важно для простых небольших программ, но для более крупных и более сложных программ он может повысить эффективность очистки старых неиспользуемых обработчиков событий. Кроме того, это позволяет вам иметь одну и ту же кнопку, выполняющую различные действия в разных обстоятельствах — все, что вам нужно сделать, это добавить/удалить обработчики событий, если это необходимо.</p> <p>Также вы можете зарегистрировать несколько обработчиков для одного и того же события на элементе. Следующие два обработчика не будут применяться:</p> -<pre class="brush: js notranslate">myElement.onclick = functionA; +<pre class="brush: js">myElement.onclick = functionA; myElement.onclick = functionB;</pre> <p>Поскольку вторая строка будет перезаписывать значение <code>onclick</code>, установленное первой. Однако, если:</p> -<pre class="brush: js notranslate">myElement.addEventListener('click', functionA); +<pre class="brush: js">myElement.addEventListener('click', functionA); myElement.addEventListener('click', functionB);</pre> <p>Обе функции будут выполняться при щелчке элемента.</p> @@ -237,7 +237,7 @@ myElement.addEventListener('click', functionB);</pre> <p>Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя <code>removeEventListener()</code>, и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать <code>addEventListener('click', function() {...})</code> для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:</p> -<pre class="brush: js notranslate">element.onclick = function1; +<pre class="brush: js">element.onclick = function1; element.onclick = function2; etc.</pre> @@ -253,7 +253,7 @@ etc.</pre> <p>Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как <code>event</code>, <code>evt</code> или просто <code>e</code>. Называется он <strong>объектом события</strong> и он автоматически передаётся обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:</p> -<pre class="brush: js notranslate">function bgChange(e) { +<pre class="brush: js">function bgChange(e) { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; e.target.style.backgroundColor = rndCol; console.log(e); @@ -273,7 +273,7 @@ btn.addEventListener('click', bgChange);</pre> <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'); +<pre class="brush: js">var divs = document.querySelectorAll('div'); for (var i = 0; i < divs.length; i++) { divs[i].onclick = function(e) { @@ -286,7 +286,7 @@ for (var i = 0; i < divs.length; i++) { <div class="hidden"> <h6 id="Hidden_example">Hidden example</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -340,7 +340,7 @@ for (var i = 0; i < divs.length; i++) { <p>Простая форма HTML, в которой требуется ввести ваше имя и фамилию:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="fname">Имя: </label> <input id="fname" type="text"> @@ -356,7 +356,7 @@ for (var i = 0; i < divs.length; i++) { <p></p></pre> <div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } </pre> @@ -364,7 +364,7 @@ for (var i = 0; i < divs.length; i++) { <p>В JavaScript мы реализуем очень простую проверку внутри обработчика события <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> (событие "отправить" запускается в форме, когда оно отправлено), который проверяет, пусты ли текстовые поля. Если они пусты, мы вызываем функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> объекта события, которая останавливает отправку формы, а затем выводит сообщение об ошибке в абзаце ниже нашей формы, чтобы сообщить пользователю, что не так:</p> -<pre class="brush: js notranslate">var form = document.querySelector('form'); +<pre class="brush: js">var form = document.querySelector('form'); var fname = document.getElementById('fname'); var lname = document.getElementById('lname'); var submit = document.getElementById('submit'); @@ -392,7 +392,7 @@ form.onsubmit = function(e) { <div class="hidden"> <h6 id="Hidden_video_example">Hidden video example</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -469,7 +469,7 @@ form.onsubmit = function(e) { <p>Это довольно простой пример, который показывает и скрывает {{htmlelement ("div")}} с элементом {{htmlelement ("video")}} внутри него:</p> -<pre class="brush: html notranslate"><button>Display video</button> +<pre class="brush: html"><button>Display video</button> <div class="hidden"> <video> @@ -481,7 +481,7 @@ form.onsubmit = function(e) { <p>При нажатии на кнопку {{htmlelement ("button")}}, изменяется атрибут класса элемента <code><div></code> с <code>hidden</code> на <code>showing</code> (CSS примера содержит эти два класса, которые размещают блок вне экрана и на экране соответственно):</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { position: absolute; top: 50%; transform: translate(-50%,-50%); @@ -494,14 +494,14 @@ form.onsubmit = function(e) { left: 50%; }</font></pre> -<pre class="brush: js notranslate">var btn = document.querySelector('button'); +<pre class="brush: js">var btn = document.querySelector('button'); 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> -<pre class="brush: js notranslate">var videoBox = document.querySelector('div'); +<pre class="brush: js">var videoBox = document.querySelector('div'); var video = document.querySelector('video'); videoBox.onclick = function() { @@ -549,7 +549,7 @@ video.onclick = function() { <p>Поэтому мы можем исправить нашу текущую проблему, изменив вторую функцию-обработчик в предыдущем блоке кода:</p> -<pre class="brush: js notranslate">video.onclick = function(e) { +<pre class="brush: js">video.onclick = function(e) { e.stopPropagation(); video.play(); };</pre> diff --git a/files/ru/learn/javascript/building_blocks/functions/index.html b/files/ru/learn/javascript/building_blocks/functions/index.html index 0db2a14713..9e8fa1c75d 100644 --- a/files/ru/learn/javascript/building_blocks/functions/index.html +++ b/files/ru/learn/javascript/building_blocks/functions/index.html @@ -39,7 +39,7 @@ translation_of: Learn/JavaScript/Building_blocks/Functions <p>В этом курсе мы использовали функции, встроенные в браузер. Каждый раз, когда мы манипулировали текстовой строкой, например:</p> -<pre class="brush: js notranslate">var myText = 'Я строка'; +<pre class="brush: js">var myText = 'Я строка'; var newString = myText.replace('строка', 'сосиска'); console.log(newString); // Функция строки replace() принимает строку, @@ -48,7 +48,7 @@ console.log(newString); <p>Или каждый раз, когда мы манипулировали массивом:</p> -<pre class="brush: js notranslate">var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек']; +<pre class="brush: js">var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек']; var madeAString = myArray.join(' '); console.log(madeAString); // Функция join() принимает массив, соединяет @@ -57,7 +57,7 @@ console.log(madeAString); <p>Или каждый раз, когда мы генерировали случайное число:</p> -<pre class="brush: js notranslate">var myNumber = Math.random() +<pre class="brush: js">var myNumber = Math.random() // Функция random() генерирует случайное число от 0 до 1, // и возвращает это число</pre> @@ -83,7 +83,7 @@ console.log(madeAString); <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() { +<pre class="brush: js">function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); for (var i = 0; i < 100; i++) { ctx.beginPath(); @@ -95,11 +95,11 @@ console.log(madeAString); <p>Эта функция рисует 100 случайных кругов внутри элемента {{htmlelement("canvas")}}. Каждый раз, когда мы хотим это сделать, мы можем вызвать эту функцию следующим образом</p> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> <p>вместо того, чтобы каждый раз, когда мы хотим повторить этот код, не писать его заново. И функции могут содержать любой код, который вам нравится - вы можете даже вызывать другие функции внутри своих функций. Вышеупомянутая функция, например, вызывает функцию <code>random()</code> три раза, которая выглядит следующим образом:</p> -<pre class="brush: js notranslate">function random(number) { +<pre class="brush: js">function random(number) { return Math.floor(Math.random()*number); }</pre> @@ -109,7 +109,7 @@ console.log(madeAString); <p>Скорее всего, вы уже поняли это, но на всякий случай ... чтобы использовать функцию после того, как она была определена, вам нужно запустить или вызвать её. Это делается путём включения имени функции в код где-нибудь, за которым следуют скобки.</p> -<pre class="brush: js notranslate">function myFunction() { +<pre class="brush: js">function myFunction() { alert('привет'); } @@ -120,19 +120,19 @@ myFunction() <p>Вы можете видеть функции, определённые и вызываемые несколькими разными способами. До этого мы создавали функции таким способом:</p> -<pre class="brush: js notranslate">function myFunction() { +<pre class="brush: js">function myFunction() { alert('привет'); }</pre> <p>Но вы также можете создавать функции без имени:</p> -<pre class="brush: js notranslate">function() { +<pre class="brush: js">function() { alert('привет'); }</pre> <p>Такая функция называется <strong>безымянная функция</strong> (или анонимная) — она не имеет имени! Она сама по себе ничего не делает. Обычно такие функции используются вместе с обработчиком событий, например, следующее будет вызывать код внутри функции каждый раз, по нажатию соответствующей кнопки:</p> -<pre class="brush: js notranslate">var myButton = document.querySelector('button'); +<pre class="brush: js">var myButton = document.querySelector('button'); myButton.onclick = function() { alert('привет'); @@ -142,34 +142,34 @@ myButton.onclick = function() { <p>Вы также можете присвоить к переменной анонимную функцию, например:</p> -<pre class="brush: js notranslate">var myGreeting = function() { +<pre class="brush: js">var myGreeting = function() { alert('привет'); }</pre> <p>Теперь эту функцию можно вызвать, используя:</p> -<pre class="brush: js notranslate">myGreeting();</pre> +<pre class="brush: js">myGreeting();</pre> <p>Фактически такой способ присваивает переменной имя; вы также можете присвоить функцию значением нескольких переменных, например:</p> -<pre class="brush: js notranslate">var anotherGreeting = function() { +<pre class="brush: js">var anotherGreeting = function() { alert('привет'); }</pre> <p>Теперь функцию можно вызвать, используя любую из переменных</p> -<pre class="brush: js notranslate">myGreeting(); +<pre class="brush: js">myGreeting(); anotherGreeting();</pre> <p>Но это может ввести в заблуждение, так что не стоит так делать! При создании функций лучше всего придерживаться следующего вида:</p> -<pre class="brush: js notranslate">function myGreeting() { +<pre class="brush: js">function myGreeting() { alert('привет'); }</pre> <p>Чаще всего вы будете использовать анонимные функции, чтобы просто запускать код при срабатывания события - например, нажатие кнопки - с помощью обработчика событий. Опять же, это выглядит примерно так:</p> -<pre class="brush: js notranslate">myButton.onclick = function() { +<pre class="brush: js">myButton.onclick = function() { alert('привет'); // При желании, внутри этой функции // можно написать много кода. @@ -185,11 +185,11 @@ anotherGreeting();</pre> <p>Например встроенная в браузер функция <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> не требует параметров. При вызове, она всегда возвращает случайное число от 0 до 1:</p> -<pre class="brush: js notranslate">var myNumber = Math.random();</pre> +<pre class="brush: js">var myNumber = Math.random();</pre> <p>Браузерная встроенная функция, работающая со строкой, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> ожидает два параметра — это подстрока для поиска в основной строке и строка, на которую происходит замена в основной строке:</p> -<pre class="brush: js notranslate">var myText = 'Я строка'; +<pre class="brush: js">var myText = 'Я строка'; var newString = myText.replace('строка', 'сосиска');</pre> <div class="note"> @@ -198,7 +198,7 @@ var newString = myText.replace('строка', 'сосиска');</pre> <p>Следует также отметить, что иногда параметры являются необязательными - вам не нужно их указывать. Если вы этого не сделаете, функция, как правило, примет какое-то поведение по умолчанию. В качестве примера параметр функции массива <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> необязателен:</p> -<pre class="brush: js notranslate">var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек']; +<pre class="brush: js">var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек']; var madeAString = myArray.join(' '); // Вернёт 'Я люблю шоколадных лягушек' var madeAString = myArray.join(); @@ -216,20 +216,20 @@ var madeAString = myArray.join(); <p>Например, скажем, у вас есть файл HTML, который вызывается в двух внешних файлах JavaScript, и оба они имеют переменную и определённую функцию, которые используют одно и то же имя:</p> -<pre class="brush: html notranslate"><!-- Excerpt from my HTML --> +<pre class="brush: html"><!-- Excerpt from my HTML --> <script src="first.js"></script> <script src="second.js"></script> <script> greeting(); </script></pre> -<pre class="brush: js notranslate">// first.js +<pre class="brush: js">// first.js var name = 'Chris'; function greeting() { alert('Hello ' + name + ': welcome to our company.'); }</pre> -<pre class="brush: js notranslate">// second.js +<pre class="brush: js">// second.js var name = 'Zaptec'; function greeting() { alert('Our company is called ' + name + '.'); @@ -257,14 +257,14 @@ function greeting() { <li>Сначала создайте локальную копию нашего примера <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. Это содержит две функции, называемые <code>a()</code> и <code>b()</code>, и три переменные - <code>x</code>, <code>y</code> и <code>z</code> - две из которых определены внутри функций и одна в глобальной области. Он также содержит третью функцию, называемую <code>output()</code>, которая принимает один параметр и выводит его в абзаце на странице.</li> <li>Откройте пример в браузере и в текстовом редакторе.</li> <li>Откройте консоль JavaScript в инструментах разработчика вашего браузера. В консоли JavaScript введите следующую команду: - <pre class="brush: js notranslate">output(x);</pre> + <pre class="brush: js">output(x);</pre> вы должны увидеть значение переменной <code>x</code> вывод на экране.</li> <li>Теперь попробуйте ввести следующее в консоли - <pre class="brush: js notranslate">output(y); + <pre class="brush: js">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>, чтобы они выглядели следующим образом: - <pre class="brush: js notranslate">function a() { + <pre class="brush: js">function a() { var y = 2; output(y); } @@ -275,11 +275,11 @@ function b() { }</pre> Сохраните код и перезагрузите его в своём браузере, затем попробуйте вызвать функции <code>a()</code> и <code>b()</code> из консоли JavaScript: - <pre class="brush: js notranslate">a(); + <pre class="brush: js">a(); b();</pre> вы должны увидеть значения y и z, выводимые на странице. Это отлично работает, так как функция <code>output() </code>вызывается внутри других функций - в той же области, где переменные, которые она печатает, определяются в каждом случае. <code>output()</code> доступен из любого места, поскольку он определён в глобальной области.</li> <li>Теперь попробуйте обновить свой код следующим образом: - <pre class="brush: js notranslate">function a() { + <pre class="brush: js">function a() { var y = 2; output(x); } @@ -290,13 +290,13 @@ function b() { }</pre> Сохраните и перезагрузите снова и повторите попытку в консоли JavaScript:</li> <li> - <pre class="brush: js notranslate"><code>a(); + <pre class="brush: js"><code>a(); b();</code></pre> <p>Оба вызова <code>a()</code> и <code>b()</code> должны выводить значение x - 1. Они работают нормально, потому что, хотя вызовы <code>output()</code> не находятся в той же области, где определено <code>x</code>, <code>x</code> - глобальная переменная, поэтому она доступна внутри всего кода, везде</p> </li> <li>Наконец, попробуйте обновить свой код следующим образом: - <pre class="brush: js notranslate"><code>function a() { + <pre class="brush: js"><code>function a() { var y = 2; output(z); } @@ -307,7 +307,7 @@ function b() { }</code></pre> Сохраните и перезагрузите снова и повторите попытку в консоли JavaScript:</li> <li> - <pre class="brush: js notranslate"><code>a(); + <pre class="brush: js"><code>a(); b();</code></pre> </li> </ol> @@ -329,7 +329,7 @@ b();</code></pre> <p>Имейте в виду, что вы можете вызывать функцию из любого места, даже если она внутри другой функции. Это часто используется как способ поддержания чистоты кода. Если у вас есть большая сложная функция, её легче понять, если разбить её на несколько подфункций:</p> -<pre class="brush: js notranslate">function myBigFunction() { +<pre class="brush: js">function myBigFunction() { var myValue; subFunction1(); @@ -352,7 +352,7 @@ function subFunction3() { <p>Просто убедитесь, что значения, используемые внутри функции, находятся в области видимости. В приведённом выше примере выдаётся ошибка <code>ReferenceError: MyValue is not defined</code>, поскольку хотя переменная <code>myValue</code> определена в той же области, что и вызовы функций, она не определена в определениях функций - фактический код, который запускается при вызове функций. Чтобы это работало, вам нужно передать значение в функцию в качестве параметра, например так:</p> -<pre class="brush: js notranslate">function myBigFunction() { +<pre class="brush: js">function myBigFunction() { var myValue = 1; subFunction1(myValue); 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 b3f85a278e..773fc55377 100644 --- a/files/ru/learn/javascript/building_blocks/looping_code/index.html +++ b/files/ru/learn/javascript/building_blocks/looping_code/index.html @@ -41,7 +41,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <p>В <a href="/ru/docs/Glossary/Pseudocode">псевдокоде</a> это будет выглядеть следующим образом:</p> -<pre class="notranslate">loop(food = 0; foodNeeded = 10) { +<pre>loop(food = 0; foodNeeded = 10) { if (food = foodNeeded) { exit loop; // У нас достаточно еды, пора домой @@ -64,7 +64,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <div class="hidden"> <h6 id="Hidden_code">Hidden code</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -135,7 +135,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <p>Вам необязательно понимать все части кода, но давайте посмотрим на место, где рисуются 100 кругов.</p> -<pre class="brush: js notranslate">for (var i = 0; i < 100; i++) { +<pre class="brush: js">for (var i = 0; i < 100; i++) { ctx.beginPath(); ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); @@ -151,7 +151,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code <p>Если бы мы не использовали циклы, нам бы пришлось повторить следующий код, для отрисовки каждого круга:</p> -<pre class="brush: js notranslate">ctx.beginPath(); +<pre class="brush: js">ctx.beginPath(); ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill();</pre> @@ -162,7 +162,7 @@ ctx.fill();</pre> <p>Рассмотрим некоторые конкретные конструкции циклов. Первый вариант, который вы будете использовать чаще всего, это цикл <a href="/ru/docs/Web/JavaScript/Reference/Statements/for">for</a>. Он имеет следующий синтаксис:</p> -<pre class="notranslate">for (initializer; exit-condition; final-expression) { +<pre>for (initializer; exit-condition; final-expression) { // код для выполнения }</pre> @@ -182,7 +182,7 @@ ctx.fill();</pre> <p>Посмотрим на пример, чтобы разобраться в этом более детально.</p> -<pre class="brush: js notranslate">var cats = ['Билл', 'Макс', 'Пикси', 'Алиса', 'Жасмин']; +<pre class="brush: js">var cats = ['Билл', 'Макс', 'Пикси', 'Алиса', 'Жасмин']; var info = 'Моих кошек зовут '; var para = document.querySelector('p'); @@ -197,7 +197,7 @@ para.textContent = info;</pre> <div class="hidden"> <h6 id="Hidden_code_2">Hidden code 2</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -266,7 +266,7 @@ para.textContent = info;</pre> <p>В идеале мы хотим изменить конкатенацию на последней итерации цикла так, чтобы у нас не было запятой в конце предложения. Для этого нужно добавить условное выражение внутрь цикла <code>for</code> для обработки этого особого случая:</p> -<pre class="brush: js notranslate">for (var i = 0; i < cats.length; i++) { +<pre class="brush: js">for (var i = 0; i < cats.length; i++) { if (i === cats.length - 1) { info += 'и ' + cats[i] + '.'; } else { @@ -291,7 +291,7 @@ para.textContent = info;</pre> <p>Предположим, в массиве данных мы хотим найти имена контактов и телефонные номера, а вернуть только номер, который мы нашли.<br> Начнём с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:</p> -<pre class="brush: html notranslate"><label for="search">Поиск по имени: </label> +<pre class="brush: html"><label for="search">Поиск по имени: </label> <input id="search" type="text"> <button>Поиск</button> @@ -299,7 +299,7 @@ para.textContent = info;</pre> <p>Теперь в JavaScript:</p> -<pre class="brush: js notranslate">var contacts = ['Григорий:2232322', 'Марина:3453456', 'Василий:7654322', 'Наталья:9998769', 'Диана:9384975']; +<pre class="brush: js">var contacts = ['Григорий:2232322', 'Марина:3453456', 'Василий:7654322', 'Наталья:9998769', 'Диана:9384975']; var para = document.querySelector('p'); var input = document.querySelector('input'); var btn = document.querySelector('button'); @@ -322,7 +322,7 @@ btn.addEventListener('click', function() { <div class="hidden"> <h6 id="Hidden_code_3">Hidden code 3</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -395,7 +395,7 @@ btn.addEventListener('click', function() { <p>Код HTML в основном такой же, как и в предыдущем примере — простой ввод текста и абзац для вывода. JavaScript в основном такой же, хотя сам цикл немного другой:</p> -<pre class="brush: js notranslate">var num = input.value; +<pre class="brush: js">var num = input.value; for (var i = 1; i <= num; i++) { var sqRoot = Math.sqrt(i); @@ -411,7 +411,7 @@ for (var i = 1; i <= num; i++) { <div class="hidden"> <h6 id="Hidden_code_4">Hidden code 4</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -473,7 +473,7 @@ for (var i = 1; i <= num; i++) { <p>Рассмотрим цикл <a href="/ru/docs/Web/JavaScript/Reference/Statements/while">while</a>. Синтаксис этого цикла выглядит так:</p> -<pre class="notranslate">initializer +<pre>initializer while (exit-condition) { // code to run @@ -488,7 +488,7 @@ while (exit-condition) { <p>Посмотрим ещё раз пример со списком кошек с кодом переписанным под использование цикла <code>while:</code></p> -<pre class="brush: js notranslate">var i = 0; +<pre class="brush: js">var i = 0; while (i < cats.length) { if (i === cats.length - 1) { @@ -506,7 +506,7 @@ while (i < cats.length) { <p>Цикл<strong> <a href="/ru/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a></strong> представляет собой вариацию структуры цикла <code>while</code>:</p> -<pre class="notranslate">initializer +<pre>initializer do { // code to run @@ -519,7 +519,7 @@ do { <p>Перепишем наш пример с кошками, чтобы использовать цикл <code>do...while</code>:</p> -<pre class="brush: js notranslate">var i = 0; +<pre class="brush: js">var i = 0; do { if (i === cats.length - 1) { @@ -568,7 +568,7 @@ do { <div class="hidden"> <h6 id="Active_learning">Active learning</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="height: 410px;overflow: auto;"> </div> @@ -598,7 +598,7 @@ output.innerHTML = ''; <p class="brush: js"></p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -626,7 +626,7 @@ body { <p class="brush: js"></p> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -740,7 +740,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Active_learning_2">Active learning 2</h6> -<pre class="brush: html notranslate"><h2>Live output</h2> +<pre class="brush: html"><h2>Live output</h2> <div class="output" style="height: 100px;overflow: auto;"> <p class="admitted">Пригласить: </p> <p class="refused">Не приглашать(!): </p> @@ -769,7 +769,7 @@ refused.textContent = 'Не приглашать(!): ' </div> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -789,7 +789,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -875,13 +875,13 @@ textarea.onkeyup = function(){ <p><strong><code>For</code></strong>:</p> -<pre class="notranslate">for (initializer; exit-condition; final-expression) { +<pre>for (initializer; exit-condition; final-expression) { // code to run }</pre> <p><strong><code>while</code></strong>:</p> -<pre class="notranslate">initializer +<pre>initializer while (exit-condition) { // code to run @@ -890,7 +890,7 @@ while (exit-condition) { <p><strong><code>do...while</code></strong>:</p> -<pre class="notranslate">initializer +<pre>initializer do { // code to run 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 940cbe5333..fb71ec78d6 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 @@ -98,12 +98,12 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage <p>{{domxref("Storage.setItem()")}} метод позволяет сохранить элемент данных в хранилище - он принимает два параметра: имя элемента и его значение. Попробуйте ввести это в свою консоль JavaScript (измените значение на своё собственное имя, если хотите!):</p> - <pre class="brush: js notranslate">localStorage.setItem('name','Chris');</pre> + <pre class="brush: js">localStorage.setItem('name','Chris');</pre> </li> <li> <p>{{domxref("Storage.getItem()")}} метод принимает один параметр - имя элемента данных, который вы хотите получить - и возвращает значение элемента. Теперь введите эти строки в вашу консоль JavaScript:</p> - <pre class="brush: js notranslate">var myName = localStorage.getItem('name'); + <pre class="brush: js">var myName = localStorage.getItem('name'); myName</pre> <p>После ввода во второй строке вы должны увидеть, что переменная <code>myName</code> теперь содержит значение элемента данных <code>name</code>.</p> @@ -111,7 +111,7 @@ myName</pre> <li> <p>{{domxref("Storage.removeItem()")}} метод принимает один параметр - имя элемента данных, который вы хотите удалить, - и удаляет этот элемент из веб-хранилища. Введите следующие строки в вашу консоль JavaScript:</p> - <pre class="brush: js notranslate">localStorage.removeItem('name'); + <pre class="brush: js">localStorage.removeItem('name'); var myName = localStorage.getItem('name'); myName</pre> @@ -130,7 +130,7 @@ myName</pre> <li> <p>Введите эти строки в консоль JavaScript браузера:</p> - <pre class="brush: js notranslate">localStorage.setItem('name','Chris'); + <pre class="brush: js">localStorage.setItem('name','Chris'); var myName = localStorage.getItem('name'); myName</pre> @@ -142,7 +142,7 @@ myName</pre> <li> <p>Введите следующий код:</p> - <pre class="brush: js notranslate">var myName = localStorage.getItem('name'); + <pre class="brush: js">var myName = localStorage.getItem('name'); myName</pre> <p>Вы должны увидеть, что значение всё ещё доступно, даже после закрытия / открытия браузера.</p> @@ -175,7 +175,7 @@ myName</pre> <li> <p>Мы начнём с создания ссылок на все функции HTML, которыми мы должны манипулировать в этом примере - мы создадим их все как константы, поскольку эти ссылки не нужно изменять в жизненном цикле приложения. Добавьте следующие строки в ваш файл JavaScript:</p> - <pre class="brush: js notranslate">// create needed constants + <pre class="brush: js">// create needed constants const rememberDiv = document.querySelector('.remember'); const forgetDiv = document.querySelector('.forget'); const form = document.querySelector('form'); @@ -189,7 +189,7 @@ const personalGreeting = document.querySelector('.personal-greeting');</pre> <li> <p>Далее нам нужно включить небольшой обработчик событий, чтобы форма фактически не отправляла себя при нажатии кнопки отправки, так как это не то поведение, которое нам нужно. Добавьте этот фрагмент ниже вашего предыдущего кода:</p> - <pre class="brush: js notranslate">// Stop the form from submitting when a button is pressed + <pre class="brush: js">// Stop the form from submitting when a button is pressed form.addEventListener('submit', function(e) { e.preventDefault(); });</pre> @@ -197,7 +197,7 @@ form.addEventListener('submit', function(e) { <li> <p>Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берём имя, которое пользователь ввёл в поле ввода текста, и сохраняем его в веб-хранилище с помощью <code>setItem()</code>, затем запускаем функцию <code>nameDisplayCheck()</code>, которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: </p> - <pre class="brush: js notranslate">// run function when the 'Say hello' button is clicked + <pre class="brush: js">// run function when the 'Say hello' button is clicked submitBtn.addEventListener('click', function() { // store the entered name in web storage localStorage.setItem('name', nameInput.value); @@ -209,7 +209,7 @@ submitBtn.addEventListener('click', function() { <li> <p>На этом этапе нам также необходим обработчик событий для запуска функции при нажатии кнопки «Forget» — она будет отображена только после того как кнопка «Say hello» будет нажата (две формы состояния для переключения между ними). В этой функции мы удаляем переменную <code>name</code> из веб-хранилища используя <code>removeItem()</code>, затем снова запускаем <code>nameDisplayCheck()</code> для обновления. Добавьте этот код в конец:</p> - <pre class="brush: js notranslate">// run function when the 'Forget' button is clicked + <pre class="brush: js">// run function when the 'Forget' button is clicked forgetBtn.addEventListener('click', function() { // Remove the stored name from web storage localStorage.removeItem('name'); @@ -221,7 +221,7 @@ forgetBtn.addEventListener('click', function() { <li> <p>Самое время для определения самой функции <code>nameDisplayCheck()</code>. Здесь мы проверяем была ли переменная <code>name</code> сохранена в веб-хранилище с помощью <code>localStorage.getItem('name')</code> в качестве условия. Если переменная <code>name</code> была сохранена, то вызов вернёт - <code>true</code>; если же нет, то - <code>false</code>. Если <code>true</code>, мы показываем персональное приветствие, отображаем кнопку «Forget», и скрываем кнопку «Say hello». Если же <code>false</code>, мы отображаем общее приветствие и делаем обратное. Опять же, добавьте следующий код в конец:</p> - <pre class="brush: js notranslate">// define the nameDisplayCheck() function + <pre class="brush: js">// define the nameDisplayCheck() function function nameDisplayCheck() { // check whether the 'name' data item is stored in web Storage if(localStorage.getItem('name')) { @@ -245,7 +245,7 @@ function nameDisplayCheck() { <li> <p>Последнее но не менее важное, нам необходимо запускать функцию <code>nameDisplayCheck()</code> при каждой загрузке страницы. Если мы не сделаем этого, персональное приветствие не будет сохранятся после перезагрузки страницы. Добавьте следующий фрагмент в конец вашего кода:</p> - <pre class="brush: js notranslate">document.body.onload = nameDisplayCheck;</pre> + <pre class="brush: js">document.body.onload = nameDisplayCheck;</pre> </li> </ol> @@ -291,7 +291,7 @@ function nameDisplayCheck() { <li> <p>Below the constant declarations, add the following lines:</p> - <pre class="brush: js notranslate">// Create an instance of a db object for us to store the open database in + <pre class="brush: js">// Create an instance of a db object for us to store the open database in let db;</pre> <p>Here we are declaring a variable called <code>db</code> — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier.</p> @@ -299,7 +299,7 @@ let db;</pre> <li> <p>Next, add the following to the bottom of your code:</p> - <pre class="brush: js notranslate">window.onload = function() { + <pre class="brush: js">window.onload = function() { };</pre> @@ -308,7 +308,7 @@ let db;</pre> <li> <p>Inside the <code>window.onload</code> handler, add the following:</p> - <pre class="brush: js notranslate">// Open our database; it is created if it doesn't already exist + <pre class="brush: js">// Open our database; it is created if it doesn't already exist // (see onupgradeneeded below) let request = window.indexedDB.open('notes', 1);</pre> @@ -323,7 +323,7 @@ let request = window.indexedDB.open('notes', 1);</pre> <li> <p>Now add the following event handlers just below your previous addition — again inside the <code>window.onload</code> handler:</p> - <pre class="brush: js notranslate">// onerror handler signifies that the database didn't open successfully + <pre class="brush: js">// onerror handler signifies that the database didn't open successfully request.onerror = function() { console.log('Database failed to open'); }; @@ -346,7 +346,7 @@ request.onsuccess = function() { <li> <p>Finally for this section, we'll add probably the most important event handler for setting up the database: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. This handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). Add the following code, below your previous handler:</p> - <pre class="brush: js notranslate">// Setup the database tables if this has not already been done + <pre class="brush: js">// Setup the database tables if this has not already been done request.onupgradeneeded = function(e) { // Grab a reference to the opened database let db = e.target.result; @@ -372,7 +372,7 @@ request.onupgradeneeded = function(e) { <p>So with this simple database schema set up, when we start adding records to the database each one will be represented as an object along these lines:</p> -<pre class="brush: js notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectLeftBrace">{ +<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectLeftBrace">{ </span><span class="nodeName">title</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Buy milk"</span>, <span class="nodeName">body</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Need both cows milk and soya."</span>, <span class="nodeName">id</span><span class="objectEqual">: </span><span class="objectBox objectBox-number">8</span></span></span></span></span><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectRightBrace"> @@ -384,12 +384,12 @@ request.onupgradeneeded = function(e) { <p>Below your previous event handler (but still inside the <code>window.onload</code> handler), add the following line, which sets up an <code>onsubmit</code> handler that runs a function called <code>addData()</code> when the form is submitted (when the submit {{htmlelement("button")}} is pressed leading to a successful form submission):</p> -<pre class="brush: js notranslate">// Create an onsubmit handler so that when the form is submitted the addData() function is run +<pre class="brush: js">// Create an onsubmit handler so that when the form is submitted the addData() function is run form.onsubmit = addData;</pre> <p>Now let's define the <code>addData()</code> function. Add this below your previous line:</p> -<pre class="brush: js notranslate">// Define the addData() function +<pre class="brush: js">// Define the addData() function function addData(e) { // prevent default - we don't want the form to submit in the conventional way e.preventDefault(); @@ -439,7 +439,7 @@ function addData(e) { <p>We've referenced <code>displayData()</code> twice in our code already, so we'd probably better define it. Add this to your code, below the previous function definition:</p> -<pre class="brush: js notranslate">// Define the displayData() function +<pre class="brush: js">// Define the displayData() function function displayData() { // Here we empty the contents of the list element each time the display is updated // If you ddn't do this, you'd get duplicates listed each time a new note is added @@ -516,7 +516,7 @@ function displayData() { <p>As stated above, when a note's delete button is pressed, the note is deleted. This is achieved by the <code>deleteItem()</code> function, which looks like so:</p> -<pre class="brush: js notranslate">// Define the deleteItem() function +<pre class="brush: js">// Define the deleteItem() function function deleteItem(e) { // retrieve the name of the task we want to delete. We need // to convert it to a number before trying it use it with IDB; IDB key @@ -566,7 +566,7 @@ function deleteItem(e) { <li> <p>For this simple example, we've stored the names of the videos to fetch in an array of objects:</p> - <pre class="brush: js notranslate">const videos = [ + <pre class="brush: js">const videos = [ { 'name' : 'crystal' }, { 'name' : 'elf' }, { 'name' : 'frog' }, @@ -580,7 +580,7 @@ function deleteItem(e) { <p>If each video is found in the database (easily checked by seeing whether <code>request.result</code> evaluates to <code>true</code> — if the record is not present, it will be <code>undefined</code>), its video files (stored as blobs) and the video name are passed straight to the <code>displayVideo()</code> function to place them in the UI. If not, the video name is passed to the <code>fetchVideoFromNetwork()</code> function to ... you guessed it — fetch the video from the network.</p> - <pre class="brush: js notranslate">function init() { + <pre class="brush: js">function init() { // Loop through the video names one by one for(let i = 0; i < videos.length; i++) { // Open transaction, get object store, and get() each video by name @@ -607,7 +607,7 @@ function deleteItem(e) { <p>When all those promises have fulfilled, the <code>all()</code> promise fulfills with an array containing all the individual fulfillment values. Inside the <code>all()</code> block, you can see that we then call the <code>displayVideo()</code> function like we did before to display the videos in the UI, then we also call the <code>storeVideo()</code> function to store those videos inside the database.</p> - <pre class="brush: js notranslate">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response => + <pre class="brush: js">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response => response.blob() ); let webmBlob = fetch('videos/' + video.name + '.webm').then(response => @@ -625,7 +625,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <li> <p>Let's look at <code>storeVideo()</code> first. This is very similar to the pattern you saw in the previous example for adding data to the database — we open a <code>readwrite</code> transaction and get an object store reference our <code>videos</code>, create an object representing the record to add to the database, then simply add it using {{domxref("IDBObjectStore.add()")}}.</p> - <pre class="brush: js notranslate">function storeVideo(mp4Blob, webmBlob, name) { + <pre class="brush: js">function storeVideo(mp4Blob, webmBlob, name) { // Open transaction, get object store; make it a readwrite so we can write to the IDB let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos'); // Create a record to add to the IDB @@ -645,7 +645,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <li> <p>Last but not least, we have <code>displayVideo()</code>, which creates the DOM elements needed to insert the video in the UI and then appends them to the page. The most interesting parts of this are those shown below — to actually display our video blobs in a <code><video></code> element, we need to create object URLs (internal URLs that point to the video blobs stored in memory) using the {{domxref("URL.createObjectURL()")}} method. Once that is done, we can set the object URLs to be the vaues of our {{htmlelement("source")}} element's <code>src</code> attributes, and it works fine.</p> - <pre class="brush: js notranslate">function displayVideo(mp4Blob, webmBlob, title) { + <pre class="brush: js">function displayVideo(mp4Blob, webmBlob, title) { // Create object URLs out of the blobs let mp4URL = URL.createObjectURL(mp4Blob); let webmURL = URL.createObjectURL(webmBlob); @@ -694,7 +694,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <p>Первое, что нужно заметить, это дополнительный кусок кода, расположенный в основном JavaScript файле (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js">index.js</a>). Первое,что мы делаем, это проверка на то, что <code>serviceWorker</code> доступен в объекте {{domxref("Navigator")}}. Если этот так, тогда мы знаем, что как минимум, базовые функции сервис-воркера доступны. Внутри проверки мы используем метод {{domxref("ServiceWorkerContainer.register()")}} для регистрации сервис-воркера, находящегося в файле <code>sw.js</code> на текущем источнике, таким образом, он может управлять страницами в текущей или внутренних директориях. Когда промис выполнится, сервис-воркер считается зарегистрированным.</p> -<pre class="brush: js notranslate"> // Регистрация сервис-воркера для обеспечения доступности сайта в офлайне +<pre class="brush: js"> // Регистрация сервис-воркера для обеспечения доступности сайта в офлайне if('serviceWorker' in navigator) { navigator.serviceWorker @@ -716,7 +716,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <p>Здесь мы видим Cache API в действии. Мы используем метод {{domxref("CacheStorage.open()")}} для открытия нового объекта кеша, в котором ответы могут быть сохранены (похоже на объект хранилища IndexedDB). Промис выполнится с объектом {{domxref("Cache")}}, представляющим собой кеш <code>video-store</code> . Затем мы используем метод {{domxref("Cache.addAll()")}} для получения ресурсов и добавления ответов в кеш.</p> -<pre class="brush: js notranslate">self.addEventListener('install', function(e) { +<pre class="brush: js">self.addEventListener('install', function(e) { e.waitUntil( caches.open('video-store').then(function(cache) { return cache.addAll([ @@ -743,7 +743,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <p>Если совпадение нашлось, то просто возвращаем его как особый ответ. В противном случае, используем <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a> для запроса ресурса из сети.</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', function(e) { +<pre class="brush: js">self.addEventListener('fetch', function(e) { console.log(e.request.url); e.respondWith( caches.match(e.request).then(function(response) { 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 32cf39bfb3..da08302bc6 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 @@ -116,7 +116,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <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">see it live also</a>), вы увидите следующий код:</p> -<pre class="brush: js notranslate">navigator.geolocation.getCurrentPosition(function(position) { +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); var myOptions = { zoom: 8, @@ -133,11 +133,11 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction <p>Во-первых, мы хотим использовать метод {{domxref("Geolocation.getCurrentPosition()")}}, чтобы получить текущее положение нашего устройства. Доступ к объекту браузера {{domxref("Geolocation")}} производится с помощью свойства {{domxref("Navigator.geolocation")}}, так что мы начнём с</p> -<pre class="brush: js notranslate">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre> +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre> <p>Это эквивалентно следующему коду</p> -<pre class="brush: js notranslate">var myGeo = navigator.geolocation; +<pre class="brush: js">var myGeo = navigator.geolocation; myGeo.getCurrentPosition(function(position) { ... });</pre> <p>Но мы можем использовать точки, чтобы связать доступ к свойствам/методам объекта в одно выражение, уменьшая количество строк в программе.</p> @@ -150,22 +150,22 @@ myGeo.getCurrentPosition(function(position) { ... });</pre> <p>Такой подход, при котором функция вызывается только тогда, когда операция была завершена, очень распространён в JavaScript API — убедиться, что операция была завершена прежде, чем пытаться использовать данные, которые она возвращает, в другой операции. Такие операции также называют асинхронными операциями (<strong><a href="/en-US/docs/Glossary/Asynchronous">asynchronous</a> operations)</strong>. Учитывая, что получение данных геолокации производится из внешнего устройства (GPS-устройства или другого устройства геолокации), мы не можем быть уверены, что операция считывания будет завершена вовремя и мы сможем незамедлительно использовать возвращаемые ею данные. Поэтому такой код не будет работать:</p> -<pre class="brush: js example-bad notranslate">var position = navigator.geolocation.getCurrentPosition(); +<pre class="brush: js example-bad">var position = navigator.geolocation.getCurrentPosition(); var myLatitude = position.coords.latitude;</pre> <p>Если первая строка ещё не вернула результат, вторая вызовет ошибку из-за того, что данные геолокации ещё не стали доступны. По этой причине, API, использующие асинхронные операции, разрабатываются с использованием {{glossary("callback function")}}, или более современной системы <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">промисов</a>, которая появилась в ECMAScript 6 и широко используются в новых API.</p> <p>Мы совмещаем API Геолокации со сторонним API - Google Maps API, который используем для того, чтобы отметить расположение, возвращаемое <code>getCurrentPosition()</code> , на Google Map. Чтобы Google Maps API стал доступен на нашей странице, мы включаем его в HTML документ:</p> -<pre class="brush: html notranslate"><script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script></pre> +<pre class="brush: html"><script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script></pre> <p>Чтобы использовать этот API, во-первых создадим объект <code>LatLng</code> с помощью конструктора <code>google.maps.LatLng()</code> , принимающим данные геолокации {{domxref("Coordinates.latitude")}} и {{domxref("Coordinates.longitude")}} :</p> -<pre class="brush: js notranslate">var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);</pre> +<pre class="brush: js">var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);</pre> <p>Этот объект сам является значением свойства <code>center</code> объекта настроек (options), который мы назвали <code>myOptions</code>. Затем мы создаём экземпляр объекта, представляющего нашу карту, вызывая конструктор <code>google.maps.Map()</code> и передавая ему два параметра — ссылку на элемент {{htmlelement("div")}}, на котором мы хотим отрисовывать карту (с ID <code>map_canvas</code>), и объект настроек (options), который мы определили выше.</p> -<pre class="brush: js notranslate">var myOptions = { +<pre class="brush: js">var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.TERRAIN, @@ -193,19 +193,19 @@ var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions); <p>Найти точку входа Document Object Model (DOM) API ещё проще — при применении этого API используется объект {{domxref("Document")}}, или экземпляр элемента HTML, с которым вы хотите каким-либо образом взаимодействовать, к примеру:</p> -<pre class="brush: js notranslate">var em = document.createElement('em'); // создаёт новый элемент em +<pre class="brush: js">var em = document.createElement('em'); // создаёт новый элемент em var para = document.querySelector('p'); // ссылка на существующий элемент p em.textContent = 'Hello there!'; // присвоение текстового содержимого para.appendChild(em); // встроить em внутрь para</pre> <p>Точки входа других API немного сложнее, часто подразумевается создание особого контекста, в котором будет написан код API. Например, объект контекста Canvas API создаётся получением ссылки на элемент {{htmlelement("canvas")}}, на котором вы хотите рисовать, а затем необходимо вызвать метод {{domxref("HTMLCanvasElement.getContext()")}}:</p> -<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'); +<pre class="brush: js">var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d');</pre> <p>Всё, что мы хотим сделать с canvas после этого, достигается вызовом свойств и методов объекта содержимого (content) (который является экземпляром {{domxref("CanvasRenderingContext2D")}}), например:</p> -<pre class="brush: js notranslate">Ball.prototype.draw = function() { +<pre class="brush: js">Ball.prototype.draw = function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); @@ -224,7 +224,7 @@ var ctx = canvas.getContext('2d');</pre> <p>Следующий код содержит простой пример использования событий:</p> -<pre class="brush: js notranslate">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; +<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; 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 9c45929f87..61d208d98f 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 @@ -51,7 +51,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <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> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -95,13 +95,13 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <li>Возьмите локальную копию страницы <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html page</a> и изображение, которое вместе с ним.</li> <li>Добавьте элемент <code><script></script></code> чуть выше закрывающего тега <code></body></code>.</li> <li>Чтобы управлять элементом внутри DOM, вам сначала нужно выбрать его и сохранить ссылку на него внутри переменной. Внутри вашего скриптового элемента добавьте следующую строку: - <pre class="brush: js notranslate">var link = document.querySelector('a');</pre> + <pre class="brush: js">var link = document.querySelector('a');</pre> </li> <li>Теперь у нас есть ссылка на элемент, хранящаяся в переменной, мы можем начать её манипулировать с использованием доступных ему свойств и методов (они определены на таких интерфейсах, как {{domxref("HTMLAnchorElement")}} в случае {{htmlelement ("a")}}, его более общий родительский интерфейс {{domxref ("HTMLElement")}} и {{domxref("Node")}} - который представляет все узлы в DOM). Прежде всего, давайте изменим текст внутри ссылки, обновив значение свойства {{domxref("Node.textContent")}}. Добавьте следующую строку ниже предыдущей: - <pre class="brush: js notranslate">link.textContent = 'Mozilla Developer Network';</pre> + <pre class="brush: js">link.textContent = 'Mozilla Developer Network';</pre> </li> <li>Мы также должны изменить URL-адрес, на который указывает ссылка, чтобы он не попадал в неправильное место при нажатии. Добавьте следующую строку, опять внизу: - <pre class="brush: js notranslate">link.href = 'https://developer.mozilla.org';</pre> + <pre class="brush: js">link.href = 'https://developer.mozilla.org';</pre> </li> </ol> @@ -124,20 +124,20 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents <ol> <li>Возвращаясь к текущему примеру, давайте начнём с захвата ссылки на наш элемент {{htmlelement("section")}} - добавьте следующий код внизу существующего скрипта (сделайте то же самое с другими строками): - <pre class="brush: js notranslate">var sect = document.querySelector('section');</pre> + <pre class="brush: js">var sect = document.querySelector('section');</pre> </li> <li>Теперь давайте создадим новый абзац, используя {{domxref("Document.createElement()")}} и передадим ему текстовое содержимое так же, как и раньше: - <pre class="brush: js notranslate">var para = document.createElement('p'); + <pre class="brush: js">var para = document.createElement('p'); para.textContent = 'We hope you enjoyed the ride.';</pre> </li> <li>Теперь вы можете добавить новый абзац в конце раздела, используя {{domxref("Node.appendChild()")}}: - <pre class="brush: js notranslate">sect.appendChild(para);</pre> + <pre class="brush: js">sect.appendChild(para);</pre> </li> <li>Наконец, для этой части, давайте добавим текстовый узел в абзац, где находится ссылка, чтобы оформить предложение красиво. Сначала мы создадим текстовый узел, используя {{domxref("Document.createTextNode()")}}: - <pre class="brush: js notranslate">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre> + <pre class="brush: js">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre> </li> <li>Теперь мы возьмём ссылку на абзац, в котором находится ссылка, и добавим к нему текстовый узел: - <pre class="brush: js notranslate">var linkPara = document.querySelector('p'); + <pre class="brush: js">var linkPara = document.querySelector('p'); linkPara.appendChild(text);</pre> </li> </ol> @@ -150,17 +150,17 @@ linkPara.appendChild(text);</pre> <p>Если бы мы хотели переместить абзац со ссылкой внутри него в нижней части раздела, мы могли бы просто сделать это:</p> -<pre class="brush: js notranslate">sect.appendChild(linkPara);</pre> +<pre class="brush: js">sect.appendChild(linkPara);</pre> <p>Это переводит абзац вниз в нижнюю часть раздела. Вы могли подумать, что это сделает вторую копию, но это не так - <code>linkPara</code> - ссылка на единственную копию этого абзаца. Если вы хотите сделать копию и добавить её также, вам нужно будет использовать {{domxref("Node.cloneNode()")}}.</p> <p>Удаление узла довольно просто, по крайней мере, когда у вас есть ссылка на удаляемый узел и его родительский элемент. В нашем случае мы просто используем {{domxref("Node.removeChild()")}}, например:</p> -<pre class="notranslate">sect.removeChild(linkPara);</pre> +<pre>sect.removeChild(linkPara);</pre> <p>Он становится немного сложнее, если вы хотите удалить узел, основанный только на ссылке на себя, что довольно распространено. Нет способа сообщить узлу удалить себя, поэтому вам нужно будет сделать следующее.</p> -<pre class="brush: js notranslate">linkPara.parentNode.removeChild(linkPara);</pre> +<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre> <p>Попробуйте добавить вышеуказанные строки в свой код.</p> @@ -174,14 +174,14 @@ linkPara.appendChild(text);</pre> <ol> <li>В качестве примера попробуйте добавить эти строки в наш текущий пример: - <pre class="brush: js notranslate">para.style.color = 'white'; + <pre class="brush: js">para.style.color = 'white'; para.style.backgroundColor = 'black'; para.style.padding = '10px'; para.style.width = '250px'; para.style.textAlign = 'center';</pre> </li> <li>Перезагрузите страницу, и вы увидите, что стили были применены к абзацу. Если вы посмотрите на этот параграф в инспекторе <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Page Inspector/DOM inspector </a>вашего браузера, вы увидите, что эти строки действительно добавляют встроенные стили в документ: - <pre class="brush: html notranslate"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> + <pre class="brush: html"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> </li> </ol> @@ -194,7 +194,7 @@ para.style.textAlign = 'center';</pre> <ol> <li>Удалите предыдущие пять строк, добавленных в JavaScript.</li> <li>Добавьте в свой HTML-код следующее: {{htmlelement("head")}}: - <pre class="notranslate"><style> + <pre><style> .highlight { color: white; background-color: black; @@ -205,7 +205,7 @@ para.style.textAlign = 'center';</pre> </style></pre> </li> <li>Теперь мы перейдём к очень полезному методу для общего манипулирования HTML - {{domxref("Element.setAttribute()")}} - это принимает два аргумента, атрибут, который вы хотите установить для элемента, и значение, которое вы хотите для его установки. В этом случае мы укажем имя класса выделения в нашем абзаце: - <pre class="brush: js notranslate">para.setAttribute('class', 'highlight');</pre> + <pre class="brush: js">para.setAttribute('class', 'highlight');</pre> </li> <li>Обновите свою страницу, и вы не увидите изменений - CSS по-прежнему применяется к абзацу, но на этот раз, предоставив ему класс, который выбран нашим правилом CSS, а не как встроенные стили CSS.</li> </ol> @@ -230,17 +230,17 @@ para.style.textAlign = 'center';</pre> <ol> <li>Прежде всего, давайте возьмём ссылку на div, а затем возьмём ширину и высоту окна просмотра (внутреннее окно, где отображается ваш документ) и сохраните их в переменных - эти два значения удобно содержатся в {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}. Добавьте следующие строки внутри существующего элемента {{htmlelement("script")}}: - <pre class="brush: js notranslate">var div = document.querySelector('div'); + <pre class="brush: js">var div = document.querySelector('div'); var WIDTH = window.innerWidth; var HEIGHT = window.innerHeight;</pre> </li> <li>Затем мы динамически изменяем ширину и высоту div, равную ширине окна просмотра. Добавьте следующие две строки ниже своих первых: - <pre class="brush: js notranslate">div.style.width = WIDTH + 'px'; + <pre class="brush: js">div.style.width = WIDTH + 'px'; div.style.height = HEIGHT + 'px';</pre> </li> <li>Сохраните и попробуйте обновить браузер - теперь вы должны увидеть, что div становится таким же большим, как ваш видовой экран, независимо от того, какой размер экрана вы используете. Если теперь вы попытаетесь изменить размер окна, чтобы увеличить его, вы увидите, что div остаётся одного размера - мы устанавливаем его только один раз.</li> <li>Как насчёт того, чтобы мы использовали событие, чтобы размер div изменялся при изменении размера окна? Объект {{domxref("Window")}} имеет событие, имеющееся на нем с именем resize, которое запускается каждый раз при изменении размера окна - давайте обратимся к нему через обработчик событий {{domxref("Window.onresize")}} и повторяйте наш размерный код каждый раз, когда он изменяется. Добавьте нижеследующую часть кода: - <pre class="brush: js notranslate">window.onresize = function() { + <pre class="brush: js">window.onresize = function() { WIDTH = window.innerWidth; HEIGHT = window.innerHeight; div.style.width = WIDTH + 'px'; 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 6da71e0814..e6a210e0d5 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 @@ -49,7 +49,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <div class="hidden"> <h6 id="Top_hidden_code">Top hidden code</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> @@ -207,7 +207,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <p>Место, где мы будем добавлять весь наш код, находится внутри элемента {{htmlelement("script")}} в нижней части HTML:</p> -<pre class="brush: html notranslate"><script> +<pre class="brush: html"><script> // Your JavaScript goes here @@ -218,7 +218,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash <p>Давайте начнём. Прежде всего добавьте следующие строки внутри элемента {{htmlelement("script")}} :</p> -<pre class="notranslate"><code>var randomNumber = Math.floor(Math.random() * 100) + 1; +<pre><code>var randomNumber = Math.floor(Math.random() * 100) + 1; var guesses = document.querySelector('.guesses'); var lastResult = document.querySelector('.lastResult'); @@ -237,12 +237,12 @@ var resetButton;</code></pre> <ul> <li>Первой переменной - randomNumber - присваивается случайное число от 1 до 100, вычисленное с использованием математического алгоритма.</li> <li>Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведённые далее в коде: - <pre class="brush: html notranslate"><p class="guesses"></p> + <pre class="brush: html"><p class="guesses"></p> <p class="lastResult"></p> <p class="lowOrHi"></p></pre> </li> <li>Следующие две переменных хранят ссылки на форму ввода текста и кнопку отправки а позже используются для управления подачи догадки . - <pre class="brush: html notranslate"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> + <pre class="brush: html"><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> @@ -256,7 +256,7 @@ var resetButton;</code></pre> <p>Затем добавьте следующие ниже предыдущего JavaScript:</p> -<pre class="brush: js notranslate">function checkGuess() { +<pre class="brush: js">function checkGuess() { alert('I am a placeholder'); }</pre> @@ -268,7 +268,7 @@ var resetButton;</code></pre> <p>Перейдите к <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоли JavaScript в инструментах разработчика</a>, и введите следующую строку:</p> -<pre class="brush: js notranslate">checkGuess();</pre> +<pre class="brush: js">checkGuess();</pre> <p>Вы должны увидеть предупреждение, в котором говорится "I am a placeholder"; в нашем коде мы определили функцию, которая создаёт предупреждение, когда её вызывают.</p> @@ -285,7 +285,7 @@ var resetButton;</code></pre> <div class="hidden"> <h6 id="Hidden_code">Hidden code</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -428,7 +428,7 @@ var resetButton;</code></pre> <p>Вы также можете использовать оператор <code>+</code> для сложения строк текста (в программировании это называется конкатенацией). Попробуйте ввести следующие строки:</p> -<pre class="brush: js notranslate">var name = 'Bingo'; +<pre class="brush: js">var name = 'Bingo'; name; var hello = ' says hello!'; hello; @@ -437,11 +437,11 @@ greeting;</pre> <p>Также есть сокращённые операторы, называемые расширенными операторами присваивания. Например, если вы просто хотите добавить новую строку к существующей и вернуть результат, вы можете сделать так:</p> -<pre class="brush: js notranslate">name += ' says hello!';</pre> +<pre class="brush: js">name += ' says hello!';</pre> <p>Это эквивалентно этому:</p> -<pre class="brush: js notranslate">name = name + ' says hello!';</pre> +<pre class="brush: js">name = name + ' says hello!';</pre> <p>Когда мы запускаем проверку true/false (истина/ложь) (например, внутри условных выражений — смотри {{anch("Conditionals", "ниже")}}), мы используем операторы сравнения, например:</p> @@ -481,7 +481,7 @@ greeting;</pre> <p>Теперь, заменим вашу текущую функцию<code>checkGuess()</code> на эту версию:</p> -<pre class="brush: js notranslate">function checkGuess() { +<pre class="brush: js">function checkGuess() { var userGuess = Number(guessField.value); if (guessCount === 1) { guesses.textContent = 'Previous guesses: '; @@ -516,7 +516,7 @@ greeting;</pre> <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> (то есть является ли это первой попыткой игрока или нет): - <pre class="brush: js notranslate">guessCount === 1</pre> + <pre class="brush: js">guessCount === 1</pre> Если это так, мы выводим параграф с содержанием "Previous guesses: ". Если нет, ничего не делаем.</li> <li>Строка 6 добавляет текущее значение <code>userGuess</code> в конец параграфа <code>guesses</code>, плюс пустое пространство поэтому между каждыми показанными предположениями будет пробел.</li> <li>Следующий блок (строки 8–24 ) делает несколько проверок: @@ -535,7 +535,7 @@ greeting;</pre> <p><span id="result_box" lang="ru"><span>Добавьте следующую строку ниже закрывающей фигурной скобки функции <code>checkGuess()</code>:</span></span></p> -<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre> +<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</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> @@ -545,7 +545,7 @@ greeting;</pre> <p><span id="result_box" lang="ru"><span>Давайте добавим функцию <code>setGameOver()</code> в конец нашего кода, а затем пройдём по ней.</span> <span>Добавьте это под нижней частью вашего JavaScript:</span></span></p> -<pre class="brush: js notranslate">function setGameOver() { +<pre class="brush: js">function setGameOver() { guessField.disabled = true; guessSubmit.disabled = true; resetButton = document.createElement('button'); @@ -562,7 +562,7 @@ greeting;</pre> <p><span id="result_box" lang="ru"><span>Теперь нам нужно также определить эту функцию!</span> <span>Добавьте следующий код, снова в нижнюю часть вашего JavaScript:</span></span></p> -<pre class="brush: js notranslate">function resetGame() { +<pre class="brush: js">function resetGame() { guessCount = 1; var resetParas = document.querySelectorAll('.resultParas p'); @@ -607,14 +607,14 @@ greeting;</pre> </div> </div> -<pre class="brush: js notranslate">for (var i = 1 ; i < 21 ; i++) { console.log(i) }</pre> +<pre class="brush: js">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> <p><span lang="ru">Теперь давайте посмотрим на цикл в нашей игре угадывания чисел - в функции resetGame () можно найти следующее:</span></p> -<pre class="brush: js notranslate">var resetParas = document.querySelectorAll('.resultParas p'); +<pre class="brush: js">var resetParas = document.querySelectorAll('.resultParas p'); for (var i = 0 ; i < resetParas.length ; i++) { resetParas[i].textContent = ''; }</pre> @@ -625,7 +625,7 @@ for (var i = 0 ; i < resetParas.length ; i++) { <p>Давайте добавим ещё одно окончательное улучшение, прежде чем перейти к обсуждению. Добавьте следующую строку чуть ниже <code>var resetButton;</code> в верхней части вашего JavaScript, затем сохраните файл:</p> -<pre class="brush: js notranslate">guessField.focus();</pre> +<pre class="brush: js">guessField.focus();</pre> <p>Эта строка использует метод {{domxref("HTMLElement.focus", "focus()")}}, чтобы автоматически помещать текстовый курсор в текстовое поле {{htmlelement("input")}}, как только загрузится страница. Пользователь сможет сразу набрать свою первую догадку, не нажимая поле формы. Это всего лишь небольшое дополнение, но оно улучшает удобство использования - даёт пользователю хорошую визуальную подсказку относительно того, что они должны делать в игре.</p> @@ -633,13 +633,13 @@ for (var i = 0 ; i < resetParas.length ; i++) { <p>В нашем примере мы сначала создали переменную <code>guessField</code>, которая запоминает значение из поля ввода в нашем HTML - следующая строка находится среди первых в нашем коде:</p> -<pre class="brush: js notranslate">var guessField = document.querySelector('.guessField');</pre> +<pre class="brush: js">var guessField = document.querySelector('.guessField');</pre> <p>Чтобы получить это значение, мы использовали метод {{domxref("document.querySelector", "querySelector()")}} объекта {{domxref("document")}}. <code>querySelector()</code> "берет" одну часть информации - <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a>, который выбирает нужный элемент<em>.</em></p> <p>Поскольку <code>guessField</code> теперь содержит ссылку на элемент {{htmlelement("input")}}, теперь он будет иметь доступ к ряду свойств (в основном к переменным, хранящимся внутри объектов, некоторые значения которых нельзя изменять) и методы (в основном функции, хранящиеся внутри объектов). Одним из методов, доступных для ввода элементов, является focus (), поэтому мы можем теперь использовать эту строку для фокусировки ввода текста:</p> -<pre class="brush: js notranslate">guessField.focus();</pre> +<pre class="brush: js">guessField.focus();</pre> <p>Для переменных, которые не содержат ссылок на элементы формы, не будет доступен <code>focus()</code>. Например, переменная <code>guesses</code> содержит ссылку на элемент {{htmlelement ("p")}}, а <code>guessCount</code> содержит число.</p> @@ -652,17 +652,17 @@ for (var i = 0 ; i < resetParas.length ; i++) { <li>Далее, откройте <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">инструменты разработчика в вашем браузере</a>, и убедитесь, что вы перешли во вкладку с консолью JavaScript.</li> <li>Введите <code>guessField</code> и консоль покажет, что переменная содержит элемент {{htmlelement("input")}}. Вы также можете заметить, что консоль автоматически заполняет имена объектов, которые существуют внутри исполняющей среды, включая ваши переменные!</li> <li>Теперь введите следующее: - <pre class="brush: js notranslate">guessField.value = 'Hello';</pre> + <pre class="brush: js">guessField.value = 'Hello';</pre> Свойство <code>value</code> представляет текущее значение, введённое в текстовое поле. Заметьте, что, введя эту команду, мы изменили его!</li> <li>Попробуйте ввести <code>guesses</code> и нажать return. Консоль покажет, что в переменной содержится элемент {{htmlelement("p")}}.</li> <li>Теперь попробуйте ввести: - <pre class="brush: js notranslate">guesses.value</pre> + <pre class="brush: js">guesses.value</pre> Браузер вернёт вам <code>undefined</code>, потому что <code>value</code> не существует в параграфах.</li> <li>Для изменения текста внутри параграфа, взамен используйте свойство {{domxref("Node.textContent", "textContent")}}. Попробуйте: - <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre> + <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';</pre> </li> <li>Теперь немного повеселимся. Попробуйте ввести следующие строки, одну за другой: - <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow'; + <pre class="brush: js">guesses.style.backgroundColor = 'yellow'; guesses.style.fontSize = '200%'; guesses.style.padding = '10px'; guesses.style.boxShadow = '3px 3px 6px black';</pre> 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 042b6e844d..2cfbea95b2 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 @@ -125,7 +125,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу <ul> <li>Вам не нужно каким-либо образом редактировать HTML, кроме как применять JavaScript к вашему HTML.</li> <li>Если вы не уверены, правильно ли применяется JavaScript для вашего HTML-кода, попробуйте временно удалить все остальное из файла JavaScript, добавив в него простой кусочек JavaScript, который, как вы знаете, создаст очевидный эффект, а затем сохраните и обновите. Следующий, например, делает фон элемента {{htmlelement ("html")}} красного цвета - поэтому все окно браузера должно быть красным, если JavaScript применяется правильно: - <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre> + <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'red';</pre> </li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> - это встроенный метод JavaScript, который просто округляет результат вычисления до ближайшего целого числа.</li> </ul> diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html index 9acead263a..b63ccbcc82 100644 --- a/files/ru/learn/javascript/first_steps/strings/index.html +++ b/files/ru/learn/javascript/first_steps/strings/index.html @@ -37,17 +37,17 @@ original_slug: Learn/JavaScript/Первые_шаги/Строки <ol> <li>Для начала введите следующие строки: - <pre class="brush: js notranslate">var string = 'The revolution will not be televised.'; + <pre class="brush: js">var string = 'The revolution will not be televised.'; string;</pre> </li> <li>Как и в случае с числами, мы объявляем переменную, инициализируя её строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками. </li> <li>Если вы не сделаете этого или пропустите одну из кавычек, вы получите сообщение об ошибке. Попробуйте ввести следующие строки: - <pre class="brush: js example-bad notranslate">var badString = This is a test; + <pre class="brush: js example-bad">var badString = This is a test; var badString = 'This is a test; var badString = This is a test';</pre> Эти строки не работают, потому что любая текстовая строка без кавычек считается именем переменной, именем свойства, зарезервированным словом или чем-то подобным. Если браузер не может найти его, возникает ошибка (например, «missing, before statement»). Если браузер может видеть, где начинается строка, но не может найти конец строки, как указано во 2-й строке, она жалуется на ошибку (с «unterminated string literal»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.</li> <li>Следующий код будет выполнен только в том случае, если ранее была объявлена переменная <code>string</code> — убедитесь сами: - <pre class="brush: js notranslate">var badString = string; + <pre class="brush: js">var badString = string; badString;</pre> В настоящее время строка <code>badString</code> имеет то же значение, что и строка <code>string</code>.</li> </ol> @@ -56,22 +56,22 @@ badString;</pre> <ol> <li>В JavaScript вы можете выбрать одинарные кавычки или двойные кавычки, чтобы обернуть ваши строки. Оба варианта будут работать нормально: - <pre class="brush: js notranslate">var sgl = 'Single quotes.'; + <pre class="brush: js">var sgl = 'Single quotes.'; var dbl = "Double quotes"; sgl; dbl;</pre> </li> <li>Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остаётся на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведён пример: - <pre class="brush: js example-bad notranslate">var badQuotes = 'What on earth?";</pre> + <pre class="brush: js example-bad">var badQuotes = 'What on earth?";</pre> </li> <li>Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идёт речь (в коде ошибок нет): - <pre class="brush: js notranslate">var sglDbl = 'Would you eat a "fish supper"?'; + <pre class="brush: js">var sglDbl = 'Would you eat a "fish supper"?'; var dblSgl = "I'm feeling blue."; sglDbl; dblSgl;</pre> </li> <li>Однако вы не можете включить один и тот же знак кавычки внутри строки, если он используется для их хранения. Ниже приведена ошибка, браузер ошибочно определяет место, где строка кончается: - <pre class="brush: js example-bad notranslate">var bigmouth = 'I've got no right to take my place...';</pre> + <pre class="brush: js example-bad">var bigmouth = 'I've got no right to take my place...';</pre> Что приводит нас к следующей теме.</li> </ol> @@ -79,7 +79,7 @@ dblSgl;</pre> <p>Чтобы исправить нашу предыдущую строку кода, нам нужно дать понять браузеру, что кавычка в середине строки не является меткой её конца. Экранирование символов означает, что мы делаем что-то с ними, чтобы убедиться, что они распознаются как текст, а не часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом. Введите эти строки:</p> -<pre class="brush: js notranslate">var bigmouth = 'I\'ve got no right to take my place...'; +<pre class="brush: js">var bigmouth = 'I\'ve got no right to take my place...'; bigmouth;</pre> <p>Так лучше. Таким же образом можно экранировать и другие символы, например <code>"\</code>. Кроме того существуют специальные коды. Для дополнительной информации см. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation">Escape notation</a>.</p> @@ -89,17 +89,17 @@ bigmouth;</pre> <ol> <li>Конкатенация — это новомодное программистское слово, которое означает «объединить». Объединение строк в JavaScript использует оператор плюс (+), тот же, который мы используем для сложения чисел, но в этом контексте он делает кое-что другое. Попробуем пример в нашей консоли.</li> <li> - <pre class="brush: js notranslate">var one = 'Hello, '; + <pre class="brush: js">var one = 'Hello, '; var two = 'how are you?'; var joined = one + two; joined;</pre> Результат этой программы - это переменная <code>joined</code>, содержащая значение "Hello, how are you?".</li> <li>В последнем случае мы просто объединим две строки вместе, но на самом деле, вы можете объединить столько строк, сколько хотите, до тех пор, пока вы ставите <code>+</code> между ними. Попробуйте это: - <pre class="brush: js notranslate">var multiple = one + one + one + one + two; + <pre class="brush: js">var multiple = one + one + one + one + two; multiple;</pre> </li> <li>Вы также можете использовать сочетание переменных и фактических строк. Попробуйте это: - <pre class="brush: js notranslate">var response = one + 'I am fine — ' + two; + <pre class="brush: js">var response = one + 'I am fine — ' + two; response;</pre> </li> </ol> @@ -112,9 +112,9 @@ response;</pre> <p>Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:</p> -<pre class="brush: html notranslate"><button>Press me</button></pre> +<pre class="brush: html"><button>Press me</button></pre> -<pre class="brush: js notranslate">var button = document.querySelector('button'); +<pre class="brush: js">var button = document.querySelector('button'); button.onclick = function() { var name = prompt('What is your name?'); @@ -129,22 +129,22 @@ button.onclick = function() { <ol> <li>Итак, что происходит, когда мы пытаемся добавить (или конкатенировать) строку и число? Попробуем это в нашей консоли: - <pre class="brush: js notranslate">'Front ' + 242; + <pre class="brush: js">'Front ' + 242; </pre> Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.</li> <li>Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув её в кавычки. Попробуйте следующее (мы используем оператор <code>typeof</code> для того, чтобы установить является ли переменная числом или строкой): - <pre class="brush: js notranslate">var myDate = '19' + '67'; + <pre class="brush: js">var myDate = '19' + '67'; typeof myDate;</pre> </li> <li>Если у вас есть числовая переменная, которую вы хотите преобразовать в строчную без внесения каких-либо иных изменений или строковую переменную, которую вы хотите преобразовать в число, вы можете использовать следующие две конструкции: <ul> <li>Объект {{jsxref ("Number")}} преобразует всё переданное в него в число, если это возможно. Попробуйте следующее: - <pre class="brush: js notranslate">var myString = '123'; + <pre class="brush: js">var myString = '123'; var myNum = Number(myString); typeof myNum;</pre> </li> <li>С другой стороны, каждое число имеет метод, называемый <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code>, который преобразует его в эквивалентную строку. Попробуй это: - <pre class="brush: js notranslate">var myNum = 123; + <pre class="brush: js">var myNum = 123; var myString = myNum.toString(); typeof myString;</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 722895282b..90450169e7 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 @@ -39,7 +39,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Useful_string_methods <p id="Useful_string_methods">Почти всё в JavaScript является объектами. Когда вы создаёте строку, например: </p> -<pre class="notranslate">let string = 'This is my string';</pre> +<pre>let string = 'This is my string';</pre> <p>ваша переменная становится строковым объектом, и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом, перейдя на страницу {{jsxref ("String")}} и просмотрев на ней список свойств и методов!</p> @@ -51,7 +51,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Useful_string_methods <p>Это легко — вы просто используете свойство {{jsxref ("String.prototype.length", "length")}}. Попробуйте ввести следующие строки:</p> -<pre class="notranslate">let browserType = 'mozilla'; +<pre>let browserType = 'mozilla'; browserType.length;</pre> <p>Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имён, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.</p> @@ -60,11 +60,11 @@ browserType.length;</pre> <p>Вы можете вернуть любой символ внутри строки, используя <strong>обозначение в квадратных скобках.</strong> Это означает, что вы добавляете квадратные скобки ([ ]) в конце вашего имени переменной. В квадратных скобках вы указываете номер символа, который хотите вернуть. Например, чтобы получить первую букву, нужно написать:</p> -<pre class="syntaxbox notranslate">browserType[0];</pre> +<pre class="syntaxbox">browserType[0];</pre> <p>Компьютеры считают от 0, а не 1! Чтобы получить последний символ <em>любой</em> строки, мы могли бы использовать следующую строку, объединив эту технику с свойством <code>length</code>:</p> -<pre class="syntaxbox notranslate"> browserType[browserType.length-1];</pre> +<pre class="syntaxbox"> browserType[browserType.length-1];</pre> <p>Длина слова «mozilla» равна 7, но, поскольку счёт начинается с 0, позиция последнего символа равна 6, поэтому нам нужна <code>length-1</code>. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.</p> @@ -72,17 +72,17 @@ browserType.length;</pre> <ol> <li>Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода {{jsxref ("String.prototype.indexOf ()", "indexOf ()")}}, который принимает одну {{glossary ("parameter")}} - подстроку, которую вы хотите найти. Введите: - <pre class="notranslate">browserType.indexOf('zilla');</pre> + <pre>browserType.indexOf('zilla');</pre> Это даёт нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».</li> </ol> <ol start="2"> <li>Это можно сделать по-другому, что, возможно, ещё более эффективно. Введите следующее: - <pre class="notranslate">browserType.indexOf('vanilla');</pre> + <pre>browserType.indexOf('vanilla');</pre> Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.<br> <br> Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla» (для обратного эффекта, используйте оператор отрицания): - <pre class="notranslate">if(browserType.indexOf('mozilla') === -1) { + <pre>if(browserType.indexOf('mozilla') === -1) { // сделать что-то, если 'mozilla' // не является частью этой строки } @@ -93,10 +93,10 @@ if(browserType.indexOf('mozilla') !== -1) { }</pre> </li> <li>Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите её завершить, можно использовать {{jsxref ("String.prototype.slice ()", "slice ()")}} для извлечения. Попробуйте следующее: - <pre class="notranslate">browserType.slice(0,3);</pre> + <pre>browserType.slice(0,3);</pre> Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку<em>.</em> Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её <em>(</em>помним, что <em>счёт идёт с 0, а не с 1)</em>. Также можно сказать, что второй параметр равен длине возвращаемой строки.</li> <li>Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определённого символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите: - <pre class="notranslate">browserType.slice(2);</pre> + <pre>browserType.slice(2);</pre> Этот код возвращает «zilla» — это потому, что позиция символа 2 — это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.</li> </ol> @@ -110,7 +110,7 @@ if(browserType.indexOf('mozilla') !== -1) { <p>Попробуем ввести следующие строки, чтобы узнать, что происходит:</p> -<pre class="notranslate">var radData = 'My NaMe Is MuD'; +<pre>var radData = 'My NaMe Is MuD'; radData.toLowerCase(); radData.toUpperCase();</pre> @@ -120,7 +120,7 @@ radData.toUpperCase();</pre> <p>Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:</p> -<pre class="notranslate">browserType.replace('moz','van');</pre> +<pre>browserType.replace('moz','van');</pre> <p>Обратите внимание, что для фактического получения обновлённого значения, отражённого в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: <code>browserType = browserType.replace('moz','van');</code></p> @@ -143,7 +143,7 @@ radData.toUpperCase();</pre> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><h2>Результат</h2> +<pre class="brush: html line-numbers language-html"><code class="language-html"><h2>Результат</h2> <div class="output" style="min-height: 125px;"> @@ -183,7 +183,7 @@ for (var i = 0; i < greetings.length; i++) { <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css">html { +<pre class="brush: css line-numbers language-css"><code class="language-css">html { font-family: sans-serif; } @@ -203,7 +203,7 @@ body { background: #f5f9fa; }</code></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var textarea = document.getElementById('code'); +<pre class="brush: js line-numbers language-js"><code class="language-js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -301,7 +301,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_2">Playable code 2</h6> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><h2>Результат</h2> +<pre class="brush: html line-numbers language-html"><code class="language-html"><h2>Результат</h2> <div class="output" style="min-height: 125px;"> @@ -334,7 +334,7 @@ for(var i = 0; i < cities.length; i++) { <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css">html { +<pre class="brush: css line-numbers language-css"><code class="language-css">html { font-family: sans-serif; } @@ -354,7 +354,7 @@ body { background: #f5f9fa; }</code></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var textarea = document.getElementById('code'); +<pre class="brush: js line-numbers language-js"><code class="language-js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -438,11 +438,11 @@ textarea.onkeyup = function(){ <p>В этом последнем упражнении массив содержит кучу строк, содержащих информацию о железнодорожных станциях на севере Англии. Строки представляют собой элементы данных, которые содержат трёхбуквенный код станции, за которым следуют некоторые машиночитаемые данные, за которыми следует точка с запятой, а затем название станции, пригодное для чтения человеком. Например:</p> -<pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre> +<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre> <p>Мы хотим извлечь код станции и имя и поместить их в строку со следующей структурой:</p> -<pre class="notranslate">MAN: Manchester Piccadilly</pre> +<pre>MAN: Manchester Piccadilly</pre> <p>Мы бы рекомендовали реализовать это следующим образом:</p> @@ -457,7 +457,7 @@ textarea.onkeyup = function(){ <div class="hidden"> <h6 id="Playable_code_3">Playable code 3</h6> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><h2>Результат</h2> +<pre class="brush: html line-numbers language-html"><code class="language-html"><h2>Результат</h2> <div class="output" style="min-height: 125px;"> @@ -495,7 +495,7 @@ for (var i = 0; i < stations.length; i++) { <input id="solution" type="button" value="Показать решение"> </div></code></pre> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css">html { +<pre class="brush: css line-numbers language-css"><code class="language-css">html { font-family: sans-serif; } @@ -515,7 +515,7 @@ body { background: #f5f9fa; }</code></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var textarea = document.getElementById('code'); +<pre class="brush: js line-numbers language-js"><code class="language-js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; diff --git a/files/ru/learn/javascript/first_steps/variables/index.html b/files/ru/learn/javascript/first_steps/variables/index.html index ed8b3966f2..080957c575 100644 --- a/files/ru/learn/javascript/first_steps/variables/index.html +++ b/files/ru/learn/javascript/first_steps/variables/index.html @@ -33,9 +33,9 @@ original_slug: Learn/JavaScript/Первые_шаги/Variables <p>Переменные — это контейнер для таких значений, как числа, используемые в сложении, или строка, которую мы могли бы использовать как часть предложения. Но одна из особенностей переменных — их значение может меняться. Давайте взглянем на простой пример:</p> -<pre class="brush: html notranslate"><button>Нажми на меня</button></pre> +<pre class="brush: html"><button>Нажми на меня</button></pre> -<pre class="brush: js notranslate">const button = document.querySelector('button'); +<pre class="brush: js">const button = document.querySelector('button'); button.onclick = function() { let name = prompt('Как вас зовут?'); @@ -48,7 +48,7 @@ button.onclick = function() { <p>Чтобы лучше понять действие переменной здесь, давайте подумаем о том, как мы будем писать этот пример без использования переменной. Это будет выглядеть примерно так:</p> -<pre class="example-bad notranslate">var name = prompt('Как вас зовут?'); +<pre class="example-bad">var name = prompt('Как вас зовут?'); if (name === 'Адам') { alert('Привет, Адам, рады тебя видеть!'); @@ -78,7 +78,7 @@ if (name === 'Адам') { <p>Чтобы использовать переменную, вы сначала должны её создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:</p> -<pre class="brush: js notranslate">var myName; +<pre class="brush: js">var myName; var myAge;</pre> <p>Здесь мы создаём две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (можно открыть эту консоль в отдельной вкладке или в новом окне). После этого попробуйте создать переменную (или две) с вашими именами.</p> @@ -86,7 +86,7 @@ var myAge;</pre> <div class="hidden"> <h6 id="Hidden_code">Hidden code</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -201,12 +201,12 @@ var myAge;</pre> <p>Теперь проверим, существуют ли эти значения в среде выполнения. Для этого введём только имя переменной.</p> -<pre class="brush: js notranslate">myName; +<pre class="brush: js">myName; myAge;</pre> <p>В настоящее время они не содержат значения, это пустые контейнеры. В этом случае, когда вы вводите имена переменных, вы должны получить значение <code>undefined</code> . Если они не существуют, вы получите сообщение об ошибке - попробуйте сейчас ввести в консоли имя переменной ниже:</p> -<pre class="brush: js notranslate">scoobyDoo;</pre> +<pre class="brush: js">scoobyDoo;</pre> <div class="note"> <p><strong>Примечание</strong>: Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует - это разные вещи.</p> @@ -216,17 +216,17 @@ myAge;</pre> <p>Как только переменная объявлена, ей можно присвоить значение. Для этого пишется имя переменной, затем следует знак равенства (<code>=</code>), а за ним значение, которое вы хотите присвоить. Например:</p> -<pre class="brush: js notranslate">myName = 'Chris'; +<pre class="brush: js">myName = 'Chris'; myAge = 37;</pre> <p>Попробуйте вернуться в консоль и ввести эти строки. Вы должны увидеть значение, которое вы назначили переменной, возвращаемой в консоли. Чтобы посмотреть значения переменных, нужно набрать их имя в консоли:</p> -<pre class="brush: js notranslate">myName; +<pre class="brush: js">myName; myAge;</pre> <p>Вы можете объявить переменную и задать ей значение одновременно:</p> -<pre class="brush: js notranslate">var myName = 'Chris';</pre> +<pre class="brush: js">var myName = 'Chris';</pre> <p>Скорее всего, так вы будете писать большую часть времени, так как запись и выполнения кода с одно строки происходит быстрее, чем выполнение двух действий на двух отдельных строках.</p> @@ -238,7 +238,7 @@ myAge;</pre> <p>Когда переменной присваивается значение, вы можете изменить (обновить) это значение, просто указав другое значение. Попробуйте ввести следующие строки в консоль:</p> -<pre class="brush: js notranslate">myName = 'Bob'; +<pre class="brush: js">myName = 'Bob'; myAge = 40;</pre> <h3 id="Правила_именования_переменных">Правила именования переменных</h3> @@ -261,7 +261,7 @@ myAge = 40;</pre> <p>Примеры хороших имён переменных:</p> -<pre class="example-good notranslate">age +<pre class="example-good">age myAge init initialColor @@ -272,7 +272,7 @@ audio2 <p>Примеры плохих имён переменных:</p> -<pre class="example-bad notranslate">1 +<pre class="example-bad">1 a _12 myage @@ -284,7 +284,7 @@ thisisareallylongstupidvariablenameman</pre> <p>Примеры имён переменных, которые вызовут ошибки:</p> -<pre class="example-invalid notranslate">var +<pre class="example-invalid">var Document </pre> @@ -298,23 +298,23 @@ Document <p>Вы можете хранить числа в переменных (целые числа, такие как 30, или десятичные числа, такие как 2.456, также называемые числами с плавающей точкой или с плавающей запятой). Вам не нужно объявлять типы переменных в JavaScript, в отличие от некоторых других языков программирования Если давать переменной значение числа,кавычки не используются:</p> -<pre class="brush: js notranslate">var myAge = 17;</pre> +<pre class="brush: js">var myAge = 17;</pre> <h3 id="Строки_Strings">Строки ('Strings')</h3> <p>Строки - это фрагменты текста. Когда вы даёте переменной значение строки, вам нужно обернуть её в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать её как другое имя переменной.</p> -<pre class="brush: js notranslate">var dolphinGoodbye = 'So long and thanks for all the fish';</pre> +<pre class="brush: js">var dolphinGoodbye = 'So long and thanks for all the fish';</pre> <h3 id="Логические_Booleans">Логические (Booleans)</h3> <p>Booleans - истинные / ложные значения - они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:</p> -<pre class="brush: js notranslate">var iAmAlive = true;</pre> +<pre class="brush: js">var iAmAlive = true;</pre> <p>В действительности вы чаще будете использовать этот тип переменных так:</p> -<pre class="brush: js notranslate">var test = 6 < 3; +<pre class="brush: js">var test = 6 < 3; </pre> <p>Здесь используется оператор «меньше» (<), чтобы проверить, является ли 6 меньше 3. В данном примере, он вернёт false, потому что 6 не меньше 3! В дальнейшем вы узнаете больше о таких операторах.</p> @@ -323,12 +323,12 @@ Document <p>Массив - это один объект, который содержит несколько значений, заключённых в квадратные скобки и разделённых запятыми. Попробуйте ввести следующие строки в консоль:</p> -<pre class="brush: js notranslate">var myNameArray = ['Chris', 'Bob', 'Jim']; +<pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim']; var myNumberArray = [10,15,40];</pre> <p>Как только эти массивы определены, можно получить доступ к каждому значению по их местоположению в массиве. Наберите следующие строки:</p> -<pre class="brush: js notranslate">myNameArray[0]; // should return 'Chris' +<pre class="brush: js">myNameArray[0]; // should return 'Chris' myNumberArray[2]; // should return 40</pre> <p>Квадратные скобки указывают значение индекса, соответствующее позиции возвращаемого значения. Возможно, вы заметили, что массивы в JavaScript индексируются с нулевой отметкой: первый элемент имеет индекс 0.</p> @@ -341,11 +341,11 @@ myNumberArray[2]; // should return 40</pre> <p>Попробуйте ввести следующую строку в консоль:</p> -<pre class="brush: js notranslate">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre> +<pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre> <p>Чтобы получить информацию, хранящуюся в объекте, вы можете использовать следующий синтаксис:</p> -<pre class="brush: js notranslate">dog.name</pre> +<pre class="brush: js">dog.name</pre> <p>Мы больше не будем рассматривать объекты в данном курсе - вы можете больше узнать о них в будущем модуле.</p> @@ -355,11 +355,11 @@ myNumberArray[2]; // should return 40</pre> <p>Например, если вы объявите переменную и присвоите ей значение, заключённое в кавычки, браузер будет обрабатывать переменную как строку:</p> -<pre class="brush: js notranslate">var myString = 'Привет';</pre> +<pre class="brush: js">var myString = 'Привет';</pre> <p>Он всё равно будет строкой, даже если он содержит числа, поэтому будьте осторожны:</p> -<pre class="brush: js notranslate">var myNumber = '500'; // упс, это все ещё строка (string) +<pre class="brush: js">var myNumber = '500'; // упс, это все ещё строка (string) typeof(myNumber); myNumber = 500; // так-то лучше, теперь это число (number) typeof(myNumber);</pre> diff --git a/files/ru/learn/javascript/objects/basics/index.html b/files/ru/learn/javascript/objects/basics/index.html index 0c8b3f6a5e..453f1ca169 100644 --- a/files/ru/learn/javascript/objects/basics/index.html +++ b/files/ru/learn/javascript/objects/basics/index.html @@ -34,15 +34,15 @@ original_slug: Learn/JavaScript/Объекты/Основы <p>Как и во многих случаях в JavaScript, создание объекта часто начинается с определения и инициализации переменной. Попробуйте ввести следующий код JavaScript в ваш файл, а затем сохраните файл и обновите страницу браузера:</p> -<pre class="brush: js notranslate">const person = {};</pre> +<pre class="brush: js">const person = {};</pre> <p>Если вы введёте <code>person</code> в текстовое JS консоль и нажмёте клавишу Enter, должен получиться следующий результат:</p> -<pre class="brush: js notranslate"><code class="language-js">Object</code><code> </code>{ }</pre> +<pre class="brush: js"><code class="language-js">Object</code><code> </code>{ }</pre> <p>Поздравляем, вы только что создали ваш первый объект. Но это пустой объект, поэтому мы не можем с ним ничего сделать. Давайте обновим наш объект, чтобы он выглядел так:</p> -<pre class="brush: js notranslate">const person = { +<pre class="brush: js">const person = { name: ['Bob', 'Smith'], age: 32, gender: 'male', @@ -58,7 +58,7 @@ original_slug: Learn/JavaScript/Объекты/Основы <p>После сохранения и обновления, попробуйте ввести что-нибудь следующее в консоль JavaScript браузера:</p> -<pre class="brush: js notranslate"><code class="language-js">person<span class="punctuation token">.</span>name</code> +<pre class="brush: js"><code class="language-js">person<span class="punctuation token">.</span>name</code> person.name[0] person.age person.interests[1] @@ -73,7 +73,7 @@ person.greeting()</pre> <p>Итак что здесь происходит? Объект состоит из нескольких элементов, каждый из которых имеет своё название (пример <code>name</code> и <code>age</code> выше), и значение (пример <code>['Bob', 'Smith']</code> и <code>32</code>). Каждая пара название/значение должны быть разделены запятой, а название и значение в каждом случае разделяются двоеточием. Синтаксис всегда следует этому образцу:</p> -<pre class="brush: js notranslate">const objectName = { +<pre class="brush: js">const objectName = { member1Name: member1Value, member2Name: member2Value, member3Name: member3Value @@ -89,7 +89,7 @@ person.greeting()</pre> <p>Выше вы получили доступ к свойствам и методам используя <strong>точечную запись (dot notation). </strong>Имя объекта (person) действует как <strong>пространство имён (namespace) </strong>— оно должно быть введено первым, для того чтобы получить доступ ко всему что заключено (<strong>encapsulated)</strong> внутри объекта. Далее вы пишете точку, затем элемент, к которому хотите получить доступ — это может быть имя простого свойства, элемент массива, или вызов одного из методов объекта, например:</p> -<pre class="brush: js notranslate">person.age +<pre class="brush: js">person.age person.interests[1] person.bio()</pre> @@ -97,28 +97,28 @@ person.bio()</pre> <p>Можно даже сделать значением элемента объекта другой объект. Например, попробуйте изменить значение свойства name с такого</p> -<pre class="brush: js notranslate">name: ['Bob', 'Smith'],</pre> +<pre class="brush: js">name: ['Bob', 'Smith'],</pre> <p>на такое</p> -<pre class="brush: js notranslate">name : { +<pre class="brush: js">name : { first: 'Bob', last: 'Smith' },</pre> <p>Здесь мы фактически создаём <strong>внутреннее пространство имён (sub-namespace). </strong>Это звучит сложно, но на самом деле это не так — для доступа к этим элементам вам нужно сделать один дополнительный шаг с ещё одной точкой. Попробуйте в консоли браузера следующее: </p> -<pre class="brush: js notranslate">person.name.first +<pre class="brush: js">person.name.first person.name.last</pre> <p><strong>Важно</strong>: На этом этапе вам также нужно будет пересмотреть код метода и изменить все экземпляры с</p> -<pre class="brush: js notranslate">name[0] +<pre class="brush: js">name[0] name[1]</pre> <p>на</p> -<pre class="brush: js notranslate">name.first +<pre class="brush: js">name.first name.last</pre> <p>Иначе ваши методы больше не будут работать.</p> @@ -127,12 +127,12 @@ name.last</pre> <p>Существует другой способ получить свойства объекта — использовать скобочную запись (bracket notation). Вместо написания этого кода:</p> -<pre class="brush: js notranslate">person.age +<pre class="brush: js">person.age person.name.first</pre> <p>Вы можете использовать следующий</p> -<pre class="brush: js notranslate">person['age'] +<pre class="brush: js">person['age'] person['name']['first']</pre> <p>Это выглядит очень похоже на то, как вы получаете элементы массива, и в принципе это так и есть — вместо использования числовых индексов для выбора элемента, вы ассоциируете имя свойства для каждого значения. Ничего удивительного, что эти объекты иногда называют ассоциативными массивами — они сопоставляют строки со значениями так же, как массивы сопоставляют числовые индексы со значениями.</p> @@ -141,42 +141,42 @@ person['name']['first']</pre> <p>До сих пор мы рассматривали только возврат (или получение) элементов объекта — вы так же можете установить (обновить) значение элемента объекта просто объявив элемент, который вы хотите установить (используя точечную или скобочную запись), например:</p> -<pre class="brush: js notranslate">person.age = 45; +<pre class="brush: js">person.age = 45; person['name']['last'] = 'Cratchit';</pre> <p>Попробуйте ввести эти строки, а затем снова верните элементы, чтобы увидеть, как они изменились</p> -<pre class="brush: js notranslate">person.age +<pre class="brush: js">person.age person['name']['last']</pre> <p>Вы можете не просто обновлять и устанавливать значения свойств и методов объекта, а так же устанавливать совершенно новые элементы. Попробуйте их в консоли JS:</p> -<pre class="brush: js notranslate">person['eyes'] = 'hazel'; +<pre class="brush: js">person['eyes'] = 'hazel'; person.farewell = function() { alert("Bye everybody!"); }</pre> <p>Теперь вы можете проверить ваши новые элементы:</p> -<pre class="brush: js notranslate">person['eyes'] +<pre class="brush: js">person['eyes'] person.farewell()</pre> <p>Одним из полезных аспектов скобочной записи является то, что с её помощью можно динамически задавать не только значения элементов, но и их имена. Предположим, что мы хотим, чтобы пользователи могли хранить пользовательские типы данных, введя имя и значение элемента в два следующих поля? Мы могли бы получить эти значения следующим образом:</p> -<pre class="brush: js notranslate">let myDataName = nameInput.value; +<pre class="brush: js">let myDataName = nameInput.value; let myDataValue = nameValue.value;</pre> <p>Затем мы можем добавить имя и значение этого нового элемента в объект <code>person</code> таким образом:</p> -<pre class="brush: js notranslate">person[myDataName] = myDataValue;</pre> +<pre class="brush: js">person[myDataName] = myDataValue;</pre> <p>Чтобы проверить это, попробуйте добавить следующие строки в свой код, после закрывающей скобки объекта <code>person</code> :</p> -<pre class="brush: js notranslate">let myDataName = 'height'; +<pre class="brush: js">let myDataName = 'height'; let myDataValue = '1.75m'; person[myDataName] = myDataValue;</pre> <p>Теперь попробуйте сохранить и обновить, затем введите следующее в консоль браузера:</p> -<pre class="brush: js notranslate">person.height</pre> +<pre class="brush: js">person.height</pre> <p>Добавление свойства объекта с использованием вышеописанного метода невозможно с использованием точечной записи, которая может принимать только литеральное имя элемента, а не значение переменной указывающее на имя.</p> @@ -184,7 +184,7 @@ person[myDataName] = myDataValue;</pre> <p>Возможно, вы заметили что-то странное в наших методах. Посмотрите на этот пример:</p> -<pre class="brush: js notranslate">greeting: function() { +<pre class="brush: js">greeting: function() { alert('Hi! I\'m ' + this.name.first + '.'); }</pre> @@ -192,7 +192,7 @@ person[myDataName] = myDataValue;</pre> <p>Давайте проиллюстрируем, что мы имеем в виду, с упрощённой парой объектов <code>person</code> :</p> -<pre class="brush: js notranslate">const person1 = { +<pre class="brush: js">const person1 = { name: 'Chris', greeting: function() { alert('Hi! I\'m ' + this.name + '.'); @@ -214,13 +214,13 @@ const person2 = { <p>Поэтому, когда вы использовали строковые методы, такие как:</p> -<pre class="brush: js notranslate">myString.split(',');</pre> +<pre class="brush: js">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>Когда вы обращались к объектной модели документа (DOM), используя следующие строки:</p> -<pre class="brush: js notranslate">const myDiv = document.createElement('div'); +<pre class="brush: js">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> @@ -229,7 +229,7 @@ const myVideo = document.querySelector('video');</pre> <p>Обратите внимание, что встроенные объекты/API не всегда создают экземпляры объектов автоматически. Как пример, <a href="/ru/docs/Web/API/Notifications_API">Notifications API</a> — который позволяет новым браузерам запускать системные уведомления, требует, чтобы вы создавали новый экземпляр объекта с помощью конструктора для каждого уведомления, которое вы хотите запустить. Попробуйте ввести следующее в консоль JavaScript:</p> -<pre class="brush: js notranslate">const myNotification = new Notification('Hello!');</pre> +<pre class="brush: js">const myNotification = new Notification('Hello!');</pre> <p>Опять же, мы рассмотрим конструкторы в следующей статье.</p> diff --git a/files/ru/learn/javascript/objects/inheritance/index.html b/files/ru/learn/javascript/objects/inheritance/index.html index 97e9a98fbd..f1514a92c6 100644 --- a/files/ru/learn/javascript/objects/inheritance/index.html +++ b/files/ru/learn/javascript/objects/inheritance/index.html @@ -57,7 +57,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <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) { +<pre class="brush: js">function Person(first, last, age, gender, interests) { this.name = { first, last @@ -69,7 +69,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p><em>Все</em> методы определены в прототипе конструктора. Например:</p> -<pre class="brush: js notranslate">Person.prototype.greeting = function() { +<pre class="brush: js">Person.prototype.greeting = function() { alert('Hi! I\'m ' + this.name.first + '.'); };</pre> @@ -88,7 +88,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p>Первое, что нам нужно сделать, это создать конструктор <code>Teacher()</code> - добавьте ниже следующий код:</p> -<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { Person.call(this, first, last, age, gender, interests); this.subject = subject; @@ -102,7 +102,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p>В качестве примечания мы могли бы просто сделать это:</p> -<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { this.name = { first, last @@ -119,14 +119,14 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p>Обратите внимание, что если конструктор, от которого вы наследуете, не принимает значения своего свойства из параметров, вам не нужно указывать их в качестве дополнительных аргументов в <code>call()</code>. Так, например, если у вас было что-то действительно простое:</p> -<pre class="brush: js notranslate">function Brick() { +<pre class="brush: js">function Brick() { this.width = 10; this.height = 20; }</pre> <p>Вы можете наследовать свойства <code>width</code> и <code>height</code>, выполнив это (как и другие шаги, описанные ниже, конечно):</p> -<pre class="brush: js notranslate">function BlueGlassBrick() { +<pre class="brush: js">function BlueGlassBrick() { Brick.call(this); this.opacity = 0.5; @@ -141,11 +141,11 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <ol> <li>Добавьте следующую строку ниже своего предыдущего добавления: - <pre class="brush: js notranslate">Teacher.prototype = Object.create(Person.prototype);</pre> + <pre class="brush: js">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>Это может стать проблемой, поэтому нам нужно сделать это правильно. Вы можете сделать это, вернувшись к исходному коду и добавив следующие строки внизу: - <pre class="notranslate"><code>Object.defineProperty(Teacher.prototype, 'constructor', { + <pre><code>Object.defineProperty(Teacher.prototype, 'constructor', { value: Teacher, enumerable: false, // false, чтобы данное свойство не появлялось в цикле for in writable: true });</code></pre> @@ -159,7 +159,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p>Самый простой способ сделать это - определить его на прототипе <code>Teacher()</code> - добавить в нижнюю часть кода следующее:</p> -<pre class="brush: js notranslate">Teacher.prototype.greeting = function() { +<pre class="brush: js">Teacher.prototype.greeting = function() { var prefix; if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { @@ -179,11 +179,11 @@ original_slug: Learn/JavaScript/Объекты/Inheritance <p>Теперь, когда вы ввели весь код, попробуйте создать экземпляр объекта из <code>Teacher()</code>, поставив ниже вашего JavaScript-кода (или что-то похожее по вашему выбору):</p> -<pre class="brush: js notranslate">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> +<pre class="brush: js">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> <p>Теперь сохраните, обновите, и попробуйте получить доступ к свойствам и методам вашего нового объекта <code>teacher1</code>, например:</p> -<pre class="brush: js notranslate">teacher1.name.first; +<pre class="brush: js">teacher1.name.first; teacher1.interests[0]; teacher1.bio(); teacher1.subject; 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 7fe8592651..409aa367f2 100644 --- a/files/ru/learn/javascript/objects/object-oriented_js/index.html +++ b/files/ru/learn/javascript/objects/object-oriented_js/index.html @@ -87,7 +87,7 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS <ol> <li>Давайте рассмотрим как можно определить человека с нормальной функцией. Добавьте эту функцию в элемент <code>script</code>: - <pre class="brush: js notranslate">function createNewPerson(name) { + <pre class="brush: js">function createNewPerson(name) { const obj = {}; obj.name = name; obj.greeting = function() { @@ -97,12 +97,12 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS }</pre> </li> <li>Теперь вы можете создать нового человека, вызвав эту функцию - попробуйте следующие строки в консоли JavaScript браузера: - <pre class="brush: js notranslate">const salva = createNewPerson('Salva'); + <pre class="brush: js">const salva = createNewPerson('Salva'); salva.name; salva.greeting();</pre> Это работает достаточно хорошо, но код излишне многословен; если мы знаем, что хотим создать объект, зачем нам явно создавать новый пустой объект и возвращать его? К счастью, JavaScript предоставляет нам удобный способ в виде функций-конструкторов - давайте сделаем это сейчас!</li> <li>Замените предыдущую функцию следующей: - <pre class="brush: js notranslate">function Person(name) { + <pre class="brush: js">function Person(name) { this.name = name; this.greeting = function() { alert('Hi! I\'m ' + this.name + '.'); @@ -121,11 +121,11 @@ salva.greeting();</pre> <ol> <li>Добавьте следующие строки под предыдущим добавлением кода: - <pre class="brush: js notranslate">let person1 = new Person('Bob'); + <pre class="brush: js">let person1 = new Person('Bob'); let person2 = new Person('Sarah');</pre> </li> <li>Сохраните код и перезагрузите его в браузере и попробуйте ввести следующие строки в консоль JS: - <pre class="brush: js notranslate">person1.name + <pre class="brush: js">person1.name person1.greeting() person2.name person2.greeting()</pre> @@ -136,12 +136,12 @@ person2.greeting()</pre> <p>Давайте снова посмотрим на вызовы конструктора:</p> -<pre class="brush: js notranslate">let person1 = new Person('Bob'); +<pre class="brush: js">let person1 = new Person('Bob'); let person2 = new Person('Sarah');</pre> <p>В каждом случае ключевое слово <code>new</code> используется, чтобы сообщить браузеру, что мы хотим создать экземпляр нового объекта, за которым следует имя функции с её необходимыми параметрами, содержащимися в круглых скобках, и результат сохраняется в переменной - очень похоже на то, как вызывается стандартная функция. Каждый экземпляр создаётся в соответствии с этим определением:</p> -<pre class="brush: js notranslate">function Person(name) { +<pre class="brush: js">function Person(name) { this.name = name; this.greeting = function() { alert('Hi! I\'m ' + this.name + '.'); @@ -150,7 +150,7 @@ let person2 = new Person('Sarah');</pre> <p>После создания новых объектов переменные <code>person1</code> и <code>person2</code> содержат следующие объекты:</p> -<pre class="brush: js notranslate">{ +<pre class="brush: js">{ name: 'Bob', greeting: function() { alert('Hi! I\'m ' + this.name + '.'); @@ -172,7 +172,7 @@ let person2 = new Person('Sarah');</pre> <ol> <li>Замените весь предыдущий код новой функцией конструктора - это, в принципе, тот же самое что и в наглядном примере, но несколько сложнее: - <pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { + <pre class="brush: js">function Person(first, last, age, gender, interests) { this.name = { first : first, last: last @@ -189,13 +189,13 @@ let person2 = new Person('Sarah');</pre> };</pre> </li> <li>Теперь добавьте следующую строку ниже, чтобы создать экземпляр объекта из него: - <pre class="brush: js notranslate">let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + <pre class="brush: js">let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> </li> </ol> <p>Как вы могли заметить, вы можете получить доступ к свойствам и методам, как это было ранее, - попробуйте использовать их в консоли JS:</p> -<pre class="brush: js notranslate">person1['age'] +<pre class="brush: js">person1['age'] person1.interests[1] person1.bio() // etc.</pre> @@ -224,17 +224,17 @@ person1.bio() <ol> <li>Попробуйте ввести это в консоль JavaScript вашего браузера: - <pre class="brush: js notranslate">let person1 = new Object();</pre> + <pre class="brush: js">let person1 = new Object();</pre> </li> <li>Это сохраняет ссылку на пустой объект в переменную <code>person1</code>. Затем вы можете добавить свойства и методы к этому объекту с использованием точечной или скобочной нотации по желанию; попробуйте эти примеры в консоли: - <pre class="brush: js notranslate">person1.name = 'Chris'; + <pre class="brush: js">person1.name = 'Chris'; person1['age'] = 38; person1.greeting = function() { alert('Hi! I\'m ' + this.name + '.'); };</pre> </li> <li>Вы также можете передать литерал объекта конструктору <code>Object()</code> в качестве параметра, чтобы заполнить его свойствами / методами. Попробуйте это в консоли JS: - <pre class="brush: js notranslate">let person1 = new Object({ + <pre class="brush: js">let person1 = new Object({ name: 'Chris', age: 38, greeting: function() { @@ -252,10 +252,10 @@ person1.greeting = function() { <ol> <li>Закончив упражнение из предыдущего раздела, загруженное в браузер, попробуйте это в консоли JavaScript: - <pre class="brush: js notranslate">let person2 = Object.create(person1);</pre> + <pre class="brush: js">let person2 = Object.create(person1);</pre> </li> <li>Теперь попробуйте: - <pre class="brush: js notranslate">person2.name + <pre class="brush: js">person2.name person2.greeting()</pre> </li> </ol> 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 155d130c77..283ee36001 100644 --- a/files/ru/learn/javascript/objects/object_building_practice/index.html +++ b/files/ru/learn/javascript/objects/object_building_practice/index.html @@ -49,7 +49,7 @@ original_slug: Learn/JavaScript/Объекты/Object_building_practice <p>Первая часть скрипта выглядит так:</p> -<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'); +<pre class="brush: js">var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); @@ -64,7 +64,7 @@ var height = canvas.height = window.innerHeight;</pre> <p>Последний бит исходного скрипта выглядит следующим образом:</p> -<pre class="brush: js notranslate">function random(min, max) { +<pre class="brush: js">function random(min, max) { var num = Math.floor(Math.random() * (max - min + 1)) + min; return num; }</pre> @@ -75,7 +75,7 @@ var height = canvas.height = window.innerHeight;</pre> <p>В нашей программе будет много шаров, подпрыгивающих вокруг экрана. Поскольку эти шары будут вести себя одинаково, имеет смысл представлять их в виде объекта. Начнём с добавления следующего конструктора в конец нашего кода.</p> -<pre class="brush: js notranslate">function Ball(x, y, velX, velY, color, size) { +<pre class="brush: js">function Ball(x, y, velX, velY, color, size) { this.x = x; this.y = y; this.velX = velX; @@ -99,7 +99,7 @@ var height = canvas.height = window.innerHeight;</pre> <p>Сначала добавьте следующий метод <code>draw()</code> к <code>Ball()</code>'s <code>prototype</code>:</p> -<pre class="brush: js notranslate">Ball.prototype.draw = function() { +<pre class="brush: js">Ball.prototype.draw = function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); @@ -127,10 +127,10 @@ var height = canvas.height = window.innerHeight;</pre> <li>Сохраните код и загрузите HTML-файл в браузер.</li> <li>Откройте консоль JavaScript браузера, а затем обновите страницу, чтобы размер холста изменился в соответствии с новой шириной и высотой окна просмотра браузера после открытия консоли.</li> <li>Чтобы создать новый экземпляр шара, введите следующее: - <pre class="brush: js notranslate">var testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre> + <pre class="brush: js">var testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre> </li> <li>Попробуйте вызвать его свойства и методы: - <pre class="brush: js notranslate">testBall.x + <pre class="brush: js">testBall.x testBall.size testBall.color testBall.draw()</pre> @@ -142,7 +142,7 @@ testBall.draw()</pre> <p>Мы можем нарисовать мяч в нужном положении, но чтобы начать движение мяча, нам нужна функция обновления. Добавьте следующий код внизу вашего файла JavaScript, чтобы добавить метод <code>update()</code> к <code>Ball()</code>'s <code>prototype</code>:</p> -<pre class="brush: js notranslate">Ball.prototype.update = function() { +<pre class="brush: js">Ball.prototype.update = function() { if ((this.x + this.size) >= width) { this.velX = -(this.velX); } @@ -186,12 +186,12 @@ testBall.draw()</pre> <ol> <li>Во-первых, нам нужно где-то хранить все наши шары. Следующий массив выполнит это задание - добавьте его внизу кода: - <pre class="brush: js notranslate">var balls = [];</pre> + <pre class="brush: js">var balls = [];</pre> <p>Все программы, которые оживляют вещи, обычно включают цикл анимации, который служит для обновления информации в программе, а затем визуализации результирующего представления для каждого кадра анимации; это основа для большинства игр и других подобных программ.</p> </li> <li>Добавьте ниже эту часть кода: - <pre class="brush: js notranslate">function loop() { + <pre class="brush: js">function loop() { ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; ctx.fillRect(0, 0, width, height); @@ -225,7 +225,7 @@ testBall.draw()</pre> </ul> </li> <li>И последнее, но не менее важное: добавьте следующую строку в конец вашего кода - нам нужно вызвать функцию один раз, чтобы начать анимацию. - <pre class="brush: js notranslate">loop();</pre> + <pre class="brush: js">loop();</pre> </li> </ol> @@ -238,7 +238,7 @@ testBall.draw()</pre> <ol> <li>Прежде всего, добавьте следующее определение метода ниже, где вы определили метод <code>update()</code> (т.е. блок <code>Ball.prototype.update</code>). - <pre class="brush: js notranslate">Ball.prototype.collisionDetect = function() { + <pre class="brush: js">Ball.prototype.collisionDetect = function() { for (var j = 0; j < balls.length; j++) { if (!(this === balls[j])) { var dx = this.x - balls[j].x; @@ -262,7 +262,7 @@ testBall.draw()</pre> </ul> </li> <li>Вы также должны вызвать этот метод в каждом кадре анимации. Добавьте следующий код после строки <code>balls[i].update();</code> - <pre class="brush: js notranslate">balls[i].collisionDetect();</pre> + <pre class="brush: js">balls[i].collisionDetect();</pre> </li> <li>Сохраните и обновите демо снова, и вы увидите, как ваши мячи меняют цвет, когда они сталкиваются!</li> </ol> diff --git a/files/ru/learn/server-side/django/authentication/index.html b/files/ru/learn/server-side/django/authentication/index.html index a4baafeae5..c8508e97b7 100644 --- a/files/ru/learn/server-side/django/authentication/index.html +++ b/files/ru/learn/server-side/django/authentication/index.html @@ -61,7 +61,7 @@ original_slug: Learn/Server-side/Django/Аутентификация <p>Соответствующие настройки сделаны в параметрах <code>INSTALLED_APPS</code> и <code>MIDDLEWARE</code> файла проекта (<strong>locallibrary/locallibrary/settings.py</strong>), как показано ниже:</p> -<pre class="brush: python notranslate">INSTALLED_APPS = [ +<pre class="brush: python">INSTALLED_APPS = [ ... <strong> 'django.contrib.auth', </strong># Фреймворк аутентификации и моделей по умолчанию. <strong> 'django.contrib.contenttypes', # </strong>Django контент-типовая система (даёт разрешения, связанные с моделями). @@ -82,7 +82,7 @@ MIDDLEWARE = [ <div class="note"> <p><strong>Примечание</strong>: вы можете создавать пользователей программно, как показано ниже. Например, вам мог бы подойти данный способ в том случае, если вы разрабатываете интерфейс, который позволяет пользователям создавать их собственные аккаунты (вы не должны предоставлять доступ пользователям к административной панели вашего сайта).</p> -<pre class="brush: python notranslate">from django.contrib.auth.models import User +<pre class="brush: python">from django.contrib.auth.models import User # Создайте пользователя и сохраните его в базе данных user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword') @@ -144,7 +144,7 @@ user.save() <p>Добавьте следующее в нижней части проекта urls.py файл (<strong>locallibrary/locallibrary/urls.py</strong>) файл:</p> -<pre class="brush: python notranslate">#Add Django site authentication urls (for login, logout, password management) +<pre class="brush: python">#Add Django site authentication urls (for login, logout, password management) urlpatterns += [ path('accounts/', include('django.contrib.auth.urls')), ] @@ -157,7 +157,7 @@ urlpatterns += [ </div> <div class="note"> -<pre class="brush: python notranslate">accounts/ login/ [name='login'] +<pre class="brush: python">accounts/ login/ [name='login'] accounts/ logout/ [name='logout'] accounts/ password_change/ [name='password_change'] accounts/ password_change/done/ [name='password_change_done'] @@ -169,7 +169,7 @@ accounts/ reset/done/ [name='password_reset_complete']</pre> <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 +<pre class="brush: python">Exception Type: TemplateDoesNotExist Exception Value: <strong>registration/login.html</strong></pre> <p><span id="result_box" lang="ru"><span>Следующий шаг - создать каталог регистрации в пути поиска, а затем добавить файл login.html.</span></span></p> @@ -191,7 +191,7 @@ Exception Value: <strong>registration/login.html</strong></pre> <p>Чтобы сделать эти директории видимыми для загрузчика шаблонов (<span id="result_box" lang="ru"><span>т. е. помещать этот каталог в путь поиска шаблона</span></span>) откройте настройки проекта (<strong>/locallibrary/locallibrary/settings.py</strong>), и обновите в секции <code>TEMPLATES</code> строку <code>'DIRS'</code> как показано.</p> -<pre class="brush: python notranslate">TEMPLATES = [ +<pre class="brush: python">TEMPLATES = [ { ... <strong> </strong><strong>'DIRS': [os.path.join(BASE_DIR, 'templates')],</strong> @@ -207,7 +207,7 @@ Exception Value: <strong>registration/login.html</strong></pre> <p>Создайте новый HTML файл, названный /<strong>locallibrary/templates/registration/login.html</strong>. <span class="short_text" id="result_box" lang="ru"><span>дайте ему следующее содержание</span></span>:</p> -<pre class="brush: html line-numbers language-html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html line-numbers language-html">{% extends "base_generic.html" %} {% block content %} @@ -258,7 +258,7 @@ Exception Value: <strong>registration/login.html</strong></pre> <br> <span>Откройте настройки проекта (<strong>/locallibrary/locallibrary/settings.py</strong>) и добавьте текст ниже.</span> <span>Теперь, когда вы входите в систему, вы по умолчанию должны перенаправляться на домашнюю страницу сайта.</span></span></p> -<pre class="brush: python notranslate"># Redirect to home URL after login (Default redirects to /accounts/profile/) +<pre class="brush: python"># Redirect to home URL after login (Default redirects to /accounts/profile/) LOGIN_REDIRECT_URL = '/' </pre> @@ -268,7 +268,7 @@ LOGIN_REDIRECT_URL = '/' <br> <span>Создайте и откройте <strong>/locallibrary/templates/registration/logged_out.html</strong>.</span> <span>Скопируйте текст ниже:</span></span></p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <p>Logged out!</p> @@ -290,7 +290,7 @@ LOGIN_REDIRECT_URL = '/' <p><span id="result_box" lang="ru"><span>Это форма, используемая для получения адреса электронной почты пользователя (для отправки пароля для сброса пароля).</span> <span>Создайте <strong>/locallibrary/templates/registration/password_reset_form.html</strong> и дайте ему следующее содержание:</span></span></p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <form action="" method="post">{% csrf_token %} @@ -306,7 +306,7 @@ LOGIN_REDIRECT_URL = '/' <p>Эта форма отображается после того, как ваш адрес электронной почты будет собран. Создайте <strong>/locallibrary/templates/registration/password_reset_done.html</strong>, и дайте ему следующее содержание:</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <p>We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.</p> {% endblock %} @@ -316,7 +316,7 @@ LOGIN_REDIRECT_URL = '/' <p>Этот шаблон предоставляет текст электронной почты HTML, содержащий ссылку на сброс, которую мы отправим пользователям. Создайте /locallibrary/templates/registration/password_reset_email.html и дайте ему следующее содержание:</p> -<pre class="brush: html notranslate">Someone asked for password reset for email \{{ email }}. Follow the link below: +<pre class="brush: html">Someone asked for password reset for email \{{ email }}. Follow the link below: \{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %} </pre> @@ -324,7 +324,7 @@ LOGIN_REDIRECT_URL = '/' <p>На этой странице вы вводите новый пароль после нажатия ссылки в электронном письме с возвратом пароля. Создайте /locallibrary/templates/registration/password_reset_confirm.html и дайте ему следующее содержание:</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} @@ -361,7 +361,7 @@ LOGIN_REDIRECT_URL = '/' <p>Это последний шаблон сброса пароля, который отображается, чтобы уведомить вас о завершении сброса пароля. Создайте /locallibrary/templates/registration/password_reset_complete.html и дайте ему следующее содержание:</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <h1>The password has been changed!</h1> @@ -383,7 +383,7 @@ LOGIN_REDIRECT_URL = '/' <div class="note"> <p><strong>Примечание</strong>: Система сброса пароля требует, чтобы ваш сайт поддерживал электронную почту, что выходит за рамки этой статьи, поэтому эта часть <strong>ещё не будет работать.</strong> Чтобы разрешить тестирование, поместите следующую строку в конец файла settings.py. Это регистрирует любые письма, отправленные на консоль (чтобы вы могли скопировать ссылку на сброс пароля с консоли).</p> -<pre class="brush: python notranslate">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' +<pre class="brush: python">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' </pre> <p>Для получения дополнительной информации см. <a href="https://docs.djangoproject.com/en/2.0/topics/email/">Отправка email</a> (Django docs).</p> @@ -401,7 +401,7 @@ LOGIN_REDIRECT_URL = '/' <p>Откройте базовый шаблон (/locallibrary/catalog/templates/base_generic.html) и скопируйте следующий текст в sidebar блок непосредственно перед тегом шаблона endblock.</p> -<pre class="brush: python notranslate"> <ul class="sidebar-nav"> +<pre class="brush: python"> <ul class="sidebar-nav"> ... @@ -425,7 +425,7 @@ LOGIN_REDIRECT_URL = '/' <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 +<pre class="brush: python">from django.contrib.auth.decorators import login_required @login_required def my_view(request): @@ -437,14 +437,14 @@ def my_view(request): <p>Аналогичным образом, самый простой способ ограничить доступ к зарегистрированным пользователям в ваших представлениях на основе классов - это производные от <code>LoginRequiredMixin</code>. Вы должны объявить этот mixin сначала в списке суперкласса, перед классом основного представления.</p> -<pre class="brush: python notranslate">from django.contrib.auth.mixins import LoginRequiredMixin +<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin class MyView(LoginRequiredMixin, View): ...</pre> <p>Это имеет такое же поведение при переадресации, что и <code>login_required</code> декоратор. Вы также можете указать альтернативное местоположение для перенаправления пользователя, если он не аутентифицирован (<code>login_url</code>), и имя параметра URL вместо "<code>next</code>" , чтобы вставить текущий абсолютный путь (<code>redirect_field_name</code>).</p> -<pre class="brush: python notranslate">class MyView(LoginRequiredMixin, View): +<pre class="brush: python">class MyView(LoginRequiredMixin, View): login_url = '/login/' redirect_field_name = 'redirect_to' </pre> @@ -463,21 +463,21 @@ class MyView(LoginRequiredMixin, View): <p>Откройте <strong>catalog/models.py</strong>, и импортируйте модель <code>User</code> из <code>django.contrib.auth.models</code> (добавьте это чуть ниже предыдущей строки импорта в верхней части файла, так <code>User</code> доступен для последующего кода, что позволяет использовать его):</p> -<pre class="brush: python notranslate">from django.contrib.auth.models import User +<pre class="brush: python">from django.contrib.auth.models import User </pre> <p>Затем добавьте поле <code>borrower</code> в модель <code>BookInstance</code>:</p> -<pre class="brush: python notranslate">borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True) +<pre class="brush: python">borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True) </pre> <p>Пока мы здесь, давайте добавим свойство, которое мы можем вызвать из наших шаблонов, чтобы указать, просрочен ли конкретный экземпляр книги. Хотя мы могли бы рассчитать это в самом шаблоне, использование свойства, как показано ниже, будет намного более эффективным. Добавьте это где-нибудь в верхней части файла:</p> -<pre class="syntaxbox notranslate">from datetime import date</pre> +<pre class="syntaxbox">from datetime import date</pre> <p>Теперь добавьте следующее определение свойства внутри класса BookInstance:</p> -<pre class="brush: python notranslate">@property +<pre class="brush: python">@property def is_overdue(self): if self.due_back and date.today() > self.due_back: return True @@ -489,7 +489,7 @@ def is_overdue(self): <p>Теперь, когда мы обновили наши модели, нам нужно будет внести новые изменения в проект, а затем применить эти миграции:</p> -<pre class="brush: bash notranslate">python3 manage.py makemigrations +<pre class="brush: bash">python3 manage.py makemigrations python3 manage.py migrate </pre> @@ -497,7 +497,7 @@ python3 manage.py migrate <p>Теперь откройте каталог <strong>catalog/admin.py</strong>, и добавьте поле <code>borrower</code> в класс <code>BookInstanceAdmin</code> , как в <code>list_display</code> , так и в полях <code>fieldsets</code> , как показано ниже. Это сделает поле видимым в разделе Admin, так что мы можем при необходимости назначить <code>User</code> в <code>BookInstance</code>.</p> -<pre class="brush: python notranslate">@admin.register(BookInstance) +<pre class="brush: python">@admin.register(BookInstance) class BookInstanceAdmin(admin.ModelAdmin): list_display = ('book', 'status'<strong>, 'borrower'</strong>, 'due_back', 'id') list_filter = ('status', 'due_back') @@ -525,7 +525,7 @@ class BookInstanceAdmin(admin.ModelAdmin): <p>Добавьте следующее в catalog/views.py:</p> -<pre class="brush: python notranslate">from django.contrib.auth.mixins import LoginRequiredMixin +<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): """ @@ -544,7 +544,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Теперь откройте <strong>/catalog/urls.py</strong> и добавьте <code>url()</code> , указывая на приведённое выше представление (вы можете просто скопировать текст ниже в конец файла).</p> -<pre class="brush: python notranslate">urlpatterns += [ +<pre class="brush: python">urlpatterns += [ url(r'^mybooks/$', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'), ]</pre> @@ -552,7 +552,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Теперь все, что нам нужно сделать для этой страницы, - это добавить шаблон. Сначала создайте файл шаблона <strong>/catalog/templates/catalog/bookinstance_list_borrowed_user.html</strong> и дайте ему следующее содержание:</p> -<pre class="brush: python notranslate">{% extends "base_generic.html" %} +<pre class="brush: python">{% extends "base_generic.html" %} {% block content %} <h1>Borrowed books</h1> @@ -582,7 +582,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Откройте базовый шаблон (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) и добавьте выделенную строку из sidebar, как показано на рисунке.</p> -<pre class="brush: python notranslate"> <ul class="sidebar-nav"> +<pre class="brush: python"> <ul class="sidebar-nav"> {% if user.is_authenticated %} <li>User: \{{ user.get_username }}</li> <strong> <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li></strong> @@ -607,7 +607,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Определение разрешений выполняется в разделе моделей "<code>class Meta</code>" , используется <code>permissions</code> поле. Вы можете указать столько разрешений, сколько необходимо в кортеже, причём каждое разрешение определяется во вложенном кортеже, содержащем имя разрешения и отображаемое значение разрешения. Например, мы можем определить разрешение, позволяющее пользователю отметить, что книга была возвращена, как показано здесь:</p> -<pre class="brush: python notranslate">class BookInstance(models.Model): +<pre class="brush: python">class BookInstance(models.Model): ... class Meta: ... @@ -621,7 +621,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <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> %} +<pre class="brush: python">{% if perms.catalog.<code>can_mark_returned</code> %} <!-- We can mark a BookInstance as returned. --> <!-- Perhaps add code to link to a "book return" view here. --> {% endif %} @@ -633,7 +633,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView): <p>Функция в представлении с декоратором:</p> -<pre class="brush: python notranslate">from django.contrib.auth.decorators import permission_required +<pre class="brush: python">from django.contrib.auth.decorators import permission_required @permission_required('catalog.<code>can_mark_returned</code>') @permission_required('catalog.<code>can_edit</code>') @@ -642,7 +642,7 @@ def my_view(request): <p>Требуется разрешение mixin для представлений на основе классов.</p> -<pre class="brush: python notranslate">from django.contrib.auth.mixins import PermissionRequiredMixin +<pre class="brush: python">from django.contrib.auth.mixins import PermissionRequiredMixin class MyView(PermissionRequiredMixin, View): permission_required = 'catalog.<code>can_mark_returned</code>' diff --git a/files/ru/learn/server-side/django/deployment/index.html b/files/ru/learn/server-side/django/deployment/index.html index e3d7b75700..08cdb491fe 100644 --- a/files/ru/learn/server-side/django/deployment/index.html +++ b/files/ru/learn/server-side/django/deployment/index.html @@ -115,7 +115,7 @@ original_slug: Learn/Server-side/Django/Разворачивание <ul> <li><code>DEBUG</code>. При развёртывании сайта должен быть установлен в <code>False</code> (<code>DEBUG = False</code>). Тем самым, прекратится вывод важной отладочной информации.</li> <li><code>SECRET_KEY</code>. Это большое случайное число, применяемое для защиты от CRSF. Важно, чтобы ключ, используемый в продакшене, не указывался в исходном коде, и/или не запрашивался с другого сервера. Django рекомендует размещать значение ключа либо в переменной окружения, или в файле с доступом только на чтение. - <pre class="notranslate"># Чтение SECRET_KEY из переменной окружения + <pre># Чтение SECRET_KEY из переменной окружения import os SECRET_KEY = os.environ['SECRET_KEY'] @@ -131,7 +131,7 @@ with open('/etc/secret_key.txt') as f: <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! +<pre class="brush: python"># SECURITY WARNING: keep the secret key used in production secret! # SECRET_KEY = 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag' <strong>import os</strong> <strong>SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag')</strong> @@ -139,7 +139,7 @@ with open('/etc/secret_key.txt') as f: <p>Затем закомментируйте строку с настройкой <code>DEBUG</code>, а затем, добавьте новую, указанную ниже.</p> -<pre class="brush: python notranslate"># SECURITY WARNING: don't run with debug turned on in production! +<pre class="brush: python"># SECURITY WARNING: don't run with debug turned on in production! # DEBUG = True <strong>DEBUG = bool( os.environ.get('DJANGO_DEBUG', True) )</strong> </pre> @@ -152,7 +152,7 @@ with open('/etc/secret_key.txt') as f: <p>Весь перечень настроек для разворачивания вашего сайта находится по ссылке <a href="https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/">Deployment checklist</a> (Django docs). Кроме того, вы можете получить список настроек, выполнив в терминале команду:</p> -<pre class="brush: python notranslate">python3 manage.py check --deploy +<pre class="brush: python">python3 manage.py check --deploy </pre> <h2 id="Пример_Установка_LocalLibrary_на_Heroku">Пример: Установка LocalLibrary на Heroku</h2> @@ -247,11 +247,11 @@ with open('/etc/secret_key.txt') as f: <ol> <li>Установите git себе на компьютер (Вы можете найти версию для своей платформы <a href="https://git-scm.com/downloads">здесь</a>).</li> <li>Откройте командную строку (или терминал) и выполните в нём следующую команду, используя ссылку, которую вы получили с github: - <pre class="brush: bash notranslate">git clone https://github.com/<strong><em><your_git_user_id></em></strong>/django_local_library.git + <pre class="brush: bash">git clone https://github.com/<strong><em><your_git_user_id></em></strong>/django_local_library.git </pre> Это создаст подпапку (с содержанием вашего репозитория и именем вашего репозитория) внутри папки, в которой выполнялась команда.</li> <li>Перейдите в эту папку: - <pre class="brush: bash notranslate">cd django_local_library.git</pre> + <pre class="brush: bash">cd django_local_library.git</pre> </li> </ol> @@ -260,7 +260,7 @@ with open('/etc/secret_key.txt') as f: <ol> <li>Скопируйте ваше приложение в папку репозитория (все файлы с таким же уровнем, как у <strong>manage.py,</strong> <u><strong>БЕЗ </strong>папки проекта, в которой эти файлы находятся</u>).</li> <li>Откройте файл с расширением <strong>.gitignore </strong>в текстовом редакторе, вставьте в самый его конец строки, приведённые ниже, а затем сохраните (этот файл "говорит" о файлах, которые не должны быть загружены в git по умолчанию). - <pre class="notranslate"># Text backup files + <pre># Text backup files *.bak #Database @@ -269,10 +269,10 @@ with open('/etc/secret_key.txt') as f: <li> <p>Откройте командную строку или терминал и используйте <code>add</code> команду с флагом <code>-A</code>. Эта команда сохранит изменения в репозиторий:</p> - <pre class="brush: bash notranslate"><code>git add -A</code></pre> + <pre class="brush: bash"><code>git add -A</code></pre> </li> <li>Используйте команду <code>status</code>, что бы убедиться, что все файлы, которые вы собираетесь добавить верны (вы хотите включить исходные файлы, а не бинарные файлы, временные файлы и т. д.). В консоль выведется что то вроде этого: - <pre class="notranslate">> git status + <pre>> git status On branch master Your branch is up-to-date with 'origin/master'. Changes to be committed: @@ -286,10 +286,10 @@ Changes to be committed: new file: templates/registration/password_reset_form.html</pre> </li> <li>Теперь, зафиксируйте файлы в локальном репозитории: - <pre class="brush: bash notranslate">git commit -m "First version of application moved into github"</pre> + <pre class="brush: bash">git commit -m "First version of application moved into github"</pre> </li> <li>Синхронизируете свой локальный репозиторий с сайтом Github: - <pre class="notranslate">git push origin master</pre> + <pre>git push origin master</pre> </li> </ol> @@ -309,7 +309,7 @@ Changes to be committed: <p> Создайте файл с именем <code>Procfile</code> (без расширения) в корне нашего GitHub репозитории объявить типы процессов и точки входа приложения. Скопируйте в него следующий текст:</p> -<pre class="notranslate">web: gunicorn locallibrary.wsgi --log-file -</pre> +<pre>web: gunicorn locallibrary.wsgi --log-file -</pre> <p>«web:» сообщает Heroku, что это веб динамический и может быть отправлен HTTP-трафик. Процесс, который начнётся в этом динамически, - это gunicorn, который является популярным сервером веб-приложений, который рекомендует Heroku. Мы запускаем Gunicorn, используя конфигурационную информацию в модуле locallibrary.wsgi (созданный с помощью нашего скелета приложения: /locallibrary/wsgi.py).</p> @@ -321,7 +321,7 @@ Changes to be committed: <p>Установка <em>Gunicorn</em> локально в командной строке используя пакетный менеджер <em>pip</em> (которые мы установили когда <a href="/en-US/docs/Learn/Server-side/Django/development_environment">настраивали среду разработки</a>):</p> -<pre class="brush: bash notranslate">pip3 install gunicorn +<pre class="brush: bash">pip3 install gunicorn </pre> <h4 id="Настройка_Базы_Данных">Настройка Базы Данных</h4> @@ -336,14 +336,14 @@ Changes to be committed: <p>Установите dj-database-url локально, чтобы он стал частью наших требований к настройке Heroku на удалённом сервере:</p> -<pre class="notranslate">$ pip3 install dj-database-url +<pre>$ pip3 install dj-database-url </pre> <h5 id="settings.py">settings.py</h5> <p>Откройте /locallibrary/settings.py и скопируйте следующую конфигурацию в нижнюю часть файла:</p> -<pre class="notranslate"># Heroku: Update database configuration from $DATABASE_URL. +<pre># Heroku: Update database configuration from $DATABASE_URL. import dj_database_url db_from_env = dj_database_url.config(conn_max_age=500) DATABASES['default'].update(db_from_env)</pre> @@ -363,7 +363,7 @@ DATABASES['default'].update(db_from_env)</pre> <p>Django будет использовать нашу базу данных SQLite локально по умолчанию, поскольку переменная среды DATABASE_URL не задана в нашей локальной среде. Если вы хотите полностью перейти на Postgres и использовать нашу бесплатную базу данных Heroku для разработки и производства, то вы можете. Например, чтобы установить psycopg2 и его зависимости локально в системе на базе Linux, вы должны использовать следующие команды bash / terminal:</p> -<pre class="brush: bash notranslate"><code>sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib</code> +<pre class="brush: bash"><code>sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib</code> pip3 install psycopg2 </pre> @@ -392,7 +392,7 @@ pip3 install psycopg2 <p>Откройте /locallibrary/settings.py и скопируйте следующую конфигурацию в нижнюю часть файла. BASE_DIR уже должен быть определён в вашем файле (STATIC_URL, возможно, уже был определён в файле, когда он был создан. В то время как это не причинит вреда, вы также можете удалить дублируемую предыдущую ссылку).</p> -<pre class="notranslate"># Static files (CSS, JavaScript, Images) +<pre># Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.10/howto/static-files/ # The absolute path to the directory where collectstatic will collect static files for deployment. @@ -419,14 +419,14 @@ STATIC_URL = '/static/' <p>Установите <em>WhiteNoise</em> локально, используя следующую команду:</p> -<pre class="notranslate">$ pip3 install whitenoise +<pre>$ pip3 install whitenoise </pre> <h5 id="settings.py_3">settings.py</h5> <p>Чтобы установить WhiteNoise в приложение Django, откройте /locallibrary/settings.py, найдите параметр MIDDLEWARE и добавьте WhiteNoiseMiddleware в верхней части списка, чуть ниже SecurityMiddleware:</p> -<pre class="notranslate">MIDDLEWARE = [ +<pre>MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', <strong>'whitenoise.middleware.WhiteNoiseMiddleware',</strong> 'django.contrib.sessions.middleware.SessionMiddleware', @@ -440,7 +440,7 @@ STATIC_URL = '/static/' <p>При желании вы можете уменьшить размер статических файлов при их обслуживании (это более эффективно). Просто добавьте следующее в конец /locallibrary/settings.py:</p> -<pre class="notranslate"># Simplified static file serving. +<pre># Simplified static file serving. # https://warehouse.python.org/project/whitenoise/ STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage' </pre> @@ -449,11 +449,11 @@ STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage' <p>Требования Python вашего веб-приложения должны храниться в файле requirements.txt в корневом каталоге вашего репозитория. После этого Heroku автоматически установит их при восстановлении вашей среды. Вы можете создать этот файл с помощью pip в командной строке (запустите в корне repo):</p> -<pre class="brush: bash notranslate">pip3 freeze > requirements.txt</pre> +<pre class="brush: bash">pip3 freeze > requirements.txt</pre> <p>После установки всех разных зависимостей выше, файл requirements.txt должен иметь <em>по меньшей мере</em> эти перечисленные элементы (хотя номера версий могут отличаться). Удалите любые другие зависимости, не перечисленные ниже, если вы явно не добавили их для этого приложения.</p> -<pre class="notranslate">dj-database-url==0.4.1 +<pre>dj-database-url==0.4.1 Django==1.10.2 gunicorn==19.6.0 <strong>psycopg2==2.6.2</strong> @@ -468,7 +468,7 @@ whitenoise==3.2.2 <p>Файл <strong>runtime.txt</strong>, если определён, говорит Heroku, какой язык программирования использовать. Создайте файл в корне репо и добавьте следующий текст:</p> -<pre class="notranslate">python-3.5.2</pre> +<pre>python-3.5.2</pre> <div class="note"> <p><strong>Примечание:</strong> Heroku поддерживает только небольшое количество <a href="https://devcenter.heroku.com/articles/python-support#supported-python-runtimes">Python runtimes</a>. (на момент написания статьи, в том числе и выше). Heroku будет использовать поддерживаемую среду выполнения независимо от значения, указанного в этом файле.</p> @@ -478,13 +478,13 @@ whitenoise==3.2.2 <p>Далее мы сохраним все наши изменения в Github. В терминале (whist внутри нашего репозитория) введите следующие команды:</p> -<pre class="brush: python notranslate">git add -A +<pre class="brush: python">git add -A git commit -m "Added files and changes required for deployment to heroku" git push origin master</pre> <p>Прежде чем продолжить, дайте возможность проверить сайт снова локально и убедиться, что это не повлияло ни на одно из наших изменений выше. Запустите веб-сервер разработки как обычно, а затем проверьте, работает ли сайт, как вы ожидаете в своём браузере.</p> -<pre class="brush: bash notranslate">python3 manage.py runserver</pre> +<pre class="brush: bash">python3 manage.py runserver</pre> <p>Теперь мы должны быть готовы начать развёртывание LocalLibrary на Heroku.</p> @@ -506,14 +506,14 @@ git push origin master</pre> <p>После установки клиента вам будут доступны команды. Например, чтобы получить справку о клиенте:</p> -<pre class="brush: bash notranslate">heroku help +<pre class="brush: bash">heroku help </pre> <h3 id="Создание_и_загрузка_веб-сайта">Создание и загрузка веб-сайта</h3> <p>Чтобы создать приложение, мы запускаем команду «create» в корневом каталоге нашего репозитория. Это создаёт git remote («указатель на удалённый репозиторий»), названный heroku в нашей локальной среде git.</p> -<pre class="brush: bash notranslate">heroku create</pre> +<pre class="brush: bash">heroku create</pre> <div class="note"> <p><strong>Примечание:</strong> вы можете назвать удалённый, если хотите, указав значение после «create». Если вы этого не сделаете, вы получите случайное имя. Имя используется в URL-адресе по умолчанию.</p> @@ -521,19 +521,19 @@ git push origin master</pre> <p>Затем мы можем подтолкнуть наше приложение в репозиторий heroku как показано ниже. Это позволит загрузить приложение, упаковать его в dyno, запустить collectstatic, и запустить сам сайт.</p> -<pre class="brush: bash notranslate">git push heroku master</pre> +<pre class="brush: bash">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> -<pre class="brush: bash notranslate">heroku run python manage.py migrate</pre> +<pre class="brush: bash">heroku run python manage.py migrate</pre> <p>Мы также должны будем иметь возможность добавлять книги и авторов, поэтому давайте также создадим суперпользователя, снова используя одноразовый динамический режим:</p> -<pre class="brush: bash notranslate">heroku run python manage.py createsuperuser</pre> +<pre class="brush: bash">heroku run python manage.py createsuperuser</pre> <p>Как только это будет завершено, мы можем посмотреть сайт. Он должен работать, хотя в нем ещё нет книг. Чтобы открыть браузер на новом веб-сайте, используйте команду:</p> -<pre class="brush: bash notranslate">heroku open</pre> +<pre class="brush: bash">heroku open</pre> <p>Создайте несколько книг на сайте администратора и проверьте, работает ли сайт, как вы ожидаете.</p> @@ -541,7 +541,7 @@ git push origin master</pre> <p>Вы можете проверить дополнения в своём приложении, используя <code>heroku addons</code> команду. Это будет список всех аддонов, их ценовая категория и состояние.</p> -<pre class="brush: bash notranslate">>heroku addons +<pre class="brush: bash">>heroku addons Add-on Plan Price State ───────────────────────────────────────── ───────── ───── ─────── @@ -550,7 +550,7 @@ heroku-postgresql (postgresql-flat-26536) hobby-dev free created <p>Здесь мы видим, что у нас есть только одна надстройка, база данных postgres SQL. Это бесплатно и автоматически создаётся при создании приложения. Вы можете открыть веб-страницу, чтобы более подробно изучить надстройку базы данных (или любое другое дополнение), используя следующую команду:</p> -<pre class="brush: bash notranslate">heroku addons:open heroku-postgresql +<pre class="brush: bash">heroku addons:open heroku-postgresql </pre> <p>Другие команды позволяют создавать, уничтожать, обновлять и понижать аддоны (используя аналогичный синтаксис для открытия). Для получения дополнительной информации см. <a href="https://devcenter.heroku.com/articles/managing-add-ons">Managing Add-ons</a> (Heroku docs).</p> @@ -559,7 +559,7 @@ heroku-postgresql (postgresql-flat-26536) hobby-dev free created <p>Вы можете проверить конфигурационные переменные для сайта, используя команду <code>heroku config</code>. Ниже вы можете видеть, что у нас есть только одна переменная <code>DATABASE_URL</code> , используемая для настройки нашей базы данных.</p> -<pre class="brush: bash notranslate">>heroku config +<pre class="brush: bash">>heroku config === locallibrary Config Vars DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-201-144.compute-1.amazonaws.com:5432/dbftm4qgh3kda3</pre> @@ -572,7 +572,7 @@ DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-20 <p>Мы устанавливаем <code>DJANGO_SECRET_KEY</code> используя команду <code>config:set</code> (как показано ниже). Не забудьте использовать свой секретный ключ!</p> -<pre class="brush: bash notranslate">>heroku config:set DJANGO_SECRET_KEY=eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh&= +<pre class="brush: bash">>heroku config:set DJANGO_SECRET_KEY=eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh&= Setting DJANGO_SECRET_KEY and restarting locallibrary... done, v7 DJANGO_SECRET_KEY: eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh @@ -580,20 +580,20 @@ DJANGO_SECRET_KEY: eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh <p>Аналогично мы устанавливаем <code>DJANGO_DEBUG</code>:</p> -<pre class="brush: bash notranslate">>heroku config:set <code>DJANGO_DEBUG='' +<pre class="brush: bash">>heroku config:set <code>DJANGO_DEBUG='' Setting DJANGO_DEBUG and restarting locallibrary... done, v8</code></pre> <p>Если вы посетите веб-сайт сейчас, вы получите ошибку "Bad request" , потому что в <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#allowed-hosts">ALLOWED_HOSTS</a> надо внести параметры, если у вас <code>DEBUG=False</code> (в качестве меры безопасности). Откройте <strong>/locallibrary/settings.py</strong> и измените <code>ALLOWED_HOSTS</code> для включения вашего базового URL-адреса приложения (например, 'locallibrary1234.herokuapp.com') URL, который вы обычно используете на локальном сервере разработки.</p> -<pre class="brush: python notranslate">ALLOWED_HOSTS = ['<your app URL without the https:// prefix>.herokuapp.com','127.0.0.1'] +<pre class="brush: python">ALLOWED_HOSTS = ['<your app URL without the https:// prefix>.herokuapp.com','127.0.0.1'] # For example: # ALLOWED_HOSTS = ['fathomless-scrubland-30645.herokuapp.com','127.0.0.1'] </pre> <p>Затем сохраните настройки и передайте их в репозиторий Github и в Heroku:</p> -<pre class="brush: bash notranslate">git add -A +<pre class="brush: bash">git add -A git commit -m 'Update ALLOWED_HOSTS with site and development server URL' git push origin master git push heroku master</pre> @@ -606,7 +606,7 @@ git push heroku master</pre> <p>Клиент Heroku предоставляет несколько инструментов для отладки:</p> -<pre class="brush: bash notranslate">heroku logs # Show current logs +<pre class="brush: bash">heroku logs # Show current logs heroku logs --tail # Show current logs and keep updating with any new results heroku config:set DEBUG_COLLECTSTATIC=1 # Add additional logging for collectstatic (this tool is run automatically during a build) heroku ps #Display dyno status 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 199f16badb..5265e95819 100644 --- a/files/ru/learn/server-side/django/development_environment/index.html +++ b/files/ru/learn/server-side/django/development_environment/index.html @@ -115,19 +115,19 @@ translation_of: Learn/Server-side/Django/development_environment <p>Ubuntu Linux включает в себя Python 3 по умолчанию. Вы можете удостовериться в этом, выполнив следующую команду в терминале:</p> -<pre class="notranslate">python3 -V +<pre>python3 -V Python 3.5.2</pre> <p>Однако, инструмент Python Package Index, при помощи которого вам нужно будет установить пакеты для Python 3 (включая Django), по умолчанию <strong>не установлен</strong>. Вы можете установить pip3 через терминал bash при помощи:</p> -<pre class="notranslate">sudo apt-get install python3-pip +<pre>sudo apt-get install python3-pip </pre> <h3 id="Mac_OS_X">Mac OS X</h3> <p>Mac OS X "El Capitan" не включает Python 3. Вы можете удостовериться в этом, выполнив следующую команду в терминале:</p> -<pre class="notranslate">python3 -V +<pre>python3 -V -bash: python3: command not found</pre> <p>Вы можете легко установить Python 3 (вместе с инструментом <em>pip3</em>) с<a href="https://www.python.org/"> python.org</a>:</p> @@ -144,13 +144,13 @@ translation_of: Learn/Server-side/Django/development_environment <p>Удостовериться в успешной установке вы можете проверкой на наличие <em>Python 3</em>, как показано ниже:</p> -<pre class="notranslate">python3 -V +<pre>python3 -V Python 3.5.20 </pre> <p>Подобным образом вы можете проверить установку <em>pip3</em>, отобразив список доступных пакетов:</p> -<pre class="notranslate">pip3 list</pre> +<pre>pip3 list</pre> <h3 id="Windows_10">Windows 10</h3> @@ -168,13 +168,13 @@ translation_of: Learn/Server-side/Django/development_environment <p>После этого вы сможете подтвердить успешную установку Python путём выполнения следующего текста в командной строке:</p> -<pre class="notranslate">py -3 -V +<pre>py -3 -V Python 3.5.2 </pre> <p>Установщик Windows включает в себя <em>pip3</em> (менеджер пакетов Python) по умолчанию. Вы можете отобразить список установленных пакетов, как показано далее:</p> -<pre class="notranslate">pip list +<pre>pip list </pre> <div class="note"> @@ -193,12 +193,12 @@ translation_of: Learn/Server-side/Django/development_environment <p>Установите инструмент при помощи pip3:</p> -<pre class="notranslate"><code>sudo pip3 install virtualenvwrapper</code> +<pre><code>sudo pip3 install virtualenvwrapper</code> </pre> <p>Затем добавьте следующие строки в конец файла загрузки программной оболочки (shell) (это скрытый файл в вашей домашней директории с именем <strong>.bashrc</strong>). Они устанавливают расположение виртуальных сред, расположение каталога разрабатываемого проекта и расположение установленного с этим пакетом скрипта.</p> -<pre class="notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs +<pre><code>export WORKON_HOME=$HOME/.virtualenvs export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 ' export PROJECT_HOME=$HOME/Devel @@ -207,12 +207,12 @@ source /usr/local/bin/virtualenvwrapper.sh</code> <p>Затем перезагрузите файл загрузки, выполнив в терминале следующую команду:</p> -<pre class="notranslate"><code>source ~/.bashrc</code> +<pre><code>source ~/.bashrc</code> </pre> <p>В этот момент вы должны увидеть запуск группы скриптов, как показано ниже:</p> -<pre class="notranslate"><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject +<pre><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject ... virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate @@ -228,12 +228,12 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_detail <p>Установите инструмент при помощи pip3:</p> -<pre class="notranslate"><code>sudo pip3 install virtualenvwrapper</code> +<pre><code>sudo pip3 install virtualenvwrapper</code> </pre> <p>Затем добавьте следующие строки в конец вашего файла загрузки программной оболочки:</p> -<pre class="notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs +<pre><code>export WORKON_HOME=$HOME/.virtualenvs export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 export PROJECT_HOME=$HOME/Devel source /usr/local/bin/virtualenvwrapper.sh</code> @@ -252,7 +252,7 @@ source /usr/local/bin/virtualenvwrapper.sh</code> -<pre class="notranslate"><code>cd ~ # Navigate to my home directory +<pre><code>cd ~ # Navigate to my home directory ls -la #List the content of the directory. You should see .bash_profile nano .bash_profile # Open the file in the nano text editor, within the terminal # Scroll to the end of the file, and copy in the lines above @@ -262,7 +262,7 @@ nano .bash_profile # Open the file in the nano text editor, within the terminal <p>После этого перезагрузите файл загрузки путём выполнения следующей команды в терминале:</p> -<pre class="notranslate"><code>source ~/.bash_profile</code> +<pre><code>source ~/.bash_profile</code> </pre> <p>В этот момент вы должны увидеть запуск группы скриптов (те же скрипты, что и в случае установки на Ubuntu).</p> @@ -273,7 +273,7 @@ nano .bash_profile # Open the file in the nano text editor, within the terminal <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> +<pre><code>pip3 install virtualenvwrapper-win</code></pre> <p>Теперь вы можете создать новую виртуальную среду при помощи команды <code>mkvirtualen</code>.</p> @@ -283,7 +283,7 @@ nano .bash_profile # Open the file in the nano text editor, within the terminal <p>Теперь вы можете создать новую виртуальную среду при помощи команды <code>mkvirtualenv</code>. Во время запуска команды вы увидите установку виртуальной среды (конкретные результаты команды очень зависят от платформы). После выполнения команды активируется новая виртуальная среда — заметить это вы можете по тому, что началом ввода будет название виртуальной среды в круглых скобках (как показано ниже).</p> -<pre class="notranslate"><code>$ mkvirtualenv my_django_environment +<pre><code>$ mkvirtualenv my_django_environment Running virtualenv with interpreter /usr/bin/python3 ... virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details (my_django_environment) ubuntu@ubuntu:~$</code></pre> @@ -309,12 +309,12 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get <p>После создания виртуальной среды и вызова <code>workon</code> для входа в неё вы можете использовать <em>pip3 </em>для установки Django. </p> -<pre class="notranslate">pip3 install django +<pre>pip3 install django </pre> <p>Вы можете проверить установку Django, выполнив следующую команду (она просто проверяет, что Python может найти модуль Django):</p> -<pre class="notranslate"># Linux/Mac OS X +<pre># Linux/Mac OS X python3 -m django --version 1.10.10 @@ -335,18 +335,18 @@ py -3 -m django --version <p>Указанная выше проверка работает, но не представляет особого интереса.Более интересная проверка заключается в создании шаблона проекта и проверки его работы. Для её выполнения перейдите в командной строке/терминале в место, где планируете сохранять приложения Django. Создайте папку для теста и перейдите в неё.</p> -<pre class="notranslate">mkdir django_test +<pre>mkdir django_test cd django_test </pre> <p>Затем вы можете создать шаблон сайта "<em>mytestsite</em>" при помощи инструмента <strong>django-admin</strong>. После создания сайта вы можете перейти в папку, где найдёте основной скрипт для управления проектами с именем <strong>manage.py</strong>.</p> -<pre class="notranslate">django-admin startproject mytestsite +<pre>django-admin startproject mytestsite cd mytestsite</pre> <p>Мы можем запустить веб-сервер разработки из этой папки при помощи <strong>manage.py</strong> и команды <code>runserver</code>, как показано ниже.</p> -<pre class="notranslate">$ <strong>python3 manage.py runserver </strong> +<pre>$ <strong>python3 manage.py runserver </strong> Performing system checks... System check identified no issues (0 silenced). diff --git a/files/ru/learn/server-side/django/forms/index.html b/files/ru/learn/server-side/django/forms/index.html index 6652e56297..9b2c9a5ed3 100644 --- a/files/ru/learn/server-side/django/forms/index.html +++ b/files/ru/learn/server-side/django/forms/index.html @@ -50,7 +50,7 @@ translation_of: Learn/Server-side/Django/Forms <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"> +<pre class="brush: html"><form action="/team_name_url/" method="post"> <label for="team_name">Enter name: </label> <input id="team_name" type="text" name="name_field" value="Default name for team."> <input type="submit" value="OK"> @@ -129,7 +129,7 @@ translation_of: Learn/Server-side/Django/Forms <p>Для того, чтобы создать класс с возможностями базового класса <code>Form</code> мы должны импортировать библиотеку <code>forms</code>, наследовать наш класс от класса <code>Form</code>, а затем объявить поля формы. Таким образом, самый простой класс формы в нашем случае будет иметь вид, показанный ниже:</p> -<pre class="brush: python notranslate">from django import forms +<pre class="brush: python">from django import forms class RenewBookForm(forms.Form): renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).") @@ -160,7 +160,7 @@ class RenewBookForm(forms.Form): <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 +<pre class="brush: python">from django import forms <strong>from django.core.exceptions import ValidationError from django.utils.translation import ugettext_lazy as _ @@ -201,7 +201,7 @@ class RenewBookForm(forms.Form): <p>Перед созданием отображения давайте добавим соответствующую конфигурацию URL-адреса для страницы обновления книг. Скопируйте следующий фрагмент в нижнюю часть файла<strong> locallibrary/catalog/urls.py</strong>.</p> -<pre class="brush: python notranslate">urlpatterns += [ +<pre class="brush: python">urlpatterns += [ url(r'^book/(?P<pk>[-\w]+)/renew/$', views.renew_book_librarian, name='renew-book-librarian'), ]</pre> @@ -219,7 +219,7 @@ class RenewBookForm(forms.Form): <p>Процесс обновления книги приводит к изменению информации в базе данных, таким образом, в соответствии с нашими соглашениями, в таком случае мы должны применять запрос типа <code>POST</code>. Фрагмент кода, представленный ниже, показывает (наиболее общую) схему работы для таких запросов. </p> -<pre class="brush: python notranslate">from django.shortcuts import get_object_or_404 +<pre class="brush: python">from django.shortcuts import get_object_or_404 from django.http import HttpResponseRedirect from django.urls import reverse import datetime @@ -263,7 +263,7 @@ def renew_book_librarian(request, pk): <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) +<pre class="brush: python"> book_inst = get_object_or_404(BookInstance, pk=pk) # Если это GET (или другой метод), тогда создаём форму по умолчанию <strong>else:</strong> @@ -276,7 +276,7 @@ def renew_book_librarian(request, pk): <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) +<pre class="brush: python"> book_inst = get_object_or_404(BookInstance, pk=pk) # Если данный запрос типа POST, тогда if request.method == 'POST': @@ -309,7 +309,7 @@ def renew_book_librarian(request, pk): <p>Окончательный вид отображения показан ниже. Пожалуйста, скопируйте данный текст в нижнюю часть файла <strong>locallibrary/catalog/views.py</strong>.</p> -<pre class="notranslate"><strong>from django.contrib.auth.decorators import permission_required</strong> +<pre><strong>from django.contrib.auth.decorators import permission_required</strong> from django.shortcuts import get_object_or_404 from django.http import HttpResponseRedirect @@ -352,7 +352,7 @@ def renew_book_librarian(request, pk): <p>Создайте шаблон, на который ссылается наше отображение (<strong>/catalog/templates/catalog/book_renew_librarian.html</strong>) и скопируйте в него код, указанный ниже:</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <h1>Renew: \{{bookinst.book.title}}</h1> @@ -379,7 +379,7 @@ def renew_book_librarian(request, pk): <p>Все что осталось, это указать переменную <code>\{{form}}</code>, которую мы передали в шаблон в словаре контекста. Возможно это вас не удивит, но таким образом мы предоставим возможность форме отрендерить свои поля с их метками, виджетами и дополнительными текстами, и в результате мы получим следующее:</p> -<pre class="brush: html notranslate"><tr> +<pre class="brush: html"><tr> <th><label for="id_renewal_date">Renewal date:</label></th> <td> <input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required /> @@ -395,7 +395,7 @@ def renew_book_librarian(request, pk): <p>Если вы ввели неправильную дату, то на странице вы должны получить список сообщений об ошибках (показано жирным ниже).</p> -<pre class="brush: html notranslate"><tr> +<pre class="brush: html"><tr> <th><label for="id_renewal_date">Renewal date:</label></th> <td> <strong> <ul class="errorlist"> @@ -427,7 +427,7 @@ def renew_book_librarian(request, pk): <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> +<pre class="brush: html">{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a> {% endif %}</pre> <div class="note"> <p><strong>Примечание</strong>: Помните что, для того чтобы перейти на страницу обновления книги, ваш тестовый логин должен иметь разрешение доступа типа "<code>catalog.can_mark_returned</code>"(возможно надо воспользоваться вашим аккаунтом для суперпользователя).</p> @@ -457,7 +457,7 @@ def renew_book_librarian(request, pk): <p>Базовая реализация <code>ModelForm</code> содержит тоже поле как и ваш предыдущий класс формы <code>RenewBookForm</code>, что и показано ниже. Все что вам необходимо сделать, - внутри вашего нового класса добавить класс <code>Meta</code> и связать его с моделью <code>model</code> (<code>BookInstance</code>), а затем перечислить поля модели в поле <code>fields</code> которые должны быть включены в форму (вы можете включить все поля при помощи <code>fields = '__all__'</code>, или можно воспользоваться полем <code>exclude</code> (вместо <code>fields</code>), чтобы определить поля модели, которые <em>не</em> нужно включать).</p> -<pre class="brush: python notranslate">from django.forms import ModelForm +<pre class="brush: python">from django.forms import ModelForm from .models import BookInstance class RenewBookModelForm(ModelForm): @@ -472,7 +472,7 @@ class RenewBookModelForm(ModelForm): <p>Оставшаяся часть информации касается объявления полей модели (то есть, текстовых меток, виджетов, текстов, сообщений об ошибках). Если они недостаточно "правильные", то тогда мы можем переопределить их в нашем классе <code>Meta</code> при помощи словаря, содержащего поле, которое надо изменить и его новое значение. Например, в нашей форме мы могли бы поменять текст метки для поля "<em>Renewal date</em>" (вместо того, чтобы оставить текст по умолчанию: <em>Due date</em>), а кроме того мы хотим написать другой вспомогательный текст. Класс <code>Meta</code>, представленный ниже, показывает вам, как переопределить данные поля. Кроме того, при необходимости, вы можете установить значения для виджетов <code>widgets</code> и сообщений об ошибках <code>error_messages</code>.</p> -<pre class="brush: python notranslate">class Meta: +<pre class="brush: python">class Meta: model = BookInstance fields = ['due_back',] <strong> labels = { 'due_back': _('Renewal date'), } @@ -481,7 +481,7 @@ class RenewBookModelForm(ModelForm): <p>Чтобы добавить валидацию, вы можете использовать тот же способ как и для класса <code>Form</code> — вы определяете функцию с именем <code>clean_<em>field_name</em>()</code> из которой выбрасываете исключение <code>ValidationError</code>, если это необходимо. Единственным отличием от нашей оригинальной формы будет являться то, что поле модели имеет имя <code>due_back</code>, а не "<code>renewal_date</code>".</p> -<pre class="brush: python notranslate">from django.forms import ModelForm +<pre class="brush: python">from django.forms import ModelForm from .models import BookInstance class RenewBookModelForm(ModelForm): @@ -522,7 +522,7 @@ class RenewBookModelForm(ModelForm): <p>Откройте файл отображений (<strong>locallibrary/catalog/views.py</strong>) и добавьте следующий код в его нижнюю часть:</p> -<pre class="brush: python notranslate">from django.views.generic.edit import CreateView, UpdateView, DeleteView +<pre class="brush: python">from django.views.generic.edit import CreateView, UpdateView, DeleteView from django.urls import reverse_lazy from .models import Author @@ -551,7 +551,7 @@ class AuthorDelete(DeleteView): <p>Создайте файл шаблона <strong>locallibrary/catalog/templates/catalog/author_form.html</strong> и скопируйте в него следующий текст.</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} @@ -569,7 +569,7 @@ class AuthorDelete(DeleteView): <p>Отображения "удалить" ожидает "найти" шаблон с именем формата <em>model_name</em><strong>_confirm_delete.html</strong> (и снова, вы можете изменить суффикс при помощи поля отображения<code>template_name_suffix</code>). Создайте файл шаблона <strong>locallibrary/catalog/templates/catalog/author_confirm_delete</strong><strong>.html</strong> и скопируйте в него текст, указанный ниже.</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} @@ -589,7 +589,7 @@ class AuthorDelete(DeleteView): <p>Откройте файл конфигураций URL-адресов (<strong>locallibrary/catalog/urls.py</strong>) и добавьте в его нижнюю часть следующие настройки:</p> -<pre class="brush: python notranslate">urlpatterns += [ +<pre class="brush: python">urlpatterns += [ url(r'^author/create/$', views.AuthorCreate.as_view(), name='author_create'), url(r'^author/(?P<pk>\d+)/update/$', views.AuthorUpdate.as_view(), name='author_update'), url(r'^author/(?P<pk>\d+)/delete/$', views.AuthorDelete.as_view(), name='author_delete'), diff --git a/files/ru/learn/server-side/django/introduction/index.html b/files/ru/learn/server-side/django/introduction/index.html index 34fcd1da21..b94853398f 100644 --- a/files/ru/learn/server-side/django/introduction/index.html +++ b/files/ru/learn/server-side/django/introduction/index.html @@ -112,7 +112,7 @@ original_slug: Learn/Server-side/Django/Введение <p>Сопоставитель URL-адресов обычно содержится в файле <strong>urls.py</strong>. В примере ниже сопоставитель (<code>urlpatterns</code>) определяет список сопоставлений между<em>маршрутами </em>(определёнными URL-<em>шаблонами</em>) и соответствующими функциями отображения (view). Если получен HTTP-запрос, который имеет URL-адрес, соответствующий определённому шаблону, то затем будет вызвана связанная функция отображения (view) и передана в запрос.</p> -<pre class="notranslate">urlpatterns = [ +<pre>urlpatterns = [ <strong>path('admin/', admin.site.urls), </strong>path('book/<int:id>/', views.book_detail, name='book_detail'), path('catalog/', include('catalog.urls')), @@ -131,7 +131,7 @@ original_slug: Learn/Server-side/Django/Введение <p>В приведённом ниже примере показана минимальная функция представления <code>index()</code>, которая могла быть вызвана нашим сопоставителем URL-адресов в предыдущем разделе. Как и все функции отображения (view), она получает объект <code>HttpRequest</code> в качестве параметра (<code>request</code>) и возвращает объект <code>HttpResponse</code>. В этом случае мы ничего не делаем с запросом, и наш ответ просто возвращает жёстко запрограммированную строку. Мы покажем вам запрос, который делает что-то более интересное в следующем разделе.</p> -<pre class="brush: python notranslate">## filename: views.py (Django view functions) +<pre class="brush: python">## filename: views.py (Django view functions) from django.http import HttpResponse @@ -162,7 +162,7 @@ def index(request): <p>В приведённом ниже фрагменте кода показана очень простая модель Django для объекта <code>Team</code>. Класс <code>Team</code> наследуется от класса <code>models.Model</code>. Он определяет имя команды и командный уровень в качестве полей символов и задаёт максимальное количество символов, которые могут быть сохранены для каждой записи. <code>Team_level</code> может быть одним из нескольких значений, поэтому мы определяем его как поле выбора и предоставляем сопоставление между отображаемыми вариантами и хранимыми данными вместе со значением по умолчанию.</p> -<pre class="brush: python notranslate"># filename: models.py +<pre class="brush: python"># filename: models.py from django.db import models @@ -194,7 +194,7 @@ class Team(models.Model): <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 +<pre class="brush: python">## filename: views.py from django.shortcuts import render from .models import Team @@ -216,7 +216,7 @@ def index(request): <p>Фрагмент кода показывает, как может выглядеть HTML-шаблон, вызванный функцией <code>render()</code> из предыдущего раздела. Этот шаблон был написан с предположением, что во время отрисовки он будет иметь доступ к переменной списка, названной <code>youngest_teams</code> (содержащейся в контекстной переменной внутри функции <code>render()</code> выше). Внутри скелета HTML мы имеем выражение, которое сначала проверяет, существует ли переменная <code>youngest_teams</code>, а затем повторяет её в цикле <code>for</code>. При каждом повторе шаблон отображает значение <code>team_name</code> каждой команды в элементе <code>{{htmlelement("li")}}</code>.</p> -<pre class="notranslate">## filename: best/templates/best/index.html +<pre>## filename: best/templates/best/index.html <!DOCTYPE html> <html lang="en"> diff --git a/files/ru/learn/server-side/django/models/index.html b/files/ru/learn/server-side/django/models/index.html index 8e05924833..84f8b261d2 100644 --- a/files/ru/learn/server-side/django/models/index.html +++ b/files/ru/learn/server-side/django/models/index.html @@ -63,7 +63,7 @@ translation_of: Learn/Server-side/Django/Models <p>Модели обычно определяются в приложении <strong>models.py</strong>. Они реализуются как подклассы <code>django.db.models.Model</code>, и могут включать поля, методы и метаданные. В приведённом ниже фрагменте кода показана «типичная» модель, названная <code>MyModelName</code>:</p> -<pre class="notranslate">from django.db import models +<pre>from django.db import models class MyModelName(models.Model): """ @@ -97,7 +97,7 @@ class MyModelName(models.Model): <p>Модель может иметь произвольное количество полей любого типа - каждый представляет столбец данных, который мы хотим сохранить в одной из наших таблиц базы данных. Каждая запись (строка) базы данных будет состоять из одного значения каждого поля. Давайте рассмотрим приведённый выше пример:</p> -<pre class="brush: js notranslate">my_field_name = models.CharField(max_length=20, help_text="Enter field documentation")</pre> +<pre class="brush: js">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> @@ -148,7 +148,7 @@ class MyModelName(models.Model): <p>Вы можете объявить метаданные на уровне модели для своей модели, объявив класс Meta, как показано на рисунке.</p> -<pre class="brush: python notranslate">class Meta: +<pre class="brush: python">class Meta: ordering = ["-my_field_name"] ...</pre> @@ -156,13 +156,13 @@ class MyModelName(models.Model): <p>Например, если мы решили сортировать книги по умолчанию:</p> -<pre class="brush: python notranslate">ordering = ["title", "-pubdate"]</pre> +<pre class="brush: python">ordering = ["title", "-pubdate"]</pre> <p>Книги будут отсортированы по алфавиту по названию, от A-Z, а затем по дате публикации внутри каждого названия, от самого нового до самого старого.</p> <p>Другим распространённым атрибутом является verbose_name, подробное имя для класса в единственной и множественной форме:</p> -<pre class="brush: python notranslate">verbose_name = "BetterName"</pre> +<pre class="brush: python">verbose_name = "BetterName"</pre> <p>Другие полезные атрибуты позволяют создавать и применять новые «разрешения доступа» для модели (разрешения по умолчанию применяются автоматически), разрешить упорядочение на основе другого поля или объявить, что класс является «абстрактным» (базовый класс, для которого вы не можете создавать записи, и вместо этого будет создан для создания других моделей). Многие другие параметры метаданных управляют тем, какая база данных должна использоваться для модели и как хранятся данные (это действительно полезно, если вам нужно сопоставить модель с существующей базой данных). Полный список опций метаданных доступен здесь: <a href="https://docs.djangoproject.com/en/2.2/ref/models/options/#model-meta-options">Model metadata options</a> (Django документация).</p> @@ -170,12 +170,12 @@ class MyModelName(models.Model): <p>Модель также может иметь методы. Минимально в каждой модели вы должны определить стандартный метод класса для Python __str __ (), чтобы вернуть удобочитаемую строку для каждого объекта. Эта строка используется для представления отдельных записей на сайте администрирования (и в любом другом месте, где вам нужно обратиться к экземпляру модели). Часто это возвращает поле названия или имени из модели.</p> -<pre class="brush: python notranslate">def __str__(self): +<pre class="brush: python">def __str__(self): return self.field_name</pre> <p>Другим распространённым методом включения в модели Django является get_absolute_url (), который возвращает URL-адрес для отображения отдельных записей модели на веб-сайте (если вы определяете этот метод, тогда Django автоматически добавит кнопку «Просмотр на сайте» на экранах редактирования записей модели на сайте администратора). Типичный шаблон для get_absolute_url () показан ниже.</p> -<pre class="brush: python notranslate">def get_absolute_url(self): +<pre class="brush: python">def get_absolute_url(self): """ Returns the url to access a particular instance of the model. """ @@ -198,7 +198,7 @@ class MyModelName(models.Model): <p>Чтобы создать запись, вы можете определить экземпляр модели, а затем вызвать метод save ().</p> -<pre class="brush: python notranslate"># Create a new record using the model's constructor. +<pre class="brush: python"># Create a new record using the model's constructor. a_record = MyModelName(my_field_name="Instance #1") # Save the object into the database. @@ -211,7 +211,7 @@ a_record.save() <p>Вы можете получить доступ к полям в этой новой записи с использованием синтаксиса точек и изменить значения. Вы должны вызвать save (), чтобы сохранить изменённые значения в базе данных.</p> -<pre class="brush: python notranslate"># Access model field values using Python attributes. +<pre class="brush: python"># Access model field values using Python attributes. print(a_record.id) #should return 1 for the first record. print(a_record.my_field_name) # should print 'Instance #1' @@ -229,12 +229,12 @@ a_record.save()</pre> <p>Мы можем получить все записи для модели как объект QuerySet, используя <code>objects.all()</code>. QuerySet - это итерируемый объект, означающий, что он содержит несколько объектов, которые мы можем перебирать / прокручивать.</p> -<pre class="brush: python notranslate">all_books = Book.objects.all() +<pre class="brush: python">all_books = Book.objects.all() </pre> <p>Метод <code>filter()</code> Django позволяет отфильтровать возвращаемый <code>QuerySet</code> для соответствия указанному текстовому или числовому полю по конкретным критериям. Например, чтобы отфильтровать книги, содержащие слово «wild» («дикие») в заголовке, а затем подсчитать их, мы могли бы сделать следующее.</p> -<pre class="brush: python notranslate">wild_books = Book.objects.filter(title__contains='wild') +<pre class="brush: python">wild_books = Book.objects.filter(title__contains='wild') number_wild_books = Book.objects.filter(title__contains='wild').count() </pre> @@ -242,7 +242,7 @@ number_wild_books = Book.objects.filter(title__contains='wild').count() <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 class="brush: python">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"> @@ -255,7 +255,7 @@ number_wild_books = Book.objects.filter(title__contains='wild').count() <p>В этом разделе мы начнём определять модели для библиотеки. Откройте <em>models.py (в / locallibrary / catalog /)</em>. Шаблон в верхней части страницы импортирует модуль моделей, который содержит базовый класс модели <code>models.Model</code>, от которого наследуются наши модели.</p> -<pre class="brush: python notranslate">from django.db import models +<pre class="brush: python">from django.db import models # Create your models here.</pre> @@ -263,7 +263,7 @@ number_wild_books = Book.objects.filter(title__contains='wild').count() <p>Скопируйте приведённый ниже код модели <code>Genre </code>и вставьте его в нижнюю часть вашего файла <code>models.py</code>. Эта модель используется для хранения информации о категории книг - например, будь то художественная или документальная, роман или военно-историческая и т. д. Как уже упоминалось выше, мы создали жанр как модель, а не как свободный текст или список выбора, чтобы возможные значения могли управляться через базу данных, а не были закодированными.</p> -<pre class="brush: python notranslate">class Genre(models.Model): +<pre class="brush: python">class Genre(models.Model): """ Model representing a book genre (e.g. Science Fiction, Non Fiction). """ @@ -281,7 +281,7 @@ number_wild_books = Book.objects.filter(title__contains='wild').count() <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 +<pre class="brush: python">from django.urls import reverse #Used to generate URLs by reversing the URL patterns class Book(models.Model): """ @@ -326,7 +326,7 @@ class Book(models.Model): <li>CharField, для представления данных (конкретного выпуска) о книге.</li> </ul> -<pre class="brush: python notranslate">import uuid # Required for unique book instances +<pre class="brush: python">import uuid # Required for unique book instances class BookInstance(models.Model): """ @@ -382,7 +382,7 @@ class BookInstance(models.Model): <p>Теперь все поля/методы должны быть знакомы. Модель определяет автора как имя, фамилию, дату рождения и (необязательную) дату смерти. Он указывает, что по умолчанию __str __ () возвращает имя в фамилии, порядковый номер первого имени. Метод get_absolute_url () отменяет сопоставление URL-адреса автора с целью получения URL-адреса для отображения отдельного автора.</p> -<pre class="brush: python notranslate">class Author(models.Model): +<pre class="brush: python">class Author(models.Model): """ Model representing an author. """ @@ -409,7 +409,7 @@ class BookInstance(models.Model): <p>Теперь все ваши модели созданы. Теперь переустановите миграцию базы данных, чтобы добавить их в свою базу данных.</p> -<pre class="notranslate"><code>python3 manage.py makemigrations +<pre><code>python3 manage.py makemigrations python3 manage.py migrate</code></pre> <h2 id="Языковая_модель_-_вызов">Языковая модель - вызов</h2> 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 c0c188f731..626090c6a0 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 @@ -85,7 +85,7 @@ translation_of: Learn/Server-side/Express_Nodejs/development_environment <p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой способ установить последнюю версию LTS Node 6.x - это использовать</span></span> <a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">package manager</a> <span class="tlid-translation translation" lang="ru"><span title="">чтобы получить его из репозитория бинарных дистрибутивов Ubuntu.</span> <span title="">Это можно сделать очень просто, выполнив следующие две команды на вашем терминале:</span></span></p> -<pre class="brush: bash notranslate"><code>curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - +<pre class="brush: bash"><code>curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs</code> </pre> @@ -100,12 +100,12 @@ sudo apt-get install -y nodejs</code> <p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой способ проверить, установлен ли этот узел, - это запустить команду «версия» в своём терминале / командной строке и проверить, что возвращается строка версии:</span></span></p> -<pre class="brush: bash notranslate">>node -v +<pre class="brush: bash">>node -v v8.11.3</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Менеджер пакетов Nodejs NPM также должен быть установлен и может быть протестирован таким же образом:</span></span></p> -<pre class="brush: bash notranslate">>npm -v +<pre class="brush: bash">>npm -v 5.8.0</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">В качестве немного более захватывающего теста давайте создадим очень простой сервер «чистого узла», который просто печатает «Hello World» в браузере, когда вы посещаете правильный URL в вашем браузере:</span></span></p> @@ -113,7 +113,7 @@ v8.11.3</pre> <ol> <li><span class="tlid-translation translation" lang="ru"><span title="">Скопируйте следующий текст в файл с именем hellonode.js.</span> <span title="">Здесь используются чистые функции Node (ничего из Express) и некоторый синтаксис ES6:</span></span> - <pre class="brush: js notranslate">//Загрузка модуля HTTP + <pre class="brush: js">//Загрузка модуля HTTP const http = require("http"); <code>const hostname = '127.0.0.1'; const port = 3000; @@ -141,7 +141,7 @@ server.listen(port, hostname, () => { </div> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Запустите сервер, перейдя в тот же каталог, что и ваш файл hellonode.js в командной строке, и вызвав узел вместе с именем скрипта, например так:</span></span> - <pre class="brush: bash notranslate">>node hellonode.js + <pre class="brush: bash">>node hellonode.js Server running at http://127.0.0.1:3000/ </pre> </li> @@ -169,15 +169,15 @@ Server running at http://127.0.0.1:3000/ <ol> <li><span class="tlid-translation translation" lang="ru"><span title="">Сначала создайте каталог для вашего нового приложения и перейдите в него:</span></span> - <pre class="brush: bash notranslate">mkdir myapp + <pre class="brush: bash">mkdir myapp cd myapp</pre> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Используйте команду npm init для создания файла package.json для вашего приложения.</span> <span title="">Эта команда запрашивает у вас несколько вещей, включая имя и версию вашего приложения, а также имя исходного файла точки входа (по умолчанию это index.js).</span> <span title="">Сейчас просто примите значения по умолчанию:</span></span> - <pre class="brush: bash notranslate">npm init</pre> + <pre class="brush: bash">npm init</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Если вы отобразите файл package.json (cat package.json), вы увидите принятые по умолчанию значения, заканчивающиеся лицензией.</span></span></p> - <pre class="brush: json notranslate">{ + <pre class="brush: json">{ "name": "myapp", "version": "1.0.0", "description": "", @@ -192,11 +192,11 @@ cd myapp</pre> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Теперь установите Express в каталог myapp и сохраните его в списке зависимостей вашего файла package.json</span></span></li> <li> - <pre class="brush: bash notranslate">npm install express --save</pre> + <pre class="brush: bash">npm install express --save</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Раздел зависимостей вашего package.json теперь появится в конце файла package.json и будет содержать Express.</span></span></p> - <pre class="brush: json notranslate">{ + <pre class="brush: json">{ "name": "myapp", "version": "1.0.0", "description": "", @@ -213,7 +213,7 @@ cd myapp</pre> </pre> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Для использования библиотеки вы вызываете функцию require (), как показано ниже в вашем файле index.js.</span></span> - <pre class="notranslate"><code><strong>const express = require('express')</strong> + <pre><code><strong>const express = require('express')</strong> const app = express(); app.get('/', (req, res) => { @@ -230,7 +230,7 @@ app.listen(</code>8000<code>, () => { <span class="tlid-translation translation" lang="ru"><span title="">Создайте файл с именем index.js в корне каталога приложения «myapp» и передайте ему содержимое, показанное выше.</span></span></p> </li> <li><span class="tlid-translation translation" lang="ru"><span title="">Вы можете запустить сервер, вызвав узел с помощью скрипта в командной строке:</span></span> - <pre class="brush: bash notranslate">>node index.js + <pre class="brush: bash">>node index.js Example app listening on port 8000 </pre> </li> @@ -241,11 +241,11 @@ Example app listening on port 8000 <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> +<pre class="brush: bash"><code>npm install eslint --save-dev</code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Следующая запись будет добавлена в package.json вашего приложения:</span></span></p> -<pre class="brush: js notranslate"> "devDependencies": { +<pre class="brush: js"> "devDependencies": { "eslint": "^4.12.1" } </pre> @@ -264,7 +264,7 @@ Example app listening on port 8000 <p><span class="tlid-translation translation" lang="ru"><span title="">Например, чтобы определить скрипт для запуска зависимости разработки eslint, которую мы указали в предыдущем разделе, мы могли бы добавить следующий блок скрипта в наш файл package.json (при условии, что наш источник приложения находится в папке / src / js):</span></span></p> -<pre class="brush: js notranslate">"scripts": { +<pre class="brush: js">"scripts": { ... "lint": "eslint src/js" ... @@ -275,7 +275,7 @@ Example app listening on port 8000 <p><span class="tlid-translation translation" lang="ru"><span title="">Затем мы сможем запустить eslint с помощью NPM, вызвав:</span></span></p> -<pre class="brush: bash notranslate"><code>npm run-script lint +<pre class="brush: bash"><code>npm run-script lint # OR (using the alias) npm run lint</code> </pre> @@ -286,16 +286,16 @@ npm run lint</code> <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> +<pre><code>npm install express-generator -g</code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы создать приложение Express с именем «helloworld» с настройками по умолчанию, перейдите туда, где вы хотите его создать, и запустите приложение, как показано ниже:</span></span></p> -<pre class="brush: bash notranslate">express helloworld</pre> +<pre class="brush: bash">express helloworld</pre> <div class="note"> <p><strong>Замечание:</strong> <span class="tlid-translation translation" lang="ru"><span title="">Вы также можете указать библиотеку шаблонов для использования и ряд других настроек.</span> <span title="">Используйте команду help, чтобы увидеть все параметры:</span></span></p> -<pre class="brush: bash notranslate">express --help +<pre class="brush: bash">express --help </pre> </div> @@ -304,7 +304,7 @@ npm run lint</code> <div class="note"> <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">{ +<pre class="brush: js">{ "name": "helloworld", "version": "0.0.0", "private": true, @@ -325,13 +325,13 @@ npm run lint</code> <p><span class="tlid-translation translation" lang="ru"><span title="">Установите все зависимости для приложения helloworld, используя NPM, как показано ниже:</span></span></p> -<pre class="brush: bash notranslate">cd helloworld +<pre class="brush: bash">cd helloworld npm install </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Затем запустите приложение (команды немного отличаются для Windows и Linux / macOS), как показано ниже:</span></span></p> -<pre class="brush: bash notranslate"># Run the helloworld on Windows with Command Prompt +<pre class="brush: bash"># Run the helloworld on Windows with Command Prompt SET DEBUG=helloworld:* & npm start # Run the helloworld on Windows with PowerShell @@ -343,7 +343,7 @@ DEBUG=helloworld:* npm start <p><span class="tlid-translation translation" lang="ru"><span title="">Команда DEBUG создаёт полезное ведение журнала, что приводит к выводу, подобному показанному ниже.</span></span></p> -<pre class="brush: bash notranslate">>SET DEBUG=helloworld:* & npm start +<pre class="brush: bash">>SET DEBUG=helloworld:* & npm start > helloworld@0.0.0 start D:\Github\expresstests\helloworld > node ./bin/www diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html index c8b39b2872..830c895bc8 100644 --- a/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html +++ b/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_ba <p>Откройте файл <strong>/views/layout.pug </strong>и замените его содержимое следующим.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html">doctype html +<pre class="brush: html line-numbers language-html"><code class="language-html">doctype html html(lang='en') head title= title @@ -53,7 +53,7 @@ html(lang='en') <p>Базовый шаблон также ссылается на локальный файл стилей (<strong>style.css</strong>), что обеспечивает дополнительное управление внешним видом. Откройте <strong>/public/stylesheets/style.css</strong> и замените его содержимое таким текстом:</p> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token"><span class="class token">.sidebar-nav</span> </span><span class="punctuation token">{</span> +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.sidebar-nav</span> </span><span class="punctuation token">{</span> <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="property token">list-style</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> 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 1a6208f065..910f6a53ed 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/index.html @@ -46,7 +46,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <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"> +<pre class="brush: html"><form action="/team_name_url/" method="post"> <label for="team_name">Enter name: </label> <input id="team_name" type="text" name="name_field" value="Default name for team."> <input type="submit" value="OK"> @@ -108,7 +108,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p>Установите модуль, выполнив следующую команду в корне проекта</p> -<pre class="brush: bash notranslate">npm install express-validator +<pre class="brush: bash">npm install express-validator </pre> <h4 id="Использование_express-validator">Использование express-validator</h4> @@ -119,7 +119,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms <p>Для того, чтобы использовать валидатор в наших контроллерах, мы должны требовать функции, которые мы хотим использовать из модулей <strong>'express-validator/check</strong>' и <strong>'express-validator/filter</strong>', как показано ниже:</p> -<pre class="brush: js notranslate">const { body,validationResult } = require('express-validator/check'); +<pre class="brush: js">const { body,validationResult } = require('express-validator/check'); const { sanitizeBody } = require('express-validator/filter'); </pre> @@ -130,12 +130,12 @@ const { sanitizeBody } = require('express-validator/filter'); <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() указывает, что пустые и пустые строки не пройдут проверку. - <pre class="brush: js notranslate">body('name', 'Empty name').isLength({ min: 1 }), + <pre class="brush: js">body('name', 'Empty name').isLength({ min: 1 }), body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(), </pre> Можно также последовательно подключить различные валидаторы и добавить сообщения, отображаемые при выполнении предыдущих валидаторов.</li> <li> - <pre class="brush: js notranslate">body('name').isLength({ min: 1 }).trim().withMessage('Name empty.') + <pre class="brush: js">body('name').isLength({ min: 1 }).trim().withMessage('Name empty.') .isAlpha().withMessage('Name must be alphabet letters.'), </pre> @@ -144,11 +144,11 @@ body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(), </div> </li> <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(), + <pre class="brush: js">sanitizeBody('name').trim().escape(), sanitizeBody('date').toDate(),</pre> </li> <li><code><a href="https://github.com/ctavan/express-validator#validationresultreq">validationResult(req)</a></code>: Запускает проверку, делая ошибки доступными в виде объекта результата проверки. Это вызывается в отдельном обратном вызове, как показано ниже: - <pre class="brush: js notranslate">(req, res, next) => { + <pre class="brush: js">(req, res, next) => { // Extract the validation errors from a request. const errors = validationResult(req); @@ -193,7 +193,7 @@ sanitizeBody('date').toDate(),</pre> <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> -<pre class="brush: js notranslate">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id). +<pre class="brush: js">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id). router.get('/genre/create', genre_controller.genre_create_get); // POST request for creating Genre. 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 881a3c70d6..cbcafaa64a 100644 --- a/files/ru/learn/server-side/express_nodejs/introduction/index.html +++ b/files/ru/learn/server-side/express_nodejs/introduction/index.html @@ -46,13 +46,13 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction <li>Создайте папку, куда вы хотите сохранить программу, к примеру <code>test-node</code> и перейдите в неё с помощью следующей команды:</li> </ol> -<pre class="notranslate"><code>cd test-node</code></pre> +<pre><code>cd test-node</code></pre> <ol start="3"> <li>Используя любимый текстовый редактор, создайте файл <code>hello.js</code> и вставьте в него код:</li> </ol> -<pre class="brush: js notranslate">// Загружаем HTTP модуль +<pre class="brush: js">// Загружаем HTTP модуль const http = require("http"); const hostname = "127.0.0.1"; @@ -79,7 +79,7 @@ server.listen(port, hostname, () => { <li>Вернитесь в терминал и выполните следующую команду:</li> </ol> -<pre class="notranslate"><code>node hello.js</code></pre> +<pre><code>node hello.js</code></pre> <p>В итоге, перейдите по ссылке <code>http://localhost:8000</code> в вашем браузере; вы должны увидеть текст "<strong>Hello World</strong>" в верху слева на чистой странице.</p> @@ -144,7 +144,7 @@ server.listen(port, hostname, () => { <p><span class="tlid-translation translation" lang="ru"><span title="">Совет: Если у вас уже установлены Node и Express (или если вы устанавливаете их, как показано в следующей статье), вы можете сохранить этот код в файле с именем app.js и запустить его в командной строке, вызвав узел app.js.</span> <span title="">отражения</span><span title="">)</span><span title="">.</span></span></p> </div> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); <strong>app.get('/', function(req, res) { @@ -168,7 +168,7 @@ app.listen(3000, function() { <br> <span title="">Приведённый ниже код показывает, как мы импортируем модуль по имени, используя в качестве примера платформу Express.</span> <span title="">Сначала мы вызываем функцию require (), определяя имя модуля в виде строки («express») и вызывая возвращённый объект для создания приложения Express.</span> <span title="">Затем мы можем получить доступ к свойствам и функциям объекта приложения.</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); </pre> @@ -180,13 +180,13 @@ var app = express(); <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы сделать объекты доступными вне модуля, вам просто нужно назначить их объекту экспорта.</span> <span title="">Например, модуль square.js ниже представляет собой файл, который экспортирует методы area () и perimeter ():</span></span></p> -<pre class="brush: js notranslate">exports.area = function(width) { return width * width; }; +<pre class="brush: js">exports.area = function(width) { return width * width; }; exports.perimeter = function(width) { return 4 * width; }; </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Мы можем импортировать этот модуль, используя require (), а затем вызвать экспортированные методы, как показано:</span></span></p> -<pre class="brush: js notranslate">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension +<pre class="brush: js">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension console.log('The area of a square with a width of 4 is ' + square.area(4));</pre> <div class="note"> @@ -195,7 +195,7 @@ console.log('The area of a square with a width of 4 is ' + square.area(4));</pre <p><span class="tlid-translation translation" lang="ru"><span title="">Если вы хотите экспортировать полный объект в одном назначении, а не создавать его по одному свойству за раз, назначьте его для module.exports, как показано ниже (вы также можете сделать это, чтобы сделать корень объекта экспорта конструктором или другой функцией)</span> <span title="">:</span></span></p> -<pre class="brush: js notranslate">module.exports = { +<pre class="brush: js">module.exports = { area: function(width) { return width * width; }, @@ -212,13 +212,13 @@ console.log('The area of a square with a width of 4 is ' + square.area(4));</pre <p><span class="tlid-translation translation" lang="ru"><span title="">Код JavaScript часто использует асинхронные, а не синхронные API для операций, выполнение которых может занять некоторое время.</span> <span title="">Синхронный API - это тот, в котором каждая операция должна завершиться до начала следующей операции.</span> <span title="">Например, следующие функции журнала являются синхронными и выводят текст на консоль по порядку (первый, второй).</span></span></p> -<pre class="brush: js notranslate">console.log('First'); +<pre class="brush: js">console.log('First'); 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> -<pre class="brush: js notranslate">setTimeout(function() { +<pre class="brush: js">setTimeout(function() { console.log('First'); }, 3000); console.log('Second'); @@ -240,7 +240,7 @@ console.log('Second'); <p><span class="tlid-translation translation" lang="ru"><span title="">В нашем примере Hello World Express (см. Выше) мы определили функцию обработчика маршрута (колбэка) для HTTP-запросов GET к корню сайта ('/').</span></span></p> -<pre class="brush: js notranslate">app.<strong>get</strong>('/', function(req, res) { +<pre class="brush: js">app.<strong>get</strong>('/', function(req, res) { res.send('Hello World!'); }); </pre> @@ -255,7 +255,7 @@ console.log('Second'); <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) { +<pre class="brush: js">app.all('/secret', function(req, res, next) { console.log('Accessing the secret section ...'); next(); // pass control to the next handler });</pre> @@ -264,7 +264,7 @@ console.log('Second'); <br> <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 +<pre class="brush: js">// wiki.js - Wiki route module var express = require('express'); var router = express.Router(); @@ -288,7 +288,7 @@ module.exports = router; <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы использовать маршрутизатор в нашем главном файле приложения, нам потребуется () модуль route (wiki.js), а затем вызовите use () в приложении Express, чтобы добавить маршрутизатор в путь обработки промежуточного программного обеспечения.</span> <span title="">Эти два маршрута будут доступны из / wiki / и / wiki / about /.</span></span></p> -<pre class="brush: js notranslate">var wiki = require('./wiki.js'); +<pre class="brush: js">var wiki = require('./wiki.js'); // ... app.use('/wiki', wiki);</pre> @@ -306,12 +306,12 @@ app.use('/wiki', wiki);</pre> <br> <span title="">Для использования стороннего промежуточного программного обеспечения сначала необходимо установить его в своё приложение с помощью NPM.</span> <span title="">Например, чтобы установить промежуточное программное обеспечение средства регистрации HTTP-запросов morgan, вы должны сделать следующее:</span></span></p> -<pre class="brush: bash notranslate"><code>$ npm install morgan +<pre class="brush: bash"><code>$ npm install morgan </code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Затем вы можете вызвать use () для объекта приложения Express, чтобы добавить промежуточное программное обеспечение в стек:</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); <strong>var logger = require('morgan');</strong> var app = express(); <strong>app.use(logger('dev'));</strong> @@ -327,7 +327,7 @@ var app = express(); <br> <span title="">В приведённом ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба метода, а также с / без маршрута.</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); // An example middleware function @@ -357,12 +357,12 @@ app.listen(3000);</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать промежуточное программное обеспечение express.static для обслуживания статических файлов, включая ваши изображения, CSS и JavaScript (static () - единственная функция промежуточного программного обеспечения, которая фактически является частью Express).</span> <span title="">Например, вы должны использовать строку ниже для обслуживания изображений, файлов CSS и файлов JavaScript из каталога с именем public на том же уровне, где вы вызываете узел:</span></span></p> -<pre class="brush: js notranslate">app.use(express.static('public')); +<pre class="brush: js">app.use(express.static('public')); </pre> <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 +<pre><code>http://localhost:3000/images/dog.jpg http://localhost:3000/css/style.css http://localhost:3000/js/app.js http://localhost:3000/about.html @@ -370,18 +370,18 @@ http://localhost:3000/about.html <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете вызывать static () несколько раз для обслуживания нескольких каталогов.</span> <span title="">Если файл не может быть найден одной функцией промежуточного программного обеспечения, он будет просто передан последующему промежуточному программному обеспечению (порядок вызова промежуточного программного обеспечения основан на вашем порядке объявления).</span></span></p> -<pre class="brush: js notranslate">app.use(express.static('public')); +<pre class="brush: js">app.use(express.static('public')); app.use(express.static('media')); </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете создать виртуальный префикс для ваших статических URL-адресов, вместо добавления файлов к базовому URL-адресу.</span> <span title="">Например, здесь мы указываем путь монтирования, чтобы файлы загружались с префиксом "/ media":</span></span></p> -<pre class="brush: js notranslate">app.use('/media', express.static('public')); +<pre class="brush: js">app.use('/media', express.static('public')); </pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Теперь вы можете загружать файлы, находящиеся в публичном каталоге, из префикса / media path.</span></span></p> -<pre class="notranslate"><code>http://localhost:3000/media/images/dog.jpg +<pre><code>http://localhost:3000/media/images/dog.jpg http://localhost:3000/media/video/cat.mp4 http://localhost:3000/media/cry.mp3</code> </pre> @@ -392,7 +392,7 @@ http://localhost:3000/media/cry.mp3</code> <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) { +<pre class="brush: js">app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); }); @@ -418,12 +418,12 @@ http://localhost:3000/media/cry.mp3</code> <br> <span title="">Чтобы использовать их, вы должны сначала установить драйвер базы данных, используя NPM.</span> <span title="">Например, чтобы установить драйвер для популярной NoSQL MongoDB, вы должны использовать команду:</span></span></p> -<pre class="brush: bash notranslate"><code>$ npm install mongodb +<pre class="brush: bash"><code>$ npm install mongodb </code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Сама база данных может быть установлена локально или на облачном сервере.</span> <span title="">В вашем экспресс-коде вам требуется драйвер, подключиться к базе данных, а затем выполнить операции создания, чтения, обновления и удаления (CRUD).</span> <span title="">Пример ниже (из документации Express) показывает, как вы можете найти записи «млекопитающих», используя MongoDB.</span></span></p> -<pre class="brush: js notranslate">var MongoClient = require('mongodb').MongoClient; +<pre class="brush: js">var MongoClient = require('mongodb').MongoClient; MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) { if (err) throw err; @@ -445,7 +445,7 @@ MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) { <br> <span title="">В своём коде настроек приложения вы задаёте механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «views» и «engine», как показано ниже (вам также нужно будет установить пакет, содержащий вашу библиотеку шаблонов).</span> <span title="">!</span><span title="">)</span></span></p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var app = express(); // Set directory to contain the templates ('views') @@ -457,7 +457,7 @@ app.set('view engine', 'some_template_engine_name'); <p><span class="tlid-translation translation" lang="ru"><span title="">Внешний вид шаблона будет зависеть от того, какой движок вы используете.</span> <span title="">Предполагая, что у вас есть файл шаблона с именем «index. <Template_extension>», который содержит заполнители для переменных данных с именами «title» и «message», вы должны вызвать Response.render () в функции обработчика маршрута для создания и отправки ответа HTML.</span> <span title="">:</span></span></p> -<pre class="brush: js notranslate">app.get('/', function(req, res) { +<pre class="brush: js">app.get('/', function(req, res) { res.render('index', { title: 'About dogs', message: 'Dogs rock!' }); });</pre> 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 f1c993e54d..90ec704439 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 @@ -36,12 +36,12 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <p>Вы уже должны были установить <code>express-generator</code>, читая статью <a>установка среды разработки Node</a>. Напомним, что генератор установлен с помощью менеджера пакетов NPM, при выполнении команды:</p> -<pre class="brush: bash notranslate"><code>npm install express-generator -g</code> +<pre class="brush: bash"><code>npm install express-generator -g</code> </pre> <p><code>E</code><code>xpress-generator </code>имеет ряд параметров, которые можно увидеть, выполнив команду express --help (или express -h):</p> -<pre class="brush: bash notranslate">> express --help +<pre class="brush: bash">> express --help Usage: express [options] [dir] @@ -63,7 +63,7 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <p>Команда <code>express</code> создаст проект в <em>текущем</em> каталоге с использованием (устаревшего) движка представления <em>Jade</em> и обычного CSS. Если указать <font face="Courier New, monospace">express </font><font face="Courier New, monospace">name</font>, проект будет создан в подкаталоге name текущего каталога. </p> -<pre class="brush: bash notranslate"><code>express</code></pre> +<pre class="brush: bash"><code>express</code></pre> <p>Можно выбрать движок представления (шаблон), используя --<code>view; </code><code><font face="Times New Roman, serif">параметр</font></code><code> --</code><code>css </code> позволяет выбрать движок для создания CSS.</p> @@ -127,12 +127,12 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <p>Выберем место для нового проекта — каталог <font face="Courier New, monospace">express-locallibrary-tutorial - </font><font face="Times New Roman, serif">и выполним</font><font face="Courier New, monospace"> </font>команду:</p> -<pre class="brush: bash notranslate">express express-locallibrary-tutorial --view=pug +<pre class="brush: bash">express express-locallibrary-tutorial --view=pug </pre> <p>Будет создан каталог <font face="Courier New, monospace">express-locallibrary-tutorial </font><font face="Times New Roman, serif">и выведен список созданных внутри каталога проектных файлов</font>.</p> -<pre class="brush: bash notranslate"> create : express-locallibrary-tutorial +<pre class="brush: bash"> create : express-locallibrary-tutorial create : express-locallibrary-tutorial/package.json create : express-locallibrary-tutorial/app.js create : express-locallibrary-tutorial/public/images @@ -169,16 +169,16 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website <ol> <li>Прежде всего установим зависимости (команда <code>install</code> запросит все пакеты зависимостей, указанные в файле<strong> package.json</strong>). - <pre class="brush: bash notranslate">cd express-locallibrary-tutorial + <pre class="brush: bash">cd express-locallibrary-tutorial npm install</pre> </li> <li>Затем запустим приложение. <ul> <li>В Windows используйте команду: - <pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* & npm start</pre> + <pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* & npm start</pre> </li> <li>В Mac OS X или Linux используйте команду: - <pre class="brush: bash notranslate">DEBUG=express-locallibrary-tutorial:* npm start + <pre class="brush: bash">DEBUG=express-locallibrary-tutorial:* npm start </pre> </li> </ul> @@ -193,7 +193,7 @@ npm install</pre> <div class="note"> <p><strong>Примечание:</strong> Можно также запустить приложение командой <code>npm start</code>. Переменная DEBUG, указанная в примере, включает логирование в консоль для дальнейшей отладки. Так, при посещении страницы веб-приложения, вы увидите похожий вывод в консоль:</p> -<pre class="brush: bash notranslate">>SET DEBUG=express-locallibrary-tutorial:* & npm start +<pre class="brush: bash">>SET DEBUG=express-locallibrary-tutorial:* & npm start > express-locallibrary-tutorial@0.0.0 start D:\express-locallibrary-tutorial > node ./bin/www @@ -212,7 +212,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Одно из самых простых средств для этого --<br> <a href="https://github.com/remy/nodemon">nodemon</a>. Его обычно устанавливают глобально (так как это "инструмент"), но сейчас мы установим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):</p> -<pre class="brush: bash notranslate">npm install --save-dev nodemon</pre> +<pre class="brush: bash">npm install --save-dev nodemon</pre> @@ -220,20 +220,20 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> -<pre class="notranslate"><code><font color="#333333"><font face="Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace"><font size="3">npm install -g nodemon</font></font></font></code></pre> +<pre><code><font color="#333333"><font face="Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace"><font size="3">npm install -g nodemon</font></font></font></code></pre> <p>В файле <strong>package.json </strong>проекта появится новый раздел с этой зависимостью (на вашей машине номер версии nodemon может быть другим) :</p> -<pre class="brush: json notranslate"> "devDependencies": { +<pre class="brush: json"> "devDependencies": { "nodemon": "^1.11.0" } </pre> <p>Поскольку nodemon не установлен глобально, его нельзя запустить из командной строки (пока мы не добавим его в путь), но его можно вызвать из сценария NPM, так как NPM знает все об установленных пакетах. Раздел <code>scripts</code> в файле package.json исходно будет содержать одну строку, которая начинается с <code>"start"</code>. Обновите его, поставив запятую в конце строки, и добавьте строку <code>"devstart",</code> показанную ниже:</p> -<pre class="brush: json notranslate"> "scripts": { +<pre class="brush: json"> "scripts": { "start": "node ./bin/www"<strong>,</strong> <strong> "devstart": "nodemon ./bin/www"</strong> }, @@ -245,13 +245,13 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <li>В Windows:</li> </ul> -<pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong></pre> +<pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong></pre> <ul> <li>Для macOS или Linux:</li> </ul> -<pre class="notranslate"><code>DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong></code></pre> +<pre><code>DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong></code></pre> <div class="note"> <p><strong>Примечание:</strong> Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя <code>rs</code> в командной строке). Вам всё равно придётся обновить страницу в браузере .</p> @@ -267,7 +267,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <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 +<pre>/express-locallibrary-tutorial <strong>app.js</strong> /bin <strong>www</strong> @@ -295,7 +295,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Файл <strong>package.json </strong>указывает зависимости приложения и содержит другие данные:</p> -<pre class="brush: json notranslate">{ +<pre class="brush: json">{ "name": "express-locallibrary-tutorial", "version": "0.0.0", "private": true, @@ -329,7 +329,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Раздел "scripts" определяет скрипт" start", выполняемый при запуске сервера командой <code>npm start</code>. Можно видеть, что самом деле выполняется команда node <strong>./bin/www</strong>. Кроме того, определяется script "<em>devstart</em>", который вызывается командой <code>npm run devstart</code>. Запускается тот же файл <strong>./bin/www</strong> ,но командой <em>nodemon</em> вместо <em>node</em>.</p> -<pre class="notranslate"><code>"scripts": { +<pre><code>"scripts": { "start": "node ./bin/www", "devstart": "nodemon ./bin/www" },</code></pre> @@ -338,7 +338,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <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 +<pre class="brush: js">#!/usr/bin/env node /** * Module dependencies. @@ -357,7 +357,7 @@ GET /favicon.ico 404 34.134 ms - 1335</pre> <p>Этот файл создаёт объект приложения <code>express </code>(с именем<code>app</code>, по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведённом ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:</p> -<pre class="brush: js notranslate"><code>var express = require('express'); +<pre class="brush: js"><code>var express = require('express'); var app = express(); ... </code>module.exports = app; @@ -367,7 +367,7 @@ var app = express(); <p>Рассмотрим детали файла app.js. Сначала при помощи require(...) выполняется импорт некоторых полезных библиотек node: <em>express,</em> s<em>erve-favicon</em>, <em>morgan</em>, <em>cookie-parse, body-parser </em>(они ранее были загружены для нашего приложения командой npm install), а также path из основной библиотеки node (применяется для разбора путей каталогов и файлов).</p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); @@ -377,7 +377,7 @@ var bodyParser = require('body-parser'); <p>Затем require запрашивает модули из каталога путей route. Эти модули и файлы содержат код для обработки конкретного набора соответствующих путей (URL маршрутов). Если мы расширим каркас приложения, например, чтобы получить список книг библиотеки, нам следует добавить новый файл для обработки пути, связанного с книгами.</p> -<pre class="brush: js notranslate">var index = require('./routes/index'); +<pre class="brush: js">var index = require('./routes/index'); var users = require('./routes/users'); </pre> @@ -387,7 +387,7 @@ var users = require('./routes/users'); <p>Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаём значение 'view', указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаём значение движка 'view engine', указывая на библиотеку шаблона (у нас — "pug").</p> -<pre class="brush: js notranslate">var app = express(); +<pre class="brush: js">var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); @@ -396,7 +396,7 @@ app.set('view engine', 'pug'); <p>Следующие строки вызывают app.use(...), чтобы добавить промежуточные (middleware) библиотеки в цепочку обработки запросов. Кроме сторонних библиотек, импортированных ранее, используем библиотеку Express.static, что позволит обрабатывать статические файлы из папки <strong>/public </strong>корня проекта.</p> -<pre class="brush: js notranslate">// uncomment after placing your favicon in /public +<pre class="brush: js">// uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); @@ -407,7 +407,7 @@ app.use(cookieParser()); <p>Теперь, когда промежуточные библиотеки настроены, мы добавляем (импортированный ранее) код обработки путей в цепочку обработки запросов. Импортированный код будет задавать отдельные пути для разных частей сайта:</p> -<pre class="brush: js notranslate">app.use('/', index); +<pre class="brush: js">app.use('/', index); app.use('/users', users); </pre> @@ -417,7 +417,7 @@ app.use('/users', users); <p>Последняя в файле промежуточная библиотека добавляет методы обработки ошибок и ответов 404 от HTTP.</p> -<pre class="brush: js notranslate">// catch 404 and forward to error handler +<pre class="brush: js">// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; @@ -438,13 +438,13 @@ app.use(function(err, req, res, next) { <p>Объект app приложения Express теперь полностью настроен. Остался последний шаг - добавить его к экспортируемым элементам модуля (это позволит импортировать его в файле <strong>/bin/www</strong>).</p> -<pre class="brush: js notranslate">module.exports = app;</pre> +<pre class="brush: js">module.exports = app;</pre> <h3 id="Пути_Routes">Пути (Routes)</h3> <p>Файл путей /routes/users.js приведён ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задаётся путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.</p> -<pre class="brush: js notranslate">var express = require('express'); +<pre class="brush: js">var express = require('express'); var router = express.Router(); /* GET users listing. */ @@ -467,7 +467,7 @@ module.exports = router; <p>Файлы преставлений (шаблонов) хранятся в каталоге <strong><font color="#333333"><font face="Arial, x-locale-body, sans-serif"><font size="3">/views </font></font></font></strong><font color="#333333"><font face="Times New Roman, serif"><font size="3">(это указано в </font></font><font face="Courier New, monospace"><font size="3">app.js</font></font><font face="Times New Roman, serif"><font size="3">) и имеют расширение</font></font></font><strong><font color="#333333"><font face="Times New Roman, serif"><font size="3"> </font></font></font></strong><strong>.pug</strong>. Метод <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> выполняет указанный шаблон, передавая объекту значение именованной переменной, и затем посылает результат как ответ. В коде из <strong>/routes/index.js</strong> (приводится ниже) можно увидеть, что роут отвечает, используя шаблон "index" с переданным значением переменной "title" из шаблона.</p> -<pre class="brush: js notranslate">/* GET home page. */ +<pre class="brush: js">/* GET home page. */ router.get('/', function(req, res) { res.render('index', { title: 'Express' }); }); @@ -475,7 +475,7 @@ router.get('/', function(req, res) { <p>Шаблон для пути '/' приведён ниже (файл <strong>index.pug</strong>). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением 'Express' помещена в определённое место шаблона.</p> -<pre class="notranslate">extends layout +<pre>extends layout block content h1= title diff --git a/files/ru/learn/server-side/first_steps/client-server_overview/index.html b/files/ru/learn/server-side/first_steps/client-server_overview/index.html index 38168b8a5d..5521c93ef0 100644 --- a/files/ru/learn/server-side/first_steps/client-server_overview/index.html +++ b/files/ru/learn/server-side/first_steps/client-server_overview/index.html @@ -82,7 +82,7 @@ translation_of: Learn/Server-side/First_steps/Client-Server_overview <p>Каждая строка запроса содержит информацию о запросе. Первая часть называется <strong>заголовок</strong> и содержит важную информацию о запросе, точно так же, как <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 head</a> содержит важную информацию о HTML-документе (но не содержимое документа, которое расположено внутри тэга "body"):</p> -<pre class="notranslate">GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1 +<pre>GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1 Host: developer.mozilla.org Connection: keep-alive Pragma: no-cache @@ -132,7 +132,7 @@ Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSC <p>В конце сообщения мы видим содержимое <strong>body, </strong>содержащее HTML-код возвращаемого ответа.</p> -<pre class="brush: html notranslate">HTTP/1.1 200 OK +<pre class="brush: html">HTTP/1.1 200 OK Server: Apache X-Backend-Server: developer1.webapp.scl3.mozilla.com Vary: Accept,Cookie, Accept-Encoding @@ -166,7 +166,7 @@ Content-Length: 41823 <p>В приведённом ниже тексте показан HTTP-запрос, сделанный когда пользователь загружает новые данные профиля на этом сайте. Формат запроса почти такой же, как пример запроса <code>GET</code>, показанный ранее, хотя первая строка идентифицирует этот запрос как <code>POST</code>.</p> -<pre class="brush: html notranslate">POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1 +<pre class="brush: html">POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1 Host: developer.mozilla.org Connection: keep-alive Content-Length: 432 @@ -190,7 +190,7 @@ csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwil <p>Ответ от запроса показан ниже. Код состояния «<code>302 Found</code>» сообщает браузеру, что сообщение обработано, и что необходим второй HTTP-запрос для загрузки страницы, указанной в поле <code>Location</code>. В остальном информация аналогична информации для ответа на запрос <code>GET</code> .</p> -<pre class="brush: html notranslate">HTTP/1.1 302 FOUND +<pre class="brush: html">HTTP/1.1 302 FOUND Server: Apache X-Backend-Server: developer3.webapp.scl3.mozilla.com Vary: Cookie @@ -277,7 +277,7 @@ Content-Length: 0 <p>Для примера рассмотрим следующий код Django (Python), который связывает два URL-шаблона с двумя функциями просмотра. Первый шаблон проверяет, что HTTP-запрос с URL-адресом ресурса <code>/best</code> будет передан функции с именем <code>index()</code> в модуле <code>views</code>. Запрос, который имеет шаблон «<code>/best/junior</code>», вместо этого будет передан функции просмотра <code>junior()</code>.</p> -<pre class="brush: python notranslate"># file: best/urls.py +<pre class="brush: python"># file: best/urls.py # from django.conf.urls import url @@ -299,7 +299,7 @@ urlpatterns = [ <p>В приведённом ниже примере представлен список всех команд, у которых есть точный (с учётом регистра) <code>team_type</code> «junior» («младший») — обратите внимание на формат: имя поля (<code>team_type</code>), за которым следует двойной знак подчёркивания, а затем тип соответствия для использования (в этом случае <code>exact</code> («точное»)). Существует много других типов соответствия, и мы можем объединить их. Мы также можем контролировать порядок и количество возвращаемых результатов.</p> -<pre class="brush: python notranslate">#best/views.py +<pre class="brush: python">#best/views.py from django.shortcuts import render 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 54d00a7baf..ec0f7368c9 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 @@ -47,7 +47,7 @@ translation_of: Learn/Server-side/First_steps/Web_frameworks <p>Пример ниже показывает, как это работает в веб-фреймворке Django (Python). Каждая функция «view» (обработчик запроса) получает объект <code>HttpRequest</code>, содержащий информацию о запросе, и должна вернуть объект <code>HttpResponse</code> с форматированным выводом (в этом случае строка).</p> -<pre class="brush: python notranslate"># Django view function +<pre class="brush: python"># Django view function from django.http import HttpResponse def index(request): @@ -63,13 +63,13 @@ def index(request): <p>Различные фреймворки используют различные механизмы для сопоставления. Например, веб-фреймворк Flask (Python) добавляет маршруты для просмотра функций используя декораторы.</p> -<pre class="brush: python notranslate">@app.route("/") +<pre class="brush: python">@app.route("/") def hello(): return "Hello World!"</pre> <p>Django ожидает, что разработчики определят список сопоставлений URL-адресов между шаблоном URL-адреса и функцией просмотра.</p> -<pre class="brush: python notranslate">urlpatterns = [ +<pre class="brush: python">urlpatterns = [ url(r'^$', views.index), # example: /best/myteamname/5/ url(r'^best/(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best), @@ -97,7 +97,7 @@ def hello(): <br> Первый фрагмент кода ниже показывает очень простую модель Django для объекта</span> <code>Team</code><span class="tlid-translation translation" lang="ru">. Это сохраняет название команды и уровень команды как символьные поля и определяет максимальное количество символов для каждой записи.</span> <code>team_level</code><span class="tlid-translation translation" lang="ru"> </span>—<span class="tlid-translation translation" lang="ru"> это поле выбора, поэтому здесь мы связываем варианты значений на выбор с сохраняемыми данными, а также значение по умолчанию.</span></p> -<pre class="brush: python notranslate">#best/models.py +<pre class="brush: python">#best/models.py from django.db import models @@ -117,7 +117,7 @@ class Team(models.Model): <br> <span title="">Второй фрагмент кода показывает функцию представления (обработчик ресурсов) для отображения всех наших команд U09.</span> <span title="">В этом случае мы указываем, что мы хотим фильтровать для всех записей, где поле</span></span> <code>team_level</code> <span class="tlid-translation translation" lang="ru"><span title="">имеет в точности текст «U09» (обратите внимание ниже, как этот критерий передаётся функции</span></span> <code>filter()</code> <span class="tlid-translation translation" lang="ru"><span title="">в качестве аргумента с именем поля и типом соответствия, отделённым двойным</span> <span title="">подчёркиванием: <strong>team_level__exact</strong>).</span></span></p> -<pre class="brush: python notranslate">#best/views.py +<pre class="brush: python">#best/views.py from django.shortcuts import render from .models import Team @@ -145,7 +145,7 @@ def youngest(request): <p><span class="tlid-translation translation" lang="ru"><span title="">Фрагмент кода ниже показывает, как это работает.</span> <span title="">Продолжая пример «самой молодой команды» из предыдущего раздела, HTML-шаблон передаёт представлению переменную списка</span></span> <code>youngest_teams</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Внутри скелета HTML у нас есть выражение, которое сначала проверяет, существует ли переменная <code>youngest_teams</code>, а затем повторяет её в цикле <code>for</code>.</span> <span title="">На каждой итерации шаблон отображает значение <code>team_name</code> команды в элементе списка.</span></span></p> -<pre class="brush: html notranslate">#best/templates/best/index.html +<pre class="brush: html">#best/templates/best/index.html <!DOCTYPE html> <html lang="en"> 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 1f976dd741..912fa2c0d5 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 @@ -73,11 +73,11 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность <br> <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> +<pre class="brush: sql">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Если пользователь указывает реальное имя, оператор будет работать так, как задумано.</span> <span title="">Однако злонамеренный пользователь может полностью изменить поведение этого оператора SQL на новый оператор в следующем примере, просто указав текст полужирным шрифтом для userName.</span></span></p> -<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't</strong>'; +<pre class="brush: sql">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> @@ -90,7 +90,7 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность <p>В следующей инструкции мы экранируем символ '. Теперь SQL будет интерпретировать имя как всю строку, выделенную жирным шрифтом (это действительно очень странное имя, но безопасное).</p> -<pre class="brush: sql notranslate">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>; +<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>; </pre> 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 e40dfd08dd..df7473673e 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 @@ -53,13 +53,13 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of <a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a> syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:</p> -<pre class="brush: js notranslate">const heading = <h1>Mozilla Developer Network</h1>;</pre> +<pre class="brush: js">const heading = <h1>Mozilla Developer Network</h1>;</pre> <p>This heading constant is known as a <strong>JSX expression</strong>. React can use it to render that <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> tag in our app.</p> <p>Suppose we wanted to wrap our heading in a <code><a href="/en-US/docs/Web/HTML/Element/header"><header></a></code> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:</p> -<pre class="brush: js notranslate">const header = ( +<pre class="brush: js">const header = ( <header> <h1>Mozilla Developer Network</h1> </header> @@ -68,7 +68,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <div class="blockIndicator note"> <p><strong>Note</strong>: The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:</p> -<pre class="brush: js notranslate">const header = <header> +<pre class="brush: js">const header = <header> <h1>Mozilla Developer Network</h1> </header></pre> @@ -77,7 +77,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>Of course, your browser can't read JSX without help. When compiled (using a tool like <a href="https://babeljs.io/">Babel</a> or <a href="https://parceljs.org/">Parcel</a>), our header expression would look like this:</p> -<pre class="brush: js notranslate">const header = React.createElement("header", null, +<pre class="brush: js">const header = React.createElement("header", null, React.createElement("h1", null, "Mozilla Developer Network") );</pre> @@ -115,7 +115,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>create-react-app takes one argument: the name you'd like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you <code>cd</code> to the place you'd like your app to live on your hard drive, then run the following in your terminal:</p> -<pre class="brush: bash notranslate">npx create-react-app moz-todo-react</pre> +<pre class="brush: bash">npx create-react-app moz-todo-react</pre> <p>This creates a <code>moz-todo-react</code> directory, and does several things inside it:</p> @@ -129,7 +129,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <div class="blockIndicator note"> <p><strong>Note</strong>: if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag <code>--use-npm</code> when you run create-react-app:</p> -<pre class="brush: bash notranslate">npx create-react-app moz-todo-react --use-npm</pre> +<pre class="brush: bash">npx create-react-app moz-todo-react --use-npm</pre> </div> <p>create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.</p> @@ -142,7 +142,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:</p> -<pre class="notranslate">moz-todo-react +<pre>moz-todo-react ├── README.md ├── node_modules ├── package.json @@ -175,7 +175,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв <p>Let's open <code>src/App.js</code>, since our browser is prompting us to edit it. This file contains our first component, <code>App</code>, and a few other lines of code:</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import logo from './logo.svg'; import './App.css'; @@ -207,7 +207,7 @@ export default App;</pre> <p>The <code>import</code> statements at the top of the file allow <code>App.js</code> to use code that has been defined elsewhere. Let's look at these statements more closely.</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import logo from './logo.svg'; import './App.css';</pre> @@ -225,7 +225,7 @@ import './App.css';</pre> <p>Let's look at App more closely.</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { return ( <div className="App"> <header className="App-header"> @@ -254,7 +254,7 @@ import './App.css';</pre> <p>Your <code>App</code> component should now look like this:</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { return ( <div className="App"> <header className="App-header"> @@ -275,7 +275,7 @@ import './App.css';</pre> <p>Let’s open <code>src/index.js</code>, because that's where the <code>App</code> component is being used. This file is the entry point for our app, and it initially looks like this:</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; @@ -307,7 +307,7 @@ serviceWorker.unregister();</pre> <p>Your final <code>index.js</code> file should look like this:</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; @@ -322,13 +322,13 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Back in <code>App.js</code>, let’s focus on line 9:</p> -<pre class="brush: js notranslate"><img src={logo} className="App-logo" alt="logo" /></pre> +<pre class="brush: js"><img src={logo} className="App-logo" alt="logo" /></pre> <p>Here, the <code><img /></code> tag's <code>src</code> attribute value is in curly braces. This is how JSX recognizes variables. React will see <code>{logo}</code>, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.</p> <p>Let's try making a variable of our own. Before the return statement of <code>App</code>, add <code>const subject = 'React';</code>. Your <code>App</code> component should now look like this:</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { const subject = "React"; return ( <div className="App"> @@ -344,7 +344,7 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Change line 8 to use our <code>subject</code> variable instead of the word "world", like this:</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { const subject = "React"; return ( <div className="App"> @@ -368,11 +368,11 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Add a prop of <code>subject</code> to the <code><App/></code> component call, with a value of <code>Clarice</code>. When you are done, your code should look something like this:</p> -<pre class="brush: js notranslate">ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));</pre> +<pre class="brush: js">ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));</pre> <p>Back in <code>App.js</code>, let's revisit the App function itself, which reads like this (with the <code>return</code> statement shortened for brevity):</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { const subject = "React"; return ( // return statement @@ -381,7 +381,7 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Change the signature of the <code>App</code> function so that it accepts <code>props</code> as a parameter. Just like any other parameter, you can put <code>props</code> in a <code>console.log()</code> to read it out to your browser's console. Go ahead and do that after your <code>subject</code> constant but before the <code>return</code> statement, like so:</p> -<pre class="brush: js notranslate">function App(props) { +<pre class="brush: js">function App(props) { const subject = "React"; console.log(props); return ( @@ -391,13 +391,13 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Save your file and check your browser's JavaScript console. You should see something like this logged:</p> -<pre class="brush: js notranslate">Object { subject: "Clarice" }</pre> +<pre class="brush: js">Object { subject: "Clarice" }</pre> <p>The object property <code>subject</code> corresponds to the <code>subject</code> prop we added to our <code><App /></code> component call, and the string <code>Clarice</code> corresponds to its value. Component props in React are always collected into objects in this fashion.</p> <p>Now that <code>subject</code> is one of our props, let's utilize it in <code>App.js</code>. Change the <code>subject</code> constant so that, instead of defining it as the string <code>React</code>, you are reading the value of <code>props.subject</code>. You can also delete your <code>console.log()</code> if you want.</p> -<pre class="brush: js notranslate">function App(props) { +<pre class="brush: js">function App(props) { const subject = props.subject; return ( // return statement |