diff options
Diffstat (limited to 'files/ru')
16 files changed, 420 insertions, 361 deletions
diff --git a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html index 708c8a9d39..f572aa9758 100644 --- a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html @@ -5,9 +5,9 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> -<p>Many of the properties and values that we have encountered so far in our CSS learning have been tied to the physical dimensions of our screen. We create borders on the top, right, bottom, and left of a box, for example. These physical dimensions map very neatly to content that is viewed horizontally, and by default the web tends to support left-to-right languages (e.g. English or French) better than right-to-left languages (such as Arabic).</p> +<p>Многие свойства и значения, с которыми мы столкнулись до сих пор при изучении CSS, были привязаны к физическим размерам нашего экрана. Мы создаем границы, например, сверху, справа, снизу и слева от коробки.Эти физические размеры очень точно соответствуют контенту, который просматривается по горизонтали, и по умолчанию Интернет имеет тенденцию поддерживать языки с письмом слева направо (например, английский или французский) лучше, чем языки с письмом справа налево (например, арабский).</p> -<p>In recent years however, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them now.</p> +<p>Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) - эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними.</p> <table class="learn-box standard-table"> <tbody> @@ -16,29 +16,29 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> </tr> <tr> - <th scope="row">Objective:</th> - <td>To understand the importance of writing modes to modern CSS.</td> + <th scope="row">Цель:</th> + <td>Понять важность режимов письма для современного CSS.</td> </tr> </tbody> </table> -<h2 id="What_are_writing_modes">What are writing modes?</h2> +<h2 id="Какие_бывают_режимы_письма">Какие бывают режимы письма?</h2> -<p>A writing mode in CSS refers to whether the text is running horizontally or vertically. The {{cssxref("writing-mode")}} property lets us switch from one writing mode to another. You don't need to be working in a language which uses a vertical writing mode to want to do this — you could also change the writing mode of parts of your layout for creative purposes.</p> +<p>Режим письма в CSS определяет, идет ли текст по горизонтали или по вертикали. Свойство {{cssxref ("writing-mode")}} позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма - вы также можете изменить режим письма частей вашего макета для творческих целей.</p> -<p>In the example below we have a heading displayed using <code>writing-mode: vertical-rl</code>. The text now runs vertically. Vertical text is common in graphic design, and can be a way to add a more interesting look and feel to your web design.</p> +<p>В приведенном ниже примере заголовок отображается с использованием <code>writing-mode: vertical-rl</code>. Теперь текст идет вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.</p> <p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> -<p>The three possible values for the <code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> property are:</p> +<p>Три возможных значения свойства <code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code>:</p> <ul> - <li><code>horizontal-tb</code>: Top-to-bottom block flow direction. Sentences run horizontally.</li> - <li><code>vertical-rl</code>: Right-to-left block flow direction. Sentences run vertically.</li> - <li><code>vertical-lr</code>: Left-to-right block flow direction. Sentences run vertically.</li> + <li><code>horizontal-tb</code>: Направление потока блока сверху вниз. Предложения идут горизонтально.</li> + <li><code>vertical-rl</code>: Направление потока блоков справа налево. Предложения идут вертикально.</li> + <li><code>vertical-lr</code>: Направление потока блока слева направо. Предложения идут вертикально.</li> </ul> -<p>So the <code>writing-mode</code> property is in reality setting the direction in which block-level elements are displayed on the page — either from top-to-bottom, right-to-left, or left-to-right. This then dictates the direction text flows in sentences.</p> +<p>Таким образом, свойство <code>writing-mode</code> на самом деле устанавливает направление, в котором элементы уровня блока отображаются на странице - сверху вниз, справа налево или слева направо. Это затем определяет направление движения текста в предложениях.</p> <h2 id="Writing_modes_and_block_and_inline_layout">Writing modes and block and inline layout</h2> 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 f0a09df9f5..74a40b9a33 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 @@ -71,7 +71,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите <code>flex</code>, и другие внутренние значения, которые могут иметь ваши элементы, например <code><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> -<p>Тем не менее, блочное и строчное расположение, это поведение web-элементов по умолчанию — как было сказано выше, это иногда называют <em>нормальным потоком (normal flow)</em>, потому что при отсутствии какой-либо другой инструкций коробки имеют блочное или строчное расположение.</p> +<p>Тем не менее, блочное и строчное расположение, это поведение web-элементов по умолчанию — как было сказано выше, это иногда называют <em>нормальным потоком (normal flow)</em>, потому что при отсутствии какой-либо другой инструкции коробки имеют блочное или строчное расположение.</p> <h2 id="Примеры_разных_типов_отображения">Примеры разных типов отображения</h2> @@ -145,7 +145,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> -<p>По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установивите для него свойство <code>box-sizing: border-box</code>. С помощь этого вы говорите браузеру о том, что граница элемента определяется любыми размерами которые вы устанавливаете.</p> +<p>По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство <code>box-sizing: border-box</code>. С помощью этого вы говорите браузеру о том, что граница элемента определяется любыми размерами которые вы устанавливаете.</p> <pre class="brush: css notranslate"><code>.box { box-sizing: border-box; @@ -223,7 +223,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <h3 id="Границы">Границы</h3> -<p>Граница распологается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям <code>width</code> и <code>height</code> бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения <code>width</code> и <code>height</code>.</p> +<p>Граница располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям <code>width</code> и <code>height</code> бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения <code>width</code> и <code>height</code>.</p> <p>Для слилизации границ существует большое количество различных свойств — имеется четыре границы, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/index.html b/files/ru/learn/html/multimedia_and_embedding/index.html index 6cf2856997..5926902c75 100644 --- a/files/ru/learn/html/multimedia_and_embedding/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/index.html @@ -5,14 +5,14 @@ translation_of: Learn/HTML/Multimedia_and_embedding --- <p>{{LearnSidebar}}</p> -<p>Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио и также других страниц целиком.</p> +<p>Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио, а также других страниц целиком.</p> <h2 id="Перед_стартом">Перед стартом</h2> -<p>Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введении HTML</a>. <span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>Если вы не прошли этот модуль (или что-нибудь подобное), сначала пройдите его, затем возвращайтесь!</span></p> +<p>Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введении в HTML</a>. Если вы не прошли этот модуль (или подобный ему), сначала пройдите его, затем возвращайтесь!</p> <div class="note"> -<p><strong>Внимание: </strong>Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из) в онлайн сервисах, например в <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Внимание: </strong>Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из них) в онлайн сервисах, например в <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Руководство">Руководство</h2> @@ -22,17 +22,19 @@ translation_of: Learn/HTML/Multimedia_and_embedding <dl> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML</a></dt> <dd> - <p>Можно рассматривать другие типы мультимедиа, но логично начать с простого элемента {{htmlelement("img")}}, используемого для встраивания простого изображения в веб-страницу. В этой статье мы увидим, как использовать его в целом, включая основы, подписывать ее используя {{htmlelement("figure")}} и как он взаимодействует с фоновым изображением CSS.</p> + <p>Можно рассматривать другие типы мультимедиа, но логично начать с простого элемента {{htmlelement("img")}}, используемого для встраивания простого изображения в веб-страницу. В этой статье мы увидим, как использовать его в целом, включая основы, подписывать его, используя {{htmlelement("figure")}}, и как он взаимодействует с фоновым изображением CSS.</p> </dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео и аудио контент</a></dt> - <dd><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>Далее мы увидим, как использовать </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>HTML</span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>5-элементы {{htmlelement("video")}} и {{htmlelement("audio")}} для встраивания видео и аудио в наши страницы, включая основы, обеспечение доступа к файлам разного формата для различных браузеров, добавление надписей и субтитров, и как добавлять откаты для старых браузеров.</span></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От <object> до <iframe> — другие технологии встраивания</a></dt> - <dd><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>PDF</span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>, </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>SVG</span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>и даже </span><span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>Flash</span><span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> – устаревающая технология, но все еще часто встречаемая.</span></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Добавление векторной графики в Веб</a></dt> - <dd>Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, они не деформируются/пикселизируются при растяжении – они могут остаться гладкими при растягивании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd> + <dd> + <p>Далее мы рассмотрим, как использовать элементы HTML5 {{htmlelement ("video")}} и {{htmlelement ("audio")}} для встраивания видео и аудио на наши страницы, включая основы, обеспечивая доступ к различным форматам файлов для разных браузеров, добавление подписей и субтитров, а также как добавить резервные копии для старых браузеров.</p> + </dd> + <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От <object> к <iframe> — другие технологии встраивания</a></dt> + <dd>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все еще часто встречаемая.</dd> + <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Добавление_r_graphics_to_the_Web">Добавление векторной графики в Веб</a></dt> + <dd>Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a></dt> <dd> - <p>В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными функциями, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущая тема CSS, которую вы должны изучить.</p> + <p>В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными характеристиками, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущей темы CSS, которую вы должны изучить.</p> </dd> </dl> @@ -41,7 +43,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding <p>Следующая аттестация проверит ваше понимание основ HTML, изложенных в перечисленных выше статьях.</p> <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Страница приветствия Mozilla</a></dt> + <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/заставка_Mozilla">Страница приветствия Mozilla</a></dt> <dd>В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвященную Mozilla!</dd> </dl> @@ -52,6 +54,6 @@ translation_of: Learn/HTML/Multimedia_and_embedding <dd>Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на нее.) Эта технология иногда может быть полезной.</dd> <dt><a href="https://learning.mozilla.org/en-US/activities/web-lit-basics-two/">Основы Веб-грамотности 2</a></dt> <dd> - <p>Превосходный курс от фонда Mozilla , который освещает и проверяет некоторые навыки, полученные в модуле<em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы верстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p> + <p>Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле <em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы верстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p> </dd> </dl> diff --git a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html index 930362d696..76b192dd4e 100644 --- a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html @@ -13,51 +13,53 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <tbody> <tr> <th scope="row">Необходимы:</th> - <td>Базовые знания компьютера, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">установленное базовое ПО</a>, базовые знания по <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, (как описано в статье <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.)</td> + <td>Базовые знания компьютера, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">установленное базовое ПО</a>, базовые знания по <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, знания основ HTML (как описано в статье <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Начало_работы">Начало работы с HTML</a>).</td> </tr> <tr> <th scope="row">Цель:</th> - <td>Научиться вставлять простые изображения в HTML, приписывать их комментариями, и какое отношение HTML изображения имеют к фоновым изображениям CSS.</td> + <td>Узнать, как встраивать изображения в HTML, как добавлять к ним описания и как изображения HTML связаны с фоновыми изображениями CSS.</td> </tr> </tbody> </table> <h2 id="Как_разместить_картинку_на_странице">Как разместить картинку на странице?</h2> -<p>Для того, что бы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду что, не содержит текста и закрывающего тега) который требует минимум один атрибут для использования — <code>src</code> (произносится <em>эс-ар-си</em>, иногда говорят его полное название, <em>со-о-рс</em>). Атрибут <code>src</code> содержит путь к изображению которое вы хотите встроить в страницу, который может быть относительным или абсолютным URL, таким же образом, как для элемента {{htmlelement("a")}} значение атрибута <code>href</code>.</p> +<p>Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду что, не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — <code>src</code> (произносится <em>эс-ар-си</em>, иногда говорят его полное название, <em>source</em>). Атрибут <code>src</code> содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута <code>href</code> для элемента {{htmlelement("a")}}.</p> <div class="note"> -<p><strong>Примечание</strong>: Перед тем как продолжить, вы можете прочитать <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">Быстрый пример про URL - адресс и путь</a> чтобы обновить свою память про относительный и абсолютный URL - адресс.</p> +<p><strong>Примечание</strong>: Перед тем как продолжить, вам стоит вспомнить про <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Абсолютные_и_относительные_URL-адреса">типы адресов URL</a>, чтобы обновить в памяти про относительные и абсолютные адресса.</p> </div> <p>Например, если ваше изображение называется <code>dinosaur.jpg</code>, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:</p> <pre class="brush: html notranslate"><img src="dinosaur.jpg"></pre> -<p>Если изображение было в поддиректории <code>images</code> , находящаяся внутри директории, в которой HTML страница (что рекомендует Google для индексации SEO целей), тогда вы можете встроить ее как:</p> +<p>Если изображение было в поддиректории <code>images</code> , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:</p> <pre class="brush: html notranslate"><img src="images/dinosaur.jpg"></pre> <p>И так далее.</p> <div class="note"> -<p><strong>Примечание</strong>: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому, давайте вашим изображениям смысловые имена; <code>dinosaur.jpg</code> лучше, чем <code>img835.png</code>.</p> +<p><strong>Примечание</strong>: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: <code>dinosaur.jpg</code> лучше, чем <code>img835.png</code>.</p> </div> <p>Вы можете встроить изображение используя абсолютный URL, например:</p> <pre class="brush: html notranslate"><img src="https://www.example.com/images/dinosaur.jpg"></pre> -<p>Но это бесмыссленно, так как он просто заставляет браузер делать больше работы, используя IP-адрес от DNS-сервера все снова, и т.д. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p> +<p>Но это бесмыссленно, так как он просто заставляет браузер делать больше работы, запрашивая IP-адрес от DNS-сервера все снова, и т.д. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p> <div class="warning"> -<p><strong>Внимание:</strong> Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:<br> - <br> - 1) вы не будете владеть изображением<br> - 2) у вас не будет письменного разрешения владельца изображения, или<br> - 3) пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.<br> - <br> - Нарушение авторских прав является не законным. Кроме того, никогда не указывайте в своем атрибуте <code>src</code> ссылку на изображение, размещенную на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража чей-то пропускной способности не законно. Кроме того, это замедляет вашу страницу, оставляя вас без контроля над изображением; было ли оно удалено или случайно перемещено.</p> +<p><strong>Внимание:</strong> Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:</p> + +<ul> + <li>вы не будете владеть изображением</li> + <li>у вас не будет письменного разрешения владельца изображения, или</li> + <li>пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.</li> +</ul> + +<p>Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своем атрибуте <code>src</code> ссылку на изображение, размещенную на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу, не позволяя вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.</p> </div> <p>Наш код выше даст нам следующий результат:</p> @@ -65,22 +67,22 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> <div class="note"> -<p><strong>Примечание</strong>: Элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются заменяемые элементы. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. </p> +<p><strong>Примечание</strong>: Элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в <a href="/ru/docs/Web/CSS/Замещаемый_элемент">Замещаемых элементах</a>.</p> </div> <div class="note"> -<p><strong>Примечание</strong>: Вы можете найти готовый пример здесь <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">source code</a> too.)</p> +<p><strong>Примечание</strong>: Вы можете найти готовый пример здесь <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a> (смотрите так же <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">исходный код</a>)</p> </div> <h3 id="Альтернативный_текст">Альтернативный текст</h3> -<p>Следующий атрибут, который мы рассмотрим, — <code>alt</code>. Предполагается, что значением атрибута является текстовое описание изображения; данный атрибут используется в ситуациях, когда изображение скрыто или его не удается отобразить. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесем изменения в код из предыдущего примера:</p> +<p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесем изменения в код из предыдущего примера:</p> -<p><img src="images/dinosaur.jpg"<br> - alt="The head and torso of a dinosaur skeleton;<br> - it has a large head with long sharp teeth"></p> +<pre class="notranslate"><img src="images/dinosaur.jpg" + alt="Голова и туловище скелета динозавра; + у него большая голова с длинными острыми зубами"></pre> -<p class="syntaxbox">Самый простой способ увидеть атрибут <code>alt</code> в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как <code>dinosooooor.jpg</code>, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута <code>alt</code>:</p> +<p>Самый простой способ увидеть атрибут <code>alt</code> в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как <code>dinosooooor.jpg</code>, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута <code>alt</code>:</p> <p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;">Итак, в каких случаях текст из атрибута <code>alt</code> может быть нам полезен? Приведем несколько примеров:</p> @@ -96,20 +98,20 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <ul> <li><strong>Декорация. </strong>Если изображение служит просто украшением и не является частью содержимого, добавьте пустой <code>alt=""</code>. Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя. На самом деле, декоративные изображения не принадлежат вашему HTML. {{anch("CSS background images")}} должны быть использованы для вставки декораций, но, если это неизбежно, то лучшее решение - использовать <code>alt=""</code>.</li> - <li><strong>Контент.</strong> Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий<em> </em><code>alt</code>. Или даже лучше, в <em>главном</em> тексте, который все увидят. Не используйте <code>alt</code> , если можете обойтись без него. Насколько неудобно было бы для пользователя если бы <em>параграфы</em> были написаны дважды в <em>главном контенте</em>? Если изображение адекватно описано в основном тексте, можете просто использовать <code>alt=""</code>.</li> - <li><strong>Ссылка.</strong> Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны предоставить <a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">accessible link text</a>. В таком случае, вы сможете использовать элемент <code><a></code> или атрибут <code>alt</code> . Старайтесь выбрать лучший вариант.</li> - <li><strong>Текст.</strong> Не пишите текст в изображениях. Если вашему заголовку понадобиться тень, то лучше используйте для этого<a href="/en-US/docs/Web/CSS/text-shadow"> CSS</a> вместо добавления текста в изображение. Однако, если <em>действительно этого не избежать</em>, то вам следует дополнить текст в атрибуте <code>alt</code>.</li> + <li><strong>Контент.</strong> Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий<em> </em><code>alt</code>. Или даже лучше, в <em>главном</em> тексте, который все увидят. Не используйте <code>alt</code> , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы <em>параграфы</em> были написаны дважды в <em>главном контенте</em>? Если изображение адекватно описано в основном тексте, можете просто использовать <code>alt=""</code>.</li> + <li><strong>Ссылка.</strong> Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Используйте_четкие_формулировки_описания_ссылок">использовать четкие формулировки описания ссылок</a>. В таком случае, вы сможете использовать элемент <code><a></code> или атрибут <code>alt</code> . Старайтесь выбрать лучший вариант.</li> + <li><strong>Текст.</strong> Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого <a href="/ru/docs/Web/CSS/text-shadow">CSS</a> вместо добавления текста в изображение. Однако, если <em>действительно этого не избежать</em>, то вам следует дополнить текст в атрибуте <code>alt</code>.</li> </ul> -<p>По существу, главная идея здесь это предоставить нечто полезное, для случая когда изображения не видны. Это гарантирует что все пользователи не упустят ничего из содержимого страницы. Попробуйте отключить изображения в своём браузере и посмотрите как всё выглядит. Вы вскоре выясните насколько полезным является альтернативный текст если изображения не видны.</p> +<p>По существу, главная идея здесь это предоставить нечто полезное, для случая когда изображения не видны. Это гарантирует что все пользователи не упустят ничего из содержимого страницы. Попробуйте отключить изображения в своём браузере и посмотрите как всё выглядит. Вы вскоре выясните насколько полезным является альтернативный текст, если изображения не видны.</p> <div class="note"> -<p><strong>Примечание</strong>: Более подробную информацию, смотрите здесь <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text Alternatives</a>.</p> +<p><strong>Примечание</strong>: Более подробную информацию, смотрите здесь <a href="/ru/docs/Learn/Доступность/HTML#Альтернативный_текст">Альтернативный текст</a>.</p> </div> <h3 id="Ширина_и_высота">Ширина и высота</h3> -<p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения . Ширину и высоту вашего избражение можете найти различными способами. Например на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> что получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p> +<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" alt="The head and torso of a dinosaur skeleton; @@ -123,15 +125,15 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <p>Это хорошая практика, в результате страница загрузится быстрей и более гладко.</p> -<p>Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми, или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.</p> +<p>Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы сталкнётесь с изображениями, которые выглядят зернистыми, размытыми, или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.</p> <div class="note"> -<p><strong>Примечание</strong>: Если вам нужно задать размеры вашего изображения, взамен вы можете использовать <a href="/en-US/docs/Learn/CSS">CSS</a>.</p> +<p><strong>Примечание</strong>: Если вам нужно задать размеры вашего изображения, взамен вы можете использовать <a href="/ru/docs/Learn/CSS">CSS</a>.</p> </div> <h3 id="Заголовок_изображения">Заголовок изображения</h3> -<p>Как и для <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E">ссылок</a>, вы можете также добавить атрибут <code>title</code> для изображений, чтобы обеспечить дополнительную подтверждающую информацию если это необходимо. В нашем примере, мы можем это сделать так:</p> +<p>Как и для <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок">ссылок</a>, вы можете также добавить атрибут <code>title</code> для изображений, чтобы обеспечить дополнительную подтверждающую информацию если это необходимо. В нашем примере, мы можем это сделать так:</p> <pre class="brush: html notranslate"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; @@ -148,7 +150,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <h3 id="Активное_обучение_встраивание_изображения">Активное обучение: встраивание изображения</h3> -<p>Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:</p> +<p>Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:</p> <p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> @@ -335,20 +337,20 @@ window.addEventListener("load", drawOutput); <p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> -<h2 id="CSS_background-images">CSS background-images</h2> +<h2 id="Фоновые_изображения_CSS">Фоновые изображения CSS</h2> -<p>Также альтернативой является использование css изображений (или JavaScript, но это совсем другая история). CSS-свойство {{cssxref("background-image")}} , и другие <code>background-*</code> свойства, применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:</p> +<p>Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). CSS-свойство {{cssxref("background-image")}} , и другие <code>background-*</code> свойства, применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:</p> <pre class="brush: css notranslate">p { background-image: url("images/dinosaur.jpg"); }</pre> -<p>Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же париться с HTML изображениями? Согласено вышесказанному, фоновые изображения CSS используются только в качестве украшения. Если вы хотите просто добавить что-нибудь красивое на вашу страницу, всё круто. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, и тп. Это звёздное время для HTML!</p> +<p>Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Согласено вышесказанному, фоновые изображения CSS используются только в качестве украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, и тп. Это звёздное время для HTML!</p> <p>Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.</p> <div class="note"> -<p><strong>Замечание</strong>: Вы можете узнать больше о <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> в нашей теме о <a href="/en-US/docs/Learn/CSS">CSS</a>.</p> +<p><strong>Замечание</strong>: Вы можете узнать больше о <a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">фоновых изображениях CSS</a> в нашей теме о <a href="/en-US/docs/Learn/CSS">CSS</a>.</p> </div> <p>Вот и всё. Мы детально описали изображения и заголовки. В следующей статье мы перейдём на новый уровень, затронув тему встраивания видео и аудио в веб-страницу.</p> diff --git a/files/ru/learn/html/введение_в_html/structuring_a_page_of_content/index.html b/files/ru/learn/html/введение_в_html/structuring_a_page_of_content/index.html index 7ade9310c1..b5bb7fa235 100644 --- a/files/ru/learn/html/введение_в_html/structuring_a_page_of_content/index.html +++ b/files/ru/learn/html/введение_в_html/structuring_a_page_of_content/index.html @@ -68,7 +68,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content <h2 id="Советы_и_подсказки">Советы и подсказки</h2> <ul> - <li>Используйте <a href="https://validator.w3.org/">W3C HTML validator</a> для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальным, а не полностью необходимым).</li> + <li>Используйте <a href="https://validator.w3.org/">W3C HTML validator</a> для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальной, а не полностью необходимой).</li> <li>Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.</li> <li>Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелеными на отображаемой странице.</li> <li>Если вы застряли и не можете понять, какие элементы куда помещать, часто помогает вывести простую блок-схему макета страницы и сделать надписи на элементах, которые, по вашему мнению, должны обернуть каждый блок.</li> diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index b25ca4037e..340938e010 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -105,7 +105,7 @@ let blob = response.blob(); <p>Первый параметр — тип прослушиваемого события, второй параметр — функция обратного вызова, вызываемая при срабатывании события.</p> -<p>При передаче функциии обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно коллбэк функция <strong>не</strong> выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратногго вызова в нужный момент.</p> +<p>При передаче функциии обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно колбэк функция <strong>не</strong> выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратного вызова в нужный момент.</p> <p>Вы можете написать свою собственную функцию, содержащую функцию обратного вызова. Давайте взглянем на еще один пример, в котором происходит загрузка ресурсов через <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">посмотрите исходный код</a>):</p> @@ -143,7 +143,7 @@ gods.forEach(function (eachName, index){ console.log(index + '. ' + eachName); });</pre> -<p>В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для <code>forEach() </code> — это функцияобратного вызова, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.</p> +<p>В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для <code>forEach() </code> — это функция обратного вызова, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.</p> <h2 id="Промисы">Промисы</h2> diff --git a/files/ru/learn/javascript/asynchronous/таймауты_и_интервалы/index.html b/files/ru/learn/javascript/asynchronous/таймауты_и_интервалы/index.html index 00506c2a14..e3aa0c72b8 100644 --- a/files/ru/learn/javascript/asynchronous/таймауты_и_интервалы/index.html +++ b/files/ru/learn/javascript/asynchronous/таймауты_и_интервалы/index.html @@ -61,7 +61,7 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals <p>Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш обратный вызов будет выполнен через несколько секунд.</p> </div> -<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> +<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() { alert('Hello, Mr. Universe!'); @@ -151,7 +151,7 @@ clearInterval(myInterval);</pre> <p>Несколько подсказок для вас:</p> <ul> - <li>Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с ковычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.</li> + <li>Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с кавычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.</li> <li>Вероятно, вы захотите создать переменную, которая начинается с 0, а затем увеличивается на единицу каждую секунду с использованием постоянного цикла.</li> <li>Этот пример проще создать без использования объекта Date (), как мы это делали в нашей версии, но он будет менее точен - вы не можете гарантировать, что обратный вызов сработает ровно через 1000 мс. Более точным способом было бы запустить startTime = Date.now (), чтобы получить метку времени, когда пользователь нажал кнопку запуска, а затем выполнить Date.now () - startTime, чтобы получить количество миллисекунд после того, как была нажата кнопка запуска .</li> <li>Вам также нужно рассчитать количество часов, минут и секунд как отдельные значения, а затем отображать их вместе в строке после каждой итерации цикла. На втором счетчике вы можете отработать каждую из них.</li> @@ -168,7 +168,7 @@ clearInterval(myInterval);</pre> </ul> <div class="blockIndicator note"> -<p><strong>Note</strong>: Если вы застрали, вы можете <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">увидеть нашу версию</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">исходный код</a> ).</p> +<p><strong>Note</strong>: Если вы застряли, вы можете <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">увидеть нашу версию</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">исходный код</a> ).</p> </div> <h2 id="Что_нужно_помнить_о_setTimeout_и_setInterval">Что нужно помнить о <code>setTimeout ()</code> и <code>setInterval ()</code></h2> @@ -359,7 +359,7 @@ div { <p>Разместите {{htmlelement("script")}} элемент перед <code></body></code> .</p> </li> <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> + <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'); let rotateCount = 0; @@ -368,7 +368,7 @@ let rAF; </pre> </li> <li> - <p>Под предыдущим котом вставьте функцию <code>draw()</code> соторая будет использоваться для хранения нашешо кода анимации, который включает параметр <code>timestamp</code> :</p> + <p>Под предыдущим кодом вставьте функцию <code>draw()</code> соторая будет использоваться для хранения нашешо кода анимации, который включает параметр <code>timestamp</code> :</p> <pre class="brush: js notranslate">function draw(timestamp) { @@ -513,7 +513,7 @@ const result = document.querySelector('.result');</pre> }</pre> </li> <li> - <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера просторо счетчика:</p> + <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счетчика:</p> <pre class="brush: js notranslate">function draw(timestamp) { if(!startTime) { @@ -595,16 +595,16 @@ function start() { }; }</pre> - <p>Пройдите через это:</p> + <p>Выполните следующие инструкции:</p> <ol> - <li>Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужный процессы), и скройте контейнер счетчика.</li> + <li>Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.</li> <li>Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!" чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.</li> <li>Прикрепите к документу прослушиватель событий <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> . При нажатии любой кнопки запускается функция <code>keyHandler()</code>.</li> <li>Внутри <code>keyHandler()</code>, код включает обьект события в качестве параметра (представленного <code>e</code>) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для твета на определенные нажатия клавиш определенными действиями.</li> <li>Установите для переменной <code>isOver</code> значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клваиши.</li> <li>Регистрация <code>e.key</code> в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.</li> - <li>Когда <code>e.key</code> принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда <code>e.key</code> это "l", отобразить сообщение о том, что Player 2 выиграл. (<strong>Note:</strong> Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавишь, установите для <code>isOver</code> значение <code>true</code>.</li> + <li>Когда <code>e.key</code> принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда <code>e.key</code> это "l", отобразить сообщение о том, что Player 2 выиграл. (<strong>Note:</strong> Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для <code>isOver</code> значение <code>true</code>.</li> <li>Только еслиf <code>isOver</code> равно <code>true</code>, удалите прослушиватель событий <code>keydown</code> с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете <code>setTimeout()</code> для вызова <code>reset()</code> через 5 секунд — как обьяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.</li> </ol> </li> diff --git a/files/ru/learn/server-side/django/введение/index.html b/files/ru/learn/server-side/django/введение/index.html index 1eaffac0cf..4bff707908 100644 --- a/files/ru/learn/server-side/django/введение/index.html +++ b/files/ru/learn/server-side/django/введение/index.html @@ -3,6 +3,7 @@ title: Django введение slug: Learn/Server-side/Django/Введение tags: - Python + - django - Вступление - Джанго - Начинающим @@ -13,13 +14,13 @@ translation_of: Learn/Server-side/Django/Introduction <div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> -<p class="summary">В первой статье о Django мы отвечаем на вопрос «Что есть Django?» и даём обзор того, что делает его особенным. Мы опишем основные функции, в том числе некоторые из расширенных функций, которые у нас не будет времени подробно рассмотреть в этом модуле. Мы также покажем вам некоторые основные строительные блоки приложения Django (хотя на данный момент у вас еще не будет среды разработки для тестирования).</p> +<p class="summary">В первой статье о Django мы отвечаем на вопрос «Что такое Django?» и даём обзор того, что делает его особенным. Мы опишем основные функции, в том числе некоторые из расширенных функций, которые у нас не будет времени подробно рассмотреть в этом модуле. Мы также покажем вам некоторые основные строительные блоки приложения Django (хотя на данный момент у вас ещё не будет среды разработки для тестирования).</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">Требования:</th> - <td>Базовая компьютерная грамотность. Общее понимание <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">server-side website programming</a>, и в частности, механики <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">client-server interactions in websites</a>.</td> + <td>Базовая компьютерная грамотность. Общее понимание <a href="https://developer.mozilla.org/ru/docs/Learn/Server-side/First_steps">server-side website programming</a>, и в частности, механики <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">client-server interactions in websites</a>.</td> </tr> <tr> <th scope="row">Задача:</th> @@ -28,51 +29,49 @@ translation_of: Learn/Server-side/Django/Introduction </tbody> </table> -<h2 id="Что_есть_Django">Что есть Django?</h2> +<h2 id="Что_такое_Django">Что такое Django?</h2> -<p>Django - это высокоуровневый Python веб-фреймворк, который позволяет быстро создавать безопасные и поддерживаемые веб-сайты. Созданный опытными разработчиками, Django берет на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего веб-приложения без необходимости изобретать велосипед . Он бесплатный и с открытым исходным кодом, имеет активное процветающее сообщество, отличную документацию и множество вариантов как бесплатной, так и платной поддержки.</p> +<p>Django — это высокоуровневый Python веб-фреймворк, который позволяет быстро создавать безопасные и поддерживаемые веб-сайты. Созданный опытными разработчиками, Django берёт на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего веб-приложения без необходимости изобретать велосипед. Он бесплатный и с открытым исходным кодом, имеет растущее и активное сообщество, отличную документацию и множество вариантов как бесплатной, так и платной поддержки.</p> <p>Django помогает писать программное обеспечение, которое будет:</p> <dl> <dt>Полным</dt> - <dd>Django следует философии «Батарейки в комплекте» и предоставляет почти все, что разработчики могут захотеть сделать «из коробки». Поскольку все, что вам нужно, является частью единого «продукта», все это безупречно работает вместе, соответствует последовательным принципам проектирования, и имеет обширную и <a href="https://docs.djangoproject.com/en/3.0/">актуальную документацию</a>.</dd> + <dd>Django следует философии «Всё включено» и предоставляет почти всё, что разработчики могут захотеть сделать «из коробки». Поскольку всё, что вам нужно, является частью единого «продукта», всё это безупречно работает вместе, соответствует последовательным принципам проектирования и имеет обширную и <a href="https://docs.djangoproject.com/en/3.0/">актуальную документацию</a>.</dd> <dt>Разносторонним</dt> - <dd>Django может быть (и был) использован для создания практически любого типа веб-сайтов - от систем управления контентом и wiki до социальных сетей и новостных сайтов. Он может работать с любой клиентской средой и может доставлять контент практически в любом формате (включая HTML, RSS-каналы, JSON, XML и т.д.). Сайт, который вы сейчас читаете, создан с помощью Django!</dd> - <dd>Хотя оDjango предоставляет решения практически для любой функциональности, которая вам может понадобиться (например, для нескольких популярных баз данных, шаблонизаторов и т. д.), внутренне он также может быть расширен сторонними компонентами, если это необходимо.</dd> + <dd>Django может быть (и был) использован для создания практически любого типа веб-сайтов — от систем управления контентом и wiki до социальных сетей и новостных сайтов. Он может работать с любой клиентской средой и может доставлять контент практически в любом формате (включая HTML, RSS-каналы, JSON, XML и т. д.). Сайт, который вы сейчас читаете, создан с помощью Django!</dd> + <dd>Хотя Django предоставляет решения практически для любой функциональности, которая вам может понадобиться (например, для нескольких популярных баз данных, шаблонизаторов и т. д.), внутренне он также может быть расширен сторонними компонентами, если это необходимо.</dd> <dt>Безопасным</dt> - <dd>Django помогает разработчикам избежать многих распространенных ошибок безопасности, предоставляя фреймворк, разработанный чтобы «делать правильные вещи» для автоматической защиты сайта. Например, Django предоставляет безопасный способ управления учетными записями пользователей и паролями, избегая распространенных ошибок, таких как размещение информации о сеансе в файлы cookie, где она уязвима (вместо этого файлы cookie содержат только ключ, а фактические данные хранятся в базе данных) или непосредственное хранение паролей. вместо хэша пароля.<br> - <br> - Хэш пароля - это значение фиксированной длины, созданное путем обработки пароля через <em><a href="https://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%BF%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%85%D0%B5%D1%88-%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F">криптографическую хэш-функцию</a>. </em>Django может проверить правильность введенного пароля, пропустив его через хэш-функцию и сравнив вывод с сохраненным значением хэша. Благодаря «одностороннему» характеру функции, даже если сохраненное хэш-значение скомпрометировано, злоумышленнику будет сложно определить исходный пароль.<br> - <br> - Django, по умолчанию, обеспечивает защиту от многих уязвимостей, включая SQL-инъекцию, межсайтовый скриптинг, подделку межсайтовых запросов и кликджекинг (см. <a href="/ru/docs/Web/Security">Website security</a> для получения дополнительной информации об этих атаках).</dd> + <dd>Django помогает разработчикам избежать многих распространённых ошибок безопасности, предоставляя фреймворк, разработанный чтобы «делать правильные вещи» для автоматической защиты сайта. Например, Django предоставляет безопасный способ управления учётными записями пользователей и паролями, избегая распространённых ошибок, таких как размещение информации о сеансе в файлы cookie, где она уязвима (вместо этого файлы cookie содержат только ключ, а фактические данные хранятся в базе данных) или непосредственное хранение паролей вместо хэша пароля.</dd> + <dd><em>Хэш пароля </em>—<em> это значение фиксированной длины, созданное путём обработки пароля через <a href="https://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%BF%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%85%D0%B5%D1%88-%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F">криптографическую хэш-функцию</a>. Django может проверить правильность введённого пароля, пропустив его через хэш-функцию и сравнив вывод с сохранённым значением хэша. Благодаря «одностороннему» характеру функции, даже если сохранённое хэш-значение скомпрометировано, злоумышленнику будет сложно определить исходный пароль.</em></dd> + <dd>Django, по умолчанию, обеспечивает защиту от многих уязвимостей, включая SQL-инъекцию, межсайтовый скриптинг, подделку межсайтовых запросов и кликджекинг (см. <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/Server-side/First_steps/%D0%92%D0%B5%D0%B1_%D0%91%D0%B5%D0%B7%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D1%8C">Website security</a> для получения дополнительной информации об этих атаках).</dd> <dt>Масштабируемым</dt> - <dd>Django использует компонентную “<a href="https://en.wikipedia.org/wiki/Shared_nothing_architecture">shared-nothing</a>” архитектуру (каждая её часть независима от других и, следовательно, может быть заменена, либо изменена). Четкое разделение между частями означает, что Django может масштабироваться при увеличении трафика путем добавления оборудования на любом уровне: серверы кэширования, серверы баз данных или серверы приложений. Одни из самых загруженных сайтов успешно масштабировали Django (например, Instagram и Disqus).</dd> + <dd>Django использует компонентную “<a href="https://en.wikipedia.org/wiki/Shared_nothing_architecture">shared-nothing</a>” архитектуру (каждая её часть независима от других и, следовательно, может быть заменена или изменена, если это необходимо). Чёткое разделение частей означает, что Django может масштабироваться при увеличении трафика, путём добавления оборудования на любом уровне: серверы кэширования, серверы баз данных или серверы приложений. Одни из самых загруженных сайтов успешно масштабировали Django (например, Instagram и Disqus, если назвать только два из них).</dd> <dt>Удобным в сопровождении</dt> - <dd>Код Django написан с использованием принципов и шаблонов проектирования, которые поощряют создание поддерживаемого и повторно используемого кода. В частности, в нем используется принцип «Don't Repeat Yourself» (DRY, не повторяйся), поэтому нет ненужного дублирования, что сокращает объем кода. Django также способствует группированию связанных функциональных возможностей в повторно используемые «приложения» и, на более низком уровне, группирует связанный код в модули (в соответствии с шаблоном Model View Controller (MVC)).</dd> + <dd>Код Django написан с использованием принципов и шаблонов проектирования, которые поощряют создание поддерживаемого и повторно используемого кода. В частности, в нём используется принцип «Don't Repeat Yourself» (DRY, «не повторяйся»), поэтому нет ненужного дублирования, что сокращает объём кода. Django также способствует группированию связанных функциональных возможностей в повторно используемые «приложения» и, на более низком уровне, группирует связанный код в модули (в соответствии с шаблоном <a href="https://developer.mozilla.org/en-US/docs/Glossary/MVC">Model View Controller (MVC)</a>).</dd> <dt>Переносным</dt> - <dd>Django написан на Python, который работает на многих платформах. Это означает, что вы не привязаны к какой-либо конкретной серверной платформе и можете запускать приложения на многих версиях Linux, Windows и Mac OS X. Кроме того, Django хорошо поддерживается многими веб-хостингами, которые часто предоставляют определенную инфраструктуру и документацию для размещения сайтов Django.</dd> + <dd>Django написан на Python, который работает на многих платформах. Это означает, что вы не привязаны к какой-либо конкретной серверной платформе и можете запускать приложения на многих версиях Linux, Windows и Mac OS X. Кроме того, Django хорошо поддерживается многими веб-хостингами, которые часто предоставляют определённую инфраструктуру и документацию для размещения сайтов Django.</dd> </dl> <h2 id="Как_он_появился">Как он появился?</h2> -<p>Django был разработан в период с 2003 по 2005 год командой, которая занималась созданием и обслуживанием газетных веб-сайтов. После создания нескольких сайтов, команда начала повторно использовать множество общего кода и шаблонов проектирования. Этот общий код эволюционировал в веб-фреймворк "Django", как open-source проект в Июле 2005 года.</p> +<p>Django был разработан в период с 2003 по 2005 год командой, которая занималась созданием и обслуживанием газетных веб-сайтов. После создания нескольких сайтов, команда начала повторно использовать множество общего кода и шаблонов проектирования. Этот общий код эволюционировал в веб-фреймворк, который превратился в проект "Django" с открытым исходным кодом в июле 2005 года.</p> -<p>Django продолжает расти и улучшаться с момента его первого релиза (1.0) в сентябре 2008 года до недавно выпущенной версии 2.0 (2017). В каждой версии добавлены новые функциональные возможности и исправлены ошибки, начиная от поддержки новых типов баз данных, шаблонизаторов и кэширования, до добавления «общих» функций и классов (уменьшающих объем кода, который разработчики должны писать для ряда задач).</p> +<p>Django продолжает расти и улучшаться с момента его первого релиза (1.0) в сентябре 2008 года до недавно выпущенной версии 3.1 (2020). В каждой версии добавлены новые функциональные возможности и исправлены ошибки, начиная от поддержки новых типов баз данных, шаблонизаторов и кэширования, до добавления «общих» функций просмотра и классов (уменьшающих объём кода, который разработчики должны писать для ряда программных задач).</p> <div class="note"> -<p><strong>Заметка</strong>: Ознакомтесь с <a href="https://docs.djangoproject.com/en/stable/releases/">примечаниями к версии </a> на сайте <span style="line-height: 1.5;">Django, чтобы увидеть что изменилось в последних версиях, и как много работы было проделано чтобы улучшить Django.</span></p> +<p><strong>Заметка</strong>: Ознакомтесь с <a href="https://docs.djangoproject.com/en/3.1/releases/">примечаниями к версии</a> на сайте <span style="line-height: 1.5;">Django, чтобы увидеть что изменилось в последних версиях и как много работы было проделано, чтобы улучшить Django.</span></p> </div> -<p>Django - это процветающий совместный проект с открытым исходным кодом, в котором заняты многие тысячи пользователей и участников. Несмотря на то, что у него все еще есть некоторые особенности, которые отражают его происхождение, Django превратился в универсальную среду, способную разрабатывать веб-сайты любого типа.</p> +<p>Django — это процветающий совместный проект с открытым исходным кодом, в котором заняты многие тысячи пользователей и участников. Несмотря на то, что у него всё ещё есть некоторые особенности, которые отражают его происхождение, Django превратился в универсальный фреймворк, способный разрабатывать веб-сайты любого типа.</p> <h2 id="Насколько_популярен_Django">Насколько популярен Django?</h2> -<p>Нет никаких доступных и окончательных оценок популярности серверных фреймворков (хотя сайты, подобные Hot Framework, пытаются оценить популярность, используя такие механизмы, как подсчет количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос - "Достаточно ли Django популярен, чтобы избежать проблем непопулярных платформ?". Продолжает ли он развиваться? Можете ли вы получить помощь, если вам это нужно? Найдёте ли вы работу, если вы изучите Django?</p> +<p>Нет никаких доступных и окончательных оценок популярности серверных фреймворков (хотя сайты наподобие <a href="http://hotframeworks.com/">Hot Framework</a> и пытаются оценить популярность, используя такие механизмы, как подсчёт количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос — «достаточно ли Django популярен», чтобы избежать проблем непопулярных платформ. Продолжает ли он развиваться? Можете ли вы получить помощь, если вам нужно? Найдёте ли вы оплачиваемую работу, если изучите Django?</p> -<p>Основываясь на количестве крупных сайтов, которые используют Django, количестве участников и количестве людей, предоставляющих как бесплатную, так и платную поддержку, можно полагать, что Django - популярный фреймворк.</p> +<p>Основываясь на количестве крупных сайтов, которые используют Django, количестве участников и количестве людей, предоставляющих как бесплатную, так и платную поддержку, можно ответить: да, Django — популярный фреймворк!</p> -<p>Django используют такие крупные сайты, как Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, и Open Stack (источник: <a href="https://www.djangoproject.com/">домашняя страница Django</a>).</p> +<p>Django используют такие крупные сайты, как Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest и Open Stack (источник: <a href="https://www.djangoproject.com/start/overview/">обзорная страница Django</a>).</p> <h2 id="Является_ли_Django_гибким">Является ли Django гибким?</h2> @@ -86,17 +85,17 @@ translation_of: Learn/Server-side/Django/Introduction <h2 id="Как_выглядит_код_Django">Как выглядит код Django?</h2> -<p>В традиционном информационом веб-сайте, веб-приложение ожидает запросов HTTP от веб-браузера (или другого клиента). Когда запрос получен, приложение разрабатывает то, что необходимо на основе URL-адреса и, возможно, информации в <code>POST</code> или в <code>GET</code> запросах. В зависимости от того, что требуется, он может читать или записывать информацию из базы данных или выполнять другие задачи, необходимые для удовлетворения запроса. Приложение затем вернет ответ веб-браузеру, часто динамически создавая страницу HTML для отображения браузера, вставляя полученные данные в HTML шаблон.</p> +<p>На традиционном информационом веб-сайте веб-приложение ожидает HTTP-запросы от веб-браузера (или другого клиента). Когда запрос получен, приложение разрабатывает то, что необходимо на основе URL-адреса и, возможно, данных в <code>POST</code> или <code>GET</code> запросах. В зависимости от того, что требуется, далее он может читать или записывать информацию из базы данных или выполнять другие задачи, необходимые для удовлетворения запроса. Затем приложение вернёт ответ веб-браузеру, часто динамически создавая HTML-страницу для отображения в браузере, вставляя полученные данные в HTML-шаблон.</p> -<p>Веб-приложения написанные на Django обычно группируют код, который обрабатывает каждый из этих шагов, в отдельные файлы:</p> +<p>Веб-приложения, написанные на Django, обычно группируют код, который обрабатывает каждый из этих шагов, в отдельные файлы:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> <ul> - <li><strong>URLs: </strong>Хотя можно обрабатывать запросы с каждого URL-адреса с помощью одной функции, гораздо удобнее писать отдельную функцию для обработки каждого ресурса. URL-mapper используется для перенаправления HTTP-запросов в соответствующее представление на основе URL-адреса запроса. URL-mapper также может извлекать данные из URL-адреса в соответствии с заданным шаблоном и передавать их в соответствующую функцию в виде аргументов.</li> - <li><strong>View:</strong> Представление (view) - это функция обработчика запросов, которая получает HTTP-запросы и возвращает ответы. View имеет доступ к данным через модели (необходимым для удовлетворения запросов и делегирования ответа в шаблоны).</li> + <li><strong>URLs: </strong>Хотя можно обрабатывать запросы с каждого URL-адреса с помощью одной функции, гораздо удобнее писать отдельную функцию для обработки каждого ресурса. URL-маршрутизатор используется для перенаправления HTTP-запросов в соответствующее представление на основе URL-адреса запроса. Кроме того, URL-маршрутизатор может извлекать данные из URL-адреса в соответствии с заданным шаблоном и передавать их в соответствующую функцию отображения (view) в виде аргументов.</li> + <li><strong>View:</strong> View (англ. «отображение») — это функция обработчика запросов, которая получает HTTP-запросы и возвращает ответы. Функция view имеет доступ к данным, необходимым для удовлетворения запросов, и делегирует ответы в шаблоны через модели.</li> <li><strong>Models:</strong> Модели представляют собой объекты Python, которые определяют структуру данных приложения и предоставляют механизмы для управления (добавления, изменения, удаления) и выполнения запросов в базу данных.</li> - <li><strong>Templates:</strong> Template (шаблон) - это текстовый файл определяющий структуру или разметку страницы (например HTML страницы), с полями для подстановки используемыми для представления актуального содержимого. <em>View</em> может динамически создавать HTML страницы, используя HTML шаблоны и заполняя их данными из модели (<em>model).</em> Шаблон может быть использован для определения структуры файлов любых типов, не обязательно HTML.</li> + <li><strong>Templates:</strong> Template (англ. «шаблон») — это текстовый файл, определяющий структуру или разметку страницы (например HTML-страницы), с полями для подстановки, которые используются для вывода актуального содержимого. <em>View</em> может динамически создавать HTML-страницы, используя HTML-шаблоны и заполняя их данными из модели (<em>model).</em> Шаблон может быть использован для определения структуры файлов любых типов, не обязательно HTML.</li> </ul> <div class="note"> @@ -106,40 +105,37 @@ translation_of: Learn/Server-side/Django/Introduction <ul> </ul> -<p>Далее разделы дадут Вам понимание того как выглядят основные части Django (мы их изучим более детально чуть позже на курсе, когда будет настраивать окружение разработчика). </p> +<p>Следующие разделы дадут вам понимание того, как выглядят основные части Django (мы их изучим более детально чуть позже на курсе, когда будет настраивать окружение разработчика). </p> <h3 id="Отправка_запроса_в_правильное_view_urls.py">Отправка запроса в правильное view (urls.py)</h3> -<p>Сопоставитель URL-адресов обычно хранится в файле <strong>urls.py</strong>. В примере ниже сопоставитель (<code>urlpatterns</code>) определяет список соответствия между определенными URL-<em>шаблонами </em>и соотвествующими функциями отображения (view). Если полученный HTTP запрос подходит под определенный шаблон ( такой как <code>r'^$'</code>, ниже), то будет вызвана ассоциированная функция отображения<strong> </strong>(такая как <code>views.index</code>) и передана в запрос.</p> +<p>Сопоставитель URL-адресов обычно содержится в файле <strong>urls.py</strong>. В примере ниже сопоставитель (<code>urlpatterns</code>) определяет список сопоставлений между<em>маршрутами </em>(определёнными URL-<em>шаблонами</em>) и соотвествующими функциями отображения (view). Если получен HTTP-запрос, который имеет URL-адрес, соответствующий определённому шаблону, то затем будет вызвана связанная функция отображения (view) и передана в запрос.</p> <pre class="notranslate">urlpatterns = [ - <strong>url(r'^$', views.index),</strong> - url(r'^([0-9]+)/$', views.best), -] -</pre> + <strong>path('admin/', admin.site.urls), + </strong>path('book/<int:id>/', views.book_detail, name='book_detail'), + path('catalog/', include('catalog.urls')), + re_path(r'^([0-9]+)/$', views.best), +]</pre> -<div class="note"> -<p><strong>Note</strong>: Немного Python:</p> +<p>Объект <code>urlpatterns</code> является списком функций <code>path()</code> и/или <code>re_path()</code> (в Python списки определяются с помощью квадратных скобок, внутри которых элементы разделены запятыми и могут содержать <a href="https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples">необязательную завершающую запятую</a>. Например: <code>[item1, item2, item3,]</code>).</p> -<ul> - <li>Объект <code>urlpatterns</code> является списком функций <code>url()</code>. В Python, списки определяются с помощью квадратных скобок. Элементы разделены запятыми и могут содержать <a href="https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples">необязательную завершающую запятую</a>. Например: <code>[item1, item2, item3,]</code>.</li> - <li>Странный на вид синтаксис шаблона известен как регулярное выражение (regular expression). Мы о нем поговорим позже!</li> - <li>Второй аргумент функции <code>url()</code> это другая функция, которая будет вызвана, когда шаблон будет удачно сопоставлен. Обозначение <code>views.index</code> обозначает, что будет вызвана функция <code>index()<font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4; font-size: 18px;">, которая может быть найдена в модуле под названием </span></font></code><code>views</code> (т.е. в файле <code>views.py</code>).</li> -</ul> -</div> +<p>Первый аргумент в обоих методах - маршрут (шаблон), который будет сопоставлен. В методе <code>path()</code> угловые скобки используются для определения частей URL-адреса, которые будут захвачены и переданы в функцию отображения (view) в качестве именованных аргументов. Функция <code>re_path()</code> использует гибкий подход к сопоставлению с шаблоном, известный как регулярное выражение. Мы поговорим об этом в следующей статье!</p> + +<p>Второй аргумент — это ещё одна функция, которая будет вызываться при сопоставлении шаблона. Обозначение <code>views.book_detail</code> указывает, что функция называется <code>book_detail()</code> и может быть обнаружена в модуле с именем <code>views</code> (т.е. внутри файла с именем <code>views.py</code>).</p> <h3 id="Обработка_запроса_views.py">Обработка запроса (views.py)</h3> -<p>Отображения (views) - это сердце веб-приложения, принимающего HTTP-запросы от веб-клиентов и возвращающего HTTP-ответы. В промежутке они собирают другие ресурсы платформы для доступа к базам данных, шаблонам визуализации и т. д. </p> +<p>Отображения (views) — это сердце веб-приложения, принимающего HTTP-запросы от веб-клиентов и возвращающего HTTP-ответы. Между этим они используют другие ресурсы фреймворка для доступа к базам данных, шаблонам визуализации и т. д. </p> -<p>В приведенном ниже примере показана минимальная функция представления <code>index()</code>, которая могла быть вызвана нашим преобразователем URL в предыдущем разделе. Как и все функции представления, она получает объект <code>HttpRequest</code> в качестве параметра <code>(request)</code> и возвращает объект <code>HttpResponse</code>. В этом случае мы ничего не делаем с запросом, и наш ответ просто возвращает жестко запрограммированную строку. Мы покажем вам запрос, который делает что-то более интересное в следующем разделе.</p> +<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) from django.http import HttpResponse def index(request): - # Получить HttpRequest - параметр запроса + # Получить HttpRequest — параметр запроса # Выполнить операции, используя информацию из запроса. # Вернуть HttpResponse return HttpResponse('Hello from Django!') @@ -149,21 +145,21 @@ def index(request): <p><strong>Заметка</strong>: Немного Python:</p> <ul> - <li><a href="https://docs.python.org/3/tutorial/modules.html">Модули Python</a> это библиотеки функций, сохраненные в различных файлах, которые мы можем использовать в нашем коде. Здесь мы импортируем только объект <code>HttpResponse</code> из <code>django.http</code> модуля, таким образом мы можем использовать его в нашем отображении (view): <code>from django.http import HttpResponse</code> . Так же есть другие способы импортирования некоторых или всех объектов модуля.</li> - <li>Функции объявляются с помощью ключевого слова <code>def</code> как показано выше, с именованными параметрами, перечисленными в скобках после имени функции; строка завершается двоеточием. Заметьте, что следующие строки содержат отступы. Отступы важны, так как они определяют какие строки кода находятся внутри конкретного блока (обязательные отступы - это ключевая особенность Python и одна из причин, почему код на Python так легко читать).</li> + <li><a href="https://docs.python.org/3/tutorial/modules.html">Модули Python</a> это библиотеки функций, сохранённые в различных файлах, которые мы можем использовать в нашем коде. Здесь мы импортируем только объект <code>HttpResponse</code> из модуля <code>django.http</code> чтобы использовать его в нашем отображении (view): <code>from django.http import HttpResponse</code> . Также есть другие способы импортирования некоторых или всех объектов модуля.</li> + <li>Функции объявляются с помощью ключевого слова <code>def</code>, как показано выше, с именованными параметрами, перечисленными в скобках после имени функции; строка завершается двоеточием. Заметьте, что следующие строки содержат отступы. Отступы важны, так как они определяют, какие строки кода находятся внутри конкретного блока (обязательные отступы — это ключевая особенность Python и одна из причин, почему код на Python так легко читать).</li> </ul> </div> <ul> </ul> -<p>Отображения (View) обычно сохранены в файле <strong>views.py</strong>.</p> +<p>Отображения (view) обычно содержатся в файле <strong>views.py</strong>.</p> <h3 id="Определение_данных_модели_models.py">Определение данных модели (models.py)</h3> -<p>Веб-приложения Django обрабатывают и запрашивают данные через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от СУБД (MySQL или PostgreSQL) - ваши модели будут работать в любой из них. После того, как вы выбрали базу данных, которую хотите использовать, Вам не нужно напрямую обращатся к ней - вы просто пишете свою структуру модели и другой код, а Django обрабатывает всю грязную работу по обращению к базе данных за вас.</p> +<p>Веб-приложения Django обрабатывают и запрашивают данные через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от используемой базы данных — ваши модели будут работать в любой из них. После того как вы выбрали базу данных, которую хотите использовать, вам не нужно напрямую обращатся к ней — вы просто пишете свою структуру модели и другой код, а Django выполняет всю «грязную работу» по обращению к базе данных за вас.</p> -<p>В приведенном ниже фрагменте кода показана очень простая модель Django для объекта <code>Team</code> . Класс <code>Team</code> наследуется от класса <code>models.Model</code>. Он определяет имя команды и командный уровень в качестве полей символов и задает максимальное количество символов, которые должны быть сохранены для каждой записи. <code>Team_level</code> может быть одним из нескольких значений, поэтому мы определяем его как поле выбора и предоставляем сопоставление между отображаемыми вариантами и хранимыми данными вместе со значением по умолчанию. </p> +<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 @@ -182,20 +178,20 @@ class Team(models.Model): </pre> <div class="note"> -<p><strong>Заметка</strong>: Немного Python'а:</p> +<p><strong>Заметка</strong>: Немного Python:</p> <ul> - <li>Python поддерживает «объектно-ориентированное программирование», стиль программирования, в котором мы организуем наш код в объекты, которые включают связанные данные и функции для работы с этими данными. Объекты также могут наследовать / расширять / выводить из других объектов, позволяя совместное поведение между связанными объектами. В Python мы используем ключевое слово <code>class</code> , чтобы определить "скелет" для объекта. Мы можем создать несколько конкретных <em>экземпляров</em> типа объекта на основе модели в классе.<br> + <li>Python поддерживает «объектно-ориентированное программирование», то есть стиль программирования, в котором мы организуем наш код в объекты, которые включают связанные данные и функции для работы с этими данными. Объекты также могут наследовать / расширять / выводить из других объектов, позволяя использовать одинаковое поведение между связанными объектами. В Python мы используем ключевое слово <code>class</code>, чтобы определить «скелет» для объекта. Мы можем создать несколько конкретных <em>экземпляров</em> типа объекта на основе модели в классе.<br> <br> - Так например, мы имеем класс <code>Team</code>, который происходит от класса <code>Model</code>. Это означает, что эта модель будет содержать все методы модели, но мы также можем дать ей специализированные возможности. В нашей модели мы определяем поля нашей базы данных, в которой будем хранить данные, присваивая им конкретные имена. Django использует эти определения, включая имена полей, для создания основной базы данных.</li> + Так, например, мы имеем класс <code>Team</code>, который происходит от класса <code>Model</code>. Это означает, что эта модель будет содержать все методы модели, но мы также можем дать ей специализированные возможности. В нашей модели мы определяем поля нашей базы данных, в которой будем хранить данные, присваивая им конкретные имена. Django использует эти определения, включая имена полей, для создания основной базы данных.</li> </ul> </div> <h3 id="Запросы_данных_views.py">Запросы данных (views.py)</h3> -<p>Модель Django предоставляет простой API запросов для поиска в базе данных. Поиск может осуществляться по нескольким полям одновременно с использованием разных критериев (таких как exact, case-insensitive, greater than и т.д.), и может поддерживать сложные выражения (например, вы можете указать поиск в командах U11, у которых есть имя команды, начинающееся с «Fr» или заканчивается на «al»).</p> +<p>Модель Django предоставляет простой API запросов для поиска в базе данных. Поиск может осуществляться по нескольким полям одновременно, используя различные критерии (такие как exact («точный»), case-insensitive («без учёта регистра»), greater than («больше чем») и т. д.), и может поддерживать сложные выражения (например, вы можете указать поиск в командах U11, у которых есть имя команды, начинающееся с «Fr» или заканчивается на «al»).</p> -<p>Фрагмент кода показывает функцию view (обработчик ресурсов) для отображения всех команд U09. Жирная строка показывет как мы можем использовать модель API запросов для того, чтобы отфильтровать все записи где поле <code>team_level</code> в точности содержит текст 'U09' (обратите внимание, как эти критерии передаются функции <code>filter()</code> в качестве аргумента с именем поля и типом соответствия, разделенным двойным подчеркиванием: <strong>team_level__exact</strong>).</p> +<p>Фрагмент кода показывает функцию view (обработчик ресурсов) для отображения всех команд U09. Выделенная жирным строка показывет, как мы можем использовать модель API-запросов для того, чтобы отфильтровать все записи, где поле <code>team_level</code> в точности содержит текст 'U09' (обратите внимание, как эти критерии передаются функции <code>filter()</code> в качестве аргумента с именем поля и типом соответствия, разделённым двойным подчеркиванием: <strong>team_level__exact</strong>). </p> <pre class="brush: python notranslate">## filename: views.py @@ -211,36 +207,38 @@ def index(request): <dl> </dl> -<p>Данная функция использует функцию <code>render()</code> для того, чтобы создать <code>HttpResponse</code>, который будет отправлен назад браузеру. Эта функция является ярлыком; она создает HTML-файл, комбинируя указанный шаблон HTML и некоторые данные для вставки в шаблон (предоставляется в переменной с именем "<code>context</code>"). В следующем разделе мы покажем как данные вставляются в шаблон для создания HTML-кода.</p> +<p>Данная функция использует функцию <code>render()</code> для того, чтобы создать <code>HttpResponse</code>, который будет отправлен назад браузеру. Эта функция является <em>ярлыком</em>; она создаёт HTML-файл, комбинируя указанный HTML-шаблон и некоторые данные для вставки в шаблон (предоставляется в переменной с именем «<code>context</code>»). В следующем разделе мы покажем как данные вставляются в шаблон для создания HTML-кода.</p> -<h3 id="Отображение_данных_HTML_templates">Отображение данных (HTML templates)</h3> +<h3 id="Вывод_данных_HTML-шаблоны">Вывод данных (HTML-шаблоны)</h3> -<p>Системы шаблонов позволяют указать структуру выходного документа, используя заполнители для данных, которые будут заполнены при создании страницы. Шаблоны часто используются для создания HTML, но также могут создавать другие типы документов. Django поддерживает как собственную систему шаблонов, так и другую популярную библиотеку Python под названием Jinja2 (она также может быть использована для поддержки других систем, если это необходимо).</p> +<p>Системы шаблонов позволяют указать структуру выходного документа, используя заполнители для данных, которые будут вставлены при генерировании страницы. Шаблоны часто используются для создания HTML, но также могут создавать другие типы документов. Django «из коробки» поддерживает как собственную систему шаблонов, так и другую популярную библиотеку Python под названием Jinja2 (она также может быть использована для поддержки других систем, если это необходимо).</p> -<p>Фрагмент кода показывает, как выглядит HTML-шаблон, вызванный функцией <code>render()</code> из предыдущего раздела. Этот шаблон был написан в предположении, что во время рендеринга он будет иметь доступ к переменной списка, называемой <code>youngest_teams</code> (содержащейся в контекстной переменной внутри функции <code>render()</code> выше). Внутри скелета HTML мы имеем выражение, которое сначала проверяет, существует ли переменная <code>youngest_teams</code>, а затем выполняет итерацию в цикле <code>for</code>. На каждой итерации шаблон отображает значение <code>team_name</code> каждой команды в элементе {{htmlelement ("li")}}.</p> +<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="brush: python notranslate">## filename: best/templates/best/index.html +<pre class="notranslate">## filename: best/templates/best/index.html <!DOCTYPE html> <html lang="en"> +<head> + <meta charset="utf-8"> + <title>Home page</title> +</head> <body> - - {% if youngest_teams %} + {% if youngest_teams %} <ul> - {% for team in youngest_teams %} - <li>\{\{ team.team_name \}\}</li> - {% endfor %} + {% for team in youngest_teams %} + <li>\{\{ team.team_name \}\}</li> + {% endfor %} </ul> -{% else %} + {% else %} <p>No teams are available.</p> -{% endif %} - + {% endif %} </body> </html></pre> -<h2 id="Что_еще_можно_сделать">Что еще можно сделать?</h2> +<h2 id="Что_ещё_можно_сделать">Что ещё можно сделать?</h2> -<p>В предыдущих разделах показаны основные особенности, которые вы будете использовать почти в каждом веб-приложении: сопоставление URL, представления, модели и шаблоны. Также Django предоставляет несколько других вещей:</p> +<p>В предыдущих разделах показаны основные особенности, которые вы будете использовать почти в каждом веб-приложении: сопоставление URL-адресов, отображение, модели и шаблоны. Также Django предоставляет несколько других вещей:</p> <ul> <li><strong>Формы</strong>: HTML-формы используются для сбора пользовательских данных для обработки на сервере. Django упрощает создание, проверку и обработку формы.</li> @@ -254,6 +252,6 @@ def index(request): <p>Поздравляем, вы завершили первый шаг в своем путешествии по Django! Теперь вы должны понимать основные преимущества Django, немного его истории, и примерно как может выглядеть каждая из основных частей приложения Django. Вы должны также изучить несколько вещей о языке программирования Python, включая синтаксис списков, функций и классов.</p> -<p>Вы уже видели код на Django выше, но в отличие от клиентского кода вам нужно настроить среду разработки для ее запуска. Это наш следующий шаг</p> +<p>Вы уже видели код на Django выше, но в отличие от клиентского кода вам нужно настроить среду разработки для её запуска. Это наш следующий шаг.</p> <div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> 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 af2b467d3f..9be015a4a6 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 @@ -1,6 +1,12 @@ --- -title: Выполняемые на сервере веб фреймворки +title: Выполняемые на сервере веб-фреймворки slug: Learn/Server-side/First_steps/Web_frameworks +tags: + - '-фреймворк' + - Ве + - Программирование серверной части + - Сервер + - начальный уровень translation_of: Learn/Server-side/First_steps/Web_frameworks --- <div>{{LearnSidebar}}</div> @@ -30,7 +36,7 @@ translation_of: Learn/Server-side/First_steps/Web_frameworks <p>В следующем разделе приводится более подробная информация о том, как веб-фреймворки могут облегчить разработку веб-приложений. Затем мы объясним некоторые критерии, которые вы можете использовать для выбора веб-фреймворка, а затем перечислим некоторые из ваших вариантов.</p> -<h2 id="Что_может_сделать_веб-фреймворк_для_вас">Что может сделать веб-фреймворк для вас ?</h2> +<h2 id="Что_может_сделать_веб-фреймворк_для_вас">Что может сделать веб-фреймворк для вас?</h2> <p>Веб-фреймворки предоставляют инструменты и библиотеки для упрощения общих операций веб-разработки. Вы не обязаны использовать веб-фреймворк на стороне сервера, но это настоятельно рекомендуется — это сделает вашу жизнь намного проще.</p> @@ -238,43 +244,52 @@ def youngest(request): <p><a href="http://expressjs.com/">Express</a> — быстрый, непринуждённый, гибкий и минималистский веб-фреймворк для <a href="https://nodejs.org/en/">Node.js</a> (node — это серверная среда для запуска JavaScript). Он обеспечивает надёжный набор функций для веб и мобильных приложений и предоставляет полезные HTTP-утилиты и <a href="/en-US/docs/Glossary/Middleware">middleware</a> (промежуточные интерфейсы).</p> -<p><span class="tlid-translation translation" lang="ru">Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует легкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запрос).<br> - <br> - Поскольку Express является минималистской веб-инфраструктурой, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели!<br> - <br> - Многие популярные серверные и полные стеки (включая серверные и клиентские) основаны на Express, включая Feathers, ItemsAPI, KeystoneJS, Kraken, LEAN-STACK, LoopBack, MEAN и Sails.<br> - <br> - Многие крупные компании используют Express, в том числе: Uber, Accenture, IBM и т. Д. (Список приведен здесь).</span></p> +<p><span class="tlid-translation translation" lang="ru">Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует легкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запроса).</span></p> + +<p><span class="tlid-translation translation" lang="ru">Поскольку Express является минималистским веб-фреймворком, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели! </span></p> + +<p><span class="tlid-translation translation" lang="ru">На Express основаны многие популярные серверные фреймворки, а также фреймворки полного цикла (которые включают как серверную, так и клиентскую часть), в числе которых <a href="http://feathersjs.com/">Feathers</a>, <a href="https://www.itemsapi.com/">ItemsAPI</a>, <a href="http://keystonejs.com/">KeystoneJS</a>, <a href="http://krakenjs.com/">Kraken</a>, <a href="http://loopback.io/">LoopBack</a>, <a href="http://mean.io/">MEAN</a> и <a href="http://sailsjs.org/">Sails</a>.</span></p> + +<p><span class="tlid-translation translation" lang="ru">Express используют многие крупные компании, в том числе: Uber, Accenture, IBM и т. д. (список приведён <a href="http://expressjs.com/en/resources/companies-using-express.html">здесь</a>).</span></p> <h3 id="Ruby_on_Rails_Ruby">Ruby on Rails (Ruby)</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Rails (обычно называемый «Ruby on Rails») - это веб-фреймворк, написанный для языка программирования Ruby.</span><br> - <br> - <span title="">Rails следует очень похожей философии дизайна на Django.</span> <span title="">Как и Django, он предоставляет стандартные механизмы для маршрутизации URL, доступа к данным из базы данных, генерации HTML из шаблонов и форматирования данных как {{glossary ("JSON")}} или {{glossary ("XML")}}.</span> <span title="">Точно так же поощряется использование шаблонов проектирования, таких как DRY («не повторяйте себя» - пишите код только один раз, если это возможно), MVC (модель-представление-контроллер) и ряд других.</span><br> +<p><span class="tlid-translation translation" lang="ru"><span title=""><a href="http://rubyonrails.org/">Rails</a> (обычно именуется «Ruby on Rails») </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> это веб-фреймворк, написанный для языка программирования Ruby.</span></span></p> + +<p><span class="tlid-translation translation" lang="ru"><span title="">Rails следует очень похожей философии дизайна на Django.</span> <span title="">Как и Django, он предоставляет стандартные механизмы для маршрутизации URL-адресов, доступа к данным из базы данных, генерации HTML из шаблонов и форматирования таких данных как {{glossary ("JSON")}} или {{glossary ("XML")}}.</span> Им <span title="">точно так же поощряется использование шаблонов проектирования, таких как DRY («не повторяйте себя» </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> пишите код только один раз, если это возможно), MVC (модель-представление-контроллер) и ряд других.</span><br> <br> - <span title="">Конечно, есть много различий, связанных с конкретными проектными решениями и характером языков.</span><br> + <span title="">Конечно, в них существует и много различий, которые связаны с конкретными проектными решениями и природой самих языков.</span><br> <br> - <span title="">Rails использовался для крупных сайтов, в том числе: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.</span></span></p> + <span title="">Rails использовался для крупных сайтов, в том числе: <a href="https://basecamp.com/">Basecamp</a>, <a href="https://github.com/">GitHub</a>, <a href="https://shopify.com/">Shopify</a>, <a href="https://airbnb.com/">Airbnb</a>, <a href="https://twitch.tv/">Twitch</a>, <a href="https://soundcloud.com/">SoundCloud</a>, <a href="https://hulu.com/">Hulu</a>, <a href="https://zendesk.com/">Zendesk</a>, <a href="https://square.com/">Square</a>, <a href="https://highrisehq.com/">Highrise</a>.</span></span></p> <h3 id="ASP.NET">ASP.NET</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">ASP.NET - это веб-инфраструктура с открытым исходным кодом, разработанная Microsoft для создания современных веб-приложений и сервисов.</span> <span title="">С ASP.NET вы можете быстро создавать веб-сайты на основе HTML, CSS и JavaScript, масштабировать их для использования миллионами пользователей и легко добавлять более сложные возможности, такие как веб-API, формы поверх данных или коммуникации в режиме реального времени.</span><br> - <br> - <span title="">Одним из отличий для ASP.NET является то, что он построен на Common Language Runtime (CLR), что позволяет программистам писать код ASP.NET с использованием любого поддерживаемого языка .NET (C #, Visual Basic и т. д.).</span> <span title="">Как и многие продукты Microsoft, он обладает отличными инструментами (часто бесплатными), активным сообществом разработчиков и хорошо написанной документацией.</span><br> - <br> - <span title="">ASP.NET используется Microsoft, Xbox.com, Stack Overflow и многими другими.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title=""><a href="http://www.asp.net/">ASP.NET</a> </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> это веб-фреймворк с открытым исходным кодом, разработанный Microsoft для создания современных веб-приложений и сервисов.</span> <span title="">С ASP.NET вы можете быстро создавать веб-сайты на основе HTML, CSS и JavaScript, масштабировать их для использования миллионами пользователей и легко добавлять более сложные возможности, такие как веб-API, формы поверх данных или коммуникации в режиме реального времени.</span></span></p> + +<p><span class="tlid-translation translation" lang="ru"><span title="">Одним из отличий ASP.NET является то, что он построен на <a href="https://ru.wikipedia.org/wiki/Common_Language_Runtime">Common Language Runtime</a> </span></span>(CLR, «общеязыковая исполняющая среда»)<span class="tlid-translation translation" lang="ru"><span title="">, что позволяет программистам писать код ASP.NET с использованием любого поддерживаемого языка .NET (C#, Visual Basic и т. п.).</span> <span title="">Как и многие продукты Microsoft, он обладает отличными инструментами (часто бесплатными), активным сообществом разработчиков и хорошо написанной документацией.</span></span></p> + +<p><span class="tlid-translation translation" lang="ru"><span title="">ASP.NET используется Microsoft, Xbox.com, Stack Overflow и многими другими.</span></span></p> <h3 id="Mojolicious_Perl">Mojolicious (Perl)</h3> -<p><span class="tlid-translation translation" lang="ru">Mojolicious - это веб-фреймворк следующего поколения для языка программирования Perl.<br> - <br> - Еще в первые дни Интернета многие люди изучали Perl из-за замечательной библиотеки Perl под названием CGI. Это было достаточно просто, чтобы начать, не зная много о языке и достаточно мощный, чтобы держать вас в курсе. Mojolicious реализует эту идею, используя новейшие технологии.<br> - <br> - Некоторые из функций, предоставляемых Mojolicious: веб-инфраструктура в режиме реального времени, позволяющая легко превращать отдельные файловые прототипы в хорошо структурированные веб-приложения MVC; RESTful маршруты, плагины, команды, шаблоны Perl-ish, согласование контента, управление сеансами, проверка форм, структура тестирования, статический файловый сервер, обнаружение CGI / PSGI, поддержка Unicode первого класса; Реализация полного стека HTTP и WebSocket клиент / сервер с IPv6, TLS, SNI, IDNA, HTTP / SOCKS5 прокси, сокет домена UNIX, Comet (длинный опрос), поддержка активности, пул соединений, тайм-аут, cookie, поддержка нескольких частей и сжатия gzip; Парсеры и генераторы JSON и HTML / XML с поддержкой селекторов CSS; Очень чистый, портативный и объектно-ориентированный чистый Perl API без скрытой магии; Свежий код, основанный на многолетнем опыте, бесплатный и открытый исходный код.</span></p> +<p><span class="tlid-translation translation" lang="ru"><a href="http://mojolicious.org/">Mojolicious</a> </span>—<span class="tlid-translation translation" lang="ru"> это веб-фреймворк следующего поколения для языка программирования Perl.</span></p> + +<p><span class="tlid-translation translation" lang="ru">Ещё в первые дни Интернета многие люди изучали Perl из-за замечательной библиотеки Perl под названием <a href="https://metacpan.org/module/CGI">CGI</a>. Язык позволял довольно просто начать, не зная многого о языке, и был достаточно мощным, чтобы вы продолжали работу. Mojolicious реализует эту идею, используя новейшие технологии.</span></p> + +<p><span class="tlid-translation translation" lang="ru">Некоторые из функций, предоставляемых Mojolicious</span>:</p> + +<ul> + <li><span class="tlid-translation translation" lang="ru">веб-инфраструктура в режиме реального времени, позволяющая легко превращать отдельные файловые прототипы в хорошо структурированные веб-приложения MVC</span>.</li> + <li><span class="tlid-translation translation" lang="ru">RESTful маршруты, плагины, команды, шаблоны Perl-ish, согласование контента, управление сеансами, проверка форм, структура тестирования, статический файловый сервер, обнаружение CGI/<a href="http://plackperl.org/">PSGI</a>, первоклассная поддержка Unicode</span>.</li> + <li><span class="tlid-translation translation" lang="ru">Реализация полного стека HTTP и WebSocket клиент/сервер с IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 прокси, сокет домена UNIX, Comet (длинный опрос), поддержка активности, пул соединений, тайм-аут, cookie, поддержка нескольких частей и сжатия gzip</span>.</li> + <li><span class="tlid-translation translation" lang="ru">Парсеры и генераторы JSON и HTML/XML с поддержкой селекторов CSS</span>.</li> + <li><span class="tlid-translation translation" lang="ru">Очень чистый, портативный и объектно-ориентированный Perl API без скрытой магии</span>.</li> + <li><span class="tlid-translation translation" lang="ru">Свежий код, основанный на многолетнем опыте, бесплатный и с открытым исходным кодом</span>.</li> +</ul> <h2 id="Резюме"><span class="tlid-translation translation" lang="ru"><span title="">Резюме</span></span></h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Эта статья показала, что веб-фреймворки могут упростить разработку и поддержку кода на стороне сервера.</span> <span title="">Он также предоставил общий обзор нескольких популярных платформ и обсудил критерии выбора платформы веб-приложений.</span> <span title="">Теперь у вас должно быть хотя бы представление о том, как выбрать веб-фреймворк для собственной разработки на стороне сервера.</span> <span title="">Если нет, то не беспокойтесь - позже в курсе мы дадим вам подробные учебники по Django и Express, чтобы дать вам некоторый опыт работы с веб-фреймворком.</span> </span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Эта статья показала, что веб-фреймворки могут упростить разработку и поддержку кода на стороне сервера.</span> <span title="">Она также предоставила общий обзор нескольких популярных платформ и обсудила критерии выбора платформы веб-приложений.</span> <span title="">Теперь у вас должно быть хотя бы представление о том, как выбрать веб-фреймворк для собственной разработки на стороне сервера.</span> <span title="">Если нет, то не беспокойтесь </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> позже в курсе мы дадим вам подробные учебники по Django и Express, чтобы дать вам некоторый опыт работы с веб-фреймворком.</span> </span></p> <p>Для следующей статьи в этом модуле мы немного изменим направление и рассмотрим веб-безопасность.</p> @@ -283,7 +298,7 @@ def youngest(request): <h2 id="В_этом_модуле">В этом модуле</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li> + <li><a href="/ru/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li> <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li> <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li> <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li> diff --git a/files/ru/web/api/domimplementation/createhtmldocument/index.html b/files/ru/web/api/domimplementation/createhtmldocument/index.html new file mode 100644 index 0000000000..51092a034b --- /dev/null +++ b/files/ru/web/api/domimplementation/createhtmldocument/index.html @@ -0,0 +1,111 @@ +--- +title: DOMImplementation.createHTMLDocument() +slug: Web/API/DOMImplementation/createHTMLDocument +tags: + - API + - DOM Reference + - DOMImplementation + - Method + - Reference +translation_of: Web/API/DOMImplementation/createHTMLDocument +--- +<p>{{ApiRef("DOM")}}</p> + +<p><span class="seoSummary">Метод <strong><code>DOMImplementation.createHTMLDocument()</code></strong> создает новый HTML {{ domxref("Document") }}.</span></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">const <var>newDoc</var> = document.implementation.createHTMLDocument(<var>title</var>)</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code><var>title</var></code> {{optional_inline}} (except in IE)</dt> + <dd>{{domxref("DOMString")}}, содержащий заголовок для создания нового HTML-документа.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>В этом примере создается новый HTML-документ и вставляется в {{HTMLElement("iframe")}} текущего документа.</p> + +<p>Вот HTML для этого примера:</p> + +<pre class="brush: html notranslate"><body> + <p>Click <a href="javascript:makeDocument()">here</a> to create a new document and insert it below.</p> + <iframe id="theFrame" src="about:blank" /> +</body> +</pre> + +<p>Реализация JavaScript <code>makeDocument()</code> выглядит следующим образом:</p> + +<pre class="brush: js notranslate">function makeDocument() { + let frame = document.getElementById("theFrame"); + + let doc = document.implementation.createHTMLDocument("New Document"); + let p = doc.createElement("p"); + p.innerHTML = "This is a new paragraph."; + + try { + doc.body.appendChild(p); + } catch(e) { + console.log(e); + } + + // Copy the new HTML document into the frame + + let destDocument = frame.contentDocument; + let srcNode = doc.documentElement; + let newNode = destDocument.importNode(srcNode, true); + + destDocument.replaceChild(newNode, destDocument.documentElement); +} +</pre> + +<p>Код в строках 4-12 обрабатывает создание нового HTML-документа и вставку в него некоторого содержимого. Строка 4 использует <code>createHTMLDocument()</code> для создания нового HTML-документа, чей {{ HTMLElement("title") }} это <code>"New Document"</code>. Строки 5 и 6 создают новый элемент абзаца с некоторым простым содержимым, а затем строки 8-12 обрабатывают вставку нового абзаца в новый документ.</p> + +<p>Строка 16 вытягивает <code>contentDocument</code> фрейма; это документ, в который мы будем вводить новое содержимое. Следующие две строки обрабатывают импорт содержимого нашего нового документа в контекст нового документа. Наконец, строка 20 фактически заменяет содержимое фрейма содержимым нового документа.</p> + +<p><a href="/samples/domref/createHTMLDocument.html">Смотреть Видео Примеры</a></p> + +<p>Возвращаемый документ предварительно сконструирован со следующим HTML-кодом:</p> + +<pre class="brush: html notranslate"><!doctype html> +<html> +<head> +<title><var>title</var></title> +</head> +<body> +</body> +</html> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Первоначальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.DOMImplementation.createHTMLDocument")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс {{domxref("DOMImplementation")}}, к которому он принадлежит.</li> +</ul> diff --git a/files/ru/web/api/domimplementation/index.html b/files/ru/web/api/domimplementation/index.html new file mode 100644 index 0000000000..f68c256376 --- /dev/null +++ b/files/ru/web/api/domimplementation/index.html @@ -0,0 +1,82 @@ +--- +title: DOMImplementation +slug: Web/API/DOMImplementation +tags: + - API + - DOM + - Interface + - Reference +translation_of: Web/API/DOMImplementation +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Интерфейс <code><strong>DOMImplementation</strong></code> представляет собой объект, предоставляющий методы, которые не зависят от какого-либо конкретного документа. Такой объект возвращается свойством {{domxref("Document.implementation")}}.</p> + +<h2 id="Свойства">Свойства</h2> + +<p><em>Этот интерфейс не имеет определенного свойства и не наследует его.</em></p> + +<h2 id="Методы">Методы</h2> + +<p><em>Нет унаследованного метода.</em></p> + +<dl> + <dt>{{domxref("DOMImplementation.createDocument()")}}</dt> + <dd>Создает и возвращает {{domxref("XMLDocument")}}.</dd> + <dt>{{domxref("DOMImplementation.createDocumentType()")}}</dt> + <dd>Создает и возвращает {{domxref("DocumentType")}}.</dd> + <dt>{{domxref("DOMImplementation.createHTMLDocument()")}}</dt> + <dd>Создает и возвращает HTML {{domxref("Document")}}.</dd> + <dt>{{domxref("DOMImplementation.hasFeature()")}}</dt> + <dd>Возвращает {{domxref("Boolean")}}, указывающий, поддерживается ли данная функция или нет. Эта функция ненадежна и сохраняется только для целей совместимости: за исключением запросов, связанных с SVG, она всегда возвращает true. Старые браузеры очень непоследовательны в своем поведении.</dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#domimplementation', 'DOMImplementation')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> + <p>Removed the <code>getFeature()</code> method.<br> + Added the <code>createHTMLDocument()</code> method.<br> + Modified the return type of <code>createDocument()</code> from {{domxref("Document")}} to {{domxref("XMLDocument")}}.</p> + + <p>Удален метод <code>getFeature()</code>. Добавлен метод <code>createHTMLDocument()</code>. Изменён тип возвращаемого значения <code>createDocument()</code> с {{domxref("Document")}} на {{domxref("XMLDocument")}}.</p> + </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Добавлен метод <code>getFeature()</code> (никогда не реализованный ни одним агентом пользователя).</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Добавлены методы <code>createDocument()</code> и <code>createDocumentType()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Первоначальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.DOMImplementation")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li> +</ul> diff --git a/files/ru/web/api/eventtarget/attachevent/index.html b/files/ru/web/api/eventtarget/attachevent/index.html index e7d6f423a4..3c34f1f843 100644 --- a/files/ru/web/api/eventtarget/attachevent/index.html +++ b/files/ru/web/api/eventtarget/attachevent/index.html @@ -1,93 +1,8 @@ --- title: EventTarget.attachEvent() slug: Web/API/EventTarget/attachEvent +tags: + - Junk translation_of: Web/API/EventTarget/addEventListener --- -<p>{{APIRef("DOM Events")}}</p> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Кратко">Кратко</h2> - -<p>Проприетарная альтернатива методу {{domxref("EventTarget.addEventListener()")}} от Microsoft Internet Explorer.</p> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox"><em>attached</em> = <em>target</em>.attachEvent(<em>eventNameWithOn</em>, <em>callback</em>) -</pre> - -<dl> - <dt>target</dt> - <dd>DOM элемент, на который требуется повесить "attachEvent()"</dd> - <dt>eventNameWithOn</dt> - <dd>Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать <code>"onclick" для установки обработчика для данного "click" ивента.</code></dd> - <dt>callback</dt> - <dd>Функция, вызываемая при появлении ивента на целевом элементе. Функция будет вызвана без аргументов, и с "this", ссылающимся на <a href="/en-US/docs/Web/API/Window/window"><code>window</code> object.</a></dd> - <dt>attached</dt> - <dd>Возвращает "true"если установка была успешна, иначе "false".</dd> -</dl> - -<h2 id="Спецификации">Спецификации</h2> - -<p>Не является частью спецификации.</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx">содержит описание на MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Браузерная совместимость</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6 thru 10 [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1]: <code>attachEvent()</code> больше не поддерживается в IE11+. {{domxref("EventTarget.addEventListener()")}} поддерживается в IE9+.</p> - -<h2 id="Смотрите_так-же">Смотрите так-же</h2> - -<ul> - <li>{{domxref("EventTarget.detachEvent()")}}</li> - <li>{{domxref("EventTarget.fireEvent()")}}</li> -</ul> +<p>{{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}</p> diff --git a/files/ru/web/api/formdata/index.html b/files/ru/web/api/formdata/index.html index 35ea12c24a..3553574ec7 100644 --- a/files/ru/web/api/formdata/index.html +++ b/files/ru/web/api/formdata/index.html @@ -29,18 +29,24 @@ translation_of: Web/API/FormData <h2 id="Методы">Методы</h2> <dl> - <dt>{{domxref("FormData.append")}}</dt> + <dt>{{domxref("FormData.append()")}}</dt> <dd>Добавляет новое значение существующего поля объекта <code style="font-style: normal;">FormData</code>, либо создаёт его и присваивает значение.</dd> - <dt>{{domxref("FormData.delete")}}</dt> + <dt>{{domxref("FormData.delete()")}}</dt> <dd>Удаляет пару ключ-значение из объекта <code>FormData</code>.</dd> - <dt>{{domxref("FormData.get")}}</dt> + <dt>{{domxref("FormData.get()")}}</dt> <dd>Возвращает первое значение ассоциированное с переданным ключом из объекта <code>FormData</code>.</dd> - <dt>{{domxref("FormData.getAll")}}</dt> + <dt>{{domxref("FormData.getAll()")}}</dt> <dd>Возвращает массив всех значений ассоциированных с переданным ключом из объекта <code style="font-style: normal;">FormData</code>.</dd> - <dt>{{domxref("FormData.has")}}</dt> - <dd>Возвращает булево значение касательно наличия в объекте <span style="font-family: consolas,monaco,andale mono,monospace;">FormData</span> конкретной пары ключ-значение.</dd> - <dt>{{domxref("FormData.set")}}</dt> - <dd>Устанавливает новое значение для существующего ключа объекта <span style="font-family: consolas,monaco,andale mono,monospace;">FormData</span>, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.</dd> + <dt>{{domxref("FormData.has()")}}</dt> + <dd>Возвращает булево значение касательно наличия в объекте <code style="font-style: normal;">FormData</code> конкретной пары ключ-значение.</dd> + <dt>{{domxref("FormData.set()")}}</dt> + <dd>Устанавливает новое значение для существующего ключа объекта <code style="font-style: normal;">FormData</code>, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.</dd> + <dt>{{domxref("FormData.keys()")}}</dt> + <dd>Возвращает {{jsxref("Iteration_protocols", "iterator")}} , который позволяет пройтись по всем ключам для каждой пары "ключ-значение" , содержащимся внутри обьекта <code style="font-style: normal;">FormData</code></dd> + <dt>{{domxref("FormData.entries()")}}</dt> + <dd>Возвращает {{jsxref("Iteration_protocols","iterator")}} который позволяет пройтись по всем парам "ключ-значение", содержащимся внутри обьекта <code style="font-style: normal;">FormData</code></dd> + <dt>{{domxref("FormData.values()")}}</dt> + <dd>Возвращает {{jsxref("Iteration_protocols", "iterator")}} , который позволяет пройтись по всем значениям , содержащимся в обьекте <code style="font-style: normal;">FormData</code></dd> </dl> <div class="note"> diff --git a/files/ru/web/api/mouseevent/ctrlkey/index.html b/files/ru/web/api/mouseevent/ctrlkey/index.html index 6b8815d8da..96c98ae093 100644 --- a/files/ru/web/api/mouseevent/ctrlkey/index.html +++ b/files/ru/web/api/mouseevent/ctrlkey/index.html @@ -5,11 +5,11 @@ translation_of: Web/API/MouseEvent/ctrlKey --- <p>{{APIRef("DOM Events")}}</p> -<p>Свойство только для чтения <strong><code>MouseEvent.ctrlKey</code></strong> возращает true, когда клавиша Ctrl была нажата, а если нет - false.</p> +<p>Свойство только для чтения <strong><code>MouseEvent.ctrlKey</code></strong> возвращает true, когда клавиша Ctrl была нажата, а если нет - false.</p> <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox">var <em>ctrlKeyPressed</em> = <em>instanceOfMouseEvent</em>.ctrlKey +<pre class="syntaxbox notranslate">var <em>ctrlKeyPressed</em> = <em>instanceOfMouseEvent</em>.ctrlKey </pre> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -18,7 +18,7 @@ translation_of: Web/API/MouseEvent/ctrlKey <h2 id="Example" name="Example">Пример</h2> -<pre class="brush: js"><html> +<pre class="brush: js notranslate"><html> <head> <title>Пример с ctrlKey</title> diff --git a/files/ru/web/api/node/appendchild/index.html b/files/ru/web/api/node/appendchild/index.html index 50af4e38da..e011179528 100644 --- a/files/ru/web/api/node/appendchild/index.html +++ b/files/ru/web/api/node/appendchild/index.html @@ -17,6 +17,11 @@ translation_of: Web/API/Node/appendChild <p>Если данный дочерний элемент является {{domxref("DocumentFragment")}}, то все содержимое {{domxref("DocumentFragment")}} перемещается в дочерний список указанного родительского узла.</p> +<div class="blockIndicator note"> +<p><strong>Доступен новый API!</strong><br> + <a href="https://developer.mozilla.org/ru/docs/Web/API/ParentNode/append"><code>ParentNode.append()</code></a> поддерживает несколько аргументов и добавляемые строки.</p> +</div> + <h2 id="Syntax" name="Syntax">Синтаксис</h2> <pre class="syntaxbox notranslate">var child = <em>element</em>.appendChild(<em>child</em>);</pre> diff --git a/files/ru/web/javascript/reference/global_objects/generator/index.html b/files/ru/web/javascript/reference/global_objects/generator/index.html index b5fe95a5bf..385792c2e0 100644 --- a/files/ru/web/javascript/reference/global_objects/generator/index.html +++ b/files/ru/web/javascript/reference/global_objects/generator/index.html @@ -16,17 +16,23 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Generator <p><code><strong>Генератор</strong></code> - это объект, возвращаемый {{jsxref("Statements/function*", "функцией-генератором", "", 1)}} и соответствующий как <a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">"Итерируемому" протоколу</a>, так и <a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">протоколу "Итератор"</a>.</p> -<h2 id="Синтаксис">Синтаксис</h2> +<h2 id="Конструктор">Конструктор</h2> -<pre class="syntaxbox">function* gen() { +<p>Этот объект не может быть инстанциирован напрямую. Вместо этого, экемпляр <code>Generator</code> может быть возвращён из <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction">функции-генератора</a>:</p> + +<pre class="notranslate line-numbers language-html">function* generator() { yield 1; yield 2; yield 3; } -var g = gen(); // "Generator { }"</pre> +const gen = generator(); // "Generator { }" + +console.log(gen.next().value); // 1 +console.log(generator().next().value); // 1 +console.log(generator().next().value); // 1</pre> -<h2 id="Методы">Методы</h2> +<h2 id="Методы_экземпляра">Методы экземпляра</h2> <dl> <dt>{{jsxref("Generator.prototype.next()")}}</dt> @@ -41,7 +47,7 @@ var g = gen(); // "Generator { }"</pre> <h3 id="Бесконечный_Итератор">Бесконечный Итератор</h3> -<pre class="brush: js">function* idMaker() { +<pre class="brush: js notranslate">function* idMaker() { var index = 0; while(true) yield index++; @@ -54,39 +60,7 @@ console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 // ...</pre> -<h2 id="Legacy_generator_objects">Legacy generator objects</h2> - -<p>Firefox (SpiderMonkey) also implements an earlier version of generators in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>, where the star (*) in the function declaration was not necessary (you just use the <code>yield</code> keyword in the function body). However, legacy generators are deprecated. Do not use them; they are going to be removed ({{bug(1083482)}}).</p> - -<h3 id="Legacy_generator_methods">Legacy generator methods</h3> - -<dl> - <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt> - <dd>Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression. This corresponds to <code>next()</code> in the ES2015 generator object.</dd> - <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt> - <dd>Closes the generator, so that when calling <code>next()</code> an {{jsxref("StopIteration")}} error will be thrown. This corresponds to the <code>return()</code> method in the ES2015 generator object.</dd> - <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt> - <dd>Used to send a value to a generator. The value is returned from the {{jsxref("Operators/yield", "yield")}} expression, and returns a value yielded by the next {{jsxref("Operators/yield", "yield")}} expression. <code>send(x)</code> corresponds to <code>next(x)</code> in the ES2015 generator object.</dd> - <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt> - <dd>Throws an error to a generator. This corresponds to the <code>throw()</code> method in the ES2015 generator object.</dd> -</dl> - -<h3 id="Legacy_generator_example">Legacy generator example</h3> - -<pre class="brush: js">function fibonacci() { - var a = yield 1; - yield a * 2; -} - -var it = fibonacci(); -console.log(it); // "Generator { }" -console.log(it.next()); // 1 -console.log(it.send(10)); // 20 -console.log(it.close()); // undefined -console.log(it.next()); // throws StopIteration (as the generator is now closed) -</pre> - -<h2 id="Specifications">Specifications</h2> +<h2 id="Спецификации">Спецификации</h2> <table class="standard-table"> <tbody> @@ -103,73 +77,22 @@ console.log(it.next()); // throws StopIteration (as the generator is now close <tr> <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td> <td>{{Spec2('ESDraft')}}</td> - <td> </td> + <td></td> </tr> </tbody> </table> -<h2 id="Browser_compatibility">Browser compatibility</h2> +<h2 id="Совместимость">Совместимость</h2> -<p>{{CompatibilityTable}}</p> -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(39.0)}}</td> - </tr> - </tbody> -</table> -</div> +<p>{{Compat("javascript.builtins.Generator")}}</p> <h2 id="See_also">See also</h2> <h3 id="Legacy_generators">Legacy generators</h3> <ul> - <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li> - <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li> - <li>{{jsxref("StopIteration")}}</li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li> </ul> |