Skip to content

Commit

Permalink
convert to markdown for conflicting
Browse files Browse the repository at this point in the history
  • Loading branch information
@yin1999
yin1999 committed Dec 13, 2022
1 parent 0522538 commit 788a812
Show file tree
Hide file tree
Showing 55 changed files with 2,514 additions and 2,723 deletions.
846 changes: 422 additions & 424 deletions files/ru/conflicting/learn/javascript/asynchronous/index.md
View file

Large diffs are not rendered by default.

183 changes: 100 additions & 83 deletions files/ru/conflicting/learn/javascript/asynchronous/introducing/index.md
View file

Large diffs are not rendered by default.

401 changes: 217 additions & 184 deletions files/ru/conflicting/learn/javascript/objects/classes_in_javascript/index.md
View file

Large diffs are not rendered by default.

8 changes: 3 additions & 5 deletions files/ru/conflicting/mdn/writing_guidelines/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,8 @@ translation_of: MDN/Guidelines
original_slug: MDN/Guidelines
---

<div>{{MDNSidebar}}</div>
{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}

<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
Эти руководства содержат подробную информацию о том, как должна быть написана и отформатирована документация MDN, а также о том, как должны быть представлены наши образцы кода и другой контент. Следуя этим руководствам, вы можете быть уверены, что производимый вами материал будет чистым и простым в использовании.

<p><span class="tlid-translation translation" lang="ru"><span class="seoSummary"><span title="">Эти руководства содержат подробную информацию о том, как должна быть написана и отформатирована документация MDN, а также о том, как должны быть представлены наши образцы кода и другой контент.</span></span> <span title="">Следуя этим руководствам, вы можете быть уверены, что производимый вами материал будет чистым и простым в использовании.</span></span></p>

<p>{{LandingPageListSubpages}}</p>
{{LandingPageListSubpages}}
114 changes: 54 additions & 60 deletions files/ru/conflicting/mdn/writing_guidelines/page_structures/live_samples/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,43 +5,36 @@ translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_lear
original_slug: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web
---

<div>{{MDNSidebar}}</div>
{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}

<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
При изучении веба, важно полагаться на активном обучающем контенте. Такой контент создан для помощи в изучении чего-либо проактивно. Это может быть упражнения, живые взламываемые примеры, задачи к исполнению, оценки и т.д. Вкратце, всё что может помочь кому-либо в активном понимании чего-либо.

<p>При изучении веба, важно полагаться на активном обучающем контенте. Такой контент создан для помощи в изучении чего-либо проактивно. Это может быть упражнения, живые взламываемые примеры, задачи к исполнению, оценки и т.д. Вкратце, всё что может помочь кому-либо в активном понимании чего-либо.</p>
Нет прямого способа для создания такого контента. Например существует много сторонних инструментов которые помогут в создании живых примеров (см: [JSFiddle](https://jsfiddle.net/), [CodePen](https://codepen.io/), [Dabblet](http://dabblet.com/), и т.д.) которые вы можете ссылаться из MDN статей. Если вы хотите создать более продвинутые упражнения, то можете воспользоваться [Thimble](https://thimble.mozilla.org) из проекта WebMaker.

<p>Нет прямого способа для создания такого контента. Например существует много сторонних инструментов которые помогут в создании живых примеров (см: <a href="https://jsfiddle.net/" rel="external">JSFiddle</a>, <a href="https://codepen.io/">CodePen</a>, <a href="http://dabblet.com/">Dabblet</a>, и т.д.) которые вы можете ссылаться из MDN статей. Если вы хотите создать более продвинутые упражнения, то можете воспользоваться <a href="https://thimble.mozilla.org" rel="external">Thimble</a> из проекта WebMaker.</p>
На данный момент MDN не имеет лёгкого инструмента для пометки автора такого контента. Однако, если вы являетесь программистом, то можете воспользоваться текущими MDN функциями для создания своего активного обучающего контента. Читайте далее для того чтобы узнать как это сделать.

<p>На данный момент MDN не имеет лёгкого инструмента для пометки автора такого контента. Однако, если вы являетесь программистом, то можете воспользоваться текущими MDN функциями для создания своего активного обучающего контента. Читайте далее для того чтобы узнать как это сделать.</p>
## MDN live samples

<h2 id="MDN_live_samples">MDN live samples</h2>
MDN has a very cool feature called **live samples**. It's a mechanism that turns any HTML, CSS, and JavaScript code inside an MDN page into its executed equivalent. Before using it, you should read over [Using the live sample system](/ru/docs/MDN/Contribute/Editor/Live_samples), which is our complete documentation for building them. While they're easy to do, there are quirks and tricks you'll learn along the way.

<p>MDN has a very cool feature called <strong>live samples</strong>. It's a mechanism that turns any HTML, CSS, and JavaScript code inside an MDN page into its executed equivalent. Before using it, you should read over <a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">Using the live sample system</a>, which is our complete documentation for building them. While they're easy to do, there are quirks and tricks you'll learn along the way.</p>
What is interesting is that it's really easy to tweak that feature to use it in order to embed any kind of tool or utility you want into an MDN page.

<p>What is interesting is that it's really easy to tweak that feature to use it in order to embed any kind of tool or utility you want into an MDN page.</p>
### Hidden code

<h3 id="Hidden_code">Hidden code</h3>
The first way to use a code sample to create active learning content is to edit the page where you want to add your content. Use the Live Sample feature to create your content as you wish. Don't bother with the code complexity you could write; just create what you need. Once your content is ready, just switch to the editor code view and surround your code with a simple {{HTMLElement('div')}} element with the class `hidden`. By doing so, your code won't be displayed but your live sample remains accessible and displayable.

<p>The first way to use a code sample to create active learning content is to edit the page where you want to add your content. Use the Live Sample feature to create your content as you wish. Don't bother with the code complexity you could write; just create what you need. Once your content is ready, just switch to the editor code view and surround your code with a simple {{HTMLElement('div')}} element with the class <code>hidden</code>. By doing so, your code won't be displayed but your live sample remains accessible and displayable.</p>
Let's see a simple example:

<p>Let's see a simple example:</p>
Click on the following square to randomly change its color or just type a hexadecimal code color

<div class="moreinfo">
<p>Click on the following square to randomly change its color or just type a hexadecimal code color</p>

<div class="hidden">
<h4 id="hidden_code_example">hidden code example</h4>

<h5 id="HTML">HTML</h5>

<pre class="brush: html">&lt;div class="square"&gt;
#&lt;input class="color"&gt;
&lt;/div&gt;</pre>

<h5 id="CSS">CSS</h5>
```html hidden
<div class="square">
#<input class="color">
</div>
```

<pre class="brush: css">body {
```css hidden
body {
padding: 10px;
margin : 0;
}
Expand All @@ -59,11 +52,10 @@ original_slug: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learn
width: 60px;
text-transform: uppercase;
}
</pre>
```

<h5 id="JS">JS</h5>

<pre class="brush: js">function setColor(color) {
```js hidden
function setColor(color) {
document.querySelector('.square').style.backgroundColor = '#' + color;
document.querySelector('.color').value = color;
}
Expand All @@ -89,28 +81,29 @@ document.addEventListener('click', function () {
document.addEventListener('keyup', function () {
setColor(getInputColor());
});
</pre>
</div>
{{EmbedLiveSample('hidden_code_example', 120, 120)}}</div>
```

<p>If you take a look at that page HTML code with the MDN editor, you'll see the exact following HTML code:</p>
{{EmbedLiveSample('hidden_code_example', 120, 120)}}

<pre class="brush: html">&lt;div class="moreinfo"&gt;
&lt;p&gt;Click on the following square to randomly change its color or just type an hexadecimal code color&lt;/p&gt;
If you take a look at that page HTML code with the MDN editor, you'll see the exact following HTML code:

&lt;div class="hidden"&gt;
&lt;h4 id="hidden_code_example"&gt;hidden code example&lt;/h4&gt;
```html
<div class="moreinfo">
<p>Click on the following square to randomly change its color or just type an hexadecimal code color</p>

&lt;h5 id="HTML"&gt;HTML&lt;/h5&gt;
<div class="hidden">
<h4 id="hidden_code_example">hidden code example</h4>

&lt;pre class="brush: html"&gt;
&amp;lt;div class="square"&amp;gt;
#&amp;lt;input class="color"&amp;gt;
&amp;lt;/div&amp;gt;&lt;/pre&gt;
<h5 id="HTML">HTML</h5>

&lt;h5 id="CSS"&gt;CSS&lt;/h5&gt;
<pre class="brush: html">
&lt;div class="square"&gt;
#&lt;input class="color"&gt;
&lt;/div&gt;</pre>

<h5 id="CSS">CSS</h5>

&lt;pre class="brush: css"&gt;
<pre class="brush: css">
body {
padding: 10px;
margin : 0;
Expand All @@ -129,11 +122,11 @@ body {
width: 60px;
text-transform: uppercase;
}
&lt;/pre&gt;
</pre>

&lt;h5 id="JS"&gt;JS&lt;/h5&gt;
<h5 id="JS">JS</h5>

&lt;pre class="brush: js"&gt;
<pre class="brush: js">
function setColor(color) {
document.querySelector('.square').style.backgroundColor = '#' + color;
document.querySelector('.color').value = color;
Expand All @@ -160,26 +153,27 @@ document.addEventListener('click', function () {
document.addEventListener('keyup', function () {
setColor(getInputColor());
});
&lt;/pre&gt;
&lt;/div&gt;
</pre>
</div>

\{{EmbedLiveSample('hidden_code_example', 120, 120)}}
&lt;/div&gt;</pre>
</div>
```

<p>You can see a more advance example of such a tweak on <a href="/en-US/docs/Web/API/Canvas_API#JavaScript">the Canvas API page</a>.</p>
You can see a more advance example of such a tweak on [the Canvas API page](/ru/docs/Web/API/Canvas_API#JavaScript).

<h3 id="Code_from_outside_the_page">Code from outside the page</h3>
### Code from outside the page

<p>The previous example is okay if you want to embed basic active learning content. However, if you want to deal with complex code, it can become a bit awkward to deal with that <code>hidden</code> class wrapper.</p>
The previous example is okay if you want to embed basic active learning content. However, if you want to deal with complex code, it can become a bit awkward to deal with that `hidden` class wrapper.

<p>So another option is to write the code of your learning content on an MDN page and then embed it into another page. To do this we can use the <a href="https://github.com/mdn/yari/blob/main/kumascript/macros/EmbedLiveSample.ejs">EmbedLiveSample</a> macro instead of the {{TemplateLink("EmbedLiveSample")}} macro.</p>
So another option is to write the code of your learning content on an MDN page and then embed it into another page. To do this we can use the [`EmbedDistLiveSample`](https://github.com/mdn/yari/tree/main/kumascript/macros/EmbedDistLiveSample.ejs) macro instead of the [`EmbedLiveSample`](https://github.com/mdn/yari/tree/main/kumascript/macros/EmbedLiveSample.ejs) macro.

<p>Let's how that sample looks when configured as if it were being embedded from a remote origin:</p>
Let's how that sample looks when configured as if it were being embedded from a remote origin:

<div class="moreinfo">
<p>Click on the following square to randomly change its color or just type a hexadecimal code color</p>
{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}</div>
Click on the following square to randomly change its color or just type a hexadecimal code color

{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}

<p>This time, if you take a <a href="/en-US/docs/MDN/Contribute/Editor/Source_mode">look at that page's HTML using the MDN editor</a>, you'll see no hidden code. If you want to see the code, just go to <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example">the page that hosts it</a>.</p>
This time, if you take a [look at that page's HTML using the MDN editor](/ru/docs/MDN/Contribute/Editor/Source_mode), you'll see no hidden code. If you want to see the code, just go to [the page that hosts it](/ru/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example).

<p>You can see a more advanced example of this usage in our <a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets">HTML Form tutorial</a>, which uses this technique to allow experimentation with forms.</p>
You can see a more advanced example of this usage in our [HTML Form tutorial](/ru/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets), which uses this technique to allow experimentation with forms.
33 changes: 16 additions & 17 deletions files/ru/conflicting/web/api/abortsignal/abort_event/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,38 +5,37 @@ translation_of: Web/API/AbortSignal/onabort
original_slug: Web/API/AbortSignal/onabort
---

<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
{{APIRef("DOM")}}{{SeeCompatTable}}

<p>Свойство <strong><code>onabort</code></strong> интерфейса {{domxref("AbortSignal")}} является обработчиком события {{event("abort_(cancellable_fetch)", "abort")}} и вызывается при его срабатывании, т.е. когда fetch запрос(ы), с которым связан сигнал, был отменён.</p>
Свойство **`onabort`** интерфейса {{domxref("AbortSignal")}} является обработчиком события {{event("abort_(cancellable_fetch)", "abort")}} и вызывается при его срабатывании, т.е. когда fetch запрос(ы), с которым связан сигнал, был отменён.

<h2 id="Синтаксис">Синтаксис</h2>
## Синтаксис

<pre class="brush: js">abortSignal.onabort = function() { ... };</pre>
```js
abortSignal.onabort = function() { ... };
```

<h2 id="Примеры">Примеры</h2>
## Примеры

<p>В следующем фрагменте мы создаём новый объект {{domxref("AbortController")}}, и получаем его {{domxref("AbortSignal")}} (доступно в свойстве <code>signal</code>). Позже с помощью свойства <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">onabort</span></font> мы проверяем, был ли прерван сигнал, и выводим соответствующее сообщение в консоль.</p>
В следующем фрагменте мы создаём новый объект {{domxref("AbortController")}}, и получаем его {{domxref("AbortSignal")}} (доступно в свойстве `signal`). Позже с помощью свойства onabort мы проверяем, был ли прерван сигнал, и выводим соответствующее сообщение в консоль.

<pre class="brush: js">var controller = new AbortController();
```js
var controller = new AbortController();
var signal = controller.signal;

signal.onabort = function() {
console.log('Запрос прерван');
};
</pre>
```

<h2 id="Спецификации">Спецификации</h2>
## Спецификации

{{Specifications}}

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
## Совместимость с браузерами

{{Compat}}

## Смотрите также

<p>{{Compat}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
<li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
</ul>
- [Fetch API](/ru/docs/Web/API/Fetch_API)
Loading

0 comments on commit 788a812

Please sign in to comment.